/* 옵션바 아이콘 — 글자·기호로 그리던 단추를 그림으로 바꿨다 (2026-08-30).
   기호(⇤ ☰ ⇥ ⊘ ✓ ⇄)는 글꼴마다 모양·크기가 달라 줄이 안 맞고, 흐린 회색에서
   획이 뭉개져 무엇인지 안 읽혔다. 굵기 1.4 의 선 그림으로 통일한다. */
.ob-ico { width: 14px; height: 14px; display: block; }
.optionsbar .text-toggle:has(.ob-ico) { display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 5px; line-height: 0; }

/* 모든 개체 마스크 — 찾는 방법 고르기 (줄은 JS 표 SEG_WAYS 에서 그린다) */
.segall-modal { width: 380px; }
.segall-ways { display: flex; flex-direction: column; gap: 6px; }
.segall-way {
  display: grid; grid-template-columns: auto 1fr auto; gap: 3px 8px;
  align-items: center; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px;
}
.segall-way.on { border-color: var(--blue); background: var(--hover); }
.segall-name { font-weight: 600; }
.segall-cost { font-size: 11px; color: var(--text-dim); }
.segall-note { grid-column: 2 / 4; font-size: 11px; color: var(--text-dim); }
.segall-foot { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-dim); }

/* 단축키 창 찾기 — 이름과 키 둘 다에서 찾는다 */
.shortcuts-find {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.shortcuts-q {
  flex: 1; min-width: 0; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--deep); color: var(--text); font-size: 12px;
}
.shortcuts-q:focus { outline: none; border-color: var(--blue); }
.shortcuts-count { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.shortcuts-none { margin: 16px 0; text-align: center; font-size: 12px; color: var(--text-dim); }

/* 속성 패널의 읽기 전용 값 한 줄 (모양 칠이 그레이디언트·무늬일 때) */
.pf-field.pf-text { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-text-value { color: var(--text-dim); }

/* 모양 옵션 막대의 W·H 사슬 (Photoshop 의 ⛓ — 켜면 비율을 지킨다) */
.opt-link {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 11px; padding: 0 2px;
}
.opt-link.on { color: var(--blue); }
.opt-link:disabled { opacity: 0.4; cursor: default; }
.shape-wh-wrap { display: inline-flex; align-items: center; gap: 3px; }
.shape-wh-wrap input:disabled { opacity: 0.5; }

/* 복제 원본 패널 — 원본 지점 다섯 칸 */
.clonesrc-panel { padding: 10px 12px; }
.clonesrc-slots { display: flex; gap: 6px; }
.clonesrc-slot {
  width: 34px; height: 30px; display: grid; place-items: center;
  background: var(--deep); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text-dim); cursor: pointer; padding: 0;
}
.clonesrc-slot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.clonesrc-slot.filled { color: var(--text); }
.clonesrc-slot.on { border-color: var(--blue); color: var(--text); }
.clonesrc-where { margin-top: 8px; font-size: 12px; color: var(--text); min-height: 16px; }
.clonesrc-hint { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-dim); }

/* 속성 패널의 줄 묶음 — 사슬(⛓) 하나가 여러 줄을 세로로 걸친다
   (사용자가 보낸 Photoshop 모양 속성 그림: W·X / H·Y 두 줄 왼쪽에 사슬 하나) */
.props-linkgroup { display: flex; align-items: stretch; gap: 4px; }
.props-link {
  /* 상자 없이 사슬 모양만 (사용자: 심플하게 2026-08-30). 끄면 두 고리가 벌어진다 */
  background: none; border: none; padding: 0;
  color: var(--text-dim); cursor: pointer; width: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.props-link:hover { color: var(--text); }
.props-link.on { color: var(--blue); }
/* 끄면 두 고리가 벌어진다 — 켜짐/꺼짐이 모양으로 보인다 */
.props-link:not(.on) .pl-top { transform: translateY(-1px); }
.props-link:not(.on) .pl-bottom { transform: translateY(1px); }
.props-linkrows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.props-row { display: flex; align-items: center; gap: 6px; }
.props-row .pf-field.pf-inline { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.props-row .pf-inline > span:first-child { flex: none; color: var(--text-dim); font-size: 11px; }
.props-row .pf-inline .pf-num-box { flex: 1; min-width: 0; }
.props-row .pf-inline input[type="number"] { width: 100%; min-width: 34px; }
.props-row .pf-inline .pf-num-box input { flex: 1; width: 0; }
.props-row .pf-inline select { flex: 1; min-width: 0; }
.props-row select.pf-icon-select { color: transparent; background-repeat: no-repeat; background-position: 8px center; background-size: 16px 16px; }
.props-row select.pf-icon-select option { color: var(--text); }
.pf-icon-menu { position: relative; }
.pf-icon-menu::after { content: "▾"; position: absolute; right: 5px; color: var(--text); pointer-events: none; font-size: 10px; }
.props-inline-btn {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); cursor: pointer; padding: 2px 8px; font-size: 12px;
}
.props-inline-btn:hover { border-color: var(--blue); }
/* 패스파인더 — 아이콘 단추 넷 나란히 (그림 맨 아래 절) */
.props-buttons { display: flex; gap: 4px; }
.props-buttons button {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); cursor: pointer; width: 26px; height: 24px; padding: 3px;
  display: flex; align-items: center; justify-content: center;
}
.props-buttons button:hover { border-color: var(--blue); }
.props-buttons svg { width: 100%; height: 100%; }

