/* ========================================
   Sidebar Component - Naver Memo Style
   ======================================== */

/* 레이아웃 래퍼 */
.app-layout {
    display: flex;
    min-height: 100vh;
    background: var(--color-background, #FAFAFA);
}

/* 사이드바 - Flexbox 구조 */
.app-sidebar {
    width: 250px;
    background: var(--color-white, #FFFFFF);
    border-right: 1px solid var(--color-border, #E5E7EB);
    position: fixed;
    left: 0;
    top: 60px; /* 헤더 높이 */
    bottom: 0;
    z-index: 90;
    transition: transform 0.3s ease;
    
    /* Flexbox 구조 */
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px); /* 헤더 높이 제외 */
    overflow: hidden; /* 자식 요소에서 스크롤 처리 */
}

/* 사이드바 헤더 */
.app-sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--color-border, #E5E7EB);
    flex-shrink: 0; /* 고정 크기 */
}

.app-sidebar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-600, #4B5563);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 분류 리스트 - 스크롤 가능 영역 */
.app-sidebar-list {
    padding: 8px 0;
    flex: 1; /* 남은 공간 차지 */
    overflow-y: auto; /* 스크롤 가능 */
    overflow-x: hidden;
}

/* 하단 설정 영역 - 고정 */
.app-sidebar-footer {
    flex-shrink: 0; /* 고정 크기 */
    border-top: 1px solid var(--color-border, #E5E7EB);
    background: var(--color-white, #FFFFFF);
    padding: 8px 0;
    /* display 복원 - 팝오버 메뉴 사용 */
}

.app-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--color-gray-700, #374151);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 14px;
}

.app-sidebar-item:hover {
    background: var(--color-gray-50, #F9FAFB);
    color: var(--color-primary, #1E3A8A);
}

.app-sidebar-item.active {
    background: var(--color-primary-light, #EFF6FF);
    color: var(--color-primary, #1E3A8A);
    font-weight: 600;
    border-left: 3px solid var(--color-primary, #1E3A8A);
}

/* 아이콘 */
.app-sidebar-item .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 텍스트 */
.app-sidebar-item-text {
    flex: 1;
    font-size: 14px;
}

/* 카운트 배지 */
.app-sidebar-item-count {
    font-size: 12px;
    color: var(--color-gray-500, #6B7280);
    background: var(--color-gray-100, #F3F4F6);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.app-sidebar-item.active .app-sidebar-item-count {
    background: var(--color-primary, #1E3A8A);
    color: var(--color-white, #FFFFFF);
}

/* 설정 및 도움말 버튼 */
.app-sidebar-item-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--color-gray-700, #374151);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 14px;
}

.app-sidebar-item-btn:hover {
    background: var(--color-gray-50, #F9FAFB);
    color: var(--color-primary, #1E3A8A);
}

.app-sidebar-item-btn .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 더보기 버튼 */
.app-sidebar-more {
    padding: 12px 20px;
    color: var(--color-gray-500, #6B7280);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: all 0.2s;
}

.app-sidebar-more:hover {
    color: var(--color-primary, #1E3A8A);
}

/* 메인 콘텐츠 영역 */
.app-main {
    flex: 1;
    margin-left: 250px;
    margin-top: 60px; /* 헤더 높이 */
    padding: 0;
    background: #FAFAFA;
    height: calc(100vh - 60px); /* 헤더 제외 전체 높이 고정 */
    overflow: hidden;            /* 페이지 스크롤 차단 — 패널 내부에서만 스크롤 */
    display: flex;
    flex-direction: column;
}

.app-main .container {
    background: transparent;
    padding: 0;
    margin: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* split-container 위의 고정 영역 — 줄어들지 않도록 */
.app-main .container > .header,
.app-main .container > .stats,
.app-main .container > .search-section,
.app-main .container > .sort-control,
.app-main .container > .filters,
.app-main .container > #loading,
.app-main .container > .ai-search-loading {
    flex-shrink: 0;
}

/* 노트 그리드 영역 */
.notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 20px;
    background: var(--app-bg, #FAFAFA);
    overflow: visible; /* 드롭다운 메뉴가 잘리지 않도록 */
}

/* 그리드 모드 (더 작은 카드) */
.notes-grid.grid-mode {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.notes-grid.grid-mode .note-card {
    min-height: 160px;
    padding: 12px;
}

.notes-grid.grid-mode .note-content {
    font-size: 13px;
    -webkit-line-clamp: 3;
}

.notes-grid.grid-mode .note-actions {
    flex-direction: column;
    gap: 4px;
}

.notes-grid.grid-mode .note-actions button {
    font-size: 11px;
    padding: 5px 8px;
}

.notes-list {
    padding: 20px;
    background: var(--app-bg, #FAFAFA);
    display: none;
}

.notes-list.show {
    display: block;
}

/* 리스트 뷰 아이템 스타일 */
.note-item {
    background: white;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    border: 1px solid #E5E7EB;
    transition: all 0.2s;
    cursor: pointer;
}

.note-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border-color: #D1D5DB;
    transform: translateX(4px);
}

.note-line1 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.note-type-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.note-type-badge.type-TODO {
    background: #DBEAFE;
    color: #1E40AF;
}

.note-type-badge.type-IDEA {
    background: #FEF3C7;
    color: #92400E;
}

.note-type-badge.type-INFO {
    background: #E0E7FF;
    color: #3730A3;
}

.note-type-badge.type-EMOTION {
    background: #FCE7F3;
    color: #9F1239;
}

.note-type-badge.type-PROJECT {
    background: #D1FAE5;
    color: #065F46;
}

.note-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-ai {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    color: #10B981;
    background: #D1FAE5;
    padding: 3px 8px;
    border-radius: 4px;
}

.note-line2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6B7280;
}

.note-preview {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 그리드 뷰 아이템 스타일 */
.note-grid {
    background: white;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    border: 1px solid #E5E7EB;
    transition: all 0.2s;
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    overflow: visible; /* 드롭다운 메뉴가 잘리지 않도록 */
    position: relative; /* z-index 컨텍스트 생성 */
}

.note-grid:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    /* transform 제거: stacking context 생성 방지하여 드롭다운이 제대로 표시되도록 */
    border-color: #3B82F6; /* 호버 시 파란색 테두리로 변경 */
}

.grid-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    border: none;
}

.grid-type:hover {
    opacity: 0.8;
}

.grid-type-icon {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}

.grid-title {
    font-size: 17px;
    font-weight: 600;
    color: #374151;
    line-height: 1.55;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex: 1;
    margin-bottom: 2px;
}

/* 그리드 카드 하단 아이콘 바 - 항상 표시 */
.grid-icon-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 5px;
    border-top: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
    max-height: 30px;
    overflow: hidden;
    opacity: 1;
    margin-top: 6px;
}

.grid-icon-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #9CA3AF;
    cursor: default;
    white-space: nowrap;
}

.grid-icon-item:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-share-icon {
    cursor: pointer;
}
.grid-share-icon:hover {
    color: #6B7280;
}
.grid-share-icon.has-share {
    color: #3B82F6;
}

.grid-share-badge {
    font-size: 9px;
    font-weight: 700;
    color: #3B82F6;
}

.grid-icon-item:not(:first-child) {
    cursor: pointer;
    flex-shrink: 0;
}
.grid-icon-item:not(:first-child):hover {
    color: #6B7280;
}

/* 메뉴 버튼 스타일 */
.menu-container {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
    z-index: 10001; /* 드롭다운보다 약간 높게 */
}

.menu-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #9CA3AF;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-btn:hover {
    background: #F3F4F6;
    color: #374151;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px;
    min-width: 160px;
    max-height: 400px; /* 최대 높이 설정 */
    overflow-y: auto; /* 스크롤 가능 */
    z-index: 10000; /* 맨 앞으로 (기존 100 → 10000) */
    display: none; /* 애니메이션 제거, display로 즉시 토글 */
}

.dropdown-menu.show {
    display: block; /* 즉시 표시 */
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 13px;
    color: #374151;
}

.menu-item:hover {
    background: #F3F4F6;
}

.menu-item-danger {
    color: #DC2626 !important;
}

.menu-item-danger:hover {
    background: #FEF2F2 !important;
}

/* 노트 카드 스타일 (네이버 메모 스타일) */
.note-card {
    position: relative;
    background: white;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    cursor: pointer;
    border: 0;
    min-height: 80px;
    display: flex;
    flex-direction: column;
}

.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    gap: 4px;
}

.note-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    /* transform 제거: stacking context 생성 방지하여 드롭다운이 제대로 표시되도록 */
    border-color: #3B82F6; /* 호버 시 파란색 테두리로 변경 */
}

.note-card.selected {
    border-color: #3B82F6;
    background: #EFF6FF;
}

/* 단축키 힌트 */
.shortcut-hint {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    color: #9CA3AF;
    background: #F3F4F6;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

/* AI 배지 */
.ai-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 10px;
    color: #10B981;
    background: #D1FAE5;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    display: none; /* 기본 숨김 - 필요시 표시 */
}

/* 노트 타입 배지 */
.note-type {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    background: #F3F4F6;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.note-type:hover {
    background: #E5E7EB;
    transform: scale(1.05);
}

/* 타입별 색상 */
.note-type.type-TODO {
    background: #DBEAFE;
    color: #1E40AF;
}

.note-type.type-IDEA {
    background: #FEF3C7;
    color: #92400E;
}

.note-type.type-INFO {
    background: #E0E7FF;
    color: #3730A3;
}

.note-type.type-EMOTION {
    background: #FCE7F3;
    color: #9F1239;
}

.note-type.type-PROJECT {
    background: #D1FAE5;
    color: #065F46;
}

/* 노트 콘텐츠 */
.note-content {
    flex: 1;
    font-size: 13px;
    color: #4B5563;
    line-height: 1.5;
    margin-bottom: 12px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.note-content p {
    margin: 0 0 6px 0;
    font-size: 13px;
}

.note-content p:last-child {
    margin-bottom: 0;
}

.note-content h1,
.note-content h2,
.note-content h3,
.note-content h4,
.note-content h5,
.note-content h6 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

/* 노트 메타 정보 */
.note-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.space-badge {
    font-size: 11px;
    color: #6B7280;
    background: #F9FAFB;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #E5E7EB;
}

.weight-badge {
    font-size: 11px;
    color: #F59E0B;
    background: #FEF3C7;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* 노트 액션 버튼 */
.note-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #F3F4F6;
}

.note-actions button {
    flex: 1;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background: white;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.note-actions button:hover {
    background: #F9FAFB;
    color: #374151;
    border-color: #D1D5DB;
}

.btn-edit {
    color: #3B82F6 !important;
    border-color: #DBEAFE !important;
}

.btn-edit:hover {
    background: #EFF6FF !important;
}

.btn-delete {
    color: #EF4444 !important;
    border-color: #FEE2E2 !important;
}

.btn-delete:hover {
    background: #FEF2F2 !important;
}

/* 공유 버튼 컨테이너 */
.btn-share-container {
    position: relative;
    flex: 1;
}

.btn-share {
    width: 100%;
}

.share-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 4px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px;
    min-width: 160px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all 0.2s;
}

.share-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.share-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 13px;
    color: #374151;
}

.share-menu-item:hover {
    background: #F3F4F6;
}

.share-menu-icon {
    font-size: 16px;
}

/* 햄버거 메뉴 버튼 (모바일용) */
.app-sidebar-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--color-gray-600, #4B5563);
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

/* 뷰 전환 버튼 스타일 */
.view-btn, .import-btn {
    padding: 6px 12px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 6px !important;
    background: white !important;
    cursor: pointer !important;
    font-size: 13px !important;
    transition: all 0.2s !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
}

.view-btn:hover, .import-btn:hover {
    background: #F9FAFB !important;
    border-color: #D1D5DB !important;
    color: #374151 !important;
}

.view-btn.active {
    background: #3B82F6 !important;
    color: white !important;
    border-color: #3B82F6 !important;
}
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 8px);
    transition: all 0.2s;
}

.app-sidebar-toggle:hover {
    background: var(--color-gray-100, #F3F4F6);
    color: var(--color-primary, #1E3A8A);
}

.app-sidebar-toggle .icon {
    width: 20px;
    height: 20px;
}

/* 모바일에서 사이드바 숨김 */
@media (max-width: 768px) {
    .app-sidebar {
        transform: translateX(-100%);
    }
    
    .app-sidebar.active {
        transform: translateX(0);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }
    
    .app-main {
        margin-left: 0;
        height: auto;    /* 모바일: 페이지 스크롤 복원 */
        overflow: visible;
    }
    
    .app-sidebar-toggle {
        display: flex;
    }
    
    /* 오버레이 */
    .app-sidebar-overlay {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 89;
    }
    
    .app-sidebar-overlay.active {
        display: block;
    }
}

/* 스크롤바 스타일 */
.app-sidebar::-webkit-scrollbar {
    width: 6px;
}

.app-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.app-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-gray-300, #D1D5DB);
    border-radius: 3px;
}

.app-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400, #9CA3AF);
}


/* 사이드바 헤더 섹션 (고정) */
.app-sidebar-header-section {
    flex-shrink: 0;
}

/* 카테고리 목록 영역 (스크롤) */
.app-sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 설정 및 도움말 하단 고정 */
.app-sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid #E5E7EB;
    padding: 8px;
    background: white;
}

/* 설정 버튼 스타일 */
.app-sidebar-item-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
}

.app-sidebar-item-btn:hover {
    background: #F3F4F6;
    color: #1E3A8A;
}

.app-sidebar-item-btn .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.app-sidebar-item-btn .app-sidebar-item-text {
    flex: 1;
    text-align: left;
}

/* ========================================
   설정 팝오버 메뉴 스타일
   ======================================== */

.settings-menu-container {
    position: relative;
}

.settings-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 280px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 8px;
    z-index: 10002;
    animation: slideUpFadeIn 0.25s ease-out;
}

/* 슬라이드 업 + 페이드 인 애니메이션 */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 팝오버 아이템 스타일 */
.popover-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.popover-item:hover {
    background: #F3F4F6;
    color: #1E3A8A;
}

.popover-item .icon {
    flex-shrink: 0;
    color: #6B7280;
}

.popover-item:hover .icon {
    color: #1E3A8A;
}

/* 구분선 */
.popover-divider {
    height: 1px;
    background: #E5E7EB;
    margin: 4px 0;
}

/* 관리자 전용 메뉴 숨김 (기본) */
.admin-only {
    display: none !important;
}

/* 슈퍼관리자일 때만 표시 */
body.is-super-admin .admin-only {
    display: flex !important;
}

body.is-super-admin .popover-divider.admin-only {
    display: block !important;
}


/* ===== 도움말 모달 스타일 ===== */

/* 모달 오버레이 */
.help-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10002; /* 팝오버보다 높게 */
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease-out;
}

.help-modal-overlay.show {
  display: flex;
}

/* 모달 박스 */
.help-modal {
  background: white;
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 900px;
  height: 85vh;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  animation: slideUpScale 0.3s ease-out;
  overflow: hidden;
}

/* 모달 헤더 */
.help-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #E5E7EB;
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}

.help-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.help-modal-title .icon {
  color: white;
}

.help-modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: white;
}

.help-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* 모달 바디 */
.help-modal-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 좌측 사이드바 */
.help-sidebar {
  width: 220px;
  background: #F9FAFB;
  border-right: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.help-search-container {
  position: relative;
  margin-bottom: 16px;
}

.help-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  pointer-events: none;
}

.help-search-input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  background: white;
  transition: all 0.2s;
}

