/*
 * Gemini Version - Modern Light/Clean Design
 * EZ-M v1.0.1 - Refined Reinterpretation
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&family=Montserrat:wght@800&display=swap');

:root {
/* ... 기존 내용 유지 ... */
    /* Color Palette - Clean & Bright */
    --bg-main: #f1f5f9;
    --bg-panel: #ffffff;
    --bg-sidebar: #1e293b; /* 사이드바는 가독성을 위해 어두운 톤 유지 */
    --primary: #2563eb;
    --primary-light: rgba(37, 99, 235, 0.1);
    --secondary: #7c3aed;
    --accent: #f59e0b;
    --success: #10b981;
    --danger: #ef4444;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    
    /* Spacing & Rounds */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --transition: all 0.2s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.hidden {
    display: none !important;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
}

#app {
    display: flex;
    width: 100%;
    height: calc(100vh - 28px);
}

.app-status-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 0 14px;
    border-top: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.06);
}

.app-status-left,
.app-status-right {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-status-left {
    flex: 0 1 auto;
    justify-content: flex-end;
}

.app-status-right {
    flex: 0 0 auto;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    margin-left: 12px;
    padding-left: 14px;
    border-left: 1px solid #cbd5e1;
}

.app-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.14);
}

.app-status-dot.busy {
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.app-status-dot.ok {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}

.app-status-dot.slow {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.app-status-dot.error {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
}

.app-status-state {
    flex: 0 0 auto;
    color: #334155;
    font-weight: 900;
}

.app-status-message {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-status-duration {
    min-width: 54px;
    color: #0f172a;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.app-status-clock-label {
    color: #94a3b8;
    font-weight: 800;
}

.app-status-clock {
    min-width: 62px;
    color: #334155;
    font-weight: 900;
    text-align: right;
}

/* --- 로그인 화면 --- */
#login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(241, 245, 249, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.login-card {
    background: white;
    padding: 40px;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    border: 1px solid var(--border);
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header .brand {
    font-size: 34px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    font-family: 'Outfit', sans-serif;
}

.login-header .brand span {
    font-family: 'Montserrat', sans-serif;
    color: #0f172a;
    font-weight: 800;
    margin-right: 15px;
    letter-spacing: -1px;
}

.login-header p {
    color: var(--text-muted);
    font-size: 14px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.input-group input {
    width: 100%;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    outline: none;
    transition: var(--transition);
}

.input-group input:focus {
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 4px var(--primary-light);
}

.error-msg {
    color: var(--danger);
    font-size: 12px;
    margin-bottom: 16px;
    margin-bottom: 16px;
    text-align: center;
}

/* 필터 바 추가 스타일 */
.filter-sep {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.1);
    margin: 0 10px;
}

.filter-input {
    background: #f8fafc; /* 밝은 배경 */
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #1e293b; /* 어두운 글자 */
    padding: 7px 12px;
    font-size: 13px;
    outline: none;
    width: 180px;
    transition: all 0.2s;
}

.filter-input:focus {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* --- 사이드바 (세련된 다크 네이비) --- */
#sidebar {
    width: 210px;
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    z-index: 100;
    border-right: 1px solid rgba(255,255,255,0.06);
    box-shadow: 4px 0 20px rgba(0,0,0,0.12);
}

.sidebar-header {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 8px;
}

.sidebar-header .brand {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.sidebar-header .brand span {
    font-family: 'Montserrat', sans-serif;
    color: #60a5fa;
    font-weight: 800;
    margin-right: 6px;
}

.nav-group {
    margin-bottom: 4px;
    padding: 0 8px;
}

/* 대분류: 좌측 강조 스타일 */
.nav-label {
    font-size: 14px; /* 11px -> 14px 확대 */
    font-weight: 800;
    color: #f8fafc; /* 더 밝고 명확하게 */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 18px 0 6px;
    padding: 0 8px;
    cursor: default;
}

/* 중분류: 컴팩트한 리스트 */
.nav-item {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    color: #94a3b8;
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 1px;
    font-size: 13px;
    border-left: 2px solid transparent;
}

.nav-item:hover:not(.disabled) {
    background: rgba(255,255,255,0.07);
    color: #cbd5e1;
    border-left-color: rgba(96,165,250,0.4);
    padding-left: 14px;
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(37,99,235,0.25), rgba(37,99,235,0.08));
    color: #93c5fd;
    font-weight: 600;
    border-left: 2px solid #3b82f6;
    padding-left: 14px;
}

/* 비활성 메뉴 스타일 */
.nav-item.disabled {
    color: #94a3b8; /* 일반 메뉴와 동일하게 */
    cursor: not-allowed;
    opacity: 1; /* 투명도 제거 */
}

.nav-item.disabled:hover {
    background: transparent;
}

/* --- 메인 콘텐츠 --- */
#main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 12px 6px;
    gap: 10px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title {
    padding-left: 5pt;
}

/* 자료실 업로드 — 가로 2열로 배치해 한 화면에 들어오게 한다 */
.archive-upload-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 18px;
    align-items: start;
}

.archive-upload-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.archive-upload-col .input-group-grow {
    flex: 1 1 auto;
}

.archive-field-hint {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════════════
   WCI 수불 — 2026-08-26 (2단계 보기)
   게시판과 같은 좌우 배치(.board-workspace)를 그대로 쓴다.
   여기서는 목록 열 너비·구분 딱지·재고 강조만 정한다.
   ══════════════════════════════════════════════════════════════════════ */

#page-wci .board-workspace {
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
}

/* 도구줄의 기간 두 칸 */
.wci-date-group { gap: 6px; }
.wci-date-group .filter-input { flex: 0 0 140px; width: 140px; }
.wci-date-sep { color: var(--text-muted); }

.wci-table { min-width: 820px; }
.wci-table td { white-space: nowrap; }
.wci-table .wci-col-date { width: 92px; }
.wci-table .wci-col-kind { width: 82px; }
.wci-table .wci-col-pn   { width: 110px; }
.wci-table .wci-col-qty  { width: 74px; text-align: right; }
.wci-table th.wci-col-qty { text-align: right; }
.wci-table .wci-col-memo {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wci-row { cursor: pointer; }
.wci-row:hover { background: #f1f5f9; }
.wci-row.is-selected { background: #e0f2fe; }

/* 재고가 마이너스면 눈에 띄게 */
.wci-stock-neg { color: var(--danger); font-weight: 700; }

/* 구분 딱지 — 입고 초록, 출고 회색 */
.wci-kind {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.wci-kind.is-in  { background: #dcfce7; color: #15803d; }
.wci-kind.is-out { background: #e2e8f0; color: #475569; }

/* ── 오른쪽 상세 ── */
.wci-detail { display: flex; flex-direction: column; gap: 2px; }
.wci-d-head {
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.wci-d-pn { margin: 6px 0 2px; font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.wci-d-sub { color: var(--text-muted); font-size: 12px; }
.wci-d-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 2px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}
.wci-d-label { color: var(--text-muted); }
.wci-d-value { font-weight: 600; text-align: right; }
.wci-d-memo {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.wci-d-dim { color: var(--text-muted); }


/* ══════════════════════════════════════════════════════════════════════
   WCI 수불 입력 — 제품현황 안에서 (2026-08-26, 3단계)
   보기는 제품현황이 맡고, 입출고 칸의 버튼으로 넣고 고치고 지운다.
   ══════════════════════════════════════════════════════════════════════ */

/* ＋수불입력 단추는 카드 제목 오른쪽 끝으로 */
.p3-inout-card-title .p3-wci-add { margin-left: auto; }

/* 목록 오른쪽 끝 작은 수정·삭제 (버튼 2개가 한 줄에 들어가게 넉넉히) */
.p3-table-col-wci-act { width: 82px; }
.p3-wci-actions { white-space: nowrap; text-align: right; }
.p3-wci-mini {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    padding: 1px 5px;
    margin-left: 2px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
}
.p3-wci-mini:hover { background: #eff6ff; border-color: var(--primary); }
.p3-wci-del:hover { background: #fef2f2; border-color: var(--danger); }

/* ── 입력창 ── */
#p3-wci-modal .modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 15px;
}
#p3-wci-modal .modal-x {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 20px; line-height: 1;
    cursor: pointer;
}
#p3-wci-modal .modal-x:hover { background: #eef2ff; color: var(--primary); }
#p3-wci-modal .modal-body { margin-bottom: 14px; }

.wci-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-bottom: 10px;
}
.wci-form .input-group {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wci-form .input-group span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}
.wci-form .input-group b { color: var(--danger); }
.wci-form input,
.wci-form select,
.wci-form textarea {
    width: 100%;
    padding: 9px 12px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #334155;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.wci-form input:focus,
.wci-form select:focus,
.wci-form textarea:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--primary-light);
}
.wci-form textarea { resize: vertical; min-height: 44px; font-family: inherit; }
.wci-form-msg { min-height: 16px; font-size: 12px; color: var(--danger); font-weight: 600; }

/* ── 입력창 가로형 (2026-08-27) — 입고·출고를 한 화면에서, 스크롤 없이 ── */
.wci-form2-card { max-width: 640px; }
.wci-form2 { display: flex; flex-direction: column; gap: 10px; }
.wci-f2-line {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 8px;
}
.wci-f2-shared { background: #f8fafc; }
.wci-f2-in { background: #f0fdf4; }
.wci-f2-out { background: #f8fafc; border: 1px solid #eef2f7; }
.wci-f2-line label { display: flex; flex-direction: column; gap: 3px; }
.wci-f2-line label span { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.wci-f2-line label b { color: var(--danger); }
.wci-f2-line input, .wci-f2-line select {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: #fff; font-size: 13px; box-sizing: border-box;
}
.wci-f2-line input[type="date"] { width: 148px; }
.wci-f2-line input[type="number"] { width: 138px; text-align: right; }  /* 수량·입고단가 1.5배 (2026-08-28) */
.wci-f2-line input[type="text"] { width: 120px; }
.wci-f2-line #wci-f-customer { width: 180px; }                          /* 고객 1.5배 (LOT 은 그대로) */
.wci-f2-line select { width: 108px; }
.wci-f2-line input:focus, .wci-f2-line select:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); outline: none;
}
/* 입고·출고 딱지 */
.wci-f2-tag {
    align-self: center;
    display: inline-block; min-width: 48px; text-align: center;
    padding: 4px 10px; margin-right: 16px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.wci-f2-tag.in { background: #dcfce7; color: #15803d; }
.wci-f2-tag.out { background: #e2e8f0; color: #475569; }
.wci-f2-tag.move { background: #fef3c7; color: #b45309; }
/* 타처보관 이동줄 (창고↔타처) */
.wci-f2-move { background: #fffbeb; border: 1px solid #fde68a; }
/* 받는제품(지원자재 연결) 칸 */
.wci-f2-target small { font-weight: 400; color: var(--text-muted); }
.wci-f2-target input { width: 120px; }
/* 새로 넣기 — 입고는 입고 영역, 출고는 출고 영역 (색깔 구분, 배지 하나씩) 2026-09-04 */
.wci-g-group {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
}
.wci-g-in  { background: #f0fdf4; border: 1px solid #dcfce7; }   /* 입고 — 초록 */
.wci-g-out { background: #eff6ff; border: 1px solid #dbeafe; }   /* 출고 — 파랑 */
.wci-g-group > .wci-f2-tag { margin-top: 4px; }
.wci-g-rows { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wci-g-row {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 2px 0;
}
.wci-g-row .wci-g-name { align-self: center; min-width: 74px; font-size: 13px; font-weight: 700; color: var(--text-main); }
.wci-g-row label { display: flex; flex-direction: column; gap: 3px; }
.wci-g-row label span { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.wci-g-row label small { font-weight: 400; color: var(--text-muted); }
.wci-g-row .wci-g-qty span { display: none; }   /* 구분 이름이 있으니 '수량' 라벨은 숨긴다 */
.wci-g-row input {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: #fff; font-size: 13px; box-sizing: border-box;
}
.wci-g-row input[type="number"] { width: 110px; text-align: right; }
.wci-g-row input[type="text"] { width: 120px; }
.wci-g-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); outline: none; }
/* 입출고 표에서 타처 이동 표시 */
.p3-move { color: #b45309; font-weight: 700; }
/* 현재 재고 참고 */
.wci-f2-stock { align-self: center; margin-left: auto; font-size: 12px; color: var(--text-muted); }
.wci-f2-stock b { color: var(--text-main); font-size: 14px; }
/* 비고 한 줄 */
.wci-f2-memo { display: flex; flex-direction: column; gap: 3px; padding: 0 10px; }
.wci-f2-memo span { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.wci-f2-memo input {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 13px;
}

/* ── 고객 추천 드롭다운 (2026-08-27) ── */
.cust-suggest {
    position: absolute; z-index: 1400;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15,23,42,0.16);
    padding: 4px; max-height: 240px; overflow: auto;
}
.cust-suggest-item {
    display: block; width: 100%; text-align: left;
    padding: 7px 10px; border: 0; background: none; border-radius: 6px;
    font-size: 13px; color: #334155; cursor: pointer; white-space: nowrap;
}
.cust-suggest-item:hover { background: #eff6ff; color: var(--primary); }

/* ── Pre-P 제품의 「WCI 재고관리 시작」 단추 ── */
.p3-info-hero-top .p3-wci-start { margin-left: 8px; }


/* ══════════════════════════════════════════════════════════════════════
   WCI 마감 창 — 2026-08-26 (3단계)
   ══════════════════════════════════════════════════════════════════════ */
.wci-close-card { max-width: 440px; display: flex; flex-direction: column; }
/* 머리(제목 + 닫기 ×) — 앱에 공용 .modal-head/.modal-x 가 없어 여기서 지정 */
.wci-close-card .modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px;
}
.wci-close-card .modal-head strong { font-size: 16px; }
.wci-close-card .modal-x {
    flex: none; width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--border); border-radius: 999px;
    background: #f8fafc; color: #475569; font-size: 18px; line-height: 1; cursor: pointer;
}
.wci-close-card .modal-x:hover { background: #eef2ff; color: var(--primary); }
.wci-close-body { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.wci-close-ml { font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.wci-close-ml input[type="month"] {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; font-size: 14px;
}
.wci-close-info {
    margin: 0; padding: 9px 12px; font-size: 12.5px; line-height: 1.5;
    background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.wci-close-grp { display: flex; align-items: center; gap: 8px; }
.wci-close-grp-t { width: 34px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.wci-close-grp .btn { flex: 1; justify-content: center; padding: 9px 8px; font-size: 12px; white-space: nowrap; }
.wci-close-grp .btn:disabled { opacity: .45; cursor: default; }
/* 마감 단추는 이 창에서만 초록으로 (앱 기본 .btn-success 는 주황) */
.wci-close-grp .btn-success { background: #16a34a; }
.wci-close-grp .btn-success:hover { background: #15803d; }
.wci-close-status { min-height: 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.wci-close-status.is-open { color: #15803d; }
.wci-close-status.is-warn { color: var(--danger); }


@media (max-width: 820px) {
    .archive-upload-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 자료실 업로드 — 문서류를 고를 때만 나타나는 버전 항목 */
.archive-doc-fields {
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}

/* 체크가 버전 입력칸 위로 올라왔다. 위 여백은 빼고 아래로 준다. */
.archive-doc-current {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.archive-doc-current input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #2463eb;
    cursor: pointer;
}

.archive-doc-hint {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.5;
}

/* ── 제품 문서 패널 ─────────────────────────────────────────
   제품현황(제품 정보)과 입고검사(상세)가 같은 모양을 쓴다.
   바깥에 다른 박스를 덧씌우지 말 것. 이 자체가 완결된 카드다. */
.doc-panel {
    margin: 0 0 14px;
    /* 다른 영역(--border: #e2e8f0)보다 진한 테두리로 눈에 띄게 한다 */
    border: 1px solid #94a3b8;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.doc-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 8px 9px 14px;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

.doc-panel-title {
    color: #334155;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.doc-panel-link {
    padding: 4px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #2463eb;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.doc-panel-link:hover {
    background: #eff4ff;
}

.doc-panel-loading {
    padding: 14px;
    color: #94a3b8;
    font-size: 12px;
}

.doc-panel-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 8px;
    padding-left: 14px;
    border-top: 1px solid #f1f5f9;
}

.doc-item:first-child {
    border-top: 0;
}

.doc-item:hover {
    background: #f9fbff;
}

/* 분류칩 | 파일명 | 버전 | 날짜 — 한 줄로 유지해 높이를 낮춘다.
   문서가 없는 줄도 같은 열을 유지해 세로가 맞는다. */
.doc-item-main {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 78px 82px;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 0;
    color: inherit;
    text-decoration: none;
}

/* 분류칩 — 자료가 올라와 있음을 한눈에 알린다 */
.doc-kind-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: 5px;
    background: linear-gradient(180deg, #fdeeee 0%, #fbe4e4 100%);
    box-shadow: inset 0 0 0 1px #f2cccc;
    color: #b03a2e;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.doc-kind-chip.is-blank {
    background: transparent;
    box-shadow: none;
    border: 1px dashed #cbd5e1;
    color: #a5b0c0;
    font-weight: 700;
}

.doc-item-name {
    min-width: 0;
    color: #16233a;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.doc-item-main:hover .doc-item-name {
    color: #2463eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.doc-item.has-file:hover .doc-kind-chip {
    box-shadow: inset 0 0 0 1px #e8b4b4;
}

.doc-item.is-empty .doc-item-name {
    color: #a5b0c0;
    font-weight: 500;
}

/* 버전 열. 값이 없어도 칸은 남겨 열을 맞춘다. */
.doc-item-ver {
    min-width: 0;
    overflow: hidden;
}

.doc-ver-tag {
    display: inline-block;
    max-width: 100%;
    padding: 1px 7px;
    border-radius: 4px;
    background: #eef2f7;
    color: #475569;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.doc-item-date {
    color: #94a3b8;
    font-size: 11px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 버튼 글자 길이가 달라도 열이 어긋나지 않도록 폭을 고정한다 */
.doc-item-action {
    flex: 0 0 auto;
    min-width: 62px;
    text-align: center;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.doc-item-action:hover {
    border-color: #cbd5e1;
    background: #fff;
    color: #2463eb;
}

.doc-item.is-empty .doc-item-action {
    color: #2463eb;
}

/* 패널이 좁아지는 화면에서는 열 폭을 줄여 제목 자리를 남긴다 */
@media (max-width: 1200px) {
    .doc-item-main {
        grid-template-columns: 72px minmax(0, 1fr) 68px 74px;
        gap: 9px;
    }
}

.doc-panel-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 9px 14px;
    border-top: 1px solid #eef2f7;
    background: #fbfcfe;
}

.doc-panel-foot-label {
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 700;
}

.doc-count {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 11.5px;
}

.doc-count-name {
    color: #64748b;
    font-weight: 600;
}

.doc-count-num {
    color: #1e293b;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.doc-count.is-zero .doc-count-name,
.doc-count.is-zero .doc-count-num {
    color: #cbd5e1;
    font-weight: 600;
}

/* 다른 화면에서 넘어왔을 때만 보이는 돌아가기 버튼 */
.page-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.page-back-btn {
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.page-back-btn:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.header-logout-btn {
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.header-logout-btn:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}

.header-logout-btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.18);
    outline-offset: 2px;
}

.page-title h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: #0f172a;
}

.page-title p {
    display: none;
}

/* --- 툴바 & 필터 --- */
.toolbar {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--card-shadow);
}

.toolbar-wrap {
    flex-wrap: wrap;
    align-items: flex-end;
}

.toolbar-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.toolbar-row-actions {
    justify-content: flex-start;
}

.btn-memo-add {
    margin-left: 14px;
}

.status-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 30px;
}

.status-filter-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.status-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
    user-select: none;
    cursor: pointer;
}

.status-check input {
    margin: 0;
    accent-color: #0f172a;
}

.status-check-healthy {
    color: #0f172a;
}

.status-check-caution {
    color: #b45309;
}

.status-check-warning {
    color: #dc2626;
}

#btn-refresh-unpaid {
    margin-left: 6px;
}

.toolbar-row-filters {
    padding-top: 2px;
}

/* 창을 좁히면 오른쪽 필터(고객사·적용·영업)가 잘려 보이지 않았다.
   nowrap + overflow:hidden 조합이 원인이라 줄바꿈을 허용한다. */
.completed-filter-row {
    justify-content: center;
    flex-wrap: wrap;
}

.completed-filter-row .filter-group {
    flex: 0 0 auto;
    min-width: 0;
}

.completed-filter-row .filter-group select {
    width: 118px;
    min-width: 118px;
    max-width: 118px;
}

#completed-filter-pn {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
}

#completed-filter-customer,
#completed-filter-app {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}

/* 이 묶음은 라벨 + 입력칸 크기만큼만 차지한다.
   `.toolbar .search-input-group` 의 420px 을 그대로 받으면
   입력칸(255px)과의 차이만큼 빈 자리가 생겨 검색 버튼이 멀리 밀려난다.
   그 규칙(선택자 2단계)을 이기려면 여기도 3단계로 적어야 한다. */
.toolbar .search-input-group.completed-pn-search-group {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
}

/* `.search-input-group .filter-input` 이 width:100% 로 덮어쓰므로 3단계로 적는다.
   170px 이던 것을 1.5배로 넓혔다. */
.toolbar .completed-pn-search-group .filter-input {
    flex: 0 0 auto;
    width: 255px;
    min-width: 255px;
    max-width: 255px;
}

.toolbar-row-period {
    justify-content: flex-start;
}

.quick-range-group {
    min-width: 260px;
}

.quick-range-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-range-btn {
    min-width: 78px;
    justify-content: center;
}

.quick-range-btn.active {
    background: #cbd5e1;
    color: #0f172a;
    border: 1px solid #94a3b8;
}

.quick-range-btn.active:hover {
    background: #cbd5e1;
    transform: none;
}

.page {
    display: none;
    flex: 1;
    overflow: hidden;
    gap: 6px;
    flex-direction: column;
}

.page.active {
    display: flex;
}

/* 입고·출고 검사관리 */
#page-qc {
    min-height: 0;
}

.qc-toolbar {
    display: flex;
    /* 창을 좁히면 한 줄에 다 못 들어간다.
       줄바꿈이 없으면 검색 버튼·상태 선택·요청 버튼이 오른쪽 밖으로 밀려 안 보인다. */
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
}

/* 검색칸은 적당한 폭으로 두고, 남는 자리를 다 채우지 않는다.
   화면이 1400px 아래로 내려가면 `.search-input-group` 을 전체폭으로 늘리는
   규칙(미납수주용)이 있어서, 여기서는 그것을 눌러 준다. */
.qc-toolbar .search-input-group,
.qc-toolbar .search-input-group .filter-input {
    flex: 0 1 420px;
    min-width: 220px;
    max-width: 420px;
}

.qc-toolbar .btn,
.qc-toolbar .qc-bucket-filter,
.qc-toolbar .qc-result-count {
    flex: 0 0 auto;
}

.qc-toolbar select {
    min-width: 130px;
    padding: 7px 30px 7px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: #334155;
}

.qc-bucket-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.qc-bucket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.qc-bucket:hover {
    background: #eef2f7;
}

.qc-bucket input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--primary, #2563eb);
    cursor: pointer;
}

.qc-bucket:has(input:checked) {
    background: #fff;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

.qc-bucket input:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
}

.qc-option-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

/* .qc-form-grid label 규칙(세로 배치·11px)을 이기려면 같은 수준의 우선순위가 필요하다 */
.qc-form-grid .qc-option {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.qc-form-grid .qc-option:hover {
    border-color: #94a3b8;
}

.qc-form-grid .qc-option input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #3f8420;
    cursor: pointer;
}

.qc-form-grid .qc-option:has(input:checked) {
    border-color: #3f8420;
    background: #f1f8e9;
    color: #33691e;
}

/* 상세 타임라인의 요청사항 태그 */
.qc-info-item-wide {
    grid-column: 1 / -1;
}

.qc-req-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

/* 요청사항도 상태 배지와 같은 각진 모양으로 통일.
   `.qc-info-item span` 규칙(회색·10.5px)에 눌리지 않도록 선택자를 한 단계 올린다. */
.qc-req-options .qc-req-option {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 4px;
    background: #d85b5b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.qc-list-row.is-deleted td {
    color: #94a3b8;
}

.qc-list-row.is-deleted .qc-cell-main {
    text-decoration: line-through;
}

.qc-result-count {
    margin-left: auto;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.qc-workspace {
    display: grid;
    grid-template-columns: minmax(480px, 42%) minmax(620px, 58%);
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
}

.qc-list-panel,
.qc-detail-panel {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.qc-list-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #dbe3ef;
}

.qc-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #1e293b;
    font-size: 13px;
}

.qc-panel-heading span {
    color: #94a3b8;
    font-size: 11px;
}

/* 정렬 토글: 요청일순 / 수정일순 (검사 목록 머리줄 오른쪽) */
.qc-sort-toggle {
    display: inline-flex;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
}

.qc-sort-btn {
    border: 0;
    background: #fff;
    color: #64748b;
    font-size: 11px;
    padding: 3px 9px;
    cursor: pointer;
}

.qc-sort-btn + .qc-sort-btn {
    border-left: 1px solid #cbd5e1;
}

.qc-sort-btn.active {
    background: #2563eb;
    color: #fff;
    font-weight: 700;
}

.qc-list-scroll,
.qc-detail-scroll {
    height: 100%;
    overflow: auto;
    scrollbar-gutter: stable;
}

.qc-list-scroll {
    overflow-x: hidden;
}

.qc-list-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11px;
}

.qc-list-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 9px 4px;
    background: #f1f5f9;
    border-bottom: 1px solid #dbe3ef;
    color: #64748b;
    text-align: left;
    font-size: 10.5px;
}

/* 납품요청일 / PN·LOT / 공급처·수량 / 납품처·담당부서 / 영업담당 / 상태·초도반복
   합이 100% 가 되어야 한다. 열을 늘리거나 줄일 때 여기도 같이 고친다. */
.qc-list-table th:nth-child(1) { width: 13%; }
.qc-list-table th:nth-child(2) { width: 20%; }
.qc-list-table th:nth-child(3) { width: 17%; }
.qc-list-table th:nth-child(4) { width: 24%; }   /* 이름 + 담당부서 배지가 함께 들어간다 */
.qc-list-table th:nth-child(5) { width: 11%; }   /* Kevin / Won / Joon 만 들어간다 */
.qc-list-table th:nth-child(6) { width: 15%; }

.qc-list-table td {
    padding: 8px 4px;
    border-bottom: 1px solid #edf2f7;
    color: #334155;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.qc-list-row {
    cursor: pointer;
}

.qc-list-row:hover {
    background: #f8fbff;
}

.qc-list-row.active {
    background: #eaf2ff;
    box-shadow: inset 3px 0 #2563eb;
}

.qc-cell-main {
    color: #0f2748;
    font-weight: 800;
}

.qc-cell-sub {
    margin-top: 3px;
    color: #789;
    font-size: 10px;
}

/* 납품요청일: 정렬 기준 열이라 숫자 폭을 고르게 맞춘다 */
.qc-cell-date {
    color: #334155;
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.qc-cell-date span {
    display: block;
    line-height: 1.25;
}

/* 요청일 아래에 들여쓴 최근수정일. 요청일과 구분되게 작게·회색으로. */
.qc-cell-mod {
    margin-top: 2px;
    padding-left: 8px;
    color: #94a3b8;
    font-size: 9px;
    line-height: 1.2;
    white-space: nowrap;
}

/* 목록 안에서는 배지를 한 단계 작게 쓴다. 담당부서 배지도 같이 줄인다. */
.qc-list-table .qc-status,
.qc-list-table .qc-dept {
    padding: 3px 8px;
    font-size: 10.5px;
}

/* 상태·판정 배지: 각진 모양에 진한 바탕 + 흰 글자 */
.qc-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 4px;
    background: #64748b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    white-space: nowrap;
}

/* 후보 목록 맨 아래, 적어 넣은 값을 그대로 쓰는 단추.
   고객사 후보와 성격이 달라 위쪽에 선을 긋고 색을 달리한다. */
.qc-cust-use-typed {
    margin-top: 6px;
    border-top: 1px dashed var(--border);
    background: #f8fafc;
}

.qc-cust-use-typed .p3-cust-name {
    color: #2563eb;
}

/* 검사 결과 입력창의 주관 부서 전환 칸.
   왼쪽 띠를 둔 안내 상자 모양이다. 켜면 띠와 바탕에 색이 들어와
   '이 검사는 특별한 건'이라는 게 한눈에 보인다. */
.qc-handover-box {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    transition: background .15s, border-color .15s;
}

.qc-handover-box.on {
    border-color: #fcd34d;
    border-left-color: #f59e0b;
    background: #fffbeb;
}

/* 체크 · 이름 · 안내를 한 줄에 놓는다. 줄 전체를 눌러도 체크된다.
   `.qc-form-grid label` 이 세로 배치로 덮어쓰므로 같은 수준으로 맞춰 적는다. */
.qc-form-grid .qc-handover-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* `.qc-form-grid input { width: 100% }` 이 체크박스까지 늘려 버린다.
   같은 수준으로 맞춰 적어야 이긴다. */
.qc-form-grid .qc-handover-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
    min-width: 15px;
    padding: 0;
    margin: 0;
    accent-color: #f59e0b;
    flex: 0 0 auto;
}

.qc-handover-name {
    flex: none;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.qc-handover-box.on .qc-handover-name {
    color: #b45309;
}

/* 안내는 이름 오른쪽에 옅게. 자리가 좁으면 줄여서 보여 준다. */
.qc-handover-hint {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #94a3b8;
    font-size: 11px;
}

/* 사유 칸은 숨기지 않는다. 체크 전에는 잠가 두어 지금 쓸 수 없다는 것만 알린다.
   글자 크기·색은 첨부 자료의 'URL (선택)' 칸과 똑같이 맞춘다.
   (부모에 font-size 가 없어 font: inherit 가 큰 글씨를 물려받고 있었다) */
.qc-form-grid .qc-handover-note {
    width: 100%;
    margin-top: 8px;
    padding: 7px 9px;
    color: #1e293b;
    font-size: 12px;
    font-weight: 500;
}

.qc-form-grid .qc-handover-note:disabled {
    border-color: #e2e8f0;
    background: #f1f5f9;
    color: #94a3b8;
}

/* 검사 이력 카드 안에서 '이 검사로 넘겼다'를 알리는 띠 */
.qc-handover-mark {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 11px;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    background: #fffbeb;
    font-size: 12px;
}

.qc-handover-mark strong { color: #b45309; }
.qc-handover-mark span   { color: #78716c; }
.qc-handover-mark em     { color: #44403c; font-style: normal; font-weight: 700; }

/* 담당부서 배지는 납품처 이름 아래 오른쪽에 붙인다 */
.qc-cell-dept {
    margin-top: 3px;
    text-align: right;
}

/* ── 활동 기록 (관리자) ───────────────────────────────── */
.activity-table-wrap {
    flex: 1 1 auto;      /* 그리드 컨테이너를 끝까지 채워 아래 여백을 없앤다 */
    min-height: 0;       /* 내용이 길면 이 안에서만 스크롤 (페이저는 맨 아래 고정) */
    overflow: auto;
}

.activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.activity-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 9px 10px;
    background: #f1f5f9;
    border-bottom: 1px solid #dbe3ef;
    color: #64748b;
    text-align: left;
    font-size: 11px;
}

.activity-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #edf2f7;
    color: #334155;
    vertical-align: top;
    white-space: normal;
}

.activity-table tbody tr:hover {
    background: #f8fafc;
}

/* 일시는 '2026-08-08 16:37' 이 한 줄에 들어가도록 폭을 넉넉히 준다 */
.activity-cell-date {
    width: 158px;   /* 날짜와 시각이 한 줄에 들어가도록 132px 에서 20% 넓혔다 */
    white-space: nowrap;
    color: #475569;
    font-weight: 500;
}

.activity-cell-actor  { width: 160px; font-weight: 700; }              /* 작성자: 80 → 2배 */
.activity-cell-area   { width: 84px; color: #334155; }                 /* 구분: 배지 대신 일반 글자, 1.2배 */
.activity-cell-target { width: 120px; font-weight: 700; color: #0f2748; }
.activity-cell-action { width: 156px; }                                /* 작업: 130 → 1.2배 (색배지) */
.activity-cell-files  { width: 72px; }                                 /* 첨부: 2배 */
.activity-cell-detail { color: #475569; overflow-wrap: anywhere; }

.activity-area {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 4px;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.activity-area-qc { background: #4f46e5; }
.activity-area-archive { background: #0f766e; }
.activity-area-pn { background: #b45309; }

/* 활동 기록 표의 '작업' 배지 — 구분+작업에 따라 배경색을 준다 */
.act-badge {
    display: inline-block;
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.act-badge.is-accent  { background: #e0edff; color: #1d4ed8; }
.act-badge.is-warning { background: #fef3c7; color: #b45309; }
.act-badge.is-danger  { background: #fee2e2; color: #b91c1c; }
.act-badge.is-success { background: #dcfce7; color: #15803d; }
.act-badge.is-qc      { background: #ede9fe; color: #6d28d9; }

/* 검사 담당부서 배지. 크기와 칠하는 방식 모두 상태 배지와 같게 맞춘다. */
.qc-dept {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.qc-dept-lab {
    background: #4f46e5;
    color: #fff;
}

.qc-dept-qc {
    background: #ea7317;
    color: #fff;
}

.qc-dept-none {
    background: #cbd5e1;
    color: #fff;
}

.qc-status.pass,
.qc-status.iqc-pass {
    background: #20a477;
}

.qc-status.oqc-pass {
    background: #3b82f6;
}

.qc-status.shipped {
    background: #7c3aed;
}

.qc-status.reject {
    background: #c43b3b;
}

.qc-status.request {
    background: #d98513;
}

.qc-detail-scroll {
    padding: 16px 18px 28px;
}

.qc-detail-empty,
.qc-loading,
.qc-error {
    display: grid;
    place-items: center;
    min-height: 240px;
    color: #94a3b8;
    text-align: center;
}

.qc-error {
    color: #b91c1c;
}

.qc-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.qc-detail-title {
    color: #0f2748;
    font-size: 21px;
    font-weight: 850;
}

.qc-detail-subtitle {
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
}

.qc-progress {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 12px 4px 22px;
}

.qc-progress-step {
    position: relative;
    padding-top: 21px;
    color: #94a3b8;
    text-align: center;
    font-size: 11.5px;
    font-weight: 750;
}

.qc-progress-date {
    display: block;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 600;
}

.qc-progress-step.done .qc-progress-date,
.qc-progress-step.current .qc-progress-date {
    color: #64748b;
}

.qc-progress-step.reject .qc-progress-date {
    color: #dc2626;
}

.qc-progress-step::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    width: 11px;
    height: 11px;
    transform: translateX(-50%);
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    z-index: 2;
}

.qc-progress-step::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #cbd5e1;
    z-index: 1;
}

.qc-progress-step:first-child::after {
    display: none;
}

.qc-progress-step.done,
.qc-progress-step.current {
    color: #2563eb;
}

.qc-progress-step.done::before,
.qc-progress-step.current::before,
.qc-progress-step.done::after,
.qc-progress-step.current::after {
    border-color: #2563eb;
    background: #2563eb;
}

.qc-progress-step.reject {
    color: #b91c1c;
}

.qc-progress-step.reject::before {
    border-color: #dc2626;
    background: #dc2626;
    box-shadow: 0 0 0 4px #fee2e2;
}

.qc-timeline {
    position: relative;
    margin-left: 8px;
    padding-left: 24px;
}

.qc-timeline::before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 8px;
    left: 6px;
    width: 2px;
    background: #dbe3ef;
}

.qc-event {
    position: relative;
    margin-bottom: 11px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
}

.qc-event::before {
    content: '';
    position: absolute;
    top: 16px;
    left: -24px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 0 2px #bfdbfe;
}

.qc-event.reject {
    border-color: #fecaca;
    background: #fffafa;
}

.qc-event.reject::before {
    background: #dc2626;
    box-shadow: 0 0 0 2px #fecaca;
}

.qc-event-title-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.qc-event-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #1e293b;
    font-size: 14.5px;
    font-weight: 800;
}


.qc-event-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.qc-event-date {
    color: #94a3b8;
    font-size: 11.5px;
    white-space: nowrap;
}

.qc-event-actor {
    color: #64748b;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* 마지막 작업에만 붙는 수정·삭제 버튼 */
.qc-event-actions {
    display: flex;
    gap: 4px;
}

.qc-event-btn {
    padding: 3px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.qc-event-btn:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.qc-event-btn.danger {
    border-color: #fca5a5;
    color: #b91c1c;
}

.qc-event-btn.danger:hover {
    border-color: #dc2626;
    background: #fef2f2;
}

.qc-event-note {
    margin-top: 7px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fafc;
    color: #475569;
    font-size: 12.5px;
    line-height: 1.55;
    /* 입력할 때 넣은 줄바꿈을 그대로 보여준다 */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.qc-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 14px;
    margin-top: 9px;
}

.qc-info-item span {
    display: block;
    color: #94a3b8;
    font-size: 10.5px;
}

.qc-info-item strong {
    display: block;
    margin-top: 2px;
    color: #334155;
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

/* 첨부를 분류별로 한 줄씩. 많으면 가로로 밀어서 본다.
   제목은 옆이 아니라 위에 둔다. 카드 안의 다른 항목(라벨 위, 값 아래)과 형태가 같아
   좌우 정렬을 고민할 필요가 없고, 사진 줄도 폭을 온전히 쓴다. */
.qc-attach-group {
    margin-top: 10px;
}

.qc-attach-group-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 600;
}

.qc-attach-count {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.qc-attach-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 사진이 아닌 파일·링크는 이름표로.
   내용 박스(.qc-event-note, #f8fafc)와 구분되도록 다른 바탕색을 쓴다. */
.qc-attach-chip {
    flex: 0 0 auto;
    max-width: 220px;
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #e7edf5;
    color: #2b3a4f;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qc-attach-chip:hover {
    border-color: #7c8ea6;
    background: #d9e2ee;
}

/* PDF 는 내려받지 않고 새 탭에서 열린다. 눌렀을 때 무슨 일이 생기는지 색으로 구분한다. */
.qc-attach-chip.is-pdf {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
}

.qc-attach-chip.is-pdf:hover {
    border-color: #ef4444;
    background: #fee2e2;
}

.qc-attach-chip.is-link {
    border-color: rgba(37, 99, 235, .25);
    background: #eff4ff;
    color: #1d4ed8;
}

.qc-photo {
    display: block;
    flex: 0 0 auto;
    width: 104px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #f8fafc;
    transition: border-color .15s, transform .15s;
}

.qc-photo:hover {
    border-color: #3f8420;
    transform: translateY(-1px);
}

.qc-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qc-photo-preview-hidden {
    display: none;
}

.qc-field-hint {
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 500;
}

/* 판정 선택 버튼 */
.qc-verdict-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.qc-form-grid .qc-verdict-btn {
    flex: 1 1 0;
    min-width: 96px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}

.qc-form-grid .qc-verdict-btn:hover {
    border-color: #94a3b8;
}

.qc-form-grid .qc-verdict-btn.pass.is-active {
    border-color: #047857;
    background: #dcfce7;
    color: #047857;
}

.qc-form-grid .qc-verdict-btn.cond.is-active {
    border-color: #b45309;
    background: #fff1cf;
    color: #9a6700;
}

.qc-form-grid .qc-verdict-btn.reject.is-active {
    border-color: #dc2626;
    background: #fee2e2;
    color: #b91c1c;
}

/* 불량 수량은 자동 계산이므로 입력할 수 없음을 눈에 보이게 */
.qc-metric-grid input[readonly] {
    background: #eef2f7;
    color: #64748b;
    cursor: default;
}

/* 첨부 자료 분류별 입력 */
.qc-attach-editor {
    margin: 16px 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.qc-attach-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.qc-attach-label {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

/* 파일 선택 버튼과 파일명을 한 칸 안에 나란히 놓는다 */
.qc-attach-filecell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 고른 파일 취소(×). 파일명 오른쪽에 작게 붙는다. */
.qc-attach-clear {
    flex: none;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.qc-attach-clear:hover {
    border-color: #ef4444;
    background: #fef2f2;
    color: #dc2626;
}

.qc-attach-picked {
    flex: 1 1 auto;
    min-width: 0;
    color: #334155;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 이미 등록되어 있는 파일은 흐리게 구분한다 */
.qc-attach-picked.is-existing {
    color: #94a3b8;
    font-weight: 500;
}

/* × 를 눌러 지우기로 표시한 파일. 저장을 눌러야 실제로 지워진다. */
.qc-attach-picked.is-removed {
    color: #dc2626;
    text-decoration: line-through;
}

.qc-attach-editor input[type="url"],
.qc-attach-editor input[type="file"] {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #1e293b;
    font: inherit;
    font-size: 12px;
}

/* 파일 선택 버튼 옆의 '선택된 파일 없음' 문구를 감춘다.
   글자를 투명하게 만들되 버튼(::file-selector-button)은 그대로 보이게 하고,
   고른 파일 수는 옆의 표시칸에 따로 적어 준다.
   위 규칙보다 뒤에 두어야 color 가 덮이지 않는다. */
/* 글자 크기를 0으로 만들면 '선택된 파일 없음' 문구가 자리를 차지하지 않는다.
   버튼은 ::file-selector-button 에서 크기를 되돌려 그대로 보이게 한다. */
.qc-attach-editor input[type="file"] {
    font-size: 0;
    color: transparent;
}

.qc-attach-editor input[type="file"]::file-selector-button {
    font: inherit;
    font-size: 12px;
    color: #334155;
}

/* 감싼 뒤에는 버튼 크기만 차지하게 두고, 남은 폭은 파일명이 쓴다 */
.qc-attach-editor .qc-attach-filecell input[type="file"] {
    flex: 0 0 auto;
    width: auto;
    padding: 6px 0 6px 6px;
}

.qc-attach-editor input[type="url"]:focus,
.qc-attach-editor input[type="file"]:focus {
    outline: 3px solid rgba(37, 99, 235, 0.13);
    border-color: #3b82f6;
}

@media (max-width: 720px) {
    .qc-attach-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }
}

/* 사진 크게 보기 */
.qc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 56px 16px 24px;
    background: rgba(8, 12, 22, 0.92);
    user-select: none;
}

.qc-lightbox-bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.qc-lightbox-count {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.qc-lightbox-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.qc-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.24);
}

.qc-lightbox-nav {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.qc-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.24);
}

.qc-lightbox-nav:disabled {
    opacity: 0.25;
    cursor: default;
}

.qc-lightbox-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
}

.qc-lightbox-img {
    max-width: min(88vw, 1400px);
    max-height: 78vh;
    object-fit: contain;
    border-radius: 8px;
    background: #0f172a;
}

.qc-lightbox-caption {
    max-width: 88vw;
    color: #cbd5e1;
    font-size: 12.5px;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .qc-lightbox {
        padding: 52px 8px 16px;
    }

    .qc-lightbox-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .qc-lightbox-nav.prev { left: 8px; }
    .qc-lightbox-nav.next { right: 8px; }

    .qc-lightbox-img {
        max-width: 96vw;
    }
}

.qc-defect-list,
.qc-file-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.qc-defect-list li,
.qc-file-list li {
    margin-top: 4px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 11.5px;
}

.qc-file-list a {
    color: #2563eb;
    text-decoration: none;
}

@media (max-width: 1200px) {
    .qc-workspace {
        grid-template-columns: minmax(430px, 45%) minmax(520px, 55%);
    }
    .qc-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.qc-detail-actions {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.qc-detail-action-btn {
    padding: 5px 11px;
}

/* 상세 상단 작업 버튼 색 */
.qc-detail-action-btn.is-primary {
    border-color: #2463eb;
    background: #2463eb;
    color: #fff;
}

.qc-detail-action-btn.is-primary:hover {
    border-color: #1b4fc4;
    background: #1b4fc4;
}

.qc-detail-action-btn.is-success {
    border-color: #16835f;
    background: #16835f;
    color: #fff;
}

.qc-detail-action-btn.is-success:hover {
    border-color: #11664a;
    background: #11664a;
}

.qc-detail-action-btn.is-neutral {
    border-color: #cbd5e1;
    background: #eef2f7;
    color: #334155;
}

.qc-detail-action-btn.is-neutral:hover {
    border-color: #94a3b8;
    background: #e2e8f0;
}

.qc-detail-action-btn.is-danger {
    border-color: #c43b3b;
    background: #fff;
    color: #c43b3b;
}

.qc-detail-action-btn.is-danger:hover {
    background: #fff0f0;
}

.qc-modal-card {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.qc-inspection-modal-card {
    max-width: 880px;
}

.qc-upload-modal-card {
    max-width: 880px;
}

.qc-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
}

.qc-form-grid label,
.qc-form-grid .qc-field-block,
.qc-action-modal label,
#qc-action-form > label,
.qc-upload-note-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

.qc-upload-existing {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
}

.qc-upload-existing strong {
    color: #334155;
    font-size: 11.5px;
}

.qc-upload-existing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.qc-upload-existing-item a {
    min-width: 0;
    overflow: hidden;
    color: #2563eb;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qc-form-grid label strong,
#qc-action-form label strong {
    color: #dc2626;
}

.qc-field-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 16px;
}

.qc-pn-check-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

.qc-pn-check-row .btn {
    white-space: nowrap;
}

.qc-pn-check-message {
    min-height: 14px;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
}

.qc-pn-check-message.ok {
    color: #047857;
}

.qc-pn-check-message.err {
    color: #b91c1c;
}

.qc-form-grid input,
.qc-form-grid select,
.qc-form-grid textarea,
.qc-metric-grid input,
#qc-action-form input,
#qc-action-form textarea,
#qc-upload-form textarea {
    width: 100%;
    padding: 8px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #1e293b;
    font: inherit;
    font-weight: 500;
}

.qc-form-grid input:focus,
.qc-form-grid select:focus,
.qc-form-grid textarea:focus,
.qc-metric-grid input:focus,
#qc-action-form input:focus,
#qc-action-form textarea:focus,
#qc-upload-form textarea:focus {
    outline: 3px solid rgba(37, 99, 235, 0.13);
    border-color: #3b82f6;
}

.qc-form-wide {
    grid-column: 1 / -1;
}

.qc-metric-grid {
    display: grid;
    grid-template-columns: 110px repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 9px;
    margin: 16px 0;
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
}

.qc-metric-grid label {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.qc-metric-title {
    align-self: center;
    color: #1e293b;
    font-size: 12px;
    font-weight: 800;
}

.qc-defect-editor {
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.qc-editor-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #334155;
    font-size: 12px;
}

.qc-defect-row {
    display: grid;
    grid-template-columns: 90px minmax(160px, 1fr) 80px minmax(140px, 1fr) 34px;
    gap: 7px;
    margin-top: 7px;
}

.qc-defect-row input,
.qc-defect-row select {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 11px;
}

.qc-defect-remove {
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: #fff1f2;
    color: #be123c;
    cursor: pointer;
}

.qc-form-grid-attachments {
    grid-template-columns: 2fr 1fr 1fr;
}

#qc-action-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#qc-upload-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 900px) {
    .qc-form-grid,
    .qc-form-grid-attachments {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .qc-metric-grid {
        grid-template-columns: 90px repeat(3, minmax(0, 1fr));
    }
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-input-group {
    min-width: 220px;
    position: relative;
}

/* 도구줄 안의 검색칸은 적당한 고정 폭으로 둔다.
   자리가 모자라면 검색칸이 늘어나는 대신 옆 항목들이 아랫줄로 내려간다.
   화면마다 다른 폭이 필요하면 뒤쪽에서 따로 덮어쓴다(제품현황 360px 등). */
.toolbar .search-input-group {
    flex: 0 1 420px;
    max-width: 420px;
}

/* 입력칸이 묶음보다 넓어지면 지우기 버튼이 칸 밖에 놓이므로 폭을 맞춘다 */
.search-input-group .filter-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding-right: 28px;
}

/* 검색어 지우기 — 입력칸 안 오른쪽에 겹쳐 놓는다. 검색어가 있을 때만 보인다. */
.search-clear-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.search-clear-btn:hover {
    background: #e2e8f0;
    color: #475569;
}

.filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;   /* '검색' 같은 짧은 라벨이 세로로 접히지 않게 */
}

select, input[type="date"] {
    background: #f8fafc;
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    outline: none;
    transition: var(--transition);
}

select:focus {
    border-color: var(--primary);
    background: white;
}

/* 2026-08-15 : 자료실 단추 크기를 모든 화면의 기본으로 삼았다.
   전에는 자료실만 따로 작게 덧칠해 두어 화면마다 크기가 달랐다. */
.btn {
    padding: 9px 18px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

/* --- 대시보드 통합 상단 영역 --- */
.summary-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.summary-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.3px;
}

.summary-card strong {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    color: #0f172a;
}

/* 통합 요약 카드 */
.unified-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--card-shadow);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-value {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.stat-item.primary .stat-value { color: var(--primary); }
.stat-item.danger .stat-value { color: var(--danger); }

.stat-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
}

/* 메모 패널 (제목행 삭제 및 공간 최적화) */
.memo-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    min-height: 92px;
}

.memo-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.memo-item {
    background: transparent;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    border-left: 2px solid #e2e8f0;
    transition: background 0.1s;
}

.memo-item:hover {
    background: #f1f5f9;
}

.memo-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}

.memo-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 12px;
}

.memo-input-group {
    padding: 6px 10px;
    background: white;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 6px;
    align-items: center;
}

#input-memo {
    flex: 1;
    padding: 7px 12px;
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    background: #f1f5f9;
}

#input-memo:focus {
    border-color: var(--primary);
    background: white;
}

#input-memo:focus {
    border-color: var(--primary);
}

.btn-sm {
    padding: 4px 10px;
    font-size: 11px;
}

/* --- 데이터 그리드 --- */
.grid-container {
    flex: 1;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--card-shadow);
}

.section-header {
    padding: 12px 20px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

.section-title {
    font-weight: 600;
    font-size: 13px;
    color: #334155;
    flex-shrink: 0;
}

.section-summary {
    font-size: 13px;
    color: #334155;
    font-weight: 600;
    margin-left: 160px;
    flex: 0 1 auto;
    width: fit-content;
    max-width: calc(100% - 140px);
    padding: 6px 12px;
    border-radius: 14px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.summary-empty {
    color: #64748b;
    font-weight: 600;
}

.summary-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    font-size: 13px;
    color: #334155;
    font-weight: 600;
}

.summary-chip-pn {
    color: #2563eb;
    font-weight: 800;
}

.summary-chip-excess {
    color: #0f172a;
    font-weight: 800;
}

.summary-chip-excess.negative {
    color: #dc2626;
}

.summary-two-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-row-labels,
.summary-row-values {
    display: grid;
    grid-template-columns: repeat(5, minmax(84px, auto));
    justify-content: start;
    gap: 10px;
}

.summary-row-labels .summary-chip {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.summary-row-values .summary-chip {
    font-size: 14px;
    font-weight: 700;
}

.completed-grid-container {
    min-height: 320px;
}

.table-wrap {
    flex: 1;
    overflow: auto;
}

table {
    width: 100%;
    min-width: 1400px;
    border-collapse: collapse;
    font-size: 13px; /* 12px -> 13px로 확대 */
}

#main-grid th:nth-child(2),
#main-grid td:nth-child(2) {
    width: 130px;
    max-width: 130px;
}

#main-grid th:nth-child(3),
#main-grid td:nth-child(3) {
    width: 187px;
    max-width: 187px;
}

#main-grid th:nth-child(10),
#main-grid td:nth-child(10),
#main-grid th:nth-child(11),
#main-grid td:nth-child(11) {
    width: 141px;
    max-width: 141px;
}

#main-grid th:nth-child(12),
#main-grid td:nth-child(12) {
    width: 130px;
    max-width: 130px;
}

#main-grid td:nth-child(2),
#main-grid td:nth-child(10),
#main-grid td:nth-child(11),
#main-grid td:nth-child(12) {
    overflow: hidden;
    text-overflow: ellipsis;
}

#wip-grid th:nth-child(1),
#wip-grid td:nth-child(1) {
    width: 126px;
    max-width: 126px;
}

#wip-grid th:nth-child(4),
#wip-grid td:nth-child(4) {
    width: 116px;
    max-width: 116px;
}

#wip-grid th:nth-child(6),
#wip-grid td:nth-child(6),
#wip-grid th:nth-child(7),
#wip-grid td:nth-child(7) {
    width: 78px;
    max-width: 78px;
}

thead {
    position: sticky;
    top: 0;
    background: #f8fafc;
    z-index: 10;
}

th {
    text-align: left;
    padding: 10px 12px;
    color: var(--text-muted);
    font-weight: 700; /* 굵게 */
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    font-size: 13px; /* 12px -> 13px로 확대 */
    letter-spacing: 0.5px;
    white-space: nowrap;
}

td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
    font-size: 13px; /* 명시적 크기 지정 */
}

tbody tr:hover {
    background: #f8fafc;
}

tbody tr.selected {
    background: var(--primary-light);
}

.pn-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pn-text {
    font-weight: 700;
    color: var(--primary);
}

.memo-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    cursor: help;
    flex-shrink: 0;
}

.memo-indicator::after {
    content: attr(data-memo-preview);
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    max-width: 360px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.96);
    color: #f8fafc;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    white-space: pre-line;
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.24);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 20;
}

.memo-indicator:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.num-cell {
    text-align: right;
}

/* 미납 수주 목록의 고객사 열 — 눈으로 먼저 찾는 값이라 굵게 둔다 */
.customer-cell {
    font-weight: 700;
    color: #0f172a;
}

.emphasis-cell {
    font-weight: 700;
    background: rgba(15, 118, 110, 0.06);
}

.empty-cell {
    text-align: center;
    padding: 72px;
    color: var(--text-muted);
}

.empty-cell.small {
    padding: 36px;
}

/* 하단 상세 영역 */
.bottom-area {
    height: 244px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.sub-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--card-shadow);
}

.completed-detail-panel {
    height: 290px;
    min-height: 290px;
    max-height: 290px;
}

#completed-main-grid .sale-type-cell,
#completed-detail-grid .sale-type-cell {
    color: #0d9488 !important;
    font-weight: 700 !important;
}

#completed-main-grid,
#completed-detail-grid {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

#completed-main-grid th,
#completed-main-grid td,
#completed-detail-grid th,
#completed-detail-grid td {
    white-space: nowrap !important;
    word-break: keep-all;
    padding: 9px 14px !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

#completed-main-grid th:nth-child(1),
#completed-main-grid td:nth-child(1),
#completed-detail-grid th:nth-child(1),
#completed-detail-grid td:nth-child(1) {
    min-width: 108px;
}

#completed-main-grid th:nth-child(2),
#completed-main-grid td:nth-child(2),
#completed-detail-grid th:nth-child(2),
#completed-detail-grid td:nth-child(2) {
    min-width: 170px;
}

#completed-main-grid th:nth-child(3),
#completed-main-grid td:nth-child(3),
#completed-detail-grid th:nth-child(3),
#completed-detail-grid td:nth-child(3) {
    min-width: 96px;
}

#completed-main-grid th:nth-child(4),
#completed-main-grid td:nth-child(4),
#completed-main-grid th:nth-child(5),
#completed-main-grid td:nth-child(5),
#completed-main-grid th:nth-child(6),
#completed-main-grid td:nth-child(6),
#completed-detail-grid th:nth-child(4),
#completed-detail-grid td:nth-child(4),
#completed-detail-grid th:nth-child(5),
#completed-detail-grid td:nth-child(5),
#completed-detail-grid th:nth-child(6),
#completed-detail-grid td:nth-child(6) {
    min-width: 96px;
}

#completed-main-grid th:nth-child(7),
#completed-main-grid td:nth-child(7),
#completed-detail-grid th:nth-child(7),
#completed-detail-grid td:nth-child(7) {
    min-width: 110px;
}

#completed-main-grid th:nth-child(8),
#completed-main-grid td:nth-child(8),
#completed-detail-grid th:nth-child(8),
#completed-detail-grid td:nth-child(8) {
    min-width: 160px;
}

#completed-main-grid th:nth-child(9),
#completed-main-grid td:nth-child(9),
#completed-detail-grid th:nth-child(9),
#completed-detail-grid td:nth-child(9) {
    min-width: 160px;
}

#completed-main-grid th:nth-child(10),
#completed-main-grid td:nth-child(10) {
    min-width: 110px;
}

#completed-detail-grid th:nth-child(10),
#completed-detail-grid td:nth-child(10),
#completed-detail-grid th:nth-child(11),
#completed-detail-grid td:nth-child(11),
#completed-detail-grid th:nth-child(12),
#completed-detail-grid td:nth-child(12) {
    min-width: 116px;
}

.panel-header {
    padding: 12px 20px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-title {
    font-weight: 600;
    font-size: 13px;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 하단 상세 영역 스타일링 */
.panel-summary {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: #ffffff;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.panel-summary span {
    color: var(--primary);
    font-weight: 700;
    margin: 0 1px;
}

.sub-panel table {
    min-width: 0 !important;
    width: 100%;
    table-layout: fixed;
    font-size: 11.5px; /* 10.5px -> 11.5px로 상향 */
}

.sub-panel th, .sub-panel td {
    padding: 10px 4px !important; /* 상하 패딩 늘려 행 높이 확보 */
    text-align: center;
    white-space: normal !important;
    word-break: break-all;
    line-height: 1.4;
}

.sub-panel td[style*="text-align: right"] {
    text-align: right !important;
}

.badge-step {
    background: #f1f5f9;
    color: var(--secondary);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 10px;
    display: inline-block;
}

/* 스크롤바 커스텀 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.btn-success {
    background: #d97706;
    color: white;
}

.btn-success:hover {
    background: #b45309;
    transform: translateY(-1px);
}

.btn-secondary {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-secondary:hover {
    background: #cbd5e1;
}

.btn-danger {
    background: #dc2626;
    color: white;
}

.btn-danger:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

/* 등록취소(소프트 삭제) 버튼 — 빨강과 구분되는 슬레이트 톤 */
.btn-cancelreg {
    background: #64748b;
    color: white;
}

.btn-cancelreg:hover {
    background: #475569;
    transform: translateY(-1px);
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

.sidebar-actions {
    margin-top: auto;
    padding-bottom: 16px;
}

.sidebar-meta {
    margin: 12px 12px 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.5;
}

#app-version-text {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(148, 163, 184, 0.45);
    text-underline-offset: 3px;
}

#app-version-text:hover {
    color: #cbd5e1;
    text-decoration-color: #cbd5e1;
}

.sidebar-action-btn {
    width: 100%;
    margin-top: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.sidebar-action-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.22);
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 24px;
}

.modal-card {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.24);
    padding: 24px;
}

.modal-card-lg {
    max-width: 760px;
}

.memo-modal-content {
    min-height: 280px;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.memo-input-group-modal {
    margin-top: 12px;
    padding: 0;
    border-top: none;
    background: transparent;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.modal-header h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    color: #0f172a;
    margin-bottom: 6px;
}

.modal-header p {
    color: var(--text-muted);
    font-size: 13px;
}

.modal-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover {
    background: #eef2ff;
    color: var(--primary);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.release-notes-list {
    margin: 0;
    padding-left: 20px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

.form-msg {
    min-height: 18px;
    margin: 8px 0 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

.form-msg.ok {
    color: var(--success);
}

.form-msg.err {
    color: var(--danger);
}

#toast-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1400;
}

.toast {
    min-width: 240px;
    max-width: 360px;
    padding: 12px 14px;
    border-radius: 12px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18);
}

.toast.info {
    background: #334155;
}

.toast.success {
    background: #059669;
}

.toast.warning {
    background: #d97706;
}

.toast.error {
    background: #dc2626;
}

@media (max-width: 1400px) {
    .bottom-area,
    .summary-row {
        grid-template-columns: 1fr;
        height: auto;
    }

    .toolbar-row {
        align-items: stretch;
    }

    .btn-memo-add {
        margin-left: 0;
    }

    /* 검색칸을 전체폭으로 늘리던 규칙은 뺐다.
       창을 조금만 좁혀도 검색칸 혼자 한 줄을 다 차지해 버렸다.
       폭은 아래 `.toolbar .search-input-group` 에서 고정값으로 준다. */
    .quick-range-group {
        min-width: 100%;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-summary {
        justify-content: flex-start;
        margin-left: 0;
    }

}

.product-search-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 92px 24px 24px;
    background: rgba(15, 23, 42, 0.28);
}

.product-search-modal.open {
    display: flex;
}

#page-product {
    gap: 10px;
}

.product-prefix-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 4px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.product-option-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
}

.product-prefix-option input {
    width: 15px;
    height: 15px;
    accent-color: var(--primary);
}

.product-help-trigger {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid #94a3b8;
    border-radius: 999px;
    background: #e5e7eb;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transform: translateY(1px);
}

.product-help-trigger:hover {
    border-color: #64748b;
    background: #d1d5db;
    color: #334155;
}

.product-period-option {
    margin-left: 0;
}

.product-help-popover {
    position: fixed;
    z-index: 1400;
    min-width: 290px;
    max-width: 360px;
    padding: 10px 12px;
    background: #f3f4f6;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

.product-help-popover::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 18px;
    width: 12px;
    height: 12px;
    background: #f3f4f6;
    border-top: 1px solid #cbd5e1;
    border-left: 1px solid #cbd5e1;
    transform: rotate(45deg);
}

.product-help-popover-title {
    margin-bottom: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.product-help-body {
    color: #334155;
    font-size: 12px;
    line-height: 1.6;
    padding: 0;
}

.product-help-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.product-help-row {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    align-items: start;
}

.product-help-check {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border: 1px solid #94a3b8;
    border-radius: 3px;
    background: #ffffff;
    position: relative;
}

.product-help-check.checked {
    border-color: #2563eb;
    background: #2563eb;
}

.product-help-check.checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(40deg);
}

.product-help-text {
    min-width: 0;
}

.product-help-highlight {
    color: #1d4ed8;
    font-weight: 900;
}

.product-help-note {
    margin-top: 2px;
    padding-left: 28px;
    color: #475569;
    font-weight: 800;
}

.product-search-list-panel,
.product-placeholder-panel,
.product-detail-panel {
    min-height: 0;
}

.product-search-list-panel {
    width: min(760px, calc(100vw - 48px));
    height: auto;
    max-height: min(620px, calc(100vh - 132px));
    overflow: hidden;
}

.product-search-modal-close {
    justify-self: end;
    width: 30px;
    height: 30px;
}

.product-list-wrap {
    max-height: min(500px, calc(100vh - 224px));
    overflow: auto;
}

.product-placeholder-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    padding: 0;
}

