/* 원본(relative, 흐름) + blur(absolute, 위에 덮음) */
.progressive-image {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    background: transparent;
}

.progressive-image:not(.is-loaded) {
    background: #ebebeb;
}

.progressive-image__full {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.progressive-image__placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    filter: blur(14px);
    transform: scale(1.06);
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.progressive-image.is-loaded .progressive-image__full {
    opacity: 1;
}

.progressive-image.is-loaded .progressive-image__placeholder {
    opacity: 0;
}

/* cover: 썸네일·헤더 — 부모가 비율/높이를 잡음 */
.progressive-image--cover {
    height: 100%;
}

.progressive-image--cover .progressive-image__full {
    height: 100%;
    object-fit: cover;
}

.progressive-image--cover .progressive-image__placeholder {
    object-fit: cover;
}

.portfolio-header .progressive-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

main section.portfolio ul.portfolio-list li > a .progressive-image {
    height: 100%;
}

ul.portfolio-list li.portfolio-item .image .progressive-image {
    width: 100%;
    height: 100%;
}

/* inline: 본문 — 원본이 높이를 잡고 blur만 덮음 */
.progressive-image--inline {
    height: auto;
}

.progressive-image--inline .progressive-image__full {
    height: auto;
    object-fit: contain;
}

.progressive-image--inline .progressive-image__placeholder {
    object-fit: contain;
}

section.portfolio-content .image-wrapper .progressive-image--inline {
    aspect-ratio: auto;
}