/* ── 도구 열 ── */
.toolbar {
  grid-area: tools;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center;
  /* 26px 버튼, 27px 행 간격. 아이콘 주위에 일정한 여백을 둔다. */
  padding: 6px; gap: 1px;
  /* 화면이 낮으면 도구가 아래로 넘친다 — 그때는 막대 안에서 굴려 본다.
     도구를 하나 더할 때마다 넘칠 화면 높이가 달라져서, 도구 수가 아니라 남은 자리로 정한다. */
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
}
.toolbar::-webkit-scrollbar { display: none; }
/* 버튼 크기는 유지하고 실제 그림은 18px로 맞춘다. */
.tool {
  width: 26px; height: 26px; flex: none; border-radius: 2px;
  /* padding 0 을 빼면 브라우저 기본 버튼 여백(좌우 6px)이 남아 아이콘이 눌려 작아진다 */
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  /* button 은 색을 물려받지 않는다. 이걸 빼면 아이콘 안쪽 채움(currentColor)이 까맣게 나온다. */
  color: var(--text);
}
/* 채운 아이콘과 선택 틀의 선을 같은 크기로 정렬한다. */
.tool svg, .tool-flyout svg { width: 18px; height: 18px; flex: none; fill: var(--text); stroke: none; }
.tool svg [data-o], .tool-flyout svg [data-o], .tool-preset-icon svg [data-o] {
  fill: none; stroke: currentColor; stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 옵션바·도구 프리셋으로 복제되어도 같은 그림을 유지한다. */
.tool-glyph { fill: currentColor; stroke: none; }
.tool-glyph [data-o] {
  fill: none; stroke: currentColor; stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.tool:hover { background: var(--panel2); }
.tool.on { background: var(--deep); box-shadow: inset 0 0 0 1px var(--line); }
.tool:focus-visible { outline: 1px solid var(--text); outline-offset: -1px; }
/* 잡는 곳이 좁으면 집기 어렵다 — 툴바 폭 전체를 쓰고 점도 좌우로 벌린다 */
/* 잡는 곳은 점을 촘촘히 깔아 그린다 — 글자(⠿)로는 점 수와 간격을 못 정한다.
   툴바는 가로로 긴 손잡이라 옆으로 넓게(5열 × 2행). */
/* 두 줄 툴바 — Photoshop 처럼 위쪽 »« 를 눌러 한 줄 ↔ 두 줄을 오간다.
   도구가 늘수록 한 줄이 길어져 아래쪽이 화면 밖으로 나간다. */
/* 기둥 폭을 덮어쓰는 규칙은 **모두 왼쪽 도크 칸을 세야 한다** — 칸 이름 줄은 넷
   (tools leftdock canvas panels)인데 폭을 셋만 적으면 격자가 무너져, 툴바를
   한 줄·두 줄·떼기로 바꿀 때마다 시작 화면과 아이콘 띠가 다르게 밀렸다
   (사장님 지적 2026-09-01 — 왼쪽 도크를 넣은 날 낸 회귀다). */
body.tools-2col .editor { grid-template-columns: 74px var(--left-dock, 0px) 1fr var(--panel-col, 272px); }
@media (min-width: 1600px) {
  body.tools-2col.with-ads .editor { grid-template-columns: 74px var(--left-dock, 0px) 1fr var(--panel-col, 272px) 316px; }
}
body.tools-2col.tools-float .editor { grid-template-columns: 0 var(--left-dock, 0px) 1fr var(--panel-col, 272px); }
body.tools-2col .toolbar {
  flex-direction: row; flex-wrap: wrap; align-content: flex-start;
  justify-content: center; padding: 6px;
  /* 열 중심 간격 34px, 행 중심 간격 27px. */
  column-gap: 8px; row-gap: 1px;
}
/* 떠 있는 툴바는 폭을 스스로 정한다 (박힌 것은 격자 칸이 정해 준다).
   여기에 두 줄 폭을 안 적어 두면 떼어 낸 상태에서 »« 를 눌러도 아무 일이 없다. */
body.tools-2col .toolbar.floating { width: 74px; }
body.tools-2col .toolbar-head { flex-basis: 100%; }
/* 색 견본은 두 칸 가운데로 (보내주신 Photoshop 화면과 같다).
   견본 안의 것들이 절대 위치라, 상자를 늘리면 왼쪽에 붙는다 —
   상자는 40px 그대로 두고 감싼 줄이 가운데로 민다. */
body.tools-2col .color-well-row { flex-basis: 100%; display: flex; justify-content: center; }
/* 도구 막대 머리 — Photoshop 차례 그대로 두 줄이다.
     윗줄  오른쪽 끝에 »« 와 ✕
     아랫줄 가운데에 잡는 점
   (사용자가 보낸 포토샵 툴바 상단 화면 2026-08-30. 처음엔 한 줄로 합쳤는데
    포토샵은 두 줄이고 차례가 반대였다 — 우리는 점이 위, 단추가 아래였다.)
   전에는 48px 을 먹었고 지금은 24px 이다. */
.toolbar-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  flex: none;
  /* 위로 더 붙이고 아래 도구와는 벌린다 — 머리와 첫 도구가 붙어 보였다
     (사용자 지적 2026-08-30) */
  width: calc(100% + 12px); margin: -5px -6px 5px;
}
/* 한 줄 ↔ 두 줄 단추 (Photoshop 도구 막대 머리 윗줄 오른쪽의 »« 자리) */
.tool-cols {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; line-height: 0;
  width: 14px; height: 14px; padding: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
}
/* 두 단추의 그림은 같은 12칸 좌표계에 같은 선 굵기로 그린다 —
   글자로 두면 글꼴마다 높이가 달라 가로 줄이 안 맞는다 */
.tool-cols svg, .tool-close svg {
  width: 12px; height: 12px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 한 줄일 때는 » (두 줄로), 두 줄일 때는 « (한 줄로) */
.tool-cols .tc-left { display: none; }
body.tools-2col .tool-cols .tc-right { display: none; }
body.tools-2col .tool-cols .tc-left { display: block; }
.tool-cols:hover { color: var(--text); background: var(--panel2); }
/* 닫기 — »« 바로 오른쪽 (원문 화면 차례가 [«»] [✕] 다) */
.tool-close {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; line-height: 0;
  width: 14px; height: 14px; padding: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.tool-close:hover { color: var(--text); background: var(--panel2); }
/* 도구 막대를 닫으면 격자 칸까지 접는다 (떠 있는 상태와 같은 셈) */
body.tools-hidden .toolbar { display: none; }
body.tools-hidden .editor { grid-template-columns: 0 var(--left-dock, 0px) 1fr var(--panel-col, 272px); }
@media (min-width: 1600px) {
  body.tools-hidden.with-ads .editor { grid-template-columns: 0 var(--left-dock, 0px) 1fr var(--panel-col, 272px) 316px; }
}

.toolbar-grip {
  color: var(--text-dim); cursor: grab; user-select: none;
  /* 단추 줄 **아래** 한 줄을 통째로 쓴다 (order: 2). 잡는 자리는 막대 폭 전부라
     좁은 한 줄 막대에서도 넉넉하다 — 점만 가운데에 조금 찍는다. */
  order: 2; flex-basis: 100%; height: 9px;
  display: flex; align-items: center;
  font-size: 0;   /* 안에 남아 있는 글자를 감춘다 */
}
/* 점은 **한 줄만**, 가운데만 (포토샵 화면과 같다). 줄 높이만큼 깔면 세 줄로
   깔려 시끄러웠다 — repeat-x 로 가로로만 깐다. */
.toolbar-grip::before {
  content: ""; display: block; margin: 0 auto;
  width: 20px; height: 4px;
  color: var(--text-dim);
  background-image: radial-gradient(currentColor .6px, transparent .8px);
  background-size: 3px 2px;
  background-repeat: repeat;
  background-position: center;
  opacity: .65;
}
.toolbar-grip:hover::before { color: #fff; opacity: 1; }
.toolbar-grip:hover { color: var(--text); }
.toolbar-grip:active { cursor: grabbing; }
/* 떠 있는 툴바 (Photoshop 팔레트 방식) */
.toolbar.floating {
  position: fixed; z-index: 60;
  width: 40px;   /* 도킹 상태와 같은 폭 — 지정하지 않으면 내용 폭까지 줄어든다 */
  height: auto; max-height: calc(100vh - 16px);
  border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  padding: 6px 0 10px;
}
body.tools-float .editor { grid-template-columns: 0 var(--left-dock, 0px) 1fr var(--panel-col, 272px); }
@media (min-width: 1551px) {
  body.tools-float.with-ads .editor { grid-template-columns: 0 var(--left-dock, 0px) 1fr var(--panel-col, 272px) 316px; }
}
.tool { position: relative; }
/* 도구 그룹 표시: 우하단 삼각형 (Photoshop 방식) */
/* 하위 목록은 길게 누르기·우클릭으로 연다 (구석 클릭은 뺐다, 2026-08-24) */
.fly-mark {
  position: absolute; right: 2px; bottom: 2px;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-bottom: 3px solid var(--text-dim);
}
.tool:hover .fly-mark { border-bottom-color: var(--text); }
.tool-flyout {
  position: fixed; z-index: 85;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 4px 0; min-width: 160px;
}
.tool-flyout[hidden] { display: none; }
.tool-flyout button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; color: var(--text);
  min-height: 28px; padding: 4px 12px 4px 8px; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left;
}
/* 지금 쓰고 있는 것 표시. Photoshop 은 작은 네모를 찍는데 우리는 동그란 점으로 한다.
   고르지 않은 줄에도 같은 자리를 비워 두어야 글자가 들쭉날쭉하지 않는다. */
.tool-flyout button::before {
  content: ""; flex: none;
  width: 5px; height: 5px; border-radius: 50%; background: transparent;
}
.tool-flyout button.on::before { background: var(--text); }
/* 배경색으로는 표시하지 않는다 — 점 하나로만 알린다. 배경색은 마우스를 올린 줄 몫이다. */
.tool-flyout button:hover { background: var(--blue); color: #fff; }
.tool-flyout button.on:hover::before { background: #fff; }
.tool-flyout button:hover svg { fill: #fff; }
.tool-flyout button:hover svg [data-o] { stroke: #fff; }
.tool-flyout .dd-key { margin-left: auto; }

/* 전경/배경색 (툴바 하단, Photoshop 배치) */
.color-well-row { margin-top: 8px; flex: none; display: flex; justify-content: center; }
/* 도구 상자 맨 아래 — 빠른 마스크 켜기/끄기 (Photoshop 의 같은 자리) */
.tool-bottom { display: flex; flex: none; justify-content: center; gap: 8px; padding-bottom: 4px; }
body.tools-2col .tool-bottom { flex-basis: 100%; }
.qm-toggle {
  width: 26px; height: 26px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.qm-toggle:hover { background: var(--hover); color: var(--text); }
.qm-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.2; fill: none; }
/* 켜짐/꺼짐은 그림을 갈아 끼워 보여 준다 (Photoshop 도 단추 그림이 바뀐다) */
.qm-toggle .qm-on { display: none; }
.qm-toggle.on { color: var(--text); }
.qm-toggle.on .qm-off { display: none; }
.qm-toggle.on .qm-on { display: block; }
.qm-color-input { width: 44px; height: 24px; padding: 0; border: 1px solid var(--line); background: none; }
.screen-mode {
  width: 26px; height: 26px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.screen-mode:hover { background: var(--hover); color: var(--text); }
.screen-mode svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.2; fill: none; }
.editor.screen-menubar .screen-mode { color: var(--text); }

/* ── 화면 모드 (F) ──────────────────────────────────────────────
   전체 화면: 창 껍데기만 사라지고 우리 껍데기(메뉴·옵션바·도구·패널)는 그대로.
   껍데기까지 숨기는 것은 Tab 이 맡는다 — 격자를 갈아 끼워야 빈칸이 안 남는다. */
/* Tab — 껍데기 감추기. 전체 화면이 아닐 때도 쓴다 (Photoshop 과 같다) */
.editor.screen-hide-chrome {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "canvas";
}
.editor.screen-hide-chrome > .menubar,
.editor.screen-hide-chrome > .optionsbar,
.editor.screen-hide-chrome > .toolbar,
.editor.screen-hide-chrome > .panels,
.editor.screen-hide-chrome > .panels-collapsed-strip,
.editor.screen-hide-chrome > .statusbar { display: none; }

/* Shift+Tab — 패널만 감춘다. 도구 상자와 옵션바는 남는다 */
.editor.screen-hide-panels {
  grid-template-columns: 40px 1fr;
  grid-template-areas:
    "menu   menu"
    "opts   opts"
    "tools  canvas"
    "status status";
}
.editor.screen-hide-panels > .panels,
.editor.screen-hide-panels > .panels-collapsed-strip { display: none; }
.color-well { position: relative; width: 40px; height: 48px; margin-bottom: 2px; }
.swatch {
  position: absolute; width: 24px; height: 24px;
  border: 1px solid #d6d7db; outline: 1px solid #000;
  cursor: pointer; padding: 0;
}
/* 네 요소가 겹치지 않게 자리를 나눈다 (Photoshop 배치):
   전경 왼쪽 위, 배경 오른쪽 아래, 바꾸기는 오른쪽 위 구석, 기본색은 왼쪽 아래 구석.
   구석의 작은 단추 둘은 견본과 최소 3px 은 떨어뜨린다 — 붙어 있으면 어디를 눌러야
   색이 바뀌고 어디를 눌러야 기본색으로 돌아가는지 구분이 안 된다. */
.swatch.fg { top: 6px; left: 2px; z-index: 2; }
.swatch.bg { top: 18px; left: 14px; z-index: 1; }
/* 구석 단추 둘은 색 칸 가장자리에서 3px 안으로 넣는다.
   한 줄 막대는 폭이 40px 이라 색 칸(40px)이 막대와 똑같다. 구석에 딱 붙여 두면
   기본색 단추가 막대 왼쪽 끝에 닿아 밖으로 삐져나온 것처럼 보였다.
   3px 이면 견본 두 장이 놓인 자리(왼쪽 2 ~ 오른쪽 38) 안쪽에 들어와 가운데로 모인다.
   위아래는 그대로 둔다 — 견본과 3px 을 띄워 둔 간격이 무너지면 어디를 눌러야
   색이 바뀌고 어디를 눌러야 기본색으로 돌아가는지 구분이 안 된다. */
.cw-swap {
  position: absolute; top: 0; right: 3px; z-index: 3;
  width: 11px; height: 11px; padding: 0;
  background: none; border: none; cursor: pointer;
}
/* 화살표가 전경/배경 견본이 놓인 대각선 방향(↗↙)을 가리키게 90도 돌린다 */
.cw-swap svg {
  width: 11px; height: 11px; stroke: var(--text-dim); stroke-width: 1.2; fill: var(--text-dim);
  transform: rotate(90deg);
}
.cw-swap:hover svg { stroke: var(--text); fill: var(--text); }
.cw-default {
  position: absolute; bottom: 0; left: 3px; z-index: 3;
  width: 11px; height: 11px; padding: 0;
  background: none; border: none; cursor: pointer;
}
.cw-default span {
  position: absolute; width: 7px; height: 7px; border: 1px solid var(--text-dim);
}
/* Photoshop 기본색은 전경 검정 · 배경 흰색이다. 앞 칸이 전경, 뒤 칸이 배경 */
.cw-default span:first-child { top: 0; left: 0; background: #000; z-index: 2; }
.cw-default span:last-child { bottom: 0; right: 0; background: #fff; }

/* 한 줄 막대의 아래 묶음 — 원문은 한 줄과 두 줄의 배치가 다르다.
   근거 둘 (같은 그림): 책 42쪽 **그림 1.4** 왼쪽(한 줄) 오른쪽(두 줄) ·
   photoshopessentials images/basics/cc/2020/interface/tools/photoshop-cc-toolbar.png

     한 줄 (폭 40px)          두 줄 (폭 74px)
     [기본색] [전환]          [색 견본] [전환]
     [색 견본]                [기본색]
     [빠른 마스크]            [빠른 마스크] [화면 모드]
     [화면 모드]

   한 줄은 폭이 색 견본과 똑같아서 견본 옆에 작은 단추를 둘 자리가 없다. 그래서
   원문은 위로 한 줄 빼고, 빠른 마스크·화면 모드도 세로로 하나씩 쌓는다.
   우리는 두 줄 배치를 한 줄에도 쓰고 있었다. */
body:not(.tools-2col) .color-well { height: 64px; }
body:not(.tools-2col) .cw-default { top: 0; bottom: auto; left: 6px; }
body:not(.tools-2col) .cw-swap { top: 0; right: 6px; }
body:not(.tools-2col) .swatch.fg { top: 22px; }
body:not(.tools-2col) .swatch.bg { top: 34px; }
body:not(.tools-2col) .tool-bottom { flex-direction: column; align-items: center; gap: 2px; }