h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ================= UBNet 공통 ================= */
:root {
    --ub-bg: #f4f6f9;
    --ub-surface: #ffffff;
    --ub-border: #dfe3ea;
    --ub-text: #1d2330;
    --ub-muted: #667085;
    --ub-accent: #1f5fd1;
    --ub-accent-soft: #e8f0fd;
    --ub-ok: #16803c;
    --ub-ok-soft: #e5f5ea;
    --ub-bad: #c62828;
    --ub-bad-soft: #fdecec;
    --ub-warn: #b26a00;
    --ub-warn-soft: #fff4e0;
    /* 테마별로 바뀌는 보조 색 */
    --ub-surface-2: #fafbfd;      /* 살짝 다른 바탕(펼친 항목·줄무늬) */
    --ub-line: #eef0f4;           /* 옅은 구분선·회색 딱지 */
    --ub-accent-hover: #194fb0;
    --ub-accent-border: #c9d8f5;
    --ub-ok-border: #9ed3b0;
    --ub-bad-border: #f1b8b8;
    --ub-warn-border: #f3d7a5;
    --ub-switch-off: #c4cad3;
    --ub-auth-grad: #eaf0fb;
    --ub-receipt-soft: #f3edfc;   /* 영수증이 필요한 카드 내역 줄 */
    color-scheme: light;
    --ub-radius: 8px;
}

/* ---------- 어두운 테마(<html data-theme="dark">) ---------- */
:root[data-theme="dark"] {
    --ub-bg: #0f1115;
    --ub-surface: #181b21;
    --ub-border: #2e343e;
    --ub-text: #e4e7ec;
    --ub-muted: #98a2b3;
    --ub-accent: #4c8dff;
    --ub-accent-soft: #1a2945;
    --ub-ok: #4cc276;
    --ub-ok-soft: #15301f;
    --ub-bad: #ff6b6b;
    --ub-bad-soft: #3a1c1f;
    --ub-warn: #f0b04a;
    --ub-warn-soft: #362a12;
    --ub-surface-2: #1f232b;
    --ub-line: #262b34;
    --ub-accent-hover: #6aa0ff;
    --ub-accent-border: #2b4a80;
    --ub-ok-border: #2c6b42;
    --ub-bad-border: #6e2a2e;
    --ub-warn-border: #6b5420;
    --ub-switch-off: #4a515c;
    --ub-auth-grad: #151b27;
    --ub-receipt-soft: #2a2240;
    color-scheme: dark;
}

html, body {
    margin: 0;
    background: var(--ub-bg);
    color: var(--ub-text);
    font-family: "Malgun Gothic", "맑은 고딕", "Segoe UI", sans-serif;
    font-size: 14px;
}

button, input, select, textarea { font: inherit; color: inherit; }

.ub-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border: 1px solid var(--ub-border); border-radius: 6px;
    background: var(--ub-surface); cursor: pointer; white-space: nowrap;
}
.ub-btn:hover:not(:disabled) { border-color: var(--ub-accent); color: var(--ub-accent); }
.ub-btn:disabled { opacity: .5; cursor: default; }
.ub-btn.primary { background: var(--ub-accent); border-color: var(--ub-accent); color: #fff; }
.ub-btn.primary:hover:not(:disabled) { background: var(--ub-accent-hover); color: #fff; }
.ub-btn.danger { color: var(--ub-bad); border-color: var(--ub-bad-border); }
.ub-btn.danger:hover:not(:disabled) { background: var(--ub-bad); color: #fff; border-color: var(--ub-bad); }
.ub-btn.small { padding: 3px 9px; font-size: 12px; }
.ub-btn.link { border: none; background: none; color: var(--ub-accent); padding: 2px 4px; }

input.ub-input, select.ub-input {
    width: 100%; box-sizing: border-box; padding: 6px 8px;
    border: 1px solid var(--ub-border); border-radius: 6px; background: var(--ub-surface);
}
input.ub-input:focus, select.ub-input:focus { outline: 2px solid var(--ub-accent-soft); border-color: var(--ub-accent); }

/* ---------- 홈 ---------- */
.ub-home { max-width: 960px; margin: 0 auto; padding: 48px 24px; }
.ub-home-header h1 { margin: 0; font-size: 32px; letter-spacing: -.5px; }
.ub-home-header p { margin: 6px 0 32px; color: var(--ub-muted); }
.ub-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ub-feature-card {
    display: flex; gap: 16px; align-items: flex-start; padding: 20px;
    background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: 12px;
    text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s;
}
.ub-feature-card:hover { border-color: var(--ub-accent); box-shadow: 0 4px 16px rgba(31, 95, 209, .12); }
.ub-feature-icon {
    flex: none; display: grid; place-items: center; width: 48px; height: 48px;
    border-radius: 10px; background: var(--ub-accent-soft); color: var(--ub-accent);
}
.ub-feature-text { display: flex; flex-direction: column; gap: 6px; }
.ub-feature-title { font-size: 16px; font-weight: 700; }
.ub-feature-desc { color: var(--ub-muted); line-height: 1.5; }

/* ---------- 기능 페이지 ---------- */
.ub-page { min-height: 100vh; display: flex; flex-direction: column; }
.ub-topbar {
    display: flex; align-items: center; gap: 14px; padding: 12px 24px;
    background: var(--ub-surface); border-bottom: 1px solid var(--ub-border);
    position: sticky; top: 0; z-index: 10;
}
.ub-topbar h1 { margin: 0; font-size: 18px; }
.ub-topbar .ub-sub { color: var(--ub-muted); }
.ub-back { color: var(--ub-muted); text-decoration: none; }
.ub-back:hover { color: var(--ub-accent); }
.ub-spacer { flex: 1; }

.ub-tabs { display: flex; gap: 4px; padding: 0 24px; background: var(--ub-surface); border-bottom: 1px solid var(--ub-border); }
.ub-tab {
    padding: 12px 16px; border: none; background: none; cursor: pointer; color: var(--ub-muted);
    border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 8px;
}
.ub-tab .num {
    display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--ub-line); font-size: 12px; font-weight: 700;
}
.ub-tab.active { color: var(--ub-accent); border-bottom-color: var(--ub-accent); font-weight: 700; }
.ub-tab.active .num { background: var(--ub-accent); color: #fff; }

.ub-content { padding: 20px 24px 48px; max-width: 1500px; width: 100%; box-sizing: border-box; margin: 0 auto; }

.ub-card { background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: var(--ub-radius); padding: 16px 20px; margin-bottom: 16px; }
.ub-card h2 { margin: 0 0 12px; font-size: 15px; }
.ub-card h3 { margin: 16px 0 6px; font-size: 13px; color: var(--ub-muted); }
.ub-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ub-card-head h2 { margin: 0; margin-right: auto; }
/* 접기/펼치기 화살표(제목 바로 오른쪽). 접힌 상자는 제목 줄만 남는다 */
.ub-card-head h2:has(+ .ub-collapse-btn) { margin-right: 0; }
.ub-collapse-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 6px;
    border: 1px solid transparent; background: transparent; color: var(--ub-muted); cursor: pointer; }
.ub-collapse-btn:hover { color: var(--ub-accent); background: var(--ub-accent-soft); border-color: var(--ub-border); }
.ub-collapse-btn svg { transition: transform .15s ease; }
.ub-collapse-btn.collapsed svg { transform: rotate(180deg); }
.ub-card.ub-collapsed { padding-bottom: 16px; }
.ub-card.ub-collapsed > .ub-card-head { margin-bottom: 0; }
.ub-card.ub-collapsed > :not(.ub-card-head) { display: none !important; }

.ub-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.ub-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ub-muted); }
.ub-field > input, .ub-field > select { color: var(--ub-text); font-size: 14px; }

.ub-hint { color: var(--ub-muted); font-size: 12px; margin: 8px 0 0; line-height: 1.6; }
.ub-alert { margin: 24px; padding: 16px 20px; border-radius: var(--ub-radius); background: var(--ub-warn-soft); color: var(--ub-warn); border: 1px solid var(--ub-warn-border); }
.ub-alert.error { background: var(--ub-bad-soft); color: var(--ub-bad); border-color: var(--ub-bad-border); }
.ub-actions { display: flex; align-items: center; gap: 10px; }
.ub-muted { color: var(--ub-muted); }

.ub-table { width: 100%; border-collapse: collapse; }
.ub-table th { text-align: left; font-size: 12px; color: var(--ub-muted); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--ub-border); white-space: nowrap; }
.ub-table td { padding: 6px; border-bottom: 1px solid var(--ub-line); vertical-align: middle; }
.ub-table tr.sub td { border-bottom: 1px solid var(--ub-line); padding-top: 0; font-size: 12px; }

.ub-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--ub-line); color: var(--ub-muted); white-space: nowrap; }
.ub-badge.ok { background: var(--ub-ok-soft); color: var(--ub-ok); }
.ub-badge.bad { background: var(--ub-bad-soft); color: var(--ub-bad); }
.ub-badge.warn { background: var(--ub-warn-soft); color: var(--ub-warn); }
.ub-badge.info { background: var(--ub-accent-soft); color: var(--ub-accent); }

/* 항목 선택 */
.ub-divider { width: 1px; align-self: stretch; background: var(--ub-border); margin: 0 4px; }
.ub-item { border-bottom: 1px solid var(--ub-line); }
.ub-item.expanded { background: var(--ub-surface-2); border: 1px solid var(--ub-border); border-radius: 6px; margin: 6px 0; }
.ub-item-head { display: grid; grid-template-columns: 24px 32px 1fr 32px; align-items: start; gap: 8px; padding: 7px 4px; }
.ub-item-head:hover { background: var(--ub-surface-2); }
.ub-item-head input[type=checkbox] { margin-top: 3px; }
.ub-item-head .no { font-weight: 700; color: var(--ub-muted); text-align: right; }
.ub-item-head .title { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; cursor: pointer; }
.ub-item-head .note { flex-basis: 100%; color: var(--ub-muted); font-size: 12px; }
.ub-toggle { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ub-muted); cursor: pointer; transition: transform .15s; }
.ub-toggle:hover { border-color: var(--ub-border); color: var(--ub-accent); background: var(--ub-surface); }
.ub-item.expanded .ub-toggle { transform: rotate(180deg); color: var(--ub-accent); }
.ub-item-detail { padding: 4px 16px 16px 68px; display: flex; flex-direction: column; gap: 10px; }

/* SW 설치점검 [점검 항목]: 왼쪽 서버 목록 | 오른쪽 항목 카드(바둑판) */
.ub-items-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.ub-items-servers { padding: 0; overflow: hidden; position: sticky; top: 0; }
.ub-items-servers .ub-table { margin: 0; }
.ub-items-servers th.num, .ub-items-servers td.num { width: 1%; white-space: nowrap; text-align: center; }
.ub-items-servers tbody tr { cursor: pointer; }
.ub-items-servers tbody tr:hover { background: var(--ub-surface-2); }
.ub-items-servers tbody tr.active { background: var(--ub-accent-soft); box-shadow: inset 3px 0 0 var(--ub-accent); }
.ub-items-servers tbody tr:focus-visible { outline: 2px solid var(--ub-accent); outline-offset: -2px; }
.ub-items-servers td.name { font-weight: 600; word-break: break-all; }
.ub-items-servers td.name small { display: block; font-weight: 400; color: var(--ub-muted); font-size: 11.5px; }
.ub-items-main { min-width: 0; }
/* 점검 실행: 같은 배치(왼쪽 서버 목록 | 오른쪽 카드들) */
.ub-run-main { min-width: 0; }
.ub-run-servers td.num .ub-badge { white-space: nowrap; }
.ub-run-allbar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--ub-border); background: var(--ub-surface-2); }
.ub-run-allbar-label { font-weight: 700; font-size: 13px; }
.ub-run-allbar .ub-icon-btn { width: 34px; height: 34px; border-color: var(--ub-border); background: var(--ub-surface); cursor: pointer; }
.ub-run-allbar .ub-icon-btn.start:not(:disabled) { color: var(--ub-ok, #1f9d55); }
.ub-run-allbar .ub-icon-btn.pause:not(:disabled), .ub-run-allbar .ub-icon-btn.resume:not(:disabled) { color: var(--ub-accent); }
.ub-run-allbar .ub-icon-btn.stop:not(:disabled) { color: var(--ub-bad, #d64545); }
.ub-run-allbar .ub-icon-btn:disabled { opacity: .35; cursor: default; background: transparent; }
.ub-run-allbar .ub-icon-btn:disabled:hover { color: var(--ub-muted); border-color: var(--ub-border); }
.ub-icard-category { margin: 16px 0 8px; }
.ub-icard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ub-icard {
    display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; min-width: 0;
    background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: 10px; transition: border-color .15s, background .15s;
}
/* 선택은 체크 표시만으로(테두리·색 강조 없음), 해제된 카드는 흐리게 */
.ub-icard:hover { border-color: color-mix(in srgb, var(--ub-accent) 45%, var(--ub-border)); }
.ub-icard-head input[type=checkbox] { accent-color: var(--ub-accent); }
.ub-icard:not(.selected) { background: var(--ub-surface-2); border-style: dashed; }
.ub-icard:not(.selected) .ub-icard-head .no,
.ub-icard:not(.selected) .ub-icard-head .title,
.ub-icard:not(.selected) .ub-icard-foot { opacity: .5; }
.ub-icard.expanded { grid-column: 1 / -1; }
.ub-icard-head { display: grid; grid-template-columns: 18px auto 1fr; gap: 8px; align-items: start; cursor: pointer; }
.ub-icard.locked .ub-icard-head { cursor: default; }
.ub-icard-head input[type=checkbox] { margin: 3px 0 0; }
.ub-icard-head .no { font-weight: 700; color: var(--ub-muted); }
.ub-icard-head .title { font-weight: 600; line-height: 1.4; }
.ub-icard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; min-height: 26px; }
.ub-icard-foot .note { color: var(--ub-muted); font-size: 12px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-icard.expanded .ub-icard-foot .note { white-space: normal; }
.ub-icard.expanded .ub-toggle { transform: rotate(180deg); color: var(--ub-accent); }
.ub-icard-detail { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; border-top: 1px solid var(--ub-line); animation: ub-icard-open .28s cubic-bezier(.2, .8, .2, 1); }
.ub-icard .ub-toggle { transition: transform .25s; }
@keyframes ub-icard-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ub-icard-detail { animation: none; } }
@media (max-width: 900px) {
    .ub-items-layout { grid-template-columns: minmax(0, 1fr); }
    .ub-items-servers { position: static; }
}
.ub-form-grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ub-form-grid .span-2 { grid-column: span 2; }
.ub-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ub-text); }
.ub-step { background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ub-step-head { display: flex; align-items: center; gap: 8px; }
.ub-step-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12px; color: var(--ub-muted); }
.ub-step-opts > label:not(.ub-check) { display: inline-flex; align-items: center; gap: 6px; }
.ub-step-opts select.ub-input { width: auto; }
.ub-sub-title { font-size: 12px; font-weight: 700; display: flex; align-items: center; margin-top: 2px; }
.ub-sub-title .ub-muted { font-weight: 400; margin-left: 6px; }
.ub-service-box { border: 1px solid var(--ub-accent-border); background: var(--ub-accent-soft); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ub-service-box .ub-table { background: var(--ub-surface); }
.ub-run-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ub-run-tab {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer;
    border: 1px solid var(--ub-border); border-radius: var(--ub-radius); background: var(--ub-surface); color: var(--ub-text);
}
.ub-run-tab:hover { border-color: var(--ub-accent); }
.ub-run-tab.active { border-color: var(--ub-accent); box-shadow: inset 0 -3px 0 var(--ub-accent); background: var(--ub-accent-soft); }
.ub-run-tab .name { font-weight: 700; }
.ub-run-tab .time { font-size: 12px; color: var(--ub-muted); }
.ub-cmd-row { display: grid; grid-template-columns: 1fr 1fr 160px 64px 32px; gap: 6px; }
.ub-table.compact th, .ub-table.compact td { padding: 3px 4px; }
.ub-savebar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 8px; border-radius: 6px; background: var(--ub-ok-soft); color: var(--ub-ok); position: sticky; top: 56px; z-index: 5; }
.ub-savebar.dirty { background: var(--ub-warn-soft); color: var(--ub-warn); border: 1px solid var(--ub-warn-border); }
.mono { font-family: Consolas, "D2Coding", monospace !important; font-size: 13px !important; }
textarea.ub-input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--ub-border); border-radius: 6px; background: var(--ub-surface); resize: vertical; line-height: 1.5; color: var(--ub-text); }
textarea.ub-input:focus { outline: 2px solid var(--ub-accent-soft); border-color: var(--ub-accent); }

/* 실행 */
.ub-status { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ub-accent-soft); color: var(--ub-accent); border-radius: 6px; margin-top: 12px; }
.ub-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ub-spin .8s linear infinite; flex: none; }
@keyframes ub-spin { to { transform: rotate(360deg); } }

.ub-server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ub-server-card { background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: var(--ub-radius); padding: 14px 16px; }
.ub-server-card.current { border-color: var(--ub-accent); box-shadow: 0 0 0 2px var(--ub-accent-soft); }
.ub-server-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ub-server-card header strong { margin-right: auto; }
.ub-progress { height: 6px; background: var(--ub-line); border-radius: 3px; overflow: hidden; margin: 8px 0; }
.ub-progress > div { height: 100%; background: var(--ub-accent); transition: width .3s; }
.ub-cells { display: flex; flex-wrap: wrap; gap: 3px; }
.ub-cell { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--ub-line); color: var(--ub-muted); }
.ub-cell.running { background: var(--ub-accent); color: #fff; animation: ub-pulse 1s ease-in-out infinite alternate; }
.ub-cell.ok { background: var(--ub-ok-soft); color: var(--ub-ok); }
.ub-cell.bad { background: var(--ub-bad-soft); color: var(--ub-bad); }
.ub-cell.check { background: var(--ub-warn-soft); color: var(--ub-warn); }
.ub-cell.skip { background: var(--ub-surface-2); color: var(--ub-muted); text-decoration: line-through; }
@keyframes ub-pulse { from { opacity: 1; } to { opacity: .55; } }

/* 실시간 서버 콘솔: column-reverse로 항상 마지막 줄이 보이도록 고정 */
.ub-console { height: 360px; overflow: auto; display: flex; flex-direction: column-reverse; background: #0c0c0c; border-radius: 6px; padding: 10px 12px; font-family: Consolas, "D2Coding", monospace; font-size: 13px; line-height: 1.45; }
.ub-console.large { height: 70vh; }
.ub-console-inner div { white-space: pre-wrap; word-break: break-all; color: #e6e6e6; }
.ub-console-inner .Prompt { color: #fff; font-weight: 700; }
.ub-console-inner .Error { color: #ff6b6b; }
.ub-console-inner .Info { color: #7f8a99; }
.ub-cursor { display: inline-block; width: 8px; height: 15px; background: #e6e6e6; vertical-align: text-bottom; animation: ub-blink 1s steps(1) infinite; }
@keyframes ub-blink { 50% { opacity: 0; } }

.ub-log { max-height: 360px; overflow: auto; font-family: Consolas, monospace; font-size: 12px; background: var(--ub-surface-2); border: 1px solid var(--ub-border); border-radius: 6px; padding: 8px 10px; }
.ub-log div { padding: 1px 0; white-space: pre-wrap; }
.ub-log .t { color: var(--ub-muted); margin-right: 8px; }
.ub-log .s { color: var(--ub-accent); margin-right: 8px; }
.ub-log .Success { color: var(--ub-ok); }
.ub-log .Warning { color: var(--ub-warn); }
.ub-log .Error { color: var(--ub-bad); }

/* 결과 */
.ub-server-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ub-server-tabs .ub-btn.active { background: var(--ub-accent); color: #fff; border-color: var(--ub-accent); }
.ub-result-table { width: 100%; border-collapse: collapse; background: var(--ub-surface); }
.ub-result-table th { text-align: left; font-size: 12px; color: var(--ub-muted); padding: 8px; border-bottom: 1px solid var(--ub-border); position: sticky; top: 52px; background: var(--ub-surface); z-index: 1; }
.ub-result-table td { padding: 8px; border-bottom: 1px solid var(--ub-line); vertical-align: top; }
.ub-result-table tr.not-run td { color: var(--ub-muted); }
.ub-result-table .msgs { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--ub-muted); }
.ub-result-table .msgs li.bad { color: var(--ub-bad); }
.ub-result-table .msgs li.ok { color: var(--ub-ok); }
.ub-verdict { width: 72px; padding: 4px; border: 1px solid var(--ub-border); border-radius: 6px; font-weight: 700; }
.ub-verdict.O { color: var(--ub-ok); border-color: var(--ub-ok-border); background: var(--ub-ok-soft); }
.ub-verdict.X { color: var(--ub-bad); border-color: var(--ub-bad-border); background: var(--ub-bad-soft); }
.ub-verdict.NA { color: var(--ub-muted); }
.ub-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.ub-thumb { position: relative; border: 1px solid var(--ub-border); border-radius: 4px; overflow: hidden; background: var(--ub-surface-2); }
.ub-thumb img { display: block; max-width: 180px; max-height: 110px; cursor: zoom-in; }
.ub-thumb .col { position: absolute; left: 2px; top: 2px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 0 4px; border-radius: 3px; }
.ub-thumb .del { position: absolute; right: 2px; top: 2px; border: none; background: rgba(0,0,0,.6); color: #fff; width: 18px; height: 18px; border-radius: 3px; cursor: pointer; font-size: 11px; line-height: 1; }
.ub-attach { display: inline-flex; align-items: center; padding: 3px 9px; font-size: 12px; border: 1px dashed var(--ub-border); border-radius: 6px; cursor: pointer; color: var(--ub-muted); }
.ub-attach:hover { border-color: var(--ub-accent); color: var(--ub-accent); }
.ub-attach input { display: none; }
.ub-row-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

/* 모달 */
.ub-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: grid; place-items: center; z-index: 100; padding: 24px; }
.ub-modal { background: var(--ub-surface); border-radius: 12px; width: min(760px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.ub-modal.wide { width: min(1400px, 100%); }
.ub-modal header { padding: 16px 20px; border-bottom: 1px solid var(--ub-border); display: flex; align-items: center; gap: 10px; }
.ub-modal header h2 { margin: 0; font-size: 16px; margin-right: auto; }
.ub-modal .body { padding: 16px 20px; overflow: auto; }
.ub-modal footer { padding: 12px 20px; border-top: 1px solid var(--ub-border); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ub-modal pre { background: #1e1e1e; color: #e6e6e6; padding: 12px; border-radius: 6px; overflow: auto; font-family: Consolas, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; margin: 8px 0 0; }
.ub-modal .warn-box { padding: 12px 14px; background: var(--ub-warn-soft); color: var(--ub-warn); border-radius: 6px; line-height: 1.6; }
.ub-modal img.full { max-width: 100%; display: block; margin: 0 auto; }

/* ================= 다국어 글꼴 ================= */
html:lang(zh) body { font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Segoe UI", sans-serif; }
html:lang(ja) body { font-family: "Yu Gothic UI", "Meiryo", "Hiragino Sans", "Segoe UI", sans-serif; }
html:lang(en) body { font-family: "Segoe UI", "Malgun Gothic", sans-serif; }

/* ================= 공통 요소 ================= */
.ub-link { color: var(--ub-accent); text-decoration: none; }
.ub-link:hover { text-decoration: underline; }
.ub-btn.block { width: 100%; justify-content: center; padding: 10px 14px; font-size: 15px; box-sizing: border-box; text-decoration: none; }
a.ub-btn { text-decoration: none; color: inherit; }
a.ub-btn.primary { color: #fff; }

.ub-notice { padding: 10px 12px; border-radius: 6px; line-height: 1.5; }
.ub-notice ul { margin: 6px 0 0; padding-left: 18px; }
.ub-notice.error { background: var(--ub-bad-soft); color: var(--ub-bad); }
.ub-notice.success { background: var(--ub-ok-soft); color: var(--ub-ok); display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.ub-notice.info { background: var(--ub-accent-soft); color: var(--ub-accent); }

.ub-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px; color: var(--ub-muted); }
.ub-spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--ub-border); border-top-color: var(--ub-accent);
    animation: ub-spin .8s linear infinite;
}
@keyframes ub-spin { to { transform: rotate(360deg); } }

.ub-message-page { max-width: 520px; margin: 80px auto; padding: 0 24px; text-align: center; }
.ub-message-page h1 { font-size: 22px; margin: 0 0 8px; }
.ub-message-page p { color: var(--ub-muted); margin: 0 0 24px; }

/* ================= 폼 ================= */
.ub-form { display: flex; flex-direction: column; gap: 14px; }
.ub-form-field { display: flex; flex-direction: column; gap: 6px; }
.ub-form-field > span { font-weight: 600; font-size: 13px; }
.ub-form-field input.ub-input { padding: 9px 10px; }
.ub-form-field input[readonly] { background: var(--ub-bg); color: var(--ub-muted); }
.ub-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ub-help { color: var(--ub-muted); font-size: 12px; }
.ub-required { color: var(--ub-bad); font-style: normal; }
.ub-upper { text-transform: uppercase; }
.ub-upper::placeholder { text-transform: none; }
.ub-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ub-form-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ub-code-row { display: flex; align-items: center; justify-content: space-between; }

/* ================= 로그인/가입 화면 ================= */
.ub-auth { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(160deg, var(--ub-auth-grad) 0%, var(--ub-bg) 45%); }
.ub-auth-top { display: flex; justify-content: flex-end; padding: 16px 20px; }
.language-selector {
    padding: 5px 8px; border: 1px solid var(--ub-border); border-radius: 6px;
    background: var(--ub-surface); cursor: pointer;
}
.ub-auth-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 24px 16px 48px; }
.ub-auth-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; margin: 24px 0 20px; }
.ub-auth-logo {
    display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
    background: var(--ub-accent); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -.5px;
}
.ub-auth-logo.small { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; }
.ub-auth-card {
    width: 100%; max-width: 400px; box-sizing: border-box; padding: 28px;
    background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: 12px;
    box-shadow: 0 8px 30px rgba(29, 35, 48, .06);
}
.ub-auth-title { margin: 0 0 20px; font-size: 20px; }
.ub-auth-desc { margin: -8px 0 16px; color: var(--ub-muted); line-height: 1.5; }
.ub-auth-footer { margin: 20px 0 0; text-align: center; color: var(--ub-muted); }
/* 앱 로그인 화면 오른쪽 아래 접속 서버 표시(5번 연속 누르면 전환) */
.ub-server-switch {
    position: fixed; right: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border: 1px solid var(--ub-border); border-radius: 999px;
    background: var(--ub-surface); color: var(--ub-muted); font-size: 12px; cursor: pointer;
    user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.ub-server-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ub-accent); }
.ub-server-switch.local .ub-server-dot { background: #e0a100; }
.ub-server-host { opacity: .75; }

/* 앱: 서버 연결 실패 알림(ConnectionAlert) — 업데이트 안내보다도 위 */
.ub-connection-backdrop { z-index: 140; }
.ub-connection-modal { width: min(440px, 100%); }
.ub-connection-modal .body p { margin: 0 0 8px; word-break: break-word; }

/* 앱 업데이트 안내(UpdatePrompt): 탭 막대(120)보다 위 */
.ub-update-backdrop { z-index: 130; }
.ub-update-modal { width: min(440px, 100%); }
.ub-update-modal .body p { margin: 0 0 8px; }
.ub-update-notes { white-space: pre-line; padding: 8px 10px; border-radius: 6px; background: var(--ub-surface-2); }
.ub-update-badge { border-color: var(--ub-accent); color: var(--ub-accent); }

@media (max-width: 480px) {
    .ub-auth-card { padding: 20px; border-radius: 10px; }
    .ub-field-grid { grid-template-columns: 1fr; }
}

/* ================= 로그인 후 화면 틀: 상단 + 탭 화면 + 하단 탭 막대 ================= */
.ub-shell { min-height: 100vh; display: flex; flex-direction: column; }
.ub-shell-header {
    display: flex; align-items: center; gap: 12px; padding: 10px 20px;
    background: var(--ub-surface); border-bottom: 1px solid var(--ub-border);
    position: sticky; top: 0; z-index: 20;
}
.ub-shell-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: inherit; text-decoration: none; }
.ub-shell-user { display: flex; align-items: baseline; gap: 8px; color: inherit; text-decoration: none; padding: 4px 8px; border-radius: 6px; }
.ub-shell-user:hover { background: var(--ub-bg); }
.ub-shell-company { color: var(--ub-muted); font-size: 12px; }
.ub-offline { display: inline-flex; align-items: center; gap: 4px; }
.ub-shell-main { flex: 1; min-width: 0; padding-bottom: 56px; }
.ub-tab-panel[hidden] { display: none !important; }
/* 탭 안의 대화상자는 그 탭에만 속한다: 하단 탭 막대는 가리지 않아 대화상자가 열려 있어도 다른 탭으로 옮길 수 있다. */
.ub-tab-panel .ub-modal-backdrop { bottom: 44px; }
/* 전체 화면용으로 만든 기존 기능 화면(.ub-page, 예: SW 설치점검)을 탭 안에서 쓸 때:
   상단 고정·전체 높이·홈 링크는 화면 틀(상단 막대, 홈 탭)이 대신한다. */
.ub-tab-panel .ub-page { min-height: auto; }
.ub-tab-panel .ub-topbar { position: static; }
.ub-tab-panel .ub-back { display: none; }

.ub-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; height: 44px; box-sizing: border-box;
    display: flex; align-items: stretch; gap: 8px; padding: 0 8px 0 0;
    background: var(--ub-surface); border-top: 1px solid var(--ub-border);
    box-shadow: 0 -2px 10px rgba(29, 35, 48, .05);
}
.ub-tabbar-tabs { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: thin; }
.ub-pagetab {
    flex: none; display: flex; align-items: center; gap: 6px; max-width: 220px; padding: 0 8px 0 14px;
    border-right: 1px solid var(--ub-border); border-top: 3px solid transparent;
    color: var(--ub-muted); cursor: pointer; user-select: none; white-space: nowrap;
}
.ub-pagetab:hover { background: var(--ub-bg); color: var(--ub-text); }
.ub-pagetab.active { border-top-color: var(--ub-accent); background: var(--ub-accent-soft); color: var(--ub-accent); font-weight: 600; }
.ub-pagetab.home { padding-right: 14px; }
.ub-pagetab-title { overflow: hidden; text-overflow: ellipsis; }
.ub-pagetab-close {
    display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: 4px;
    background: none; color: inherit; font-size: 11px; cursor: pointer; opacity: .55;
}
.ub-pagetab-close:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
.ub-pagetab-close-all { align-self: center; flex: none; }

/* ---------- 홈: 메뉴 바둑판 ---------- */
.ub-home { max-width: 1100px; }
.ub-home-section { margin-bottom: 32px; }
.ub-home-section h2 {
    margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--ub-muted);
    text-transform: uppercase; letter-spacing: .5px;
}
.ub-home-group { margin: 16px 0 8px; font-size: 14px; }
/* 칸 최소 너비 = max(220px, 가장 긴 제목이 한 줄로 들어가는 너비 --ub-tile-min(Home.razor)), 화면보다 넓지는 않게 */
.ub-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(220px, var(--ub-tile-min, 220px))), 1fr)); gap: 12px; }
.ub-tile {
    display: flex; gap: 14px; align-items: flex-start; padding: 18px;
    background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: 12px;
    color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ub-tile:hover { border-color: var(--ub-accent); box-shadow: 0 4px 16px rgba(31, 95, 209, .12); transform: translateY(-1px); }
.ub-tile-icon {
    flex: none; display: grid; place-items: center; width: 46px; height: 46px;
    border-radius: 10px; background: var(--ub-accent-soft); color: var(--ub-accent);
}
.ub-tile.management .ub-tile-icon { background: var(--ub-line); color: var(--ub-muted); }
.ub-tile-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ub-tile-title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-tile-desc { color: var(--ub-muted); font-size: 12.5px; line-height: 1.45; }

/* ================= 관리 화면 ================= */
.ub-admin { max-width: 1200px; margin: 0 auto; padding: 24px; }
.ub-admin.ub-narrow { max-width: 560px; }
.ub-card .ub-notice.success { margin-bottom: 16px; }
.ub-admin-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ub-admin-head h1 { margin: 0; font-size: 20px; }
.ub-admin > .ub-notice { margin-bottom: 12px; }
.ub-admin > .ub-help { margin: -8px 0 16px; }
.ub-table-wrap { padding: 4px 8px; overflow-x: auto; }
.ub-table th.num, .ub-table td.num { text-align: right; }
.ub-table th.center, .ub-table td.center { text-align: center; }
.ub-table th.actions, .ub-table td.actions { text-align: right; white-space: nowrap; }
.ub-table td.actions .ub-btn { margin-left: 4px; }
/* SW 설치점검 첫 화면(현장상세 선택): 서버 수(오른쪽 정렬)와 오프라인 사본 사이를 띄워 구분 */
.ub-insp-sites th.num, .ub-insp-sites td.num { width: 110px; padding-right: 28px; white-space: nowrap; }
.ub-insp-sites th:nth-child(5), .ub-insp-sites td:nth-child(5) { padding-left: 20px; border-left: 1px solid var(--ub-line); white-space: nowrap; }
.ub-admin .ub-table td { padding: 8px 6px; }
.ub-matrix td.center input { width: 16px; height: 16px; cursor: pointer; }
/* 역할 권한: 같은 메뉴의 권한을 묶는 왼쪽 메뉴 칸(rowspan) */
.ub-matrix td.ub-matrix-menu { font-weight: 600; width: 200px; min-width: 110px; border-right: 1px solid var(--ub-line); background: var(--ub-surface-2); }
.ub-matrix td.ub-matrix-menu small { display: block; margin-top: 2px; font-weight: 400; }
.ub-mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; }
.ub-text-bad { color: var(--ub-bad); font-weight: 600; }
.ub-text-ok { color: var(--ub-ok); }
.ub-input.ub-inline { width: auto; min-width: 140px; }
.ub-input.ub-inline.small { min-width: 0; padding: 3px 6px; font-size: 13px; }
.ub-empty { text-align: center; color: var(--ub-muted); padding: 40px 16px; }
.ub-user-cell { display: flex; align-items: center; gap: 6px; }

.ub-filter-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.ub-filter-tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer;
    border: 1px solid var(--ub-border); border-radius: 999px; background: var(--ub-surface);
}
.ub-filter-tab.active { border-color: var(--ub-accent); background: var(--ub-accent-soft); color: var(--ub-accent); font-weight: 600; }
.ub-count { font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--ub-bg); color: var(--ub-muted); }
.ub-filter-tab.active .ub-count { background: var(--ub-surface); color: var(--ub-accent); }

