/* ── 패널 (Layers) ── */
.panels {
  grid-area: panels;
  background: var(--panel);
  border-left: 1px solid var(--line);
  /* 기둥들이 **옆으로** 선다 (포토샵 구조 — 사장님 화면 #47~#51).
     기둥 안에서 상자들이 위아래로 쌓이는 것은 .dock-column 이 맡는다. */
  display: flex; flex-direction: row; align-items: stretch; min-height: 0;
}
.dock-column {
  display: flex; flex-direction: column; min-height: 0; position: relative;
  flex: 0 0 var(--panels-w, 272px); min-width: 0;
}
.dock-column + .dock-column { border-left: 1px solid var(--line); }
/* 접힌 기둥은 바가 대신 나온다 (띠 쪽) — 자리 자체를 비운다 */
.dock-column.col-off, .dock-column.col-empty { display: none; }
/* 기둥 머리 — » (이 기둥을 접기). 바의 « 와 짝 (#48 오른쪽 위) */
.col-head {
  flex: none; height: 18px; display: flex; align-items: center; justify-content: flex-end;
  padding: 0 4px; background: var(--panel); border-bottom: 1px solid var(--line);
}
/* 기둥에 상자가 하나뿐이면 그 상자가 기둥을 다 차지한다 —
   무리별 몫 규칙(--dock-split)이 하나짜리 기둥에는 뜻이 없다 */
.panels .dock-column > .panel-dock:first-of-type:last-of-type { flex: 1 1 auto; }
/* 무리 둘 — 위(색·글자)와 아래(레이어 갈래). 사이를 끌어 몫을 바꾼다.
   근거: Photoshop 의 오른쪽 도크가 무리로 쌓인다
   (docs/adobe-help/md/workspace-overview.md — "Panels ... can be grouped or stacked"). */
.panel-dock { display: flex; flex-direction: column; min-height: 0; }
/* 무리 **셋** (책 40쪽 그림 1.1). 위·가운데는 정해 둔 몫, 아래가 남은 자리를 다 먹는다.
   --dock-split 은 위 무리 몫, --dock-split2 는 가운데 무리 몫이다. */
.panel-dock[data-dock="a"] { flex: 0 0 calc(var(--dock-split, .22) * 100%); }
.panel-dock[data-dock="b"] { flex: 0 0 calc(var(--dock-split2, .30) * 100%); }
.panel-dock[data-dock="c"] { flex: 1 1 auto; min-height: 0; }
/* 아이콘 기둥 무리 d·e — 펼치면 둘이 자리를 반씩 나눈다 (사이 막대는 없다) */
.panel-dock[data-dock="d"], .panel-dock[data-dock="e"] { flex: 1 1 0; min-height: 0; }
/* 무리가 닫히면 남은 무리가 자리를 다 차지한다 (Photoshop 의 탭 그룹 닫기) —
   안 그러면 위 무리가 제 몫에 묶여 밑이 텅 빈다 */
.panels:has(.panel-dock[data-dock="c"].empty):has(.panel-dock[data-dock="b"].empty)
  .panel-dock[data-dock="a"] { flex: 1 1 auto; }
.panels:has(.panel-dock[data-dock="c"].empty) .panel-dock[data-dock="b"] { flex: 1 1 auto; }
.dock-body {
  display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
  overflow-y: auto; overflow-x: hidden;
}
/* 두 무리 사이 잡는 자리 */
/* 무리 사이 구분 막대 — 책 59쪽 「Bedienfeldhöhe ändern」 의 "어두운 가로 구분 막대".
   보이는 줄은 얇게 두되 **잡는 자리는 넉넉히** 준다. 6px 만 두었더니 4px 만 벗어나도
   안 잡혀서, 위 패널 단추줄 근처를 잡은 사장님이 "구현 안 된 것 같다" 고 하셨다
   (2026-09-01). 위아래 이웃을 덮지 않게 막대 자체를 키운다 — 덮으면 그 5px 안의
   단추가 안 눌린다. */
