/* BASIC css start */
/* depth 1 */
.listHead {
    padding: 0.75rem 0 0.75rem 0.75rem;
    width: 100%;
    margin-right: auto;
}
.listHeadTitle {
    font-size: 1.5rem;
}
.listHeadTitle span {
    font-size: 1rem;
    margin: 0 0.5em;
    font-weight: 400;
}
.listCategory {
    width: 100%;
}
.listCategory p {
    margin: 1em 0.5em 0.5em 0.5em;
}
.listCategory2 {
    line-height: 5rem;
    display: flex;
    gap: 1.125rem;
    padding: 0.75rem 0 0 0;

    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.listCategory2::-webkit-scrollbar {
    display: none;
}
.listCategory2 a {
    text-align: center;
    min-width: max-content;
    line-height: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 2.5rem;
    color: var(--black);
    background-color: var(--white);
    padding: 0.5rem 0.5rem 0 0;
}

.listSort {
    margin-left: auto;
    display: flex;
    flex-flow: row nowrap;
    gap: 1.5rem;
    padding: 0 var(--mediumgap) var(--mediumgap) 0;
}
.listSort p {
    line-height: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 500;
    font-size: 0.75rem;
}
.listSort p::after {
    order: 2;
    width: 0.6em;
    height: 0.6em;
    margin: -0.2em 0 0 0.125em;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    content: "";
}
.listSortAlign:hover > div {
    display: flex;
}
.listSortAlign > div {
    display: none;
    flex-flow: column nowrap;
    text-align: right;
    position: absolute;
    top: 1.5rem;
    right: 0;
    z-index: 2;
    padding: 0.5em;
    border-radius: 0.5em;
    background-color: var(--white);
    box-shadow: #00000050 2px 2px 3px;
}
.listSortAlign > div > a {
    line-height: 1.5rem;
    font-size: 0.75rem;
    width: 7rem;
    border-bottom: 1px solid var(--bordergrey);
    color: #000000c0;
}
.listSortAlign > div > a:hover {
    color: var(--brandcolor);
}
/* depth 1 */
.listContents {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
}
.listContent {
    margin-bottom: 1rem;
    width: 50%;

    padding: 0 calc(var(--smallgap) / 4);
}
.contentImgWrapper {
    width: 100%;
    aspect-ratio: 3/4;
    box-shadow: 1px 1px 5px #00000020;
    margin-bottom: 0.5em;
}
.contentImg {
    width: 100%;
    height: 100%;
}
.contentImg > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.contentBtnsWrapper {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

.contentBtn span {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 3rem;
    background: #ffffffdd;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 2px 7px #00000020;
}
.contentBtn span svg {
    width: 1rem;
    height: 1rem;
}

.btnWish path {
    stroke: var(--black);
    fill: #ffffff00;
}
.btnWish:hover path {
    transition: 0.3s;
    fill: var(--brandcolor);
}
.wish-on path {
    fill: var(--brandcolor);
    stroke: var(--brandcolor);
}
.btnOption path {
    stroke: var(--black);
    fill: #ffffff00;
}
.contentMeta h5 {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}
.contentMeta p {
    color: var(--darkgrey);
    margin-top: 0.375em;
}
.contentSoldout {
    color: var(--brandcolor);
}

/* ÇÊÅÍ */
.list_array {
    margin-bottom: 0;
}

/* ÇÊÅÍ ¿­±â ¹öÆ° + ±×·ì Ĩ (³ªÀÌÅ° ½ºÅ¸ÀÏ °¡·Î ½ºÅ©·Ñ) */
.btn-filter-wrap {
    align-self: stretch; /* ºÎ¸ð(.pageContent)°¡ °¡¿îµ¥ Á¤·ÄÀ̶ó Àüü ³Êºñ·Î */
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: var(--xsmallgap);
    padding: var(--mediumgap) var(--header-padding);
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--bordergrey);
}
.btn-filter-wrap::-webkit-scrollbar {
    display: none;
}
.btn-filter-wrap strong {
    display: none;
}
.btn-filter-wrap .btn-filter,
.btn-filter-wrap .btn-filter-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem; /* .btn-filter´Â font-size: 0 À̹ǷΠem ´ë½Å rem */
    height: 2.125rem;
    padding: 0 1rem;
    border: 1px solid var(--bordergrey);
    border-radius: 2rem;
    background: var(--white);
    color: var(--black);
    white-space: nowrap;
}
.btn-filter-wrap .btn-filter {
    padding-left: 0.75rem;
    border-color: var(--black);
    font-size: 0;
}
.btn-filter-wrap .btn-filter::before {
    width: 1rem;
    height: 1rem;
    background: url(https://www.senti.co.kr/images/common/icon_filter.png)
        no-repeat center / contain;
    content: "";
}
.btn-filter-wrap .btn-filter::after {
    font-size: 0.75rem;
    font-weight: 500;
    content: attr(data-count);
}

/* ±×·ì Ĩ: À̸§ + ¼±Åà °³¼ö + ¾Æ·¡ È­»ìÇ¥ */
.btn-filter-wrap .btn-filter-chip {
    padding-right: 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
}
.btn-filter-wrap .btn-filter-chip::before {
    order: 1;
    content: attr(data-count);
}
.btn-filter-wrap .btn-filter-chip::after {
    order: 2;
    width: 0.4em;
    height: 0.4em;
    margin: -0.2em 0 0 0.125em;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    content: "";
}
.btn-filter-wrap .btn-filter-chip:not([data-count])::before,
.btn-filter-wrap .btn-filter-chip[data-count=""]::before {
    display: none;
}
/* ¼±ÅÃµÈ Ç׸ñÀÌ ÀÖ´Â ±×·ìÀº °ËÁ¤ Å׵θ® */
.btn-filter-wrap .btn-filter-chip.is-selected {
    border-color: var(--black);
}

/* ÇÊÅÍ ·¹À̾î */
.filter-wrap * {
    font-family: inherit;
    color: var(--black);
    word-break: keep-all;
}
.filter-wrap button {
    border: 0;
    background: none;
}
/* ÀÌÀü ½ºÅ©¸³Æ®ÀÇ show/hide ÀζóÀÎ ½ºÅ¸ÀÏ ¹«½Ã, ¿­¸²Àº is-open Ŭ·¡½º·Î Á¦¾î */
.layer-filter-wrap {
    display: block !important;
}
.layer-filter-wrap .layer-filter {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-flow: column nowrap;
    background: var(--white);
    transform: translateY(100%);
    visibility: hidden;
    transition:
        transform 0.3s ease,
        visibility 0s 0.3s;
}
.layer-filter-wrap.is-open .layer-filter {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease;
}

/* »ó´Ü ŸÀÌƲ */
.layer-filter-wrap .layer-filter .tit {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: var(--xsmallgap);
    padding: var(--mediumgap) var(--mediumgap) var(--smallgap);
}
.layer-filter-wrap .layer-filter .tit h3 {
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 600;
}
.layer-filter-wrap .layer-filter .tit .total-count {
    color: var(--darkgrey);
    font-size: 0.8125rem;
    font-weight: 400;
}
.layer-filter-wrap .layer-filter .tit .btn-close {
    position: absolute;
    top: 0.875rem;
    right: var(--smallgap);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bggrey)
        url(https://www.senti.co.kr/images/common/icon_close.png) no-repeat
        center / 0.875rem;
    font-size: 0;
    text-indent: -9999px;
}

/* ¼±ÅÃµÈ ÇÊÅÍ: ŸÀÌƲ ¹Ù·Î ¾Æ·¡ °¡·Î ½ºÅ©·Ñ Ĩ */
.layer-filter-wrap .layer-filter .select-filter {
    flex: none;
    order: 1;
    display: flex;
    gap: var(--xsmallgap);
    margin: 0;
    padding: 0 var(--mediumgap) var(--smallgap);
    overflow-x: auto;
    scrollbar-width: none;
}
.layer-filter-wrap .layer-filter .select-filter::-webkit-scrollbar {
    display: none;
}
.layer-filter-wrap .layer-filter .select-filter:empty {
    display: none;
}
.layer-filter-wrap .layer-filter .select-filter li {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.375em;
    padding: 0.5em 0.875em;
    border-radius: 2rem;
    background: var(--bggrey);
    font-size: 0.8125rem;
}
.layer-filter-wrap .layer-filter .select-filter li .color-code {
    display: none;
}
.layer-filter-wrap .layer-filter .select-filter li .filter-text {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.layer-filter-wrap .layer-filter .select-filter li .btn-del {
    width: 0.625rem;
    height: 0.625rem;
    background: url(https://www.senti.co.kr/images/common/icon_txt_delete.png)
        no-repeat center / contain;
    font-size: 0;
    text-indent: -9999px;
}

/* ÇÊÅÍ ±×·ì: ¾ÆÄÚµð¾ð ¾øÀÌ ¸ðµÎ Æîħ, ÀÌ ¿µ¿ª¸¸ ½ºÅ©·Ñ */
.layer-filter-wrap .layer-filter .opt-box {
    flex: 1 1 auto;
    order: 2;
    min-height: 0;
    padding: 0 var(--mediumgap);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.layer-filter-wrap .layer-filter .opt-box li {
    padding: var(--mediumgap) 0;
    border-top: 1px solid var(--bordergrey);
    background: none;
}
.layer-filter-wrap .layer-filter .opt-box li > span {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}
.layer-filter-wrap .layer-filter .opt-box li input[type="checkbox"] {
    display: none;
}

/* üũ¹Ú½º ¿É¼Ç: [üũ][ÅؽºÆ®] ¼¼·Î ¸ñ·Ï */
.layer-filter-wrap .layer-filter .opt-box li .chk-box {
    display: grid !important;
    grid-template-columns: 1.25rem 1fr;
    align-items: center;
    gap: var(--smallgap) var(--xsmallgap);
    margin-top: var(--smallgap);
}
.layer-filter-wrap .layer-filter .opt-box li .chk-box label {
    position: relative;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--darkgrey);
    border-radius: 0.25rem;
    background: var(--white) !important;
    cursor: pointer;
}
/* üũ Ç¥½Ã */
.layer-filter-wrap
    .layer-filter
    .opt-box
    li
    .chk-box
    input[type="checkbox"]:checked
    + label {
    border-color: var(--black);
    background: var(--black) !important;
}
.layer-filter-wrap
    .layer-filter
    .opt-box
    li
    .chk-box
    input[type="checkbox"]:checked
    + label::before {
    position: absolute;
    top: 0.125rem;
    left: 0.375rem;
    width: 0.3125rem;
    height: 0.625rem;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    content: "";
}
.layer-filter-wrap .layer-filter .opt-box li .chk-box p {
    font-size: 0.9375rem;
    font-weight: 400;
    cursor: pointer;
}
.layer-filter-wrap .layer-filter .opt-box li .filter_item_count {
    margin-left: 0.125em;
    font-size: 0.8em;
    color: var(--textgrey);
}

/* ´õ º¸±â: 5¹ø° ¿É¼ÇºÎÅÍ ¼û±è (JS°¡ is-extra ºÎ¿©) */
.layer-filter-wrap
    .layer-filter
    .opt-box
    li
    .chk-box:not(.is-expanded)
    .is-extra {
    display: none;
}
.layer-filter-wrap .layer-filter .opt-box li .btn-more {
    margin-top: var(--smallgap);
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* »ö»ó ¿É¼Ç: ¿øÇü ½º¿ÍÄ¡ 4Ä­ ±×¸®µå */
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--smallgap) var(--xsmallgap);
    margin-top: var(--smallgap);
}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code > div {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 0.375em;
}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code label {
    display: block;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--white);
    border-radius: 50%;
    background-size: cover;
    box-shadow: 0 0 0 1px var(--bordergrey);
    cursor: pointer;
}
.layer-filter-wrap
    .layer-filter
    .opt-box
    li
    .chk-color-code
    input[type="checkbox"]:checked
    + label {
    box-shadow: 0 0 0 2px var(--black);
}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code p {
    margin: 0;
    color: var(--darkgrey);
    font-size: 0.75rem;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
}
.layer-filter-wrap
    .layer-filter
    .opt-box
    li
    .chk-color-code
    .filter_item_count {
    display: none;
}
.layer-filter-wrap
    .layer-filter
    .opt-box
    li
    .chk-color-code
    input[type="checkbox"]:checked
    + label
    + p {
    color: var(--black);
    font-weight: 500;
}

/* ÇÏ´Ü ¹öÆ°: Áö¿ì±â(¿Ü°û¼±) + »óÇ°°Ë»ö(°ËÁ¤) */
.layer-filter-wrap .layer-filter .btn-wrap {
    flex: none;
    order: 3;
    display: flex;
    gap: var(--xsmallgap);
    margin: 0;
    padding: var(--smallgap) var(--mediumgap)
        calc(var(--smallgap) + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--bordergrey);
    background: var(--white);
}
.layer-filter-wrap .layer-filter .btn-wrap button {
    flex: 1 1 0;
    height: 3rem;
    padding: 0;
    border-radius: 2rem;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 500;
}
.layer-filter-wrap .layer-filter .btn-wrap button.btn-reset {
    border: 1px solid var(--bordergrey);
    background: var(--white);
}
.layer-filter-wrap .layer-filter .btn-wrap button.btn-reset span::after {
    content: " " attr(data-count);
}
.layer-filter-wrap .layer-filter .btn-wrap button.btn-search {
    background: var(--black);
}
.layer-filter-wrap .layer-filter .btn-wrap button span {
    display: inline-block;
    visibility: visible;
}
.layer-filter-wrap .layer-filter .btn-wrap button span.fc-fff {
    color: var(--white);
}

/* ±×·ì ĨÀ¸·Î ¿­¾úÀ» ¶§: ÇØ´ç ±×·ì¸¸ ÇÏ´Ü ½ÃÆ®·Î Ç¥½Ã */
.layer-filter-wrap.is-single::before {
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0s 0.3s;
    content: "";
}
.layer-filter-wrap.is-single.is-open::before {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}
.layer-filter-wrap.is-single .layer-filter {
    top: auto;
    max-height: 85vh;
    border-radius: 1.25rem 1.25rem 0 0;
}
.layer-filter-wrap.is-single .layer-filter .tit {
    padding: var(--mediumgap) var(--mediumgap) var(--xsmallgap);
}
.layer-filter-wrap.is-single .layer-filter .tit h3 {
    font-size: 1.125rem;
    font-weight: 500;
}
.layer-filter-wrap.is-single .layer-filter .tit .total-count,
.layer-filter-wrap.is-single .layer-filter .select-filter,
.layer-filter-wrap.is-single .layer-filter .opt-box > li:not(.is-current),
.layer-filter-wrap.is-single .layer-filter .opt-box > li > span,
.layer-filter-wrap.is-single .layer-filter .btn-more {
    display: none;
}
.layer-filter-wrap.is-single .layer-filter .opt-box > li {
    padding-top: 0;
    border-top: 0;
}
/* ÇÏ´Ü ½ÃÆ®¿¡¼­´Â '´õ º¸±â' ¾øÀÌ ¿É¼ÇÀ» ¸ðµÎ Ç¥½Ã */
.layer-filter-wrap.is-single .layer-filter .opt-box li .chk-box .is-extra {
    display: block;
}
/* ÇÏ´Ü ½ÃÆ®¿¡¼­´Â Àüü ÃʱâÈ­ ´ë½Å »óÇ°°Ë»ö ¹öÆ°¸¸, ¾øÀ¸¸é ¹öÆ° ¿µ¿ª ¼û±è */
.layer-filter-wrap.is-single .layer-filter .btn-wrap .btn-reset {
    display: none;
}
.layer-filter-wrap.is-single .layer-filter .btn-wrap:not(:has(.btn-search)) {
    display: none;
}
.layer-filter-wrap.is-single .layer-filter .opt-box {
    padding-bottom: calc(var(--mediumgap) + env(safe-area-inset-bottom));
}
/* ¿­·Á ÀÖ´Â ±×·ì ĨÀº È­»ìÇ¥¸¦ À§·Î */
.btn-filter-wrap .btn-filter-chip.is-active::after {
    margin-top: 0.2em;
    transform: rotate(-135deg);
}

/* BASIC css end */