/* ==========================================================================
   Haru Live - Common Page Header
   ========================================================================== */

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

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.haru-page-header__text {
    min-width: 0;
    flex: 1 1 auto;
}

.haru-page-header__title {
    margin: 0;

    font-size: 20px;
    font-weight: 700;

    line-height: 1.3;

    color: #111827;
}

.haru-page-header__description {
    margin: 4px 0 0;

    font-size: 14px;

    line-height: 1.5;

    color: #6b7280;
}


/* count */

.haru-page-header__count {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 3px;

    font-size: 14px;

    color: #6b7280;

    white-space: nowrap;
}

.haru-page-header__count strong {
    font-weight: 700;

    color: #111827;
}


/* actions */

.haru-page-header__actions {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 7px;
}

.haru-page-header__action {
    min-height: 36px;

    display: inline-flex;

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

    padding: 7px 11px;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    transition:
        background-color .15s ease,
        transform .08s ease;
}

.haru-page-header__action--dark {
    background: #374151;

    color: #ffffff;
}

.haru-page-header__action--primary {
    background: #2563eb;

    color: #ffffff;
}


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

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

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

        display: grid !important;

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

        align-items: start !important;

        gap: 10px !important;
    }


    /* ----------------------------------------------------------
       text
       ---------------------------------------------------------- */

    .haru-page-header__text {
        min-width: 0;
    }

    .haru-page-header__title {
        margin: 0 !important;

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

        line-height: 1.25 !important;

        letter-spacing: -0.045em;

        color: #111827 !important;
    }

    .haru-page-header__description {
        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;
    }


    /* ----------------------------------------------------------
       count
       종합속보 / 개념글 등
       ---------------------------------------------------------- */

    .haru-page-header__count {
        flex: 0 0 auto;

        display: inline-flex !important;

        align-items: center !important;

        gap: 2px !important;

        margin-top: 3px;

        font-size: 9px !important;

        line-height: 1 !important;

        color: #94a3b8 !important;

        white-space: nowrap !important;
    }

    .haru-page-header__count strong {
        font-size: 10px !important;

        font-weight: 700 !important;

        color: #475569 !important;
    }


    /* ----------------------------------------------------------
       actions
       채널 관리 / 채널 생성 등
       ---------------------------------------------------------- */

    .haru-page-header__actions {
        flex: 0 0 auto;

        display: flex !important;

        align-items: center !important;

        gap: 5px !important;

        margin-top: 0;
    }

    .haru-page-header__action {
        min-width: 0;
        min-height: 30px;

        padding:
            6px
            8px !important;

        border-radius: 7px !important;

        font-size: 8.5px !important;
        font-weight: 700 !important;

        line-height: 1 !important;

        box-shadow: none !important;

        -webkit-tap-highlight-color: transparent;
    }

    .haru-page-header__action:active {
        transform: scale(.97);
    }

}


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

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

    .haru-page-header {
        gap: 8px !important;
    }

    .haru-page-header__description {
        max-width: 250px;
    }

}


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

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

    .haru-page-header__title {
        font-size: 18px !important;
    }

    .haru-page-header__description {
        max-width: 235px;

        font-size: 10px !important;
    }

    .haru-page-header__action {
        padding-left: 7px !important;
        padding-right: 7px !important;

        font-size: 8px !important;
    }

}


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

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

    /*
     * 버튼이 여러 개 있는 페이지에서 공간 부족 시
     * 두 번째 줄로 이동
     */
    .haru-page-header:has(.haru-page-header__actions) {
        grid-template-columns: minmax(0, 1fr);
    }

    .haru-page-header__actions {
        width: 100%;

        display: grid !important;

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

        gap: 5px !important;

        margin-top: 3px;
    }

    .haru-page-header__action {
        width: 100%;
    }

}
/* ==========================================================================
   Header Action Variants
   ========================================================================== */

.haru-page-header__action--outline {
    border: 1px solid #d1d5db;

    background: #ffffff;

    color: #374151;
}

.haru-page-header__action--outline:hover {
    background: #f9fafb;

    border-color: #9ca3af;
}


.haru-page-header__action--primary {
    border: 1px solid #2563eb;

    background: #2563eb;

    color: #ffffff;
}

.haru-page-header__action--primary:hover {
    background: #1d4ed8;

    border-color: #1d4ed8;
}


.haru-page-header__action--success {
    border: 1px solid #059669;

    background: #059669;

    color: #ffffff;
}

.haru-page-header__action--success:hover {
    background: #047857;

    border-color: #047857;
}
/* ==========================================================================
   Haru Live
   Admin Channel Index Mobile

   public/css/admin/channels/channel-index-mobile.css
   ========================================================================== */


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

