/* ── 캔버스 ── */
.viewport { grid-area: canvas; position: relative; overflow: hidden; background: var(--canvas-bg); }
.viewport canvas { position: absolute; inset: 0; }

/* 눈금자 — 캔버스 위쪽·왼쪽 가장자리를 덮는다 (Photoshop 배치) */
/* .viewport canvas 규칙보다 뒤에, 더 좁게 잡아야 inset:0 에 덮이지 않는다 */
.rulers[hidden] { display: none; }
.rulers .ruler-h, .rulers .ruler-v, .rulers .ruler-corner {
  position: absolute; z-index: 6;
  background: var(--panel);
}
/* --ruler-top: 문서 탭 막대 높이. 탭이 눈금자보다 위에 그려지므로 그만큼 내려서 시작한다
   (JS 가 탭 유무에 따라 넣어 준다). */
/* 눈금자는 캔버스(대체 요소)라 CSS 테두리를 주면 안쪽 크기가 1px 줄고, 그만큼
   가로세로 비가 어긋나 그림이 눌린다 — 실제로 오른쪽 끝 65px 이 잘려 보였다.
   경계선은 JS 가 캔버스 안에 직접 긋는다 (drawRuler). */
.rulers .ruler-h {
  inset: var(--ruler-top, 0px) 0 auto 18px; height: 18px;
}
.rulers .ruler-v {
  top: calc(var(--ruler-top, 0px) + 18px); bottom: 0; left: 0; right: auto;
  width: 18px;
}
/* 두 눈금자가 만나는 네모 — 더블클릭하면 눈금자 설정이 열린다 */
.rulers .ruler-corner {
  top: var(--ruler-top, 0px); left: 0; width: 18px; height: 18px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.rulers .ruler-corner:hover { background: var(--panel2); }
/* 끌어내면 0 점이 옮겨진다 — 잡을 수 있다는 표시 */
.rulers .ruler-corner { cursor: move; }
/* 지금 커서가 눈금자 어디인지. 캔버스를 다시 그리지 않고 transform 으로만 옮긴다 */
.rulers .ruler-mark {
  position: absolute; background: var(--text); opacity: .8; pointer-events: none;
}
.rulers .ruler-mark[hidden] { display: none; }
/* 자리는 transform 하나로만 정한다 — top/left 에 값을 두면 그만큼 어긋난다 */
.rulers .ruler-mark-h { top: var(--ruler-top, 0px); left: 0; width: 1px; height: 18px; }
.rulers .ruler-mark-v { top: 0; left: 0; width: 18px; height: 1px; }

/* 안내선 설정 — 항목이 적어서 기본 920px 폭이면 텅 빈다 */
.modal.guide-modal { width: 280px; }
.guide-modal .newdoc-form { width: auto; }
/* .newdoc-form input 의 width:100% 가 라디오·체크박스까지 늘려서 글자를 밀어낸다.
   속성 선택자로 더 좁게 잡아 되돌린다 (재단 대화상자와 같은 이유). */
.guide-modal .newdoc-form input[type="radio"],
.guide-modal .newdoc-form input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.guide-axis-group { display: flex; gap: 16px; }
.guide-axis-group .opt-check { white-space: nowrap; }
.guide-pos-row { display: flex; gap: 8px; align-items: center; }
.guide-pos-row .guide-pos { flex: 1 1 auto; min-width: 0; }
.guide-pos-row .guide-unit { flex: 0 0 88px; width: 88px; }
.newdoc-form input[type="color"].guide-color {
  width: 44px; height: 26px; padding: 0; flex: none; align-self: flex-start;
}
/* 대화상자 아래 단추 줄 — 오른쪽 정렬, 삭제만 왼쪽 끝에 */
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.modal-foot .ghost-btn:first-child.guide-delete,
.modal-foot .grad-ed-del:first-child { margin-right: auto; }
.modal-foot .guide-delete[hidden] { display: none; }