* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, "Apple SD Gothic Neo", sans-serif;
  color: #1c1c1e;
}

/* body를 세로 flex 컨테이너로 만들어서, 툴바가 줄바꿈되거나(반응형) 로그창을
   접었다 폈다 해도 #main이 항상 "남은 공간 전부"를 차지하게 한다. 예전에는
   #main height를 calc(100% - 46px - 160px)로 하드코딩해서 툴바/로그창 높이가
   조금만 달라져도(좁은 화면에서 툴바가 두 줄이 되는 등) 레이아웃이 깨졌다. */
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

#toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #e4e4e8;
  flex: 0 0 auto;
}
/* 그룹 자체는 절대 안에서 쪼개지지 않는다(white-space:nowrap) — 공간이
   부족하면 그룹째로 다음 줄로 내려간다. 예전엔 이게 없어서 좁은 화면에서
   라벨 글자가 세로로 한 글자씩 쪼개지는 문제가 있었다. */
#toolbar .group { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; }
#toolbar label { font-size: 12px; color: #8a8a92; white-space: nowrap; }
#toolbar input, #toolbar select {
  padding: 5px 8px;
  border: 1px solid #d8d8de;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
#toolbar button {
  padding: 6px 12px;
  border: 1px solid #d8d8de;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  transition: filter 0.1s ease;
}
#toolbar button.primary { background: #4f6bed; color: #fff; border-color: #4f6bed; }
#toolbar button.danger { background: #e5484d; color: #fff; border-color: #e5484d; }
#toolbar button:hover { filter: brightness(0.96); }
#toolbar .sep { width: 1px; align-self: stretch; background: #ececf0; }

.status { padding: 3px 10px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.status.idle { background: #eeeef1; color: #71717a; }
.status.running { background: #22c55e; color: #fff; }

/* position:relative — 노드 검색창(#node-search)이 이 영역 기준으로 뜬다. */
#main { display: flex; flex: 1 1 auto; min-height: 0; position: relative; }

#palette {
  width: 190px;
  padding: 10px;
  background: #fafafa;
  border-right: 1px solid #ececf0;
  overflow-y: auto;
  flex: 0 0 auto;
}
#palette-search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #d8d8de;
  border-radius: 7px;
  font-size: 13px;
  margin-bottom: 10px;
}
.palette-section-label { font-size: 11px; font-weight: 700; color: #9a9aa2; margin: 10px 2px 6px; text-transform: uppercase; letter-spacing: 0.02em; }
.palette-section-label:first-child { margin-top: 2px; }
.palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: #fff;
  border: 1px solid #e4e4e8;
  border-radius: 8px;
  cursor: grab;
  font-size: 13px;
}
.palette-item:hover { border-color: #c7c7d1; background: #f7f7fa; }
.palette-item:active { cursor: grabbing; }
.palette-icon {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.palette-icon svg { width: 13px; height: 13px; }
.palette-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#drawflow { flex: 1 1 auto; position: relative; background: #f3f4f7; background-image: radial-gradient(#dcdce2 1px, transparent 1px); background-size: 18px 18px; }

/* 비활성화된 노드: 실행 시 건너뛴다는 걸 한눈에 알 수 있게 흐리게 + 파선. */
.drawflow .drawflow-node.node-disabled { opacity: 0.45; border-style: dashed; }

/* 검색으로 찾은 노드 강조. */
.drawflow .drawflow-node.search-hit {
  outline: 3px solid #f5a623; outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(245, 166, 35, 0.2);
}

/* 캔버스 노드 검색창 — 툴바 아래 오른쪽에 떠 있는 작은 바. */
#node-search {
  position: absolute; top: 8px; right: 320px; z-index: 80;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; background: #fff; border: 1px solid #d8d8de;
  border-radius: 9px; box-shadow: 0 4px 16px rgba(20, 20, 40, 0.14);
}
#node-search.hidden { display: none; }
#node-search input { padding: 5px 8px; border: 1px solid #d8d8de; border-radius: 6px; font-size: 13px; width: 190px; }
#node-search input:focus { outline: none; border-color: #4f6bed; }
#node-search-count { min-width: 58px; text-align: center; }
#node-search button.small { padding: 3px 7px; font-size: 12px; border: 1px solid #d8d8de; border-radius: 5px; background: #fff; cursor: pointer; }
#node-search button.small:hover { background: #f7f7fa; }

/* 연결선 중간 "+" 삽입 버튼과 노드 고르기 목록. */
#btn-insert-node {
  position: absolute; z-index: 75; transform: translate(-50%, -50%);
  width: 22px; height: 22px; padding: 0; line-height: 1;
  border: 1px solid #4f6bed; border-radius: 50%; background: #fff; color: #4f6bed;
  font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 8px rgba(79, 107, 237, 0.3);
}
#btn-insert-node:hover { background: #4f6bed; color: #fff; }
#btn-insert-node.hidden, #insert-picker.hidden { display: none; }

#insert-picker {
  position: absolute; z-index: 76; transform: translateX(-50%);
  max-height: 260px; overflow-y: auto; padding: 5px;
  background: #fff; border: 1px solid #d8d8de; border-radius: 9px;
  box-shadow: 0 6px 22px rgba(20, 20, 40, 0.18); min-width: 150px;
}
.insert-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px;
  border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.insert-item:hover { background: #f0f3fe; }

/* 캔버스 우하단 컨트롤 (미니맵 + 줌). 속성 패널 폭(300px)만큼 띄운다. */
#canvas-controls {
  position: absolute; right: 314px; bottom: 14px; z-index: 70;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
#minimap {
  background: rgba(255, 255, 255, 0.94); border: 1px solid #d8d8de; border-radius: 9px;
  box-shadow: 0 4px 16px rgba(20, 20, 40, 0.12); overflow: hidden; line-height: 0;
}
#minimap-canvas { display: block; cursor: pointer; }
.zoom-bar {
  display: flex; align-items: center; gap: 4px; padding: 5px 7px;
  background: rgba(255, 255, 255, 0.94); border: 1px solid #d8d8de; border-radius: 9px;
  box-shadow: 0 4px 16px rgba(20, 20, 40, 0.12);
}
.zoom-bar button {
  min-width: 26px; padding: 3px 7px; font-size: 13px; border: 1px solid #d8d8de;
  border-radius: 6px; background: #fff; cursor: pointer; color: #444;
}
.zoom-bar button:hover { background: #f0f3fe; border-color: #4f6bed; color: #4f6bed; }
#zoom-level { font-size: 11px; color: #71717a; min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  /* 좁은 화면에선 속성 패널이 220px이라 그만큼만 띄우고, 미니맵은 숨긴다. */
  #canvas-controls { right: 232px; }
  #minimap { display: none; }
}

