/* assets/css/style.css */
body {
    margin: 0;
    padding: 0;
    background-color: #f4f6f9;
    font-family: 'NanumBarunGothic', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    overflow: hidden;
}

/* Bootstrap 툴팁: 항상 최상위 레이어에 표시 (모달, 팝업, 플로팅 패널 위) */
.tooltip {
    z-index: 99999 !important;
}

.tooltip .tooltip-inner {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    max-width: 260px;
}

.app-layout {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow-y: hidden;
    overflow-x: auto;
}

/* 좌측 사이드바 구조 변경: 전체를 안고 있는 부모와 애니메이션 이너 구조 */
.sidebar {
    width: 280px;
    background-color: #ffffff;
    z-index: 1040;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex-shrink: 0;
}

.sidebar.collapsed {
    width: 20px;
    /* 사이드바가 접혔을 때 마우스 접촉을 위한 아주 작은 여유 영역 */
    cursor: e-resize;
}

/* 실제 내용을 담은 컨테이너 */
.sidebar-inner {
    width: 290px;
    /* 폭을 15px 키워 아이템 돌출을 위한 투명 여백 확보 */
    /* padding-right: 15px; 투명 여백 삭제 */
    box-sizing: border-box;
    background-color: transparent;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

/* 닫혔을 때는 왼쪽으로 숨어 들어감 (화면 밖으로) */
.sidebar.collapsed .sidebar-inner {
    transform: translateX(-280px);
}

/* 단, 닫힌 상태에서 20px 영역에 마우스를 올리면 다시 우측으로 팝업 (오버레이로 나타남) */
.sidebar.collapsed:hover .sidebar-inner {
    transform: translateX(0);
    box-shadow: none;
    /* 메인 콘텐츠 위로 떠오르는 느낌 */
    border-right: none;
}

/* 토글 버튼 클릭 시 아이콘 회전 효과 (우측 캔버스 쪽에 있는 버튼) */
body.sidebar-collapsed #sidebarToggleBtnOuter {
    transform: rotate(180deg);
}

.sidebar-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    max-width: 280px;
    box-sizing: border-box;
}

.sidebar-header h5 {
    margin: 0;
    font-weight: bold;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
}

.note-list-container {
    flex: 1;
    width: 290px;
    /* 아이템 돌출을 위해 부모의 패딩 영역으로 15px 확장 */
    margin-right: -15px;
    padding-right: 15px;
    /* 일반 아이템들의 우측 한계선은 다시 300px로 제한 */
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 30px;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.note-list-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* 폴더 및 노트 리스트 (Sortable) */
.folder-group {
    margin-bottom: 0px;
}

.folder-header {
    position: relative;
    padding: 10px 65px 10px 15px;
    background-color: transparent;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.folder-header:hover {
    background-color: var(--hover-color, rgba(0, 0, 0, 0.05));
}

.folder-toggle-icon {
    transition: transform 0.3s ease;
}

.folder-group.is-collapsed .folder-toggle-icon {
    transform: rotate(-90deg);
}

/* 폴더 아이콘 모달 그리드 설정 */
.folder-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 10px;
    height: 280px;
    overflow-y: auto;
}

.folder-icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    height: 42px;
    width: 42px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.folder-icon-item:hover {
    background-color: #e2e8f0;
    transform: translateY(-2px);
}

.folder-icon-item.selected {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
    box-shadow: 0 4px 6px rgba(13, 110, 253, 0.2);
}

/* .folder-header styles fixed */
.folder-header {
    position: relative;
    padding: 10px 65px 10px 15px;
    background-color: transparent;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
    color: inherit;
    font-weight: 600;
    font-size: 14px;
    user-select: none;
}

.folder-header.folder-handle {
    cursor: grab;
}

.folder-header.folder-handle:active {
    cursor: grabbing;
}

.folder-header span.flex-grow-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-body {
    min-height: 10px;
    background-color: transparent;
}

.note-list-item {
    position: relative;
    padding: 12px 65px 12px 30px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    font-size: 14px;
    background-color: transparent;
}

.note-list-item:hover {
    background-color: var(--hover-color, rgba(0, 0, 0, 0.05));
}

.note-list-item.active {
    background-color: #2d4f8c;
    color: #ffffff;
    border-left: 10px solid var(--sidebar-active-border, #5b9cf6);
    padding-left: 25px;
    font-weight: 600;
    margin-right: -15px;
    /* 부모 컨테이너의 제한을 뚫고 가상으로 15px 돌출 (JS 의존 없이 순수 CSS) */
    padding-right: 80px;
    /* 늘어난 폭만큼 내부 패딩도 늘려 기존 텍스트/버튼 위치 유지 */
}

.note-list-item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 폴더 및 노트 공통 설정/삭제 버튼 (절대 위치 고정) */
.folder-settings-btn,
.note-settings-btn {
    position: absolute !important;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    font-size: 14px;
    opacity: 0 !important;
    cursor: pointer;
    transition: opacity 0.2s, color 0.15s, transform 0.2s;
}

.folder-delete-sidebar-btn,
.note-delete-sidebar-btn {
    position: absolute !important;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    font-size: 14px;
    opacity: 0 !important;
    cursor: pointer;
    transition: opacity 0.2s, color 0.15s, transform 0.2s;
}

/* 활성화된 노트 아이템이 15px 넓어지므로 버튼 위치 15px 좌측 이동 보정 */
.note-list-item.active .note-settings-btn {
    right: 55px !important;
}

.note-list-item.active .note-delete-sidebar-btn {
    right: 30px !important;
}

/* 항목 호버 시 투명도 조절 */
.folder-header:hover .folder-settings-btn,
.folder-header:hover .folder-delete-sidebar-btn,
.note-list-item:hover .note-settings-btn,
.note-list-item:hover .note-delete-sidebar-btn {
    opacity: 0.55 !important;
}

/* 버튼 자체 호버 시 효과 */
.folder-settings-btn:hover,
.folder-delete-sidebar-btn:hover,
.note-settings-btn:hover,
.note-delete-sidebar-btn:hover {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* 노트별 특정 버튼 색상 */
.note-settings-btn:hover {
    color: #0d6efd !important;
}

.note-delete-sidebar-btn:hover {
    color: #dc3545 !important;
}

/* 활성 노트(다크 배경)에서 내부 아이콘/설정버튼 색상 유지 */
.note-list-item.active .bi-file-earmark-text {
    color: #a8c8f8 !important;
}

.note-list-item.active .note-settings-btn,
.note-list-item.active .note-delete-sidebar-btn {
    color: rgba(255, 255, 255, 0.7) !important;
}

.note-list-item.active .note-settings-btn:hover,
.note-list-item.active .note-delete-sidebar-btn:hover {
    color: #ffffff !important;
}

.sortable-ghost {
    opacity: 0.4;
}

/* ---------------------------------------------------
 * 사이드바 활성 노트 부분 돌출 삭제 완료 (User Request)
 * --------------------------------------------------- */

/* 메인 콘텐츠 */
.main-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    background-color: var(--main-bg-color, #212121) !important;
    padding: 30px;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
}

.toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}





.notepad-container {
    max-width: none;
    width: auto;
    margin: 0 -21px 0 120px;
    display: flex;
    flex-direction: row;
    background-color: transparent;
    gap: 15px;
}

.notepad-paper-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border-radius: 0 0 8px 8px;
    border: 1px solid #c8d3e0;
    position: relative;
    overflow: visible;
    background-color: #ffffff;
    /* 가상 배경, 실제 내지색상은 하위 에디터 영역이 덮음 */
}

/* 실제 편집기 도화지 영역 */
.notepad-editor-area {
    flex: 1;
    min-height: 1700px;
    position: relative;
    overflow: hidden;
    background-color: var(--naeji-bg-color, #ffffff);
    cursor: text;
    border-radius: 0 0 8px 8px;

    /* 여백 동적 적용은 컨텐츠 영역의 가상 여백으로 활용되므로 불필요한 padding 제거 */

    /* CSS 변수로 노트 선/그리드 적용 — 자유구역(zone) 내에서만 zone별로 적용 */
    background-image: none;

    /* 시작 위치 조절용 (여백을 감안하여 top 오프셋 지정) */
    background-position: var(--naeji-bg-position-x, 0) var(--naeji-bg-position-y, 80px);
    background-size: var(--naeji-bg-size, auto);
}


/* 커스텀 내지가 적용되었을 때 기존 하드코딩 배경 제거 */
.notepad-editor-area.naeji-applied::before,
#naejiCanvas::before {
    display: none !important;
}

/* 내지 스튜디오 캔버스의 하드코딩 가로선(background-image) 강제 제거 */
#naejiCanvas {
    background-image: none !important;
}

