/* 자동 앨범(auto-album.js) 보기 화면(auto-album.html). 앨범 보기(album-editor.html mode=view, album-editor-mobile.css
   "#albumViewerModal.is-scroll")와 같은 모양으로 맞춘다. 홈 카드는 기존 앨범 카드(.album-card) 그대로이고, 표지 상자(focus)만 여기에 있다. */
.aa-view { min-height: 100dvh; background: #111110; color: #f4f4f6; }
.aa-view::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 5;
  height: calc(env(safe-area-inset-top, 0px) + 84px);
  background: linear-gradient(#111110 0 72%, #11111000);
  pointer-events: none;
}
.aa-close {
  position: fixed;
  left: 10px;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  z-index: 6;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #f4f4f6;
  font-size: 25px;
  line-height: 1;
}
.aa-edit {
  /* 닫기(×)는 왼쪽 위(모든 닫기 통일, 2026-10-11), 편집(연필)은 오른쪽 위 끝. 위 막대 아이콘이라 상자 없이. */
  position: fixed;
  right: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  z-index: 6;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f4f4f6;
}
.aa-share {
  /* 공유는 편집 옆(오른쪽 위 막대, 상자 없이). */
  position: fixed;
  right: 56px;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  z-index: 6;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f4f4f6;
}
.aa-share.is-busy { opacity: 0.4; pointer-events: none; }
.aa-share svg,
.aa-edit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.aa-count {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 6;
  padding: 3px 10px;
  border-radius: 999px;
  background: #000000a6;
  color: #f4f4f6;
  font: 11px "IBM Plex Mono", "Pretendard", monospace;
  transform: translateX(-50%);
}

.aa-book {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(100%, 680px, calc((100dvh - 140px) * 0.75));
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 64px) 16px calc(env(safe-area-inset-bottom, 0px) + 56px);
  box-sizing: content-box;
}
@media (max-width: 620px) { .aa-book { width: auto; padding-left: 8px; padding-right: 8px; } }
.aa-state { margin: 40px 0; color: #9c9ca6; text-align: center; }
.aa-page {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.aa-frames { position: absolute; inset: 28px 30px 24px; }
@media (max-width: 800px) { .aa-frames { inset: 14px; } }
@media (max-width: 620px) { .aa-frames { inset: 6px; } }
.aa-photo { position: absolute; overflow: hidden; background: var(--surface); box-shadow: 0 2px 7px rgba(0, 0, 0, .24); }
.aa-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aa-photo.is-missing img { display: none; }

/* ── 표지(보기 화면 첫 쪽·홈 카드): 사진 한 장 + 장소·날짜 글자. 커버 효과(흐림·누끼)는 쓰지 않는다(2026-10-03 사용자). ── */
.aa-cover-box { position: relative; overflow: hidden; }
.aa-cover-wrap { position: absolute; inset: 0; overflow: hidden; container-type: size; }
/* 장소(영문 도시)·날짜 글자: 커버 가이드처럼 Anton, 인물 반대쪽(auto-album.js textSpot). 장소가 없으면 날짜만. */
.aa-cover-text {
  position: absolute;
  left: 7cqw;
  right: 7cqw;
  z-index: 2;
  display: grid;
  gap: 1cqw;
  color: #fff;
  font-family: Anton, "Pretendard", sans-serif;
  text-shadow: 0 0.4cqw 1.4cqw rgba(0, 0, 0, .45);
  pointer-events: none;
}
/* 2026-10-03 사용자: 글자 덩어리를 전체적으로 살짝 아래로(위 6 → 10, 아래 6 → 3.5). */
.aa-cover-text[data-pos="top"] { top: 10cqh; }
.aa-cover-text[data-pos="bottom"] { bottom: 3.5cqh; }
.aa-cover-text[data-align="left"] { text-align: left; }
.aa-cover-text[data-align="center"] { text-align: center; }
.aa-cover-text[data-align="right"] { text-align: right; }
.aa-cover-place { font-weight: 400; line-height: 1.05; letter-spacing: 0.06em; overflow-wrap: anywhere; }
/* 날짜는 조금 크게(3.6 → 5.2), 장소 글자가 없으면 날짜가 제목처럼 아주 크게(2026-10-03 사용자). */
.aa-cover-date { font-size: 5.2cqw; line-height: 1.2; letter-spacing: 0.04em; }
.aa-cover-date.is-alone { font-size: 13cqw; line-height: 1.05; letter-spacing: 0.03em; }
.aa-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* 자유 연출 칸(다각형으로 자름): 그림자는 잘리므로 뺀다. */
.aa-photo.is-shaped { box-shadow: none; }

/* ── 취향 학습(auto-album-view.js): 나란히 고르기 · 다른 느낌으로 · 5점 설문 ── */
.aa-choose { display: grid; gap: 4px; }
.aa-choose-q { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.aa-choose-sub { margin: 0 0 8px; color: #9c9ca6; font-size: 13px; }
.aa-pick-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aa-pick-card {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f4f4f6;
  text-align: left;
}
.aa-pick-card:disabled { cursor: progress; }
.aa-pick-card:active:not(:disabled) { transform: scale(0.97); }
.aa-pick-cover, .aa-pick-page { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.aa-pick-page .aa-frames { inset: 4px; }
.aa-pick-page .aa-photo { box-shadow: none; }
.aa-pick-cover.is-wait, .aa-pick-page.is-wait { animation: aa-wait 1.2s ease-in-out infinite alternate; }
@keyframes aa-wait { from { opacity: .35; } to { opacity: .8; } }
.aa-pick-label { color: #c8c8d0; font-size: 11px; line-height: 1.3; }

.aa-other {
  /* 2026-10-03 사용자: "전부 다시 만들기"로 이름을 바꾸고 왼쪽 위로. 위 막대라 테두리·바탕 상자 없이. */
  position: fixed;
  left: 52px;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: #f4f4f6;
  font-size: 14px;
  font-weight: 600;
}
.aa-other svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.aa-other.is-busy svg { animation: aa-spin 0.9s linear infinite; }
@keyframes aa-spin { to { transform: rotate(360deg); } }

.aa-survey { display: grid; justify-items: center; gap: 6px; padding: 18px 0 8px; text-align: center; }
.aa-survey-q { margin: 0; font-size: 16px; font-weight: 700; }
.aa-stars { display: flex; gap: 4px; }
.aa-star { padding: 2px 4px; border: 0; background: transparent; color: #4a4a54; font-size: 34px; line-height: 1; }
.aa-star.is-on { color: #f5c542; }
.aa-survey-note { margin: 0; color: #9c9ca6; font-size: 12px; }
/* AI 자유 연출 1·2 쪽(편집기 열람과 같은 모양, album-comic.css + IsleComic.decorate): 쪽 바탕을 종이색으로. */
.aa-page.is-comic, .aa-pick-page.is-comic { background: #fbfaf6; }
.aa-page.is-comic .aa-photo, .aa-pick-page.is-comic .aa-photo { box-shadow: none; background: none; }
/* 쪽마다 다른 느낌(오른쪽 위 ↻)·사진 바꾸기(사진을 누르면 가운데에). 사진 위라 옅은 어두운 동그라미로 보이게. */
.aa-page-reroll {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
}
.aa-page-reroll svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aa-page-reroll.is-busy svg { animation: aa-spin 0.9s linear infinite; }
/* 사진·커버마다 왼쪽 아래 교체 아이콘(2026-10-03 사용자). 자리는 스크립트가 칸 왼쪽 아래(자유 연출은 칸 모양 꼭짓점)로. */
.aa-swap {
  position: absolute;
  z-index: 9;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  transform: translate(5px, calc(-100% - 5px));
}
.aa-swap svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aa-swap.is-busy { animation: aa-wait 0.6s ease-in-out infinite alternate; }
.aa-swap.is-empty { opacity: .35; }
.aa-swap.is-cover { left: 10px; bottom: 10px; top: auto; transform: none; width: 34px; height: 34px; }
.aa-swap.is-cover svg { width: 19px; height: 19px; }
/* 쪽 안의 겹(자유 연출 잉크·튀어나오기·↻)이 화면에 고정된 위 막대(닫기·편집)를 덮지 않게 쪽마다 쌓임을 가둔다. */
.aa-page { isolation: isolate; }
/* 평가를 마쳐 잠긴 앨범(auto-album-view.js locked): 별은 읽기만. */
.aa-survey.is-locked .aa-star { cursor: default; }
/* 평가 뒤 다음 앨범 안내(auto-album-view.js makeNext). */
.aa-next { margin: 6px 0 0; color: #f4f4f6; font-size: 13px; }
.aa-next:empty { display: none; }
.aa-next a { color: #f5c542; font-weight: 600; text-decoration: none; }
/* 한글 장소(Apple 위치 이름, 2026-10-04 사용자): Anton 에 한글이 없어 Pretendard 굵게, 자간 없이. */
.aa-cover-place.is-ko { font-family: "Pretendard", sans-serif; font-weight: 800; letter-spacing: 0; line-height: 1.15; }

/* 공유(album-export.js)가 끝나거나 못 했을 때 잠깐 뜨는 알림 */
.aa-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 48px);
  z-index: 7;
  max-width: calc(100% - 32px);
  padding: 9px 16px;
  border-radius: 999px;
  background: #000000d9;
  color: #f4f4f6;
  font-size: 13px;
  transform: translateX(-50%);
}