/**
 * Blockly 12.3.0 호환 폴백 CSS - 최소한의 스타일 정의
 * CDN에서 Blockly CSS를 로드할 수 없을 때 사용
 * Phase 2: 12.3.0 zelos 렌더러 및 최신 기능 지원
 */

/* 기본 툴박스 스타일 */
.blocklyToolboxDiv {
  background: #ddd !important;
  border-right: 1px solid #ccc !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: absolute !important;
  width: 240px !important; /* 기본 너비 보장 */
  z-index: 70 !important;
}

/* 플라이아웃 기본 보정 */
.blocklyFlyout {
  z-index: 80 !important;
}

.blocklyTreeRoot {
  padding: 4px 0 !important;
}

.blocklyTreeRow {
  cursor: pointer !important;
  padding: 3px !important;
  padding-left: 8px !important;
}

.blocklyTreeRow:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.blocklyTreeSelected {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* 워크스페이스 기본 스타일 (외곽선 제거, 배경 투명 유지) */
.blocklyWorkspace {
  background: transparent !important;
  border: none !important;
}

.blocklySvg {
  display: block !important;
}

/* 기본 블록 스타일 */
.blocklyPath {
  fill-rule: evenodd !important;
  stroke: #1f1f1f !important;
  stroke-width: 1px !important;
}

.blocklySelected {
  filter: url(#blocklySelectedGlowFilter) !important;
}

/* 드래그 스타일 */
.blocklyDragging {
  opacity: 0.7 !important;
}

/* 툴박스 카테고리 스타일 */
.blocklyTreeLabel {
  cursor: pointer !important;
  font-family: sans-serif !important;
  font-size: 11px !important;
  padding: 2px 5px !important;
  vertical-align: middle !important;
}

/* 스크롤바 스타일 */
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
  fill: #ccc !important;
  fill-opacity: 0.8 !important;
}

.blocklyScrollbarBackground {
  fill: transparent !important;
}

.blocklyScrollbarHandle {
  fill: #a2a2a2 !important;
}

/* 트래시캔 스타일 */
.blocklyTrash {
  cursor: pointer !important;
  fill: #888 !important;
}

.blocklyTrash:hover {
  fill: #000 !important;
}

/* 줌 컨트롤 스타일 */
.blocklyZoom {
  cursor: pointer !important;
  fill: #888 !important;
  font-family: sans-serif !important;
  font-size: 12px !important;
}

.blocklyZoom:hover {
  fill: #000 !important;
}

/* 텍스트/폰트/letter-spacing 강제 규칙은 부트 단계에서 주입됨
   (blockly-boot.js의 _injectMinimalCSS). 여기서는 중복을 제거한다. */

/* 더 세밀한 조건 섹션 라벨 위치 조정 */
/* 특정 라벨 위치 보정 제거 (셀렉터 호환성 문제 및 겹침 유발) */
/* 유지하려면 블록 정의 쪽에서 padding/spacing으로 조정 */

/* 연결점 스타일 */
.blocklyHighlightedConnectionPath {
  fill: none !important;
  stroke: #fc3 !important;
  stroke-width: 0.6px !important;
}

/* 12.3.0 zelos 렌더러 지원 */
.blocklyPathLight {
  fill: none !important;
  stroke-linejoin: round !important;
  stroke-width: 1px !important;
}

.blocklyPathDark {
  fill: none !important;
  stroke-linejoin: round !important;
  stroke-width: 1px !important;
}

/* 12.3.0 개선된 코멘트 스타일 */
.blocklyCommentForeignObject {
  position: relative !important;
}

.blocklyCommentTextarea {
  background-color: #fef49c !important;
  border: 0 !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 3px !important;
  resize: none !important;
  display: block !important;
  overflow: hidden !important;
}

/* 12.3.0 향상된 그리드 스타일
   - fill을 강제로 지정하면 Blockly가 주입하는 grid pattern이 사라집니다.
   - stroke만 지정하고 fill은 건드리지 않아야 격자 무늬가 보입니다. */
.blocklyMainBackground {
  stroke: #c6c6c6 !important;
  stroke-width: 1 !important;
  /* DO NOT set fill here so the injected url(#gridPattern) remains active. */
}

/* 12.3.0 터치 디바이스 지원 */
.blocklySelected > .blocklyPath {
  stroke: #fc3 !important;
  stroke-width: 0.6px !important;
}

/* 폴백 알림 스타일 (12.3.0 compatible) */
.blockly-fallback-notice {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #ffeaa7;
  color: #2d3436;
  padding: 4px 8px;
  border-radius: 3px; /* 12.3.0 둥근 모서리 */
  font-size: 11px;
  z-index: 1000;
  border: 1px solid #fdcb6e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 12.3.0 그림자 */
}

/* Full height 보장 (12.3.0 기준) */
.blocklyDiv {
  position: relative !important;
  height: 100% !important;
}

/* Mutator 기어 아이콘 스타일 - 12.3.0 지원 */
.blocklyIconGroup {
  fill: #666 !important;
  cursor: pointer !important;
}

.blocklyIconGroup:hover {
  fill: #000 !important;
}

.blocklyIconSymbol {
  fill: inherit !important;
}

/* Mutator 다이얼로그 스타일 */
.blocklyMutatorBackground {
  fill: #fff !important;
  stroke: #ddd !important;
  stroke-width: 1px !important;
}

.blocklyMutatorRoot {
  background: #f9f9f9 !important;
}

/* 텍스트/letter-spacing 관련 규칙은 부트 로더에서 관리 */

/* =======================================================
   Blockly HTML Input Field Styling
   - Fixes background color and text alignment issues
   - Ensures consistent styling with block elements
   ======================================================= */

/* HTML Input 필드 스타일링 - 배경색 및 텍스트 정렬 개선 */
.blocklyHtmlInput,
.blocklyInput,
input[data-blockly-input],
input.blocklyEditable,
.blocklyEditableText input {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  padding: 2px 4px !important;
  margin: 0 !important;

  /* 텍스트 스타일 - 블록과 일치하도록 설정 */
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #1f2937 !important;

  /* 레이아웃 정렬 개선 - 블록 텍스트와 정확히 맞춤 */
  box-sizing: border-box !important;
  vertical-align: baseline !important;
  text-align: center !important;
  height: 16px !important;
  min-width: 30px !important;

  /* 위치 조정 - 블록 텍스트와 동일한 baseline */
  position: relative !important;
  top: 0px !important;

  /* 포커스 스타일 */
  outline: none !important;
  box-shadow: none !important;
}

/* SVG 내의 foreignObject input 스타일링 */
foreignObject input,
.blocklyEditableText input,
.blocklyFieldTextInput input {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #1f2937 !important;
  box-sizing: border-box !important;
  vertical-align: baseline !important;
  text-align: center !important;
  height: 16px !important;
  min-width: 30px !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 포커스 상태 스타일링 */
.blocklyHtmlInput:focus,
.blocklyInput:focus,
input[data-blockly-input]:focus,
input.blocklyEditable:focus,
.blocklyEditableText input:focus,
foreignObject input:focus,
.blocklyFieldTextInput input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px #3b82f6 !important;
}

/* 숫자 입력 필드 특별 처리 */
input[type="number"].blocklyHtmlInput,
input[type="number"].blocklyInput,
input[type="number"][data-blockly-input],
input[type="number"].blocklyEditable {
  -moz-appearance: textfield !important;
  text-align: center !important;
  min-width: 30px !important;
}

/* 숫자 입력 필드 스피너 제거 */
input[type="number"].blocklyHtmlInput::-webkit-outer-spin-button,
input[type="number"].blocklyHtmlInput::-webkit-inner-spin-button,
input[type="number"].blocklyInput::-webkit-outer-spin-button,
input[type="number"].blocklyInput::-webkit-inner-spin-button,
input[type="number"][data-blockly-input]::-webkit-outer-spin-button,
input[type="number"][data-blockly-input]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* 드롭다운과 input 필드 간격 조정 */
.blocklyField .blocklyHtmlInput + .blocklyField,
.blocklyField .blocklyInput + .blocklyField {
  margin-left: 2px !important;
}

/* End Condition 블록 특화 input 스타일 */
.blocklyField[data-fieldname*="VALUE"] .blocklyHtmlInput,
.blocklyField[data-fieldname*="VALUE"] .blocklyInput {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  min-width: 40px !important;
  max-width: 80px !important;
  text-align: center !important;
}

/* WidgetDiv 내의 input 요소들 스타일링 */
.blocklyWidgetDiv input,
.blocklyWidgetDiv input[type="text"],
.blocklyWidgetDiv input[type="number"] {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  padding: 2px 4px !important;
  margin: 0 !important;

  /* 블록과 일치하는 폰트 설정 */
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  color: #1f2937 !important;

  /* 정렬 및 레이아웃 개선 */
  box-sizing: border-box !important;
  vertical-align: baseline !important;
  text-align: center !important;
  height: 16px !important;
  min-width: 30px !important;

  /* 위치 조정 */
  position: relative !important;
  top: 0px !important;

  /* 외곽선 제거 */
  outline: none !important;
  box-shadow: none !important;
}

/* WidgetDiv input 포커스 스타일 */
.blocklyWidgetDiv input:focus,
.blocklyWidgetDiv input[type="text"]:focus,
.blocklyWidgetDiv input[type="number"]:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px #3b82f6 !important;
}

