/* ============================================================
 *  Discover › 사용자단 공통 + 리스트 페이지 (Discover)
 *  시안: magazine-discover (PC) / magazine-discover-mobile
 *  - 폰트: SUIT Variable / Pretendard Variable (CDN)
 *  - PC 시안 1920px 절대 좌표 → 1480px 컨테이너 + flex/grid 로 매핑
 *  - 클래스명은 시안 마크업 그대로 (.nav-tab / .card-large / .pill / ...)
 *  - 페이지 wrapper .discover-page 내부로 scoping (ware 글로벌 충돌 방지)
 *  - 반응형: 1024px 이상 = PC / 1023px 이하 = mobile
 * ============================================================ */

.discover-page {
    font-family: 'SUIT Variable', 'SUIT', 'Pretendard Variable', 'Pretendard', sans-serif;
    color: #000;
    background: #fff;
    min-height: 100vh;
}
.discover-page * { box-sizing: border-box; }

.discover-page .dsc-main {
    max-width: 1480px;
    margin: 0 auto;
    padding: 62px 62px 100px;
}
@media (max-width: 1023px) {
    .discover-page .dsc-main { padding: 16px 16px 60px; }
}

/* ============================================================
 *  1. 상단 탭: Discover / Shorts (시안 .nav-tab)
 * ============================================================ */
.discover-page .dsc-nav-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
}
.discover-page .dsc-nav-tab {
    flex: 1;
    height: 67px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -1px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #e3e3e3;
    background: #fff;
    color: #959595;
    transition: background .15s, color .15s, border-color .15s;
}
/* 아이콘 (PNG <img> 잔존 호환) — ware 글로벌 reset 의 img 룰을 모두 강제 차단 */
.discover-page .dsc-nav-tab__img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    object-fit: contain !important;
    flex-shrink: 0;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block;
}
/* 인라인 SVG 아이콘 — 활성/비활성 두 변형을 함께 출력하고 .is-active 로 토글 */
.discover-page .dsc-nav-tab__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.discover-page .dsc-nav-tab__icon svg { width: 36px; height: 36px; display: block; }
.discover-page .dsc-nav-tab .dsc-nav-tab__icon--active   { display: none; }
.discover-page .dsc-nav-tab.is-active .dsc-nav-tab__icon--inactive { display: none; }
.discover-page .dsc-nav-tab.is-active .dsc-nav-tab__icon--active   { display: inline-flex; }
.discover-page .dsc-nav-tab.is-active.dsc-nav-tab--discover {
    background: #36cf00;
    color: #fff;
    border-color: #36cf00;
}
.discover-page .dsc-nav-tab.is-active.dsc-nav-tab--shorts {
    background: #ff7c0a;
    color: #fff;
    border-color: #ff7c0a;
}
/* 호버 언더라인 — 텍스트 가운데에서 양옆으로 펼침 (CodePen jstn/mdoOZJ 패턴).
 * 활성/비활성 구분 없이 hover 시에만 표시. 색상은 currentColor 로 텍스트색 매칭. */
/* 텍스트 span 만 대상 — 아이콘 span(.dsc-nav-tab__icon) 은 제외해 아이콘 밑 언더라인 방지 */
.discover-page .dsc-nav-tab > span:not(.dsc-nav-tab__icon) {
    position: relative;
    display: inline-block;
}
.discover-page .dsc-nav-tab > span:not(.dsc-nav-tab__icon)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width .3s ease, left .3s ease;
}
.discover-page .dsc-nav-tab:hover > span:not(.dsc-nav-tab__icon)::after {
    width: 100%;
    left: 0;
}
@media (max-width: 1023px) {
    /* 시안 모바일 nav-tab: height 60 / font 22 / icon 30 / gap 8.
     * 720px 시안 의도 가깝게 유지 — height 60 / font 19 / icon 28 (실제 디바이스에서도 묵직한 분위기). */
    .discover-page .dsc-nav-tabs { gap: 8px; margin-bottom: 18px; }
    .discover-page .dsc-nav-tab  { height: 60px; font-size: 19px; }
    .discover-page .dsc-nav-tab img { width: 28px; height: 28px; }
    .discover-page .dsc-nav-tab__icon,
    .discover-page .dsc-nav-tab__icon svg { width: 28px; height: 28px; }
}

/* ============================================================
 *  2. HERO (시안 .hero-banner)
 *  좌: DISCOVER 큰 영문 + subtitle + Whats NEW! 뱃지 + 영상 제목 + 본문
 *  우: 332x437 영상 (모바일에서는 아래로)
 * ============================================================ */