.ub-modal.ub-modal-form { width: min(520px, 100%); }
.ub-confirm-text { margin: 0 0 12px; line-height: 1.6; }
.ub-menu-checklist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ub-menu-checklist .ub-help { margin-left: 4px; }
.ub-role-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.ub-role-choice {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; cursor: pointer;
    border: 1px solid var(--ub-border); border-radius: 8px;
}
.ub-role-choice.selected { border-color: var(--ub-accent); background: var(--ub-accent-soft); color: var(--ub-accent); font-weight: 600; }

/* 부서 관리 모달 */
.ub-dept-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.ub-dept-list li, .ub-dept-add { display: flex; gap: 6px; align-items: center; }
.ub-dept-list input.ub-input, .ub-dept-add input.ub-input { flex: 1; min-width: 0; }
.ub-dept-list .ub-badge { white-space: nowrap; }
/* 부서 트리: 깊이만큼 들여쓰기 + └ */
.ub-dept-list.tree li { padding-left: calc(var(--depth, 0) * 24px); }
.ub-dept-branch { flex: none; width: 14px; color: var(--ub-muted); text-align: center; }
.ub-dept-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 12px; }
.ub-dept-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }

/* ================= 사내정책 ================= */
.ub-policy .ub-card .ub-help { margin: 0 0 10px; line-height: 1.6; }
/* 휴가 박스 안의 월차·연차·보상휴가 묶음 */
.ub-policy-box { border: 1px solid var(--ub-line); border-radius: var(--ub-radius); padding: 14px 16px; background: var(--ub-surface-2); min-width: 0; }
.ub-policy-box .ub-card-head h3 { margin: 0 auto 0 0; font-size: 14px; color: var(--ub-text); }
/* 한 열에 박스 여러 개(월차 + 보상휴가) */
.ub-policy-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ub-policy-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ub-policy-fields:disabled { opacity: .55; }
.ub-policy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.ub-policy-sub { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ub-text); }
.ub-policy-num { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 사내정책 › 유류대 기준 */
.ub-policy-fuel { margin-top: 16px; }
.ub-policy-fuel-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.ub-policy-fuel-formula { margin: 8px 0; padding: 8px 12px; border-radius: var(--ub-radius); background: var(--ub-surface-2); font-size: 13px; line-height: 1.5; }
.ub-policy-num input.ub-input, .ub-policy-sentence input.ub-input { width: 64px; text-align: right; }
.ub-policy-sentence input.ub-input { width: 52px; }
.ub-policy-indent { padding-left: 24px; }
.ub-policy-sentence { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.ub-policy-preview { font-size: 12px; }
.ub-policy-preview th, .ub-policy-preview td { text-align: center; white-space: nowrap; padding: 4px 8px; }
.ub-policy-pay { margin-top: 16px; }
.ub-policy-pay > .ub-card-head { flex-wrap: wrap; gap: 8px; }
.ub-policy-pay > .ub-card-head h3 { white-space: nowrap; }
.ub-policy-formula { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--ub-line); border-radius: var(--ub-radius); background: var(--ub-surface); font-size: 13px; font-weight: 600; color: var(--ub-text); }
.ub-policy-sample { justify-content: flex-start; }
.ub-policy-sample .ub-policy-num input.ub-input { width: 130px; }
.ub-policy-worktypes { font-size: 13px; }
.ub-policy-worktypes th, .ub-policy-worktypes td { white-space: nowrap; padding: 6px 8px; vertical-align: middle; }
.ub-policy-worktypes input.ub-input { width: 72px; text-align: right; padding: 4px 6px; }
.ub-policy-worktypes td:first-child input.ub-input { width: 120px; text-align: left; }
.ub-policy-default td { color: var(--ub-muted); }
.ub-policy-pay > .ub-btn { margin-top: 10px; }
.ub-policy-warn { color: var(--ub-bad); margin-top: 8px; }
.ub-modal.ub-policy-basis-modal { width: min(760px, 100%); }
.ub-policy-basis td, .ub-policy-basis th { white-space: nowrap; }
.ub-policy-basis td:first-child { white-space: normal; }
.ub-policy-basis-sub { margin: 20px 0 6px; padding-top: 16px; border-top: 1px solid var(--ub-line); font-size: 15px; color: var(--ub-text); }
.ub-policy-wage td { white-space: normal; width: 50%; vertical-align: top; }
.ub-policy-basis-notes { margin: 12px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--ub-muted); }
.ub-policy-actions { margin-top: 16px; }
.ub-policy-actions > span:last-child { display: inline-flex; gap: 8px; }

/* ================= BMS 현장관리 ================= */
.ub-admin-subhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.ub-detail-title { margin: 0; font-size: 17px; }
.ub-row-link { cursor: pointer; }
.ub-row-link:hover td { background: var(--ub-accent-soft); }
.ub-form-grid > .ub-form-field.wide { grid-column: 1 / -1; }
.ub-form-grid > .ub-form-check { align-self: end; padding-bottom: 8px; }
.ub-form-check.small { font-size: 12px; margin-top: 4px; }
.ub-settings-title { margin: 20px 0 4px; font-size: 14px; color: var(--ub-text); }
.ub-group-card .ub-card-head h2 { margin-right: 0; }
.ub-block { margin-bottom: 12px; }
.ub-details { margin-top: 12px; border-top: 1px solid var(--ub-border); padding-top: 10px; }
.ub-details > summary { cursor: pointer; font-weight: 600; font-size: 13px; }

.ub-settings-editor { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.ub-settings-section h4 { margin: 0 0 6px; font-size: 12px; color: var(--ub-muted); text-transform: uppercase; letter-spacing: .4px; }
.ub-setting-row {
    display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 12px; align-items: center;
    padding: 6px 8px; border-radius: 6px;
}
.ub-setting-row:nth-child(even) { background: var(--ub-surface-2); }
.ub-setting-row.set { background: var(--ub-accent-soft); }
.ub-setting-name { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.ub-setting-value { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ub-setting-value > .ub-input, .ub-secret-input { flex: 1; min-width: 0; }
.ub-secret-input { display: flex; gap: 6px; align-items: center; }
.ub-inherited { color: var(--ub-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ub-admin.ub-wide { max-width: 1400px; }
/* SW 설치점검 화면 안의 템플릿 생성·관리(바깥 .ub-content가 이미 여백을 줌) */
.ub-admin.ub-template-manage { max-width: none; padding: 0; }
.ub-template-info { display: block; padding: 8px 0; color: var(--ub-muted); }
/* 주소 입력(우편번호 검색) */
.ub-address { display: flex; flex-direction: column; gap: 6px; }
.ub-address-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ub-address-row .ub-postal { width: 110px; flex: none; background: var(--ub-surface-2); }
.ub-postcode-layer { border: 1px solid var(--ub-border); border-radius: 6px; overflow: hidden; }
.ub-postcode-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 13px; color: var(--ub-muted); border-bottom: 1px solid var(--ub-border); }
.ub-postcode-frame { height: 420px; }
.ub-crumb { color: var(--ub-muted); font-weight: 500; margin-right: 4px; }
a.ub-crumb-link { text-decoration: none; }
a.ub-crumb-link:hover { color: var(--ub-accent); text-decoration: underline; }
.ub-detail-list { margin-bottom: 16px; }
.ub-search { min-width: 240px; }
.ub-inline-add { display: flex; gap: 6px; align-items: center; }
.ub-inline-add > .ub-input { flex: 1; min-width: 0; }
.ub-form-gap { margin-bottom: 14px; }
.ub-sub-tabs { border-bottom: 1px solid var(--ub-border); padding-bottom: 10px; }
.ub-inline-tabs { margin-bottom: 0; }
/* ---------- 작업 이력: 왼쪽 입력 폼 + 오른쪽 목록 ---------- */
.ub-works-layout { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 16px; align-items: start; }
.ub-works-layout.no-form { grid-template-columns: minmax(0, 1fr); }
.ub-works-list { min-width: 0; }
.ub-works-list > .ub-filter-tabs { margin-bottom: 10px; }
.ub-works-empty { border: 1px dashed var(--ub-border); border-radius: 8px; }
.ub-works-table td { vertical-align: top; }
.ub-work-summary { color: var(--ub-muted); font-size: 12px; margin-top: 2px; }
.ub-nowrap { white-space: nowrap; }
.ub-work-open-cell { width: 1%; text-align: right; }
.ub-work-open { padding: 1px 9px; font-size: 14px; }

.ub-work-form { border: 1px solid var(--ub-border); border-radius: 8px; background: var(--ub-surface-2); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ub-work-form[data-mode="edit"] { border-color: var(--ub-accent-border); box-shadow: inset 0 0 0 1px var(--ub-accent-border); }
.ub-work-form .ub-form { gap: 12px; }
.ub-work-form-head { display: flex; align-items: center; gap: 8px; }
.ub-work-form-head h3 { margin: 0; font-size: 15px; }
.ub-work-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ub-work-type { --wt: var(--ub-text); border: 1px solid var(--ub-border); border-radius: 6px; background: var(--ub-surface); color: var(--ub-text); font: inherit; font-size: 13px; padding: 7px 4px; cursor: pointer; }
.ub-work-type[data-type="install"] { --wt: var(--ub-accent); }
.ub-work-type[data-type="tbm"] { --wt: var(--ub-warn); }
.ub-work-type:hover { border-color: var(--wt); }
.ub-work-type.on { border-color: var(--wt); color: var(--wt); background: color-mix(in srgb, var(--wt) 12%, var(--ub-surface)); font-weight: 700; box-shadow: inset 0 0 0 1px var(--wt); }
.ub-work-type-help { margin: 0; }
.ub-work-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ub-work-chip { border: 1px solid var(--ub-border); border-radius: 999px; background: var(--ub-surface); color: var(--ub-text); font: inherit; font-size: 12px; padding: 4px 11px; cursor: pointer; }
.ub-work-chip:hover { border-color: var(--ub-accent); }
.ub-work-chip.on { border-color: var(--ub-accent); background: var(--ub-accent-soft); color: var(--ub-accent); font-weight: 600; }
.ub-work-billing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ub-work-amount { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 140px; }
.ub-work-amount input.ub-input { text-align: right; }
.ub-work-period { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.ub-work-items { border: 1px solid var(--ub-border); border-radius: 7px; background: var(--ub-surface); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.ub-work-items-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.ub-work-items-empty { margin: 0; }
.ub-work-item-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 62px 24px; gap: 6px; align-items: center; }
.ub-work-item-row input.ub-input { padding: 5px 7px; font-size: 13px; }
.ub-work-item-labels { font-size: 11px; color: var(--ub-muted); }
.ub-work-item-remove { border: 0; background: none; color: var(--ub-muted); font-size: 17px; line-height: 1; cursor: pointer; border-radius: 4px; padding: 2px 0; }
.ub-work-item-remove:hover { color: var(--ub-bad); background: var(--ub-surface-2); }
.ub-work-delete { margin-right: auto; }

/* 작업 화면: 내용 보기 · 수정 */
.ub-work-detail h4 { margin: 16px 0 6px; font-size: 14px; }
.ub-work-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.ub-work-facts dt { font-size: 12px; color: var(--ub-muted); }
.ub-work-facts dd { margin: 2px 0 0; font-weight: 600; }
.ub-work-text { margin: 0; white-space: pre-wrap; }
.ub-work-item-table { max-width: 720px; }
.ub-work-item-table tfoot td { font-weight: 700; border-top: 1px solid var(--ub-border); }
.ub-work-edit { max-width: 560px; }
/* 작업 = 프로젝트 작업 건: 입력폼의 계약 칸, 작업 화면의 계약·견적 상자, 코드 */
.ub-work-contract { border-top: 1px dashed var(--ub-border); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ub-work-contract-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-weight: 600; font-size: 13px; }
.ub-work-contract-head .ub-help { font-weight: 400; }
.ub-work-contract-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ub-work-contract-box { margin-top: 12px; }
.ub-work-contract-box .ub-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ub-work-contract-box h3 { margin: 14px 0 6px; font-size: 14px; }
.ub-work-contract-facts { margin-bottom: 4px; }
.ub-work-contract-facts dd.ub-negative { color: var(--ub-bad); }
.ub-work-code { margin-right: 6px; font-size: 12.5px; }
/* 현장의 프로젝트 · 고객사 */
.ub-site-owner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.ub-site-owner > small { grid-column: 1 / -1; }
@media (max-width: 720px) { .ub-site-owner, .ub-work-contract-grid { grid-template-columns: minmax(0, 1fr); } }
.ub-work-edit .ub-work-form { border: 0; background: none; padding: 0; box-shadow: none; }

.ub-work-date { white-space: nowrap; }

/* 작업 등록: 하드웨어는 품목관리 모델에서 찾아 고른다 */
.ub-item-picker { position: relative; }
.ub-item-picker-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
    background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); max-height: 280px; overflow: auto; }
.ub-item-picker-list li { display: flex; align-items: baseline; gap: 6px; padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 13px; min-width: 0; }
.ub-item-picker-list li.active { background: var(--ub-accent-soft); }
.ub-item-picker-list .cat { color: var(--ub-muted); font-size: 12px; flex: none; }
.ub-item-picker-list .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-item-picker-list .maker { color: var(--ub-muted); font-size: 12px; white-space: nowrap; }
.ub-item-picker-list .price { margin-left: auto; color: var(--ub-muted); font-size: 12px; white-space: nowrap; }
.ub-item-picker-list li.ub-item-picker-empty { cursor: default; color: var(--ub-muted); flex-wrap: wrap; }
.ub-work-item-row.picked { min-height: 30px; }
.ub-work-item-text { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ub-work-item-manual { margin-left: 4px; font-size: 11px; color: var(--ub-warn); }
/* 신규설치·TBM 납품: 단가 칸 + 합계 */
.ub-work-items.priced .ub-work-item-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 52px 96px 22px; }
.ub-work-item-row input.ub-input.ub-work-item-price { text-align: right; }
.ub-work-items-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; justify-content: flex-end; font-size: 13px;
    border-top: 1px dashed var(--ub-border); padding-top: 6px; }
.ub-work-items-total > span { color: var(--ub-muted); }
.ub-work-items-total .ub-work-item-manual { flex-basis: 100%; text-align: right; margin: 0; }
.ub-work-items-total.grand { border-top: 0; padding: 0 2px; font-size: 14px; }
.ub-work-items-total.grand strong { color: var(--ub-accent); }
.ub-work-fact-total dd { color: var(--ub-accent); }
.ub-work-item-table.priced { table-layout: fixed; width: 100%; }
.ub-work-item-table.priced th:nth-child(3) { width: 70px; }
.ub-work-item-table.priced th:nth-child(4), .ub-work-item-table.priced th:nth-child(5) { width: 130px; }
.ub-work-item-table.priced td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 재고/품목관리 ---------- */
.ub-inventory-tabs { margin-bottom: 12px; }
.ub-inventory-stock .ub-empty p { margin: 0 0 12px; }
.ub-catalog { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.ub-catalog > .ub-card { margin-bottom: 0; }
.ub-catalog-cats { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ub-catalog-cats-title { font-size: 13px; font-weight: 700; color: var(--ub-muted); display: flex; align-items: center; gap: 6px; }
.ub-catalog-cats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ub-catalog-cat { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid transparent; border-radius: 7px;
    background: none; color: var(--ub-text); font: inherit; font-size: 14px; padding: 7px 10px; cursor: pointer; text-align: left; }
.ub-catalog-cat:hover { background: var(--ub-surface-2); }
.ub-catalog-cat.active { background: var(--ub-accent-soft); border-color: var(--ub-accent-border); color: var(--ub-accent); font-weight: 700; }
.ub-catalog-cat-actions { display: flex; gap: 4px; justify-content: flex-end; padding: 2px 4px 4px; }
.ub-catalog-cat-edit, .ub-catalog-cat-new { display: flex; gap: 6px; align-items: center; }
.ub-catalog-cat-edit input.ub-input, .ub-catalog-cat-new input.ub-input { min-width: 0; flex: 1; padding: 5px 8px; font-size: 13px; }
.ub-catalog-cat-new { border-top: 1px solid var(--ub-line, var(--ub-border)); padding-top: 10px; }
.ub-catalog-models .ub-card-head { flex-wrap: wrap; gap: 8px; }
.ub-catalog-models .ub-card-head h2 { margin: 0; }
input.ub-input.ub-catalog-search { width: 240px; max-width: 100%; }
.ub-catalog-table td { vertical-align: top; }
.ub-catalog-spec { color: var(--ub-muted); font-size: 13px; }
.ub-catalog-price { font-weight: 600; white-space: nowrap; }
.ub-row-inactive td { opacity: .6; }
.ub-muted { color: var(--ub-muted); }

/* 행 아래로 펼치는 상세(열 때 미끄러져 내려오고, .closing이면 접힌다 — 길이는 ItemCatalog.SlideMs와 맞춘다) */
.ub-slide { display: grid; grid-template-rows: 1fr; animation: ub-slide-open .24s ease-out; }
.ub-slide > .ub-slide-inner { overflow: hidden; min-height: 0; }
.ub-slide.closing { animation: ub-slide-close .22s ease-in forwards; }
@keyframes ub-slide-open { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
@keyframes ub-slide-close { from { grid-template-rows: 1fr; opacity: 1; } to { grid-template-rows: 0fr; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ub-slide, .ub-slide.closing { animation-duration: 1ms; } }

.ub-catalog-chevron-col { width: 1%; text-align: center; }
.ub-catalog-chevron { color: var(--ub-muted); transition: transform .2s ease; vertical-align: middle; }
.ub-row-expanded .ub-catalog-chevron { transform: rotate(180deg); color: var(--ub-accent); }
.ub-catalog-table tr.ub-row-expanded td { background: var(--ub-accent-soft); border-bottom-color: transparent; }
.ub-catalog-table tr.ub-catalog-detail > td { padding: 0; background: var(--ub-accent-soft); }
.ub-catalog-detail .ub-item-panel { margin: 0 10px 12px; border: 1px solid var(--ub-accent-border); border-radius: 8px; background: var(--ub-surface); padding: 14px 16px; }
.ub-catalog-new { margin-bottom: 12px; }
.ub-catalog-new .ub-slide-inner > h3 { margin: 0 0 8px; font-size: 14px; }
.ub-catalog-new .ub-item-panel { border: 1px solid var(--ub-accent-border); border-radius: 8px; background: var(--ub-surface-2); padding: 14px 16px; }
.ub-item-panel { display: flex; flex-direction: column; }

/* 넓은 화면(목록 칸 1400px 이상 ≈ 화면 1800px 이상): 모델 정보를 왼쪽 좁은 칸에 세로로, 가격 이력은 오른쪽에 나란히.
   화면 폭이 아니라 목록 칸 폭(컨테이너)으로 판단한다 */
.ub-catalog-models { container: catalog / inline-size; }
@container catalog (min-width: 1400px) {
    .ub-item-panel-body { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 24px; align-items: start; }
    .ub-item-panel-info .ub-item-prices-summary { margin: 14px 0 0; }
    .ub-item-panel-info .ub-item-prices-summary strong { font-size: 15px; }
    .ub-item-panel-prices { border-left: 1px solid var(--ub-border); padding-left: 24px; min-width: 0; }
    .ub-item-panel-prices .ub-item-prices { gap: 24px; }

    /* 새 모델 입력(가격 이력 없음): 네 칸을 한 줄로, 메모 옆에 사용 스위치 */
    .ub-item-panel.no-prices .ub-item-panel-body { display: block; }
    .ub-item-panel.no-prices .ub-field-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ub-item-panel.no-prices .ub-item-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: end; }
    .ub-item-panel.no-prices .ub-item-form > * { grid-column: 1 / -1; }
    .ub-item-panel.no-prices .ub-item-form > label.ub-form-field { grid-column: 1; }
    .ub-item-panel.no-prices .ub-item-form > .ub-switch { grid-column: 2; margin-bottom: 9px; }
}
.ub-item-panel-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ub-border); }
.ub-item-form { gap: 10px; }

/* 비밀번호 확인 경고창 */
.ub-password-confirm-warn { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 14px; border-radius: 8px;
    background: var(--ub-bad-soft); border: 1px solid var(--ub-bad-border); color: var(--ub-bad); }
.ub-password-confirm-warn svg { flex: none; margin-top: 1px; }
.ub-password-confirm-warn p { margin: 0; color: var(--ub-text); line-height: 1.5; }
.ub-item-prices-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 12px; }
.ub-item-prices-summary > div { border: 1px solid var(--ub-border); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--ub-surface-2); }
.ub-item-prices-summary span { font-size: 12px; color: var(--ub-muted); }
.ub-item-prices-summary strong { font-size: 16px; }
.ub-item-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ub-item-price-col h3 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.ub-item-price-col[data-kind="purchase"] h3 { color: var(--ub-warn); }
.ub-item-price-col[data-kind="delivery"] h3 { color: var(--ub-accent); }
.ub-item-price-add { display: grid; grid-template-columns: 128px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-bottom: 8px; }
.ub-item-price-add input.ub-input { padding: 5px 7px; font-size: 13px; }
.ub-item-price-add input[name=note] { grid-column: 1 / 3; }
.ub-item-price-table td { vertical-align: top; font-size: 13px; }
.ub-item-price-table tr.latest td { background: var(--ub-accent-soft); }
.ub-item-price-diff { display: block; font-size: 11px; }
.ub-item-price-diff.up { color: var(--ub-bad); }
.ub-item-price-diff.down { color: var(--ub-ok); }
.ub-item-price-actions { width: 1%; }

/* BOM 관리 */
.ub-bom-item > span:first-child { display: flex; flex-direction: column; gap: 1px; }
.ub-bom-item small { font-weight: 400; }
.ub-bom-item.inactive { opacity: .6; }
.ub-bom-new { width: 100%; }
.ub-bom-editor { display: flex; flex-direction: column; gap: 12px; }
.ub-bom-editor .ub-card-head { margin-bottom: 0; }
.ub-bom-editor .ub-card-head h2 { margin: 0; }
.ub-bom-lines-title { margin: 4px 0 0; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.ub-bom-table td { vertical-align: top; }
input.ub-input.ub-bom-qty { width: 76px; padding: 4px 6px; text-align: right; }
.ub-bom-table tfoot td { font-weight: 700; border-top: 1px solid var(--ub-border); }
.ub-item-picker-bom .ub-badge { flex: none; }

@media (max-width: 900px) {
    .ub-catalog { grid-template-columns: minmax(0, 1fr); }
    .ub-catalog-cats { position: static; }
    .ub-item-prices { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .ub-item-prices-summary { grid-template-columns: minmax(0, 1fr); }
    .ub-item-price-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ub-item-price-add input[name=note] { grid-column: auto; }
}

@media (max-width: 1100px) {
    .ub-works-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .ub-works-table .ub-col-author { display: none; }
    .ub-work-date { white-space: normal; min-width: 84px; }
}

.ub-item-head.ub-item-head-plain { grid-template-columns: 32px 1fr 32px; }
.ub-readonly-pre { margin: 0; white-space: pre-wrap; font-family: inherit; color: var(--ub-text); }
.ub-step-summary { margin: 0; padding-left: 18px; color: var(--ub-muted); font-size: 12px; display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 720px) {
    .ub-setting-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 720px) {
    .ub-admin { padding: 16px; }
    .ub-home { padding: 24px 16px; }
    .ub-shell-company { display: none; }
    .ub-tile-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(150px, var(--ub-tile-min-m, 150px))), 1fr)); }
    .ub-tile { flex-direction: column; gap: 10px; padding: 14px; }
    .ub-tile-text { width: 100%; }
    .ub-tile-desc { display: none; }
}