.product-info-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.panel-header.compact {
    padding: 12px 16px;
}

.product-info-header {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) minmax(180px, auto) minmax(80px, 1fr);
    gap: 10px;
    align-items: center;
}

.product-info-header .panel-title {
    justify-self: start;
}

.product-info-header-spacer {
    min-width: 0;
}

.product-info-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 12px;
}

.product-info-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}

.product-info-table th,
.product-info-table td {
    border: 1px solid #e2e8f0;
    padding: 7px 8px;
    vertical-align: top;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.product-info-table th {
    width: 96px;
    background: #f8fafc;
    color: #475569;
    text-align: center;
    font-weight: 800;
}

.product-info-table td {
    color: #0f172a;
    font-weight: 600;
}

.product-info-table .pn-info-value {
    color: var(--primary);
    font-weight: 900;
}

.product-info-table .pn-info-value-prep,
.product-pn-prep {
    color: #4b5563;
    font-weight: 900;
}

.product-pn-normal {
    color: var(--primary);
    font-weight: 700;
}

.product-info-empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #64748b;
    font-size: 13px;
}

.product-info-empty strong {
    color: #0f172a;
    font-size: 18px;
}

.product-info-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.product-info-pn {
    color: var(--primary);
    font-size: 20px;
    font-weight: 900;
}

