:root {
    --bg: #eef2f7;
    --panel: #fff;
    --card-head: #f8fbff;
    --grid-head: #edf4fc;
    --grid-head-line: #c9d6e6;
    --grid-line: #d6dee9;
    --ink: #111827;
    --muted: #6b7280;
    --line: #e5e7eb;
    --primary: #2563eb;
    --primary2: #4f46e5;
    --soft: #eef2ff;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #ef4444;
    --sidebar: #111827;
    --h: 34px;
    --fs: 13px;
    --r: 4px
}

* {
    box-sizing: border-box
}

html, body {
    min-height: 100%;
    margin: 0
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR",Arial,sans-serif;
    font-size: 13px
}

a {
    text-decoration: none
}

.app {
    min-height: 100vh;
    display: flex;
    align-items: stretch
}

.sidebar {
    width: 200px;
    flex: 0 0 200px;
    background: linear-gradient(180deg,var(--sidebar),#0b1020);
    color: #fff;
    position: sticky;
    top: 0;
    align-self: flex-start;
    min-height: 100vh;
    z-index: 1030;
    box-shadow: 0 10px 30px rgba(0,0,0,.18)
}

.brand {
    height: 54px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.brand-badge {
    width: 34px;
    height: 34px;
    border-radius: 5px;
    background: #fff;
    color: var(--primary2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px
}

.brand strong {
    font-size: 15px
}

.brand small {
    display: block;
    color: #aab3c5;
    font-size: 10.5px;
    white-space: nowrap
}

.nav-section {
    padding: 8px 10px 3px;
    color: #818ca1;
    font-size: 11px;
    font-weight: 800
}

.side-link {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #cbd5e1;
    padding: 6px 8px;
    margin: 1px 8px;
    border-radius: var(--r);
    font-size: 13px
}

    .side-link i {
        width: 18px;
        text-align: center;
        font-size: 15px
    }

    .side-link:hover {
        background: rgba(255,255,255,.08);
        color: #fff
    }

    .side-link.active {
        background: #fff;
        color: #111827
    }

.main {
    width: calc(100% - 200px);
    flex: 1 1 auto;
    min-width: 0
}

.topbar {
    height: 56px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px
}

.title {
    font-weight: 850;
    font-size: 17px;
    margin: 0
}

.breadcrumb {
    margin: 0;
    font-size: 12px
}

.content {
    padding: 10px 12px 28px
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap
}

.top-date, .topbar-user {
    height: var(--h);
    display: inline-flex;
    align-items: center;
    border-radius: var(--r);
    font-size: 12px
}

.top-date {
    padding: 0 10px;
    background: #f8fafc
}

.topbar-user {
    gap: 8px;
    padding: 0 10px 0 6px;
    border: 1px solid #d8dce5;
    background: #fff;
    white-space: nowrap
}

.topbar-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft);
    color: var(--primary2);
    font-size: 13px
}

.topbar-user-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05
}

    .topbar-user-text strong {
        font-size: 12.5px
    }

    .topbar-user-text small {
        font-size: 10.5px;
        color: var(--muted);
        margin-top: 2px
    }

.card-soft {
    border: 1px solid #d5dde8;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.055)
}

    .card-soft .card-header {
        background: var(--card-head);
        border-bottom: 1px solid #dbe3ee;
        border-radius: 5px 5px 0 0;
        padding: 8px 10px
    }

.card-body {
    padding: 10px
}

.toolbar-card .card-body {
    padding: 7px 9px
}

.row.g-2 {
    --bs-gutter-x: .5rem;
    --bs-gutter-y: .5rem
}

.kpi {
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    padding: 10px;
    height: 100%;
    box-shadow: 0 8px 20px rgba(17,24,39,.04)
}

    .kpi .label {
        font-size: 12px;
        color: var(--muted)
    }

    .kpi .num {
        font-size: 21px;
        font-weight: 850
    }

.kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 5px;
    background: var(--soft);
    color: var(--primary2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px
}

.form-control, .form-select, .input-group-text, .btn {
    min-height: var(--h) !important;
    height: var(--h) !important;
    font-size: var(--fs) !important;
    line-height: 1.2 !important;
    border-radius: var(--r) !important
}

.form-control, .form-select {
    padding: 6px 10px !important;
    border-color: #d8dce5
}

.form-select {
    padding-right: 30px !important;
    background-position: right 10px center !important;
    background-size: 13px 10px !important
}

.input-group {
    height: var(--h);
    align-items: stretch
}

.input-group-text {
    padding: 0 10px !important;
    background: #f9fafb;
    border-color: #d8dce5;
    display: inline-flex;
    align-items: center
}

.btn {
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-weight: 750;
    white-space: nowrap
}

.btn-sm {
    padding: 0 10px !important
}


/* =========================================================
   공통 버튼 / 액션 영역
   - 모든 화면에서 동일한 버튼 크기와 우측 정렬 액션 영역 사용
   - 사용 예: class="btn btn-app-xs btn-outline-primary"
   ========================================================= */
.app-actions,
.app-panel-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: nowrap;
}

.app-panel-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.app-panel-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    white-space: nowrap;
}

.btn-app-xs {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 5px !important;
    gap: 3px !important;
}

.btn-app-sm {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    border-radius: 5px !important;
    gap: 4px !important;
}

.btn-app-md {
    min-height: var(--h) !important;
    height: var(--h) !important;
    padding: 0 12px !important;
    font-size: var(--fs) !important;
    line-height: 1.2 !important;
    border-radius: var(--r) !important;
    gap: 6px !important;
}

.btn-app-xs i,
.btn-app-sm i,
.btn-app-md i {
    font-size: 12px;
    line-height: 1;
}

.btn-app-icon {
    width: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 !important;
}

.form-label {
    font-weight: 750;
    font-size: 12px;
    color: #374151;
    margin-bottom: 4px
}

.table {
    vertical-align: middle
}

    .table > :not(caption) > * > * {
        padding: .42rem .5rem
    }

    .table th {
        font-size: 11.5px;
        color: #6b7280;
        background: #f9fafb;
        white-space: nowrap
    }

    .table td {
        font-size: 13px
    }

.list-row {
    cursor: pointer
}

    .list-row:hover td {
        background: #f8f9ff
    }

.badge-status {
    border-radius: 999px;
    padding: 4px 7px;
    font-weight: 750;
    font-size: 11px
}

.period-filter {
    height: var(--h);
    display: flex;
    align-items: center;
    gap: 5px
}

    .period-filter .form-control {
        width: 118px !important
    }

.toolbar-card .input-group {
    width: 250px !important
}

.toolbar-card .form-select {
    width: 116px !important
}

.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px
}

    .subnav a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid var(--line);
        background: #fff;
        color: #374151;
        border-radius: 999px;
        padding: 6px 10px;
        font-weight: 750;
        font-size: 12px
    }

        .subnav a.active, .subnav a:hover {
            border-color: #bfc7ff;
            background: #f5f7ff;
            color: var(--primary2)
        }

.process {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px
}

.process-step {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 10px;
    position: relative;
    min-height: 110px
}

    .process-step:after {
        content: "\F138";
        font-family: "bootstrap-icons";
        position: absolute;
        right: -15px;
        top: 45px;
        font-size: 18px;
        color: #9ca3af;
        background: var(--bg);
        border-radius: 50%
    }

    .process-step:nth-child(4n):after, .process-step.no-arrow:after {
        display: none
    }

    .process-step .no {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        background: var(--soft);
        color: var(--primary2);
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px
    }

    .process-step h6 {
        font-weight: 850;
        margin-bottom: 4px
    }

    .process-step p {
        font-size: 12px;
        color: var(--muted);
        margin: 0
    }

.notice-item {
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    padding: 9px;
    display: flex;
    gap: 10px;
    align-items: flex-start
}

    .notice-item i {
        color: var(--primary2)
    }

.quick-card {
    display: block;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    padding: 10px;
    color: inherit;
    height: 100%
}

    .quick-card:hover {
        border-color: #c7c9ff;
        background: #fbfcff
    }

    .quick-card i {
        font-size: 20px;
        color: var(--primary2)
    }

.menu-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px
}

.menu-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 12px;
    color: inherit;
    min-height: 96px
}

    .menu-card i {
        font-size: 20px;
        color: var(--primary2)
    }

    .menu-card strong {
        display: block;
        margin-top: 7px
    }

    .menu-card span {
        font-size: 12px;
        color: var(--muted)
    }

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .2s;
    z-index: 1050
}

    .drawer-backdrop.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

.slide-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 650px;
    max-width: calc(100vw - 16px);
    height: 100vh;
    background: #fff;
    box-shadow: -24px 0 48px rgba(15,23,42,.2);
    transform: translateX(105%);
    transition: transform .28s;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line)
}

    .slide-panel.wide {
        width: 820px
    }

    .slide-panel.show {
        transform: translateX(0)
    }

.slide-panel-header {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg,#fff,#f8f9ff)
}

.slide-panel-title {
    min-width: 0;
    flex: 1;
}

.slide-panel-title h5 {
    line-height: 1.25;
}

.slide-panel-title small {
    display: block;
    margin-top: 2px;
    line-height: 1.25;
}

.slide-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.slide-panel-actions .btn {
    white-space: nowrap;
}

.slide-panel-body {
    padding: 12px 14px;
    overflow: auto;
    flex: 1;
    background: #fff
}

.slide-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: #f9fafb
}

@media(max-width: 576px) {
    .slide-panel {
        width: 100vw;
        max-width: 100vw;
    }

    .slide-panel-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
    }

    .slide-panel-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .slide-panel-actions .btn {
        height: 34px;
        padding: 5px 12px;
    }

    .slide-panel-body {
        padding: 10px 12px;
    }
}

.detail-card {
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 10px;
    background: #fff
}

.detail-grid {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 6px 12px;
    font-size: 13px
}

    .detail-grid .k {
        color: #6b7280;
        font-weight: 750
    }

    .detail-grid .v {
        font-weight: 650
    }

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

    .timeline:before {
        content: "";
        position: absolute;
        left: 9px;
        top: 6px;
        bottom: 6px;
        width: 2px;
        background: #e5e7eb
    }

.timeline-item {
    position: relative;
    margin-bottom: 8px
}

    .timeline-item:before {
        content: "";
        position: absolute;
        left: -20px;
        top: 4px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--primary2);
        box-shadow: 0 0 0 4px #eef0ff
    }

.status-flow {
    display: flex;
    gap: 5px;
    flex-wrap: wrap
}

    .status-flow span {
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 5px 8px;
        font-size: 12px;
        background: #fff
    }

        .status-flow span.on {
            background: #eef2ff;
            border-color: #c7d2fe;
            color: #4f46e5;
            font-weight: 800
        }

.action-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px
}

    .action-grid .btn {
        width: 100%
    }

.drawer-note {
    border: 1px solid #dbe3ff;
    background: #f7f9ff;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 12px;
    color: #475569
}

.mini-panel {
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    padding: 10px
}

.main-grid-2 {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 10px
}

.photo-box, .sign-box {
    height: 82px;
    border: 1px dashed #cbd5e1;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    background: #f9fafb
}

.login-page {
    min-height: 100vh;
    background: radial-gradient(circle at top left,#eef2ff,transparent 42%),linear-gradient(135deg,#0f172a,#1e293b);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px
}

.login-card {
    width: 100%;
    max-width: 430px;
    background: #fff;
    border-radius: 6px;
    padding: 28px;
    box-shadow: 0 24px 70px rgba(0,0,0,.28)
}

.login-logo {
    width: 58px;
    height: 58px;
    border-radius: 6px;
    background: var(--soft);
    color: var(--primary2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 18px
}

textarea.form-control {
    height: auto !important;
    min-height: 80px;
    line-height: 1.45 !important
}
/* v12 operational model */
.branch-card {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    height: 100%
}

    .branch-card h6 {
        font-weight: 850
    }

.branch-flow {
    display: flex;
    gap: 5px;
    flex-wrap: wrap
}

    .branch-flow span {
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 999px;
        padding: 4px 8px;
        font-size: 11.5px;
        font-weight: 750;
        color: #475569
    }

        .branch-flow span.key {
            background: #eef2ff;
            border-color: #c7d2fe;
            color: #4f46e5
        }

.work-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 4px 7px;
    font-size: 11px;
    font-weight: 800
}

.type-install {
    background: #eef2ff;
    color: #4f46e5
}

.type-pickup {
    background: #fff7ed;
    color: #c2410c
}

.type-exchange {
    background: #ecfdf5;
    color: #15803d
}

.exchange-board {
    display: grid;
    grid-template-columns: 1fr 52px 1fr;
    gap: 8px;
    align-items: stretch
}

.exchange-side {
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    padding: 10px;
    display: grid;
    gap: 6px
}

.exchange-title {
    font-weight: 850;
    color: #111827;
    margin-bottom: 2px
}

.exchange-side label {
    font-size: 12px;
    font-weight: 750;
    color: #6b7280
}

.exchange-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary2);
    font-weight: 850;
    gap: 4px
}

    .exchange-mid i {
        font-size: 24px
    }

.container-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dbe3ff;
    background: #f7f9ff;
    color: #475569;
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 750
}

    .container-pill.green {
        border-color: #bbf7d0;
        background: #f0fdf4;
        color: #15803d
    }

    .container-pill.orange {
        border-color: #fed7aa;
        background: #fff7ed;
        color: #c2410c
    }

.task-card {
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    padding: 10px
}

    .task-card:hover {
        border-color: #c7d2fe;
        background: #fbfcff
    }

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    background: #94a3b8
}

    .status-dot.blue {
        background: #2563eb
    }

    .status-dot.green {
        background: #16a34a
    }

    .status-dot.orange {
        background: #f59e0b
    }

    .status-dot.red {
        background: #ef4444
    }

.compact-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 8px
}

.compact-card {
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    padding: 10px
}

    .compact-card .num {
        font-size: 22px;
        font-weight: 850
    }

    .compact-card .label {
        color: var(--muted);
        font-size: 12px
    }

.route-box {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center
}

    .route-box .box {
        border: 1px solid var(--line);
        border-radius: 5px;
        background: #fff;
        padding: 9px
    }

    .route-box .arrow {
        color: #94a3b8;
        font-size: 20px
    }

.order-type-sections [data-section] {
    display: none
}

.order-type-sections[data-type="install"] [data-section="new"], .order-type-sections[data-type="pickup"] [data-section="old"], .order-type-sections[data-type="exchange"] [data-section="new"], .order-type-sections[data-type="exchange"] [data-section="old"] {
    display: block
}



/* 메뉴 접기/펼치기 */
.topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.title-group {
    min-width: 0
}

.menu-toggle-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #d8dce5;
    border-radius: var(--r);
    background: #fff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: 0 0 34px;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease
}

    .menu-toggle-btn:hover {
        background: var(--soft);
        color: var(--primary);
        border-color: #c7d2fe;
        box-shadow: 0 6px 16px rgba(37,99,235,.12)
    }

    .menu-toggle-btn:focus-visible {
        outline: 3px solid rgba(37,99,235,.18);
        outline-offset: 2px
    }

html.sidebar-collapsed-preload .sidebar,
.app.sidebar-collapsed .sidebar {
    width: 64px;
    flex-basis: 64px
}

html.sidebar-collapsed-preload .main,
.app.sidebar-collapsed .main {
    width: calc(100% - 64px)
}

html.sidebar-collapsed-preload .brand,
.app.sidebar-collapsed .brand {
    justify-content: center;
    padding: 0 8px
}

html.sidebar-collapsed-preload .brand > div:last-child,
html.sidebar-collapsed-preload .nav-section,
html.sidebar-collapsed-preload .side-link span,
.app.sidebar-collapsed .brand > div:last-child,
.app.sidebar-collapsed .nav-section,
.app.sidebar-collapsed .side-link span {
    display: none
}

html.sidebar-collapsed-preload .side-link,
.app.sidebar-collapsed .side-link {
    justify-content: center;
    gap: 0;
    padding: 8px 0;
    margin: 2px 10px
}

html.sidebar-collapsed-preload .side-link i,
.app.sidebar-collapsed .side-link i {
    width: auto;
    font-size: 16px
}