.dock-split {
  flex: none; height: 12px; cursor: ns-resize; background: none;
  display: flex; align-items: center;
}
.dock-split::before {
  content: ""; display: block; width: 100%; height: 4px;
  background: var(--line); opacity: .5;
}
.dock-split:hover::before { opacity: 1; background: var(--accent, #3d84ff); height: 6px; }
/* 탭이 늘어 268px 에 다 안 들어간다. 접히면 글자가 두 줄이 되어 못 읽으므로
   한 줄로 두고 넘치면 옆으로 밀어 본다 (≡ 단추는 늘 오른쪽 끝에 붙어 있다). */
/* 탭 이름 밑에 선을 안 긋는다 — 탭과 아래 판이 한 덩어리로 보여야 한다
   (사장님 지시 2026-08-31). 탭끼리는 좌·우 테두리로 이미 나뉜다. */
.panel-tabs {
  display: flex; align-items: stretch;
  /* 탭 줄은 **절대 안 눌린다.** flex 를 안 적어 두면 기본이 flex-shrink:1 이라,
     패널 안 내용이 길어 자리가 모자라면 탭 줄이 26 → 24px 로 찌그러졌다
     (실측 2026-09-01: 창 높이 620px 에서 색상 견본에 스크롤이 생기자 그랬다.
      사장님 지적 "왼쪽에 스크롤이 생기면 탭 세로 사이즈가 줄어든다"). */
  flex: none;
  /* 탭이 많으면 **가로로 지나간다**. 바로 아래 ≡ 주석이 원래 그렇게 적어 두었는데
     hidden 이라 스크롤이 안 되고, 탭이 min-width 까지 찌그러졌다 —
     탭 열한 개에서 폭이 20px 이 되어 "액" "컴" "문" 처럼 한 글자만 남았다
     (실측 2026-08-31, 사장님 화면). 원문 그림 어디에도 탭 이름이 한 글자로
     잘린 화면은 없다 (책 41쪽 그림 1.2 · 42쪽 그림 1.5 · 175쪽 그림 4.4). */
  overflow: hidden;
  background: var(--deep);   /* 탭 줄은 한 단 들어간 면 (사장님 그림 #424242) */
}
.panel-tabs::-webkit-scrollbar { display: none; }
/* 탭 줄 오른쪽 끝에 붙어 있는 ≡ (패널 메뉴).
   탭이 많아 줄이 넘치면 탭이 이 단추 뒤로 스크롤되어 지나간다 — 배경을 깔고
   왼쪽에 그늘을 줘야 탭 글자와 겹쳐 보이지 않는다.
   예전에는 background 를 두 번 적어 뒤엣것(none)이 이겨서 배경이 없었다. */
.panel-menu-btn {
  margin-left: auto; flex: none; position: sticky; right: 0; z-index: 2;
  background: var(--panel); border: none; color: var(--text-dim);
  font-size: 15px; cursor: pointer; padding: 2px 8px 2px 12px;
  box-shadow: -8px 0 8px -5px var(--panel);
}
.panel-menu-btn:hover { color: var(--text); }
.panel-menu { min-width: 200px; }
/* 다이나믹 텍스트 풀다운 — 아래 막대의 단추를 누르면 모양 넷이 뜬다 */
.dyn-wrap { position: relative; display: inline-flex; }
.dyn-pop {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 70; padding: 8px 10px 10px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.dyn-pop[hidden] { display: none; }
.dyn-title { color: var(--text-dim); font-size: 11.5px; margin-bottom: 8px; white-space: nowrap; }
.dyn-row { display: flex; gap: 4px; }
.dyn-shape {
  width: 26px; height: 26px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: var(--text); cursor: pointer;
}
.dyn-shape svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.dyn-shape:hover { background: var(--panel3, rgba(255, 255, 255, 0.08)); border-color: var(--line); }
.dyn-shape.on { background: var(--blue); color: #ffffff; border-color: var(--blue); }

/* 탭이 많아 줄이 모자라면 **안 켜진 탭만 줄여서 잘라 보이고, 켜진 탭은 이름이 다 보인다**
   (Photoshop 과 같다 — 사용자가 보낸 화면 2026-08-28).
   예전에는 옆으로 굴러가서, 켜진 탭이 화면 밖으로 밀려 안 보이는 일이 있었다. */
/* 탭마다 좌·우·위에 테두리를 둘러 어디까지가 한 탭인지 보이게 한다 (사장님 지시).
   아래는 안 긋는다 — 켜진 탭이 아래 판과 이어져 보여야 한다.
   테두리를 새로 두르면 탭 폭이 2px 늘어 줄이 넘칠 수 있어, 왼쪽 테두리는
   -1px 로 겹쳐 놓는다 (이웃 탭과 선 하나를 같이 쓴다). */
/* ── 스크롤 막대 ── 사장님 그림에서 오른쪽 12px 이 트랙이고 색은 #4a4a4a 다
   (내용이 짧아 손잡이는 안 보였다). 브라우저 기본 막대는 우리 테마와 따로 놀아
   흰 테가 지나가는 것처럼 보인다 — 색을 테마에 묶는다. */
.panels, .panel-body, .layer-list, .panel-scroll,
.props-body, .adjust-fields, .settings-form, .settings-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--panel2) var(--sunken);
}
.panels::-webkit-scrollbar, .panel-body::-webkit-scrollbar,
.layer-list::-webkit-scrollbar, .panel-scroll::-webkit-scrollbar,
.props-body::-webkit-scrollbar, .adjust-fields::-webkit-scrollbar,
.settings-form::-webkit-scrollbar, .settings-nav::-webkit-scrollbar {
  width: 12px; height: 12px;      /* 포토샵과 같은 굵기 */
}
.panels::-webkit-scrollbar-track, .panel-body::-webkit-scrollbar-track,
.layer-list::-webkit-scrollbar-track, .panel-scroll::-webkit-scrollbar-track,
.props-body::-webkit-scrollbar-track, .adjust-fields::-webkit-scrollbar-track,
.settings-form::-webkit-scrollbar-track, .settings-nav::-webkit-scrollbar-track {
  background: var(--sunken);
}
.panels::-webkit-scrollbar-thumb, .panel-body::-webkit-scrollbar-thumb,
.layer-list::-webkit-scrollbar-thumb, .panel-scroll::-webkit-scrollbar-thumb,
.props-body::-webkit-scrollbar-thumb, .adjust-fields::-webkit-scrollbar-thumb,
.settings-form::-webkit-scrollbar-thumb, .settings-nav::-webkit-scrollbar-thumb {
  background: var(--panel2); border-radius: 6px;
  border: 3px solid var(--sunken);   /* 안쪽으로 물려 손잡이가 가늘어 보인다 */
}
.panels::-webkit-scrollbar-thumb:hover, .panel-body::-webkit-scrollbar-thumb:hover,
.layer-list::-webkit-scrollbar-thumb:hover, .panel-scroll::-webkit-scrollbar-thumb:hover,
.props-body::-webkit-scrollbar-thumb:hover, .adjust-fields::-webkit-scrollbar-thumb:hover,
.settings-form::-webkit-scrollbar-thumb:hover, .settings-nav::-webkit-scrollbar-thumb:hover {
  background: var(--row-on);
}

/* 패널 글자 크기 — 원문 속성 패널 그림을 재서 맞췄다 (2026-08-31).
   한글 잉크 높이로 재면 원문은 속성 10px · 문자 11px · 단락 11px 이고,
   우리 글꼴에서는 **12px** 이 셋 중 둘을 정확히 맞춘다 (나머지 1px 차는 글꼴이 달라 난다).
   탭은 12.5px 로 커서 1px 컸고, 패널 줄(.tp-row)은 11.5px 로 1px 작았다. */
.panel-tab {
  /* 33px 은 너무 높았다 (사장님 지적) — 위아래 여백을 6px 으로 낮춘다.
     안 고른 탭은 --text-faint 다 (사장님 그림 #a0a0a0) — 이름표보다 더 물러난다 */
  /* 탭 글자는 패널 안 글자보다 한 단 작다 (사장님 지시 2026-08-31 "탭 안의 글자들을
     좀더 작게"). 앞서 12px 은 사장님이 주신 원문 속성 패널 그림을 한글 잉크 높이로
     재서 맞춘 값인데, 화면에서 보니 탭이 이름표치고 두툼했다. 11px 로 낮춘다 —
     탭 높이도 27 → 26px 이 된다. 패널 **안** 글자(.tp-row 등)는 12px 그대로다. */
  padding: 6px 9px; color: var(--text-faint); font-size: 11px;
  white-space: nowrap; display: flex; align-items: center; cursor: pointer;
  /* 좁아지면 줄어들되 **읽을 수 있는 데까지만** 줄어든다.
     1.6em 이면 한 글자만 남아 "액" "컴" "문" 처럼 무슨 탭인지 알 수 없었다
     (실측 2026-08-31: 탭 열한 개에서 폭 20px). 원문 그림 어디에도 탭 이름이
     한 글자로 잘린 화면은 없다 (책 41쪽 그림 1.2 · 42쪽 그림 1.5 · 175쪽 그림 4.4).
     줄어드는 것 자체는 남겨 둔다 — 탭 줄의 빈 자리(.tabs-spacer)가 무리를 통째로
     끄는 손잡이라, 안 줄이면 그 자리가 사라져 무리를 못 옮긴다.
     그래도 넘치면 줄이 가로로 지나가며 ≡ 뒤로 밀린다. */
  flex: 0 1 auto; min-width: 1.6em; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid transparent; border-bottom: 0;
  margin-left: -1px;
  /* 탭 사이 금은 **검정**이다 (사장님 지시 2026-09-02 "흰줄인데 검정줄로" —
     보내 준 포토샵 탭 줄 화면도 어두운 금이다). 전에는 흐린 글자색을 옅게 깔아
     밝은 금이었는데 흰 줄로 보였다. */
  border-color: rgba(0, 0, 0, .55);
  border-bottom-color: transparent;
  transition: background 90ms linear, color 90ms linear;
}
.panel-tab:first-child { margin-left: 0; }
/* 마우스를 올리면 살짝 떠 보인다 — 누를 수 있는 자리인지 알린다 */
.panel-tab:hover {
  background: color-mix(in srgb, var(--text-dim) 16%, transparent);
  color: var(--text);
}
/* 켜진 탭은 **패널 몸통과 같은 색**이다 — 그래서 판과 이어져 보인다.
   꺼진 탭은 한 단 들어간 --deep (사장님 그림: 켜짐 #535353 · 꺼짐 #424242). */
.panel-tab.on {
  color: var(--text); background: var(--panel);
  flex: 0 0 auto;            /* 켜진 것은 안 줄어든다 — 이름이 다 보여야 한다 */
  overflow: visible;
  border-top-color: var(--blue);
  z-index: 1; position: relative;
}
/* hidden 이 붙으면 실제로 사라져야 한다. display 를 지정한 요소는 브라우저 기본
   [hidden] 규칙을 이기므로(작성자 규칙 우선) 여기서 다시 눌러 준다.
   안 그러면 작업 내역 탭에 레이어 조작 줄이 그대로 남는다. */
.layer-controls[hidden], .lock-row[hidden], .layer-list[hidden],
.panel-actions[hidden], .history-list[hidden] { display: none; }
.path-list[hidden], .path-actions[hidden] { display: none; }

/* ── 문자·단락 패널 ── */
.text-panel { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.text-panel[hidden] { display: none; }
.tp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--text-dim); font-size: 12px;   /* 원문 속성 패널과 같게 (위 주석) */
}
.tp-num { display: inline-flex; align-items: center; gap: 4px; }
.tp-row .opt-num { width: 62px; }
.tp-row .opt-select { width: 92px; }
.tp-note { color: var(--text-dim); font-size: 10.5px; line-height: 1.5; margin: 6px 0 0; white-space: normal; }

/* ── 패스 패널 ── */
.path-list { flex: 1; overflow-y: auto; min-height: 0; }
.path-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.path-row:hover { background: var(--panel2); }
.path-row.on { background: rgba(61, 132, 255, 0.2); }
/* 작업 패스는 임시라 기울여 쓴다 (Photoshop 과 같다) */
.path-row.temp .path-name { font-style: italic; color: var(--text-dim); }
.path-thumb { width: 44px; height: 34px; border: 1px solid var(--line); border-radius: 2px; flex: none; }
.path-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path-rename {
  flex: 1; min-width: 0; background: var(--deep); border: 1px solid var(--blue);
  border-radius: 4px; color: var(--text); font: inherit; font-size: 12.5px; padding: 2px 6px;
}
.path-actions {
  border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 4px; padding: 2px 8px;   /* 레이어 막대와 같게 */
}
.path-actions button {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; padding: 1px 5px; border-radius: 4px;
  display: inline-flex; align-items: center;
}
.path-actions button:hover:not(:disabled) { background: var(--panel2); color: var(--text); }
.path-actions button:disabled { opacity: 0.35; cursor: default; }
.path-actions svg {
  width: 18px; height: 18px; fill: none;
  stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.modal.savepath-modal, .modal.makepath-modal { width: 280px; }
/* 찾기·혼합 모드·잠그기 **줄 자체는 몸통색**이고, 그 안의 **고르개만 파인다**.
   처음엔 줄을 파고 고르개를 올려 놨는데 **정반대였다** (사장님 지적 2026-08-31).
   사장님 그림: 줄 #535353 · 고르개 칸 #454545 */
.layer-controls {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--text-dim);
  background: var(--panel);
}
.layer-controls select, .lock-row select { background: var(--sunken); }
.layer-controls .unit { color: var(--text-dim); font-size: 12px; }
/* 블렌드 모드 목록이 길어도 패널 밖으로 밀지 않는다 */
.blend-select {
  flex: 1; min-width: 0;
  /* 고르개는 **파인 면**이다 (사장님 그림 #454545) — 올라온 면(--panel2)이 아니다 */
  background: var(--sunken); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); padding: 2px 6px; font: inherit; font-size: 12px;
}
/* 라벨을 좌우로 끌어 값 조절 (Photoshop 스크러비 슬라이더) */
.scrub-label {
  cursor: ew-resize; font-size: 12px; user-select: none;
  border-bottom: 1px dotted var(--text-dim);
}
/* 끌 수 있는 자리 — JS 가 실제로 끌리는 것만 이 이름을 붙인다 (CSS 로 어림잡으면
   커서는 ↔ 인데 안 끌리는 자리가 생긴다). 사장님 지시 2026-08-29 "구조로 박아줘". */
