@charset "utf-8";

/* 컬렉션 목록 */
.col-list-section {padding-block: var(--space-48) var(--space-160);}
.col-list-section .col-head {display: flex; align-items: flex-end; justify-content: space-between; column-gap: var(--space-40); padding-block: var(--space-64) calc(var(--space-64) + var(--space-8));}
.col-list-section .col-head .tit-wrap {display: flex; flex-direction: column; row-gap: var(--space-16); min-width: 0;}
.col-list-section .col-head .tit-wrap .ui-label {color: var(--text-muted);}
.col-list-section .col-head .tit-wrap .display-hero {color: var(--text-strong);}
.col-list-section .col-head .txt-wrap {display: flex; flex-direction: column; row-gap: var(--space-20); flex: 0 1 520px; min-width: 0;}
.col-list-section .col-head .txt-wrap .body-default {color: var(--text-secondary);}
.col-list-section .col-head .txt-wrap .popup-txt {color: var(--text-muted);}

/* 시즌 탭 */
.col-list-section .col-tab-bar {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-24); border-bottom: 1px solid var(--border-subtle);}
.col-list-section .col-tab-bar .col-season-nav {min-width: 0;}
.col-list-section .col-tab-bar .col-season-nav .tab-list {column-gap: calc(var(--space-32) + var(--space-4));}
.col-list-section .col-tab-bar .col-season-nav .tab-list .tab {display: block;}
.col-list-section .col-tab-bar .look-count {flex: none; color: var(--text-muted);}

/* 룩 */
.col-list-section .look-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-80) var(--space-32); padding-top: calc(var(--space-48) + var(--space-8));}
.col-list-section .look-list .look-item .look-card {display: flex; flex-direction: column; row-gap: var(--space-12);}
.col-list-section .look-list .look-item .look-card .img-wrap {position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background-color: var(--bg-image-placeholder);}
.col-list-section .look-list .look-item .look-card .img-wrap img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s;}
.col-list-section .look-list .look-item .look-card .img-wrap .hover-img {opacity: 0;}
.col-list-section .look-list .look-item .look-card .img-wrap .img-placeholder {height: 100%;}
.col-list-section .look-list .look-item .look-card .look-meta {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--space-12);}
.col-list-section .look-list .look-item .look-card .look-meta .look-tit {color: var(--text-primary);}
.col-list-section .look-list .look-item .look-card .look-meta .look-num {flex: none; color: var(--text-muted);}
.col-list-section .look-list .look-item .look-card:focus-visible {outline: 1px solid var(--border-strong); outline-offset: var(--space-4);}

/* Archive */
.col-list-section .archive-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-80) var(--space-32); padding-top: calc(var(--space-48) + var(--space-8));}
.col-list-section .archive-list .archive-item .archive-card {display: flex; flex-direction: column; row-gap: var(--space-12);}
.col-list-section .archive-list .archive-item .archive-card .img-wrap {position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background-color: var(--bg-image-placeholder);}
.col-list-section .archive-list .archive-item .archive-card .img-wrap img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s;}
.col-list-section .archive-list .archive-item .archive-card .img-wrap .img-placeholder {height: 100%;}
.col-list-section .archive-list .archive-item .archive-card .archive-meta {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--space-12);}
.col-list-section .archive-list .archive-item .archive-card .archive-meta .txt-wrap {display: flex; flex-direction: column; row-gap: var(--space-4); min-width: 0;}
.col-list-section .archive-list .archive-item .archive-card .archive-meta .txt-wrap .archive-tit {color: var(--text-primary);}
.col-list-section .archive-list .archive-item .archive-card .archive-meta .txt-wrap .archive-season {color: var(--text-muted);}
.col-list-section .archive-list .archive-item .archive-card .archive-meta .look-num {flex: none; color: var(--text-muted);}
.col-list-section .archive-list .archive-item .archive-card:focus-visible {outline: 1px solid var(--border-strong); outline-offset: var(--space-4);}

/* 컬렉션 쇼핑 */
.col-list-section .col-shop {display: flex; flex-direction: column; align-items: center; row-gap: var(--space-20); padding-top: var(--space-120); text-align: center;}
.col-list-section .col-shop .body-default {color: var(--text-secondary);}
.col-list-section .empty-state {padding-block: var(--space-120) 0;}

/* 룩 상세 */
.col-look-section {padding-top: var(--space-48);}
.col-look-section .look-wrap {display: grid; grid-template-columns: minmax(0, 968px) minmax(288px, 1fr); align-items: start; column-gap: clamp(var(--space-64), 5vw - 8px, 88px); padding: 0 clamp(28px, 17.5vw - 224px, 112px) var(--space-160) clamp(28px, 50vw - 692px, 268px);}