.product-info-sub {
    min-width: 0;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-info-chip-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.product-info-chip {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    background: #eef2ff;
}

.product-info-chip span,
.product-info-field span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.product-info-chip strong,
.product-info-field strong {
    display: block;
    min-width: 0;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.product-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.product-info-field {
    min-width: 0;
}

.product-info-remark {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.product-tab-area {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

#page-product .product-tab-area {
    min-height: calc(100vh - 250px);
}

.product-tab-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 14px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    min-height: 42px;
}

.product-tab-display-name {
    margin-left: auto;
    min-width: 150px;
    max-width: 320px;
    padding: 4px 12px;
    border: 1px solid #fde68a;
    border-radius: 999px;
    background: #fef3c7;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-detail-more-btn {
    min-width: 76px;
    height: 30px;
    margin-left: 10px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.product-detail-more-btn:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
    color: #334155;
}

.product-detail-more-btn:disabled,
.product-detail-more-btn:disabled:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #94a3b8;
    cursor: default;
}

.product-tab-summary {
    margin-left: 6px;
    min-width: 160px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: #ffffff;
    padding: 5px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: right;
    white-space: nowrap;
}

.product-tab {
    height: 34px;
    padding: 0 14px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.product-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: #eff6ff;
}

.product-tab:disabled {
    color: #94a3b8;
    cursor: default;
}

.product-tab-panel {
    display: none;
    min-height: 0;
    flex: 1 1 auto;
}

.product-tab-panel.active {
    display: flex;
    align-items: stretch;
}

.product-tab-panel .product-detail-panel {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.product-info-tab-panel {
    background: #ffffff;
}

.product-detail-wrap {
    flex: 1 1 auto !important;
    width: 100%;
    max-height: none;
    min-height: 0;
    overflow: auto;
}

.product-search-container table {
    table-layout: fixed;
    min-width: 0;
    width: 100%;
}

.product-search-container table th:nth-child(1),
.product-search-container table td:nth-child(1) {
    width: 58px;
    text-align: center;
}

.product-search-container table th:nth-child(2),
.product-search-container table td:nth-child(2) {
    width: 82px;
}

.product-search-container table th:nth-child(3),
.product-search-container table td:nth-child(3) {
    width: 68px;
    text-align: right;
    padding-right: 8px !important;
    font-weight: 800;
    color: #0f172a;
}

.product-search-container table th:nth-child(4),
.product-search-container table td:nth-child(4) {
    width: 92px;
    text-align: center;
}

.product-search-container table th:nth-child(5),
.product-search-container table td:nth-child(5) {
    width: 170px;
    max-width: 170px;
    text-align: left;
}

.product-search-container td:nth-child(5) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-search-container tbody tr,
.product-detail-panel tbody tr {
    cursor: pointer;
}

.product-detail-head {
    display: none;
}

.product-detail-name {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    padding-left: 12px;
}

.product-detail-title-row {
    display: flex;
    align-items: center;
    gap: 34px;
}

.product-detail-title-info {
    min-width: 260px;
    padding: 6px 14px;
    border: 1px solid #fde68a;
    border-radius: 999px;
    background: #fef3c7;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

.product-detail-meta {
    display: none;
}

.product-detail-panel .sale-type-cell {
    color: #0d9488 !important;
    font-weight: 700 !important;
}

#product-search-summary {
    font-size: 14px;
    font-weight: 800;
}

#product-detail-grid {
    width: max-content;
    min-width: 1320px !important;
    table-layout: auto !important;
    font-size: 13px;
}

#product-detail-grid th,
#product-detail-grid td {
    white-space: nowrap !important;
    word-break: keep-all;
    padding: 9px 14px !important;
}

