@charset "utf-8";

/* 히어로 필름 */
.prj-hero-section .media-box {aspect-ratio: 16 / 9;}

/* 인트로 */
.prj-intro-section {padding-block: var(--space-120) var(--space-160);}
.prj-intro-section .intro-wrap {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--space-40);}
.prj-intro-section .intro-wrap .tit-wrap {display: flex; flex-direction: column; row-gap: var(--space-16); width: 40.948%; min-width: 0;}
.prj-intro-section .intro-wrap .tit-wrap .ui-label {color: var(--text-muted);}
.prj-intro-section .intro-wrap .tit-wrap .display-hero {color: var(--text-strong);}
.prj-intro-section .intro-wrap .txt-wrap {display: flex; flex-direction: column; row-gap: var(--space-20); width: 32.328%; min-width: 0; padding-top: var(--space-8);}
.prj-intro-section .intro-wrap .txt-wrap .editorial-lead-kr {color: var(--text-primary);}
.prj-intro-section .intro-wrap .txt-wrap .key-value-list {row-gap: 10px; padding-top: var(--space-24); border-top: 1px solid var(--border-subtle);}

/* 콜라주 */
.prj-collage-section {padding-bottom: calc(var(--space-160) + var(--space-40));}
.prj-collage-section .collage-row {display: flex; align-items: flex-start; justify-content: space-between;}
.prj-collage-section .collage-row .media-item {display: flex; flex-direction: column; row-gap: var(--space-16); flex: none; min-width: 0;}
.prj-collage-section .collage-row .media-item .media-box {position: relative; overflow: hidden; background-color: var(--bg-image-placeholder);}
.prj-collage-section .collage-row .media-item .media-box > img, .prj-collage-section .collage-row .media-item .media-box > .img-placeholder {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.prj-collage-section .collage-row .media-item.film .media-box {aspect-ratio: 9 / 16;}
.prj-collage-section .collage-row .media-item.portrait .media-box {aspect-ratio: 4 / 5;}
.prj-collage-section .collage-row .media-item.landscape .media-box {aspect-ratio: 3 / 2;}
.prj-collage-section .collage-row .media-item.square .media-box {aspect-ratio: 1 / 1;}
.prj-collage-section .collage-row .media-item.portrait-tall .media-box {aspect-ratio: 3 / 4;}
.prj-collage-section.film-portrait .collage-row .media-item.film {width: 25.862%;}
.prj-collage-section.film-portrait .collage-row .media-item.portrait {width: 38.793%; padding-top: 19.397%;}
.prj-collage-section.landscape-film .collage-row .media-item.landscape {width: 56.034%;}
.prj-collage-section.landscape-film .collage-row .media-item.film {width: 21.552%; padding-top: 23.707%;}
.prj-collage-section.notes-square {padding-bottom: var(--space-120);}
.prj-collage-section.notes-square .collage-row {justify-content: flex-start; column-gap: 4.31%;}
.prj-collage-section.notes-square .collage-row .notes-wrap {display: flex; flex-direction: column; row-gap: var(--space-16); flex: none; width: 23.707%; padding-top: 6.466%;}
.prj-collage-section.notes-square .collage-row .notes-wrap .display-small {color: var(--text-strong);}
.prj-collage-section.notes-square .collage-row .notes-wrap .body-default {color: var(--text-secondary);}
.prj-collage-section.notes-square .collage-row .media-item.square {width: 23.707%; padding-top: 17.241%;}
.prj-collage-section.notes-square .collage-row .media-item.portrait-tall {width: 30.172%;}

/* 인용문 */
.prj-quote-section {padding-bottom: calc(var(--space-160) + var(--space-40));}
.prj-quote-section .pull-quote {width: 56.034%; margin-left: 21.552%;}

/* 스틸 */
.prj-still-section {padding-bottom: calc(var(--space-160) + var(--space-40));}
.prj-still-section .media-item {display: flex; flex-direction: column; row-gap: var(--space-20);}
.prj-still-section .media-item .media-box {position: relative; aspect-ratio: 2 / 1; overflow: hidden; background-color: var(--bg-image-placeholder);}
.prj-still-section .media-item .media-box > img, .prj-still-section .media-item .media-box > .img-placeholder {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.prj-still-section .media-item .editorial-caption {max-width: calc((100% - var(--layout-page-margin) * 2) * 0.25862); margin-inline: var(--layout-page-margin);}

/* 컬렉션 쇼핑 */
.prj-shop-section {padding-block: var(--space-120) var(--space-160);}
.prj-shop-section .shop-head {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-16); padding-bottom: var(--space-24);}
.prj-shop-section .shop-head .body-default {color: var(--text-primary);}
.prj-shop-section .shop-head .view-link {flex: none; color: var(--text-secondary); transition: color 0.2s;}
.prj-shop-section .product-list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-40) var(--space-24);}
.prj-shop-section .product-list .product-item .product-link {display: flex; flex-direction: column; row-gap: var(--space-12);}
.prj-shop-section .product-list .product-item .product-link .img-wrap {position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background-color: var(--bg-image-placeholder);}
.prj-shop-section .product-list .product-item .product-link .img-wrap img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s;}
.prj-shop-section .product-list .product-item .product-link .img-wrap .hover-img {opacity: 0;}
.prj-shop-section .product-list .product-item .product-link .img-wrap .img-placeholder {height: 100%;}
.prj-shop-section .product-list .product-item .product-link .product-meta {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--space-12);}
.prj-shop-section .product-list .product-item .product-link .product-meta .product-name {min-width: 0; color: var(--text-primary);}
.prj-shop-section .product-list .product-item .product-link .product-meta .price-txt {flex: none; color: var(--text-secondary);}
.prj-shop-section .product-list .product-item .product-link:focus-visible {outline: 1px solid var(--border-strong); outline-offset: var(--space-4);}