/* 고정 너비 모드 활성화 시 (내지 속성 canvas_w 기준, 기본 1210px) */
.notepad-container.is-fixed-width {
    justify-content: flex-start;
}

.notepad-container.is-fixed-width .notepad-left-content {
    flex: 0 0 var(--naeji-canvas-w, 1210px) !important;
    max-width: var(--naeji-canvas-w, 1210px) !important;
}

.notepad-editor-area::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80px;
    width: 2px;
    background-color: rgba(255, 99, 132, 0.2);
    z-index: 1;
    pointer-events: none;
}

.note-title-wrapper {
    position: relative;
    flex-shrink: 0;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.95);
    /* 내지 배경과 조화롭게 0.95로 투명도 미세부여 */
    border-bottom: 2px solid #aec2d4;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    z-index: 2;
    display: flex;
    align-items: center;
    padding-left: 45px;
    padding-right: 20px;
}

/* 우측 페이지 네비게이터 */
.page-navigator {
    width: 220px;
    min-width: 220px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    position: sticky;
    top: 60px;
}

/* 우측 사이드바 숨김 상태: 아이콘은 JS에서 chevron-left/right로 직접 교체 */

.page-navigator.collapsed {
    display: none !important;
}

.page-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #e2e8f0;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
}

.page-nav-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 페이지 섬네일 아이템 */
.page-item {
    position: relative;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.page-item:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.page-item.active {
    border-color: var(--skin-border, #0d6efd);
    opacity: 1;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}

.page-item-thumb {
    width: 100%;
    aspect-ratio: 1 / 1.414;
    /* A4 세로 비율 근사치 (기본) */
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
    transition: background-size 0.2s ease;
}

/* 가로형 내지 썸네일 */
.page-item-thumb.is-landscape {
    aspect-ratio: 1.414 / 1;
}

.page-item span.page-number {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.page-item span.page-date-label {
    background-color: #0d6efd;
    color: #fff;
}

/* 페이지 아이템 액션 버튼 그룹 (복사 + 삭제) */
.page-item-actions {
    position: absolute;
    top: -12px;
    right: -12px;
    display: none;
    flex-direction: column;
    gap: 5px;
    z-index: 5;
}

.page-item:hover .page-item-actions {
    display: flex;
}

.btn-delete-page,
.btn-copy-page {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    overflow: visible;
    padding: 0;
}

/* ::before 방식으로 아이콘 렌더링 (font-family 상속 이슈 완전 우회) */
.btn-delete-page::before,
.btn-copy-page::before {
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 1;
    speak: never;
    -webkit-font-smoothing: antialiased;
}

/* bi-copy unicode: \f64d */
.btn-copy-page::before {
    content: "\f64d";
}

/* bi-x unicode: \f62a */
.btn-delete-page::before {
    content: "\f62a";
    font-size: 18px;
}

.btn-delete-page {
    background-color: #dc3545;
    color: white;
}

.btn-copy-page {
    background-color: #6366f1;
    color: white;
}

.btn-delete-page:hover,
.btn-copy-page:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.btn-copy-page:hover {
    background-color: #4f46e5;
}

.btn-delete-page:hover {
    background-color: #b02a37;
}


/* 스킨 연동색 강제 설정용 */
.skin-dark .page-navigator {
    background-color: #2c3e50;
    border-color: #1a252f;
}

.skin-dark .page-nav-header {
    background-color: #34495e;
    color: white;
    border-color: #2c3e50;
}

.skin-dark .page-item-thumb {
    border-color: #7f8c8d;
}

.note-title-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

.note-title-input {
    width: 100%;
    font-size: 22pt;
    font-weight: 600;
    color: #2c3e50;
    border: none;
    outline: none;
    background: transparent;
    user-select: none;
    /* 라쏘 드래그 중 텍스트 선택 방지 */
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* 포커스(입력 모드) 상태에서는 텍스트 선택 허용 */
.note-title-input:focus {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

.note-title-input::placeholder {
    color: #ccc;
    font-weight: 400;
}

.note-element {
    position: absolute;
    font-size: var(--note-font-size, 16px);
    line-height: var(--note-line-height, 32px);
    color: var(--note-text-color, #2c3e50);
    z-index: 10;
    cursor: default;
    letter-spacing: var(--note-letter-spacing, normal);
}

.note-display {
    font-family: var(--note-font-family, 'NanumBarunGothic', sans-serif);
    white-space: pre-wrap;
    word-break: break-all;
    padding: 0;
    margin: 0;
    outline: 1px solid transparent;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    width: fit-content;
    max-width: calc(100% - 100px);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.note-display:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* 내지 배경이 적용된 에디터에서는 단락 hover 배경 제거 (배경이미지가 비치도록) */
.notepad-editor-area.naeji-applied .note-display:hover {
    background-color: transparent;
}

/* 내지 폼 숫자 입력: 네이티브 스피너 완전 제거 (커스텀 버튼으로 대체) */
#noteFormsOverlay input[type="number"],
#noteFormsOverlay input[type="text"][inputmode="numeric"] {
    -moz-appearance: textfield;
}
#noteFormsOverlay input[type="number"]::-webkit-outer-spin-button,
#noteFormsOverlay input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.note-display.is-selected {
    outline: 1px dashed #0d6efd;
    z-index: 15;
    cursor: move;
}

.note-display.is-pinned.is-selected {
    outline: 1px solid transparent !important;
    cursor: default;
}

.note-display.is-grouped.is-selected {
    outline: 1px dashed #198754;
}

.note-display.is-grouped.is-pinned.is-selected {
    outline: 1px solid transparent !important;
}

/* 위치 고정 단락: img 네이티브 드래그(복사) 완전 차단 */
.note-display.is-pinned img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.note-input {
    white-space: pre-wrap;
    word-break: break-all;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    outline: 1px dashed #0d6efd;
    min-width: 20px;
    width: fit-content;
    max-width: calc(100% - 100px);
    font-family: var(--note-font-family, 'NanumBarunGothic', sans-serif);
    line-height: var(--note-line-height, 32px);
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

/* 체크박스 디자인 최적화 (높이 및 줄바꿈 수직 정렬 교정) */
.note-display.is-checkbox-block {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

.inline-checkbox {
    margin: 0;
    padding: 0;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    vertical-align: top;
    cursor: pointer;

    /* 네이티브 렌더링 완전 제거 → 내부 배경 투명화 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* 커스텀 스타일: 투명 배경 + 테두리만 */
    background: transparent;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
}

/* 체크 상태: SVG 체크마크 (배경이미지, 투명 내부 유지) */
.inline-checkbox:checked {
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230d6efd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8l3.5 3.5 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}

.note-display.is-checkbox-block>span {
    display: inline-block;
    word-break: break-all;
}

.checked-text {
    text-decoration: line-through;
    color: #adb5bd !important;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2055;
}

#loadingOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 상단 고정 툴바 (Undo) */
.fixed-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #e9eef3 100%);
    border: 1px solid #c8d3e0;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    max-width: none;
    margin: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 4px 6px rgba(0, 0, 0, 0.02);
    position: relative;
    z-index: 5;
}

.fixed-editor-toolbar .btn-undo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
    border: 1px solid #cdd4dc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #495057;
    border-radius: 6px;
    padding: 6px 14px;
}

.fixed-editor-toolbar .btn-undo:hover {
    background: linear-gradient(180deg, #f8f9fa 0%, #e2e6ea 100%);
    color: #212529;
    border-color: #bbc1c7;
}

.fixed-editor-toolbar .btn-undo:active {
    background: #e2e6ea;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 공유 버튼 박스 스타일 hover / active */
#btnShareNote:hover {
    background: linear-gradient(135deg, #d0eaff 0%, #b8d9ff 100%) !important;
    border-color: #90c0f0 !important;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.2);
    transform: translateY(-1px);
}

#btnShareNote:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 3px rgba(21, 101, 192, 0.2);
}

/* 공유 버튼 "공유 중" 활성 상태 (has-shares 클래스) */
#btnShareNote.is-sharing {
    background: linear-gradient(135deg, #74c0fc 0%, #339af0 100%);
    border-color: #228be6;
    color: #fff;
    box-shadow: 0 2px 8px rgba(51, 154, 240, 0.45);
}

#btnShareNote.is-sharing:hover {
    background: linear-gradient(135deg, #4dabf7 0%, #228be6 100%) !important;
    border-color: #1971c2 !important;
    color: #fff;
    box-shadow: 0 4px 12px rgba(34, 139, 230, 0.5);
    transform: translateY(-1px);
}

#btnShareNote.is-sharing:active {
    background: linear-gradient(135deg, #339af0 0%, #1c7ed6 100%) !important;
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(21, 101, 192, 0.3);
}

/* 플로팅 툴바 (포토샵 툴박스 스타일) */
.editor-toolbar {
    position: absolute;
    z-index: 1040;
    display: none;
    background: #fff;
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e4e8;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    transition: opacity 0.2s ease;
    width: 125px;
    /* 사이드바 모드에서 1줄로 찌그러지는 현상 방지 및 3개 버튼 강제 유지 */
    max-width: 125px;
}

body[data-toolbar-mode="popup"] .editor-toolbar {
    cursor: grab;
}

body[data-toolbar-mode="popup"] .editor-toolbar:active {
    cursor: grabbing;
    transition: none;
}

body[data-toolbar-mode="sidebar"] .editor-toolbar {
    cursor: default;
    margin-right: 12px;
    position: fixed;
}

.editor-toolbar.active {
    display: flex;
}

.editor-toolbar .btn-tool {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: #495057;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.editor-toolbar .btn-tool:hover {
    background: #f0f2f5;
    color: #0d6efd;
}

.editor-toolbar .btn-tool.active {
    background: #eaf1fa;
    color: #0d6efd;
    font-weight: bold;
}

.editor-toolbar .divider {
    width: 100%;
    height: 1px;
    background: #e4e8ec;
    margin: 2px 0;
    flex-shrink: 0;
}

/* 다중 선택 툴바 확장 영역 */
.multi-tool-group {
    display: none;
    width: 100%;
}

.editor-toolbar.is-multi .multi-tool-group {
    display: grid;
    grid-template-columns: repeat(3, 32px);
    gap: 4px;
    align-items: center;
    justify-content: start;
}

/* 정렬 그룹 내 구분선: 전체 너비 */
.editor-toolbar.is-multi .multi-tool-group>.divider {
    grid-column: 1 / -1;
    width: 100%;
    height: 1px;
    background: #e4e8ec;
    margin: 2px 0;
}

/* URL 북마크 시각적 렌더링 */
.inline-url-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: text-bottom;
}

.inline-url-link {
    color: #4285f4;
    text-decoration: none;
    word-break: break-all;
}

.inline-url-link:hover {
    text-decoration: underline;
}

/* 다중 드래그 선택 올가미 스타일 */
.lasso-selection-box {
    position: absolute;
    border: 1px solid rgba(13, 110, 253, 0.8);
    background-color: rgba(13, 110, 253, 0.1);
    z-index: 9999;
    pointer-events: none;
}

/* 구글 로그인 커튼 화면 */
#loginOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #353535;
    /* 사용자 요청 배경색 */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

.login-box {
    background: #fff;
    padding: 40px 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    text-align: center;
    border: 1px solid #e0e4e8;
    max-width: 400px;
    width: 90%;
}

/* 구글 로그인 버튼 중앙 정렬 강제 */
.g_id_signin {
    display: flex;
    justify-content: center;
}


/* 테마 스킨 컬러 피커 UI */
.skin-option,
.bgcolor-option {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.skin-option:hover,
.bgcolor-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.skin-option.active,
.bgcolor-option.active {
    border-color: #0d6efd !important;
    outline: 3px solid rgba(13, 110, 253, 0.4);
}

/* -------------------------------------
 * 팝업 정렬 모드 (Modal Sort Mode)
 * ------------------------------------- */
.sortable-popup-item {
    cursor: grab;
    background-color: #fff;
    border: 1px solid #e0e4e8;
    margin-bottom: 6px;
    border-radius: 6px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    font-size: 14px;
}

.sortable-popup-item:active {
    cursor: grabbing;
}

.sortable-popup-item .drag-handle {
    margin-right: 12px;
    color: #ced4da;
}

.sortable-popup-item.sortable-ghost {
    opacity: 0.4;
    background-color: #e9ecef;
    border: 1px dashed #adb5bd;
}

/* 툴바 정렬 버튼 활성화 시 색상 변경 */
#toolSort.is-active {
    background-color: #e9ecef;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
    color: #0d6efd !important;
}

/* === 타이머 알람 시스템 시각 효과 === */
.timer-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #dc3545;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.4);
    pointer-events: none;
    z-index: 10;
}

@keyframes timerBlink {
    0% {
        background-color: rgba(220, 53, 69, 0.0);
        border-color: transparent;
    }

    50% {
        background-color: rgba(220, 53, 69, 0.2);
        border-color: #dc3545;
    }

    100% {
        background-color: rgba(220, 53, 69, 0.0);
        border-color: transparent;
    }
}

.note-display.is-ringing {
    animation: timerBlink 1s infinite alternate;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: background-color 0.3s;
}

.note-display.is-ringing .timer-badge {
    animation: bounce 0.2s infinite alternate;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-4px);
    }
}

/* 프로필 팝업 컬러 리셋 (사이드바 내부 상속으로 인한 스킨 컬러 오버라이드 방어) */
body[data-bs-theme] .sidebar .profile-popup * {
    color: #2c3e50 !important;
}

body[data-bs-theme] .sidebar .profile-popup .text-muted {
    color: #6c757d !important;
}

body[data-bs-theme] .sidebar .profile-popup #dispProfileImgLarge {
    background-color: #f1f3f5;
}

/* --------------------------------------------------------- */
/* 체크박스 객체: 체크박스를 항상 첫 줄 상단에 고정          */
/* --------------------------------------------------------- */
.is-checkbox-block {
    display: flex !important;
    align-items: flex-start !important;
    /* 세로 중앙이 아닌 상단 기준 정렬 */
    gap: 6px;
}

/* 체크 인풋 자체의 세로 위치를 첫 줄 베이스라인에 고정 */
.is-checkbox-block .inline-checkbox {
    flex-shrink: 0;
    /* 크기 축소 방지 */
    margin-top: 8px;
    /* 32px line-height에서 체크박스를 첫줄 중앙 근처로 보정 */
    cursor: pointer;
}

/* 텍스트 영역 - 32px 줄간격 상속 유지, 줄바꿈 지원 */
.is-checkbox-block span {
    flex: 1;
    line-height: inherit;
    /* .note-element의 32px line-height 상속 */
    word-break: break-word;
    white-space: pre-wrap;
    /* 엔터 줄바꿈 그대로 표시 */
}

/* 취소선 스타일 */
.checked-text {
    text-decoration: line-through;
    color: #adb5bd;
}

/* --------------------------------------------------------- */
/* 리스트(list) 객체: 그룹화 시 자동 넘버링 및 불릿 처리        */
/* --------------------------------------------------------- */
.is-list-block {
    display: flex !important;
    align-items: flex-start !important;
    padding-left: 20px !important;
    /* 기호가 들어갈 왼쪽 여백 확보 */
    position: relative;
}

.is-list-block .list-text {
    flex: 1;
    line-height: inherit;
    word-break: break-word;
    white-space: pre-wrap;
    min-width: 20px;
    /* 빈 블록 상태 방지 */
}

/* 숫자형(Number) 리스트 자동 넘버링 생성 (attr 활용) */
.is-list-block[data-list-type="number"]::before {
    content: attr(data-list-index) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: inherit;
    /* 테마 색상 상속 */
    width: 14px;
    text-align: right;
    opacity: 0.8;
}

/* 불릿형(Bullet) 리스트 기호 생성 */
.is-list-block[data-list-type="bullet"]::before {
    content: "•";
    position: absolute;
    left: 4px;
    top: 0;
    /* 라인하이트 기준 정렬을 위해 0으로 */
    font-weight: 900;
    font-size: 1.1em;
    color: inherit;
    /* 테마 색상 상속 */
    opacity: 0.8;
}

/* --------------------------------------------------------- */
/* 편집 모드(note-input)의 리스트 블록:                          */
/* contenteditable + display:flex 조합 시 브라우저가 익명 블록을  */
/* 생성하여 ::before가 중복 렌더링되는 버그 방지 → block으로 재정의 */
/* --------------------------------------------------------- */
.note-input.is-list-block {
    display: block !important;
}

/* Edge Scroll Panner Indicator */
.edge-scroll-indicator {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 200px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(9, 30, 66, 0.08) 100%);
    z-index: 9999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 15px;
    font-size: 32px;
    color: #6c757d;
    transition: background 0.2s, color 0.2s;
}

