/* ZTERP 공통 모양 (03_비기능 '화면 공통'): 얇은 구분선, 둥근 걸러보기 단추, 상태 꼬리표, 평소엔 입력칸이 안 보이는 표.
   기준: 글자 14px, 단추·입력 높이 32px(작은 것 30px), 모서리 8px(카드 12px), 표 줄 높이 약 38px. 색은 아래 변수로만 쓴다. */

:root {
    --zt-text: #111827;
    --zt-text-2: #2f3a48;
    --zt-muted: #535e6f;
    --zt-faint: #8b95a3;
    --zt-line: #e5e8ec;
    --zt-line-soft: #eef0f3;
    --zt-line-strong: #cfd5dd;
    --zt-bg: #f4f6f8;
    --zt-surface: #ffffff;
    --zt-head: #f8f9fb;
    --zt-hover: #f5f8fd;
    --zt-primary: #1f4fd8;
    --zt-primary-hover: #1943bb;
    --zt-primary-soft: #edf2fd;
    --zt-primary-line: #b7c7f3;
    --zt-ok: #1a8a4a;
    --zt-ok-soft: #e3f4ea;
    --zt-bad: #cc3d3d;
    --zt-bad-soft: #fbe9e9;
    --zt-warn: #b98900;
    --zt-warn-soft: #fbf3d9;
    --zt-info: #2a6fd6;
    --zt-info-soft: #e6effc;
    --zt-radius: 8px;
    --zt-radius-lg: 12px;
    --zt-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    --zt-shadow-pop: 0 8px 24px rgba(16, 24, 40, .14);
    --zt-h: 32px;
    --zt-h-sm: 30px;
    --zt-appbar-h: 56px;
    /* 글자 종류별 색 (2026-10-13 장민혁 책임 요청 '글자 별 색상'): 코드·금액·날짜·거래처/제조사·사람·수량 */
    --zt-c-code: #2c3fb4;
    --zt-c-money: #0b6b50;
    --zt-c-date: #6246b0;
    --zt-c-vendor: #94560c;
    --zt-c-person: #b0306a;
    --zt-c-qty: #0e5f8a;
    /* 상태 색 (요청 주황, 주문 노랑, 입고 파랑, 설치 초록, 재고처리·취소 빨강, 불량처리 주황) */
    --zt-tone-orange: #c2410c; --zt-tone-orange-bg: #ffedd5; --zt-tone-orange-row: #fff8f0;
    --zt-tone-yellow: #925f00; --zt-tone-yellow-bg: #fef3c7; --zt-tone-yellow-row: #fffcef;
    --zt-tone-blue: #1d4ed8; --zt-tone-blue-bg: #dbeafe; --zt-tone-blue-row: #f4f8ff;
    --zt-tone-green: #157a3d; --zt-tone-green-bg: #dcfce7; --zt-tone-green-row: #f3fcf6;
    --zt-tone-red: #b91c1c; --zt-tone-red-bg: #fee2e2; --zt-tone-red-row: #fff5f5;
}

html, body {
    font-family: "Noto Sans KR", "Noto Sans", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
    color: var(--zt-text);
    background: var(--zt-bg);
    font-size: 15px;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--zt-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 650; }

/* ======================= 틀: 위쪽 메뉴 · 왼쪽 목록 · 꼬리글 ======================= */
.zt-appbar { border-bottom: 1px solid var(--zt-line); }
/* 위쪽 메뉴 높이 56px: 고른 메뉴의 밑줄이 메뉴 띠 안쪽 아래 끝에 붙고 본문을 침범하지 않게 (2026-10-13) */
.zt-appbar .mud-toolbar-appbar { height: var(--zt-appbar-h) !important; min-height: var(--zt-appbar-h) !important; }
.zt-main.mud-main-content { padding-top: var(--zt-appbar-h); }
.zt-logo { font-weight: 800; letter-spacing: .04em; font-size: 1.05rem; color: var(--zt-text) !important; margin-right: 22px; text-decoration: none !important; }
.zt-topmenu { align-items: center; height: 100%; }
.zt-nav { display: flex; gap: 2px; align-items: center; height: 100%; }
.zt-nav-item { display: flex; height: 100%; }
.zt-nav-link {
    display: flex; align-items: center; padding: 0 12px; height: var(--zt-appbar-h); box-sizing: border-box; border-top: 2px solid transparent;
    color: var(--zt-muted) !important; font-weight: 500; border-bottom: 2px solid transparent;
    text-decoration: none !important; white-space: nowrap;
}
.zt-nav-link:hover { color: var(--zt-text) !important; }
.zt-nav-link.zt-nav-active { color: var(--zt-primary) !important; border-bottom-color: var(--zt-primary); font-weight: 600; }
.zt-nav-vertical { flex-direction: column; align-items: stretch; height: auto; gap: 0; }
.zt-nav-vertical .zt-nav-item { height: auto; }
.zt-nav-vertical .zt-nav-link { height: auto; padding: 13px 20px; width: 100%; border-bottom: 1px solid var(--zt-line-soft); border-left: 3px solid transparent; }
.zt-nav-vertical .zt-nav-link.zt-nav-active { border-left-color: var(--zt-primary); background: var(--zt-primary-soft); }
.zt-mobile-drawer { width: 260px; }
.zt-mobile-logo { font-weight: 800; padding: 16px 20px; border-bottom: 1px solid var(--zt-line); }

.zt-user { text-transform: none; font-weight: 500; }
.zt-logout-form { margin: 0; }
/* 어디서나 검색 (2026-10-14 장민혁 책임 요청 A1) */
.zt-palette-trigger { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 10px; margin-right: 6px; border: 1px solid var(--zt-line); border-radius: 8px; background: var(--zt-surface); color: var(--zt-muted); font: inherit; font-size: .88rem; cursor: pointer; }
.zt-palette-trigger:hover { color: var(--zt-text); border-color: var(--zt-primary-line); }
.zt-palette-trigger kbd, .zt-palette-input kbd { font: inherit; font-size: .72rem; padding: 1px 5px; border: 1px solid var(--zt-line); border-radius: 4px; background: var(--zt-head); color: var(--zt-muted); }
.zt-palette-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, .35); z-index: 1400; }
.zt-palette { position: fixed; z-index: 1401; top: 10vh; left: 50%; transform: translateX(-50%); width: min(660px, calc(100vw - 24px)); max-height: 74vh; display: flex; flex-direction: column; background: var(--zt-surface); border-radius: 14px; box-shadow: 0 20px 50px rgba(17, 24, 39, .3); overflow: hidden; }
.zt-palette-input { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--zt-line); color: var(--zt-muted); }
.zt-palette-input input { flex: 1; border: 0; outline: none; font: inherit; font-size: 1.02rem; color: var(--zt-text); background: transparent; min-width: 0; }
.zt-palette-list { overflow: auto; padding: 6px 0; }
.zt-palette-group { padding: 8px 16px 4px; font-size: .76rem; font-weight: 700; color: var(--zt-muted); }
.zt-palette-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 16px; color: var(--zt-text) !important; text-decoration: none !important; cursor: pointer; }
.zt-palette-item.zt-on { background: var(--zt-primary-soft); box-shadow: inset 3px 0 0 var(--zt-primary); }
.zt-palette-label { font-weight: 600; white-space: nowrap; }
.zt-palette-sub { color: var(--zt-muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.zt-palette-empty { padding: 18px 16px; color: var(--zt-muted); }
.zt-palette-foot { padding: 8px 14px; border-top: 1px solid var(--zt-line-soft); font-size: .76rem; color: var(--zt-muted); background: var(--zt-head); }
@media (max-width: 640px) { .zt-palette { top: 8px; max-height: calc(100vh - 16px); } .zt-palette-trigger { border: 0; padding: 0 6px; } }
/* 위쪽 오른쪽 휴지통 (2026-10-13 장민혁 책임 요청) */
.zt-trash-link { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; margin-right: 6px; border-radius: 8px; color: var(--zt-muted) !important; font-size: .9rem; font-weight: 500; text-decoration: none !important; }
.zt-trash-link:hover { background: var(--zt-hover); color: var(--zt-text) !important; }
.zt-trash-link.zt-trash-active { color: var(--zt-primary) !important; background: var(--zt-primary-soft); }
.zt-trash-blocked { color: #7d5d00 !important; }
.zt-logout-btn { display: flex; align-items: center; width: 100%; padding: 8px 16px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--zt-text); text-align: left; }
.zt-logout-btn:hover { background: var(--zt-bg); }

.zt-main { background: var(--zt-bg); min-height: 100vh; display: flex; flex-direction: column; }
.zt-body { display: flex; flex: 1; align-items: stretch; }
.zt-content { flex: 1; min-width: 0; padding: 20px 28px 36px; }
.zt-left { width: 264px; flex: 0 0 264px; background: var(--zt-surface); border-right: 1px solid var(--zt-line); display: flex; flex-direction: column; }
.zt-left-collapsed { width: 40px; flex-basis: 40px; }
.zt-left-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--zt-line); min-height: 44px; }
.zt-left-collapsed .zt-left-head { justify-content: center; padding: 8px 2px; }
.zt-left-collapsed .zt-left-title { display: none; }
.zt-left-title { font-weight: 600; color: var(--zt-muted); font-size: .85rem; }
.zt-left-content { overflow: auto; flex: 1; }
.zt-left-content .zt-search, .zt-left-content > div > input.zt-inline-input { margin: 10px; }

.zt-footer { display: flex; gap: 8px; align-items: center; padding: 8px 28px; border-top: 1px solid var(--zt-line); color: var(--zt-muted); font-size: .81rem; background: var(--zt-surface); }
.zt-docstatus-ok { color: var(--zt-ok); }
.zt-docstatus-bad { color: var(--zt-bad); }
.zt-docstatus-wait { color: var(--zt-muted); }

/* ======================= 글자·제목·머리 ======================= */
.zt-page-title { font-size: 1.3rem; font-weight: 750; letter-spacing: -.01em; margin: 0 0 4px; line-height: 1.35; }
.zt-page-title:focus, h1:focus { outline: none; }
.zt-page-title + p.zt-muted { font-size: .86rem; margin: 0 0 14px; }
.zt-section-title { font-size: 1rem; font-weight: 700; margin: 0 6px 0 0; line-height: 1.4; }
.zt-section-title .zt-cell { white-space: nowrap; }
.zt-muted { color: var(--zt-muted); }
.zt-faint { color: var(--zt-faint); }
.zt-hint { color: var(--zt-muted); font-size: .83rem; line-height: 1.5; }
.zt-error { color: var(--zt-bad); font-size: .86rem; }
.zt-sub { display: block; font-size: .81rem; color: var(--zt-muted); line-height: 1.45; }
.zt-count { color: var(--zt-muted); font-size: .85rem; }
.zt-nowrap { white-space: nowrap; }

.zt-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--zt-muted); font-size: .86rem; margin-bottom: 8px; min-height: 30px; }
.zt-crumb a { color: var(--zt-muted); text-decoration: none; }
.zt-crumb a:hover { color: var(--zt-primary); text-decoration: underline; }
.zt-crumb .zt-spacer { flex: 1; }
.zt-head-code { font-size: 1.3rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.35; overflow-wrap: anywhere; }
.zt-head-line { color: var(--zt-muted); margin: 2px 0 10px; font-size: .88rem; }

/* 머리 묶음: 제목 줄(제목 + 단추) */
.zt-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.zt-page-head .zt-head-code, .zt-page-head .zt-page-title { flex: 1 1 320px; min-width: 0; margin: 0; }
.zt-page-head-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* 숫자 요약(재료비·인건비·합계 등) */
.zt-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; margin: 6px 0 14px; font-size: .85rem; color: var(--zt-muted); }
.zt-summary b { font-weight: 700; margin-left: 6px; font-size: 1.05rem; color: var(--zt-text); font-variant-numeric: tabular-nums; }
.zt-toolbar .zt-summary { margin: 0; }

/* 이름-값 묶음(요청 화면 머리 등): 값 위에 작은 이름 */
.zt-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 24px; margin-top: 12px; }
.zt-meta > div { min-width: 0; }
.zt-meta-label { display: block; font-size: .81rem; color: var(--zt-muted); margin-bottom: 2px; }
.zt-meta-wide { grid-column: 1 / -1; }

