/*
 * editor.css
 * - 에디터/프리뷰 상단 바, 좌우 패널, 캔버스 외곽 등 "에디터 크롬" 전용 스타일을 정의한다.
 * - 콘텐츠 블록(text/button/image/video/list/section/form 등)의 모양은 builder.css(pb-*) + 인라인 스타일로만 제어하고,
 *   이 파일에서는 블록 내부 스타일을 절대 정의하지 않는다.
 */

/* 초기 상태에서는 별도 규칙 없이 파일만 생성해 두고,
 * 이후 에디터 전용 레이아웃/패널 스타일을 점진적으로 이동시킨다.
 */

/*
 * 에디터/프리뷰용 스크롤바 테마
 * - .pb-scroll 클래스를 사용하는 컨테이너에서 라이트/다크 테마에 맞는 스크롤바 색상을 적용한다.
 * - builder.css 의 .pb-scroll 기본값은 다크 톤이므로, 여기서는 Tailwind dark 모드(html.dark)를 기준으로
 *   라이트/다크 테마별로 명시적으로 override 한다.
 */

/* 라이트 모드: 밝은 배경에 어울리는 연한 스크롤바 */
html:not(.dark) .pb-scroll {
	scrollbar-width: thin;
	scrollbar-color: #94a3b8 #e5e7eb; /* thumb / track */
}

html:not(.dark) .pb-scroll::-webkit-scrollbar {
	width: 8px;
}

html:not(.dark) .pb-scroll::-webkit-scrollbar-track {
	background-color: #e5e7eb; /* slate-200 */
}

html:not(.dark) .pb-scroll::-webkit-scrollbar-thumb {
	background-color: #94a3b8; /* slate-400 */
	border-radius: 9999px;
	border: 2px solid #e5e7eb;
}

html:not(.dark) .pb-scroll::-webkit-scrollbar-thumb:hover {
	background-color: #64748b; /* slate-500 */
}

/* 다크 모드: 기존 builder.css 톤과 유사한 다크 스크롤바 */
html.dark .pb-scroll {
	scrollbar-width: thin;
	scrollbar-color: #1f2937 #020617; /* thumb / track */
}

html.dark .pb-scroll::-webkit-scrollbar {
	width: 8px;
}

html.dark .pb-scroll::-webkit-scrollbar-track {
	background-color: #020617; /* slate-950 */
}

html.dark .pb-scroll::-webkit-scrollbar-thumb {
	background-color: #1f2937; /* slate-800 */
	border-radius: 9999px;
	border: 2px solid #020617;
}

html.dark .pb-scroll::-webkit-scrollbar-thumb:hover {
	background-color: #374151; /* slate-700 */
}
