* { margin: 0; padding: 0; box-sizing: border-box; }
:root { 
    --primary: #6366f1; 
    --primary-light: #818cf8;
    --danger: #ef4444;
    --success: #10b981;
    --border: #e2e8f0;
    --bg: #f8fafc;
    --text-main: #1e293b;
    --text-light: #64748b;
}

html, body { height: 100%; overflow: hidden; }
body {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text-main);
}

.app-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#mainApp {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 페이지 전환 */
.page { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.page.active { display: flex; }

/* 홈 컨테이너 */
.home-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 상단바 */
.top-bar {
    flex-shrink: 0;
    background: white;
    padding: 12px 20px 8px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
}
.top-left { flex: 1; }
.app-title { font-size: 1.6rem; font-weight: 600; color: var(--primary); }
.notice-area { display: flex; gap: 8px; margin-top: 6px; }
.notice-btn { background: none; border: 1px solid #cbd5e1; border-radius: 20px; padding: 4px 12px; font-size: 0.7rem; cursor: pointer; }
.notice-marquee { flex: 1; overflow: hidden; white-space: nowrap; }
.notice-marquee span { display: inline-block; padding-left: 100%; animation: marquee 15s linear infinite; color: #ef4444; font-size: 0.8rem; }
@keyframes marquee { 0% { transform: translate(0,0); } 100% { transform: translate(-100%,0); } }
.search-bar { margin-top: 8px; }
.search-input { width: 100%; height: 40px; border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; font-size: 0.9rem; }

.lang-group-vertical { display: flex; flex-direction: column; gap: 2px; background: #e2e8f0; border-radius: 20px; overflow: hidden; }
.lang-btn-vertical { background: white; border: none; padding: 5px 12px; font-size: 0.7rem; cursor: pointer; }
.lang-btn-vertical.active { background: var(--primary); color: white; }

/* 메인 그리드 */
.main-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
}
.grid-item {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.1s;
}
.grid-item:active { background: #f1f5f9; }
.grid-icon { font-size: 2.5rem; }
.grid-label { font-size: 0.9rem; font-weight: 500; }

/* 하단바 */
.bottom-bar {
    flex-shrink: 0;
    height: 56px;
    display: flex;
    gap: 12px;
    padding: 8px 16px env(safe-area-inset-bottom, 8px) 16px;
    background: white;
    border-top: 1px solid var(--border);
}
.bottom-btn {
    flex: 1;
    background: white;
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 8px 0;
    font-size: 0.9rem;
    cursor: pointer;
}

/* 페이지 헤더 */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid var(--border);
}
.back-btn, .print-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 6px 12px; }

/* 매출/수금 필터 */
.sales-filter-bar { padding: 12px 16px; background: white; border-bottom: 1px solid var(--border); }
.filter-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-btn { background: #f1f5f9; border: none; border-radius: 30px; padding: 6px 14px; font-size: 0.75rem; cursor: pointer; }
.date-range-panel { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.date-range-panel input { flex: 1; height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; }
.selected-date-range { font-size: 0.7rem; color: var(--primary); margin-bottom: 8px; }
.sales-search-wrapper { margin-top: 8px; }
.add-button-wrapper { padding: 12px 16px; }
#openSalesFormBtn { width: 100%; background: var(--primary); color: white; border: none; border-radius: 30px; padding: 12px; font-weight: bold; }
.sales-list-container { flex: 1; overflow-y: auto; padding: 12px 16px; }
.sales-item { border-bottom: 1px solid var(--border); padding: 12px 0; }
.collection-item { background-color: #fff0f0; border-radius: 12px; padding: 12px; }
.sales-row1 { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.customer-name { font-size: 1rem; font-weight: 600; color: var(--primary); }
.brand-name { font-size: 0.8rem; color: var(--text-light); }
.amount { margin-left: auto; font-weight: 600; }
.edit-icon { margin-left: 8px; color: var(--primary); cursor: pointer; }
.sales-row2 { display: flex; gap: 12px; font-size: 0.7rem; color: var(--text-light); margin-top: 6px; }
.payment-amount.highlight { color: var(--danger); font-weight: bold; }
.fixed-summary { background: white; border-top: 1px solid var(--border); padding: 12px 16px; display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 500; }

/* 거래 등록 모달 (심플) */
.transaction-modal { max-width: 500px; width: 90%; }
.transaction-form { padding: 0 4px; }
.form-row-simple { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 0.75rem; font-weight: 600; color: var(--primary); letter-spacing: -0.2px; }
.form-field input, .form-field select, .form-field textarea { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 0.9rem; background: white; }
.input-with-icon { display: flex; gap: 6px; align-items: center; }
.input-with-icon input, .input-with-icon select { flex: 1; }
.icon-btn { background: none; border: 1px solid var(--border); border-radius: 30px; padding: 8px 12px; cursor: pointer; color: var(--primary); }
.form-field-full { grid-column: span 2; margin-bottom: 16px; }
.receivable-info { text-align: right; font-size: 0.9rem; padding: 8px 0; border-top: 1px solid var(--border); margin-top: 8px; }

/* 통합 관리 모달 */
.generic-modal { max-width: 400px; width: 90%; }
.generic-modal-body { padding: 8px 0; }
.generic-input-area { display: flex; gap: 8px; margin-bottom: 16px; }
.generic-input { flex: 1; border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.btn-sm { background: var(--primary); color: white; border: none; border-radius: 30px; padding: 0 16px; cursor: pointer; }
.generic-list { list-style: none; max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.generic-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.generic-list li:hover { background: #f1f5f9; }
.generic-list li .delete-item { color: var(--danger); cursor: pointer; padding: 0 8px; }

/* 반응형 */
@media (min-width: 768px) {
    .main-grid { gap: 16px; padding: 24px; }
    .bottom-bar { height: 64px; }
}