/* ── 앱 배경 테마 변수 ── */
:root { --app-bg: #FAFAFA; }
html[data-card-theme=classic]   { --app-bg: #F0F2F5; }
html[data-card-theme=deepfloat] { --app-bg: #E4E6EB; }
html[data-card-theme=gradient]  { --app-bg: #EEF2FF; }
html[data-card-theme=dark]      { --app-bg: #191919; }
html[data-card-theme=warm]      { --app-bg: #F5F0E8; }

/* ============================================================
   Card Theme v1 — 5가지 테마 (data-card-theme 속성으로 전환)
   기본값: deepfloat
   ============================================================ */

/* ── 공통: 카드 전환 애니메이션 ── */
.note-card, .note-item, .note-grid,
.app-layout, .app-main {
    transition: background 0.3s ease, box-shadow 0.2s ease !important;
}

/* ============================================================
   A. Classic — 연회청 배경 / 부드러운 그림자
   ============================================================ */
html[data-card-theme="classic"] .app-layout,
html[data-card-theme="classic"] .app-main {
    background: #F0F2F5 !important;
}
html[data-card-theme="classic"] .note-card,
html[data-card-theme="classic"] .note-item,
html[data-card-theme="classic"] .note-grid {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 3px 10px rgba(0,0,0,0.05) !important;
}
html[data-card-theme="classic"] .note-card:hover,
html[data-card-theme="classic"] .note-item:hover,
html[data-card-theme="classic"] .note-grid:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 6px 20px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(0,0,0,0.10) !important;
}

/* ============================================================
   B. Deep Float — 중회색 배경 / 이중 그림자 (기본값)
   ============================================================ */
html:not([data-card-theme]) .app-layout,
html[data-card-theme="deepfloat"] .app-layout,
html:not([data-card-theme]) .app-main,
html[data-card-theme="deepfloat"] .app-main {
    background: #E4E6EB !important;
}
html:not([data-card-theme]) .note-card,
html[data-card-theme="deepfloat"] .note-card,
html:not([data-card-theme]) .note-item,
html[data-card-theme="deepfloat"] .note-item,
html:not([data-card-theme]) .note-grid,
html[data-card-theme="deepfloat"] .note-grid {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 6px 20px rgba(0,0,0,0.10) !important;
}
html:not([data-card-theme]) .note-card:hover,
html[data-card-theme="deepfloat"] .note-card:hover,
html:not([data-card-theme]) .note-item:hover,
html[data-card-theme="deepfloat"] .note-item:hover,
html:not([data-card-theme]) .note-grid:hover,
html[data-card-theme="deepfloat"] .note-grid:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.15) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   C. Gradient — 보라↔초록 그라데이션 배경
   ============================================================ */
html[data-card-theme="gradient"] .app-layout,
html[data-card-theme="gradient"] .app-main {
    background: linear-gradient(145deg, #EEF2FF 0%, #F0FDF4 50%, #FFF7ED 100%) !important;
    min-height: 100vh;
}
html[data-card-theme="gradient"] .note-card,
html[data-card-theme="gradient"] .note-item,
html[data-card-theme="gradient"] .note-grid {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(99,102,241,0.10) !important;
}
html[data-card-theme="gradient"] .note-card:hover,
html[data-card-theme="gradient"] .note-item:hover,
html[data-card-theme="gradient"] .note-grid:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 10px 28px rgba(99,102,241,0.18) !important;
    transform: translateY(-3px) !important;
}

/* ============================================================
   D. Full Dark — 노션/에버노트 스타일 완전 다크모드
   ============================================================ */

/* CSS 변수 전체 리셋 — 이걸로 var() 사용하는 모든 요소가 자동 전환 */
html[data-card-theme="dark"] {
    --color-gray-50:  #1A1A1A;
    --color-gray-100: #222222;
    --color-gray-200: #2E2E2E;
    --color-gray-300: #3A3A3A;
    --color-gray-400: #555555;
    --color-gray-500: #777777;
    --color-gray-600: #A0A0A0;
    --color-gray-700: #BEBEBE;
    --color-gray-800: #D8D8D8;
    --color-gray-900: #EBEBEB;
    --bg-primary:     #191919;
    --bg-secondary:   #252525;
    --bg-tertiary:    #2C2C2C;
    --bg-hover:       rgba(255,255,255,0.05);
    --color-border:   rgba(255,255,255,0.08);
    --color-primary:        #6B9FFF;
    --color-primary-light:  rgba(107,159,255,0.15);
}

/* 전체 배경 — 깊은 어둠으로 카드 플로팅 극대화 */
html[data-card-theme="dark"] body,
html[data-card-theme="dark"] .app-layout,
html[data-card-theme="dark"] .app-main {
    background: #0D0D0D !important;
    color: #E8E8E8 !important;
}

/* ── 헤더 ── */
html[data-card-theme="dark"] .app-header {
    background: #1F1F1F !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
html[data-card-theme="dark"] .app-header-search {
    background: #2A2A2A !important;
    border-color: rgba(255,255,255,0.09) !important;
}
html[data-card-theme="dark"] .app-header-search-input {
    background: transparent !important;
    color: #E8E8E8 !important;
}
html[data-card-theme="dark"] .app-header-search-input::placeholder { color: #555 !important; }
html[data-card-theme="dark"] .app-header-logo { color: #E0E0E0 !important; }
html[data-card-theme="dark"] .app-header-menu-item .icon {
    color: #666 !important;
}
html[data-card-theme="dark"] .app-header-action-btn {
    color: #888 !important;
}
html[data-card-theme="dark"] .app-header-action-btn:hover {
    background: rgba(255,255,255,0.07) !important;
    color: #E0E0E0 !important;
}
html[data-card-theme="dark"] .app-header-menu-dropdown {
    background: #252525 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.65) !important;
}
html[data-card-theme="dark"] .app-header-menu-item {
    background: #252525 !important;
    color: #C0C0C0 !important;
}
html[data-card-theme="dark"] .app-header-menu-item:hover {
    background: #333333 !important;
    color: #E8E8E8 !important;
}
html[data-card-theme="dark"] .app-header-menu-item:hover .icon {
    color: #6B9FFF !important;
}
html[data-card-theme="dark"] .app-header-menu-divider {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* ── 노트 카드 배경 ── */
html[data-card-theme="dark"] .note-card,
html[data-card-theme="dark"] .note-item,
html[data-card-theme="dark"] .note-grid {
    background: #1E1E1E !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.60), 0 8px 24px rgba(0,0,0,0.50) !important;
}
html[data-card-theme="dark"] .note-card:hover,
html[data-card-theme="dark"] .note-item:hover,
html[data-card-theme="dark"] .note-grid:hover {
    background: #262626 !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.70), 0 16px 40px rgba(0,0,0,0.55) !important;
    transform: translateY(-3px) !important;
}

/* ── 카드 텍스트 — card-improvements.css !important보다 구체성을 높임 ── */
html[data-card-theme="dark"] .note-card .note-title,
html[data-card-theme="dark"] .note-item .note-title,
html[data-card-theme="dark"] .note-card h3,
html[data-card-theme="dark"] .note-item h3 {
    color: #E8E8E8 !important;
}
html[data-card-theme="dark"] .note-card .note-content,
html[data-card-theme="dark"] .note-item .note-content {
    color: #A0A0A0 !important;
}
/* card-improvements.css의 :first-child — 내용과 동일 색상 (제목은 .note-title) */
html[data-card-theme="dark"] .note-card .note-content > *:first-child,
html[data-card-theme="dark"] .note-item .note-content > *:first-child {
    color: #A0A0A0 !important;
}
/* card-improvements.css의 :not(:first-child) #666 override */
html[data-card-theme="dark"] .note-card .note-content > *:not(:first-child),
html[data-card-theme="dark"] .note-item .note-content > *:not(:first-child) {
    color: #A0A0A0 !important;
}
html[data-card-theme="dark"] .note-summary {
    color: #A0A0A0 !important;
}

/* ── 하단 메타 / 아이콘 바 ── */
html[data-card-theme="dark"] .note-date,
html[data-card-theme="dark"] .note-weight { color: #888888 !important; }
html[data-card-theme="dark"] .note-meta,
html[data-card-theme="dark"] .note-meta-left { color: #888888 !important; }
html[data-card-theme="dark"] .note-icon-bar {
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}
html[data-card-theme="dark"] .icon-btn,
html[data-card-theme="dark"] .time-icon,
html[data-card-theme="dark"] .share-icon,
html[data-card-theme="dark"] .summary-icon { color: #909090 !important; }
html[data-card-theme="dark"] .icon-btn:hover {
    background: rgba(255,255,255,0.07) !important;
    color: #D0D0D0 !important;
}
html[data-card-theme="dark"] .icon-btn.has-share { color: #6B9FFF !important; }

/* 노트 타입 배지 */
html[data-card-theme="dark"] .note-type-badge {
    filter: brightness(0.85) saturate(0.85) !important;
}

/* 필터 팝업 내 ⋮ 메뉴 버튼 숨김 (모든 테마 공통) */
.filter-popup-panel .menu-btn, .note-type-popup .menu-btn { display: none !important; }

/* 드롭다운 열린 카드를 위로 올려 아래 카드에 가리지 않도록 */
.note-card.menu-open,
.note-grid.menu-open,
.note-item.menu-open {
    position: relative !important;
    z-index: 200 !important;
}

/* ── 필터 팝업 ── */
/* [2026-08-06] 어두운 화면에서 버튼만 떠 보이던 문제.
   밝은 테마용 테두리(#E5E7EB)가 다크에서도 남아 도드라졌다.
   파이오스 햄버거와 같은 색조로 맞춘다(--line #28324f / --surface2 #1b2542 계열). */
html[data-card-theme="dark"] .filter-hamburger-btn {
    color: #93a0bd !important;
    background: #1b2542 !important;
    border-color: #28324f !important;
}
html[data-card-theme="dark"] .filter-hamburger-btn:hover {
    color: #e5edf7 !important;
    border-color: #37436a !important;
    background: #202b4d !important;
}
html[data-card-theme="dark"] .filter-popup-panel {
    background: #252525 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.75) !important;
    color: #D0D0D0 !important;
}
html[data-card-theme="dark"] .note-type-item {
    background: #2E2E2E !important;
    border-color: rgba(255,255,255,0.07) !important;
    color: #C8C8C8 !important;
}
html[data-card-theme="dark"] .note-type-item:hover {
    background: #383838 !important;
}
html[data-card-theme="dark"] .note-type-item.active-filter {
    background: #383838 !important;
    border-color: rgba(107,159,255,0.4) !important;
}

/* ── 노트 편집 모달 (note-open-modal) ── */
html[data-card-theme="dark"] .note-modal-overlay {
    background: rgba(0,0,0,0.75) !important;
}
html[data-card-theme="dark"] .note-modal-container {
    background: #1F1F1F !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.70) !important;
}
html[data-card-theme="dark"] .note-modal-header,
html[data-card-theme="dark"] .note-modal-tabs {
    background: #1A1A1A !important;
    border-color: rgba(255,255,255,0.07) !important;
}
html[data-card-theme="dark"] .note-modal-tab {
    background: #252525 !important;
    border-color: rgba(255,255,255,0.07) !important;
    color: #888 !important;
}
html[data-card-theme="dark"] .note-modal-tab:hover { background: #2C2C2C !important; color: #C0C0C0 !important; }
html[data-card-theme="dark"] .note-modal-tab.active { background: #333 !important; color: #E8E8E8 !important; }
html[data-card-theme="dark"] .note-modal-tab-title { color: inherit !important; }
html[data-card-theme="dark"] .note-modal-tab-close,
html[data-card-theme="dark"] .note-modal-close { color: #555 !important; }
html[data-card-theme="dark"] .note-modal-tab-close:hover,
html[data-card-theme="dark"] .note-modal-close:hover {
    color: #C0C0C0 !important;
    background: rgba(255,255,255,0.08) !important;
}
html[data-card-theme="dark"] .note-modal-new-tab {
    color: #666 !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html[data-card-theme="dark"] .note-modal-new-tab:hover { color: #C0C0C0 !important; background: rgba(255,255,255,0.06) !important; }
html[data-card-theme="dark"] .note-modal-body { background: #1F1F1F !important; }

/* ── 설정 메뉴 ── */
html[data-card-theme="dark"] .settings-dropdown {
    background: #252525 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.65) !important;
}
html[data-card-theme="dark"] .settings-menu-item { color: #C0C0C0 !important; }
html[data-card-theme="dark"] .settings-menu-item:hover { background: rgba(255,255,255,0.06) !important; color: #E8E8E8 !important; }
html[data-card-theme="dark"] .settings-dropdown-content { background: #252525 !important; }
html[data-card-theme="dark"] .theme-submenu {
    background: #1F1F1F !important;
    border-color: rgba(255,255,255,0.07) !important;
}
html[data-card-theme="dark"] .theme-option { color: #C0C0C0 !important; }
html[data-card-theme="dark"] .theme-option:hover { background: rgba(255,255,255,0.06) !important; }

/* ── 가져오기 모달 ── */
html[data-card-theme="dark"] .import-modal { background: rgba(0,0,0,0.72) !important; }
html[data-card-theme="dark"] .import-modal-content {
    background: #252525 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #D0D0D0 !important;
}
html[data-card-theme="dark"] .import-modal h2 { color: #E8E8E8 !important; }
html[data-card-theme="dark"] .import-modal-subtitle { color: #A0A0A0 !important; }
html[data-card-theme="dark"] .import-modal-close { color: #666 !important; }
html[data-card-theme="dark"] .import-modal-close:hover { background: rgba(255,255,255,0.08) !important; color: #E0E0E0 !important; }
html[data-card-theme="dark"] .file-type-card {
    background: #2E2E2E !important;
    border-color: rgba(255,255,255,0.07) !important;
}
html[data-card-theme="dark"] .file-type-card:hover { background: #383838 !important; border-color: rgba(255,255,255,0.15) !important; }
html[data-card-theme="dark"] .file-type-label { color: #D0D0D0 !important; }
html[data-card-theme="dark"] .file-type-desc { color: #777 !important; }
html[data-card-theme="dark"] .drop-zone {
    background: #2A2A2A !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #777 !important;
}
html[data-card-theme="dark"] .drop-zone.dragover { background: #333 !important; border-color: #6B9FFF !important; }

/* ── 스크롤바 ── */
html[data-card-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
html[data-card-theme="dark"] ::-webkit-scrollbar-track { background: #1A1A1A; }
html[data-card-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A3A3A; border-radius: 3px; }
html[data-card-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4A4A4A; }

/* ============================================================
   E. Warm Paper — 크림 베이지 / 따뜻한 그림자
   ============================================================ */
html[data-card-theme="warm"] .app-layout,
html[data-card-theme="warm"] .app-main {
    background: #F5F0E8 !important;
}
html[data-card-theme="warm"] .note-card,
html[data-card-theme="warm"] .note-item,
html[data-card-theme="warm"] .note-grid {
    background: #FFFEF9 !important;
    border: 1px solid rgba(180,160,120,0.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(120,90,40,0.06), 0 5px 16px rgba(120,90,40,0.09) !important;
}
html[data-card-theme="warm"] .note-card:hover,
html[data-card-theme="warm"] .note-item:hover,
html[data-card-theme="warm"] .note-grid:hover {
    box-shadow: 0 2px 6px rgba(120,90,40,0.10), 0 10px 28px rgba(120,90,40,0.14) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(180,160,120,0.30) !important;
}

/* ============================================================
   테마 선택 모달 스타일
   ============================================================ */
.theme-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.theme-modal-overlay.active {
    display: flex;
}
.theme-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.20);
    width: 360px;
    max-width: calc(100vw - 32px);
    padding: 20px;
    animation: themeModalIn 0.18s ease-out;
}
@keyframes themeModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.theme-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.theme-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}
.theme-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #bbb;
    line-height: 1;
    padding: 0;
}
.theme-modal-close:hover { color: #555; }

.theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.theme-item {
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
}
.theme-item:hover {
    transform: translateY(-2px);
}
.theme-item.active {
    border-color: #1E3A8A;
}
.theme-preview {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.theme-preview-card {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background: white;
}
.theme-label {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #444;
    padding: 5px 4px 6px;
    background: #FAFAFA;
    border-top: 1px solid #F0F0F0;
}
.theme-item.active .theme-label {
    color: #1E3A8A;
    background: #EFF6FF;
}

/* ── 필터 팝업 분류 목록 다크모드 ── */
html[data-card-theme="dark"] .note-type-section-title {
    color: #888 !important;
    border-color: rgba(255,255,255,0.07) !important;
}
html[data-card-theme="dark"] .note-type-item.current {
    background: #1E3A8A !important;
    color: white !important;
    border-color: #2A4BB0 !important;
}
html[data-card-theme="dark"] .note-type-popup {
    background: #1E1E1E !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.70) !important;
}
html[data-card-theme="dark"] .note-type-popup-header {
    border-color: rgba(255,255,255,0.07) !important;
}
html[data-card-theme="dark"] .note-type-list {
    background: #1E1E1E !important;
}
html[data-card-theme="dark"] .filter-drag-handle {
    color: #666 !important;
}

/* ════════════════════════════════════════════════
   에디터 창 (create_note_dev10.html) 다크모드
   ════════════════════════════════════════════════ */

/* 1. CSS 변수 오버라이드 (인라인 style 우선순위 문제 보완용) */
html[data-card-theme=dark] {
    --bg-primary: #1E1E1E;
    --bg-secondary: #181818;
    --bg-hover: #252525;
    --border-color: rgba(255,255,255,0.09);
    --border-dark: rgba(255,255,255,0.14);
    --color-gray-500: #888;
}

/* 2. html/body/container — 전체 배경 다크 */
html[data-card-theme=dark],
html[data-card-theme=dark] body {
    background: #121212 !important;
    color: #E0E0E0 !important;
}

/* 3. 컨테이너 */
html[data-card-theme=dark] .container {
    background: #121212 !important;
}

/* 4. 상단 헤더 — 직접 배경 강제 (변수 의존 없이) */
html[data-card-theme=dark] .note-header {
    background: #1E1E1E !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* 4. 폴더 표시 */
html[data-card-theme=dark] .folder-display {
    background: #252525 !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #BCBCBC !important;
}
html[data-card-theme=dark] .folder-name {
    color: #BCBCBC !important;
}

/* 5. 버튼들 */
html[data-card-theme=dark] .btn-back,
html[data-card-theme=dark] .btn-menu,
html[data-card-theme=dark] .btn-star {
    color: #BCBCBC !important;
    background: transparent !important;
}
html[data-card-theme=dark] .btn-folder {
    background: #252525 !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #BCBCBC !important;
}
html[data-card-theme=dark] .btn-folder:hover,
html[data-card-theme=dark] .btn-back:hover,
html[data-card-theme=dark] .btn-menu:hover {
    background: #333 !important;
    color: #FFF !important;
}

/* 6. 메뉴 드롭다운 */
html[data-card-theme=dark] .menu-dropdown {
    background: #252525 !important;
    border-color: rgba(255,255,255,0.10) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
}
html[data-card-theme=dark] .menu-item {
    color: #BCBCBC !important;
}
html[data-card-theme=dark] .menu-item:hover {
    background: rgba(255,255,255,0.07) !important;
}

/* 9. 테이블 */
html[data-card-theme=dark] .tc-wrap {
    --color-border: rgba(255,255,255,0.12);
    --color-background: #1E1E1E;
    --color-text-secondary: #888;
}
html[data-card-theme=dark] .tc-cell {
    border-color: rgba(255,255,255,0.12) !important;
    color: #E0E0E0 !important;
    background: #1E1E1E !important;
}
html[data-card-theme=dark] .tc-row:first-child .tc-cell {
    background: #252525 !important;
}
html[data-card-theme=dark] .tc-add-column,
html[data-card-theme=dark] .tc-add-row {
    color: #555 !important;
    background: #1A1A1A !important;
}


/* 9a. 일반 HTML 표 (에디터 출력물) — 다크모드 */
html[data-card-theme=dark] table { border-collapse: collapse; }
html[data-card-theme=dark] th,
html[data-card-theme=dark] td {
    border-color: rgba(255,255,255,0.10) !important;
    color: #C8C8C8 !important;
    background: #1E1E1E !important;
}
html[data-card-theme=dark] th {
    background: #252525 !important;
    color: #D8D8D8 !important;
    font-weight: 600;
}
html[data-card-theme=dark] tr:hover td { background: #2A2A2A !important; color: #E8E8E8 !important; }
html[data-card-theme=dark] td[colspan],
html[data-card-theme=dark] th[colspan] { text-align: center; background: #252525 !important; }
html[data-card-theme=dark] td[rowspan],
html[data-card-theme=dark] th[rowspan] { vertical-align: middle; }

/* 10. 체크리스트 */
html[data-card-theme=dark] .cdx-checklist__item-checkbox {
    border-color: #555 !important;
    background: transparent !important;
}
html[data-card-theme=dark] .cdx-checklist__item--checked .cdx-checklist__item-checkbox {
    background: #3B82F6 !important;
    border-color: #3B82F6 !important;
}
html[data-card-theme=dark] .cdx-checklist__item-text {
    color: #E0E0E0 !important;
}
html[data-card-theme=dark] .cdx-checklist__item--checked .cdx-checklist__item-text {
    color: #666 !important;
}

/* 11. 인용구 */
html[data-card-theme=dark] .cdx-quote,
html[data-card-theme=dark] .cdx-quote__text,
html[data-card-theme=dark] .cdx-quote__caption {
    border-color: rgba(255,255,255,0.15) !important;
    color: #E0E0E0 !important;
}

/* 12. 코드 블록 */
html[data-card-theme=dark] .ce-code__textarea {
    background: #161616 !important;
    color: #A8FF78 !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* 13. 링크 도구 */
html[data-card-theme=dark] .link-tool__input {
    background: #252525 !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #E0E0E0 !important;
}

/* 14. 로딩 / 모달 */
html[data-card-theme=dark] .loading {
    background: #252525 !important;
    color: #BCBCBC !important;
    border-color: rgba(255,255,255,0.10) !important;
}
html[data-card-theme=dark] .modal-content {
    background: #1E1E1E !important;
    border-color: rgba(255,255,255,0.10) !important;
}
html[data-card-theme=dark] .modal-header {
    background: #252525 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #F0F0F0 !important;
}
html[data-card-theme=dark] .modal-body {
    background: #1E1E1E !important;
    color: #BCBCBC !important;
}

/* ── 3점 드롭다운 메뉴 다크모드 ── */
html[data-card-theme=dark] .dropdown-menu {
    background: #252525 !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
}
html[data-card-theme=dark] .dropdown-menu .menu-item {
    color: #BCBCBC !important;
}
html[data-card-theme=dark] .dropdown-menu .menu-item:hover {
    background: rgba(255,255,255,0.07) !important;
}
html[data-card-theme=dark] .dropdown-menu .menu-item-danger {
    color: #f87171 !important;
}
html[data-card-theme=dark] .dropdown-menu .menu-item-danger:hover {
    background: rgba(220,38,38,0.15) !important;
}
html[data-card-theme=dark] .menu-btn {
    color: #888 !important;
}
html[data-card-theme=dark] .menu-btn:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #BCBCBC !important;
}

/* ======================================================
   그리드 뷰 — 다크 테마 텍스트 최적화
   .grid-title, .grid-type 에 대한 명시적 오버라이드
   ====================================================== */

/* 그리드 카드 제목 */
html[data-card-theme=dark] .note-grid .grid-title {
    color: #E0E0E0 !important;
}

/* 그리드 뷰 타입 배지 — 다크 (투명 배경, note-type-colors.css 색상 유지) */
html[data-card-theme=dark] .note-grid .grid-type {
    opacity: 0.85 !important;
    filter: none !important;
}

/* 그리드 메뉴 버튼 */
html[data-card-theme=dark] .note-grid .menu-btn {
    color: #888 !important;
}
html[data-card-theme=dark] .note-grid .menu-btn:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #BCBCBC !important;
}

/* 그리드 보기 — classic 테마 */
html[data-card-theme=classic] .note-grid .grid-title {
    color: #1E293B !important;
}

/* 그리드 보기 — warm 테마 */
html[data-card-theme=warm] .note-grid .grid-title {
    color: #3D2B1F !important;
}

/* 그리드 보기 — gradient 테마 */
html[data-card-theme=gradient] .note-grid .grid-title {
    color: #1E293B !important;
}
html[data-card-theme=gradient] .note-grid .grid-type {
    filter: brightness(1.15) saturate(1.1) !important;
    opacity: 0.95 !important;
}

/* 그리드 아이콘바 — 다크 테마 */
html[data-card-theme=dark] .note-grid .grid-icon-bar {
    border-top-color: rgba(255,255,255,0.06) !important;
}
html[data-card-theme=dark] .note-grid .grid-icon-item {
    color: #777 !important;
}
html[data-card-theme=dark] .note-grid .grid-share-icon.has-share {
    color: #6B9FFF !important;
}
html[data-card-theme=dark] .note-grid .grid-share-badge {
    color: #6B9FFF !important;
}

/* 그리드 아이콘바 — gradient 테마 */
html[data-card-theme=gradient] .note-grid .grid-icon-bar {
    border-top-color: rgba(99,102,241,0.15) !important;
}
html[data-card-theme=gradient] .note-grid .grid-icon-item {
    color: #64748B !important;
}
html[data-card-theme=gradient] .note-grid .grid-share-icon.has-share {
    color: #4F46E5 !important;
}
html[data-card-theme=gradient] .note-grid .grid-share-badge {
    color: #4F46E5 !important;
}

/* ============================================================
   3패널 Split View — 다크 테마
   ============================================================ */
html[data-card-theme=dark] .split-filter-panel {
    --sfp-bg: #1a1a2e;
    --sfp-border: rgba(255,255,255,0.07);
    background: #1a1a2e !important;
    border-right-color: rgba(255,255,255,0.07) !important;
}
html[data-card-theme=dark] .sfp-chip { color: #c8c8d8 !important; background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.1) !important; }
html[data-card-theme=dark] .sfp-chip:hover { background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.18) !important; }
html[data-card-theme=dark] .sfp-chip.active { background: rgba(99,102,241,0.22) !important; border-color: #7c7cf0 !important; color: #a78bfa !important; }
html[data-card-theme=dark] .sfp-chip.sfp-chip-reset { color: #555 !important; background: transparent !important; border-color: transparent !important; }
html[data-card-theme=dark] .sfp-chip.sfp-chip-reset:hover { color: #ef4444 !important; background: rgba(239,68,68,0.1) !important; }
html[data-card-theme=dark] .notes-sort-chip { color: #c8c8d8 !important; background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.1) !important; }
html[data-card-theme=dark] .notes-sort-chip:hover { background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.18) !important; }
html[data-card-theme=dark] .notes-sort-chip.active { background: rgba(99,102,241,0.22) !important; border-color: #7c7cf0 !important; color: #a78bfa !important; }

html[data-card-theme=dark] .sfp-divider { background: rgba(255,255,255,0.06) !important; }
html[data-card-theme=dark] .sfp-section-label { color: #555 !important; }
html[data-card-theme=dark] .sfp-user-btn { border-color: rgba(255,255,255,0.12) !important; color: #aaa !important; }
html[data-card-theme=dark] .sfp-user-btn:hover { background: rgba(255,255,255,0.08) !important; }
html[data-card-theme=dark] .sfp-sort-trigger { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.1) !important; color: #c8c8d8 !important; }
html[data-card-theme=dark] .sfp-sort-menu { background: #1e1e2e !important; border-color: rgba(255,255,255,0.1) !important; }
html[data-card-theme=dark] .sfp-sort-item { color: #c8c8d8 !important; }
html[data-card-theme=dark] .sfp-sort-item:hover { background: rgba(255,255,255,0.06) !important; }
html[data-card-theme=dark] .sfp-sort-item.active { color: #a78bfa !important; background: rgba(99,102,241,0.15) !important; }
html[data-card-theme=dark] .split-editor-panel {
    background: #141420 !important;
    border-left-color: rgba(255,255,255,0.07) !important;
}
html[data-card-theme=dark] .split-toggle-btn:hover { background: rgba(255,255,255,0.08) !important; }
html[data-card-theme=dark] .split-toggle-btn.active { color: #a78bfa !important; background: rgba(167,139,250,0.12) !important; }
html[data-card-theme=dark] .split-divider { background: rgba(255,255,255,0.07) !important; }
html[data-card-theme=dark] .split-divider:hover,
html[data-card-theme=dark] .split-divider.dragging { background: rgba(167,139,250,0.2) !important; }
html[data-card-theme=dark] .split-divider::after { background: rgba(255,255,255,0.15) !important; }

/* 활성 카드 하이라이트 */
.note-card.split-active,
.note-grid.split-active,
.note-item.split-active {
    outline: 2px solid #6366f1 !important;
    outline-offset: -2px !important;
}
html[data-card-theme=dark] .note-card.split-active,
html[data-card-theme=dark] .note-grid.split-active,
html[data-card-theme=dark] .note-item.split-active {
    outline-color: #a78bfa !important;
}

/* 내분류 정렬 드롭다운 - 다크 테마 */
html[data-card-theme=dark] .sfp-cat-sort-menu { background: #2a2a2a !important; border-color: rgba(255,255,255,0.1) !important; }
html[data-card-theme=dark] .sfp-cat-sort-item { color: #c8c8d8 !important; }
html[data-card-theme=dark] .sfp-cat-sort-item:hover { background: rgba(255,255,255,0.07) !important; }
html[data-card-theme=dark] .sfp-cat-sort-item.active { color: #a78bfa !important; background: rgba(99,102,241,0.2) !important; }
html[data-card-theme=dark] .notes-sort-bar { background: var(--app-bg, #191919) !important; border-bottom-color: rgba(255,255,255,0.08) !important; }

/* sort-bar 드롭다운 + 보기버튼 - 다크 테마 */
html[data-card-theme=dark] .card-sort-select {
    color: #c8c8d8 !important;
    border-color: rgba(255,255,255,0.15) !important;
    background: rgba(255,255,255,0.05) !important;
}
html[data-card-theme=dark] .card-sort-select:hover {
    border-color: rgba(255,255,255,0.25) !important;
    color: #e0e0ee !important;
}
html[data-card-theme=dark] .card-sort-select:focus {
    border-color: #a78bfa !important;
    color: #a78bfa !important;
}
html[data-card-theme=dark] .card-sort-select option {
    background: #2a2a2a !important;
    color: #c8c8d8 !important;
}
html[data-card-theme=dark] .sort-view-btn {
    color: #8a8aaa !important;
    border-color: transparent !important;
}
html[data-card-theme=dark] .sort-view-btn:hover {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #c8c8d8 !important;
}
html[data-card-theme=dark] .sort-view-btn.active {
    background: rgba(167,139,250,0.15) !important;
    border-color: #a78bfa !important;
    color: #a78bfa !important;
}

/* ── 분류 추가/편집 모달 다크모드 ── */
html[data-card-theme=dark] #addTypeModal .modal-content,
html[data-card-theme=dark] #editTypeModal .modal-content,
html[data-card-theme=dark] #deleteTypeModal .modal-content {
    background: #1E1E1E !important;
    color: #E0E0E0 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
html[data-card-theme=dark] #addTypeModal h3,
html[data-card-theme=dark] #editTypeModal h3,
html[data-card-theme=dark] #deleteTypeModal h3 {
    color: #F0F0F0 !important;
}
html[data-card-theme=dark] #addTypeModal label,
html[data-card-theme=dark] #editTypeModal label {
    color: #B0B0B8 !important;
}
html[data-card-theme=dark] #addTypeModal input[type="text"],
html[data-card-theme=dark] #editTypeModal input[type="text"] {
    background: #2A2A2A !important;
    color: #E0E0E0 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
html[data-card-theme=dark] #addTypeModal input[type="text"]::placeholder,
html[data-card-theme=dark] #editTypeModal input[type="text"]::placeholder {
    color: #606068 !important;
}
html[data-card-theme=dark] #addTypeModal .btn-secondary,
html[data-card-theme=dark] #editTypeModal .btn-secondary,
html[data-card-theme=dark] #deleteTypeModal .btn-secondary {
    background: #2A2A2A !important;
    color: #C0C0C8 !important;
    border-color: rgba(255,255,255,0.12) !important;
}
html[data-card-theme=dark] #addTypeModal .limit-info,
html[data-card-theme=dark] #editTypeModal .limit-info {
    color: #808088 !important;
}
html[data-card-theme=dark] #addTypeModal p,
html[data-card-theme=dark] #editTypeModal p,
html[data-card-theme=dark] #deleteTypeModal p {
    color: #B0B0B8 !important;
}

/* ── 텍스트 선택(블록) 색상 ── */
/* 라이트 모드: 파란 계열 배경 + 흰 글자 */
::selection {
    background: rgba(99, 102, 241, 0.25);
    color: inherit;
}
::-moz-selection {
    background: rgba(99, 102, 241, 0.25);
    color: inherit;
}

/* 다크 모드: 보라 계열 배경 + 텍스트 색상 유지 */
html[data-card-theme=dark] ::selection {
    background: rgba(139, 92, 246, 0.4) !important;
    color: #F0F0F0 !important;
}
html[data-card-theme=dark] ::-moz-selection {
    background: rgba(139, 92, 246, 0.4) !important;
    color: #F0F0F0 !important;
}

/* ======================================================
   ★ 즐겨찾기 기능 스타일 (2026-06-15)
   ====================================================== */

/* 카드/그리드 우상단 별 배지 */
.note-star-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 3px;
    border-radius: 4px;
    transition: transform 0.15s ease, background 0.15s ease;
    user-select: none;
}
.note-star-badge:hover {
    transform: scale(1.25);
    background: rgba(245,158,11,0.12);
}
.note-star-badge--grid {
    font-size: 12px;
}

/* 드롭다운 메뉴 즐겨찾기 아이템 */
.menu-item-star {
    color: #475569;
    transition: color 0.15s ease, background 0.15s ease;
}
.menu-item-star:hover {
    background: #fef9ec !important;
    color: #b45309 !important;
}
.menu-item-star.is-starred {
    color: #f59e0b !important;
    font-weight: 600;
}
.menu-item-star.is-starred:hover {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

/* 다크 테마 즐겨찾기 아이템 */
html[data-card-theme=dark] .menu-item-star {
    color: #94a3b8 !important;
}
html[data-card-theme=dark] .menu-item-star:hover {
    background: rgba(245,158,11,0.12) !important;
    color: #fbbf24 !important;
}
html[data-card-theme=dark] .menu-item-star.is-starred {
    color: #fbbf24 !important;
}
html[data-card-theme=dark] .menu-item-star.is-starred:hover {
    background: rgba(245,158,11,0.18) !important;
    color: #f59e0b !important;
}

/* 브리콘 배지 — 즐겨찾기 별과 동일 구조, 보라/파랑 계열 */
.note-brikon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 3px;
    border-radius: 4px;
    transition: transform 0.15s ease, background 0.15s ease;
    user-select: none;
}
.note-brikon-badge:hover {
    transform: scale(1.2);
    background: rgba(124,58,237,0.10);
}
.note-brikon-badge--grid {
    font-size: 11px;
}
html[data-card-theme=dark] .note-brikon-badge {
    color: #a78bfa;
}
html[data-card-theme=dark] .note-brikon-badge:hover {
    background: rgba(167,139,250,0.14);
}
html[data-card-theme=deepfloat] .note-brikon-badge {
    color: #818cf8;
}

/* 즐겨찾기 토스트 등장 애니메이션 */
@keyframes favToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.92); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* 즐겨찾기 뷰 버튼 active (별 색상) */
#viewBtnStar.active {
    color: #f59e0b !important;
    border-color: #f59e0b !important;
}
html[data-card-theme=dark] #viewBtnStar.active {
    color: #fbbf24 !important;
    border-color: #fbbf24 !important;
    background: rgba(245,158,11,0.1) !important;
}

/* 브리콘 배지 아이콘 — 이모지에서 스프라이트 아이콘으로 (2026-08-30) */
.note-brikon-badge svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.note-brikon-badge--grid svg {
    width: 11px;
    height: 11px;
}