/* =============================================================================
   목록 카드 개선 전·후 사진(모바일·태블릿 1열 카드) — 2026-10-01 — js/list-photos.js 의 마크업(.lph*) 전용
   진단개선·자율개선 목록 카드에서 쓴다(PC 1200px 이상은 기존 PC 카드 사진이 보이므로 이 블록은 숨긴다).
   안전점검은 기존 카드 사진(.ic-ph*, insp.css)을 모바일에도 쓰므로 이 파일의 .lph-ic 아이콘만 같은 모양으로 맞춘다.
   프레임은 같은 크기 · 원본 비율 그대로(contain) · 가로 2열 · 높이 120~160px(화면 폭에 맞춰 줄어듦).
   ========================================================================== */
.lph-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 2px;}
.lph{margin:0;min-width:0;}
.lph-f{--lph-h:clamp(120px,36vw,160px);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:var(--lph-h);margin:0;padding:0;
  border-radius:10px;overflow:hidden;background:#eef1f4;border:1px solid var(--line);font:inherit;color:inherit;text-align:center;-webkit-tap-highlight-color:transparent;}
.lph-media.is-auto .lph-f{--lph-h:clamp(130px,40vw,176px);}   /* 자율개선은 전후 비교가 핵심 — 조금 더 크게 */
button.lph-f{cursor:zoom-in;}
button.lph-f:focus-visible{outline:2px solid #41a8ab;outline-offset:2px;}
.lph-f img{display:block;width:100%;height:100%;object-fit:contain;}
.lph-f.is-loading img{opacity:0;}
/* 불러오는 중: 움직이는 효과 없이 연한 바탕 + '불러오는 중…' (카드가 수십 개여도 스크롤이 가볍게 — 애니메이션이 화면 밖 칸까지 매 프레임 돌지 않게) */
.lph-msg{font-size:12.5px;font-weight:600;line-height:1.4;color:#7a8794;padding:0 8px;word-break:keep-all;}
.lph-wait,.lph-fail{position:absolute;inset:0;display:none;align-items:center;justify-content:center;}
.lph-f.is-loading .lph-wait,.lph-f.is-opening .lph-wait{display:flex;}
.lph-f.is-opening{background:rgba(238,241,244,.92);}
.lph-f.is-opening img{opacity:.35;}
.lph-f.is-empty{background:repeating-linear-gradient(135deg,#f7f9fa 0 8px,#f1f4f6 8px 16px);border-style:dashed;}
.lph-ic{display:block;width:22px;height:22px;flex:0 0 auto;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa5b1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='9' cy='10.5' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E");}
.lph-f.is-broken{background:#fdf6f4;border-color:var(--st-todo-line,#f1c6c0);}
.lph-f.is-broken img{display:none;}
.lph-f.is-broken .lph-fail{display:flex;color:var(--st-todo,#d92d20);}
.lph figcaption{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--ink-2);}
.lph figcaption b{font-weight:700;color:var(--ink-3,#667085);font-variant-numeric:tabular-nums;}
.lph.is-after figcaption span{color:var(--st-done,#12805c);}
/* 진단개선·자율개선 모바일 카드 안에서의 자리 — 사진 칸 밖(여백·캡션)을 누르면 카드처럼 상세로 간다 */
@media screen and (min-width:1200px){ .imp-mob-media{display:none;} }   /* PC 는 기존 카드(.imc)의 사진 — 같은 사진을 두 번 그리지 않는다 */
@media print{ .lph-media{display:none;} }