/* ======================= 카드·패널 ======================= */
.zt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 16px 0; }
.zt-card { background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: var(--zt-radius-lg); padding: 16px 18px; box-shadow: var(--zt-shadow); }
.zt-card-link { display: block; color: inherit !important; text-decoration: none !important; transition: border-color .12s, box-shadow .12s; }
.zt-card-link:hover { border-color: var(--zt-primary-line); box-shadow: 0 2px 10px rgba(31, 79, 216, .10); }
.zt-card-title { font-weight: 700; margin-bottom: 8px; font-size: .95rem; }
.zt-status-card { max-width: 560px; }
.zt-coming { display: flex; gap: 14px; align-items: center; max-width: 560px; }
.zt-coming-icon { font-size: 2rem; color: var(--zt-muted); }
.zt-coming-title { font-weight: 600; }
.zt-panel { background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: var(--zt-radius-lg); box-shadow: var(--zt-shadow); overflow: hidden; }
.zt-panel-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--zt-line); font-weight: 600; }
.zt-panel-pad { padding: 16px 18px; }
.zt-panel + .zt-panel, .zt-panel + .zt-toolbar { margin-top: 14px; }
.zt-box-title { font-size: .83rem; color: var(--zt-muted); font-weight: 600; margin-bottom: 6px; }

.zt-kv { border-collapse: collapse; width: 100%; }
.zt-kv th { text-align: left; color: var(--zt-muted); font-weight: 500; padding: 7px 12px 7px 0; width: 120px; font-size: .85rem; }
.zt-kv td { padding: 7px 0; border-top: 1px solid var(--zt-line-soft); }
.zt-kv tr:first-child td, .zt-kv tr:first-child th { border-top: 0; }

/* ======================= 꼬리표 ======================= */
.zt-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: .79rem; font-weight: 650; line-height: 1.65; white-space: nowrap; vertical-align: middle; }
.zt-tag-ok { background: var(--zt-ok-soft); color: var(--zt-ok); }
.zt-tag-bad { background: var(--zt-bad-soft); color: var(--zt-bad); }
.zt-tag-info { background: var(--zt-info-soft); color: var(--zt-info); }
.zt-tag-warn { background: var(--zt-warn-soft); color: #7d5d00; }
.zt-tag-muted { background: #eef0f3; color: var(--zt-muted); }
.zt-draft-tag { display: inline-flex; background: var(--zt-warn-soft); color: #7d5d00; border-radius: 999px; padding: 1px 8px; font-size: .79rem; font-weight: 650; margin-left: 6px; vertical-align: middle; }

/* ======================= 단추 (MudBlazor 단추와 직접 만든 단추를 같은 모양으로) ======================= */
.mud-button-root { text-transform: none !important; letter-spacing: 0 !important; font-family: inherit !important; font-weight: 600 !important; border-radius: var(--zt-radius) !important; box-shadow: none !important; }
.mud-button-filled, .mud-button-outlined, .mud-button-text { min-height: var(--zt-h); padding: 0 14px !important; font-size: .86rem !important; line-height: 1.2 !important; }
.mud-button-filled-size-small, .mud-button-outlined-size-small { min-height: var(--zt-h-sm); padding: 0 12px !important; font-size: .85rem !important; }
.mud-button-text-size-small { min-height: 28px; padding: 0 8px !important; font-size: .85rem !important; }
.mud-button-outlined { border: 1px solid var(--zt-line-strong) !important; background: var(--zt-surface) !important; color: var(--zt-text-2); }
.mud-button-outlined:hover { background: var(--zt-hover) !important; border-color: #b6bfcb !important; }
.mud-button-outlined-primary { color: var(--zt-primary) !important; border-color: var(--zt-primary-line) !important; }
.mud-button-outlined-primary:hover { background: var(--zt-primary-soft) !important; }
.mud-button-outlined-error { color: var(--zt-bad) !important; border-color: #efc2c2 !important; }
.mud-button-outlined-error:hover { background: var(--zt-bad-soft) !important; }
.mud-button-outlined-warning { color: #8a6500 !important; border-color: #ecd99a !important; }
.mud-button-outlined-warning:hover { background: var(--zt-warn-soft) !important; }
.mud-button-filled-primary:hover { background: var(--zt-primary-hover) !important; }
.mud-button-text { color: var(--zt-primary); }
.mud-button-text:hover { background: var(--zt-primary-soft) !important; }
.mud-button-text-error { color: var(--zt-bad) !important; }
.mud-button-root .mud-button-icon-start { margin-right: 4px; margin-left: -4px; }
.mud-button-root .mud-button-icon-size-small > .mud-icon-root { font-size: 1.05rem; }
.mud-button-root.mud-disabled { opacity: .55; }

.zt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--zt-h-sm); padding: 0 12px;
    border-radius: var(--zt-radius); border: 1px solid var(--zt-line-strong); background: var(--zt-surface); color: var(--zt-text-2);
    font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: none !important; white-space: nowrap;
}
.zt-btn:hover { background: var(--zt-hover); border-color: #b6bfcb; }
.zt-btn-primary { background: var(--zt-primary); border-color: var(--zt-primary); color: #fff; }
.zt-btn-primary:hover { background: var(--zt-primary-hover); border-color: var(--zt-primary-hover); }
.zt-file-btn { position: relative; overflow: hidden; cursor: pointer; }
.zt-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.zt-link-btn, .zt-tree-add { background: none; border: 0; color: var(--zt-primary); font: inherit; font-size: .85rem; font-weight: 600; padding: 4px 0; cursor: pointer; }
.zt-link-btn:hover, .zt-tree-add:hover { text-decoration: underline; }
.zt-tree-add { padding: 4px 12px 8px 26px; }

/* ======================= 입력칸 ======================= */
.zt-inline-input, .zt-form input:not([type=checkbox]):not([type=radio]), .zt-form select, .zt-form textarea, .zt-field input {
    min-height: var(--zt-h); padding: 5px 10px; border: 1px solid var(--zt-line-strong); border-radius: var(--zt-radius);
    font: inherit; font-size: .875rem; background: #fff; color: var(--zt-text); min-width: 0; box-sizing: border-box;
}
.zt-form input:not([type=checkbox]):not([type=radio]), .zt-form select, .zt-form textarea { width: 100%; }
.zt-form textarea, textarea.zt-inline-input { min-height: 60px; resize: vertical; }
.zt-inline-input:focus, .zt-form input:focus, .zt-form select:focus, .zt-form textarea:focus, .zt-field input:focus {
    outline: none; border-color: var(--zt-primary); box-shadow: 0 0 0 3px var(--zt-primary-soft);
}
.zt-form input[type=checkbox], .zt-form input[type=radio], .zt-check input { width: auto; min-height: 0; margin: 0; accent-color: var(--zt-primary); }
input::placeholder, textarea::placeholder { color: var(--zt-faint); }
select.zt-inline-input { padding-right: 6px; }

.zt-form { display: grid; grid-template-columns: 1fr; gap: 12px; min-width: min(480px, 88vw); }
.zt-form-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; }
.zt-form-row > label { color: var(--zt-muted); font-size: .86rem; }
.zt-card .zt-form { min-width: 0; }
/* 카드 안 양식은 이름을 위에 */
.zt-card .zt-form-row { grid-template-columns: 1fr; gap: 4px; align-items: start; }
.zt-card .zt-form-row > label { font-size: .83rem; font-weight: 600; }
.zt-check { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--zt-text-2); cursor: pointer; }

/* ======================= 검색·걸러보기·툴바 ======================= */
.zt-toolbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 4px 0 12px; }
.zt-toolbar .zt-spacer, .zt-spacer { flex: 1; }
.zt-search { display: flex; align-items: center; gap: 6px; background: var(--zt-surface); border: 1px solid var(--zt-line-strong); border-radius: 999px; padding: 0 14px; min-height: 34px; min-width: 220px; flex: 1 1 280px; max-width: 520px; }
.zt-search:focus-within { border-color: var(--zt-primary); box-shadow: 0 0 0 3px var(--zt-primary-soft); }
.zt-search .mud-icon-root { color: var(--zt-muted); }
.zt-search input { border: 0; outline: 0; background: transparent; font: inherit; width: 100%; color: var(--zt-text); }
.zt-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.zt-chip {
    display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--zt-line-strong); background: var(--zt-surface); color: var(--zt-text-2); font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.zt-chip:hover { border-color: var(--zt-primary-line); }
.zt-chip-on { background: var(--zt-primary-soft); border-color: var(--zt-primary-line); color: var(--zt-primary); font-weight: 600; }
.zt-chip select { border: 0; background: transparent; font: inherit; color: inherit; outline: 0; cursor: pointer; max-width: 170px; padding: 4px 0; }
.zt-toggle { display: inline-flex; border: 1px solid var(--zt-line-strong); border-radius: 999px; overflow: hidden; background: var(--zt-surface); }
.zt-toggle button { background: transparent; border: 0; padding: 0 14px; min-height: 30px; font: inherit; font-size: .84rem; cursor: pointer; color: var(--zt-text-2); }
.zt-toggle button + button { border-left: 1px solid var(--zt-line); }
.zt-toggle button.zt-on { background: var(--zt-primary); color: #fff; font-weight: 600; }
.zt-select-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--zt-primary-soft); color: var(--zt-primary); border-radius: 999px; padding: 3px 10px; font-size: .84rem; }
.zt-select-chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.zt-chip-range input { width: 5.5em; border: 0; border-bottom: 1px solid var(--zt-line); background: transparent; font: inherit; font-size: .85rem; padding: 0 2px; outline: 0; text-align: right; }
.zt-chip-range input:focus { border-bottom-color: var(--zt-primary); }
.zt-unit { color: var(--zt-muted); font-size: .83rem; margin-left: 2px; }
.zt-bulk-count { font-weight: 700; color: var(--zt-primary); }
.zt-bulk-group { display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid var(--zt-primary-line); }
@media (max-width: 640px) { .zt-bulk-group { border-left: 0; padding-left: 0; } }
.zt-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--zt-primary-soft); border: 1px solid var(--zt-primary-line); border-radius: var(--zt-radius); margin-bottom: 10px; font-size: .88rem; }

