/* 장소 도장첩(place-passport.js) — 리딩룸 장소 칸(폰 앱).
 * 2026-10-11 deneb: 리딩룸 높이는 시간별 책장 높이로 고정, 종이 배경 없이 같은 크기 도장만. 도장을 누르면 상세 팝업(왼쪽 위 뒤로 가기). */
.library-overview.is-passport .library-lens-host { padding: 0 !important; background: none !important; border: 0 !important; }
.pp, .pp * , .pp-pop, .pp-pop * { box-sizing: border-box; }
.pp { padding: 0; }
.pp-status { margin: 4px 16px 8px; font-size: 12px; color: var(--muted, #7a7060); }
/* 쪽 넘기기는 place-passport.js attachPaging 이 손가락을 따라 .pp-track 을 옮긴다(스크롤 스냅 아님). 높이는 fitHeight(책장 높이). */
.pp-book { position: relative; overflow: hidden; height: 460px; touch-action: pan-y; }
.pp-track { display: flex; height: 100%; will-change: transform; }

/* 도장 모음: 같은 크기 도장을 줄마다 가운데 정렬 */
.pp-spread { flex: none; width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 10px 22px; }
.pp-ipage { display: grid; gap: 6px; justify-content: center; align-content: center; }
.pp-istamp { padding: 0; border: 0; background: none; line-height: 0; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.pp-istamp svg { width: 100%; height: auto; overflow: visible; }
.pp-istamp:active { transform: scale(.96); }
.pp-folio { position: absolute; right: 12px; bottom: 4px; font: 500 10px "IBM Plex Mono", ui-monospace, monospace; color: var(--muted, #9a907e); }
/* 지도 보기 단추(place-map.js): 쪽 번호와 반대편 아래 구석. 앱에서만 보인다. */
.pp-maptoast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); z-index: 3000; max-width: calc(100% - 32px);
  padding: 10px 14px; border-radius: 12px; background: rgba(30, 28, 26, .92); color: #fff; font: 500 13px/1.4 Pretendard, -apple-system, sans-serif; text-align: center; }

/* 도시 상세 팝업(2026-10-11 deneb "상세 디자인은 기존 그대로, 크기만 줄여" → "종이 질감 없이 통일"): 예전 도시 쪽 짜임을 화면보다 작은 카드로,
 * 바탕은 리딩룸 판과 같은 색(테마 따라감). 닫기(뒤로)는 왼쪽 위. 글자는 도장 글자처럼(굵은 Pretendard + 잉크 번짐 필터 #pp-ink, place-passport.js inkDefs). */
.pp-pop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); background: rgba(0,0,0,.45); animation: pp-fade .16s ease-out; }
@keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } }
.pp-pop .pp-pop-card { width: min(100%, 360px); height: min(100%, 560px); border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong, rgba(0,0,0,.2));
  background: var(--surface-2, #fff); color: var(--ink, #2a2620); box-shadow: 0 16px 40px rgba(0,0,0,.35); animation: pp-up .2s cubic-bezier(.2,.8,.2,1); }
@keyframes pp-up { from { transform: translateY(14px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pp-pop, .pp-pop-card { animation: none; } }
.pp-sheet { flex: none; width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 8px 14px 6px; }
.pp-leaf-head { flex: none; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line, rgba(127,127,127,.25)); padding-bottom: 6px; }
.pp-back { order: -1; flex: none; margin-right: 2px; padding: 0 8px 0 0; border: 0; background: none; font: 600 22px/1 system-ui; color: inherit; }
/* 도장 글자: 도장 아래 이름처럼 Pretendard 800, 가장자리 거칠고 잉크가 군데군데 빠지게 */
.pp-ink { font-family: "Pretendard", sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; filter: url(#pp-ink); }
.pp-leaf-head b { margin-right: auto; font-size: 18px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-leaf-head span { font-size: 12px; letter-spacing: .1em; color: var(--muted, #7a7060); white-space: nowrap; }
/* 도시 도장은 위·아래를 채우고 남은 높이만큼 */
.pp-city-stamp { flex: 1 1 0; min-height: 110px; display: flex; justify-content: center; align-items: center; padding: 6px 0 4px; }
.pp-city-stamp > svg, .pp-city-main svg { height: 100%; width: auto; max-width: 100%; overflow: visible; }
/* 동네 도장(2026-10-12 deneb): 도시 도장 좌우에 4개씩 세로로. 틀 없이 요소 하나(place-dong-stamps.js), 아래 작은 이름. */
.pp-city-stamp:has(.pp-dong-col) { display: grid; grid-template-columns: 17% minmax(0, 1fr) 17%; gap: 2px; align-items: stretch; }
.pp-city-main { min-width: 0; min-height: 0; height: 100%; display: flex; justify-content: center; align-items: center; }
.pp-dong-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; }
.pp-dstamp { width: 100%; max-width: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--ink-stamp, inherit); }
.pp-dstamp svg { display: block; width: 100%; height: auto; overflow: visible; }
.pp-dstamp span { font-size: 9px; line-height: 1; white-space: nowrap; letter-spacing: -.03em; }
.pp-dstamp:active { transform: scale(.94); }
/* 아래: 왼쪽 동네 우표(2줄 높이) · 오른쪽 방문 기록 — 둘 다 그 칸 안에서 위아래로 넘긴다 */
.pp-low { flex: none; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 8px; height: var(--pp-low-h, 220px); border-top: 1px dashed var(--line, rgba(127,127,127,.3)); padding-top: 6px; }
.pp-postages, .pp-visits { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pp-postages::-webkit-scrollbar, .pp-visits::-webkit-scrollbar { display: none; }
.pp-postages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 8px; align-content: start; padding: 4px 4px 6px; }
.pp-postage { position: relative; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; transform: rotate(var(--rot)); filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.3)); }
.pp-pf { display: block; padding: 6px 6px 5px; background: #fffdf6;
  -webkit-mask: radial-gradient(circle 2.6px, transparent 96%, #000) -4px -4px / 8px 8px repeat, linear-gradient(#000, #000) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat;
          mask: radial-gradient(circle 2.6px, transparent 96%, #000) -4px -4px / 8px 8px repeat, linear-gradient(#000, #000) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat; }
.pp-pf img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; background: #e8e0cc; }
/* 우표 이름 줄은 우표 종이(흰색) 위라 우표 잉크색(도시 기본 잉크) */
.pp-pl { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; margin-top: 3px; color: var(--ink-stamp, #2a2620); }
.pp-pl b { font-size: 12px; font-weight: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pl span { font-size: 11px; }
.pp-visits { display: grid; align-content: start; border-left: 1px dashed var(--line, rgba(127,127,127,.3)); padding-left: 8px; }
.pp-visit { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px 0; text-align: left; border: 0; border-bottom: 1px solid var(--line, rgba(127,127,127,.15)); background: none; font: inherit; color: inherit; }
.pp-visit:active { background: rgba(127,127,127,.12); }
.pp-visit i { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(127,127,127,.4); }
.pp-visit i.pp-no { background: none; }
.pp-visit span { flex: 1; min-width: 0; }
.pp-visit b { display: block; font-size: 13px; font-weight: inherit; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-visit small { display: block; font-size: 11px; color: var(--muted, #7a7060); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 어두운 테마(2026-10-11 deneb "아이보리 배경 없이"): 크림 종이를 깔지 않고 도장을 어두운 판에 바로 찍는다 —
 * 곱하기(multiply) 대신 보통으로 겹치고, 기본 잉크(글자·틀·실루엣)는 밝은 잉크로, 종이색으로 파 둔 자리는 판 색으로 바꾼다(place-stamps.js st-base·st-ghost). */
:root:not([data-theme="light"]) :is(.pp-istamp, .pp-city-stamp) svg,
:root:not([data-theme="light"]) .pp-dstamp svg g,
:root:not([data-theme="light"]) :is(.pp-istamp, .pp-city-stamp) svg [style*="multiply"] { mix-blend-mode: normal !important; }
:root:not([data-theme="light"]) :is(.pp-istamp, .pp-city-stamp) { --st-ink: #EFE6D2; --st-hole: var(--surface-2, #16161b); }
:root:not([data-theme="light"]) :is(.pp-istamp, .pp-city-stamp) .st-base { fill: var(--st-ink); stroke: var(--st-ink); color: var(--st-ink); }
:root:not([data-theme="light"]) :is(.pp-istamp, .pp-city-stamp) .st-base [fill]:not([fill="none"]):not([fill="#F6F0E4"]):not(mask *):not(clipPath *) { fill: var(--st-ink); }
:root:not([data-theme="light"]) :is(.pp-istamp, .pp-city-stamp) .st-base [stroke]:not([stroke="none"]):not([stroke="#F6F0E4"]):not(mask *) { stroke: var(--st-ink); }
:root:not([data-theme="light"]) :is(.pp-istamp, .pp-city-stamp) .st-base [fill="#F6F0E4"]:not(mask *) { fill: var(--st-hole); }
:root:not([data-theme="light"]) :is(.pp-istamp, .pp-city-stamp) .st-base [stroke="#F6F0E4"]:not(mask *) { stroke: var(--st-hole); }
:root:not([data-theme="light"]) :is(.pp-istamp, .pp-city-stamp) .st-ghost { stroke: var(--st-ink); }
:root:not([data-theme="light"]) .pp-dstamp span { color: var(--st-ink); }

/* 확대된 도장이 머리줄/방문 버튼을 덮지 않게 확대 면 안에서만 그린다(열람 기본 동작). */
.pp-city-stamp[data-zoomed] { overflow: hidden; isolation: isolate; }
.pp-back { min-width: 40px; min-height: 40px; }