.edge-scroll-indicator:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(13, 110, 253, 0.2) 100%);
    color: #0d6efd;
}

/* Left Edge Scroll Panner Indicator */
.edge-scroll-indicator.left-edge {
    left: 250px;
    right: auto;
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, rgba(9, 30, 66, 0.08) 100%);
    justify-content: flex-start;
    padding-left: 15px;
    padding-right: 0;
}

.edge-scroll-indicator.left-edge:hover {
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, rgba(13, 110, 253, 0.2) 100%);
}

/* ---------------------------------------------------
 * 커스텀 컨텍스트 메뉴 (우클릭 팝업)
 * --------------------------------------------------- */
.custom-context-menu {
    position: absolute;
    z-index: 9999;
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
    padding: 6px;
    min-width: 168px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: ctxMenuIn 0.12s ease;
}
@keyframes ctxMenuIn {
    from { opacity:0; transform:scale(0.95) translateY(-4px); }
    to   { opacity:1; transform:scale(1)    translateY(0); }
}

.custom-context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-context-menu li {
    padding: 6px 12px;
    font-size: 12.5px;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 10px;
    transition: background-color 0.12s, color 0.12s;
    gap: 8px;
}

.custom-context-menu li i {
    font-size: 13px;
    color: #6b7280;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.custom-context-menu li:hover {
    background-color: #f0f4ff;
    color: #4f46e5;
}

