/*  ★ 맨 위에 뜬다. 조과 예측 팝업(z 90)보다 위 — 예측 안의 사진도 눌러 볼 수 있게. */
#nkPhoto{position:fixed;inset:0;z-index:120;display:none}
#nkPhoto.on{display:block}
#nkPhoto .pdim{position:absolute;inset:0;background:rgba(6,20,28,.72)}
/*  ★ 창 너비는 **사진 자리(800px)에 맞춰 못박는다** (2026-08-11 지정).
    920px 짜리 창에 작은 사진이 들어오면 좌우가 휑했고, 큰 사진이 들어오면
    창이 그때그때 늘었다 줄었다 했다 — 넘길 때마다 창이 움직이면 다음 장을
    누르려던 손가락이 헛나간다. */
#nkPhoto .pwin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(800px,calc(100vw - 24px));max-height:min(92vh,960px);display:flex;
  flex-direction:column;background:var(--hull,#fff);border:1px solid var(--line,#d2e0e3);
  border-radius:16px;box-shadow:0 24px 60px rgba(6,20,28,.5);overflow:hidden}
#nkPhoto .phead{display:flex;align-items:flex-start;gap:10px;padding:8px 14px 6px;
  border-bottom:1px solid var(--line,#d2e0e3);flex:0 0 auto}
#nkPhoto .phead h3{margin:0;font-size:15.5px;color:var(--ink,#12303a);line-height:1.3}
/*  ★ 출처 줄 — 제목과 한 덩어리로 읽히게 위아래 여백을 줄였다 (2026-08-11 지정).
    사진이 주인공인 창이라 머리띠가 두꺼우면 그만큼 그림이 밀린다. */
/*  ★ 출처는 **한 줄**로 자른다 (2026-08-11 지정).
    주소가 길어 폰에서 두 줄을 먹었고, 그만큼 사진이 밀렸다. 사진이 주인공이다.
    ★ 자르는 쪽은 **뒤**다(text-overflow:ellipsis) — 앞쪽 도메인이 남아야
      '어디서 온 사진인지' 를 알 수 있다. 파일 이름은 몰라도 된다.
    ★ 잘려도 **전체 주소는 잃지 않는다** — 눌러서 원문으로 갈 수 있고,
      마우스를 올리면 title 로 전체가 뜬다. */
#nkPhoto .phead .src{display:block;margin:1px 0 0;line-height:1.35;
  font-family:var(--mono,monospace);font-size:11px;color:var(--dim,#5f7c87);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nkPhoto .phead .src:hover{text-decoration:underline}
/*  ★ ✕ 는 44px. 폰에서 놓치면 못 닫는다. */
#nkPhoto .px{margin-left:auto;flex:0 0 auto;width:44px;height:44px;border:0;border-radius:11px;
  background:none;color:var(--dim,#5f7c87);font-size:19px;line-height:1;cursor:pointer}
/*  ★ 좌우로 끌어 넘긴다 (2026-08-11 지정).
    touch-action:pan-y — **가로 몸짓만 우리가 가져간다.** none 으로 막으면
    폰에서 이 칸 위에서는 세로로도 못 움직여 창을 못 닫는 사람이 생긴다.
    ★ user-select:none — 끄는 동안 그림·글자가 파랗게 선택되는 것을 막는다. */
/*  ★ 사진 자리는 **800×600 으로 고정**한다 (2026-08-11 지정).
    전에는 flex:1 이라 자리가 그림 크기를 따라갔다 — 세로 사진 다음에 가로
    사진을 넘기면 창이 위아래로 튀었고, 아래 썸네일 줄까지 함께 움직였다.
    자리를 못박고 그림만 그 안에서 맞춘다(object-fit:contain) — 작은 그림은
    가운데에 놓이고, 큰 그림은 800×600 안으로 줄어든다.
    ★ 좁은 화면에서는 vw·vh 로 줄어든다. 못박은 것은 '비율'이 아니라 '상한'이다. */
/*  ★ 높이는 clamp 로 잡는다 — 자리가 넉넉하면 600px 을 다 쓰고(상한),
    창이 낮으면 머리띠·썸네일 줄이 잘리지 않게 줄어든다(하한 180px). */
#nkPhoto .pbody{flex:0 0 auto;width:100%;height:clamp(180px,calc(92vh - 168px),600px);
  display:flex;align-items:center;
  justify-content:center;background:var(--hull-2,#edf3f4);padding:0;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden;
  cursor:grab}
#nkPhoto .pbody.drag{cursor:grabbing}
#nkPhoto .pbody img{max-width:min(800px,100%);max-height:100%;object-fit:contain;border-radius:8px;
  transition:opacity .12s,transform .16s ease;pointer-events:none}
#nkPhoto .pbody.drag img{transition:none}
/*  받는 동안 — 지우지 않고 흐리게만. 빈 칸이 번득이는 것보다 낫다. */
#nkPhoto .pbody img.wait{opacity:.45}
@media (prefers-reduced-motion:reduce){#nkPhoto .pbody img{transition:none}}
#nkPhoto .pbody .msg{color:var(--dim,#5f7c87);font-size:13px;padding:24px}
/*  ★ 가운데 정렬 (2026-08-11 지정). `safe` 를 붙이는 이유 — 그냥 center 면
    칸이 넘칠 때 **왼쪽이 잘려** 첫 장을 영영 못 고른다(넘치면 start 로 붙는다). */
#nkPhoto .pfoot{position:relative;flex:0 0 auto;
  padding:9px 10px calc(11px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line,#d2e0e3);display:flex;gap:6px;overflow-x:auto;
  justify-content:safe center}
/*  ★ 고른 칸이 **한눈에 갈리게** 한다 (2026-08-11 지정).
    테두리 하나로는 작은 화면에서 안 보였다. 셋을 겹쳐 쓴다:
      ① 나머지를 물러나게(흐리고 조금 작게) ② 고른 것만 또렷하게 키우고
      ③ 굵은 테를 두른다. 셋 중 하나만 써도 알아보지만, 겹쳐야 **훑을 때**도
      눈에 걸린다(사람은 이 줄을 읽지 않고 훑는다). */
#nkPhoto .pfoot button{flex:0 0 auto;width:52px;height:42px;padding:0;border-radius:8px;
  border:1px solid var(--line,#d2e0e3);background:var(--hull-2,#edf3f4);cursor:pointer;
  overflow:hidden;opacity:.55;transform:scale(.94);
  transition:opacity .12s,transform .12s,box-shadow .12s}
#nkPhoto .pfoot button:hover{opacity:.85}
#nkPhoto .pfoot button img{width:100%;height:100%;object-fit:cover;display:block}
#nkPhoto .pfoot button[aria-current="true"]{opacity:1;transform:scale(1.12);
  border-color:var(--sonar,#f0a038);
  box-shadow:0 0 0 3px var(--sonar,#f0a038),0 2px 8px rgba(6,20,28,.28)}
@media (prefers-reduced-motion:reduce){#nkPhoto .pfoot button{transition:none}}
/*  ★ '3 / 13' 같은 세는 칸을 **없앴다** (2026-08-11 지정).
    고른 칸이 눈에 확실하면 숫자는 같은 말을 두 번 하는 것이고, 그 자리만큼
    그림 줄이 밀린다. 대신 아래처럼 고른 칸을 크게 벌려 놓는다. */
@media (max-width:520px){
  #nkPhoto .pwin{width:calc(100vw - 10px);max-height:94vh;border-radius:14px}
  #nkPhoto .phead h3{font-size:14px}
  /*  폰은 세로가 귀하다 — 사진 자리를 조금 낮춰 썸네일 줄이 화면에 남게 한다. */
  #nkPhoto .pbody{height:clamp(160px,calc(94vh - 150px),600px)}
}
/*  배 상세의 '최근 조황사진' 넉 장 */
.nkstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.nkstrip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;
  border:1px solid var(--line,#d2e0e3);cursor:zoom-in;background:var(--hull-2,#edf3f4)}
.nkstrip .none{grid-column:1/-1;color:var(--dim,#5f7c87);font-size:12px;margin:2px}
/*  썸네일은 어디에 있든 '누를 수 있는 것' 으로 보이게 한다. */
img.th{cursor:zoom-in}