/* ============================================================
 *  Discover › Shorts 리스트 페이지
 *  시안: magazine-shorts-feed (PC) / magazine-shorts-mobile
 *  - PC: 2-3컬럼 카드 그리드 (9:16 세로 비율)
 *  - 모바일: 동일 그리드 (1-2컬럼) — TikTok 풀스크린은 상세 페이지에서
 * ============================================================ */

.discover-shorts-list-page .dsc-nav-tab.is-active.dsc-nav-tab--shorts {
    background: #ff7c0a !important;
    border-color: #ff7c0a !important;
    color: #fff !important;
}

/* 스크롤바 오실레이션 방지 — 카드 그리드의 aspect-ratio 가 컬럼 폭에 연동돼,
 * 스크롤바 표시/숨김으로 뷰포트 폭이 변하면 카드 높이가 변해 페이지 높이가
 * 다시 변하고 → 스크롤바가 토글되는 무한 루프(부르르 떨림)를 차단.
 * 콘텐츠가 적어 페이지가 짧을 때 특히 두드러짐. 항상 세로 스크롤바 자리를 확보. */
html { scrollbar-gutter: stable; overflow-y: scroll; overflow-anchor: none; }
.discover-shorts-list-page { overflow-anchor: none; }
.discover-shorts-list-page .dsc-sf-grid { contain: layout style; }
/* 카드가 적어 페이지가 짧을 때 발생하는 헤더 sticky 토글 오실레이션 차단.
 *  - header.php 가 scrollTop>=1 일 때 .on_pcheader 클래스로 헤더 네비를 position:fixed 로 전환,
 *    그 결과 헤더 ~78px 가 flow 에서 빠지며 페이지 높이가 줄어들어 브라우저가 scroll 을 0 으로
 *    강제 복귀 → 클래스 제거 → 다시 길어짐 → 토글 무한 루프.
 *  - 콘텐츠 영역이 헤더가 fixed 가 된 이후에도 viewport 보다 충분히 크도록 120vh 로 설정. */
.discover-shorts-list-page .dsc-main { min-height: 100vh; }

/* -------- 정렬 + 검색 -------- */
.dsc-sf-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0 24px;
    gap: 16px;
}
.dsc-sf-toolbar__left {
    display: flex;
    align-items: center;
    gap: 22px;
}
.dsc-sf-toolbar .dsc-sort-item {
    font-size: 16px;
    font-weight: 500;
    color: #959595;
    cursor: pointer;
}
.dsc-sf-toolbar .dsc-sort-item.is-active { color: #000; font-weight: 700; }
.dsc-sf-toolbar .dsc-search-bar {
    width: 280px;
    height: 44px;
    border: 1px solid #e8e8e8;
    border-radius: 9999px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 16px;
}
.dsc-sf-toolbar .dsc-search-bar input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #000;
}
.dsc-sf-toolbar .dsc-search-bar input::placeholder { color: #959595; }
.dsc-sf-toolbar .dsc-search-bar img {
    width: 20px;
    height: 20px;
    cursor: pointer;
}
@media (max-width: 1023px) {
    /* 시안(magazine-shorts-feed) 모바일: Latest/Popular(좌) + 검색바(우) 가로 배치.
     * 검색바 사양: 268w / 50h / radius 100 / border #e8e8e8 / padding 0 20 / 우측 30x30 아이콘 */
    .dsc-sf-toolbar { flex-direction: row; align-items: center; gap: 12px; margin: 14px 0 16px; }
    .dsc-sf-toolbar__left { gap: 18px; }
    .dsc-sf-toolbar .dsc-sort-item { font-size: 14px; font-weight: 600; }
    .dsc-sf-toolbar .dsc-sort-item.is-active { font-weight: 700; }
    .dsc-sf-toolbar .dsc-search-bar {
        width: 38%;
        flex: 0 0 auto;
        min-width: 170px;
        max-width: 268px;
        height: 50px;
        padding: 0 14px;
        border-radius: 100px;
        border: 1px solid #e8e8e8;
        gap: 6px;
        justify-content: space-between;
    }
    /* discover.css 의 .discover-page .dsc-search-bar input { display:none } leak 차단.
     * 쇼츠 리스트 wrapper 는 .discover-page + .discover-shorts-list-page 둘 다 적용되므로
     * specificity 를 높여 input 노출 + flex:1 보장. */
    .discover-shorts-list-page .dsc-sf-toolbar .dsc-search-bar input {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        background: transparent;
        border: 0;
        outline: none;
        color: #000;
    }
    .discover-shorts-list-page .dsc-sf-toolbar .dsc-search-bar input::placeholder { color: #959595; }
    .dsc-sf-toolbar .dsc-search-bar img,
    .dsc-sf-toolbar .dsc-search-bar .dsc-search-bar__icon {
        width: 26px;
        height: 26px;
        flex-shrink: 0;
    }
}

/* 검색 비움 (×) 버튼 — 입력값 있을 때만 노출 (JS 가 .dsc-search-bar 에 .has-value 토글) */
.dsc-sf-toolbar .dsc-search-bar .dsc-search-bar__clear {
    display: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}
.dsc-sf-toolbar .dsc-search-bar.has-value .dsc-search-bar__clear { display: inline-flex; }

/* -------- 카드 그리드 -------- */
.dsc-sf-grid {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
@media (max-width: 1279px) {
    .dsc-sf-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
    /* 시안(magazine-shorts-feed): 모바일 전 구간 2열 유지 — 좁은 화면에서도 2x2 그리드.
     * 시안 기준 720w 에서 카드 339w, 좌우 16 + gap 10 = 720. 실 디바이스 360 에선
     * gap 만 살짝 줄여 카드 폭 자동 축소. */
    .dsc-sf-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; }
}

/* Article 리스트 쇼츠 카드(.dsc-card--shorts) 와 동일 패턴.
 * 큰 미디어 + 하단 오버레이(▶ + 제목 1줄). body 영역 없음. */
.dsc-sf-card {
    border: 0;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.dsc-sf-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.1); }

.dsc-sf-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 446 / 600;   /* Article 리스트 쇼츠 카드와 동일 비율 */
    background: #d9d9d9;
    overflow: hidden;
}
.dsc-sf-card__media img,
.dsc-sf-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
/* 호버 시 재생되는 영상 레이어 */
.dsc-sf-card__hover-video {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 1;
}
.dsc-sf-card.is-hovering .dsc-sf-card__hover-video { opacity: 1; }
.dsc-sf-card__placeholder {
    width: 100%; height: 100%;
    background:
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.18) 8px 16px),
        #d9d9d9;
}

/* 하단 오버레이 — 시안: 옅은 그라디언트 + 흰색 ▶ + 흰색 제목 1줄 */
.dsc-sf-card__overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,.26), transparent);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    z-index: 2;
}
.dsc-sf-card__play {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.dsc-sf-card__play::after {
    content: '';
    width: 0; height: 0;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent #fff;
    margin-left: 2px;
}
.dsc-sf-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* -------- 빈 상태 -------- */
/* .dsc-sf-empty 스타일은 discover.css 의 빈상태 공용 룰에서 처리 (.dsc-empty 와 동일 패턴) */