/* 키보드 단축키 목록 */
.shortcuts-modal { width: min(880px, calc(100vw - 40px)); }
.shortcuts-body {
  padding: 16px 20px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 28px;
  align-content: start;
}
.shortcuts-group { break-inside: avoid; margin-bottom: 10px; }
.shortcuts-group h3 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); margin: 8px 0 6px;
}
.shortcuts-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12px; padding: 2px 0; white-space: nowrap;
}
.shortcuts-row kbd {
  font-family: inherit; font-size: 11px; color: var(--text-dim);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
}

/* 커브 대화상자 */
.curves-grid {
  width: 256px; height: 256px; align-self: center;
  border: 1px solid var(--line); border-radius: 4px; cursor: crosshair;
}
.curves-help { font-size: 11.5px; color: var(--text-dim); margin: 2px 0 0; }
.curves-readout { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* 레벨 대화상자 */
.levels-histogram {
  width: 100%; height: 80px; background: var(--bg, #1a1a1e);
  border: 1px solid var(--line); border-radius: 4px;
}
/* 히스토그램 바로 아래 삼각형 손잡이 셋 (원문 레벨 창과 같은 자리).
   히스토그램과 손잡이가 떨어져 있으면 어디를 자를지 보면서 못 맞춘다. */
.levels-hist-wrap { position: relative; }
.levels-handles { position: relative; height: 14px; margin-top: -1px; cursor: ew-resize; }
/* 손잡이는 히스토그램 쪽(위)을 가리키는 세모다 (사장님 화면 #56).
   곡선 창 격자 아래 손잡이(.spread-handle)도 같은 모양이지만 이름은 따로 쓴다 —
   .levels-handle 을 통째로 찾는 곳이 곡선 것까지 세면 안 된다 */
.levels-handle, .spread-handle {
  position: absolute; top: 2px; width: 0; height: 0; transform: translateX(-5px);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 9px solid var(--text-dim); pointer-events: auto;
}
/* 어두운 바탕이라 검정 삼각형이 안 보인다 — 흰 테를 둘러 윤곽을 살린다
   (원문은 밝은 회색 바탕이라 그냥 검정으로 둔다) */
.levels-handle.lh-black { border-bottom-color: #111; filter: drop-shadow(0 0 1.5px #fff); }
.levels-handle.lh-gamma { border-bottom-color: #999; }
.levels-handle.lh-white { border-bottom-color: #fff; filter: drop-shadow(0 0 1px #000); }
/* 입력 레벨 숫자 칸 셋 — 원문의 Input Levels */
/* 한계값의 히스토그램 — 원문처럼 산을 보고 자를 자리를 잡는다 */
.adjust-hist { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; min-width: 0; }
/* 한계값 창의 히스토그램은 크다 — 어디에 화소가 몰렸는지 봐야 자를 자리를 정한다
   (사장님 화면 #73, 2026-09-02: 창 폭을 거의 다 쓴다) */
.adjust-hist-canvas { width: 100%; height: 110px; background: var(--deep); border: 1px solid var(--line); border-radius: 2px; }

/* 위(110px) 규칙을 덮어쓰던 옛 64px 규칙을 지웠다 — 화면 #73 은 창 폭을 거의 다 쓰는 큰 산이다 */
.adjust-hist-canvas { display: block; }
.adjust-hist-range { width: 100%; }
/* 그레이디언트 맵의 색 띠 — 원문처럼 그림으로 보여 준다 */
.adjust-ramp { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.adjust-ramp-canvas {
  width: 100%; height: 20px; display: block;
  border: 1px solid var(--line); border-radius: 4px;
  image-rendering: auto;      /* 256칸을 늘려 그리므로 보간이 켜져야 부드럽다 */
}
/* 자동 색상 교정 옵션 창 (원문 레벨 창의 Options…) */
/* 레벨 창 위에 겹쳐 뜬다 — 기본 z-index(90) 로는 뒤에 깔려 안 보인다 */
.autolevels-backdrop { z-index: 93; }
.modal.autolevels-modal { width: auto; min-width: 300px; max-width: 380px; }
.al-row { display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.al-row input[type="radio"], .al-row input[type="checkbox"] {
  width: auto; flex: none; margin: 0; accent-color: var(--blue);
}
.al-row.dim { opacity: 0.45; }
.al-row.dim input { pointer-events: none; }
.al-clip-row { display: flex; align-items: center; gap: 8px; }
.al-clip-row > span { color: var(--text-dim); font-size: 11.5px; }
.al-clip { width: 80px; }
.al-unit { flex: none; }
/* 값 뒤 단위 글자 (원문도 % · px 를 붙인다) */
.adjust-unit { color: var(--text-dim); font-size: 11.5px; flex: none; margin-left: -2px; }
/* 보여 주기만 하는 줄 (채널 혼합의 총계). 100% 를 넘으면 붉게 알린다 */
.adjust-readout { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.adjust-readout.warn { color: #ff8b6b; font-weight: 600; }
/* 조정 창 안의 묶음 테두리 — 원문의 Use · Gradient Options 자리 */
.adjust-group { margin: 6px 0 2px; }
.adjust-group .adjust-row { margin: 0; }
/* 라디오 줄은 이름표가 비어 있다 (묶음 이름이 대신한다) — 빈 칸을 안 먹게 한다 */
.adjust-group .adjust-row > .adjust-label:empty { display: none; }
/* 조정 창의 라디오 무리 (사진 필터의 "사용: 필터 / 색상") */
.adjust-radios { display: flex; gap: 14px; align-items: center; flex: none; }
/* 라디오 이름은 접히지 않는다 — "어두운 영역" 이 세 줄로 꺾였다 (실측 2026-09-02) */
.adjust-radios .opt-check { white-space: nowrap; flex: none; }

/* 갈래가 많거나 이름이 길면 세로로 쌓는다 (렌즈 플레어의 렌즈 유형 넷).
   원문 창도 그럴 때는 세로로 쌓는다 — 독일어 책 787쪽 그림 25.28 */
/* 속성 패널의 조정↔마스크 전환 (독일어 책 401쪽 — 왼쪽 맨 위 아이콘 둘) */
.props-switch { display: flex; gap: 3px; padding: 4px 8px 0; }
.props-switch-btn {
  width: 24px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel2, #3a3a3a);
  border: 1px solid transparent; border-radius: 3px;
  color: var(--text-dim); cursor: pointer; padding: 0;
}
.props-switch-btn:hover { color: var(--text); }
.props-switch-btn.on { border-color: var(--blue, #4a9eff); color: var(--text); }
/* 속성 패널 안의 조정 칸 — 창과 같은 줄 짜임을 쓰되 이름 칸을 좁힌다 */
.props-adjust-fields .adjust-label { min-width: 62px; font-size: 11px; }
.props-adjust-fields .adjust-row { gap: 6px; }
.props-adjust-fields { padding: 2px 0; }

/* 문자 패널의 꾸밈 단추 여덟 — 원문도 문자 패널에 한 줄로 둔다
   (독일어 책 813쪽 그림 26.21 의 "Ts" 줄) */
.tp-marks {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  margin: 6px 0 2px;
}
.tp-marks .text-mark { width: auto; }
/* 단락 패널 정렬 줄 — 책 816쪽 그림 26.27 ①~⑦ 이 한 줄로 선다 */
.tp-align-row { display: flex; gap: 2px; padding: 4px 6px 2px; }
/* 문자 패널의 글꼴·스타일 줄 (그림 26.19 ①⑩) · 색 칩 (⑭) */
.tp-font-row { gap: 6px; }
.tp-font-btn {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: space-between;
  gap: 4px; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--panel-2, transparent); color: var(--text); font-size: 12px; cursor: pointer;
}
.tp-font-btn .tp-font-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-style-proxy { width: 88px; }
.tp-color-chip { width: 34px; height: 18px; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; }
/* 문자 마스크 — 쓰는 동안 문서 위에 빠른 마스크 색막 (책 825쪽 "ähnlich der Quick Mask") */
.text-mask-tint { position: absolute; pointer-events: none; z-index: 4; }
.textboxsize-form { width: 220px; }
/* 글리프 패널 — 그림 26.25 · adobe-help 그림 (최근 줄 · 글꼴·스타일 · 갈래 · 격자 · 미끄럼자) */
.glyph-panel { gap: 6px; }
.glyph-recent {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.glyph-recent .glyph-cell { aspect-ratio: 1; font-size: 15px; min-height: 26px; }
.glyph-font-row { gap: 6px; }
.glyph-font-row .glyph-font { flex: 1; min-width: 0; }
.glyph-font-row .glyph-style { width: 84px; }
.glyph-grid {
  --glyph-size: 28px;
  flex: 1; min-height: 120px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--glyph-size) + 14px), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); align-content: start;
}
.glyph-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--panel2); color: var(--text); border: 0; cursor: pointer;
  font: inherit; font-size: var(--glyph-size); line-height: 1; padding: 0; overflow: hidden;
}
.glyph-cell:hover { background: var(--panel); }
.glyph-cell.on { outline: 2px solid var(--blue); outline-offset: -2px; }
.glyph-cell.glyph-empty { cursor: default; }
.glyph-foot { display: flex; align-items: center; gap: 6px; }
.glyph-foot .glyph-size { flex: 1; min-width: 0; }
.glyph-foot-ico { color: var(--text-dim); font-size: 10px; }
.glyph-step {
  background: none; border: 1px solid transparent; border-radius: 3px; color: var(--text-dim);
  font-size: 11px; cursor: pointer; padding: 1px 4px;
}
.glyph-step:hover { color: var(--text); border-color: var(--line); }
/* 스타일 패널 — 걸린 줄 · 고른 줄 · [없음] 줄 (그림 26.34 의 기울인 Basisabsatz) */
.style-row.on { background: var(--panel2); }
.style-row.selected .style-name { color: var(--blue); }
.style-row.style-none .style-name { font-style: italic; color: var(--text-dim); }
.style-actions { gap: 2px; }
/* 글꼴 미리 보기 크기 (문자 › 글꼴 미리 보기 크기) — 목록 줄의 견본 글자 크기 */
.font-pick-pop[data-preview="none"] .font-pick-sample { display: none; }
.font-pick-pop[data-preview="small"] .font-pick-sample { font-size: 11px; }
.font-pick-pop[data-preview="large"] .font-pick-sample { font-size: 18px; }
.font-pick-pop[data-preview="xlarge"] .font-pick-sample { font-size: 22px; }
.font-pick-pop[data-preview="huge"] .font-pick-sample { font-size: 28px; }

/* 파일을 여는 동안 — 큰 PSD 는 몇 초씩 걸리고 그동안 화면이 멎는다.
   무엇을 하고 있는지 안 보이면 멈춘 것으로 보인다 */
.file-busy {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}
.file-busy-box {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel, #2b2b2b);
  border: 1px solid var(--line, #555);
  border-radius: 6px;
  padding: 18px 24px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  max-width: 70vw;
}
.file-busy-spin {
  width: 22px; height: 22px; flex: none;
  border: 2px solid var(--line, #555);
  border-top-color: var(--blue, #4a9eff);
  border-radius: 50%;
  animation: file-busy-turn 0.8s linear infinite;
}
@keyframes file-busy-turn { to { transform: rotate(360deg); } }
.file-busy-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.file-busy-name {
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-busy-note { font-size: 12px; color: var(--text-dim); }
/* 움직임을 줄이는 설정이면 돌지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .file-busy-spin { animation: none; }
}

/* 조정 패널 (Korrekturen) — 독일어 책 400쪽 그림 10.8.
   아이콘 격자가 기본이고 ☰ 로 글자 목록으로 오간다 */
.adjust-panel { padding: 6px 8px 10px; }
.adjpanel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.adjpanel-title { font-size: 12px; color: var(--text-dim); }
.adjpanel-view {
  background: none; border: 0; color: var(--text-dim);
  cursor: pointer; padding: 2px 4px; font-size: 13px; line-height: 1;
}
.adjpanel-view:hover { color: var(--text); }
/* 원문도 한 줄에 일곱 개씩 놓는다 (그림 10.8) */
.adjpanel-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.adjpanel-item {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
  background: var(--panel2, #3a3a3a);
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
}
.adjpanel-item:hover { border-color: var(--blue, #4a9eff); color: var(--text); }
.adjpanel-name { display: none; }
/* 글자 목록 — 한 줄에 하나씩, 아이콘 옆에 이름 */
.adjpanel-grid.as-list { grid-template-columns: 1fr; gap: 1px; }
.adjpanel-grid.as-list .adjpanel-item {
  aspect-ratio: auto;
  justify-content: flex-start;
  gap: 8px;
  padding: 4px 7px;
  background: none;
}
.adjpanel-grid.as-list .adjpanel-item:hover { background: var(--panel2, #3a3a3a); }
.adjpanel-grid.as-list .adjpanel-name { display: inline; font-size: 12px; }

/* 각도 다이얼 — 원문 창의 각도 칸 옆에 있는 동그란 조절기
   (동작 흐림 책 766쪽 그림 24.20 · 고급 선명 622쪽 19.14 · 렌즈 보정 580쪽 17.39) */
.adjust-dial {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line, #555);
  background: var(--panel2, #3a3a3a);
  position: relative;
  cursor: grab;
  touch-action: none;
}
.adjust-dial:active { cursor: grabbing; }
.adjust-dial-needle {
  position: absolute; inset: 0;
  pointer-events: none;
}
/* 바늘은 가운데에서 오른쪽으로 뻗는다 — 0도가 오른쪽이다 */
.adjust-dial-needle::after {
  content: ""; position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 2px;
  margin-top: -1px;
  transform-origin: 0 50%;
  background: var(--blue, #4a9eff);
  border-radius: 1px;
}
.adjust-row.dim .adjust-dial { opacity: 0.5; pointer-events: none; }

.adjust-radios.adjust-radios-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.adjust-radios input[type="radio"] { width: auto; flex: none; margin: 0; accent-color: var(--blue); }
/* 안 쓰는 쪽은 흐리고 못 만진다 — 만졌는데 안 먹으면 고장으로 보인다 */
.adjust-row.dim { opacity: 0.45; }
.adjust-row.dim input, .adjust-row.dim select { pointer-events: none; }
/* 스포이드 셋 (원문 레벨 창 오른쪽 아래) */
.levels-droppers { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; }
.levels-dropper { padding: 4px 7px; }
.levels-dropper svg {
  width: 14px; height: 14px; display: block; fill: none;
  stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.levels-dropper.ld-black { color: #111; filter: drop-shadow(0 0 1px var(--text-dim)); }
.levels-dropper.ld-gray { color: #999; }
.levels-dropper.ld-white { color: #fff; }
.levels-dropper.on { background: var(--blue); border-color: var(--blue); color: #fff; filter: none; }
.levels-dropper-hint { color: var(--text-dim); font-size: 11px; }
/* 조정 창이 떠 있는 동안 **창 밖(캔버스 쪽)** 커서는 스포이드다 — 원문도 그렇다
   (사장님 지시 2026-09-02). 덮개는 투명해서 그 아래 그림이 그대로 보인다.
   창 안에서는 평소 커서로 돌아간다. */
.adjust-backdrop:not([hidden]),
.levels-backdrop:not([hidden]),
.curves-backdrop:not([hidden]) { cursor: var(--eyedrop-cursor, crosshair); }
.adjust-backdrop .modal,
.levels-backdrop .modal,
.curves-backdrop .modal { cursor: default; }
/* 스포이드를 켜면 덮개를 눌러 캔버스에서 색을 찍는다 (색 고르개 창과 같은 길) */
.levels-backdrop.over-canvas { cursor: var(--eyedrop-cursor, crosshair); }
.levels-nums { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 2px 0 6px; }
/* ── 레벨 창 배치 (사장님 화면 #56, 2026-09-02) ──
   위: 사전 설정 줄 · 채널 줄. 아래: 왼쪽에 입력/출력, 오른쪽에 단추가 세로. */
.levels-preset-row, .levels-channel-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.levels-row-label { flex: none; margin: 0; color: var(--text-dim); font-size: 12px; }
.levels-preset-row .levels-preset-select { flex: 1; min-width: 0; }
.levels-channel-row .levels-channel { flex: none; min-width: 120px; }
.levels-gear { display: flex; align-items: center; gap: 1px; padding: 4px 6px; }
.levels-gear .dd-caret { font-size: 9px; color: var(--text-dim); }
.levels-preset-menu { position: fixed; z-index: 95; min-width: 140px; }
.levels-body { display: flex; align-items: flex-start; gap: 16px; }
.levels-main { flex: 1; min-width: 0; }
.levels-sec-label { display: block; color: var(--text-dim); font-size: 12px; margin: 2px 0 4px; }
.levels-side { flex: none; display: flex; flex-direction: column; gap: 6px; width: 110px; min-width: 0; }
.levels-side button { text-align: center; }
/* 출력 레벨 — 검정에서 흰색으로 가는 띠 위에 손잡이 둘 (원문 화면 #56).
   전에는 슬라이더 두 줄이었다 */
.levels-out-wrap { position: relative; margin-top: 2px; }
.levels-out-ramp {
  height: 14px; border: 1px solid var(--line); border-radius: 2px;
  background: linear-gradient(to right, #000, #fff);
}
.levels-out-handles { margin-top: 0; }
.levels-handle.lh-out-black { border-bottom-color: #111; filter: drop-shadow(0 0 1.5px #fff); }
.levels-handle.lh-out-white { border-bottom-color: #fff; filter: drop-shadow(0 0 1px #000); }
.levels-out-nums { grid-template-columns: 1fr 1fr; }
/* 스포이드는 단추 열 아래에 나란히 (원문 화면 #56) */
.levels-side .levels-droppers {
  margin: 6px 0 0; justify-content: space-between; gap: 4px; flex: none;
  width: 100%; min-width: 0;
}
.levels-side .levels-dropper { padding: 3px 0; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
/* 레벨 창은 히스토그램(가로로 넓다) + 단추 열이라 폭이 필요하다 */
.levels-backdrop .adjust-modal { width: 520px; }
.levels-form { width: auto; }
/* 폼 공통 규칙(width:100%)이 select 를 늘려 창 밖으로 밀었다 */
.levels-form .levels-channel, .levels-form .levels-preset-select { width: auto; }
.levels-preset-row .levels-preset-select { flex: 1 1 auto; min-width: 0; }
.levels-channel-row .levels-channel { flex: 0 0 140px; }
.levels-form .levels-num { width: 100%; }
.levels-num-lab { display: flex; align-items: center; gap: 5px; min-width: 0; }
.levels-num-lab > span { color: var(--text-dim); font-size: 11px; flex: none; }
.levels-num {
  background: var(--deep); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); padding: 4px 6px; font: inherit; font-size: 12px; text-align: center;
  width: 100%;
}
.levels-num:focus { outline: 1px solid var(--blue); border-color: var(--blue); }
/* 곡선 창의 입력·출력 칸 */
.curves-io { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.curves-io-row { display: flex; align-items: center; gap: 6px; }
.curves-io-row > span { color: var(--text-dim); font-size: 11.5px; flex: none; }
.curves-io-row input {
  background: var(--deep); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); padding: 4px 6px; font: inherit; font-size: 12px; width: 100%; min-width: 0;
}
.curves-io-row input:disabled { opacity: 0.45; }

/* 닫기 확인 대화상자 */
/* 새 문서 대화상자용 .newdoc-form 은 폭이 220px 로 박혀 있다. 그대로 쓰면
   버튼 세 개(취소·저장 안 함·저장 후 닫기)가 상자 왼쪽 밖으로 밀려난다. */
.close-confirm-modal { max-width: 420px; }
/* 대화상자 버튼 안의 키 표시 (Esc·N·Y) */
.close-confirm-modal .dd-key { margin-left: 7px; opacity: 0.75; }
.close-confirm-modal .primary-btn .dd-key { color: #ffffffbb; }
.close-confirm-modal .newdoc-form { width: auto; }
.close-confirm-text {
  margin: 0 0 12px; font-size: 13px; color: var(--text);
  word-break: keep-all;   /* 한글이 단어 중간에서 끊기지 않게 */
}
.close-discard { color: var(--red); }