/* FIFTY FIFTY 비용 분석 대시보드 - 스타일시트 */
/* 법률 문서 스타일: 세련된 미니멀 디자인 */

/* ==================== CSS 변수 ==================== */
:root {
    /* 색상 - 무채색 기반 + 딥블루 강조 */
    --color-bg: #ffffff;
    --color-bg-alt: #f8f9fa;
    --color-bg-hover: #f1f3f5;
    --color-border: #e5e7eb;
    --color-border-light: #f0f0f0;
    --color-text: #1f2937;
    --color-text-secondary: #6b7280;
    --color-text-muted: #9ca3af;

    /* 강조색 */
    --color-primary: #1e40af;
    --color-primary-light: #3b82f6;
    --color-primary-bg: #eff6ff;

    /* 상태 색상 */
    --color-income: #059669;
    --color-income-bg: #ecfdf5;
    --color-expense: #dc2626;
    --color-expense-bg: #fef2f2;
    --color-warning: #d97706;
    --color-warning-bg: #fffbeb;
    --color-internal: #7c3aed;
    --color-internal-bg: #f5f3ff;

    /* 타이포그래피 */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', system-ui, sans-serif;
    --font-mono: 'SF Mono', Consolas, 'Liberation Mono', monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* 간격 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* 레이아웃 */
    --sidebar-width: 280px;
    --header-height: 80px;

    /* 그림자 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* 전환 */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

/* ==================== 리셋 ==================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 스크롤바 공간 항상 확보 - 모달 열림/닫힘 시 레이아웃 안정성 */
    overflow-y: scroll;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    /* 모달 열림/닫힘 시 너비 안정성 보장 */
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    /* 브라우저 기본 스타일 리셋 - 모달 닫힘 후 레이아웃 안정성 */
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

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

/* ==================== 레이아웃 ==================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-xl);
    z-index: 100;
}

.header-title h1 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.header-title .case-number {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    display: block;
    margin-top: 2px;
}

.header-summary {
    display: flex;
    gap: var(--spacing-xl);
}

.summary-item {
    text-align: center;
}

.summary-item .label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}

.summary-item .value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono);
}

.summary-item.income .value {
    color: var(--color-income);
}

.summary-item.expense .value {
    color: var(--color-expense);
}

.summary-item.net .value.negative {
    color: var(--color-expense);
}

/* 직접비/간접비 서브 표시 */
.summary-item .sub-values {
    display: flex;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
    margin-top: 2px;
    justify-content: center;
}

.summary-item .sub-values .direct {
    color: #d97706; /* 직접비: 주황색 */
}

.summary-item .sub-values .indirect {
    color: #6b7280; /* 간접비: 회색 */
}

.header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    padding-top: var(--header-height);
    /* 모달 열림/닫힘 시 너비 안정성 보장 */
    width: 100%;
    max-width: 100%;
}

/* ==================== 사이드바 ==================== */
.sidebar {
    background: var(--color-bg-alt);
    border-right: 1px solid var(--color-border);
    padding: var(--spacing-lg);
    overflow-y: auto;
    height: calc(100vh - var(--header-height));
    position: sticky;
    top: var(--header-height);
}

.sidebar-nav {
    margin-bottom: var(--spacing-xl);
}

.nav-list {
    list-style: none;
}

.nav-item {
    margin-bottom: var(--spacing-xs);
}

.nav-item a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.nav-item a:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

.nav-item.active a {
    background: var(--color-primary-bg);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* 설정 패널 */
.settings-panel {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.settings-panel h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
}

.settings-panel .hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

/* 비용분류 설정 항목 */
.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.category-item:last-child {
    border-bottom: none;
}

.category-name {
    font-size: var(--font-size-xs);
    color: var(--color-text);
}

.toggle-group {
    display: flex;
    gap: 2px;
    background: var(--color-bg-hover);
    border-radius: 4px;
    padding: 2px;
}

.toggle {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: 3px;
    transition: all var(--transition-fast);
}

.toggle:hover {
    color: var(--color-text);
}

.toggle.active {
    background: var(--color-bg);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-sm);
}

/* 직접비/간접비 색상 구분 */
.toggle.active[data-value="direct"] {
    background: #dbeafe;
    color: #1d4ed8;
}

.toggle.active[data-value="indirect"] {
    background: #fee2e2;
    color: #dc2626;
}

/* 비용분류 그룹 */
.category-group {
    margin-bottom: var(--spacing-md);
}

.category-group:last-child {
    margin-bottom: 0;
}

