/* blockly-page.css - PixiJS 관련 스타일 격리 */
/* BlocklyPage에서만 사용되는 PixiJS 전용 CSS */
/* 공통 컴포넌트(HeaderSection, MyStepListSection)는 영향을 받지 않음 */

/*
 * ═══════════════════════════════════════════════════════
 * PixiJS 캔버스 격리 전략
 * ═══════════════════════════════════════════════════════
 * 1. .blockly-page-wrapper 내부에서만 PixiJS 스타일 적용
 * 2. 공통 컴포넌트는 전역 CSS를 그대로 사용
 * 3. z-index 계층 구조를 명확히 정의
 */

/* ===== PixiJS 캔버스 및 관련 요소 격리 ===== */

/* PixiJS 캔버스 컨테이너 - 새로운 stacking context 생성 */
.blockly-page-wrapper #pixi-canvas {
  position: relative !important;
  isolation: isolate; /* 새로운 stacking context */
  z-index: 1;
}

/* 우측 패널 - PixiJS 영역 */
.blockly-page-wrapper #right-panel {
  position: relative !important;
  isolation: isolate;
  z-index: 1;
}

/* ===== PixiJS Overlay Input 스타일 ===== */

/* html-overlay.js가 생성하는 input 요소 */
.blockly-page-wrapper .pixi-overlay-input {
  position: absolute !important;
  z-index: 100000 !important; /* PixiJS context 내에서 최상위 */
  /* 다른 스타일은 html-overlay.js에서 동적으로 설정됨 */
}

/* ===== 좌측 패널 보호 (PixiJS 영향 완전 차단) ===== */

/* 좌측 패널은 PixiJS와 완전히 격리 */
.blockly-page-wrapper #left-panel {
  position: relative !important;
  z-index: 10 !important;
  isolation: isolate; /* 별도의 stacking context */
}

/* 좌측 패널 내부 요소들은 PixiJS CSS 영향 완전 차단 */
/* 단, 검색창 아이콘 컨테이너(.absolute)는 transform 허용 */
.blockly-page-wrapper #left-panel *:not(.relative > .absolute),
.blockly-page-wrapper #left-panel button {
  /* PixiJS가 설정한 transform 제거 */
  transform: none !important;
  /* PixiJS 버튼 스타일 차단 */
  box-shadow: none !important;
}

/* 좌측 패널의 버튼은 원래 스타일 유지 */
.blockly-page-wrapper #left-panel button {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  transition: opacity 0.2s ease !important;
}

/* ===== HeaderSection 보호 (드롭다운 포함) ===== */

/* HeaderSection 전체 보호 */
.blockly-page-wrapper .header-section {
  position: relative !important;
  z-index: 50 !important;
  isolation: isolate;
}

/* HeaderSection 내 드롭다운 메뉴 버튼 보호 (px-5 py-3 유지) */
.blockly-page-wrapper .header-section button {
  /* PixiJS 버튼 스타일 완전 차단 */
  padding: 0.75rem 1.25rem !important; /* py-3 px-5 = 12px 20px */
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.2s ease !important;
}

/* 드롭다운 메뉴 버튼 보호 (Tailwind 스타일 유지) */
.blockly-page-wrapper .header-section button:hover {
  transform: none !important;
}

/* ===== 검색창 및 아이콘 보호 ===== */

/* 검색창 input 보호 (pl-3 pr-10 py-2 유지) */
.blockly-page-wrapper #left-panel input[type="text"] {
  padding: 0.5rem 2.5rem 0.5rem 0.75rem !important; /* py-2 pr-10 pl-3 */
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  border: 1px solid #E6E8EA !important; /* border-Gray-20 */
}

/* 검색창 아이콘 컨테이너 보호 (right-2 top-1/2 -translate-y-1/2) */
.blockly-page-wrapper #left-panel .relative > .absolute {
  position: absolute !important;
  right: 0.5rem !important; /* right-2 */
  top: 50% !important; /* top-1/2 */
  transform: translateY(-50%) !important; /* -translate-y-1/2 - 수직 중앙 정렬 */
}

/* clear 버튼 보호 (RecipeListSection과 MyStepListSection 모두 적용) */
.blockly-page-wrapper #left-panel .clear-search-btn,
.blockly-page-wrapper #left-panel .absolute button {
  padding: 0.25rem !important; /* p-1 */
  border-radius: 0.25rem !important;
  box-shadow: none !important;
  background-color: transparent !important;
  border: none !important;
}

/* clear 버튼 hover 효과 유지 */
.blockly-page-wrapper #left-panel .clear-search-btn:hover,
.blockly-page-wrapper #left-panel .absolute button:hover {
  background-color: #fef2f2 !important; /* hover:bg-red-50 */
  transform: none !important;
}

/* ===== Z-Index 계층 구조 ===== */

/*
 * Z-Index 계층 (낮음 → 높음):
 * 1. PixiJS 캔버스: z-index: 1
 * 10. 좌측 패널: z-index: 10
 * 50. 헤더: z-index: 50
 * 10001. Toast: z-index: 10001
 * 100000. PixiJS Overlay: z-index: 100000 (캔버스 내부에서만)
 */

/* 헤더 - 중간 레벨 */
.blockly-page-wrapper .header-section {
  position: relative !important;
  z-index: 50 !important;
}

/* MyStepList - 좌측 패널 내부 */
.blockly-page-wrapper .mystep-list-section {
  position: relative !important;
  z-index: 5 !important;
}

/* ===== 버튼 스타일 보호 ===== */

/* 좌측 패널의 버튼은 hover 효과 유지 */
.blockly-page-wrapper #left-panel button {
  /* PixiJS가 추가한 transform 제거 */
  transform: none !important;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.blockly-page-wrapper #left-panel button:hover {
  /* Tailwind hover 효과 유지 */
  transform: none !important;
}

/* ===== Resize Handle 보호 ===== */

/* 리사이즈 핸들은 PixiJS와 무관 */
.blockly-page-wrapper .resize-handle-horizontal {
  position: relative !important;
  z-index: 20 !important;
  cursor: col-resize !important;
}

/* ===== Toast Container (최상위) ===== */

/* Toast는 모든 것 위에 표시 */
.blockly-page-wrapper .toast-container {
  position: fixed !important;
  z-index: 10001 !important;
}

/* ===== PixiJS 초기화 중 표시 ===== */

/* WorkspaceContainer의 로딩 상태 */
.blockly-page-wrapper .workspace-loading {
  z-index: 100 !important;
}

/* ===== 디버그용 (개발 중에만 사용) ===== */

/*
.blockly-page-wrapper #left-panel {
  outline: 2px solid red !important;
}

.blockly-page-wrapper #right-panel {
  outline: 2px solid blue !important;
}
*/