@media(max-width:1200px) {
    .process {
        grid-template-columns: repeat(2,1fr)
    }

    .menu-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .compact-grid {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width:900px) {
    .sidebar {
        display: none
    }

    .main {
        width: 100%
    }

    .content {
        padding: 10px
    }

    .process {
        grid-template-columns: 1fr
    }

    .process-step:after {
        display: none
    }

    .menu-grid {
        grid-template-columns: 1fr
    }

    .topbar-user-text {
        display: none
    }

    .top-date {
        display: none
    }

    .main-grid-2, .exchange-board, .route-box {
        grid-template-columns: 1fr
    }

    .action-grid {
        grid-template-columns: 1fr
    }

    .compact-grid {
        grid-template-columns: 1fr
    }

    .toolbar-card .input-group {
        width: 100% !important
    }

    .toolbar-card .form-select {
        width: 100% !important
    }

    .period-filter .form-control {
        width: 100% !important
    }
}

@media print {
    .sidebar, .topbar, .no-print, .drawer-backdrop, .slide-panel {
        display: none !important
    }

    .main {
        width: 100%
    }

    .content {
        padding: 0;
        background: #fff
    }
}


@media(max-width:900px) {
    .sidebar {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 220px;
        flex: 0 0 220px;
        transform: translateX(-100%);
        transition: transform .2s ease;
        overflow-y: auto;
        z-index: 1065
    }

    body.sidebar-open .sidebar {
        transform: translateX(0)
    }

    body.sidebar-open .drawer-backdrop {
        display: block
    }

    html.sidebar-collapsed-preload .sidebar,
.app.sidebar-collapsed .sidebar {
        width: 220px;
        flex-basis: 220px
    }

    html.sidebar-collapsed-preload .brand,
.app.sidebar-collapsed .brand {
        justify-content: flex-start;
        padding: 0 12px
    }

    .app.sidebar-collapsed .brand > div:last-child,
    .app.sidebar-collapsed .nav-section,
    .app.sidebar-collapsed .side-link span {
        display: block
    }

    html.sidebar-collapsed-preload .side-link,
.app.sidebar-collapsed .side-link {
        justify-content: flex-start;
        gap: 7px;
        padding: 6px 8px;
        margin: 1px 8px
    }

    html.sidebar-collapsed-preload .side-link i,
.app.sidebar-collapsed .side-link i {
        width: 18px;
        font-size: 15px
    }

    .topbar {
        gap: 8px
    }

    .topbar-left {
        flex: 1 1 auto
    }
}


/* 초기 렌더링 sidebar 접힘 상태 보정
   - localStorage에 접힘 상태가 저장된 경우, JS 로딩 전에도 접힘 CSS가 먼저 적용되어
     메뉴 이동 시 sidebar가 펼쳐졌다 접히는 깜빡임을 방지합니다. */
@media(max-width:900px) {
    html.sidebar-collapsed-preload .sidebar {
        width: 220px;
        flex-basis: 220px;
    }

    html.sidebar-collapsed-preload .brand {
        justify-content: flex-start;
        padding: 0 12px;
    }

    html.sidebar-collapsed-preload .brand > div:last-child,
    html.sidebar-collapsed-preload .nav-section,
    html.sidebar-collapsed-preload .side-link span {
        display: block;
    }

    html.sidebar-collapsed-preload .side-link {
        justify-content: flex-start;
        gap: 7px;
        padding: 6px 8px;
        margin: 1px 8px;
    }

    html.sidebar-collapsed-preload .side-link i {
        width: 18px;
        font-size: 15px;
    }
}


/* 페이지 이동/초기 렌더링 깜빡임 방지 */
html {
    background: var(--bg);
    overflow-y: scroll;
}

html.app-startup *,
html.app-startup *::before,
html.app-startup *::after,
html.app-route-changing *,
html.app-route-changing *::before,
html.app-route-changing *::after {
    transition: none !important;
    animation: none !important;
}

html.app-route-changing body {
    background: var(--bg);
}

.grid-card .table {
    margin-bottom: 0;
}

.grid-card .table-responsive {
    border-radius: 5px;
}

/* 공통코드관리 Grid 화면 */
.cc-toolbar {
    margin-bottom: 6px;
}

.app-grid-wrap {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(620px, 1fr);
    gap: 8px;
    height: calc(100vh - 155px);
    min-height: 560px;
}


/* V60 공통코드관리: 코드그룹 1/4, 상세코드 3/4 레이아웃 */
.code-grid-wrap {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 3fr) !important;
}

.code-grid-wrap #tblCodeGroup {
    min-width: 0 !important;
}

.code-grid-wrap #tblCodeDetail {
    min-width: 900px !important;
}

.app-grid-panel {
    background: #fff;
    border: 1px solid #cbd6e2;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}



/* 단일 Grid 화면은 2컬럼 공통 레이아웃에서 전체 폭 사용 */
.app-grid-wrap > .app-grid-panel:only-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

.app-grid-panel-head {
    height: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7px;
    border-bottom: 1px solid #cbd6e2;
    background: var(--card-head);
    font-size: 13px;
    font-weight: 800;
    color: #111827;
}

.app-grid-panel-head .app-grid-title {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.app-grid-panel-head .btn {
    height: 26px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1;
}

.app-grid-scroll {
    flex: 1;
    overflow: auto;
    background: #fff;
}

.app-grid-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    color: #111827;
}


.app-grid-table th,
.app-grid-table td {
    border-right: 1px solid var(--grid-line);
    border-bottom: 1px solid var(--grid-line);
    padding: 4px 5px;
    height: 25px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-grid-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--grid-head);
    color: #1f2937;
    text-align: center;
    font-weight: 800;
    line-height: 1.15;
}

.app-grid-table th small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #1e3a8a;
    font-weight: 700;
    line-height: 1.15;
}

.app-grid-table td.center {
    text-align: center;
}

.app-grid-table td.sort {
    text-align: center;
    font-family: Consolas, Monaco, monospace;
}

.app-grid-table tbody tr {
    cursor: pointer;
}

.app-grid-table tbody tr:hover td {
    background: #f4f8ff;
}

.app-grid-table tbody tr.active td {
    background: #e1efff !important;
}

.cc-code {
    color: #1e3a8a;
    font-family: Consolas, Monaco, monospace;
    font-weight: 700;
}

.cc-use {
    color: #111827;
}

.cc-empty {
    height: 80px;
    text-align: center;
    color: #64748b;
    background: #fff;
}

.cc-search {
    width: 270px !important;
}

.cc-group-select {
    width: 180px !important;
}

.cc-use-select {
    width: 110px !important;
}

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


@media(max-width: 1300px) {
    .code-grid-wrap {
        grid-template-columns: 1fr !important;
    }
}

@media(max-width: 1300px) {
    .app-grid-wrap {
        grid-template-columns: 1fr;
        height: auto;
    }

    .app-grid-panel {
        height: 520px;
    }
}

@media(max-width: 768px) {
    .cc-search,
    .cc-group-select,
    .cc-use-select {
        width: 100% !important;
    }

    .cc-desc-grid {
        grid-template-columns: 1fr;
    }
}



/* 공통 AppGrid */
.app-grid-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}

.app-grid-table th,
.app-grid-table td {
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-grid-table th small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #1e3a8a;
    font-weight: 700;
    line-height: 1.15;
}

.app-grid-table tbody tr {
    cursor: pointer;
}

.app-grid-table tbody tr:hover td {
    background: #f4f8ff;
}

.app-grid-table tbody tr.active td {
    background: #e1efff !important;
}

.app-grid-check-cell {
    width: 38px;
    text-align: center !important;
}

.app-grid-check-cell .form-check-input {
    margin: 0;
    cursor: pointer;
}

.app-grid-table .app-grid-check-cell {
    width: 38px;
}

/* Soft navigation - menu click page flicker guard */
html,
body {
    background-color: var(--bg);
}

html.app-soft-nav-loading *,
html.app-soft-nav-loading *::before,
html.app-soft-nav-loading *::after {
    transition: none !important;
    animation: none !important;
}

.content.app-soft-content-loading {
    pointer-events: none;
}

/* Common management screens */
.common-search {
    width: 300px !important;
}

.common-use-select {
    width: 110px !important;
}

.common-company-select {
    width: 180px !important;
}

@media (max-width: 768px) {
    .common-search,
    .common-use-select,
    .common-company-select {
        width: 100% !important;
    }
}


/* =========================================================
   Common AppGrid DataTables Style
   - 업무화면 공통 GRID용
   - 화면별 GRID 구분 클래스 없이 공통 적용
   ========================================================= */
.app-grid-wrap {
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
}

.app-grid-panel {
    min-width: 0 !important;
    overflow: hidden !important;
}

.app-grid-panel .app-grid-scroll {
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: #fff !important;
    line-height: 1.2 !important;
}

.app-grid-panel .dt-container,
.app-grid-panel .dataTables_wrapper,
.app-grid-panel .app-dt-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #fff !important;
}

.app-grid-panel .dt-layout-row,
.app-grid-panel .dt-layout-row.dt-layout-table,
.app-grid-panel .dt-layout-full,
.app-grid-panel .dt-layout-table,
.app-grid-panel .dt-layout-table > .dt-layout-full,
.app-grid-panel .dt-layout-table > .col-12,
.app-grid-panel .dt-layout-table > .col-md {
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

.app-grid-panel .dt-layout-row:not(.dt-layout-table),
.app-grid-panel .dataTables_length,
.app-grid-panel .dataTables_info,
.app-grid-panel .dataTables_paginate,
.app-grid-panel .dt-length,
.app-grid-panel .dt-info,
.app-grid-panel .dt-paging,
.app-grid-panel .app-dt-toolbar,
.app-grid-panel .app-dt-footer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

.app-grid-panel table.app-grid-table,
.app-grid-panel table.dataTable {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    outline: 0 !important;
    table-layout: fixed !important;
}

.app-grid-panel table.dataTable colgroup col {
    width: inherit;
}

.app-grid-panel table.app-grid-table thead,
.app-grid-panel table.dataTable thead {
    display: table-header-group !important;
    border-top: 0 !important;
}

.app-grid-panel table.app-grid-table tbody,
.app-grid-panel table.dataTable tbody {
    display: table-row-group !important;
}

.app-grid-panel table.app-grid-table tr,
.app-grid-panel table.dataTable tr {
    display: table-row !important;
}

.app-grid-panel table.app-grid-table th,
.app-grid-panel table.app-grid-table td,
.app-grid-panel table.dataTable th,
.app-grid-panel table.dataTable td {
    display: table-cell !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid var(--grid-line) !important;
    border-bottom: 1px solid var(--grid-line) !important;
    box-shadow: none !important;
}

.app-grid-panel table.app-grid-table thead tr,
.app-grid-panel table.dataTable thead tr,
.app-grid-panel table.app-grid-table thead th,
.app-grid-panel table.dataTable thead th {
    border-top: 0 !important;
    box-shadow: none !important;
}

.app-grid-panel table.app-grid-table thead th,
.app-grid-panel table.dataTable thead th {
    height: 30px !important;
    min-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: var(--grid-head) !important;
    color: #1f2937 !important;
    border-bottom-color: var(--grid-head-line) !important;
    background-image: none !important;
}

.app-grid-panel table.app-grid-table tbody td,
.app-grid-panel table.dataTable tbody td {
    height: 28px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.app-grid-panel table.app-grid-table tr > th:last-child,
.app-grid-panel table.app-grid-table tr > td:last-child,
.app-grid-panel table.dataTable tr > th:last-child,
.app-grid-panel table.dataTable tr > td:last-child {
    border-right: 0 !important;
}

.app-grid-panel table.app-grid-table tbody tr:last-child > td,
.app-grid-panel table.dataTable tbody tr:last-child > td {
    border-bottom: 0 !important;
}

.app-grid-panel table.app-grid-table thead th.app-grid-check-cell,
.app-grid-panel table.dataTable thead th.app-grid-check-cell,
.app-grid-panel table.app-grid-table tbody td.app-grid-check-cell,
.app-grid-panel table.dataTable tbody td.app-grid-check-cell {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
}

.app-grid-panel table.app-grid-table thead th.app-grid-check-cell .form-check-input,
.app-grid-panel table.dataTable thead th.app-grid-check-cell .form-check-input,
.app-grid-panel table.app-grid-table tbody td.app-grid-check-cell .form-check-input,
.app-grid-panel table.dataTable tbody td.app-grid-check-cell .form-check-input {
    display: block !important;
    float: none !important;
    position: static !important;
    margin: 0 auto !important;
}

.app-grid-panel .dt-empty {
    height: 80px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* DataTables 기본 processing 문구가 조회 중 레이아웃을 밀지 않도록 공통 차단 */
.app-grid-panel .dt-processing,
.app-grid-panel .dataTables_processing,
.app-grid-panel div.dt-processing,
.app-grid-panel div.dataTables_processing {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ajax 공통 Loading Overlay - 조회/저장/삭제 중 이중 클릭 방지 */
body.app-busy {
    cursor: wait;
}

.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(248, 250, 252, .58);
    backdrop-filter: blur(1px);
    pointer-events: none;
}

.app-loading-overlay.show {
    display: flex;
    pointer-events: auto;
}

.app-loading-box {
    min-width: 220px;
    padding: 18px 22px;
    border: 1px solid #cfd6df;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
}

.app-loading-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #dbe4ee;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: app-loading-spin .8s linear infinite;
}

@keyframes app-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 403 접근 권한 없음 페이지 */
.access-denied-page {
    min-height: calc(100vh - 112px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 18px;
}

.access-denied-card {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #d7dee8;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .12);
}

.access-denied-visual {
    position: relative;
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(37, 99, 235, .22), transparent 35%),
        linear-gradient(145deg, #0f172a, #1e293b 55%, #334155);
    color: #fff;
}

.access-denied-visual::after {
    content: "";
    position: absolute;
    inset: auto -50px -80px auto;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    border: 34px solid rgba(255, 255, 255, .08);
}

.access-denied-icon {
    position: relative;
    z-index: 1;
    width: 118px;
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 18px 35px rgba(0,0,0,.24);
    backdrop-filter: blur(3px);
}

.access-denied-icon .bi {
    font-size: 58px;
    line-height: 1;
}

.access-denied-code {
    position: absolute;
    left: 22px;
    bottom: 16px;
    color: rgba(255, 255, 255, .16);
    font-size: 76px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -4px;
}

.access-denied-body {
    padding: 46px 48px;
}

.access-denied-badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: #eef2ff;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.access-denied-body h2 {
    margin: 18px 0 12px;
    color: #111827;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -1px;
}

.access-denied-body p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.72;
}

.access-denied-info {
    display: grid;
    gap: 10px;
    margin-top: 26px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}

.access-denied-info > div {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.access-denied-info span {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.access-denied-info strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}

.access-denied-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

@media (max-width: 820px) {
    .access-denied-page {
        min-height: auto;
        padding: 18px 0;
    }

    .access-denied-card {
        grid-template-columns: 1fr;
        border-radius: 16px;
    }

    .access-denied-visual {
        min-height: 160px;
    }

    .access-denied-icon {
        width: 86px;
        height: 86px;
        border-radius: 24px;
    }

    .access-denied-icon .bi {
        font-size: 42px;
    }

    .access-denied-code {
        font-size: 52px;
    }

    .access-denied-body {
        padding: 28px 22px;
    }

    .access-denied-body h2 {
        font-size: 24px;
    }

    .access-denied-info > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}




/* 공통 주소검색 */
.app-address-input-group .form-control[readonly] {
    background-color: #fff;
    cursor: default;
}

.app-address-search-btn {
    min-width: 74px;
    font-size: 12.5px;
    font-weight: 800;
    border-color: #c7d2e2;
    color: #334155;
    background: #f8fafc;
}

.app-address-search-btn:hover,
.app-address-search-btn:focus {
    color: #fff;
    border-color: #2563eb;
    background: #2563eb;
}

.app-address-search-btn i {
    margin-right: 2px;
}

/* 공통 입력 검증 */
.form-label.app-required-label::after {
    content: ' *';
    color: #dc3545;
    font-weight: 900;
}

.app-invalid-feedback {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
}

.slide-panel .form-control.is-invalid,
.slide-panel .form-select.is-invalid,
.drawer .form-control.is-invalid,
.drawer .form-select.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 .12rem rgba(220, 53, 69, .12);
}

/* 404 페이지 없음 안내 화면 */
.app-error-page {
    min-height: calc(100vh - 112px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 18px;
}

.app-error-card {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #d7dee8;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .12);
}

.app-error-visual {
    position: relative;
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(14, 165, 233, .22), transparent 35%),
        linear-gradient(145deg, #082f49, #0f172a 55%, #1e293b);
    color: #fff;
}

.app-error-visual::after {
    content: "";
    position: absolute;
    inset: auto -50px -80px auto;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    border: 34px solid rgba(255, 255, 255, .08);
}

.app-error-icon {
    position: relative;
    z-index: 1;
    width: 118px;
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 18px 35px rgba(0,0,0,.24);
    backdrop-filter: blur(3px);
}

.app-error-icon .bi {
    font-size: 58px;
    line-height: 1;
}

.app-error-code {
    position: absolute;
    left: 22px;
    bottom: 16px;
    color: rgba(255, 255, 255, .16);
    font-size: 76px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -4px;
}

.app-error-body {
    padding: 46px 48px;
}

.app-error-badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: #ecfeff;
    color: #155e75;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.app-error-body h2 {
    margin: 18px 0 12px;
    color: #111827;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -1px;
}

.app-error-body p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.72;
}

.app-error-info {
    display: grid;
    gap: 10px;
    margin-top: 26px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}

.app-error-info > div {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.app-error-info span {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.app-error-info strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}

.app-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

@media (max-width: 820px) {
    .app-error-page {
        min-height: auto;
        padding: 18px 0;
    }

    .app-error-card {
        grid-template-columns: 1fr;
        border-radius: 16px;
    }

    .app-error-visual {
        min-height: 160px;
    }

    .app-error-icon {
        width: 86px;
        height: 86px;
        border-radius: 24px;
    }

    .app-error-icon .bi {
        font-size: 42px;
    }

    .app-error-code {
        font-size: 52px;
    }

    .app-error-body {
        padding: 28px 22px;
    }

    .app-error-body h2 {
        font-size: 24px;
    }

    .app-error-info > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* 로그인 전 404 전용 화면 - 메뉴/상단바 없는 독립 페이지 */
.public-error-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(37, 99, 235, .16), transparent 28%),
        radial-gradient(circle at 82% 22%, rgba(14, 165, 233, .14), transparent 26%),
        linear-gradient(135deg, #f8fafc 0%, #eef2f7 52%, #e2e8f0 100%);
}

.public-error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 18px;
}