.custom-context-menu li:hover i {
    color: #4f46e5;
}

/* 폴더 추가 아이템 강조 */
.custom-context-menu li#ctxMenuAddFolder i {
    color: #8faa2b;
}
.custom-context-menu li#ctxMenuAddFolder:hover {
    background-color: #f0f9e8;
    color: #5a7a00;
}
.custom-context-menu li#ctxMenuAddFolder:hover i {
    color: #5a7a00;
}

/* 취소 버튼 */
.custom-context-menu li#ctxMenuCancel {
    color: #9ca3af;
}
.custom-context-menu li#ctxMenuCancel:hover {
    background-color: #fef2f2;
    color: #ef4444;
}
.custom-context-menu li#ctxMenuCancel:hover i {
    color: #ef4444;
}

.custom-context-menu li.menu-divider {
    height: 1px;
    background: rgba(0,0,0,0.06);
    margin: 4px 0;
    padding: 0;
    cursor: default;
    border-radius: 0;
}
.custom-context-menu li.menu-divider:hover {
    background: rgba(0,0,0,0.06);
}

/* ---------------------------------------------------
 * 이미지 드래그 앤 드롭 툴팁 피드백
 * --------------------------------------------------- */
.drag-drop-tooltip {
    position: fixed;
    z-index: 10000;
    background: rgba(13, 110, 253, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    white-space: nowrap;
}

.drag-drop-tooltip i {
    margin-right: 0;
}

/* ---------------------------------------------------
 * 자료실 팝업: 고정 위치 + 고정 크기
 * - 브라우저 크기와 무관하게 항상 동일한 위치/크기로 표시
 * - left: 사이드바(280px) + 여백 20px = 300px
 * - top: 20px
 * - width: 800px (고정)
 * - height: 580px (고정)
 * --------------------------------------------------- */
#modalArchive .modal-archive-positioned {
    margin: 0 !important;
    position: fixed !important;
    left: 440px !important;
    top: 177px !important;
    width: 1190px !important;
    height: 580px !important;
    max-width: none !important;
    max-height: none !important;
}