.category-group-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 비용분류 변경 표시 */
.category-item.changed {
    background: var(--color-warning-bg);
    margin: 0 calc(-1 * var(--spacing-sm));
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 4px;
}

.category-item.changed .category-name::after {
    content: " *";
    color: var(--color-warning);
    font-weight: var(--font-weight-bold);
}

/* 설정 액션 버튼 그룹 */
.settings-actions {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

.settings-actions .btn-primary {
    flex: 0 0 auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

.settings-actions .btn-text {
    flex: 0 0 auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

/* 변경 정보 표시 */
.category-change-info {
    display: inline-block;
    margin-left: var(--spacing-xs);
    padding: 2px var(--spacing-xs);
    background: var(--color-warning-bg);
    border-radius: 3px;
    font-size: 10px;
    color: var(--color-warning);
}

.category-change-info .change-count {
    font-weight: var(--font-weight-bold);
}

/* 멤버 소속기간 설정 */
.member-period-item {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-bg);
    border-radius: 4px;
}

.member-period-item .member-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-xs);
}

.period-inputs {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.period-inputs input {
    width: 90px;
    font-size: var(--font-size-xs);
    padding: 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
}

.period-inputs span {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ==================== 메인 콘텐츠 ==================== */
.main {
    padding: var(--spacing-xl);
    background: var(--color-bg);
    min-height: calc(100vh - var(--header-height));
}

.view {
    animation: fadeIn 0.2s ease;
}

.view.hidden {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.view h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text);
}

.view h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.view-controls {
    display: flex;
    gap: var(--spacing-sm);
}

/* ==================== 요약 카드 ==================== */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--spacing-lg);
}

.card h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
}

.card .period {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.card-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.stat {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
}

.stat .label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.stat .value {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono);
}

.stat .value.income {
    color: var(--color-income);
}

.stat .value.expense {
    color: var(--color-expense);
}

/* 멤버 카드 */
.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.member-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.member-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

.member-header {
    margin-bottom: var(--spacing-md);
}

.member-header h4 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.member-header .join-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.member-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--spacing-xs) 0;
}

.stat-row.total {
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
}

.stat-row .label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.stat-row .value {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}

.stat-row .value.income {
    color: var(--color-income);
}

.stat-row .value.expense {
    color: var(--color-expense);
}

.stat-row .value.negative {
    color: var(--color-expense);
}

/* 직접비/간접비 상세 표시 */
.stat-row.expense-detail {
    padding: 2px 0;
    padding-left: var(--spacing-md);
}

.stat-row.expense-detail .label.sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.stat-row .value.direct {
    color: #d97706; /* 직접비: 주황색 */
    font-size: var(--font-size-xs);
}

.stat-row .value.indirect {
    color: #6b7280; /* 간접비: 회색 */
    font-size: var(--font-size-xs);
}

/* 기간 카드 내 직접/간접 서브 디테일 */
.stat .sub-detail {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
    margin-top: 2px;
}

.stat .sub-detail .direct {
    color: #d97706; /* 직접비: 주황색 */
}

.stat .sub-detail .indirect {
    color: #6b7280; /* 간접비: 회색 */
}

/* ==================== 데이터 테이블 ==================== */
.data-table-container {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.section-summary {
    display: flex;
    gap: var(--spacing-xl);
    padding: var(--spacing-md);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-md);
    border-radius: 6px;
}

.section-summary .summary-stat {
    text-align: center;
}

.section-summary .summary-stat .label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    display: block;
}

.section-summary .summary-stat .value {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono);
}

.data-table {
    width: 100%;
}

.data-table thead {
    background: var(--color-bg-alt);
}

.data-table th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover {
    color: var(--color-text);
}

.data-table th.sortable::after {
    content: ' \2195';
    color: var(--color-text-muted);
}

.data-table th.sortable.asc::after {
    content: ' \2191';
    color: var(--color-primary);
}

.data-table th.sortable.desc::after {
    content: ' \2193';
    color: var(--color-primary);
}

.data-table th.text-right,
.data-table td.text-right {
    text-align: right;
}

.data-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--color-bg-hover);
}

.data-table tbody tr:nth-child(even) {
    background: var(--color-bg-alt);
}

.data-table tbody tr:nth-child(even):hover {
    background: var(--color-bg-hover);
}

/* 금액 표시 */
.amount-cell {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-medium);
}

.amount-cell.income {
    color: var(--color-income);
}

.amount-cell.income::before {
    content: '+';
}

.amount-cell.expense {
    color: var(--color-expense);
}