.scrub-hot { cursor: ew-resize; }

/* 글자로 된 라벨 대신 그림으로 된 손잡이 (크기 칸 앞). 끄는 것은 같다.
   그림에는 점선 밑줄이 어울리지 않아 지우고, 커서로만 "끌 수 있다" 를 알린다. */
.scrub-icon {
  display: inline-flex; align-items: center; border-bottom: none;
  color: var(--text-dim); padding: 0 1px;
}
.scrub-icon svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round;
}
.scrub-icon:hover { color: var(--text); }
.opacity-field { position: relative; display: inline-flex; align-items: center; gap: 3px; }
/* 혼합 모드 단추·불투명도 칸은 **파인 면**이다 (사장님 그림 #454545) —
   올라온 면(--panel2)으로 두면 줄보다 밝아져 반대로 보인다 */
.opacity-caret {
  background: var(--sunken); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; padding: 1px 4px;
}
.opacity-caret:hover { color: var(--text); border-color: var(--blue); }
/* ▾를 누르면 숫자 아래에 열리는 슬라이더 (Photoshop과 같은 방식).
   떠 있는 창이라 **올라온 면**(--panel2)으로 그린다 — 파인 면(--sunken)으로 두었더니
   기본 테마에서 패널 바탕과 거의 같은 색이라 창이 열린 줄도 몰랐다
   (사장님 지적 2026-09-04). 어느 테마에서나 테두리가 서도록 검은 테를 한 겹 두른다.
   좌우 여백은 손잡이 반 폭(7px)보다 넓게 — 0%·100% 에서 세모가 창 테두리에 안 붙는다. */