.help-search-input:focus {
  outline: none;
  border-color: #667EEA;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.help-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-nav-list li {
  margin-bottom: 4px;
}

.help-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #4B5563;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.help-nav-item:hover {
  background: white;
  color: #667EEA;
}

.help-nav-item.active {
  background: white;
  color: #667EEA;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.help-nav-item .icon {
  flex-shrink: 0;
}

/* 우측 콘텐츠 영역 */
.help-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: white;
}

.help-section {
  display: none;
}

.help-section.active {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

.help-section-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #667EEA;
}

.help-section-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 도움말 카드 */
.help-card {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s;
}

.help-card:hover {
  border-color: #667EEA;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.help-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 12px 0;
}

.help-card-title .icon {
  color: #667EEA;
  flex-shrink: 0;
}

.help-list {
  margin: 0;
  padding-left: 20px;
  color: #4B5563;
  line-height: 1.8;
}

.help-list li {
  margin-bottom: 8px;
}

.help-list strong {
  color: #111827;
  font-weight: 600;
}

/* FAQ 아이템 */
.help-faq-item {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s;
}

.help-faq-item:hover {
  border-color: #667EEA;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.help-faq-question {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #111827;
  margin-bottom: 10px;
}

.help-faq-question .icon {
  flex-shrink: 0;
  color: #667EEA;
  margin-top: 2px;
}

