.glass-morphism {
            background: rgba(10, 14, 26, 0.88);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        ::-webkit-scrollbar {
            width: 0px;
        }

        .fab-active {
            transform: rotate(45deg);
            background-color: #ef4444 !important;
            box-shadow: 0 0 24px rgba(239, 68, 68, 0.45) !important;
        }

        .modal-enter {
            animation: modal-up 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes modal-up {
            from {
                transform: translateY(60px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .toggle-radio:checked+label {
            background-color: #ff8f77;
            color: #4b0700;
            border-color: #ff8f77;
        }

        .toggle-radio-sell:checked+label {
            background-color: #3b82f6;
            color: #ffffff;
            border-color: #3b82f6;
        }

        .toggle-radio-exch:checked+label {
            background-color: #24f07e;
            color: #004820;
            border-color: #24f07e;
        }

        /* 아이폰 safe-area */
        .pb-safe {
            padding-bottom: env(safe-area-inset-bottom, 16px);
        }

        .pt-safe {
            padding-top: env(safe-area-inset-top, 0px);
        }

        /* 대시보드 그리드 — 모바일: 1컬럼 세로, 태블릿+: 2컬럼 */
        .dashboard-grid {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        @media (min-width: 768px) {
            .dashboard-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1.25rem;
            }

            .dashboard-grid .col-span-2 {
                grid-column: span 2;
            }
        }

        /* 숫자 tabular */
        .num {
            font-variant-numeric: tabular-nums;
        }

        /* 데스크탑 hover */
        @media (hover: hover) {
            .card-hover:hover {
                background: rgba(255, 255, 255, 0.05);
                transition: background 0.15s;
            }
        }

        /* 입력 포커스 */
        input:focus,
        select:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 143, 119, 0.3);
        }

        /* ── 색상 가이드 (가독성 개선) ──
           배경:     #0a0e1a (최하층), #141928 (카드), #1e2538 (카드 내 입력)
           본문:     #e8eaf6 (메인 텍스트), #c5c8e0 (보조 텍스트), #8a8fa8 (힌트/라벨)
           강조:     #ff8f77 (primary/지출), #24f07e (tertiary/수입), #60a5fa (info/매도)
        */

        /* 카드 섹션 라벨 (UPPERCASE 소제목) */
        .section-label {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #a7aabb;  /* 다크 모드 가독성 강화 (#8a8fa8 → #a7aabb) */
        }

        /* 항목 메타 (날짜·카테고리) */
        .item-meta {
            font-size: 11px;
            font-weight: 600;
            color: #a7aabb;  /* 가독성 강화 */
        }

        /* 입력 라벨 */
        .input-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #a7aabb;  /* 가독성 강화 */
        }

        /* ─── Stage 3 새 컴포넌트 ─────────────────────────────────────── */

        /* 빠른 날짜 칩 (오늘/어제/그저께) */
        .quick-date-chip {
            font-size: 11px;
            font-weight: 700;
            color: #a7aabb;
            background-color: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 4px 12px;
            border-radius: 999px;
            transition: all 0.15s ease;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .quick-date-chip:active {
            transform: scale(0.95);
            background-color: rgba(36, 240, 126, 0.12);
            border-color: rgba(36, 240, 126, 0.3);
            color: #24f07e;
        }

        @media (hover: hover) {
            .quick-date-chip:hover {
                background-color: rgba(255, 255, 255, 0.08);
                color: #e8eaf6;
            }
        }

        /* 라이트 모드 칩 */
        html:not(.dark) .quick-date-chip {
            color: #4b5563;
            background-color: rgba(0, 0, 0, 0.04);
            border-color: rgba(0, 0, 0, 0.08);
        }

        html:not(.dark) .quick-date-chip:active {
            background-color: rgba(5, 150, 105, 0.12);
            border-color: rgba(5, 150, 105, 0.3);
            color: #059669;
        }

        @media (hover: hover) {
            html:not(.dark) .quick-date-chip:hover {
                background-color: rgba(0, 0, 0, 0.08);
                color: #1f2937;
            }
        }

        /* 카테고리 이모지 아이콘 (가계부 항목용 큰 사이즈) */
        .cat-icon {
            width: 36px;
            height: 36px;
            min-width: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            line-height: 1;
            flex-shrink: 0;
        }

        /* 카테고리 이모지 아이콘 (Top 3 작은 사이즈) */
        .cat-icon-sm {
            width: 26px;
            height: 26px;
            min-width: 26px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            line-height: 1;
            flex-shrink: 0;
        }

        /* ─── 가독성 패치 ────────────────────────────────────────────── */

        /* 본문 글자 크기 살짝 키움 (모바일에서 더 잘 보이게) */
        .text-sm.font-semibold.text-\[\#e8eaf6\].truncate {
            font-size: 14px;  /* 13px → 14px */
            letter-spacing: -0.005em;
        }

        /* 금액 숫자 폰트 (num 클래스) - 살짝 더 두껍게 + 자간 줄임 */
        .num {
            font-feature-settings: "tnum";  /* 등폭 숫자 */
            letter-spacing: -0.02em;
        }

        /* 다크 모드 일반 텍스트 색상 톤업 (가독성) */
        html.dark .text-\[\#c5c8e0\] {
            color: #d1d4ec !important;  /* 살짝 더 밝게 */
        }

        html.dark .text-\[\#8a8fa8\] {
            color: #a7aabb !important;  /* 살짝 더 밝게 */
        }

        /* 카드 안의 보조 텍스트 (작은 메타정보) - 명도 올림 */
        html.dark .text-\[10px\].text-\[\#8a8fa8\] {
            color: #b0b3c4 !important;
        }

        /* 라이트 모드 텍스트 가독성 - 회색 톤 진하게 */
        html:not(.dark) .text-\[\#c5c8e0\] {
            color: #1f2937 !important;
        }

        html:not(.dark) .text-\[\#e8eaf6\] {
            color: #111827 !important;
        }

        html:not(.dark) .text-\[\#8a8fa8\] {
            color: #4b5563 !important;
        }

        html:not(.dark) .text-\[\#a7aabb\] {
            color: #4b5563 !important;
        }

        /* 라이트 모드: 작은 메타 텍스트(날짜·카테고리·계좌)는 너무 진하면 정보 위계가 깨지니까 적당히 */
        html:not(.dark) .item-meta {
            color: #6b7280 !important;
            font-weight: 600;
        }

        /* 다크 모드 항목 제목 (가계부 메인 텍스트) */
        html.dark .text-sm.font-semibold.text-\[\#e8eaf6\] {
            color: #ffffff !important;
            font-weight: 600;
        }

        /* 라이트 모드 항목 제목 */
        html:not(.dark) .text-sm.font-semibold.text-\[\#e8eaf6\] {
            color: #111827 !important;
            font-weight: 700;
        }

        /* 본문 줄 간격 */
        body {
            line-height: 1.5;
        }

        /* 폰트 크기 미세 조정 - 너무 작은 텍스트 가독성 */
        .text-\[10px\] {
            letter-spacing: 0.01em;
        }

        /* 카드 내부 padding 균일화 - 너무 빡빡한 카드 살짝 여유롭게 */
        .lg-card {
            transition: transform 0.15s ease, background 0.15s ease;
        }

        /* 활성 상태 (active) 더 부드럽게 */
        .card-hover:active {
            transform: scale(0.985);
        }

        /* 입력창 시인성: 포커스 안 됐을 때도 윤곽 살짝 보이게 (다크) */
        html.dark input[type="text"],
        html.dark input[type="number"],
        html.dark input[type="password"],
        html.dark input[type="date"],
        html.dark select {
            color: #f0f1f8;  /* 입력 텍스트 살짝 더 밝게 */
        }

        /* 라이트모드 입력창 */
        html:not(.dark) input[type="text"],
        html:not(.dark) input[type="number"],
        html:not(.dark) input[type="password"],
        html:not(.dark) input[type="date"],
        html:not(.dark) select {
            color: #111827;
            background-color: #f9fafb !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
        }

        html:not(.dark) input::placeholder {
            color: #9ca3af !important;
        }

        /* 자동완성 색상 보정 (Stage 4 #15 미리 처리) */
        html.dark input:-webkit-autofill,
        html.dark input:-webkit-autofill:hover,
        html.dark input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 30px #0a0e1a inset !important;
            -webkit-text-fill-color: #f0f1f8 !important;
            transition: background-color 5000s ease-in-out 0s;
        }

        html:not(.dark) input:-webkit-autofill,
        html:not(.dark) input:-webkit-autofill:hover,
        html:not(.dark) input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 30px #f9fafb inset !important;
            -webkit-text-fill-color: #111827 !important;
            transition: background-color 5000s ease-in-out 0s;
        }

        /* 포트폴리오 카드 좌측 외곽선 */
        .border-l-primary {
            border-left-color: #ff8f77;
        }

        .border-l-info {
            border-left-color: #60a5fa;
        }

        /* bg-primary/8, bg-info/8 */
        .bg-primary\/8 {
            background-color: rgba(255, 143, 119, 0.08);
        }

        .bg-info\/8 {
            background-color: rgba(96, 165, 250, 0.08);
        }

        /* bg-tertiary/15, bg-primary/15 */
        .bg-tertiary\/15 {
            background-color: rgba(36, 240, 126, 0.15);
        }

        .bg-primary\/15 {
            background-color: rgba(255, 143, 119, 0.15);
        }

        /* ── 리퀴드 글래스 ── */
        /* 네비바: 강한 블러 + 하단 하이라이트 */
        .lg-nav {
            background: rgba(10, 14, 26, 0.55) !important;
            backdrop-filter: blur(40px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            border-radius: 22px !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
        }

        /* 헤더 */
        .lg-header {
            background: rgba(10, 14, 26, 0.75) !important;
            backdrop-filter: blur(24px) saturate(150%) !important;
            -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
            box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        }

        /* 일반 카드 */
        .lg-card {
            background: rgba(20, 25, 40, 0.80) !important;
            backdrop-filter: blur(16px) saturate(130%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(255, 255, 255, 0.02), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
        }

        /* 그라디언트 카드 (총 자산, 총 평가금액 등) */
        .lg-card-gradient {
            background: linear-gradient(135deg, rgba(20, 25, 40, 0.90) 0%, rgba(26, 34, 53, 0.85) 100%) !important;
            backdrop-filter: blur(20px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
            border: 1px solid rgba(255, 255, 255, 0.10) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 1px 0 0 rgba(255, 255, 255, 0.04), 0 8px 32px rgba(0, 0, 0, 0.3) !important;
        }

        /* 모달 내부 패널 */
        .lg-modal {
            background: rgba(16, 20, 34, 0.88) !important;
            backdrop-filter: blur(32px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 24px 64px rgba(0, 0, 0, 0.5) !important;
        }

        /* FAB 버튼 */
        .lg-fab {
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 8px 32px rgba(255, 143, 119, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        }

        /* ── 스켈레톤 ── */
        @keyframes shimmer {
            0% {
                background-position: -400px 0
            }

            100% {
                background-position: 400px 0
            }
        }

        .skeleton {
            background: linear-gradient(90deg, #1e2538 25%, #252d42 50%, #1e2538 75%);
            background-size: 800px 100%;
            animation: shimmer 1.4s infinite linear;
            border-radius: 10px;
        }

        /* ── 스와이프 삭제 (기차 트랙 방식) ── */
        .swipe-item {
            position: relative;
            touch-action: pan-y;
            margin-bottom: 0.625rem;
            overflow: hidden;
            border-radius: 1rem;
            user-select: none;
            -webkit-user-select: none;
        }

        /* ─── iOS 스타일 스와이프 ─────────────────────────────────────────
           동작:
             - 왼쪽으로 스와이프 → 오른쪽 빨간 삭제 버튼 노출
             - 오른쪽으로 스와이프 → 왼쪽 파란 수정 버튼 노출
             - 끝까지 스와이프 시 자동 액션 (full-swipe)
             - 다른 항목 열면 이전 항목 자동으로 닫힘
        */
        .swipe-item {
            position: relative;
            overflow: hidden;
            border-radius: 1rem;
            margin-bottom: 8px;
            -webkit-tap-highlight-color: transparent;
        }

        /* 메인 컨텐츠 (lg-card) — 트랜스폼으로 좌우 이동 */
        .swipe-content {
            position: relative;
            z-index: 2;
            border-radius: 1rem;
            transition: transform 0.32s cubic-bezier(0.4, 0.0, 0.2, 1);
            will-change: transform;
            touch-action: pan-y; /* 세로 스크롤은 자유롭게, 가로만 캡처 */
        }

        .swipe-content.dragging {
            transition: none !important;
        }

        /* 액션 버튼 영역들 — 스와이프 컨텐츠 뒤에 위치, 스와이프 시 노출 */
        .swipe-actions {
            position: absolute;
            top: 0;
            bottom: 0;
            display: flex;
            align-items: stretch;
            z-index: 1;
        }

        /* 오른쪽 삭제 (왼쪽으로 스와이프 시 노출) */
        .swipe-actions-right {
            right: 0;
            border-radius: 0 1rem 1rem 0;
            overflow: hidden;
        }

        /* 왼쪽 수정 (오른쪽으로 스와이프 시 노출) */
        .swipe-actions-left {
            left: 0;
            border-radius: 1rem 0 0 1rem;
            overflow: hidden;
        }

        .swipe-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 76px;
            color: #ffffff;
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            transition: background-color 0.15s;
            user-select: none;
            -webkit-user-select: none;
        }

        .swipe-action-btn .material-symbols-outlined {
            color: #ffffff;
            font-size: 22px;
        }

        .swipe-action-delete {
            background-color: #ef4444;
        }

        .swipe-action-delete:active {
            background-color: #dc2626;
        }

        .swipe-action-edit {
            background-color: #3b82f6;
        }

        .swipe-action-edit:active {
            background-color: #2563eb;
        }

        /* full-swipe 시점: 전체 너비 채우면서 색 살짝 진해짐 */
        .swipe-action-btn.full-trigger {
            background-color: #b91c1c;
        }

        .swipe-action-edit.full-trigger {
            background-color: #1d4ed8;
        }

        /* 라이트모드 색상 */
        html:not(.dark) .swipe-action-delete {
            background-color: #dc2626;
        }

        html:not(.dark) .swipe-action-edit {
            background-color: #2563eb;
        }

        /* 검색 결과 → 그 달로 점프 시 하이라이트 펄스 (Stage 2 #8) */
        @keyframes jump-pulse {
            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6); }
            50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
        }

        .swipe-item.jump-highlight {
            animation: jump-pulse 1.5s ease-out;
        }


        /* ── 빈 상태 ── */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem 1rem;
            gap: 0.75rem;
            color: #8a8fa8;
        }

        .empty-state-icon {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.04);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.25rem;
        }

        /* ── 리퀴드 글래스 ── */
        .lg-nav {
            background: rgba(10, 14, 26, 0.65) !important;
            backdrop-filter: blur(28px) saturate(160%) !important;
            -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        }

        .lg-header {
            background: rgba(10, 14, 26, 0.65) !important;
            backdrop-filter: blur(24px) saturate(150%) !important;
            -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
        }

        .lg-card {
            background: rgba(20, 25, 40, 0.55) !important;
            backdrop-filter: blur(20px) saturate(130%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
        }

        .lg-card-gradient {
            background: linear-gradient(135deg, rgba(20, 25, 40, 0.65) 0%, rgba(26, 34, 53, 0.45) 100%) !important;
            backdrop-filter: blur(24px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
            border: 1px solid rgba(255, 255, 255, 0.10) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 8px 32px rgba(0, 0, 0, 0.3) !important;
        }

        .lg-modal {
            background: rgba(16, 20, 34, 0.65) !important;
            backdrop-filter: blur(32px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
        }

        .lg-fab {
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            box-shadow: 0 8px 32px rgba(255, 143, 119, 0.35) !important;
        }

        /* ── 토스트 ── */
        @keyframes toast-in {
            from {
                transform: translateY(16px);
                opacity: 0
            }

            to {
                transform: translateY(0);
                opacity: 1
            }
        }

        @keyframes toast-out {
            from {
                opacity: 1
            }

            to {
                opacity: 0
            }
        }

        .toast {
            animation: toast-in 0.22s ease forwards;
        }

        .toast.out {
            animation: toast-out 0.3s ease forwards;
        }

        /* 새 토스트 큐 시스템 (Stage 4 #12) */
        .hc-toast-item.out {
            opacity: 0 !important;
            transform: translateX(-50%) translateY(-12px) scale(0.95) !important;
        }

        /* 검색 스피너 (Stage 4 #16) */
        @keyframes search-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        #search-spinner {
            animation: search-spin 0.8s linear infinite;
        }

        /* ☀️ 라이트 모드 (시스템 연동용 색상 덮어쓰기) ☀️ */
        html:not(.dark) body {
            background-color: #f3f4f6 !important;
            color: #111827 !important;
        }

        html:not(.dark) .bg-\[\#0a0e1a\] {
            background-color: #f3f4f6 !important;
        }

        html:not(.dark) .bg-\[\#141928\] {
            background-color: #ffffff !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
        }

        html:not(.dark) .bg-\[\#1e2538\] {
            background-color: #f9fafb !important;
        }

        /* 텍스트 가독성 조정 */
        html:not(.dark) .text-\[\#e8eaf6\],
        html:not(.dark) .text-\[\#e2e4f6\] {
            color: #111827 !important;
        }

        html:not(.dark) .text-\[\#c5c8e0\] {
            color: #374151 !important;
        }

        html:not(.dark) .text-\[\#8a8fa8\],
        html:not(.dark) .text-\[\#a7aabb\] {
            color: #6b7280 !important;
        }

        /* 테두리 색상 반전 */
        html:not(.dark) .border-white\/5,
        html:not(.dark) .border-white\/8,
        html:not(.dark) .border-white\/10 {
            border-color: rgba(0, 0, 0, 0.06) !important;
        }

        /* 지출(빨강)/수입(초록) 포인트 컬러 톤다운 (눈부심 방지) */
        html:not(.dark) .text-primary {
            color: #ef4444 !important;
        }

        html:not(.dark) .border-l-primary {
            border-left-color: #ef4444 !important;
        }

        html:not(.dark) .border-l-info {
            border-left-color: #3b82f6 !important;
        }

        html:not(.dark) .text-tertiary {
            color: #10b981 !important;
        }

        html:not(.dark) .bg-primary {
            background-color: #ef4444 !important;
            color: #ffffff !important;
        }

        html:not(.dark) .bg-tertiary {
            background-color: #10b981 !important;
            color: #ffffff !important;
        }

        html:not(.dark) .bg-primary\/10 {
            background-color: rgba(239, 68, 68, 0.1) !important;
            border-color: rgba(239, 68, 68, 0.2) !important;
        }

        /* 리퀴드 글래스 라이트 모드 (투명도 재조정) */
        html:not(.dark) .lg-nav {
            background: rgba(255, 255, 255, 0.82) !important;
            border: none !important;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
        }

        html:not(.dark) .lg-header {
            background: rgba(255, 255, 255, 0.9) !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
        }

        html:not(.dark) .lg-card {
            background: rgba(255, 255, 255, 0.8) !important;
            border: 1px solid rgba(255, 255, 255, 0.6) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
        }

        html:not(.dark) .lg-card-gradient {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.85) 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.7) !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
        }

        html:not(.dark) .lg-modal {
            background: rgba(255, 255, 255, 0.95) !important;
            border: 1px solid rgba(0, 0, 0, 0.05) !important;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15) !important;
        }

        /* ☀️ 라이트 모드: 총자산/현금 상세 모달 내부 요소 가독성 */
        html:not(.dark) #total-assets-modal .bg-white\/5,
        html:not(.dark) #cash-breakdown-modal .bg-white\/5,
        html:not(.dark) #transfer-history-modal .bg-white\/5 {
            background: rgba(0, 0, 0, 0.03) !important;
            border-color: rgba(0, 0, 0, 0.08) !important;
        }

        html:not(.dark) #total-assets-modal .bg-black\/30,
        html:not(.dark) #cash-breakdown-modal .bg-black\/30 {
            background: #f3f4f6 !important;
            color: #374151 !important;
        }

        html:not(.dark) #total-assets-modal .border-white\/5,
        html:not(.dark) #total-assets-modal .border-white\/10,
        html:not(.dark) #cash-breakdown-modal .border-white\/5,
        html:not(.dark) #cash-breakdown-modal .border-white\/10,
        html:not(.dark) #transfer-history-modal .border-white\/5,
        html:not(.dark) #transfer-history-modal .border-white\/10 {
            border-color: rgba(0, 0, 0, 0.06) !important;
        }

        html:not(.dark) #total-assets-modal .bg-\[\#1e2538\],
        html:not(.dark) #transfer-history-modal .bg-\[\#1e2538\] {
            background: #f9fafb !important;
            border-color: rgba(0, 0, 0, 0.06) !important;
        }

        html:not(.dark) .bg-\[\#141928\] {
            background-color: #ffffff !important;
            border-color: rgba(0, 0, 0, 0.1) !important;
        }

        html:not(.dark) #theme-text {
            color: #111827 !important;
        }

        /* ☀️ 라이트 모드 캘린더 보정 ☀️ */
        html:not(.dark) #calendar-view {
            background-color: #ffffff !important;
            border-color: rgba(0, 0, 0, 0.05) !important;
        }

        html:not(.dark) #calendar-view .bg-\[\#202537\] {
            background-color: #f9fafb !important;
            border-color: rgba(0, 0, 0, 0.05) !important;
        }

        html:not(.dark) #calendar-view .bg-\[\#141928\] {
            background-color: #f3f4f6 !important;
        }

        html:not(.dark) #calendar-view .text-\[\#e2e4f6\] {
            color: #111827 !important;
        }

        /* 오늘 날짜 표시 보정 */
        html:not(.dark) #calendar-view .border-primary.bg-primary\/10 {
            background-color: rgba(239, 68, 68, 0.05) !important;
            border-color: rgba(239, 68, 68, 0.3) !important;
        }

        /* ☀️ 라이트 모드 텍스트 가독성 대폭 강화 ☀️ */
        html:not(.dark) .text-\[\#e8eaf6\],
        html:not(.dark) .text-\[\#e2e4f6\],
        html:not(.dark) .text-white {
            color: #111827 !important;
            /* 메인 글씨: 아주 짙은 검은색 */
        }

        html:not(.dark) .text-\[\#c5c8e0\] {
            color: #374151 !important;
            /* 중간 본문: 짙은 회색 */
        }

        /* 입력창 placeholder(힌트) 색상 보정 */
        html:not(.dark) input::placeholder {
            color: #9ca3af !important;
        }

        /* ☀️ 라이트 모드 투자 탭 및 대시보드 가독성 강화 ☀️ */

        /* 1. 투자 탭: 왼쪽 수익/손실 강조 선(Border) — iOS-style 부드럽게 */
        html:not(.dark) .bg-\[\#141928\].border-l-primary {
            border-left-color: #ef4444 !important;
            border-left-width: 4px !important;
            border-left-style: solid !important;
        }

        html:not(.dark) .bg-\[\#141928\].border-l-info {
            border-left-color: #3b82f6 !important;
            border-left-width: 4px !important;
            border-left-style: solid !important;
        }

        /* 2. 대시보드: 현금 흐름(수입/지출) 글씨 가독성 */
        html:not(.dark) #dash-income,
        html:not(.dark) #dash-expense {
            font-weight: 800 !important;
        }

        /* 3. 캘린더 내 금액 색상 — 라이트 모드는 채도를 살짝 낮춰 눈부심 줄임 */
        html:not(.dark) .text-tertiary {
            color: #059669 !important;
        }

        html:not(.dark) .text-primary {
            color: #dc2626 !important;
        }

        /* ☀️ 라이트 모드 추가 색상 보정 (iOS Light 스타일) ☀️ */

        /* 보조 색상 톤 다운 (info/blue) */
        html:not(.dark) .text-info {
            color: #2563eb !important;
        }

        html:not(.dark) .bg-info\/10,
        html:not(.dark) .bg-info\/15 {
            background-color: rgba(37, 99, 235, 0.08) !important;
        }

        html:not(.dark) .bg-tertiary\/15 {
            background-color: rgba(5, 150, 105, 0.1) !important;
        }

        html:not(.dark) .bg-primary\/15 {
            background-color: rgba(220, 38, 38, 0.08) !important;
        }

        /* 활성 네비게이션 버튼 라이트 모드 가시성 */
        html:not(.dark) [data-view].active,
        html:not(.dark) .bg-primary\/20 {
            background-color: rgba(220, 38, 38, 0.12) !important;
            color: #dc2626 !important;
        }

        /* 카드 그림자 살짝 강조 (라이트 모드는 그림자가 핵심 분리 신호) */
        html:not(.dark) .lg-card {
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
        }

        /* 토글 라디오 (수입/지출/이체 등) 라이트모드 보정 */
        html:not(.dark) .toggle-radio:checked + label {
            background-color: #dc2626 !important;
            color: #ffffff !important;
            border-color: #dc2626 !important;
        }

        html:not(.dark) .toggle-radio-sell:checked + label {
            background-color: #2563eb !important;
            color: #ffffff !important;
            border-color: #2563eb !important;
        }

        html:not(.dark) .toggle-radio-exch:checked + label {
            background-color: #059669 !important;
            color: #ffffff !important;
            border-color: #059669 !important;
        }

        /* 라이트 모드 Skeleton 애니메이션 */
        html:not(.dark) .skeleton {
            background: linear-gradient(-45deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%) !important;
        }

        /* 라이트 모드: 입력 포커스 색상 톤 다운 */
        html:not(.dark) input:focus,
        html:not(.dark) select:focus {
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
        }

        /* 라이트 모드: 글래스 패널들 (모달 등) */
        html:not(.dark) .glass-panel,
        html:not(.dark) .lg-modal,
        html:not(.dark) #daily-items-modal > div,
        html:not(.dark) #trade-history-modal > div,
        html:not(.dark) #breakdown-modal-overlay > div,
        html:not(.dark) #account-edit-modal > div,
        html:not(.dark) #cash-breakdown-modal > div,
        html:not(.dark) #total-income-modal > div,
        html:not(.dark) #total-assets-modal > div,
        html:not(.dark) .lg-bottom-nav {
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: saturate(180%) blur(24px) !important;
            -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
            border: 1px solid rgba(0, 0, 0, 0.06) !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
        }

        html:not(.dark) .lg-card {
            background: rgba(255, 255, 255, 0.7) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            border: 1px solid rgba(0, 0, 0, 0.05) !important;
        }

        /* 뼈대(Skeleton) 애니메이션 */
        .skeleton {
            background: linear-gradient(-45deg, #141928 25%, #1d243b 50%, #141928 75%);
            background-size: 400% 400%;
            animation: shimmer 1.2s ease-in-out infinite;
            border-radius: 8px;
            color: transparent !important;
            pointer-events: none;
        }

        .skeleton * {
            visibility: hidden;
        }

        @keyframes shimmer {
            0% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        /* 프리미엄 애플 스타일 글래스모피즘 전역 적용 */
        .glass-panel,
        .lg-modal,
        #daily-items-modal>div,
        #trade-history-modal>div,
        #breakdown-modal-overlay>div,
        #account-edit-modal>div,
        #cash-breakdown-modal>div,
        #total-income-modal>div,
        #total-assets-modal>div,
        .lg-bottom-nav {
            background: rgba(20, 25, 40, 0.6) !important;
            backdrop-filter: saturate(180%) blur(24px) !important;
            -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
        }

        .lg-card {
            background: rgba(20, 25, 40, 0.45) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
        }