.opacity-pop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 5px;
  padding: 8px 12px; width: 150px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.5);
}
.opacity-pop input[type="range"] { width: 100%; accent-color: var(--blue); }
.opacity-num {
  width: 44px; background: var(--sunken); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); padding: 2px 4px; font: inherit; font-size: 12px; text-align: right;
}
.opacity-num::-webkit-inner-spin-button { display: none; }
.layer-rename {
  background: var(--deep); border: 1px solid var(--blue); border-radius: 3px;
  color: var(--text); padding: 1px 6px; font: inherit; font-size: 12.5px; width: 110px;
}
/* 목록의 **빈 자리**는 줄보다 어둡다 (사장님 그림 #4d4d4d) — 줄이 어디서
   끝나는지 보인다. 줄 자체는 --panel 로 칠해진다. */
.layer-list { flex: 1; overflow-y: auto; min-height: 0; background: var(--list-bg); }
.history-list { flex: 1; overflow-y: auto; min-height: 0; }
.history-row {
  padding: 5px 12px; font-size: 12.5px; cursor: pointer;
  border-bottom: 1px solid rgba(128, 128, 128, 0.12);
}
.history-row:hover { background: var(--panel2); }
.history-row.on { background: rgba(61, 132, 255, 0.2); }
.history-row.future { color: var(--text-dim); opacity: 0.6; }
.layer-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--line); cursor: pointer;
  background: var(--panel);   /* 빈 자리(--list-bg)보다 밝다 — 줄이 어디까지인지 보인다 */
}
/* 고른 줄 — 여럿 골랐을 때도 같은 색이다.
   예전에는 .on 이 0.2, .multi 가 0.1 이라 마지막에 누른 줄만 진했다.
   두 색을 한 줄에 모아 둔다 — 떨어뜨려 두었더니 실제로 어긋났다. */