#modalArchive .modal-archive-positioned .modal-content {
    width: 1190px !important;
    height: 580px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* ---------------------------------------------------
 * 드롭 삽입 방식 선택 레이어 메뉴
 * --------------------------------------------------- */
.drop-insert-menu {
    position: fixed;
    z-index: 10001;
    background: #ffffff;
    border: 1px solid #e0e4e8;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 6px 0;
    min-width: 200px;
    animation: dropMenuIn 0.15s ease-out;
}

@keyframes dropMenuIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(-6px);
    }

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

.drop-insert-item {
    padding: 11px 18px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.15s;
    border-radius: 6px;
    margin: 2px 4px;
}

.drop-insert-item i {
    font-size: 16px;
    color: #6c757d;
    width: 18px;
    text-align: center;
    transition: color 0.15s;
}

.drop-insert-item:hover {
    background-color: #eef3ff;
    color: #0d6efd;
}

.drop-insert-item:hover i {
    color: #0d6efd;
}

/* ---------------------------------------------------
 * 즐겨찾기 북마크 버튼 스타일
 * --------------------------------------------------- */
#btnToggleFavorite {
    position: absolute;
    top: -16px;
    /* 툴바 상단 테두리에 걸치게 설정 */
    left: 20px;
    background: transparent;
    border: none;
    font-size: 32px;
    /* 아이콘 크기 키움 */
    padding: 0;
    margin: 0;
    outline: none;
    box-shadow: none;
    color: #e2e6ea;
    /* 비활성 시 연한 회색 */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    line-height: 1;
    z-index: 10;
}

