body, html { 
    margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #f0f0f0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    
    /* 💡 [iOS 완벽 방어] 사파리 특유의 고무줄처럼 늘어나는 바운스 스크롤 및 '당겨서 새로고침'을 원천 차단합니다. */
    overscroll-behavior: none; 
    /* 구버전 iOS를 위한 렌더링 최적화 속성 */
    -webkit-overflow-scrolling: auto; 
}

#board { display: block; width: 100vw; height: 100vh; touch-action: none; background-color: #ffffff; cursor: crosshair; display: none; }

/* 툴바 축소/확장 애니메이션 및 스타일 */
#toolbar-wrapper { 
	position: absolute; 
	top: 20px; 
	left: 50%; 
	transform: translateX(-50%); 
	z-index: 2000; 
	max-width: 90vw; 
	display: none; 
	border-radius: 30px; 
	box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
	background: rgba(255, 255, 255, 0.95); 
	overflow: hidden; 
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 신규 추가됨 */
}

#toolbar-wrapper.minimized {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important; /* 동그란 버튼 모양으로 변경 */
	padding: 0 !important;
	overflow: hidden;
	cursor: pointer;
	/* [터치 멈춤 완벽 방어] 래퍼 자체의 브라우저 개입 및 선택 블록 차단 */
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

#toolbar-wrapper.minimized #toolbar-content {
	display: none !important; /* 툴바 내용물 숨김 */
}

#toolbar-wrapper.minimized #toolbar-mini-icon {
	display: flex !important; /* 미니 아이콘 표시 */
}

#toolbar-mini-icon {
	display: none;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	background: transparent;
	border: none;
	cursor: pointer;
	touch-action: none;
}
#toolbar { display: flex; align-items: center; gap: 6px; padding: 10px 15px; overflow-x: auto; white-space: nowrap; width: 100%; -ms-overflow-style: none; scrollbar-width: none; }
#toolbar::-webkit-scrollbar { display: none; }