/* 태그 */
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.tag.direct {
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

.tag.indirect {
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
}

.tag.internal {
    background: var(--color-internal-bg);
    color: var(--color-internal);
}

.tag.income-tag {
    background: var(--color-income-bg);
    color: var(--color-income);
}

.tag.direct-tag {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.tag.indirect-tag {
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
}

/* 카테고리 카드 헤더 */
.category-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.category-card .card-header h4 {
    margin: 0;
}

/* 테이블 푸터 */
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-page {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    border-radius: 4px;
    cursor: pointer;
}

.btn-page:hover:not(:disabled) {
    background: var(--color-bg-hover);
}

.btn-page:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.table-info {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* ==================== 버튼 ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--color-primary-light);
}

.btn-secondary {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-secondary:hover {
    background: var(--color-bg-hover);
}

.btn-text {
    background: transparent;
    color: var(--color-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

.btn-text:hover {
    background: var(--color-primary-bg);
}

.btn-icon {
    padding: var(--spacing-xs);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

.btn-icon:hover {
    color: var(--color-primary);
}

/* 메모 버튼 기본 스타일 */
.memo-btn {
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.memo-btn:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #475569;
}

/* 메모가 있는 항목의 메모 버튼 스타일 - 눈에 띄는 배지 형태 */
.memo-btn.has-memo {
    background: #3b82f6;
    color: #ffffff;
    font-weight: 600;
    border: 1px solid #2563eb;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.4);
}

.memo-btn.has-memo:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.5);
    transform: translateY(-1px);
}

/* ==================== 입력 요소 ==================== */
.input,
.select-input,
.search-input {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color var(--transition-fast);
}

.input:focus,
.select-input:focus,
.search-input:focus {
    outline: none;
    border-color: var(--color-primary-light);
}

.search-input {
    width: 200px;
}

.select-input {
    min-width: 180px;
    cursor: pointer;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-xs);
}

.radio-group {
    display: flex;
    gap: var(--spacing-md);
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
}

/* ==================== 모달 ==================== */
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background: var(--color-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform var(--transition-normal);
}

.modal.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.btn-close {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
}

.btn-close:hover {
    color: var(--color-text);
}

.modal-body {
    padding: var(--spacing-lg);
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* 상세 정보 리스트 (dl/dt/dd용) */
.detail-list {
    display: grid;
    gap: var(--spacing-sm);
}

.detail-list .detail-row {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.detail-list .detail-row:last-child {
    border-bottom: none;
}

.detail-list .detail-row dt {
    flex: 0 0 100px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.detail-list .detail-row dd {
    flex: 1;
    font-size: var(--font-size-sm);
}

.detail-list .detail-row dd.income {
    color: var(--color-income);
    font-weight: var(--font-weight-semibold);
}

/* 테이블 내 펼침 행 (tr.detail-row) */
table tr.detail-row {
    display: table-row;
}

table tr.detail-row.hidden {
    display: none;
}

table tr.detail-row > td {
    padding: var(--spacing-md);
    background: var(--color-bg-alt);
}

table tr.detail-row .detail-content {
    padding: var(--spacing-sm);
}

table tr.detail-row .detail-table {
    width: 100%;
    margin: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
}

.detail-row dd.expense {
    color: var(--color-expense);
    font-weight: var(--font-weight-semibold);
}

/* 멤버별 배분 테이블 */
.member-distribution {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.member-distribution h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

.mini-table {
    width: 100%;
}

.mini-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.mini-table td:last-child {
    text-align: right;
    font-family: var(--font-mono);
}

/* ==================== 로딩 ==================== */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: opacity var(--transition-normal);
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loading-overlay p {
    margin-top: var(--spacing-md);
    color: var(--color-text-secondary);
}

/* ==================== 빈 상태 ==================== */
.empty-message {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-text-muted);
}

/* ==================== 하이라이트 행 ==================== */
tr.highlight-amount {
    background: var(--color-warning-bg) !important;
}

tr.internal-trade {
    background: var(--color-internal-bg) !important;
}

tr.personal-expense {
    border-left: 3px solid var(--color-warning);
}

/* ==================== 멤버별 뷰 스타일 ==================== */

/* 멤버 전체 요약 테이블 */
.members-overview {
    margin-bottom: var(--spacing-xl);
}

.members-overview-table {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.members-overview-table .data-table {
    margin: 0;
}

.members-overview-table .clickable-row {
    cursor: pointer;
    transition: background var(--transition-fast);
}

.members-overview-table .clickable-row:hover {
    background: var(--color-primary-light);
}

.members-overview-table .total-row {
    background: var(--color-bg-alt);
    border-top: 2px solid var(--color-border);
}

.members-overview-table tfoot td {
    padding: var(--spacing-md);
}

/* 섹션별, 비용분류별 요약 테이블 공통 스타일 */
.sections-overview,
.categories-overview {
    margin-bottom: var(--spacing-xl);
}

.sections-overview .clickable-row,
.categories-overview .clickable-row {
    cursor: pointer;
    transition: background var(--transition-fast);
}

.sections-overview .clickable-row:hover,
.categories-overview .clickable-row:hover {
    background: var(--color-primary-light);
}

.sections-overview .total-row,
.categories-overview .total-row {
    background: var(--color-bg-alt);
    border-top: 2px solid var(--color-border);
}

/* 비용분류별 상세 테이블 스타일 */
.category-detail-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
}

.category-detail-section .expandable-row {
    cursor: pointer;
    transition: background var(--transition-fast);
}

.category-detail-section .expandable-row:hover {
    background: var(--color-bg-alt);
}

.category-detail-section .expandable-row.expanded {
    background: var(--color-primary-light);
}

.category-detail-section .expand-icon {
    color: var(--color-primary);
    font-size: var(--font-size-xs);
}

.category-detail-section .detail-row {
    background: var(--color-bg-alt);
}

.category-detail-section .detail-content {
    padding: var(--spacing-md);
}

.category-detail-section .detail-table {
    width: 100%;
    margin: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
}

.category-detail-section .detail-table th {
    background: var(--color-bg);
    font-size: var(--font-size-xs);
    padding: var(--spacing-sm);
}

.category-detail-section .detail-table td {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm);
}

/* 멤버 상세 섹션 */
.member-detail-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
}

.member-detail-section .view-header h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

/* 멤버 요약 카드 */
.member-summary-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.member-summary-card .member-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

.member-summary-card .member-header h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.member-summary-card .member-header .period {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.member-stats-row {
    display: flex;
    gap: var(--spacing-xl);
}

.member-stats-row .stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.member-stats-row .stat-item .label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.member-stats-row .stat-item .value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
}

.member-stats-row .stat-item.income .value {
    color: var(--color-income);
}

.member-stats-row .stat-item.expense .value {
    color: var(--color-expense);
}

.member-stats-row .stat-item.negative .value {
    color: var(--color-expense);
}

.member-stats-row .stat-item.positive .value {
    color: var(--color-income);
}

/* 월별 테이블 */
.member-monthly {
    width: 100%;
}

.member-monthly .month-row {
    cursor: pointer;
    transition: background var(--transition-fast);
}

.member-monthly .month-row:hover {
    background: var(--color-bg-hover);
}

.member-monthly .expand-icon {
    width: 30px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    user-select: none;
}

/* 상세 내역 행 (펼침) */
.member-monthly tr.detail-row-expanded {
    background: var(--color-bg-alt);
}

.member-monthly tr.detail-row-expanded > td {
    padding: 0;
}

.member-monthly .detail-content {
    padding: var(--spacing-md);
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border-light);
    width: 100%;
    box-sizing: border-box;
}

/* 상세 내역이 테이블 전체 너비를 사용하도록 */
.member-monthly tr.detail-row-expanded > td[colspan] {
    width: 100%;
}

/* 상세 테이블 */
.detail-table {
    width: 100%;
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    border-radius: 4px;
    overflow: hidden;
}

.detail-table th,
.detail-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

.detail-table th {
    background: var(--color-bg-alt);
    font-weight: var(--font-weight-medium);
    text-align: left;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.detail-table tbody tr:last-child td {
    border-bottom: none;
}

.detail-table tbody tr:hover {
    background: var(--color-bg-hover);
}

/* 멤버 월별 상세 행 (테이블 tr로서 올바르게 표시) */
.member-monthly tr[class*="detail-row"]:not(.hidden) {
    display: table-row;
}

.member-monthly tr[class*="detail-row"] > td {
    padding: 0;
}

/* hidden 클래스 */
tr.hidden {
    display: none;
}

/* ==================== 분석 보고서 스타일 ==================== */

.analysis-reports-section,
.saved-reports-section {
    margin-bottom: var(--spacing-xl);
}

.analysis-reports-section h3,
.saved-reports-section h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
}

/* 보고서 선택 드롭다운 */
.report-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: 8px;
}

.report-selector label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.report-selector .select-input {
    min-width: 200px;
    flex: 1;
    max-width: 350px;
}

/* 기존 그리드/카드 스타일 (하위 호환) */
.reports-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.report-category {
    margin-bottom: var(--spacing-md);
}

.category-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.report-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.report-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.report-card:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    box-shadow: var(--shadow-sm);
}