#btnToggleFavorite:hover {
    transform: translateY(2px);
    color: #ced4da;
}

#btnToggleFavorite.active {
    top: -12px;
    /* 활성화 시 살짝 아래로 당겨진 느낌 */
    color: #0d6efd;
    filter: drop-shadow(0 1px 3px rgba(13, 110, 253, 0.45));
}

body[data-bs-theme="blue-grad"] #btnToggleFavorite.active {
    color: #486afa;
}

body[data-bs-theme="green-grad"] #btnToggleFavorite.active {
    color: #2da44e;
}

body[data-bs-theme="red-grad"] #btnToggleFavorite.active {
    color: #e5534b;
}

body[data-bs-theme="purple-grad"] #btnToggleFavorite.active {
    color: #8250df;
}

body[data-bs-theme="orange-grad"] #btnToggleFavorite.active {
    color: #f77f00;
}

body[data-bs-theme="yellow-grad"] #btnToggleFavorite.active {
    color: #bfa054;
}

/* 페이지별 내지 변경 버튼 — 공유/캡처 버튼과 동일한 박스형 스타일, 왼쪽 절대 위치 */
#btnPageNaeji {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    padding: 6px 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
    border: 1px solid #cdd4dc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #495057;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    line-height: 1.5;
    z-index: 10;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
    font-weight: 500;
}

#btnPageNaeji:hover {
    background: linear-gradient(180deg, #f8f9fa 0%, #e2e6ea 100%);
    color: #212529;
    border-color: #bbc1c7;
    transform: translateY(-50%);
}

#btnPageNaeji:active {
    background: #e2e6ea;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-50%);
}

#btnPageNaeji.active {
    background: linear-gradient(180deg, #e8f0fe 0%, #d2e3fc 100%);
    border-color: #4285f4;
    color: #1a73e8;
    box-shadow: 0 1px 3px rgba(66, 133, 244, 0.3);
}



/* 내지 보관함 선택 효과 */
.naeji-card {
    transition: all 0.2s ease-in-out;
}

.naeji-card.border-primary {
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25) !important;
    transform: scale(1.02);
}

/* 좌측 하단 사이드바 푸터 (사용자 프로필 등) 하단 고정 */
.sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 280px;
    z-index: 50;
    background-color: var(--sidebar-bg);
    /* 배경색 상속으로 아이템들과 어울리게 */
    backdrop-filter: blur(5px);
    /* 뒤에 가려진 탭이 살짝 비치도록 고급스럽게 */
    box-sizing: border-box;
}

.note-list-container {
    padding-bottom: 80px !important;
    /* 푸터에 가려지지 않도록 하단 여백 추가 */
}

.modal-content .btn-close {
    filter: none !important;
}

/* ---------------------------------------------------
 * 개체 리사이저블 (jQuery UI) 커스텀 스타일
 * --------------------------------------------------- */
.is-image-block.ui-resizable {
    display: inline-block;
}

.is-image-block .ui-resizable-handle {
    position: absolute;
    display: none !important;
    background-color: rgba(13, 110, 253, 0.8);
    transition: background-color 0.2s;
    backdrop-filter: blur(2px);
    z-index: 90;
}