.discover-page .dsc-hero {
    margin-bottom: 24px;
}
.discover-page .dsc-hero__inner {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 0 40px;
}
.discover-page .dsc-hero__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.discover-page .dsc-hero__title {
    font-size: 50px;
    font-weight: 900;
    color: #000;
    letter-spacing: -1.5px;
    margin: 0;
    line-height: 1;
    -webkit-text-stroke: 0.6px #000;     /* 가변폰트 weight 미적용 환경 대응 — 글리프 두께 보강 */
    font-synthesis: weight;
}
.discover-page .dsc-hero__subtitle {
    font-size: 22px;
    font-weight: 400;
    color: #000;
    letter-spacing: -0.66px;
    margin: 0 0 24px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* What's New 뱃지 — 원본(mall-fronttest .mag-badge-new) 컨벤션:
 * 원형 아이콘(파스텔 채움 + 흰 별 SVG) + 텍스트 inline-flex 조합.
 * 색상은 ware 디스커버 브랜드 그린(#36cf00), 글꼴은 페이지 head 에 로드된 Pragati Narrow. */
.discover-page .dsc-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.discover-page .dsc-hero__badge-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #36cf00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.discover-page .dsc-hero__badge-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}
.discover-page .dsc-hero__badge-text {
    font-family: 'Pragati Narrow', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #36cf00;
    letter-spacing: -0.72px;
    line-height: 1;
}
/* 제목+본문 wrap anchor — 원본(mall-fronttest .mag-hero__article-link) 컨벤션:
 * 영역 어디에 hover 해도 두 요소 동시 underline, 클릭 시 미디어와 동일 URL 로 이동. */
.discover-page .dsc-hero__article-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.discover-page .dsc-hero__article-link:hover .dsc-hero__article-title,
.discover-page .dsc-hero__article-link:hover .dsc-hero__article-body {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.discover-page .dsc-hero__article-title {
    font-size: 30px;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.6px;
    -webkit-text-stroke: 0.4px #000;
    font-synthesis: weight;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.discover-page .dsc-hero__article-body {
    font-size: 18px;
    font-weight: 400;
    color: #2b2b2b;
    line-height: 1.5;
    margin: 12px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.discover-page .dsc-hero__media {
    position: relative;
    width: auto;
    height: 437px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #d9d9d9;
    text-decoration: none;
    display: block;
    max-width: 500px;
}
/* 컨테이너 width:auto → 이미지 본 비율로 폭 결정.
 * 내부 img/video 는 height:100%, width:auto 로 자연 비율 유지.
 * (자연폭이 max-width 500px 를 넘으면 overflow:hidden 으로 우측 절단) */
.discover-page .dsc-hero__media-thumb {
    height: 100%;
    width: auto;
    display: block;
}
.discover-page .dsc-hero__media-thumb img,
.discover-page .dsc-hero__media-thumb video {
    height: 100%;
    width: auto;
    display: block;
}
.discover-page .dsc-hero__play-btn {
    position: absolute;
    bottom: 20px;
    right: 16px;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.discover-page .dsc-hero__play-btn::after {
    content: '';
    width: 0; height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
}
@media (max-width: 1023px) {
    /* 시안 모바일: 텍스트(상) + 영상(하), 영상은 회색 #f5f5f5 박스 안에 중앙 정렬되어 좌우로 배경 노출.
     * column-reverse 였던 PC 모바일 동작을 column 으로 바꿔 시안 순서(텍스트→영상) 매칭. */
    .discover-page .dsc-hero__inner { flex-direction: column; gap: 18px; padding: 8px 0 24px; }
    .discover-page .dsc-hero__title { font-size: 32px; letter-spacing: -1px; }
    .discover-page .dsc-hero__subtitle { font-size: 14px; margin-bottom: 10px; letter-spacing: -0.42px; }
    .discover-page .dsc-hero__article-title { font-size: 20px; letter-spacing: -0.6px; }
    .discover-page .dsc-hero__article-body { font-size: 14px; -webkit-line-clamp: 3; margin-top: 6px; }
    /* 회색 배경 박스는 이미지/영상 좌우가 비어있을 때 채워주는 폴백 용도 — 무조건 좌우 자르지 않음.
     * 시안 .shorts-gray-bg: left:16 width:688 (720 화면에서 좌우 16px 패딩 안).
     * → 회색 박스는 dsc-main 좌우 padding(16) 안에 들어감 (100% width, 풀와이드 X).
     * 자식 thumb 는 height 280 고정 + width:auto (자연 비율).
     *  - 가로형/풀폭 이미지: thumb 자연 폭이 부모 폭(=화면-32) 까지 차지 → 회색 안 보임
     *  - 세로형/좁은 이미지(쇼츠): thumb 자연 폭 < 부모 폭 → 좌우 회색 노출 */
    .discover-page .dsc-hero__media {
        position: relative;
        width: 100%;
        height: 280px;
        max-height: none;
        max-width: none;
        background: #000000;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .discover-page .dsc-hero__media-thumb {
        height: 280px;
        width: auto;
        max-width: 100%;
        display: block;
    }
    .discover-page .dsc-hero__media-thumb img,
    .discover-page .dsc-hero__media-thumb video {
        height: 280px;
        width: auto;
        max-width: 100%;
        display: block;
    }
    .discover-page .dsc-hero__play-btn { z-index: 2; }
}

/* ============================================================
 *  3. 카테고리 탭 바 (시안 ibantot/magazine .tab-bar)
 *  - 시안: 라이트 블루그레이 배경 한 줄, 상단 보더 없음 + 얇은 하단 보더.
 *  - 탭 자체가 바 전체 높이를 차지 → 활성 언더라인이 바 하단 보더 라인 위에 정확히 얹힘.
 *  - 우측: 흰색 인풋 (얇은 보더) + 우측 끝에 검색 아이콘.
 * ============================================================ */
.discover-page .dsc-tab-bar {
    display: flex;
    align-items: stretch;             /* 자식이 바 높이를 그대로 차지 */
    justify-content: space-between;
    gap: 20px;
    height: 81px;
    background: #f5f5f5;              /* 시안 라이트 블루그레이 */
    border-top: 0;
    border: 1px solid #e3e6ec;
    margin-bottom: 24px;
    position: relative;
    /* dsc-main(max-width 1480 + padding 62) 의 좌우 패딩을 뚫고 뷰포트 좌우 끝까지 확장.
     *  - width 100vw + margin: calc(50% - 50vw) 로 풀-블리드 (가로 스크롤바 안 생김).
     *  - padding: calc(50vw - 50%) 로 내부 콘텐츠는 dsc-main 콘텐츠 좌측 정렬 유지,
     *    +24px 은 첫 탭이 바 좌측 끝에 닿지 않게 하는 내부 여유. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50% + 12px);
    padding-right: calc(50vw - 50% + 12px);
}
.discover-page .dsc-tab-bar__list {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 36px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    align-items: stretch;
}
.discover-page .dsc-tab-bar__list::-webkit-scrollbar { display: none; }
.discover-page .dsc-tab-item {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;              /* 텍스트는 세로 가운데 — 박스는 바 전체 높이 */
    font-family: 'SUIT', sans-serif;  /* 시안 magazine-main-5 .content-tab-item 사양 */
    font-size: 20px;
    font-weight: 700;
    color: #000;                      /* 시안: 비활성도 블랙 */
    cursor: pointer;
    white-space: nowrap;
    padding: 0;
}
.discover-page .dsc-tab-item.is-active {
    color: #36cf00;
}
.discover-page .dsc-tab-item.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;            /* 텍스트 폭에 맞춰 자동 */
    bottom: 0;           /* 바 하단 보더 라인 정확히 위 — align-items:stretch 덕분 */
    height: 2px;
    background: #36cf00;
}

/* 검색바 — 시안 측정값 직접 반영:
 *  width 341 / height 51 / border 1px / radius 100px / padding 13 20 / space-between */
.discover-page .dsc-search-bar,
.discover-page .dsc-tab-bar .dsc-search-bar {
    position: relative;
    flex-shrink: 0;
    align-self: center;
    width: 341px;
    height: 51px;
    border: 1px solid #e8e8e8;
    border-radius: 100px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px;
    gap: 10px;
}
.discover-page .dsc-search-bar input,
.discover-page .dsc-tab-bar .dsc-search-bar input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: -0.5px;
    color: #000;
}
.discover-page .dsc-search-bar input::placeholder,
.discover-page .dsc-tab-bar .dsc-search-bar input::placeholder { color: #959595; }
.discover-page .dsc-search-bar img,
.discover-page .dsc-search-bar .dsc-search-bar__icon,
.discover-page .dsc-tab-bar .dsc-search-bar img,
.discover-page .dsc-tab-bar .dsc-search-bar .dsc-search-bar__icon { width: 32px; height: 32px; cursor: pointer; flex-shrink: 0; }
/* 검색 비움 (×) 버튼 — 입력값 있을 때만 노출 (JS 가 .dsc-tab-bar 에 .has-value 토글).
 * 기본 미노출 + PC 한정으로 .has-value 시 노출. 모바일은 아래 @media (max-width:1023) 에서
 * 패널 열림(.is-search-open) + 값 존재(.has-value) 조합으로 더 엄격하게 게이트. */
.discover-page .dsc-search-bar__clear {
    display: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}
@media (min-width: 1024px) {
    .discover-page .dsc-tab-bar.has-value .dsc-search-bar__clear { display: inline-flex; }
}

@media (max-width: 1023px) {
    /* 시안 모바일 tab-bar: 흰 배경 + 위아래 #e8e8e8 border, font 16/600, 좌우 풀와이드.
     * 검색은 우측 아이콘만 + 좌측 그라데이션 블러로 탭 마지막 fade-out. */
    .discover-page .dsc-tab-bar {
        height: 70px;
        gap: 10px;
        background: #f5f5f5;
        border: 0;
        border-top: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
        padding-left: calc(50vw - 50% + 16px);
        padding-right: calc(50vw - 50% + 16px);
        margin-bottom: 16px;
        overflow: hidden;     /* 검색 panel translateX 슬라이드 시 외부 잘림 처리 */
    }
    .discover-page .dsc-tab-bar__list { gap: 22px; }
    .discover-page .dsc-tab-item { font-size: 15px; font-weight: 600; }
    /* 활성 인디케이터 — 시안: 텍스트 폭에 맞춰 짧은 22px 정도. 텍스트 가운데 정렬용 short bar. */
    .discover-page .dsc-tab-item.is-active::after { left: 50%; right: auto; transform: translateX(-50%); width: 22px; }
    /* 검색 영역 — 기본 (collapsed): 51x51 원형 박스 제거, 아이콘만 노출.
     * 검색 아이콘 탭 시 .dsc-tab-bar.is-search-open 토글 → 패널 확장 (탭 리스트 자리 차지).
     * back/clear 버튼은 기본 숨김, 패널 열림 + 입력 값 있을 때만 노출. */
    .discover-page .dsc-search-bar,
    .discover-page .dsc-tab-bar .dsc-search-bar {
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        background: transparent;
        justify-content: center;
        position: relative;
        z-index: 3;
    }
    .discover-page .dsc-search-bar input,
    .discover-page .dsc-tab-bar .dsc-search-bar input { display: none; }
    .discover-page .dsc-search-bar img,
    .discover-page .dsc-search-bar .dsc-search-bar__icon,
    .discover-page .dsc-tab-bar .dsc-search-bar img,
    .discover-page .dsc-tab-bar .dsc-search-bar .dsc-search-bar__icon { width: 26px; height: 26px; }
    /* back/clear 버튼 — 기본 숨김 (PC + 모바일 collapsed 상태) */
    .discover-page .dsc-search-bar__back,
    .discover-page .dsc-search-bar__clear { display: none; }
    /* 모바일 검색 패널 열림 상태 — flex 안 width:100% 유지(원래 폭).
     * 슬라이드는 clip-path 로 right→left reveal (요소 position 변화 없음 → 폭 변동 없음).
     * 열림: inset(0 0 0 100%) → inset(0 0 0 0) — 우측에서 좌측으로 펼쳐짐
     * 닫힘: .is-search-closing 으로 역방향 inset(0 0 0 0) → inset(0 0 0 100%). */
    .discover-page .dsc-tab-bar.is-search-open .dsc-tab-bar__list { display: none; }
    .discover-page .dsc-tab-bar.is-search-open.is-search-closing .dsc-tab-bar__list { display: flex; }
    .discover-page .dsc-tab-bar.is-search-open .dsc-search-bar {
        width: 100%;
        height: 44px;
        padding: 0 10px 0 6px;
        border: 1.5px solid #36cf00;
        border-radius: 100px;
        background: #fff;
        justify-content: flex-start;
        gap: 6px;
        animation: dscSearchPanelIn 0.25s ease;
    }
    .discover-page .dsc-tab-bar.is-search-open.is-search-closing .dsc-search-bar {
        animation: dscSearchPanelOut 0.25s ease forwards;
    }
    .discover-page .dsc-tab-bar.is-search-open .dsc-search-bar__back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 0;
        background: transparent;
        color: #1b1c1b;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
    }
    .discover-page .dsc-tab-bar.is-search-open .dsc-search-bar input {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        border: 0;
        outline: none;
        background: transparent;
        font-size: 14px;
        color: #000;
        padding: 0;
    }
    .discover-page .dsc-tab-bar.is-search-open .dsc-search-bar input::placeholder { color: #959595; }
    /* clear (X) 버튼 — 패널 열림 + 입력 값 있을 때만 노출 (JS 가 .has-value 토글).
     * transform: translateX(2px) — 시안 정렬 미세 보정 (모바일 한정). */
    .discover-page .dsc-tab-bar.is-search-open.has-value .dsc-search-bar__clear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: 0;
        background: transparent;
        color: #959595;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        transform: translateX(3px);
    }
    .discover-page .dsc-tab-bar.is-search-open .dsc-search-bar__icon { flex-shrink: 0; }
}

/* 검색 활성 칩 — runSearch 후 어떤 검색어로 검색했는지 라벨 노출.
 *  X 클릭 시 검색 초기화 (state.q 비우고 list 재조회).
 *  PC/모바일 공용 — 검색 결과 컨텍스트 인디케이터. */
.discover-page .dsc-search-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 14px;
    border: 1px solid #36cf00;
    border-radius: 100px;
    color: #36cf00;
    font-size: 13px;
    font-weight: 600;
    width: fit-content;
    margin: 0 auto 16px;     /* 가로 가운데 정렬 — fit-content 폭 + margin auto */
    background: #fff;
}
.discover-page .dsc-search-chip__label {
    line-height: 1;
}
.discover-page .dsc-search-chip__close {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: #36cf00;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.discover-page .dsc-search-chip__close:hover { color: #2ba600; }
/* 검색어 칩은 모바일 전용 — PC 에선 항상 숨김.
 * JS renderSearchChip() 이 .show() 로 inline style="display:flex" 를 박으므로
 * !important 로 강제 오버라이드. */
@media (min-width: 1024px) {
    .discover-page .dsc-search-chip { display: none !important; }
}

/* 검색 패널 keyframes — translateX 슬라이드 (페이드 없음).
 *  열림: 오른쪽(translateX 100%) → 제자리(0) — 슬라이드 인
 *  닫힘: 제자리(0) → 오른쪽(100%) — 슬라이드 아웃 */
@keyframes dscSearchPanelIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes dscSearchPanelOut {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

/* ============================================================
 *  4. Pill 필터 (시안 .category-pills / .pill)
 * ============================================================ */
.discover-page .dsc-pills {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.discover-page .dsc-pill {
    padding: 10px 20px;
    border-radius: 9999px;
    background: #f5f5f5;
    color: #060606;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.discover-page .dsc-pill.is-active {
    background: #0a0a0a;
    color: #fff;
}

/* ============================================================
 *  5. 정렬 + 페이지 정보 (시안 .sort-row)
 * ============================================================ */
.discover-page .dsc-sort-row {
    position: relative;                             /* 자식 absolute 의 기준 */
    width: 100%;
    height: 36px;
    padding: 0;
    margin: 0 0 24px;
    box-sizing: border-box;
}
.discover-page .dsc-sort-row__left {
    position: absolute;                             /* 좌측 끝 절대 핀 */
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0 0 0 -30px;                              /* 첫 항목 좌측 밀착 — 폰트 좌측 베어링 보정 */
    padding: 0;
}
.discover-page .dsc-sort-item {
    font-size: 17px;
    font-weight: 700;
    color: #959595;
    cursor: pointer;
    white-space: nowrap;
    -webkit-text-stroke: 0.2px currentColor;
}
.discover-page .dsc-sort-item.is-active { color: #000; }

.discover-page .dsc-bookmark-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #959595;
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    -webkit-text-stroke: 0.2px currentColor;
}
/* 북마크 토글 — inline SVG 두 개 (외곽선/채워진) 토글 방식
 *  - 비활성: 회색 외곽선 하트 + 회색 텍스트
 *  - 활성:   #FF1B1B 채워진 하트 + 검정 텍스트 (다른 정렬 항목과 동일, 텍스트는 빨강 X)
 *  - overflow: visible — heart path 의 좌우 bezier 가 viewBox 밖으로 나가
 *    stroke 가 잘리는 현상 방지 */
.discover-page .dsc-bookmark-toggle .heart-icon {
    width: 20px;
    height: 18px;
    flex-shrink: 0;
    display: block;
    overflow: visible;
}
.discover-page .dsc-bookmark-toggle .heart-icon--filled { display: none; }
.discover-page .dsc-bookmark-toggle.is-active { color: #000; }
.discover-page .dsc-bookmark-toggle.is-active .heart-icon--outline { display: none; }
.discover-page .dsc-bookmark-toggle.is-active .heart-icon--filled { display: block; }

.discover-page .dsc-sort-row__right {
    position: absolute;                             /* 우측 끝 절대 핀 */
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
}
.discover-page .dsc-page-arrow {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    border: 1px solid #e8e8e8;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 14px;
    line-height: 1;
}
.discover-page .dsc-page-arrow:hover { background: #f5f5f5; }
.discover-page .dsc-page-info {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    text-align: center;
    padding: 0 4px;
    -webkit-text-stroke: 0.2px currentColor;
}
@media (max-width: 1023px) {
    /* 모바일 pills — 시안: 14px/500, padding 5x18 (실제 디바이스 비율로 13/500, 5x14).
     * 카테고리 많을 때 줄바꿈 대신 가로 스크롤 (시안 magazine-shorts-feed 동일 동작).
     * 스크롤바는 숨김. 좌우 padding 으로 처음/마지막 pill 가장자리 여백 보장. */
    .discover-page .dsc-pills {
        gap: 6px;
        margin-bottom: 16px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .discover-page .dsc-pills::-webkit-scrollbar { display: none; }
    .discover-page .dsc-pill { font-size: 13px; font-weight: 500; padding: 5px 14px; flex-shrink: 0; }
    .discover-page .dsc-pill.is-active { background: #0f172a; }
    /* 모바일 sort row — 상단 페이지 정보 숨김. Bookmarks 는 시안대로 우측 끝으로 이동.
     * PC 에선 left/right 두 박스가 모두 absolute 핀인 구조. 모바일에선 flex 컨테이너로 풀고
     * left 박스를 flex item(static) 으로, bookmark 는 margin-left:auto 로 우측 push. */
    /* sort-row 가 카드 그리드 좌/우 끝선까지 차도록 구성.
     *  - .dsc-sort-row 가 positioning context (position:relative) — sort-row 좌/우 = 카드 좌/우 라인
     *  - .dsc-sort-row__left 는 좌측 flex 그룹 (Latest + Popular) — 좌측 끝 밀착
     *  - .dsc-bookmark-toggle 는 sort-row 의 absolute 핀(right:0) — 우측 끝 밀착
     *  - __left 는 position:static 유지 → bookmark-toggle 의 absolute 기준이 sort-row 가 됨 */
    .discover-page .dsc-sort-row {
        position: relative;
        display: flex;
        align-items: center;
        height: auto;
        min-height: 32px;
        margin: 0 0 12px;
    }
    .discover-page .dsc-sort-row__right { display: none !important; }
    .discover-page .dsc-sort-row__left {
        position: static;
        transform: none;
        margin: 0 0 0 -16px;     /* sort-row 가 카드 라인보다 16px 들여진 게 아닌, __left 좌측 끝 미세 인셋 시각 보정 */
        padding: 0;
        display: flex;
        align-items: center;
        gap: 18px;
        min-width: 0;
    }
    .discover-page .dsc-sort-item { font-size: 14px; font-weight: 600; -webkit-text-stroke: 0; }
    .discover-page .dsc-sort-row .dsc-bookmark-toggle {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #959595;
        gap: 4px;
        -webkit-text-stroke: 0;
    }
    .discover-page .dsc-bookmark-toggle .heart-icon { width: 16px; height: 14px; opacity: 0.32; }
    .discover-page .dsc-bookmark-toggle.is-active .heart-icon { opacity: 1; }
    .discover-page .dsc-bookmark-toggle.is-active { color: #000; }
}

/* ============================================================
 *  6. 카드 그리드 (시안 .card-large / .card-small / .shorts-card)
 *  PC 3컬럼 (1fr) gap 30px / 카드 시안 비율 446 폭 기준
 *  카드 내부 비율 유지 — 컬럼 너비 가변, 이미지 16:9
 * ============================================================ */
/* 카드 그리드 — CSS Columns 기반 Masonry (시안의 자연스러운 카드 높이 다양화)
 *  - 카드가 자기 컨텐츠 높이로 차지 → 같은 행 통일 X (바둑판 X)
 *  - 흐름은 컬럼 우선 (위→아래→다음 컬럼)
 *  - shorts/banner 는 column 우선 슬롯 인덱스 기준 배치 (JS 처리)
 */
.discover-page .dsc-card-grid {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 20px;
    align-items: start;
}
.discover-page .dsc-card-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}
.discover-page .dsc-card-grid > .dsc-card-col > .dsc-card {
    display: block;
    width: 100%;
}
@media (max-width: 1023px) {
    /* 시안 모바일 — 2컬럼 grid 직접 동작 (JS 가 dsc-card-col 래퍼 없이 카드를 직접 grid item 으로 출력).
     * grid-auto-flow: row → row-major 자연 배치 (시안 5행 슬롯 패턴 매핑).
     * row gap 12 (행간 여유) / col gap 10. */
    .discover-page .dsc-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 10px;
        margin-top: 12px;    /* sort-row 와 그리드 간격 (PC 20 → 모바일 12) */
        align-items: start;
    }
    .discover-page .dsc-card-col { gap: 12px; }
    /* 모바일 풀와이드 카드 — grid-column: 1 / -1 로 가로 전체 차지. 한 행을 단독으로 점유.
     * 상하 20px 여백으로 위/아래 일반 카드 행과 시각적 구분. */
    .discover-page .dsc-card-grid > .dsc-card.dsc-card--full {
        grid-column: 1 / -1;
        margin: 20px 0;
    }
    /* 풀와이드 카드 이미지 비율 — 시안 688:388 ≈ 1.77 (일반 카드와 동일 비율) */
    .discover-page .dsc-card.dsc-card--full .dsc-card__image { aspect-ratio: 688 / 388; }
}

/* 일반 카드 — 색감은 시안, 비율/사이즈는 원본 매칭. CSS Columns 안에서 block 사용 */
.discover-page .dsc-card {
    border: 1px solid #efefef;            /* 시안 보더 — 카드 라인 부담 줄이기 위해 연한 회색 */
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    /* display:flex 제거 — CSS Columns 안에선 block 동작이 안전 */
}
.discover-page .dsc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
    border-color: #36cf00;                /* 시안 hover 초록 */
}

.discover-page .dsc-card__image {
    position: relative;
    width: 100%;
    height: 233px;                        /* 원본 비율 고정 */
    background: #d9d9d9;                  /* 시안 placeholder 회색 */
    overflow: hidden;
    flex-shrink: 0;
}
.discover-page .dsc-card__image img,
.discover-page .dsc-card__image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.discover-page .dsc-card__placeholder {
    width: 100%; height: 100%;
    background:
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.18) 8px 16px),
        #d2d2d2;
}

/* 카드 액션 — 원본 비율 (51x51, gap 1px), 색감은 시안 (검정 30%) */
.discover-page .dsc-card__actions {
    position: absolute;
    right: 0px;
    bottom: 0;
    display: flex;
    gap: 1px;
}
.discover-page .dsc-card-action {
    width: 51px;
    height: 51px;
    border: 0;
    background: rgba(0, 0, 0, 0.3);       /* 시안 검정 30% */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s;
}
.discover-page .dsc-card-action:hover { background: rgba(0, 0, 0, 0.6); }
.discover-page .dsc-card-action img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain !important;
}
.discover-page .dsc-card-action--share img { max-width: 21px !important; max-height: 25px !important; }
/* share SVG (사용자 제공, viewBox 27:32) — PC 기본 21x25 (시각적으로 기존 PNG 와 동일) */
.discover-page .dsc-card-action--share .dsc-share-icon { width: 21px; height: 25px; display: block; }
/* 하트 아이콘 — inline SVG 두 개 (외곽선/채워진) 를 토글로 전환 (원본 ibantot 동작) */
.discover-page .dsc-card-action--heart .heart-icon {
    width: 22px;
    height: 20px;
    display: block;
    pointer-events: none;
    overflow: visible;
}
.discover-page .dsc-card-action--heart .heart-icon--filled { display: none; }
.discover-page .dsc-card-action--heart.is-active .heart-icon--outline { display: none; }
.discover-page .dsc-card-action--heart.is-active .heart-icon--filled { display: block; }

/* 카드 본문 — 원본 비율 (padding 20 24 24, 폰트 사이즈) + 시안 색감 */
.discover-page .dsc-card__body {
    padding: 20px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.discover-page .dsc-card__category {
    font-size: 17px;
    font-weight: 600;
    color: #36cf00;                       /* 시안 초록 */
    margin: 0 0 8px;
    letter-spacing: -0.51px;
    line-height: 1.4;
}
.discover-page .dsc-card__title {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.66px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.discover-page .dsc-card__desc {
    font-size: 16px;
    font-weight: 400;
    color: #959595;                       /* 시안 회색 */
    line-height: 1.4;
    letter-spacing: -0.48px;
    margin: 8px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;                /* 시안: 4줄 */
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* 시안 의도된 카드 높이 변주 — 컨텐츠가 동일해도 카드별 다른 높이 효과
 *  desc 줄수를 슬롯 위치에 따라 차등 적용해 자연스러운 masonry 효과 강조 */
.discover-page .dsc-card-grid > .dsc-card:nth-child(2) .dsc-card__desc,
.discover-page .dsc-card-grid > .dsc-card:nth-child(5) .dsc-card__desc {
    -webkit-line-clamp: 2;                /* col2 위쪽 카드는 짧게 (시안 Card2, 5: body 219px) */
}
.discover-page .dsc-card-grid > .dsc-card:nth-child(8) .dsc-card__desc {
    -webkit-line-clamp: 6;                /* col2 아래 카드 길게 (시안 Card8: body 342px) */
}
.discover-page .dsc-card-grid > .dsc-card:nth-child(6) .dsc-card__desc {
    -webkit-line-clamp: 5;                /* col3 두번째 (시안 Card6: body 322px) */
}
/* 9번째 카드는 image 살짝 더 크고 desc 짧게 (시안 Card9: image 300, body 168) */
.discover-page .dsc-card-grid > .dsc-card:nth-child(9) .dsc-card__image { height: 280px; }
.discover-page .dsc-card-grid > .dsc-card:nth-child(9) .dsc-card__desc {
    -webkit-line-clamp: 2;
}

/* Shorts 카드 — 시안 비율 유지하되 grid 1행만 차지 (다른 카드 흐름 영향 X) */
.discover-page .dsc-card.dsc-card--shorts {
    border: 0;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}
.discover-page .dsc-card.dsc-card--shorts .dsc-card__image {
    height: auto;
    aspect-ratio: 446 / 600;
    background: #d9d9d9;
}
.discover-page .dsc-card.dsc-card--shorts .dsc-card__body { display: none; }
/* 쇼츠 카드 호버 자동 재생 — 썸네일 위에 영상 레이어 페이드인.
 * discover_shorts.js (.dsc-sf-card__hover-video) 동일 패턴, 셀렉터만 .dsc-card 컨텍스트로. */
.discover-page .dsc-card.dsc-card--shorts .dsc-card__hover-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 1;
    pointer-events: none;
}
.discover-page .dsc-card.dsc-card--shorts.is-hovering .dsc-card__hover-video {
    opacity: 1;
}

.discover-page .dsc-shorts-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 20px;
    background: linear-gradient(to top, rgb(0 0 0 / 26%), transparent);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.discover-page .dsc-shorts-overlay__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;
}
.discover-page .dsc-shorts-overlay__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;
}
.discover-page .dsc-shorts-overlay__title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* 배너 카드 — 시안 .banner-card (이미지만, 우상단 컨트롤 점) */
.discover-page .dsc-card.dsc-card--banner {
    border: 0;
    background: #d9d9d9;
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}
.discover-page .dsc-card.dsc-card--banner .dsc-card__image {
    height: auto;
    aspect-ratio: 446 / 533;
}
.discover-page .dsc-card.dsc-card--banner .dsc-card__body { display: none; }
/* 배너 슬라이드 — list 길이만큼 stack, 현재 index 만 display 표시 (JS 가 인라인 style 토글). */
.discover-page .dsc-card.dsc-card--banner .dsc-banner-slide {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    color: inherit;
}
/* 배너 캐러셀 컨트롤 — 우상단 ← X/Y → + pause/play */
.discover-page .dsc-card.dsc-card--banner .dsc-banner-controls {
    position: absolute;
    top: 15px; right: 15px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}
.discover-page .dsc-card.dsc-card--banner .dsc-banner-nav {
    height: 30px;
    padding: 5px 6px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 4px;
}
.discover-page .dsc-card.dsc-card--banner .dsc-banner-nav__text {
    font-size: 16px;
    color: #fff;
    letter-spacing: -0.48px;
    line-height: 1;
}
.discover-page .dsc-card.dsc-card--banner .dsc-banner-nav__btn {
    padding: 0;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.discover-page .dsc-card.dsc-card--banner .dsc-banner-nav__btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.discover-page .dsc-card.dsc-card--banner .dsc-banner-pause {
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 0 !important;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
 *  하단 작은 카드 그리드 — 시안 .small-card-grid (4컬럼 가로)
 *  카드 너비 327, 이미지 184, body padding 16, title 20px line-clamp 2
 * ============================================================ */
.discover-page .dsc-small-grid {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.discover-page .dsc-card.dsc-card--small .dsc-card__image { height: 184px; }
.discover-page .dsc-card.dsc-card--small .dsc-card__body { padding: 16px; }
.discover-page .dsc-card.dsc-card--small .dsc-card__category { font-size: 16px; }
.discover-page .dsc-card.dsc-card--small .dsc-card__title {
    font-size: 20px;
    -webkit-line-clamp: 2;
    letter-spacing: -0.6px;
}
.discover-page .dsc-card.dsc-card--small .dsc-card__desc {
    font-size: 14px;
    -webkit-line-clamp: 4;
    letter-spacing: -0.42px;
}
.discover-page .dsc-card.dsc-card--small .dsc-card-action { width: 44px; height: 44px; }
.discover-page .dsc-card.dsc-card--small .dsc-card-action img { max-width: 18px !important; max-height: 19px !important; }
.discover-page .dsc-card.dsc-card--small .dsc-card-action--share .dsc-share-icon { width: 16px; height: 19px; }
.discover-page .dsc-card.dsc-card--small .dsc-card-action--heart .heart-icon { width: 18px; height: 16px; }

@media (max-width: 1023px) {
    .discover-page .dsc-small-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .discover-page .dsc-card.dsc-card--small .dsc-card__image { height: 109px; }
    .discover-page .dsc-card.dsc-card--small .dsc-card__body { padding: 10px; }
    .discover-page .dsc-card.dsc-card--small .dsc-card__category { font-size: 14px; }
    .discover-page .dsc-card.dsc-card--small .dsc-card__title { font-size: 16px; }
    .discover-page .dsc-card.dsc-card--small .dsc-card__desc { font-size: 12px; }
    .discover-page .dsc-card.dsc-card--small .dsc-card-action { width: 40px; height: 40px; }
}

/* 모바일 — 일반 카드 비율 (시안 매칭).
 * 시안: image height 191px (카드 폭 339 기준 1.78:1), body padding 20, category 14, title 16/700 line-clamp 2,
 *       desc 14 line-clamp 2, border-radius 10, border #e3e3e3 (top 없음).
 * 실제 디바이스(360-400) 비율로 height 는 폭의 0.56 → 약 95-100px 사이. 시안 191 의 직접 적용은 너무 큼.
 * 카드 폭에 따라 가변 — aspect-ratio 339:191 ≈ 1.78 로 자연 비율 유지. */
@media (max-width: 1023px) {
    .discover-page .dsc-card { border-radius: 10px; border: 1px solid #efefef; }
    .discover-page .dsc-card__image {
        height: auto;
        aspect-ratio: 339 / 191;
        border-radius: 10px 10px 0 0;
        border-bottom: 0;
    }
    .discover-page .dsc-card__body { padding: 12px 14px 14px; border: 0; }
    .discover-page .dsc-card__category { font-size: 13px; font-weight: 500; letter-spacing: -0.39px; margin-bottom: 6px; }
    .discover-page .dsc-card__title {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -0.42px;
        -webkit-line-clamp: 2;
    }
    .discover-page .dsc-card__desc {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: -0.36px;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        margin-top: 6px;
    }
    /* 모바일 카드는 시안 컬럼별 변주 (nth-child 3,5,6,8,9) 룰 무효화 — 균등한 2col 그리드 */
    .discover-page .dsc-card-grid > .dsc-card:nth-child(2) .dsc-card__desc,
    .discover-page .dsc-card-grid > .dsc-card:nth-child(5) .dsc-card__desc,
    .discover-page .dsc-card-grid > .dsc-card:nth-child(6) .dsc-card__desc,
    .discover-page .dsc-card-grid > .dsc-card:nth-child(8) .dsc-card__desc,
    .discover-page .dsc-card-grid > .dsc-card:nth-child(9) .dsc-card__desc { -webkit-line-clamp: 2; }
    .discover-page .dsc-card-grid > .dsc-card:nth-child(9) .dsc-card__image { height: auto; }
    /* 카드 액션 — 40x40 (시안), share SVG 16x19, heart 18x16 */
    .discover-page .dsc-card__actions { bottom: 0; right: 0; gap: 1px; }
    .discover-page .dsc-card-action { width: 40px; height: 40px; background: rgba(0, 0, 0, 0.3); }
    .discover-page .dsc-card-action img { max-width: 15px !important; max-height: 15px !important; }
    .discover-page .dsc-card-action--share img { max-width: 19px !important; max-height: 19px !important; }
    /* share SVG (27:32 비율) — 16w 19h */
    .discover-page .dsc-card-action--share .dsc-share-icon { width: 16px; height: 19px; display: block; }
    .discover-page .dsc-card-action--heart .heart-icon { width: 18px; height: 16px; }
    /* 모바일 shorts/banner — 시안 비율 매칭 (일반 카드 image 191 + body 약 163 = 354 ≈ shorts/banner 단독 image 비율) */
    .discover-page .dsc-card.dsc-card--shorts .dsc-card__image { aspect-ratio: 339 / 456; height: auto; }
    .discover-page .dsc-card.dsc-card--banner .dsc-card__image { aspect-ratio: 339 / 406; height: auto; }
    /* 모바일 shorts 카드 오버레이 — PC 30px 재생 아이콘 / 18px 제목은 카드 사이즈 대비 과해
     * 시안(모바일 720w 기준 약 22px 아이콘 / 13px 제목) 비례로 축소. padding 도 축소. */
    .discover-page .dsc-shorts-overlay { padding: 12px 14px; gap: 8px; }
    .discover-page .dsc-shorts-overlay__play { width: 22px; height: 22px; }
    .discover-page .dsc-shorts-overlay__play::after {
        border-width: 4px 0 4px 7px;
        margin-left: 1px;
    }
    .discover-page .dsc-shorts-overlay__title { font-size: 13px; font-weight: 700; }
}

/* ============================================================
 *  7. 빈 상태 — 시안: 캐릭터(좌) + 텍스트(우) 가로 배치 (쇼츠 상세 빈 상태와 동일)
 *  list 페이지(.dsc-empty) / shorts list 페이지(.dsc-sf-empty) 공용 적용.
 * ============================================================ */
.discover-page .dsc-empty,
.discover-page .dsc-sf-empty {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    gap: 60px;
    background: transparent;
    border-radius: 0;
    margin-bottom: 30px;
    color: #000;
    text-align: left;
}
.discover-page .dsc-empty__char,
.discover-page .dsc-sf-empty__char {
    width: 250px;
    height: auto;
    max-width: 40vw;
    flex-shrink: 0;
}
.discover-page .dsc-empty__text,
.discover-page .dsc-sf-empty__text {
    font-family: 'SUIT Variable', 'SUIT', 'Pretendard Variable', 'Pretendard', sans-serif;
    font-size: 29px;
    font-weight: 400;
    color: #000;
    line-height: 1.4;
    letter-spacing: -0.87px;
    white-space: pre-line;
    text-align: left;
}
@media (max-width: 1023px) {
    .discover-page .dsc-empty,
    .discover-page .dsc-sf-empty { gap: 40px; padding: 60px 20px; }
    .discover-page .dsc-empty__char,
    .discover-page .dsc-sf-empty__char { width: 200px; }
    .discover-page .dsc-empty__text,
    .discover-page .dsc-sf-empty__text { font-size: 22px; }
}
@media (max-width: 559px) {
    .discover-page .dsc-empty,
    .discover-page .dsc-sf-empty { flex-direction: column; gap: 24px; text-align: center; }
    .discover-page .dsc-empty__char,
    .discover-page .dsc-sf-empty__char { width: 180px; }
    .discover-page .dsc-empty__text,
    .discover-page .dsc-sf-empty__text { font-size: 18px; text-align: center; }
}

/* ============================================================
 *  8. 하단 페이지네이션 (시안 .bottom-pagination)
 * ============================================================ */
.discover-page .dsc-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 19px;
    padding: 24px 0;
}
.discover-page .dsc-pagination .dsc-page-arrow {
    width: 40px;
    height: 40px;
}
.discover-page .dsc-page-num {
    width: 24px;
    text-align: center;
    color: #d2d2d2;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    line-height: 40px;
}
.discover-page .dsc-page-num:hover { color: #555; }
.discover-page .dsc-page-num.is-active { color: #000; }
/* "cur / last" 모바일 인디케이터 — PC 에선 항상 숨김. JS 가 모든 페이지에 무조건 렌더 */
.discover-page .dsc-pagination .dsc-page-info-mobile { display: none; }
@media (max-width: 1023px) {
    /* 시안 모바일 페이지네이션: ← arrow 33x33 (border #e3e3e3) + "1 / 12" 텍스트만 + → arrow.
     * 페이지 숫자 노출은 PC 에만, 모바일은 .dsc-page-info-mobile 만 표시. */
    .discover-page .dsc-pagination .dsc-page-num { display: none; }
    .discover-page .dsc-pagination .dsc-page-info-mobile {
        display: inline-block;
        font-family: 'Pretendard Variable', Pretendard, 'SUIT Variable', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #000;
        white-space: nowrap;
        padding: 0 4px;
    }
    .discover-page .dsc-pagination { gap: 12px; padding: 16px 0; }
    .discover-page .dsc-pagination .dsc-page-arrow {
        width: 33px;
        height: 33px;
        border: 1px solid #e3e3e3;
        color: #000;
        font-size: 14px;
    }
}

/* -------- 토스트 모달 (링크 복사 등 알림 공용) — 시안: 중앙 화이트 박스 + 메시지 + 검정 OK 버튼
 *  discover / discover_detail / discover_shorts_detail 세 페이지 공용. 본 파일이 모든 페이지에서 로드되므로
 *  중앙 정의 위치로 둠. 메시지는 <div> — reset.css `p:not(.nocss p)` (0,0,1,2) 함정 회피 */
.dsc-toast-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dsc-toast-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
}
.dsc-toast-modal__box {
    position: relative;
    width: 92%;
    max-width: 400px;
    background: #fff;
    border-radius: 12px;
    padding: 48px 28px 28px;
    box-shadow: 0 12px 40px rgba(0,0,0,.2);
    text-align: center;
    box-sizing: border-box;
}
.dsc-toast-modal__msg {
    margin: 0 0 40px;
    font-size: 16px;
    color: #000;
    line-height: 1.5;
    letter-spacing: -0.48px;
    word-break: keep-all;
}
.dsc-toast-modal__btn {
    display: block;
    width: 100%;
    max-width: none;
    height: 52px;
    background: #000;
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.48px;
    cursor: pointer;
    transition: background .15s;
}
.dsc-toast-modal__btn:hover { background: #333; }
@media (max-width: 559px) {
    .dsc-toast-modal__box { padding: 36px 20px 20px; max-width: 320px; }
    .dsc-toast-modal__msg { font-size: 15px; margin-bottom: 28px; }
    .dsc-toast-modal__btn { height: 46px; font-size: 15px; }
}