.report-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.report-info {
    flex: 1;
    min-width: 0;
}

.report-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* 보고서 내용 표시 영역 */
.report-content-section {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.report-content-section .report-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}

.report-content-section .report-header h3 {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

/* 마크다운 내용 스타일 */
.markdown-content {
    padding: var(--spacing-lg);
    max-height: 70vh;
    overflow-y: auto;
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

.markdown-content h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-lg) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-border);
}

.markdown-content h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    color: var(--color-primary);
}

.markdown-content h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

.markdown-content h4 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
}

.markdown-content p {
    margin: 0 0 var(--spacing-md) 0;
}

.markdown-content ul,
.markdown-content ol {
    margin: 0 0 var(--spacing-md) 0;
    padding-left: var(--spacing-xl);
}

.markdown-content li {
    margin-bottom: var(--spacing-xs);
}

.markdown-content code {
    background: var(--color-bg-alt);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.markdown-content pre {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: var(--spacing-md);
    overflow-x: auto;
    margin: 0 0 var(--spacing-md) 0;
}

.markdown-content pre code {
    background: none;
    padding: 0;
}

.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-sm);
}

.markdown-content th,
.markdown-content td {
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
}

.markdown-content th {
    background: var(--color-bg-alt);
    font-weight: var(--font-weight-medium);
}

