/* Shorts 전용 UDS. 홈 카드 너비와 동일한 계산식 사용. */
.shorts-page{
    padding:var(--spacing-layout-y-20) var(--spacing-layout-x-20);
    color:var(--color-text-base-primary);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-body);
}

.shorts-main{
    min-width:0;
}

.shorts-title{
    padding-left:var(--spacing-layout-x-16);
    font-size:var(--font-size-24);
    font-weight:var(--font-weight-bold);
    margin-bottom:var(--spacing-gap-8);
}

.shorts-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:var(--spacing-gap-12);
}

.shorts-section-title{
    min-width:0;
    margin-right:var(--spacing-gap-12);
    display:flex;
    align-items:center;
    font-size:var(--font-size-18);
    font-weight:var(--font-weight-bold);
}

.shorts-section-title img{
    width:var(--spacing-gap-20);
    height:var(--spacing-gap-20);
    margin-right:var(--spacing-gap-8);
}

.shorts-upload{
    flex-shrink:0;
    width:calc(var(--spacing-gap-40) * 3);
    padding:var(--spacing-component-y-4) var(--spacing-component-x-4);
    border:var(--border-width-default) solid var(--color-border-brand-primary);
    border-radius:var(--radius-small);
    background:var(--color-container-brand-primary);
    color:var(--color-text-base-on-color);
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-body);
    white-space:nowrap;
    cursor:pointer;
}
.shorts-upload:hover{background:var(--color-state-brand-hover);
}
.shorts-more{
    display:flex;
    align-items:center;
    flex-shrink:0;
    padding:var(--spacing-component-y-8) var(--spacing-component-x-4);
    border:0;
    border-radius:var(--radius-small);
    background:var(--color-container-base-primary);
    color:var(--color-text-base-secondary);
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-body);
    white-space:nowrap;
    cursor:pointer;
}
.shorts-more span{margin-left:var(--spacing-gap-4);
}
.shorts-more:hover,.shorts-hero:hover,.shorts-card:hover{background:var(--color-state-light-hover);
}
.shorts-upload:focus-visible,.shorts-more:focus-visible{
    outline:var(--border-width-focus) solid var(--color-border-brand-primary);
    outline-offset:var(--spacing-gap-2);
}
#shortsHero + .shorts-section-head{margin-top:var(--spacing-gap-24);
}
.shorts-hero{
    display:flex;
    padding:var(--spacing-component-y-12) var(--spacing-component-x-12);
    border:var(--border-width-default) solid var(--color-border-base-low);
    border-radius:var(--radius-medium);
    background:var(--color-container-base-primary);
    cursor:pointer;
}

.shorts-hero-thumb{
    position:relative;
    flex:0 0 32%;
    height:calc(var(--spacing-gap-40) * 5);
    margin-right:var(--spacing-gap-24);
    overflow:hidden;
    border-radius:var(--radius-medium);
    background:var(--color-container-base-low);
}

.shorts-hero-thumb img,.shorts-card-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.shorts-badge-best,.shorts-duration,.shorts-card-category,.shorts-card-duration{
    position:absolute;
    padding:var(--spacing-component-y-4) var(--spacing-component-x-8);
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-bold);
}

.shorts-badge-best{
    top:var(--spacing-gap-8);
    left:var(--spacing-gap-8);
    border-radius:var(--radius-small);
    background:var(--color-container-brand-primary);
    color:var(--color-text-base-on-color);
}

.shorts-duration,.shorts-card-duration{
    bottom:var(--spacing-gap-8);
    right:var(--spacing-gap-8);
    border-radius:var(--radius-small);
    background:var(--color-container-overlay);
    color:var(--color-text-base-on-color);
}

.shorts-hero-info{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    padding:var(--spacing-component-y-12) 0;
}

.shorts-hero-branch,.shorts-card-branch{
    color:var(--color-text-brand-primary);
    font-weight:var(--font-weight-bold);
}

.shorts-hero-branch{
    font-size:var(--font-size-14);
}

.shorts-hero-title{
    margin-top:var(--spacing-gap-8);
    font-size:var(--font-size-24);
    font-weight:var(--font-weight-bold);
}

.shorts-hero-stats,.shorts-card-stats{
    display:flex;
    flex-wrap:wrap;
    color:var(--color-text-base-secondary);
    font-size:var(--font-size-12);
}

.shorts-hero-stats{
    margin-top:auto;
    padding-top:var(--spacing-component-y-16);
}

.shorts-hero-stats span,.shorts-card-stats span{
    display:flex;
    align-items:center;
}

.shorts-hero-stats span + span,.shorts-card-stats span + span{
    margin-left:var(--spacing-gap-12);
}

.shorts-hero-stats img,.shorts-card-stats img{
    width:var(--spacing-gap-16);
    height:var(--spacing-gap-16);
    margin-right:var(--spacing-gap-4);
}

.shorts-grid{
    scrollbar-width:none;
    -ms-overflow-style:none;
    display:flex;
    align-items:stretch;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.shorts-grid::-webkit-scrollbar{display:none;}
.shorts-grid > * + *{
    margin-left:var(--spacing-gap-20);
}

.shorts-card{
    flex:0 0 calc((100% - var(--spacing-gap-20) * 2) / 4);
    min-width:calc(var(--spacing-gap-40) * 5);
    padding:var(--spacing-component-y-12) var(--spacing-component-x-12);
    overflow:hidden;
    border:var(--border-width-default) solid var(--color-border-base-low);
    border-radius:var(--radius-medium);
    background:var(--color-container-base-primary);
    cursor:pointer;
}

.shorts-card-thumb{
    position:relative;
    width:100%;
    height:calc(var(--spacing-gap-40) * 4);
    overflow:hidden;
    border-radius:var(--radius-medium);
    background:var(--color-container-base-low);
}

.shorts-card-category{
    top:var(--spacing-gap-8);
    left:var(--spacing-gap-8);
    border:var(--border-width-default) solid var(--color-border-brand-primary);
    border-radius:var(--radius-full);
    background:var(--color-container-base-primary);
    color:var(--color-text-brand-primary);
}

.shorts-card-body{
    display:flex;
    flex-direction:column;
    padding-top:var(--spacing-component-y-12);
}

.shorts-card-body > * + *{
    margin-top:var(--spacing-gap-8);
}

.shorts-card-branch{
    font-size:var(--font-size-12);
}

.shorts-card-title{
    font-size:var(--font-size-16);
    font-weight:var(--font-weight-bold);
}

.shorts-card-stats{
    justify-content:flex-end;
}

@media (max-width:767px){

.shorts-page{
    padding:var(--spacing-layout-y-16) var(--spacing-layout-x-16);
}

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

.shorts-hero-thumb{
    flex-basis:40%;
    height:calc(var(--spacing-gap-40) * 4);
    margin-right:var(--spacing-gap-12);
}

.shorts-hero-title{
    font-size:var(--font-size-18);
}

.shorts-hero-info{
    padding:0;
}

.shorts-hero-stats{
    display:block;
}

.shorts-hero-stats span + span{
    margin-left:0;
}


}