#product-detail-grid th:nth-child(1),
#product-detail-grid td:nth-child(1) {
    min-width: 108px;
}

#product-detail-grid th:nth-child(2),
#product-detail-grid td:nth-child(2) {
    min-width: 170px;
}

#product-detail-grid th:nth-child(3),
#product-detail-grid td:nth-child(3) {
    min-width: 96px;
}

#product-detail-grid th:nth-child(4),
#product-detail-grid td:nth-child(4),
#product-detail-grid th:nth-child(5),
#product-detail-grid td:nth-child(5),
#product-detail-grid th:nth-child(6),
#product-detail-grid td:nth-child(6) {
    min-width: 96px;
}

#product-detail-grid th:nth-child(7),
#product-detail-grid td:nth-child(7) {
    min-width: 110px;
}

#product-detail-grid th:nth-child(8),
#product-detail-grid td:nth-child(8) {
    min-width: 160px;
}

#product-detail-grid th:nth-child(9),
#product-detail-grid td:nth-child(9) {
    min-width: 160px;
}

#product-detail-grid th:nth-child(10),
#product-detail-grid td:nth-child(10),
#product-detail-grid th:nth-child(11),
#product-detail-grid td:nth-child(11),
#product-detail-grid th:nth-child(12),
#product-detail-grid td:nth-child(12) {
    min-width: 116px;
}

#product-unpaid-grid {
    min-width: 1400px !important;
    table-layout: auto !important;
    font-size: 13px;
}

#product-unpaid-grid th {
    text-align: left;
    padding: 10px 12px !important;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    white-space: nowrap !important;
    word-break: normal;
}

#product-unpaid-grid td {
    padding: 8px 12px !important;
    white-space: nowrap !important;
    word-break: normal;
    font-size: 13px;
    text-align: left;
}

#product-unpaid-grid th:nth-child(2),
#product-unpaid-grid td:nth-child(2) {
    width: 130px;
    max-width: 130px;
}

#product-unpaid-grid th:nth-child(3),
#product-unpaid-grid td:nth-child(3) {
    width: 187px;
    max-width: 187px;
}

#product-unpaid-grid th:nth-child(10),
#product-unpaid-grid td:nth-child(10),
#product-unpaid-grid th:nth-child(11),
#product-unpaid-grid td:nth-child(11) {
    width: 141px;
    max-width: 141px;
}

#product-unpaid-grid th:nth-child(12),
#product-unpaid-grid td:nth-child(12) {
    width: 130px;
    max-width: 130px;
}

#product-unpaid-grid td:nth-child(2),
#product-unpaid-grid td:nth-child(10),
#product-unpaid-grid td:nth-child(11),
#product-unpaid-grid td:nth-child(12) {
    overflow: hidden;
    text-overflow: ellipsis;
}

#product-stock-grid {
    width: max-content !important;
    min-width: 0 !important;
    table-layout: auto !important;
    font-size: 13px;
}

#product-stock-grid th,
#product-stock-grid td {
    padding: 8px 12px !important;
    white-space: nowrap !important;
    word-break: normal;
    text-align: left;
}

#product-stock-grid th:nth-child(1),
#product-stock-grid td:nth-child(1) {
    width: 130px;
    max-width: 130px;
}

#product-stock-grid th:nth-child(2),
#product-stock-grid td:nth-child(2) {
    width: 100px;
    max-width: 100px;
}

#product-stock-grid th:nth-child(3),
#product-stock-grid td:nth-child(3) {
    width: 100px;
    max-width: 100px;
    text-align: right;
}

#product-stock-grid th:nth-child(4),
#product-stock-grid td:nth-child(4),
#product-stock-grid th:nth-child(5),
#product-stock-grid td:nth-child(5),
#product-stock-grid th:nth-child(6),
#product-stock-grid td:nth-child(6) {
    width: 130px;
    max-width: 130px;
    text-align: center;
}

#product-stock-grid th:nth-child(7),
#product-stock-grid td:nth-child(7) {
    width: 200px;
    max-width: 200px;
}

#product-stock-grid td:nth-child(1),
#product-stock-grid td:nth-child(2),
#product-stock-grid td:nth-child(4),
#product-stock-grid td:nth-child(5),
#product-stock-grid td:nth-child(6),
#product-stock-grid td:nth-child(7) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.source-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    background: #e2e8f0;
    color: #0f172a;
}

.source-sem {
    background: #dbeafe;
    color: #1d4ed8;
}

.source-oem {
    background: #dcfce7;
    color: #15803d;
}

.source-wci {
    background: #fef3c7;
    color: #b45309;
}

.source-under,
.source-pre-p {
    background: #e5e7eb;
    color: #374151;
}

#page-admin-pn-upload {
    overflow: hidden;
}

/* 자료실은 입고검사(#page-qc)와 같은 틀을 쓴다.
   툴바 카드 + 작업영역 카드를 .page 기본 gap(6px)으로 띄운다. */
#page-archive {
    min-height: 0;
}

#page-archive .section-header,
#page-archive .panel-header {
    padding: 8px 12px;
}

#page-archive .section-summary {
    margin-left: auto;
    max-width: 180px;
    padding: 4px 10px;
}

#page-archive .btn {
    height: 40px;
    padding: 8px 14px;
    border-radius: 8px;
}

#page-archive select,
#page-archive .filter-input {
    height: 40px;
    padding: 7px 10px;
}

/* 크기 덧칠은 기본 .btn 으로 옮겼다(2026-08-15).
   예전 주석은 '입고검사에 맞춘다' 였지만 입고검사에는 그런 규칙이 없었고,
   실제로는 자료실만 작았다. 이제 모든 화면이 같은 크기를 쓴다. */
#page-archive .archive-toolbar-v2 .btn {
    height: auto;
    border-radius: var(--radius-md);
}

/* 검색 묶음(범위 select + 입력칸)은 테두리가 바깥 wrap 에 있으므로
   높이를 직접 주지 않고 안쪽 여백으로 버튼 높이(40px)에 맞춘다. */
#page-archive .archive-toolbar-v2 select,
#page-archive .archive-toolbar-v2 input {
    height: auto;
    padding: 9px 10px;
}

.archive-toolbar {
    flex: 0 0 auto;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
}

.archive-title-field {
    min-width: 300px;
}

.archive-title-field .filter-input {
    width: 260px;
    min-width: 260px;
}

.archive-action-gap {
    flex: 0 0 50px;
    width: 50px;
}

.archive-file-picker {
    position: relative;
    overflow: hidden;
}

.archive-file-picker input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.archive-layout {
    display: grid;
    grid-template-columns: minmax(460px, 0.56fr) minmax(420px, 0.44fr);
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    transition: grid-template-columns 0.18s ease;
}

.archive-layout.preview-expanded {
    grid-template-columns: minmax(300px, 0.3fr) minmax(560px, 0.7fr);
}

.archive-list-panel,
.archive-preview-panel {
    min-height: 0;
    border-radius: 10px;
}

.archive-table-wrap {
    overflow: auto;
}

#archive-grid {
    table-layout: fixed;
    min-width: 0;
    width: 100%;
}

#archive-grid th:nth-child(1),
#archive-grid td:nth-child(1) {
    width: 104px;
    text-align: center;
}

#archive-grid th:nth-child(2),
#archive-grid td:nth-child(2) {
    width: 78px;
    text-align: center;
}

#archive-grid th:nth-child(3),
#archive-grid td:nth-child(3) {
    width: 32%;
}

#archive-grid th:nth-child(4),
#archive-grid td:nth-child(4) {
    width: 32%;
}

#archive-grid th:nth-child(5),
#archive-grid td:nth-child(5) {
    width: 78px;
    text-align: center;
}

#archive-grid th,
#archive-grid td {
    padding: 8px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#archive-grid tbody tr {
    cursor: pointer;
}

#archive-grid tbody tr.selected td {
    background: #eff6ff;
}

.archive-file-name {
    font-weight: 800;
    color: #0f172a;
}

.archive-file-badge {
    display: inline-block;
    max-width: 100%;
    padding: 4px 9px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.archive-title-cell {
    color: #334155;
    font-weight: 700;
}

.archive-date-cell {
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* 분류 배지.
   색은 분류를 구분할 정도만 남기고 채도를 낮춰 눈에 덜 띄게 한다.
   글자 굵기도 900 은 색과 겹쳐 더 쨍해 보이므로 700 으로 둔다. */
.archive-category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
}

.archive-category-documents {
    background: #eff3fa;
    color: #5c76a8;
    border-color: #d5dded;
}

.archive-category-specs {
    background: #eef6f8;
    color: #4d818f;
    border-color: #d2e3e8;
}

/* 문서 종류(DocType)로 표시되는 분류.
   renderCategoryBadge 가 archive-category-{spec|prod|assy} 를 붙이는데 규칙이 없어
   이 셋만 색 없는 배지로 보였다. 나머지 분류와 같은 모양으로 맞춘다. */
.archive-category-spec {
    background: #f3f1fb;
    color: #6f64a6;
    border-color: #ddd9ee;
}

.archive-category-prod {
    background: #eef6f8;
    color: #4d818f;
    border-color: #d2e3e8;
}

.archive-category-assy {
    background: #faf4e8;
    color: #97783f;
    border-color: #ebdec4;
}

.archive-category-drawings {
    background: #eff6f1;
    color: #5c8a69;
    border-color: #d3e5d9;
}

.archive-category-images {
    background: #faf2f5;
    color: #a06a83;
    border-color: #ebd6df;
}

.archive-category-reports {
    background: #faf4ee;
    color: #a07454;
    border-color: #ebdbcb;
}

.archive-category-temp {
    background: #f6f7f9;
    color: #6b7280;
    border-color: #dfe3e8;
}

.archive-source-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 20px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    vertical-align: middle;
}

