body { 
    background-color: #f8fafc; 
    font-family: 'Inter', 'Noto Sans KR', sans-serif; 
    letter-spacing: -0.02em; 
    overflow-x: hidden;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.card { background: white; border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
.input-plain { border-bottom: 1px solid transparent; background: transparent; width: 100%; outline: none; transition: all 0.2s; }
.input-plain:focus { border-bottom: 1px solid #3b82f6; background: #f1f5f9; }
.handle { cursor: grab; color: #cbd5e1; padding-right: 8px; }
.month-btn {
    white-space: nowrap;
}
.month-btn.active { background-color: #2563eb !important; color: white !important; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3); border-color: #2563eb !important; }
.year-select { background: #1e293b; color: white; padding: 5px 15px; border-radius: 8px; font-weight: bold; cursor: pointer; }

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 0.75rem;
    text-align: left;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    body {
        font-size: 14px;
    }
    .card {
        padding: 1rem !important;
        border-radius: 12px;
    }
    .year-select {
        text-align: center;
        width: auto;
        margin-bottom: 0;
    }
    #month_selector {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        display: flex;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .month-btn {
        flex: 0 0 auto;
        padding: 0.5rem 0.75rem;
    }
    
    /* Remove horizontal scroll and stack table content */
    .category-table-container, .overflow-x-auto {
        overflow-x: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    table, thead, tbody, th, td, tr {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    thead {
        display: none !important;
    }
    
    .item-row {
        padding: 1rem 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        display: grid !important;
        grid-template-columns: 32px 1fr 1fr 32px !important;
        gap: 0.25rem 0.5rem !important;
        align-items: center;
    }

    #category_container .item-row td { padding: 0 !important; }
    #category_container .item-row td:nth-child(1) { grid-area: 1 / 1 / 2 / 2; } /* Handle */
    #category_container .item-row td:nth-child(2) { grid-area: 1 / 2 / 2 / 4; } /* Name */
    #category_container .item-row td:nth-child(5) { grid-area: 1 / 4 / 2 / 5; text-align: right; } /* Remove */
    #category_container .item-row td:nth-child(3) { grid-area: 2 / 2 / 3 / 3; } /* Detail */
    #category_container .item-row td:nth-child(4) { grid-area: 2 / 3 / 3 / 5; text-align: right; } /* Value */

    #invest_table_body .item-row {
        grid-template-columns: 32px 1fr 1fr 70px !important;
    }
    #invest_table_body .item-row td { padding: 0 !important; }
    #invest_table_body .item-row td:nth-child(1) { grid-area: 1 / 1 / 2 / 2; text-align: center; } /* Remove */
    #invest_table_body .item-row td:nth-child(2) { grid-area: 1 / 2 / 2 / 4; } /* Name */
    #invest_table_body .item-row td:nth-child(7) { grid-area: 1 / 4 / 2 / 5; text-align: right; } /* Pct */
    #invest_table_body .item-row td:nth-child(3) { grid-area: 2 / 2 / 3 / 3; } /* Type */
    #invest_table_body .item-row td:nth-child(4) { grid-area: 2 / 3 / 3 / 5; text-align: right; } /* Buy */
    #invest_table_body .item-row td:nth-child(5) { grid-area: 3 / 2 / 4 / 3; } /* Total Buy */
    #invest_table_body .item-row td:nth-child(6) { grid-area: 3 / 3 / 4 / 5; text-align: right; } /* Val */

    /* Data labels for invest table on mobile */
    #invest_table_body .item-row td:nth-child(4)::before { content: "투자: "; font-size: 10px; color: #94a3b8; font-weight: normal; }
    #invest_table_body .item-row td:nth-child(5)::before { content: "누적: "; font-size: 10px; color: #94a3b8; font-weight: normal; }
    #invest_table_body .item-row td:nth-child(6)::before { content: "평가: "; font-size: 10px; color: #94a3b8; font-weight: normal; }

    input.text-xl {
        font-size: 1.125rem;
        width: 100% !important;
    }
    
    .text-4xl { font-size: 1.875rem; line-height: 2.25rem; }
    .text-5xl { font-size: 2.25rem; line-height: 2.5rem; }
}

@media (max-width: 400px) {
    .item-row {
        grid-template-columns: 24px 1fr 1fr 24px !important;
    }
}