.public-error-card {
    width: min(980px, 100%);
}

.public-error-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}

.public-error-logo {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #2563eb;
    color: #fff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .24);
}

.public-error-logo .bi {
    font-size: 18px;
}

@media (max-width: 820px) {
    .public-error-page {
        padding: 18px 12px;
    }
}

/* Notice / 알림 */
.app-notice-bell {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.app-notice-bell.has-unread {
    border-color: rgba(220, 53, 69, .45);
    background: rgba(220, 53, 69, .06);
}

.app-notice-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 700;
    display: none;
    box-shadow: 0 4px 10px rgba(220, 53, 69, .28);
}

.app-notice-badge.show {
    display: inline-block;
}

.app-notice-toast {
    position: fixed;
    top: 76px;
    right: 20px;
    z-index: 2200;
    width: min(380px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.app-notice-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.app-notice-toast-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(13, 110, 253, .1);
    color: #0d6efd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.app-notice-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.app-notice-toast-body p {
    color: #64748b;
    font-size: 13px;
}

.notice-toolbar .notice-search {
    min-width: 240px;
}

.notice-slide-panel .slide-panel-body {
    padding-bottom: 24px;
}

.notice-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px;
    border: 1px solid #dce3ee;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: #f8fafc;
}

.notice-editor {
    min-height: 260px;
    padding: 14px;
    border: 1px solid #dce3ee;
    border-radius: 0 0 10px 10px;
    background: #fff;
    outline: none;
    overflow: auto;
    line-height: 1.6;
}

.notice-editor:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.12);
}

.notice-editor.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.08);
}

.notice-editor[contenteditable="false"] {
    background: #f8fafc;
}

.notice-file-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notice-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid #e5eaf2;
    border-radius: 10px;
    background: #fff;
}

.notice-file-item a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #334155;
    text-decoration: none;
}

.notice-file-item a:hover {
    color: #0d6efd;
}

.notice-unread-row td {
    font-weight: 600;
    background: rgba(13, 110, 253, .035) !important;
}

.notice-new-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #dc3545;
    margin-right: 6px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .app-notice-toast {
        top: 68px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    .notice-toolbar .notice-search {
        min-width: 100%;
    }
}

.notice-view-only .form-control:disabled,
.notice-view-only .form-select:disabled,
.notice-view-only .notice-editor[contenteditable="false"] {
    color: #334155;
    background: #f8fafc;
    opacity: 1;
    cursor: default;
}

.notice-view-only .notice-editor-toolbar,
.notice-view-only .js-notice-save,
.notice-view-only #frmNoticeFiles {
    display: none !important;
}

/* =========================================================
   Notice editor / attachment UI - V52
   ========================================================= */
.notice-editor-toolbar {
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f6fb 100%);
    border-color: #d7e0ec;
}

.notice-editor-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-right: 1px solid #e1e7f0;
}

.notice-editor-group:last-child {
    border-right: 0;
}

.notice-editor-select {
    min-width: 104px;
    height: 29px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
    border-radius: 8px;
}

.notice-editor-color-group {
    gap: 6px;
}

.notice-editor-color {
    width: 31px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
    border: 1px solid #d7e0ec;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    color: #475569;
}

.notice-editor-color:hover {
    background: #f4f8ff;
    color: #0d6efd;
}

.notice-editor-color input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.notice-editor h3,
.notice-editor h4 {
    margin: 10px 0 8px;
    font-weight: 800;
    color: #111827;
}

.notice-editor blockquote {
    margin: 10px 0;
    padding: 10px 12px;
    border-left: 4px solid #0d6efd;
    border-radius: 8px;
    background: #f1f7ff;
    color: #334155;
}

.notice-editor hr {
    margin: 14px 0;
    border: 0;
    border-top: 1px solid #d7e0ec;
    opacity: 1;
}

.notice-editor table,
.notice-editor-table {
    width: 100%;
    margin: 10px 0;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff;
}

.notice-editor table th,
.notice-editor table td,
.notice-editor-table th,
.notice-editor-table td {
    min-width: 60px;
    padding: 8px 10px;
    border: 1px solid #d7e0ec;
    vertical-align: top;
}

.notice-editor table th,
.notice-editor-table th {
    background: #f3f6fb;
    font-weight: 700;
}

.notice-file-upload {
    margin-top: 2px;
}

.notice-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.notice-file-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px dashed #b8c7da;
    border-radius: 12px;
    background: #f8fbff;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.notice-file-picker:hover {
    border-color: #0d6efd;
    background: #f2f8ff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.notice-file-picker-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f2ff;
    color: #0d6efd;
    flex: 0 0 auto;
    font-size: 18px;
}

.notice-file-picker-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notice-file-picker-text strong {
    color: #111827;
    font-size: 13px;
}

.notice-file-picker-text small {
    color: #64748b;
    font-size: 12px;
}

.notice-selected-file-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}

.notice-selected-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid #e5eaf2;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-size: 12px;
}

.notice-selected-file-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-selected-file-item small {
    color: #64748b;
    white-space: nowrap;
}

.notice-file-list {
    gap: 8px;
}

.notice-file-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e5eaf2;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
}

.notice-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #dfe7f1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
}

.notice-file-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.notice-file-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f4f8ff;
    color: #0d6efd;
    flex: 0 0 auto;
}

.notice-file-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notice-file-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 13px;
}

.notice-file-name:hover {
    color: #0d6efd !important;
}

.notice-file-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 11px;
}

.notice-file-meta span + span::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: 8px;
    border-radius: 50%;
    background: #94a3b8;
    vertical-align: middle;
}

.notice-file-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.notice-view-only .notice-file-upload,
.notice-view-only #noticeFileUploadWrap {
    display: none !important;
}

@media (max-width: 768px) {
    .notice-editor-group {
        border-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .notice-file-item {
        align-items: stretch;
        flex-direction: column;
    }

    .notice-file-actions {
        justify-content: flex-end;
    }
}


/* =========================================================
   Notice editor / attachment UI - V53 correction
   ========================================================= */
.notice-editor-toolbar {
    align-items: flex-start;
    gap: 6px;
    padding: 8px;
}

.notice-editor-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    min-height: 36px;
    padding: 3px 5px;
    border: 1px solid #dce4f0;
    border-radius: 10px;
    background: #fff;
}

.notice-editor-group:last-child {
    border-right: 1px solid #dce4f0;
}

.notice-editor-utility-group {
    margin-left: 0 !important;
}

.notice-editor-toolbar .btn-app-xs {
    min-width: 30px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    white-space: nowrap;
}

.notice-editor-toolbar .btn-app-xs i {
    line-height: 1;
}

.notice-editor-select {
    height: 28px;
}

.notice-editor-color {
    width: 30px;
    height: 28px;
    flex: 0 0 30px;
}

.notice-editor table,
.notice-editor-table {
    table-layout: fixed;
}

.notice-editor table col,
.notice-editor-table col {
    min-width: 44px;
}

.notice-editor table th,
.notice-editor-table th {
    word-break: keep-all;
    white-space: normal;
}

.notice-editor table td,
.notice-editor-table td {
    word-break: break-word;
}

.notice-file-actions .btn-outline-primary:hover,
.notice-file-actions .btn-outline-primary:focus,
.notice-file-actions .btn-outline-primary:active {
    color: #fff !important;
}

.notice-file-actions .btn-outline-primary:hover i,
.notice-file-actions .btn-outline-primary:focus i,
.notice-file-actions .btn-outline-primary:active i {
    color: #fff !important;
}

.notice-file-actions .btn {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

@media (max-width: 768px) {
    .notice-editor-toolbar {
        gap: 5px;
    }

    .notice-editor-group {
        flex-wrap: wrap;
    }
}




/* =========================================================
   Common grid visual standard - V56
   - 모든 업무 그리드 header를 동일한 flat style로 통일
   - 선택 row와 header/body 경계선을 명확하게 표시
   ========================================================= */
.app-grid-panel table.app-grid-table thead th,
.app-grid-panel table.dataTable thead th {
    color: #334155 !important;
    background: #f8fafc !important;
    background-image: none !important;
    border-bottom: 1px solid #cbd5e1 !important;
    font-weight: 700 !important;
}

.app-grid-panel table.app-grid-table tbody tr:hover td,
.app-grid-panel table.dataTable tbody tr:hover td {
    background: #f6faff !important;
}

.app-grid-panel table.app-grid-table tbody tr.active td,
.app-grid-panel table.dataTable tbody tr.active td,
.app-grid-panel table.app-grid-table tbody tr.selected td,
.app-grid-panel table.dataTable tbody tr.selected td {
    background: #eaf3ff !important;
    box-shadow: inset 0 1px 0 #93c5fd, inset 0 -1px 0 #93c5fd !important;
}

.app-grid-panel table.app-grid-table th,
.app-grid-panel table.app-grid-table td,
.app-grid-panel table.dataTable th,
.app-grid-panel table.dataTable td {
    border-right-color: #dbe4f0 !important;
    border-bottom-color: #e4ebf5 !important;
}

.app-grid-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 20px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    box-sizing: border-box;
}

.app-grid-pill-green {
    color: #047857;
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.app-grid-pill-blue {
    color: #0b5ed7;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.app-grid-pill-red {
    color: #b42318;
    background: #fff1f2;
    border-color: #fecdd3;
}

.app-grid-pill-gray {
    color: #475569;
    background: #f8fafc;
    border-color: #d9e2ef;
}

.app-grid-pill-light {
    color: #64748b;
    background: #ffffff;
    border-color: #dbe4f0;
}

.app-grid-pill-muted {
    color: #94a3b8;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* 컬럼 의미 기반 width - 화면 전용 table class 없이 컬럼 class 기준으로 적용 */
.app-grid-panel table.dataTable .notice-col-check { width: 44px !important; min-width: 44px !important; max-width: 44px !important; }
.app-grid-panel table.dataTable .notice-col-no { width: 64px !important; min-width: 64px !important; max-width: 64px !important; }
.app-grid-panel table.dataTable .notice-col-target { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
.app-grid-panel table.dataTable .notice-col-title { width: auto !important; min-width: 220px !important; }
.app-grid-panel table.dataTable .notice-col-date { width: 96px !important; min-width: 96px !important; max-width: 96px !important; }
.app-grid-panel table.dataTable .notice-col-status,
.app-grid-panel table.dataTable .notice-col-read { width: 74px !important; min-width: 74px !important; max-width: 74px !important; }
.app-grid-panel table.dataTable .notice-col-file { width: 58px !important; min-width: 58px !important; max-width: 58px !important; }
.app-grid-panel table.dataTable .notice-col-use { width: 62px !important; min-width: 62px !important; max-width: 62px !important; }
.app-grid-panel table.dataTable .notice-col-user { width: 96px !important; min-width: 96px !important; max-width: 96px !important; }
.app-grid-panel table.dataTable .notice-col-regdate { width: 104px !important; min-width: 104px !important; max-width: 104px !important; }


.notice-file-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 32px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #f8fbff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

.notice-file-count i {
    font-size: 12px;
    line-height: 1;
}

.notice-file-count-empty {
    color: #94a3b8;
}

.notice-unread-row td {
    background: #fbfdff !important;
    font-weight: 600;
}

.notice-unread-row:hover td {
    background: #f2f8ff !important;
}


/* =========================================================
   V59 업무화면 공통 색상/그리드 컬럼 개선
   - 화면 배경, Card Header, DataTable Header 색상 분리
   - DataTables 컬럼 width가 화면별 semantic width를 따르도록 보정
   ========================================================= */
body {
    background: var(--bg) !important;
}

.content {
    background: transparent;
}

.card-soft {
    background: var(--panel) !important;
    border-color: #d5dde8 !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.055) !important;
}

.card-soft .card-header,
.app-grid-panel-head {
    background: var(--card-head) !important;
    border-bottom-color: #dbe3ee !important;
}

.app-grid-panel {
    background: #fff !important;
    border-color: #cbd6e2 !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.05) !important;
}

.app-grid-scroll {
    overflow-x: auto !important;
    overflow-y: auto !important;
}

.app-grid-panel table.app-grid-table,
.app-grid-panel table.dataTable {
    max-width: none !important;
    table-layout: fixed !important;
}

.app-grid-panel table.app-grid-table thead th,
.app-grid-panel table.dataTable thead th {
    background: var(--grid-head) !important;
    color: #1f2937 !important;
    border-bottom: 1px solid var(--grid-head-line) !important;
    border-right: 1px solid var(--grid-line) !important;
    font-weight: 800 !important;
}

.app-grid-panel table.app-grid-table tbody td,
.app-grid-panel table.dataTable tbody td {
    border-right: 1px solid var(--grid-line) !important;
    border-bottom: 1px solid var(--grid-line) !important;
}

.app-grid-panel table.app-grid-table tbody tr:hover td,
.app-grid-panel table.dataTable tbody tr:hover td {
    background: #f4f8ff !important;
}

.app-grid-panel table.app-grid-table tbody tr.selected td,
.app-grid-panel table.app-grid-table tbody tr.active td,
.app-grid-panel table.dataTable tbody tr.selected td,
.app-grid-panel table.dataTable tbody tr.active td {
    background: #e1efff !important;
    box-shadow: inset 0 1px 0 #b9d8ff, inset 0 -1px 0 #b9d8ff !important;
}

/* DataTables가 생성하는 colgroup width를 강제로 auto 처리하지 않는다. */
.app-grid-panel table.dataTable colgroup col {
    width: inherit;
}

/* V59 회사/사용자관리 semantic column minimum widths */
#tblCompany {
    min-width: 1220px !important;
}

#tblUser {
    min-width: 1500px !important;
}

/* V66 공지 등록/상세 상단 입력 레이아웃 안정화
   - 대상회사 표시 여부와 관계없이 시작일/종료일은 항상 같은 줄에서 시작한다. */
#drawerNotice .notice-form-row-break {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    padding: 0;
    margin: 0;
}

#drawerNotice .js-notice-company-wrap.notice-hidden-placeholder {
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 767.98px) {
    #drawerNotice .notice-form-row-break {
        display: none;
    }

    #drawerNotice .js-notice-company-wrap.notice-hidden-placeholder {
        display: none !important;
        visibility: visible !important;
    }
}

/* V69 환경설정 - 본인 회사 정보 화면 */
.setting-page-wrap {
    max-width: 1120px;
    margin: 0 auto;
}

.setting-company-card {
    overflow: hidden;
}

.setting-card-head {
    min-height: 48px;
}

.setting-company-body {
    padding: 16px 18px 18px;
}

.setting-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #dbe7f5;
    border-radius: 14px;
    background: #f8fbff;
}

.setting-summary-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #2563eb;
    background: #eaf2ff;
    border: 1px solid #cfe0ff;
    flex: 0 0 auto;
}

.setting-company-body .form-label {
    font-size: 11px;
    font-weight: 800;
    color: #334155;
    margin-bottom: 4px;
}

/* V70 환경설정 입력 가능/불가능 필드 색상 구분 */
.setting-company-body .setting-field-editable {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.setting-company-body .setting-field-editable:hover {
    border-color: #94a3b8 !important;
}

.setting-company-body .setting-field-editable:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 .14rem rgba(37, 99, 235, .12) !important;
}

.setting-company-body .setting-field-readonly,
.setting-company-body .setting-field-readonly[readonly] {
    background-color: #f1f5f9 !important;
    border-color: #d8e1ec !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    font-weight: 700;
}

.setting-company-body .setting-field-address,
.setting-company-body .setting-field-address[readonly],
.setting-company-body .app-address-input-group .setting-field-address[readonly] {
    background-color: #f8fbff !important;
    border-color: #bfdbfe !important;
    color: #1e3a8a !important;
    cursor: default !important;
    font-weight: 700;
}

.setting-company-body .setting-field-address:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 .14rem rgba(37, 99, 235, .10) !important;
}

.setting-company-body textarea.setting-field-editable {
    height: auto !important;
    min-height: 92px !important;
    resize: vertical;
}

.setting-company-body .form-control::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

/* 권한관리 */
.role-auth-card .app-panel-head {
    align-items: center;
}

.role-auth-table-wrap {
    max-height: calc(100vh - 250px);
    overflow: auto;
}

.role-auth-table th,
.role-auth-table td {
    vertical-align: middle;
}

.role-menu-name {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.role-menu-name i {
    width: 18px;
    color: #52617a;
    text-align: center;
}

.role-menu-name span {
    font-weight: 700;
    color: #172033;
}

.role-menu-name small {
    margin-left: 4px;
    color: #7b8798;
    font-size: 11px;
}

/* 메뉴관리 */
.menu-icon-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 150px;
    white-space: nowrap;
}
.menu-icon-cell i {
    color: #335cff;
    font-size: 14px;
}
.app-readonly-hint[readonly] {
    background: #f5f7fb !important;
    color: #667085 !important;
}