/* ---------- BMS 현장관리: 목록 화면(왼쪽 새 현장 입력 + 오른쪽 목록) ---------- */
.ub-sites-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
.ub-sites-layout.no-form { grid-template-columns: minmax(0, 1fr); }
.ub-site-create { position: sticky; top: 8px; }
.ub-site-create .ub-form { gap: 12px; }
.ub-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ub-site-list > .ub-admin-subhead { margin-top: 0; }
.ub-row-new td { background: var(--ub-ok-soft); }

/* ---------- 현장 화면(왼쪽 현장상세 목록 + 오른쪽 내용) ---------- */
.ub-site-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.ub-section-nav { display: flex; flex-direction: column; gap: 4px; background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: 8px; padding: 8px; position: sticky; top: 8px; }
.ub-section-nav-title { font-size: 12px; font-weight: 600; color: var(--ub-muted); padding: 4px 8px 6px; }
.ub-section-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left;
    padding: 9px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; font: inherit; color: inherit; }
.ub-section-item:hover { background: var(--ub-accent-soft); }
.ub-section-item.active { background: var(--ub-accent-soft); border-color: var(--ub-accent); color: var(--ub-accent); font-weight: 600; }
.ub-section-item.inactive .ub-section-name { color: var(--ub-muted); text-decoration: line-through; }
.ub-section-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-section-status { display: flex; gap: 4px; flex: none; }
.ub-section-add { margin-top: 6px; justify-content: center; }
.ub-section-main { min-width: 0; }
.ub-section-head { margin-top: 0; }
.ub-dashboard-blank { min-height: 240px; }

/* 현장 정보: 왼쪽 입력 + 오른쪽 지도 */
.ub-site-info-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.ub-site-info-body > .ub-form-grid { grid-template-columns: 1fr 1fr; align-content: start; }
.ub-site-map { display: flex; flex-direction: column; border: 1px solid var(--ub-border); border-radius: 8px; overflow: hidden; min-height: 340px; }
.ub-site-map-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; font-size: 13px; font-weight: 600; color: var(--ub-muted); border-bottom: 1px solid var(--ub-border); }
.ub-site-map-frame { flex: 1; width: 100%; min-height: 300px; border: 0; display: block; }
.ub-site-map-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--ub-muted); font-size: 13px; background: var(--ub-accent-soft); }
.ub-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: var(--ub-muted); border: 1px solid transparent; }
.ub-icon-btn:hover { color: var(--ub-accent); background: var(--ub-accent-soft); border-color: var(--ub-border); }
/* 지도 왼쪽 회색 세로선으로 입력과 구분 */
.ub-site-map-col { display: flex; flex-direction: column; border-left: 1px solid var(--ub-border); padding-left: 20px; }
.ub-site-map-col > .ub-site-map { flex: 1; }
@media (max-width: 1100px) {
    .ub-site-info-body { grid-template-columns: minmax(0, 1fr); }
    .ub-site-map-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--ub-border); padding-top: 16px; }
}

/* 현장 삭제(설명 아래) */
.ub-site-delete { flex-direction: row; justify-content: flex-start; }

/* 토글 스위치(켜짐 = 사용) */
.ub-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 14px; }
.ub-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ub-switch-track { position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--ub-switch-off); transition: background .15s; flex: none; }
.ub-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.ub-switch input:checked + .ub-switch-track { background: var(--ub-accent); }
.ub-switch input:checked + .ub-switch-track::after { transform: translateX(18px); }
.ub-switch input:focus-visible + .ub-switch-track { outline: 2px solid var(--ub-accent); outline-offset: 2px; }
.ub-switch input:disabled + .ub-switch-track { opacity: .5; }
.ub-switch:has(input:disabled) { cursor: default; }
.ub-switch-label { min-width: 3em; }

@media (max-width: 900px) {
    .ub-sites-layout, .ub-site-layout { grid-template-columns: minmax(0, 1fr); }
    .ub-site-create, .ub-section-nav { position: static; }
}

/* 현장 화면 머리: 주소·등록일은 오른쪽(기본설정 아이콘 왼쪽) */
.ub-site-meta { text-align: right; }
.ub-btn.ub-icon-only { padding: 6px 8px; line-height: 0; }

/* 현장상세 정보: 오른쪽 요약 */
.ub-section-info { margin-bottom: 12px; }
.ub-section-summary { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-content: start; }
.ub-section-summary > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--ub-border); border-radius: 8px; }
.ub-section-summary dt { font-size: 12px; color: var(--ub-muted); }
.ub-section-summary dd { margin: 0; font-size: 18px; font-weight: 600; }
.ub-section-summary dd.ub-section-status { font-size: 13px; font-weight: 500; }

