/* ========================================
   기본 설정
======================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;

    font-family:
        Arial,
        "Noto Sans KR",
        sans-serif;

    background: #f5f7fa;
    color: #1f2937;
}


/* ========================================
   Header
======================================== */

header {
    background: #1f4e78;
    color: white;

    padding: 18px 24px;
}

header h1 {
    margin: 0;

    font-size: 22px;
}

header p {
    margin: 6px 0 0;

    font-size: 13px;

    opacity: 0.85;
}


/* ========================================
   Layout
======================================== */

.container {
    padding: 20px;
}


/* ========================================
   Toolbar
======================================== */

.toolbar {
    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin-bottom: 15px;
}

.btn {
    border: none;

    border-radius: 6px;

    padding: 9px 14px;

    cursor: pointer;

    font-size: 13px;

    font-weight: 600;
}

.btn:hover {
    opacity: 0.85;
}

.btn-primary {
    background: #2563eb;
    color: white;
}

.btn-green {
    background: #16a34a;
    color: white;
}

.btn-gray {
    background: #6b7280;
    color: white;
}

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


/* ========================================
   Summary
======================================== */

.summary {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(150px, 1fr));

    gap: 12px;

    margin-bottom: 18px;
}

.card {
    background: white;

    border-radius: 8px;

    padding: 16px;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.08);
}

.card-title {
    font-size: 12px;

    color: #6b7280;

    margin-bottom: 8px;
}

.card-value {
    font-size: 23px;

    font-weight: bold;
}


/* ========================================
   Table
======================================== */

.table-wrapper {
    background: white;

    border-radius: 8px;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.08);

    overflow: auto;

    max-height: 75vh;
}

table {
    border-collapse: separate;

    border-spacing: 0;

    min-width: 1200px;

    width: max-content;
}

th,
td {
    border-right: 1px solid #e5e7eb;

    border-bottom: 1px solid #e5e7eb;

    padding: 6px;

    text-align: center;

    white-space: nowrap;
}

th {
    background: #eef2f7;

    font-size: 12px;

    height: 42px;
}

td {
    background: white;
}


/* ========================================
   Sticky Columns
======================================== */

.sticky-project {
    position: sticky;

    left: 0;

    z-index: 5;

    width: 220px;

    min-width: 220px;

    background: white;
}

.sticky-start {
    position: sticky;

    left: 220px;

    z-index: 5;

    width: 110px;

    min-width: 110px;

    background: white;
}

.sticky-end {
    position: sticky;

    left: 330px;

    z-index: 5;

    width: 110px;

    min-width: 110px;

    background: white;
}

th.sticky-project,
th.sticky-start,
th.sticky-end {
    background: #dbe7f3;

    z-index: 10;
}


/* ========================================
   Month
======================================== */

.month-header,
.month-cell {
    width: 85px;

    min-width: 85px;
}


/* ========================================
   Input
======================================== */

input[type="text"],
input[type="month"],
input[type="number"] {
    width: 100%;

    border: 1px solid #d1d5db;

    border-radius: 4px;

    padding: 6px;

    font-size: 12px;

    text-align: center;
}

input[type="text"] {
    text-align: left;
}

input:focus {
    outline: 2px solid #93c5fd;

    border-color: #2563eb;
}

input:disabled {
    background: #f3f4f6;

    color: #9ca3af;

    cursor: not-allowed;
}


/* ========================================
   Total Rows
======================================== */

.total-row td {
    background: #e8f1fb;

    font-weight: bold;
}

.capacity-row td {
    background: #f3f4f6;
}


/* ========================================
   Load Status
======================================== */

.normal {
    background: #ecfdf5 !important;

    color: #166534;
}

.warning {
    background: #fef3c7 !important;

    color: #92400e;

    font-weight: bold;
}

.overload {
    background: #fee2e2 !important;

    color: #b91c1c;

    font-weight: bold;
}


/* ========================================
   Delete Button
======================================== */

.delete-btn {
    background: transparent;

    color: #dc2626;

    border: none;

    padding: 4px 7px;

    font-size: 16px;

    cursor: pointer;
}

.delete-btn:hover {
    background: #fee2e2;

    border-radius: 4px;
}


/* ========================================
   Legend
======================================== */

.legend {
    display: flex;

    gap: 15px;

    margin-top: 12px;

    font-size: 12px;

    align-items: center;
}

.legend span {
    display: inline-flex;

    align-items: center;

    gap: 5px;
}

.legend-box {
    width: 14px;

    height: 14px;

    border-radius: 3px;
}

.legend-normal {
    background: #ecfdf5;
}

.legend-warning {
    background: #fef3c7;
}

.legend-overload {
    background: #fee2e2;
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 900px) {

    .summary {
        grid-template-columns:
            repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .container {
        padding: 10px;
    }

    .summary {
        grid-template-columns: 1fr;
    }

}