/* 펜의 톱니 팝업 — 책 873쪽 그림 29.5.
   패스 옵션(두께·색상) ─ 곡선 맞춤 ─ ☑ 자석 ─ 폭·대비·빈도 ─ ☑ 펜 압력.
   자석을 끄면 아래 넷이 흐려진다 (그림에서 들여쓰여 있는 자리들). */
.opts-pen { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.pen-gear-pop {
  position: absolute; top: 26px; left: 0; z-index: 60;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12px;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.6); white-space: nowrap; min-width: 190px;
}
.pen-gear-pop[hidden] { display: none; }
.pen-gear-pop .menu-head { font-size: 12px; color: var(--text-dim); }
.pen-gear-pop .of-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.pen-gear-pop .of-row .opt-num { width: 62px; }
.pen-gear-pop input[type="color"] { width: 34px; height: 18px; padding: 0; border: 1px solid var(--line); background: none; }
.pen-gear-sep { height: 1px; background: var(--line); margin: 2px 0; }
/* 자석 아래 넷은 들여쓴다 (그림 29.5 와 같은 층위) */
.pen-gear-pop .pen-magnet-opts { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; }
.pen-gear-pop .pen-magnet-opts.off { opacity: .45; }

/* 속성 패널의 「네 모서리 한 줄」 칸 — 값을 넣을 수도, 골라 복사할 수도 있다
   (책 867쪽 ②). 전에는 읽기만 되는 글이라 둘 다 안 됐다. */
.pf-text-input { width: 100%; min-width: 0; font: inherit; }

/* 마스크 이름 줄 — 축소판 · 어느 마스크인지 · 더하기 단추 둘
   (책 379쪽 그림 9.22 의 둘째 줄). 한 레이어에 픽셀·벡터 마스크가 같이 있을 수
   있어서, 아래 밀도·페더가 어느 쪽 값인지 이 줄이 알려 준다. */
.pm-kind-row { display: flex; align-items: center; gap: 8px; }
.pm-kind-thumb { width: 34px; height: 26px; border: 1px solid var(--line); background: #000; flex: none; }
.pm-kind-name { flex: 1; min-width: 0; font-size: 12px; color: var(--text-dim); }
.pm-kind-row .pm-btn[disabled] { opacity: .35; pointer-events: none; }

/* 스마트 필터 마스크 축소판 — 스마트 필터 머리줄 오른쪽 (책 758쪽).
   고른 표시는 위의 .layer-thumb.editing 규칙(흰 테두리)을 그대로 쓴다 —
   파란 테두리를 따로 두었더니 다른 마스크와 달라 보였다 (코드 리뷰 #10). */
.layer-thumb.fmask { margin-left: auto; border: 1px solid var(--line); flex: none; }

/* 비율·쌍 연결: 플랫폼 이모지 대신 동일한 벡터 고리와 누름 영역. */
button.ratio-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; min-width: 24px; min-height: 24px; flex: none;
  padding: 2px; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: var(--text-dim); cursor: pointer;
}
button.ratio-link .ratio-link-icon { width: 18px; height: 18px; flex: none; }
button.ratio-link:not(.on) .link-upper { transform: translate(1px, -1px); }
button.ratio-link:not(.on) .link-lower { transform: translate(-1px, 1px); }
button.ratio-link:not(.on) .link-bridge { opacity: 0; }
button.ratio-link.on { color: var(--blue); background: rgba(100, 160, 255, .10); border-color: transparent; }
button.ratio-link:hover:not(:disabled) { background: rgba(255, 255, 255, .09); }
button.ratio-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
button.ratio-link:disabled { opacity: .4; cursor: default; }

.modal button.lqf-link.ratio-link { width: 24px; min-width: 24px; height: 24px; padding: 2px; border-color: transparent; }

