/* ==================================================================== */
/* 상품 공통 스타일 */
/* ==================================================================== */
.c-product-list {
    align-items: flex-start;
}
.c-product-list .item-inner{
    display: flex;
    flex-direction: column;
    text-align: left;
}
.c-product-list .item-inner .c-product-thumbnail{
    display: flex;
    justify-content: center;
    align-items: center; 
    width: 100%;
    border-radius: 12px;
    aspect-ratio: 1 / 1; 
    background-color: var(--base-color--white-01);
    overflow: hidden;
}
.c-product-list .item-inner .c-product-thumbnail img{
    width: 100%;
}
.c-product-list .c-product-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.c-product-list .c-product-title{
    padding-bottom: 10px;
    border-bottom: 1px solid var(--base-color--gray-08);
    line-height: 1.2; 
}
.c-product-list img{
    width: 100%;
}
.c-product-price{
    display: flex;
    flex-direction: column;
    line-height: 1.2; 
    gap: 8px;
}
.c-product-price dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 8px;
    white-space: nowrap;
    margin: 0;
}
.c-product-price dt {
    flex: 0 1 10%;
    margin: 0;
}
.c-product-price  dd {
    flex: 1 0 70%;
    margin: 0;
}
.c-product-price dd:last-child {
    flex: 1 0 50%;
    margin: 0;
}
.c-product-list .c-button-container{
    margin-top: 16px;
}
.c-product-list .c-button--medium{
    padding-left: 0;
    padding-right: 0;
}
.c-product-badge{
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    gap: 8px;
}
.c-product-badge span{
    padding: 2px 4px;
    border-radius: 4px;
}

.c-product-list .c-accordion-container{
    margin: 16px 0 0 0;
}

.prd-text-theme-gray{
    color: var(--prd-text-theme-gray);
}
.prd-text-theme-lightgray{
    color: var(--prd-text-theme-lightgray);
}
.prd-text-theme-black{
    color: var(--prd-text-theme-black);
}
.prd-text-theme-red{
    color: var(--prd-text-theme-red);
}
.prd-text-theme-white{
    color: var(--prd-text-theme-white);
}
.prd-bg-theme-red{
    background-color: var(--prd-bg-theme-red);
}
.prd-bg-theme-gold{
    background-color: var(--prd-bg-theme-gold);
}
.prd-bg-theme-black{
    background-color: var(--prd-bg-theme-black);
}
.prd-bg-theme-beige{
    background-color: var(--prd-bg-theme-beige);
}
.prd-bg-theme-white{
    background-color: var(--prd-bg-theme-white);
}

@media (max-width: 767px) {
    .c-product-list .c-product-title{
        border-bottom: 1px solid var(--base-color--gray-09);
    }
}
/* ===================== */
/* 상품 인테리어 버전 */
/* ===================== */
.c-product-type-interior .item-inner{
    display: flex;
    flex-direction: row;
    padding: 0;
    overflow: hidden;
}
.c-product-type-interior .c-product-thumbnail{
    display: block;
    width: 400px;
    max-height: 400px;
    aspect-ratio: 1 / 1;
}
.c-product-type-interior .c-product-thumbnail img{
    display: block;
    width: 100%;
    object-fit: cover;
}
.c-product-type-interior .c-product-content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: calc(600 / 1000 * 100%);
    min-height: 400px;
    flex: 1;
    text-align: left;
    padding: 32px;
    box-sizing: border-box;
}
.c-product-type-interior .c-product-content .c-product-title{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid #cec7b4;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.c-product-type-interior .c-product-content dl:nth-child(1) dt,
.c-product-type-interior .c-product-content dl:nth-child(2) dt{
    display: none;
}

.c-product-type-interior .c-product-content .c-product-price{
    display: flex;
    flex-direction: unset;
    flex-wrap: wrap;
    gap: 8px;
}

.c-product-type-interior .c-product-content .c-product-price dl:nth-child(1){
    flex: 0 0 20%;
}
.c-product-type-interior .c-product-content .c-product-price dl:nth-child(2){
    flex: 0 0 30%;
}

@media (max-width: 767px) {
    .c-product-type-interior .item-inner{
        flex-direction: column;
    }
    
    .c-product-type-interior .c-product-thumbnail{
        width: 100%;
        max-height: unset;
    }
    .c-product-type-interior .c-product-content{
        width: 100%;
        min-height: unset;
        padding: calc(24/720*100vw);
    }
    .c-product-type-interior .c-product-content .c-product-title{
        margin-bottom: calc(16/720*100vw);
        padding-bottom: calc(16/720*100vw);
    }
}

/* ===================== */
/* 상품 구독타입 */
/* ===================== */
.c-product-type-subscribe .c-product-title{
}
.c-product-type-subscribe .c-product-price{
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.c-product-type-subscribe .c-product-price-basic{
    padding-bottom: 12px;
    background-image: linear-gradient(to right, #CEC7B4 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 8px 1px;
    background-repeat: repeat-x;
}
.c-product-type-subscribe .c-product-price-calc{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.c-product-type-subscribe .c-product-price-calc span{
    display: block;
}
.c-product-type-subscribe .c-product-price-calc .c-product-price-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
}
.c-product-type-subscribe .c-product-price-calc .c-product-price-title img{
    width: 26px;
    height: 26px;
}
.c-product-type-subscribe dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 8px;
    white-space: nowrap;
    margin: 0;
    justify-content: space-between;
}

.c-price-only-number dt{
    display: none;
}

.c-product-type-subscribe dt {
    flex: 0 0 auto;
    margin: 0;
}
.c-product-type-subscribe  .c-product-price dd:last-child {
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 767px) {
    .c-product-list .c-accordion-container__item{
        min-width: unset;
    }
}

/* ===================== */
/* 상품 colume 3 */
/* ===================== */
.event-benefit-template .max-item--count-3 {
    --box-gap--base:40px;
}

@media (max-width: 767px) {
    .event-benefit-template .max-item--count-3 {
        --box-gap--base:20px;
    }
}