.help-faq-answer {
  color: #4B5563;
  line-height: 1.6;
  padding-left: 28px;
}

.help-faq-answer a {
  color: #667EEA;
  text-decoration: underline;
}

/* 고객 지원 카드 */
.help-support-card {
  text-align: center;
}

.help-support-card p {
  color: #6B7280;
  margin: 8px 0;
  line-height: 1.6;
}

.help-support-hours {
  font-size: 13px;
  color: #9CA3AF;
  font-style: italic;
}

.help-support-email,
.help-support-phone {
  font-size: 16px;
  color: #667EEA !important;
  margin: 12px 0 !important;
}

.help-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 12px;
}

.help-support-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.help-link-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
}

.help-link-list li {
  margin-bottom: 8px;
}

.help-link-list a {
  color: #667EEA;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
}

.help-link-list a:hover {
  text-decoration: underline;
  color: #764BA2;
}

/* 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* 반응형 (모바일) */
@media (max-width: 768px) {
  .help-modal {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .help-modal-body {
    flex-direction: column;
  }

  .help-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #E5E7EB;
    padding: 12px;
  }

  .help-nav-list {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
  }

  .help-nav-list li {
    margin-bottom: 0;
  }

  .help-nav-item {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 13px;
  }

  .help-content {
    padding: 16px;
  }

  .help-section-title {
    font-size: 20px;
  }

  .help-card {
    padding: 16px;
  }
}


