/* ==========================================================================
   Haru Live - BEST / 개념글 모바일
   public/css/best/best-mobile.css
   ========================================================================== */


/* ==========================================================================
   Variables
   ========================================================================== */

.best-page {
    --best-bg: #f5f6f8;
    --best-card: #ffffff;

    --best-text: #111827;
    --best-text-soft: #374151;
    --best-subtext: #64748b;
    --best-muted: #94a3b8;

    --best-border: #e5e7eb;
    --best-border-soft: #eef2f7;

    --best-red: #ef4444;
    --best-red-soft: #fef2f2;

    --best-orange: #f97316;
    --best-orange-soft: #fff7ed;

    --best-blue: #2563eb;
    --best-blue-soft: #eff6ff;

    --best-indigo: #4f46e5;
    --best-indigo-soft: #eef2ff;

    --best-shadow:
        0 1px 2px rgba(15, 23, 42, .03),
        0 4px 12px rgba(15, 23, 42, .025);
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media screen and (max-width: 640px) {

    /* ======================================================================
       페이지
       ====================================================================== */

    .best-page {
        width: 100%;
        max-width: none !important;

        margin: 0 !important;

        padding:
            14px
            10px
            26px !important;

        overflow-x: hidden;
    }

    .best-page *,
    .best-page *::before,
    .best-page *::after {
        box-sizing: border-box;
    }

    .best-page-header {
        width: 100%;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        align-items: start !important;

        gap: 10px !important;
    }

    .best-page-header > div:first-child {
        min-width: 0;
    }

    .best-page-header h2 {
        margin: 0 !important;

        font-size: 19px !important;
        font-weight: 800 !important;

        line-height: 1.25 !important;

        letter-spacing: -0.045em;

        color: #111827 !important;
    }

    .best-page-header h2 + p {
        max-width: 260px;

        margin:
            4px
            0
            0 !important;

        font-size: 10.5px !important;

        line-height: 1.45 !important;

        letter-spacing: -0.015em;

        color: #64748b !important;

        word-break: keep-all;
    }

    .best-page-header > .shrink-0 {
        display: inline-flex !important;

        align-items: center !important;

        gap: 2px !important;

        margin-top: 3px !important;

        font-size: 9px !important;

        line-height: 1 !important;

        color: #94a3b8 !important;

        white-space: nowrap !important;
    }

    .best-page-header > .shrink-0 strong {
        font-size: 10px !important;
        font-weight: 700 !important;

        color: #475569 !important;
    }


    /* ======================================================================
       메인 목록 카드
       ====================================================================== */

    .best-list {
        width: 100%;

        border-radius: 13px !important;

        border-color: var(--best-border) !important;

        background: #ffffff !important;

        box-shadow: var(--best-shadow) !important;

        overflow: hidden !important;
    }


    /* ======================================================================
       목록 상단
       ====================================================================== */

    .best-list-header {
        width: 100%;

        min-height: 50px;

        display: grid !important;

        grid-template-columns:
            auto
            minmax(0, 1fr);

        align-items: center !important;

        gap: 7px !important;

        padding:
            8px
            9px !important;

        background: #f8fafc !important;

        border-bottom-color: #e5e7eb !important;
    }

    .best-list-header > div:first-child {
        display: flex;

        align-items: center;

        gap: 6px !important;

        white-space: nowrap;
    }

    .best-list-header > div:first-child > span:first-child {
        width: 6px !important;
        height: 6px !important;

        border-radius: 999px;

        background: #ef4444 !important;

        box-shadow:
            0 0 0 3px rgba(239, 68, 68, .07);
    }

    .best-list-header > div:first-child > span:last-child {
        font-size: 10.5px !important;

        font-weight: 800 !important;

        line-height: 1.2 !important;

        letter-spacing: -0.025em;

        color: #374151 !important;
    }


    /* ======================================================================
       정렬탭
       x-post-sort-tabs
       ====================================================================== */

    .best-list-header > *:last-child {
        min-width: 0;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .best-list-header > *:last-child::-webkit-scrollbar {
        display: none;
    }

    .best-list-header > *:last-child > * {
        width: max-content !important;

        min-width: max-content !important;
    }

    .best-list-header .flex {
        flex-wrap: nowrap !important;

        gap: 1px !important;
    }

    .best-list-header a,
    .best-list-header button {
        flex: 0 0 auto !important;

        min-width: auto !important;
        min-height: 27px !important;

        padding:
            4px
            7px !important;

        border-radius: 6px !important;

        font-size: 8px !important;

        line-height: 1 !important;

        white-space: nowrap !important;
    }


    /* ======================================================================
       게시글
       ====================================================================== */

    .best-post {
        position: relative;

        padding:
            10px
            9px !important;

        background: #ffffff !important;
    }

    .best-post:hover {
        background: #ffffff !important;
    }

    .best-post:active {
        background: #f8fafc !important;
    }

    .best-post > .flex {
        align-items: center !important;

        gap: 7px !important;
    }

    .best-post > .flex > .min-w-0 {
        min-width: 0;

        flex: 1;
    }


    /* ======================================================================
       채널 / 작성자 / 시간
       ====================================================================== */

    .best-post .mb-2.text-xs {
        display: flex !important;

        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: 4px !important;

        margin-bottom: 5px !important;

        overflow: hidden;

        font-size: 8px !important;

        line-height: 1.25 !important;
    }

    .best-post .mb-2.text-xs > span:first-child {
        flex: 0 1 auto;

        max-width: 105px !important;

        min-height: 22px;

        padding:
            3px
            6px !important;

        border-radius: 5px !important;

        font-size: 7.5px !important;
    }

    .best-post .mb-2.text-xs > span:not(:first-child) {
        font-size: 7.5px !important;

        white-space: nowrap;
    }

    .best-post time {
        flex: 0 0 auto;

        font-size: 7.5px !important;

        color: #94a3b8 !important;

        white-space: nowrap;
    }


    /* ======================================================================
       제목
       ====================================================================== */

    .best-post .flex.items-center.gap-2 {
        gap: 3px !important;

        min-width: 0;
    }

    .best-post h3 {
        min-width: 0;

        flex: 1 1 auto;

        overflow: hidden;

        font-size: 11.5px !important;

        font-weight: 700 !important;

        line-height: 1.35 !important;

        letter-spacing: -0.025em;

        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* BEST */
    .best-post .text-\[11px\].font-bold.text-red-600 {
        flex: 0 0 auto;

        padding:
            2px
            5px !important;

        border-radius: 999px !important;

        font-size: 7px !important;

        line-height: 1.2 !important;
    }


    /* 공지 */
    .best-post .text-orange-600 {
        flex: 0 0 auto;

        padding:
            2px
            5px !important;

        font-size: 7px !important;

        line-height: 1.2 !important;
    }


    /* 댓글 수 */
    .best-post .text-indigo-600 {
        font-size: 8.5px !important;

        white-space: nowrap;
    }


    /* ======================================================================
       통계
       ====================================================================== */

    .best-post .mt-3.text-xs {
        display: flex !important;

        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: 3px !important;

        margin-top: 7px !important;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .best-post .mt-3.text-xs::-webkit-scrollbar {
        display: none;
    }

    .best-post .mt-3.text-xs > span {
        flex: 0 0 auto;

        min-height: 22px;

        padding:
            3px
            6px !important;

        border-radius: 999px !important;

        font-size: 7.5px !important;

        line-height: 1 !important;

        white-space: nowrap;
    }

    .best-post .mt-3.text-xs strong {
        font-size: 7.5px !important;
    }


    /* ======================================================================
       개념 점수
       ====================================================================== */

    .best-post-score {
        flex: 0 0 auto !important;

        min-width: 48px !important;

        width: 48px;

        padding:
            5px
            4px;

        border-left: 1px solid #f1f5f9;

        text-align: center;
    }

    .best-post-score > div:first-child {
        font-size: 7px !important;

        line-height: 1.2;

        color: #94a3b8 !important;

        white-space: nowrap;
    }

    .best-post-score > .text-xl {
        margin-top: 2px !important;

        font-size: 16px !important;

        font-weight: 800 !important;

        line-height: 1.15;

        color: #ef4444 !important;

        font-variant-numeric: tabular-nums;
    }

    .best-post-score > .text-\[10px\] {
        margin-top: 1px !important;

        font-size: 6.5px !important;

        letter-spacing: .04em;

        color: #cbd5e1 !important;
    }


    /* ======================================================================
       빈 상태
       ====================================================================== */

    .best-list > .px-6.py-16 {
        min-height: 190px;

        padding:
            32px
            16px !important;

        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: center;
    }

    .best-list > .px-6.py-16 .w-12.h-12 {
        width: 40px !important;
        height: 40px !important;
    }

    .best-list > .px-6.py-16 .w-6.h-6 {
        width: 20px !important;
        height: 20px !important;
    }

    .best-list > .px-6.py-16 p:first-of-type {
        margin-top: 10px !important;

        font-size: 12px !important;
    }

    .best-list > .px-6.py-16 p:last-of-type {
        margin-top: 3px !important;

        font-size: 9.5px !important;

        line-height: 1.45 !important;
    }


    /* ======================================================================
       Pagination
       ====================================================================== */

    .best-page > .mt-5 {
        margin-top: 10px !important;
    }

    .best-page > .mt-5 nav {
        width: 100%;
        max-width: 100%;

        overflow-x: auto;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .best-page > .mt-5 nav::-webkit-scrollbar {
        display: none;
    }


    /* ======================================================================
       overflow 보호
       ====================================================================== */

    .best-page .flex,
    .best-page .grid {
        min-width: 0;
    }

    .best-page img,
    .best-page svg {
        max-width: 100%;
    }

}


/* ==========================================================================
   <= 430px
   ========================================================================== */

@media screen and (max-width: 430px) {

    .best-page {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

}


/* ==========================================================================
   <= 390px
   ========================================================================== */

@media screen and (max-width: 390px) {

    .best-page {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .best-page-header h2 {
        font-size: 18px !important;
    }

    .best-page-header h2 + p {
        max-width: 230px;

        font-size: 10px !important;
    }

    .best-list-header {
        gap: 6px !important;

        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .best-list-header a,
    .best-list-header button {
        padding-left: 6px !important;
        padding-right: 6px !important;

        font-size: 7.5px !important;
    }

    .best-post {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .best-post-score {
        min-width: 44px !important;

        width: 44px;
    }

    .best-post-score > .text-xl {
        font-size: 15px !important;
    }

}


/* ==========================================================================
   <= 350px
   ========================================================================== */

@media screen and (max-width: 350px) {

    .best-page {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .best-list-header {
        display: block !important;
    }

    .best-list-header > *:last-child {
        margin-top: 6px;
    }

    .best-post .mb-2.text-xs > span:first-child {
        max-width: 88px !important;
    }

    .best-post-score {
        min-width: 41px !important;

        width: 41px;
    }

}


/* ==========================================================================
   Touch
   ========================================================================== */

@media screen and (max-width: 640px) and (hover: none) and (pointer: coarse) {

    .best-post {
        -webkit-tap-highlight-color: transparent;

        touch-action: manipulation;
    }

    .best-post:active {
        background: #f8fafc !important;
    }

}


/* ==========================================================================
   Reduce motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .best-page *,
    .best-page *::before,
    .best-page *::after {
        transition-duration: .01ms !important;

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

}