.markdown-content blockquote {
    border-left: 4px solid var(--color-primary);
    margin: 0 0 var(--spacing-md) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
}

.markdown-content strong {
    font-weight: var(--font-weight-semibold);
}

.markdown-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.markdown-content a:hover {
    color: var(--color-primary-light);
}

.error-message {
    color: var(--color-expense);
    padding: var(--spacing-md);
    background: var(--color-expense-bg);
    border-radius: 4px;
}

/* ==================== 반응형 ==================== */
@media (max-width: 1200px) {
    .header-summary {
        gap: var(--spacing-md);
    }

    .summary-item .value {
        font-size: var(--font-size-md);
    }
}

@media (max-width: 1024px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .header {
        flex-wrap: wrap;
        height: auto;
        padding: var(--spacing-md);
    }

    .header-summary {
        order: 3;
        width: 100%;
        margin-top: var(--spacing-md);
        justify-content: space-around;
    }
}

@media (max-width: 768px) {
    .header-actions {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .view-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .view-controls {
        width: 100%;
        flex-direction: column;
    }

    .search-input,
    .select-input {
        width: 100%;
    }

    .data-table {
        font-size: var(--font-size-xs);
    }

    .data-table th,
    .data-table td {
        padding: var(--spacing-xs);
    }
}

/* ==================== 인쇄 스타일 ==================== */
@media print {
    .sidebar,
    .header-actions,
    .btn,
    .pagination,
    .loading-overlay,
    .modal {
        display: none !important;
    }

    .header {
        position: static;
        border-bottom: 2px solid black;
    }

    .layout {
        grid-template-columns: 1fr;
        padding-top: 0;
    }

    .main {
        padding: var(--spacing-md);
    }

    .data-table {
        font-size: 10pt;
    }

    .data-table th,
    .data-table td {
        border: 1px solid black;
    }

    .view.hidden {
        display: block !important;
    }

    .card {
        break-inside: avoid;
    }

    @page {
        margin: 1cm;
    }
}

/* ===== 인증 모달 스타일 ===== */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.auth-overlay.hidden {
    display: none;
}

.auth-modal {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 48px 40px;
    width: 360px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
    animation: authFadeIn 0.4s ease-out;
}

@keyframes authFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.auth-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px 0;
    letter-spacing: 2px;
}

.auth-header p {
    font-size: 14px;
    color: #666;
    margin: 0 0 32px 0;
}

.auth-input-group {
    margin-bottom: 16px;
}

.auth-input-group input {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    outline: none;
    transition: all 0.2s ease;
    text-align: center;
    letter-spacing: 4px;
    box-sizing: border-box;
}

.auth-input-group input:focus {
    border-color: #0f3460;
    box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.1);
}

.auth-input-group input::placeholder {
    letter-spacing: normal;
    color: #aaa;
}

.auth-error {
    color: #e74c3c;
    font-size: 13px;
    margin-bottom: 16px;
    padding: 8px;
    background: #fdf2f2;
    border-radius: 6px;
}

