/* ===== RESET & BASE ===== */ * { box-sizing: border-box; margin: 0; padding: 0; } /* 가로 오버플로우 차단 — 게스트 배너 셀렉트가 모바일에서 살짝 넘쳐 카드 폭이 어긋나는 현상 방지. clip은 sticky를 깨지 않는 현대적 속성, hidden은 구형 브라우저 폴백 */ html { overflow-x: hidden; overflow-x: clip; } body { overflow-x: hidden; overflow-x: clip; max-width: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; color: #111; font-size: 15px; } /* ===== TOPBAR & NAV ===== */ .topbar { background: #f0f0f0; color: #222; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; } .topbar .site-title { font-size: 15px; font-weight: 600; color: #222; } .topbar a { color: #555; text-decoration: none; font-size: 13px; } .topbar a:hover { color: #111; } nav { background: #fff; border-bottom: 1px solid #e5e5e5; padding: 0 24px; display: flex; gap: 4px; flex-wrap: wrap; } nav a { display: inline-block; padding: 12px 16px; text-decoration: none; color: #555; font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; } nav a:hover { color: #111; } nav a.active { color: #111; border-bottom-color: #111; font-weight: 500; } /* ===== LAYOUT ===== */ .wrap { max-width: 1000px; margin: 0 auto; padding: 24px 16px; } .card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 16px; } .card h2 { font-size: 15px; font-weight: 600; margin-bottom: 16px; } /* ===== FORM ===== */ .form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .form-group { display: flex; flex-direction: column; gap: 5px; } .form-group label { font-size: 12px; color: #888; } .form-group input, .form-group select, .form-group textarea { padding: 9px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; outline: none; } .form-group input:focus, .form-group select:focus { border-color: #555; } /* ===== BUTTONS ===== */ .btn { padding: 9px 20px; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; } .btn-dark { background: #111; color: #fff; } .btn-dark:hover { background: #333; } .btn-red { background: #fee; color: #e53e3e; border: 1px solid #fcc; } .btn-red:hover { background: #fdd; } .btn-blue { background: #e8f0fe; color: #1a56db; border: 1px solid #c7d7fc; } .btn-green { background: #e6f4ec; color: #2d8a4e; border: 1px solid #b7dfca; font-size: 13px; padding: 7px 14px; border-radius: 7px; cursor: pointer; } .btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; cursor: pointer; border: 1px solid #eee; background: #fafafa; color: #555; } .btn-sm:hover { border-color: #fcc; color: #e53e3e; } .btn-sm.edit { border-color: #c7d7fc; color: #1a56db; background: #f0f4ff; } /* ===== BADGES ===== */ .badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 500; } .badge.income { background: #e6f4ec; color: #2d8a4e; } .badge.expense { background: #fde8e8; color: #e53e3e; } .badge.p1 { background: #fde8e8; color: #e53e3e; } .badge.p2 { background: #fff3e0; color: #e67e00; } .badge.p3 { background: #f0f0f0; color: #666; } .badge-off { display: inline-block; padding: 1px 7px; background: #f0f0f0; color: #aaa; border-radius: 10px; font-size: 11px; } .badge-on { display: inline-block; padding: 1px 7px; background: #e6f4ec; color: #2d8a4e; border-radius: 10px; font-size: 11px; } /* ===== COLORS ===== */ .plus { color: #2d8a4e; } .minus { color: #e53e3e; } .empty { color: #aaa; text-align: center; padding: 32px 0; } .alert { padding: 10px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; background: #e6f4ec; color: #2d8a4e; border: 1px solid #b7dfca; } /* ===== TABLE ===== */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; color: #888; font-weight: 500; font-size: 12px; padding: 0 8px 10px; border-bottom: 1px solid #f0f0f0; } td { padding: 10px 8px; border-bottom: 1px solid #f7f7f7; vertical-align: middle; } tr:last-child td { border-bottom: none; } /* ===== DASHBOARD ===== */ .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; } @media(max-width:600px){ .grid { grid-template-columns: 1fr; } } .card h3 { font-size: 12px; color: #888; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; } .card .amount { font-size: 24px; font-weight: 600; } .card .amount.plus { color: #2d8a4e; } .card .amount.minus { color: #e53e3e; } .card .amount.zero { color: #111; } .section { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 16px; max-width: 100%; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .section-header h2 { font-size: 15px; font-weight: 600; } .section-header a { font-size: 13px; color: #555; text-decoration: none; } .section-header a:hover { color: #111; } .dday { font-weight: 600; } .dday.urgent { color: #e53e3e; } .dday.soon { color: #e67e00; } .dday.ok { color: #2d8a4e; } /* ===== SUMMARY BARS ===== */ .summary { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .summary-item { background: #fff; border-radius: 10px; padding: 14px 20px; flex: 1; min-width: 160px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .summary-item .label { font-size: 12px; color: #888; margin-bottom: 4px; } .summary-item .val { font-size: 20px; font-weight: 600; } /* ===== TRANSACTIONS ===== */ .filter-bar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; } .filter-bar input, .filter-bar select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; } /* ===== LOANS ===== */ .grand-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; } @media(max-width:600px){ .grand-summary { grid-template-columns: repeat(2,1fr); } } .gs-card { background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 4px rgba(0,0,0,.06); } .gs-card .label { font-size: 11px; color: #aaa; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; } .gs-card .val { font-size: 18px; font-weight: 600; } .owner-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } @media(max-width:500px){ .owner-cards { grid-template-columns: 1fr; } } .owner-card { border-radius: 12px; padding: 16px 18px; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: box-shadow .15s; } .owner-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); } .owner-card.active { box-shadow: 0 2px 12px rgba(0,0,0,.12); } .owner-card .oc-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .owner-card .oc-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 3px; } .owner-card .oc-row .oc-l { color: #888; } .owner-card .oc-row .oc-v { font-weight: 500; } .tab-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .tab-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } .loan-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 12px; border-left: 4px solid #ddd; } .loan-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } .loan-name { font-size: 16px; font-weight: 600; } .loan-bank { font-size: 13px; color: #888; margin-top: 2px; } .loan-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; } @media(max-width:600px){ .loan-grid { grid-template-columns: repeat(2,1fr); } } .loan-item .lbl { font-size: 11px; color: #aaa; margin-bottom: 3px; } .loan-item .val { font-size: 15px; font-weight: 500; } .progress-wrap { margin-bottom: 14px; } .progress-label { display: flex; justify-content: space-between; font-size: 12px; color: #888; margin-bottom: 5px; } .progress-bar { height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; border-radius: 4px; transition: width .3s; } /* ===== CASHFLOW ===== */ .month-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; } .month-nav a { padding: 7px 14px; background: #fff; border: 1px solid #ddd; border-radius: 8px; text-decoration: none; color: #555; font-size: 13px; } .month-nav a:hover { background: #f5f5f5; } .month-nav strong { font-size: 16px; } .section-block { margin-bottom: 4px; } .section-title { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #f8f8f8; border-radius: 8px; font-size: 13px; font-weight: 600; color: #444; cursor: pointer; margin-bottom: 2px; } .section-rows { padding: 0 4px; } .section-row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #f5f5f5; font-size: 14px; flex-wrap: wrap; } .section-row:last-child { border-bottom: none; } .row-label { flex: 1; min-width: 100px; } .row-amount { font-weight: 500; min-width: 100px; text-align: right; } .row-note { color: #aaa; font-size: 12px; min-width: 80px; } .row-time { color: #ccc; font-size: 11px; } .edit-row { background: #f5f8ff; border-radius: 8px; padding: 10px 12px; margin: 2px 0 4px; display: none; flex-wrap: wrap; gap: 8px; align-items: flex-end; } .edit-row input, .edit-row select { padding: 7px 10px; border: 1px solid #ddd; border-radius: 7px; font-size: 13px; } .chart-wrap { height: 160px; display: flex; align-items: flex-end; gap: 8px; padding: 0 4px; } .chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; } .bar-wrap { width: 100%; display: flex; gap: 2px; align-items: flex-end; height: 120px; } .bar { flex: 1; border-radius: 4px 4px 0 0; min-height: 2px; } .bar.in { background: #2d8a4e; } .bar.out { background: #e53e3e; } .ym-label { font-size: 10px; color: #aaa; } .tmpl-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #f5f5f5; font-size: 14px; flex-wrap: wrap; } .tmpl-row:last-child { border-bottom: none; } .pin-btn { background: none; border: none; cursor: pointer; font-size: 15px; padding: 2px 4px; opacity: 0.4; transition: opacity .15s, transform .15s; line-height: 1; } .pin-btn:hover:not([disabled]) { opacity: 1; transform: scale(1.2); } .pin-btn.pinned { opacity: 1; cursor: default; } /* ===== TODOS ===== */ .today-info { font-size: 13px; color: #888; margin-bottom: 16px; } .cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; } .cat-tab { padding: 6px 14px; border-radius: 20px; font-size: 13px; text-decoration: none; color: #555; background: #fff; border: 1.5px solid #e5e5e5; transition: all .12s; display: flex; align-items: center; gap: 5px; } .cat-tab:hover { border-color: #bbb; } .cat-tab.active { color: #fff; border-color: transparent; } .cat-count { font-size: 11px; background: rgba(255,255,255,0.3); padding: 1px 6px; border-radius: 10px; } .cat-count.dark { background: rgba(0,0,0,0.08); } .filter-tabs { display: flex; gap: 4px; margin-bottom: 16px; } .filter-tabs a { padding: 6px 14px; border-radius: 20px; font-size: 13px; text-decoration: none; color: #555; background: #f0f0f0; } .filter-tabs a.active { background: #111; color: #fff; } .todo-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 4px; border-bottom: 1px solid #f5f5f5; } .todo-item:last-child { border-bottom: none; } .todo-check { margin-top: 2px; } .todo-check input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; accent-color: #111; } .todo-body { flex: 1; } .todo-title { font-size: 15px; line-height: 1.4; } .todo-title.done { text-decoration: line-through; color: #bbb; } .todo-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; } .priority-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cat-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 500; color: #fff; } .todo-log { font-size: 11px; color: #ccc; } .todo-del { padding: 4px 10px; font-size: 12px; background: none; border: 1px solid #eee; border-radius: 6px; color: #ccc; cursor: pointer; } .todo-del:hover { border-color: #fcc; color: #e53e3e; } .cat-manage-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; } .cat-manage-row:last-child { border-bottom: none; } .cat-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .cat-edit-form { display: none; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; } /* ===== ASSETS ===== */ .s-card { background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 4px rgba(0,0,0,.06); } .s-card .label { font-size: 11px; color: #aaa; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; } .s-card .val { font-size: 20px; font-weight: 600; } .donut-wrap { position: relative; width: 140px; height: 140px; flex-shrink: 0; } .donut-wrap svg { transform: rotate(-90deg); } .donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; } .donut-center .dc-val { font-size: 15px; font-weight: 600; } .donut-center .dc-label { font-size: 11px; color: #aaa; } .legend { display: flex; flex-direction: column; gap: 7px; } .legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; } .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .cat-block { margin-bottom: 6px; } .cat-header { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; background: #f8f8f8; border-radius: 10px; cursor: pointer; margin-bottom: 2px; } .cat-header:hover { background: #f0f0f0; } .cat-header-left { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } .cat-header-right { font-size: 13px; color: #555; } .cat-rows { padding: 2px 0; } .asset-item { background: #fff; border: 1px solid #f0f0f0; border-radius: 10px; padding: 14px 16px; margin-bottom: 6px; } .asset-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; } .asset-name { font-size: 15px; font-weight: 600; } .asset-sub { font-size: 12px; color: #aaa; margin-top: 2px; } .asset-vals { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; } .asset-val-item .av-label { font-size: 11px; color: #aaa; margin-bottom: 2px; } .asset-val-item .av-val { font-size: 14px; font-weight: 500; } .gain-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 500; } .gain-badge.up { background: #e6f4ec; color: #2d8a4e; } .gain-badge.down { background: #fde8e8; color: #e53e3e; } .gain-badge.zero { background: #f0f0f0; color: #888; } .update-row { display: flex; gap: 6px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .update-row input { padding: 7px 10px; border: 1px solid #ddd; border-radius: 7px; font-size: 13px; } .chart-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; } /* ===== MOBILE TABLE ===== */ @media (max-width: 768px) { /* 기본 테이블 — 폰트 줄이고 패딩 축소 */ table { font-size: 12px; } th { font-size: 11px; padding: 0 5px 8px; white-space: nowrap; } td { padding: 8px 5px; word-break: keep-all; } /* wrap 좌우 여백 축소 */ .wrap { padding: 16px 8px; max-width: 100%; box-sizing: border-box; } /* 모바일에서 카드/섹션이 절대 wrap을 넘지 않게 강제 */ .wrap .card, .wrap .section, .wrap .db-section, .wrap #dashboard-sections { max-width: 100%; box-sizing: border-box; min-width: 0; } .wrap #dashboard-sections { width: 100%; } /* 모바일에서는 어차피 1열로 강제되므로 2열 토글 버튼은 의미 없음 → 숨김 */ #cols-toggle { display: none !important; } /* 모바일에서는 cols-wide 클래스가 켜져있어도 영향 없도록 무효화 (이전에 PC에서 2열로 켜둔 사용자가 모바일로 보면 패딩이 24px로 커지는 것 방지) */ body.dashboard-page.cols-wide .wrap { max-width: 100%; padding-left: 8px !important; padding-right: 8px !important; } /* 요약 카드 폰트 */ .summary-item .val { font-size: 16px; } .card .amount { font-size: 20px; } /* 필터바 세로 정렬 */ .filter-bar { flex-direction: column; align-items: stretch; } .filter-bar input, .filter-bar select { width: 100%; } /* topbar 타이틀 폰트 살짝 축소 */ .topbar .site-title { font-size: 14px; } } /* ===== MOBILE RESPONSIVE TABLES ===== */ @media (max-width: 640px) { /* transactions 테이블 */ .trx-table { display:block; } .trx-table thead { display:none; } .trx-table tbody { display:block; } .trx-table tr { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 0; border-bottom:1px solid #f0f0f0; } .trx-table tr:last-child { border-bottom:none; } .trx-table td { display:inline; padding:0; border:none; font-size:13px; } .trx-table td.td-date { color:#aaa; font-size:12px; width:100%; } .trx-table td.td-badge { } .trx-table td.td-cat { color:#888; font-size:12px; } .trx-table td.td-amt { font-weight:600; margin-left:auto; } .trx-table td.td-note { color:#888; font-size:12px; width:100%; } .trx-table td.td-time { display:none; } .trx-table td.td-del { margin-left:auto; } /* admin 테이블 */ .admin-table thead { display:none; } .admin-table tbody { display:block; } .admin-table tr { display:block; padding:12px 0; border-bottom:1px solid #f0f0f0; } .admin-table td { display:flex; align-items:center; padding:2px 0; border:none; font-size:13px; gap:6px; } .admin-table td:before { content: attr(data-label); font-size:11px; color:#aaa; min-width:50px; flex-shrink:0; } .admin-table td.td-manage { flex-wrap:wrap; } } /* revenue, cards 입력 테이블 — 모바일 가로 스크롤 */ @media (max-width: 640px) { .revenue-table-wrap, .card-bill-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .revenue-table-wrap table, .card-bill-wrap table { min-width: 480px; } } /* ── 필수값 표시 */ .req { color:#e53e3e; font-weight:700; margin-left:2px; } .field-error { border-color:#e53e3e !important; box-shadow:0 0 0 2px rgba(229,62,62,.12) !important; } .field-error-msg { font-size:11px; color:#e53e3e; margin-top:3px; display:block; } /* ============================================================ THEME SYSTEM (4 themes: light / cream / dim / sage) Moved from header.php for cleaner separation ============================================================ */ /* ─── 미색 테마 (cream) ─── */ html.theme-cream { background: #faf6ec; } html.theme-cream body { background: #faf6ec; color: #3d3a2f; } html.theme-cream .topbar { background: #f5efde !important; border-bottom-color: #ebe5d3 !important; color: #3d3a2f !important; } html.theme-cream nav { background: #f5efde !important; border-bottom-color: #ebe5d3 !important; } html.theme-cream .mobile-nav { background: #faf6ec !important; color: #3d3a2f; } html.theme-cream .mobile-nav-header, html.theme-cream .mobile-nav-user, html.theme-cream .mobile-nav-footer { border-color: #ebe5d3 !important; } html.theme-cream .card { background: #fff !important; border-color: #ebe5d3 !important; color: #3d3a2f; } html.theme-cream .db-section { background: transparent !important; color: #3d3a2f; } html.theme-cream nav a, html.theme-cream .topbar .site-title, html.theme-cream .mobile-nav-links a, html.theme-cream h1, html.theme-cream h2, html.theme-cream h3, html.theme-cream label, html.theme-cream .user-name { color: #3d3a2f !important; } html.theme-cream .user-sub, html.theme-cream .tip { color: #8b8470 !important; } html.theme-cream nav a.active { border-bottom-color: #b8915a !important; color: #2d2a1f !important; } html.theme-cream input, html.theme-cream select, html.theme-cream textarea { background: #fff !important; color: #3d3a2f !important; border-color: #ebe5d3 !important; } /* ─── 라이트 블랙 테마 (dim) - 클로드 미색 다크 ─── */ html.theme-dim { background: #262624; } html.theme-dim body { background: #262624; color: #e5e1d6; } html.theme-dim .topbar { background: #1f1e1d !important; border-bottom-color: #3a3935 !important; color: #e5e1d6 !important; } html.theme-dim nav { background: #1f1e1d !important; border-bottom-color: #3a3935 !important; } html.theme-dim .mobile-nav { background: #1f1e1d !important; color: #e5e1d6; } html.theme-dim .mobile-nav-header, html.theme-dim .mobile-nav-user, html.theme-dim .mobile-nav-footer { border-color: #3a3935 !important; } html.theme-dim .card { background: #2f2e2c !important; border-color: #3a3935 !important; color: #e5e1d6; } html.theme-dim .db-section { background: transparent !important; color: #e5e1d6; } html.theme-dim nav a, html.theme-dim .topbar .site-title, html.theme-dim .mobile-nav-links a, html.theme-dim h1, html.theme-dim h2, html.theme-dim h3, html.theme-dim label, html.theme-dim .user-name { color: #f0ece1 !important; } html.theme-dim .user-sub, html.theme-dim .tip { color: #b8b1a3 !important; } html.theme-dim nav a:hover { color: #fff !important; background: rgba(255,255,255,0.05); } html.theme-dim nav a.active { color: #fcd34d !important; border-bottom-color: #fcd34d !important; } html.theme-dim .mobile-nav-links a:hover { background: rgba(255,255,255,0.05); } html.theme-dim .mobile-nav-links a.active { background: rgba(252,211,77,0.1); color: #fcd34d !important; } html.theme-dim .mobile-nav-links a .nav-icon-svg { color: #999; } html.theme-dim .mobile-nav-links a:hover .nav-icon-svg { color: #d4cdb8; } html.theme-dim .mobile-nav-links a.active .nav-icon-svg { color: #fcd34d; } html.theme-dim input, html.theme-dim select, html.theme-dim textarea { background: #1f1e1d !important; color: #e5e1d6 !important; border-color: #3a3935 !important; } html.theme-dim input::placeholder, html.theme-dim textarea::placeholder { color: #888 !important; } html.theme-dim .alert, html.theme-dim .error-box, html.theme-dim .msg-box { background: #2f2e2c !important; color: #e5e1d6; border-color: #3a3935 !important; } html.theme-dim .hamburger span { background: #e5e1d6 !important; } /* 다크 모드 — 인라인 흰색/연회색 박스들 자동 변환 */ html.theme-dim [style*="background:#fff"], html.theme-dim [style*="background: #fff"], html.theme-dim [style*="background:#fafafa"], html.theme-dim [style*="background: #fafafa"], html.theme-dim [style*="background:#f9f9f9"], html.theme-dim [style*="background: #f9f9f9"], html.theme-dim [style*="background:#f8f8f8"], html.theme-dim [style*="background: #f8f8f8"], html.theme-dim [style*="background:#f5f5f5"], html.theme-dim [style*="background: #f5f5f5"], html.theme-dim [style*="background:#f0f0f0"], html.theme-dim [style*="background: #f0f0f0"] { background: #2a2927 !important; color: #d8d3c8 !important; } /* 다크 모드 — 옅은 색 알림 배경 (성공/경고/에러) */ html.theme-dim [style*="background:#f0fdf4"], html.theme-dim [style*="background: #f0fdf4"], html.theme-dim [style*="background:#fef2f2"], html.theme-dim [style*="background: #fef2f2"], html.theme-dim [style*="background:#fff7ed"], html.theme-dim [style*="background: #fff7ed"], html.theme-dim [style*="background:#fef4ec"], html.theme-dim [style*="background: #fef4ec"], html.theme-dim [style*="background:#fffafa"], html.theme-dim [style*="background: #fffafa"], html.theme-dim [style*="background:#fde8e8"], html.theme-dim [style*="background: #fde8e8"] { background: #2f2e2c !important; } /* 다크 모드 — 인풋·셀렉트·버튼 같은 폼 요소 (인라인 #f8f8f8 배경 등) */ html.theme-dim input[style*="background:#f8f8f8"], html.theme-dim input[style*="background: #f8f8f8"] { background: #1f1e1d !important; color: #b8b1a3 !important; } /* 다크 모드 — 페이지별 카드/박스 (border-left 강조 박스 등) */ html.theme-dim [style*="border-left:3px solid"] { background: #2a2927 !important; } /* 다크 모드 — 일반 버튼 (수정·삭제 등) */ html.theme-dim button:not(.theme-btn):not(.font-toggle button):not(.btn-dark):not(.dark-toggle):not(.dark-switch), html.theme-dim .btn:not(.btn-dark):not(.btn-primary) { background: #2f2e2c !important; color: #e5e1d6 !important; border-color: #3a3935 !important; } /* 다크 모드 — 테이블 행/배지 */ html.theme-dim td, html.theme-dim th { background: transparent !important; color: #e5e1d6; border-color: #3a3935 !important; } html.theme-dim hr { border-color: #3a3935 !important; } /* 다크 모드 — 흐린 텍스트 색상 보정 */ html.theme-dim [style*="color:#aaa"], html.theme-dim [style*="color: #aaa"], html.theme-dim [style*="color:#888"], html.theme-dim [style*="color: #888"], html.theme-dim [style*="color:#666"], html.theme-dim [style*="color: #666"], html.theme-dim [style*="color:#555"], html.theme-dim [style*="color: #555"] { color: #b8b1a3 !important; } html.theme-dim [style*="color:#111"], html.theme-dim [style*="color: #111"], html.theme-dim [style*="color:#222"], html.theme-dim [style*="color: #222"], html.theme-dim [style*="color:#333"], html.theme-dim [style*="color: #333"] { color: #f0ece1 !important; } /* ═══════════════════════════════════════════════════ 다크 모드 — 페이지별 인라인 스타일 강제 보정 (강화) ═══════════════════════════════════════════════════ */ /* 1. 흰색 계열 배경 — 더 광범위하게 */ html.theme-dim [style*="background:#fff"], html.theme-dim [style*="background: #fff"], html.theme-dim [style*="background:#ffffff"], html.theme-dim [style*="background: #ffffff"], html.theme-dim [style*="background-color:#fff"], html.theme-dim [style*="background-color: #fff"], html.theme-dim [style*="background:white"], html.theme-dim [style*="background: white"], html.theme-dim [style*="background:#fafafa"], html.theme-dim [style*="background: #fafafa"], html.theme-dim [style*="background:#f9f9f9"], html.theme-dim [style*="background: #f9f9f9"], html.theme-dim [style*="background:#f8f8f8"], html.theme-dim [style*="background: #f8f8f8"], html.theme-dim [style*="background:#f7f7f7"], html.theme-dim [style*="background: #f7f7f7"], html.theme-dim [style*="background:#f6f6f6"], html.theme-dim [style*="background: #f6f6f6"], html.theme-dim [style*="background:#f5f5f5"], html.theme-dim [style*="background: #f5f5f5"], html.theme-dim [style*="background:#f0f0f0"], html.theme-dim [style*="background: #f0f0f0"], html.theme-dim [style*="background:#eee"], html.theme-dim [style*="background: #eee"] { background: #2a2927 !important; color: #d8d3c8 !important; } /* 2. 옅은 알림/포인트 배경 (성공/경고/에러/정보 톤) */ html.theme-dim [style*="background:#f0fdf4"], html.theme-dim [style*="background: #f0fdf4"], html.theme-dim [style*="background:#ecfdf5"], html.theme-dim [style*="background: #ecfdf5"], html.theme-dim [style*="background:#dcfce7"], html.theme-dim [style*="background: #dcfce7"], html.theme-dim [style*="background:#fef2f2"], html.theme-dim [style*="background: #fef2f2"], html.theme-dim [style*="background:#fee2e2"], html.theme-dim [style*="background: #fee2e2"], html.theme-dim [style*="background:#fff7ed"], html.theme-dim [style*="background: #fff7ed"], html.theme-dim [style*="background:#fef3c7"], html.theme-dim [style*="background: #fef3c7"], html.theme-dim [style*="background:#fef4ec"], html.theme-dim [style*="background: #fef4ec"], html.theme-dim [style*="background:#fffafa"], html.theme-dim [style*="background: #fffafa"], html.theme-dim [style*="background:#fde8e8"], html.theme-dim [style*="background: #fde8e8"], html.theme-dim [style*="background:#e8f0fe"], html.theme-dim [style*="background: #e8f0fe"], html.theme-dim [style*="background:#dbeafe"], html.theme-dim [style*="background: #dbeafe"], html.theme-dim [style*="background:#eff6ff"], html.theme-dim [style*="background: #eff6ff"], html.theme-dim [style*="background:#f3e8ff"], html.theme-dim [style*="background: #f3e8ff"], html.theme-dim [style*="background:#fdf2f8"], html.theme-dim [style*="background: #fdf2f8"] { background: #2f2e2c !important; } /* 3. 진한 색 텍스트 → 밝게 보정 (다크 배경에서 안 보이는 것 방지) */ html.theme-dim [style*="color:#000"], html.theme-dim [style*="color: #000"], html.theme-dim [style*="color:black"], html.theme-dim [style*="color: black"], html.theme-dim [style*="color:#111"], html.theme-dim [style*="color: #111"], html.theme-dim [style*="color:#222"], html.theme-dim [style*="color: #222"], html.theme-dim [style*="color:#333"], html.theme-dim [style*="color: #333"] { color: #f0ece1 !important; } html.theme-dim [style*="color:#444"], html.theme-dim [style*="color: #444"], html.theme-dim [style*="color:#555"], html.theme-dim [style*="color: #555"], html.theme-dim [style*="color:#666"], html.theme-dim [style*="color: #666"], html.theme-dim [style*="color:#777"], html.theme-dim [style*="color: #777"], html.theme-dim [style*="color:#888"], html.theme-dim [style*="color: #888"], html.theme-dim [style*="color:#999"], html.theme-dim [style*="color: #999"], html.theme-dim [style*="color:#aaa"], html.theme-dim [style*="color: #aaa"], html.theme-dim [style*="color:#bbb"], html.theme-dim [style*="color: #bbb"] { color: #b8b1a3 !important; } /* 4. 페이지별 카드/박스 (border-left 강조 박스 등) */ html.theme-dim [style*="border-left:3px solid"], html.theme-dim [style*="border-left: 3px solid"], html.theme-dim [style*="border-left:4px solid"], html.theme-dim [style*="border-left: 4px solid"] { background: #2a2927 !important; color: #d8d3c8 !important; } html.theme-dim [style*="border-left:3px solid"] *, html.theme-dim [style*="border-left:4px solid"] * { color: inherit; } /* 5. 진한 색 인라인 텍스트 보정 — 색상이 '색.이름'(진한 빨강 등)이 안 보일 때 채도 유지하면서 좀 더 밝게 */ html.theme-dim [style*="color:#e53e3e"], html.theme-dim [style*="color: #e53e3e"], html.theme-dim [style*="color:#dc2626"], html.theme-dim [style*="color: #dc2626"], html.theme-dim [style*="color:#ef4444"], html.theme-dim [style*="color: #ef4444"] { color: #ff7b6e !important; } html.theme-dim [style*="color:#1a56db"], html.theme-dim [style*="color: #1a56db"], html.theme-dim [style*="color:#2563eb"], html.theme-dim [style*="color: #2563eb"], html.theme-dim [style*="color:#3b82f6"], html.theme-dim [style*="color: #3b82f6"] { color: #79a8f5 !important; } html.theme-dim [style*="color:#2d8a4e"], html.theme-dim [style*="color: #2d8a4e"], html.theme-dim [style*="color:#16a34a"], html.theme-dim [style*="color: #16a34a"], html.theme-dim [style*="color:#22c55e"], html.theme-dim [style*="color: #22c55e"] { color: #6ed28a !important; } /* 6. 인풋·셀렉트 인라인 배경 */ html.theme-dim input[style*="background:#f8f8f8"], html.theme-dim input[style*="background: #f8f8f8"], html.theme-dim input[style*="background:#fafafa"], html.theme-dim input[style*="background: #fafafa"] { background: #1f1e1d !important; color: #b8b1a3 !important; } /* 7. 일반 버튼 (수정·삭제·복사·저장 등) */ html.theme-dim button:not(.theme-btn):not(.font-toggle button):not(.btn-dark):not(.btn-primary):not(.dark-toggle):not(.dark-switch), html.theme-dim .btn:not(.btn-dark):not(.btn-primary) { background: #2f2e2c !important; color: #e5e1d6 !important; border-color: #3a3935 !important; } html.theme-dim button:not(.theme-btn):not(.font-toggle button):not(.btn-dark):not(.btn-primary):hover { background: #3a3935 !important; } /* 8. 테이블 / hr */ html.theme-dim table { background: transparent !important; } html.theme-dim td, html.theme-dim th { background: transparent !important; color: #e5e1d6; border-color: #3a3935 !important; } html.theme-dim hr { border-color: #3a3935 !important; } /* 9. 배지 (작은 라벨 박스) — 채도 낮은 옅은 톤 */ html.theme-dim [class*="badge"][style*="background"], html.theme-dim [class*="chip"][style*="background"] { filter: brightness(0.7) saturate(0.85); } /* 10. 스크롤바 색상 */ html.theme-dim ::-webkit-scrollbar-track { background: #1f1e1d; } html.theme-dim ::-webkit-scrollbar-thumb { background: #3a3935; border-radius: 4px; } html.theme-dim ::-webkit-scrollbar-thumb:hover { background: #4a4945; } /* ═══════════════════════════════════════════════════ 다크 모드 — 클래스 기반 (페이지별 .section, .trx-table 등) ═══════════════════════════════════════════════════ */ /* 11. .section 클래스 (대시보드 등에서 흰 배경 카드) */ html.theme-dim .section, html.theme-dim section, html.theme-dim .panel, html.theme-dim .box, html.theme-dim .container-card { background: #2f2e2c !important; border-color: #3a3935 !important; color: #e5e1d6 !important; } /* 12. 거래 테이블 (.trx-table, .trx-card, .trx-wrap) */ html.theme-dim .trx-table, html.theme-dim .trx-table thead, html.theme-dim .trx-table tbody, html.theme-dim .trx-table tr, html.theme-dim .trx-wrap, html.theme-dim .trx-cards, html.theme-dim .trx-card { background: transparent !important; color: #e5e1d6 !important; border-color: #3a3935 !important; } html.theme-dim .trx-table th { background: #1f1e1d !important; color: #b8b1a3 !important; border-color: #3a3935 !important; } html.theme-dim .trx-table td { background: transparent !important; color: #e5e1d6 !important; border-color: #3a3935 !important; } html.theme-dim .trx-table tbody tr:hover td, html.theme-dim .trx-table tbody tr:hover { background: #2a2927 !important; } /* 13. 모든 일반 테이블 (page-style 안에 있는 것 포함) */ html.theme-dim table { background: transparent !important; color: #e5e1d6; } html.theme-dim thead th, html.theme-dim th { background: #1f1e1d !important; color: #b8b1a3 !important; } html.theme-dim tbody td, html.theme-dim td { background: transparent !important; color: #e5e1d6 !important; } html.theme-dim tr { border-color: #3a3935 !important; } /* 14. 카드형 요약 박스 (대출/카드값/자산 페이지의 4개 요약 카드) */ html.theme-dim .summary-card, html.theme-dim .stat-card, html.theme-dim .info-card, html.theme-dim .number-card { background: #2f2e2c !important; border-color: #3a3935 !important; color: #e5e1d6 !important; } /* 15. 흐름도 페이지의 행 (월별 데이터 테이블) */ html.theme-dim .month-row, html.theme-dim .data-row, html.theme-dim .flow-row { background: transparent !important; } html.theme-dim .month-row.active, html.theme-dim .month-row.current, html.theme-dim .data-row.highlight { background: #2a2927 !important; } /* 16. 산케이 차트 / 차트 카드 */ html.theme-dim .chart-card, html.theme-dim .sankey-wrap, html.theme-dim .chart-wrap { background: #2f2e2c !important; } /* 17. 대출/카드값 페이지의 멤버 박스 (본인/배우자) */ html.theme-dim .member-summary, html.theme-dim .person-card, html.theme-dim [class*="member-card"] { background: #2f2e2c !important; color: #e5e1d6 !important; } /* 18. 빈 상태 영역 (등록된 자산이 없어요 등) */ html.theme-dim .empty-state { background: transparent !important; color: #b8b1a3 !important; } /* 19. 인사이트 / 알림 카드 */ html.theme-dim .insight-card, html.theme-dim .notice-card, html.theme-dim .quick-input { background: #2f2e2c !important; border-color: #3a3935 !important; } /* 20. 산케이/차트 라이브러리가 inline SVG에 적용한 흰 배경 */ html.theme-dim svg rect[fill="#fff"], html.theme-dim svg rect[fill="#ffffff"], html.theme-dim svg rect[fill="white"] { fill: #2f2e2c !important; } html.theme-dim svg text[fill="#000"], html.theme-dim svg text[fill="#111"], html.theme-dim svg text[fill="#222"], html.theme-dim svg text[fill="#333"] { fill: #e5e1d6 !important; } /* 21. 마지막 안전망 — div/section/article 중 명시적 흰 배경 가진 것 */ html.theme-dim .wrap > section, html.theme-dim .wrap > article, html.theme-dim .wrap > .card-like { background: #2f2e2c !important; color: #e5e1d6 !important; } /* ─── 미색 그린 테마 (sage) ─── */ html.theme-sage { background: #f1ede0; } html.theme-sage body { background: #f1ede0; color: #2d3e2a; } html.theme-sage .topbar { background: #ebe6d3 !important; border-bottom-color: #d8d2bf !important; color: #2d3e2a !important; } html.theme-sage nav { background: #ebe6d3 !important; border-bottom-color: #d8d2bf !important; } html.theme-sage .mobile-nav { background: #f1ede0 !important; color: #2d3e2a; } html.theme-sage .mobile-nav-header, html.theme-sage .mobile-nav-user, html.theme-sage .mobile-nav-footer { border-color: #d8d2bf !important; } html.theme-sage .card { background: #fff !important; border-color: #d8d2bf !important; color: #2d3e2a; } html.theme-sage .db-section { background: transparent !important; color: #2d3e2a; } html.theme-sage nav a, html.theme-sage .topbar .site-title, html.theme-sage .mobile-nav-links a, html.theme-sage h1, html.theme-sage h2, html.theme-sage h3, html.theme-sage label, html.theme-sage .user-name { color: #2d3e2a !important; } html.theme-sage .user-sub, html.theme-sage .tip { color: #6b7a5e !important; } html.theme-sage nav a.active { color: #2d3e2a !important; border-bottom-color: #5a8a4f !important; } html.theme-sage .mobile-nav-links a.active { background: rgba(90,138,79,0.1); color: #5a8a4f !important; } html.theme-sage input, html.theme-sage select, html.theme-sage textarea { background: #fff !important; color: #2d3e2a !important; border-color: #d8d2bf !important; } /* ============================================================ HEADER COMPONENTS (이전 header.php의 inline