.archive-source-web {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

.archive-source-email,
.archive-source-gmail {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

.archive-source-telegram {
    background: #ecfeff;
    color: #0e7490;
    border-color: #a5f3fc;
}

.archive-actions-cell {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.mini-btn {
    min-width: 44px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mini-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #eff6ff;
}

.mini-btn.disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.archive-preview-panel {
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.archive-preview {
    flex: 1 1 auto;
    min-height: 300px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.archive-preview-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.archive-preview-header-actions .panel-summary {
    min-width: 0;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-expand-btn {
    min-width: 48px;
    height: 26px;
    background: #f8fafc;
}

.archive-preview-download-link {
    min-width: 44px;
    height: 26px;
}

.archive-upload-modal-card select,
.archive-upload-modal-card input[type="text"],
.archive-upload-modal-card input[type="file"] {
    width: 100%;
    min-width: 0;
}

/* 입력칸 바탕은 흰색으로. 로그인 화면용 `.input-group input` 이
   회색(#f8fafc)을 물려주고 있어, 검사 결과 입력창과 색이 달랐다. */
.archive-upload-modal-card .input-group input,
.archive-upload-modal-card select,
.archive-upload-modal-card textarea {
    background: #fff;
}

/* 분류는 고른 값이 한눈에 들어오도록 옅은 파랑으로 칠한다 */
.archive-upload-modal-card select.archive-category-select {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
}

/* 파일 고르기 버튼과 고른 파일 목록을 한 상자로 묶는다 */
.archive-file-box {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
}

/* '선택된 파일 없음' 문구를 감춘다. 고른 파일은 아래 목록에 따로 적는다.
   글자 크기를 0으로 만들고, 버튼만 ::file-selector-button 에서 되살린다. */
.archive-upload-modal-card .archive-file-box input[type="file"] {
    width: auto;
    margin-bottom: 8px;
    font-size: 0;
    color: transparent;
}

.archive-upload-modal-card .archive-file-box input[type="file"]::file-selector-button {
    font: inherit;
    font-size: 13px;
    color: #334155;
}

/* 바깥 상자로 이미 묶여 있으니 안쪽 상자는 없앤다 */
.archive-file-box .archive-upload-selected-file,
.archive-file-box .archive-upload-selected-empty {
    min-height: 0;
    padding: 4px 2px;
    border: 0;
    background: none;
}

/* 이미 올라가 있는 첨부와 이번에 새로 고른 파일을 구분한다.
   위쪽(기존)은 옅게, 아래쪽(새로 고른 것)은 진하게. */
.archive-file-box .archive-upload-selected-file.is-existing {
    color: #64748b;
}

.archive-file-box .archive-upload-selected-file.is-existing + .archive-upload-selected-file:not(.is-existing) {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

/* 상자 안에서는 목록의 바깥 여백을 없앤다 */
.archive-file-box .archive-upload-selected-files {
    margin: 0;
}

/* 입력칸 안내 문구(예: ...)는 아래 도움말과 같은 색·크기로 옅게 */
.archive-upload-modal-card input::placeholder,
.archive-upload-modal-card textarea::placeholder {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 400;
}

.archive-upload-form .input-group {
    margin-bottom: 14px;
}

.archive-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
}

.archive-preview iframe {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: none;
    background: #ffffff;
}

.archive-preview-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
}

.archive-preview-download strong {
    color: #0f172a;
    word-break: break-all;
}

/* ── Archive v2 ── */
/* 툴바 — 입고검사(.qc-toolbar)와 같은 흰 카드 */
.archive-toolbar-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
}

/* 분류 선택 — 입고검사 상태 체크박스 묶음(.qc-bucket-filter)과 같은 세그먼트 모양.
   분류가 8개라 좁은 화면에서는 줄바꿈되게 둔다. */
.archive-cat-tabs,
.board-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

.archive-cat-btn,
.board-cat-btn {
    padding: 5px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

/* 단일 선택이라 체크박스가 없다. 고른 값은 파란 바탕으로 확실히 구분한다. */
.archive-cat-btn.active,
.board-cat-btn.active {
    background: var(--primary, #2563eb);
    color: #fff;
}

.archive-cat-btn:hover:not(.active),
.board-cat-btn:hover:not(.active) {
    background: #eef2f7;
    color: #334155;
}

.archive-v2-search-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.archive-v2-scope {
    padding: 9px 12px;
    border: none;
    border-right: 1px solid var(--border);
    font-size: 13px;
    color: #334155;
    background: #f8fafc;
    outline: none;
    height: auto;
    min-width: 80px;
}

.archive-v2-search-input {
    padding: 9px 10px;
    border: none;
    font-size: 13px;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    width: 200px;
    height: auto;
}

.archive-v2-search-input::placeholder { color: #94a3b8; }

.archive-v2-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.archive-v2-search-clear:hover {
    color: #475569;
}

.archive-toolbar-v2 .btn { height: auto; }

/* 상세 영역의 보조 버튼(수정 등). 흰 바탕에 맞춘 연한 회색 버튼 */
.archive-v2-ghost-btn {
    background: #fff;
    color: #475569;
    border: 1px solid var(--border);
}

.archive-v2-ghost-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #94a3b8;
}

/* 상세의 삭제 버튼. 되돌릴 수 없는 작업이라 글자색으로만 구분한다. */
.archive-v2-ghost-btn.is-danger {
    color: #b91c1c;
    border-color: #fecaca;
}

.archive-v2-ghost-btn.is-danger:hover {
    background: #fef2f2;
    color: #991b1b;
    border-color: #f87171;
}

/* 작업영역 — 입고검사(.qc-workspace)와 같은 흰 카드.
   목록 열이 다섯 개라 좌우를 5:5로 나눠 왼쪽을 넓게 쓴다. */
.archive-layout-v2 {
    grid-template-columns: minmax(430px, 1fr) minmax(430px, 1fr) !important;
    gap: 0 !important;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
}

/* Left list panel */
.archive-list-panel-v2 {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-right: 1px solid #dbe3ef;
    min-height: 0;
}

/* 목록 머리줄 — 입고검사(.qc-panel-heading)와 같은 모양 */
.archive-list-stat-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #1e293b;
    font-size: 13px;
    flex-shrink: 0;
}

.archive-list-stat-bar span {
    color: #94a3b8;
    font-size: 11px;
}

/* 목록 표 — 입고검사(.qc-list-scroll / .qc-list-table)와 같은 구조와 값 */
.archive-list-scroll {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.archive-list-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11px;
}

.archive-list-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 9px 6px;
    background: #f1f5f9;
    border-bottom: 1px solid #dbe3ef;
    color: #64748b;
    text-align: left;
    font-size: 10.5px;
}

/* 일자 / 작성자 / 관련 PN / 분류 / 버전 / 제목·파일명 */
.archive-list-table th:nth-child(1) { width: 13%; }
.archive-list-table th:nth-child(2) { width: 11%; }
.archive-list-table th:nth-child(3) { width: 14%; }
.archive-list-table th:nth-child(4) { width: 17%; }
.archive-list-table th:nth-child(5) { width: 11%; }
.archive-list-table th:nth-child(6) { width: 34%; }

.archive-list-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #edf2f7;
    color: #334155;
    vertical-align: top;
    overflow-wrap: anywhere;
    /* 전역 `td` 규칙이 white-space: nowrap 이라 제목·PN 이 칸 밖으로 밀려난다.
       칸이 좁으므로 여기서는 줄바꿈을 허용한다. */
    white-space: normal;
}

.archive-v2-row {
    cursor: pointer;
}

/* 선택 표시는 입고검사 목록(.qc-list-row.active)과 같이 왼쪽 파란 막대로 준다 */
.archive-v2-row:hover { background: #f8fbff; }

.archive-v2-row.selected {
    background: #eaf2ff;
    box-shadow: inset 3px 0 #2563eb;
}

/* 날짜는 중간에서 접히면 읽기 어렵다. 바로 위 `.archive-list-table td` 의
   white-space: normal 을 이기려면 선택자를 한 단계 올려야 한다. */
.archive-list-table td.arc-cell-date {
    color: #334155;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* 작성자: 좁은 칸이라 한 줄로 두고 넘치면 ... 로 자른다 */
.archive-list-table td.arc-cell-author {
    color: #475569;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arc-cell-pn {
    color: #1d4ed8;
    font-weight: 700;
}

.arc-cell-dash { color: #cbd5e1; }

/* 제목(윗줄) + 파일명(아랫줄). 입고검사의 .qc-cell-main / .qc-cell-sub 와 같은 값.
   두 줄 모두 한 행만 쓰고, 넘치면 ... 로 자른다. 전체 내용은 마우스를 올리면 보인다. */
.arc-cell-main,
.arc-cell-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arc-cell-main {
    color: #0f2748;
    font-size: 12px;   /* 전역 td 규칙의 13px 보다 한 단계 작게 */
    font-weight: 800;
}

.arc-cell-sub {
    margin-top: 3px;
    color: #789;
    font-size: 10px;
}

.arc-cell-more {
    color: #94a3b8;
    font-weight: 700;
}

.archive-v2-ver {
    padding: 1px 6px;
    border-radius: 4px;
    background: #eef2f7;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 최신본은 파란 테두리로 구분 */
.archive-v2-ver.is-current {
    background: #eff4ff;
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

/* Right detail panel */
.archive-detail-panel-v2 {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    min-height: 0;
}

/* 입고검사 상세(.qc-detail-scroll)와 같은 안쪽 여백 */
.archive-detail-info {
    flex-shrink: 0;
    background: #fff;
    position: relative;
    padding: 16px 18px 5px;
}

.archive-detail-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
}

.arc-detail-headline { min-width: 0; }

/* 제목은 파일명이라 길다. 입고검사 제목(21px)보다 조금 줄이고 배지를 같은 줄에 둔다. */
.arc-detail-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.arc-detail-actions {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    flex-shrink: 0;
}

/* 상세 카드 — 입고검사 카드(.qc-event)와 같은 모양.
   .qc-event 를 그대로 쓰면 타임라인용 파란 점이 따라붙으므로 따로 둔다. */
.arc-card {
    margin-bottom: 11px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
}

.arc-card-title {
    color: #0f2748;
    font-size: 13px;
    font-weight: 800;
}

.arc-card-note {
    margin-top: 8px;
    color: #475569;
    font-size: 12.5px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#archive-preview-download,
.archive-v2-dl-btn {
    display: none !important;
}

.archive-preview-files {
    order: 4;
    margin-top: auto;
    background: #fff;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 16px 16px;
    flex-shrink: 0;
}

.archive-preview-files-title {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: .04em;
}

.archive-preview-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.archive-file-item-v2 {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 168px;
    min-height: 150px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    font-size: 11px;
    color: #334155;
    min-width: 0;
    max-width: none;
    text-align: left;
}

.archive-file-item-v2:hover { border-color: #93c5fd; background: #eff6ff; }
.archive-file-item-v2.selected { border-color: #2563eb; background: #dbeafe; }

.archive-file-card-v2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 168px;
    gap: 6px;
}

.archive-file-ext-v2 {
    width: 48px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
    background: #f1f5f9;
    color: #475569;
    flex-shrink: 0;
}

.archive-file-thumb-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 88px;
    overflow: hidden;
    border-radius: 7px;
    background: #eef2f7;
}

.archive-file-thumb-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.archive-file-caption-v2 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.archive-file-ext-v2.ext-pdf { background: #fecaca; color: #b91c1c; }
.archive-file-ext-v2.ext-png,
.archive-file-ext-v2.ext-jpg,
.archive-file-ext-v2.ext-jpeg,
.archive-file-ext-v2.ext-gif,
.archive-file-ext-v2.ext-webp { background: #bbf7d0; color: #15803d; }
.archive-file-ext-v2.ext-dxf,
.archive-file-ext-v2.ext-dwg { background: #bfdbfe; color: #1d4ed8; }
.archive-file-ext-v2.ext-xlsx,
.archive-file-ext-v2.ext-xls { background: #d1fae5; color: #065f46; }
.archive-file-ext-v2.ext-docx,
.archive-file-ext-v2.ext-doc { background: #dbeafe; color: #1e40af; }

.archive-file-item-v2-name {
    display: block;
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-file-item-v2-size {
    display: block;
    margin-top: 1px;
    color: #94a3b8;
    font-size: 10px;
}

.archive-preview {
    order: 4;
    display: none;
    border: 0;
    border-radius: 0;
    background: #f1f5f9;
    padding: 24px;
}

.archive-preview img,
.archive-preview iframe {
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .08);
}

.archive-preview-placeholder {
    color: #cbd5e1;
    text-align: center;
    line-height: 1.6;
}

.archive-preview-placeholder-icon {
    margin-bottom: 12px;
    font-size: 48px;
}

.archive-image-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(15, 23, 42, .72);
}

.archive-image-modal.open {
    display: flex;
}

.archive-image-modal-card {
    display: flex;
    flex-direction: column;
    width: min(1120px, 94vw);
    max-height: 92vh;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.archive-image-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
}

.archive-image-modal-head strong {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-image-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.archive-image-modal-actions a,
.archive-image-modal-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #dbe4ee;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.archive-image-modal-body {
    min-height: 0;
    overflow: auto;
    padding: 18px;
    background: #f1f5f9;
    text-align: center;
}

.archive-image-modal-body img {
    max-width: 100%;
    max-height: calc(92vh - 92px);
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
}

.attendance-toolbar {
    flex: 0 0 auto;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
}

.attendance-layout {
    display: grid;
    grid-template-columns: minmax(560px, 0.58fr) minmax(420px, 0.42fr);
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
}

.attendance-list-panel,
.attendance-detail-panel {
    min-height: 0;
    border-radius: 10px;
}

.attendance-list-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.attendance-table-wrap {
    flex: 0 0 34%;
    min-height: 170px;
    overflow: auto;
}

#attendance-grid {
    table-layout: fixed;
    min-width: 840px;
    width: 100%;
}

#attendance-grid th,
#attendance-grid td {
    padding: 8px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#attendance-grid th:nth-child(1),
#attendance-grid td:nth-child(1) {
    width: 96px;
    text-align: center;
}

#attendance-grid th:nth-child(2),
#attendance-grid td:nth-child(2) {
    width: 82px;
    text-align: center;
}

#attendance-grid th:nth-child(3),
#attendance-grid td:nth-child(3) {
    width: 220px;
}

#attendance-grid th:nth-child(4),
#attendance-grid td:nth-child(4) {
    width: 58px;
    text-align: center;
}

#attendance-grid th:nth-child(5),
#attendance-grid td:nth-child(5),
#attendance-grid th:nth-child(6),
#attendance-grid td:nth-child(6),
#attendance-grid th:nth-child(7),
#attendance-grid td:nth-child(7) {
    width: 70px;
    text-align: center;
}

#attendance-grid th:nth-child(8),
#attendance-grid td:nth-child(8) {
    width: 106px;
    text-align: center;
}

#attendance-grid tbody tr {
    cursor: pointer;
}

#attendance-grid tbody tr.selected td {
    background: #eff6ff;
}

.attendance-date-cell {
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.attendance-period-cell {
    color: #334155;
    font-weight: 700;
}

.attendance-day-cell {
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.attendance-type-badge,
.attendance-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid #bfdbfe;
}

.attendance-type-badge {
    background: #dbeafe;
    color: #1e3a8a;
    border-color: #60a5fa;
}

.attendance-type-family_event {
    background: #ede9fe;
    color: #5b21b6;
    border-color: #8b5cf6;
}

.attendance-type-public_duty {
    background: #ccfbf1;
    color: #115e59;
    border-color: #14b8a6;
}

.attendance-type-am_half,
.attendance-type-pm_half {
    background: #cffafe;
    color: #155e75;
    border-color: #06b6d4;
}

.attendance-status-review_pending,
.attendance-status-approval_pending {
    background: #ffedd5;
    color: #9a3412;
    border-color: #f97316;
}

.attendance-status-approval_pending {
    background: #fef3c7;
    color: #92400e;
    border-color: #f59e0b;
}

.attendance-status-approved,
.attendance-status-completed {
    background: #dcfce7;
    color: #166534;
    border-color: #22c55e;
}

.attendance-status-rejected {
    background: #fee2e2;
    color: #991b1b;
    border-color: #ef4444;
}

.attendance-status-cancelled,
.attendance-status-cancel_requested,
.attendance-status-cancel_approved,
.attendance-status-cancel_completed {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

.attendance-calendar-section {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 340px;
    overflow: hidden;
    border-top: 1px solid var(--border);
}

.attendance-calendar-section-header {
    flex: 0 0 auto;
    padding-top: 8px;
}

.attendance-calendar-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.attendance-calendar-controls select {
    width: 175px; /* 길어진 한글 상태 콤보박스 텍스트(전체(반려,취소 포함) 등)가 잘리지 않도록 확장 */
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
}

.attendance-calendar-title {
    min-width: 86px;
    padding: 0 2px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.attendance-calendar-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #eef2f7;
    box-shadow: var(--shadow-sm);
}

.attendance-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
    background: #e2e8f0;
}

.attendance-calendar-weekdays div {
    padding: 6px 4px;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.attendance-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.attendance-calendar-day {
    min-width: 0;
    min-height: 0;
    padding: 5px;
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    background: #f8fafc;
}

.attendance-calendar-day:nth-child(7n) {
    border-right: 0;
}

.attendance-calendar-day.other-month {
    background: #e9eef5;
    color: #64748b;
}

.attendance-calendar-day.weekend .attendance-calendar-date {
    color: #b91c1c;
}

.attendance-calendar-day.today {
    box-shadow: inset 0 0 0 2px #2563eb;
}

.attendance-calendar-date {
    margin-bottom: 3px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.attendance-calendar-events {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}

.attendance-calendar-event {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    height: auto;
    min-height: 21px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    text-align: left;
}

.attendance-calendar-event:hover {
    background: transparent;
}

.attendance-calendar-status-review_pending {
    background: transparent;
}

.attendance-calendar-status-approval_pending {
    background: transparent;
}

.attendance-calendar-status-approved,
.attendance-calendar-status-completed {
    background: transparent;
}

.attendance-calendar-status-rejected {
    background: transparent;
}

.attendance-calendar-status-cancelled {
    background: transparent;
}

.attendance-calendar-event-person {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
    height: 20px;
    padding: 0 7px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e3a8a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 900;
}

.attendance-calendar-event:hover .attendance-calendar-event-person {
    filter: brightness(0.97);
}

.attendance-calendar-status-review_pending .attendance-calendar-event-person {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

.attendance-calendar-status-approval_pending .attendance-calendar-event-person {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.attendance-calendar-status-approved .attendance-calendar-event-person,
.attendance-calendar-status-completed .attendance-calendar-event-person {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}

.attendance-calendar-status-rejected .attendance-calendar-event-person {
    background: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}

.attendance-calendar-status-cancelled .attendance-calendar-event-person {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #475569;
}

.attendance-detail-panel {
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.attendance-print-link,
.attendance-pdf-download-link {
    min-width: 44px;
    height: 26px;
}

.attendance-detail-panel .panel-header {
    padding: 8px 10px;
    gap: 10px;
}

.attendance-detail-doc-no {
    margin-left: 0;
    color: #334155;
    font-weight: 900;
}

.attendance-detail-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    min-width: 0;
}

.attendance-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.attendance-print-link.disabled,
.attendance-print-link:disabled,
.attendance-pdf-download-link.disabled,
.attendance-pdf-download-link:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.attendance-detail {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #f1f5f9;
    padding: 10px;
}

.attendance-sheet {
    max-width: 760px;
    min-height: 560px;
    margin: 0 auto;
    padding: 22px 24px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
}

.attendance-sheet-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.attendance-sheet-title {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0;
}

.attendance-sheet-sub {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.attendance-sheet-status {
    flex: 0 0 auto;
}

.attendance-approval-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #94a3b8;
    border-bottom: 0;
    margin-bottom: 14px;
}

.attendance-approval-box {
    min-width: 0;
    border-right: 1px solid #94a3b8;
    text-align: center;
}

.attendance-approval-box:last-child {
    border-right: 0;
}

.attendance-approval-role {
    padding: 5px 6px;
    border-bottom: 1px solid #cbd5e1;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 700;
}

.attendance-approval-name {
    min-height: 46px;
    padding: 12px 6px 4px;
    font-size: 14px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-approval-state {
    padding: 0 6px 8px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.attendance-sheet-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #94a3b8;
}

.attendance-sheet-table th,
.attendance-sheet-table td {
    border: 1px solid #cbd5e1;
    padding: 9px 10px;
    font-size: 13px;
    vertical-align: middle;
}

.attendance-sheet-table th {
    width: 82px;
    background: #f8fafc;
    color: #334155;
    font-weight: 800;
    text-align: center;
}

.attendance-sheet-table td {
    width: calc((100% - 246px) / 3);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-sheet-table .attendance-sheet-memo {
    min-height: 72px;
    font-weight: 700;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
}

.attendance-sheet-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0;
}

.attendance-sheet-actions > span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.attendance-action-buttons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.attendance-action-primary {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.attendance-action-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.attendance-doc {
    box-sizing: border-box !important;
    width: 700px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 20px !important;
    border: 1px solid #000000 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-family: "Malgun Gothic", "맑은 고딕", sans-serif !important;
    box-shadow: none !important;
}

.attendance-doc-header {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin-bottom: 20px !important;
}

.attendance-doc-header td {
    border: 0 !important;
    padding: 5px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.attendance-company-cell {
    width: 40% !important;
    text-align: left !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.attendance-company-cell strong {
    display: block !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.attendance-company-cell span {
    display: block !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-align: center !important;
}

.attendance-doc-title {
    width: 20% !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    letter-spacing: 5px !important;
    white-space: nowrap !important;
}

.attendance-approval-cell {
    width: 40% !important;
    text-align: right !important;
    padding-right: 0 !important;
}

.attendance-approval-table {
    border-collapse: collapse !important;
    margin-left: auto !important;
}

.attendance-approval-table td {
    width: 58px !important;
    height: 18px !important;
    border: 1px solid #000000 !important;
    padding: 3px !important;
    font-size: 11px !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
}

.attendance-signature-cell {
    height: 48px !important;
}

.attendance-signature-name {
    font-size: 12px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-signature-mark {
    margin: 4px auto 0;
    width: 38px;
    height: 18px;
    border: 1px solid #94a3b8;
    border-radius: 999px;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 900;
    line-height: 16px;
}

.attendance-signature-state {
    margin-top: 2px !important;
    color: #475569 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.attendance-doc-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin-bottom: 15px !important;
}

.attendance-doc-target-table {
    margin-bottom: 0 !important;
}

.attendance-doc-main-table {
    margin-top: -1px !important;
}

.attendance-target-dept-col {
    width: 32% !important;
}

.attendance-target-position-col {
    width: 12% !important;
}

.attendance-target-name-col {
    width: 18% !important;
}

.attendance-target-stamp-col {
    width: 19% !important;
}

.attendance-doc-table th,
.attendance-doc-table td {
    border: 1px solid #000000 !important;
    padding: 8px !important;
    font-size: 12px !important;
    vertical-align: middle !important;
}

.attendance-doc-table th {
    background: #f2f2f2 !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.attendance-target-header-row th {
    height: 32px !important;
}

.attendance-target-value-row td {
    height: 54px !important;
    text-align: center !important;
}

.attendance-stamp-cell {
    background: #ffffff !important;
}

.attendance-period-detail-cell {
    text-align: left !important;
    padding-left: 18px !important;
}

.attendance-doc-table td {
    font-weight: 500 !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.attendance-label-col {
    width: 15% !important;
}

.attendance-value-col {
    width: 35% !important;
}

.attendance-doc-tall-row th,
.attendance-doc-tall-row td {
    height: 80px !important;
    vertical-align: middle !important;
}

.attendance-checkbox-group {
    display: flex !important;
    justify-content: space-around !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.attendance-checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.attendance-checkbox-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border: 1px solid #000000;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.attendance-approval-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    margin-right: 5px;
    padding: 2px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
}

.attendance-approval-pill.done {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.attendance-note {
    margin-bottom: 8px;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

.attendance-doc-footer {
    margin-top: 30px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.attendance-doc-date {
    margin-top: 20px !important;
    letter-spacing: 2px !important;
}

.attendance-doc-sign {
    margin-top: 20px !important;
    padding-right: 50px !important;
    text-align: right !important;
}

.attendance-doc .attendance-attachment-list {
    gap: 3px !important;
}

.attendance-doc .attendance-attachment-link {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 11px !important;
}

.attendance-doc .attendance-attachment-link strong {
    display: none !important;
}

.attendance-doc .attendance-attachment-empty {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.attendance-pdf-detail {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 10px;
}

.attendance-pdf-frame {
    width: 100%;
    min-height: 660px;
    flex: 1 1 auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #ffffff;
}

.attendance-pdf-empty {
    display: flex;
    min-height: 420px;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    background: #f8fafc;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.7;
    text-align: center;
}

.attendance-attachment-empty {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.attendance-attachment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attendance-attachment-link {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    text-decoration: none;
}

.attendance-attachment-link:hover {
    border-color: var(--primary);
    background: #eff6ff;
}

.attendance-attachment-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
}

.attendance-attachment-link strong {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}

.attendance-modal-card {
    width: min(880px, calc(100vw - 48px));
}

.attendance-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 14px;
}

.attendance-form-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.attendance-form textarea,
.attendance-form select,
.attendance-form input {
    width: 100%;
    min-width: 0;
}

.attendance-form textarea {
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 13px;
    outline: none;
    resize: vertical;
}

.attendance-form textarea:focus {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px var(--primary-light);
}

.err-text {
    color: #dc2626 !important;
}

.pn-upload-layout {
    display: grid;
    grid-template-columns: minmax(420px, 0.95fr) minmax(520px, 1.05fr);
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
}

.pn-upload-input-panel,
.pn-upload-preview-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pn-upload-textarea {
    flex: 1 1 auto;
    min-height: 360px;
    width: 100%;
    border: none;
    border-top: 1px solid var(--border);
    padding: 14px;
    resize: none;
    outline: none;
    color: #0f172a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.55;
}

.pn-upload-preview-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

#pn-upload-preview-grid {
    min-width: 820px;
}

#pn-upload-preview-grid th:nth-child(1),
#pn-upload-preview-grid td:nth-child(1) {
    width: 110px;
}

#pn-upload-preview-grid th:nth-child(2),
#pn-upload-preview-grid td:nth-child(2) {
    width: 120px;
}

#pn-upload-preview-grid th:nth-child(3),
#pn-upload-preview-grid td:nth-child(3),
#pn-upload-preview-grid th:nth-child(4),
#pn-upload-preview-grid td:nth-child(4) {
    width: 150px;
}

/* ═══════════════════════════════════════════════════════════════════
   관리대장 비교 — 2026-08-26
   넣고 빼는 배치는 「DB 업로드」 와 똑같다(.pn-upload-layout 를 그대로 쓴다).
   여기서는 표 열 너비와 구분 색만 따로 정한다.
   ═══════════════════════════════════════════════════════════════════ */

#pn-compare-grid { min-width: 860px; }

#pn-compare-grid th:nth-child(1),
#pn-compare-grid td:nth-child(1) { width: 92px; }
#pn-compare-grid th:nth-child(2),
#pn-compare-grid td:nth-child(2) { width: 110px; }
#pn-compare-grid th:nth-child(5),
#pn-compare-grid td:nth-child(5) { width: 200px; }

/* 구분 딱지 — 무엇을 해야 하는지 색으로 먼저 갈라 보이게 한다 */
.pn-cmp-kind {
    font-weight: 700;
    white-space: nowrap;
}
.pn-cmp-todo {
    color: var(--text-muted);
    font-size: 12px;
}

/* 시트에만 있다 = 웹 등록을 빠뜨렸다 — 가장 급한 경우라 붉은색 */
.pn-cmp-only-sheet .pn-cmp-kind { color: #b91c1c; }
.pn-cmp-only-sheet { background: #fef2f2; }

/* DB 에만 있다 = 시트에 적기를 빠뜨렸다 — 섬기면 되므로 파란색 */
.pn-cmp-only-db .pn-cmp-kind { color: #1d4ed8; }
.pn-cmp-only-db { background: #eff6ff; }

/* 값이 다르다 — 어느 쪽이 맞는지 사람이 정해야 한다 */
.pn-cmp-value .pn-cmp-kind { color: #92400e; }
.pn-cmp-value { background: #fffbeb; }

/* 중복 — 드물고 따로 손봐야 한다 */
.pn-cmp-dup .pn-cmp-kind { color: #7c3aed; }
.pn-cmp-dup { background: #f5f3ff; }

#page-admin-users {
    overflow: hidden;
}

.user-admin-toolbar {
    flex: 0 0 auto;
}

.user-admin-search {
    min-width: 320px;
}

.user-admin-search .filter-input {
    min-width: 220px;
}

.user-admin-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 12px;
}

.user-summary-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    box-shadow: var(--card-shadow);
}

.user-summary-tile span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.user-summary-tile strong {
    color: #0f172a;
    font-size: 24px;
    font-weight: 800;
}

.user-admin-layout {
    display: grid;
    grid-template-columns: minmax(680px, 1fr) 340px;
    gap: 16px;
    min-height: 0;
    flex: 1 1 auto;
}

.user-admin-list-panel,
.user-admin-detail-panel {
    min-height: 0;
}

.user-admin-table-wrap {
    overflow: auto;
}

#user-admin-grid {
    table-layout: fixed;
    min-width: 960px;
    width: 100%;
}

#user-admin-grid th:nth-child(1),
#user-admin-grid td:nth-child(1) {
    width: 100px;
}

#user-admin-grid th:nth-child(2),
#user-admin-grid td:nth-child(2) {
    width: 96px;
    text-align: center;
}

#user-admin-grid th:nth-child(3),
#user-admin-grid td:nth-child(3),
#user-admin-grid th:nth-child(4),
#user-admin-grid td:nth-child(4) {
    width: 120px;
    text-align: center;
}

#user-admin-grid th:nth-child(5),
#user-admin-grid td:nth-child(5) {
    width: 92px;
    text-align: center;
}

#user-admin-grid th:nth-child(6),
#user-admin-grid td:nth-child(6),
#user-admin-grid th:nth-child(7),
#user-admin-grid td:nth-child(7) {
    width: 132px;
    text-align: center;
}

#user-admin-grid th:nth-child(8),
#user-admin-grid td:nth-child(8) {
    width: 72px;
    text-align: right;
}

#user-admin-grid tbody tr {
    cursor: pointer;
}

.authority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 12px;
    font-weight: 800;
}

.authority-badge.empty {
    background: #f1f5f9;
    color: #94a3b8;
}

.user-admin-detail-panel {
    display: flex;
    flex-direction: column;
    padding: 18px;
}

.user-detail-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.user-detail-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.user-detail-form label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.user-detail-form input,
.user-detail-form textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    outline: none;
}

.user-detail-form input {
    min-height: 38px;
}

.user-detail-form textarea {
    min-height: 94px;
    resize: vertical;
    line-height: 1.5;
}

.user-detail-form input:read-only {
    background: #f8fafc;
    color: #475569;
}

.user-detail-form input:focus,
.user-detail-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.user-auth-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 30px;
}

.auth-preset {
    min-width: 48px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.auth-preset.active {
    border-color: var(--primary);
    background: #eff6ff;
    color: var(--primary);
}

.authority-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.user-detail-actions {
    margin-top: auto;
}

.admin-chart-container {
    margin-bottom: 20px;
}

.admin-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    justify-content: center;
    text-align: center;
}

.admin-legend-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.admin-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.admin-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-chart-row {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 34px;
}

.admin-chart-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
}

.admin-chart-track {
    display: flex;
    min-height: 30px;
    border-radius: 8px;
    overflow: hidden;
    background: #e2e8f0;
}

.admin-chart-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    min-width: 28px;
}

.admin-person-cell {
    font-weight: 700;
    color: #0f172a;
    text-align: center !important;
}

.admin-total-cell {
    font-weight: 800;
    color: var(--primary);
}

#page-admin {
    overflow: auto;
    padding: 0 28px 10px;
}

#page-admin .grid-container,
#page-admin .admin-chart-container {
    flex: 0 0 auto;
    overflow: hidden;
    max-width: 1280px;
    margin: 0 auto 20px;
    width: 100%;
}

#page-admin .table-wrap {
    overflow: hidden;
}

#admin-login-grid {
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 0;
    width: 100%;
    font-size: 13px;
}

#admin-login-grid th,
#admin-login-grid td {
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    height: 38px;
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
}

#admin-login-grid th:last-child,
#admin-login-grid td:last-child {
    border-right: none;
}