.scroll-shadow { position: absolute; top: 0; bottom: 0; width: 64px; pointer-events: none; z-index: 11; opacity: 0; transition: opacity 0.3s ease; }
.scroll-shadow.left { left: 0; background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
.scroll-shadow.right { right: 0; background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }

.divider { width: 2px; height: 24px; background-color: #e0e0e0; margin: 0 4px; border-radius: 1px; }

.tool-btn { background: none; border: none; padding: 8px 12px; font-size: 15px; font-weight: bold; color: #444; cursor: pointer; border-radius: 15px; transition: all 0.2s ease; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.tool-btn:hover { background-color: #f1f3f5; }
.tool-btn.active { background: #007BFF; color: white; }
.tool-btn.active:hover { background: #0056b3; }

/* 💡 [신규] Split Button UI (스플릿 버튼) 스타일 */
.split-tool-btn { display: flex; align-items: center; background: none; border-radius: 15px; transition: all 0.2s ease; white-space: nowrap; font-size: 15px; font-weight: bold; color: #444; margin: 0 2px; }
.split-tool-btn.active { background: #007BFF; color: white; }
.split-tool-btn:hover:not(.active) { background-color: #f1f3f5; }

.split-main { background: none; border: none; padding: 8px 4px 8px 12px; font-size: inherit; font-weight: inherit; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 5px; outline: none; border-radius: 15px 0 0 15px; transition: background 0.2s; }
.split-arrow { background: none; border: none; padding: 8px 10px 8px 6px; font-size: 12px; color: inherit; cursor: pointer; outline: none; display: flex; align-items: center; border-radius: 0 15px 15px 0; transition: background 0.2s; }
.split-main:hover, .split-arrow:hover { background-color: rgba(0,0,0,0.05); }
.split-tool-btn.active .split-main:hover, .split-tool-btn.active .split-arrow:hover { background-color: rgba(255,255,255,0.15); }

.palette-group { display: flex; align-items: center; gap: 10px; margin: 0 4px; }
/* 👇 [수정됨] 색상 팔레트를 표준 사각형 형태로 변경  */
input[type="color"] { border: 1px solid #999; border-radius: 2px; cursor: pointer; padding: 0; background: transparent; width: 24px; height: 24px; }

#status-bar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); color: #ffffff; padding: 3px 9px; border-radius: 20px; font-size: 13px; font-weight: 500; z-index: 10; white-space: nowrap; display: none; align-items: center; gap: 0px; }
.status-btn { position: relative; cursor: pointer; padding: 1px 3px; border-radius: 12px; transition: background 0.2s ease; display: inline-block; }
.status-btn:hover { background: rgba(255, 255, 255, 0.2); }
#zoom-select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* 👇 [신규 추가] 플로팅 툴바 전용 스타일 및 모바일 가로 스크롤 적용 */
#floating-toolbar {
	position: absolute;
	z-index: 1000;
	background: #ffffff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	padding: 4px 8px;
	gap: 2px;
	align-items: center;
	transform: translate(-50%, -15px);
	
	/* 모바일 최적화 (가로 폭 제한 및 스크롤) */
	max-width: 90vw;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch; /* 💡 [신규] iOS/안드로이드 터치 스크롤 부드러움 및 선명도 가속 */
	
	/* 스크롤바 숨기기 */
	-ms-overflow-style: none; /* IE/Edge */
	scrollbar-width: none; /* Firefox */
	
	/* 💡 [수정] 터치 스크롤 중 가상 클래스(:hover) 이탈로 인한 0.3 반투명 뭉개짐 원천 차단 */
    opacity: 0.95;
    transition: opacity 0.2s ease-in-out;
	-webkit-font-smoothing: antialiased; /* 💡 [신규] 폰트 및 아이콘 서브픽셀 뭉개짐 방지 */
	will-change: transform, scroll-position; /* 💡 [신규] 하드웨어 가속 유도로 스크롤 중 렌더링 선명도 유지 */
}

/* 마우스를 올리거나 터치하면 100% 완전 선명 */
#floating-toolbar:hover,
#floating-toolbar:active,
#floating-toolbar:focus-within {
    opacity: 1.0;
}

#floating-toolbar::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

/* 스크롤 시 우측 끝이 화면에 잘리는 현상을 막기 위한 가상 여백 생성기 */
#floating-toolbar::after {
    content: '';
    display: block;
    min-width: 8px; /* 왼쪽 패딩(8px)과 동일한 크기의 여백을 강제로 확보합니다. */
    height: 1px;
}

/* 플로팅 툴바 전용 버튼  스타일 */
.float-btn {
	background: transparent;
	border: none;
	border-radius: 6px; /* 모서리 약간 더 둥글게 조절 가능 */
	font-size: 18px;
	cursor: pointer;
	padding: 4px 6px; /* 💡 상하/좌우 여백을 줄여 밀도감 있게 변경 */
	color: #444;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.float-btn:hover {
	background-color: #f1f3f5; /* 마우스를 올렸을 때 은은한 배경색 */
}
.float-btn:active {
	background-color: #e2e6ea; /* 클릭(터치)했을 때 조금 더 진한 배경색 */
}

/* 👇 [신규 추가] 빠른 색상 선택(스와치) 버튼 스타일 */
.color-swatch {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid #ddd;
	cursor: pointer;
	padding: 0;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
	flex-shrink: 0;
}
.color-swatch:hover {
	transform: scale(1.15);
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	border-color: #999;
}

.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 1; transition: opacity 0.2s ease; touch-action: none; }
.modal-overlay.hidden { display: none; opacity: 0; pointer-events: none; }
.modal-content { background: #fff; padding: 25px 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); text-align: center; width: 90%; max-width: 350px; max-height: 80vh; overflow-y: auto; position: relative; transform: scale(1); transition: transform 0.2s ease; touch-action: auto; box-sizing: border-box; }
.modal-overlay.hidden .modal-content { transform: scale(0.9); }
.modal-content.large { max-width: 650px; text-align: left; }
.modal-close { position: absolute; top: 15px; right: 15px; border: none; background: none; font-size: 20px; color: #666; cursor: pointer; }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.modal-btn { padding: 12px 20px; border: none; border-radius: 10px; font-size: 15px; font-weight: bold; cursor: pointer; transition: background 0.2s; flex: 1; }
.modal-btn.cancel { background: #f1f3f5; color: #444; }
.modal-btn.cancel:hover { background: #e2e6ea; }
.modal-btn.confirm { background: #007bff; color: white; }
.modal-btn.confirm:hover { background: #0056b3; }
.modal-btn.danger { background: #ff4757; color: white; }
.modal-btn.danger:hover { background: #ff6b81; }
#pin-input { width: 100%; padding: 15px; font-size: 28px; font-weight: bold; text-align: center; letter-spacing: 8px; border: 2px solid #ddd; border-radius: 8px; margin-bottom: 5px; box-sizing: border-box; }
#pin-input:focus { border-color: #007bff; outline: none; box-shadow: 0 0 8px rgba(0,123,255,0.2); }
#modal-message { margin: 0 0 15px 0; font-size: 16px; color: #333; line-height: 1.5; word-break: keep-all; }

.help-btn { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background-color: #ffffff; border: 2px solid #ddd; font-size: 18px; cursor: pointer; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.15); transition: transform 0.2s, background-color 0.2s; margin-bottom: env(safe-area-inset-bottom); display: flex; justify-content: center; align-items: center; }
.help-btn:hover { transform: scale(1.1); background-color: #f8f9fa; }

.modal-body h3 { margin-top: 25px; margin-bottom: 12px; color: #007BFF; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.modal-body ul { padding-left: 20px; line-height: 1.6; }
.qr-section { text-align: center; background-color: #f8f9fa; border-radius: 8px; padding: 15px; margin-bottom: 20px; border: 1px dashed #ccc; }
.qr-image { width: 120px; height: 120px; border: 5px solid #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.qr-section p { font-size: 13px; color: #555; margin-top: 10px; margin-bottom: 0; font-weight: bold; }
.modal-footer { margin-top: 25px; padding-top: 15px; border-top: 1px dashed #eee; text-align: center; }
.modal-footer p { font-size: 13px; color: #888; line-height: 1.6; margin: 0; word-break: keep-all; }
.modal-footer strong { color: #555; }

/* 드롭다운 메뉴가 백링크나 태그 패널 등 다른 UI에 가려지지 않도록 z-index를 2000으로 높여 최상단으로 분리합니다. */
/* ✅ 텍스트 색상 선명화, 간격 최적화 및 카테고리 컬러 클래스 정립 */
.dropdown-menu { position: fixed; background: rgba(255, 255, 255, 0.98); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; flex-direction: column; padding: 8px; z-index: 2000; opacity: 1; transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(0); }
.dropdown-item { background: none; border: none; padding: 11px 16px; font-size: 14px; font-weight: 600; color: #212529; text-align: left; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 12px; white-space: nowrap; transition: background 0.15s ease; }
.dropdown-item:hover { background-color: #f1f3f5; }

/* 위험 동작 전용 (캔버스 전체 지우기) */
.dropdown-item.danger { color: #e03131 !important; }
.dropdown-item.danger i { color: #e03131 !important; }

/* 카테고리별 차분한 아이콘 포인트 컬러 */
.c-sync { color: #1971c2; }   /* P2P 전송: 딥 오션블루 */
.c-collab { color: #0ca678; } /* 실시간 협업: 에메랄드 그린 */

.dropdown-menu.hidden { display: none; opacity: 0; transform: translateY(-10px); pointer-events: none; }

/* 툴바 아이콘 전용 컬러 팔레트 및 정렬 */
.tool-btn i, .split-main i {
    font-size: 1.4em; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

/* 각 기능별 특징에 맞는 포인트 컬러 부여 */
.c-home   { color: #845EF7; } /* 보라: 안정감, 베이스 */
.c-file   { color: #FCC419; } /* 노랑: 폴더의 전통적 색상 */
.c-draw   { color: #339AF0; } /* 파랑: 펜, 그리기 (창의성) */
.c-shape  { color: #51CF66; } /* 초록: 도형, 안정적 구조 */
.c-insert { color: #FF6B6B; } /* 빨강: 강조, 삽입, 텍스트 */
.c-move   { color: #FF922B; } /* 주황: 액션, 화면 이동 */
.c-action { color: #868E96; } /* 회색: 보조 도구 (취소, 복사 등) */

/* [선제적 문제 해결] 버튼이 활성화(.active) 되었을 때는 
   배경이 파란색이 되므로 아이콘 색상을 흰색으로 강제 통일하여 가독성 확보 */
.tool-btn.active i, .split-tool-btn.active .split-main i {
    color: #ffffff !important;
}

#dashboard { display: flex; flex-direction: column; width: 100vw; height: 100vh; background-color: #f8f9fa; box-sizing: border-box; overflow-y: auto; padding: 20px; }
.dash-header { display: flex; justify-content: space-between; align-items: center; max-width: 1000px; margin: 0 auto 30px auto; width: 100%; }
.dash-title { font-size: 24px; font-weight: bold; color: #333; margin: 0; }
.btn-new-memo { background-color: #007BFF; color: white; border: none; padding: 10px 20px; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background 0.2s; box-shadow: 0 4px 10px rgba(0,123,255,0.3); }
.btn-new-memo:hover { background-color: #0056b3; }
.memo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; width: 100%; }
.memo-card { background: white; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; position: relative; display: flex; flex-direction: column; }
.memo-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.memo-thumb { height: 140px; background-color: #eef2f5; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #ccc; border-bottom: 1px solid #f0f0f0; }
.memo-info { padding: 15px; flex-grow: 1; }
.memo-name { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 5px; }
.memo-date { font-size: 12px; color: #888; }
.memo-more { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.9); border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); opacity: 0; transition: opacity 0.2s; }
.memo-card:hover .memo-more { opacity: 1; }
.memo-more:hover { background: #ffe6e6; color: #dc3545; }
.btn-exit { position: fixed; top: 20px; left: 20px; background: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.15); font-size: 20px; cursor: pointer; z-index: 100; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.btn-exit:hover { transform: scale(1.1); background-color: #f8f9fa;}

@media (max-width: 768px) {
	#toolbar-wrapper { top: 15px; border-radius: 25px; }
	#toolbar { padding: 8px 10px; gap: 2px; }
	.tool-btn { padding: 8px 8px; font-size: 16px; }
	.split-main { padding: 8px 2px 8px 8px; font-size: 16px; }
	.split-arrow { padding: 8px 8px 8px 4px; }
	.btn-text { display: none; }
	#pen-width { width: 70px; }
	.dash-header { flex-direction: column; gap: 15px; align-items: flex-start; }
	.btn-exit { top: 15px; left: 15px; width: 35px; height: 35px; font-size: 16px; }
	.palette-group { padding-left: 5px; margin-left: 2px; }

	/* 모바일 환경 미니맵 크기 대폭 축소 및 세로형(Portrait) 비율 적용 */
	#minimap-panel {
		width: 110px !important;
		height: 150px !important;
		bottom: 70px !important;
		right: 15px !important;
	}
	#btn-minimap-toggle {
		width: 35px !important;
		height: 35px !important;
		font-size: 30px !important;
		bottom: 70px !important;
		right: 15px !important;
	}

	/*  모바일 상태바 & 도움말 버튼 정렬 맞춤 */
	.help-btn { bottom: 20px; right: 15px; width: 36px; height: 36px; font-size: 16px; }
	
	/*  left/right 속성 충돌을 초기화하여 화면 정중앙에 배치하고, 여백을 최소화하여 컴팩트하게 만듭니다. */
	#status-bar { 
		left: 50%; 
		right: auto; 
		transform: translateX(-50%); 
		bottom: 20px; 
		padding: 4px 10px; 
		font-size: 12px; 
		gap: 2px; 
		width: max-content;
	}
	#status-bar .status-btn { 
		padding: 4px 6px; 
	}
}

/* [SEO & 접근성] 화면에는 안 보이지만 AI와 검색 로봇은 읽을 수 있는 숨김 처리 클래스 */
.seo-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*  웹 아이콘 폰트 공통 스타일 */
.tool-btn i, .split-main i, .dropdown-item i, .float-btn i, .btn-exit i {
    font-size: 1.3em;
    display: flex; /* 뒤에 특수문자나 띄어쓰기 없이 깔끔하게! */
    align-items: center;
    justify-content: center;
}

/* style.css 하단 필수 추가 확인 */
.c-home   { color: #845EF7; } 
.c-file   { color: #FCC419; } 
.c-draw   { color: #339AF0; } 
.c-shape  { color: #51CF66; } 
.c-insert { color: #FF6B6B; } 
.c-move   { color: #FF922B; } 
.c-action { color: #868E96; } 

.tool-btn.active i, .split-tool-btn.active .split-main i {
    color: #ffffff !important; /* 버튼 클릭 시 아이콘이 흰색으로 변하도록 방어 */
}

#tag-filter-list {
    justify-content: center; 
    gap: 4px !important; /* 태그 사이의 6px 간격을 4px로 좁혀서 밀도 있게 배치합니다. */
}

#tag-filter-list .tag-badge {
    white-space: nowrap; 
    word-break: keep-all; 
    text-align: center;
    padding: 4px 8px !important; /* 태그 내부의 뚱뚱한 12px 좌우 공백을 8px로 날렵하게 줄입니다. */
    margin: 0 !important; /* JS에서 부여한 중복 마진(3px)을 완벽히 제거합니다. */
    font-size: 12px !important; /* (선택사항) 텍스트 크기를 13px에서 12px로 살짝 줄이면 훨씬 세련되어 보입니다. */
}
#tag-filter-list .tag-badge:last-child {
    flex-grow: 1;
}
/* 태그 필터 뱃지 스타일 분리 */
.tag-badge {
    background: #e6f2ff;
    color: #007bff;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 13px;
    margin: 3px;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
}

/* 활성화(선택) 되었을 때의 상태 */
.tag-badge.active {
    background: #007bff;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.4);
}

/* 텍스트, 포스트잇, 체크리스트 입력창의 안내문(Placeholder) 디자인 최적화 */
#temp-text-input::placeholder,
#temp-sticky-input::placeholder,
#temp-checklist-input::placeholder {
    font-size: 0.8em; /* 실제 입력되는 글자 크기의 80%로 축소하여 세련미 강조 */
    font-weight: normal; /* 굵은 글씨 해제 */
    color: #a0a0a0; /* 부드러운 연회색으로 변경하여 실제 텍스트와 명확히 구분 */
    line-height: 1.5;
}