/* ==========================================================================
   LW Suite — 공용 미리보기(라이트박스) 컴포넌트
   iOS Liquid Glass 톤: 배경을 블러 처리하고, 이미지가 그 위에 떠 있는 구조.
   컨트롤(닫기/카운터/화살표)은 전부 반투명 유리 캡슐/원형 버튼.
   적용처: 인증서 사진 / 외형 치수·결선도 / 인증 및 적합성 서류
   ========================================================================== */

#lwLightbox{
    display:none; position:fixed; z-index:999999999;
    left:0; top:0; width:100vw;
    height:100vh; /* 구형 브라우저 fallback */
    height:100svh; /* 모바일 주소창 표시/숨김으로 100vh가 실제 화면보다 커지는 것 방지 */
    background:rgba(10,10,14,.45);
    -webkit-backdrop-filter:blur(34px) saturate(160%);
    backdrop-filter:blur(34px) saturate(160%);
    box-sizing:border-box;
    /* 여백을 변수로 분리 — 브레이크포인트별로 이 값들만 바뀌고,
       아래 img/iframe의 calc()가 항상 이 값을 그대로 참조함 (패딩과 실제 렌더 크기가 절대 어긋나지 않음) */
    --lw-lb-pad-top:72px;
    --lw-lb-pad-bottom:72px;
    --lw-lb-pad-x:72px;
    padding:var(--lw-lb-pad-top) var(--lw-lb-pad-x) var(--lw-lb-pad-bottom);
}
#lwLightbox.is-active{ display:flex; }

.lw-lb-stage{
    position:relative; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
}

/* 프레임은 강제 사이즈를 갖지 않고 내부 콘텐츠(이미지/iframe)의 실제 렌더 크기에 그대로 맞춰짐(shrink-wrap).
   → 카운터/닫기/화살표가 이 프레임 기준 모서리에 절대배치되므로, 세로로 긴 이미지든 가로로 긴 이미지든
   항상 실제로 보이는 이미지 모서리에 딱 걸침. (예전엔 height:100%로 프레임을 고정해서, 가로로 긴 이미지는
   실제 렌더 높이보다 프레임이 훨씬 커져 X 버튼이 이미지 상단보다 한참 위에 떠버렸음) */
.lw-lb-frame{
    position:relative; display:inline-flex;
    align-items:center; justify-content:center;
    max-width:100%; max-height:100%;
}
.lw-lb-frame img,
.lw-lb-frame canvas{
    /* 퍼센트(max-height:100%)가 아니라 뷰포트 기준 calc()로 상한을 직접 계산 →
       부모(frame)가 definite height를 갖고 있는지와 무관하게 항상 정확히 계산되고,
       원본 비율을 지키며 그 상한 안에서 자연스럽게 축소됨 = 렌더 크기와 프레임 크기가 항상 일치.
       canvas도 img와 동일한 replaced element라 이 규칙을 그대로 물려받는다(PDF → canvas 렌더링 참고). */
    max-width:calc(100vw - (var(--lw-lb-pad-x) * 2));
    max-height:calc(100vh - var(--lw-lb-pad-top) - var(--lw-lb-pad-bottom)); /* fallback */
    max-height:calc(100svh - var(--lw-lb-pad-top) - var(--lw-lb-pad-bottom));
    width:auto; height:auto;
    display:block;
    border-radius:var(--lw-radius-lg);
    box-shadow:0 24px 70px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
    background:var(--lw-white);
}
/* iframe은 pdf.js 로드 자체가 실패했을 때만 쓰는 예전 폴백 경로 — 이때는 브라우저 내장 뷰어가
   컨테이너 안을 어떻게 채울지 우리가 통제할 수 없으므로, 최소한 가용 공간을 전부 채우기라도 하도록 처리 */
.lw-lb-frame iframe{
    width:calc(100vw - (var(--lw-lb-pad-x) * 2));
    height:calc(100vh - var(--lw-lb-pad-top) - var(--lw-lb-pad-bottom)); /* fallback */
    height:calc(100svh - var(--lw-lb-pad-top) - var(--lw-lb-pad-bottom));
    display:block;
    box-sizing:border-box;
    border:none;
    border-radius:var(--lw-radius-lg);
    box-shadow:0 24px 70px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
    background:var(--lw-white);
}

