/* TEST 화면은 홈과 같은 UDS 토큰 및 카드 크기를 사용합니다. */
.test-page{
    display:flex;
    flex-direction:column;
    padding:var(--spacing-layout-y-20) var(--spacing-layout-x-20);
    box-sizing:border-box;
}

.test-page > .home-section-title{
    margin-top:var(--spacing-gap-24);
}

.test-page > .test-card-list{
    margin-top:var(--spacing-gap-12);
}

.test-card-list{
    display:flex;
    align-items:stretch;
    flex-shrink:0;
    overflow-x:auto;
    scroll-behavior:smooth;
    cursor:grab;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}

.test-card-list::-webkit-scrollbar{
    display:none;
}

.test-card-list > * + *{
    margin-left:var(--spacing-gap-20);
}

.test-card-list.is-dragging{
    cursor:grabbing;
    scroll-behavior:auto;
}

.test-card{
    flex:0 0 calc((100% - var(--spacing-gap-20) * 2) / 4);
    min-width:calc(var(--spacing-gap-40) * 5);
    min-height:calc(var(--spacing-layout-y-80) + var(--spacing-layout-y-64));
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    appearance:none;
    -webkit-appearance:none;
    text-align:left;
    font:inherit;
    background:var(--color-container-base-primary);
    border:var(--border-width-default) solid var(--color-border-base-low);
    border-radius:var(--radius-medium);
    padding:var(--spacing-component-y-16) var(--spacing-component-x-16);
    box-sizing:border-box;
    cursor:pointer;
}

.test-card--featured{
    border-color:var(--color-border-brand-primary);
}

.test-card:hover{
    background:var(--color-state-light-hover);
}

.test-card > * + *{
    margin-top:var(--spacing-gap-10);
}

.test-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
}

.test-card-head > * + *{
    margin-left:var(--spacing-gap-8);
}

.test-card-category{
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-secondary);
}

.test-card--featured .test-card-category{
    color:var(--color-text-brand-primary);
}

.test-card-meta{
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-secondary);
    white-space:nowrap;
}

.test-card-title{
    font-size:var(--font-size-18);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-primary);
    line-height:var(--line-height-body);
}

.test-card-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    margin-top:auto;
}

.test-card-action{
    display:block;
    width:30%;
    min-width:calc(var(--spacing-gap-40) + var(--spacing-gap-20));
    white-space:nowrap;
    padding:var(--spacing-component-y-4) 0;
    background:var(--color-container-base-primary);
    border:var(--border-width-default) solid var(--color-border-base-mid);
    border-radius:var(--radius-small);
    color:var(--color-text-base-secondary);
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-medium);
    text-align:center;
    box-sizing:border-box;
}

.test-card-score{
    font-size:var(--font-size-18);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-brand-primary);
}

@media (max-width:767px){
    .test-page{
        padding:var(--spacing-layout-y-16) var(--spacing-layout-x-16);
    }

    .test-top{
        margin-right:calc(-1 * var(--spacing-layout-x-16));
        margin-left:calc(-1 * var(--spacing-layout-x-16));
        padding:var(--spacing-component-y-16) var(--spacing-component-x-16);
    }

    .test-card{
        flex:0 0 68%;
        min-width:0;
    }
}