/* ===== 공통/기본 ===== */
:root {
  --topbar-h: 48px;   /* 상단바 높이 */
  --footer-h: 44px;   /* 푸터 높이 */
}

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #f6f7fb;
  font-family: system-ui, -apple-system, "Malgun Gothic", Arial, sans-serif;
}

/* ===== 상단바: 상단 고정 ===== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: #111; color: #fff;
  z-index: 1000;
}
.topbar .left button {
  margin-right: 8px; padding: 6px 10px; border: 0; border-radius: 8px; cursor: pointer;
}

/* ===== 본문 캔버스: 남은 영역에서 중앙 정렬 ===== */
.canvas-wrap {
  position: fixed;
  top: var(--topbar-h);
  bottom: var(--footer-h);
  left: 0; right: 0;

  /* 가운데 정렬 */
  display: flex;
  align-items: center;       /* 세로 중앙 */
  justify-content: center;   /* 가로 중앙 */

  /* 캔버스 밖 내용이 크면 스크롤 */
  overflow: auto;
}

/* 캔버스는 남은 영역에서 최대 크기로 보이도록 */
#canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
}

/* ===== 푸터: 화면 맨 아래 고정 ===== */
.footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 6px 10px;
  background: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  color: #111;
  z-index: 1000;
}

/* 푸터 왼쪽: 태그 좌표(여러 줄 가능) */
.tag-coords {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
  color: #111;
  white-space: pre-wrap;
}

/* 푸터 오른쪽: 브랜드 한 줄 고정 */
.brand {
  font-weight: 700;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45vw;
}

/* 경고 색상 */
.warn { color: #c62828; font-weight: 700; }