/* 2026-10-16 (fold1) — 폴더블·가로 화면 호환 최소 수정. 가상 검증에서 재현된 문제만 다룬다.
   공통 CSS(style.css·viewer.css)는 수정하지 않는다. 이 파일을 빼면 이전 상태 그대로 돌아간다.
   모든 규칙은 아래 조건으로 범위를 한정한다 — 데스크톱·세로 화면·태블릿(높이 620px 초과)에는 적용되지 않는다. */

/* ① 터치 가로 화면(높이 ≤620px) + 폭 ≥881px: 작품 상세 이미지가 보이지 않던 문제.
   원인: 넓은 화면 뷰어 규칙의 .lightbox-stage{height:100vh; contain:size layout paint}에
   가로 화면 규칙의 height:auto가 덮이면서, size containment 때문에 영역 높이가 0이 되고 paint containment가 이미지를 전부 가렸다.
   수정: 가로 화면 규칙이 이미 쓰는 최대 높이(82vh)를 실제 높이로 지정한다. containment(성능 목적)는 그대로 둔다.
   대상 예: Z Fold 커버 가로 882×344, Galaxy S Ultra 가로 915×412, 대형 iPhone 가로 932×430 */
@media (min-width:881px) and (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:620px) {
  .lightbox-inner .lightbox-stage { height: 82vh !important; }
}

/* ② 터치 가로 화면(높이 ≤620px) + 폭 ≤880px: 작품 아래쪽 약 14px 잘림.
   원인: 세로 화면용 상단 여백(닫기 버튼 회피, padding-top 28px)이 가로 화면에도 남아,
   82vh 이미지 + 28px이 82vh 영역을 넘쳤다. 가로 화면 닫기 버튼은 오른쪽 여백(72px)에 있어 이 여백이 필요 없다.
   (가로 화면 규칙이 원래 의도한 padding:0으로 되돌린다.) */
@media (max-width:880px) and (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:620px) {
  .lightbox-inner .lightbox-stage { padding-top: 0 !important; }
  /* 폭이 아주 좁은 가로 창(분할 화면 등)에서 이미지가 영역보다 넓어 좌우가 잘리던 문제 — 영역 폭을 넘지 않게만 한다. */
  .lightbox-inner .lightbox-stage #lightboxImage { max-width: min(64vw, 100%) !important; }
}

/* ③ 뷰어 닫기 버튼(768px 이하, 보이는 크기 34×34px): 모양·위치는 그대로, 투명한 터치 영역만 사방 5px 넓혀 44×44px. */
@media (max-width:768px) {
  #viewerCloseBtn::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
}

/* ④ 작품 카드 캡션: 카드가 아주 좁을 때(Z Fold 커버 320~344px 세로, 3열 가로) "크기 · 연도"가 카드 밖으로 밀려 연도가 잘리던 문제.
   ui.js가 크기와 연도를 각각 줄바꿈 없는 조각으로 감싼다 — 한 줄에 들어가면 지금과 똑같이 한 줄,
   들어가지 않을 때만 "·" 뒤에서 연도가 다음 줄로 내려간다. (fold2부터 크기 자체가 캡션 폭보다 넓을 때만 치수 사이에서도 줄바꿈 —
   숫자·소수점·"숫자 단위" 내부는 줄바꿈되지 않는다.) */
.card .meta .s .size-year.sy-split { white-space: normal; }
/* 2026-10-16 (fold2) — 크기 문자열도 치수 단위 조각(ui.js sizeParts)으로 나뉜다. "크기 · 연도" 묶음은 한 덩어리(inline-block)로 움직여
   지금처럼 통째로 다음 줄로 넘어가고(재료 줄 끝에 크기 일부가 붙지 않음), 묶음이 캡션 폭(100%)보다 넓을 때만 그 안에서
   "·" 뒤 → 치수 사이 순서로 줄을 바꾼다. 미디어 쿼리 없이 실제 캡션 폭 기준. 글자 크기·색·간격 무변경. */
.card .meta .s .size-year.sy-split { display: inline-block; max-width: 100%; margin-right: -0.04px; }
/* margin-right:-0.04px — 한 덩어리(inline-block)의 폭 계산이 일반 글자 흐름보다 소수점 이하로 커지는 반올림 차이 보정.
   캡션 끝에 꼭 맞는 경우에도 기존과 같은 줄바꿈이 되도록 맞춘 값(눈에 보이는 위치 변화 없음). */
.card .meta .s .size-year .sy-part { white-space: nowrap; }