#admin-login-grid thead th {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 13px;
    font-weight: 800;
}

#admin-login-grid tbody tr:hover td {
    background: #f8fbff;
}

@media (max-width: 1400px) {
    .product-split-layout {
        grid-template-columns: 1fr;
    }

    .product-detail-wrap {
        max-height: none;
    }

    .product-search-list-panel,
    .product-placeholder-panel {
        height: 245px;
        max-height: 245px;
    }
}

.archive-upload-form textarea,
.archive-upload-form input[type="text"],
.archive-upload-form input[type="file"],
.archive-upload-form select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.archive-upload-form textarea {
    min-height: 84px;
    resize: vertical;
}

/* 내용란: 그리드 아래 전체폭 + 세로 스크롤 (여러 줄이어도 스크롤로 다 본다) */
.archive-desc-full { width: 100%; margin-top: 4px; }
#archive-upload-description {
    width: 100%;
    min-height: 140px;
    max-height: 300px;
    overflow-y: auto;
    resize: vertical;
}

.archive-upload-selected-files {
    display: grid;
    /* 칸 폭을 정해 두지 않으면 긴 파일명이 칸을 밀어 넓혀서
       오른쪽 열과 겹친다. 폭을 가둬야 안쪽에서 ... 로 줄어든다. */
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    min-width: 0;
    margin-top: -4px;
    margin-bottom: 10px;
}

.archive-upload-selected-empty,
.archive-upload-selected-file {
    min-height: 32px;
    border: 1px solid #dbe4f0;
    border-radius: 6px;
    background: #f8fafc;
    padding: 6px 10px;
    color: #64748b;
    font-size: 13px;
}

.archive-upload-selected-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #1e293b;
}

.archive-upload-selected-file span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-upload-file-remove {
    width: 24px;
    height: 24px;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.archive-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr);
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.archive-link-row .input-group {
    min-width: 0;
}

.archive-linked-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
}

.archive-file-chip {
    border: 1px solid var(--border);
    background: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.archive-file-chip.selected {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
}

.archive-meta {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.archive-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
    gap: 16px;
}

.product-archive-toolbar {
    margin-bottom: 12px;
}

.product-archive-compact-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
}

.product-archive-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.product-archive-chip {
    height: 28px;
    padding: 0 10px;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    background: #ffffff;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.product-archive-chip.active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: var(--primary);
}

.product-archive-compact-layout {
    grid-template-columns: minmax(520px, 1fr) minmax(320px, 400px);
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
}

.product-archive-timeline {
    min-height: 0;
    overflow: auto;
    padding: 14px 22px 18px;
    border-right: 1px solid var(--border);
    background: #fbfcfe;
}

.product-archive-month {
    margin-bottom: 18px;
}

.product-archive-month-title {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    margin: 2px 0 9px;
    color: #55657b;
    font-size: 13px;
    font-weight: 900;
}

.product-archive-month-title::after {
    content: '';
    height: 1px;
    background: #e2e8f0;
}

.product-archive-month-list {
    position: relative;
    padding-left: 20px;
}

.product-archive-month-list::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 2px;
    background: #d7dee9;
}

.product-archive-card {
    position: relative;
    display: grid;
    grid-template-columns: 88px 58px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 52px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
}

.product-archive-card::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 2px solid #cfd8e6;
    border-radius: 50%;
    background: #ffffff;
    transform: translateY(-50%);
}

.product-archive-card.selected {
    border-color: #77a1ff;
    box-shadow: 0 0 0 1px #77a1ff;
}

.product-archive-card.selected::before {
    border-color: var(--primary);
    background: var(--primary);
}

.product-archive-date {
    color: #64748b;
    font-size: 12px;
    white-space: nowrap;
}

.product-archive-card-main {
    min-width: 0;
}

