@layer components {
    /* common */
    .discount-rate span {
        color: var(--semantic-accent-red);
    }
    .price-discount-detail {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .price-discount-detail .room-type {
        margin-right: 4px;
    }
    .price-discount-detail .room-type-plan {
        margin-right: 8px;
    }
    .price-value-before {
        text-decoration: line-through;
    }
    .total-score span {
        font-size: var(--font-size-14);
        font-weight: var(--font-weight-bold);
    }
    @media screen and (max-width: 767px) {
        .price-discount-detail .price-value-after {
            font-size: var(--font-size-18);
        }
    }
    /* vertical */
    .card-vertical {
        display: flex;
    }
    .card-vertical .CTS-12R-150,
    .card-vertical .CTS-12B-150 {
        letter-spacing: var(--letter-spacing-0) !important;
    }
    .card-vertical-item {
        height: auto;
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.10);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--semantic-primary-background);
    }
    .card-vertical-item a {
        color: inherit;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    .card-vertical-item img {
        display: block;
    }
    .card-vertical-img {
        position: relative;
    }
    .card-vertical-img.grade-on-img::after {
        content: "";
        display: inline-block;
        width: 100%;
        height: 80px;
        position: absolute;
        left: 0;
        bottom: 0;
        opacity: 0.7;
        background: linear-gradient(180deg, rgba(18, 18, 18, 0.00) 0%, rgba(18, 18, 18, 0.70) 100%);
    }
    .card-vertical-img > img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 8px 8px 0 0;
    }
    .card-vertical-img .card-tag-point {
        position: absolute;
        top: 16px;
        left: 16px;
    }
    .card-vertical-img .card-tag-ranking {
        position: absolute;
        top: 0;
        left: 16px;
    }
    .card-vertical-img .card-vertical-grade {
        position: absolute;
        left: 16px;
        bottom: 8px;
        z-index: 2;
    }
    .card-vertical-icon {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .card-vertical-text {
        padding: 8px 16px 16px;
        min-height: 118px;
        height: 100%;
        background-color: var(--semantic-base-background);
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 8px;
        border-radius: 0 0 8px 8px;
    }
    .card-type-price {
        justify-content: space-between;
    }
    .card-vertical-text p {
        margin-bottom: 0;
        text-align: start;
    }
    .card-vertical-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-16);
        line-height: var(--line-height-180);
        letter-spacing: var(--letter-spacing-1);
    }
    .name-line-1 {
        -webkit-line-clamp: 1;
    }
    .name-line-2 {
        -webkit-line-clamp: 2;
    }
    .card-vertical-area {
        color: var(--semantic-caption);
    }
    .card-vertical-score span {
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-14);
        line-height: var(--line-height-180);
        letter-spacing: var(--letter-spacing-1);
    }
    .card-vertical-price p {
        text-align: end;
    }
    .card-vertical-price .price-value-before {
        color: var(--semantic-disabled-text);
        font-size: var(--font-size-14);
        margin-bottom: -8px;
    }
    .card-vertical-price .room-type {
        color: var(--semantic-caption);
    }
    .card-vertical-price .price-value-after {
        font-size: var(--font-size-20);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-150);
    }
    .card-vertical-button {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
    .card-vertical .card-vertical-item .card-vertical-button button {
        width: 100%;
    }
    .card-vertical .price-discount-detail {
        gap: 0;
    }
    @media screen and (max-width: 767px) {
        .card-vertical {
            gap: 8px;
        }
        .card-vertical.layout-sp-row {
            flex-wrap: nowrap;
            justify-content: normal;
            flex-direction: row;
            overflow-x: auto;
            padding-bottom: 16px;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .card-vertical.layout-sp-row::-webkit-scrollbar {
            display: none;
        }
        .card-vertical.layout-sp-row.only-elem,
        .card-vertical:has(> .card-vertical-item:only-child) {
            justify-content: center;
        }
        .card-vertical.layout-sp-cols-1 {
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .card-vertical.layout-sp-row .card-vertical-item:first-of-type {
            margin-left: 16px;
        }
        .card-vertical.layout-sp-row .card-vertical-item:last-of-type {
            margin-right: 16px;
        }
        .card-vertical.layout-sp-row .card-vertical-item,
        .card-vertical.layout-sp-row .card-vertical-item a {
            min-width: 300px;
            width: 300px;
        }
        .card-vertical.layout-sp-cols-1 .card-vertical-item  {
            min-width: 343px;
            width: 100%;
        }    
        .card-vertical-score span {
            font-size: var(--font-size-12);
        }    
        .card-vertical-button button {
            font-size: var(--font-size-14);
        }       
    }
    @media screen and (min-width: 768px) {
        .card-vertical {
            flex-wrap: wrap;
            justify-content: center;
            gap: 32px;
        }
        .card-vertical.layout-pc-cols-3 {
            max-width: calc((352px * 3) + (32px * 2));
            margin: 0 auto;
        }
        .card-vertical.layout-pc-cols-4 {
            max-width: calc((256px * 4) + (32px * 3));
            margin: 0 auto;
        }    
        .card-vertical.layout-pc-cols-3 .card-vertical-item {
            width: 352px;
        }
        .card-vertical.layout-pc-cols-4 .card-vertical-item {
            width: 256px;
        }        
    }
    @media (hover: hover) {
        .card-vertical-item a:hover {
            opacity: 0.7;
        }
    }
}