/* Shift+드래그로 여러 노드를 한 번에 고르는 마퀴(고무줄) 선택 상자. */
#selection-box {
  position: absolute; display: none; z-index: 60; pointer-events: none;
  border: 1px dashed #4f6bed; background: rgba(79, 107, 237, 0.08); border-radius: 2px;
}

/* Shift+클릭/드래그로 다중 선택된 노드 — Drawflow 자체 .selected(파란 테두리)와
   구분되도록 점선 파란 아웃라인을 살짝 띄워서 그린다. */
.drawflow .drawflow-node.multi-selected {
  outline: 2px dashed #4f6bed; outline-offset: 3px;
}

#properties {
  width: 300px;
  padding: 14px;
  background: #fafafa;
  border-left: 1px solid #ececf0;
  overflow-y: auto;
  flex: 0 0 auto;
}
#properties h3 {
  font-size: 12px; font-weight: 700; color: #9a9aa2; margin: 0 0 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding-bottom: 10px; border-bottom: 1px solid #ececf0;
}
#properties .hint { color: #9a9aa2; font-size: 12px; line-height: 1.6; }
#properties label { display: block; font-size: 12px; font-weight: 600; color: #555; margin: 14px 0 5px; }
#properties label:first-of-type { margin-top: 0; }
#properties input, #properties select {
  width: 100%; padding: 7px 9px; border: 1px solid #d8d8de; border-radius: 7px; font-size: 13px;
  background: #fff; color: #1c1c1e;
}
#properties input:focus, #properties select:focus { outline: none; border-color: #4f6bed; box-shadow: 0 0 0 3px rgba(79,107,237,0.12); }
#properties .row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
#properties .row input { flex: 1; }
#properties button.small {
  padding: 5px 10px; font-size: 12px; border: 1px solid #d8d8de; border-radius: 6px;
  background: #fff; cursor: pointer; color: #444;
}
#properties button.small:hover { border-color: #c7c7d1; background: #f7f7fa; }

/* 상단 액션 버튼(이 노드부터 실행 / 입출력 방향 뒤집기): 색을 넣어 눈에
   띄게 하고, 항상 나란히 붙어 있는 하나의 툴바처럼 보이게 묶는다. */
