/* 공통 스타일 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* 기본 설정 */
* { box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; line-height: 1.6; color: #374151; }

/* 커스텀 스크롤바 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 버튼 스타일 */
.btn { display: inline-flex; align-items: center; padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; font-weight: 500; text-decoration: none; transition: all 0.2s ease-in-out; cursor: pointer; font-size: 0.875rem; }
.btn-primary { background-color: #2563eb; color: white; }
.btn-primary:hover { background-color: #1d4ed8; transform: translateY(-1px); }
.btn-secondary { background-color: #6b7280; color: white; }
.btn-secondary:hover { background-color: #4b5563; transform: translateY(-1px); }
.btn-success { background-color: #059669; color: white; }
.btn-success:hover { background-color: #047857; transform: translateY(-1px); }
.btn-warning { background-color: #f97316; color: white; }
.btn-warning:hover { background-color: #ea580c; transform: translateY(-1px); }

/* 테이블 스타일 */
.data-table { width: 100%; border-collapse: collapse; background: white; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
.data-table th { background-color: #f8fafc; color: #374151; font-weight: 600; padding: 1rem; text-align: left; border-bottom: 1px solid #e5e7eb; font-size: 0.875rem; }
.data-table td { padding: 1rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.data-table tbody tr:hover { background-color: #f9fafb; }

/* 금액 표시 스타일 */
.amount { font-weight: 600; color: #059669; }
.amount.negative { color: #dc2626; }

/* 클릭 가능한 금액 */
.amount-clickable { cursor: pointer; color: #2563eb; text-decoration: underline; text-decoration-style: dotted; }
.amount-clickable:hover { color: #1d4ed8; text-decoration-style: solid; background-color: #eff6ff; }

/* 상태 배지 */
.badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.badge-primary { background-color: #dbeafe; color: #1e40af; }
.badge-success { background-color: #d1fae5; color: #065f46; }

/* 로딩 스피너 */
.loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* 폼 스타일 */
.form-label { display: block; font-weight: 500; color: #374151; margin-bottom: 0.5rem; font-size: 0.875rem; }
.form-input, .form-select { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; transition: border-color 0.2s ease-in-out; }
.form-input:focus, .form-select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

/* 알림 메시지 */
.alert { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.alert-success { background-color: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.alert-error { background-color: #fecaca; color: #991b1b; border: 1px solid #f87171; }

/* 유틸리티 클래스 */
.hidden { display: none; }
.cursor-pointer { cursor: pointer; }

/* 네비게이션 스타일 */
.nav-link { display: inline-flex; align-items: center; padding: 0.5rem 1rem; color: #6b7280; text-decoration: none; border-radius: 0.375rem; transition: all 0.2s ease-in-out; }
.nav-link:hover { color: #374151; background-color: #f3f4f6; }
.nav-link.active { color: #2563eb; background-color: #dbeafe; }

/* --- 페이지별 스타일 --- */
#monthlyTable th { position: sticky; top: 0; z-index: 10; }
#monthlyTable tfoot tr { background-color: #f1f5f9; border-top: 2px solid #d1d5db; }
#monthlyTable tfoot td { font-weight: 700; color: #374151; }
#detailSection { animation: slideDown 0.3s ease-out; border: 1px solid #e5e7eb; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* 테이블 전체에 일관된 폰트 적용 */
.data-table th, .data-table td {
    font-family: 'Noto Sans KR', sans-serif;
}

/* 월별매출 현황 테이블 금액 줄바꿈 방지 */
#monthlyTable td:nth-child(3),
#monthlyTable td:nth-child(5),
#monthlyTable td:nth-child(7),
#monthlyTable td:nth-child(8) {
    min-width: 130px;
    white-space: nowrap;
}

/* 선택적 줄바꿈 방지 유틸리티 */
.no-wrap {
    white-space: nowrap;
}

/* 모달(팝업) 스타일 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* active 클래스가 추가되면 팝업을 표시 */
.modal-overlay.active {
    opacity: 1;
}

.modal-content {
    background-color: white;
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 90%;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}


/* 대시보드 카드 아이콘 스타일 */
.dashboard-icon {
    width: 2rem;
    height: 2rem;
    margin-right: 0.75rem;
}

/* 모든 svg 태그에 영향을 주는 광범위한 규칙 대신, 
   필요한 곳에만 클래스를 지정하여 사용하는 것이 좋습니다.
   만약 다른 곳의 svg 크기 문제가 발생하면 아래와 같이 수정하세요. */

/* 예시: '자세히 보기' 링크 옆 작은 화살표 아이콘 크기 지정 */
.inline-flex svg {
    width: 1rem;
    height: 1rem;
}

/* 정렬 아이콘 스타일 */
.sort-icon {
    display: inline-block;
    font-size: 0.7rem;
    color: #9ca3af;
    transition: color 0.2s ease;
}

.sort-icon.active {
    color: #2563eb;
}

.sort-icon.asc::before {
    content: '▲';
}

.sort-icon.desc::before {
    content: '▼';
}