.auth-footer {
    margin-top: 24px;
}

.auth-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 52, 96, 0.3);
}

.auth-btn:active {
    transform: translateY(0);
}

/* ===== 비밀번호 변경 모달 ===== */
.pw-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.pw-modal-overlay.hidden {
    display: none;
}

.pw-modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    width: 400px;
    max-width: 90%;
}

.pw-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
}

.pw-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.pw-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    padding: 0;
    line-height: 1;
    width: 32px;
    height: 32px;
}

.pw-modal-close:hover {
    color: #333;
}

.pw-modal-body {
    padding: 24px;
}

.pw-form-group {
    margin-bottom: 16px;
}

.pw-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.pw-form-group input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
}

.pw-form-group input:focus {
    outline: none;
    border-color: #0f3460;
    box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.1);
}

.pw-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #eee;
    background: #fafafa;
    border-radius: 0 0 12px 12px;
}

.pw-message {
    font-size: 13px;
    padding: 12px;
    border-radius: 6px;
    margin-top: 16px;
    text-align: center;
}

.pw-message.hidden {
    display: none;
}

.pw-error {
    color: #c62828;
    background: #ffebee;
}

.pw-success {
    color: #2e7d32;
    background: #e8f5e9;
}

/* ===== 사이드바 비밀번호 버튼 ===== */
.settings-panel-bottom {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.btn-password {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    color: #666;
    font-size: 13px;
}

.btn-password:hover {
    color: #333;
    background: #e8e8e8;
}

.btn-logout {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    color: #888;
    font-size: 13px;
    margin-top: 4px;
}

.btn-logout:hover {
    color: #c62828;
    background: #ffcdd2;
}

.btn-clear-cache {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    color: #888;
    font-size: 13px;
    margin-top: 4px;
}

.btn-clear-cache:hover {
    color: #1565c0;
    background: #bbdefb;
}

/* 사이드바 flex 레이아웃 */
.sidebar {
    display: flex;
    flex-direction: column;
}

/* ===== 모달 오버레이 (비밀번호 변경 등) ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9000;
}

.modal-overlay.hidden {
    display: none;
}

.modal-overlay .modal {
    position: relative;
    opacity: 1;
    visibility: visible;
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    max-width: 400px;
    width: 90%;
}

.modal-overlay .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
}

.modal-overlay .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.modal-overlay .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    padding: 0;
    line-height: 1;
}

.modal-overlay .modal-close:hover {
    color: #333;
}

.modal-overlay .modal-body {
    padding: 24px;
}

.modal-overlay .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #eee;
    background: #fafafa;
    border-radius: 0 0 12px 12px;
}

/* ==================== 메모 기능 스타일 ==================== */

/* 메모 버튼 */
.btn-memo {
    font-size: 11px;
    padding: 2px 8px;
    border: 1px solid #d1d5db;
    background: transparent;
    color: #9ca3af;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-memo:hover {
    border-color: #1e40af;
    color: #1e40af;
}

.btn-memo.has-memo {
    background: #dbeafe;
    border-color: #1d4ed8;
    color: #1d4ed8;
    font-weight: 500;
}

/* 메모 모달 - 세련되고 차분한 디자인 */
.memo-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    opacity: 1;
    transition: opacity 0.2s ease;
}

.memo-modal.hidden {
    display: none;
}

.memo-modal-content {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    min-width: 800px;
    max-width: 95vw;
    min-height: 580px;
    max-height: 88vh;
    background: #ffffff;
    border-radius: 16px;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    resize: both;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.memo-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px 20px;
    border-bottom: 1px solid #e2e8f0;
    cursor: move;
    user-select: none;
    background: #fafbfc;
}

.memo-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.memo-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 20px;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.memo-modal-close:hover {
    background: #f1f5f9;
    color: #475569;
}

