/* 속표지 한 장을 그리는 공용 스타일. 커버 편집 화면과 앨범 열람 화면이 같이 쓴다.
   컨테이너 단위(cqw)로 글자·테두리 크기를 잡아 상자 크기가 달라도 비율이 유지된다. */

.cover-surface {
  container-type: size;
  container-name: cover;
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  background: #101014;
  color: #fff;
}

.cover-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-origin: center;
}

/* 배경 연출 '앞으로'(zoom): 가운데로 조금씩 키운 장(.is-zoom) 안의 사진(cover-render.js effectLayers). */
.cover-bg-photo > .cover-bg-zoom {
  position: absolute;
  inset: 0;
  transform-origin: center;
}

.cover-bg-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
}

.cover-items {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* 배경 사진에서 오려 낸 인물. 흐려진 배경 사진(z 0) 바로 위, 글자(z 2) 아래에 온다.
   그래서 "사진 흐리게"가 배경에만 걸린 것처럼 보인다.
   누르는 것을 막지 않으면 이 투명한 겹이 글자 선택을 가로챈다. */
.cover-bg-subject {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform-origin: center;
}

/* 잘라낸 누끼(자리를 아는 것)는 겹 안의 그 자리에만 그린다(cover-render.js subjectRect). */
.cover-bg-subject.is-placed > i {
  position: absolute;
  display: block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.cover-item {
  position: absolute;
  transform-origin: center;
}

.cover-item-text {
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.cover-item-text .cover-text-body {
  display: block;
}

.cover-item-photo {
  overflow: hidden;
}

.cover-item-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-position: center;
}

.cover-photo-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
  font-size: 3cqw;
}

.cover-item-shape {
  box-sizing: border-box;
}

/* ── 방문한 곳 지도 ────────────────────────────────────────────
   자리는 cover-render.js 가 만들고 실제 지도는 cover-map.js 가 얹는다. */

.cover-item-map {
  overflow: hidden;
  background: #e8eaed;
}

.cover-map-canvas {
  width: 100%;
  height: 100%;
  background: #e8eaed;
  /* 표지 위의 지도는 그림이다. Leaflet 이 포인터를 가로채면 편집 화면에서
     지도를 끌어 옮길 수 없고, 열람 화면에서는 페이지 넘김이 막힌다. */
  pointer-events: none;
}

.cover-map-canvas.is-grayscale {
  filter: grayscale(1);
}

/* 표지 위의 지도는 읽는 그림이라 끌거나 확대하지 않는다. */
.cover-map-canvas .leaflet-container {
  background: #e8eaed;
  font: inherit;
}

.cover-map-canvas .leaflet-control-attribution {
  font-size: 1.4cqw;
  line-height: 1.3;
}

.cover-map-pin {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #c62828;
  color: #ffffff;
  font: 700 11px/1 Inter, "Malgun Gothic", sans-serif;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.cover-map-pin.is-dot {
  width: 13px;
  height: 13px;
  margin: 4px;
}

.cover-map-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 6%;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72);
  font-size: 3cqw;
  text-align: center;
}

/* 앨범 열람 화면에서 속표지 페이지를 담는 칸 */
.album-viewer-page.cover-page {
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
}

.album-viewer-page.cover-page .cover-surface {
  width: auto;
  height: 100%;
  max-width: 100%;
}

/* 사진 테두리(안쪽 box-shadow)는 사진(img)에 덮여 보이지 않았다. 같은 그림자를 사진 위 한 겹에 다시 그린다(2026-09-28). */
.cover-item-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inherit;
  pointer-events: none;
}