/* 권한 변경/메뉴 이동 시 버튼 상태가 이전 사용자 캐시에 의해 꼬이지 않도록 공통 숨김 처리 */
.app-permission-hidden {
    display: none !important;
}

/* V76 메뉴관리 Bootstrap Icon 전체 선택 UI */
.app-bootstrap-icon-select {
    position: relative;
    width: 100%;
}

.app-bootstrap-icon-select .app-icon-source-select {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.app-icon-picker-toggle {
    width: 100%;
    min-height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #172033;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 9px;
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.app-icon-picker-toggle:hover,
.app-bootstrap-icon-select.is-open .app-icon-picker-toggle {
    border-color: #3b82f6;
    box-shadow: 0 0 0 .13rem rgba(59, 130, 246, .10);
}

.app-icon-picker-current {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.app-icon-picker-preview {
    width: 18px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #2563eb;
    background: #eff6ff;
    font-size: 14px;
}

.app-icon-picker-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.app-icon-picker-arrow {
    color: #64748b;
    font-size: 12px;
}

.app-icon-picker-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 5px);
    z-index: 2050;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
    padding: 8px;
}

.app-bootstrap-icon-select.is-open .app-icon-picker-panel {
    display: block;
}

.app-icon-picker-search-wrap {
    position: relative;
    margin-bottom: 7px;
}

.app-icon-picker-search-wrap > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 12px;
    pointer-events: none;
}

.app-icon-picker-search {
    height: 32px !important;
    padding-left: 29px !important;
    font-size: 12px !important;
}

.app-icon-picker-list {
    max-height: 280px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 4px;
    padding-right: 2px;
}

.app-icon-picker-item {
    border: 1px solid transparent;
    border-radius: 7px;
    background: #ffffff;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    font-size: 12px;
    line-height: 1.1;
    min-width: 0;
    text-align: left;
}

.app-icon-picker-item:hover {
    background: #f1f5f9;
    border-color: #dbeafe;
    color: #1d4ed8;
}

.app-icon-picker-item.is-selected {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
    font-weight: 800;
}

.app-icon-picker-item i {
    width: 18px;
    min-width: 18px;
    text-align: center;
    font-size: 15px;
    color: #2563eb;
}

.app-icon-picker-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .app-icon-picker-list {
        grid-template-columns: 1fr;
        max-height: 240px;
    }
}


/* =========================================================
   V79 sidebar/dashboard polish
   - 좌측 상단 브랜드 링크
   - 사이드 메뉴 접힘/펼침 부드러운 전환
   - 대시보드 metric card 레이아웃 복구
   ========================================================= */
.brand {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.brand:hover {
    color: #fff;
    background: rgba(255,255,255,.055);
}

.brand:focus-visible {
    outline: 2px solid rgba(147,197,253,.65);
    outline-offset: -2px;
}

.brand-text,
.brand-text strong,
.brand-text small {
    min-width: 0;
}

.sidebar {
    transition: width .24s cubic-bezier(.2,.8,.2,1), flex-basis .24s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease;
    overflow-x: hidden;
}

.main {
    transition: width .24s cubic-bezier(.2,.8,.2,1);
}

.brand,
.side-link,
.nav-section {
    transition: padding .22s cubic-bezier(.2,.8,.2,1), margin .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease, height .22s ease, background .16s ease, color .16s ease;
}

.brand > div:last-child,
.side-link span {
    display: block;
    max-width: 132px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .2s cubic-bezier(.2,.8,.2,1), opacity .14s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}

.nav-section {
    max-height: 28px;
    overflow: hidden;
}

@media(min-width:901px) {
    html.sidebar-collapsed-preload .brand > div:last-child,
    html.sidebar-collapsed-preload .side-link span,
    .app.sidebar-collapsed .brand > div:last-child,
    .app.sidebar-collapsed .side-link span {
        display: block !important;
        max-width: 0 !important;
        opacity: 0 !important;
        transform: translateX(-4px);
    }

    html.sidebar-collapsed-preload .nav-section,
    .app.sidebar-collapsed .nav-section {
        display: block !important;
        max-height: 0 !important;
        opacity: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.metric-card {
    position: relative;
    min-height: 104px;
    padding: 14px 16px 13px;
    border: 1px solid #d5dde8;
    border-radius: 7px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15,23,42,.055);
    overflow: hidden;
}

.metric-card::after {
    content: '';
    position: absolute;
    right: -28px;
    top: -34px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(37,99,235,.075);
}

.metric-title {
    position: relative;
    z-index: 1;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.metric-value {
    position: relative;
    z-index: 1;
    margin-top: 7px;
    color: #0f172a;
    font-size: 28px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.04em;
}

.metric-desc {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
}

@media(max-width:1200px) {
    .dashboard-cards {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media(max-width:700px) {
    .dashboard-cards {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   V81 sidebar/performance UX polish
   - 접기/펼치기 슬라이딩 보강
   - 접힌 메뉴 아이콘 hover hint
   ========================================================= */
@media(min-width:901px) {
    .sidebar,
    .main {
        transition-duration: .28s;
        transition-timing-function: cubic-bezier(.22,.61,.36,1);
    }

    .side-link {
        position: relative;
        transition: background .16s ease, color .16s ease, padding .26s cubic-bezier(.22,.61,.36,1), margin .26s cubic-bezier(.22,.61,.36,1), transform .18s ease;
    }

    .side-link:hover {
        transform: translateX(1px);
    }

    .app.sidebar-collapsed .side-link:hover {
        transform: none;
    }

    .brand > div:last-child,
    .side-link span {
        will-change: max-width, opacity, transform;
    }

    .app.sidebar-collapsed .side-link[data-menu-hint]:hover::after,
    html.sidebar-collapsed-preload .side-link[data-menu-hint]:hover::after {
        content: attr(data-menu-hint);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        z-index: 3000;
        min-width: max-content;
        max-width: 220px;
        padding: 6px 9px;
        border-radius: 6px;
        background: #111827;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
        box-shadow: 0 10px 24px rgba(15,23,42,.22);
        pointer-events: none;
        white-space: nowrap;
    }

    .app.sidebar-collapsed .side-link[data-menu-hint]:hover::before,
    html.sidebar-collapsed-preload .side-link[data-menu-hint]:hover::before {
        content: "";
        position: absolute;
        left: calc(100% + 4px);
        top: 50%;
        transform: translateY(-50%);
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #111827;
        z-index: 3001;
        pointer-events: none;
    }
}


/* 공지 상세가 보기 전용이면 저장/삭제/첨부삭제 버튼을 강제로 숨긴다. */
#drawerNotice.notice-view-only .js-notice-save,
#drawerNotice.notice-view-only .js-notice-delete-current,
#drawerNotice.notice-view-only .js-notice-file-delete,
#drawerNotice.notice-view-only #noticeFileUploadWrap {
    display: none !important;
}

/* 거래처/현장 관리 */
.app-search-input-group {
    min-width: 260px;
}

.site-map-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.site-map-status {
    font-size: 12px;
}

.site-map-box {
    position: relative;
    width: 100%;
    height: 280px;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
}

.site-map-box.site-map-box-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-map-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #64748b;
    font-size: 13px;
    text-align: center;
    padding: 16px;
}

.site-map-coordinate {
    display: flex;
    gap: 14px;
    color: #64748b;
    font-size: 12px;
}

.site-map-coordinate strong {
    color: #0f172a;
    font-weight: 600;
}

.app-grid-pill.app-grid-pill-success {
    border-color: #86efac;
    background: #f0fdf4;
    color: #15803d;
}

@media (max-width: 768px) {
    .app-search-input-group {
        min-width: 100%;
    }

    .site-map-box {
        height: 220px;
    }
}


/* Help manual */
.title-group {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.app-title-help-btn {
    width: 25px;
    height: 25px;
    border: 1px solid #cfd8e6;
    border-radius: 50%;
    background: #fff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.app-title-help-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.help-slide-panel {
    width: min(720px, calc(100vw - 34px));
}

.help-page-wrap {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.help-list-card,
.help-content-card {
    min-height: calc(100vh - 88px);
}

.help-page-guide {
    border: 1px solid #d8e2ef;
    background: #f8fbff;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #475569;
}

.help-page-guide strong {
    color: #0f172a;
}

.help-menu-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.help-menu-item {
    border: 1px solid #d7e0ec;
    background: #fff;
    border-radius: 7px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    color: #1f2937;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.help-menu-item:hover,
.help-menu-item.active {
    border-color: #8bb6ff;
    background: #f4f8ff;
    box-shadow: 0 3px 10px rgba(37,99,235,.08);
}

.help-menu-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #eef4ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.help-menu-text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.help-menu-text strong {
    font-size: 13px;
    line-height: 1.2;
}

.help-menu-text small {
    color: #64748b;
    font-size: 11px;
}

.help-menu-arrow {
    color: #94a3b8;
    font-size: 12px;
}

.help-markdown-body {
    padding: 16px 18px;
    overflow: auto;
    line-height: 1.62;
    color: #1f2937;
}

.help-markdown-body h1 {
    font-size: 22px;
    font-weight: 850;
    border-bottom: 1px solid #e5eaf2;
    padding-bottom: 8px;
    margin: 0 0 16px;
}

.help-markdown-body h2 {
    font-size: 16px;
    font-weight: 800;
    margin: 20px 0 8px;
}

.help-markdown-body h3 {
    font-size: 14px;
    font-weight: 800;
    margin: 16px 0 8px;
}

.help-markdown-body p {
    margin: 6px 0 9px;
}

.help-markdown-body ul,
.help-markdown-body ol {
    margin: 6px 0 12px 20px;
    padding: 0;
}

.help-markdown-body li {
    margin: 3px 0;
}

.help-markdown-body code {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 12px;
}

.help-markdown-body pre {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    overflow: auto;
}

.help-table-wrap {
    overflow-x: auto;
    margin: 8px 0 14px;
}

.help-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d7e0ec;
    font-size: 12.5px;
}

.help-table th {
    background: #edf4fc;
    color: #0f172a;
    font-weight: 800;
    border: 1px solid #c9d6e6;
    padding: 6px 8px;
}

.help-table td {
    border: 1px solid #e2e8f0;
    padding: 6px 8px;
    background: #fff;
}

.help-empty-state,
.help-loading,
.help-error {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #64748b;
    gap: 6px;
}

.help-empty-state i {
    font-size: 34px;
    color: #94a3b8;
}

.help-empty-state strong {
    color: #1f2937;
}

.help-error {
    color: #dc2626;
}

@media (max-width: 900px) {
    .help-page-wrap {
        grid-template-columns: 1fr;
    }

    .help-list-card,
    .help-content-card {
        min-height: auto;
    }
}


/* Help management image upload panel - system admin only */
.help-admin-upload-panel {
    margin: 12px 14px 0;
    padding: 12px;
    border: 1px solid #d7e4f5;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.help-admin-upload-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.help-admin-upload-head strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
}

.help-admin-upload-head span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.help-admin-upload-grid {
    display: grid;
    grid-template-columns: minmax(150px, 180px) minmax(190px, 1fr) minmax(230px, 1.2fr) auto auto;
    gap: 8px;
    align-items: end;
}

.help-admin-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    margin: 0;
}

.help-admin-field > span {
    color: #475569;
    font-size: 11px;
    font-weight: 800;
}

.help-admin-file-label {
    width: 100%;
}

.help-admin-upload-btn,
.help-admin-delete-btn {
    height: 34px;
    align-self: end;
    white-space: nowrap;
}

.help-admin-upload-hint {
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.help-admin-upload-panel .help-capture-status {
    margin-top: 4px;
}

@media (max-width: 1120px) {
    .help-admin-upload-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .help-admin-upload-grid {
        grid-template-columns: 1fr;
    }

    .help-admin-upload-btn,
    .help-admin-delete-btn {
        width: 100%;
    }
}



/* Help manual capture image placeholders */
.help-capture-box {
    margin: 18px 0;
    border: 1px solid #d7deea;
    border-radius: 12px;
    background: #fbfcff;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.help-capture-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #e7ecf5;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #27364a;
    font-size: 13px;
    font-weight: 800;
}

.help-capture-title span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.help-capture-title small {
    flex: 0 0 auto;
    color: #8a97ab;
    font-size: 11px;
    font-weight: 700;
}

.help-capture-image-wrap {
    position: relative;
    min-height: 120px;
    background: #f5f7fb;
}

.help-capture-image {
    display: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0;
}

.help-capture-loading,
.help-capture-empty {
    display: none;
    padding: 26px 16px;
    text-align: center;
    color: #64748b;
}

.help-capture-empty i {
    display: block;
    margin-bottom: 8px;
    font-size: 30px;
    color: #94a3b8;
}

.help-capture-empty strong {
    display: block;
    margin-bottom: 4px;
    color: #334155;
    font-size: 14px;
}

.help-capture-empty span {
    display: block;
    color: #64748b;
    font-size: 13px;
}

.help-capture-empty small {
    display: block;
    margin-top: 8px;
    color: #94a3b8;
    font-size: 12px;
}

.help-capture-box.is-loading .help-capture-loading {
    display: block;
}

.help-capture-box.is-missing .help-capture-empty {
    display: block;
}

.help-capture-box.has-image .help-capture-image {
    display: block;
}

.help-capture-box.is-hidden {
    display: none !important;
}

.help-capture-upload {
    padding: 10px 12px 12px;
    border-top: 1px solid #e7ecf5;
    background: #ffffff;
}

.help-capture-upload-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.help-capture-upload-row .help-capture-file {
    min-width: 0;
}

.help-capture-status {
    min-height: 17px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 720px) {
    .help-capture-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .help-capture-upload-row {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Help capture upload control - system admin only, centered custom file picker */
.help-capture-file-label {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    margin: 0;
    border: 1px solid #d8e0ef;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    cursor: pointer;
}

.help-capture-file-label:hover {
    border-color: #b9c6dc;
    background: #fbfdff;
}

.help-capture-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.help-capture-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: stretch;
    flex: 0 0 auto;
    padding: 0 12px;
    border-right: 1px solid #d8e0ef;
    background: #f6f8fc;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.help-capture-file-name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-capture-upload-btn,
.help-capture-delete-btn {
    flex: 0 0 auto;
    height: 34px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .help-capture-file-label,
    .help-capture-upload-btn,
    .help-capture-delete-btn {
        width: 100%;
    }
}


/* V91 compact grid height fix
   - 브라우저 폭이 줄어들 때 기존 @media(max-width:1300px)에서 grid panel을 520px로 고정해
     데이터가 적은 DataTable 하단에 큰 빈 공간이 생기던 문제를 보정한다. */
.app-grid-wrap {
    align-items: start !important;
}

.app-grid-wrap > .app-grid-panel,
.code-grid-wrap > .app-grid-panel {
    height: auto !important;
    min-height: 0 !important;
}

.app-grid-panel .app-grid-scroll {
    height: auto !important;
    min-height: 0 !important;
}

@media(max-width: 1300px) {
    .app-grid-wrap > .app-grid-panel,
    .code-grid-wrap > .app-grid-panel {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* =========================================================
   V97 적재함 관리 / QR 출력 / QR 위치전송
   ========================================================= */
.container-price-guide {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid #d9e4f2;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    color: #334155;
}

.container-price-guide-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #2563eb;
    background: #eaf2ff;
    border: 1px solid #d7e5ff;
    flex: 0 0 auto;
}

.container-price-guide strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    color: #0f172a;
}

.container-price-guide p {
    font-size: 12px;
    color: #64748b;
}

.container-last-location {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid #dce5ef;
    border-radius: 8px;
    background: #fbfcff;
    font-size: 12px;
    color: #64748b;
}

.container-last-location strong {
    color: #0f172a;
}

.container-qr-mini-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    min-height: 112px;
    border: 1px solid #dce5ef;
    border-radius: 8px;
    background: #fbfcff;
}

.container-qr-mini {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.container-qr-mini svg {
    width: 96px;
    height: 96px;
}

.container-qr-mini-empty {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
}

.container-qr-mini-info {
    min-width: 0;
}

.container-qr-mini-info strong,
.container-qr-mini-info small {
    display: block;
}

.container-qr-mini-info strong {
    color: #0f172a;
    font-size: 14px;
    margin-bottom: 4px;
}

.container-qr-mini-info small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.container-qr-print-body {
    background: #eef3f8;
    min-height: 100vh;
}

.container-qr-print-toolbar {
    height: 58px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #d6e0eb;
    background: #fff;
}

.container-qr-print-toolbar strong,
.container-qr-print-toolbar small {
    display: block;
}

.container-qr-print-toolbar small {
    color: #64748b;
    font-size: 12px;
}

.container-qr-print-page {
    width: 210mm;
    min-height: 297mm;
    margin: 16px auto;
    background: #fff;
    box-shadow: 0 15px 40px rgba(15, 23, 42, .16);
}

.container-qr-print-card {
    min-height: 297mm;
    padding: 16mm 14mm 12mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.container-qr-print-head {
    width: 100%;
    text-align: center;
}

.container-qr-print-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #1d4ed8;
    font-weight: 800;
    font-size: 13px;
}

.container-qr-print-head h1 {
    margin: 12px 0 5px;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: .02em;
    color: #0f172a;
}

.container-qr-print-head p {
    margin: 0;
    color: #475569;
    font-size: 15px;
}

.container-qr-large {
    width: 176mm;
    height: 176mm;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-qr-large svg {
    width: 176mm;
    height: 176mm;
    display: block;
}

.container-qr-print-foot {
    width: 100%;
    text-align: center;
    color: #334155;
}

.container-qr-print-foot p {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
}

.container-qr-print-foot small {
    display: block;
    color: #94a3b8;
    word-break: break-all;
    font-size: 10px;
}

.container-scan-page {
    min-height: calc(100vh - 88px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.container-scan-card {
    width: min(520px, 100%);
    padding: 26px;
    border: 1px solid #dbe3ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(15, 23, 42, .08);
    text-align: center;
}

.container-scan-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border-radius: 18px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 28px;
}

.container-scan-card h2 {
    margin-bottom: 6px;
    font-weight: 900;
    color: #0f172a;
}

.container-scan-info {
    margin: 18px 0;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
}

.container-scan-info dt,
.container-scan-info dd {
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
}

.container-scan-info dt {
    background: #f8fafc;
    color: #475569;
    font-weight: 800;
}

.container-scan-info dd {
    color: #0f172a;
    word-break: break-all;
}

.container-scan-info dt:last-of-type,
.container-scan-info dd:last-of-type {
    border-bottom: 0;
}

.container-scan-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 700;
}

.container-scan-status.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.container-scan-status.is-danger {
    border-color: #fecaca;
    background: #fff1f2;
    color: #be123c;
}

.container-scan-status.is-info {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    body.container-qr-print-body {
        background: #fff !important;
    }

    .container-qr-print-page {
        margin: 0 !important;
        width: 210mm !important;
        min-height: 297mm !important;
        box-shadow: none !important;
    }

    .container-qr-print-card {
        min-height: 297mm !important;
    }
}

.app-grid-pill.app-grid-pill-info,
.app-grid-pill-info {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.app-grid-pill.app-grid-pill-primary,
.app-grid-pill-primary {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

.app-grid-pill.app-grid-pill-warning,
.app-grid-pill-warning {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.app-grid-pill.app-grid-pill-danger,
.app-grid-pill-danger {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecaca;
}

/* =========================================================
   V99 적재함 관리 상세 레이아웃 / 지도 / 숫자 표시
   ========================================================= */
#tblContainer thead th {
    text-align: center !important;
    vertical-align: middle !important;
}

.container-form-layout .form-label {
    margin-bottom: 4px;
}

.container-qr-map {
    position: relative;
    width: 100%;
    height: 260px;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
}

.container-qr-map-canvas {
    width: 100%;
    height: 100%;
}

.container-qr-map.container-qr-map-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-qr-map-empty-message {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #64748b;
    font-size: 13px;
    text-align: center;
    padding: 16px;
}

#drawerContainer .container-qr-mini-box.h-100 {
    min-height: 132px;
}

@media(max-width: 900px) {
    .container-qr-map {
        height: 220px;
    }
}

/* =========================================================
   V100 적재함 지도 위치 지정/해제 + 메모/QR 높이 정리
   ========================================================= */
.container-map-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.container-map-status {
    font-size: 12px;
}

.container-memo-textarea {
    min-height: 122px;
    height: 100%;
    resize: vertical;
}

.container-qr-mini-box.container-qr-mini-box-compact {
    min-height: 122px;
    height: 100%;
    align-items: center;
}

.container-qr-mini-box-compact .container-qr-mini-info {
    display: flex;
    align-items: center;
}

.container-qr-mini-box-compact .container-qr-mini-info strong {
    margin-bottom: 0;
    font-size: 16px;
}

/* 계정/비밀번호/가장 로그인 */
.app-account-button {
    cursor: pointer;
    border: 1px solid #d8dce5;
}

.app-account-button:hover {
    background: #f8fafc;
}

.app-impersonation-exit {
    height: var(--h);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.app-account-modal .form-label {
    font-weight: 700;
    color: #1f2937;
}

/* 상단 사용자 팝업 메뉴 */
.app-account-dropdown {
    position: relative;
}

.app-account-button.dropdown-toggle::after {
    margin-left: 4px;
    color: #64748b;
    border-top-width: .32em;
}

.app-account-menu {
    min-width: 210px;
    padding: 8px;
    border: 1px solid #d8e1ef;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}

.app-account-menu-header {
    padding: 8px 10px 6px;
}

.app-account-menu-user {
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    line-height: 1.25;
}

.app-account-menu-company {
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.25;
}

.app-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 13px;
    color: #1f2937;
}

.app-account-menu .dropdown-item i {
    width: 16px;
    color: #64748b;
    text-align: center;
}

.app-account-menu .dropdown-item:hover,
.app-account-menu .dropdown-item:focus {
    background: #f1f5ff;
    color: #1d4ed8;
}

.app-account-menu .dropdown-item:hover i,
.app-account-menu .dropdown-item:focus i {
    color: #2563eb;
}

/* 기사관리 */
.driver-toolbar .driver-company-select {
    min-width: 180px;
    max-width: 260px;
}

.driver-toolbar .driver-use-select {
    width: 110px;
}

.driver-search-box {
    width: 280px;
}

.driver-grid-table thead th {
    text-align: center;
    vertical-align: middle;
}

.driver-grid-table tbody td {
    vertical-align: middle;
}

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

.driver-form-field {
    min-width: 0;
}

.driver-form-field.is-full {
    grid-column: 1 / -1;
}

.driver-license-select {
    min-height: 118px;
}

@media (max-width: 1100px) {
    .driver-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .driver-search-box {
        width: 100%;
    }

    .driver-form-grid {
        grid-template-columns: 1fr;
    }
}

/* 기사관리 상세 입력 화면 정렬 보정 */
.driver-account-guide {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #d9e5f6;
    border-radius: 12px;
    background: #f8fbff;
}

.driver-account-guide-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    background: #e8f1ff;
    color: #2563eb;
    font-size: 18px;
}

.driver-account-guide strong {
    display: block;
    margin-bottom: 3px;
    color: #172033;
    font-weight: 800;
}

.driver-account-guide p {
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
}

.driver-form-layout .form-label {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}

.driver-form-layout .form-text {
    font-size: 12px;
    color: #64748b;
}

.driver-memo-textarea {
    min-height: 118px;
    resize: vertical;
}

#drawerDriver .slide-panel-header {
    align-items: flex-start;
}

#drawerDriver .slide-panel-body {
    padding-top: 12px;
}

@media (max-width: 768px) {
    #drawerDriver .slide-panel-header {
        flex-direction: column;
        gap: 10px;
    }

    #drawerDriver .slide-panel-header > .d-flex {
        width: 100%;
        justify-content: flex-end !important;
    }
}

/* 기사관리 - 면허종류 선택 칩 UI */
.driver-license-hidden-select {
    display: none !important;
}

.driver-license-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    min-height: 46px;
    border: 1px solid #d6deeb;
    border-radius: 8px;
    background: #fff;
}

.driver-license-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.driver-license-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.driver-license-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid #d6deeb;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.driver-license-chip input:checked + span {
    border-color: #2563eb;
    background: #e8f1ff;
    color: #174ea6;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
}

.driver-license-chip input:focus-visible + span {
    outline: 2px solid rgba(37, 99, 235, .35);
    outline-offset: 2px;
}

#drawerDriver .driver-account-field {
    transition: opacity .15s ease;
}


/* 차량관리 */
.vehicle-company-select { min-width: 180px; }
.vehicle-status-select { min-width: 130px; }
.vehicle-use-select { min-width: 110px; }
.vehicle-search-box { min-width: 260px; max-width: 360px; }
.vehicle-grid-table thead th { text-align: center; vertical-align: middle; }
.vehicle-grid-table tbody td { vertical-align: middle; }
.vehicle-spec-hidden-select { display: none !important; }
.vehicle-spec-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px solid #d6deeb;
    border-radius: 8px;
    background: #fbfdff;
    min-height: 50px;
}
.vehicle-spec-chip { margin: 0; cursor: pointer; }
.vehicle-spec-chip input { position: absolute; opacity: 0; pointer-events: none; }
.vehicle-spec-chip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid #d7e1ef;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.vehicle-spec-chip input:checked + span {
    border-color: #2563eb;
    background: #eef5ff;
    color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
}
.vehicle-spec-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(37, 99, 235, .20); }
.vehicle-last-location {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid #d6deeb;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vehicle-map-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.vehicle-map-status { font-size: 12px; }
.vehicle-map {
    position: relative;
    height: 260px;
    border: 1px solid #d6deeb;
    border-radius: 10px;
    background: #f8fafc;
    overflow: hidden;
}
.vehicle-map-canvas { width: 100%; height: 100%; }
.vehicle-map-empty { display: flex; align-items: center; justify-content: center; color: #64748b; }
.vehicle-map-empty-message { padding: 12px; text-align: center; font-size: 13px; }
.vehicle-memo-textarea { min-height: 120px; resize: vertical; }
@media (max-width: 768px) {
    .vehicle-search-box { min-width: 100%; }
    .vehicle-last-location { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* 선별장/계근장관리 */
.sortingyard-company-select { min-width: 180px; }
.sortingyard-waste-select { min-width: 140px; }
.sortingyard-use-select { min-width: 110px; }
.sortingyard-search-box { min-width: 300px; max-width: 420px; }
.sortingyard-grid-table thead th { text-align: center; vertical-align: middle; }
.sortingyard-grid-table tbody td { vertical-align: middle; }
.sortingyard-waste-hidden-select { display: none !important; }
.sortingyard-waste-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px solid #d6deeb;
    border-radius: 8px;
    background: #fbfdff;
    min-height: 50px;
}
.sortingyard-waste-chip { margin: 0; cursor: pointer; }
.sortingyard-waste-chip input { position: absolute; opacity: 0; pointer-events: none; }
.sortingyard-waste-chip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid #d7e1ef;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.sortingyard-waste-chip input:checked + span {
    border-color: #2563eb;
    background: #eef5ff;
    color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
}
.sortingyard-waste-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(37, 99, 235, .20); }
.sortingyard-last-location {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid #d6deeb;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sortingyard-map-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.sortingyard-map-status { font-size: 12px; }
.sortingyard-map {
    position: relative;
    height: 260px;
    border: 1px solid #d6deeb;
    border-radius: 10px;
    background: #f8fafc;
    overflow: hidden;
}
.sortingyard-map-canvas { width: 100%; height: 100%; }
.sortingyard-map-empty { display: flex; align-items: center; justify-content: center; color: #64748b; }
.sortingyard-map-empty-message { padding: 12px; text-align: center; font-size: 13px; }
.sortingyard-memo-textarea { min-height: 120px; resize: vertical; }
@media (max-width: 768px) {
    .sortingyard-search-box { min-width: 100%; }
    .sortingyard-last-location { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* SortingYard list: fit columns without horizontal scrollbar */
.sortingyard-table-wrap {
    overflow-x: hidden !important;
}
.sortingyard-grid-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}
.sortingyard-grid-table th,
.sortingyard-grid-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sortingyard-grid-table .btn-app-xs {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 11px;
}
.sortingyard-grid-table .app-grid-check-cell {
    width: 38px !important;
}

/* Menu management drag sort */
.menu-sort-help {
    font-size: 11px;
    font-weight: 500;
}
.menu-drag-cell {
    width: 38px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}
.menu-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: grab;
}
.menu-drag-handle:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #2563eb;
}
.menu-drag-handle:active {
    cursor: grabbing;
}
#tblMenu tbody tr.menu-draggable-row {
    cursor: default;
}
#tblMenu tbody tr.menu-dragging td {
    opacity: .55;
}
#tblMenu tbody tr.menu-drag-over td {
    box-shadow: inset 0 2px 0 #2563eb;
    background: #eff6ff !important;
}