/* 사용자 정의 모양 고르개 — 묶음(폴더) 펼침 + 보기 방식 다섯
   (사용자가 보낸 Photoshop 화면 그대로) */
.shape-presets .sp-groups { max-height: 420px; overflow-y: auto; }
.sp-group-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: var(--panel2); border: none; border-bottom: 1px solid var(--line);
  color: var(--text); cursor: pointer; padding: 5px 8px; font: inherit; font-size: 12px;
  text-align: left;
}
.sp-group-head:hover { background: var(--panel); }
.sp-twirl { width: 10px; color: var(--text-dim); }
.sp-folder { width: 14px; height: 14px; flex: none; color: var(--text-dim); }
.sp-grid { display: grid; gap: 3px; padding: 5px 8px; }
.sp-thumb-large { grid-template-columns: repeat(5, 1fr); }
.sp-thumb-small { grid-template-columns: repeat(8, 1fr); }
.sp-list-small, .sp-list-large, .sp-text { grid-template-columns: 1fr; }
.sp-grid .bp-item {
  background: #1c1c1c; border: 1px solid transparent; border-radius: 3px;
  cursor: pointer; padding: 2px; color: var(--text);
  display: flex; align-items: center; gap: 6px; justify-content: center;
}
.sp-list-small .bp-item, .sp-list-large .bp-item, .sp-text .bp-item {
  justify-content: flex-start; padding: 2px 6px; background: none;
}
.sp-grid .bp-item:hover { border-color: var(--blue); }
.sp-grid .bp-item.on { border-color: var(--blue); background: #2a3b55; }
.sp-grid .bp-item canvas { display: block; }
.sp-grid .bp-item span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shape-presets .sp-gear { padding: 2px 4px; }
.shape-presets .sp-gear svg { width: 14px; height: 14px; display: block; }

/* 획 옵션 상자 — 원문은 획 두께 옆 ∨ 로 여는 작은 상자다 (선 종류·정렬·캡·모서리).
   근거: photoshopessentials 2022 shape-tools 의 shape-stroke-options.png */
.stroke-options-pop {
  position: fixed; z-index: 90; min-width: 210px; padding: 8px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; gap: 7px;
}
.stroke-options-pop[hidden] { display: none; }
.stroke-type-picker { display: inline-flex; flex: 1; min-width: 0; }
.stroke-type-button { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 60px; }
.stroke-type-button[hidden] { display: none; }
.stroke-type-picker svg { display: block; width: 100%; height: 20px; }
.stroke-type-list { margin: 0; padding: 5px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); box-sizing: border-box; }
.stroke-type-list:popover-open, .stroke-type-list.is-inline { display: flex; flex-direction: column; }
.stroke-type-list[popover] { position: fixed; inset: auto; }
.stroke-type-list.is-inline { width: 100%; border: 0; }
.stroke-type-row { display: block; width: 100%; height: 30px; padding: 4px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; }
.stroke-type-row[aria-selected="true"] { background: var(--panel); border-color: var(--line); }
.stroke-type-row:hover, .stroke-type-row:focus-visible { outline: 1px solid var(--blue); outline-offset: -1px; }
.stroke-options-pop .so-row .stroke-type-picker { display: flex; }
.stroke-options-pop .so-title { font-size: 12px; color: var(--text-dim); }
.stroke-options-pop .so-row select { width: 100%; }
.stroke-options-pop .so-grid { display: flex; gap: 6px; }
.stroke-options-pop .so-grid label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stroke-options-pop .so-grid span { font-size: 11px; color: var(--text-dim); }
.stroke-options-pop .so-grid select { width: 100%; }
.stroke-options-pop .so-dash { display: flex; align-items: center; gap: 4px; }
.shape-stroke-opts-btn svg { width: 13px; height: 13px; }

/* 못 쓰는 칸은 흐리게 (원문도 사각형 선택에서 앤티앨리어스를 흐려 둔다) */
.opt-check.dim { opacity: 0.45; }