@charset "utf-8";
/* 이미지 확대 보기 — 라이트박스 (2026-10-22 · js/img_lightbox.js) */

html.ilb-lock, html.ilb-lock body { overflow: hidden;}

.ilb { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000;    /* #header 가 99999 */ background: rgba(17,17,17,0.92); font-family: inherit;}
.ilb.is-open { display: block;}

.ilb-stage { position: absolute; top: 56px; right: 72px; bottom: 64px; left: 72px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.ilb-img { display: block; max-width: 100%; max-height: 100%; background: #fff; cursor: zoom-in; box-shadow: 0 6px 30px rgba(0,0,0,0.45); user-select: none; -webkit-user-drag: none;}
.ilb.is-loading .ilb-img { opacity: 0.3;}

.ilb.is-zoom .ilb-stage { display: block; overflow: auto; -webkit-overflow-scrolling: touch;}
.ilb.is-zoom .ilb-img { max-width: none; max-height: none; margin: 0 auto; cursor: grab;}

.ilb-btn { position: absolute; padding: 0; border: 0; background: transparent; color: #fff; font-family: Arial, sans-serif; line-height: 1; cursor: pointer; opacity: 0.8;}
.ilb-btn:hover, .ilb-btn:focus { opacity: 1;}
.ilb-btn:focus { outline: 2px solid #f39800; outline-offset: 2px;}
.ilb-close { top: 8px; right: 14px; width: 44px; height: 44px; font-size: 40px;}
.ilb-prev, .ilb-next { top: 50%; width: 56px; height: 80px; margin-top: -40px; font-size: 64px;}
.ilb-prev { left: 8px;}
.ilb-next { right: 8px;}
.ilb.is-single .ilb-prev, .ilb.is-single .ilb-next { display: none;}

/* 썸네일 줄 — 그림이 2장 이상일 때 큰 그림 밑 */
.ilb-thumbs { position: absolute; right: 72px; bottom: 52px; left: 72px; display: flex; justify-content: center; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;}
.ilb-thumbs:empty, .ilb.is-single .ilb-thumbs { display: none;}
.ilb.is-open:not(.is-single) .ilb-stage { bottom: 136px;}
.ilb-thumb { flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; background: #fff; cursor: pointer; opacity: 0.55;}
.ilb-thumb img { display: block; width: 100%; height: 100%; object-fit: contain;}
.ilb-thumb:hover, .ilb-thumb:focus { opacity: 0.9;}
.ilb-thumb:focus { outline: 2px solid #f39800; outline-offset: 2px;}
.ilb-thumb.is-on { border-color: #f39800; opacity: 1;}

.ilb-bar { position: absolute; right: 72px; bottom: 18px; left: 72px; display: flex; align-items: center; gap: 16px; color: #ddd; font-size: 14px;}
.ilb-title { color: #fff; font-weight: bold;}
.ilb-hint { color: #999;}
.ilb-open { margin-left: auto; color: #ddd; text-decoration: underline;}
.ilb-open:hover { color: #fff;}

@media all and (max-width:767px) {
    .ilb-stage { top: 52px; right: 8px; bottom: 56px; left: 8px;}
    .ilb-prev, .ilb-next { width: 40px; height: 64px; margin-top: -32px; font-size: 44px; background: rgba(0,0,0,0.35);}
    .ilb-prev { left: 0;}
    .ilb-next { right: 0;}
    .ilb-bar { right: 12px; bottom: 14px; left: 12px; gap: 10px; font-size: 13px;}
    .ilb-hint { display: none;}
    .ilb-thumbs { right: 8px; bottom: 46px; left: 8px; justify-content: flex-start; gap: 6px;}
    .ilb.is-open:not(.is-single) .ilb-stage { bottom: 112px;}
    .ilb-thumb { width: 52px; height: 52px;}
}