/* Common action button double-click guard */
.app-action-locked {
    pointer-events: none;
    cursor: wait !important;
    opacity: .72;
}
.app-action-locked i {
    pointer-events: none;
}

/* 작업/상태 배지: 상태값별로 구분되는 pill 스타일 */
.app-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid #cbd5e1;
    color: #475569;
    background: #f8fafc;
}

.app-status-badge-received,
.app-status-badge-default {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.app-status-badge-driver {
    border-color: #fde68a;
    color: #b45309;
    background: #fffbeb;
}

.app-status-badge-dispatch {
    border-color: #c4b5fd;
    color: #6d28d9;
    background: #f5f3ff;
}

.app-status-badge-progress {
    border-color: #67e8f9;
    color: #0e7490;
    background: #ecfeff;
}

.app-status-badge-weighed {
    border-color: #a7f3d0;
    color: #047857;
    background: #ecfdf5;
}

.app-status-badge-done {
    border-color: #86efac;
    color: #15803d;
    background: #f0fdf4;
}

.app-status-badge-cancel {
    border-color: #cbd5e1;
    color: #64748b;
    background: #f8fafc;
}

.app-grid-row-selected > td {
    background: #eff6ff !important;
    box-shadow: inset 0 1px 0 #bfdbfe, inset 0 -1px 0 #bfdbfe;
}

.app-history-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

.app-history-table th,
.app-history-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 8px 10px;
    vertical-align: middle;
    word-break: break-all;
}

.app-history-table th {
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
    text-align: center;
}

.app-history-empty {
    padding: 24px 12px;
    text-align: center;
    color: #64748b;
}

/* 작업접수 수정이력 링크 */
.app-history-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    padding: 1px 7px;
    border: 1px solid #93c5fd;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    cursor: pointer;
    white-space: nowrap;
}
.app-history-link:hover {
    border-color: #2563eb;
    background: #dbeafe;
    color: #1d4ed8;
}
.app-history-link i {
    font-size: 12px;
}

/* 작업접수 목록 페이징 */
.app-grid-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    font-size: 12px;
}

.app-grid-pager-info {
    color: #475569;
    white-space: nowrap;
}

.app-grid-pager-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

.app-grid-page-size {
    width: 92px;
    height: 26px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 12px;
}

.app-history-link.app-history-link-blue {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: transparent;
    border-color: transparent;
    padding-left: 2px;
    padding-right: 2px;
}

.app-history-link.app-history-link-blue:hover {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
    text-decoration: underline;
}

/* 배차 처리 화면 - 읽기 정보/입력 정보 분리 */
.dispatch-summary {
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.dispatch-summary-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.dispatch-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}

.summary-item {
    min-width: 0;
}

