/* =============================================
   분류 변경 팝업 스타일
   텍스트 가로 나열 (테두리/박스 없음)
   수정: 2026-03-17
   ============================================= */

/* 배경 오버레이 */
.note-type-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10010;
    display: none;
}
.note-type-overlay.active { display: block; }

/* 팝업 컨테이너 */
.note-type-popup {
    position: fixed;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    z-index: 10011;
    width: 440px;
    max-width: calc(100vw - 24px);
    display: none;
    animation: ntpSlideIn 0.18s ease-out;
}
.note-type-popup.active { display: block; }

@keyframes ntpSlideIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 팝업 헤더 */
.note-type-popup-header {
    padding: 12px 16px 8px;
    border-bottom: 1px solid #f0f0f0;
}
.note-type-popup-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #666;
}

/* 섹션 타이틀 */
.note-type-section-title {
    padding: 8px 14px 4px;
    font-size: 11px;
    color: #bbb;
    font-weight: 600;
    letter-spacing: 0.4px;
}

/* 전체 목록 영역 */
.note-type-list {
    padding: 4px 12px 12px;
    max-height: 320px;
    overflow-y: auto;
}

/* 가로 나열 그리드 */
.note-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    padding: 2px 0 4px;
}

/* ── [2026-07-15] 설정 모달 분류 개수 적응형 밀도(density) ──────────
   분류가 많아질수록 항목 여백을 줄여 한눈에 더 많이 보이도록 함.
   JS(renderFilterList)가 #filterTypeList 에 data-density 를 설정한다. */
#filterTypeList[data-density="cozy"]  .note-type-item { padding: 3px 9px; }
#filterTypeList[data-density="tight"] .note-type-item { padding: 2px 8px; font-size: 12.5px; }
#filterTypeList[data-density="tight"] .note-type-item .note-type-name { font-size: 12.5px; }
#filterTypeList[data-density="xtight"] .note-type-item { padding: 2px 7px; font-size: 12px; gap: 3px; }
#filterTypeList[data-density="xtight"] .note-type-item .note-type-name { font-size: 12px; }
#filterTypeList[data-density="xtight"] .note-type-item .note-type-icon { font-size: 13px; }

/* 개별 항목 - 테두리/박스 없음, 텍스트만 */
.note-type-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #444;
    white-space: nowrap;
    transition: background 0.12s;
    background: transparent;
    border: none;
}
.note-type-item:hover {
    background: #f3f4f6;
}

/* 현재 선택 항목 */
.note-type-item.current {
    color: #2563eb;
    font-weight: 600;
    background: #eff6ff;
}
.note-type-item.current:hover {
    background: #dbeafe;
}

/* 이모지 */
.note-type-icon {
    font-size: 14px;
    line-height: 1;
}

/* 이름 */
.note-type-name {
    font-size: 13px;
}

/* 카운트 - 회색 작게 */
.note-type-count {
    font-size: 11px;
    color: #9ca3af;
}
.note-type-item.current .note-type-count {
    color: #93c5fd;
}

/* ============================================================ */
/* 분류 필터 햄버거 버튼 & 뱃지                                  */
/* ============================================================ */

/* 햄버거 버튼 */
/* [2026-08-04] 파이오스 .pa-burger 와 동일 치수 — 34x34 / 반경 9 / 아이콘 17px.
   색은 아이노트 테마를 쓴다(파이오스는 어두운 화면이라 배경색을 그대로 옮기면 겉돈다). */
.filter-hamburger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: none;
    border: 1px solid #E5E7EB;
    border-radius: 9px;
    cursor: pointer;
    color: #555;
    transition: .15s;
    flex: none;
}
.filter-hamburger-btn svg {
    width: 17px;
    height: 17px;
}
.filter-hamburger-btn:hover {
    background: #F3F4F6;
    border-color: #ccc;
}
.filter-hamburger-btn.active {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #1E3A8A;
}
.filter-hamburger-btn.has-filter {
    border-color: #1E3A8A;
    color: #1E3A8A;
}

/* 필터 활성 뱃지 */
.filter-active-badge {
    font-size: 12px;
    background: #EFF6FF;
    color: #1E3A8A;
    border: 1px solid #BFDBFE;
    border-radius: 12px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 필터 정렬 버튼 */
.filter-sort-btn {
    transition: all 0.12s;
}
.filter-sort-btn.active {
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ── 편집모드 아이템 ── */
.filter-edit-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 4px 0 !important;
}

.filter-edit-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    border-radius: 7px !important;
    background: #FAFAFA !important;
    border: 1px solid #F0F0F0 !important;
    cursor: default !important;
    width: 100% !important;
    transition: background .1s !important;
}

.filter-edit-item:hover {
    background: #F3F4F6 !important;
}

.filter-drag-handle {
    cursor: grab !important;
    color: #ccc !important;
    font-size: 14px !important;
    padding: 0 2px !important;
    flex-shrink: 0 !important;
}

.filter-drag-handle:active {
    cursor: grabbing !important;
}