/* ---------- 도면관리(왼쪽 고객사 → 현장 → 현장상세 트리 + 오른쪽 검색·목록) ---------- */
.ub-dwgm-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.ub-dwgm-tree { max-height: calc(100vh - 160px); overflow-y: auto; gap: 2px; }
.ub-dwgm-node { display: flex; align-items: center; gap: 2px; }
.ub-dwgm-node > .ub-section-item { flex: 1; min-width: 0; padding: 7px 8px; }
.ub-dwgm-node.level-1 { padding-left: 16px; }
.ub-dwgm-node.level-2 { padding-left: 50px; }
.ub-dwgm-caret { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ub-muted); cursor: pointer; font-size: 11px; }
.ub-dwgm-caret:hover { background: var(--ub-accent-soft); color: var(--ub-accent); }
.ub-dwgm-tree-empty { padding: 4px 8px; margin: 0; }
.ub-dwgm-show-empty { padding: 8px 8px 2px; margin-top: 6px; border-top: 1px solid var(--ub-border); }
.ub-dwgm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ub-dwgm-search { flex: 1 1 260px; max-width: 420px; }
.ub-dwgm-toolbar .ub-drawing-upload { display: inline-flex; align-items: center; }
.ub-dwgm-scope { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ub-dwgm-file strong { word-break: break-all; }
.ub-dwgm-loc { font-size: 13px; }
.ub-dwgm-crumb { border: 0; background: transparent; padding: 0; font: inherit; color: var(--ub-text); cursor: pointer; }
.ub-dwgm-crumb:hover { color: var(--ub-accent); text-decoration: underline; }
.ub-dwgm-loc .ub-crumb { margin: 0 2px; }
.ub-dwgm-more { display: flex; justify-content: center; padding: 10px; }
@media (max-width: 900px) {
    .ub-dwgm-layout { grid-template-columns: minmax(0, 1fr); }
    .ub-dwgm-tree { position: static; max-height: 320px; }
}

/* ---------- 도면 상자 ---------- */
.ub-drawings { margin-bottom: 12px; }
.ub-drawings-empty { margin: 4px 0; }
.ub-drawing-upload { cursor: pointer; position: relative; }
.ub-drawing-upload.disabled { opacity: .5; pointer-events: none; }
.ub-hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.ub-row-selected td { background: var(--ub-accent-soft); }
.ub-dwg-wrap { margin-top: 12px; border: 1px solid var(--ub-border); border-radius: 8px; overflow: hidden; background: var(--ub-surface); display: flex; flex-direction: column; }
.ub-dwg-wrap[hidden] { display: none; }
.ub-dwg-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--ub-border); }
.ub-dwg-stage { position: relative; }
.ub-dwg-host { position: relative; height: 560px; min-height: 300px; overflow: hidden; }   /* 겹침 상자가 도면 밖으로 나가지 않게 */
.ub-dwg-host.ub-dwg-selecting, .ub-dwg-host.ub-dwg-selecting canvas { cursor: crosshair; }
/* 세트 범위: 다른 글자 자리를 파낸 꺾은선(SVG) + 이름표, 안쪽 점선 = 그룹. 세트마다 색(c0~c5) */
.ub-dwg-set, .ub-dwg-set-group, .ub-dwg-set-label { position: absolute; pointer-events: none; z-index: 1; }
.ub-dwg-set, .ub-dwg-set-group { overflow: visible; }
.ub-dwg-set path { fill: var(--set); fill-opacity: .1; stroke: var(--set); stroke-width: 2; stroke-linejoin: round; }
.ub-dwg-set-group path { fill: none; stroke: var(--set); stroke-width: 1; stroke-dasharray: 4 3; }
.ub-dwg-set-label { transform: translateY(calc(-100% - 2px)); padding: 1px 6px; border-radius: 3px;
    background: var(--set); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ub-dwg-set-label.tiny { display: none; }
.ub-dwg-set.c0, .ub-dwg-set-group.c0, .ub-dwg-set-label.c0 { --set: #e8590c; }
.ub-dwg-set.c1, .ub-dwg-set-group.c1, .ub-dwg-set-label.c1 { --set: #1c7ed6; }
.ub-dwg-set.c2, .ub-dwg-set-group.c2, .ub-dwg-set-label.c2 { --set: #2f9e44; }
.ub-dwg-set.c3, .ub-dwg-set-group.c3, .ub-dwg-set-label.c3 { --set: #ae3ec9; }
.ub-dwg-set.c4, .ub-dwg-set-group.c4, .ub-dwg-set-label.c4 { --set: #e03131; }
.ub-dwg-set.c5, .ub-dwg-set-group.c5, .ub-dwg-set-label.c5 { --set: #0c8599; }
.ub-dwg-sets-toggle { font-size: 13px; }
.ub-dwg-box { position: absolute; border: 1.5px dashed var(--ub-accent); background: rgba(76, 141, 255, .12); pointer-events: none; z-index: 2; }
.ub-dwg-select-btn { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1px solid var(--ub-border); background: var(--ub-surface); color: var(--ub-muted); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
/* 박스 선택 중 기능 번호(1 캡처 · 2 세트 묶기 · 3 객체 보기) — 선택 아이콘 왼쪽 */
.ub-dwg-modes { position: absolute; right: 60px; bottom: 16px; z-index: 3; display: flex; gap: 4px; padding: 3px; border-radius: 8px;
    background: var(--ub-surface); border: 1px solid var(--ub-border); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.ub-dwg-mode { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--ub-muted); border-radius: 6px;
    padding: 3px 8px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ub-dwg-mode:hover { color: var(--ub-accent); }
.ub-dwg-mode.active { background: var(--ub-accent); color: #fff; }
.ub-dwg-mode-no { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px;
    border: 1px solid currentColor; font-size: 10px; font-weight: 700; }
/* 시험용 박스 안 객체 목록(오른쪽 겹침) */
.ub-dwg-objects { position: absolute; right: 0; top: 0; bottom: 64px; z-index: 3; width: 320px; max-width: 45%; display: flex; flex-direction: column;
    background: var(--ub-surface); border-left: 1px solid var(--ub-border); box-shadow: -2px 0 8px rgba(0, 0, 0, .08); }
.ub-dwg-objects-more { margin: 6px 10px 0; }
.ub-dwg-objects-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; }
.ub-dwg-objects-list li { display: flex; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--ub-border); }
.ub-dwg-obj-shape { flex: none; width: 56px; height: 56px; border: 1px solid var(--ub-border); border-radius: 6px; background: #fff; color: #111;
    display: flex; align-items: center; justify-content: center; }
.ub-dwg-obj-shape svg { width: 100%; height: 100%; }
.ub-dwg-obj-glyph { font-size: 20px; font-weight: 700; color: var(--ub-muted); }
.ub-dwg-obj-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.ub-dwg-obj-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-dwg-obj-meta { font-size: 11px; }
/* 잠깐 보였다 사라지는 알림(도면 위 가운데) */
.ub-toast { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 5; max-width: 80%; padding: 8px 14px; border-radius: 8px;
    background: rgba(20, 24, 32, .9); color: #fff; font-size: 13px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); pointer-events: none; }
.ub-dwg-select-btn:hover { color: var(--ub-accent); border-color: var(--ub-accent); }
.ub-dwg-select-btn.active { background: var(--ub-accent); border-color: var(--ub-accent); color: #fff; }
/* 도면 위 왼쪽 겹침 패널: [캡처 이미지 목록] [추출 글자] */
.ub-dwg-panel { position: absolute; left: 0; top: 0; bottom: 0; z-index: 3; display: flex; max-width: calc(100% - 70px);
    background: var(--ub-surface); border-right: 1px solid var(--ub-border); box-shadow: 4px 0 14px rgba(0, 0, 0, .12); }
.ub-dwg-panel.collapsed { background: transparent; border: 0; box-shadow: none; bottom: auto; padding: 8px; }
.ub-dwg-panel-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--ub-border); font-size: 13px; position: sticky; top: 0; background: var(--ub-surface); z-index: 1; }
.ub-dwg-panel-toggle { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--ub-border); background: var(--ub-surface); color: var(--ub-muted); cursor: pointer; line-height: 1; font-size: 16px; }
.ub-dwg-panel-toggle:hover { color: var(--ub-accent); border-color: var(--ub-accent); }
.ub-dwg-shots { width: 170px; flex: none; overflow-y: auto; display: flex; flex-direction: column; }
.ub-dwg-shots-empty { padding: 8px 10px; font-size: 12px; }
.ub-dwg-shot { position: relative; margin: 8px 8px 0; border: 1px solid var(--ub-border); border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--ub-surface-2); }
.ub-dwg-shot:last-child { margin-bottom: 8px; }
.ub-dwg-shot:hover { border-color: var(--ub-accent); }
.ub-dwg-shot.active { border-color: var(--ub-accent); box-shadow: 0 0 0 2px var(--ub-accent); }
.ub-dwg-shot img { display: block; width: 100%; height: 96px; object-fit: contain; background: #fff; }
.ub-dwg-shot-meta { display: block; padding: 3px 6px; font-size: 11px; color: var(--ub-muted); }
.ub-dwg-shot-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 4px; border: 0; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; line-height: 1; opacity: 0; }
.ub-dwg-shot:hover .ub-dwg-shot-del { opacity: 1; }
.ub-dwg-shot-pending { margin: 8px; padding: 10px; border: 1px dashed var(--ub-accent); border-radius: 6px; font-size: 12px; color: var(--ub-accent); }
.ub-dwg-texts { width: 460px; flex: none; overflow-y: auto; overflow-x: hidden; border-left: 1px solid var(--ub-border); }
.ub-dwg-texts .ub-table { font-size: 12px; }
.ub-dwg-texts .ub-help { padding: 0 10px; }
.ub-dwg-text-actions { width: 28px; text-align: right; padding-right: 6px !important; }
.ub-dwg-text-del { visibility: hidden; width: 22px; height: 22px; border-radius: 4px; border: 0; background: transparent; color: var(--ub-bad); cursor: pointer; font-size: 16px; line-height: 1; }
.ub-dwg-texts tbody tr:hover .ub-dwg-text-del { visibility: visible; }
.ub-dwg-text-del:hover { background: var(--ub-bad-soft); }
.ub-dwg-coords { padding: 6px 10px; font-size: 11px; color: var(--ub-muted); border-bottom: 1px solid var(--ub-line); }
.ub-dwg-wrap:fullscreen .ub-dwg-stage { flex: 1; display: flex; flex-direction: column; }
.ub-dwg-wrap:fullscreen .ub-dwg-host { height: auto; flex: 1; }
.ub-dwg-status { padding: 10px 12px; color: var(--ub-muted); font-size: 13px; }

/* 캡처 위치 깜빡임 */
.ub-dwg-flash { position: absolute; z-index: 2; pointer-events: none; border: 2px solid #ff5a1f; background: rgba(255, 90, 31, .18);
    border-radius: 2px; animation: ub-dwg-flash .4s ease-in-out 6 alternate; }
@keyframes ub-dwg-flash { from { opacity: 1; } to { opacity: .1; } }

/* 추출 글자 필터 */
.ub-dwg-filter-btn { position: relative; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--ub-border); background: var(--ub-surface);
    color: var(--ub-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ub-dwg-filter-btn:hover { color: var(--ub-accent); border-color: var(--ub-accent); }
.ub-dwg-filter-btn.active { color: #fff; background: var(--ub-accent); border-color: var(--ub-accent); }
.ub-dwg-filter-btn.open { box-shadow: 0 0 0 2px var(--ub-accent-soft); }
.ub-dwg-filter-count { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ub-bad);
    color: #fff; font-size: 10px; line-height: 16px; text-align: center; box-sizing: border-box; }
.ub-dwg-filter { border-bottom: 1px solid var(--ub-border); padding: 8px 10px; background: var(--ub-surface-2); font-size: 12px; }
.ub-dwg-filter-title { font-weight: 600; }
.ub-dwg-filter-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ub-dwg-bulk { font-size: 12px; gap: 6px; }
.ub-dwg-bulk .ub-switch-track { width: 32px; height: 18px; }
.ub-dwg-bulk .ub-switch-track::after { width: 12px; height: 12px; }
.ub-dwg-bulk input:checked + .ub-switch-track::after { transform: translateX(14px); }
.ub-dwg-filter-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-dwg-filter ul { list-style: none; margin: 0; padding: 0; }
.ub-dwg-filter li { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 4px; }
.ub-dwg-filter li:hover { background: var(--ub-accent-soft); }
.ub-dwg-filter li .ub-badge { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.ub-dwg-filter li button { width: 20px; height: 20px; border: 0; border-radius: 4px; background: transparent; color: var(--ub-bad); cursor: pointer; font-size: 15px; line-height: 1; }
.ub-dwg-filter li button:hover { background: var(--ub-bad-soft); }

/* 추출 글자 그룹: 머리(키·개수·+속성) / 속성 줄([개수][Single/Dual][배터리 구성]) / 항목 */
.ub-tg { border-bottom: 1px solid var(--ub-border); }
.ub-tg-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--ub-surface-2); font-size: 13px; }
.ub-tg-key { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-tg-add { border: 1px solid var(--ub-border); background: var(--ub-surface); color: var(--ub-accent); border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ub-tg-add:hover { border-color: var(--ub-accent); }
.ub-tg-attrs { padding: 4px 10px 6px; display: flex; flex-direction: column; gap: 4px; }
.ub-tg-attr { display: flex; align-items: center; gap: 6px; }
.ub-tg-attr .ub-input { padding: 3px 6px; font-size: 12px; height: auto; }
.ub-tg-attr .ub-tg-count { width: 58px; flex: none; }
.ub-tg-attr .ub-tg-kind { width: 82px; flex: none; }
.ub-tg-attr .ub-tg-model { width: 74px; flex: none; }
.ub-tg-attr .ub-tg-battery { width: auto; flex: 1; min-width: 0; }
.ub-tg-del { width: 20px; height: 20px; border: 0; border-radius: 4px; background: transparent; color: var(--ub-bad); cursor: pointer; font-size: 15px; line-height: 1; flex: none; }
.ub-tg-del:hover { background: var(--ub-bad-soft); }
.ub-tg-warn { font-size: 11px; color: var(--ub-warn); }
.ub-tg .ub-table { font-size: 12px; margin: 0; }

/* ---------- 랙 구성: 단위(캡처) 목록 / 왼쪽 글자 그룹 + 오른쪽 랙 그림 ---------- */
.ub-rack { margin-bottom: 12px; }
.ub-rack-empty { margin: 4px 0; }
/* 캡처 단위는 한 줄로, 넘치면 가로 스크롤 */
.ub-rack-dwgs { display: flex; flex-wrap: nowrap; gap: 12px; padding-bottom: 4px; margin-bottom: 9px; overflow-x: auto; overscroll-behavior-x: contain; }
/* 스크롤바: 얇고 어둡게, 마우스가 들어왔을 때만 보임(자리는 늘 잡아 두어 내용이 흔들리지 않게).
   크롬은 부모 :hover만으로는 스크롤바를 다시 그리지 않아서, 막대는 글자색(currentColor)으로 칠하고 hover 때 글자색을 바꾼다.
   안의 내용은 글자색을 원래대로 돌려 둔다. */
.ub-rack-dwgs { color: transparent; transition: color .15s; }
.ub-rack-dwgs > * { color: var(--ub-text); }
.ub-rack-dwgs:hover { color: rgba(55, 65, 81, .75); }
:root[data-theme="dark"] .ub-rack-dwgs:hover { color: rgba(156, 163, 175, .7); }
.ub-rack-dwgs::-webkit-scrollbar { height: 6px; }
.ub-rack-dwgs::-webkit-scrollbar-track { background: transparent; }
.ub-rack-dwgs::-webkit-scrollbar-thumb { border-radius: 3px; box-shadow: inset 0 0 0 6px; }
@supports not selector(::-webkit-scrollbar) {
    /* 파이어폭스 등: 표준 속성으로 */
    .ub-rack-dwgs { scrollbar-width: thin; scrollbar-color: transparent transparent; }
    .ub-rack-dwgs:hover { scrollbar-color: rgba(55, 65, 81, .75) transparent; }
    :root[data-theme="dark"] .ub-rack-dwgs:hover { scrollbar-color: rgba(156, 163, 175, .7) transparent; }
}
.ub-rack-dwg { flex: none; border: 1px solid var(--ub-border); border-radius: 10px; padding: 8px 10px 10px; background: var(--ub-surface); }
.ub-rack-dwg.multi { border-style: dashed; }
.ub-rack-dwg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.ub-rack-dwg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ub-rack-units { display: flex; flex-wrap: nowrap; gap: 10px; padding: 2px; }
.ub-rack-unit-room { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ub-accent); }
/* 배터리 구성 위: 단위의 배터리실 이름 */
.ub-rack-room { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--ub-border); font-size: 13px; }
.ub-rack-room > span { flex: none; font-weight: 600; }
input.ub-input.ub-rack-room-input { flex: 1; min-width: 0; width: auto; }
/* 작업 이력 · 서버·설정 상자 안의 카드는 테두리만 가볍게 */
.ub-box-body > :first-child { margin-top: 0; }
.ub-box-settings .ub-card, .ub-box-works .ub-card { box-shadow: none; }
/* 서버점검: 실장도 서버 카드(점검 문서 상태 딱지) */
.ub-srv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ub-srv-card { border: 1px solid var(--ub-border); border-radius: 8px; background: var(--ub-surface); padding: 10px 12px; font-size: 13px; min-width: 0; }
.ub-srv-card[data-status="Done"] { border-color: var(--ub-ok, #16a34a); }
.ub-srv-card[data-status="InProgress"] { border-color: var(--ub-accent); }
.ub-srv-card-head { display: flex; align-items: center; gap: 6px; }
.ub-srv-card-host { margin: 4px 0 8px; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-srv-card-host.none { color: var(--ub-muted); font-weight: 500; font-size: 13px; }
.ub-srv-card-info { margin: 0; display: grid; gap: 3px; }
.ub-srv-card-info > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 6px; }
.ub-srv-card-info dt { color: var(--ub-muted); }
.ub-srv-card-info dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-srv-card-info > div.test dd { color: var(--ub-muted); }
.ub-srv-empty { margin: 0; }
/* 서버점검 그룹 묶기: 도구 줄, 그룹 상자(배터리 모델), 고르는 중인 카드 */
.ub-srv-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; margin-bottom: 10px; border: 1px solid var(--ub-border); border-radius: 8px; background: var(--ub-surface-2); font-size: 13px; }
.ub-srv-model { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
select.ub-input.ub-srv-model-select, select.ub-input.ub-srv-template-select { width: auto; padding: 2px 8px; font-size: 13px; }
select.ub-input.ub-srv-template-select { max-width: 260px; }
/* SW 설치점검 [현장·서버]: 그룹 머리의 템플릿 + 그룹 전체 선택/해제 */
.ub-group-picks { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; font-weight: 400; }
.ub-srv-group { border: 1.5px solid var(--ub-accent); border-radius: 8px; padding: 0 10px 10px; margin-bottom: 10px; }
.ub-srv-group.ungrouped { border: 0; padding: 0; }
.ub-srv-group-head { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; }
.ub-srv-group.ungrouped .ub-srv-group-head { padding-top: 4px; color: var(--ub-muted); }
.ub-srv-card.picking { cursor: pointer; user-select: none; }
.ub-srv-card.picking:hover { border-color: var(--ub-accent); }
.ub-srv-card.selected { border-color: var(--ub-accent); box-shadow: inset 0 0 0 1px var(--ub-accent); background: var(--ub-accent-soft); }
.ub-srv-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1.5px solid var(--ub-border); border-radius: 4px; font-size: 11px; color: #fff; background: var(--ub-surface); }
.ub-srv-card.selected .ub-srv-check { background: var(--ub-accent); border-color: var(--ub-accent); }
.ub-rack-unit { position: relative; flex: none; width: 168px; border: 1px solid var(--ub-border); border-radius: 8px; background: var(--ub-surface-2); cursor: pointer; overflow: hidden; }
.ub-rack-unit:hover { border-color: var(--ub-accent); }
.ub-rack-unit.active { border-color: var(--ub-accent); box-shadow: 0 0 0 2px var(--ub-accent); }
.ub-rack-unit.picked { border-color: var(--ub-ok); box-shadow: 0 0 0 2px var(--ub-ok); }
.ub-rack-unit.disabled { opacity: .45; cursor: default; }
.ub-rack-thumbs { display: flex; height: 84px; background: #fff; }
.ub-rack-thumbs img { flex: 1; min-width: 0; height: 100%; object-fit: contain; }
.ub-rack-unit.merged .ub-rack-thumbs img + img { border-left: 1px dashed var(--ub-border); }
.ub-rack-unit-meta { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 6px; font-size: 12px; }
.ub-rack-unit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ub-rack-pick { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; pointer-events: none; }
.ub-rack-unmerge { position: absolute; top: 6px; right: 38px; padding: 2px 8px; font-size: 11px; }
/* 캡처 크게 보기(마우스를 올리면 오른쪽 위에) */
.ub-rack-zoom { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 1px solid var(--ub-border); border-radius: 6px; background: var(--ub-surface); color: var(--ub-text); cursor: pointer;
    opacity: 0; transition: opacity .12s; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.ub-rack-unit:hover .ub-rack-zoom, .ub-rack-zoom:focus-visible { opacity: 1; }
.ub-rack-zoom:hover { color: var(--ub-accent); border-color: var(--ub-accent); }

/* 떠 있는 이미지 창: 처음엔 화면의 70% 정가운데, 머리 줄로 이동, 오른쪽 아래 모서리로 크기 조절 */
.ub-fwin { position: fixed; left: 15vw; top: 15vh; width: 70vw; height: 70vh; min-width: 280px; min-height: 180px; max-width: 100vw; max-height: 100vh;
    z-index: 110; display: flex; flex-direction: column; background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: 10px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .35); resize: both; overflow: hidden; outline: none; }
.ub-fwin-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--ub-border);
    background: var(--ub-surface-2); cursor: move; user-select: none; touch-action: none; flex: none; }
.ub-fwin-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-fwin-close { width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--ub-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.ub-fwin-close:hover { background: var(--ub-accent-soft); color: var(--ub-accent); }
.ub-fwin-zoom { font-size: 12px; color: var(--ub-muted); min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
.ub-fwin-btn { min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid var(--ub-border); border-radius: 6px; background: var(--ub-surface);
    color: var(--ub-text); font-size: 15px; line-height: 1; cursor: pointer; }
.ub-fwin-btn.wide { font-size: 12px; padding: 0 10px; }
.ub-fwin-btn:hover { color: var(--ub-accent); border-color: var(--ub-accent); }
/* 본문: 끌어서 이동, 휠로 확대·축소(무대 전체를 transform) */
.ub-fwin-body { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #fff; cursor: grab; touch-action: none; user-select: none; }
.ub-fwin-body.panning { cursor: grabbing; }
.ub-fwin-stage { position: absolute; inset: 0; display: flex; gap: 8px; padding: 10px; box-sizing: border-box; transform-origin: 0 0; will-change: transform; }
.ub-fwin-stage img { flex: 1; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ub-fwin-stage img + img { border-left: 1px dashed #ccc; padding-left: 8px; }
/* 배터리 구성 | 실장도 표 | 랙 그림 */
.ub-rack-body { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 12px; align-items: stretch; }
/* 배터리 구성 높이 = 실장도 높이: 자기 내용 높이는 줄 높이에 넣지 않고(contain: size) 줄 높이(실장도가 정함)만큼 늘어나 넘치면 스크롤 */
.ub-rack-groups { border: 1px solid var(--ub-border); border-radius: 8px; overflow-y: auto; overflow-x: hidden; contain: size; min-height: 320px; }
.ub-rack-body > .ub-rack-sheet { align-self: start; }
/* 배터리 구성 기본 옵션(설정 아이콘으로 전환) */
.ub-rack-options { padding: 10px 12px 14px; font-size: 13px; }
.ub-rack-opt-title { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--ub-border); }
.ub-rack-opt-title-next { margin-top: 18px; }
.ub-rack-opt-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 8px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--ub-border); }
.ub-rack-opt-label { font-weight: 600; }
.ub-rack-opt-fields { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ub-rack-opt-field { display: inline-flex; align-items: center; gap: 4px; }
.ub-rack-opt-note { grid-column: 2; }
.ub-rack-opt-prefix { font-family: var(--ub-mono, monospace); font-size: 12px; color: var(--ub-muted); }
input.ub-input.ub-rack-opt-subnet { width: 110px; }
input.ub-input.ub-rack-opt-num { width: 64px; }
input.ub-input.ub-rack-opt-text { width: 84px; }
input.ub-input.ub-rack-opt-text.wide { width: 110px; }
/* 배터리 세트 묶음(2세트 = 서버 1대) */
.ub-tg-room { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ub-tg-room > span { flex: none; font-weight: 600; }
input.ub-input.ub-tg-room-input { flex: 1; min-width: 0; width: auto; padding: 3px 8px; font-size: 13px; }
.ub-tg-pairbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--ub-border); background: var(--ub-surface-2); font-size: 12px; }
.ub-tg-modelbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--ub-border); background: var(--ub-surface-2); font-size: 12px; }
select.ub-input.ub-tg-model-bulk { width: 90px; flex: none; padding: 3px 6px; font-size: 12px; height: auto; }
.ub-badge.ub-tg-seg-model.none { opacity: .6; }
.ub-tg-pair { margin: 8px; border: 1.5px solid var(--ub-accent); border-radius: 8px; overflow: hidden; }
.ub-tg-pair-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--ub-accent-soft); font-size: 12px; }
.ub-tg-pair .ub-tg:last-child { border-bottom: 0; }
.ub-tg-pair.single { border-style: dashed; }
/* 서버 상자 머리의 내부 IP(옵션 2 내부 IP 규칙, 테스트용) */
.ub-tg-server-ip { font-size: 12px; font-weight: 600; color: var(--ub-text); padding: 1px 6px; border: 1px dashed var(--ub-accent); border-radius: 6px; background: var(--ub-surface); }
.ub-tg-pick { border: 1px solid var(--ub-border); background: var(--ub-surface); color: var(--ub-muted); border-radius: 6px; padding: 1px 8px; font-size: 11px; cursor: pointer; }
.ub-tg-pick:hover, .ub-tg-pick.active { color: var(--ub-accent); border-color: var(--ub-accent); }
.ub-tg.picking { box-shadow: inset 3px 0 0 var(--ub-accent); }
.ub-tg-missing { padding: 6px 10px; margin: 0; }
/* 보기 전용 배터리 구성: 속성 줄 개수만큼 항목을 나눈 부분마다 속성 표시 */
.ub-tg-seg + .ub-tg-seg { border-top: 1px dashed var(--ub-border); }
.ub-tg-seg-attr { display: flex; align-items: center; gap: 6px; padding: 6px 10px 2px 10px; font-size: 12px; }
/* 열 너비를 고정해 부분·그룹이 달라도 번호·내용·IP가 같은 세로선에 맞도록 */
.ub-tg.readonly .ub-table { table-layout: fixed; width: 100%; }
.ub-tg.readonly .ub-table td { padding: 4px 10px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-tg.readonly .ub-table td.num { width: 44px; text-align: right; color: var(--ub-muted); }
.ub-tg.readonly .ub-table td.ub-tg-ip { width: 120px; }
.ub-tg-seg-count { color: var(--ub-muted); }
.ub-tg-seg-battery { font-weight: 600; }
.ub-rack-opt-warn { margin: 10px 0 0; color: var(--ub-bad); font-size: 12px; }
.ub-rack-canvas {border: 1px dashed var(--ub-border); border-radius: 8px; min-height: 420px; display: flex; align-items: center; justify-content: center; background: var(--ub-surface-2); }
@media (max-width: 900px) { .ub-rack-body { grid-template-columns: minmax(0, 1fr); } .ub-rack-groups { contain: none; max-height: 640px; } }
/* 실장도 표: 칸은 입력(테두리 없이), 고친 칸은 노란 바탕 */
.ub-rack-sheet { border: 1px solid var(--ub-border); border-radius: 8px; overflow: hidden; min-width: 0; }
.ub-sheet-body { padding: 10px; overflow-x: auto; }
.ub-sheet-heading { width: 100%; box-sizing: border-box; border: 1px solid var(--ub-border); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px;
    font-size: 14px; font-weight: 700; background: var(--ub-surface-2); color: var(--ub-text); }
.ub-sheet-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.ub-sheet-table th { background: #1f3864; color: #fff; font-weight: 600; padding: 4px 6px; border: 1px solid #8ea0c4; }
.ub-sheet-table th:nth-child(1) { width: 10%; } .ub-sheet-table th:nth-child(2) { width: 17%; } .ub-sheet-table th:nth-child(3) { width: 12%; }
.ub-sheet-table th:nth-child(4) { width: 11%; } .ub-sheet-table th:nth-child(5) { width: 17%; }
.ub-sheet-table td { border: 1px solid var(--ub-border); padding: 0; vertical-align: middle; text-align: center; }
.ub-sheet-cell { display: block; width: 100%; box-sizing: border-box; border: 0; background: transparent; color: var(--ub-text); font: inherit;
    text-align: center; padding: 3px 4px; resize: none; overflow: hidden; }
textarea.ub-sheet-cell { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; field-sizing: content; min-height: 1.6em; }
.ub-sheet-cell:focus { outline: 2px solid var(--ub-accent); outline-offset: -2px; background: var(--ub-surface); }
/* 실장도 스위치별 연한 배경색: 스위치 줄과 그 스위치에 물린 BMS·세트 비고가 같은 색(반투명이라 밝은/어두운 테마·출력 모두) */
.ub-sw-tone-0 > td { background: rgba(59, 130, 246, .12); }
.ub-sw-tone-1 > td { background: rgba(34, 197, 94, .13); }
.ub-sw-tone-2 > td { background: rgba(249, 115, 22, .13); }
.ub-sw-tone-3 > td { background: rgba(168, 85, 247, .12); }
.ub-sw-tone-4 > td { background: rgba(20, 184, 166, .13); }
.ub-sw-tone-5 > td { background: rgba(236, 72, 153, .11); }
tr.ub-sw-tone[data-row^="switch"] > td { font-weight: 600; }
.ub-sheet-cell.edited { background: #fff6d6; }
:root[data-theme="dark"] .ub-sheet-cell.edited { background: #4a3f12; }
.ub-sheet-cell:disabled { color: var(--ub-text); -webkit-text-fill-color: var(--ub-text); }
/* 랙 그림: 랙 이미지 위에 장비를 PPT와 같은 자리(%)에, 오른쪽에 화살표 이름표 */
.ub-rack-figure { background: var(--ub-surface); }
/* 그림 크기 고정(랙 이미지 약 197px), 이름표는 그림 오른쪽으로 넘어가며 그 길이만큼 상자가 넓어진다(RackSheet가 padding-right를 정함) */
.ub-rack-figure-stage { position: relative; width: 320px; aspect-ratio: 9.4 / 18.1; margin: 10px 0; }
.ub-fig { position: absolute; object-fit: fill; }
.ub-fig.rack { object-fit: fill; }
/* --ub-fig-k: 출력 때 그림 크기에 맞춰 이름표를 키우는 배율(ubnet.js fillStage). 화면은 1 */
.ub-fig-label { position: absolute; left: 54.3%; display: flex; align-items: center; gap: 4px; transform: translateY(-50%) scale(var(--ub-fig-k, 1)); transform-origin: left center; font-size: 11px; }
.ub-fig-arrow { flex: none; position: relative; width: 28px; height: 2px; background: #c00000; }
.ub-fig-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid #c00000; border-right: 0; }
.ub-fig-text { white-space: nowrap; font-weight: 600; padding-left: 4px; }

/* 실장도 편집(스위치 수 · 서버 묶기 · 단말) — 머리 편집 아이콘으로 표와 전환 */
.ub-sheet-edit { padding: 10px 12px 14px; font-size: 13px; }
.ub-sheet-edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed var(--ub-border); }
.ub-sheet-edit-label { min-width: 110px; font-weight: 600; }
input.ub-input.ub-sheet-edit-num { width: 70px; }
.ub-sheet-edit-racks { padding-top: 10px; }
.ub-sheet-edit-racks-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ub-sheet-edit-rack { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 8px; border: 1px solid var(--ub-border); border-radius: 8px; margin-bottom: 6px; }
.ub-sheet-edit-rack label { display: inline-flex; align-items: center; gap: 6px; }
select.ub-input.ub-sheet-terminal { width: auto; }
.ub-sheet-edit-warn { color: var(--ub-warn, #b45309); margin: 6px 0 0; }
.ub-sheet-rack-row td { background: var(--ub-surface-2); font-weight: 600; text-align: left; padding: 4px 8px; }
.ub-rack-figure-caption { padding: 6px 10px 0; font-size: 12px; font-weight: 600; color: var(--ub-muted); }
/* ================= 큰 화면: 좌우 여백 활용 =================
   기본 폭(관리 1200 · 넓은 화면 1400 · 점검 1500 · 홈 1100)은 노트북·FHD 기준.
   화면이 넓어질수록 단계별로 넓혀 쓰되, 글 줄이 너무 길어지지 않게 화면 폭의 비율(vw)과 상한(px)을 함께 둔다.
   좁은 폼(.ub-narrow)은 그대로. 도면 뷰어는 화면이 높으면 함께 키운다. */
@media (min-width: 1600px) {
    .ub-admin { max-width: 1400px; }
    .ub-admin.ub-wide, .ub-content { max-width: min(92vw, 1760px); }
    .ub-home { max-width: 1280px; }
}
@media (min-width: 1920px) {
    .ub-admin { max-width: 1560px; }
    .ub-admin.ub-wide, .ub-content { max-width: min(94vw, 2200px); }
    .ub-home { max-width: 1440px; }
    .ub-site-layout { grid-template-columns: 280px minmax(0, 1fr); }
    .ub-dwgm-layout { grid-template-columns: 320px minmax(0, 1fr); }
}
@media (min-width: 2560px) {
    .ub-admin { max-width: 1800px; }
    .ub-admin.ub-wide, .ub-content { max-width: min(95vw, 3000px); }
    .ub-home { max-width: 1680px; }
}
/* 화면이 넓고 높으면 도면 뷰어도 높게(기본 560px) */
@media (min-width: 1600px) and (min-height: 900px) {
    .ub-dwg-host { height: clamp(560px, 62vh, 1100px); }
}

/* 실장도: 랙마다 상자 하나(표 | 랙 그림), 머리의 ‹ 랙 탭 › 으로 넘긴다 */
.ub-sheet-rack-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.ub-sheet-rack-box .ub-rack-figure { padding: 10px 10px 0 0; }
.ub-sheet-nav { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; flex-wrap: wrap; }
.ub-sheet-nav-btn { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--ub-border); background: var(--ub-surface); color: var(--ub-text);
    cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.ub-sheet-nav-btn:disabled { opacity: .35; cursor: default; }
.ub-sheet-tab { border: 1px solid var(--ub-border); background: var(--ub-surface); color: var(--ub-muted); border-radius: 12px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.ub-sheet-tab.active { background: var(--ub-accent); border-color: var(--ub-accent); color: #fff; }
.ub-sheet-tab.unassigned:not(.active) { border-style: dashed; color: var(--ub-warn, #b45309); }
.ub-sheet-heading.unassigned { color: var(--ub-warn, #b45309); }
textarea.ub-sheet-heading { display: block; resize: none; overflow: hidden; field-sizing: content; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; }
/* 실장도 편집: 랙마다 서버 번호 고르기(여러 개) */
.ub-sheet-edit-rack { flex-direction: column; align-items: stretch; gap: 6px; }
.ub-sheet-edit-rack-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ub-sheet-server-picks { display: flex; flex-wrap: wrap; gap: 4px; }
.ub-sheet-server-pick { min-width: 30px; height: 26px; border-radius: 6px; border: 1px solid var(--ub-border); background: var(--ub-surface); color: var(--ub-text);
    cursor: pointer; font-size: 12px; padding: 0 6px; }
.ub-sheet-server-pick.on { background: var(--ub-accent); border-color: var(--ub-accent); color: #fff; }
.ub-sheet-server-pick.elsewhere { color: var(--ub-muted); border-style: dashed; }
/* 좁은 화면: 그림을 표 아래로 */
/* 상자 폭으로 판단(컨테이너 쿼리): 표+그림이 나란히 들어갈 만큼 넓을 때만 옆에, 아니면 그림을 표 아래로 */
.ub-rack-sheet { container-type: inline-size; }
/* 화면: 표는 내용에 맞춘 고정 폭(Local은 "ON#1 PCI#1"이 들어갈 만큼), 남는 폭은 랙 그림에.
   그림 폭(--w)은 RackSheet가 정한다: 남는 폭(--ub-fig-avail)에서 가장 긴 이름표(--lbl)를 빼고 그림이 그만큼 커진다(최대 440px). */
.ub-sheet-rack-box:not(.print) { grid-template-columns: auto minmax(0, 1fr); --ub-fig-avail: calc(100cqw - 750px); }
.ub-sheet-rack-box:not(.print) .ub-sheet-table { width: 698px; }
.ub-sheet-rack-box:not(.print) .ub-sheet-table th { box-sizing: border-box; padding: 4px 3px; }   /* 칸 폭 = 정한 폭(안쪽 여백 포함) */
.ub-sheet-rack-box:not(.print) .ub-sheet-table th:nth-child(1) { width: 72px; }
.ub-sheet-rack-box:not(.print) .ub-sheet-table th:nth-child(2) { width: 118px; }
.ub-sheet-rack-box:not(.print) .ub-sheet-table th:nth-child(3) { width: 90px; }
.ub-sheet-rack-box:not(.print) .ub-sheet-table th:nth-child(4) { width: 72px; }
.ub-sheet-rack-box:not(.print) .ub-sheet-table th:nth-child(5) { width: 100px; }
.ub-sheet-rack-box:not(.print) .ub-sheet-table th:nth-child(6) { width: 146px; }
/* 내부 IP 칸(옵션 2, 테스트용): 화면에만, 출력 표에는 칸이 없다. 실장도 칸과 구분되게 점선·흐린 바탕 */
.ub-sheet-rack-box:not(.print) .ub-sheet-table th:nth-child(7) { width: 100px; }
.ub-sheet-table th.ub-sheet-test-ip { background: var(--ub-muted); color: var(--ub-surface); border-style: dashed; }
.ub-sheet-table td.ub-sheet-test-ip { background: var(--ub-surface-2); border-style: dashed; font-size: 12px; color: var(--ub-text); }
.ub-sheet-rack-box:not(.print) .ub-rack-figure-stage { width: var(--w, 320px); }
@container (max-width: 1060px) {
    .ub-sheet-rack-box:not(.print) { grid-template-columns: minmax(0, 1fr); --ub-fig-avail: calc(100cqw - 40px); }
    .ub-sheet-rack-box:not(.print) .ub-rack-figure { padding-left: 10px; padding-bottom: 10px; }
}
/* ================= 출력(실장도): 미리보기 + 인쇄 문서 =================
   쪽 = A4 가로(297×210mm, 여백 10mm). 내용이 크면 ubnet.fitPrintPages가 쪽에 맞춰 줄인다.
   쪽 안은 다크 모드여도 흰 종이 색으로. 인쇄는 ubnet.printPages가 쪽들만 새 문서(body.ub-print-doc)에 옮겨서 한다. */
.ub-print-preview { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; background: rgba(15, 23, 42, .55); }
.ub-print-preview-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--ub-surface); border-bottom: 1px solid var(--ub-border); flex: none; }
.ub-print-preview-scroll { flex: 1; min-height: 0; overflow: auto; padding: 24px; }
.ub-print-pages { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.ub-print-page { --ub-text: #111; --ub-muted: #555; --ub-border: #b8bec9; --ub-surface: #fff; --ub-surface-2: #f2f4f7; --ub-bg: #fff;
    width: 297mm; height: 210mm; box-sizing: border-box; padding: 10mm; flex: none; position: relative; overflow: hidden;
    background: #fff; color: #111; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.ub-print-inner { transform-origin: 0 0; }
.ub-print-footer { position: absolute; right: 10mm; bottom: 4mm; font-size: 10px; color: #666; }
.ub-sheet-rack-box.print .ub-sheet-body { overflow: visible; padding: 0; }
.ub-sheet-rack-box.print .ub-sheet-table { min-width: 0; }
.ub-sheet-rack-box.print .ub-rack-figure { padding-top: 0; }
.ub-sheet-cell.print { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; min-height: 1.6em; }
.ub-sheet-print-btn { margin-left: 2px; }
body.ub-print-doc { margin: 0; background: #fff; }
body.ub-print-doc .ub-print-pages { display: block; }
body.ub-print-doc .ub-print-page { box-shadow: none; }
@media print {
    @page { size: A4 landscape; margin: 0; }
    html, body.ub-print-doc { margin: 0; padding: 0; background: #fff; }
    body.ub-print-doc { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body.ub-print-doc .ub-print-page { height: 209.5mm; break-after: page; page-break-after: always; }   /* 반올림으로 빈 쪽이 생기지 않게 */
    body.ub-print-doc .ub-print-page:last-child { break-after: auto; page-break-after: auto; }
}

/* 랙 그림은 자기 칸의 가운데에: 화면은 표 높이 기준 세로 가운데(그림이 표 아래로 내려가면 가로 가운데),
   출력(미리보기·인쇄)은 쪽 높이 기준 세로 가운데 + 표 오른쪽 남은 폭의 가로 가운데 */
.ub-sheet-rack-box .ub-rack-figure { align-self: center; justify-self: center; }
.ub-sheet-rack-box.print { height: 100%; grid-template-columns: minmax(0, 1fr) minmax(max-content, 34%); }
.ub-sheet-rack-box.print .ub-sheet-body { align-self: start; }
.ub-sheet-rack-box.print .ub-rack-figure { display: flex; justify-content: center; width: 100%; box-sizing: border-box; }

/* ---------- 마이페이지: 왼쪽 메뉴 + 오른쪽 내용 ---------- */
.ub-mypage { max-width: 1100px; }
.ub-mypage-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.ub-mypage-nav { display: flex; flex-direction: column; gap: 2px; background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: var(--ub-radius); padding: 6px; position: sticky; top: 8px; }
.ub-mypage-nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: none; color: var(--ub-text); font: inherit; text-align: left; cursor: pointer; }
.ub-mypage-nav button:hover { background: var(--ub-surface-2); }
.ub-mypage-nav button.active { background: var(--ub-accent-soft); color: var(--ub-accent); font-weight: 600; }
.ub-mypage-nav svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ub-mypage-main { margin-bottom: 0; padding: 20px 24px; min-height: 320px; }
.ub-mypage-title { margin: 0 0 16px; font-size: 17px; }
.ub-mypage-lead { margin: -8px 0 16px; }
.ub-mypage-narrow { max-width: 440px; }
.ub-mypage-gate { max-width: 360px; margin: 24px auto; text-align: center; }
.ub-mypage-gate .ub-form { text-align: left; }
.ub-mypage-gate .ub-form .ub-btn { justify-content: center; }
.ub-mypage-gate h2 { margin: 10px 0 4px; font-size: 17px; }
.ub-mypage-gate > .ub-help { margin: 0 0 18px; }
.ub-mypage-gate-icon { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--ub-accent-soft); color: var(--ub-accent); }
.ub-mypage-gate-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 인감 및 사인 */
.ub-sign-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.ub-sign-card, .ub-sign-password { border: 1px solid var(--ub-border); border-radius: var(--ub-radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ub-sign-password { margin-bottom: 14px; align-items: flex-start; }
.ub-sign-password .ub-help { margin: 0; }
.ub-sign-password .ub-form-grid { width: 100%; }
.ub-sign-card-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ub-sign-preview { height: 150px; border: 1px dashed var(--ub-border); border-radius: 6px; display: grid; place-items: center; overflow: hidden;
    background: #fff repeating-conic-gradient(#f1f3f6 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.ub-sign-preview img { max-width: 92%; max-height: 130px; object-fit: contain; }
.ub-sign-preview .ub-help { background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px; color: #667085; }
.ub-sign-card-actions { display: flex; gap: 6px; align-items: center; }
.ub-sign-card-actions label.ub-btn { position: relative; cursor: pointer; }
.ub-sign-save { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.ub-modal.ub-sign-modal { width: min(640px, 100%); }
.ub-sign-pad { position: relative; height: 240px; border: 1px solid var(--ub-border); border-radius: 8px; background: #fff; overflow: hidden; }
.ub-sign-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; z-index: 1; }
.ub-sign-pad-line { position: absolute; left: 8%; right: 8%; bottom: 28%; border-bottom: 1px dashed #c4cad3; }

@media (max-width: 760px) {
    .ub-mypage-layout { grid-template-columns: 1fr; }
    .ub-mypage-nav { flex-direction: row; position: static; overflow-x: auto; }
    .ub-mypage-nav button { width: auto; flex: 1 0 auto; justify-content: center; }
    .ub-mypage-main { padding: 16px; }
    .ub-mypage .ub-form-grid.wide { grid-template-columns: 1fr; }
}
/* ---------- 메뉴 관리: 홈 구역 이름 ---------- */
.ub-menu-categories { display: flex; flex-direction: column; gap: 10px; }
.ub-menu-categories-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ub-menu-categories-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ub-menu-categories-row .ub-form-field { width: 180px; }

/* ================= 휴가 ================= */
.ub-leave { --lt: var(--ub-muted); }
:is(.ub-leave, .ub-schedule) [data-type="monthly"] { --lt: #2f7de1; }
:is(.ub-leave, .ub-schedule) [data-type="annual"] { --lt: #1f9d6b; }
:is(.ub-leave, .ub-schedule) [data-type="am_half"] { --lt: #e08a1e; }
:is(.ub-leave, .ub-schedule) [data-type="pm_half"] { --lt: #d0632b; }
:is(.ub-leave, .ub-schedule) [data-type="substitute"] { --lt: #7a5ae0; }
:is(.ub-leave, .ub-schedule) [data-type="health"] { --lt: #d6457f; }
:is(.ub-leave, .ub-schedule) [data-type="family"] { --lt: #64748b; }
:is(.ub-leave, .ub-schedule) [data-type="sick"] { --lt: #c43d3d; }
:is(.ub-leave, .ub-schedule) [data-type="official"] { --lt: #0f8fa8; }
:is(.ub-leave, .ub-schedule) [data-type="other"] { --lt: #8a8f3a; }
:is(.ub-leave, .ub-schedule) [data-type="private"] { --lt: #8b8f98; }

.ub-leave-tabs { display: flex; gap: 4px; margin-left: 12px; background: var(--ub-surface-2); border: 1px solid var(--ub-border); border-radius: 8px; padding: 3px; }
.ub-leave-tabs button { border: 0; background: none; color: var(--ub-muted); font: inherit; font-weight: 600; padding: 6px 14px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ub-leave-tabs button.active { background: var(--ub-surface); color: var(--ub-text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ub-leave-count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--ub-bad); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }

.ub-leave-summary { display: flex; flex-direction: column; gap: 12px; }
.ub-leave-balance .ub-help { line-height: 1.5; }
.ub-leave-balance-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ub-leave-balance-head .ub-btn.link { padding: 0; font-size: 12px; }
/* 남은 휴가 구성(카드 안): 항목 ··· 일수 */
.ub-leave-compose { margin: 2px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ub-leave-compose > div { display: flex; justify-content: space-between; gap: 12px; }
.ub-leave-compose dt { color: var(--ub-muted); }
.ub-leave-compose dd { margin: 0; font-variant-numeric: tabular-nums; }
.ub-leave-compose .minus dd { color: var(--ub-bad); }
/* 구성 자세히(창) */
.ub-leave-compose-modal { width: min(560px, 100%); }
.ub-leave-compose-modal .body > p { margin: 0 0 8px; }
.ub-leave-compose-h { margin: 14px 0 6px; font-size: 14px; }
.ub-leave-compose-table td { vertical-align: top; }
.ub-leave-compose-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; width: 64px; }
.ub-leave-compose-table tr.clickable { cursor: pointer; }
.ub-leave-compose-table tr.clickable:hover { background: var(--ub-surface-2); }
.ub-leave-compose-table .ub-leave-chip { margin-left: 6px; }
.ub-leave-compose-dates { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ub-leave-compose-dates span { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--ub-surface-2); color: var(--ub-muted); font-variant-numeric: tabular-nums; }
.ub-leave-compose-total { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 10px; padding: 10px 12px; border-radius: 8px; background: var(--ub-surface-2); }
.ub-leave-compose-total strong { margin-left: auto; font-size: 20px; color: var(--ub-accent); }
.ub-leave-stat.main strong.negative, .ub-leave-compose-total strong.negative { color: var(--ub-bad); }
.ub-leave-stat { background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: var(--ub-radius); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.ub-leave-stat small { color: var(--ub-muted); font-size: 12px; }
.ub-leave-stat strong { font-size: 22px; }
.ub-leave-stat.main strong { color: var(--ub-accent); }
/* 그 해 승인 / 결재 중: 2행(이름 ··· 값) */
.ub-leave-counts { gap: 6px; }
.ub-leave-counts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ub-leave-counts small { font-size: 13px; }
.ub-leave-counts strong { font-size: 18px; }

.ub-leave-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.ub-leave-layout > .ub-card { margin-bottom: 0; }
/* 오른쪽 칸: 지금 쓸 수 있는 휴가 + 승인·결재 중 + 휴가 신청 */
.ub-leave-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ub-leave-side > .ub-card { margin-bottom: 0; }
.ub-leave-history-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ub-leave-history-head h2, .ub-leave-form h2, .ub-leave-h2 { margin: 0; font-size: 16px; }
.ub-leave-h2 { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ub-leave-year { display: flex; align-items: center; gap: 6px; }
.ub-leave-empty { padding: 40px 12px; text-align: center; color: var(--ub-muted); }

.ub-seg { display: inline-flex; border: 1px solid var(--ub-border); border-radius: 7px; overflow: hidden; background: var(--ub-surface); }
.ub-seg button { border: 0; background: none; color: var(--ub-muted); font: inherit; font-size: 13px; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.ub-seg button + button { border-left: 1px solid var(--ub-border); }
.ub-seg button.active { background: var(--ub-accent-soft); color: var(--ub-accent); font-weight: 600; }
.ub-seg button:disabled { opacity: .45; cursor: not-allowed; }
.ub-seg.small button { padding: 4px 12px; font-size: 12px; }
.ub-seg svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 종류 칩(색) + 상태 모양: 결재 중 = 점선, 반려 = 취소선, 취소 = 흐리게 */
.ub-leave-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 7px; border-radius: 4px; border: 1px solid transparent;
    border-left: 3px solid var(--lt); background: color-mix(in srgb, var(--lt) 15%, var(--ub-surface)); color: color-mix(in srgb, var(--lt) 75%, var(--ub-text));
    font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-align: left; }
.ub-leave-chip.static { cursor: default; }
.ub-leave-chip.pending { border-style: dashed; border-color: var(--lt); border-left-style: solid; background: var(--ub-surface); }
.ub-leave-chip.rejected { text-decoration: line-through; opacity: .6; }
.ub-leave-chip.canceled { opacity: .4; }

.ub-leave-table tbody tr { cursor: pointer; }
.ub-leave-table tbody tr:hover { background: var(--ub-surface-2); }
.ub-leave-table tr.my-turn { background: var(--ub-warn-soft); }
.ub-leave-table tr.canceled td { color: var(--ub-muted); }
.ub-leave-reason { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-leave-progress { display: inline-flex; flex-wrap: wrap; gap: 4px; }
/* 결재 진행: 색 없이 기호(✓ 승인, ✕ 반려, ● 지금 차례, ○ 대기)로만 구분 */
.ub-leave-progress .step { font-size: 12px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--ub-border); background: var(--ub-surface); color: var(--ub-text); white-space: nowrap; }
.ub-leave-progress .step.current { font-weight: 600; }
/* 사용 이력 표의 휴가 종류: 색 없이 흰 바탕 + 글자 */
.ub-leave-type-text { display: inline-block; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--ub-border); background: var(--ub-surface); color: var(--ub-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
/* 달력: 결재 중 표시 */
.ub-leave-chip-tag { flex: none; padding: 0 4px; border-radius: 3px; border: 1px solid var(--ub-border); background: var(--ub-surface); color: var(--ub-muted); font-size: 10px; font-weight: 600; }

/* 달력 */
.ub-leave-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ub-leave-cal-head strong { min-width: 96px; text-align: center; }
.ub-leave-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ub-border); border-left: 1px solid var(--ub-border); }
.ub-leave-cal-grid > div { border-right: 1px solid var(--ub-border); border-bottom: 1px solid var(--ub-border); }
.ub-leave-cal-grid .dow { padding: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ub-muted); background: var(--ub-surface-2); }
.ub-leave-cal-grid .dow.sun, .ub-leave-cal-grid .num.sun { color: var(--ub-bad); }
.ub-leave-cal-grid .dow.sat, .ub-leave-cal-grid .num.sat { color: var(--ub-accent); }
.ub-leave-cal-grid .day { min-height: 88px; padding: 4px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; outline: none; }
.ub-leave-cal-grid .day:hover { background: var(--ub-surface-2); }
.ub-leave-cal-grid .day:focus-visible { box-shadow: inset 0 0 0 2px var(--ub-accent); }
.ub-leave-cal-grid .day.weekend { background: color-mix(in srgb, var(--ub-surface-2) 70%, var(--ub-line)); }
.ub-leave-cal-grid .day.out { opacity: .45; }
.ub-leave-cal-grid .day.sel { background: var(--ub-accent-soft); box-shadow: inset 0 0 0 1px var(--ub-accent-border); }
.ub-leave-cal-grid .num { font-size: 12px; font-weight: 600; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.ub-leave-cal-grid .day.today .num { background: var(--ub-accent); color: #fff; }

/* 신청 칸 */
.ub-leave-form { display: flex; flex-direction: column; gap: 12px; }
.ub-leave-form .ub-form { gap: 12px; }
.ub-leave-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.ub-leave-type { border: 1px solid var(--ub-border); border-radius: 6px; background: var(--ub-surface); color: var(--ub-text); font: inherit; font-size: 12px; padding: 7px 4px; cursor: pointer; position: relative; }
.ub-leave-type::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lt); margin-right: 5px; vertical-align: 1px; }
.ub-leave-type:hover { border-color: var(--lt); }
.ub-leave-type.on { border-color: var(--lt); background: color-mix(in srgb, var(--lt) 14%, var(--ub-surface)); font-weight: 700; box-shadow: inset 0 0 0 1px var(--lt); }
/* 보상휴가·경조휴가: 보유 일수가 없으면 고를 수 없음, 있으면 일수 표시 */
.ub-leave-type:disabled { cursor: not-allowed; opacity: .45; background: var(--ub-surface-2); border-style: dashed; }
.ub-leave-type:disabled:hover { border-color: var(--ub-border); }
.ub-leave-type-held { margin-left: 3px; padding: 0 5px; border-radius: 8px; background: color-mix(in srgb, var(--lt) 22%, transparent); font-size: 11px; font-weight: 700; }
/* 사용자 관리 › 경조휴가 지급 */
.ub-modal.ub-grant-modal { width: min(640px, calc(100vw - 32px)); }
.ub-grant-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.ub-grant-summary > div { padding: 8px 10px; border-radius: 6px; background: var(--ub-surface-2); }
.ub-grant-summary dt { font-size: 11px; color: var(--ub-muted); }
.ub-grant-summary dd { margin: 2px 0 0; font-weight: 700; }
.ub-grant-summary .main dd { color: var(--ub-accent); }
.ub-grant-h { font-size: 13px; margin: 14px 0 8px; }
.ub-grant-form { display: grid; grid-template-columns: 150px 100px minmax(0, 1fr); gap: 8px 10px; }
@media (max-width: 560px) {
    .ub-grant-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ub-grant-form { grid-template-columns: minmax(0, 1fr) 100px; }
    .ub-grant-form .wide { grid-column: 1 / -1; }
}
.ub-leave-period { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px 10px; }
.ub-leave-days { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 10px; border-radius: 6px; background: var(--ub-surface-2); font-size: 12px; }
.ub-leave-days strong { color: var(--ub-accent); font-size: 14px; margin-left: auto; }
.ub-leave-days .bad { color: var(--ub-bad); }
.ub-leave-days small { flex-basis: 100%; }
.ub-leave-line { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ub-leave-line li { display: flex; align-items: center; gap: 6px; }
.ub-leave-line .step { flex: none; width: 34px; font-size: 12px; font-weight: 600; color: var(--ub-muted); }
.ub-leave-line select { flex: 1; min-width: 0; }
.ub-leave-stamp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: end; padding: 10px; border: 1px dashed var(--ub-border); border-radius: 6px; }
.ub-leave-form-buttons { display: flex; gap: 8px; justify-content: flex-end; }

/* 결재 문서 창 */
.ub-modal.ub-leave-doc-modal { width: min(880px, 100%); }
.ub-leave-doc-modal .body { background: var(--ub-bg); }
.ub-leave-doc-paper { overflow: auto; display: flex; justify-content: center; padding: 4px; }
.ub-leave-doc-actions { flex-direction: column; align-items: stretch !important; }
.ub-leave-doc-actions:has(> .ub-btn) { flex-direction: row; align-items: center !important; }
.ub-leave-act { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.ub-leave-act-fields { display: grid; grid-template-columns: auto 180px minmax(200px, 1fr); gap: 10px; flex: 1; align-items: end; }
.ub-leave-act-buttons { display: flex; gap: 8px; }

/* 회사용 용지(A4 레터헤드, Components/Branding/CompanyPaper). 색은 명함의 로고 색: 청록 → 남색, 배터리 초록.
   로고가 없는 회사(.plain)는 같은 모양에 회색 계열. 용지는 쪽(.ub-print-page) 안쪽 전체를 쓰고 여백도 스스로 둔다. */
.ub-paper { --paper-a: #3a94c0; --paper-b: #21508a; --paper-c: #6aa84f; --paper-ink: #1f3b63; --paper-line: #5d6f88; --paper-tint: #edf3f9; --paper-muted: #5a6b82;
    position: absolute; inset: 0; display: flex; flex-direction: column; padding: 13mm 16mm 8mm; box-sizing: border-box; overflow: hidden; background: #fff; color: #111; }
.ub-paper.plain { --paper-a: #94a3b8; --paper-b: #475569; --paper-c: #475569; --paper-ink: #1e293b; --paper-line: #64748b; --paper-tint: #f2f4f7; --paper-muted: #64748b; }
.ub-paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3.2mm; background: linear-gradient(90deg, var(--paper-a), var(--paper-b) 78%, var(--paper-c) 78%); }
.ub-paper-mark { position: absolute; right: -12mm; bottom: 12mm; width: 112mm; opacity: .05; pointer-events: none; }
.ub-paper-head { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; min-height: 12mm; }
.ub-paper-logo { height: 19mm; width: auto; display: block; }
.ub-paper-head-info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-bottom: 1mm; }
.ub-paper-head-info b { font-size: 13px; font-weight: 700; letter-spacing: .25em; color: var(--paper-ink); }
.ub-paper-head-info span { font-size: 10px; letter-spacing: .08em; color: var(--paper-muted); }
.ub-paper-name { font-size: 20px; font-weight: 800; letter-spacing: .12em; color: var(--paper-ink); }
.ub-paper-rule { position: relative; margin-top: 3mm; height: 1.4px; background: linear-gradient(90deg, var(--paper-a), var(--paper-b)); }
.ub-paper-rule i { position: absolute; right: 0; top: -1.3px; width: 16mm; height: 4px; background: var(--paper-c); }
.ub-paper-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 7mm; }
.ub-paper-foot { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 2.5mm; border-top: 1px solid #c9d6e3;
    font-size: 9.5px; line-height: 1.5; color: var(--paper-muted); }
.ub-paper-foot b { margin-right: 10px; color: var(--paper-ink); }
.ub-paper-foot .web { font-weight: 600; letter-spacing: .04em; color: var(--paper-b); white-space: nowrap; }

/* 휴가 신청서(회사용 용지, A4 세로). 다크 모드에서도 흰 종이 */
.ub-print-page.ub-leave-print { width: 210mm; height: 297mm; padding: 0; page: leave-portrait; }
.ub-leave-doc { position: relative; flex: 1; display: flex; flex-direction: column; font-size: 13px; color: #111; }
.ub-leave-doc-draft { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font-size: 90px; font-weight: 800; color: rgba(0,0,0,.05); pointer-events: none; white-space: nowrap; }
.ub-leave-doc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.ub-leave-doc-top h2 { margin: 22px 0 0; font-size: 28px; font-weight: 800; letter-spacing: .35em; color: var(--paper-ink, #111); }
.ub-leave-doc-approval { border-collapse: collapse; background: #fff; }
.ub-leave-doc-approval th, .ub-leave-doc-approval td { border: 1px solid var(--paper-line, #333); text-align: center; }
.ub-leave-doc-approval th { width: 74px; padding: 4px; font-size: 12px; font-weight: 600; background: var(--paper-tint, #f2f4f7); color: var(--paper-ink, #111); }
.ub-leave-doc-approval th.vert { width: 24px; padding: 6px 2px; writing-mode: vertical-rl; letter-spacing: .5em; }
.ub-leave-doc-approval .stamps td { height: 66px; padding: 2px; }
/* 인감·사인은 같은 틀(사인 크기 70×40)에 맞춰 넣는다 — 정사각형 인감이 사인보다 크게 보이지 않게 */
.ub-leave-doc-approval .stamps img { width: 70px; height: 40px; object-fit: contain; display: block; margin: 0 auto; }
.ub-leave-doc-approval .names td { padding: 4px; font-size: 11px; font-weight: 600; line-height: 1.3; }
.ub-leave-doc-mark { font-size: 12px; color: #999; }
.ub-leave-doc-mark.draft { font-size: 10px; }
.ub-leave-doc-mark.approved { color: #16803c; font-weight: 700; }
.ub-leave-doc-mark.rejected { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 2px solid #c62828; border-radius: 50%; color: #c62828; font-weight: 800; transform: rotate(-12deg); }
.ub-leave-doc-body { width: 100%; border-collapse: collapse; background: #fff; border-top: 2px solid var(--paper-b, #333); }
.ub-leave-doc-body col.h { width: 17%; }
.ub-leave-doc-body th, .ub-leave-doc-body td { border: 1px solid var(--paper-line, #333); padding: 10px 12px; text-align: left; vertical-align: middle; }
.ub-leave-doc-body th { background: var(--paper-tint, #f2f4f7); color: var(--paper-ink, #111); font-weight: 600; text-align: center; }
.ub-leave-doc-body .days { margin-left: 8px; }
.ub-leave-doc-body .reason td { height: 120px; text-align: center; vertical-align: middle; white-space: pre-wrap; }
.ub-leave-doc-body .comments td div + div { margin-top: 4px; }
.ub-leave-doc-statement { margin: 34px 0 0; text-align: center; font-size: 15px; }
.ub-leave-doc-date { margin: 26px 0 0; text-align: center; font-size: 15px; letter-spacing: .05em; }
.ub-leave-doc-sign { margin: 26px 0 0; text-align: right; font-size: 15px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.ub-leave-doc-sign .mini { display: inline-grid; place-items: center; width: 70px; height: 40px; }
.ub-leave-doc-sign .mini img { width: 70px; height: 40px; object-fit: contain; }
@page leave-portrait { size: A4 portrait; margin: 0; }
@media print {
    body.ub-print-doc .ub-print-page.ub-leave-print { height: 296.5mm; }
}

@media (max-width: 1000px) {
    .ub-leave-layout { grid-template-columns: minmax(0, 1fr); }
    /* 좁은 화면: 남은 휴가·승인·결재 중 → 사용 이력 → 휴가 신청 순 */
    .ub-leave-side { display: contents; }
    .ub-leave-summary { order: -1; }
    .ub-leave-act-fields { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ub-leave-cal-grid .day { min-height: 64px; }
    .ub-leave-cal-head small { display: none; }
    .ub-leave-tabs { margin-left: 0; }
}
/* 결재선 지정 창 */
.ub-modal.ub-approver-picker { width: min(820px, 100%); }
.ub-approver-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; min-height: 360px; }
.ub-approver-people { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ub-approver-list { border: 1px solid var(--ub-border); border-radius: 8px; overflow: auto; max-height: 52vh; flex: 1; }
.ub-approver-group-head { position: sticky; top: 0; z-index: 1; padding: 6px 12px; background: var(--ub-surface-2); border-bottom: 1px solid var(--ub-border); font-size: 12px; font-weight: 700; color: var(--ub-muted); }
.ub-approver-group-head small { font-weight: 400; margin-left: 4px; }
.ub-approver-person { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--ub-line);
    background: var(--ub-surface); color: var(--ub-text); font: inherit; text-align: left; cursor: pointer; }
.ub-approver-person:hover:not(:disabled) { background: var(--ub-accent-soft); }
.ub-approver-person:disabled { opacity: .45; cursor: not-allowed; }
.ub-approver-person .mark { width: 34px; height: 24px; border-radius: 12px; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px dashed var(--ub-border); color: var(--ub-muted); }
.ub-approver-person.on { background: var(--ub-accent-soft); }
.ub-approver-person.on .mark { border: 0; background: var(--ub-accent); color: #fff; }
.ub-approver-person .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-approver-person .roles { font-size: 12px; color: var(--ub-muted); }
.ub-approver-line { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 8px; background: var(--ub-surface-2); min-width: 0; }
.ub-approver-line-head { display: flex; align-items: baseline; gap: 8px; }
.ub-approver-line ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ub-approver-line li { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--ub-border); border-radius: 6px; background: var(--ub-surface); }
.ub-approver-line .step { flex: none; width: 34px; font-size: 12px; font-weight: 700; color: var(--ub-accent); }
.ub-approver-line .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ub-approver-line .who small { color: var(--ub-muted); font-size: 12px; }
.ub-approver-line .ub-leave-empty { padding: 24px 8px; }
.ub-approver-line > .ub-help { margin: auto 0 0; }
.ub-leave-line .who { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--ub-border); border-radius: 6px; background: var(--ub-surface-2); }
.ub-leave-line-empty { padding: 10px; border: 1px dashed var(--ub-border); border-radius: 6px; color: var(--ub-muted); font-size: 12px; text-align: center; }
@media (max-width: 700px) {
    .ub-approver-cols { grid-template-columns: 1fr; }
    .ub-approver-list { max-height: 38vh; }
}

/* ================= 업무스케쥴 ================= */
/* 화면 높이에 맞춘다(상단 막대 + 하단 탭 자리를 뺀 높이). 달력 칸만 스크롤된다. */
.ub-schedule { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; padding: 16px 24px;
    height: calc(100dvh - 110px); box-sizing: border-box; }
/* 왼쪽: 표시할 내용(사용자별로 켜고 끔) */
.ub-schedule-side { background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: var(--ub-radius); padding: 14px; overflow-y: auto;
    display: flex; flex-direction: column; }
.ub-schedule-side h2 { margin: 0 0 10px; font-size: 14px; }
.ub-schedule-side > .ub-help { margin: 12px 0 0; font-size: 12px; }
/* 안내 문구: 칸 맨 아래 */
.ub-schedule-side > .ub-schedule-side-foot { margin-top: auto; padding-top: 12px; }
.ub-schedule-layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ub-schedule-layer { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.ub-schedule-layer:hover { background: var(--ub-surface-2); }
.ub-schedule-layer input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.ub-schedule-layer small { margin-left: auto; }
/* 항목 줄: 체크박스·이름·개수 + 오른쪽 접기 화살표 */
.ub-schedule-layer-row { display: flex; align-items: center; gap: 2px; }
.ub-schedule-layer-row .ub-schedule-layer { flex: 1; min-width: 0; }
.ub-schedule-fold { flex: none; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px;
    background: none; color: var(--ub-muted); cursor: pointer; }
.ub-schedule-fold:hover { background: var(--ub-surface-2); color: var(--ub-text); }
.ub-schedule-fold svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .2s ease; }
.ub-schedule-layers li.collapsed .ub-schedule-fold svg { transform: rotate(-90deg); }
.ub-schedule-legend { display: flex; gap: 6px; padding: 2px 8px 4px 32px; }
/* 항목 아래 세부 선택(휴가 보기 범위)·이번 달 목록(공휴일, 창립기념일) */
.ub-schedule-sub { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; padding: 0 8px 0 32px; list-style: none; font-size: 13px; }
.ub-schedule-sub-item { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
.ub-schedule-sub-item input { margin: 0; cursor: pointer; }
.ub-schedule-sub-item.disabled { color: var(--ub-muted); cursor: default; }
.ub-schedule-sub .ub-help { font-size: 12px; }
/* 달력 + 오른쪽 한 해 공휴일·창립기념일 목록(가운데 화살표로 밀어 여닫음) */
.ub-schedule-body { position: relative; flex: 1; min-height: 0; display: flex; }
.ub-schedule-body > .ub-schedule-scroll { flex: 1; min-width: 0; }
.ub-schedule-year { flex: none; display: flex; align-items: center; margin-left: 4px; }
.ub-schedule-year-toggle { flex: none; width: 22px; height: 56px; padding: 0; border: 1px solid var(--ub-border); border-right: 0;
    border-radius: 8px 0 0 8px; background: var(--ub-surface); color: var(--ub-text); font-size: 18px; line-height: 1; cursor: pointer; }
.ub-schedule-year-toggle:hover { background: var(--ub-surface-2); color: var(--ub-accent); }
.ub-schedule-year-clip { align-self: stretch; width: 0; overflow: hidden; transition: width .25s ease; }
.ub-schedule-year.open .ub-schedule-year-clip { width: 280px; }
.ub-schedule-year-inner { height: 100%; width: 280px; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; padding: 12px 14px;
    background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: var(--ub-radius); }
.ub-schedule-year:not(.open) .ub-schedule-year-inner { visibility: hidden; transition: visibility 0s .25s; }
.ub-schedule-year-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ub-schedule-year-head h2 { flex: 1; margin: 0; font-size: 15px; text-align: center; }
.ub-schedule-year-list { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ub-schedule-year-list .month { margin: 10px 0 2px; padding-bottom: 2px; border-bottom: 1px solid var(--ub-line); font-size: 12px; font-weight: 700; color: var(--ub-muted); }
.ub-schedule-year-list .month:first-child { margin-top: 0; }
.ub-schedule-year-list button { display: flex; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: 6px; background: none;
    color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ub-schedule-year-list button:hover { background: var(--ub-surface-2); }
.ub-schedule-year-list .date { flex: none; width: 72px; color: var(--ub-muted); font-variant-numeric: tabular-nums; }
.ub-schedule-year-list .name { min-width: 0; font-weight: 600; }
.ub-schedule-year-list .name.off { color: var(--ub-bad); }
.ub-schedule-year-list .name.founding { color: var(--ub-accent); }
.ub-schedule-year-list li.past { opacity: .55; }
/* 토·일과 겹친 공휴일: 원래 쉬는 날이라 회색 계열로 구분 */
.ub-schedule-year-list li.weekend .name.off { color: color-mix(in srgb, var(--ub-bad) 35%, var(--ub-muted)); font-weight: 500; }
.ub-schedule-year .ub-help { margin: 12px 0 0; font-size: 12px; }
/* 날짜 칸 안의 공휴일·창립기념일 이름. 쉬는 날은 빨강 */
.ub-schedule-marks { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.ub-schedule-mark { font-size: 11px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ub-accent); }
.ub-schedule-mark.off { color: var(--ub-bad); }
.ub-schedule-grid .day.off { background: color-mix(in srgb, var(--ub-bad) 6%, var(--ub-surface)); }
/* 날짜 칸 안의 일정(휴가 칩: 이름 + 종류). 내 일정은 굵은 테두리 */
.ub-schedule-items { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.ub-schedule-items .ub-leave-chip { font-weight: 500; }
.ub-schedule-items .ub-leave-chip b { font-weight: 700; }
.ub-schedule-items .ub-leave-chip.mine { box-shadow: inset 0 0 0 1px var(--lt); }
.ub-schedule-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ub-schedule-head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.ub-schedule-head h1 { margin: 0; font-size: 20px; }
.ub-schedule-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px;
    background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: var(--ub-radius); padding: 0 16px 16px; }
.ub-schedule-month h2 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 0 8px; font-size: 16px; background: var(--ub-surface); }
.ub-schedule-month.center h2 { color: var(--ub-accent); }
.ub-schedule-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ub-border); border-left: 1px solid var(--ub-border); }
.ub-schedule-grid > div { border-right: 1px solid var(--ub-border); border-bottom: 1px solid var(--ub-border); }
.ub-schedule-grid .dow { padding: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ub-muted); background: var(--ub-surface-2); }
.ub-schedule-grid .dow.sun, .ub-schedule-grid .num.sun { color: var(--ub-bad); }
.ub-schedule-grid .dow.sat, .ub-schedule-grid .num.sat { color: var(--ub-accent); }
.ub-schedule-grid .day { min-height: 92px; padding: 4px; min-width: 0; }
.ub-schedule-grid .day.weekend, .ub-schedule-grid .blank { background: color-mix(in srgb, var(--ub-surface-2) 70%, var(--ub-line)); }
.ub-schedule-grid .num { font-size: 12px; font-weight: 600; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.ub-schedule-grid .day.today .num { background: var(--ub-accent); color: #fff; }
@media (max-width: 800px) {
    .ub-schedule { grid-template-columns: 1fr; height: auto; padding: 16px; }
    /* 좁은 화면: 표시 설정은 달력 위에 한 줄로 */
    .ub-schedule-side { order: -1; padding: 10px 12px; }
    .ub-schedule-side h2, .ub-schedule-side > .ub-help { display: none; }
    .ub-schedule-layers { flex-direction: row; flex-wrap: wrap; }
    .ub-schedule-legend { padding-left: 8px; }
    .ub-schedule-sub { padding-left: 8px; flex-direction: row; flex-wrap: wrap; gap: 2px 10px; }
    /* 좁은 화면: 한 해 목록은 달력 위에 겹쳐 연다 */
    .ub-schedule-year { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; margin-left: 0; }
    .ub-schedule-year.open .ub-schedule-year-clip { width: min(280px, calc(100vw - 80px)); }
    .ub-schedule-year-inner { width: min(280px, calc(100vw - 80px)); box-shadow: -4px 0 16px rgb(0 0 0 / .18); }
    .ub-schedule-mark { font-size: 10px; }
    .ub-schedule-items .ub-leave-chip { font-size: 11px; padding: 0 4px; }
    .ub-schedule-scroll { max-height: calc(100dvh - 180px); }
    .ub-schedule-grid .day { min-height: 56px; }
}

/* ---------- 업무스케쥴 › 일정 추가(오른쪽 아래 + 버튼 → 팝업) ---------- */
/* 마지막 줄이 + 버튼에 가리지 않게 */
.ub-schedule-scroll > .ub-schedule-month:last-child { padding-bottom: 72px; }
.ub-schedule-sub-help { display: block; padding: 0 8px 4px 32px; font-size: 12px; }
/* 달력의 휴일 출근 칩: 초록 점선 테두리, 내 것은 눌러서 고친다 */
.ub-schedule-entry { --et: #0f9d76; display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 7px; border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--et) 45%, transparent); border-left: 3px solid var(--et);
    background: color-mix(in srgb, var(--et) 10%, var(--ub-surface)); color: color-mix(in srgb, var(--et) 70%, var(--ub-text));
    font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ub-schedule-entry b { font-weight: 700; }
.ub-schedule-entry small { font-size: 10px; opacity: .8; }
.ub-schedule-entry:disabled { cursor: default; opacity: 1; }
.ub-schedule-entry.mine { cursor: pointer; box-shadow: inset 0 0 0 1px var(--et); }
.ub-schedule-entry.mine:hover { background: color-mix(in srgb, var(--et) 20%, var(--ub-surface)); }
/* 결재 상태: 결재 중 = 점선(휴가 칩과 같음), 반려 = 취소선(본인에게만 보인다) */
.ub-schedule-entry.pending { border-style: dashed; border-left-style: solid; background: var(--ub-surface); }
.ub-schedule-entry.rejected { --et: #8b8f98; opacity: .75; }
.ub-schedule-entry.rejected b { text-decoration: line-through; }
.ub-schedule-legend .ub-schedule-entry { display: inline-flex; }
/* 휴일 출근 신청서: 출근일 한 줄 */
.ub-workday-doc-date { display: flex; gap: 12px; }
.ub-workday-doc-date + .ub-workday-doc-date { margin-top: 4px; }
.ub-workday-doc-date .grant { margin-left: auto; font-weight: 600; }

/* 하단 탭 막대(44px) 위 오른쪽 아래 */
.ub-schedule-fab { position: fixed; right: 28px; bottom: 68px; z-index: 96; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0;
    display: grid; place-items: center; background: var(--ub-accent); color: #fff; cursor: pointer;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ub-accent) 45%, transparent), 0 2px 6px rgb(0 0 0 / .18);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.ub-schedule-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--ub-accent) 50%, transparent), 0 3px 8px rgb(0 0 0 / .2); }
.ub-schedule-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--ub-accent) 40%, transparent); outline-offset: 3px; }
.ub-schedule-fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.ub-schedule-fab.open svg { transform: rotate(135deg); }

.ub-sched-pop-backdrop { position: fixed; inset: 0 0 44px 0; z-index: 94; background: rgb(15 23 42 / .18); animation: ub-sched-fade .2s ease both; }
.ub-sched-pop-backdrop.closing { animation: ub-sched-fade .16s ease reverse both; }
/* + 버튼 자리(오른쪽 아래)에서 커지며 나타나고, 닫을 때 그 자리로 줄어든다 */
.ub-sched-pop { position: fixed; right: 28px; bottom: 136px; z-index: 95; width: 380px; max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 44px - 136px - 16px); display: flex; flex-direction: column;
    background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: 14px;
    box-shadow: 0 18px 50px rgb(0 0 0 / .22); transform-origin: calc(100% - 28px) calc(100% + 40px);
    animation: ub-sched-pop-in .26s cubic-bezier(.34, 1.4, .64, 1) both; }
.ub-sched-pop.closing { animation: ub-sched-pop-out .16s ease-in both; }
@keyframes ub-sched-pop-in { from { opacity: 0; transform: translateY(12px) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ub-sched-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px) scale(.4); } }
@keyframes ub-sched-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .ub-sched-pop, .ub-sched-pop.closing, .ub-sched-pop-backdrop, .ub-sched-pop-backdrop.closing { animation-duration: .01s; }
}
.ub-sched-pop header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--ub-line); }
.ub-sched-pop header h2 { margin: 0 auto 0 0; font-size: 16px; }
.ub-sched-pop .body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.ub-sched-pop footer { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 10px 16px 14px; border-top: 1px solid var(--ub-line); }
.ub-sched-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.ub-sched-kind { border: 1px solid var(--ub-border); border-radius: 999px; background: var(--ub-surface); color: var(--ub-text); font: inherit; font-size: 13px; padding: 5px 12px; cursor: pointer; }
.ub-sched-kind.on { border-color: var(--ub-accent); background: var(--ub-accent-soft); color: var(--ub-accent); font-weight: 700; }
.ub-sched-kind:disabled:not(.on) { opacity: .45; cursor: not-allowed; }
.ub-sched-parts { display: flex; }
.ub-sched-parts button { flex: 1; justify-content: center; }
.ub-sched-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 출근한 날 고르는 작은 달력: 쉬는 날(공휴일·토·일)만 누를 수 있고 여러 날을 켜고 끈다 */
.ub-sched-cal-count { margin-left: 6px; color: var(--ub-accent); font-weight: 700; }
.ub-sched-cal { border: 1px solid var(--ub-border); border-radius: 10px; padding: 8px 10px 10px; background: var(--ub-surface); }
.ub-sched-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ub-sched-cal-head b { font-size: 14px; }
.ub-sched-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.ub-sched-cal-grid .dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--ub-muted); padding: 2px 0 4px; }
.ub-sched-cal-grid .dow.sun { color: var(--ub-bad); }
.ub-sched-cal-grid .dow.sat { color: var(--ub-accent); }
.ub-sched-cal-grid button { position: relative; height: 34px; border: 1px solid transparent; border-radius: 8px; background: none; padding: 0;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--ub-text); cursor: pointer; font-variant-numeric: tabular-nums;
    transition: background .12s ease, color .12s ease, transform .12s ease; }
.ub-sched-cal-grid button.sun { color: var(--ub-bad); }
.ub-sched-cal-grid button.sat { color: var(--ub-accent); }
.ub-sched-cal-grid button:hover:not(:disabled):not(.on) { background: var(--ub-surface-2); border-color: var(--ub-border); }
.ub-sched-cal-grid button:active:not(:disabled) { transform: scale(.92); }
.ub-sched-cal-grid button:disabled { color: color-mix(in srgb, var(--ub-muted) 55%, transparent); font-weight: 400; cursor: default; }
.ub-sched-cal-grid button.today { border-color: color-mix(in srgb, var(--ub-accent) 45%, transparent); }
.ub-sched-cal-grid button.on { background: var(--ub-accent); border-color: var(--ub-accent); color: #fff; }
/* 이미 등록한 날: 아래 점 */
.ub-sched-cal-grid button.taken::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #0f9d76; }
@media (max-width: 800px) {
    .ub-schedule-fab { right: 16px; bottom: 60px; width: 52px; height: 52px; }
    .ub-sched-pop { right: 16px; bottom: 122px; max-height: calc(100dvh - 44px - 122px - 12px); }
}

/* ---------- 결제 › 카드 사용내역 ---------- */
.ub-payment-tabs { margin-bottom: 12px; }
.ub-notice.warn { background: var(--ub-warn-soft); color: var(--ub-warn); border: 1px solid var(--ub-warn-border); }
.ub-card-tx-setup { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; }
.ub-card-tx-cards .ub-card-head { margin-bottom: 10px; }
.ub-card-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ub-card-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 180px; padding: 9px 12px; text-align: left;
    border: 1px solid var(--ub-border); border-radius: var(--ub-radius); background: var(--ub-surface); color: var(--ub-text); font: inherit; cursor: pointer; }
.ub-card-chip:hover { border-color: var(--ub-accent-border); background: var(--ub-surface-2); }
.ub-card-chip.active { border-color: var(--ub-accent); background: var(--ub-accent-soft); box-shadow: inset 0 0 0 1px var(--ub-accent); }
.ub-card-chip.all { min-width: 110px; justify-content: center; }
.ub-card-chip.stopped { opacity: .65; }
.ub-card-chip-name { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ub-card-chip-num { font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ub-muted); font-size: 13px; }
.ub-card-chip-user { font-size: 12px; font-weight: 600; color: var(--ub-accent); }
/* 카드마다 [숨기기]/[표시](나에게만): 칩 오른쪽 위에 작게, 칩에 마우스를 올리거나 숨긴 카드면 보인다 */
.ub-card-chip-wrap { position: relative; display: flex; }
.ub-card-chip-wrap > .ub-card-chip { flex: 1; padding-right: 54px; }
.ub-card-chip-hide { position: absolute; top: 6px; right: 6px; padding: 1px 7px; font: inherit; font-size: 11px; line-height: 1.5; cursor: pointer;
    border: 1px solid var(--ub-border); border-radius: 999px; background: var(--ub-surface); color: var(--ub-muted); opacity: 0; transition: opacity .12s; }
.ub-card-chip-wrap:hover .ub-card-chip-hide, .ub-card-chip-hide:focus-visible, .ub-card-chip-wrap.is-hidden .ub-card-chip-hide { opacity: 1; }
.ub-card-chip-hide:hover { color: var(--ub-text); border-color: var(--ub-accent-border); }
.ub-card-chip-wrap.is-hidden .ub-card-chip { opacity: .55; border-style: dashed; }
.ub-card-chip-wrap.is-hidden .ub-card-chip-hide { color: var(--ub-accent); border-color: var(--ub-accent-border); }
.ub-card-chips-hidden-toggle { align-self: center; }
/* 터치 화면은 마우스를 올릴 수 없으니 늘 보인다 */
@media (hover: none) { .ub-card-chip-hide { opacity: 1; } }

.ub-card-tx-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ub-card-tx-period { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ub-card-tx-period input[type="date"] { width: 150px; }
.ub-card-tx-quick { display: inline-flex; gap: 4px; margin-left: 4px; }
.ub-card-tx-toolbar .ub-input.ub-card-tx-category-filter { width: auto; min-width: 120px; }
.ub-card-tx-toolbar .ub-input.ub-card-tx-search { width: 220px; }
.ub-card-tx-sync-result { margin-bottom: 12px; display: flex; flex-direction: column; gap: 2px; }

.ub-card-tx-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ub-card-tx-summary > div { border: 1px solid var(--ub-border); border-radius: var(--ub-radius); background: var(--ub-surface-2); padding: 10px 12px;
    display: flex; flex-direction: column; gap: 2px; }
.ub-card-tx-summary span { font-size: 12px; color: var(--ub-muted); }
.ub-card-tx-summary strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.ub-card-tx-summary strong.bad { color: var(--ub-bad); }
.ub-card-tx-summary strong.warn { color: var(--ub-warn); }

/* 열 너비를 비율로 정해 둔다: 가맹점은 남는 만큼(긴 이름은 줄바꿈). 표가 좁아지면 함께 줄고, 아주 좁으면 표 안에서 가로로 민다 */
.ub-card-tx-table { table-layout: fixed; min-width: 1000px; }
.ub-card-tx-table col.ub-col-date { width: 10.5%; }
.ub-card-tx-table col.ub-col-tag { width: 12%; }
.ub-card-tx-table col.ub-col-amount { width: 14.5%; }
/* 분류 = 왼쪽 여백 16 + 분류·세부 선택 두 개(각 80px 이상)가 들어갈 만큼만 — 남는 너비는 가맹점으로 */
.ub-card-tx-table col.ub-col-category { width: 19%; }
.ub-card-tx-table col.ub-col-memo { width: 21%; }
.ub-card-tx-body.with-card .ub-card-tx-table col.ub-col-date { width: 9.5%; }
.ub-card-tx-body.with-card .ub-card-tx-table col.ub-col-card { width: 10.5%; }
.ub-card-tx-body.with-card .ub-card-tx-table col.ub-col-tag { width: 11%; }
.ub-card-tx-body.with-card .ub-card-tx-table col.ub-col-amount { width: 13%; }
.ub-card-tx-body.with-card .ub-card-tx-table col.ub-col-category { width: 18%; }
.ub-card-tx-body.with-card .ub-card-tx-table col.ub-col-memo { width: 19%; }
/* 가맹점 태그: 있으면 알약, 없으면 마우스를 올렸을 때(터치 화면은 늘) [+ 태그] */
.ub-store-tag { display: inline-flex; max-width: 100%; align-items: center; gap: 4px; padding: 2px 8px; font: inherit; font-size: 12px; font-weight: 600;
    border: 1px solid var(--ub-ok-border, var(--ub-border)); border-radius: 999px; background: var(--ub-ok-soft); color: var(--ub-ok); cursor: pointer; text-align: left; }
.ub-store-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-store-tag svg { flex: none; }
.ub-store-tag:hover { filter: brightness(.95); text-decoration: underline; }
.ub-store-tag-add { padding: 2px 8px; font: inherit; font-size: 12px; border: 1px dashed var(--ub-border); border-radius: 999px; background: none; color: var(--ub-muted);
    cursor: pointer; white-space: nowrap; opacity: 0; }
.ub-card-tx-table tr:hover .ub-store-tag-add, .ub-store-tag-add:focus-visible { opacity: 1; }
.ub-store-tag-add:hover { color: var(--ub-accent); border-color: var(--ub-accent); }
@media (hover: none) { .ub-store-tag-add { opacity: 1; } }
.ub-store-tag-store { display: grid; gap: 4px; margin: 0 0 10px; }
.ub-store-tag-store > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; }
.ub-store-tag-store dt { color: var(--ub-muted); }
.ub-store-tag-store dd { margin: 0; overflow-wrap: anywhere; }
.ub-store-tag-form { display: flex; gap: 8px; margin: 10px 0; }
.ub-store-tag-form .ub-input { flex: 1; min-width: 0; }
.ub-store-tag-history-title { margin: 16px 0 6px; font-size: 14px; }
.ub-store-tag-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.ub-store-tag-history li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border: 1px solid var(--ub-border); border-radius: 6px; }
.ub-store-tag-change { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ub-store-tag-change s { color: var(--ub-muted); }
.ub-card-tx-table td { word-break: keep-all; overflow-wrap: anywhere; }
.ub-card-tx-table td.num { font-variant-numeric: tabular-nums; }
.ub-card-tx-table tr.ub-card-tx-cancel td.num strong { color: var(--ub-bad); text-decoration: line-through; }
/* 금액(오른쪽 정렬)과 분류가 붙어 보이지 않게 사이를 띄운다 */
.ub-card-tx-table td.num, .ub-card-tx-table th.num { padding-right: 40px; }
.ub-card-tx-category-cell { white-space: nowrap; padding-left: 16px; border-left: 1px solid var(--ub-line); }
.ub-card-tx-table thead th:nth-last-child(2) { padding-left: 16px; }
select.ub-input.ub-card-tx-category, select.ub-input.ub-card-tx-sub { width: auto; min-width: 72px; padding: 4px 6px; font-size: 13px; }
/* 분류 칸이 좁아도 분류·세부 두 상자가 칸 안에 나눠 들어가게 */
.ub-card-tx-category-cell select.ub-input { max-width: calc(50% - 3px); }
select.ub-input.ub-card-tx-sub { min-width: 76px; margin-left: 4px; }
/* 결재 중·완료된 달은 분류·메모를 못 고치지만 글자는 흐리지 않고 다른 글자와 같은 색으로 */
select.ub-input.ub-card-tx-category:disabled, select.ub-input.ub-card-tx-sub:disabled, .ub-card-tx-memo .ub-input[readonly] {
    color: var(--ub-text); -webkit-text-fill-color: var(--ub-text); opacity: 1; }
.ub-card-tx-type.bad { color: var(--ub-bad); font-weight: 600; }
/* 메모 칸은 너비를 모두 쓰고, 저장 상태는 그 아래 작게(없으면 자리 차지 안 함) */
.ub-card-tx-memo { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
/* 메모는 줄바꿈되는 칸: 내용만큼 높이가 늘어난다(field-sizing을 모르는 브라우저는 ubnet.js가 입력할 때 맞춘다) */
.ub-card-tx-memo .ub-input { flex: 1; min-width: 0; padding: 4px 8px; font-size: 13px; background: transparent; border-color: transparent;
    resize: none; min-height: 0; line-height: 1.45; overflow: hidden; field-sizing: content; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; }
.ub-card-tx-memo .ub-input:hover { border-color: var(--ub-border); }
.ub-card-tx-memo .ub-input:focus { background: var(--ub-surface); border-color: var(--ub-accent); }
.ub-card-tx-memo .ub-input::placeholder { color: var(--ub-muted); opacity: .55; }
.ub-card-tx-memo-state { flex: none; padding-left: 8px; font-size: 11px; color: var(--ub-muted); white-space: nowrap; }
.ub-card-tx-memo-state:empty { display: none; }
.ub-card-tx-memo-state.saved { color: var(--ub-ok); }
.ub-card-tx-memo-state.error { color: var(--ub-bad); font-weight: 600; }
/* 미분류(취소 건 제외) 줄은 바탕색으로 눈에 띄게 */
/* 배경색은 영수증이 필요한 가맹점(편의점·백화점·다이소 등)에만 쓴다. 미분류는 왼쪽 막대만 */
.ub-card-tx-table tr.ub-card-tx-uncat td:first-child { box-shadow: inset 3px 0 0 var(--ub-warn); }
.ub-card-tx-table tr.ub-card-tx-need-receipt td { background: var(--ub-receipt-soft); }
.ub-card-tx-table tr.ub-row-expanded td { background: var(--ub-accent-soft); }
.ub-card-tx-detail > td { background: var(--ub-surface-2); padding: 12px 14px; }
/* 상세: 왼쪽 정보, 오른쪽 첨부된 영수증 이미지(좁으면 아래로) */
.ub-card-tx-detail-body { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ub-card-tx-detail-body > .ub-card-tx-facts { flex: 1 1 420px; min-width: 0; }
.ub-card-tx-detail-receipt { flex: none; width: 240px; max-height: 360px; overflow: hidden; padding: 0; cursor: zoom-in;
    border: 1px solid var(--ub-border); border-radius: var(--ub-radius); background: var(--ub-surface); }
.ub-card-tx-detail-receipt:hover { border-color: var(--ub-accent); }
.ub-card-tx-detail-receipt img { display: block; width: 100%; height: auto; }
.ub-card-tx-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.ub-card-tx-facts > div.wide { grid-column: 1 / -1; }
.ub-card-tx-facts dt { font-size: 12px; color: var(--ub-muted); }
.ub-card-tx-facts dd { margin: 0; font-size: 13px; word-break: break-all; }

/* 월별 카드 사용 결재: 카드 칩의 상태, 결재 막대, 결재선 고르기 */
.ub-card-chip-report { margin-top: 2px; }
.ub-card-report-todo { margin-bottom: 16px; }
.ub-card-report-todo ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ub-card-report-todo li { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.ub-card-report-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 14px;
    border: 1px solid var(--ub-border); border-left: 4px solid var(--ub-muted); border-radius: var(--ub-radius); background: var(--ub-surface-2); }
.ub-card-report-bar.state-draft { border-left-color: var(--ub-warn); }
.ub-card-report-bar.state-rejected, .ub-card-report-bar.my-turn { border-left-color: var(--ub-bad); background: var(--ub-bad-soft); }
.ub-card-report-bar.state-pending { border-left-color: var(--ub-accent); }
.ub-card-report-bar.state-approved { border-left-color: var(--ub-ok); background: var(--ub-ok-soft); }
.ub-card-report-bar-main { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 4px; }
.ub-card-report-bar-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ub-card-report-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ub-card-report-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.ub-card-report-line .step { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--ub-border); background: var(--ub-surface); color: var(--ub-muted); }
.ub-card-report-line .step.done { color: var(--ub-ok); border-color: var(--ub-ok-border); }
.ub-card-report-line .step.current { color: var(--ub-accent); border-color: var(--ub-accent); font-weight: 700; }
.ub-card-report-line .arrow { color: var(--ub-muted); }
.ub-card-report-msg { color: var(--ub-text); opacity: .85; }
.ub-payment-approvers.wide { grid-column: 1 / -1; }
.ub-payment-approver-line { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.ub-payment-approver-line label { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 140px; }
.ub-payment-approver-line .arrow { padding-bottom: 8px; color: var(--ub-muted); }
.ub-leave-act-fields.two { grid-template-columns: auto 220px; }
.ub-card-report-modal .ub-card-report-pages { gap: 16px; }
/* 결재 창: 왼쪽 문서, 오른쪽 첨부 영수증(영수증이 있을 때만 넓힌다). 좁은 화면은 위아래 */
.ub-modal.ub-card-report-modal.with-receipts { width: min(1360px, 100%); }
.ub-card-report-split { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.ub-card-report-split > .ub-leave-doc-paper { flex: 1 1 auto; min-width: 0; }
.ub-card-report-receipts { flex: 0 0 420px; position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 220px);
    padding: 12px; border: 1px solid var(--ub-border); border-radius: var(--ub-radius); background: var(--ub-surface); }
.ub-card-report-receipts-head { display: flex; align-items: baseline; gap: 8px; }
.ub-card-report-receipts-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ub-card-report-receipts-chip { padding: 2px 8px; font: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--ub-border); border-radius: 999px; background: var(--ub-surface-2); color: var(--ub-text); }
.ub-card-report-receipts-chip.unlinked { border-style: dashed; color: var(--ub-muted); }
.ub-card-report-receipts-chip.active { background: var(--ub-accent); border-color: var(--ub-accent); color: #fff; }
.ub-card-report-receipts-caption { display: flex; gap: 6px; font-size: 13px; }
.ub-card-report-receipts-caption b { flex: none; color: var(--ub-accent); }
.ub-card-report-receipts-img { flex: 1; min-height: 240px; display: grid; place-items: center; overflow: auto; border-radius: 6px; background: var(--ub-surface-2); }
.ub-card-report-receipts-img a { display: contents; cursor: zoom-in; }
.ub-card-report-receipts-img img { max-width: 100%; max-height: calc(100vh - 380px); object-fit: contain; display: block; }
.ub-card-report-receipts-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 1100px) {
    .ub-card-report-split { flex-direction: column; align-items: stretch; }
    .ub-card-report-receipts { position: static; flex-basis: auto; max-height: none; }
    .ub-card-report-receipts-img img { max-height: 70vh; }
}
/* 문서 줄의 영수증 표시(화면에서만) */
.ub-card-report-receipt { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 3px; padding: 0; vertical-align: -3px; cursor: pointer;
    border: 1px solid #6d4bb8; border-radius: 4px; background: #f3edfc; color: #6d4bb8; }
.ub-card-report-receipt:hover { background: #6d4bb8; color: #fff; }
.ub-card-report-lines tr.has-receipt.active td { background: #efe7fb; }
body.ub-print-doc .ub-card-report-receipt { display: none; }

/* 결제 › 보고서 관리: 상신 안 된 카드 안내, 기간·종류·검색, 상태별 건수, 목록 */
.ub-pay-reports-missing { margin-bottom: 16px; }
.ub-pay-reports-missing ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ub-pay-reports-missing li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ub-text); }
.ub-pay-reports-missing .month { font-weight: 700; min-width: 86px; }
.ub-pay-reports-missing .who { font-weight: 600; color: var(--ub-accent); }
.ub-pay-reports-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ub-pay-reports-toolbar input[type="month"] { width: 150px; }
.ub-pay-reports-toolbar .ub-input.ub-pay-reports-kind, .ub-pay-reports-toolbar .ub-input.ub-pay-reports-company { width: auto; min-width: 120px; }
.ub-pay-reports-toolbar .ub-input.ub-pay-reports-search { width: 220px; }
.ub-pay-reports-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ub-pay-reports-stat { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px; font: inherit; cursor: pointer;
    border: 1px solid var(--ub-border); border-left: 4px solid var(--ub-muted); border-radius: var(--ub-radius);
    background: var(--ub-surface-2); color: var(--ub-text); }
.ub-pay-reports-stat span { font-size: 13px; color: var(--ub-muted); }
.ub-pay-reports-stat strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.ub-pay-reports-stat.pending { border-left-color: var(--ub-warn); }
.ub-pay-reports-stat.approved { border-left-color: var(--ub-ok); }
.ub-pay-reports-stat.rejected, .ub-pay-reports-stat.my_turn { border-left-color: var(--ub-bad); }
.ub-pay-reports-stat.all { border-left-color: var(--ub-accent); }
.ub-pay-reports-stat:hover { border-color: var(--ub-accent-border); }
.ub-pay-reports-stat.active { background: var(--ub-accent-soft); box-shadow: inset 0 0 0 1px var(--ub-accent); }
.ub-pay-reports-stat.active span { color: var(--ub-text); }
.ub-pay-reports-table td.num, .ub-pay-reports-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ub-pay-reports-table th.check, .ub-pay-reports-table td.check { width: 36px; text-align: center; }
.ub-pay-reports-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.ub-pay-reports-table tr.ub-pay-reports-canceled td { color: var(--ub-muted); }
.ub-pay-reports-table tr.ub-pay-reports-myturn td:first-child { box-shadow: inset 3px 0 0 var(--ub-bad); }
/* 결재 진행: 단계마다 점 하나(끝남 = 초록, 지금 차례 = 강조, 반려 = 빨강) */
.ub-pay-reports-steps { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: middle; }
.ub-pay-reports-steps i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ub-border); background: var(--ub-surface); }
.ub-pay-reports-steps i.done { background: var(--ub-ok); border-color: var(--ub-ok); }
.ub-pay-reports-steps i.current { background: var(--ub-accent); border-color: var(--ub-accent); }
.ub-pay-reports-steps i.bad { background: var(--ub-bad); border-color: var(--ub-bad); }
/* 선택 인쇄용 문서는 화면 밖에 그려 둔다(ubnet.printPages가 내용을 복사해 인쇄) */
.ub-pay-reports-print-stage { position: fixed; left: -20000px; top: 0; width: 230mm; pointer-events: none; }
@media (max-width: 720px) {
    .ub-pay-reports-toolbar .ub-input.ub-pay-reports-search { width: 100%; }
}

/* 카드 사용 내역서(A4 세로, 회사용 용지 위) */
.ub-card-report { font-size: 12px; }
.ub-card-report .ub-leave-doc-top { margin-bottom: 14px; }
/* 제목이 휴가 신청서보다 길어서 자간을 줄여 한 줄에 */
.ub-card-report .ub-leave-doc-top h2 { font-size: 24px; letter-spacing: .12em; white-space: nowrap; }
.ub-leave-doc-top h2.long { font-size: 24px; letter-spacing: .12em; white-space: nowrap; }
.ub-card-report-info { margin-bottom: 10px; }
.ub-card-report-info th, .ub-card-report-info td { padding: 7px 10px !important; }
.ub-card-report-sub { margin-left: 6px; font-size: 11px; color: #555; }
.ub-card-report-cont { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--paper-ink, #111); }
.ub-card-report-lines { width: 100%; border-collapse: collapse; background: #fff; table-layout: fixed; font-size: 11px; }
.ub-card-report-lines col.no { width: 7%; }
.ub-card-report-lines col.at { width: 14%; }
.ub-card-report-lines col.cat { width: 14%; }
.ub-card-report-lines col.amt { width: 13%; }
.ub-card-report-lines col.memo { width: 24%; }
.ub-card-report-lines th, .ub-card-report-lines td { border: 1px solid var(--paper-line, #333); padding: 3px 6px; height: 6.2mm; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ub-card-report-lines th { background: var(--paper-tint, #f2f4f7); color: var(--paper-ink, #111); font-weight: 600; text-align: center; }
.ub-card-report-lines td.c { text-align: center; }
.ub-card-report-lines td.r { text-align: right; font-variant-numeric: tabular-nums; }
.ub-card-report-lines tr.cancel td { color: #c62828; }
/* 올린 시각의 가맹점 태그: 화면의 문서에만(인쇄용 복사본 body.ub-print-doc에서는 숨김) */
.ub-card-report-tag { margin-left: 4px; padding: 0 5px; border: 1px solid #2e7d32; border-radius: 999px; color: #2e7d32; font-size: 10px; font-weight: 600; }
body.ub-print-doc .ub-card-report-tag { display: none; }
/* 해외결제(원화로 적은 줄)의 외화 금액 — 원화 아래 작게(줄 높이가 늘지 않게 칸 여백을 줄인다) */
.ub-card-report-fx { display: block; font-size: 8.5px; line-height: 1; color: #666; }
.ub-card-report-lines td.r:has(.ub-card-report-fx) { padding-top: 1px; padding-bottom: 1px; line-height: 1.05; }

/* 카드 사용 내역서 인쇄: 문서만 / 영수증 함께 고르기 */
.ub-card-print-modal { width: min(440px, calc(100vw - 32px)); }
.ub-card-print-options { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
.ub-card-print-option { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; text-align: left; font: inherit; cursor: pointer;
    border: 1px solid var(--ub-border); border-radius: var(--ub-radius); background: var(--ub-surface-2); color: var(--ub-text); }
.ub-card-print-option strong { font-size: 15px; }
.ub-card-print-option:hover:not(:disabled) { border-color: var(--ub-accent); background: var(--ub-accent-soft); }
.ub-card-print-option:disabled { opacity: .55; cursor: default; }

/* 첨부 영수증 쪽(A4 세로, 2×2) */
.ub-print-page.ub-card-receipt-page { padding: 12mm; display: flex; flex-direction: column; gap: 5mm; }
.ub-card-receipt-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 2.5mm; border-bottom: 1.5px solid #21508a; font-size: 12px; color: #333; }
.ub-card-receipt-head b { font-size: 16px; color: #1f3b63; letter-spacing: .1em; }
/* minmax(0, 1fr): 설명 글이 길어도 칸이 반쪽보다 넓어지지 않게(오른쪽 칸이 종이 밖으로 밀려 잘리던 것) */
.ub-card-receipt-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 5mm; }
.ub-card-receipt-cell { margin: 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 2mm; border: 1px solid #c9d0da; padding: 3mm; }
.ub-card-receipt-cell figcaption { display: flex; gap: 6px; font-size: 10.5px; line-height: 1.3; color: #333; }
.ub-card-receipt-cell figcaption b { flex: none; color: #1f3b63; }
.ub-card-receipt-cell figcaption span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-card-receipt-img { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; }
.ub-card-receipt-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.ub-card-report-lines tr.cancel td.r { text-decoration: line-through; }
.ub-card-report-foot { margin-top: auto; padding-top: 10px; }
.ub-card-report-sums { width: 100%; border-collapse: collapse; background: #fff; }
.ub-card-report-sums th, .ub-card-report-sums td { border: 1px solid var(--paper-line, #333); padding: 6px 10px; text-align: left; }
.ub-card-report-sums th { width: 17%; background: var(--paper-tint, #f2f4f7); color: var(--paper-ink, #111); text-align: center; font-weight: 600; }
.ub-card-report-sums .item { display: inline-block; margin: 1px 14px 1px 0; }
.ub-card-report .ub-leave-doc-statement { margin-top: 18px; }
.ub-card-report .ub-leave-doc-date, .ub-card-report .ub-leave-doc-sign { margin-top: 14px; }
.ub-card-report-page { position: absolute; right: 0; bottom: -4mm; font-size: 10px; color: #888; }

.ub-modal.ub-payment-modal { width: min(900px, 100%); }
/* 카드 관리 팝업: 바탕(회색) 위에 구역마다 따로 된 상자 — 머리줄(번호·제목·설명·상태) + 내용 */
.ub-payment-modal .body { display: flex; flex-direction: column; gap: 16px; background: var(--ub-bg); }
.ub-payment-modal-section { flex: none; border: 1px solid var(--ub-border); border-radius: 10px; background: var(--ub-surface); overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.ub-payment-section-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--ub-surface-2);
    border-bottom: 1px solid var(--ub-border); border-left: 4px solid var(--ub-accent); }
.ub-payment-modal-section[data-section="cards"] .ub-payment-section-head { border-left-color: var(--ub-ok); }
.ub-payment-modal-section[data-section="register"] .ub-payment-section-head { border-left-color: var(--ub-warn); }
.ub-payment-section-head .num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--ub-accent); color: #fff; font-size: 13px; font-weight: 700; }
.ub-payment-modal-section[data-section="cards"] .num { background: var(--ub-ok); }
.ub-payment-modal-section[data-section="register"] .num { background: var(--ub-warn); }
.ub-payment-section-head .text { flex: 1; min-width: 0; }
.ub-payment-section-head h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.ub-payment-section-head .ub-help { margin: 2px 0 0; }
.ub-payment-section-body { padding: 14px 16px 16px; }
.ub-payment-section-body > .ub-table-wrap { padding: 0; }
.ub-payment-card-edit > td { background: var(--ub-surface-2); padding: 12px; }
.ub-payment-register .ub-field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ub-payment-register-notes { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }

@media (max-width: 900px) {
    .ub-card-tx-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ub-card-tx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ub-payment-register .ub-field-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .ub-card-chip { min-width: 0; flex: 1 1 100%; }
    .ub-card-tx-toolbar .ub-input.ub-card-tx-search, .ub-card-tx-toolbar .ub-input.ub-card-tx-category-filter { width: 100%; }
    .ub-payment-register .ub-field-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ================= 도면3D ================= */
.ub-d3-pick { min-width: 260px; max-width: 520px; }
.ub-d3-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: stretch; height: calc(100vh - 190px); min-height: 480px; }
.ub-d3-layout.empty { grid-template-columns: minmax(0, 1fr); }
.ub-d3-layout:fullscreen { height: 100vh; padding: 12px; background: var(--ub-bg); box-sizing: border-box; }
.ub-d3-layers { position: static; min-height: 0; overflow: hidden; }
.ub-d3-bulk { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 4px; }
.ub-d3-head-row, .ub-d3-row { display: grid; grid-template-columns: 26px 26px minmax(0, 1fr) 84px; gap: 4px; align-items: center; }
.ub-d3-head-row { font-size: 11px; color: var(--ub-muted); padding: 4px 4px 2px; border-bottom: 1px solid var(--ub-line); }
.ub-d3-list { flex: 1; min-height: 0; overflow-y: auto; }
.ub-d3-row { padding: 3px 4px; border-radius: 6px; font-size: 12.5px; }
.ub-d3-row:hover { background: var(--ub-surface-2); }
.ub-d3-row.solid { background: var(--ub-accent-soft); }
.ub-d3-row input[type="checkbox"] { margin: 0 auto; }
.ub-d3-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ub-d3-name > span:not(.ub-count) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-d3-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--ub-border); }
.ub-d3-color { flex: none; width: 18px; height: 18px; padding: 0; border: 1px solid var(--ub-border); border-radius: 4px; background: none; cursor: pointer; }
.ub-d3-color::-webkit-color-swatch-wrapper { padding: 0; }
.ub-d3-color::-webkit-color-swatch { border: none; border-radius: 3px; }
.ub-input.ub-d3-height { width: 100%; padding: 2px 6px; font-size: 12px; text-align: right; }
.ub-d3-tip { margin: 6px 4px 0; font-size: 11.5px; }
.ub-d3-stage { position: relative; min-width: 0; min-height: 0; border: 1px solid var(--ub-border); border-radius: var(--ub-radius); overflow: hidden; background: var(--ub-surface); }
.ub-d3-host { position: absolute; inset: 0; }
.ub-d3-host canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ub-d3-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--ub-surface); }
.ub-d3-info { position: absolute; right: 10px; top: 10px; min-width: 220px; max-width: 360px; padding: 8px 10px; border: 1px solid var(--ub-border); border-radius: 8px;
    background: color-mix(in srgb, var(--ub-surface) 92%, transparent); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); font-size: 12.5px; pointer-events: none; }
.ub-d3-info > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 2px 0; }
.ub-d3-info span { color: var(--ub-muted); }
.ub-d3-info strong { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .ub-d3-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
    .ub-d3-layers { max-height: 320px; }
    .ub-d3-stage { height: 70vh; min-height: 360px; }
    .ub-d3-pick { min-width: 0; width: 100%; }
}
/* ================= 결제 › 월별 첨부(영수증) ================= */
/* 왼쪽 사용내역은 표에 맞는 너비까지만, 남는 너비는 오른쪽 영수증이 가져간다(최소 380px) */
.ub-card-tx-body { display: grid; grid-template-columns: minmax(0, 1270px) minmax(380px, 1fr); gap: 16px; align-items: start; }
.ub-card-tx-body.with-card { grid-template-columns: minmax(0, 1430px) minmax(380px, 1fr); }
.ub-card-tx-body > .ub-card { margin: 0; }
.ub-receipts { position: sticky; top: 8px; max-height: calc(100vh - 24px); overflow-y: auto; }
.ub-receipts .warn { color: var(--ub-warn); }
.ub-receipt-progress, .ub-receipts .ub-notice { margin-bottom: 10px; font-size: 13px; }
.ub-receipt-locked { margin-bottom: 10px; }
.ub-receipt-drop { position: relative; border: 1.5px dashed var(--ub-border); border-radius: var(--ub-radius); padding: 12px; margin-bottom: 12px;
    text-align: center; color: var(--ub-muted); font-size: 12.5px; line-height: 1.5; transition: border-color .15s, background .15s; }
.ub-receipt-drop.big { padding: 36px 16px; }
.ub-receipt-drop:hover, .ub-receipt-drop.over { border-color: var(--ub-accent); background: var(--ub-accent-soft); color: var(--ub-accent); }
.ub-receipt-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ub-receipt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ub-receipt-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; cursor: pointer; font: inherit; color: inherit;
    background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: var(--ub-radius); transition: border-color .15s, box-shadow .15s; }
.ub-receipt-card:hover { border-color: var(--ub-accent-border); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.ub-receipt-card.hl { border-color: var(--ub-accent); box-shadow: 0 0 0 2px var(--ub-accent-border); }
.ub-receipt-card.unlinked { border-color: var(--ub-warn-border); }
.ub-receipt-thumb { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--ub-surface-2); }
.ub-receipt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ub-receipt-state { position: absolute; left: 6px; top: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.ub-receipt-info { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px 9px; font-size: 12.5px; min-width: 0; }
.ub-receipt-info > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-card-tx-receipt { display: flex; width: fit-content; align-items: center; gap: 3px; margin-top: 3px; padding: 1px 7px; font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--ub-accent-border); border-radius: 999px; background: var(--ub-accent-soft); color: var(--ub-accent); cursor: pointer; }
.ub-card-tx-receipt:hover { background: var(--ub-accent); color: #fff; }
.ub-card-tx-table tr.ub-card-tx-hl > td { background: var(--ub-accent-soft); }
.ub-modal.ub-receipt-modal { width: min(1100px, 100%); }
.ub-receipt-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.ub-receipt-big { max-height: 70vh; overflow: auto; border: 1px solid var(--ub-border); border-radius: var(--ub-radius); background: var(--ub-surface-2); }
.ub-receipt-big img { display: block; width: 100%; height: auto; }
/* 여러 쪽 PDF: 크게 보기 아래 쪽 넘기기(스크롤해도 아래에 붙어 있게) */
.ub-receipt-big-pages { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px;
    background: var(--ub-surface); border-top: 1px solid var(--ub-border); }
.ub-receipt-pages { position: absolute; right: 6px; top: 6px; background: #6d4bb8; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
/* 합치기: 고른 순서 번호 */
.ub-receipt-merge-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ub-receipt-card.merge-mode { cursor: copy; }
.ub-receipt-card.merge-mode:not(.merge-picked) .ub-receipt-thumb img { opacity: .75; }
.ub-receipt-card.merge-picked { border-color: #6d4bb8; box-shadow: 0 0 0 2px rgba(109, 75, 184, .45); }
.ub-receipt-merge-no { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; background: #6d4bb8; color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.ub-modal.ub-receipt-merge-modal { width: min(520px, calc(100vw - 32px)); }
.ub-receipt-merge-list { margin: 6px 0 12px; padding-left: 22px; }
.ub-receipt-merge-list li { margin: 2px 0; word-break: break-all; }
.ub-receipt-side h3 { font-size: 13px; margin: 0 0 6px; color: var(--ub-muted); }
.ub-receipt-side h3:not(:first-child) { margin-top: 16px; }
.ub-receipt-side select { width: 100%; }
.ub-receipt-facts { display: grid; gap: 4px; margin: 0; }
.ub-receipt-facts > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.ub-receipt-facts dt { color: var(--ub-muted); }
.ub-receipt-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ub-receipt-text { margin-top: 10px; font-size: 12px; }
.ub-receipt-text pre { white-space: pre-wrap; max-height: 220px; overflow: auto; padding: 8px; background: var(--ub-surface-2); border-radius: 6px; font-size: 11.5px; }
@media (max-width: 1200px) {
    .ub-card-tx-body { grid-template-columns: minmax(0, 1fr); }
    .ub-receipts { position: static; max-height: none; }
}
@media (max-width: 760px) {
    .ub-receipt-detail { grid-template-columns: minmax(0, 1fr); }
    .ub-receipt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- 물품구매 (/purchase) ---------- */
.ub-purchase .ub-card + .ub-card { margin-top: 16px; }
.ub-purchase-items { min-width: 980px; table-layout: fixed; }
.ub-purchase-items th.check, .ub-purchase-items td.check { width: 34px; }
.ub-purchase-items th.name { width: 18%; }
.ub-purchase-items th.spec { width: 14%; }
.ub-purchase-items th.qty { width: 70px; }
.ub-purchase-items th.price, .ub-purchase-items th.amount { width: 110px; }
.ub-purchase-items th.url { width: 12%; }
.ub-purchase-items th.who { width: 80px; }
.ub-purchase-items th.actions { width: 120px; }
.ub-purchase-items td { word-break: keep-all; overflow-wrap: anywhere; }
.ub-purchase-items td.url a { color: var(--ub-accent); }
.ub-purchase-items th.url, .ub-purchase-items td.url { padding-left: 18px; }
.ub-purchase-order-items th:last-child, .ub-purchase-order-items td:last-child { padding-left: 14px; }
.ub-purchase-items .ub-input { width: 100%; padding: 4px 6px; font-size: 13px; }
.ub-purchase-items .ub-input.num { text-align: right; }
.ub-purchase-items tr.selected td { background: var(--ub-accent-soft); }
.ub-purchase-items tr.ub-purchase-new td { background: var(--ub-surface-2); }
.ub-purchase-items tr.ub-purchase-editing td { background: var(--ub-warn-soft); }
.ub-purchase-items tfoot td { border-bottom: 0; padding-top: 10px; }
.ub-purchase-year { display: flex; align-items: center; gap: 8px; }
.ub-purchase-order-table { min-width: 860px; }
.ub-purchase-order-row { cursor: pointer; }
.ub-purchase-order-row:hover td { background: var(--ub-surface-2); }
.ub-purchase-order-row.open td { background: var(--ub-accent-soft); }
.ub-purchase-order-table td.toggle, .ub-purchase-order-table th.toggle { width: 24px; color: var(--ub-muted); }
.ub-purchase-order-detail > td { background: var(--ub-surface-2); padding: 8px 12px 12px; }
.ub-purchase-order-items { background: var(--ub-surface); border-radius: 6px; }
.ub-purchase-done-item.clickable { cursor: pointer; }
.ub-purchase-done-item.clickable:hover td { background: var(--ub-accent-soft); }
.ub-purchase-done-item.no-receipt td:first-child { box-shadow: inset 3px 0 0 var(--ub-warn); }
.ub-purchase-receipt-mini { display: inline-block; width: 26px; height: 34px; vertical-align: middle; margin-right: 6px; border: 1px solid var(--ub-border); border-radius: 3px; overflow: hidden; background: var(--ub-surface-2); }
.ub-purchase-receipt-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.ub-modal.ub-purchase-order-modal { width: min(1280px, 96vw); max-width: none; }
.ub-modal.ub-purchase-complete { width: min(720px, 96vw); max-width: none; }
.ub-modal.ub-purchase-settings { width: min(960px, 96vw); max-width: none; }
.ub-purchase-order-head { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0; }
.ub-purchase-order-head .ub-field.grow { flex: 1 1 260px; }
.ub-purchase-order-total { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 18px; }
.ub-purchase-progress, .ub-purchase-upload-errors { margin-bottom: 10px; font-size: 13px; }
.ub-purchase-order-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ub-purchase-order-body h3 { font-size: 14px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.ub-purchase-statement-file { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.ub-purchase-statement-file .ub-receipt-card { width: 110px; flex: none; }
.ub-purchase-statement-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; }
.ub-purchase-statement-meta strong { overflow-wrap: anywhere; }
.ub-purchase-statement-meta .ub-btn { margin-right: 4px; }
.ub-purchase-no-statement { padding: 14px; border: 1px dashed var(--ub-warn-border); border-radius: var(--ub-radius); background: var(--ub-warn-soft); margin: 0 0 12px; }
.ub-purchase-receipts .ub-purchase-order-items { margin-bottom: 12px; }
.ub-purchase-order-items tr.no-receipt td:first-child { box-shadow: inset 3px 0 0 var(--ub-warn); }
.ub-purchase-receipt-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ub-purchase-receipt { cursor: default; }
.ub-purchase-receipt .ub-receipt-thumb { border: 0; padding: 0; width: 100%; cursor: pointer; font: inherit; }
.ub-purchase-receipt .ub-receipt-info select { width: 100%; margin-top: 4px; padding: 3px 4px; font-size: 12px; }
.ub-purchase-receipt .ub-receipt-info > select, .ub-purchase-receipt-actions { white-space: normal; }
.ub-purchase-receipt-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ub-purchase-picked { margin: 0 0 10px; padding-left: 18px; font-size: 13px; max-height: 160px; overflow: auto; }
.ub-purchase-complete-items { margin-bottom: 8px; }
.ub-purchase-viewer-item { margin: 0; line-height: 1.6; }

.ub-party { border: 1px solid var(--ub-border); border-radius: var(--ub-radius); padding: 8px 12px 12px; margin: 0; min-width: 0; }
.ub-party legend { font-size: 12px; font-weight: 700; color: var(--ub-accent); padding: 0 4px; }
.ub-party-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.ub-party-grid .ub-field.wide { grid-column: span 3; }
.ub-party-grid .ub-input { width: 100%; padding: 4px 6px; font-size: 13px; }
.ub-party-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; margin: 0; font-size: 13px; }
.ub-party-facts .wide { grid-column: span 3; }
.ub-party-facts dt { color: var(--ub-muted); font-size: 11.5px; }
.ub-party-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ub-party-stack { display: flex; flex-direction: column; gap: 10px; }
.ub-party-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 10px; }

@media (max-width: 900px) {
    .ub-purchase-order-body, .ub-party-pair { grid-template-columns: 1fr; }
    .ub-party-grid, .ub-party-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ub-party-grid .ub-field.wide, .ub-party-facts .wide { grid-column: span 2; }
}
/* 창 어디에 끌어 놓아도 받는 동안: 창 안의 끌어 놓기 칸을 강조 (ubnet.js data-drop-zone) */
[data-drop-zone].ub-drop-over .ub-receipt-drop { border-color: var(--ub-accent); background: var(--ub-accent-soft); color: var(--ub-accent); }
[data-drop-zone].ub-drop-over { box-shadow: 0 0 0 3px var(--ub-accent-border), 0 20px 60px rgba(0,0,0,.25); }

/* 물품구매: 연결된 영수증 금액 ≠ 목록 금액 → 붉은 배경 */
.ub-purchase-order-items tr.amount-mismatch td,
.ub-purchase-done-item.amount-mismatch td,
.ub-purchase-done-item.clickable.amount-mismatch:hover td { background: var(--ub-bad-soft); }
.ub-purchase-order-items tr.amount-mismatch td:first-child { box-shadow: inset 3px 0 0 var(--ub-bad); }
.ub-purchase-receipt-amount { display: block; font-size: 11.5px; font-weight: 700; color: var(--ub-bad); white-space: nowrap; }
.ub-purchase-receipt.amount-mismatch { border-color: var(--ub-bad); }
.ub-purchase-receipt.amount-mismatch .ub-receipt-info { background: var(--ub-bad-soft); }
.ub-purchase-receipt.amount-mismatch .ub-receipt-info > strong { color: var(--ub-bad); }
.ub-purchase-mismatch-note { margin: 6px 0 0; font-size: 13px; }
.ub-purchase-order-table .ub-badge + .ub-badge { margin-left: 4px; }
/* 물품구매 › 구매 완료 목록: 달 합계·해 합계 줄 */
.ub-purchase-order-table tr.ub-purchase-month-total td { background: var(--ub-surface-2); color: var(--ub-muted); font-size: 12.5px; border-bottom: 2px solid var(--ub-border); }
.ub-purchase-order-table tr.ub-purchase-month-total td strong { color: var(--ub-text); }
.ub-purchase-order-table tr.ub-purchase-year-total td { background: var(--ub-accent-soft); color: var(--ub-accent); font-weight: 700; border-bottom: 0; padding-top: 10px; padding-bottom: 10px; }
.ub-purchase-order-table tr.ub-purchase-year-total td strong { font-size: 15px; }
/* 물품구매: 거래명세표 합계 ≠ 항목 금액 합계 → 거래명세표 버튼 붉게 */
.ub-btn.ub-purchase-statement-mismatch { background: var(--ub-bad); border-color: var(--ub-bad); color: #fff; }
.ub-btn.ub-purchase-statement-mismatch:hover { filter: brightness(1.08); }
.ub-purchase-statement-mismatch-text { color: var(--ub-bad); font-weight: 600; }
/* ---------- 조직도 (/org) ---------- */
.ub-org .ub-admin-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ub-org-search { width: 240px; }
.ub-org-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ub-org-chart { overflow: auto; padding: 20px 12px 28px; }
.ub-org-detail { position: sticky; top: 72px; }
.ub-org-hint { text-align: center; margin-top: 12px; }

/* 트리: ul/li와 가상 요소로 잇는 선 */
.ub-org-tree, .ub-org-tree ul { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.ub-org-tree ul { position: relative; padding-top: 22px; }
.ub-org-tree li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 8px 0; }
.ub-org-tree > li { padding-top: 0; }
.ub-org-tree li::before, .ub-org-tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 1.5px solid var(--ub-border); }
.ub-org-tree li::after { right: auto; left: 50%; border-left: 1.5px solid var(--ub-border); }
.ub-org-tree li:only-child::before, .ub-org-tree > li::before, .ub-org-tree > li::after { display: none; }
.ub-org-tree li:only-child::after { border-top: 0; }
.ub-org-tree li:first-child::before, .ub-org-tree li:last-child::after { border: 0 none; }
.ub-org-tree li:last-child::before { border-right: 1.5px solid var(--ub-border); border-radius: 0 8px 0 0; }
.ub-org-tree li:first-child:not(:only-child)::after { border-radius: 8px 0 0 0; }
.ub-org-tree ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1.5px solid var(--ub-border); }
.ub-org-tree ul.ub-org-members, .ub-org-tree ul.ub-org-members::before { display: block; padding: 0; content: none; }
.ub-org-tree ul.ub-org-members li { display: block; padding: 0; }
.ub-org-tree ul.ub-org-members li::before, .ub-org-tree ul.ub-org-members li::after { content: none; }

/* 상자 */
.ub-org-node { width: 196px; background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: var(--ub-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, .06); cursor: pointer; text-align: left; overflow: hidden; }
.ub-org-node:hover { border-color: var(--ub-accent-border); }
.ub-org-node.selected { border-color: var(--ub-accent); box-shadow: 0 0 0 2px var(--ub-accent-border); }
.ub-org-node.company { width: 240px; cursor: default; border-color: var(--ub-accent); }
.ub-org-node-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--ub-accent-soft); border-bottom: 1px solid var(--ub-border); }
.ub-org-node.company .ub-org-node-head { background: var(--ub-accent); }
.ub-org-node.company .ub-org-node-head, .ub-org-node.company .ub-org-node-count { color: #fff; }
.ub-org-node-name { font-weight: 700; color: var(--ub-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-org-node-count { margin-left: auto; font-size: 11.5px; color: var(--ub-muted); white-space: nowrap; }
.ub-org-members { padding: 4px 0; }
.ub-org-empty { padding: 8px 10px; font-size: 12px; color: var(--ub-muted); }
.ub-org-person { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 7px; width: 100%; padding: 4px 10px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ub-org-person:hover { background: var(--ub-surface-2); }
.ub-org-person.selected { background: var(--ub-accent-soft); }
.ub-org-person.head { border-bottom: 1px dashed var(--ub-line); padding-bottom: 6px; margin-bottom: 2px; }
.ub-org-person.head .ub-org-person-name { font-weight: 700; }
.ub-org-person.hit { background: var(--ub-warn-soft); }
.ub-org-person.dim { opacity: .35; }
.ub-org-person-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-org-person-pos { font-size: 11.5px; color: var(--ub-muted); white-space: nowrap; }
.ub-org-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ub-accent-soft); color: var(--ub-accent); font-size: 12px; font-weight: 700; }
.ub-org-person.head .ub-org-avatar { background: var(--ub-accent); color: #fff; }
.ub-org-avatar.big { width: 52px; height: 52px; font-size: 22px; flex: none; }
.ub-org-avatar.big.dept { border-radius: 12px; }

/* 상세 */
.ub-org-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ub-org-profile h2 { margin: 0; font-size: 18px; }
.ub-org-profile-sub { margin: 2px 0 0; color: var(--ub-muted); font-size: 13px; }
.ub-org-facts { display: grid; gap: 7px; margin: 0 0 12px; }
.ub-org-facts > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.ub-org-facts dt { color: var(--ub-muted); }
.ub-org-facts dd { margin: 0; overflow-wrap: anywhere; }
.ub-org-facts .ub-btn.link, .ub-org-list .ub-btn.link { padding: 0; font-size: 13px; }
.ub-org-sep { margin: 0 4px; color: var(--ub-muted); }
.ub-org-detail h3 { font-size: 13px; color: var(--ub-muted); margin: 14px 0 6px; }
.ub-org-list { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 3px; }
.ub-org-pick { padding: 40px 12px; }

@media (max-width: 1100px) {
    .ub-org-body { grid-template-columns: 1fr; }
    .ub-org-detail { position: static; }
}/* 조직도: 넓으면 가로로 스크롤(가운데 정렬은 들어갈 때만), 회사 상자 이름, 머리줄 */
.ub-org-chart > .ub-org-tree { width: max-content; min-width: 100%; }
.ub-org-node.company .ub-org-node-name { color: #fff; }
.ub-org .ub-admin-head { flex-direction: row; }
.ub-org .ub-admin-head .ub-input.ub-org-search { width: 260px; flex: 0 0 260px; }
.ub-org-tree li, .ub-org-tree ul:not(.ub-org-members) { min-width: max-content; }

/* 역할 권한: 역할 열 머리(이름·추가한 역할·사용자 수·이름 변경/삭제), 지운 기본 역할 되살리기 */
.ub-role-col { min-width: 96px; vertical-align: bottom; }
.ub-role-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ub-role-name { font-weight: 700; color: var(--ub-text); white-space: nowrap; }
.ub-role-head .ub-badge { font-size: 10px; padding: 1px 6px; }
.ub-role-actions { display: flex; gap: 6px; }
.ub-role-actions .ub-btn.link { padding: 0; font-size: 11.5px; font-weight: 400; }
.ub-role-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }

/* ---------- 고객사·거래처 (/partners) ---------- */
.ub-partners-tabs { margin-bottom: 12px; }
.ub-partners-tabs .ub-tab .ub-count { margin-left: 6px; }
/* 왼쪽 목록은 남는 너비, 오른쪽 편집 칸은 460~640px. 좁으면 편집 칸을 목록 아래로 */
.ub-partners-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(460px, 640px); gap: 16px; align-items: start; }
.ub-partners-body > .ub-card { margin-bottom: 0; }
.ub-partners-list .ub-card-head h2, .ub-partners-editor .ub-card-head h2 { margin: 0; }
.ub-partners-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ub-partners-search { flex: 1; min-width: 0; }
.ub-partners-table td { vertical-align: top; }
.ub-partners-more { margin-left: 4px; }
/* 머리글을 눌러 정렬: 지금 정렬 중인 열은 강조 + ▲/▼, 나머지는 흐린 ↕ */
.ub-sort-th { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font: inherit; color: inherit; }
.ub-sort-th:hover { color: var(--ub-accent); }
.ub-sort-th:focus-visible { outline: 2px solid var(--ub-accent); outline-offset: 2px; border-radius: 3px; }
.ub-sort-th.active { color: var(--ub-accent); }
.ub-sort-arrow { font-size: 10px; opacity: .45; }
.ub-sort-th.active .ub-sort-arrow { opacity: 1; }
.ub-partner-code { font-variant-numeric: tabular-nums; color: var(--ub-muted); font-weight: 600; }
.ub-partners-editor .ub-card-head h2 .ub-partner-code { margin-right: 6px; }
.ub-partner-name-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }

/* ---------- 프로젝트 관리 (/projects) — 고객사·거래처와 같은 목록 | 편집 칸 틀(.ub-partners-*)을 쓴다 ---------- */
.ub-projects-body { grid-template-columns: minmax(0, 1fr) minmax(480px, 600px); }
.ub-projects-status { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ub-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--ub-border); border-radius: 999px;
    background: var(--ub-surface); color: var(--ub-text); font-size: 13px; cursor: pointer; }
.ub-chip:hover { border-color: var(--ub-accent-border); }
.ub-chip.active { background: var(--ub-accent-soft); border-color: var(--ub-accent-border); color: var(--ub-accent); font-weight: 700; }
.ub-projects-table th.num { text-align: right; }
.ub-projects-table th.num .ub-sort-th { justify-content: flex-end; }
.ub-projects-period { font-size: 12.5px; color: var(--ub-muted); }
.ub-projects-total td { font-weight: 700; border-top: 1px solid var(--ub-border); }
.ub-money { text-align: right; font-variant-numeric: tabular-nums; }
.ub-money.ub-negative { color: var(--ub-bad); }
.ub-project-dates, .ub-project-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 담당자: 줄마다 [PM 고르기] 이름 부서·직급 … ×, PM 줄은 강조 */
.ub-project-member-add { max-width: 320px; }
.ub-project-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ub-project-members li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--ub-border); border-radius: 8px; background: var(--ub-surface-2); }
.ub-project-members li.pm { border-color: var(--ub-accent-border); background: var(--ub-accent-soft); }
.ub-project-members .ub-check input { margin: 0; }
.ub-project-pm-badge { font-size: 10px; padding: 1px 6px; }
.ub-project-members li:not(.pm) .ub-project-pm-badge { opacity: .5; }
/* 구매 내역(물품구매에서 이 프로젝트로 지정한 품목) — 아직 안 산 줄은 흐리게 */
.ub-project-purchases-section { margin-top: 12px; }
.ub-project-purchases th.num { text-align: right; }
.ub-project-purchases tr.planned td { color: var(--ub-muted); }
.ub-project-purchases tfoot td { border-bottom: 0; }
/* 요약·현장·건 (프로젝트 → 현장 → 건) */
.ub-projects-counts { display: block; font-size: 12px; }
.ub-project-status-summary { display: flex; align-items: center; min-height: 36px; }
.ub-project-summary, .ub-project-sites { margin-top: 12px; }
.ub-project-summary .ub-project-amounts input { background: var(--ub-surface-2); }
.ub-project-sites > h3 { display: flex; align-items: center; gap: 6px; }
.ub-project-site { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--ub-border); border-radius: 8px; background: var(--ub-surface-2); }
.ub-project-site > header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ub-project-site > header .name { font-size: 14px; }
.ub-project-site-desc { margin: 4px 0 0; }
.ub-project-site-empty { margin: 6px 0 0; }
.ub-project-deals { margin-top: 6px; background: var(--ub-surface); table-layout: fixed; width: 100%; }
.ub-project-deals td { overflow: hidden; text-overflow: ellipsis; }
.ub-project-deals td.num { text-align: right; }
.ub-project-deals td .sub { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 현장마다 표가 따로라 열 너비를 고정해 줄을 맞춘다: 코드 · 이름(아래 기간·견적 수) · 상태 · 공급가액 · 실제 원가 */
.ub-project-deals td:nth-child(1) { width: 104px; }
.ub-project-deals td:nth-child(3) { width: 64px; }
.ub-project-deals td:nth-child(4) { width: 100px; }
.ub-project-deals td:nth-child(5) { width: 80px; }
.ub-project-site-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 6px; margin: 6px 0; }
.ub-project-site-form .wide { grid-column: 1 / -1; }
.ub-project-site-form .actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; }
/* 건 창: 정보 + 견적 표 + 이 건의 구매 내역 */
.ub-modal.ub-project-deal-modal { width: min(920px, calc(100vw - 32px)); max-width: none; }
.ub-project-deal .ub-field-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.ub-project-quotes-section, .ub-project-deal-purchases { margin-top: 12px; }
.ub-project-quotes th.num, .ub-project-quotes td.num { text-align: right; }
.ub-project-quotes tr.accepted td { background: var(--ub-accent-soft); }
.ub-project-quotes td .ub-input { min-width: 0; width: 100%; }
.ub-project-quotes td.actions { text-align: right; }
.ub-project-quotes td.note { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
    .ub-project-deal .ub-field-grid, .ub-project-site-form { grid-template-columns: minmax(0, 1fr); }
}

/* 물품구매 품목 ↔ 프로젝트, 구매 완료 건 ↔ 거래처 */
/* 프로젝트 칸이 늘어난 만큼 품명·규격·링크를 줄여 메모 칸을 남긴다 */
.ub-purchase-items { min-width: 1140px; }
.ub-purchase-items th.project { width: 14%; }
.ub-purchase-items th.name { width: 15%; }
.ub-purchase-items th.spec { width: 10%; }
.ub-purchase-items th.url { width: 7%; }
.ub-purchase-project { display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; min-width: 0; }
.ub-purchase-project .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ub-purchase-order-items td.project { max-width: 220px; }
.ub-purchase-vendor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.ub-purchase-vendor a { color: var(--ub-accent); }
.ub-purchase-order-table td.supplier .ub-partner-code { margin-right: 4px; }
.ub-partners-editor { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; }
.ub-partner-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ub-partner-fieldset h3 { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--ub-border); font-size: 14px; }
.ub-partner-fieldset h3:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ub-partner-fieldset .ub-form-field.wide { grid-column: 1 / -1; }
.ub-partner-fieldset .ub-help.warn { color: var(--ub-warn); }
.ub-partner-bank { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 12px; }
.ub-partner-contacts { display: flex; flex-direction: column; gap: 8px; }
.ub-partner-contact { border: 1px solid var(--ub-border); border-radius: 8px; padding: 8px 10px 10px; background: var(--ub-surface-2); }
.ub-partner-contact.primary { border-color: var(--ub-accent-border); }
.ub-partner-contact-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ub-partner-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ub-partner-contact-grid input.ub-input { padding: 6px 8px; font-size: 13px; }
.ub-partner-contact-grid .wide { grid-column: 1 / -1; }
.ub-partner-note { width: 100%; resize: vertical; }
.ub-partner-meta { margin: 10px 0 0; }
@media (max-width: 1100px) {
    .ub-partners-body { grid-template-columns: minmax(0, 1fr); }
    .ub-partners-editor { position: static; max-height: none; }
}
@media (max-width: 600px) {
    .ub-partner-bank, .ub-partner-contact-grid { grid-template-columns: minmax(0, 1fr); }
    .ub-partners-editor .ub-field-grid { grid-template-columns: minmax(0, 1fr); }
    .ub-partner-name-row { grid-template-columns: 110px minmax(0, 1fr); }
}

/* ---------- 알림 🔔 (상단) ---------- */
.ub-bell { position: relative; }
.ub-bell-button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; }
.ub-bell-button.has { color: var(--ub-accent); border-color: var(--ub-accent-border); }
.ub-bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--ub-bad); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.ub-bell-backdrop { position: fixed; inset: 0; z-index: 90; }
.ub-bell-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 91; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
    background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); padding: 8px; }
.ub-bell-head { display: flex; align-items: center; gap: 6px; padding: 4px 6px 8px; border-bottom: 1px solid var(--ub-border); margin-bottom: 4px; }
.ub-bell-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ub-bell-list button { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px; border: 0; border-radius: 6px; background: none;
    color: var(--ub-text); text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.ub-bell-list button:hover { background: var(--ub-surface-2); }
.ub-bell-list li.unread button { background: var(--ub-accent-soft); }
.ub-bell-list li.unread .text { font-weight: 600; }
/* 물품구매 승인 상태(요청·승인 칸) */
.ub-purchase-approval { margin-top: 3px; }
.ub-purchase-reject-reason { color: var(--ub-bad); font-size: 12px; margin-top: 2px; }
.ub-purchase-locked { margin-left: 4px; cursor: help; }
/* 승인 요청 묶음(구매 목록 위) */
.ub-purchase-requests { margin: 0 0 12px; padding: 10px; border: 1px solid var(--ub-warn); border-radius: 8px; background: var(--ub-warn-soft); }
.ub-purchase-requests[data-status=approved] { border-color: var(--ub-ok); background: var(--ub-ok-soft); }
.ub-purchase-requests[data-status=rejected] { border-color: var(--ub-bad); background: var(--ub-bad-soft); }
.ub-purchase-requests[data-status=rejected] h3 { color: var(--ub-bad); }
/* 묶음 아래에 붙는 요청 메시지 / 반려 사유 */
.ub-purchase-request-message { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 10px; border-radius: 6px; border-left: 3px solid var(--ub-border); background: var(--ub-surface-2); font-size: 13px; white-space: pre-wrap; }
.ub-purchase-request-message .who { font-weight: 600; color: var(--ub-muted); }
.ub-purchase-request-message.reject { border-left-color: var(--ub-bad); background: var(--ub-bad-soft); color: var(--ub-bad); }
.ub-purchase-request-message.reject .who { color: var(--ub-bad); }
.ub-purchase-requests h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; }
.ub-purchase-request { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 6px 8px; border-radius: 6px; background: var(--ub-surface); }
.ub-purchase-request + .ub-purchase-request { margin-top: 6px; }
.ub-purchase-request-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; border: 0; background: none; padding: 0; color: var(--ub-text); font: inherit; text-align: left; cursor: pointer; }
.ub-purchase-request-head .total { font-variant-numeric: tabular-nums; }
.ub-purchase-request-actions { display: flex; gap: 6px; }
.ub-purchase-request-items { grid-column: 1 / -1; margin: 4px 0 0; }
.ub-purchase-request-items td.num { text-align: right; }

/* ---------- 재고관리 › 사내 비품 (/inventory, 재고관리 하위) — 목록 | 편집 칸 틀(.ub-partners-*)을 쓴다 ---------- */
.ub-inventory-subtabs { display: flex; gap: 6px; margin: 0 0 12px; }
.ub-supplies-body { grid-template-columns: minmax(0, 1fr) minmax(480px, 620px); }
.ub-supply-pending { margin-bottom: 16px; border-color: var(--ub-accent-border); }
.ub-supply-pending .ub-card-head small { margin-left: 4px; }
.ub-supply-pending-table th.num, .ub-supply-table th.num, .ub-supply-moves th.num, .ub-supply-assets th.num { text-align: right; }
.ub-supply-pending-table td.actions { white-space: nowrap; text-align: right; }
.ub-supply-kinds { margin: 0 0 8px; }
.ub-supply-table tr.ub-supply-low td { background: var(--ub-warn-soft); }
.ub-supply-table td .ub-badge + strong { margin-left: 4px; }
.ub-supply-meta { margin: 0 0 10px; }
.ub-supply-edit { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ub-border); }
/* 종류 고르기: 카드 두 개 */
.ub-supply-kind-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ub-supply-kind { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--ub-border); border-radius: 8px; cursor: pointer; }
.ub-supply-kind input { position: absolute; opacity: 0; pointer-events: none; }
.ub-supply-kind.active { border-color: var(--ub-accent-border); background: var(--ub-accent-soft); }
.ub-supply-form .ub-field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ub-supply-form .ub-form-field.wide { grid-column: 1 / -1; }
/* 숫자 칸 */
.ub-supply-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.ub-supply-tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--ub-border); border-radius: 8px; background: var(--ub-surface-2); }
.ub-supply-tile strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.ub-supply-tile strong small { font-size: 12px; font-weight: 400; color: var(--ub-muted); }
.ub-supply-tile.low { border-color: var(--ub-warn); background: var(--ub-warn-soft); }
/* 소모품 동작(사용 기록·입고·조정·구매 요청) */
.ub-supply-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ub-supply-move-form, .ub-supply-asset-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 10px; border: 1px solid var(--ub-border); border-radius: 8px; background: var(--ub-surface-2); }
.ub-supply-move-form .ub-form-field, .ub-supply-asset-form .ub-form-field { flex: 0 1 140px; min-width: 110px; }
.ub-supply-move-form .ub-form-field.grow, .ub-supply-asset-form .ub-form-field.grow { flex: 1 1 200px; }
.ub-supply-asset-form .ub-item-panel-actions.wide { flex: 1 1 100%; margin: 0; }
.ub-supply-message { margin: 8px 0; }
.ub-supply-h3 { display: flex; align-items: center; gap: 6px; margin: 16px 0 6px; font-size: 14px; }
.ub-supply-plus { color: var(--ub-ok); font-variant-numeric: tabular-nums; }
.ub-supply-minus { color: var(--ub-bad); font-variant-numeric: tabular-nums; }
/* 비품 한 대씩 */
.ub-supply-asset-tools { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.ub-supply-asset-new { margin-bottom: 10px; }
.ub-supply-asset-detail > td { background: var(--ub-surface-2); padding: 10px; }
.ub-supply-asset-info { margin: 8px 0; }
.ub-supply-asset-info summary { cursor: pointer; color: var(--ub-accent); font-size: 13px; margin-bottom: 6px; }
.ub-supply-events { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ub-supply-events li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* 입고 창 */
.ub-supply-receive-item { padding: 8px 10px; margin-bottom: 10px; border-radius: 8px; background: var(--ub-surface-2); }
.ub-supply-receive-target { display: flex; gap: 16px; margin-bottom: 8px; }
.ub-supply-receive-modal select.ub-input { width: 100%; }
.ub-supply-receive-effect { margin: 8px 0 0; }
@media (max-width: 1100px) {
    .ub-supplies-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .ub-supply-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ub-supply-form .ub-field-grid, .ub-supply-kind-pick { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 결재함 (/approval) ---------- */
.ub-admin-head .ub-approval-search { width: 260px; max-width: 100%; flex: 0 1 260px; }
/* 조회 기간(완료의 처리일): 검색 칸 왼쪽 */
.ub-approval-period { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ub-approval-period input[type="date"] { width: 145px; }
.ub-approval-period-quick { display: inline-flex; gap: 4px; margin-left: 4px; }
.ub-approval-period-quick .ub-btn.active { background: var(--ub-accent-soft); border-color: var(--ub-accent); color: var(--ub-accent); font-weight: 600; }
.ub-approval-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.ub-approval-side { display: flex; flex-direction: column; gap: 4px; padding: 10px; position: sticky; top: 12px; }
.ub-approval-kind { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--ub-radius);
    background: transparent; color: var(--ub-text); font: inherit; text-align: left; cursor: pointer; }
.ub-approval-kind:hover { background: var(--ub-surface-2); }
.ub-approval-kind.active { background: var(--ub-accent-soft); color: var(--ub-accent); font-weight: 600; }
.ub-approval-kind .name { flex: 1; }
.ub-approval-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* 대기·진행 중·완료 상자 사이는 위의 gap만(카드 아래 여백까지 더해지면 너무 벌어진다) */
.ub-approval-main > .ub-approval-box { margin-bottom: 0; }
.ub-approval-box h2 small { font-weight: 400; font-size: 12px; }
.ub-approval-table tbody tr { cursor: pointer; }
.ub-approval-table tbody tr:hover { background: var(--ub-surface-2); }
.ub-approval-table tr.my-turn { background: var(--ub-warn-soft); }
.ub-approval-table th.kind, .ub-approval-table td.kind { width: 64px; }
.ub-approval-table td.date { white-space: nowrap; }
.ub-approval-table td.content { min-width: 220px; }
.ub-approval-table td small { display: block; }
.ub-approval-summary { font-weight: 500; }
/* 내가 올린 문서 표시 */
.ub-approval-mine { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px;
    vertical-align: 1px; border: 1px solid var(--ub-accent-border); color: var(--ub-accent); background: var(--ub-accent-soft); }
.ub-approval-reason { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.ub-approval-progress { display: flex; flex-direction: column; }
.ub-approval-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap;
    background: var(--ub-line); color: var(--ub-text); }
.ub-approval-chip.leave { background: var(--ub-ok-soft); color: var(--ub-ok); }
.ub-approval-chip.work_day { background: color-mix(in srgb, #0f9d76 14%, var(--ub-surface)); color: color-mix(in srgb, #0f9d76 70%, var(--ub-text)); }
.ub-approval-chip.purchase { background: var(--ub-accent-soft); color: var(--ub-accent); }
.ub-approval-chip.card { background: var(--ub-receipt-soft); color: var(--ub-text); }
.ub-approval-chip.expense { background: var(--ub-warn-soft, var(--ub-surface-2)); color: var(--ub-text); }
.ub-approval-more { margin-top: 8px; }

/* ---------- 결제 보고(탭 2): 왼쪽 결의서 종류 + 오른쪽 목록/작성 ---------- */
.ub-expense { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.ub-expense-side { display: flex; flex-direction: column; gap: 4px; padding: 10px; position: sticky; top: 12px; }
.ub-expense-side-head { padding: 4px 12px 6px; font-size: 12px; font-weight: 600; color: var(--ub-muted); }
.ub-expense-side-more { margin: 8px 12px 0; font-size: 12px; }
.ub-expense-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ub-expense-myturn a { margin-left: 8px; }
.ub-expense-table td { vertical-align: middle; }
/* 작성 화면 */
.ub-expense-editor .ub-card-head h2 small { margin-left: 8px; font-weight: 400; }
.ub-expense-h { margin: 18px 0 8px; font-size: 15px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ub-expense-h small { font-weight: 400; }
.ub-expense-editor i.req { color: var(--ub-bad); font-style: normal; }
.ub-expense-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px 16px; }
.ub-expense-info .ub-form-field:has(.ub-expense-fuel) { grid-column: span 2; }
.ub-expense-static { padding: 7px 0; font-weight: 600; }
/* 차량유종: 옆 입력 칸(차량번호)과 같은 높이, 버튼은 칸 너비를 나눠 채운다. 설명은 그 아래 줄 */
.ub-expense-fuel { display: flex; width: 100%; height: 38px; box-sizing: border-box; }
.ub-seg.ub-expense-fuel button { flex: 1 1 0; justify-content: center; padding: 0 6px; font-size: 13px; white-space: nowrap; }
.ub-expense-fuel-help { display: block; }
.ub-expense-fuel button small { margin-left: 4px; color: var(--ub-muted); font-size: 11px; }
.ub-expense-fuel button.active small { color: inherit; }
.ub-expense-unit { display: flex; align-items: center; gap: 6px; }
.ub-expense-unit .ub-input { width: 120px; text-align: right; }
.ub-expense-lines { min-width: 1200px; table-layout: fixed; }
/* 출발지·목적지가 남는 너비를 나눠 갖고(검색해 고른 이름이 길다), 업무명은 좁게 */
.ub-expense-lines col.no { width: 34px; }
.ub-expense-lines col.date { width: 116px; }
.ub-expense-lines col.project { width: 11%; }
/* 업무명 = 남는 너비. 출발지·목적지는 화면 크기별로 고정 비율(표 1200px에서 130px, 넓은 화면에서 약 220px) */
.ub-expense-lines col.place { width: 10.8%; }
.ub-expense-lines col.km { width: 88px; }
.ub-expense-lines col.trip { width: 72px; }
.ub-expense-lines col.toll { width: 86px; }
.ub-expense-lines col.calc { width: 90px; }
.ub-expense-lines col.act { width: 76px; }
@media (min-width: 1700px) {
    .ub-expense-lines col.place { width: 14.4%; }
    .ub-expense-lines col.calc { width: 100px; }
}
/* 줄 동작(복사·삭제) 버튼이 칸 안에 들어가게 */
.ub-expense-lines td.act { padding-left: 2px; padding-right: 2px; }
.ub-expense-lines td.act .ub-btn.small { padding: 3px 7px; min-width: 0; }
.ub-expense-lines td.act .ub-btn + .ub-btn { margin-left: 4px; }
.ub-expense-lines td.no { text-align: center; color: var(--ub-muted); font-size: 12px; }
.ub-expense-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--ub-muted); text-align: right; white-space: nowrap; }
.ub-expense-sub.ok { color: var(--ub-ok); }
.ub-expense-sub.warn { color: var(--ub-bad); }
.ub-expense-lines th { white-space: nowrap; font-size: 12px; }
.ub-expense-lines td { padding: 4px 4px; vertical-align: middle; }
.ub-expense-lines .ub-input { width: 100%; min-width: 0; padding: 5px 6px; font-size: 13px; }
.ub-expense-lines .ub-input.num { text-align: right; }
.ub-expense-lines td.calc { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 8px; }
/* 금액 헤더(톨비·운행비용·비용계)는 오른쪽 정렬 — 오른쪽 여백을 그 칸 숫자와 같게.
   톨비 칸 숫자는 입력칸 안쪽(칸 여백 + 테두리 + 입력 여백 = 실제로 재어 13px)에 있으므로 헤더·합계도 13px */
.ub-expense-lines th.num { text-align: right; padding-right: 8px; }
.ub-expense-lines th.num.toll, .ub-expense-lines td.calc.toll { padding-right: 13px; }
.ub-expense-lines td.act { white-space: nowrap; text-align: center; }
.ub-expense-lines tfoot td { border-top: 2px solid var(--ub-line); padding-top: 8px; }
.ub-expense-lines tfoot td .ub-help { margin-left: 8px; }
/* 지도 거리: 계산된 값(고칠 수 없음) — 아래 운행거리·시간이 다음 칸(이동구분)으로 넘치지 않게 칸 안에서 */
.ub-expense-lines td.km { text-align: right; overflow: hidden; }
.ub-expense-km { font-weight: 700; font-variant-numeric: tabular-nums; }
.ub-expense-km small { margin-left: 2px; font-weight: 400; color: var(--ub-muted); }
.ub-expense-lines td.km .ub-expense-sub { overflow: hidden; text-overflow: ellipsis; }
/* 출발지·목적지 검색 칸 + 목록(표 스크롤 칸에 잘리지 않게 화면 기준으로 띄운다) */
.ub-place { position: relative; }
.ub-place .ub-input { padding-right: 22px; }
.ub-place .ub-input.unpicked { border-color: var(--ub-warn-border, #e0b252); }
.ub-place-mark { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 11px; pointer-events: none; }
.ub-place-mark.warn { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: var(--ub-warn); color: #fff; font-weight: 800; font-size: 10px; }
.ub-place-list { position: fixed; z-index: 60; min-width: 300px; max-width: 420px; max-height: 280px; overflow: auto; margin: 2px 0 0; padding: 4px 0; list-style: none;
    background: var(--ub-surface); border: 1px solid var(--ub-border); border-radius: var(--ub-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.ub-place-list li { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; cursor: pointer; }
.ub-place-list li b { font-weight: 600; font-size: 13px; }
.ub-place-list li small { font-size: 11.5px; color: var(--ub-muted); }
.ub-place-list li.active, .ub-place-list li[role=option]:hover { background: var(--ub-accent-soft); }
.ub-place-list li.ub-place-msg { cursor: default; color: var(--ub-muted); font-size: 12.5px; }
.ub-place-list li.ub-place-msg.bad { color: var(--ub-bad); }
/* 아래: 위 줄 = 첨부(톨비 영수증), 아래 줄 = 결재선 */
.ub-expense-bottom { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; min-width: 0; }
.ub-expense-box { min-width: 0; }
.ub-expense-box .ub-expense-h { margin-top: 12px; }
.ub-expense-approvers { padding-top: 4px; border-top: 1px solid var(--ub-line); }
.ub-expense-line { margin: 0 0 8px; padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ub-expense-line .step { font-size: 12px; color: var(--ub-muted); margin-right: 2px; }
/* 톨비 영수증: 카드를 가로로 늘어놓고 넘치면 가로 스크롤 */
.ub-expense-files { margin: 0 0 8px; padding: 2px 2px 10px; list-style: none; display: flex; flex-wrap: nowrap; gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.ub-expense-files li { position: relative; flex: 0 0 190px; display: flex; flex-direction: column; gap: 6px; padding: 6px; scroll-snap-align: start;
    border: 1px solid var(--ub-line); border-radius: var(--ub-radius); background: var(--ub-surface); }
.ub-expense-files li.unlinked { border-style: dashed; border-color: var(--ub-warn-border, #e0b252); }
.ub-expense-files li > .ub-btn.danger { position: absolute; top: 10px; right: 10px; padding: 1px 7px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.ub-expense-thumb { width: 100%; height: 150px; padding: 0; border: 1px solid var(--ub-line); border-radius: 6px; background: #fff; cursor: zoom-in;
    display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ub-expense-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ub-expense-file-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ub-expense-files .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ub-expense-file-info select.ub-input { padding: 4px 6px; font-size: 13px; }
/* 첨부 줄 맨 끝의 + 칸: 영수증 카드와 같은 크기, 사각형 가운데 + (눌러서 파일 고르기) */
.ub-expense-files li.ub-expense-add { border: 0; background: none; padding: 6px 0; }
.ub-expense-add-box { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; cursor: pointer;
    border: 2px dashed var(--ub-border); border-radius: 8px; color: var(--ub-muted); background: var(--ub-surface-2); transition: border-color .15s, color .15s; }
.ub-expense-add-box:hover, .ub-expense-add-box:focus-within { border-color: var(--ub-accent); color: var(--ub-accent); }
.ub-expense-add-box .plus { font-size: 44px; font-weight: 300; line-height: 1; }
.ub-expense-add.disabled .ub-expense-add-box { opacity: .5; pointer-events: none; }
.ub-expense-add .ub-help { font-size: 11px; text-align: center; }
.ub-expense-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ub-line); }
@media (max-width: 800px) {
    .ub-expense { grid-template-columns: minmax(0, 1fr); }
    .ub-expense-side { position: static; flex-direction: row; flex-wrap: wrap; }
    .ub-expense-side .ub-approval-kind { width: auto; }
    .ub-expense-side-head, .ub-expense-side-more { display: none; }
    .ub-expense-info .ub-form-field:has(.ub-expense-fuel) { grid-column: auto; }
}
/* 결의서 문서(자차운행명세서) — 카드 사용 내역서와 같은 종이 */
.ub-expense-doc-h { margin: 10px 0 6px; font-size: 13px; font-weight: 700; color: var(--paper-ink, #111); }
.ub-expense-doc-info { table-layout: fixed; }
.ub-expense-doc-info col.h { width: 13%; }
.ub-expense-doc-info col.v1 { width: 22%; }
.ub-expense-doc-info col.v2 { width: 17%; }
.ub-expense-doc-info col.v3 { width: 22%; }
.ub-expense-doc-info th { white-space: nowrap; font-size: 12px; }
.ub-expense-doc-info td { font-size: 12px; }
.ub-expense-doc-basis { margin-top: 2px; font-size: 10px; color: #555; line-height: 1.3; }
.ub-expense-doc-statement { margin: 10px 0 4px; font-size: 12px; color: var(--paper-ink, #111); }
/* 6칸: 날짜(3행 합침) | 운행거리 | 이동구분 | 운행비용 | 톨비 | 비용계 — 업무명·출발지·목적지 행은 날짜 뒤 5칸을 합쳐 쓴다 */
.ub-expense-doc-lines col.date { width: 14%; }
.ub-expense-doc-lines col.km { width: 15%; }
.ub-expense-doc-lines col.trip { width: 13%; }
.ub-expense-doc-lines col.toll { width: 19%; }
.ub-expense-doc-lines col.amt { width: 19.5%; }
.ub-expense-doc-project { margin-right: 4px; font-size: 9.5px; color: #555; }
/* 운행 한 건 = 3행: 업무명 행·출발지/목적지 행은 글이 길면 행 안에서 줄을 바꾼다(높이는 내용만큼, 최소 6.2mm) */
.ub-card-report-lines.ub-expense-doc-lines td.txt { white-space: normal; height: 6.2mm; overflow: visible; text-overflow: clip;
    line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; }
.ub-expense-doc-lines td.date { vertical-align: middle; white-space: normal; line-height: 1.3; }
.ub-expense-doc-lines .lbl { display: inline-block; margin-right: 6px; padding: 0 4px; border-radius: 3px; background: var(--paper-tint, #f2f4f7);
    color: var(--paper-ink, #333); font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.ub-expense-doc-route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
/* 운행 건과 건 사이는 진한 선 */
.ub-expense-doc-lines tbody.trip tr.t1 > td { border-top: 1.6px solid var(--paper-line, #333); }
.ub-expense-doc-lines tbody.trip tr.t1 > td.txt, .ub-expense-doc-lines tbody.trip tr.t2 > td.txt { background: #fcfdfe; }
.ub-expense-doc-lines td.r:has(.ub-expense-doc-att) { padding-top: 1px; padding-bottom: 1px; line-height: 1.05; }
.ub-expense-doc-att { display: block; font-size: 8.5px; color: #555; }
.ub-expense-doc-lines th { padding-left: 2px; padding-right: 2px; letter-spacing: -.02em; }
.ub-expense-doc-lines tr.sum td { background: var(--paper-tint, #f2f4f7); font-weight: 600; }
.ub-expense-doc-notes { margin: 0 0 8px; padding-left: 16px; font-size: 11px; color: #444; }
.ub-expense-doc-notes li { margin: 2px 0; }
.ub-approval-purchase-modal { width: min(860px, calc(100vw - 32px)); }
.ub-approval-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin: 0 0 12px; }
.ub-approval-facts dt { font-size: 12px; color: var(--ub-muted); }
.ub-approval-facts dd { margin: 2px 0 0; }
.ub-approval-note { margin-bottom: 12px; padding: 8px 12px; border-radius: var(--ub-radius); background: var(--ub-surface-2); }
.ub-approval-note span { color: var(--ub-muted); margin-right: 8px; }
.ub-approval-note.reject { background: var(--ub-bad-soft); }
.ub-approval-items tfoot td { font-weight: 600; }
.ub-approval-item-note { display: block; }
.ub-approval-purchase-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ub-approval-purchase-actions .ub-input { flex: 1; min-width: 200px; }
@media (max-width: 800px) {
    .ub-approval-body { grid-template-columns: minmax(0, 1fr); }
    .ub-approval-side { position: static; flex-direction: row; flex-wrap: wrap; }
    .ub-approval-kind { width: auto; }
}
/* 결재함 완료: 왼쪽 목록 + 오른쪽 문서 미리보기(인쇄) */
.ub-approval-done { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.ub-approval-done-list { min-width: 0; }
.ub-approval-done-table td b, .ub-approval-done-table td.date { white-space: nowrap; }
.ub-approval-done-table tr.selected, .ub-approval-done-table tr.selected:hover { background: var(--ub-accent-soft); box-shadow: inset 3px 0 0 var(--ub-accent); }
.ub-approval-preview { position: sticky; top: 12px; display: flex; flex-direction: column; min-width: 0;
    border: 1px solid var(--ub-border); border-radius: var(--ub-radius); background: var(--ub-bg); overflow: hidden; }
.ub-approval-preview-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ub-surface); border-bottom: 1px solid var(--ub-border); min-height: 44px; }
/* 높이를 고정해 문서 종류(1쪽 휴가 신청서 / 여러 쪽 카드 내역서)나 읽는 중이어도 칸 크기가 변하지 않게 — 넘치면 칸 안에서 스크롤 */
.ub-approval-preview-scroll { height: calc(100vh - 140px); min-height: 420px; overflow: auto; overscroll-behavior: contain; padding: 12px; }
.ub-approval-preview-paper.loading { opacity: .45; transition: opacity .12s; }
/* A4(210mm ≈ 794px)를 칸 폭에 꽉 차게 — 배율은 ubnet.fitPreviewWidth가 칸 너비로 계산(아래 값은 계산 전 기본). 인쇄는 줄이지 않은 원래 쪽으로 */
.ub-approval-preview-paper { zoom: .78; }
.ub-approval-preview-scroll { padding: 8px; }
.ub-approval-preview-paper .ub-print-pages { gap: 16px; }
/* 완료 목록: 반려 문서 보기 켜기/끄기 */
.ub-approval-rejected-toggle.active { background: var(--ub-accent-soft); border-color: var(--ub-accent); color: var(--ub-text); }
/* 미리보기의 첨부 영수증 쪽: 누르면 크게 */
.ub-card-receipt-cell.clickable { cursor: zoom-in; transition: border-color .12s, box-shadow .12s; }
.ub-card-receipt-cell.clickable:hover { border-color: #6d4bb8; box-shadow: 0 0 0 2px rgba(109, 75, 184, .25); }
/* 영수증 크게 보기(화면 전체) */
.ub-receipt-zoom { position: fixed; inset: 0; z-index: 140; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-rows: auto minmax(0, 1fr);
    background: rgba(10, 14, 22, .86); outline: none; }
.ub-receipt-zoom-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: #fff; font-size: 14px; }
.ub-receipt-zoom-bar b { color: #c9b6f2; }
.ub-receipt-zoom-bar .ub-help { color: rgba(255, 255, 255, .7); }
.ub-receipt-zoom-bar .ub-btn { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
.ub-receipt-zoom-bar .ub-btn:hover { background: rgba(255, 255, 255, .28); }
.ub-receipt-zoom-img { display: grid; place-items: center; min-height: 0; min-width: 0; padding: 4px 0 16px; }
/* 화면 높이에 맞춰 크게(작은 그림도 키운다), 너무 넓으면 폭에 맞춘다 */
.ub-receipt-zoom-img img { height: calc(100vh - 100px); width: auto; max-width: 100%; object-fit: contain; background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
/* 넘기기 버튼이 없는 크게 보기(자차운행명세서 첨부 등): 그림이 가운데 전체 폭 */
.ub-receipt-zoom.single .ub-receipt-zoom-img { grid-column: 1 / -1; padding: 4px 24px 16px; }
.ub-receipt-zoom-nav { align-self: center; justify-self: center; width: 44px; height: 64px; font-size: 34px; line-height: 1; cursor: pointer;
    border: 0; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; }
.ub-receipt-zoom-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .25); }
.ub-receipt-zoom-nav:disabled { opacity: .25; cursor: default; }
.ub-purchase-doc-items { margin-top: 14px; }
.ub-purchase-doc-items col.no { width: 7%; }
.ub-purchase-doc-items col.name { width: 33%; }
.ub-purchase-doc-items col.spec { width: 22%; }
.ub-purchase-doc-items col.qty { width: 8%; }
.ub-purchase-doc-items col.price { width: 14%; }
.ub-purchase-doc-items col.amt { width: 16%; }
.ub-purchase-doc-items tfoot th { text-align: right; }
@media (max-width: 1300px) {
    .ub-approval-done { grid-template-columns: minmax(0, 1fr); }
    .ub-approval-preview { position: static; }
    .ub-approval-preview-scroll { height: 70vh; }
    .ub-approval-preview-paper { zoom: .9; }
}
@media (max-width: 800px) {
    .ub-approval-preview-paper { zoom: .45; }
}