/* 포토샵은 고른 줄을 **파랑이 아니라 밝은 회색**으로 칠한다
   (사장님 그림에서 뽑음: 고른 줄 #6b6b6b · 안 고른 줄 #535353). */
.layer-row.on,
.layer-row.multi { background: var(--row-on); }
/* 클리핑 마스크: 아래 레이어 안에만 나타나는 레이어는 들여쓰고 ↳ 표시,
   밑판이 되는 레이어는 이름에 밑줄 (Photoshop 방식) */
.layer-row.clipped .layer-eye + * { margin-left: 12px; }
.layer-row.in-group.clipped .layer-eye + * { margin-left: 28px; }
.clip-arrow { flex: none; color: var(--text-dim); font-size: 13px; line-height: 1; margin-right: -4px; }
.layer-row.clip-base .layer-name { text-decoration: underline; text-underline-offset: 2px; }
/* 눈 칸: 네모 영역 전체가 클릭 대상 (Photoshop 방식) */
.layer-eye {
  width: 28px; align-self: stretch; flex: none;
  margin: -6px 0 -6px -10px;           /* 행 padding을 상쇄해 칸 전체를 채움 */
  border: none; border-right: 1px solid var(--line);
  background: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.layer-eye svg {
  width: 16px; height: 16px; visibility: hidden;
  stroke: var(--text); fill: none; stroke-width: 1.3;
}
.layer-eye svg .pupil { fill: var(--text); stroke: none; }
.layer-eye.visible svg { visibility: visible; }
/* 폴더가 꺼져 있으면 그 안의 레이어 눈은 켜져 있어도 반투명 —
   자기 눈은 켜짐인데 폴더 때문에 안 보이는 상태다 (Photoshop 과 같다) */
.layer-eye.muted svg { opacity: 0.35; }
.layer-eye:hover { background: var(--panel2); }
/* 썸네일의 빈 곳은 체크무늬로 (Photoshop과 같다). 캔버스의 투명한 부분에 이 배경이 비친다. */
.layer-thumb {
  border: 1px solid var(--line); border-radius: 2px; flex: none;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #cccccc 25%, transparent 25%),
    linear-gradient(-45deg, #cccccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cccccc 75%),
    linear-gradient(-45deg, transparent 75%, #cccccc 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}
/* 조정 레이어와 마스크는 그림이 아니라 아이콘·흑백이라 체크무늬를 깔지 않는다 */
.layer-thumb.solid, .layer-thumb.mask {
  background-image: none; background-color: var(--deep);
}
/* 휴지통 위로 끌고 왔을 때 — 놓으면 지워진다는 것이 보여야 한다 */
/* 끌고 있는 줄 — 흐리게 해서 어느 줄을 들고 있는지 보여 준다.
   브라우저가 만드는 끌기 그림도 이 투명도를 그대로 따라간다. */
.layer-row.dragging { opacity: 0.28; }
/* 끌 때 커서에 붙어 다니는 복사본. 브라우저 기본 그림은 진하게 나오므로
   직접 만들어 넘긴다. 화면 밖에 두어야 원래 자리에 겹쳐 보이지 않는다. */
.drag-ghost { position: fixed; top: -1000px; left: -1000px; opacity: 0.75;
  pointer-events: none; border-radius: 3px; }

/* 셈하는 동안 — 캔버스 밖(패널·메뉴)에서도 기다리는 커서를 보여 준다.
   지금은 눌러도 아무것도 안 되므로 어디에 있든 같은 뜻이 보여야 한다.
   --busy-cursor 는 컨트롤러가 0.1 초마다 다음 장으로 바꾼다 (도는 것처럼 보인다).
   변수는 물려받으므로 값 하나만 바꾸면 화면 전체가 같이 바뀐다. */
body.app-busy, body.app-busy * {
  cursor: var(--busy-cursor, url("/cursors/busy-0.png") 16 16, wait) !important;
}

/* 단추 안의 그림은 끌기 이벤트를 가로채지 않는다.
   가로채면 dragover 가 단추가 아니라 svg 에 걸려 preventDefault 를 못 하고,
   그러면 drop 자체가 안 온다 (실제로 폴더·휴지통에 놓기가 안 먹었다). */
.panel-actions button svg, .panel-actions button * { pointer-events: none; }

/* 폴더·새 레이어 단추 위로 끌고 왔을 때 */
.panel-drop.drop-hot {
  background: rgba(61, 132, 255, 0.25);
  outline: 1px solid var(--blue); outline-offset: -1px; border-radius: 4px;
}
.layer-trash.trash-hot {
  background: rgba(229, 83, 75, 0.25);
  outline: 1px solid #e5534b; outline-offset: -1px; border-radius: 4px;
}

/* 지금 붓질이 가는 쪽 — 그림이든 마스크든 같은 표시다.
   흰 테두리로 두른다: 고른 줄은 바탕이 파래서 파란 테두리가 묻힌다 (Photoshop 도 흰색이다). */
.layer-thumb.editing, .layer-thumb.mask.editing {
  outline: 2px solid #ffffff; outline-offset: 1px;
}
/* Ctrl 을 누르고 있으면 축소판 위에서 점선 상자 커서 —
   누르면 그 레이어 모양이 선택 영역이 된다는 표시 (Photoshop 방식). 커서 그림은 JS 가 넣는다. */
.layer-list.load-selection .layer-thumb { cursor: var(--load-selection-cursor, crosshair); }
.layer-list.load-selection .layer-thumb.solid { cursor: default; }
.layer-name-box { min-width: 0; flex: 1; }
/* 자물쇠는 표시일 뿐이라 누르는 손 모양이 뜨면 안 된다.
   안 잠긴 줄에는 이 칸 자체가 없다 (layer_panel.js) — 옅게 남겨 두면
   마우스를 올렸을 때 안내 풍선이 떠서 안 잠갔는데도 뜬 것처럼 보인다. */
.layer-lock {
  background: none; border: none; cursor: default;
  font-size: 11px; padding: 2px; flex: none;
  filter: grayscale(1) brightness(1.6);
}
.layer-lock.locked { opacity: 1; }
/* 일부만 잠근 레이어 — 모두 잠근 것과 구분되게 옅게 (Photoshop 과 같다) */
.layer-lock.partial { opacity: 0.6; }
/* 잠그기 줄 — Photoshop 레이어 패널의 배치 */
.lock-row {
  display: flex; align-items: center; gap: 2px;
  padding: 2px 8px 5px; border-bottom: 1px solid var(--line);
  color: var(--text-dim); background: var(--panel);
}
.lock-label { font-size: 11.5px; margin-right: 4px; }
.fill-field { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 11.5px; }
.fill-field .opacity-num { width: 40px; }
.lock-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 20px; padding: 0;
  background: none; border: none; border-radius: 3px;
  color: var(--text-dim); cursor: pointer;
}
.lock-btn svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.lock-btn:hover { background: var(--panel2); color: var(--text); }
.lock-btn.on { background: var(--panel2); color: var(--text); }
.lock-btn:disabled { opacity: 0.35; pointer-events: none; }
/* 이름은 **글자 폭만큼만** 차지한다. 오른쪽에 남는 자리가 곧 줄의 「빈 자리」이고,
   거기를 두 번 누르면 레이어 스타일 창이 열린다 (독일어 책 829쪽 27.1.2 —
   "auf die Fläche der Ebene … nicht direkt auf den Ebenentitel").
   전에는 이름 칸이 남은 폭을 다 먹어서 빈 자리가 오른쪽 10px 밖에 없었다. */
.layer-name {
  font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: max-content; max-width: 100%;
}
.layer-sub { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-actions {
  border-top: 1px solid var(--line);
  /* 위아래 여백 5px → 2px. 35px 은 원문 아래 막대보다 두툼했다 (사장님 지적
     2026-08-31 "이부분 높이가 좀 낮게"). 아이콘은 18px 그대로 두고 여백만 줄인다 —
     아이콘까지 줄이면 무슨 단추인지 알아보기 어려워진다.
     패스·색상 견본 막대도 같은 값을 쓴다 (아래) — "다른 탭도 마찬가지" 지시. */
  /* 원문 최신판은 이 줄에 **여덟 개**다 (레이어 정리가 맨 앞에 붙었다, 2026-09-14).
     268px 패널에 여덟이 한 줄로 들어가야 해서 사이와 여백을 2px 씩 줄였다 —
     줄이 넘치면 휴지통 하나만 둘째 줄로 떨어져 아래 막대가 두 줄이 된다. */
  display: flex; justify-content: flex-end; gap: 2px; padding: 2px 6px;
  flex-wrap: wrap;
}
.panel-actions button {
  background: none; border: none; color: var(--text-dim);
  font-size: 14px; cursor: pointer; padding: 1px 4px; border-radius: 4px;
  display: inline-flex; align-items: center;
}
.panel-actions svg {
  width: 18px; height: 18px; fill: none;
  stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.panel-actions svg text { stroke: none; }
.panel-actions button:hover { background: var(--panel2); color: var(--text); }

/* ── 눌렀을 때 목록이 뜨는 단추에는 오른쪽 아래에 작은 `▾` 가 붙는다 ──
   레이어 패널 아래 줄 일곱 가운데 **fx** 와 **조정** 둘만 목록을 연다.
   근거: 독일어 책 206쪽 그림 5.12·5.14 를 600dpi 로 잘라 보니 그 둘에만
   작은 세모가 있고 나머지 다섯에는 없다 (사장님 지적 2026-09-14
   "눌렀을때 풀다운 메뉴 나오는건 아이콘 밑에 표시 해야 하지 않나").
   표시가 없으면 눌러 보기 전에는 바로 걸리는 단추인지 목록이 뜨는지 알 수 없다. */
.panel-actions button.has-menu { position: relative; padding-right: 8px; }
.panel-actions button.has-menu .pa-caret {
  position: absolute; right: 2px; bottom: 2px;
  width: 0; height: 0; pointer-events: none;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 3px solid currentColor;
}