/* 타입별 설정 아래에 덧붙는 공통 섹션(오류 처리 등) — 구분선으로 분리. */
.props-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid #ececf0; }

#properties-actions { display: flex; gap: 6px; margin-bottom: 14px; }
#properties-actions button.small { flex: 1; padding: 7px 8px; white-space: nowrap; }
#btn-run-from-here { color: #16a34a; border-color: #bbf0cd; background: #f0fdf4; }
#btn-run-from-here:hover { background: #dcfce7; border-color: #86e0a8; }
#btn-flip-io { color: #4f6bed; border-color: #c7d1fb; background: #f0f3fe; }
#btn-flip-io:hover { background: #e0e7fd; border-color: #a8b8f8; }

/* 로그 패널: 예전엔 항상 화면 아래 160px를 고정으로 차지했다. 이제 기본은
   접혀 있고(height:0), 툴바의 "로그" 버튼으로만 펼친다(editor.js
   setupLogToggle 참고). 상태는 localStorage에 남겨 새로고침 후에도 유지. */
#log-panel {
  height: 0;
  overflow-y: auto;
  background: #1c1c1e;
  color: #ddd;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  padding: 0 12px;
  flex: 0 0 auto;
  transition: height 0.15s ease, padding 0.15s ease;
}
#log-panel.open { height: 220px; padding: 8px 12px; }
#log-panel .log-line { white-space: pre-wrap; }