.summary-label {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.summary-value {
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 7px;
    background: #ffffff;
    border: 1px solid #edf2f7;
    font-size: 13px;
    color: #1e293b;
    display: flex;
    align-items: center;
    word-break: break-all;
}

.summary-value.strong {
    font-weight: 700;
}

.dispatch-input-area {
    padding-top: 2px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 800;
    color: #111827;
}

.dispatch-work-type {
    font-weight: 700;
    color: #1e293b;
}

.form-hint {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}

@media (max-width: 768px) {
    .dispatch-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* 배차관리 목록 안내문/버튼 정렬 */
.app-grid-guide {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* 배차관리 목록 가로 스크롤 최소화 */
.dispatch-grid-table {
    width: 100% !important;
    table-layout: fixed;
}

.dispatch-grid-table th,
.dispatch-grid-table td,
.app-grid-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dispatch-grid-table th,
.dispatch-grid-table td {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* 배차 처리 화면 요약카드 배치 */
.dispatch-summary-grid .summary-wide {
    grid-column: 1 / -1;
}

/* 배차수정 화면 - 상태 흐름/상단 운행 처리 */
.dispatch-status-flow-card {
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
}

.dispatch-status-flow-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 800;
    color: #111827;
}

.dispatch-next-action-text {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: #2563eb;
}

.dispatch-status-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.dispatch-status-flow .flow-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 60px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.dispatch-status-flow .flow-step-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #94a3b8;
}

.dispatch-status-flow .flow-step.done {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.dispatch-status-flow .flow-step.done .flow-step-dot {
    background: #3b82f6;
}

.dispatch-status-flow .flow-step.current {
    border-color: #2563eb;
    background: #dbeafe;
    color: #1e40af;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.dispatch-status-flow .flow-step.current .flow-step-dot {
    background: #1d4ed8;
}

.dispatch-status-flow .flow-step.cancel.current {
    border-color: #f87171;
    background: #fee2e2;
    color: #991b1b;
}

.dispatch-status-flow .flow-step.cancel.current .flow-step-dot {
    background: #dc2626;
}

.dispatch-status-flow .flow-line {
    flex: 1;
    min-width: 10px;
    height: 2px;
    border-radius: 999px;
    background: #cbd5e1;
}

.dispatch-status-flow .flow-line.done {
    background: #60a5fa;
}

@media (max-width: 768px) {
    .dispatch-status-flow {
        align-items: flex-start;
        flex-direction: column;
    }

    .dispatch-status-flow .flow-line {
        width: 2px;
        height: 14px;
        min-width: 2px;
        margin-left: 13px;
        flex: none;
    }

    .dispatch-next-action-text {
        margin-left: 0;
    }
}



/* 작업접수 회수/교체 대상 팝업은 우측 상세 슬라이드보다 항상 위에 표시 */
body.work-order-target-modal-open .drawer-backdrop {
    z-index: 1050;
}

body.work-order-target-modal-open .slide-panel.show {
    z-index: 1060;
}

body.work-order-target-modal-open .modal-backdrop.show {
    z-index: 3060;
}

#pickupTargetModal {
    z-index: 3070;
}

/* 작업접수 회수/교체 대상 팝업 */
.work-target-modal .modal-header {
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.work-target-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.work-target-select {
    max-width: 180px;
}

.work-target-search {
    min-width: 280px;
    max-width: 430px;
    flex: 1 1 320px;
}

.work-target-scroll {
    max-height: 520px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

.work-target-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
}

.work-target-table td,
.work-target-table th {
    vertical-align: middle;
}

.form-hint {
    min-height: 18px;
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
}

/* 작업접수 설치/교체/회수 연관관계 */
.app-history-link-blue {
    color: #2563eb;
}

.work-relation-tree {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.work-relation-node {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}

.work-relation-node.active {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.work-relation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
}

.work-relation-content {
    min-width: 0;
    flex: 1;
}

.work-relation-title {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: #0f172a;
    font-size: 14px;
}

.work-relation-title span {
    color: #475569;
    font-weight: 700;
}

.work-relation-meta {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

/* 배차관리 상세 - 계근 처리 모드 compact layout */
#dispatchDrawer.dispatch-drawer-weighing-mode .slide-panel-header {
    min-height: 52px;
    padding-top: 8px;
    padding-bottom: 8px;
}

#dispatchDrawer.dispatch-drawer-weighing-mode .slide-panel-body {
    padding: 10px 12px;
}

.dispatch-weighing-mode .dispatch-status-flow-card {
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 9px;
}

.dispatch-weighing-mode .dispatch-status-flow-title {
    margin-bottom: 6px;
}

.dispatch-weighing-mode .dispatch-status-flow .flow-step {
    min-width: 54px;
    height: 22px;
    padding: 0 6px;
    font-size: 10.5px;
}

.dispatch-weighing-mode .dispatch-status-flow .flow-step-dot {
    width: 5px;
    height: 5px;
}

.dispatch-weighing-mode .dispatch-summary {
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 9px;
}

.dispatch-weighing-mode .dispatch-summary-title {
    margin-bottom: 6px;
    font-size: 12px;
}

.dispatch-weighing-mode .dispatch-summary-grid {
    grid-template-columns: 1.05fr 1.1fr 1fr 1.1fr 1fr 1.2fr;
    gap: 6px 8px;
}

.dispatch-weighing-mode .summary-label {
    margin-bottom: 2px;
    font-size: 10.5px;
}

.dispatch-weighing-mode .summary-value {
    min-height: 26px;
    padding: 4px 7px;
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
}

.dispatch-weighing-mode .dispatch-summary-grid .summary-wide {
    grid-column: auto;
}

.dispatch-weighing-mode .summary-address {
    grid-column: 1 / -1;
}

.dispatch-weighing-mode #assignSiteAddr {
    display: block;
}

.dispatch-weighing-panel {
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #f8fbff;
}

.dispatch-weighing-title,
.dispatch-collapse-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dispatch-weighing-title span,
.dispatch-collapse-title span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dispatch-weighing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px 8px;
}

.dispatch-weighing-field {
    min-width: 0;
}

.dispatch-weighing-field .form-label,
.dispatch-delivery-panel .form-label {
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}

.dispatch-weighing-field .form-control,
.dispatch-weighing-field .form-select,
.dispatch-delivery-panel .form-control,
.dispatch-delivery-panel .form-select {
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 13px;
}

.dispatch-weighing-memo {
    grid-column: 1 / -1;
}

.dispatch-weighing-memo textarea {
    min-height: 54px;
}

.dispatch-delivery-panel {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.dispatch-delivery-panel > summary {
    margin-bottom: 0;
    cursor: pointer;
    list-style-position: inside;
}

.dispatch-delivery-panel[open] > summary {
    margin-bottom: 8px;
}

.dispatch-weighing-mode .dispatch-delivery-panel {
    margin-top: 6px;
    background: #f8fafc;
}

.dispatch-weighing-mode .dispatch-delivery-panel:not([open]) {
    padding-top: 7px;
    padding-bottom: 7px;
}

.dispatch-weighing-mode #dispatchDeliverySummaryText {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .dispatch-weighing-mode .dispatch-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dispatch-weighing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .dispatch-weighing-mode .dispatch-summary-grid,
    .dispatch-weighing-grid {
        grid-template-columns: 1fr;
    }
}

/* 배차관리 상세 - 계근 처리 모드 179 compact override */
#dispatchSummaryPanel.dispatch-summary > summary,
.dispatch-delivery-panel > summary {
    cursor: pointer;
}

#dispatchSummaryPanel.dispatch-summary:not([open]) {
    padding-top: 7px;
    padding-bottom: 7px;
}

#dispatchSummaryPanel.dispatch-summary:not([open]) .dispatch-summary-title {
    margin-bottom: 0;
}

.dispatch-weighing-mode #dispatchSummaryPanel.dispatch-summary {
    margin-bottom: 6px;
}

.dispatch-weighing-mode #dispatchSummaryPanel.dispatch-summary:not([open]) {
    background: #f8fafc;
}

.dispatch-weighing-mode .dispatch-weighing-panel {
    padding: 8px 10px;
    margin-bottom: 6px;
}

.dispatch-weighing-mode .dispatch-weighing-title {
    margin-bottom: 6px;
}

.dispatch-weighing-mode .dispatch-weighing-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px 8px;
}

.dispatch-weighing-mode .weigh-waste,
.dispatch-weighing-mode .weigh-slip {
    grid-column: span 3;
}

.dispatch-weighing-mode .weigh-gross,
.dispatch-weighing-mode .weigh-tare,
.dispatch-weighing-mode .weigh-net,
.dispatch-weighing-mode .weigh-unit,
.dispatch-weighing-mode .weigh-amount,
.dispatch-weighing-mode .weigh-dt {
    grid-column: span 2;
}

.dispatch-weighing-mode .dispatch-weighing-memo {
    grid-column: 1 / -1;
}

.dispatch-weighing-mode .dispatch-weighing-memo textarea,
.dispatch-weighing-mode #assignMemo {
    min-height: 32px;
    height: 32px;
    max-height: 32px;
    resize: none;
    overflow: hidden;
}

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

.dispatch-delivery-field {
    min-width: 0;
}

.delivery-memo-field {
    grid-column: 1 / -1;
}

.dispatch-weighing-mode .dispatch-delivery-panel {
    padding: 8px 10px;
    margin-top: 6px;
}

.dispatch-weighing-mode .dispatch-delivery-panel[open] > summary {
    margin-bottom: 6px;
}

.dispatch-weighing-mode .dispatch-delivery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
}

.dispatch-weighing-mode .delivery-driver-field,
.dispatch-weighing-mode .delivery-vehicle-field,
.dispatch-weighing-mode .delivery-yard-field {
    grid-column: span 1;
}

/* 계근 단계에서는 작업 적재함 변경 입력은 작업요약에 포함된 정보로 대체하여 공간을 줄인다. */
.dispatch-weighing-mode .delivery-container-field {
    display: none !important;
}

.dispatch-weighing-mode .delivery-memo-field {
    grid-column: 1 / -1;
}

.dispatch-weighing-mode .dispatch-weighing-field .form-label,
.dispatch-weighing-mode .dispatch-delivery-panel .form-label {
    margin-bottom: 2px;
    font-size: 11.5px;
}

.dispatch-weighing-mode .dispatch-weighing-field .form-control,
.dispatch-weighing-mode .dispatch-weighing-field .form-select,
.dispatch-weighing-mode .dispatch-delivery-panel .form-control,
.dispatch-weighing-mode .dispatch-delivery-panel .form-select {
    min-height: 30px;
    height: 30px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 12.5px;
}

.dispatch-weighing-mode .form-hint {
    margin-top: 4px;
    font-size: 11px;
}

@media (max-width: 900px) {
    .dispatch-weighing-mode .dispatch-weighing-grid,
    .dispatch-weighing-mode .dispatch-delivery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dispatch-weighing-mode .weigh-waste,
    .dispatch-weighing-mode .weigh-slip,
    .dispatch-weighing-mode .weigh-gross,
    .dispatch-weighing-mode .weigh-tare,
    .dispatch-weighing-mode .weigh-net,
    .dispatch-weighing-mode .weigh-unit,
    .dispatch-weighing-mode .weigh-amount,
    .dispatch-weighing-mode .weigh-dt,
    .dispatch-weighing-mode .delivery-driver-field,
    .dispatch-weighing-mode .delivery-vehicle-field,
    .dispatch-weighing-mode .delivery-yard-field {
        grid-column: span 1;
    }
}

@media (max-width: 576px) {
    .dispatch-weighing-mode .dispatch-weighing-grid,
    .dispatch-weighing-mode .dispatch-delivery-grid,
    .dispatch-delivery-grid {
        grid-template-columns: 1fr;
    }

    .dispatch-weighing-mode .weigh-waste,
    .dispatch-weighing-mode .weigh-slip,
    .dispatch-weighing-mode .weigh-gross,
    .dispatch-weighing-mode .weigh-tare,
    .dispatch-weighing-mode .weigh-net,
    .dispatch-weighing-mode .weigh-unit,
    .dispatch-weighing-mode .weigh-amount,
    .dispatch-weighing-mode .weigh-dt {
        grid-column: span 1;
    }
}

/* 배차관리 상세 - 180 작업요약/계근/배송배차 라인 정렬 개선 */
.dispatch-work-summary-panel {
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.dispatch-work-summary-title {
    margin-bottom: 7px;
}

.dispatch-work-summary-title span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dispatch-work-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px 8px;
}

.dispatch-work-summary-field {
    min-width: 0;
}

.dispatch-work-summary-field .form-label {
    margin-bottom: 2px;
    font-size: 11.5px;
    font-weight: 700;
    color: #334155;
}

.dispatch-readonly-value {
    min-height: 30px;
    height: 30px;
    padding: 5px 8px;
    border: 1px solid #edf2f7;
    border-radius: 7px;
    background: #ffffff;
    color: #1e293b;
    font-size: 12.5px;
    line-height: 18px;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
}

.dispatch-readonly-value.strong {
    font-weight: 700;
}

.work-summary-no,
.work-summary-status,
.work-summary-customer,
.work-summary-site,
.work-summary-request-spec,
.work-summary-pickup {
    grid-column: span 2;
}

.work-summary-address {
    grid-column: 1 / -1;
}

.dispatch-weighing-mode .dispatch-work-summary-panel,
.dispatch-weighing-mode .dispatch-weighing-panel,
.dispatch-weighing-mode .dispatch-delivery-panel {
    margin-bottom: 6px;
}

.dispatch-weighing-mode .dispatch-work-summary-panel {
    padding: 8px 10px;
}

.dispatch-weighing-mode .dispatch-work-summary-title {
    margin-bottom: 6px;
}

/* 800px 전후의 우측 패널에서도 요청한 항목들이 실제 같은 줄에 배치되도록 강제 */
.dispatch-weighing-mode .dispatch-work-summary-grid,
.dispatch-weighing-mode .dispatch-weighing-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dispatch-weighing-mode .work-summary-no,
.dispatch-weighing-mode .work-summary-status,
.dispatch-weighing-mode .work-summary-customer,
.dispatch-weighing-mode .work-summary-site,
.dispatch-weighing-mode .work-summary-request-spec,
.dispatch-weighing-mode .work-summary-pickup {
    grid-column: span 2;
}

.dispatch-weighing-mode .work-summary-address {
    grid-column: 1 / -1;
}

.dispatch-weighing-mode .weigh-waste,
.dispatch-weighing-mode .weigh-slip {
    grid-column: span 3;
}

.dispatch-weighing-mode .weigh-gross,
.dispatch-weighing-mode .weigh-tare,
.dispatch-weighing-mode .weigh-net,
.dispatch-weighing-mode .weigh-unit,
.dispatch-weighing-mode .weigh-amount,
.dispatch-weighing-mode .weigh-dt {
    grid-column: span 2;
}

.dispatch-weighing-mode .dispatch-weighing-memo {
    grid-column: 1 / -1;
}

.dispatch-weighing-mode .dispatch-delivery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dispatch-weighing-mode .delivery-driver-field,
.dispatch-weighing-mode .delivery-vehicle-field,
.dispatch-weighing-mode .delivery-yard-field {
    grid-column: span 1;
}

.dispatch-weighing-mode .delivery-memo-field {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .dispatch-work-summary-grid,
    .dispatch-weighing-mode .dispatch-work-summary-grid,
    .dispatch-weighing-mode .dispatch-weighing-grid,
    .dispatch-weighing-mode .dispatch-delivery-grid,
    .dispatch-delivery-grid {
        grid-template-columns: 1fr;
    }

    .work-summary-no,
    .work-summary-status,
    .work-summary-customer,
    .work-summary-site,
    .work-summary-request-spec,
    .work-summary-pickup,
    .work-summary-address,
    .dispatch-weighing-mode .work-summary-no,
    .dispatch-weighing-mode .work-summary-status,
    .dispatch-weighing-mode .work-summary-customer,
    .dispatch-weighing-mode .work-summary-site,
    .dispatch-weighing-mode .work-summary-request-spec,
    .dispatch-weighing-mode .work-summary-pickup,
    .dispatch-weighing-mode .work-summary-address,
    .dispatch-weighing-mode .weigh-waste,
    .dispatch-weighing-mode .weigh-slip,
    .dispatch-weighing-mode .weigh-gross,
    .dispatch-weighing-mode .weigh-tare,
    .dispatch-weighing-mode .weigh-net,
    .dispatch-weighing-mode .weigh-unit,
    .dispatch-weighing-mode .weigh-amount,
    .dispatch-weighing-mode .weigh-dt,
    .dispatch-weighing-mode .delivery-driver-field,
    .dispatch-weighing-mode .delivery-vehicle-field,
    .dispatch-weighing-mode .delivery-yard-field,
    .dispatch-weighing-mode .delivery-memo-field {
        grid-column: span 1;
    }
}

/* 배차관리 상세 - 181 계근/배차 입력 라인 최종 정렬 */
.dispatch-delivery-grid,
.dispatch-weighing-mode .dispatch-delivery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
}

.delivery-driver-field,
.delivery-vehicle-field,
.delivery-yard-field,
.dispatch-weighing-mode .delivery-driver-field,
.dispatch-weighing-mode .delivery-vehicle-field,
.dispatch-weighing-mode .delivery-yard-field {
    grid-column: span 1;
}

.delivery-container-field {
    grid-column: span 1;
}

.delivery-memo-field,
.dispatch-weighing-mode .delivery-memo-field {
    grid-column: 1 / -1;
}

/* 계근 정보: 1줄=폐기물종류/계근표번호/계근일, 2줄=총중량/공차중량/실중량, 3줄=단가/금액/공백 */
.dispatch-weighing-mode .dispatch-weighing-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px 8px;
}

.dispatch-weighing-mode .weigh-waste,
.dispatch-weighing-mode .weigh-slip,
.dispatch-weighing-mode .weigh-dt,
.dispatch-weighing-mode .weigh-gross,
.dispatch-weighing-mode .weigh-tare,
.dispatch-weighing-mode .weigh-net,
.dispatch-weighing-mode .weigh-unit,
.dispatch-weighing-mode .weigh-amount {
    grid-column: span 2;
}

.dispatch-weighing-mode .dispatch-weighing-memo {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .dispatch-delivery-grid,
    .dispatch-weighing-mode .dispatch-delivery-grid,
    .dispatch-weighing-mode .dispatch-weighing-grid {
        grid-template-columns: 1fr;
    }

    .delivery-driver-field,
    .delivery-vehicle-field,
    .delivery-yard-field,
    .delivery-container-field,
    .delivery-memo-field,
    .dispatch-weighing-mode .delivery-driver-field,
    .dispatch-weighing-mode .delivery-vehicle-field,
    .dispatch-weighing-mode .delivery-yard-field,
    .dispatch-weighing-mode .delivery-memo-field,
    .dispatch-weighing-mode .weigh-waste,
    .dispatch-weighing-mode .weigh-slip,
    .dispatch-weighing-mode .weigh-dt,
    .dispatch-weighing-mode .weigh-gross,
    .dispatch-weighing-mode .weigh-tare,
    .dispatch-weighing-mode .weigh-net,
    .dispatch-weighing-mode .weigh-unit,
    .dispatch-weighing-mode .weigh-amount,
    .dispatch-weighing-mode .dispatch-weighing-memo {
        grid-column: span 1;
    }
}

/* 배차관리 상세 - 182 섹션 타이틀 배경색 구분 스타일 */
#dispatchDrawer .dispatch-work-summary-panel,
#dispatchDrawer .dispatch-delivery-panel,
#dispatchDrawer .dispatch-weighing-panel {
    padding: 0 10px 10px;
    margin-bottom: 8px;
    border: 1px solid #e5eaf2;
    border-radius: 11px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: none;
}