/* PDF가 여러 페이지일 때(현재는 1페이지만 렌더링) 프레임 하단 중앙에 뜨는 안내 캡슐 */
.lw-lb-pdf-pages{
    position:absolute; left:50%; bottom:-52px; transform:translateX(-50%);
    align-items:center; height:36px; padding:0 16px;
    border-radius:999px; white-space:nowrap;
    font-size:12px; font-weight:700; letter-spacing:.2px;
    color:#fff; text-decoration:none; cursor:pointer;
}

/* ── 유리 재질 공통 베이스 ── */
.lw-lb-glass{
    background:rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);
    border:1px solid rgba(255,255,255,.32);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -1px 0 rgba(255,255,255,.06),
        0 8px 24px rgba(0,0,0,.28);
    transition:background-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
@media (hover:hover) and (pointer:fine){
    .lw-lb-glass:hover{ background:rgba(255,255,255,.24); }
}
.lw-lb-glass:active{ background:rgba(255,255,255,.3); transform:scale(.92); }

/* ── 카운터/닫기: 프레임(=이미지) 모서리에 대각선으로 걸쳐서, 이미지 크기와 무관하게
   항상 같은 상대 위치(우상단=닫기, 좌상단=카운터)에 뜸. 카운터가 없어도 닫기 위치는 그대로. ── */
.lw-lb-counter{
    position:absolute; top:-52px; left:-16px;
    display:flex; align-items:center;
    height:40px; padding:0 18px;
    border-radius:999px;
    font-size:13px; font-weight:700; letter-spacing:.2px;
    color:#fff;
}
.lw-lb-close{
    position:absolute; top:-52px; right:-16px;
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; padding:0;
    border-radius:50%;
    color:#fff; cursor:pointer;
}
.lw-lb-close svg{ width:18px; height:18px; display:block; }

/* ── 좌우 화살표: .lw-lb-frame(이미지 실제 크기) 기준으로 붙어서 항상 이미지 바로 옆에 위치 ── */
.lw-lb-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center;
    width:48px; height:48px; padding:0;
    border-radius:50%; color:#fff; cursor:pointer;
}
.lw-lb-arrow:active{ transform:translateY(-50%) scale(.9); }
.lw-lb-arrow svg{ width:22px; height:22px; display:block; }
.lw-lb-prev{ left:-60px; }
.lw-lb-next{ right:-60px; }

@media (max-width:900px){
    #lwLightbox{
        --lw-lb-pad-top:60px;
        --lw-lb-pad-bottom:60px;
        --lw-lb-pad-x:56px;
        padding:var(--lw-lb-pad-top) var(--lw-lb-pad-x) var(--lw-lb-pad-bottom);
    }
    .lw-lb-arrow{ width:42px; height:42px; }
    .lw-lb-prev{ left:-52px; }
    .lw-lb-next{ right:-52px; }
}
@media (max-width:640px){
    #lwLightbox{
        --lw-lb-pad-top:60px;
        --lw-lb-pad-bottom:96px;
        --lw-lb-pad-x:16px;
        padding:var(--lw-lb-pad-top) var(--lw-lb-pad-x) var(--lw-lb-pad-bottom);
    }
    .lw-lb-counter{ top:-44px; left:-10px; height:34px; padding:0 14px; font-size:12px; }
    .lw-lb-close{ top:-44px; right:-10px; width:34px; height:34px; }
    .lw-lb-close svg{ width:16px; height:16px; }
    .lw-lb-arrow{
        top:auto; bottom:-56px; transform:none;
        width:44px; height:44px;
    }
    .lw-lb-arrow:active{ transform:scale(.9); }
    .lw-lb-prev{ left:calc(50% - 56px); }
    .lw-lb-next{ right:calc(50% - 56px); }
    .lw-lb-pdf-pages{ bottom:-88px; font-size:11px; height:32px; padding:0 12px; }
}