/* 룩 갤러리 */
.col-look-section .look-wrap .look-gallery {display: flex; flex-direction: column; row-gap: var(--space-20); min-width: 0;}
.col-look-section .look-wrap .look-gallery .gallery-view {width: 100%; overflow: hidden;}
.col-look-section .look-wrap .look-gallery .gallery-view .gallery-list .gallery-item {position: relative; aspect-ratio: 3 / 4; overflow: hidden; background-color: var(--bg-image-placeholder);}
.col-look-section .look-wrap .look-gallery .gallery-view .gallery-list .gallery-item img, .col-look-section .look-wrap .look-gallery .gallery-view .gallery-list .gallery-item .img-placeholder {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.col-look-section .look-wrap .look-gallery .gallery-nav {display: flex; align-items: center; justify-content: space-between; height: var(--space-32);}
.col-look-section .look-wrap .look-gallery .gallery-nav .ico-btn:disabled {opacity: 0.3; cursor: default;}
.col-look-section .look-wrap .look-gallery .gallery-nav .prev-btn {margin-left: calc(var(--space-12) * -1);}
.col-look-section .look-wrap .look-gallery .gallery-nav .next-btn {margin-right: calc(var(--space-12) * -1);}
.col-look-section .look-wrap .look-gallery .gallery-nav .gallery-count {color: var(--text-secondary);}

/* 룩 정보 */
.col-look-section .look-wrap .look-info {position: sticky; top: calc(var(--header-height) + var(--space-32)); display: flex; flex-direction: column; row-gap: var(--space-40); min-width: 0;}
.col-look-section .look-wrap .look-info .tit-wrap {display: flex; flex-direction: column; row-gap: var(--space-12);}
.col-look-section .look-wrap .look-info .tit-wrap .ui-label {color: var(--text-muted);}
.col-look-section .look-wrap .look-info .tit-wrap .display-hero {color: var(--text-strong);}
.col-look-section .look-wrap .look-info .tit-wrap .body-default {color: var(--text-secondary);}
.col-look-section .look-wrap .look-info .worn-wrap {display: flex; flex-direction: column; row-gap: var(--space-12); padding-top: var(--space-40); border-top: 1px solid var(--border-subtle);}
.col-look-section .look-wrap .look-info .worn-wrap .caption-default {color: var(--text-muted);}
.col-look-section .look-wrap .look-info .worn-wrap .worn-list {display: flex; flex-direction: column; row-gap: var(--space-12);}
.col-look-section .look-wrap .look-info .worn-wrap .worn-list .worn-item {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-16);}
.col-look-section .look-wrap .look-info .worn-wrap .worn-list .worn-item .body-small {min-width: 0; color: var(--text-primary);}
.col-look-section .look-wrap .look-info .worn-wrap .worn-list .worn-item .caption-small {flex: none; color: var(--text-muted); text-align: right;}
.col-look-section .look-wrap .look-info .btn-list {display: flex; flex-direction: column; row-gap: var(--space-12);}
.col-look-section .look-wrap .look-info .btn-list .square-btn {width: 100%; min-width: 0;}

/* Shop the Look */
.look-drawer {position: fixed; top: 0; right: 0; bottom: 0; z-index: 300; display: flex; flex-direction: column; width: min(560px, 100%); background-color: var(--bg-canvas); visibility: hidden; transform: translateX(100%); transition: transform 0.3s var(--ease-out), visibility 0.3s;}
.look-drawer.open {visibility: visible; transform: translateX(0); transition: transform 0.3s var(--ease-out), visibility 0s;}
.look-drawer.dragging {transition: none;}
.look-drawer .sheet-handle {display: none;}
.look-drawer .drawer-head {display: flex; flex-direction: column; row-gap: var(--space-12); flex: none; padding: var(--space-32) var(--space-40) calc(var(--space-24) + var(--space-4)); border-bottom: 1px solid var(--border-subtle);}
.look-drawer .drawer-head .head-top {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-16);}
.look-drawer .drawer-head .head-top .ui-label {color: var(--text-muted);}
.look-drawer .drawer-head .head-top .close-btn {margin-block: calc(var(--space-12) * -1); margin-right: calc(var(--space-12) * -1);}
.look-drawer .drawer-head .display-subsection {color: var(--text-strong);}
.look-drawer .drawer-head .caption-default {color: var(--text-secondary);}
.look-drawer .drawer-body {flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-8) var(--space-40) 0;}
.look-drawer .drawer-body .shop-look-list .shop-look-item {display: flex; align-items: stretch; column-gap: var(--space-24); padding-block: var(--space-20); border-bottom: 1px solid var(--border-subtle); transition: background-color 0.2s;}
.look-drawer .drawer-body .shop-look-list .shop-look-item .thumb {flex: none; width: 132px; height: auto; aspect-ratio: 3 / 4; padding: 0; object-fit: cover;}
.look-drawer .drawer-body .shop-look-list .shop-look-item .item-info {display: flex; flex-direction: column; row-gap: 6px; flex: 1 1 auto; min-width: 0;}
.look-drawer .drawer-body .shop-look-list .shop-look-item .item-info .txt-wrap {display: flex; flex-direction: column; row-gap: var(--space-4);}
.look-drawer .drawer-body .shop-look-list .shop-look-item .item-info .txt-wrap .product-title {color: var(--text-primary);}
.look-drawer .drawer-body .shop-look-list .shop-look-item .item-info .txt-wrap .name-en {color: var(--text-muted);}
.look-drawer .drawer-body .shop-look-list .shop-look-item .item-info .txt-wrap .product-price {color: var(--text-secondary);}
.look-drawer .drawer-body .shop-look-list .shop-look-item .item-info .size-txt {padding-top: var(--space-8); color: var(--text-muted);}
.look-drawer .drawer-body .shop-look-list .shop-look-item .item-info .view-txt {display: inline-flex; align-items: center; align-self: flex-start; column-gap: 6px; margin-top: auto; padding-top: var(--space-12); color: var(--text-primary); text-underline-offset: 4px; text-decoration-thickness: 1px;}
.look-drawer .drawer-body .shop-look-list .shop-look-item .item-info .view-txt img {width: 14px; height: 14px;}
.look-drawer .drawer-body .shop-look-list .shop-look-item:focus-visible {outline: 1px solid var(--border-strong); outline-offset: -1px;}
.look-drawer .drawer-foot {flex: none; padding: var(--space-20) var(--space-40) calc(var(--space-32) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle);}
.look-drawer .drawer-foot .caption-small {color: var(--text-muted);}
.look-drawer-dim {position: fixed; inset: 0; z-index: 299; background-color: var(--overlay-scrim); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;}
.look-drawer-dim.open {opacity: 1; visibility: visible;}