.dock-icon:focus-visible, .float-ico:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* 브러시 옵션은 같은 캔버스·선 두께로, 켜짐도 같은 방식으로 표시한다. */
.optionsbar :is(.press-btn, .air-btn, .smooth-gear, .sym-btn) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; min-width: 26px; height: 26px; padding: 3px; flex: none;
  border: 1px solid transparent; border-radius: 4px;
}
.optionsbar .brush-option-icon { width: 18px; height: 18px; flex: none; }
.optionsbar :is(.press-btn, .air-btn, .smooth-gear, .sym-btn).on {
  outline: none; color: var(--blue); border-color: var(--blue); background: rgba(100,160,255,.12);
}
.optionsbar :is(.press-btn, .air-btn, .smooth-gear, .sym-btn):hover:not(:disabled) { background: rgba(255,255,255,.08); }
.optionsbar :is(.press-btn, .air-btn, .smooth-gear, .sym-btn):focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* 옵션의 주요 그림만 18px. 펼침 화살표·색 견본·미리보기는 각자 비율을 유지한다. */
.optionsbar button svg.option-action-icon {
  width: 18px; height: 18px; flex: none; vertical-align: middle;
  stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}
.optionsbar button:has(> svg.option-action-icon):not(:has(canvas)):not(.tool-preset-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 26px; min-height: 26px;
}
.optionsbar button:has(svg.option-action-icon):focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* 모양 속성의 칠·획은 견본에서 종류를 고른다. */
.pf-paint { display: flex; align-items: center; gap: 8px; color: var(--text-dim); }
.pf-paint-chip { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 22px; padding: 2px; border: 1px solid #777; border-radius: 0; background: #383838; cursor: pointer; }
.pf-paint-chip canvas { width: 24px; height: 14px; background: repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px; }
.pf-paint-chip:focus-visible { outline: 2px solid #529fff; outline-offset: 2px; }

/* 레이어 필터 막대 — 책 212쪽 ①②③. 패널 탭 바로 밑, 혼합 모드 줄 위에 온다. */
.layer-filter-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-bottom: 1px solid var(--line);
}
.layer-filter-bar .lf-kind { flex: none; width: 74px; font-size: 11px; }
.layer-filter-bar .lf-name,
.layer-filter-bar .lf-value { flex: 1; min-width: 0; font-size: 11px; }
.lf-icons { display: flex; gap: 2px; flex: 1; }
.lf-icons button {
  width: 20px; height: 20px; padding: 0; flex: none;
  background: none; border: 1px solid transparent; border-radius: 3px;
  color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lf-icons button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.lf-icons button:hover { background: var(--sunken); color: var(--text); }
.lf-icons button.on { background: var(--row-on); color: var(--text); border-color: var(--line); }
/* ③ 스위치 — 필터가 걸려 있으면 **빨갛다** (책 219쪽 "Er leuchtet immer dann rot") */
.lf-switch {
  width: 13px; height: 13px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--text-faint); border-radius: 50%;
  background: var(--panel2);
}
.lf-switch:hover { border-color: var(--text-dim); }
.lf-switch.on { background: #e04040; border-color: #e04040; }

/* 링크 배지 — Shift+클릭으로 잠시 뺀 레이어는 사슬 위에 빨간 X (책 230쪽 그림 5.60) */
/* 표시만 하던 때의 pointer-events: none 을 푼다 — Shift+클릭을 받아야 한다 */
.link-badge { background: none; border: none; padding: 0; cursor: pointer; position: relative; pointer-events: auto; }
.link-badge.off { color: var(--text-dim); }
.link-badge.off::after {
  content: "×"; position: absolute; left: 0; right: 0; top: -3px;
  text-align: center; color: #e04040; font-size: 15px; font-weight: 700; line-height: 1;
}
.lockdlg-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }

/* 마스크 밀도·페더 — 단위를 값 칸 **안** 오른쪽에 얹는다.
   원문은 「100%」 · 「0.0 픽셀」로 한 칸이다 (사장님 최신판 화면 17, 2026-09-14).
   숫자 칸을 글자 칸으로 바꾸면 화살표·키보드 다루기가 달라지므로 칸은 그대로 둔다. */
.props-mask .pm-val { position: relative; display: inline-flex; align-items: center; flex: none; }
.props-mask .pm-val input.adjust-value-num { width: 54px; padding-right: 16px; text-align: right; }
.props-mask .pm-val-wide input.adjust-value-num { width: 68px; padding-right: 30px; }
.props-mask .pm-val .pm-unit {
  position: absolute; right: 5px; pointer-events: none;
  font-size: 11px; color: var(--text-dim);
}
/* 숫자 칸의 오르내림 화살표를 감춘다 — 단위가 그 자리에 선다 */
.props-mask .pm-val input::-webkit-outer-spin-button,
.props-mask .pm-val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.props-mask .pm-val input { -moz-appearance: textfield; appearance: textfield; }