/* 호버 */
@media (hover: hover) {
    .prj-shop-section .shop-head .view-link:hover {color: var(--text-primary);}
    .prj-shop-section .product-list .product-item .product-link:hover .img-wrap .hover-img {opacity: 1;}
    .prj-shop-section .product-list .product-item .product-link:hover .product-meta .product-name {text-decoration: underline; text-underline-offset: 3px;}
}

@media screen and (max-width: 1440px) {
    .prj-intro-section .intro-wrap .tit-wrap {width: 44.186%;}
    .prj-intro-section .intro-wrap .txt-wrap {width: 34.884%;}

    .prj-collage-section.film-portrait .collage-row .media-item.film {width: 27.907%;}
    .prj-collage-section.film-portrait .collage-row .media-item.portrait {width: 41.86%; padding-top: 20.93%;}
    .prj-collage-section.landscape-film .collage-row .media-item.landscape {width: 60.465%;}
    .prj-collage-section.landscape-film .collage-row .media-item.film {width: 23.256%; padding-top: 25.581%;}
    .prj-collage-section.notes-square .collage-row {column-gap: 5.814%;}
    .prj-collage-section.notes-square .collage-row .notes-wrap {width: 25.581%; padding-top: 6.977%;}
    .prj-collage-section.notes-square .collage-row .media-item.square {width: 25.581%; padding-top: 18.605%;}
    .prj-collage-section.notes-square .collage-row .media-item.portrait-tall {width: 32.558%;}

    .prj-quote-section .pull-quote {width: 76.744%; margin-left: 23.256%;}

    .prj-still-section .media-item .editorial-caption {max-width: calc((100% - var(--layout-page-margin) * 2) * 0.27907);}
}

@media screen and (max-width: 1024px) {
    .prj-intro-section .intro-wrap .tit-wrap {width: 45.902%;}
    .prj-intro-section .intro-wrap .txt-wrap {width: 36.27%;}

    .prj-collage-section.film-portrait .collage-row .media-item.film {width: 29%;}
    .prj-collage-section.film-portrait .collage-row .media-item.portrait {width: 43.545%; padding-top: 21.721%;}
    .prj-collage-section.landscape-film .collage-row .media-item.landscape {width: 62.91%;}
    .prj-collage-section.landscape-film .collage-row .media-item.film {width: 24.18%; padding-top: 26.639%;}
    .prj-collage-section.notes-square .collage-row {column-gap: 3.279%;}
    .prj-collage-section.notes-square .collage-row .notes-wrap {width: 26.639%; padding-top: 7.275%;}
    .prj-collage-section.notes-square .collage-row .media-item.square {width: 26.639%; padding-top: 19.365%;}
    .prj-collage-section.notes-square .collage-row .media-item.portrait-tall {flex: 1 1 auto; width: auto;}

    .prj-quote-section .pull-quote {width: 75.82%; margin-left: 24.18%;}

    .prj-still-section .media-item .editorial-caption {max-width: calc((100% - var(--layout-page-margin) * 2) * 0.29);}

    .prj-shop-section .product-list {grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-16);}
}

@media screen and (max-width: 768px) {
    .prj-intro-section {padding-top: var(--space-40);}
    .prj-intro-section .intro-wrap {flex-direction: column; row-gap: var(--space-32);}
    .prj-intro-section .intro-wrap .tit-wrap, .prj-intro-section .intro-wrap .txt-wrap {width: 100%;}

    .prj-collage-section .collage-row, .prj-collage-section.notes-square .collage-row {flex-direction: column; align-items: stretch; row-gap: var(--space-32);}
    .prj-collage-section .collage-row .media-item, .prj-collage-section.film-portrait .collage-row .media-item.film, .prj-collage-section.film-portrait .collage-row .media-item.portrait, .prj-collage-section.landscape-film .collage-row .media-item.landscape, .prj-collage-section.landscape-film .collage-row .media-item.film, .prj-collage-section.notes-square .collage-row .media-item.square, .prj-collage-section.notes-square .collage-row .media-item.portrait-tall {width: 100%; padding-top: 0;}
    .prj-collage-section.notes-square .collage-row .notes-wrap {width: 100%; padding-top: 0;}

    .prj-quote-section .pull-quote {width: 100%; margin-left: 0;}

    .prj-still-section .media-item .editorial-caption {max-width: none;}

    .prj-shop-section .product-list {gap: var(--space-32) var(--space-12);}
}