/* 하단 바 */
.look-bar {display: none;}

/* 호버 */
@media (hover: hover) {
    .col-list-section .look-list .look-item .look-card:hover .img-wrap .hover-img {opacity: 1;}
    .col-list-section .archive-list .archive-item .archive-card:hover .img-wrap img {opacity: 0.85;}
    .col-look-section .look-wrap .look-gallery .gallery-nav .ico-btn:not(:disabled):hover {opacity: 0.6;}
    .look-drawer .drawer-body .shop-look-list .shop-look-item:hover {background-color: var(--bg-soft);}
    .look-drawer .drawer-body .shop-look-list .shop-look-item:hover .item-info .view-txt {text-decoration: underline;}
}

@media screen and (max-width: 1024px) {
    .col-list-section .col-head .txt-wrap {flex-basis: 400px;}
    .col-list-section .look-list, .col-list-section .archive-list {row-gap: calc(var(--space-48) + var(--space-8)); column-gap: var(--space-24);}

    .col-look-section .look-wrap {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-32); padding: 0 0 calc(var(--space-80) + var(--space-16));}
    .col-look-section .look-wrap .look-info {position: static; row-gap: var(--space-32);}
    .col-look-section .look-wrap .look-info .worn-wrap {padding-top: var(--space-32);}

    .look-drawer {width: min(480px, 100%);}

    .look-bar {position: fixed; right: 0; bottom: 0; left: 0; z-index: 150; display: flex; align-items: center; column-gap: var(--space-16); padding: var(--space-12) var(--layout-page-margin) calc(var(--space-12) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); background-color: var(--bg-canvas); visibility: hidden; transform: translateY(100%); transition: transform 0.3s var(--ease-out), visibility 0.3s;}
    .look-bar.show {visibility: visible; transform: translateY(0); transition: transform 0.3s var(--ease-out), visibility 0s;}
    .look-bar .bar-info {display: flex; flex-direction: column; row-gap: 2px; flex: 1 1 auto; min-width: 0;}
    .look-bar .bar-info .caption-small {overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap;}
    .look-bar .bar-info .ui-nav {overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap;}
    .look-bar .square-btn {flex: none; width: 180px; min-width: 0;}
    .look-detail-page .footer {padding-bottom: calc(var(--size-56) + var(--space-24) + env(safe-area-inset-bottom));}
}

@media screen and (max-width: 768px) {
    .col-list-section .col-head {flex-direction: column; align-items: stretch; row-gap: var(--space-20); padding-block: var(--space-32) var(--space-40);}
    .col-list-section .col-head .txt-wrap {flex-basis: auto;}
    .col-list-section .look-list, .col-list-section .archive-list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32) var(--space-12);}

    .col-look-section .look-wrap .look-gallery {row-gap: var(--space-16);}

    .look-drawer {top: auto; left: 0; width: 100%; height: 80vh; height: 80dvh; transform: translateY(100%);}
    .look-drawer.open {transform: translateY(0);}
    .look-bar .square-btn {width: auto; max-width: 50%; padding-inline: var(--space-20);}

    .look-drawer .sheet-handle {display: block; position: absolute; top: 10px; left: 50%; z-index: 1; width: 40px; height: 4px; border-radius: 2px; background-color: var(--border-default); transform: translateX(-50%);}
}

@media screen and (max-width: 360px) {
    .col-list-section .look-list .look-item .look-card .look-meta, .col-list-section .archive-list .archive-item .archive-card .archive-meta {flex-wrap: wrap;}

    .look-drawer .drawer-body .shop-look-list .shop-look-item {column-gap: var(--space-16);}
    .look-drawer .drawer-body .shop-look-list .shop-look-item .thumb {width: 96px;}
}