#dispatchDrawer .dispatch-work-summary-title,
#dispatchDrawer .dispatch-collapse-title,
#dispatchDrawer .dispatch-weighing-title {
    min-height: 34px;
    margin: 0 -10px 9px;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    border-radius: 10px 10px 0 0;
    font-size: 13px;
    font-weight: 800;
}

#dispatchDrawer .dispatch-work-summary-title {
    background: #eef4ff;
    color: #1d4ed8;
}

#dispatchDrawer .dispatch-collapse-title {
    background: #ecfdf5;
    color: #047857;
}

#dispatchDrawer .dispatch-weighing-title {
    background: #fff7ed;
    color: #c2410c;
}

#dispatchDrawer .dispatch-work-summary-title span,
#dispatchDrawer .dispatch-collapse-title span,
#dispatchDrawer .dispatch-weighing-title span {
    color: inherit;
}

#dispatchDrawer .dispatch-work-summary-title i,
#dispatchDrawer .dispatch-collapse-title i,
#dispatchDrawer .dispatch-weighing-title i {
    font-size: 14px;
}

#dispatchDrawer .dispatch-collapse-title small,
#dispatchDrawer .dispatch-weighing-title small {
    color: rgba(15, 23, 42, .55) !important;
}

#dispatchDrawer .dispatch-work-summary-grid,
#dispatchDrawer .dispatch-delivery-grid,
#dispatchDrawer .dispatch-weighing-grid {
    padding: 0 2px;
}

#dispatchDrawer .dispatch-readonly-value,
#dispatchDrawer .dispatch-delivery-panel .form-control,
#dispatchDrawer .dispatch-delivery-panel .form-select,
#dispatchDrawer .dispatch-weighing-field .form-control,
#dispatchDrawer .dispatch-weighing-field .form-select {
    border-color: #d7dee8;
    background-color: #ffffff;
}

#dispatchDrawer .dispatch-readonly-value {
    background-color: #f8fafc;
}

#dispatchDrawer .dispatch-readonly-value:hover,
#dispatchDrawer .dispatch-delivery-panel .form-control:focus,
#dispatchDrawer .dispatch-delivery-panel .form-select:focus,
#dispatchDrawer .dispatch-weighing-field .form-control:focus,
#dispatchDrawer .dispatch-weighing-field .form-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .10);
}

#dispatchDrawer .dispatch-delivery-panel > summary {
    list-style-position: outside;
}

#dispatchDrawer .dispatch-delivery-panel[open] > summary {
    margin-bottom: 9px;
}

#dispatchDrawer .dispatch-weighing-panel .form-hint {
    padding: 0 2px;
}

#dispatchDrawer.dispatch-drawer-weighing-mode .dispatch-work-summary-panel,
#dispatchDrawer.dispatch-drawer-weighing-mode .dispatch-delivery-panel,
#dispatchDrawer.dispatch-drawer-weighing-mode .dispatch-weighing-panel {
    margin-bottom: 7px;
}

#dispatchDrawer.dispatch-drawer-weighing-mode .dispatch-work-summary-title,
#dispatchDrawer.dispatch-drawer-weighing-mode .dispatch-collapse-title,
#dispatchDrawer.dispatch-drawer-weighing-mode .dispatch-weighing-title {
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
}

@media (max-width: 640px) {
    #dispatchDrawer .dispatch-work-summary-panel,
    #dispatchDrawer .dispatch-delivery-panel,
    #dispatchDrawer .dispatch-weighing-panel {
        padding-left: 8px;
        padding-right: 8px;
    }

    #dispatchDrawer .dispatch-work-summary-title,
    #dispatchDrawer .dispatch-collapse-title,
    #dispatchDrawer .dispatch-weighing-title {
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* 배차관리 상세 - 183 현재 처리 영역 타이틀 색상 표준화
   기준: 현재 입력/처리해야 할 정보영역 = #eef4ff, 참고/완료 정보영역 = 회색계열 */
:root {
    --app-current-title-bg: #eef4ff;
    --app-current-title-fg: #1d4ed8;
    --app-muted-title-bg: #f3f4f6;
    --app-muted-title-fg: #374151;
    --app-muted-title-border: #e5e7eb;
}

#dispatchDrawer .dispatch-work-summary-title,
#dispatchDrawer .dispatch-collapse-title,
#dispatchDrawer .dispatch-weighing-title {
    background: var(--app-muted-title-bg);
    color: var(--app-muted-title-fg);
    border-bottom-color: var(--app-muted-title-border);
}

/* 배송/계근 전 단계에서는 배송·배차 정보가 현재 처리 영역 */
#dispatchDrawer:not(.dispatch-drawer-weighing-mode) .dispatch-collapse-title {
    background: var(--app-current-title-bg);
    color: var(--app-current-title-fg);
    border-bottom-color: #dbeafe;
}

/* 계근 단계에서는 계근 정보가 현재 처리 영역 */
#dispatchDrawer.dispatch-drawer-weighing-mode .dispatch-weighing-title {
    background: var(--app-current-title-bg);
    color: var(--app-current-title-fg);
    border-bottom-color: #dbeafe;
}

#dispatchDrawer .dispatch-collapse-title small,
#dispatchDrawer .dispatch-weighing-title small {
    color: rgba(55, 65, 81, .70) !important;
}

#dispatchDrawer:not(.dispatch-drawer-weighing-mode) .dispatch-collapse-title small,
#dispatchDrawer.dispatch-drawer-weighing-mode .dispatch-weighing-title small {
    color: rgba(29, 78, 216, .72) !important;
}

/* 공통 섹션 타이틀 패턴: 다른 업무화면에서도 회색 참고영역/파란 현재영역을 동일하게 사용 */
.app-info-section {
    padding: 0 12px 12px;
    margin-bottom: 10px;
    border: 1px solid #e5eaf2;
    border-radius: 11px;
    background: #ffffff;
    overflow: hidden;
}

.app-info-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    margin: 0 -12px 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--app-muted-title-border);
    background: var(--app-muted-title-bg);
    color: var(--app-muted-title-fg);
    font-size: 13px;
    font-weight: 800;
}

.app-info-section-title.is-current,
.app-info-section.is-current > .app-info-section-title {
    background: var(--app-current-title-bg);
    color: var(--app-current-title-fg);
    border-bottom-color: #dbeafe;
}

.app-info-section-title i {
    font-size: 14px;
}

/* 계근·정산 내역 화면도 같은 정보영역 타이틀 패턴 적용 */
#weighingDrawer .dispatch-summary {
    padding: 0 12px 12px;
    margin-bottom: 10px;
    border: 1px solid #e5eaf2;
    border-radius: 11px;
    background: #ffffff;
    overflow: hidden;
}

#weighingDrawer .dispatch-summary-title {
    min-height: 34px;
    margin: 0 -12px 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--app-muted-title-border);
    background: var(--app-muted-title-bg);
    color: var(--app-muted-title-fg);
    font-size: 13px;
    font-weight: 800;
}

#weighingDrawer .dispatch-input-area {
    padding: 0 12px 12px;
    margin-bottom: 10px;
    border: 1px solid #e5eaf2;
    border-radius: 11px;
    background: #ffffff;
    overflow: hidden;
}

#weighingDrawer .dispatch-input-area > .section-title {
    min-height: 34px;
    margin: 0 -12px 10px;
    padding: 7px 12px;
    border-bottom: 1px solid #dbeafe;
    background: var(--app-current-title-bg);
    color: var(--app-current-title-fg);
    font-size: 13px;
    font-weight: 800;
}

#weighingDrawer .dispatch-summary-grid,
#weighingDrawer .dispatch-input-area .row {
    padding: 0 2px;
}

/* =========================================================
   공통 날짜 선택 컨트롤 / 팝업 달력 디자인 개선 - 201
   - 날짜 입력칸은 일반 Textbox 톤을 유지한다.
   - 브라우저 기본 달력 대신 시스템 공통 팝업 달력을 사용한다.
   ========================================================= */
.form-control.app-date-input,
.form-control[type="date"] {
    min-width: 128px;
    color: #111827;
    font-weight: 500;
    letter-spacing: 0;
    background-color: #fff;
    border-color: var(--bs-border-color);
    box-shadow: none;
    cursor: pointer;
}

.form-control.app-date-input:focus,
.form-control[type="date"]:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

.form-control.app-date-input:disabled,
.form-control.app-date-input[readonly],
.form-control[type="date"]:disabled,
.form-control[type="date"][readonly] {
    color: #64748b;
    background-color: #e9ecef;
    cursor: default;
}

.period-filter {
    gap: 7px;
}

.period-filter > span {
    color: #64748b;
    font-weight: 800;
}

.period-filter .form-control.app-date-input,
.period-filter .form-control[type="date"] {
    width: 134px !important;
}

.app-date-picker {
    position: absolute;
    z-index: 2050;
    display: none;
    padding: 9px;
    border: 1px solid #cbd6e2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .08);
    user-select: none;
}

.app-date-picker.is-open {
    display: block;
}

.app-date-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 34px;
    margin-bottom: 6px;
}

.app-date-nav,
.app-date-title,
.app-date-foot-btn,
.app-date-day {
    border: 0;
    background: transparent;
    font-family: inherit;
}

.app-date-nav {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #334155;
}

