/* ===== 기본 / 리셋 ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: "Pretendard", "Segoe UI", "Malgun Gothic", sans-serif;
    background: #f5f7fb;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.5;
}
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* ===== 로그인 페이지(독립) ===== */
.login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: #f5f7fb;
    padding: 24px;
}
.login-card {
    width: 100%; max-width: 460px;
    background: #fff; border-radius: 14px;
    padding: 48px 40px 40px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.login-card h1 {
    margin: 0 0 8px; text-align: center;
    font-size: 26px; font-weight: 800; letter-spacing: -0.5px;
}
.login-card .sub {
    text-align: center; color: #94a3b8; margin: 0 0 32px; font-size: 14px;
}
.login-card label {
    display: block; font-size: 13px; font-weight: 700; color: #1f2937;
    margin-bottom: 6px; margin-top: 18px;
}
.login-card input {
    width: 100%; padding: 12px 14px;
    border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
}
.login-card input:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.login-card .btn-primary {
    width: 100%; margin-top: 28px; padding: 13px;
    background: #2563eb; color: #fff; border: 0; border-radius: 8px;
    font-size: 15px; font-weight: 700;
}
.login-card .btn-primary:hover { background: #1d4ed8; }
.login-card .extra {
    margin-top: 18px; text-align: center; color: #64748b; font-size: 13px;
}

/* ===== 앱 레이아웃(인증 후) ===== */
body.app {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas:
        "topbar topbar"
        "sidebar content";
    min-height: 100vh;
}
.topbar {
    grid-area: topbar;
    display: flex; align-items: center; gap: 16px;
    padding: 0 20px; background: #fff;
    border-bottom: 1px solid #e5e7eb;
    z-index: 10;
}
.topbar .hamburger {
    background: transparent; border: 0; font-size: 20px;
    color: #1f2937; padding: 4px 8px;
}
.topbar .brand {
    font-size: 18px; font-weight: 800; letter-spacing: -0.3px;
    margin-right: 8px;
}
.topbar .brand .brand-sub { color: #475569; font-weight: 700; margin-left: 4px; }
.topbar .searchbox {
    flex: 1; max-width: 520px; position: relative; margin: 0 8px;
}
.topbar .searchbox input {
    width: 100%; padding: 9px 14px 9px 36px;
    border: 1px solid #e2e8f0; border-radius: 999px;
    background: #f8fafc;
}
.topbar .searchbox input:focus {
    outline: none; border-color: #2563eb; background: #fff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.topbar .searchbox::before {
    content: '🔍'; position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%); font-size: 12px; opacity: .6;
}
.topbar .topbar-right {
    display: flex; align-items: center; gap: 10px; margin-left: auto;
}
.topbar .user-info {
    display: inline-flex; align-items: center; gap: 8px;
    color: #475569; font-size: 13px; padding: 0 8px;
}
.topbar .user-info .dot {
    width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
}
.topbar .user-info.role-admin .dot { background: #2563eb; }
.btn-outline {
    padding: 7px 14px; background: #fff; color: #1f2937;
    border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; font-weight: 600;
}
.btn-outline:hover { background: #f1f5f9; border-color: #94a3b8; }

/* ===== 사이드바 ===== */
.sidebar {
    grid-area: sidebar;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    padding: 18px 14px;
}
.sidebar .side-select select {
    width: 100%; padding: 9px 10px;
    border: 1px solid #cbd5e1; border-radius: 6px;
    background: #fff; color: #1f2937;
}
.sidebar nav { margin-top: 4px; }
.sidebar nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar nav li { margin: 2px 0; }
.sidebar nav a {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 6px;
    color: #334155; font-size: 14px; font-weight: 600;
}
.sidebar nav a::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: #94a3b8; display: inline-block;
}
.sidebar nav a:hover {
    background: #f1f5f9; text-decoration: none; color: #0f172a;
}
.sidebar nav a.active {
    background: #eff6ff; color: #1d4ed8;
}
.sidebar nav a.active::before { background: #1d4ed8; }

/* ===== 메인 콘텐츠 ===== */
.content {
    grid-area: content;
    padding: 28px 32px;
    overflow: auto;
}
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.page-head h1 {
    margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.4px;
}
.page-head .timestamp { color: #94a3b8; font-size: 13px; }

/* 탭 */
.tabs { display: flex; gap: 18px; border-bottom: 1px solid #e5e7eb; margin-bottom: 20px; }
.tabs a {
    padding: 10px 4px; color: #64748b; font-weight: 700;
    border-bottom: 3px solid transparent;
}
.tabs a.active { color: #2563eb; border-bottom-color: #2563eb; }

/* ===== 통계 카드 ===== */
.stats-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.stat-card {
    background: #fff; border: 1px solid #e5e7eb; border-left-width: 4px;
    border-radius: 10px; padding: 14px 18px; min-height: 88px;
    display: flex; flex-direction: column; justify-content: center;
}
.stat-card .label { color: #64748b; font-size: 13px; font-weight: 600; }
.stat-card .value { font-size: 28px; font-weight: 800; margin-top: 4px; color: #1f2937; letter-spacing: -0.5px; }
.stat-card.c-gray   { border-left-color: #94a3b8; }
.stat-card.c-green  { border-left-color: #22c55e; background: #f0fdf4; }
.stat-card.c-red    { border-left-color: #ef4444; background: #fef2f2; }
.stat-card.c-yellow { border-left-color: #f59e0b; background: #fffbeb; }
.stat-card.c-blue   { border-left-color: #2563eb; background: #eff6ff; }
.stat-card.c-purple { border-left-color: #8b5cf6; background: #f5f3ff; }
.stat-card.c-dark   { border-left-color: #1f2937; }

/* ===== 카드/패널 ===== */
.panel {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 18px;
}
.panel + .panel { margin-top: 16px; }
.panel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.panel-title { font-size: 15px; font-weight: 700; color: #1f2937; }

/* ===== 폼 ===== */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; font-size: 13px; gap: 6px; font-weight: 600; color: #334155; }
.form input, .form select, .form textarea {
    padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 6px;
    background: #fff;
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.form .btn-primary {
    padding: 11px 16px; background: #2563eb; color: #fff;
    border: 0; border-radius: 6px; font-size: 14px; font-weight: 700;
}
.form .btn-primary:hover { background: #1d4ed8; }

.btn-primary {
    padding: 9px 16px; background: #2563eb; color: #fff;
    border: 0; border-radius: 6px; font-size: 13px; font-weight: 700;
}
.btn-primary:hover { background: #1d4ed8; }
/* 회색 버튼 (다운로드 등 보조 동작) */
.btn-gray {
    padding: 9px 16px; background: #9ca3af; color: #fff;
    border: 0; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.btn-gray:hover { background: #6b7280; }
.btn-gray:disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }

.hint { color: #64748b; font-size: 13px; }
.msg { font-size: 13px; color: #2563eb; min-height: 18px; }
.msg.err { color: #dc2626; }
.msg.ok  { color: #16a34a; }

/* ===== 테이블 ===== */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
    padding: 11px 12px; text-align: left;
    border-bottom: 1px solid #f1f5f9; font-size: 13px;
}
.data-table th { background: #f8fafc; font-weight: 700; color: #475569; font-size: 12px; text-transform: none; }
.data-table tr:hover td { background: #fafbfc; }
.data-table td.center, .data-table th.center { text-align: center; }

.badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
}
.badge.st-pending  { background: #fef3c7; color: #92400e; }
.badge.st-approved { background: #d1fae5; color: #065f46; }
.badge.st-rejected { background: #fee2e2; color: #991b1b; }

.btn-sm {
    padding: 4px 10px; background: #2563eb; color: #fff;
    border: 0; border-radius: 4px; font-size: 12px; font-weight: 600;
    margin-right: 4px;
}
.btn-sm:hover { background: #1d4ed8; }
.btn-sm.danger { background: #dc2626; }
.btn-sm.danger:hover { background: #b91c1c; }
.btn-sm.ghost { background: transparent; color: #475569; border: 1px solid #cbd5e1; }
.btn-sm.ghost:hover { background: #f1f5f9; }
/* Gateway 출고 이력 — ⚑ 보정/확인 표시 행 (엑셀 노란 음영 대응) */
.gw-hist tr.selected td { background: #dbeafe !important; }
.gw-hist tr.nd-row:hover td, .gw-hist tr.nv-row:hover td { background: #eff6ff; }
.gw-hist tr.flagged td { background: #fef9c3; }
.gw-hist tr.flagged:hover td { background: #fef08a; }
.flag-badge { display: inline-block; background: #facc15; color: #713f12; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; margin-left: 4px; cursor: help; }
.btn-sm.gray { background: #9ca3af; }
.btn-sm.gray:hover { background: #6b7280; }
.btn-sm:disabled { background: #9ca3af; cursor: not-allowed; }
.actions-cell { white-space: nowrap; }
.actions-cell .btn-sm { margin-bottom: 3px; }

.filter-row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.filter-row select, .filter-row input {
    padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff;
}

/* ===== 자료실 (트리 + 파일) ===== */
.repo-layout {
    display: grid; grid-template-columns: 320px 1fr;
    gap: 16px; align-items: start;
}
.tree-panel { padding: 14px; max-height: calc(100vh - 200px); overflow: auto; }
.tree-toolbar {
    display: flex; gap: 6px; margin-bottom: 10px;
}
.tree-toolbar button {
    flex: 1; padding: 7px; font-size: 12px; font-weight: 600;
    border: 1px solid #cbd5e1; background: #fff; color: #334155;
    border-radius: 5px;
}
.tree-toolbar button:hover { background: #f1f5f9; }
.tree ul { list-style: none; padding-left: 18px; margin: 0; }
.tree > ul { padding-left: 0; }
.tree-item {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 8px; border-radius: 5px; cursor: pointer;
    user-select: none; font-size: 13px;
}
.tree-item:hover { background: #f1f5f9; }
.tree-item.selected { background: #dbeafe; color: #1d4ed8; font-weight: 700; }
.tree-item .caret {
    display: inline-block; width: 14px; font-size: 10px; color: #94a3b8;
    transition: transform 0.15s;
}
.tree-item.expanded .caret { transform: rotate(90deg); }
.tree-item .caret.empty { visibility: hidden; }
.tree-item .icon { font-size: 14px; }
.tree-item .count { color: #94a3b8; font-size: 11px; margin-left: 4px; }
.tree li > ul { display: none; }
.tree li.expanded > ul { display: block; }
.tree-item[draggable="true"] { cursor: grab; }
.tree-item[draggable="true"]:active { cursor: grabbing; }
.tree-item.dragging { opacity: 0.45; }
.tree-item.drop-target {
    background: #dbeafe !important;
    outline: 2px dashed #2563eb;
    outline-offset: -2px;
}
.move-hint {
    font-size: 11px; color: #64748b;
    padding: 6px 8px; margin-bottom: 8px;
    background: #fefce8; border-left: 3px solid #facc15;
    border-radius: 4px;
}

.file-panel { padding: 16px; }
.crumbs { color: #64748b; font-size: 12px; margin-bottom: 8px; }
.crumbs .sep { color: #cbd5e1; margin: 0 6px; }

.drop-zone {
    border: 2px dashed #cbd5e1; border-radius: 10px;
    padding: 24px; text-align: center; color: #64748b;
    background: #fafbfc; margin-bottom: 16px;
    transition: all .15s;
}
.drop-zone.drag-over {
    border-color: #2563eb; background: #eff6ff; color: #1d4ed8;
}
.drop-zone .big { font-size: 28px; }
.drop-zone .pick {
    display: inline-block; margin-top: 8px; padding: 7px 14px;
    background: #2563eb; color: #fff; border-radius: 6px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.drop-zone.disabled { opacity: 0.5; pointer-events: none; }
.upload-list { margin-top: 10px; font-size: 12px; color: #475569; }
.upload-list .ok { color: #16a34a; }
.upload-list .err { color: #dc2626; }
.upload-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 6px;
    margin-bottom: 6px; font-size: 12px;
}
.upload-row .name {
    flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; color: #1f2937; font-weight: 600;
}
.upload-row .bar {
    width: 160px; height: 8px; background: #e2e8f0;
    border-radius: 4px; overflow: hidden; flex-shrink: 0;
}
.upload-row .bar-fill {
    height: 100%; background: #2563eb; width: 0%;
    transition: width 0.15s ease-out;
}
.upload-row .pct {
    width: 46px; text-align: right; color: #475569; font-weight: 700; flex-shrink: 0;
}
.upload-row .size {
    width: 140px; text-align: right; color: #94a3b8; flex-shrink: 0;
}
.upload-row.done { background: #f0fdf4; border-color: #bbf7d0; }
.upload-row.done .bar-fill { background: #22c55e; }
.upload-row.done .pct { color: #16a34a; }
.upload-row.err { background: #fef2f2; border-color: #fecaca; }
.upload-row.err .bar-fill { background: #ef4444; }
.upload-row.err .pct { color: #dc2626; }

.actions-icon { background: transparent; border: 0; padding: 2px 6px; font-size: 14px; color: #64748b; cursor: pointer; }
.actions-icon:hover { color: #1f2937; }
.actions-icon.danger:hover { color: #dc2626; }

/* ===== 모달 ===== */
.modal {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; padding: 24px;
}
.modal.hidden { display: none; }
.modal-card {
    background: #fff; border-radius: 12px; padding: 28px 28px 24px;
    max-width: 560px; width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    position: relative;       /* 우상단 X 버튼 위치 기준 */
}
/* 모달 우상단 X 닫기 버튼 (JS 가 자동 삽입) */
.modal-close-x {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    border: none; background: transparent;
    font-size: 18px; line-height: 1;
    color: #64748b; cursor: pointer;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
    z-index: 10;
}
.modal-close-x:hover {
    background: #f1f5f9; color: #1f2937;
}
.modal-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.modal-actions {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
}
.share-url-row {
    display: flex; gap: 8px; margin-top: 14px;
}
.share-url-row input {
    flex: 1; padding: 10px 12px; border: 1px solid #cbd5e1;
    border-radius: 6px; font-family: "Consolas", monospace; font-size: 12px;
    background: #f8fafc; color: #1f2937;
}
.share-url-row input:focus {
    outline: none; border-color: #2563eb; background: #fff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.share-url-row .btn-primary { padding: 10px 18px; flex-shrink: 0; }

/* ===== 주간 업무 보고 ===== */
.wr-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 16px;
    align-items: start;
}
.wr-cal-panel { padding: 14px; }
.wr-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 10px;
}
.wr-cal-title { font-weight: 700; font-size: 14px; color: #1f2937; }
.wr-cal-legend {
    display: flex; gap: 12px; font-size: 11px; color: #64748b;
    margin-bottom: 10px;
}
.wr-cal-legend i {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: 4px; vertical-align: middle;
}
.wr-cal-legend .dot-none    { background: #e2e8f0; border: 1px solid #cbd5e1; }
.wr-cal-legend .dot-partial { background: #fde68a; border: 1px solid #f59e0b; }
.wr-cal-legend .dot-all     { background: #86efac; border: 1px solid #16a34a; }

.wr-weeks {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 460px; overflow-y: auto;
    padding-right: 4px;
}
.wr-week {
    padding: 8px 10px; border-radius: 6px;
    border: 1px solid #e2e8f0; background: #fff;
    cursor: pointer; transition: all 0.12s;
    display: grid; grid-template-columns: 36px 1fr auto; gap: 8px;
    align-items: center;
}
.wr-week:hover { background: #f8fafc; border-color: #cbd5e1; }
.wr-week.sel {
    background: #eff6ff; border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,.18);
}
/* 오늘(이번 주)은 배경색을 덮지 않고 파란 좌측 스트라이프 + 굵은 테두리로만 표시
   → 작성 현황 색상(미작성/일부/모두)이 그대로 보이도록 한다 */
.wr-week.today {
    box-shadow: inset 5px 0 0 #2563eb;
    border-color: #2563eb;
}
.wr-week.today.sel {
    box-shadow: inset 5px 0 0 #2563eb, 0 0 0 2px rgba(37,99,235,.4);
}
.wr-week .today-tag {
    display: inline-block; margin-left: 6px;
    font-size: 9px; font-weight: 800; color: #1d4ed8;
    background: #dbeafe; padding: 1px 6px; border-radius: 999px;
    border: 1px solid #2563eb; vertical-align: middle;
}

/* 첨부 드롭존 */
.wr-drop-zone {
    margin-top: 6px;
    border: 2px dashed #cbd5e1; border-radius: 8px;
    padding: 14px; background: #fafbfc;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    color: #475569; font-size: 13px;
    transition: all 0.12s;
}
.wr-drop-zone .big { font-size: 22px; }
.wr-drop-zone.drag-over {
    border-color: #2563eb; background: #eff6ff; color: #1d4ed8;
}
.wr-drop-zone .wr-att-pick { margin: 0; }

.btn-sm.hidden { display: none; }
.wr-editor-actions > div { display: flex; gap: 8px; align-items: center; }
.btn-sm.ghost:disabled {
    background: transparent; color: #cbd5e1;
    border-color: #e2e8f0; cursor: not-allowed; opacity: 0.55;
}
.btn-sm.ghost:disabled:hover { background: transparent; }
.wr-week .w-num {
    font-weight: 800; color: #475569; font-size: 12px;
    background: #f1f5f9; padding: 2px 6px; border-radius: 4px;
    text-align: center;
}
.wr-week .w-label { font-size: 13px; font-weight: 600; color: #1f2937; }
.wr-week .w-meta {
    font-size: 11px; color: #475569; text-align: right;
    display: flex; flex-direction: column; gap: 2px; align-items: flex-end;
}
.wr-week .w-meta .mine {
    font-size: 10px; color: #64748b;
    background: transparent; padding: 0;
}
.wr-week .w-meta .mine.on  { color: #16a34a; font-weight: 700; }
.wr-week .w-meta .mine.off { color: #94a3b8; }
.wr-week.none { background: #fff; }
.wr-week.partial { background: #fffbeb; border-color: #fde68a; }
.wr-week.partial.sel { background: #fef3c7; }
.wr-week.all { background: #f0fdf4; border-color: #bbf7d0; }
.wr-week.all.sel { background: #dcfce7; }

.wr-export {
    margin-top: 16px; padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}
.wr-export .wr-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.wr-export .wr-row span { width: 60px; font-size: 12px; color: #475569; font-weight: 600; }
.wr-export .wr-row input {
    flex: 1; padding: 6px 8px; border: 1px solid #cbd5e1;
    border-radius: 4px; font-size: 12px;
}

.wr-detail-panel { padding: 18px; }
.wr-detail-head { margin-bottom: 14px; }
.wr-detail-head h2 { margin: 2px 0 0; font-size: 18px; }

.wr-editor.hidden { display: none; }

/* 체크리스트 편집 */
.wr-checklist-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 4px 0 8px;
}
.wr-checklist-head .hint b { color: #334155; }
.wr-checklist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.wr-cl-empty { padding: 10px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 6px; text-align: center; }
.wr-cl-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; background: #fff;
    border: 1px solid #e2e8f0; border-radius: 6px;
}
.wr-cl-row .cl-check {
    width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: #16a34a;
}
.wr-cl-row .cl-text {
    flex: 1; min-width: 0; padding: 7px 10px;
    border: 1px solid #e2e8f0; border-radius: 5px; font-size: 13px;
}
.wr-cl-row .cl-text:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}
.wr-cl-row.done { background: #f0fdf4; border-color: #bbf7d0; }
.wr-cl-row.done .cl-text { color: #166534; text-decoration: line-through; }
.wr-cl-row .cl-del { flex-shrink: 0; }

.wr-memo-label {
    display: block; font-size: 12px; font-weight: 700;
    color: #475569; margin: 4px 0 6px;
}

/* 읽기 전용 체크리스트 (보기/참고) */
.wr-view-cl { list-style: none; margin: 0 0 6px; padding: 0; }
.wr-view-cl li {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 3px 0; font-size: 13px; line-height: 1.5;
}
.wr-view-cl li .cb { flex-shrink: 0; font-size: 14px; }
.wr-view-cl li.done .cb { color: #16a34a; }
.wr-view-cl li.done .tx { color: #16a34a; text-decoration: line-through; }
.wr-view-cl li.todo .cb { color: #94a3b8; }
.wr-view-cl li.todo .tx { color: #1f2937; font-weight: 600; }

.wr-editor textarea {
    width: 100%; padding: 12px;
    border: 1px solid #cbd5e1; border-radius: 6px;
    font-family: inherit; font-size: 13px; line-height: 1.55;
    resize: vertical; min-height: 200px; background: #fff;
}
.wr-editor textarea:focus {
    outline: none; border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.wr-editor-actions {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; gap: 10px;
}

.wr-att-section { margin-top: 16px; }
.wr-att-list {
    margin: 6px 0 10px;
    display: flex; flex-direction: column; gap: 4px;
}
.wr-att-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 5px; font-size: 12px;
}
.wr-att-row .att-name {
    flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
}
.wr-att-pick {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.wr-att-pick .pick {
    display: inline-block; padding: 6px 12px;
    background: #2563eb; color: #fff; border-radius: 5px;
    font-size: 12px; font-weight: 600;
}
.wr-att-pick .pick:hover { background: #1d4ed8; }

.wr-recent {
    margin-top: 18px; padding: 10px 12px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
}
.wr-recent summary {
    cursor: pointer; font-weight: 700; font-size: 13px; color: #334155;
    user-select: none;
}
.wr-recent[open] summary { margin-bottom: 8px; }
.wr-recent-item {
    padding: 8px 10px; background: #fff; border-radius: 5px;
    border: 1px solid #e2e8f0; margin-bottom: 6px;
}
.wr-recent-item .r-head { font-size: 12px; margin-bottom: 4px; }
.wr-recent-item .r-body {
    margin: 0; font-family: inherit; font-size: 12px;
    color: #475569; white-space: pre-wrap; word-break: break-word;
    max-height: 120px; overflow: auto;
}

.wr-view { margin-top: 20px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
.wr-view-item {
    padding: 12px 14px; background: #fafbfc;
    border: 1px solid #e5e7eb; border-radius: 6px;
    margin-top: 8px;
}
.wr-view-item .v-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 6px;
}
.wr-view-item .v-head strong { font-size: 14px; color: #1f2937; }
.wr-view-item .v-body {
    margin: 0; font-family: inherit; font-size: 13px;
    color: #1f2937; white-space: pre-wrap; word-break: break-word;
    line-height: 1.55;
}
.wr-view-item .v-att {
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0;
    display: flex; flex-direction: column; gap: 4px; font-size: 12px;
}

@media (max-width: 1024px) {
    .wr-layout { grid-template-columns: 320px 1fr; }
}
@media (max-width: 768px) {
    .wr-layout { grid-template-columns: 1fr; }
    .wr-weeks { max-height: 280px; }
}

/* ===== 자재 관리 ===== */
.mat-tabs { margin-bottom: 12px; }
.tab-pane.hidden { display: none; }

.mat-filter {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
    flex-wrap: wrap;
}
.mat-filter input[type=search] {
    flex: 1; min-width: 240px;
    padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px;
}
.mat-filter input[type=search]:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.mat-filter select {
    padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff;
}
.mat-pager {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: 12px;
}
.mat-pager .btn-sm:disabled { opacity: 0.45; cursor: not-allowed; }

.mat-row:hover td { background: #f8fafc; }
.mat-models {
    max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #475569; font-size: 12px;
}
.badge.mat-common { background: #dbeafe; color: #1d4ed8; }
.badge.mat-pkg    { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; font-size: 10px; padding: 1px 6px; }
.badge.plan-status-계획 { background: #fef3c7; color: #92400e; }
.badge.plan-status-완료 { background: #d1fae5; color: #065f46; }
.badge.plan-status-취소 { background: #fee2e2; color: #991b1b; }

/* 수불 일치 검증 상태 */
.badge.rec-match         { background: #d1fae5; color: #065f46; }
.badge.rec-missing       { background: #fee2e2; color: #991b1b; }
.badge.rec-under         { background: #fef3c7; color: #92400e; }
.badge.rec-over          { background: #ede9fe; color: #6d28d9; }
.badge.rec-receipt-only  { background: #dbeafe; color: #1d4ed8; }
td.rec-match    { color: #16a34a; font-weight: 700; }
td.rec-missing  { color: #dc2626; font-weight: 700; }
td.rec-under    { color: #d97706; font-weight: 700; }
td.rec-over     { color: #7c3aed; font-weight: 700; }
td.rec-receipt-only { color: #2563eb; font-weight: 700; }

/* 수불 일치 검증 표 */
.mat-rec-table { width: 100%; border-collapse: collapse; }
.mat-rec-table th, .mat-rec-table td {
    padding: 8px 10px; border: 1px solid #e2e8f0; text-align: center;
    font-size: 12px; white-space: nowrap;
}
.mat-rec-table th { background: #f1f5f9; font-weight: 700; color: #334155; }
.mat-rec-table tr:hover td { background: #fafbfc; }

/* 생산 계획 표 — 자재목록과 동일한 grid */
.mat-plan-table {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 1200px;
    border-collapse: collapse !important;
}
.mat-plan-table thead { display: table-header-group !important; }
.mat-plan-table tbody { display: table-row-group !important; }
.mat-plan-table tr    { display: table-row !important; }
.mat-plan-table th, .mat-plan-table td {
    display: table-cell !important;
    padding: 8px 10px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #e2e8f0;
    font-size: 13px;
}
.mat-plan-table th { background: #f1f5f9; font-weight: 700; color: #334155; font-size: 12px; }
.mat-plan-table tr:hover td { background: #fafbfc; }
.mat-plan-table th:nth-child(1), .mat-plan-table td:nth-child(1) { width: 50px; }
.mat-plan-table th:nth-child(2), .mat-plan-table td:nth-child(2) { width: 220px; }
.mat-plan-table th:nth-child(3), .mat-plan-table td:nth-child(3) { width: 70px; }
.mat-plan-table th:nth-child(4), .mat-plan-table td:nth-child(4) { width: 140px; }
.mat-plan-table th:nth-child(5), .mat-plan-table td:nth-child(5) { width: 100px; }
.mat-plan-table th:nth-child(6), .mat-plan-table td:nth-child(6) { width: 70px; }
.mat-plan-table th:nth-child(7), .mat-plan-table td:nth-child(7) { width: 90px; }
.mat-plan-table th:nth-child(8), .mat-plan-table td:nth-child(8) { width: 140px; }
.mat-plan-table th:nth-child(9), .mat-plan-table td:nth-child(9) { width: 140px; }
.mat-plan-table th:nth-child(10), .mat-plan-table td:nth-child(10) { width: 180px; }
.tab-pane[data-pane="plans"] .panel { overflow-x: auto; }
.badge.mat-flag-공용 { background: #dbeafe; color: #1d4ed8; }
.badge.mat-flag-단독 { background: #f1f5f9; color: #475569; }
.badge.mat-flag-신규 { background: #fef3c7; color: #92400e; }
.badge.mat-flag-기존 { background: #d1fae5; color: #065f46; }

/* 모델별 BOM */
.mat-layout {
    display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start;
}
.mat-model-panel {
    padding: 12px; max-height: calc(100vh - 220px); overflow: auto;
}
.mat-model-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.mat-model-item {
    padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px;
    cursor: pointer; transition: all .12s; background: #fff;
}
.mat-model-item:hover { background: #f8fafc; border-color: #cbd5e1; }
.mat-model-item.selected {
    background: #eff6ff; border-color: #2563eb; color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}
.mat-model-item .m-name { font-weight: 700; font-size: 13px; }
.mat-model-item .m-meta { font-size: 11px; margin-top: 2px; }

.mat-bom-panel { padding: 14px; }
.mat-bom-panel .bom-search {
    padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: 12px; max-width: 260px;
}
.mat-bom-table th, .mat-bom-table td { font-size: 12px; padding: 8px 9px; }
.bom-row .mat-lvl .lvl-tag {
    display: inline-block; min-width: 24px; padding: 1px 6px;
    background: #f1f5f9; color: #475569;
    border-radius: 4px; font-size: 10px; font-weight: 700; text-align: center;
}
.bom-row.level-1 td { background: #fef9c3; }
.bom-row.level-2 td { background: #fefce8; }
.mat-also {
    display: inline-block; margin-left: 6px;
    padding: 1px 8px; background: #eff6ff; color: #1d4ed8;
    border-radius: 999px; font-size: 11px; font-weight: 600;
}

/* 신규 등록 */
.mat-new-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    margin: 12px 0;
}
.mat-lbl { display: block; font-size: 12px; font-weight: 700; color: #334155; margin-bottom: 4px; }
.mat-input {
    width: 100%; padding: 9px 11px; border: 1px solid #cbd5e1;
    border-radius: 6px; font-size: 13px;
}
.mat-input:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.mat-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }

/* 자재 상세 모달 */
.modal-card.mat-modal { max-width: 880px; max-height: 80vh; overflow: auto; }
.mat-modal-body { font-size: 13px; }
.mat-detail-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
    padding: 10px 12px; background: #f8fafc; border-radius: 6px;
    margin-bottom: 10px;
}
.mat-detail-meta b { color: #475569; margin-right: 6px; font-size: 12px; }

/* 자재 상세/수정 폼 */
.mat-edit-form {
    background: #f8fafc; border-radius: 6px; padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #e2e8f0;
}
.mat-edit-form.editing {
    background: #eff6ff; border-color: #2563eb;
}
.mat-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
}
.mat-form-row { display: flex; flex-direction: column; gap: 4px; }
.mat-form-row-full { grid-column: 1 / -1; }
.mat-form-row label {
    font-size: 12px; font-weight: 700; color: #334155;
}
.mat-form-row label .hint { font-weight: 400; color: #94a3b8; margin-left: 6px; }
.mat-form-row input,
.mat-form-row select,
.mat-form-row textarea {
    padding: 7px 9px;
    border: 1px solid #cbd5e1; border-radius: 5px;
    font-size: 13px; background: #fff;
    font-family: inherit;
}
.mat-form-row input:disabled,
.mat-form-row select:disabled,
.mat-form-row textarea:disabled {
    background: #fff; color: #1f2937;
    border-color: #e5e7eb;
}
.mat-form-row input:focus,
.mat-form-row select:focus,
.mat-form-row textarea:focus {
    outline: none; border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.mat-readonly-text { padding: 7px 9px; font-size: 12px; color: #475569; }
@media (max-width: 768px) {
    .mat-form-grid { grid-template-columns: 1fr; }
}

/* 자재 목록 — table-cell 강제 + 중앙정렬 + 컬럼 드래그 리사이즈 */
.mat-list-table {
    display: table !important;
    table-layout: fixed !important;
    width: 1450px !important;
    border-collapse: collapse !important;
}
.mat-list-table thead { display: table-header-group !important; }
.mat-list-table tbody { display: table-row-group !important; }
.mat-list-table tr    { display: table-row !important; }
.mat-list-table th,
.mat-list-table td {
    display: table-cell !important;
    padding: 9px 12px;
    white-space: nowrap;
    text-align: center;          /* 헤더/데이터 모두 중앙정렬 */
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #e2e8f0;
}
.mat-list-table thead th { position: relative; }   /* 리사이즈 핸들용 */

/* 컬럼 드래그 리사이즈 핸들 (헤더 우측 5px 영역) */
.col-resize-handle {
    position: absolute;
    top: 0; right: 0;
    width: 6px; height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 5;
    background: transparent;
    transition: background 0.1s;
}
.col-resize-handle:hover, .col-resize-handle.dragging {
    background: #2563eb;
    opacity: 0.4;
}
body.col-resizing { cursor: col-resize !important; user-select: none; }

/* ItemName 클릭 시 그래프 호출 — 일반 텍스트처럼 보이되 hover 시 강조 */
.pr-itemname-link {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
    border-bottom: 1px dotted transparent;
    transition: all 0.12s;
}
.pr-itemname-link:hover {
    color: #1d4ed8 !important;
    border-bottom-color: #1d4ed8;
}
.pr-itemname-link:hover b { color: #1d4ed8 !important; }
.mat-list-table th { background: #f1f5f9; font-weight: 700; color: #334155; font-size: 12px; }
.mat-list-table td { font-size: 13px; }
.mat-list-table th.center, .mat-list-table td.center { text-align: center; }
.mat-list-table tr:hover td { background: #fafbfc; }

/* 10 컬럼 폭 (합 = 1500px) — 사용자가 드래그로 자유롭게 조정 가능 */
.mat-list-table th:nth-child(1),  .mat-list-table td:nth-child(1)  { width: 140px; }  /* 품목코드 */
.mat-list-table th:nth-child(2),  .mat-list-table td:nth-child(2)  { width: 250px; }  /* 품목명 */
.mat-list-table th:nth-child(3),  .mat-list-table td:nth-child(3)  { width: 170px; }  /* 규격 */
.mat-list-table th:nth-child(4),  .mat-list-table td:nth-child(4)  { width: 110px; }  /* 세부규격 */
.mat-list-table th:nth-child(5),  .mat-list-table td:nth-child(5)  { width:  90px; }  /* 패키지 */
.mat-list-table th:nth-child(6),  .mat-list-table td:nth-child(6)  { width:  90px; }  /* 카테고리 */
.mat-list-table th:nth-child(7),  .mat-list-table td:nth-child(7)  { width: 100px; }  /* 제조사 */
.mat-list-table th:nth-child(8),  .mat-list-table td:nth-child(8)  { width:  80px; }  /* 모델수 */
.mat-list-table th:nth-child(9),  .mat-list-table td:nth-child(9)  {
    width: 270px; color: #475569; font-size: 12px;
}                                                                                       /* 사용 모델 */
.mat-list-table th:nth-child(10), .mat-list-table td:nth-child(10) {
    width: 100px; color: #64748b; font-size: 12px;
}                                                                                       /* 비고 */
.mat-list-table { width: 1500px !important; }
/* tfoot 합계 행 */
.mat-bom-table tfoot td {
    background: #f8fafc; font-weight: 700; padding: 10px 12px;
    border-top: 2px solid #cbd5e1; border-bottom: 1px solid #cbd5e1;
}
.mat-bom-table tfoot .total-label { text-align: right; color: #334155; }
.mat-bom-table tfoot .total-cost { text-align: right; color: #1d4ed8; font-size: 14px; }
/* 패널 가로 스크롤 */
.tab-pane[data-pane="materials"] .panel { overflow-x: auto; }

/* 설계변경 이력 — 모델명/품목코드 한 줄로 */
.tab-pane[data-pane="changes"] .panel { overflow-x: auto; }
.tab-pane[data-pane="changes"] .data-table th:nth-child(3),
.tab-pane[data-pane="changes"] .data-table td:nth-child(3),
.tab-pane[data-pane="changes"] .data-table th:nth-child(4),
.tab-pane[data-pane="changes"] .data-table td:nth-child(4) {
    white-space: nowrap;
}
.tab-pane[data-pane="changes"] .data-table th:nth-child(2),
.tab-pane[data-pane="changes"] .data-table td:nth-child(2) { white-space: nowrap; }

/* ===== BOM/생산 계산 표 — 자재목록과 동일한 grid 스타일 ===== */
.mat-bom-table,
.mat-calc-table {
    display: table !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}
.mat-bom-table thead, .mat-calc-table thead { display: table-header-group !important; }
.mat-bom-table tbody, .mat-calc-table tbody { display: table-row-group !important; }
.mat-bom-table tfoot, .mat-calc-table tfoot { display: table-row-group !important; }
.mat-bom-table tr,    .mat-calc-table tr    { display: table-row !important; }
.mat-bom-table th, .mat-bom-table td,
.mat-calc-table th, .mat-calc-table td {
    display: table-cell !important;
    padding: 8px 10px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #e2e8f0;
    font-size: 13px;
}
.mat-bom-table th, .mat-calc-table th {
    background: #f1f5f9; font-weight: 700; color: #334155;
    font-size: 12px;
    position: relative;        /* 컬럼 리사이즈 핸들용 */
}
.mat-bom-table tr:hover td, .mat-calc-table tr:hover td { background: #fafbfc; }

/* 모델별 BOM (10 컬럼) 폭 합 = 1300px */
.mat-bom-table { width: 1300px !important; }
.mat-bom-table th:nth-child(1),  .mat-bom-table td:nth-child(1)  { width:  50px; }  /* 단계 */
.mat-bom-table th:nth-child(2),  .mat-bom-table td:nth-child(2)  { width: 140px; }  /* 품목코드 */
.mat-bom-table th:nth-child(3),  .mat-bom-table td:nth-child(3)  { width: 240px; }  /* 품목명 */
.mat-bom-table th:nth-child(4),  .mat-bom-table td:nth-child(4)  { width: 200px; }  /* 규격 */
.mat-bom-table th:nth-child(5),  .mat-bom-table td:nth-child(5)  { width:  60px; }  /* 수량 */
.mat-bom-table th:nth-child(6),  .mat-bom-table td:nth-child(6)  { width: 160px; }  /* 좌표 */
.mat-bom-table th:nth-child(7),  .mat-bom-table td:nth-child(7)  { width:  90px; }  /* 최근 단가 */
.mat-bom-table th:nth-child(8),  .mat-bom-table td:nth-child(8)  { width:  90px; }  /* 원가 */
.mat-bom-table th:nth-child(9),  .mat-bom-table td:nth-child(9)  { width:  90px; }  /* 공용여부 */
.mat-bom-table th:nth-child(10), .mat-bom-table td:nth-child(10) { width: 180px; }  /* 비고/다른 모델 */

/* 생산 계산 (10 컬럼: # / 코드 / 품명 / 규격 / Loc / 원수 / 필요 / 현재고 / 부족 / 공용모델) 폭 합 = 1280px */
.mat-calc-table { width: 1280px !important; }
.mat-calc-table th:nth-child(1),  .mat-calc-table td:nth-child(1)  { width:  40px; }  /* # */
.mat-calc-table th:nth-child(2),  .mat-calc-table td:nth-child(2)  { width: 140px; }  /* 품목코드 */
.mat-calc-table th:nth-child(3),  .mat-calc-table td:nth-child(3)  { width: 240px; }  /* 품명 */
.mat-calc-table th:nth-child(4),  .mat-calc-table td:nth-child(4)  { width: 180px; }  /* 규격 */
.mat-calc-table th:nth-child(5),  .mat-calc-table td:nth-child(5)  { width: 180px; }  /* Loc */
.mat-calc-table th:nth-child(6),  .mat-calc-table td:nth-child(6)  { width:  60px; }  /* 원수 */
.mat-calc-table th:nth-child(7),  .mat-calc-table td:nth-child(7)  { width:  80px; }  /* 필요 */
.mat-calc-table th:nth-child(8),  .mat-calc-table td:nth-child(8)  { width:  80px; }  /* 현재고 */
.mat-calc-table th:nth-child(9),  .mat-calc-table td:nth-child(9)  { width:  80px; }  /* 부족 */
.mat-calc-table th:nth-child(10), .mat-calc-table td:nth-child(10) { width: 200px; }  /* 공용 모델 */

/* 가로 스크롤 (좁은 화면) */
.tab-pane[data-pane="models"] .file-panel,
.tab-pane[data-pane="models"] .mat-bom-panel,
.tab-pane[data-pane="calc"] .panel { overflow-x: auto; }

/* 단가 추이 그래프 */
.mat-price-chart {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 10px; margin: 10px 0;
}
.mat-price-chart svg { display: block; max-width: 100%; height: auto; }
.mat-price-chart .pc-meta { font-size: 12px; color: #475569; margin-bottom: 4px; }
.mat-price-chart .pc-meta b { color: #1d4ed8; }
.mat-price-search {
    display: flex; align-items: center; gap: 10px; margin: 8px 0;
    flex-wrap: wrap;
}
.mat-price-search input {
    flex: 1; min-width: 240px; padding: 8px 12px;
    border: 1px solid #cbd5e1; border-radius: 6px;
}
.mat-price-search input:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.mat-price-suggest {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
    max-height: 280px; overflow-y: auto; margin-top: 4px;
}
.mat-price-suggest-item {
    padding: 7px 10px; cursor: pointer; font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
}
.mat-price-suggest-item:last-child { border-bottom: none; }
.mat-price-suggest-item:hover { background: #eff6ff; }
.mat-price-suggest-item.selected { background: #dbeafe; }
.mat-price-suggest-item .ps-code { font-weight: 700; color: #1f2937; }
.mat-price-suggest-item .ps-name { color: #64748b; font-size: 12px; margin-top: 2px; }
.mat-price-suggest-item .ps-cat { font-size: 11px; color: #475569; background: #f1f5f9; padding: 1px 6px; border-radius: 3px; margin-left: 6px; }

/* 신규 자재 등록 — 유사 자재 검색 사이드 패널 */
.mat-new-layout {
    display: grid; grid-template-columns: 1fr 360px; gap: 14px;
    align-items: start;
}
.mat-new-similar { padding: 12px; }
.mat-new-similar .panel-title { font-size: 13px; margin-bottom: 6px; }
.mat-new-similar input[type=search] {
    width: 100%; padding: 7px 10px; border: 1px solid #cbd5e1;
    border-radius: 6px; font-size: 12px; margin-bottom: 6px;
}
.mat-new-similar-list {
    max-height: 380px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
}
.mat-new-similar-item {
    padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 5px;
    font-size: 12px; background: #fff;
}
.mat-new-similar-item .nsi-code { font-weight: 700; color: #1f2937; }
.mat-new-similar-item .nsi-name { color: #475569; font-size: 11px; margin: 1px 0 4px; }
.mat-new-similar-item button {
    padding: 3px 8px; font-size: 11px; background: #2563eb; color: #fff;
    border: none; border-radius: 4px; cursor: pointer; font-weight: 600;
}
.mat-new-similar-item button:hover { background: #1d4ed8; }
@media (max-width: 900px) {
    .mat-new-layout { grid-template-columns: 1fr; }
}

/* 미매칭 모달 자재 검색 자동완성 */
.unmatched-mat-search {
    position: relative; display: inline-block;
}
.unmatched-mat-search input {
    width: 200px; padding: 5px 8px; border: 1px solid #cbd5e1;
    border-radius: 4px; font-size: 11px;
}
.unmatched-mat-results {
    position: absolute; z-index: 50; left: 0; top: 100%;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    min-width: 300px; max-height: 240px; overflow-y: auto;
    margin-top: 2px;
}
.unmatched-mat-results .umr-item {
    padding: 5px 8px; cursor: pointer; font-size: 11px; line-height: 1.3;
    border-bottom: 1px solid #f1f5f9;
}
.unmatched-mat-results .umr-item:hover { background: #eff6ff; }
.unmatched-mat-results .umr-item .umr-code { font-weight: 700; color: #1f2937; }
.unmatched-mat-results .umr-item .umr-name { color: #64748b; }

/* 업체 핍/그룹 */
.mat-vendor-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mat-vendor-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: #eff6ff; color: #1d4ed8;
    font-size: 12px; border: 1px solid #bfdbfe;
    cursor: pointer; transition: all 0.12s;
}
.mat-vendor-pill:hover { background: #dbeafe; }
.mat-vendor-groups { margin: 6px 0 10px; }

/* 재고 / 생산 계산 */
.stk-neg  { color: #dc2626; font-weight: 800; background: #fef2f2; }
.stk-zero { color: #94a3b8; }
.calc-short { color: #b91c1c; font-weight: 800; background: #fee2e2; }
.calc-zero  { color: #475569; }
.calc-ok    { color: #16a34a; font-weight: 700; }
.mat-calc-form {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
    margin: 12px 0 6px;
}
.mat-calc-form label { display: flex; flex-direction: column; gap: 4px; }
.mat-calc-form input, .mat-calc-form select {
    padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; background: #fff;
}
.mat-calc-form input:focus, .mat-calc-form select:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

@media (max-width: 1024px) {
    .mat-layout { grid-template-columns: 220px 1fr; }
    .mat-new-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .mat-layout { grid-template-columns: 1fr; }
    .mat-model-panel { max-height: 220px; }
}

/* 유휴 자동 로그아웃 경고 토스트 */
.idle-warning {
    position: fixed; right: 20px; bottom: 20px;
    background: #fff; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 14px 18px; max-width: 360px;
    border-left: 4px solid #f59e0b;
    z-index: 200;
    display: flex; flex-direction: column; gap: 10px;
}
.idle-warning .msg-line { color: #1f2937; font-weight: 600; font-size: 14px; }
.idle-warning .cnt { color: #d97706; font-weight: 800; }
.idle-warning button { padding: 8px 14px; font-size: 13px; align-self: flex-start; }
@media (max-width: 768px) {
    .idle-warning { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* 사이드바 오버레이 (모바일) */
.sidebar-overlay {
    display: none;
    position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 49;
}

/* 햄버거: 데스크톱에서는 숨김 */
.topbar .hamburger { display: none; cursor: pointer; }

/* ===== 태블릿 (<= 1024px) ===== */
@media (max-width: 1024px) {
    body.app { grid-template-columns: 200px 1fr; }
    .content { padding: 20px 16px; }
    .repo-layout { grid-template-columns: 280px 1fr; }
}

/* ===== 모바일 (<= 768px) ===== */
@media (max-width: 768px) {
    /* 햄버거 노출 */
    .topbar .hamburger { display: inline-block; }

    /* 앱 레이아웃: 단일 컬럼 */
    body.app {
        grid-template-columns: 1fr;
        grid-template-rows: 56px 1fr;
        grid-template-areas:
            "topbar"
            "content";
    }

    /* 사이드바: 오프캔버스 */
    .sidebar {
        position: fixed;
        top: 56px; left: 0; bottom: 0;
        width: 240px; max-width: 80vw;
        transform: translateX(-100%);
        transition: transform 0.22s ease-out;
        z-index: 50;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12);
        overflow-y: auto;
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-overlay { display: block; }

    /* 상단바 컴팩트 */
    .topbar {
        height: 56px; padding: 0 10px; gap: 6px;
    }
    .topbar .brand { font-size: 15px; margin-right: 4px; }
    .topbar .searchbox { max-width: none; margin: 0 4px; }
    .topbar .searchbox input { padding: 7px 10px 7px 28px; font-size: 12px; }
    .topbar .searchbox::before { left: 9px; font-size: 11px; }
    .topbar .user-info { display: none; }
    .topbar .btn-outline { padding: 5px 9px; font-size: 11px; }

    /* 메인 콘텐츠 */
    .content { padding: 14px 12px; }
    .page-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .page-head h1 { font-size: 19px; }

    /* 통계 카드 - 2열 */
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-card { padding: 10px 12px; min-height: 72px; }
    .stat-card .label { font-size: 12px; }
    .stat-card .value { font-size: 22px; }

    /* 자료실 - 트리/파일 세로 스택 */
    .repo-layout { grid-template-columns: 1fr; gap: 10px; }
    .tree-panel { max-height: 280px; padding: 10px; }
    .tree-toolbar button { font-size: 11px; padding: 6px 4px; }
    .move-hint { font-size: 10px; padding: 5px 7px; }
    .file-panel { padding: 12px; }

    /* 드롭존 */
    .drop-zone { padding: 18px 10px; margin-bottom: 12px; }
    .drop-zone .big { font-size: 24px; }

    /* 업로드 진행 행 - 좁아도 보이게 */
    .upload-row { flex-wrap: wrap; row-gap: 4px; padding: 8px; }
    .upload-row .name { flex-basis: 100%; }
    .upload-row .bar { flex: 1; width: auto; min-width: 0; }
    .upload-row .pct { width: auto; min-width: 38px; }
    .upload-row .size { width: auto; font-size: 11px; }

    /* 테이블 - 가로 스크롤 */
    .panel { overflow-x: auto; }
    .data-table { min-width: 540px; }
    .data-table th, .data-table td { padding: 9px 10px; font-size: 12px; }

    /* 폼 */
    .form input, .form select, .form textarea { padding: 11px 12px; font-size: 15px; }

    /* 로그인 카드 */
    .login-page { padding: 16px; }
    .login-card { padding: 32px 24px 28px; max-width: 100%; }
    .login-card h1 { font-size: 22px; }
    .login-card input { padding: 12px; font-size: 15px; }

    /* 모달 */
    .modal { padding: 12px; }
    .modal-card { padding: 22px 18px; }
    .modal-card h3 { font-size: 16px; }
    .share-url-row { flex-direction: column; gap: 8px; }
    .share-url-row .btn-primary { width: 100%; padding: 10px; }
    .share-url-row input { font-size: 11px; }
}

/* ===== 작은 모바일 (<= 420px) ===== */
@media (max-width: 420px) {
    .topbar .searchbox { display: none; }
    #pw-btn { display: none; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .login-card { padding: 28px 20px 24px; }
    .login-card h1 { font-size: 20px; }
}

/* ===== BOM 행 편집 ===== */
.btn-xs {
    padding: 2px 7px;
    font-size: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}
.btn-xs:hover { background: #f1f5f9; }
.bom-cell-edit:hover { background: #eff6ff; outline: 1px dashed #93c5fd; }
.bom-manage { white-space: nowrap; }
.bom-manage .bom-row-del:hover { background: #fee2e2; border-color: #fca5a5; }
.bom-edit-results {
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 6px;
}
.bom-edit-hit {
    padding: 7px 10px;
    border: 1px solid #e5e7eb;
    border-top: none;
    cursor: pointer;
    font-size: 13px;
}
.bom-edit-hit:first-child { border-top: 1px solid #e5e7eb; border-radius: 6px 6px 0 0; }
.bom-edit-hit:last-child  { border-radius: 0 0 6px 6px; }
.bom-edit-hit:hover { background: #eff6ff; }
.bom-edit-selected {
    margin-top: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
}

/* ============================================================
 * 주요 일정 관리 (달력)
 * ============================================================ */
.sch-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
}
.sch-toolbar .sch-nav { display: flex; gap: 6px; }
.sch-toolbar .sch-month-title {
    margin: 0;
    flex: 1;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}
.sch-toolbar .sch-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sch-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #4b5563;
}
.sch-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sch-legend .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.sch-calendar-panel {
    padding: 0;
    overflow: hidden;
}
.sch-weekdays {
    display: grid;
    /* minmax(0,1fr): 내용물이 길어도 컬럼이 화면 밖으로 넘치지 않게 */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
}
.sch-weekdays .dow {
    padding: 8px 0;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    color: #374151;
}
.sch-weekdays .dow.sun { color: #dc2626; }
.sch-weekdays .dow.sat { color: #2563eb; }

.sch-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(110px, auto);
}
.sch-cell {
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 4px 4px 6px;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 110px;
    min-width: 0;
    overflow: hidden;
    transition: background 0.1s;
}
.sch-cell:nth-child(7n) { border-right: none; }
.sch-cell:hover { background: #f9fafb; }
.sch-cell.out-of-month { background: #fafafa; color: #9ca3af; }
.sch-cell.out-of-month .sch-cell-head .d { color: #9ca3af; }
.sch-cell.today { background: #fffbeb; }
.sch-cell.today .sch-cell-head .d { color: #b45309; font-weight: 700; }

.sch-cell-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px;
    font-size: 12px;
    margin-bottom: 2px;
    min-width: 0;
}
.sch-cell-head .d { font-weight: 600; color: #374151; }
.sch-cell-head.sun .d { color: #dc2626; }
.sch-cell-head.sat .d { color: #2563eb; }
.sch-cell-head .today-mark {
    background: #f59e0b;
    color: #fff;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}

.sch-cell-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.sch-ev {
    background: #dbeafe;
    color: #1d4ed8;
    padding: 2px 6px;
    border-radius: 3px;
    border-left: 3px solid #3b82f6;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.sch-ev:hover { filter: brightness(0.95); }
.sch-ev .t {
    font-weight: 600;
    margin-right: 2px;
}
.sch-ev .title { font-weight: 500; }
.sch-ev.is-completed {
    opacity: 0.55;
    text-decoration: line-through;
}
.sch-ev.is-completed::after {
    content: ' (완료)';
    font-weight: 700;
}
.sch-more {
    font-size: 11px;
    color: #6b7280;
    padding: 0 4px;
}
/* 전체 탭에서 내 개인 일정 구분 태그 */
.ev-scope-tag {
    display: inline-block;
    background: #059669;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 6px;
    vertical-align: 1px;
    line-height: 1.5;
}
.sch-ev.is-personal { border-left-style: dashed; }

/* 일정 모달 - 전사/개인 선택 (전체 탭 신규 등록 시) */
.event-scope-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.event-scope-row .scope-row-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
.event-scope-row .scope-radio {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 5px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    cursor: pointer;
    margin: 0;
}
.event-scope-row .scope-radio input { accent-color: #2563eb; }
.event-scope-row .scope-radio.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 일정 모달 */
.sch-event-modal {
    max-width: 560px;
    width: 92vw;
    max-height: 92vh;
    overflow-y: auto;
}
.sch-event-modal form { display: flex; flex-direction: column; gap: 12px; }
.sch-event-modal label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #374151;
}
.sch-event-modal input[type="text"],
.sch-event-modal input[type="date"],
.sch-event-modal input[type="time"],
.sch-event-modal input[type="search"],
.sch-event-modal textarea {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
}
.sch-event-modal textarea { resize: vertical; }
.sch-event-modal .row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sch-event-modal .check-inline {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}
.sch-event-modal .event-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9fafb;
    padding: 8px 10px;
    border-radius: 6px;
}
.sch-event-modal .event-status-row .hint { font-size: 11px; color: #6b7280; }
.sch-event-modal .event-mail-box {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0;
}
.sch-event-modal .event-mail-box legend {
    padding: 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.recipients-wrap { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.recipients-wrap.hidden { display: none; }
.recipients-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.recipients-controls input[type="search"] {
    flex: 1;
    min-width: 140px;
}
.recipients-controls button {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}
.recipients-controls button:hover { background: #e5e7eb; }
.recipient-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}
/* 한 줄 컴팩트 — 한 화면에 8명 정도 표시 */
.sch-event-modal .recipient-item,
.recipient-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    margin: 0;
}
.recipient-item:hover { background: #f9fafb; }
.recipient-item:last-child { border-bottom: none; }
.recipient-item input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}
.recipient-item .r-name {
    flex: 0 0 60px;
    font-weight: 600;
    color: #111827;
}
.recipient-item .r-dept {
    flex: 0 0 90px;
    color: #6b7280;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recipient-item .r-email {
    flex: 1 1 auto;
    color: #4b5563;
    font-family: monospace;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 720px) {
    .sch-grid { grid-auto-rows: minmax(70px, auto); }
    .sch-cell { min-height: 70px; padding: 2px; }
    .sch-cell-head { font-size: 11px; padding: 1px 2px; }
    .sch-ev { font-size: 10px; padding: 1px 4px; }
    .sch-event-modal .row-2 { grid-template-columns: 1fr; }
    .sch-toolbar { justify-content: center; }
    .sch-toolbar .sch-month-title { font-size: 18px; flex-basis: 100%; order: -1; }
    .sch-legend { display: none; }
    .recipient-item .r-name  { flex: 0 0 60px; }
    .recipient-item .r-dept  { display: none; }
    .recipient-item .r-email { flex: 1; }
}
/* 일정 관리 - 탭 */
.sch-tabs {
    display: flex;
    gap: 4px;
    padding: 0 4px;
    margin-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}
.sch-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    margin-bottom: -2px;
    transition: color 0.15s;
}
.sch-tab:hover { color: #1f2937; }
.sch-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}
body.sch-personal-mode .sch-tab.active {
    color: #059669;
    border-bottom-color: #059669;
}
body.sch-personal-mode .sch-cell.today {
    background: #ecfdf5;
}
body.sch-personal-mode .sch-cell.today .sch-cell-head .d {
    color: #047857;
}
/* 공휴일 / 회사 기념일 */
.sch-cell.holiday .sch-cell-head .d { color: #dc2626; }
.sch-cell.holiday.today { background: #fef2f2; }
.sch-cell.company-day .sch-cell-head .d { color: #7c3aed; }
.sch-cell.company-day.today { background: #f5f3ff; }
.sch-cell-head .holiday-name {
    font-size: 10px;
    color: #dc2626;
    background: #fee2e2;
    padding: 1px 5px;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}
.sch-cell.company-day .holiday-name {
    color: #6d28d9;
    background: #ede9fe;
}
/* 브랜드 클릭 가능 */
.topbar .brand {
    cursor: pointer;
    user-select: none;
}
.topbar .brand:hover { opacity: 0.8; }
/* ============================================================
 * 시/분 select picker (5분 단위)
 * ============================================================ */
.time-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 4px 8px;
    background: #fff;
}
.time-picker select {
    border: none !important;
    background: transparent !important;
    padding: 4px 2px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    cursor: pointer;
    flex: 1;
    text-align: center;
    text-align-last: center;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}
.time-picker select:focus { color: #2563eb; }
.time-picker .tp-sep {
    color: #6b7280;
    font-weight: 600;
}

/* ============================================================
 * 모바일 반응형 보강 (스마트폰)
 * ============================================================ */
@media (max-width: 540px) {
    /* 페이지 헤더 */
    .page-head h1 { font-size: 18px; }
    .page-head .timestamp { font-size: 11px; }

    /* 일정 탭 */
    .sch-tab { padding: 8px 14px; font-size: 13px; }

    /* 도구바 */
    .sch-toolbar { gap: 8px; padding: 8px; }
    .sch-toolbar .sch-nav { gap: 4px; }
    .sch-toolbar .sch-nav button { padding: 6px 10px; font-size: 12px; }
    .sch-toolbar .sch-month-title { font-size: 16px; flex-basis: 100%; order: -1; margin-bottom: 4px; }
    .sch-toolbar .sch-actions { flex-basis: 100%; justify-content: space-between; }
    .sch-toolbar #sch-add { padding: 6px 12px; font-size: 13px; }

    /* 요일 헤더 */
    .sch-weekdays .dow { padding: 5px 0; font-size: 11px; }

    /* 캘린더 셀 */
    .sch-grid { grid-auto-rows: minmax(58px, auto); }
    .sch-cell { min-height: 58px; padding: 2px 1px; }
    .sch-cell-head { padding: 1px 2px; font-size: 10px; gap: 2px; }
    .sch-cell-head .d { font-size: 11px; }
    .sch-cell-head .holiday-name {
        font-size: 9px;
        padding: 0 3px;
        max-width: 40px;
        border-radius: 4px;
    }
    .sch-cell-head .today-mark { font-size: 8px; padding: 0 4px; }
    .sch-ev {
        font-size: 9px;
        padding: 1px 3px;
        line-height: 1.3;
    }
    .sch-ev .t { display: none; }   /* 폭이 좁으니 시간 숨김 */
    .ev-scope-tag { font-size: 8px; padding: 0 3px; }
    .sch-more { font-size: 9px; padding: 0 2px; }
    .sch-legend { display: none; }

    /* 일정 모달 */
    .sch-event-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    .sch-event-modal .row-2 { grid-template-columns: 1fr; }
    .modal-actions { flex-wrap: wrap; gap: 6px; }
    .modal-actions button { flex: 1; min-width: 80px; }

    /* 수신자 리스트 — 소형 폰: 이름만 */
    .recipient-item { gap: 6px; padding: 4px 8px; }
    .recipient-item .r-dept { display: none; }
    .recipient-item .r-email { font-size: 10px; }
}

/* 더 좁은 화면 (소형 폰) */
@media (max-width: 380px) {
    .sch-cell { min-height: 52px; }
    .sch-cell-head .holiday-name { display: none; }
    .sch-cell-head .today-mark { display: none; }
    .sch-tab { padding: 7px 10px; font-size: 12px; }
}
/* ============================================================
 * 수불 비교 결과 카드
 * ============================================================ */
.rec-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin: 14px 0;
}
.rec-cards.hidden { display: none; }
.rec-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.rec-card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
.rec-card.active { outline: 2px solid currentColor; outline-offset: -2px; }
.rec-card .rec-label { font-size: 12px; font-weight: 600; }
.rec-card .rec-value { font-size: 28px; font-weight: 800; margin: 4px 0; line-height: 1; }
.rec-card .rec-sub   { font-size: 10px; color: #6b7280; }
.rec-card.rec-green  { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
.rec-card.rec-amber  { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.rec-card.rec-purple { color: #7c3aed; background: #faf5ff; border-color: #e9d5ff; }
.rec-card.rec-red    { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.rec-card.rec-orange { color: #c2410c; background: #fff7ed; border-color: #fed7aa; }

.rec-filter-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rec-filter-bar.hidden { display: none; }
.rec-fbtn { border-radius: 16px; }
.rec-fbtn.active { background: #2563eb; color: #fff; border-color: #2563eb; }

.rec-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 3px 6px 3px 0;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 16px;
    font-size: 12px;
}
.rec-chip b { color: #111827; }

@media (max-width: 720px) {
    .rec-cards { grid-template-columns: repeat(2, 1fr); }
    .rec-card .rec-value { font-size: 22px; }
}
/* 글로벌 hidden — div/span 등 일반 요소에도 적용 (이전엔 .modal.hidden 같은 개별 셀렉터만 있어 #rec-no-stock-box 의 class="hidden" 가 무시됐음) */
.hidden { display: none !important; }
/* 비교 표 — tbody w=0/h=0 압축 회피 */
#rec-table { display: table !important; width: 100% !important; table-layout: auto !important; }
#rec-table thead { display: table-header-group !important; }
#rec-table tbody { display: table-row-group !important; }
#rec-table tr    { display: table-row !important; }
#rec-table th,
#rec-table td   { display: table-cell !important; }
/* 비교 결과 표 — div+grid 로 교체 (table CSS 영향 회피) */
.rec-grid {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    font-size: 12px;
}
.rec-grid-head,
.rec-grid-row {
    display: grid;
    grid-template-columns: 110px 130px 1fr 1fr 110px 220px;
    gap: 0;
    border-bottom: 1px solid #f1f5f9;
}
.rec-grid-head {
    background: #f8fafc;
    font-weight: 700;
    color: #475569;
}
.rec-grid-head > div,
.rec-grid-row > div {
    padding: 9px 12px;
    word-break: break-word;
}
.rec-grid-row:hover { background: #fafbfc; }
.rec-grid-row:last-child { border-bottom: none; }
.rec-grid-row .center { text-align: center; }
.rec-split {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    background: #ede9fe;
    color: #6d28d9;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}
/* 카드 7개 grid */
.rec-cards { grid-template-columns: repeat(7, 1fr) !important; }
@media (max-width: 980px) { .rec-cards { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 720px) { .rec-cards { grid-template-columns: repeat(2, 1fr) !important; } }
.rec-card.rec-gray { color: #6b7280; background: #f9fafb; border-color: #e5e7eb; }
.rec-cards { grid-template-columns: repeat(8, 1fr) !important; }
@media (max-width: 1100px) { .rec-cards { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 720px)  { .rec-cards { grid-template-columns: repeat(2, 1fr) !important; } }