/* ===== 설정값 — 여기 숫자만 바꾸면 됩니다 ===== */
:root {
  --color-bg: #000000;  /* 배경색 */
  --zoom: 1.15;         /* 사진 크기.
                           1    = 화면 높이에 딱 맞음
                           1.15 = 15% 크게 (현재) — 넘치는 부분은 드래그로 이동
                           1.5  = 더 크게 */
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  overflow: hidden;          /* 페이지 자체 스크롤은 없앰 */
}

/* 사진을 들여다보는 창 — 잘린 부분은 이 안에서 드래그로 이동합니다 */
.viewport {
  position: fixed;
  inset: 0;
  overflow: auto;
  cursor: grab;                    /* 손모양 커서 */
  overscroll-behavior: contain;
  scrollbar-width: none;           /* 스크롤바 숨김 (파이어폭스) */
  -ms-overflow-style: none;
}
.viewport::-webkit-scrollbar { display: none; }  /* 스크롤바 숨김 (크롬/사파리) */
.viewport.is-dragging { cursor: grabbing; }

/* 사진 + 클릭영역이 함께 들어가는 무대(stage).
   사진 비율(가로 1000 : 세로 1650) 유지 → 사진이 찌그러지지 않음.
   ※ 다른 비율 사진으로 바꾸면 aspect-ratio 숫자도 바꿔주세요. */
.stage {
  position: relative;
  aspect-ratio: 1000 / 1650;
  height: calc(100dvh * var(--zoom));
  margin: 0 auto;      /* 가로 가운데 */
  flex: none;
}

.photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;    /* 무대 비율 = 사진 비율 이므로 왜곡 없음 */
  user-select: none;
  -webkit-user-drag: none;
}

/* ===== 클릭 영역(핫스팟) ===== */
.hotspot {
  position: absolute;
  display: block;
  z-index: 2;
  border-radius: 8px;
  background: transparent;
  transition: background 150ms ease;
}
.hotspot:hover { background: rgba(255, 255, 255, 0.12); }
.hotspot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ===== 아래는 ?edit 편집 모드 전용 (평소에는 안 보임) ===== */
body.edit-mode .viewport { cursor: crosshair; }
body.edit-mode .hotspot { outline: 2px dashed #22d3ee; background: rgba(34,211,238,0.15); }

.edit-hint, .edit-output {
  position: fixed;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #fff;
  background: rgba(17, 17, 20, 0.94);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 10px 14px;
}
.edit-hint { top: 12px; }
.edit-output { bottom: 12px; max-width: min(720px, 92vw); }
.edit-output code {
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #a5f3fc;
  margin: 6px 0 8px;
}
.edit-output button {
  font: inherit;
  font-weight: 600;
  color: #111;
  background: #67e8f9;
  border: 0;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
}
.edit-box {
  position: fixed;
  z-index: 9;
  border: 2px dashed #67e8f9;
  background: rgba(103, 232, 249, 0.18);
  pointer-events: none;
}