/* ======================= 탭 ======================= */
/* 부품 화면 위쪽 파트 띠 (2026-10-13 장민혁 책임 요청): 지금 고른 파트를 강조 */
.zt-major-bar { display: flex; align-items: center; gap: 6px; margin: 4px 0 14px; padding: 6px; background: var(--zt-surface, #fff); border: 1px solid var(--zt-line); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.zt-major-bar-label { font-size: .85rem; font-weight: 600; color: var(--zt-muted); padding: 0 8px 0 6px; white-space: nowrap; }
.zt-major-pill { padding: 6px 16px; border-radius: 999px; color: var(--zt-text-2) !important; font-weight: 500; white-space: nowrap; text-decoration: none !important; border: 1px solid transparent; }
.zt-major-pill:hover { background: var(--zt-hover); }
.zt-major-pill.zt-major-on { background: var(--zt-primary); color: #fff !important; font-weight: 700; box-shadow: 0 1px 3px rgba(31, 79, 216, .35); }
.zt-major-cell .zt-cell-view { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.zt-major-tag { font-size: .78rem; }
.zt-major-check { display: inline-block; width: 1.2em; color: var(--zt-primary); font-weight: 700; }
.zt-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--zt-line); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.zt-tab { padding: 9px 14px; border: 0; background: none; font: inherit; color: var(--zt-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none !important; font-weight: 500; }
.zt-tab:hover { color: var(--zt-text); }
.zt-tab-on { color: var(--zt-primary); border-bottom-color: var(--zt-primary); font-weight: 650; }
.zt-tabs-count { display: flex; gap: 18px; margin: 0 0 10px; font-size: .9rem; border-bottom: 1px solid var(--zt-line); overflow-x: auto; }
.zt-tabs-count button { background: none; border: 0; padding: 8px 0; font: inherit; color: var(--zt-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.zt-tabs-count button.zt-on { color: var(--zt-primary); border-bottom-color: var(--zt-primary); font-weight: 650; }
.zt-tabs-count > .zt-check, .zt-tabs-count > .zt-legend { white-space: nowrap; flex-shrink: 0; align-self: center; }
/* 휴대폰: 탭 옆의 '지운 요청 보기'·색 설명이 세로로 눌리지 않게 다음 줄로 (2026-10-14 화면 확인) */
@media (max-width: 640px) {
    .zt-tabs-count { flex-wrap: wrap; row-gap: 2px; column-gap: 14px; overflow-x: visible; }
    .zt-tabs-count > .zt-spacer { flex-basis: 100%; height: 0; }
    .zt-tabs-count > .zt-check, .zt-tabs-count > .zt-legend { padding-bottom: 6px; }
}

/* ======================= 표 ======================= */
.zt-table-scroll { overflow-x: auto; }
.zt-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--zt-surface); font-size: .94rem; }
.zt-table th { text-align: left; font-weight: 600; color: var(--zt-muted); font-size: .81rem; padding: 9px 12px; background: var(--zt-head); border-bottom: 1px solid var(--zt-line); white-space: nowrap; }
.zt-table td { padding: 9px 12px; border-bottom: 1px solid var(--zt-line-soft); vertical-align: middle; white-space: nowrap; line-height: 1.5; }
.zt-table tbody tr:last-child td { border-bottom: 0; }
.zt-table tfoot td { border-top: 1px solid var(--zt-line); border-bottom: 0; background: var(--zt-head); }
.zt-table tbody tr:hover > td { background: var(--zt-hover); }
.zt-table td.zt-wrap, .zt-table th.zt-wrap { white-space: normal; min-width: 14em; }
.zt-table td.zt-actions { text-align: right; white-space: nowrap; }
.zt-table th.zt-num, .zt-table td.zt-num, .zt-num { text-align: right; font-variant-numeric: tabular-nums; }
.zt-table tr.zt-row-hidden td { opacity: .5; }
.zt-table tr.zt-row-selected > td { background: var(--zt-primary-soft); }
.zt-table tr.zt-row-link { cursor: pointer; }
.zt-table .zt-sub { display: block; }
.zt-table td .zt-muted, .zt-table td.zt-muted { color: var(--zt-muted); }
.zt-table td.zt-empty-row { color: var(--zt-muted); padding: 22px 12px; text-align: center; white-space: normal; }
.zt-table input[type=checkbox] { accent-color: var(--zt-primary); width: 15px; height: 15px; }
.zt-group-row td { background: #f1f4f8; font-weight: 700; cursor: pointer; }
.zt-group-row .zt-count { font-weight: 400; margin-left: 6px; }
.zt-group-row .zt-req-tag { font-weight: 400; color: var(--zt-muted); font-size: .85rem; margin-left: 8px; }
.zt-caret { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; color: var(--zt-muted); cursor: pointer; user-select: none; }
.zt-caret:hover { background: var(--zt-line-soft); color: var(--zt-text); }
.zt-row-new td { background: #fbfcfe; }

/* 바로 고치기 칸 */
.zt-cell { display: inline-block; min-width: 2.5em; max-width: 100%; vertical-align: middle; }
.zt-cell-view { display: inline-block; padding: 1px 6px; margin: -1px -6px; border-radius: 5px; cursor: text; line-height: 1.5; min-height: 1.5em; }
.zt-editable .zt-cell-view:hover, .zt-editable .zt-cell-view:focus-visible { background: var(--zt-primary-soft); box-shadow: inset 0 0 0 1px var(--zt-primary-line); outline: none; }
.zt-cell-readonly .zt-cell-view { cursor: default; }
.zt-cell-empty { color: var(--zt-faint); }
.zt-cell-input { width: 100%; min-width: 6em; padding: 3px 6px; margin: -3px -6px; border: 1px solid var(--zt-primary); border-radius: 5px; font: inherit; background: #fff; color: var(--zt-text); box-shadow: 0 0 0 3px var(--zt-primary-soft); outline: none; }
.zt-num .zt-cell-input { text-align: right; }
/* 저장 중·저장됨 (2026-10-14 장민혁 책임 요청 '표 다듬기') */
.zt-cell-saving .zt-cell-view, .zt-cell-saving.zt-cell-editing { opacity: .55; }
.zt-cell-saved .zt-cell-view { animation: zt-saved 1.2s ease-out; }
@keyframes zt-saved { 0% { background: #d9f2e3; box-shadow: inset 0 0 0 1px #8fd3ad; } 100% { background: transparent; box-shadow: none; } }
.zt-cell-view:focus-visible { outline: 2px solid var(--zt-primary); outline-offset: 1px; }
/* 긴 표는 머리줄을 고정하고 표 안에서 내려 본다(휴대폰 카드 모양에서는 끔) */
.zt-table-scroll.zt-sticky { max-height: calc(100vh - var(--zt-appbar-h) - 150px); min-height: 240px; overflow: auto; scroll-padding-top: 46px; }
.zt-sticky > table > thead > tr > th { position: sticky; top: 0; z-index: 4; }
@media (max-width: 640px) { .zt-table-scroll.zt-sticky { max-height: none; } }
/* 고치는 동안 열 폭 그대로(2026-10-13 장민혁 책임 요청): 글자 자리(sizer)는 남기고 입력칸을 위에 겹친다. 숫자 칸은 오른쪽에 붙여 왼쪽으로 넓힌다 */
.zt-cell-editing { position: relative; }
.zt-cell-sizer { display: inline-block; visibility: hidden; white-space: inherit; line-height: 1.5; min-height: 1.5em; min-width: 2.5em; }
.zt-cell-editing > .zt-cell-overlay { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: calc(100% + 12px); margin: 0 -6px; z-index: 3; }
.zt-num .zt-cell-editing > .zt-cell-overlay, .zt-cell-editing.zt-num > .zt-cell-overlay { left: auto; right: 0; }
.zt-cell-overlay { min-width: 5em; }
.zt-cell-overlay[type=date] { min-width: 10em; }
.zt-cell-textarea { min-height: 4.5em; resize: vertical; }
select.zt-cell-input { padding: 2px 4px; }
.zt-editable { cursor: text; border-radius: 4px; padding: 2px 4px; margin: -2px -4px; }

/* ======================= 대화상자·알림 ======================= */
.zt-dialog-title { font-weight: 700; font-size: 1.02rem; }
.mud-dialog { border-radius: var(--zt-radius-lg) !important; }
.mud-dialog .mud-dialog-title { padding: 16px 20px 6px; }
.mud-dialog .mud-dialog-content { padding: 8px 20px 12px; }
.mud-dialog .mud-dialog-actions { padding: 10px 20px 16px; gap: 6px; }
.mud-snackbar { border-radius: 10px !important; font-size: .86rem !important; box-shadow: var(--zt-shadow-pop) !important; min-width: 260px !important; }
.zt-history .zt-history-value { max-width: 260px; overflow-wrap: anywhere; font-size: .86rem; }
.zt-history-revert td { background: #fffbe8; }

/* ======================= 왼쪽 나무 ======================= */
.zt-tree { list-style: none; margin: 0; padding: 4px 0 10px; }
.zt-tree li { margin: 0; }
.zt-tree-item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer; color: var(--zt-text); border-left: 3px solid transparent; font-size: .86rem; }
.zt-tree-item:hover { background: var(--zt-hover); }
.zt-tree-item.zt-on { background: var(--zt-primary-soft); border-left-color: var(--zt-primary); color: var(--zt-primary); font-weight: 600; }
.zt-tree-item .zt-count { margin-left: auto; }
.zt-tree-group { padding: 12px 12px 4px; font-size: .8rem; color: var(--zt-muted); font-weight: 650; letter-spacing: .02em; }
.zt-tree-child .zt-tree-item { padding-left: 26px; }
/* 통합 BOM 왼쪽 목록 (2026-10-13 장민혁 책임 요청): 프로젝트는 왼쪽·굵게, 펼침 단추는 오른쪽, 품목은 들여 쓰고 옅은 바탕·왼쪽 줄로 단계가 보이게 */
.zt-bom-proj-row { align-items: flex-start; padding-right: 8px; }
.zt-bom-proj-text { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit !important; text-decoration: none !important; }
button.zt-bom-toggle, button.zt-item-expand { border: 0; background: none; padding: 0; font: inherit; }
.zt-bom-proj-row .zt-c-code { font-weight: 700; }
.zt-bom-proj-row .zt-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-bom-toggle { flex: 0 0 auto; margin-top: 1px; font-size: 1rem; }
.zt-bom-proj-open > .zt-bom-proj-row { background: var(--zt-head); }
.zt-bom-proj-open > .zt-bom-proj-row.zt-on { background: var(--zt-primary-soft); }
.zt-bom-items { background: #f7f9fc; border-left: 2px solid var(--zt-primary-line); margin: 0 0 4px 14px; }
.zt-bom-items .zt-tree-item { padding: 5px 10px 5px 12px; font-size: .82rem; color: var(--zt-text-2); gap: 6px; }
.zt-bom-items .zt-tree-item.zt-on { background: var(--zt-primary-soft); }
.zt-bom-item-code { font-weight: 600; color: var(--zt-c-code, var(--zt-primary)); }
.zt-bom-item-name { color: var(--zt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ======================= 로그인 ======================= */
.zt-login-page { min-height: 100vh; background: var(--zt-bg); }
.zt-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.zt-login-card { width: 100%; max-width: 380px; background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: 14px; padding: 32px 28px 24px; box-shadow: 0 4px 20px rgba(16, 24, 40, .06); }
.zt-login-brand { font-size: 1.6rem; font-weight: 800; letter-spacing: .04em; text-align: center; }
.zt-login-sub { color: var(--zt-muted); text-align: center; margin-bottom: 24px; }
.zt-field { display: block; margin-bottom: 14px; }
.zt-field span { display: block; font-size: .85rem; color: var(--zt-muted); margin-bottom: 4px; font-weight: 600; }
.zt-field input { width: 100%; min-height: 40px; }
.zt-field-error, .validation-message { display: block; color: var(--zt-bad); font-size: .83rem; margin: -8px 0 10px; }
.zt-login-error { background: var(--zt-bad-soft); color: var(--zt-bad); border-radius: var(--zt-radius); padding: 8px 12px; margin-bottom: 14px; font-size: .85rem; }
.zt-login-submit { width: 100%; margin-top: 6px; min-height: 42px; font-size: .95rem; }
.zt-login-foot { color: var(--zt-muted); font-size: .83rem; text-align: center; margin: 18px 0 0; }
.zt-login-version { color: var(--zt-muted); font-size: .79rem; margin-top: 14px; }
.zt-authorizing { padding: 24px; color: var(--zt-muted); }

/* ======================= 처음 화면 ======================= */
.zt-home-card { display: flex; gap: 14px; align-items: flex-start; }
/* 처음 화면 '내 할 일' (2026-10-14 장민혁 책임 요청 A3) */
.zt-work { margin: 14px 0 20px; }
.zt-work-title { font-weight: 700; font-size: .95rem; margin: 0 0 8px; color: var(--zt-text-2); }
.zt-work-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.zt-work-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--zt-line); border-radius: 12px; background: var(--zt-surface); color: var(--zt-text) !important; text-decoration: none !important; box-shadow: inset 4px 0 0 var(--zt-primary-line); transition: border-color .12s, box-shadow .12s; }
.zt-work-card:hover, .zt-work-card:focus-visible { border-color: var(--zt-primary-line); box-shadow: inset 4px 0 0 var(--zt-primary), 0 2px 10px rgba(31, 79, 216, .10); outline: none; }
.zt-work-label { font-size: .88rem; color: var(--zt-muted); font-weight: 600; }
.zt-work-value { font-size: 1.7rem; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.zt-work-value small { font-size: .9rem; font-weight: 600; margin-left: 3px; color: var(--zt-muted); }
.zt-work-hint { font-size: .8rem; color: var(--zt-muted); }
.zt-work-zero { box-shadow: inset 4px 0 0 var(--zt-line); }
.zt-work-zero .zt-work-value { font-size: 1.15rem; color: var(--zt-faint); font-weight: 600; }
.zt-work-orange { box-shadow: inset 4px 0 0 #fb923c; }
.zt-work-yellow { box-shadow: inset 4px 0 0 #eab308; }
.zt-work-red { box-shadow: inset 4px 0 0 #ef4444; }
@media (max-width: 640px) { .zt-work-cards { grid-template-columns: 1fr 1fr; gap: 8px; } .zt-work-card { padding: 10px 12px; } .zt-work-value { font-size: 1.35rem; } }
.zt-recent-home { margin: 0 0 18px; }
.zt-recent-links { display: flex; flex-wrap: wrap; gap: 6px; }
.zt-recent-links .zt-chip { text-decoration: none !important; color: var(--zt-text) !important; }
.zt-recent-group { font-size: .74rem; color: var(--zt-muted); margin-right: 6px; }
.zt-cards-compact .zt-home-card { padding: 12px 14px; }
.zt-home-icon { flex: 0 0 40px; height: 40px; border-radius: 10px; background: var(--zt-primary-soft); color: var(--zt-primary); display: flex; align-items: center; justify-content: center; }
.zt-home-card .zt-card-title { margin-bottom: 4px; }
.zt-home-card .zt-muted { font-size: .86rem; line-height: 1.5; }

/* Blazor 오류 띠 */
#blazor-error-ui {
    color-scheme: light only; background: #fff3cd; border-top: 1px solid #ffe69c; color: #664d03;
    bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem;
    position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ======================= 설정 ======================= */
.zt-mail-body { white-space: pre-wrap; font: inherit; font-size: .86rem; background: var(--zt-bg); border-radius: var(--zt-radius); padding: 10px 12px; margin: 0; overflow-wrap: anywhere; }
.zt-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.zt-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }

/* ======================= 구매요청 · 통합 BOM ======================= */
.zt-line-final td { opacity: .55; }
.zt-line-final .zt-part-name { text-decoration: line-through; }
.zt-part-name { font-weight: 500; }
.zt-progress { display: inline-flex; width: 120px; height: 8px; border-radius: 999px; overflow: hidden; background: #e6e9ee; vertical-align: middle; margin-left: 8px; }
.zt-progress span { display: block; height: 100%; }
.zt-progress .zt-p-요청 { background: #f97316; }
.zt-progress .zt-p-주문 { background: #eab308; }
.zt-progress .zt-p-입고 { background: #3b82f6; }
.zt-progress .zt-p-설치 { background: #22c55e; }
.zt-detail > td { background: #f9fafc !important; padding-top: 4px; padding-bottom: 10px; }
.zt-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; padding: 6px 2px; white-space: normal; }
.zt-detail-box { border: 1px solid var(--zt-line); border-radius: var(--zt-radius); padding: 10px 14px; background: var(--zt-surface); }
.zt-detail-kv { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; font-size: .86rem; align-items: center; }
.zt-detail-kv > span:nth-child(odd) { color: var(--zt-muted); }
.zt-dates { display: grid; grid-template-columns: 60px 1fr; gap: 6px 8px; font-size: .86rem; align-items: center; }
.zt-dates > span:nth-child(odd) { color: var(--zt-muted); }
.zt-target-results { border: 1px solid var(--zt-line); border-radius: var(--zt-radius); max-height: 220px; overflow: auto; background: var(--zt-surface); margin-top: 6px; }
.zt-target-results div { padding: 7px 12px; cursor: pointer; border-bottom: 1px solid var(--zt-line-soft); font-size: .86rem; }
.zt-target-results div:hover { background: var(--zt-hover); }
.zt-export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.zt-export-grid .zt-off { opacity: .5; }
.zt-file-list { list-style: none; padding: 0; margin: 0 0 6px; font-size: .86rem; }
.zt-file-list li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 2px 0; }
.zt-file-list:empty { display: none; }

/* 새 요청 항목 표: 한 줄에 부품·장착위치·수량·여분·단가·금액, 아래 줄에 거래처·조달·메모 */
.zt-line-editor td { vertical-align: top; padding: 8px 8px; white-space: normal; }
.zt-line-editor th { padding: 8px 8px; }
.zt-line-editor input.zt-inline-input, .zt-line-editor select.zt-inline-input { width: 100%; }
.zt-line-editor input.zt-qty { width: 64px; text-align: right; }
.zt-line-editor input.zt-money { width: 110px; text-align: right; }
.zt-line-editor .zt-line-amount { padding-top: 14px; font-weight: 600; }
.zt-line-editor .zt-line-more td { padding-top: 0; border-bottom: 1px solid var(--zt-line); }
.zt-line-editor .zt-line-main td { border-bottom: 0; }
.zt-line-more-grid { display: grid; grid-template-columns: 180px 110px minmax(0, 1fr); gap: 8px; }
.zt-line-more-grid label { display: flex; flex-direction: column; gap: 2px; font-size: .79rem; color: var(--zt-muted); font-weight: 600; }

/* 부품 고르기 (검색해서 고르기) */
.zt-part-select { position: relative; min-width: 260px; }
.zt-part-select-row { display: flex; gap: 6px; align-items: center; }
.zt-part-select-row input { flex: 1; }
.zt-part-chosen { display: flex; align-items: center; gap: 8px; min-height: var(--zt-h); padding: 4px 10px; border: 1px solid var(--zt-line-strong); border-radius: var(--zt-radius); background: var(--zt-surface); cursor: pointer; text-align: left; width: 100%; font: inherit; color: var(--zt-text); }
.zt-part-chosen:hover { border-color: var(--zt-primary-line); background: var(--zt-hover); }
.zt-part-chosen .zt-part-chosen-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.zt-part-chosen .zt-part-chosen-cat { color: var(--zt-muted); font-size: .81rem; white-space: nowrap; }
.zt-part-menu { margin-top: 4px; border: 1px solid var(--zt-line); border-radius: var(--zt-radius); background: var(--zt-surface); max-height: 240px; overflow: auto; box-shadow: var(--zt-shadow-pop); }
.zt-part-menu button { display: flex; width: 100%; gap: 8px; align-items: baseline; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--zt-line-soft); background: none; font: inherit; font-size: .86rem; color: var(--zt-text); cursor: pointer; text-align: left; }
.zt-part-menu button:last-child { border-bottom: 0; }
.zt-part-menu button:hover, .zt-part-menu button.zt-on { background: var(--zt-primary-soft); }
.zt-part-menu button small { color: var(--zt-muted); font-size: .8rem; margin-left: auto; white-space: nowrap; }
.zt-part-menu .zt-part-menu-empty { padding: 8px 10px; color: var(--zt-muted); font-size: .84rem; }

/* ======================= 재고 ======================= */
.zt-lot-row td { background: #fafbfd; font-size: .85rem; }
.zt-lot-actions { display: flex; gap: 2px; justify-content: flex-end; flex-wrap: wrap; }
.zt-overdue { color: var(--zt-bad); font-weight: 650; }
.zt-layout { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--zt-line); border-radius: var(--zt-radius); overflow: hidden; background: var(--zt-surface); user-select: none; }
.zt-layout img { display: block; max-width: 100%; height: auto; }
.zt-layout-drawing { cursor: crosshair; touch-action: none; outline: 2px dashed var(--zt-primary-line); outline-offset: 2px; }
.zt-layout-drawing img { pointer-events: none; }
.zt-shelf-box { position: absolute; border: 2px solid var(--zt-primary); background: rgba(31, 79, 216, .12); color: var(--zt-primary); font: inherit; font-size: .79rem; font-weight: 650; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; padding: 0; min-width: 24px; min-height: 18px; overflow: hidden; border-radius: 4px; }
.zt-shelf-box small { font-weight: 400; font-size: .8rem; }
.zt-shelf-has { background: rgba(46, 158, 91, .2); border-color: var(--zt-ok); color: #1d6b3d; }
.zt-shelf-on { outline: 3px solid var(--zt-warn); }
.zt-shelf-draft { border-style: dashed; pointer-events: none; }
.zt-shelf-front { margin-top: 12px; }
.zt-shelf-grid { border-collapse: separate; border-spacing: 5px; }
.zt-shelf-grid th { font-size: .83rem; color: var(--zt-muted); text-align: right; padding-right: 6px; font-weight: 600; }
.zt-cell-btn { min-width: 64px; min-height: 46px; border: 1px solid var(--zt-line-strong); background: var(--zt-surface); border-radius: 8px; font: inherit; font-size: .85rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 6px; color: var(--zt-text-2); }
.zt-cell-btn:hover { border-color: var(--zt-primary-line); }
.zt-cell-btn small { color: var(--zt-muted); font-size: .76rem; }
.zt-cell-has { background: var(--zt-ok-soft); border-color: #9fd6b4; }
.zt-cell-on { outline: 2px solid var(--zt-primary); }
.zt-count-head { margin-bottom: 10px; }
.zt-count-table td, .zt-count-table th { padding: 11px 12px; font-size: .98rem; }
.zt-count-input { width: 5.5em; text-align: right; font-size: 1.05rem !important; min-height: 38px !important; }
.zt-count-diff td { background: #fff3f3 !important; }
.zt-count-diff .zt-num { color: var(--zt-bad); font-weight: 650; }
.zt-count-reason td { font-size: .9rem; }
.zt-count-reason-body { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }   /* 칸(td)을 flex로 하면 표 칸에서 빠져 한 칸에만 그려짐 */
.zt-count-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 8px; }
.zt-alloc input { width: 5em; }

/* ======================= 견적서 읽기 · 발주서 ======================= */
.zt-quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.zt-quote-page { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--zt-line); border-radius: var(--zt-radius); background: var(--zt-surface); user-select: none; cursor: crosshair; overflow: hidden; touch-action: none; }
.zt-quote-page img { display: block; max-width: 100%; height: auto; pointer-events: none; }
.zt-quote-row { position: absolute; left: 0; width: 100%; background: rgba(46, 158, 91, .14); border-top: 1px solid rgba(46, 158, 91, .45); border-bottom: 1px solid rgba(46, 158, 91, .45); pointer-events: none; }
.zt-frag { position: absolute; pointer-events: none; }
.zt-frag-draft { position: absolute; border: 2px dashed var(--zt-primary); background: rgba(31, 79, 216, .1); pointer-events: none; }
.zt-quote-ignore { position: absolute; background: repeating-linear-gradient(45deg, rgba(160, 160, 160, .25) 0 6px, transparent 6px 12px); pointer-events: none; }
.zt-quote-pop { position: absolute; z-index: 5; background: var(--zt-surface); border: 1px solid var(--zt-line); border-radius: 10px; box-shadow: var(--zt-shadow-pop); padding: 6px; display: flex; gap: 4px; flex-wrap: wrap; max-width: 330px; cursor: default; }
.zt-quote-pop button { font: inherit; font-size: .85rem; font-weight: 600; min-height: 28px; padding: 0 10px; border: 1px solid var(--zt-line-strong); background: #fff; border-radius: 6px; cursor: pointer; color: var(--zt-text-2); }
.zt-quote-pop button:hover { border-color: var(--zt-primary); color: var(--zt-primary); background: var(--zt-primary-soft); }
.zt-quote-items td { vertical-align: top; white-space: normal; }
.zt-quote-items .zt-part-select { min-width: 0; }
.zt-quote-items tr.zt-item-ignored td { opacity: .45; }
.zt-quote-items tr.zt-item-ignored .zt-cell-view { text-decoration: line-through; }
.zt-link-auto { color: var(--zt-ok); font-weight: 600; }
.zt-link-none { color: var(--zt-bad); font-size: .86rem; }
.zt-vat-box { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--zt-line); border-radius: var(--zt-radius); margin-top: 12px; background: var(--zt-surface); font-size: .86rem; }
.zt-quote-read { font-size: .85rem; font-weight: 600; }
.zt-quote-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; }

/* ======================= 휴대폰 ======================= */
@media (max-width: 1100px) {
    .zt-quote-grid { grid-template-columns: 1fr; }
}

@media (max-width: 959px) {
    .zt-content { padding: 14px 12px 28px; }
    .zt-left { width: 100%; flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--zt-line); }
    .zt-left-collapsed { width: 100%; flex-basis: auto; }
    .zt-left-collapsed .zt-left-head { justify-content: space-between; padding: 6px 8px 6px 14px; }
    .zt-left-collapsed .zt-left-title { display: inline; }
    .zt-left-content { max-height: 50vh; }
    .zt-body { flex-direction: column; }
    .zt-form-row { grid-template-columns: 1fr; gap: 4px; }
    .zt-search { min-width: 0; flex-basis: 100%; max-width: none; }
    .zt-detail-grid, .zt-export-grid { grid-template-columns: 1fr; }
    .zt-progress { width: 70px; }
    .zt-count-table td.zt-wrap { min-width: 0; }
    .zt-cell-btn { min-width: 48px; }
    .zt-alloc td, .zt-alloc th { padding: 6px 4px; font-size: .85rem; }
    .zt-alloc .zt-sub { display: block; }
    .zt-alloc input { width: 3.4em; padding: 4px; }
    .zt-footer { padding: 8px 12px; }
    .zt-line-more-grid { grid-template-columns: 1fr 1fr; }
    .zt-line-more-grid label:last-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .zt-page-title, .zt-head-code { font-size: 1.15rem; }
    .zt-toolbar { gap: 8px; }
    /* 걸러보기 단추는 한 줄로 옆으로 밀어서 */
    .zt-toolbar > .zt-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: none; }
    .zt-summary { gap: 4px 18px; }
    .zt-meta { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
    .zt-panel { border-radius: 10px; }

    /* 목록 표를 카드처럼: 머리줄 숨기고 줄마다 한 덩어리, 칸 이름은 zt.js 가 data-label 로 붙인다 */
    table.zt-stack, table.zt-stack > tbody, table.zt-stack > tfoot { display: block; width: 100%; }
    table.zt-stack > thead { display: none; }
    table.zt-stack > tbody > tr, table.zt-stack > tfoot > tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 11px 14px; border-bottom: 1px solid var(--zt-line-soft); }
    table.zt-stack > tbody > tr:last-child { border-bottom: 0; }
    table.zt-stack > tbody > tr > td, table.zt-stack > tfoot > tr > td { display: block; border: 0 !important; padding: 0; white-space: normal; min-width: 0; background: transparent !important; }
    table.zt-stack > tbody > tr:hover > td { background: transparent; }
    table.zt-stack td.zt-wrap, table.zt-stack td.zt-stack-main { order: -1; flex: 1 1 100%; min-width: 0; font-size: .95rem; }
    table.zt-stack td.zt-stack-lead { order: -2; }
    table.zt-stack td.zt-stack-lead + td.zt-stack-lead { margin-left: -6px; }
    table.zt-stack tr:has(> td.zt-stack-lead) > td.zt-wrap { flex: 1 1 calc(100% - 70px); }
    table.zt-stack td[data-label]:not(.zt-wrap):not(.zt-stack-main):not(.zt-stack-lead):not(.zt-actions)::before { content: attr(data-label); color: var(--zt-muted); font-size: .79rem; margin-right: 5px; font-weight: 500; }
    table.zt-stack td[data-label=""]::before { content: none !important; }
    table.zt-stack td.zt-num { text-align: left; }
    table.zt-stack td.zt-stack-end { margin-left: auto; font-weight: 650; }
    table.zt-stack td.zt-actions { flex: 1 1 100%; text-align: left; }
    table.zt-stack td:empty { display: none; }
    table.zt-stack td[colspan] { flex: 1 1 100%; }
    table.zt-stack > tbody > tr.zt-detail, table.zt-stack > tbody > tr.zt-lot-row { background: #f9fafc; }
    table.zt-stack > tbody > tr.zt-group-row { background: #f1f4f8; padding: 8px 14px; }
    table.zt-stack .zt-sub { display: inline; margin-left: 4px; }
    table.zt-stack td.zt-wrap .zt-sub, table.zt-stack td.zt-stack-main .zt-sub { display: block; margin-left: 0; }
    table.zt-stack .zt-progress { width: 90px; }
}

/* 묶음 줄·프로젝트 바꾸기 */
.zt-project-switch { max-width: 280px; font-size: .86rem !important; }
@media (max-width: 640px) {
    table.zt-stack > tbody > tr.zt-group-row > td { flex: 0 0 auto; }
    table.zt-stack > tbody > tr.zt-group-row > td[colspan] { flex: 1 1 auto; order: 0; }
    table.zt-stack > tbody > tr.zt-group-row > td::before { content: none !important; }
    table.zt-stack > tbody > tr.zt-detail > td[colspan] { padding: 0; }
    .zt-project-switch { max-width: 100%; flex: 1 1 200px; }
}

.zt-quote-cands { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; align-items: center; }
.zt-quote-cands .zt-sub { flex: 1 1 100%; }
.zt-cand { max-width: 100%; overflow: hidden; text-overflow: ellipsis; min-height: 26px; font-size: .83rem; }
.zt-cand small { color: var(--zt-muted); margin-left: 4px; }
.zt-quote-link { min-width: 200px; }

.zt-sections { display: flex; flex-direction: column; gap: 16px; }
.zt-sections > .zt-panel + .zt-panel { margin-top: 0; }

.zt-panel > .zt-toolbar { margin: 0; padding: 10px 14px; }
.zt-panel > .zt-toolbar:first-child { border-bottom: 1px solid var(--zt-line); }
@media (max-width: 640px) {
    /* 넓은 글 칸이 없는 줄은 첫 칸을 제목처럼 */
    table.zt-stack > tbody > tr:not(:has(> td.zt-wrap, > td.zt-stack-main, > td.zt-stack-lead, > td[colspan])) > td:first-child { order: -1; flex: 1 1 100%; font-weight: 600; }
    table.zt-stack > tbody > tr:not(:has(> td.zt-wrap, > td.zt-stack-main, > td.zt-stack-lead, > td[colspan])) > td:first-child::before { content: none !important; }
    table.zt-stack td.zt-actions:empty { display: none; }
}

/* 검색칸 안의 입력은 테두리 없이(양식 안에 있어도) */
.zt-search input, .zt-form .zt-search input:not([type=checkbox]) { border: 0 !important; box-shadow: none !important; min-height: 0 !important; padding: 7px 0 !important; background: transparent !important; width: 100%; }
.zt-form-row > .zt-toggle, .zt-form-row > .zt-chips, .zt-form-row > .zt-btn { justify-self: start; }
.zt-table td.zt-wrap-plain { white-space: normal; min-width: 10em; }
/* 새 요청 항목 표: 숫자 칸은 내용만큼 */
.zt-line-editor td.zt-num, .zt-line-editor th.zt-num { width: 1%; }
.zt-line-editor td.zt-actions { width: 1%; }
.zt-quote-items td.zt-wrap { min-width: 8em; }
.zt-quote-items .zt-quote-link { min-width: 180px; }
@media (max-width: 640px) {
    table.zt-stack td.zt-actions { flex: 0 0 auto; margin-left: auto; }
    table.zt-stack > tbody > tr.zt-group-row > td.zt-num { margin-left: auto; }
    /* 새 요청 항목: 부품·장착위치는 한 줄씩, 숫자는 나란히 */
    table.zt-line-editor > tbody > tr.zt-line-main > td:first-child { flex: 1 1 100%; order: -1; }
    table.zt-line-editor > tbody > tr.zt-line-main > td:nth-child(2) { flex: 1 1 100%; }
    table.zt-line-editor > tbody > tr.zt-line-main > td:nth-child(2)::before { display: block; margin-bottom: 2px; }
    table.zt-line-editor > tbody > tr.zt-line-main { padding-bottom: 4px; border-bottom: 0; }
    table.zt-line-editor > tbody > tr.zt-line-more { padding-top: 0; }
    table.zt-line-editor > tbody.zt-line-group { border-bottom: 1px solid var(--zt-line); display: block; }
    table.zt-line-editor td.zt-actions { position: absolute; right: 8px; }
    table.zt-line-editor > tbody > tr.zt-line-main { position: relative; padding-right: 40px; }
    table.zt-line-editor input.zt-money { width: 120px; }
    table.zt-line-editor > tbody > tr > td.zt-num { width: auto; }
}

/* ======================= 2026-10-13 장민혁 책임 요청 화면 개선 ======================= */
/* 왼쪽 목록: 화면 높이에 고정되고 목록이 길면 그 안에서만 스크롤 */
.zt-left { position: sticky; top: var(--zt-appbar-h); height: calc(100vh - var(--zt-appbar-h)); align-self: flex-start; }
.zt-left-content { min-height: 0; overscroll-behavior: contain; }
@media (max-width: 959px) {
    .zt-left { position: static; height: auto; align-self: stretch; }
}
.zt-tree-tools { padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 6px; }
.zt-left-content .zt-tree-tools > input.zt-inline-input { margin: 0; }
.zt-tree-filters { gap: 4px; display: grid; grid-template-columns: 1fr 1fr; }
.zt-tree-filters .zt-chip { justify-content: space-between; min-width: 0; overflow: hidden; }
.zt-tree-filters .zt-chip { min-height: 26px; padding: 0 8px; font-size: .8rem; }
.zt-tree-filters .zt-chip select { max-width: 100%; min-width: 0; flex: 1; padding: 2px 0; }
button.zt-tree-fold { display: flex; align-items: center; gap: 2px; width: 100%; background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; padding-left: 6px; }
button.zt-tree-fold:hover { color: var(--zt-text); }
button.zt-tree-fold .zt-count { margin-left: auto; padding-right: 2px; }

/* 고르기 칸: 모양은 그대로, 아래로 목록이 펼쳐진다 */
.zt-cell .mud-menu, .zt-cell-menu-root { display: inline; vertical-align: baseline; }
/* 펼침 목록의 자리 표시(빈 div)가 줄을 나누지 않게 */
.zt-cell .mud-popover-cascading-value { display: inline; }
.zt-cell-select .zt-cell-view { cursor: pointer; }
/* 펼침 표시(▾)는 글자가 아닌 장식으로: 칸의 글자(값)는 그대로 */
.zt-cell-select .zt-cell-view::after { content: "▾"; font-size: .7em; color: var(--zt-faint); margin-left: 4px; opacity: 0; transition: opacity .12s; }
.zt-cell-select:hover .zt-cell-view::after, .zt-cell-open .zt-cell-view::after, .zt-cell-select .zt-cell-view:focus-visible::after { opacity: 1; }
.zt-cell-select:has(.zt-tag) .zt-cell-view::after { margin-left: 2px; }
.zt-cell-open .zt-cell-view { background: var(--zt-primary-soft); box-shadow: inset 0 0 0 1px var(--zt-primary-line); }
.zt-cell-popover { border: 1px solid var(--zt-line); border-radius: var(--zt-radius) !important; box-shadow: var(--zt-shadow-pop) !important; }
.zt-cell-menu { padding: 4px 0 !important; min-width: 140px; }
.zt-cell-menu .mud-menu-item { min-height: 32px; padding: 4px 12px; font-size: .86rem; }
.zt-cell-menu .mud-menu-item.zt-on { background: var(--zt-primary-soft); color: var(--zt-primary); font-weight: 600; }
.zt-cell-menu .zt-cell-option-add { color: var(--zt-primary); font-weight: 600; border-top: 1px solid var(--zt-line-soft); }
.zt-proc-cell { display: inline; }
.zt-proc-cell .zt-pick-stock { margin-left: 8px; }

/* 부품 고르기: 재고 여부 */
.zt-stock-tag { display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; background: #eef0f3; color: var(--zt-muted); font-size: .77rem; font-weight: 500; line-height: 1.6; white-space: nowrap; flex: none; }
.zt-stock-tag.zt-stock-has { background: var(--zt-ok-soft); color: var(--zt-ok); font-weight: 650; }
.zt-part-menu button .zt-stock-tag { margin-left: 4px; }
.zt-part-select-row .zt-part-new { white-space: nowrap; font-size: .83rem; }

/* 대상 고르기: 검색칸을 누르면 아래로 목록 */
.zt-target-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zt-target-row .zt-target-search { flex: 1 1 360px; max-width: none; min-width: 0; }
.zt-form-row.zt-row-top { align-items: start; }
.zt-form-row.zt-row-top > label { padding-top: 8px; }
.zt-target-menu { margin-top: 4px; border: 1px solid var(--zt-line); border-radius: var(--zt-radius); background: var(--zt-surface); max-height: 300px; overflow: auto; box-shadow: var(--zt-shadow-pop); }
.zt-target-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--zt-line-soft); background: none; text-align: left; font: inherit; font-size: .86rem; color: var(--zt-text); cursor: pointer; }
.zt-target-menu button:last-child { border-bottom: 0; }
.zt-target-menu button:hover, .zt-target-menu button.zt-on { background: var(--zt-primary-soft); }
.zt-target-menu button small { color: var(--zt-muted); font-size: .8rem; }
.zt-target-menu button.zt-target-chosen { opacity: .55; }
.zt-target-menu .zt-target-name { font-weight: 650; }

/* 요청 목록: 파트 꼬리표, 진행 막대(왼쪽) + 상태 값(오른쪽) */
.zt-major-tag { margin-left: 6px; }
.zt-progress-wrap { display: inline-flex; align-items: center; gap: 8px; }
.zt-progress-wrap .zt-progress { margin-left: 0; flex: none; }
.zt-progress-label { font-size: .83rem; color: var(--zt-text-2); white-space: nowrap; }

/* 새 요청 항목 아래 줄: 조달 단추, 재고 선택 */
.zt-line-more-grid { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.zt-line-more-grid > label { flex: 1 1 200px; min-width: 0; }
.zt-line-more-grid > label:first-child { flex: 0 0 auto; }
.zt-toggle-sm button { min-height: 26px; padding: 0 10px; font-size: .83rem; }
.zt-proc-toggle { align-self: flex-start; }
.zt-line-fixed { display: inline-block; padding: 4px 0; color: var(--zt-text-2); font-weight: 400; font-size: .86rem; }
.zt-line-stock { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .86rem; color: var(--zt-text); font-weight: 400; min-height: 28px; }
.zt-line-remove, .zt-hide-btn, .zt-edit-btn { color: var(--zt-muted) !important; }
.zt-line-remove:hover, .zt-hide-btn:hover { color: var(--zt-bad) !important; }
.zt-edit-btn:hover { color: var(--zt-primary) !important; }

/* 창 안의 고르기 칸 + 바로 등록 단추 */
.zt-input-with-btn { display: flex; gap: 10px; align-items: center; }
.zt-input-with-btn select { flex: 1; min-width: 0; }
.zt-input-with-btn .zt-link-btn { white-space: nowrap; }

/* 통합 BOM 머리: 프로젝트 정보도 눌러서 고침 */
.zt-head-edit { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.zt-head-edit > span { max-width: 100%; }
.zt-head-edit .zt-cell { min-width: 0; max-width: none; vertical-align: baseline; }
.zt-head-edit > span { display: inline-flex; align-items: baseline; gap: 5px; }
#bom-period-range input { width: 9.2em; text-align: left; }
.zt-head-edit .zt-cell-editing, .zt-head-code .zt-cell-editing { width: min(30em, 86vw); }
.zt-head-code .zt-cell { max-width: 100%; }

/* ======================= 2026-10-13 장민혁 책임 2차 요청: 글자 색·상태 색·행 색 ======================= */
.zt-c-code { color: var(--zt-c-code); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.zt-c-money { color: var(--zt-c-money); font-variant-numeric: tabular-nums; }
.zt-c-date { color: var(--zt-c-date); font-variant-numeric: tabular-nums; }
.zt-c-vendor { color: var(--zt-c-vendor); }
.zt-c-person { color: var(--zt-c-person); }
.zt-c-qty { color: var(--zt-c-qty); font-variant-numeric: tabular-nums; }
a.zt-c-code:hover { text-decoration: underline; }
.zt-c-plus { color: var(--zt-tone-green); font-weight: 650; }
.zt-c-minus { color: var(--zt-tone-red); font-weight: 650; }

/* 상태 꼬리표 */
.zt-tag.zt-tone-orange { background: var(--zt-tone-orange-bg); color: var(--zt-tone-orange); }
.zt-tag.zt-tone-yellow { background: var(--zt-tone-yellow-bg); color: var(--zt-tone-yellow); }
.zt-tag.zt-tone-blue { background: var(--zt-tone-blue-bg); color: var(--zt-tone-blue); }
.zt-tag.zt-tone-green { background: var(--zt-tone-green-bg); color: var(--zt-tone-green); }
.zt-tag.zt-tone-red { background: var(--zt-tone-red-bg); color: var(--zt-tone-red); }
.zt-tag.zt-tone-muted { background: #eef0f3; color: var(--zt-muted); }
/* 항목 행 색: 상태에 따라 옅게 */
.zt-table tr.zt-row-tone-orange > td { background: var(--zt-tone-orange-row); }
.zt-table tr.zt-row-tone-yellow > td { background: var(--zt-tone-yellow-row); }
.zt-table tr.zt-row-tone-blue > td { background: var(--zt-tone-blue-row); }
.zt-table tr.zt-row-tone-green > td { background: var(--zt-tone-green-row); }
.zt-table tr.zt-row-tone-red > td { background: var(--zt-tone-red-row); }
.zt-table tr[class*="zt-row-tone-"]:hover > td { filter: brightness(.985); }
.zt-table tr[class*="zt-row-tone-"] > td:first-child { box-shadow: inset 3px 0 0 var(--zt-row-edge, transparent); }
.zt-table tr.zt-row-tone-orange { --zt-row-edge: #fdba74; }
.zt-table tr.zt-row-tone-yellow { --zt-row-edge: #fcd34d; }
.zt-table tr.zt-row-tone-blue { --zt-row-edge: #93c5fd; }
.zt-table tr.zt-row-tone-green { --zt-row-edge: #86efac; }
.zt-table tr.zt-row-tone-red { --zt-row-edge: #fca5a5; }
/* 불량처리: 장착위치 앞 느낌표 */
.zt-alert-mark { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--zt-tone-orange); color: #fff; font-size: .74rem; font-weight: 800; margin-right: 5px; vertical-align: 1px; }
/* 요청 목록: 설정 미완료(대상 없음·항목 없음) */
.zt-table tr.zt-row-incomplete > td { background: #fff4ec; }
.zt-table tr.zt-row-incomplete > td:first-child { box-shadow: inset 3px 0 0 #fb923c; }
.zt-table tr.zt-row-incomplete:hover > td { background: #ffeddc; }
.zt-incomplete-note { color: var(--zt-tone-orange); font-size: .8rem; font-weight: 600; }
.zt-legend { display: inline-flex; gap: 10px; align-items: center; font-size: .8rem; color: var(--zt-muted); flex-wrap: wrap; }
.zt-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
/* 목록 행 아래로 펼쳐 고치는 칸 */
.zt-edit-panel { display: flex; flex-direction: column; gap: 10px; padding: 8px 4px 6px; white-space: normal; }
.zt-edit-panel-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.zt-edit-panel .zt-detail-kv { max-width: 860px; }
.zt-edit-title { font-size: .83rem; font-weight: 650; color: var(--zt-muted); margin-bottom: 2px; }
/* 부품·장착위치 칸: 눌러서 상세 펼치기 */
.zt-table td.zt-expand-cell { cursor: pointer; }
/* 통합 BOM 프로젝트 화면: 품목코드 펼치기 → 파트별 구매 내용 → 항목 목록 (2026-10-13 장민혁 책임 요청) */
.zt-item-detail > td { background: #f8fafd; white-space: normal; padding: 10px 14px 14px 44px; }
@media (max-width: 640px) { .zt-item-detail > td { padding: 8px; } }
.zt-item-majors { display: flex; flex-direction: column; gap: 8px; }
.zt-item-major { border: 1px solid var(--zt-line); border-radius: 10px; background: var(--zt-surface); overflow: hidden; }
.zt-item-major-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; color: var(--zt-text); }
.zt-item-major-head:hover { background: var(--zt-hover); }
.zt-item-major-open > .zt-item-major-head { background: var(--zt-head); border-bottom: 1px solid var(--zt-line); }
.zt-item-lines { font-size: .9rem; }
.zt-item-lines th { font-size: .8rem; }
.zt-item-lines tr.zt-row-final td { opacity: .55; }
/* 구매항목 표 글자 키우기 (2026-10-13 장민혁 책임 요청 '제목 행 이름이 너무 작고 칸들도 작다') */
.zt-lines th { font-size: .9rem; color: var(--zt-text-2); padding-top: 11px; padding-bottom: 11px; }
.zt-lines td { font-size: 1rem; }
.zt-lines td .zt-cell-view { padding: 3px 8px; margin: -3px -8px; }
.zt-lines td .zt-tag { font-size: .88rem; padding: 2px 11px; }
.zt-lines td .zt-sub { font-size: .84rem; }
.zt-table td.zt-expand-cell:hover .zt-part-name { color: var(--zt-primary); text-decoration: underline; }
/* 통합 BOM 왼쪽: 맨 위 공통, 최근 본 것 */
.zt-tree-common { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; padding: 10px 10px 2px; }
.zt-tree-recent { border-top: 1px solid var(--zt-line-soft); border-bottom: 1px solid var(--zt-line-soft); padding-bottom: 4px; margin-top: 6px; }
.zt-recent-item .zt-bom-proj-title { font-size: .9rem; max-width: 100%; }
.zt-recent-item .zt-bom-proj-code { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-recent-item { flex-direction: column; align-items: flex-start !important; gap: 0 !important; padding-top: 4px !important; padding-bottom: 4px !important; }
.zt-recent-sub { font-size: .79rem; color: var(--zt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* 창고 배치도: 이미지 대신 모눈 위에 그린다 (2026-10-13 장민혁 책임 요청) */
.zt-layout-canvas { display: block; width: 100%; aspect-ratio: 16 / 10; background-color: #fbfcfe;
    background-image: linear-gradient(to right, #e7ebf1 1px, transparent 1px), linear-gradient(to bottom, #e7ebf1 1px, transparent 1px);
    background-size: 5% 8%; }
.zt-layout-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--zt-muted); font-size: .9rem; pointer-events: none; text-align: center; padding: 20px; }
/* 창고 탭: 왼쪽 배치도, 오른쪽 세로로 선반 목록 → 선반 정면 → 칸의 부품 (2026-10-13 장민혁 책임 요청) */
.zt-wh-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.zt-wh-grid > .zt-panel, .zt-wh-side > .zt-panel { margin: 0 !important; min-width: 0; }
.zt-wh-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.zt-wh-canvas-wrap { padding: 12px; }
.zt-wh-name { font-weight: 700; white-space: nowrap; }
.zt-wh-name .zt-cell { max-width: none; }
.zt-wh-front .zt-shelf-grid { margin: 0; }
@media (max-width: 1100px) { .zt-wh-grid { grid-template-columns: minmax(0, 1fr); } }
.zt-tab-count { margin-left: 4px; font-weight: 500; color: var(--zt-muted); font-variant-numeric: tabular-nums; }
.zt-tab-on .zt-tab-count { color: var(--zt-primary); }
.zt-major-buttons { display: inline-flex; }
.zt-trace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; padding: 8px 4px; white-space: normal; }
.zt-trace .zt-detail-kv a { font-weight: 600; }
.zt-trace-history { grid-column: 1 / -1; }
.zt-trace-history table { width: 100%; font-size: .88rem; border-collapse: collapse; }
.zt-trace-history td { padding: 4px 8px; border-bottom: 1px solid var(--zt-line-soft); }
.zt-trace-history tr.zt-this td { background: var(--zt-primary-soft); font-weight: 600; }
@media (max-width: 640px) { .zt-trace { grid-template-columns: minmax(0, 1fr); } }
/* 검색칸 + 아래 펼침 목록 */
.zt-suggest { position: relative; flex: 1 1 300px; max-width: 520px; min-width: 220px; }
.zt-suggest .zt-search { max-width: none; width: 100%; }
.zt-suggest-menu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); border: 1px solid var(--zt-line); border-radius: var(--zt-radius); background: var(--zt-surface); max-height: 340px; overflow: auto; box-shadow: var(--zt-shadow-pop); }
.zt-suggest-menu button { display: flex; width: 100%; gap: 10px; align-items: baseline; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--zt-line-soft); background: none; font: inherit; font-size: .9rem; color: var(--zt-text); cursor: pointer; text-align: left; }
.zt-suggest-menu button:last-child { border-bottom: 0; }
.zt-suggest-menu button:hover, .zt-suggest-menu button.zt-on { background: var(--zt-primary-soft); }
.zt-suggest-menu button small { color: var(--zt-muted); font-size: .8rem; margin-left: auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
@media (max-width: 640px) { .zt-suggest { flex-basis: 100%; max-width: none; } }
/* 코드 화면: 행을 누르면 아래로 펼쳐 고치고 연결된 것을 따라간다 */
.zt-code-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px 24px; padding: 8px 4px 6px; white-space: normal; }
.zt-code-detail .zt-detail-kv { grid-template-columns: 104px 1fr; font-size: 1rem; line-height: 1.6; gap: 10px 14px; }
.zt-code-detail .zt-detail-kv > span:nth-child(odd) { color: var(--zt-text-2); font-weight: 500; }
.zt-code-detail .zt-box-title { font-size: .9rem; margin-bottom: 10px; }
.zt-linked { min-width: 0; }
.zt-linked table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.zt-linked td, .zt-linked th { padding: 4px 8px; border-bottom: 1px solid var(--zt-line-soft); text-align: left; white-space: nowrap; }
.zt-linked th { color: var(--zt-muted); font-weight: 600; font-size: .8rem; }
.zt-linked td.zt-wrap-plain { white-space: normal; }
.zt-code-detail-actions { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) { .zt-code-detail { grid-template-columns: minmax(0, 1fr); } }

/* 드래그로 행 순서 바꾸기 (2026-10-14 장민혁 책임 요청) */
.zt-drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 26px; margin: 0 4px 0 -4px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--zt-faint, #9aa3ad); cursor: grab; vertical-align: middle; user-select: none; flex: 0 0 auto; }
.zt-drag-handle:hover, .zt-drag-handle:focus-visible { background: rgba(0, 0, 0, .06); color: inherit; outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.zt-drag-handle:active { cursor: grabbing; }
tr.zt-dragging { opacity: .45; }
.zt-sort-cell { display: flex; align-items: center; min-width: 0; }
.zt-sort-cell > .zt-cell { flex: 1 1 auto; min-width: 0; }
tr.zt-drop-before > td { box-shadow: inset 0 2px 0 var(--mud-palette-primary); }
tr.zt-drop-after > td { box-shadow: inset 0 -2px 0 var(--mud-palette-primary); }
@media (max-width: 640px) {
    table.zt-stack > tbody > tr.zt-drop-before { box-shadow: inset 0 3px 0 var(--mud-palette-primary); }
    table.zt-stack > tbody > tr.zt-drop-after { box-shadow: inset 0 -3px 0 var(--mud-palette-primary); }
    table.zt-stack > tbody > tr.zt-drop-before > td, table.zt-stack > tbody > tr.zt-drop-after > td { box-shadow: none; }
}
body.zt-sorting, body.zt-sorting * { cursor: grabbing !important; user-select: none; }
.zt-drag-handle { touch-action: none; }
@media (pointer: coarse) { .zt-drag-handle { width: 32px; height: 36px; } }

/* 파일 끌어다 놓기·엑셀 붙여넣기 (2026-10-14 장민혁 책임 요청) */
.zt-dropzone { position: relative; }
.zt-dropzone.zt-drop-active::after { content: ""; position: absolute; inset: -6px; border: 2px dashed var(--mud-palette-primary); border-radius: 10px; background: rgba(37, 99, 235, .05); pointer-events: none; z-index: 5; }
.zt-dropzone.zt-drop-active::before { content: attr(data-drop-hint); position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 1400; padding: 10px 18px; border-radius: 8px; background: var(--mud-palette-primary); color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); pointer-events: none; }
.zt-paste { display: flex; flex-direction: column; gap: 10px; }
.zt-paste-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--zt-line); border-radius: 8px; font: inherit; font-size: .9rem; resize: vertical; background: var(--mud-palette-surface); color: inherit; }
.zt-paste-input:focus { outline: 2px solid var(--mud-palette-primary); outline-offset: -1px; }
.zt-paste-cols { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.zt-paste-cols > .zt-hint { flex-basis: 100%; }
.zt-paste-col select { border: 0; background: none; font: inherit; color: inherit; }
.zt-paste-table { max-height: 46vh; }
.zt-paste-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.zt-warn { color: #b45309; }

/* 펼칠 수 있는 줄: 여백을 누르면 펼치고 접힘 (2026-10-14 장민혁 책임 요청) */
tr:has(> td [data-row-toggle]) { cursor: pointer; }
tr:has(> td [data-row-toggle]) .zt-cell, tr:has(> td [data-row-toggle]) input, tr:has(> td [data-row-toggle]) a { cursor: auto; }
tr:has(> td [data-row-toggle]) a, tr:has(> td [data-row-toggle]) button, tr:has(> td [data-row-toggle]) .zt-editable { cursor: pointer; }

/* 찾아서 고르는 칸 (2026-10-14): 프로젝트·품목코드처럼 고를 것이 많을 때 */
.zt-pick { position: relative; }
.zt-pick .zt-cell-view .zt-sub { margin-left: 6px; }
.zt-pick-input { min-width: 220px; }
.zt-pick .zt-cell-sizer .zt-sub { margin-left: 6px; }
.zt-pick-menu { position: absolute; left: -6px; top: calc(100% + 6px); z-index: 40; display: block; min-width: 300px; max-width: 460px; }
.zt-pick-menu button.zt-pick-current { font-weight: 650; }

/* 2026-10-14 장민혁 책임 요청: 프로젝트는 이름을 위에 조금 크게, 코드는 아래에 같은 색으로(통합 BOM 왼쪽 목록·프로젝트 목록) */
.zt-bom-proj-title { font-size: .95rem; font-weight: 650; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-bom-proj-code { font-size: .8rem; color: inherit; opacity: .8; letter-spacing: .01em; }
.zt-proj-title { font-size: 1rem; }
.zt-proj-code { display: block; font-size: .82rem; color: inherit; opacity: .8; margin-top: 1px; }
/* 구매요청 목록: 요청 이름 / 발주처·고객사 / 프로젝트 이름·품목 이름 / 코드 */
.zt-req-company, .zt-req-project, .zt-req-code { display: block; }
.zt-req-code { font-size: .78rem; letter-spacing: .01em; }

/* 팀즈 알림 양식 (2026-10-14) */
.zt-teams-templates { grid-column: 1 / -1; }
.zt-teams-templates > .zt-toggle { margin: 6px 0 10px; }
.zt-teams-edit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.zt-teams-edit textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid var(--zt-line); border-radius: 8px; resize: vertical; }
.zt-teams-fields { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.zt-teams-fields > .zt-hint { flex-basis: 100%; }
.zt-teams-field { font-family: inherit; cursor: pointer; }
.zt-teams-preview { display: flex; flex-direction: column; gap: 6px; }
.zt-teams-card { border: 1px solid var(--zt-line); border-left: 4px solid #6264a7; border-radius: 8px; padding: 12px 14px; background: var(--zt-surface); }
.zt-teams-card-off { opacity: .55; }
.zt-teams-card-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.zt-teams-card-text { white-space: pre-wrap; margin-bottom: 6px; }
.zt-teams-facts { border-collapse: collapse; font-size: .88rem; }
.zt-teams-facts th { text-align: left; font-weight: 600; padding: 2px 12px 2px 0; color: var(--zt-muted); white-space: nowrap; vertical-align: top; }
.zt-teams-facts td { padding: 2px 0; }
.zt-teams-card-button { display: inline-block; margin-top: 8px; padding: 4px 12px; border: 1px solid #6264a7; border-radius: 4px; color: #6264a7; font-size: .85rem; }
@media (max-width: 900px) { .zt-teams-edit { grid-template-columns: 1fr; } }
/* 알림 설정 탭 · 알림 종류별 설정 (2026-10-14): 팀즈 / 카드 양식 / 메일 세 덩어리 */
#notify-kinds { margin-top: 14px; }
.zt-notify-section { border-top: 1px solid var(--zt-line-soft); padding: 12px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.zt-notify-head { font-weight: 600; color: var(--zt-text-2); }
.zt-notify-route { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.zt-notify-address-input { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zt-notify-address-input input:not([type=checkbox]) { flex: 1 1 260px; min-width: 0; width: auto; }
.zt-notify-section .zt-form { min-width: 0; max-width: 760px; }
.zt-notify-people { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.zt-notify-mail-on { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }


/* 부품 추적 (2026-10-14): 가격·구매처·사용처 상자, 아래 구매 기록 */
.zt-part-trace { padding: 6px 2px; }
.zt-trace-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.zt-trace-box { border: 1px solid var(--zt-line-soft); border-radius: 8px; padding: 10px 12px; background: var(--zt-surface); min-width: 0; }
.zt-trace-kv { display: grid; grid-template-columns: auto auto 1fr; gap: 3px 10px; align-items: baseline; font-size: .9rem; }
.zt-trace-kv b { text-align: right; }
.zt-trace-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 3px 0; font-size: .88rem; border-bottom: 1px solid var(--zt-line-soft); }
.zt-trace-row:last-child { border-bottom: 0; }
.zt-trace-row > a, .zt-trace-row > .zt-faint { white-space: nowrap; }
.zt-trace-row > .zt-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zt-trace-lines { font-size: .86rem; }

/* QR 라벨 (2026-10-14 C11): 화면에서는 격자, 인쇄할 때는 위쪽 막대·단추를 숨기고 라벨만 */
.zt-labels { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, var(--zt-label-w)); }
.zt-labels-s { --zt-label-w: 40mm; --zt-label-h: 25mm; --zt-label-qr: 21mm; font-size: 7pt; }
.zt-labels-m { --zt-label-w: 50mm; --zt-label-h: 30mm; --zt-label-qr: 26mm; font-size: 8pt; }
.zt-labels-l { --zt-label-w: 70mm; --zt-label-h: 40mm; --zt-label-qr: 35mm; font-size: 10pt; }
.zt-label { display: flex; gap: 2mm; align-items: center; width: var(--zt-label-w); height: var(--zt-label-h); padding: 2mm; box-sizing: border-box; border: 1px dashed #b9c0ca; border-radius: 2mm; background: #fff; color: #000; text-decoration: none; overflow: hidden; break-inside: avoid; }
.zt-label-qr { flex: 0 0 var(--zt-label-qr); width: var(--zt-label-qr); height: var(--zt-label-qr); }
.zt-label-qr svg { width: 100%; height: 100%; display: block; }
.zt-label-text { display: flex; flex-direction: column; gap: 1mm; min-width: 0; line-height: 1.2; }
.zt-label-text b { font-size: 1.15em; word-break: keep-all; overflow-wrap: anywhere; }
.zt-label-text small { color: #555; font-size: .85em; }
@media print {
    .zt-appbar, .zt-no-print, .zt-left-panel, .zt-footer, .mud-snackbar-provider, footer, header, nav { display: none !important; }
    body, .mud-layout, .mud-main-content, main { background: #fff !important; padding: 0 !important; margin: 0 !important; }
    .zt-label { border-color: #ddd; }
}

/* QR로 연 칸·묶음 화면 (2026-10-14 C12): 휴대폰에서 큰 단추 */
.zt-scan-page { max-width: 640px; }
.zt-scan-title { font-size: 1.35rem; font-weight: 700; margin: 6px 0 2px; }
.zt-scan-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.zt-scan-actions .mud-button-root { min-height: 48px; }
.zt-scan-list { display: flex; flex-direction: column; border: 1px solid var(--zt-line); border-radius: 10px; overflow: hidden; background: var(--zt-surface); }
.zt-scan-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--zt-line-soft); color: inherit; text-decoration: none; }
.zt-scan-item:last-child { border-bottom: 0; }
.zt-scan-item .zt-hint { grid-column: 1; }
.zt-scan-qty { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; font-size: 1.1rem; }
.zt-scan-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin-top: 10px; font-size: .95rem; }
.zt-scan-facts > span { color: var(--zt-muted); }
.zt-scan-input { width: 100%; max-width: 420px; margin: 6px 0; }

/* 실사 세기: 큰 −/+ 단추 (2026-10-14 C13) */
.zt-count-stepper { display: inline-flex; align-items: center; gap: 4px; }
.zt-count-step { width: 40px; height: 40px; border: 1px solid var(--zt-line); border-radius: 8px; background: var(--zt-surface); font-size: 1.3rem; font-weight: 700; line-height: 1; cursor: pointer; color: var(--zt-text); }
.zt-count-step:active { background: var(--zt-primary-soft); }
.zt-count-stepper .zt-count-input { width: 4.2em; text-align: center; }
/* 실사 표는 칸 폭을 정해 두어 부품 이름이 줄바꿈되고 −/+가 밀려나지 않게 */
.zt-count-table { table-layout: fixed; width: 100%; }
.zt-count-table thead th:nth-child(2) { width: 3.4em; }
.zt-count-table thead th:nth-child(3) { width: 168px; }
.zt-count-table td.zt-wrap { overflow-wrap: anywhere; }
@media (pointer: coarse) { .zt-count-step { width: 42px; height: 42px; } }
@media (max-width: 640px) { .zt-count-stepper { gap: 3px; } .zt-count-stepper .zt-count-input { width: 3em; padding-left: 2px; padding-right: 2px; } .zt-count-table th, .zt-count-table td { padding-left: 6px; padding-right: 6px; } }

/* 실사 화면에서 끊겼을 때: 화면을 가리지 않는 위쪽 띠 */
dialog#components-reconnect-modal.zt-reconnect-banner { position: fixed !important; inset: 0 0 auto 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; height: auto !important; top: 0; left: 0; right: 0; margin: 0; width: auto; max-width: none; border-radius: 0; z-index: 2000; padding: 6px 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
dialog#components-reconnect-modal.zt-reconnect-banner, dialog#components-reconnect-modal.zt-reconnect-banner[open] { animation: none !important; transform: none !important; opacity: 1 !important; }
dialog#components-reconnect-modal.zt-reconnect-banner .components-rejoining-animation { display: none !important; }
dialog#components-reconnect-modal.zt-reconnect-banner .components-reconnect-container { padding: 0 !important; gap: 2px !important; }
#components-reconnect-modal .zt-offline-note { display: none; }
#components-reconnect-modal.zt-reconnect-banner .zt-offline-note { display: block; font-size: .85rem; margin: 2px 0 0; }

/* 방금 만든 링크(사용자 탭): 누르면 통째로 골라져 복사하기 쉽게 (2026-10-14) */
.zt-link-code { overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; cursor: text; padding: 4px 6px; background: var(--zt-bg); border-radius: 4px; }

/* 노션 기준으로 맞춘 것 목록 (2026-10-14) */
.zt-sync-list { margin-top: 8px; font-size: .86rem; }
.zt-sync-list summary { cursor: pointer; color: var(--zt-muted); }
.zt-sync-list ul { margin: 6px 0 0; padding-left: 18px; max-height: 320px; overflow: auto; }
.zt-sync-list li { margin: 2px 0; overflow-wrap: anywhere; }
.zt-sync-hidden b { color: var(--zt-bad); }
.zt-sync-kept b, .zt-sync-notice b { color: var(--zt-warn); }


/* 작업 지시 — PC 조립 (WO-01~08, 2026-10-14): 배치도·슬롯·배정·지시서 */
.zt-tag.zt-tone-muted { background: var(--zt-line-soft); color: var(--zt-muted); }
.zt-work-steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.zt-work-step { padding: 6px 14px; border: 1px solid var(--zt-line-strong); border-radius: 999px; background: var(--zt-surface); font: inherit; font-size: .9rem; color: var(--zt-muted); cursor: pointer; }
.zt-work-step-on { background: var(--zt-primary); border-color: var(--zt-primary); color: #fff; font-weight: 650; }
.zt-work-step-done { border-color: var(--zt-ok); color: var(--zt-ok); }
.zt-board { position: relative; width: 100%; max-width: 920px; border: 1px solid var(--zt-line-strong); border-radius: var(--zt-radius); background: #f7f9fb; overflow: hidden; user-select: none; -webkit-user-select: none; }
.zt-board-blank { background-image: linear-gradient(var(--zt-line) 1px, transparent 1px), linear-gradient(90deg, var(--zt-line) 1px, transparent 1px); background-size: 5% 5%; }
.zt-board img { display: block; width: 100%; height: auto; pointer-events: none; }
.zt-slot { position: absolute; box-sizing: border-box; min-width: 14px; min-height: 14px; border: 2px solid var(--zt-primary); background: rgba(31, 79, 216, .10); border-radius: 3px; font-size: .72rem; line-height: 1.15; overflow: hidden; color: var(--zt-text); padding: 1px 3px; cursor: pointer; }
.zt-slot-name { font-weight: 700; white-space: nowrap; }
.zt-slot-part { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--zt-c-code); }
/* 세로로 긴 슬롯(메모리 등)은 글자를 세로로 눕혀 이름이 잘리지 않게 */
.zt-slot-vertical { display: flex; gap: 2px; align-items: flex-start; }
.zt-slot-vertical .zt-slot-name, .zt-slot-vertical .zt-slot-part { display: block; writing-mode: vertical-rl; overflow: hidden; text-overflow: ellipsis; max-height: 100%; }
.zt-slot:focus-visible { outline: 2px solid var(--zt-primary); outline-offset: 1px; }
.zt-slot-filled { background: rgba(26, 138, 74, .16); border-color: var(--zt-ok); }
.zt-slot-selected { box-shadow: 0 0 0 3px var(--zt-primary-line); z-index: 2; }
.zt-slot-target:hover { background: rgba(31, 79, 216, .22); }
.zt-slot-dragging { opacity: .85; z-index: 3; }
.zt-board[data-editable="true"] .zt-slot { touch-action: none; cursor: move; }
.zt-slot-handle { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; background: var(--zt-primary); cursor: nwse-resize; border-top-left-radius: 3px; }
.zt-slot[data-kind="메모리"] { border-color: #7c3aed; background: rgba(124, 58, 237, .10); }
.zt-slot[data-kind="M.2"] { border-color: #0e7490; background: rgba(14, 116, 144, .10); }
.zt-slot[data-kind="CPU"] { border-color: #b45309; background: rgba(180, 83, 9, .10); }
.zt-slot[data-kind="SATA"], .zt-slot[data-kind="USB"] { border-color: #4b5563; background: rgba(75, 85, 99, .10); }
.zt-slot[data-kind="팬"], .zt-slot[data-kind="전원"] { border-color: #9d174d; background: rgba(157, 23, 77, .10); }
.zt-slot-filled[data-kind] { background: rgba(26, 138, 74, .16); border-color: var(--zt-ok); }
.zt-layout-edit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.zt-slot-panel { background: var(--zt-head); border: 1px solid var(--zt-line); border-radius: var(--zt-radius); padding: 12px 14px; }
.zt-slot-panel .zt-detail-kv { grid-template-columns: 70px 1fr; }
.zt-slot-nums { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: .85rem; }
.zt-slot-nums input { width: 64px; padding: 3px 6px; border: 1px solid var(--zt-line-strong); border-radius: 6px; font: inherit; }
.zt-slot-add .zt-btn { padding: 4px 10px; font-size: .85rem; }
.zt-assign { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.zt-assign-group { margin-bottom: 10px; }
.zt-assign-line { padding: 6px 0; border-top: 1px solid var(--zt-line-soft); }
.zt-assign-part { font-weight: 600; font-size: .92rem; }
.zt-unit-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.zt-unit-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--zt-line-strong); border-radius: 999px; background: var(--zt-surface); font-size: .82rem; cursor: grab; white-space: nowrap; }
.zt-unit-chip-on { border-color: var(--zt-primary); background: var(--zt-primary-soft); color: var(--zt-primary); font-weight: 650; }
.zt-unit-chip-done { opacity: .6; cursor: default; background: var(--zt-ok-soft); border-color: transparent; }
.zt-row-selected td { background: var(--zt-primary-soft); }
.zt-sheet { background: #fff; padding: 18px 22px; border: 1px solid var(--zt-line); border-radius: var(--zt-radius-lg); }
.zt-sheet h2 { margin: 0 0 8px; font-size: 1.25rem; }
.zt-sheet-sub { margin: 16px 0 6px; font-size: 1rem; }
.zt-sheet-kv { display: grid; grid-template-columns: 90px minmax(0, 1fr) 90px minmax(0, 1fr); gap: 4px 12px; font-size: .92rem; margin: 8px 0 14px; }
.zt-sheet-kv > span:nth-child(odd) { color: var(--zt-muted); }
.zt-sheet-note { margin: 0 0 12px; padding: 8px 12px; background: var(--zt-warn-soft); border-radius: var(--zt-radius); font-size: .92rem; }
.zt-sheet-table { font-size: .9rem; }
.zt-work-requests .zt-tag, .zt-work-jobs .zt-tag { text-decoration: none; }
@media (max-width: 900px) {
    .zt-layout-edit, .zt-assign { grid-template-columns: 1fr; }
    .zt-sheet-kv { grid-template-columns: 90px minmax(0, 1fr); }
}
@media print {
    @page { size: A4; margin: 12mm; }
    .zt-sheet { border: 0; padding: 0; }
    .zt-board { max-width: 100%; break-inside: avoid; }
    .zt-slot, .zt-tag { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* 작업 지시 2차 (2026-10-14): 부품 카드 끌어 놓기·조립 단계 단추·장착 상태·점검 목록 */
.zt-assign { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: stretch; }
.zt-assign-board { min-width: 0; }
.zt-assign-cards { position: relative; min-height: 240px; display: flex; flex-direction: column; }
.zt-assign-cards-list { position: absolute; inset: 42px 0 0 0; overflow-y: auto; padding-bottom: 8px; }   /* 절대 위치라 줄 높이에 끼치지 않음 → 카드 칸이 배치도보다 높아지지 않고 안에서 내려 봄 */
.zt-assign-cards-target { outline: 2px dashed var(--zt-primary); outline-offset: -4px; background: var(--zt-primary-soft); }
.zt-part-card { margin: 6px 10px; padding: 8px 10px; border: 1px solid var(--zt-line-strong); border-radius: var(--zt-radius); background: var(--zt-surface); cursor: grab; user-select: none; -webkit-user-select: none; }
.zt-part-card:hover { border-color: var(--zt-primary); }
.zt-part-card-on { border-color: var(--zt-primary); background: var(--zt-primary-soft); box-shadow: 0 0 0 2px var(--zt-primary-line); }
.zt-part-card-name { font-weight: 600; font-size: .92rem; }
.zt-step-sub { margin: 14px 0 8px; font-size: 1rem; }
.zt-board-case { background: #f3f4f6; }
.zt-slot-mount-green { border-color: var(--zt-ok) !important; }
.zt-slot-mount-red { border-color: var(--zt-tone-red) !important; background: var(--zt-tone-red-bg) !important; }
.zt-slot-mount-orange { border-color: var(--zt-tone-orange) !important; background: var(--zt-tone-orange-bg) !important; }
.zt-stage-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.zt-stage-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 128px; padding: 10px 14px; border: 2px solid var(--zt-line-strong); border-radius: var(--zt-radius-lg); background: var(--zt-surface); font: inherit; cursor: pointer; text-align: left; }
.zt-stage-tab:hover { border-color: var(--zt-primary); }
.zt-stage-tab-on { border-color: var(--zt-primary); background: var(--zt-primary-soft); }
.zt-stage-tab-done { border-color: var(--zt-ok); }
.zt-stage-tab-done .zt-stage-state { color: var(--zt-ok); font-weight: 650; }
.zt-stage-no { font-size: .75rem; color: var(--zt-muted); }
.zt-stage-name { font-weight: 650; }
.zt-stage-state { font-size: .8rem; color: var(--zt-muted); }
.zt-stage-section { padding-top: 6px; }
.zt-stage-off { display: none; }
.zt-stage-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.zt-stage-title { margin: 0; font-size: 1.1rem; }
.zt-stage-done-btn { padding: 10px 22px; font-size: 1rem; font-weight: 650; }
.zt-stage-note { grid-template-columns: 80px 1fr; margin-bottom: 8px; }
.zt-stage-add { display: grid; grid-template-columns: 1fr 2fr 2fr 2fr auto auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.zt-mount-btns { display: inline-flex; border: 1px solid var(--zt-line-strong); border-radius: 999px; overflow: hidden; }
.zt-mount-btn { padding: 4px 10px; border: 0; background: var(--zt-surface); font: inherit; font-size: .82rem; cursor: pointer; color: var(--zt-muted); border-right: 1px solid var(--zt-line); }
.zt-mount-btn:last-child { border-right: 0; }
.zt-mount-btn:hover { background: var(--zt-hover); }
.zt-mount-on.zt-mount-green { background: var(--zt-tone-green-bg); color: var(--zt-tone-green); font-weight: 650; }
.zt-mount-on.zt-mount-red { background: var(--zt-tone-red-bg); color: var(--zt-tone-red); font-weight: 650; }
.zt-mount-on.zt-mount-orange { background: var(--zt-tone-orange-bg); color: var(--zt-tone-orange); font-weight: 650; }
.zt-mount-on.zt-mount-muted { background: var(--zt-line-soft); color: var(--zt-text); font-weight: 650; }
.zt-checklist .zt-check-col { width: 44px; text-align: center; }
.zt-checklist-box { width: 18px; height: 18px; cursor: pointer; }
.zt-checklist-section td { background: var(--zt-head); font-weight: 650; }
.zt-checklist-done td { color: var(--zt-muted); }
.zt-stage-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.zt-tool-list, .zt-run-list { margin: 4px 0 0; padding-left: 18px; font-size: .9rem; }
.zt-run-list li { margin-bottom: 4px; }
.zt-run-output pre { max-height: 240px; overflow: auto; background: var(--zt-head); padding: 8px; font-size: .78rem; white-space: pre-wrap; }
@media (max-width: 900px) {
    .zt-assign { grid-template-columns: 1fr; }
    .zt-assign-cards { min-height: 200px; }
    .zt-assign-cards-list { position: static; max-height: 320px; }
    .zt-stage-tools { grid-template-columns: 1fr; }
    .zt-stage-add { grid-template-columns: 1fr 1fr; }
}
@media print {
    .zt-stage-off { display: block; }
    .zt-stage-section { break-inside: avoid; margin-bottom: 16px; }
    .zt-mount-btns { border: 0; }
    .zt-mount-btn:not(.zt-mount-on) { display: none; }
}