.is-image-block.is-selected .ui-resizable-handle,
.is-image-block.ui-resizable-resizing .ui-resizable-handle {
    display: block !important;
}

.is-image-block .ui-resizable-e {
    width: 6px;
    right: -3px;
    top: 50%;
    height: 30px;
    margin-top: -15px;
    border-radius: 4px;
    cursor: e-resize;
}

.is-image-block .ui-resizable-s {
    height: 6px;
    bottom: -3px;
    left: 50%;
    width: 30px;
    margin-left: -15px;
    border-radius: 4px;
    cursor: s-resize;
}

.is-image-block .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background-color: #0d6efd;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    cursor: se-resize;
}

.is-image-block img {
    max-width: none !important;
    /* 리사이징 시 강제 폭 제한 방지 */
}

/* ---------------------------------------------------
 * 동영상 블록 리사이저블 핸들 (이미지 블록과 동일 스타일)
 * --------------------------------------------------- */
.is-video-block.ui-resizable {
    display: inline-block;
}

.is-video-block .ui-resizable-handle {
    position: absolute;
    display: none !important;
    background-color: rgba(13, 110, 253, 0.8);
    transition: background-color 0.2s;
    backdrop-filter: blur(2px);
    z-index: 90;
}

.is-video-block.is-selected .ui-resizable-handle,
.is-video-block.ui-resizable-resizing .ui-resizable-handle {
    display: block !important;
}

.is-video-block .ui-resizable-e {
    width: 6px;
    right: -3px;
    top: 50%;
    height: 30px;
    margin-top: -15px;
    border-radius: 4px;
    cursor: e-resize;
}

.is-video-block .ui-resizable-s {
    height: 6px;
    bottom: -3px;
    left: 50%;
    width: 30px;
    margin-left: -15px;
    border-radius: 4px;
    cursor: s-resize;
}

.is-video-block .ui-resizable-se {
    width: 14px;
    height: 14px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    background-color: #0d6efd;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    cursor: se-resize;
}

/* 선택 시 비디오 블록 강조 테두리 + 이동 커서 */
.is-video-block.is-selected {
    outline: 2px solid rgba(13, 110, 253, 0.55);
    outline-offset: 2px;
    cursor: move;
}

/* 비선택 상태: 기본 커서 */
.is-video-block:not(.is-selected) {
    cursor: default;
}



/* 사이드바 노트 카운트 뱃지 색상 (라이트 테마 대비) */
.folder-note-count {
    color: #ffffff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="light"] .folder-note-count,
.theme-light .folder-note-count {
    color: #555555 !important;
    text-shadow: none !important;
}

/* -------------------------------------
 * 스마트 스크롤 (Smart Scroll) UI 및 애니메이션
 * ------------------------------------- */

/* 마찰력 게이지 UI */
#smartScrollUi {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 36px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.3s;
}

#smartScrollUi.top-gauge {
    top: 80px;
}

#smartScrollUi.bottom-gauge {
    bottom: 80px;
}

#smartScrollUi .gauge-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #106fbb, #208e8e);
    width: 0%;
    z-index: 1;
    transition: width 0.05s linear;
}

#smartScrollUi .gauge-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* 페이지 단위 부드러운 전환 트랜지션 */
.page-slide-up-out {
    animation: slideUpOut 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.page-slide-up-in {
    animation: slideUpIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.page-slide-down-out {
    animation: slideDownOut 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.page-slide-down-in {
    animation: slideDownIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes slideUpOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-80px);
        opacity: 0;
    }
}

@keyframes slideUpIn {
    from {
        transform: translateY(80px);
        opacity: 0;
    }

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

@keyframes slideDownOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(80px);
        opacity: 0;
    }
}

/* =========================================================================
 * 신규 특수 단락 모드 (새김글, 눈길글, 구분선, 포스트잇)
 * ========================================================================= */

/* 1. 새김글 (Quote) */
.note-display.type-quote,
.note-input.type-quote {
    color: #495057;
    font-style: italic;
    font-weight: 500;
    padding-left: 24px;
    box-sizing: border-box !important;
    width: max-content !important;
}

.note-display.type-quote::before,
.note-input.type-quote::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    background-color: var(--quote-bar-color, #0d6efd);
    border-radius: 2px;
}

/* 2. 눈길글 (Callout) */
.note-display.type-callout,
.note-input.type-callout {
    font-weight: 500;
    color: #212529;
    padding: 8px 16px 8px 36px;
    min-height: 40px;
    min-width: 60px;
    box-sizing: border-box !important;
    width: max-content !important;
}