/* ---- 노드 카드: n8n 스타일 — 컬러 아이콘 배지 + 제목/요약 ---- */
.drawflow .drawflow-node {
  min-width: 170px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #e4e4e8;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 20, 30, 0.06);
}
.drawflow .drawflow-node:hover { border-color: #c7c7d1; }
.drawflow .drawflow-node.selected { background: #fff; border-color: #4f6bed; box-shadow: 0 0 0 2px rgba(79,107,237,0.25); }
.drawflow .drawflow-node.node-active { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.3); }

/* 템플릿 참조 노드: 다른 저장된 플로우를 그 자리에서 실행하는 특수 노드라,
   일반 액션 노드와 한눈에 구분되도록 파선 테두리 + 참조색 배경을 준다. */
.drawflow .drawflow-node.template_ref {
  border-style: dashed;
  border-color: #b23fd1;
  background: rgba(178, 63, 209, 0.04);
}
.drawflow .drawflow-node.template_ref:hover { border-color: #9333a8; }

.node-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.node-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.node-icon svg { width: 18px; height: 18px; }
.node-text { min-width: 0; }
.node-text .node-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.node-text .node-sub {
  font-size: 11px; color: #8a8a92; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 165px;
}

/* 연결선: n8n처럼 중립 회색 얇은 곡선. 분기 노드(이미지 인식/조건/반복)의
   두 출력만 JS(updateBranchColors)가 --branch-color/--branch-marker를
   넣어서 초록/빨강으로 구분한다. */
.drawflow .connection .main-path {
  stroke-width: 2px;
  stroke: var(--branch-color, #b0b0b8);
  marker-end: var(--branch-marker, url(#df-arrow));
}

/* 벤더 기본 CSS(.drawflow .drawflow-node .input{background:#ff0})가 여기
   .input 규칙보다 클래스 3개짜리라 더 구체적이라, 셀렉터 뎁스를 맞춰주지
   않으면 이 배경색 지정이 무시되고 그 노란 기본값이 그대로 새어나온다
   (실제로 겪음 — output은 벤더가 별도로 안 건드려서 멀쩡했는데 input만
   계속 노랬음). */
.drawflow .drawflow-node .input, .drawflow .drawflow-node .output {
  background: #fff;
  border: 2px solid #b0b0b8;
}
.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover { border-color: #4f6bed; }

/* 출력이 2개인 노드(이미지 인식/조건/반복)는 각 포트 안에 의미를 적어서
   어느 쪽이 Y(매칭/참/반복)이고 어느 쪽이 N(매칭 안 됨/거짓/완료)인지
   선을 하나하나 따라가지 않아도 한눈에 보이게 한다. */
.drawflow-node .output {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #333;
}
.drawflow-node.image_match .output.output_1::after { content: "Y"; }
.drawflow-node.image_match .output.output_2::after { content: "N"; }
.drawflow-node.condition .output.output_1::after { content: "T"; }
.drawflow-node.condition .output.output_2::after { content: "F"; }
.drawflow-node.loop .output.output_1::after { content: "Y"; }
.drawflow-node.loop .output.output_2::after { content: "N"; }
/* 전부 찾아 반복: 각 항목(본문) / 완료 */
.drawflow-node.for_each_match .output.output_1::after { content: "각"; }
.drawflow-node.for_each_match .output.output_2::after { content: "끝"; }

/* 입출력 방향 뒤집기: 되돌아가는 연결선이 덜 지저분하게 보이도록 입력을
   오른쪽, 출력을 왼쪽으로 스왑. 실제 포트 DOM 위치를 Drawflow가 그대로
   읽어서 선을 그리므로 CSS로 위치만 바꿔도 연결선이 올바르게 따라온다.

   주의: .input/.output 점은 항상 자기 앵커 지점에서 "오른쪽으로" 자연
   흐름이 생긴다(문서 흐름 자체는 flex-direction과 무관). 그래서 원래
   왼쪽 모서리에 있는 .input은 -27px로 크게 밀어내야 밖으로 빠져나오고,
   원래 오른쪽 모서리에 있는 .output은 자연 흐름만으로 이미 밖이라
   -3px면 충분하다. 뒤집으면 두 앵커의 모서리가 서로 바뀌므로, 오프셋도
   좌우만 바꾸는 게 아니라 -27px/-3px 값 자체를 서로 맞바꿔야 한다. */
.drawflow .drawflow-node.io-flipped { flex-direction: row-reverse; }
.drawflow .drawflow-node.io-flipped .input { left: auto; right: -3px; }
.drawflow .drawflow-node.io-flipped .output { right: auto; left: -27px; }

/* ---- 메모(포스트잇)/그룹(프레임) ----
   실행 그래프와 무관한 캔버스 전용 요소. 크기/색은 JS(applyNoteGroupStyling)가
   인라인 style로 채워 넣으므로 여기선 구조만 잡는다. z-index를 일반
   노드(기본값)보다 낮춰서, 그룹 사각형 위에 놓인 실제 노드들이 항상
   클릭/드래그 가능하게 한다. */
.drawflow .drawflow-node.note,
.drawflow .drawflow-node.group {
  z-index: 1;
  overflow: hidden;
  min-width: 140px;
  min-height: 90px;
  border-radius: 10px;
  padding: 0;
  box-shadow: none;
}
.drawflow .drawflow-node.note { border-width: 1px; border-style: solid; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.drawflow .drawflow-node.group { border-width: 2px; border-style: dashed; }
.drawflow .drawflow-node.note .drawflow_content_node,
.drawflow .drawflow-node.group .drawflow_content_node { height: 100%; align-self: stretch; }

.sticky-note, .group-frame { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.sticky-note { padding: 8px; }
.sticky-note .sticky-text {
  flex: 1;
  outline: none;
  font-size: 13px;
  line-height: 1.4;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.group-frame .group-title {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  outline: none;
  cursor: text;
  background: rgba(0, 0, 0, 0.05);
}
.group-frame .group-body { flex: 1; cursor: move; }

.resize-handle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.35) 50%);
  border-radius: 2px;
}

.color-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ccc; padding: 0; cursor: pointer; }
.color-swatch:hover { border-color: #888; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal.hidden { display: none; }
.modal-content { background: #fff; padding: 16px; border-radius: 8px; max-width: 90vw; max-height: 90vh; overflow: auto; }
.modal-toolbar { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.modal-toolbar input { padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; }
.modal-toolbar button { padding: 5px 10px; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; }
#capture-canvas-wrap, #picker-canvas-wrap, #test-match-canvas-wrap { border: 1px solid #ccc; display: inline-block; }
#picker-canvas { cursor: crosshair; }
#test-match-results { margin-bottom: 8px; font-size: 13px; }
#test-match-results .result-row { padding: 4px 0; }
#test-match-results .result-row.matched { color: #1a9e4a; }
#test-match-results .result-row.not-matched { color: #c0392b; }
#capture-canvas { display: block; cursor: crosshair; }

/* ---- 좁은 화면(모바일 등) ---- */
@media (max-width: 720px) {
  #palette { width: 130px; }
  #properties { width: 220px; }
  #toolbar { gap: 6px 12px; padding: 6px 10px; }
  #toolbar input, #toolbar select { max-width: 110px; }
}

/* 로그 패널 머리말 — 상세 로그 토글. 켠 동안만 에이전트가 매 반복 로그를
   보내므로, 여기가 꺼져 있으면 네트워크로 아무것도 안 나간다. */
#log-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
#log-head label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
#log-head .hint { font-size: 11px; opacity: .7; margin: 0; }
@media (max-width: 640px) {
  #log-head .hint { display: none; }
}