/* ── 메뉴바 ── */
.menubar {
  grid-area: menu;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px;
  /* 좁아지면 칸을 찌그러뜨리지 말고 **오른쪽부터 자른다** (옵션바와 같은 규칙,
     사장님 지시 2026-09-18). 잘린 쪽은 끌거나 쓸어서 본다 — lib/editor/bar_pan.js.
     overflow-x: clip + overflow-y: visible 이어야 한다. 한 축이 스크롤이면 다른 축의
     visible 이 auto 로 바뀌어, 펼친 메뉴(.dropdown)가 36px 막대 안에 갇혀 잘린다. */
  flex-wrap: nowrap; white-space: nowrap; min-width: 0;
  overflow-x: clip; overflow-y: visible;
}
.menubar > * { flex-shrink: 0; }
/* 이름표 — 로그인 화면용 .brand(application.css, 30px)가 여기까지 새어 들어와
   36px 메뉴줄에 30px 굵은 글자가 꽉 찼다. 메뉴 글자(13px)보다 조금 큰 15px 로
   (사장님 물음 2026-09-02 "글자를 좀 작게할가?") */
.menubar .brand {
  font-weight: 600; font-size: 15px; letter-spacing: 0; margin: 0 10px 0 0;
  color: var(--text);
}
.menu-item {
  padding: 3px 9px; border-radius: 4px; color: var(--text);
  background: none; border: none; font: inherit; cursor: pointer; text-decoration: none;
}
.menu-item:hover { background: var(--panel2); }
.menu-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.menu-right form { display: inline; }
.conn { color: var(--text-dim); }
.conn .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-dim); margin-right: 5px;
}
.conn .dot.on { background: var(--green); }

/* ── 드롭다운 메뉴 ── */
.menu { position: relative; }
.menu.open > .menu-item { background: var(--panel2); }
.dropdown {
  display: none;
  position: absolute; top: 100%; left: 0; z-index: 50;
  /* 항목이 꺾이지 않게 내용 너비에 맞춘다 (Photoshop 메뉴는 줄바꿈이 없다) */
  min-width: 190px; width: max-content; max-width: 340px;
  /* 펼친 메뉴는 패널과 같은 몸통색이다 — 한 단 올라온 면으로 두면 혼자 밝게 뜬다 */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 4px 0;
}
.menu.open > .dropdown { display: block; }
/* 화면 밖으로 잘리지 않게 물린다. 레이어 메뉴는 901px 라 720p 노트북에서 209px 가
   화면 밖으로 나가 아예 못 눌렀다 (재서 확인). 넘치면 휠로 굴린다.
   막대는 감추고 위아래 화살표로 알린다 — Photoshop 메뉴도 막대를 안 쓴다. */