.note-display.type-callout::before,
.note-input.type-callout::before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: 0px;
    left: 0;
    right: 0;
    background-color: var(--callout-bg, #f8f9fa);
    border: var(--callout-border-width, 1px) solid var(--callout-border-color, #dee2e6);
    border-radius: 8px;
    z-index: -1;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

.note-display.type-callout .callout-emoji,
.note-input.type-callout .callout-emoji {
    position: absolute;
    left: 10px;
    top: 6px;
}

.note-display.type-callout::before,
.note-input.type-callout::before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: 0px;
    left: 0;
    right: 0;
    background-color: var(--callout-bg, #f8f9fa);
    border: var(--callout-border-width, 1px) solid var(--callout-border-color, #dee2e6);
    border-radius: 8px;
    z-index: -1;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

.note-display.type-callout .callout-emoji,
.note-input.type-callout .callout-emoji {
    position: absolute;
    left: 10px;
    top: 6px;
    font-size: 1.15rem;
    font-style: normal;
    display: inline-block;
}

/* 3. 구분선 (Divider) */
.note-display.type-divider {
    height: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.note-display.type-divider .divider-line {
    width: 100%;
    border-top: 2px solid #ccc;
}

.note-display.type-divider.is-selected .divider-line {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.4);
}

/* 구분선 커스텀 리사이즈 핸들 (jQuery UI resizable 대신 순수 mousedown) */
.note-display.type-divider .divider-handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    display: none;
    /* 기본: 숨김 */
    cursor: ew-resize;
    z-index: 10;
}

.note-display.type-divider .divider-handle-w {
    left: -6px;
}

.note-display.type-divider .divider-handle-e {
    right: -6px;
}

/* 선택 상태에서만 원형 핸들 표시 */
.note-display.type-divider.is-selected .divider-handle {
    display: block;
    background: #ffffff;
    border: 2px solid #0d6efd;
}

/* 4. 포스트잇 (Post-it) - 완전 독립형 (그리드 면제) */
.note-display.type-postit,
.note-input.type-postit {
    padding: 2px 14px;
    background: #fff9b1;
    color: #333;
    min-width: 60px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;
    font-family: inherit;
    line-height: inherit;
    box-sizing: border-box !important;
    width: max-content !important;
}

/* 다크 테마 대응 */
[data-bs-theme="dark"] .note-display.type-callout::before,
.theme-dark .note-display.type-callout::before,
[data-bs-theme="dark"] .note-input.type-callout::before,
.theme-dark .note-input.type-callout::before {
    background-color: #2b3035;
    border-color: #495057;
}

[data-bs-theme="dark"] .note-display.type-postit,
.theme-dark .note-display.type-postit,
[data-bs-theme="dark"] .note-input.type-postit,
.theme-dark .note-input.type-postit {
    background: #cba83b;
    /* 다크테마 시 포스트잇 톤다운 */
    color: #111;
}

/* =========================================================================
 * 신규 상단 특수 단락 설정 툴바
 * ========================================================================= */
.top-settings-toolbar {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 16px;
    z-index: 10001;
    /* 플로팅 툴바보다 위 */
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    /* ★ 줄바꿈 금지 → 항상 1줄 */
    white-space: nowrap;
    width: max-content;
    /* ★ 내용 기준 너비 고정 */
    min-width: 710px;
    /* ★ 최소 너비 px 고정 (% 사용 안함) */
    transition: opacity 0.2s, transform 0.2s;
}

/* ── 2행 툴바 (이미지, 새김글, 눈길글, 포스트잇 등) ── */
.top-settings-toolbar.two-row {
    flex-wrap: wrap;
    width: 960px;
    min-width: 960px;
    align-items: flex-start;
    gap: 0;
    padding: 6px 36px 8px 14px; /* right padding으로 X 버튼 공간 확보 */
}

/* 2행 툴바에서 X 버튼을 우상단에 절대 고정 (3번째 행으로 내려가지 않도록) */
.top-settings-toolbar.two-row .btn-close-toolbar {
    position: absolute;
    top: 6px;
    right: 8px;
}

.top-settings-toolbar.two-row .toolbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px 0;
    flex-wrap: nowrap;
}

.top-settings-toolbar.two-row .toolbar-row + .toolbar-row {
    border-top: 1px solid #eee;
    padding-top: 6px;
    margin-top: 2px;
}

[data-bs-theme="dark"] .top-settings-toolbar.two-row .toolbar-row + .toolbar-row {
    border-top-color: #495057;
}

.top-settings-toolbar.dark-mode,
[data-bs-theme="dark"] .top-settings-toolbar {
    background: #2b3035;
    border-color: #495057;
    color: #f8f9fa;
}

.top-settings-toolbar .setting-group {
    display: flex;
    align-items: center;
    gap: 6px;
    border-right: 1px solid #eee;
    padding-right: 12px;
}

[data-bs-theme="dark"] .top-settings-toolbar .setting-group {
    border-right-color: #495057;
}

.top-settings-toolbar .setting-group:last-child {
    border-right: none;
    padding-right: 0;
}

.top-settings-toolbar label {
    font-size: 0.8rem;
    color: #666;
    margin: 0;
    font-weight: 600;
}

[data-bs-theme="dark"] .top-settings-toolbar label {
    color: #adb5bd;
}

.top-settings-toolbar select,
.top-settings-toolbar input[type="color"],
.top-settings-toolbar input[type="number"] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.85rem;
    height: 28px;
    background-color: #fff;
    color: #333;
}

[data-bs-theme="dark"] .top-settings-toolbar select,
[data-bs-theme="dark"] .top-settings-toolbar input[type="number"] {
    background-color: #212529;
    border-color: #495057;
    color: #f8f9fa;
}

.top-settings-toolbar input[type="color"] {
    padding: 0;
    width: 32px;
    cursor: pointer;
}

.top-settings-toolbar .btn-close-toolbar {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #999;
    cursor: pointer;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.top-settings-toolbar .btn-close-toolbar:hover {
    background: #f8f9fa;
    color: #333;
}

[data-bs-theme="dark"] .top-settings-toolbar .btn-close-toolbar:hover {
    background: #495057;
    color: #fff;
}

/* -----------------------------------------------------------------
 * 내지 배경·폼 오버레이 텍스트 선택 방지
 * 라쏘 드래그 시 내지 배경선, 폼 레이블, 차단구역 텍스트 등이
 * 파랗게 블록 선택되는 현상을 CSS 레벨에서 원천 차단
 * ----------------------------------------------------------------- */
#naejiCanvasOverlay,
#noteFormsOverlay,
#naejiCanvas,
#notepad>canvas,
#notepad>svg {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
}

/* 내지 폼 오버레이 내 실제 입력 필드는 텍스트 선택 허용 */
#noteFormsOverlay input,
#noteFormsOverlay textarea,
#noteFormsOverlay select {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
}