/* WidgetDiv 숫자 입력 스피너 제거 */
.blocklyWidgetDiv input[type="number"]::-webkit-outer-spin-button,
.blocklyWidgetDiv input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.blocklyWidgetDiv input[type="number"] {
  -moz-appearance: textfield !important;
}

/* Blockly 드롭다운 메뉴 스타일링 개선 */
.blocklyDropDownDiv {
  z-index: 1000 !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.blocklyDropDownDiv .goog-menuitem {
  background-color: #ffffff !important;
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  padding: 4px 8px !important;
  color: #1f2937 !important;
  border: none !important;
}

.blocklyDropDownDiv .goog-menuitem-highlight {
  background-color: #e5f2ff !important;
  color: #1f2937 !important;
}

.blocklyDropDownDiv .goog-menuitem:hover {
  background-color: #f0f9ff !important;
  color: #1f2937 !important;
}

/* 드롭다운 화살표 배경 개선 */
.blocklyFieldDropdown {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  padding: 2px 6px 2px 4px !important;
  margin: 0 4px 0 2px !important;
  box-sizing: border-box !important;
}

/* 드롭다운 화살표 스타일 */
.blocklyFieldDropdown .blocklyDropdownArrow {
  fill: #6b7280 !important;
  stroke: none !important;
}

.blocklyFieldDropdown:hover .blocklyDropdownArrow {
  fill: #374151 !important;
}

/* Blockly Field 텍스트 정렬 개선 */
.blocklyText {
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  fill: #1f2937 !important;
}

/* Blockly Field 레이블과 Input 간격 조정 */
.blocklyField {
  vertical-align: baseline !important;
}

/* 특정 End Condition 필드 정렬 */
.blocklyFieldTextInput {
  vertical-align: baseline !important;
}

/* Blockly Zoom 대응 - Input 오버레이 크기 자동 조정 */
.blocklyWidgetDiv {
  position: absolute !important;
  z-index: 99999 !important;
}

/* 줌 레벨에 따른 input 크기 조정 */
.blocklyWidgetDiv input {
  transform-origin: top left !important;
}

/* SVG 좌표계와 HTML input 좌표계 동기화 */
.blocklyHtmlInput,
.blocklyInput,
.blocklyWidgetDiv input {
  /* 줌 스케일에 맞춰 자동 조정되도록 설정 */
  width: auto !important;
  min-width: 30px !important;
  max-width: 120px !important;
}

/* End Condition 블록 특화 - 줌 대응 */
.blocklyField[data-fieldname*="VALUE"] input {
  /* 줌 시에도 일정한 크기 유지 */
  width: auto !important;
  min-width: 40px !important;
  max-width: 80px !important;
}

/* 줌 시 텍스트 선명도 유지 */
.blocklyHtmlInput,
.blocklyInput,
.blocklyWidgetDiv input,
foreignObject input {
  image-rendering: crisp-edges !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}