.memo-modal-body {
    padding: 0;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

/* 좌측: 거래 상세 정보 패널 */
.memo-detail-pane {
    width: 45%;
    min-width: 360px;
    padding: 24px 28px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.pane-title {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.memo-detail-content {
    flex: 1;
}

.memo-detail-content .detail-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.memo-detail-content .detail-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

.memo-detail-content .detail-row:last-child {
    border-bottom: none;
}

.memo-detail-content .detail-row dt {
    width: 90px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.memo-detail-content .detail-row dd {
    flex: 1;
    font-size: 14px;
    color: #1e293b;
    margin: 0;
    line-height: 1.6;
    word-break: break-word;
}

.memo-detail-content .member-distribution {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.memo-detail-content .member-distribution h4 {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 12px 0;
}

.memo-detail-content .mini-table {
    width: 100%;
    font-size: 13px;
}

.memo-detail-content .mini-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e2e8f0;
}

.memo-detail-content .mini-table tr:last-child td {
    border-bottom: none;
}

/* 우측: 메모 입력 패널 */
.memo-edit-pane {
    flex: 1;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* 폼 그룹 */
.memo-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.memo-content-group {
    flex: 1;
    margin-bottom: 0;
}

.memo-form-group label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    letter-spacing: -0.01em;
}

.memo-form-group .char-count {
    font-weight: 400;
    font-size: 12px;
    color: #94a3b8;
}

/* 입력 필드 - 깔끔하고 세련된 스타일 */
.memo-input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    color: #1e293b;
    background: #ffffff;
    outline: none;
    transition: all 0.2s ease;
}

.memo-input::placeholder {
    color: #94a3b8;
}

.memo-input:hover {
    border-color: #cbd5e1;
}

.memo-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 텍스트에어리어 - 넉넉한 줄간격 */
.memo-textarea {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    color: #1e293b;
    background: #ffffff;
    outline: none;
    resize: none;
    min-height: 180px;
    flex: 1;
    font-family: inherit;
    line-height: 1.85;
    letter-spacing: 0.01em;
    transition: all 0.2s ease;
}

.memo-textarea::placeholder {
    color: #94a3b8;
}

.memo-textarea:hover {
    border-color: #cbd5e1;
}

.memo-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 푸터 - 깔끔한 버튼 배치 */
.memo-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px 24px;
    border-top: 1px solid #e2e8f0;
    background: #fafbfc;
}

.memo-modal-actions {
    display: flex;
    gap: 12px;
}

.memo-modal-footer .btn {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.15s ease;
}

.memo-modal-footer .btn-secondary {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.memo-modal-footer .btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.memo-modal-footer .btn-primary {
    background: #3b82f6;
    border: none;
    color: #ffffff;
}

.memo-modal-footer .btn-primary:hover {
    background: #2563eb;
}

.btn-delete-memo {
    background: transparent !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
    padding: 12px 20px !important;
}

.btn-delete-memo:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
}

/* 메모관리 뷰 */
.view-description {
    color: #6b7280;
    margin-bottom: 20px;
    font-size: 14px;
}

.memos-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
}

.memo-count {
    font-size: 14px;
    color: #4b5563;
}

.memo-count strong {
    color: #1e40af;
    font-weight: 600;
}

#memos-table th,
#memos-table td {
    padding: 10px 12px;
    font-size: 13px;
}

#memos-table .memo-title-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.memo-actions {
    display: flex;
    gap: 8px;
}

.memo-actions .btn {
    font-size: 11px;
    padding: 4px 10px;
}

.btn-edit-memo {
    border: 1px solid #1e40af;
    color: #1e40af;
    background: transparent;
}

.btn-edit-memo:hover {
    background: #eff6ff;
}

.btn-remove-memo {
    border: 1px solid #dc2626;
    color: #dc2626;
    background: transparent;
}

.btn-remove-memo:hover {
    background: #fef2f2;
}

/* ==================== 메모 삭제 확인 모달 ==================== */
.delete-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.delete-confirm-modal.hidden {
    display: none;
}

.delete-confirm-content {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 380px;
    overflow: hidden;
}

.delete-confirm-header {
    padding: 16px 20px;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
}

.delete-confirm-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #dc2626;
}

.delete-confirm-body {
    padding: 20px;
}

.delete-confirm-message {
    margin: 0 0 16px 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
}

.delete-confirm-input-group {
    margin-bottom: 12px;
}

.delete-confirm-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.delete-confirm-input:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.delete-confirm-error {
    color: #dc2626;
    font-size: 13px;
    margin-top: 8px;
}

.delete-confirm-error.hidden {
    display: none;
}

.delete-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.delete-confirm-footer .btn {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 6px;
}

.delete-confirm-footer .btn-danger {
    background: #dc2626;
    color: #ffffff;
    border: none;
}

.delete-confirm-footer .btn-danger:hover {
    background: #b91c1c;
}

/* ===== 보고서 보기 모달 스타일 ===== */

/* 모달 열림/닫힘 시 레이아웃 안정성 보장 */
/* 모든 상태에서 본문 너비를 100%로 유지 */

html.modal-open {
    /* 스크롤바 유지 - 레이아웃 안정성을 위해 스크롤바를 숨기지 않음 */
    overflow-y: scroll !important;
}

