#ftPhoto{position:fixed;inset:0;z-index:120;display:none}
#ftPhoto.on{display:block}
#ftPhoto .pdim{position:absolute;inset:0;background:rgba(10,29,37,.7)}
/*  ★ 창 너비는 사진 자리(800px)에 맞춰 못박는다 — 넘길 때마다 창이 늘었다
    줄었다 하면 다음 장을 누르려던 손가락이 헛나간다(naksigo 실측). */
#ftPhoto .pwin{border-radius:16px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(800px,calc((100vw - 24px) / var(--fs,1)));
  max-height:calc(min(92vh,960px) / var(--fs,1));display:flex;
  flex-direction:column;background:var(--hull);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(10,29,37,.45);overflow:hidden}
/*  전표의 머리 — 겹줄(double)로 가른다. 이 사이트의 다른 머리와 같은 결이다. */
#ftPhoto .phead{display:flex;align-items:flex-start;gap:10px;padding:9px 14px 7px;
  border-bottom:1px solid var(--line);flex:0 0 auto}
#ftPhoto .phead h3{margin:0;font-size:15px;color:var(--ink);line-height:1.35;font-weight:800}
#ftPhoto .phead h3 .who{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--dim)}
/*  ★ 출처는 **한 줄**로 자른다(뒤쪽을 자른다 — 앞의 도메인이 남아야 어디서 온
    사진인지 안다). 잘려도 눌러서 원문으로 갈 수 있고 title 에 전체가 있다. */
#ftPhoto .phead .src{display:block;margin:2px 0 0;line-height:1.35;
  font-family:var(--mono);font-size:11px;color:var(--water);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ftPhoto .phead .src:hover{text-decoration:underline}
#ftPhoto .phead .src b{color:var(--ink)}
/*  ✕ 는 44px — 폰에서 놓치면 못 닫는다. */
#ftPhoto .px{margin-left:auto;flex:0 0 auto;width:44px;height:44px;border:0;border-radius:8px;
  background:none;color:var(--dim);font-size:19px;line-height:1;cursor:pointer}
#ftPhoto .px:hover{color:var(--sonar)}
/*  ★ 사진 자리를 못박고 그림만 그 안에서 맞춘다(object-fit:contain) — 세로
    사진 다음 가로 사진을 넘겨도 창이 위아래로 튀지 않는다.
    touch-action:pan-y — 가로 몸짓만 가져간다(세로까지 막으면 창을 못 닫는다). */
#ftPhoto .pbody{flex:0 0 auto;width:100%;height:clamp(180px,calc((92vh - 168px) / var(--fs,1)),600px);
  display:flex;align-items:center;justify-content:center;background:var(--hull2);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden;cursor:grab}
#ftPhoto .pbody.drag{cursor:grabbing}
#ftPhoto .pbody img{max-width:min(800px,100%);max-height:100%;object-fit:contain;
  transition:opacity .12s,transform .16s ease;pointer-events:none}
#ftPhoto .pbody.drag img{transition:none}
#ftPhoto .pbody img.wait{opacity:.45}      /* 받는 중 — 빈 칸이 번득이는 것보다 낫다 */
@media (prefers-reduced-motion:reduce){#ftPhoto .pbody img{transition:none}}
#ftPhoto .pbody .msg{color:var(--dim);font-family:var(--mono);font-size:12.5px;padding:24px}
/*  ★ `safe` 를 붙인다 — 그냥 center 면 칸이 넘칠 때 왼쪽이 잘려 첫 장을 못 고른다. */
#ftPhoto .pfoot{flex:0 0 auto;padding:9px 10px calc(11px + env(safe-area-inset-bottom));
  border-top:1px dashed var(--line);display:flex;gap:6px;overflow-x:auto;
  justify-content:safe center;background:var(--hull)}
/*  ★ 고른 칸이 한눈에 갈리게 셋을 겹쳐 쓴다 — 나머지를 물러나게, 고른 것만
    키우고, 인주 테를 두른다(사람은 이 줄을 읽지 않고 훑는다). */
#ftPhoto .pfoot button{flex:0 0 auto;width:52px;height:42px;padding:0;border-radius:8px;
  border:1px solid var(--line);background:var(--hull2);cursor:pointer;overflow:hidden;
  opacity:.55;transform:scale(.94);transition:opacity .12s,transform .12s,box-shadow .12s}
#ftPhoto .pfoot button:hover{opacity:.85}
#ftPhoto .pfoot button img{width:100%;height:100%;object-fit:cover;display:block}
#ftPhoto .pfoot button[aria-current="true"]{opacity:1;transform:scale(1.12);
  border-color:var(--sonar);box-shadow:0 0 0 2px var(--sonar),0 2px 8px rgba(10,29,37,.3)}
@media (prefers-reduced-motion:reduce){#ftPhoto .pfoot button{transition:none}}
@media (max-width:520px){
  #ftPhoto .pwin{width:calc((100vw - 10px) / var(--fs,1));max-height:calc(94vh / var(--fs,1))}
  #ftPhoto .phead h3{font-size:14px}
  /*  폰은 세로가 귀하다 — 사진 자리를 조금 낮춰 썸네일 줄이 화면에 남게 한다. */
  #ftPhoto .pbody{height:clamp(160px,calc((94vh - 150px) / var(--fs,1)),600px)}
}
/*  썸네일은 어디에 있든 '누를 수 있는 것' 으로 보이게 한다. */
img.th{cursor:zoom-in}