.app-date-nav:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.app-date-title {
    flex: 1;
    height: 30px;
    border-radius: 8px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.app-date-title:hover {
    background: #f8fafc;
}

.app-date-week,
.app-date-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.app-date-week {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.app-date-week > div {
    height: 22px;
    line-height: 22px;
}

.app-date-week .is-sun,
.app-date-day.is-sun {
    color: #dc2626;
}

.app-date-week .is-sat,
.app-date-day.is-sat {
    color: #2563eb;
}

.app-date-day {
    height: 30px;
    border-radius: 8px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
}

.app-date-day:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.app-date-day.is-other {
    color: #a8b1c1;
}

.app-date-day.is-today {
    outline: 1px solid #93c5fd;
    outline-offset: -1px;
    background: #f8fbff;
}

.app-date-day.is-selected,
.app-date-day.is-selected:hover {
    background: #2563eb;
    color: #ffffff;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}

.app-date-picker-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5eaf2;
}

.app-date-foot-btn {
    height: 28px;
    min-width: 54px;
    padding: 0 10px;
    border-radius: 8px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.app-date-foot-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.app-date-foot-btn.is-primary {
    background: #eff6ff;
    color: #1d4ed8;
}

.app-date-foot-btn.is-primary:hover {
    background: #dbeafe;
}

/* =========================================================
   세금계산서 발행관리 - 매출/매입 통합 목록
   ========================================================= */

.tax-invoice-toolbar .form-select {
    min-width: 120px;
}

.tax-invoice-page .app-grid-panel .app-grid-scroll {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.tax-invoice-page .app-grid-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    font-size: 11.5px;
}

.tax-invoice-keyword {
    width: 360px;
}

.tax-invoice-guide {
    border-color: #dbeafe;
    background: #f8fbff;
}

.tax-invoice-table th,
.tax-invoice-table td,
.tax-invoice-item-table th,
.tax-invoice-item-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.tax-invoice-page .tax-invoice-table th,
.tax-invoice-page .tax-invoice-table td {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.tax-invoice-page .app-grid-panel table.app-grid-table thead th.app-grid-check-cell,
.tax-invoice-page .app-grid-panel table.app-grid-table tbody td.app-grid-check-cell {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.tax-invoice-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 20px;
    padding: 1px 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
}

.tax-invoice-badge.badge-blue,
.tax-invoice-badge.badge-sales {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.tax-invoice-badge.badge-purchase {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.tax-invoice-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.tax-invoice-detail-grid.amount-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tax-invoice-detail-grid .field,
.tax-invoice-party-card .field {
    min-width: 0;
}

.tax-invoice-detail-grid label,
.tax-invoice-party-card label {
    display: block;
    margin-bottom: 4px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.tax-invoice-party-card {
    height: 100%;
    padding: 10px;
    border: 1px solid #e5eaf2;
    border-radius: 10px;
    background: #ffffff;
}

.tax-invoice-party-card .party-title {
    margin-bottom: 8px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 900;
}

.tax-invoice-party-card .field + .field {
    margin-top: 6px;
}

.tax-invoice-party-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
}

.tax-invoice-party-grid .field + .field {
    margin-top: 0;
}

.tax-invoice-party-grid .full-line {
    grid-column: 1 / -1;
}

.tax-invoice-party-grid .address-one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#taxInvoiceDrawer .form-control[readonly] {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 650;
}

@media (max-width: 1200px) {
    .tax-invoice-detail-grid,
    .tax-invoice-detail-grid.amount-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .tax-invoice-keyword {
        width: 100%;
    }

    .tax-invoice-detail-grid,
    .tax-invoice-detail-grid.amount-grid,
    .tax-invoice-party-grid {
        grid-template-columns: 1fr;
    }

    .tax-invoice-party-grid .full-line {
        grid-column: span 1;
    }
}

/* =========================================================
   세금계산서 상세/날짜 입력 UX 보완 - 202
   ========================================================= */
.slide-panel.tax-invoice-detail-panel {
    width: 1120px;
    max-width: calc(100vw - 24px);
}

@media (max-width: 576px) {
    .slide-panel.tax-invoice-detail-panel {
        width: 100vw;
        max-width: 100vw;
    }
}

.form-control.app-date-input,
.form-control[type="date"] {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23334155' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px 15px;
}

.form-control.app-date-input:disabled,
.form-control.app-date-input[readonly],
.form-control[type="date"]:disabled,
.form-control[type="date"][readonly] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
}


/* =========================================================
   세금계산서 목록 촘촘한 그리드/삭제 버튼 노출 보완 - 203
   ========================================================= */
.tax-invoice-page .app-panel-actions .btn-app-xs {
    padding-left: 6px;
    padding-right: 6px;
}

.tax-invoice-page .tax-invoice-table .text-monospace {
    letter-spacing: -0.3px;
}

.tax-invoice-page .tax-invoice-table th,
.tax-invoice-page .tax-invoice-table td {
    letter-spacing: -0.15px;
}

/* =========================================================
   결제/미수관리 - 입출금 및 세금계산서 연결 - 207
   ========================================================= */
.payments-toolbar .form-select {
    min-width: 118px;
}

.payments-keyword {
    width: 380px;
}

.payments-page .app-grid-panel .app-grid-scroll {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.payments-page .app-grid-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    font-size: 11.5px;
}

.payments-table th,
.payments-table td,
.payments-map-table th,
.payments-map-table td,
.payments-target-table th,
.payments-target-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.payments-page .payments-table th,
.payments-page .payments-table td {
    padding-left: 3px !important;
    padding-right: 3px !important;
    letter-spacing: -0.15px;
}

.payments-page .app-grid-panel table.app-grid-table thead th.app-grid-check-cell,
.payments-page .app-grid-panel table.app-grid-table tbody td.app-grid-check-cell {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.slide-panel.payments-detail-panel {
    width: 1240px;
    max-width: calc(100vw - 24px);
}

.payments-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.payments-detail-grid .field {
    min-width: 0;
}

.payments-detail-grid .wide-field {
    grid-column: span 2;
}

.payments-detail-grid label {
    display: block;
    margin-bottom: 4px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.payments-balance-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 750;
}

.payments-balance-box span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding-right: 10px;
    border-right: 1px solid #dbe3ef;
}

.payments-balance-box span:last-child {
    border-right: 0;
}

.payments-balance-box strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 20px;
    padding: 1px 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
}

.payment-badge.badge-in,
.payment-badge.badge-sales,
.payment-badge.badge-matched {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.payment-badge.badge-out,
.payment-badge.badge-purchase {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.payment-badge.badge-partial {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.payment-badge.badge-unmapped {
    border-color: #e5e7eb;
    background: #f8fafc;
    color: #64748b;
}

.payments-mapping-grid-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.payments-mapping-grid {
    min-width: 0;
    border: 1px solid #e5eaf2;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.payments-sub-title {
    padding: 8px 10px;
    border-bottom: 1px solid #e5eaf2;
    background: #f8fafc;
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
}

.payments-map-table,
.payments-target-table {
    table-layout: fixed;
    font-size: 11.5px;
}

.payments-map-table th,
.payments-map-table td,
.payments-target-table th,
.payments-target-table td {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.payments-target-keyword {
    width: 360px;
}

.payments-mapping-grid.single {
    width: 100%;
}

.payments-mapping-section .app-info-section-title .btn {
    font-size: 12px;
    font-weight: 800;
}

.payments-target-modal .modal-dialog {
    max-width: min(1120px, calc(100vw - 28px));
}

body.payments-target-modal-open .modal-backdrop.show {
    z-index: 3060;
}

body.payments-target-modal-open .payments-target-modal {
    z-index: 3065;
}

.payments-target-modal .modal-body {
    background: #f8fafc;
}

.payments-target-modal .target-popup-grid {
    background: #ffffff;
}

.payments-target-modal .payments-target-table {
    table-layout: fixed;
    width: 100%;
    font-size: 11.5px;
}

.app-grid-pager.compact {
    padding: 6px 8px;
}

@media (max-width: 1200px) {
    .payments-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payments-mapping-grid-wrap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .payments-keyword,
    .payments-target-keyword {
        width: 100%;
    }

    .payments-detail-grid {
        grid-template-columns: 1fr;
    }

    .payments-detail-grid .wide-field {
        grid-column: span 1;
    }

    .slide-panel.payments-detail-panel {
        width: 100vw;
        max-width: 100vw;
    }
}

/* =========================================================
   결제/미수관리 - 거래원장형 입출금 목록 - 211
   ========================================================= */
.payments-page .payment-ledger-summary-cell {
    line-height: 1.2;
}

.payment-ledger-summary {
    min-width: 0;
    overflow: hidden;
}

.payment-ledger-summary strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0f172a;
    font-size: 11.5px;
    font-weight: 850;
}

.payment-ledger-summary small {
    display: block;
    overflow: hidden;
    margin-top: 1px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 650;
}

.payments-page .payment-ledger-money-cell {
    font-variant-numeric: tabular-nums;
}

.payment-ledger-amt {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
}

.payment-ledger-out {
    color: #b91c1c;
}

.payment-ledger-in {
    color: #1d4ed8;
}

/* =========================================================
   세금계산서 목록 입출금 연결상태 표시 - 213
   ========================================================= */
.tax-invoice-badge.badge-green {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.tax-invoice-badge.badge-amber {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.tax-invoice-badge.badge-gray {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #64748b;
}

.tax-invoice-payment-cell {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.tax-invoice-payment-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    line-height: 1.15;
}

.tax-invoice-payment-status small {
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 작업 단계별 근거자료 - 215
   기본 업무 입력 영역을 먼저 확인하고 하단에서 증빙을 관리할 수 있도록
   업로드 영역과 등록자료 영역을 분리한 카드형 레이아웃으로 정리한다. */
.work-evidence-panel {
    padding: 0 12px 12px;
    margin-top: 12px;
    margin-bottom: 10px;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

#dispatchDrawer .work-evidence-panel,
#weighingDrawer .work-evidence-panel {
    margin-bottom: 2px;
}

.work-evidence-panel > summary.work-evidence-title {
    min-height: 36px;
    margin: 0 -12px 12px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    border-radius: 12px 12px 0 0;
    background: #f5f3ff;
    color: #5b21b6;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 800;
}

.work-evidence-panel > summary.work-evidence-title::-webkit-details-marker {
    display: none;
}

.work-evidence-panel > summary.work-evidence-title::after {
    content: '접기';
    flex: 0 0 auto;
    padding: 2px 8px;
    border: 1px solid rgba(91, 33, 182, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    color: #6d28d9;
    font-size: 11px;
    font-weight: 800;
}

.work-evidence-panel:not([open]) > summary.work-evidence-title {
    margin-bottom: 0;
    border-bottom: 0;
}

.work-evidence-panel:not([open]) > summary.work-evidence-title::after {
    content: '펼치기';
}

.work-evidence-title span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
}

.work-evidence-title small {
    color: rgba(15, 23, 42, .58) !important;
    font-size: 12px;
    font-weight: 700 !important;
}

.work-evidence-layout {
    display: grid;
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.work-evidence-upload-card,
.work-evidence-list-card {
    min-width: 0;
    border: 1px solid #e5eaf2;
    border-radius: 10px;
    background: #fbfdff;
    padding: 10px;
}

.work-evidence-list-card {
    background: #ffffff;
}

.work-evidence-subtitle {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.work-evidence-upload-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: end;
}

.work-evidence-upload-grid .form-label {
    margin-bottom: 3px;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
}

.work-evidence-upload-action {
    display: flex;
    align-items: end;
    justify-content: flex-end;
}

.work-evidence-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 8px;
    max-height: 390px;
    overflow: auto;
    padding: 1px 2px 2px 1px;
}

.work-evidence-empty {
    grid-column: 1 / -1;
    border: 1px dashed #cfd8e3;
    border-radius: 10px;
    padding: 18px 12px;
    color: #64748b;
    background: #f8fafc;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.work-evidence-card {
    border: 1px solid #d6e0ec;
    border-radius: 11px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.work-evidence-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.work-evidence-thumb {
    height: 104px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.work-evidence-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work-evidence-file-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 34px;
    text-decoration: none;
}

.work-evidence-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.work-evidence-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    font-size: 10.5px;
    color: #64748b;
}

.work-evidence-step {
    display: inline-flex;
    align-items: center;
    max-width: 94px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-evidence-name {
    color: #0f172a;
    font-weight: 800;
    text-decoration: none;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-evidence-name:hover {
    color: #0d6efd;
    text-decoration: underline;
}

.work-evidence-memo-text {
    min-height: 18px;
    color: #475569;
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.work-evidence-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
}

.work-evidence-highlight {
    box-shadow: 0 0 0 3px rgba(109, 40, 217, .14), 0 8px 22px rgba(15, 23, 42, .08) !important;
    border-color: #a78bfa !important;
}

@media (max-width: 991.98px) {
    .work-evidence-layout {
        grid-template-columns: 1fr;
    }

    .work-evidence-list {
        max-height: none;
    }
}

@media (max-width: 575.98px) {
    .work-evidence-panel > summary.work-evidence-title {
        align-items: flex-start;
    }

    .work-evidence-title small {
        flex-basis: 100%;
    }
}

/* 계근 화면의 기본 섹션 타이틀 스타일보다 근거자료 타이틀을 우선 적용한다. */
#dispatchDrawer .work-evidence-panel > summary.work-evidence-title,
#weighingDrawer .work-evidence-panel > summary.work-evidence-title {
    min-height: 36px;
    margin: 0 -12px 12px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    border-radius: 12px 12px 0 0;
    background: #f5f3ff;
    color: #5b21b6;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 800;
}

#dispatchDrawer .work-evidence-panel:not([open]) > summary.work-evidence-title,
#weighingDrawer .work-evidence-panel:not([open]) > summary.work-evidence-title {
    margin-bottom: 0;
    border-bottom: 0;
}

/* =========================================================
   작업 단계별 근거자료 화면 개선 - 216
   - 상세 슬라이드 폭 확대
   - 작업접수/계근 입력 영역 compact 처리
   - 파일 업로드는 팝업에서 처리하고 상세에는 목록만 표시
   ========================================================= */
#dispatchDrawer.slide-panel.wide,
#weighingDrawer.slide-panel.wide {
    width: min(1180px, calc(100vw - 12px));
    max-width: calc(100vw - 12px);
}

#dispatchDrawer .slide-panel-body,
#weighingDrawer .slide-panel-body {
    padding: 10px 12px;
}

#weighingDrawer .dispatch-summary,
#weighingDrawer .dispatch-input-area,
#dispatchDrawer .dispatch-work-summary-panel,
#dispatchDrawer .dispatch-delivery-panel,
#dispatchDrawer .dispatch-weighing-panel,
#dispatchDrawer .work-evidence-panel {
    margin-bottom: 7px;
}

#weighingDrawer .dispatch-summary,
#weighingDrawer .dispatch-input-area,
#dispatchDrawer .dispatch-work-summary-panel,
#dispatchDrawer .dispatch-delivery-panel,
#dispatchDrawer .dispatch-weighing-panel,
#dispatchDrawer .work-evidence-panel,
#weighingDrawer .work-evidence-panel {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 9px;
}

#weighingDrawer .dispatch-summary-title,
#weighingDrawer .dispatch-input-area > .section-title,
#dispatchDrawer .dispatch-work-summary-title,
#dispatchDrawer .dispatch-collapse-title,
#dispatchDrawer .dispatch-weighing-title,
#dispatchDrawer .work-evidence-list-title,
#weighingDrawer .work-evidence-list-title {
    min-height: 31px;
    margin-bottom: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12.5px;
}

#weighingDrawer .dispatch-summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px 7px;
}

#weighingDrawer .dispatch-summary-grid .summary-item {
    grid-column: span 2;
}

#weighingDrawer .dispatch-summary-grid .summary-wide {
    grid-column: span 4;
}

#weighingDrawer .summary-label,
#weighingDrawer .form-label,
#dispatchDrawer .dispatch-work-summary-field .form-label,
#dispatchDrawer .dispatch-weighing-field .form-label,
#dispatchDrawer .dispatch-delivery-panel .form-label {
    margin-bottom: 2px;
    font-size: 11px;
}

#weighingDrawer .summary-value,
#dispatchDrawer .dispatch-readonly-value {
    min-height: 28px;
    height: 28px;
    padding: 4px 7px;
    font-size: 12px;
    line-height: 17px;
}

#weighingDrawer .dispatch-input-area .row {
    --bs-gutter-x: .5rem;
    --bs-gutter-y: .35rem;
}

#weighingDrawer .form-control,
#weighingDrawer .form-select,
#dispatchDrawer .dispatch-weighing-field .form-control,
#dispatchDrawer .dispatch-weighing-field .form-select,
#dispatchDrawer .dispatch-delivery-panel .form-control,
#dispatchDrawer .dispatch-delivery-panel .form-select {
    min-height: 30px;
    height: 30px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 12.5px;
}

#weighingDrawer textarea.form-control,
#dispatchDrawer textarea.form-control {
    height: 34px;
    min-height: 34px;
    resize: vertical;
}

#weighingDrawer #weighingMemo {
    height: 32px;
    min-height: 32px;
    overflow: hidden;
    resize: none;
    white-space: nowrap;
}

#weighingDrawer .form-hint,
#dispatchDrawer .form-hint {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
}

.work-evidence-list-panel {
    padding-top: 0 !important;
    overflow: hidden;
}

.work-evidence-list-title {
    margin-left: -10px !important;
    margin-right: -10px !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    border-radius: 0;
    background: #f5f3ff;
    color: #5b21b6;
    justify-content: space-between;
    gap: 8px;
}

.work-evidence-title-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.work-evidence-title-actions small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
}

.work-evidence-table-list {
    display: block;
    max-height: none;
    overflow: visible;
    padding: 0;
}

.work-evidence-table-scroll {
    max-height: 330px;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0;
}

.work-evidence-table {
    table-layout: fixed;
    margin-bottom: 0;
}

.work-evidence-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: #334155;
    font-size: 11.5px;
    font-weight: 850;
}

.work-evidence-table td,
.work-evidence-table th {
    padding: 5px 6px;
    vertical-align: middle;
}

.work-evidence-list-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 58px;
    border: 1px solid #dbe4ef;
    border-radius: 4px;
    overflow: hidden;
    background: #f8fafc;
    color: #64748b;
    text-decoration: none;
}

.work-evidence-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work-evidence-list-file i {
    font-size: 28px;
}

.work-evidence-table .work-evidence-step {
    max-width: 82px;
    justify-content: center;
    font-size: 10.5px;
}

.work-evidence-reg {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.15;
}

.work-evidence-reg strong,
.work-evidence-reg small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-evidence-reg strong {
    color: #334155;
    font-size: 11.5px;
    font-weight: 800;
}

.work-evidence-reg small {
    color: #64748b;
    font-size: 10.5px;
}

.work-evidence-table .work-evidence-actions {
    justify-content: center;
    flex-wrap: nowrap;
}

.work-evidence-upload-modal {
    z-index: 3070;
}

.modal-backdrop.show {
    z-index: 3060;
}

.work-evidence-upload-modal .modal-header {
    background: #f8fafc;
    border-bottom: 1px solid #e5eaf2;
}

.work-evidence-upload-modal .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 850;
}

.evidence-modal-grid {
    gap: 10px;
}

.evidence-modal-grid .form-label {
    margin-bottom: 4px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

@media (min-width: 992px) {
    #weighingDrawer .dispatch-input-area .col-md-4 {
        flex: 0 0 auto;
        width: 25%;
    }

    #weighingDrawer .dispatch-input-area .col-md-8 {
        display: none;
    }
}

@media (max-width: 768px) {
    #weighingDrawer .dispatch-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #weighingDrawer .dispatch-summary-grid .summary-item,
    #weighingDrawer .dispatch-summary-grid .summary-wide {
        grid-column: span 1;
    }

    .work-evidence-title-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .work-evidence-title-actions small {
        white-space: normal;
    }

    .work-evidence-table-scroll {
        max-height: 420px;
    }
}


/* =========================================================
   근거자료 목록 표시 정리 - 217
   - 상단 저장 옆 근거자료 이동 버튼 제거
   - 목록에서 파일명/메모/보기 버튼 제거
   - 썸네일 확대, 그리드 라운딩 제거
   - 계근 입력 메모 1줄 표시
   ========================================================= */
#dispatchDrawer #btnFocusDispatchEvidence,
#weighingDrawer #btnFocusWeighingEvidence {
    display: none !important;
}

#dispatchDrawer .work-evidence-table-scroll,
#weighingDrawer .work-evidence-table-scroll {
    border-radius: 0 !important;
    max-height: 340px;
}

#dispatchDrawer .work-evidence-list-title,
#weighingDrawer .work-evidence-list-title {
    border-radius: 0 !important;
}

#dispatchDrawer .work-evidence-table,
#weighingDrawer .work-evidence-table {
    border-radius: 0 !important;
}

#dispatchDrawer .work-evidence-list-thumb,
#weighingDrawer .work-evidence-list-thumb {
    width: 78px !important;
    height: 58px !important;
    border-radius: 4px;
}

#dispatchDrawer .work-evidence-list-file i,
#weighingDrawer .work-evidence-list-file i {
    font-size: 28px;
}

#weighingDrawer #weighingMemo {
    height: 32px !important;
    min-height: 32px !important;
    overflow: hidden;
    resize: none;
    white-space: nowrap;
}


/* 작업 단계별 근거자료 화면 개선 - 218
   표 형태 대신 여러 사진을 한 번에 훑어볼 수 있는 갤러리 카드 방식으로 표시한다. */
.work-evidence-table-list {
    max-height: none;
    overflow: visible;
    padding: 8px 0 2px;
}

.work-evidence-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    max-height: 460px;
    overflow-y: auto;
    padding: 2px 2px 8px;
}

.work-evidence-gallery-card {
    position: relative;
    flex: 0 0 184px;
    max-width: 184px;
    min-height: 224px;
    border: 1px solid #d8e0ec;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.work-evidence-gallery-card:hover {
    border-color: #9eb7da;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .10);
}

.work-evidence-gallery-media {
    display: block;
    width: 100%;
    height: 138px;
    background: #f4f7fb;
    border-bottom: 1px solid #e1e7f0;
    text-decoration: none;
}

.work-evidence-gallery-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.work-evidence-pdf-preview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #dc3545;
    gap: 4px;
}

.work-evidence-pdf-preview i {
    font-size: 40px;
    line-height: 1;
}

.work-evidence-pdf-preview em {
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
}

.work-evidence-gallery-info {
    padding: 8px 9px 38px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 84px;
}

.work-evidence-gallery-info .work-evidence-step {
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-evidence-gallery-date,
.work-evidence-gallery-user {
    display: block;
    font-size: 11px;
    line-height: 1.25;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-evidence-gallery-user {
    color: #334155;
    font-weight: 700;
}

.work-evidence-gallery-delete {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

@media (max-width: 1200px) {
    .work-evidence-gallery-card {
        flex-basis: 170px;
        max-width: 170px;
    }

    .work-evidence-gallery-media {
        height: 128px;
    }
}

/* =========================================================
   근거자료 헤더 여백 정리 - 219
   - 근거자료 타이틀과 우측 설명/추가 버튼을 같은 높이에서 정렬
   - 버튼이 우측 테두리에 붙어 보이지 않도록 내부 여백 통일
   ========================================================= */
#dispatchDrawer .work-evidence-list-title,
#weighingDrawer .work-evidence-list-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    min-height: 34px !important;
    margin: 0 -10px 8px !important;
    padding: 5px 12px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

#dispatchDrawer .work-evidence-list-title > span,
#weighingDrawer .work-evidence-list-title > span {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
    min-width: 90px;
    height: 24px;
    margin: 0 !important;
    line-height: 24px;
}

#dispatchDrawer .work-evidence-title-actions,
#weighingDrawer .work-evidence-title-actions {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: 0;
    height: 24px;
    margin: 0 !important;
    line-height: 1.2;
}

#dispatchDrawer .work-evidence-title-actions small,
#weighingDrawer .work-evidence-title-actions small {
    display: block;
    max-width: 620px;
    margin: 0 !important;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#dispatchDrawer .work-evidence-title-actions .btn,
#weighingDrawer .work-evidence-title-actions .btn {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    line-height: 1 !important;
}

#dispatchDrawer .work-evidence-title-actions .btn i,
#weighingDrawer .work-evidence-title-actions .btn i {
    line-height: 1;
}

@media (max-width: 768px) {
    #dispatchDrawer .work-evidence-list-title,
    #weighingDrawer .work-evidence-list-title {
        flex-wrap: wrap !important;
        align-items: center !important;
        min-height: 34px !important;
        padding: 6px 10px !important;
    }

    #dispatchDrawer .work-evidence-title-actions,
    #weighingDrawer .work-evidence-title-actions {
        flex-basis: 100%;
        height: auto;
        justify-content: space-between !important;
    }

    #dispatchDrawer .work-evidence-title-actions small,
    #weighingDrawer .work-evidence-title-actions small {
        line-height: 1.35;
        white-space: normal;
    }
}