/* ============================================================
   3패널 Split View — PC 전용 (≥769px)
   ============================================================ */

/* 토글 버튼 — app-header-action-btn 위에 덮어쓰기 */
.split-toggle-btn {
    display: none !important; /* 기본 숨김 */
}
@media (min-width: 769px) {
    .split-toggle-btn {
        display: flex !important;
    }
    .split-toggle-btn.active {
        color: #6366f1 !important;
        background: rgba(99,102,241,0.12) !important;
    }
}

/* Split 컨테이너 */
.split-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 0;
    position: relative;
    flex: 1;          /* app-main 남은 공간 전부 */
    min-height: 0;    /* flex 자식이 넘칠 때 수축 허용 */
    overflow: hidden;
}

/* 중앙 노트 패널 */
.split-notes-panel {
    flex: 1;
    min-width: 300px;
    overflow-y: auto;  /* 독립 스크롤 */
    overflow-x: hidden;
    position: relative;
    height: 100%;
    background: var(--app-bg, #FAFAFA);
}

/* ── 필터 패널 ── */
.split-filter-panel {
    display: flex;
    flex-direction: row;
    width: 280px;
    min-width: 220px;
    max-width: 400px;
    flex-shrink: 0;
    position: relative;
    background: var(--sfp-bg, #f8f9fa);
    /* border-right 제거: split-divider가 시각적 구분선 역할 */
    border-radius: 10px 0 0 10px;
    overflow: hidden; /* sfp-inner가 독립 스크롤 */
    height: 100%;
}

.sfp-inner {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;  /* 필터 패널 독립 스크롤 */
    overflow-x: hidden;
    height: 100%;
}

/* 필터 섹션 */
.sfp-divider {
    height: 1px;
    background: var(--sfp-border, #e5e7eb);
    margin: 8px 10px;
}

/* 섹션 레이블 */
.sfp-section-label {
    padding: 9px 12px 6px;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* 칩 행 (가로 배열) */
.sfp-chip-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    padding: 4px 10px 10px;
}
.sfp-chip-row.sfp-chip-wrap {
    flex-wrap: wrap;
}

/* 칩 공통 */
.sfp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    cursor: pointer;
    font-size: 12px;
    color: #374151;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    user-select: none;
}
.sfp-chip:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.sfp-chip.active {
    background: rgba(99,102,241,0.1);
    border-color: #6366f1;
    color: #6366f1;
    font-weight: 600;
}
.sfp-chip-icon { font-size: 13px; line-height: 1; }
.sfp-chip-text { line-height: 1.2; }

/* ── [2026-07-15] 분류 개수 적응형 밀도(density) ──────────────────
   분류가 많아질수록 칩 간격/여백을 줄여 한눈에 더 많이 보이도록 함.
   JS(buildFilterTypeList)가 #sfpUserTypes 에 data-density 를 설정한다.
   normal(<8) → cozy(8+) → tight(13+) → xtight(20+) 순으로 촘촘해짐. */
#sfpUserTypes[data-density="cozy"]  { gap: 5px; }
#sfpUserTypes[data-density="cozy"]  .sfp-chip { padding: 5px 10px; }

#sfpUserTypes[data-density="tight"] { gap: 4px; }
#sfpUserTypes[data-density="tight"] .sfp-chip { padding: 4px 9px; font-size: 11.5px; }
#sfpUserTypes[data-density="tight"] .sfp-chip-icon { font-size: 12px; }

#sfpUserTypes[data-density="xtight"] { gap: 3px; }
#sfpUserTypes[data-density="xtight"] .sfp-chip { padding: 3px 8px; font-size: 11px; gap: 4px; }
#sfpUserTypes[data-density="xtight"] .sfp-chip-icon { font-size: 12px; }

/* 초기화 칩 */
.sfp-chip.sfp-chip-reset {
    background: transparent;
    border-color: transparent;
    color: #9ca3af;
}
.sfp-chip.sfp-chip-reset:hover {
    color: #ef4444;
    background: rgba(239,68,68,0.07);
    border-color: rgba(239,68,68,0.2);
}

/* ② 내 분류 헤더 행 */
.sfp-section-label.sfp-user-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
}
.sfp-user-actions { display: flex; gap: 4px; align-items: center; }
.sfp-user-btn {
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 12px;
    cursor: pointer;
    color: #6b7280;
    line-height: 1.4;
    transition: background 0.1s;
}
.sfp-user-btn:hover { background: #f3f4f6; }
.sfp-user-btn.sfp-user-btn-add {
    background: #1E3A8A;
    border-color: #1E3A8A;
    color: white;
    font-weight: 700;
}
.sfp-user-btn.sfp-user-btn-add:hover { background: #1e40af; }

/* ③ 테마 칩 */
.sfp-theme-chip .sfp-chip-icon {
    flex-shrink: 0;
}

/* ④ 분류 정렬 드롭다운 (검색창 왼쪽) */
.sfp-sort-dropdown {
    position: relative;
    flex-shrink: 0;
    margin-right: 6px;
}
.sfp-sort-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    cursor: pointer;
    color: #374151;
    transition: background 0.12s, border-color 0.12s;
}
.sfp-sort-trigger:hover { background: #f3f4f6; border-color: #d1d5db; }
.sfp-sort-trigger.active { color: #6366f1; border-color: #6366f1; background: rgba(99,102,241,0.08); }
.sfp-sort-trigger .icon { width: 16px; height: 16px; }

.sfp-sort-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 100px;
    z-index: 200;
    overflow: hidden;
}
.sfp-sort-menu.open { display: block; }
.sfp-sort-item {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    color: #374151;
    white-space: nowrap;
    transition: background 0.1s;
}
.sfp-sort-item:hover { background: #f3f4f6; }
.sfp-sort-item.active { color: #6366f1; font-weight: 600; background: rgba(99,102,241,0.07); }

/* ── 에디터 패널 ── */
.split-editor-panel {
    display: flex;
    flex-direction: row;
    width: 50%;
    min-width: 400px;
    flex-shrink: 0;
    position: relative;
    /* border-left 제거: split-divider가 시각적 구분선 역할 */
    border-radius: 0 10px 10px 0;
    background: #fff;
    overflow: hidden; /* 내부 iframe이 스크롤 담당 */
    height: 100%;
}

.split-editor-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.split-editor-frame {
    width: 100%;
    flex: 1;
    border: none;
    background: #fff;
    /* 테이블/도표 가로 스크롤 보장 */
}

/* 에디터 내 테이블/도표 스크롤 고정 */
.split-editor-frame {
    /* 부모에서 overflow 제어 */
}

/* 플레이스홀더 */
.split-editor-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #9ca3af;
    padding: 40px;
}
.sep-icon { font-size: 40px; opacity: 0.4; }
.sep-text { font-size: 14px; text-align: center; line-height: 1.6; }

/* ── 드래그 핸들 ── */
.split-divider {
    width: 5px;           /* 패널 구분 실선 너비 */
    cursor: col-resize;
    background: var(--sfp-border, #e5e7eb);  /* 항상 보이는 구분선 */
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    transition: background 0.12s;
    /* 히트 영역 좌우 확장 (양쪽 5px → 실제 15px 너비로 클릭 가능) */
    margin: 0 -5px;
    padding: 0 5px;
    box-sizing: content-box;
}
.split-divider:hover,
.split-divider.dragging {
    background: #6366f1;
}
/* 중앙 그립 점 표시 */
.split-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 32px;
    background: rgba(255,255,255,0.6);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.12s;
}
.split-divider:hover::after,
.split-divider.dragging::after { opacity: 1; }

.split-divider-filter { order: 2; }
.split-divider-editor { order: -1; }

/* 모바일 전체 숨김 */
@media (max-width: 768px) {
    .split-toggle-btn { display: none !important; }
    .split-filter-panel,
    .split-editor-panel { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   [2026-06-18] 중간 폭(태블릿/창 축소) 반응형 — 769px ~ 1180px
   문제: split-filter-panel(280px) + split-notes-panel(min 300px)
         + split-editor-panel(min 400px) = 약 990px 이상 필요.
         그 이하로 줄이면 flex-shrink:0 패널들이 가로로 넘쳐 잘림.
   해결:
     1) 에디터가 열려 있으면 → 좁은 폭에서 분류(필터)패널을 자동 숨겨
        [노트목록 | 에디터] 2단으로 표시
     2) 패널 최소폭을 낮춰 더 잘 수축하도록 함
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1180px) {
    /* 패널 최소폭 완화 (가로 넘침 방지) */
    .split-notes-panel  { min-width: 240px !important; }
    .split-filter-panel { min-width: 200px !important; width: 230px !important; }

    /* 에디터 패널: 고정폭(50%) 대신 수축 허용 → 가로 넘침/잘림 방지 */
    .split-editor-panel {
        width: 50% !important;
        min-width: 300px !important;
        flex-shrink: 1 !important;   /* 공간 부족 시 줄어들도록 */
    }

    /* 에디터가 열린 상태에서는 분류(필터) 패널을 숨겨 2단 확보 */
    body.split-editor-open .split-filter-panel,
    body.split-editor-open .split-divider-filter {
        display: none !important;
    }

    /* [2026-07-14 FIX] 중간 폭에서 에디터가 열리면 에디터를 '주 영역'으로.
       기존 문제: 노트목록이 flex:1 로 남은 공간을 다 먹어(≈50%+) 에디터가
       50% 고정폭에 갇혀 좁아지고 → 본문이 일찍 줄바꿈되어 오른쪽에
       큰 빈 여백(어두운 영역)이 생김.
       해결: 노트목록을 컴팩트 고정폭으로 두고, 에디터가 나머지를 모두
       채우도록(flex-grow) 전환. */
    body.split-editor-open .split-notes-panel {
        flex: 0 0 300px !important;
        width: 300px !important;
        min-width: 260px !important;
        max-width: 340px !important;
    }
    body.split-editor-open .split-editor-panel {
        width: auto !important;
        flex: 1 1 auto !important;   /* 남은 폭 전부 차지 */
        min-width: 0 !important;
    }
}

/* 더 좁은 데스크톱 폭(769px ~ 980px): 에디터가 열려 있으면 에디터를
   전체 폭으로 전환하고 노트목록을 숨겨 한 번에 하나만 보이게 (가독성 우선) */
@media (min-width: 769px) and (max-width: 980px) {
    body.split-editor-open .split-notes-panel {
        display: none !important;
    }
    body.split-editor-open .split-editor-panel {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        border-radius: 10px !important;
    }
    body.split-editor-open .split-divider-editor { display: none !important; }
}

/* ══════════════════════════════════════════════
   카드 패널 정렬 칩 바
   ══════════════════════════════════════════════ */
.notes-sort-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 6px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--app-bg, #FAFAFA);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.notes-sort-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    background: transparent;
    border: 1px solid #E5E7EB;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    user-select: none;
    white-space: nowrap;
}
.notes-sort-chip:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
    color: #374151;
}
.notes-sort-chip.active {
    background: rgba(99,102,241,0.08);
    border-color: #6366F1;
    color: #6366F1;
    font-weight: 600;
}

/* 내분류 정렬 드롭다운 */
.sfp-cat-sort-wrap {
    position: relative;
}
.sfp-cat-sort-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 90px;
    z-index: 100;
    overflow: hidden;
}
.sfp-cat-sort-menu.open { display: block; }
.sfp-cat-sort-item {
    padding: 7px 12px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
}
.sfp-cat-sort-item:hover { background: #F3F4F6; }
.sfp-cat-sort-item.active { color: #6366F1; font-weight: 600; background: rgba(99,102,241,0.07); }

/* ══════════════════════════════════════════════
   sort-bar 정렬 드롭다운 + 보기 전환 버튼
   (2026-04-18 sortbar_viewbtn 개선)
   ══════════════════════════════════════════════ */

/* 정렬 드롭다운 */
.card-sort-select {
    padding: 4px 10px;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    background: transparent;
    cursor: pointer;
    outline: none;
    appearance: auto;
}
.card-sort-select:hover {
    border-color: #D1D5DB;
    color: #374151;
}
.card-sort-select:focus {
    border-color: #6366F1;
    color: #6366F1;
}

/* 중간 spacer — 좌우 분리 */
.sort-bar-spacer { flex: 1; }

/* 보기 전환 버튼 공통 */
.sort-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    user-select: none;
    line-height: 1.4;
}
.sort-view-btn:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
    color: #374151;
}
.sort-view-btn.active {
    background: rgba(99,102,241,0.08);
    border-color: #6366F1;
    color: #6366F1;
    font-weight: 600;
}

/* 링크 버튼 — 준비중 (비활성) */
.sort-view-btn--link {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}