.product-archive-card-title {
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-archive-card-meta {
    display: flex;
    gap: 10px;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.product-archive-files-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.archive-linked-file {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.archive-linked-file-name {
    font-weight: 600;
    word-break: break-all;
}

.archive-linked-file-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.archive-linked-file-actions a {
    color: var(--primary);
    text-decoration: none;
}

@media (max-width: 980px) {
    .archive-product-layout,
    .archive-link-row {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Product Search 3 - tree menu product workspace
   ============================================================ */

/* max-width 만 두면 1400px 아래에서 min-width:100% 가 이겨 전체폭으로 늘어난다.
   min-width 도 함께 눌러 준다. */
.p3-toolbar .search-input-group,
.p3-toolbar .search-input-group .filter-input {
    flex: 0 1 360px;
    min-width: 220px;
    max-width: 360px;
}

/* 검색 기준 (PN / 고객사) */
.p3-search-field {
    min-width: 96px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

/* ── 고객사 고르기 창 ───────────────────────────────
   낱말이 여러 고객사에 걸릴 때 뜬다. 이름 표기가 제각각이라
   제품 수·최근 거래일·출처를 함께 보여 주어야 고를 수 있다. */
.p3-cust-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(15, 23, 42, .5);
}

.p3-cust-modal.open {
    display: flex;
}

.p3-cust-card {
    display: flex;
    flex-direction: column;
    width: min(520px, 94vw);
    max-height: 76vh;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.p3-cust-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.p3-cust-head strong {
    color: #0f2748;
    font-size: 14px;
}

.p3-cust-head button {
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.p3-cust-head button:hover {
    color: #0f172a;
}

.p3-cust-hint {
    padding: 8px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
    color: #64748b;
    font-size: 11.5px;
}

.p3-cust-list {
    overflow-y: auto;
}

.p3-cust-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid #edf2f7;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.p3-cust-row:hover {
    background: #f8fbff;
}

.p3-cust-name {
    min-width: 0;
    color: #0f2748;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.p3-cust-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 11px;
}

.p3-cust-cnt {
    color: #475569;
    font-weight: 700;
}

.p3-cust-date {
    font-variant-numeric: tabular-nums;
}

.p3-cust-src {
    padding: 1px 6px;
    border-radius: 4px;
    background: #eef3fa;
    color: #5c76a8;
    font-weight: 700;
}

.p3-toolbar .section-summary {
    margin-left: auto;
}

/* 최근 입력한 PN (제품현황·입고검사·자료실 공용). 검색 영역(툴바) 안에서
   아래줄을 새로 만들어(flex-basis:100%) 놓아, 검색 영역이 그만큼 아래로 늘어난다.
   왼쪽 여백은 화면마다 검색칸 앞 요소가 달라 JS 가 실제 위치를 재서 padding-left 로 맞춘다.
   기록 없으면 숨겨 자리를 안 차지한다. */
.recent-pn {
    flex-basis: 100%;
    margin: 6px 0 0;
    line-height: 1.6;
    font-size: 12px;
}

.recent-pn:empty { display: none; }

/* 배지 아닌 은은한 링크 블루 글씨. 클릭되는 버튼이지만 모양은 링크처럼. */
.recent-pn-chip {
    border: 0;
    background: none;
    padding: 0;
    color: #3b6ea5;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.recent-pn-chip:hover { text-decoration: underline; }

/* PN 사이 쉼표 구분자 */
.recent-pn-sep {
    color: #3b6ea5;
    font-weight: 700;
    font-size: 12px;
}

#p3-btn-search span {
    font-size: 18px;
    line-height: 1;
}

.p3-workspace {
    flex: 1;
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--border);
}

.p3-tree-panel {
    min-width: 0;
    background: #f8fafc;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.p3-panel-title {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
}

.p3-tree {
    overflow: auto;
    padding: 8px;
}

.p3-results-list,
.p3-selected-tree {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p3-result-row {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.p3-result-badge {
    min-width: 42px;
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 4px;
    background: #e5e7eb;
    color: #374151;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    line-height: 1.4;
}

.p3-result-badge-sem {
    background: #dbeafe;
    color: #1d4ed8;
}

.p3-result-badge-oem {
    background: #dcfce7;
    color: #15803d;
}

.p3-result-badge-wci {
    background: #fef3c7;
    color: #b45309;
}

.p3-result-badge-prep {
    background: #e5e7eb;
    color: #374151;
}

.p3-tree-back {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #0369a1;
    padding: 7px 9px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.p3-tree-back:hover {
    background: #f0f9ff;
    border-color: #7dd3fc;
}

.p3-back-arrow {
    font-size: 16px;
    line-height: 1;
}

.p3-tree-row {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
    padding: 7px 8px;
    border-radius: 6px;
}

.p3-tree-row:hover {
    background: #e2e8f0;
}

.p3-tree-row.active {
    background: #e0f2fe;
    color: #075985;
}

.p3-chevron {
    width: 14px;
    flex: 0 0 14px;
    color: #64748b;
    font-size: 12px;
}

.p3-source-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #94a3b8;
}

.p3-source-sem { background: #2563eb; }
.p3-source-oem { background: #16a34a; }
.p3-source-wci { background: #d97706; }
.p3-source-prep { background: #64748b; }

.p3-tree-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.p3-count,
.p3-qty {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* 둘째 배지 — 입고검사의 '출고', 자료실의 '그 밖'.
   이미 끝났거나 부차적인 값이라 눌러서 앞 숫자와 구분한다. */
.p3-count-sub {
    margin-left: 3px;
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
}

/* ── 쪽 나누기 (자료실 · 입고검사 공용) ───────────────── */
.pager-wrap {
    flex: 0 0 auto;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 10px;
}

.pager-info {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.pager-mid {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.pager-num,
.pager-step,
.pager-jump-btn {
    min-width: 26px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: #475569;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.pager-num:hover:not(.is-on),
.pager-step:hover:not(:disabled),
.pager-jump-btn:hover {
    background: #eef2f7;
    color: #0f172a;
}

.pager-num.is-on {
    background: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
    color: #fff;
    cursor: default;
}

.pager-step:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}

.pager-gap {
    padding: 0 3px;
    color: #94a3b8;
    font-size: 11px;
}

.pager-tail {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.pager-size,
.pager-jump {
    height: 26px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: #475569;
    font-size: 11.5px;
}

.pager-jump {
    width: 52px;
    text-align: center;
}

.p3-product-row {
    padding-left: 18px;
}

.p3-product-main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 1px;
}

.p3-product-pn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}

.p3-product-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 11px;
}

.p3-section-row {
    min-height: 29px;
    padding-left: 46px;
}

.p3-section-line {
    width: 9px;
    height: 1px;
    background: #94a3b8;
    flex: 0 0 9px;
}

.p3-detail-panel {
    min-width: 0;
    overflow: auto;
    padding: 16px 18px;
    background: #ffffff;
}

.p3-content-body {
    margin-top: 14px;
}

.p3-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.p3-card-title {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
}

.p3-inout-card-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

.p3-inout-filters {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 200pt;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

/* 조회 기간은 입고·출고 선택과 성격이 달라 같은 줄 오른쪽 끝에 따로 둔다 */
.p3-inout-card-title .p3-recent-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    white-space: nowrap;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.p3-inout-card-title .p3-recent-option input {
    width: 14px;
    height: 14px;
}

.p3-inout-filters label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    cursor: pointer;
}

.p3-inout-filters input {
    width: 14px;
    height: 14px;
}

.p3-inout-filters input[data-p3-inout-filter="in"] {
    accent-color: #15803d;
}

.p3-card-body {
    padding: 14px;
}


/* Product detail - hero tags (replaces old .p3-tag) */
.p3-hero-tags {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.p3-hero-tag {
    padding: 2px 10px;
    border-radius: 4px;
    background: #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.p3-hero-tag.p3-tag-sem {
    background: #dbeafe;
    color: #1e40af;
}

.p3-hero-tag.p3-tag-oem {
    background: #dcfce7;
    color: #166534;
}

.p3-hero-tag.p3-tag-wci {
    background: #fef3c7;
    color: #92400e;
}

.p3-hero-tag.p3-tag-prep {
    background: #f1f5f9;
    color: #475569;
}

/* Product detail - compact header (non-info sections) */
/* Product detail - hero card */
.p3-detail-page-title {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
}

/* PN 머리 영역. 높이를 이전(약 96px)의 2/3 수준으로 낮췄다.
   여백·PN·현재고 글자 크기를 함께 줄여야 실제 높이가 줄어든다. */
.p3-info-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 18px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 10px;
}

.p3-info-hero-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.p3-info-hero-pn {
    font-size: 21px;
    font-weight: 800;
    color: #0c4a6e;
    letter-spacing: -0.5px;
}

.p3-info-hero-sub {
    margin-top: 4px;
    font-size: 13px;
    color: #64748b;
}

.p3-info-hero-stock {
    text-align: center;
    padding: 5px 16px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    min-width: 96px;
}

.p3-info-hero-stock-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.p3-info-hero-stock-value {
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* WCI 히어로 — 창고재고·타처재고 두 칸 (2026-09-04) */
.p3-hero-stock-split {
    display: flex; gap: 18px; padding: 5px 18px;
    align-items: center; justify-content: center;
}
.p3-hero-stock-cell { text-align: center; }

/* Product detail - section groups */
.p3-info-section {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.p3-info-section-title {
    padding: 8px 14px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.p3-info-dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px 0;
}

/* 기본 정보 / 상세 정보를 좌우로 나란히 둔다.
   두 칸이 같은 높이로 늘어나 아래가 들쭉날쭉해 보이지 않게 한다. */
.p3-info-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 12px;
}

.p3-info-cols .p3-info-section {
    margin-bottom: 0;
}

/* 좌우로 나눈 뒤에는 칸이 좁으므로 항목을 한 행에 하나씩 쌓는다 */
.p3-info-dl-1col {
    grid-template-columns: 1fr;
}

/* 제품 문서 패널이 정보 묶음에 붙어 보이지 않게 같은 간격(12px)을 둔다.
   .doc-panel 은 입고검사와 함께 쓰는 공용 컴포넌트라 제품현황 안에서만 조정한다. */
#p3-content-body .p3-info-cols + .doc-panel {
    margin-top: 12px;
}

/* 미납 수주 화면 아래의 '미납 수주 검색' 버튼 */
.p3u-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

@media (max-width: 1100px) {
    .p3-info-cols {
        grid-template-columns: 1fr;
    }
}

.p3-info-item {
    display: flex;
    align-items: baseline;
    padding: 8px 14px;
    gap: 12px;
}

/* 비고처럼 긴 값은 두 칸을 합쳐 한 줄을 다 쓰고, 줄바꿈도 살린다 */
.p3-info-item-wide {
    grid-column: 1 / -1;
}

.p3-info-item-wide dd {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.p3-info-item dt {
    flex-shrink: 0;
    width: 80px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

.p3-info-item dd {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    overflow-wrap: anywhere;
}

.p3-table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.p3-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
}

.p3-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
}

.p3-table th,
.p3-table td {
    overflow: hidden;
    padding: 7px 5px;
    border-bottom: 1px solid var(--border);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p3-table-col-date { width: 10.5%; }
.p3-table-col-lot { width: 9%; }
.p3-table-col-num { width: 7%; }
.p3-table-col-stock { width: 7.5%; }
.p3-table-col-type { width: 10%; }
.p3-table-col-customer { width: 12%; }
.p3-table-col-mark { width: 19%; }

/* 일자·LOT 은 값·머리 모두 가운데. 숫자 열은 값=.p3-num(오른쪽)·머리=.p3-num-h(가운데) 로 잡는다 */
.p3-inout-table th:nth-child(1),
.p3-inout-table td:nth-child(1),
.p3-inout-table th:nth-child(2),
.p3-inout-table td:nth-child(2) {
    text-align: center;
}

.p3-stock-col-pn { width: 11%; }   /* PN·LN 30% 줄이고, 그만큼 재고금액·MARK 로 (2026-08-31) */
.p3-stock-col-ln { width: 9%; }
.p3-stock-col-qty { width: 10%; }
.p3-stock-col-amt { width: 15%; }  /* 재고금액 */
.p3-stock-col-mark { width: 18%; }
.p3-stock-col-memo { width: 19%; }

/* PN·LN 은 값·머리 모두 가운데. 숫자 열은 값=.p3-num(오른쪽)·머리=.p3-num-h(가운데) 로 잡는다 */
.p3-stock-table th:nth-child(1),
.p3-stock-table td:nth-child(1),
.p3-stock-table th:nth-child(2),
.p3-stock-table td:nth-child(2) {
    text-align: center;
}

/* 입출고·재고 표는 열이름(머리글)을 모두 가운데. 값 정렬은 그대로(숫자=오른쪽) */
.p3-inout-table th,
.p3-stock-table th { text-align: center; }
.p3-table th.p3-num-h { text-align: center; }
/* 입출고 구분·고객·MARK 값은 가운데 */
.p3-table td.p3-c { text-align: center; }
/* 재고 리스트는 값도 모두 가운데 (숫자 오른쪽 규칙보다 우선) */
.p3-stock-table td { text-align: center; }

.p3-unpaid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 12px;
}

.p3-unpaid-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    background: #ffffff;
}

.p3-unpaid-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.p3-unpaid-pn {
    color: #1d4ed8;
    font-size: 15px;
    font-weight: 900;
}

.p3-unpaid-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.p3-unpaid-sales {
    flex: 0 0 auto;
    padding: 3px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
}

.p3-unpaid-qty-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.p3-unpaid-qty {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fafc;
}

.p3-unpaid-qty span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.p3-unpaid-qty strong {
    display: block;
    margin-top: 2px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.p3-unpaid-over-negative strong {
    color: #dc2626;
}

.p3-unpaid-over-positive strong {
    color: #b45309;
}

.p3-unpaid-info {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 8px;
}

.p3-unpaid-info div {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #ffffff;
}

.p3-unpaid-info span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.p3-unpaid-info strong {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p3-unpaid-buckets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.p3-unpaid-buckets span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid #dbe4f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
}

.p3-unpaid-buckets em {
    color: #64748b;
    font-style: normal;
    font-weight: 800;
}

.p3-table tbody tr:hover td {
    background: #f8fafc;
}

.p3-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.p3-plus {
    color: #15803d;
    font-weight: 700;
}

.p3-minus {
    color: #dc2626;
    font-weight: 700;
}

.p3-mini-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.p3-mini-metrics span {
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.p3-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 10px;
}

.p3-pager-summary {
    margin-right: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.p3-page-btn {
    min-width: 30px;
    height: 28px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.p3-page-btn.active {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1d4ed8;
}

.p3-page-btn:disabled {
    cursor: default;
    opacity: 0.45;
}

.p3-actions {
    display: flex;
    gap: 6px;
}

.p3-actions a {
    color: #0369a1;
    font-weight: 700;
    text-decoration: none;
}

.p3-empty,
.p3-empty-state {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 32px 14px;
}

.p3-empty.compact {
    padding: 14px;
}

.p3-empty-state {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.p3-empty-title {
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
}

.p3-error {
    color: var(--danger);
}

/* ── 미납수주 커버리지 바 (p3u-*) ── */
.p3u-section { display: flex; flex-direction: column; gap: 0; }

.p3u-metrics {
    display: flex; align-items: center; gap: 0; flex-wrap: wrap;
    padding: 7px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0;
    border-bottom: 0;
    font-size: 12px;
}
.p3u-stat { display: inline-flex; align-items: baseline; gap: 3px; }
.p3u-stat-lbl { color: #94a3b8; font-weight: 500; font-size: 11px; }
.p3u-stat-val { font-weight: 700; color: #334155; }
.p3u-stat-val.blue  { color: #2563eb; }
.p3u-stat-val.green { color: #15803d; }
.p3u-stat-val.red   { color: #dc2626; }
.p3u-sep { color: #cbd5e1; margin: 0 8px; font-size: 13px; line-height: 1; }
.p3u-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 20px;
    font-size: 12px; font-weight: 700;
}
.p3u-chip-lbl { font-weight: 400; opacity: .75; font-size: 11px; }
.p3u-chip-blue { background: #dbeafe; color: #1d4ed8; }
.p3u-chip-red  { background: #fee2e2; color: #dc2626; }
.p3u-chip-green { background: #dcfce7; color: #15803d; }

.p3u-list {
    border: 1px solid #e2e8f0;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    background: #fff;
}

.p3u-row {
    display: grid;
    grid-template-columns: 2px 130px 200px 1fr 240px 150px;
    align-items: stretch;
    min-height: 56px;
    border-bottom: 1px solid #f1f5f9;
}
.p3u-row:last-child { border-bottom: 0; }
.p3u-row:hover { background: #fafafa; }

/* 상태 바 */
.p3u-bar { }
.p3u-bar.danger { background: #ef4444; }
.p3u-bar.warn   { background: #f59e0b; }
.p3u-bar.ok     { background: #22c55e; }

/* 납기 */
.p3u-date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 8px;
    border-right: 1px solid #f1f5f9;
    text-align: center;
}
.p3u-date-lbl { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.p3u-date-val { font-size: 13px; font-weight: 700; color: #1e293b; margin-top: 2px; font-variant-numeric: tabular-nums; }
.p3u-date-val.past { color: #dc2626; }
.p3u-date-val.soon { color: #d97706; }

/* 고객+App+메모 */
.p3u-customer {
    display: flex; flex-direction: column; justify-content: center;
    padding: 6px 10px;
    border-right: 1px solid #f1f5f9;
    min-width: 0;
}
.p3u-cust-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.p3u-cust-name { font-size: 13px; font-weight: 600; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p3u-memo-badge {
    flex-shrink: 0;
    display: inline-flex; align-items: center;
    padding: 1px 5px; border-radius: 3px;
    font-size: 10px; font-weight: 700;
    background: #fefce8; color: #a16207;
}
.p3u-cust-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p3u-seq { color: #cbd5e1; }

/* 커버리지 바 */
.p3u-coverage {
    display: flex; flex-direction: column; justify-content: center;
    padding: 6px 12px;
    border-right: 1px solid #f1f5f9;
}
.p3u-cov-labels {
    display: flex; justify-content: space-between;
    font-size: 10px; font-weight: 600; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 4px;
}
.p3u-cov-track {
    height: 7px; border-radius: 4px;
    background: #f1f5f9; overflow: hidden; display: flex;
}
.p3u-cov-stock { background: #22c55e; height: 100%; }
.p3u-cov-wip   { background: #3b82f6; height: 100%; }
.p3u-cov-gap   { flex: 1; height: 100%; background: #fee2e2; border-radius: 0 4px 4px 0; }
.p3u-cov-gap.full { background: #f0fdf4; }
.p3u-cov-note { font-size: 10px; color: #94a3b8; margin-top: 3px; text-align: right; }
.p3u-cov-note.ok { color: #15803d; }

/* 숫자 4개 */
.p3u-nums {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-right: 1px solid #f1f5f9;
}
.p3u-num {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 4px 2px; text-align: center;
    border-right: 1px solid #f1f5f9;
}
.p3u-num:last-child { border-right: 0; }
.p3u-num.bg-danger { background: #fff5f5; }
.p3u-num.bg-warn   { background: #fffbeb; }
.p3u-num-lbl { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.p3u-num-val { font-size: 15px; font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; }
.p3u-num-val.blue   { color: #2563eb; }
.p3u-num-val.green  { color: #15803d; }
.p3u-num-val.steel  { color: #3b82f6; }
.p3u-num-val.muted  { color: #94a3b8; }
.p3u-num-val.danger { color: #dc2626; }
.p3u-num-val.warn   { color: #d97706; }
.p3u-num-val.ok     { color: #15803d; }

/* 발주번호 */
.p3u-po {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 6px 10px;
    min-width: 0;
}
.p3u-po-lbl { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.p3u-po-val { font-size: 12px; font-weight: 600; color: #475569; margin-top: 2px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

/* ── 제품종합현황 자료 목록 (p3-arc-*) ── */
.p3-arc-file-actions a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .p3-workspace {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(220px, 36vh) minmax(0, 1fr);
    }

    .p3-tree-panel {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .p3-info-hero {
        flex-direction: column;
        gap: 12px;
    }

    .p3-info-hero-stock {
        align-self: flex-start;
    }

    .p3-info-dl {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   게시판 — 2026-08-15
   왼쪽 목록 + 오른쪽 상세. 자료실과 같은 배치다.
   ══════════════════════════════════════════════════════════════════════ */

/* 자료실(.archive-layout-v2)과 같은 배치.
   두 칸 사이에 공백을 두지 않고 바깥 테두리 하나로 감싼다. */
.board-workspace {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(430px, 1fr) minmax(430px, 1fr);
    gap: 0;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
}

.board-list-panel,
.board-detail-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* 가운데 경계선 하나로 좌우를 나눈다 */
.board-list-panel { border-right: 1px solid var(--border); }

.board-list-scroll { flex: 1; overflow: auto; }
.board-list-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.board-list-table th,
.board-list-table td { padding: 7px 10px; font-size: 13px; border-bottom: 1px solid var(--border); text-align: left; }
.board-list-table thead th { position: sticky; top: 0; background: #f8fafc; z-index: 1; font-weight: 700; }
.board-row { cursor: pointer; }
.board-row:hover { background: #f1f5f9; }
.board-row.is-selected { background: #e0f2fe; }
.board-title-cell { font-weight: 600; }
.board-date-cell { white-space: nowrap; color: var(--text-muted); }

/* 분류 딱지 */
.board-cat-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.board-cat-notice    { background: #fee2e2; color: #b91c1c; }
.board-cat-feedback  { background: #dbeafe; color: #1d4ed8; }
.board-cat-reference { background: #dcfce7; color: #15803d; }
.board-pin-mark {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
}

/* 분류 탭은 자료실(.archive-cat-tabs)과 같은 규칙을 함께 쓴다.
   두 벌로 두면 한쪽만 고쳐져 모양이 어긋난다. */

/* 쪽 넘김 */
.board-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}
.board-pager-info { color: var(--text-muted); }
.board-pager-now { font-weight: 700; }

/* 상세 */
.board-detail-panel { overflow-y: auto; padding: 16px 18px; }
.board-detail-empty { color: var(--text-muted); padding: 24px 4px; text-align: center; }
/* 글 한 장 — 제목·작성자·일시·내용·첨부를 한 카드에 담는다 */
.board-post {
    display: flex;
    flex-direction: column;
    padding: 18px 20px 20px;
    border: 1px solid #94a3b8;
    border-radius: 14px;
    background: transparent;
}

.board-post-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.board-post-tags { display: flex; gap: 6px; align-items: center; }
.board-detail-actions { display: flex; gap: 6px; flex-shrink: 0; }

.board-post-title {
    margin: 10px 0 6px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}

/* 작성자·일시·조회를 가운뎃점으로 잇는다 */
.board-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.board-post-meta > span + span::before { content: '·'; margin-right: 10px; color: #cbd5e1; }
.board-post-writer { font-weight: 700; color: #334155; }

/* 글이 짧아도 카드가 납작해지지 않게 최소 높이를 준다 */
.board-post-body {
    margin-top: 16px;
    min-height: 120px;
    font-size: 14px;
    line-height: 1.8;
    word-break: break-word;
}
.board-post-empty { color: var(--text-muted); }

.board-post-files {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* 글 카드 안의 단추. 이미 있는 .btn-sm(4px 10px)은 더 작은 곳에 쓰이므로
   여기서 덮어쓰지 않고 카드 안에서만 크기를 정한다. */
.board-post .btn { padding: 6px 12px; font-size: 12.5px; }

.board-section-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.board-files { margin-bottom: 14px; }
.board-file-row { display: flex; gap: 10px; align-items: center; padding: 3px 0; font-size: 13px; }
.board-file-down { color: var(--text-muted); font-size: 12px; }

/* 댓글 */
.board-comment {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 10px;
}
.board-comment-head { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-muted); }
.board-comment-head strong { color: var(--text-main); }
.board-comment-del { border: 0; background: none; color: #b91c1c; font-size: 12px; cursor: pointer; padding: 0; }
/* 쓴 사람·시각 줄과 눈높이를 맞추려고 글은 조금 들여 쓴다 */
.board-comment-body { font-size: 13px; line-height: 1.6; margin-top: 4px; padding-left: 10px; word-break: break-word; }
.board-comment-write { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 12px; }
.board-comment-write textarea { flex: 1; resize: vertical; }

/* 글쓰기 창 */
.board-edit-msg { min-height: 18px; font-size: 12px; color: var(--text-muted); margin: 6px 0; }
.board-edit-msg.is-error { color: #b91c1c; font-weight: 600; }

/* 입력칸을 창 너비에 맞춘다.
   내버려 두면 textarea 가 브라우저 기본 크기(가로 20글자)로 좁게 나온다. */
#board-edit-modal .input-group input[type="text"],
#board-edit-modal .input-group select,
#board-edit-modal .input-group textarea {
    width: 100%;
    box-sizing: border-box;
}
#board-edit-modal .input-group textarea {
    min-height: 220px;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    padding: 10px 12px;
}

/* 고른 첨부 목록 (파일 고르기 + 붙여넣기) */
.board-file-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.board-file-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    font-size: 13px;
}
.board-file-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-file-pick-size { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.board-file-pick-del {
    border: 0;
    background: none;
    color: #b91c1c;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.board-file-pick-del:hover { color: #7f1d1d; }

/* 목록 열 너비 — 일시를 맨 앞에 두고 좁게 */
.board-col-date { width: 132px; }
.board-col-cat  { width: 64px; }
.board-col-who  { width: 76px; }
.board-col-n    { width: 44px; text-align: center; }
.board-list-table td.board-col-n { text-align: center; }

/* 첨부 그림쪽지 */
.board-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 8px;
}
.board-file-card { min-width: 0; }
.board-thumb {
    width: 100%;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    overflow: hidden;
}
.board-thumb:hover { border-color: var(--primary, #2563eb); }
.board-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-thumb-ext { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; }
.board-file-card-name {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.board-file-card-foot {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 10px;
    color: var(--text-muted);
}

/* 본문과 댓글 사이 구분선 */
.board-divided { margin-top: 16px; }

/* 그림 크게 보기 */
.board-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 16px 24px;
    background: rgba(15, 23, 42, 0.86);
}
.board-lightbox-img {
    max-width: 92vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff;
}
.board-lightbox-name { color: #e2e8f0; font-size: 13px; }
.board-lightbox-close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* 로그인할 때 뜨는 공지 */
.board-notice-card { z-index: 1; }

/* 안내 문구를 제목 아래가 아니라 옆에 붙인다 */
.board-notice-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.board-notice-heading p { margin: 0; }
.board-notice-list { max-height: 62vh; overflow-y: auto; }

.board-notice-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.board-notice-item:last-child { border-bottom: 0; }

.board-notice-title {
    border: 0;
    background: none;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary, #2563eb);
    text-align: left;
    cursor: pointer;
}
.board-notice-title:hover { text-decoration: underline; }

.board-notice-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* 긴 공지도 창이 길어지지 않게 열 줄까지만 보여 준다.
   그 뒤는 '게시판에서 보기' 로 넘어가 읽으면 된다. */
.board-notice-body {
    margin: 12px 0 12px;
    font-size: 13.5px;
    line-height: 1.7;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.board-notice-skip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
}

/* 이미 올라간 첨부 (수정 창) */
.board-file-pick.is-existing { background: #eff6ff; border-color: #bfdbfe; }
.board-file-pick-tag {
    font-size: 10px;
    font-weight: 700;
    color: #1d4ed8;
    background: #dbeafe;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   검색 영역 뼈대 — 2026-08-15
   입고검사·자료실·게시판이 같은 모양이 되도록 좌우 두 묶음으로 나눈다.

     왼쪽  구분 → (검색 범위) → 검색란 → 검색 단추
     오른쪽 만들기 단추 → 건수 배지

   건수는 자료실이 쓰던 노란 배지(.section-summary)로 통일한다.
   ══════════════════════════════════════════════════════════════════════ */
.ezm-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ezm-tb-left,
.ezm-tb-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* 오른쪽 묶음을 끝으로 밀어 붙인다 */
.ezm-tb-right { margin-left: auto; }

/* 배지가 예전 배치에 맞춰 왼쪽 여백을 크게 갖고 있었다.
   이제 오른쪽 묶음 안에 들어가므로 그 여백을 없앤다. */
.ezm-tb-right .section-summary {
    margin-left: 0;
    max-width: none;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   화면마다 다르던 검색 상자를 맞춘다 — 2026-08-15
   높이는 입고검사(.qc-toolbar : padding 10px 12px / gap 8px) 를 기준으로,
   검색칸 너비는 SEM 납품 PN 칸(.search-input-group : 220px) 을 기준으로 한다.
   미납수주·SEM 납품은 조건이 많아 지금 모양을 그대로 둔다.
   ══════════════════════════════════════════════════════════════════════ */
.p3-toolbar,
#page-board .toolbar {
    padding: 10px 12px;
    gap: 8px;
}

/* 검색칸 너비 통일. 제품현황은 flex 기준값이 360px 로 박혀 있어 함께 눌러 준다. */
.p3-toolbar .search-input-group,
.p3-toolbar .search-input-group .filter-input,
#page-qc .search-input-group,
#page-board .search-input-group,
#page-pn-register .search-input-group,
#archive-search-text {
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
}



/* ══════════════════════════════════════════════════════════════════════
   좁은 화면(휴대폰) 규칙 — 2026-08-13

   처음에는 좁은 화면에 맞춰 세로로 '쌓는' 방식으로 만들었는데,
   목록 화면이 오히려 보기 힘들었다. 그래서 '미는' 방식으로 바꿨다.
   본문은 PC 배치를 그대로 두고 손가락으로 좌우로 밀어서 본다.

     · 왼쪽 메뉴만 서랍(햄버거 ☰)으로 뺀다
     · 본문은 PC 폭(1100px)을 지키고 좌우로 민다
     · 제목줄은 밀어도 제자리에 붙어 있어 ☰ 를 언제든 누를 수 있다
     · 입력창(모달)만 화면을 가득 채운다

   PC 화면은 한 픽셀도 바뀌지 않는다. 폭이 820px 보다 좁을 때만 걸린다.
   ══════════════════════════════════════════════════════════════════════ */

/* 넓은 화면에서는 없는 것처럼 둔다 */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   PN 등록 — 2026-08-22
   게시판과 같은 좌우 배치(.board-workspace)를 그대로 쓴다.
   여기서는 목록 열이 9개라 왼쪽을 좀 더 넓혀 준다.
   ═══════════════════════════════════════════════════════════════════ */

#page-pn-register .board-workspace {
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr);
}

.pn-reg-table { min-width: 880px; }
.pn-reg-table td { white-space: nowrap; }

.pn-reg-table .pn-col-pn    { width: 92px; }
.pn-reg-table .pn-col-state { width: 120px; }
.pn-reg-table .pn-col-date  { width: 96px; }
/* 비고만 길어질 수 있으니 잘라내고 마우스를 올려 전문을 보게 한다 */
.pn-reg-table .pn-col-remark {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 쓸 수 있는 번호는 등록, 이미 부여된 번호는 수정 — 둘 다 누를 수 있다 */
.pn-row { cursor: pointer; }
.pn-row.is-free:hover { background: #ecfdf5; }
.pn-row.is-used { color: var(--text-muted); background: #f8fafc; }
.pn-row.is-used:hover { background: #f1f5f9; }
.pn-row.is-selected { background: #d1fae5; }
.pn-row.is-selected:hover { background: #d1fae5; }

.pn-state-free { color: #15803d; font-weight: 700; }
.pn-state-used {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── 오른쪽 등록 칸 ── */
.pn-form { display: flex; flex-direction: column; gap: 12px; }

.pn-form-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.pn-form-pn {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-main);
}

/* 두 칸씩 나란히 놓는다. 칸이 좁아지면 한 줄로 풀린다. */
.pn-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}
@media (max-width: 1200px) {
    .pn-form-grid { grid-template-columns: 1fr; }
}

.pn-form .input-group { margin: 0; }

.pn-form-msg {
    min-height: 18px;
    font-size: 12px;
    color: var(--text-muted);
}
.pn-form-msg.is-error { color: var(--danger); font-weight: 600; }
.pn-form-hint.is-error { color: var(--danger); font-weight: 600; }

/* ── 도구줄 ──
   선택·입력칸·? ·조회를 한 줄로 둔다. 안내는 ? 를 눌러 띄운다. */
#page-pn-register .ezm-tb-left { flex-wrap: nowrap; }
#page-pn-register .product-help-trigger {
    flex: 0 0 auto;
    transform: none;
}

/* ── 오른쪽 칸 안의 입력 요소 ──
   .input-group 은 로그인 화면 기준이라 여백이 큼직하다.
   옆칸에는 도구줄 입력칸만큼 줄여 넣는다. */
.pn-form input,
.pn-form select,
.pn-form textarea {
    width: 100%;
    padding: 9px 12px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #334155;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.pn-form input:focus,
.pn-form select:focus,
.pn-form textarea:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--primary-light);
}
/* 비고는 문장이 길어지므로 칸 너비를 다 쓴다 */
.pn-form textarea {
    resize: vertical;
    min-height: 64px;
    font-family: inherit;
}
.pn-form .input-group label b { color: var(--danger); }

/* 고객을 무엇으로 맞춰 넣었는지 알려 주는 줄 */
.pn-form-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* 시트에서 올라온 줄을 고칠 때·고칠 것이 없을 때 띄우는 알림 */
.pn-form-note {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 820px) {

    /* ── 0. 화면 높이 ──
       휴대폰은 주소창이 나타났다 사라지며 100vh 가 흔들려 아래가 잘린다.
       100dvh 는 그때그때 실제로 보이는 높이다.
       이 단위를 모르는 브라우저는 이 줄을 무시하고 원래 100vh 를 쓴다. */
    body { height: 100dvh; }
    #app { height: calc(100dvh - 28px); }

    /* ── 1. 왼쪽 메뉴를 서랍으로 ── */
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        margin-right: 8px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-panel);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }

    #sidebar {
        position: fixed;
        top: 0;
        bottom: 28px;
        left: 0;
        width: 232px;
        z-index: 1200;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    body.nav-open #sidebar { transform: translateX(0); }

    body.nav-open .nav-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 28px;
        z-index: 1150;
        background: rgba(15, 23, 42, 0.42);
    }

    /* ── 2. 본문은 PC 폭 그대로 두고 옆으로 민다 ──
       .page 에 최소 폭을 주면 안쪽 배치가 PC 와 똑같이 잡힌다.
       900px 아래에서 위아래로 쌓이는 규칙(.p3-workspace 등)이 이미 있어서
       거기에 걸리지 않도록 1100px 로 넉넉히 잡았다. */
    #main {
        overflow: auto;          /* 가로·세로 둘 다 밀 수 있게 */
        padding: 10px 8px 6px;
        gap: 8px;

        /* 글자와 칸을 한꺼번에 조금 줄인다.
           글자 크기가 px 로 박힌 곳이 294군데라 기본 크기만 바꿔서는 안 줄어든다.
           zoom 은 글자와 배치를 함께 줄여 주므로 한 줄로 끝난다.
           숫자를 낮추면 더 작아진다 (0.6 = 많이, 1 = PC 와 같은 크기).

           손가락으로 줌아웃해도 더 안 작아진다. 밀리는 것이 화면 전체가 아니라
           #main 이라는 상자 안이기 때문이다. 크기는 이 숫자로만 정해진다. */
        zoom: 0.7;
    }
    /* 세로로도 통째로 밀 수 있게 한다.
       PC 는 창 높이에 맞춰 놓고 목록 상자 안에서만 굴리는 구조인데,
       휴대폰에서 그러면 굴림이 두 겹이 되어 헷갈린다.
       (목록 위에서 밀면 목록만, 검색줄 위에서 밀면 화면 전체가 움직임)
       목록 상자의 높이 제한을 풀어 내용만큼 길어지게 하고,
       화면 전체를 한 겹으로 밀게 바꾼다. */
    .page {
        min-width: 1100px;
        flex: none;              /* 화면 높이에 맞추지 말고 내용만큼 */
        height: auto;
        overflow: visible;
    }

    .table-wrap,
    .table-container,
    .qc-list-scroll,
    .archive-list-scroll {
        flex: none;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    /* 제품현황만 빼놓는다.
       트리와 상세가 좌우로 나뉜 구조라 높이를 풀면 배치가 어그러진다.
       이 화면은 지금까지처럼 화면 높이에 맞춰 둔다. */
    #page-product {
        flex: 1;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    /* ── 제품현황을 PC 배치로 되돌린다 ──
       화면 크기 규칙은 '내용이 놓인 상자 폭' 이 아니라 '휴대폰 화면 폭' 을 본다.
       본문을 1100px 로 넓혀 놓아도 휴대폰 화면은 390px 이라,
       아래 규칙들이 그대로 걸려서 좌우가 위아래로 쌓였다.
         @media (max-width: 900px)  .p3-workspace / .p3-tree-panel / .p3-info-hero / .p3-info-dl
         @media (max-width: 1100px) .p3-info-cols
       그래서 여기서 PC 값으로 되돌려 준다. 값은 원래 규칙에서 그대로 가져왔다. */
    .p3-workspace {
        grid-template-columns: 256px minmax(0, 1fr);
        grid-template-rows: none;
    }
    .p3-tree-panel {
        border-right: 1px solid var(--border);
        border-bottom: 0;
    }
    .p3-info-hero {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
    .p3-info-hero-stock { align-self: auto; }
    .p3-info-dl { grid-template-columns: 1fr 1fr; }
    .p3-info-cols { grid-template-columns: 1fr 1fr; }

    /* 입력창은 화면에 붙어서 떠야 한다.
       그런데 자료실 업로드·근태 두 개는 main 안에 들어 있어 위 zoom 을 같이 받는다.
       그대로 두면 창이 화면을 다 못 덮는다. 되돌려서 제 크기로 띄운다. */
    #main .modal-overlay { zoom: 1.1765; }

    /* 제목줄도 본문과 같은 폭으로 늘린다.
       .page 에만 1100px 을 주면 제목줄은 화면 폭에 갇혀서
       제목·비밀번호변경·로그아웃이 두 줄로 접힌다.
       어차피 옆으로 밀어서 보므로 PC 처럼 한 줄로 쭉 펴 두는 것이 낫다. */
    header {
        min-width: 1100px;
        flex-wrap: nowrap;
    }
    .page-title-wrap { display: flex; align-items: center; min-width: 0; }

    /* ── 3. 목록 표 안에서도 옆으로 밀 수 있게 ──
       이 두 곳만 hidden 이라 오른쪽 열에 손이 닿지 않았다. */
    .qc-list-scroll,
    .archive-list-scroll { overflow-x: auto; }

    /* ── 4. 입력창은 화면을 가득 채운다 ──
       모달은 화면에 붙어서 뜨므로 위의 1100px 과 상관없이 폭을 따로 정한다. */
    .modal-overlay { padding: 0; align-items: stretch; }
    .modal-card,
    .modal-card-lg {
        width: 100%;
        max-width: none;
        max-height: 100dvh;
        padding: 16px;
        border: 0;
        border-radius: 0;
        overflow-y: auto;
    }
}

/* ── 대시보드 (제품별 최근 활동) ───────────────────────── */
.dash-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin-bottom: 14px; flex: none; }
/* 그룹별로 버튼을 붙여 세그먼트(연결) 버튼으로. 색은 진한 남색으로 통일 */
.dash-btn-group { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dash-btn-group + .dash-btn-group { margin-left: 40px; }
.dash-btn { font-size: 13px; color: var(--text-muted); background: var(--bg-panel);
    border: none; border-radius: 0; padding: 6px 14px; cursor: pointer; transition: var(--transition); }
.dash-btn + .dash-btn { border-left: 1px solid var(--border); }   /* 버튼 사이 얇은 칸막이 */
.dash-btn:hover { color: var(--text-main); background: var(--bg-main); }
.dash-btn.active { background: #1e3a8a; color: #fff; font-weight: 600; }   /* 선택 = 진한 남색 */
/* 필터 줄 아래 '즐겨찾기:' 목록 줄 (새 줄로 내려 붙는다) */
.dash-favrow { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-left: 8px; }
.dash-favrow-label { font-size: 13px; font-weight: 700; color: var(--text-muted); margin-right: 2px; }
/* 배경과 묻히지 않게 버튼과 같은 남색 계열의 옅은 톤 + 옅은 테두리 */
.dash-favchip { font-size: 12px; color: #1e3a8a; background: #e8edf9; border: 1px solid #c7d2e8; border-radius: 4px; padding: 2px 8px; white-space: nowrap; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.dash-favchip:hover { border-color: #1e3a8a; background: #dbe4f5; }
.dash-favrow-empty { font-size: 12px; color: var(--text-muted); }
/* 제품현황 상세 머리의 즐겨찾기 별표 (PN 오른쪽). 미선택이어도 또렷하게 보이도록 진한 회색 테두리 별 */
.p3-fav-star { border: none; background: transparent; cursor: pointer; padding: 0 4px; margin-left: 4px; line-height: 1;
    font-size: 22px; color: #cbd5e1; -webkit-text-stroke: 1px #94a3b8; align-self: center;
    transition: color .12s ease, transform .12s ease; }
.p3-fav-star:hover { color: #f59e0b; -webkit-text-stroke-color: #d97706; transform: scale(1.12); }
.p3-fav-star.is-on { color: #f59e0b; -webkit-text-stroke-color: #d97706; }
.p3-fav-star:disabled { opacity: .5; cursor: default; transform: none; }
/* 검색결과 리스트: 즐겨찾기한 제품만 오른쪽에 노란 별을 보인다(표시용) */
.p3-result-fav { display: none; flex: 0 0 auto; margin-left: 8px; font-size: 15px; line-height: 1; color: #f59e0b; }
.p3-result-row.is-fav .p3-result-fav { display: inline-block; }
.dash-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
/* 세로 칸(보드): SEM·OEM·WCI·Pre-P 를 나란한 칸으로. 스크롤은 보드 전체가 하나로 움직인다. */
.dash-grid { display: flex; gap: 12px; flex: 1; min-height: 0;
    overflow: auto; align-items: flex-start; padding-bottom: 8px; }
/* 열 외곽선 제거 — 카드마다 테두리가 있어 이중선으로 지저분해 보이던 것을 없앤다 */
.dash-col { flex: 1 1 0; min-width: 244px; display: flex; flex-direction: column;
    background: transparent; border: none; border-radius: 0; overflow: hidden; }
/* 열 제목: 가운데 정렬 + 조금 더 굵게. 건수 배지는 오른쪽에 고정 */
/* 열 머리 영역은 테두리 없이 가운데 정렬 컨테이너로 둔다 */
.dash-colhead { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; }
/* 열 제목만 투명 바탕의 외곽선 박스에 넣고 좌우 여백을 넉넉히 준다 */
.dash-colname { display: inline-block; font-size: 16px; font-weight: 800; letter-spacing: 0.02em; color: var(--ct); text-align: center;
    background: transparent; border: 2px solid #555; border-radius: 8px; padding: 9px 44px; }
.dash-colcnt { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 11.5px; color: var(--text-muted);
    background: var(--bg-main); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; }
/* 대시보드 열 제목: 색 채움 없이 흰/연회색 바탕 + 위쪽 얇은 색선(border-top)으로만 구분 표시.
   글자·건수는 기본 규칙(.dash-colname = 구분색, .dash-colcnt = 회색)을 그대로 쓴다. */
.dash-collist { flex: 1; padding: 10px; background: var(--bg-main);
    display: flex; flex-direction: column; gap: 10px; }
.dash-colempty { padding: 18px 10px; text-align: center; color: var(--text-muted); font-size: 12px; }
.dash-empty { flex: 1 1 100%; padding: 40px; text-align: center; color: var(--text-muted);
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); }
/* 카드 최소 높이 = 활동 2개일 때 높이(135px). 활동 1개짜리도 이만큼은 차지한다 */
.dash-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 12px 14px; cursor: pointer; transition: var(--transition); min-height: 135px; }
.dash-card:hover { border-color: var(--primary); box-shadow: var(--card-shadow); }
.dash-card.is-nopn, .dash-card.is-nopn:hover { cursor: default; border-color: var(--border); box-shadow: none; }
.dash-chead { display: flex; align-items: center; gap: 8px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border); margin-bottom: 4px; }
/* PN 을 투명 박스(테두리만)에 넣는다 — 외곽선을 진하게 해 또렷하게 */
.dash-pn { font-size: 16px; font-weight: 700; color: var(--text-main); letter-spacing: -0.01em; flex: none;
    background: transparent; border: 1.5px solid #94a3b8; border-radius: 6px; padding: 2px 9px; }
.dash-meta { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 대시보드2: PN 글자 조금 작게(박스 유지), 고객명·제조사를 배지로 */
.dash-card.is-v2 .dash-pn { font-size: 14px; padding: 4px 11px; }
/* 대시보드2: 제조사만 배지로 표시, PN 바로 오른쪽에 살짝 띄워 둔다 */
.dash-metabadges { display: flex; gap: 8px; flex: 0 0 auto; margin-left: 4px; }
.dash-partybadge { font-size: 11px; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
/* 제조사 = 보조 정보. 옅은 회색 배지·회색 글자·보통 굵기 (PN 보다 덜 튀게) */
.dash-partybadge.is-maker { background: #f1f5f9; color: #64748b; font-weight: 400; }
.dash-open { margin-left: auto; font-size: 12px; color: var(--primary); white-space: nowrap; }
/* 기록 줄도 눌러서 세부 항목으로 갈 수 있으니 손 모양을 준다 */
.dash-ev { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-radius: 8px; cursor: pointer; }
.dash-ev:hover { background: var(--bg-main); }
.dash-act { font-size: 13px; color: var(--text-main); flex: none; }
.dash-sub { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-time { font-size: 12px; color: var(--text-muted); flex: none; }
.dash-badge { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 20px; flex: none; }
.dash-badge.is-success { background: rgba(16, 185, 129, 0.12); color: #047857; }
.dash-badge.is-danger { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }