/* 저장 창의 사본 체크 — .newdoc-form input 의 width:100% 가 체크상자까지 늘린다 */
.saveas-copy-row { align-items: center; gap: 7px; margin-top: 10px; line-height: 1.4; }
.newdoc-form input[type="checkbox"].saveas-copy { width: auto; flex: none; margin: 0; }
.saveas-quality-row[hidden], .saveas-flat-note[hidden] { display: none; }
.saveas-quality-row label { display: block; }
.viewport .overlay { pointer-events: none; }
.doc-tabs {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  height: 26px; display: flex; align-items: stretch;
  /* 탭 줄 바탕 = 안 고른 탭 바탕이다 (사장님 화면 실측 #424242) */
  background: #424242; border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.doc-tabs[hidden] { display: none; }
/* 파일을 끌고 탭 줄 위에 오면 "여기 놓으면 새 탭" 이라고 알린다 */
.doc-tabs.drop-target { background: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.doc-tabs.drop-target .doc-tab { color: #fff; }

/* 파일을 창 안으로 끌고 들어온 동안에만 나오는 넓은 조준 영역 (탭 줄 26px 은 겨누기 어렵다).
   탭 줄 위를 덮으므로 눈금자 자리(--ruler-top)는 건드리지 않는다. */
.tab-drop-zone {
  position: absolute; top: 0; left: 0; right: 0; height: 64px; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  background: rgba(61, 132, 255, 0.22);
  border-bottom: 2px dashed var(--blue);
  color: #fff; font-size: 12.5px; font-weight: 600; pointer-events: auto;
}
.tab-drop-zone[hidden] { display: none; }
.tab-drop-zone.drop-target { background: rgba(61, 132, 255, 0.45); }

/* 그림 창 쪽은 무엇이 되는지만 알려 준다 (받는 것은 원래대로 창 전체) */
.canvas-drop-hint {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 30;
  display: flex; justify-content: center; pointer-events: none;
}
.canvas-drop-hint[hidden] { display: none; }
.canvas-drop-hint span {
  background: rgba(0, 0, 0, 0.66); color: #fff;
  padding: 6px 14px; border-radius: 14px; font-size: 12.5px;
}
/* 탭이 넘치면 가로로 밀지 않고 줄어든다 (Photoshop 과 같다).
   고른 탭은 이름을 다 보여 주고, 나머지는 이름 길이에 비례해 자리를 나눈다.
   그래도 안 들어갈 만큼 많으면(최소 폭까지 줄어든 뒤) 그때만 밀린다. */
.doc-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; font-size: 12px; color: #a0a0a0;   /* 안 고른 탭 글자 (실측) */
  border-right: 1px solid var(--line); cursor: pointer; white-space: nowrap;
  /* 폭도 실측이다 (사장님 탭 막대 그림 1294x29, y=14 에서 구분선을 찾아 잼, 2026-09-13):
       안 고른 탭 283 · 304 · 301px   ·   고른 탭 406px
     원문은 **고른 탭에 더 넓은 자리**를 준다 — 제목(이름 @ 배율% (레이어, 모드))이
     다 보여야 하는 것이 그 탭이기 때문이다. 우리는 넷 다 240px 로 묶어 두어
     고른 탭도 이름이 잘렸다. */
  min-width: 62px; max-width: 300px; overflow: hidden;
}
.doc-tab-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* 고른 탭 — 한 단 밝고 글자는 흰빛, 자리도 더 넓다 (실측 #535353 · 406px) */
.doc-tab.on { background: #535353; color: #f0f0f0; max-width: 420px; }
.doc-tab-x {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 13px; padding: 0 2px; flex: none;
}
.doc-tab-x:hover { color: var(--red); }

/* 그룹 안 레이어는 들여쓴다. 다만 눈 칸은 제자리에 둔다 — 눈이 줄마다 다른 자리에 있으면
   위아래로 훑으며 켜고 끄기가 어긋난다 (Photoshop 도 눈은 한 줄로 세운다).
   줄 자체를 미는 대신 눈 다음 칸부터 민다. */
.layer-row.in-group .layer-eye + * { margin-left: 16px; }
.group-row { background: rgba(128, 128, 128, 0.07); }
/* 폴더 안에 폴더가 들어가면 한 겹마다 더 들여쓴다. --depth 는 패널이 넣어 준다. */
.layer-row[style*="--depth"] .layer-eye + * { margin-left: calc(16px * var(--depth, 0) + 16px); }
.group-row[style*="--depth"] .group-fold { margin-left: calc(14px * var(--depth, 0)); }
.group-fold {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; padding: 0 2px; font-size: 22px; line-height: 1; flex: none;
}
.group-icon { font-size: 13px; flex: none; filter: grayscale(0.5); }
/* Alt 를 누르고 레이어 사이 선에 대면 클리핑 마스크를 걸 수 있다는 표시 */
.layer-row.clip-edge { cursor: alias; box-shadow: inset 0 -2px 0 var(--blue); }
/* 폴더 줄 안쪽에 놓으면 폴더 전체가 밝아진다 (그 안으로 들어간다는 표시) */
.layer-row.drop-into { box-shadow: inset 0 0 0 2px var(--blue); }
.layer-row.drop-above { box-shadow: inset 0 2px 0 var(--blue); }
.layer-row.drop-below { box-shadow: inset 0 -2px 0 var(--blue); }