.admin-channel-page {
    --ac-bg: #f5f6f8;
    --ac-card: #ffffff;

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

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

    --ac-blue: #2563eb;
    --ac-red: #dc2626;

    --ac-radius-sm: 8px;
    --ac-radius-md: 12px;
    --ac-radius-lg: 14px;

    --ac-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 3px 10px rgba(15, 23, 42, 0.025);
}


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

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

    /* ======================================================================
       전체 페이지
       ====================================================================== */

    .admin-channel-page {
        width: 100%;

        padding-top: 12px !important;
        padding-bottom: 26px !important;

        background: var(--ac-bg) !important;

        overflow-x: hidden;
    }

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


    /* ======================================================================
       Container
       ====================================================================== */

    .admin-channel-page .site-page-container {
        width: 100%;
        max-width: none !important;

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


    /* ======================================================================
       상단 요약 카드
       ====================================================================== */

    .admin-channel-page
    .site-page-container
    > .mb-5.grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 7px !important;

        margin-bottom: 12px !important;
    }


    /* 요약 카드 */
    .admin-channel-page
    .site-page-container
    > .mb-5.grid
    > div {
        min-width: 0;

        min-height: 76px;

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding: 11px !important;

        border-radius: 11px !important;

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

        background: var(--ac-card) !important;

        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.025) !important;
    }


    /* 요약 제목 */
    .admin-channel-page
    .site-page-container
    > .mb-5.grid
    > div
    > .text-sm {
        overflow: hidden;

        font-size: 9px !important;
        font-weight: 600 !important;

        line-height: 1.25 !important;

        color: #94a3b8 !important;

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


    /* 숫자 */
    .admin-channel-page
    .site-page-container
    > .mb-5.grid
    > div
    > .mt-1.text-2xl {
        margin-top: 5px !important;

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

        line-height: 1.1 !important;

        letter-spacing: -0.04em;

        font-variant-numeric: tabular-nums;
    }


    /* ======================================================================
       채널 목록 section
       ====================================================================== */

    .admin-channel-page
    section.rounded-2xl {
        width: 100%;

        padding: 11px !important;

        border-radius: 13px !important;

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

        background: #ffffff !important;

        box-shadow: var(--ac-shadow) !important;
    }


    /* ======================================================================
       채널 목록 section header
       ====================================================================== */

    .admin-channel-page
    section.rounded-2xl
    > .mb-4 {
        display: grid !important;

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

        align-items: start !important;

        gap: 8px !important;

        margin-bottom: 10px !important;
    }


    .admin-channel-page
    section.rounded-2xl
    > .mb-4
    > div:first-child {
        min-width: 0;
    }


    /* 제목 */
    .admin-channel-page
    section.rounded-2xl
    h3 {
        margin: 0 !important;

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

        line-height: 1.3 !important;

        letter-spacing: -0.035em;

        color: #111827 !important;
    }


    /* 설명 */
    .admin-channel-page
    section.rounded-2xl
    h3 + p {
        max-width: 245px;

        margin-top: 3px !important;

        font-size: 9.5px !important;

        line-height: 1.45 !important;

        color: #94a3b8 !important;

        word-break: keep-all;
    }


    /* 총 N개 */
    .admin-channel-page
    section.rounded-2xl
    > .mb-4
    > .text-sm.text-gray-500 {
        flex: 0 0 auto;

        margin-top: 2px;

        padding:
            4px
            7px;

        border-radius: 999px;

        background: #f8fafc;

        font-size: 8.5px !important;
        font-weight: 600 !important;

        line-height: 1;

        color: #64748b !important;

        white-space: nowrap;
    }


    /* ======================================================================
       채널 Grid
       ====================================================================== */

    .admin-channel-page
    section.rounded-2xl
    > .grid {
        display: grid !important;

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

        gap: 7px !important;
    }

    .admin-channel-page
    section.rounded-2xl
    > .grid
    > * {
        min-width: 0;

        width: 100%;
    }


    /* ======================================================================
       x-channel.card 기본 보정
       ====================================================================== */

    .admin-channel-page
    section.rounded-2xl
    > .grid
    > div,
    .admin-channel-page
    section.rounded-2xl
    > .grid
    > article,
    .admin-channel-page
    section.rounded-2xl
    > .grid
    > a {
        width: 100%;

        border-radius: 11px !important;

        overflow: hidden;
    }


    /* 카드 내부 p-* 축소 */
    .admin-channel-page
    section.rounded-2xl
    > .grid
    .p-6 {
        padding: 12px !important;
    }

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .p-5 {
        padding: 11px !important;
    }

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .p-4 {
        padding: 10px !important;
    }

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .p-3 {
        padding: 9px !important;
    }


    /* ======================================================================
       카드 글자
       ====================================================================== */

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .text-lg {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .text-base {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .text-sm {
        font-size: 9.5px !important;
        line-height: 1.45 !important;
    }

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .text-xs {
        font-size: 8px !important;
        line-height: 1.4 !important;
    }


    /* ======================================================================
       카드 spacing
       ====================================================================== */

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .gap-4 {
        gap: 8px !important;
    }

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .gap-3 {
        gap: 6px !important;
    }

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .gap-2 {
        gap: 5px !important;
    }

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .mt-4 {
        margin-top: 8px !important;
    }

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .mt-3 {
        margin-top: 6px !important;
    }

    .admin-channel-page
    section.rounded-2xl
    > .grid
    .mt-2 {
        margin-top: 4px !important;
    }


    /* ======================================================================
       카드 버튼
       ====================================================================== */

    .admin-channel-page
    section.rounded-2xl
    > .grid
    button,

    .admin-channel-page
    section.rounded-2xl
    > .grid
    a {
        -webkit-tap-highlight-color: transparent;
    }


    .admin-channel-page
    section.rounded-2xl
    > .grid
    button.rounded,

    .admin-channel-page
    section.rounded-2xl
    > .grid
    button.rounded-md,

    .admin-channel-page
    section.rounded-2xl
    > .grid
    button.rounded-lg,

    .admin-channel-page
    section.rounded-2xl
    > .grid
    a.rounded,

    .admin-channel-page
    section.rounded-2xl
    > .grid
    a.rounded-md,

    .admin-channel-page
    section.rounded-2xl
    > .grid
    a.rounded-lg {
        min-height: 29px;

        display: inline-flex;

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

        padding:
            5px
            8px !important;

        border-radius: 7px !important;

        font-size: 8.5px !important;

        line-height: 1 !important;
    }


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

    .admin-channel-page
    section.rounded-2xl
    > .mt-6 {
        margin-top: 12px !important;
    }

    .admin-channel-page nav {
        max-width: 100%;

        overflow-x: auto;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .admin-channel-page nav::-webkit-scrollbar {
        display: none;
    }


    /* ======================================================================
       Empty state
       ====================================================================== */

    .admin-channel-page
    section.rounded-2xl
    > .border-dashed {
        min-height: 155px;

        display: flex;
        flex-direction: column;

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

        padding:
            26px
            15px !important;

        border-radius: 11px !important;

        background: #f8fafc !important;
    }


    .admin-channel-page
    section.rounded-2xl
    > .border-dashed
    > .text-base {
        font-size: 13px !important;
        font-weight: 700 !important;
    }


    .admin-channel-page
    section.rounded-2xl
    > .border-dashed
    > p {
        margin-top: 4px !important;

        font-size: 9.5px !important;

        line-height: 1.45;

        color: #94a3b8 !important;
    }


    .admin-channel-page
    section.rounded-2xl
    > .border-dashed
    > .mt-5 {
        margin-top: 12px !important;
    }


    .admin-channel-page
    section.rounded-2xl
    > .border-dashed
    a {
        min-height: 36px;

        padding:
            7px
            12px !important;

        border-radius: 7px !important;

        font-size: 9.5px !important;
    }


    /* ======================================================================
       Overflow protection
       ====================================================================== */

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

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

}


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

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

    .admin-channel-page
    .site-page-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

}


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

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

    .admin-channel-page
    .site-page-container {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }


    .admin-channel-page
    .site-page-container
    > .mb-5.grid
    > div {
        min-height: 72px;

        padding: 10px !important;
    }


    .admin-channel-page
    .site-page-container
    > .mb-5.grid
    > div
    > .mt-1.text-2xl {
        font-size: 18px !important;
    }


    .admin-channel-page
    section.rounded-2xl {
        padding: 10px !important;
    }


    .admin-channel-page
    section.rounded-2xl
    h3 {
        font-size: 14px !important;
    }

}


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

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

    .admin-channel-page
    .site-page-container
    > .mb-5.grid {
        gap: 6px !important;
    }


    .admin-channel-page
    .site-page-container
    > .mb-5.grid
    > div {
        padding:
            9px
            8px !important;
    }


    .admin-channel-page
    section.rounded-2xl
    > .mb-4 {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 5px !important;
    }


    .admin-channel-page
    section.rounded-2xl
    > .mb-4
    > .text-sm.text-gray-500 {
        justify-self: start;
    }

}


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

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

    .admin-channel-page a,
    .admin-channel-page button {
        -webkit-tap-highlight-color: transparent;
    }

    .admin-channel-page button {
        touch-action: manipulation;
    }

}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

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

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

}