.menubar > .menu > .dropdown,
.dd-sub > .dropdown {
  max-height: var(--dd-max, calc(100vh - 60px));
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.menubar > .menu > .dropdown::-webkit-scrollbar,
.dd-sub > .dropdown::-webkit-scrollbar { display: none; }
/* 위아래로 더 있으면 굴리는 단추가 뜬다 — 그림이 아니라 **눌리는 단추**다.
   ::before/::after 로 두었더니 눌러도 아무 일이 없었다 (사용자 지적).
   올려 두면 계속 밀리고 누르면 한 칸 (Photoshop 메뉴와 같은 느낌). */
.dd-scroll {
  position: sticky; z-index: 2; display: block; width: 100%;
  border: none; padding: 0; margin: 0; cursor: pointer;
  font-size: 9px; line-height: 14px; text-align: center;
  color: var(--text-dim); background: var(--panel2);
}
.dd-scroll:hover { color: var(--text); background: var(--hover, rgba(255,255,255,.08)); }
.dd-scroll.up { top: -4px; }
.dd-scroll.down { bottom: -4px; }
/* 하위 메뉴는 굴러가는 부모 밖으로 빼내야 한다 (fixed 로 자리를 잡아 준다).
   부모가 overflow: auto 라 absolute 로 두면 잘려서 아예 안 보였다. */
.dd-sub > .dropdown { position: fixed; }
/* 파일을 고르는 메뉴 줄 — 겉모습은 다른 메뉴 줄과 같다 */
.dropdown button, .dropdown a, .dropdown .dd-file {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; text-align: left; text-decoration: none; white-space: nowrap;
  background: none; border: none; color: var(--text);
  padding: 6px 14px; font: inherit; cursor: pointer;
}
.dropdown button:hover, .dropdown a:hover,
.dropdown .dd-file:hover { background: var(--blue); color: #fff; }
.dropdown button:hover .dd-key { color: #ffffffbb; }
.dd-key { color: var(--text-dim); font-size: 11px; }
/* 지금 쓸 수 없는 명령 (Photoshop처럼 흐리게, 눌러도 반응 없음) */
.dropdown button.disabled, .dropdown .dd-file.disabled { opacity: 0.38; pointer-events: none; }
.dd-sep { border-top: 1px solid var(--line); margin: 4px 0; }

/* 하위 메뉴 — 항목에 마우스를 올리면 오른쪽으로 펼쳐진다 (Photoshop 방식) */
.dd-sub { position: relative; }
/* 하위 메뉴 표시 ▸ — 10px 는 있는지도 잘 안 보였다 (사용자 지적: "좀 더 크게") */
.dd-sub > button::after { content: "▸"; color: var(--text-dim); font-size: 14px; line-height: 1; }
.dd-sub > button:hover::after { color: #ffffffbb; }
.dd-sub > .dropdown {
  /* 자리는 JS(placeSubmenu)가 정한다. 여기서 left:100% 를 주면 안 된다 —
     이 판은 position:fixed 라 100% 가 **화면 폭**이 되어 메뉴가 화면 밖으로 나간다
     (사장님 지적 2026-09-02). auto 로 두면 JS 가 늦어도 제 줄 옆에 그려진다. */
  top: auto; left: auto;
  border-radius: 6px;
  display: none;
}
.dd-sub:hover > .dropdown { display: block; }

/* 아직 안 붙은 기능: 회색으로 죽여두지 않고 누르면 상태를 알려준다.
   글자는 그대로 읽히게 두고 오른쪽 "준비 중" 표시로만 구분한다. */
.dropdown button.dd-soon { color: var(--text-dim); }
.dropdown button.dd-soon .dd-key {
  border: 1px solid var(--line); border-radius: 100px;
  padding: 1px 7px; font-size: 10px; letter-spacing: 0.02em;
}
.dropdown button.dd-soon:hover { background: var(--panel2); color: var(--text); }
.dropdown button.dd-soon:hover .dd-key { color: var(--text-dim); }

/* 브러시 우클릭 팝업 */
.brush-popup {
  position: fixed; z-index: 80;
  width: 200px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 10px 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.brush-popup[hidden] { display: none; }
.bp-preview {
  align-self: center;
  background: var(--deep); border: 1px solid var(--line); border-radius: 50%;
}
.bp-row { display: flex; justify-content: space-between; color: var(--text-dim); font-size: 11.5px; margin-top: 4px; }
.bp-size-val { color: var(--text); font-variant-numeric: tabular-nums; }
.brush-popup input[type="range"] { width: 100%; accent-color: var(--blue); }

/* ── 막대 밀어 보기 (메뉴바·옵션바 공통, 사장님 지시 2026-09-18) ──
   잘린 오른쪽을 마우스로 끌거나 손으로 쓸어서 본다. 미는 일은
   lib/editor/bar_pan.js 가 --pan 에 화소를 적어서 한다.

   왜 첫 칸의 margin-left 로 미나: 막대 자체를 스크롤 상자로 만들면 펼친 메뉴가
   잘린다(위 .menubar 주석). 첫 칸을 왼쪽으로 당기면 flex 가 뒤 칸을 모두 끌고
   가므로 같은 결과가 되고, 펼친 메뉴도 제 메뉴를 따라 움직여 자리가 안 어긋난다. */
.bar-pan > :first-child { margin-left: calc(0px - var(--pan, 0px)); }
/* 밀 것이 있을 때만 손 모양을 낸다 — 넓은 화면에서 공연히 끌 수 있어 보이면 안 된다 */
.bar-pan.pannable { cursor: grab; }
.bar-pan.panning { cursor: grabbing; user-select: none; }
/* 세로 몸짓은 브라우저에 맡기고 가로만 우리가 받는다 (손가락으로 쓸기) */
.bar-pan { touch-action: pan-y; }
/* 끄는 동안에는 단추가 반응하지 않게 — 미는 중에 불빛이 따라다니면 어지럽다 */
.bar-pan.panning .menu-item:hover, .bar-pan.panning button:hover { background: none; }

/* ── MCP 표시 (사장님 지시 2026-09-19 "바로 보이게 숨겨 놓지 말고") ──
   상태를 **단추 안의 점**으로 늘 보인다. 메뉴를 열어 봐야 아는 것은 안 보이는 것과 같다.
   2026-09-18 에 구독이 통째로 거절되던 것이 몇 달 동안 아무도 모른 채 지나간 까닭이
   표시가 없어서였다.

   포토샵에 없는 메뉴다 — 일부러 안 따랐다 (Figma·힉스필드 쪽을 따르기로 정함). */
.mcp-menu > .menu-item { display: inline-flex; align-items: center; gap: 6px; }
.mcp-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--text-dim);
  /* 색만으로 알리지 않는다 — 색을 못 가리는 사람도 단추의 title 로 상태를 읽는다 */
}
.mcp-dot.on   { background: var(--green, #4ade80); }
.mcp-dot.wait { background: #d6a354; }
.mcp-dot.bad  { background: #c0392b; }
/* 붙는 중은 숨을 쉰다 — 멈춘 것과 다르다는 것을 움직임으로 알린다 */
.mcp-dot.wait { animation: mcp-breathe 1.6s ease-in-out infinite; }
@keyframes mcp-breathe { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .mcp-dot.wait { animation: none; opacity: .7 } }