html.modal-open body {
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

html.modal-open .layout {
    /* 모달 열림 시에도 레이아웃 위치 고정 */
    position: relative !important;
    left: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

html.modal-open .sidebar {
    /* 사이드바 위치 고정 */
    position: relative !important;
    left: 0 !important;
    margin-left: 0 !important;
}

/* 모달은 position: fixed로 뷰포트 전체를 덮음 */
.report-view-modal,
.modal {
    position: fixed;
    inset: 0;
}

.report-view-modal {
    z-index: 9500;
    overflow-y: auto;
}

.report-view-modal.active {
    opacity: 1;
    visibility: visible;
}

.report-view-modal.hidden {
    display: none;
}

.report-view-modal .modal-content {
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.report-view-modal .modal-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.report-view-modal .modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-view-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #ffffff;
    min-height: 300px;
    max-height: 60vh;
}

.report-view-body .report-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #6b7280;
    font-size: 14px;
}

.report-view-body .report-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #dc2626;
    font-size: 14px;
}

/* HTML 보고서 렌더링 스타일 */
.report-view-body .report-html-content {
    line-height: 1.6;
    color: #1f2937;
}

.report-view-body .report-html-content h1 {
    font-size: 24px;
    margin-bottom: 16px;
    color: #111827;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 8px;
}

.report-view-body .report-html-content h2 {
    font-size: 20px;
    margin: 24px 0 12px;
    color: #1f2937;
}

.report-view-body .report-html-content h3 {
    font-size: 16px;
    margin: 16px 0 8px;
    color: #374151;
}

.report-view-body .report-html-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}

.report-view-body .report-html-content th,
.report-view-body .report-html-content td {
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    text-align: left;
}

.report-view-body .report-html-content th {
    background: #f3f4f6;
    font-weight: 600;
}

.report-view-body .report-html-content tr:hover {
    background: #f9fafb;
}

.report-view-body .report-html-content p {
    margin: 12px 0;
}

.report-view-body .report-html-content ul,
.report-view-body .report-html-content ol {
    margin: 12px 0;
    padding-left: 24px;
}

.report-view-body .report-html-content li {
    margin: 4px 0;
}

/* Markdown 보고서 렌더링 스타일 */
.report-view-body .report-markdown-content {
    line-height: 1.7;
    color: #1f2937;
    font-size: 14px;
}

.report-view-body .report-markdown-content pre {
    background: #f3f4f6;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
}

.report-view-body .report-markdown-content code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
}

.report-view-body .report-markdown-content blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 16px;
    margin: 16px 0;
    color: #4b5563;
    font-style: italic;
}

/* Markdown 테이블 스타일 */
.report-view-body .report-markdown-content .markdown-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
}

.report-view-body .report-markdown-content .markdown-table th,
.report-view-body .report-markdown-content .markdown-table td {
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    text-align: left;
}

.report-view-body .report-markdown-content .markdown-table th {
    background: #f3f4f6;
    font-weight: 600;
    color: #374151;
}

.report-view-body .report-markdown-content .markdown-table tr:hover {
    background: #f9fafb;
}

.report-view-body .report-markdown-content .markdown-table tr:nth-child(even) {
    background: #fafafa;
}

.report-view-body .report-markdown-content h1 {
    font-size: 22px;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
    color: #111827;
}

.report-view-body .report-markdown-content h2 {
    font-size: 18px;
    margin: 24px 0 12px 0;
    color: #1f2937;
}

.report-view-body .report-markdown-content h3 {
    font-size: 16px;
    margin: 20px 0 10px 0;
    color: #374151;
}

.report-view-body .report-markdown-content hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 24px 0;
}

.report-view-body .report-markdown-content ul {
    margin: 12px 0;
    padding-left: 24px;
}

.report-view-body .report-markdown-content li {
    margin: 4px 0;
}

.report-view-body .report-markdown-content strong {
    font-weight: 600;
    color: #111827;
}

.report-view-body .report-markdown-content p {
    margin: 8px 0;
}

/* 보고서 모달 푸터 */
.report-view-modal .modal-footer {
    border-top: 1px solid #e5e7eb;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9fafb;
}

.report-format-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.report-format-badge.html {
    background: #dbeafe;
    color: #1d4ed8;
}

.report-format-badge.md {
    background: #dcfce7;
    color: #16a34a;
}

/* 보기 버튼 스타일 */
.btn-view {
    color: #3b82f6 !important;
}

.btn-view:hover {
    color: #1d4ed8 !important;
    background: #eff6ff;
}