/*
 * AI 생성 인물 사진 표시 — 사람이 나오는 AI 사진은 모두 이 클래스로 감싼다(2026-11-06 루트님 지시).
 * 그림 파일에 글자를 굽지 않고 화면 위에 CSS 띠를 덧씌운다. 사람이 아닌 사진(하늘·장비·건물)에는 쓰지 않는다.
 *   <figure class="ai-photo"><img src="…" alt="○○ 사진(AI로 생성한 이미지)" width="640" height="640"></figure>
 * 글자 크기는 사진 폭에 맞춰 줄어든다(container query) — 작은 카드에서도 읽힌다.
 * 주의: container-type 때문에 폭이 자동인 칸(grid 항목·inline)에서는 0 으로 접힌다 → 아래 width:100% 유지, 폭 제한은 max-width 로.
 */
.ai-photo{position:relative;width:100%;margin:0 0 12px;container-type:inline-size;border-radius:20px;overflow:hidden;background:#070A2B}
.ai-photo img{display:block;width:100%;height:auto;aspect-ratio:var(--ar,auto);object-fit:cover;object-position:50% 28%}
/* 공용 약도(/demo/_shared/images/map.webp·map-sm.webp, 2026-11-06 루트님) — 오시는 길에 쓰고 .ai-photo--map 으로 「임의로 생성된 지도」 띠 */
.ai-photo--map::after{content:"이 지도는 임의로 생성된 지도입니다" !important}
.ai-photo::after{content:"이 이미지는 임의로 생성된 사진입니다";position:absolute;left:0;right:0;bottom:0;padding:.55em .8em;background:rgba(7,10,43,.74);color:#fff;font-weight:700;line-height:1.3;text-align:center;font-size:clamp(10px,4.8cqw,15px);word-break:keep-all;pointer-events:none}