/**
 * Joyn Resources - Components
 * Design System: Solapi v4.0
 * 
 * 엑셀형 테이블 리스트, 버튼, 페이지네이션
 * 카드형 뷰 제거 → 테이블형 리스트 전용
 * 
 * @location assets/css/components.css
 */

/* ========================================
   Buttons (Solapi Style)
   ======================================== */
.joyn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--joyn-font-size-sm);
    font-weight: 500;
    font-family: var(--joyn-font-sans);
    border-radius: var(--joyn-radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--joyn-transition);
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}

.joyn-btn i {
    font-size: 16px;
}

/* 테마 아이콘 폰트 덮어쓰기 방지: 상단·버튼 내 Remix Icon 강제 */
.joyn-resources-container .joyn-btn i,
.joyn-resources-container .joyn-resources-header .joyn-btn i,
.joyn-resources-container .joyn-resources-actions .joyn-btn i,
.joyn-resources-container [class^="ri-"],
.joyn-resources-container [class*=" ri-"] {
    font-family: "remixicon" !important;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.joyn-resources-container .joyn-btn i {
    font-size: 16px !important;
}

.joyn-btn--primary {
    background-color: var(--joyn-primary);
    color: white;
    box-shadow: var(--joyn-shadow-xs);
}

.joyn-btn--primary:hover {
    background-color: var(--joyn-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--joyn-shadow-primary);
}

.joyn-btn--primary:active {
    transform: translateY(0);
    box-shadow: var(--joyn-shadow-xs);
}

.joyn-btn--success {
    background-color: var(--joyn-success);
    color: white;
}

.joyn-btn--success:hover {
    background-color: #059669;
    transform: translateY(-1px);
}

.joyn-btn--secondary {
    background: #fff;
    border: 1px solid var(--joyn-gray-200);
    color: var(--joyn-gray-700);
}

.joyn-btn--secondary:hover {
    border-color: var(--joyn-primary);
    color: var(--joyn-primary);
}

.joyn-btn--text {
    background: transparent;
    color: var(--joyn-gray-600);
    padding: 8px 12px;
}

.joyn-btn--text:hover {
    background-color: var(--joyn-gray-100);
    color: var(--joyn-gray-900);
}

.joyn-btn--ghost {
    background: transparent;
    color: var(--joyn-primary);
}

.joyn-btn--ghost:hover {
    background-color: var(--joyn-primary-light);
}

/* Close Button */
.joyn-btn-close {
    background: transparent;
    border: none;
    color: var(--joyn-gray-400);
    cursor: pointer;
    padding: var(--joyn-spacing-2);
    border-radius: var(--joyn-radius-sm);
    transition: var(--joyn-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.joyn-btn-close:hover {
    background-color: var(--joyn-gray-100);
    color: var(--joyn-gray-600);
}

.joyn-btn-close i {
    font-size: 22px;
}

/* Link Button */
.joyn-btn-link {
    color: var(--joyn-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--joyn-font-size-sm);
    transition: var(--joyn-transition);
}

.joyn-btn-link:hover {
    color: var(--joyn-primary-hover);
    text-decoration: underline;
}


/* ========================================
   ★ 엑셀형 테이블 리스트 (핵심)
   ======================================== */

/* 테이블 래퍼 (Solapi v4 - 헤더·액션바와 이어지는 하단 라운드) */
.joyn-table-wrapper {
    background: #fff;
    border: 1px solid var(--joyn-table-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    margin-bottom: var(--joyn-spacing-6);
}

/* ── 테이블 헤더 ── */
.joyn-table-header {
    display: grid;
    grid-template-columns: 60px 100px 1fr 80px 80px 100px;
    align-items: center;
    padding: 10px 16px;
    background: var(--joyn-bg-table-header);
    border-bottom: 2px solid var(--joyn-table-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--joyn-gray-500);
}

.joyn-table-header__cell,
.joyn-table-header .joyn-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}

.joyn-table-header__cell--center,
.joyn-table-header .joyn-cell--num,
.joyn-table-header .joyn-cell--stat,
.joyn-table-header .joyn-cell--date {
    justify-content: center;
}

.joyn-table-header__cell--right {
    justify-content: flex-end;
}

/* ── 테이블 바디 ── */
.joyn-table-body {
    display: flex;
    flex-direction: column;
}

/* ── 테이블 행 (Solapi v4) ── */
.joyn-table-row {
    display: grid;
    grid-template-columns: 60px 100px 1fr 80px 80px 100px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--joyn-table-row-border);
    transition: 0.15s;
    cursor: pointer;
    font-size: 16px;
}

.joyn-table-row:last-child {
    border-bottom: none;
}

.joyn-table-row:hover {
    background: var(--joyn-bg-table-hover);
}

/* 상단 고정 게시글 */
.joyn-table-row--sticky {
    background: var(--joyn-bg-sticky);
}

.joyn-table-row--sticky:hover {
    background: #FFFCEB;
}

/* ── 셀 공통 (joyn-cell = 샘플 클래스명 호환) ── */
.joyn-table-cell,
.joyn-cell {
    display: flex;
    align-items: center;
}

/* 번호 */
.joyn-table-cell--num,
.joyn-cell--num {
    justify-content: center;
    color: var(--joyn-gray-400);
    font-size: 16px;
}

.pin-icon {
    color: var(--joyn-warning);
    font-size: 15px;
}

/* 카테고리 */
.joyn-table-cell--category .joyn-category-badge,
.joyn-table-cell--cat .badge,
.joyn-cell--cat .badge {
    display: inline-flex;
    padding: 2px 8px;
    background: var(--joyn-primary-light);
    color: var(--joyn-primary);
    font-size: 11px;
    font-weight: 600;
    border-radius: 99px;
    white-space: nowrap;
}

.joyn-table-cell--category,
.joyn-cell--cat {
    font-size: 16px;
}

/* 제목 */
.joyn-table-cell--title,
.joyn-cell--title {
    font-weight: 500;
    color: var(--joyn-gray-900);
    gap: 6px;
    min-width: 0;
}

.joyn-table-cell--title a,
.joyn-cell--title a {
    color: inherit;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.joyn-table-row:hover .joyn-table-cell--title a,
.joyn-table-row:hover .joyn-cell--title a,
.joyn-table-cell--title a:hover,
.joyn-cell--title a:hover,
.joyn-table-cell--title a:focus,
.joyn-cell--title a:focus {
    color: var(--joyn-gray-900);
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 테마 전역 링크 밑줄 무력화 (컨테이너 범위) */
.joyn-resources-container .joyn-table-cell--title a,
.joyn-resources-container .joyn-cell--title a {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.joyn-table-cell--title .joyn-title-wrapper,
.joyn-cell--title .title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.joyn-table-cell--title .joyn-title-text,
.joyn-cell--title .title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.joyn-table-cell--title .joyn-title-icons,
.joyn-cell--title .attach {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    color: var(--joyn-gray-400);
    font-size: 15px;
}

.joyn-table-cell--title .joyn-attach-icon,
.joyn-cell--title .attach i {
    font-size: 15px;
}

/* 조회/다운로드 */
.joyn-table-cell--views,
.joyn-table-cell--downloads,
.joyn-cell--stat {
    justify-content: center;
    color: var(--joyn-gray-500);
    font-size: 16px;
}

/* 날짜 */
.joyn-table-cell--date,
.joyn-cell--date {
    color: var(--joyn-gray-500);
    font-size: 16px;
}

.joyn-table-cell--date {
    justify-content: flex-end;
}


/* ========================================
   구형 리스트/그리드 호환 (숨김)
   - 기존 JS에서 참조하므로 display:none 유지
   ======================================== */
.joyn-resources-grid,
.joyn-view-grid {
    display: none !important;
}

.joyn-resources-list.joyn-view-list {
    display: flex !important;
    flex-direction: column;
}


/* ========================================
   Pagination (Solapi Style)
   ======================================== */
.joyn-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--joyn-spacing-6);
}

.joyn-pagination__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
}

.joyn-pagination__item {
    list-style: none;
}

.joyn-pagination__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--joyn-spacing-2);
    border-radius: var(--joyn-radius-sm);
    background: var(--joyn-bg-white);
    border: 1px solid var(--joyn-gray-200);
    color: var(--joyn-gray-700);
    font-weight: 500;
    font-size: var(--joyn-font-size-sm);
    text-decoration: none;
    transition: var(--joyn-transition);
    font-variant-numeric: tabular-nums;
}

.joyn-pagination__link:hover {
    background-color: var(--joyn-primary-light);
    border-color: var(--joyn-primary);
    color: var(--joyn-primary);
}

.joyn-pagination__link--current,
.joyn-pagination__link--current:hover {
    background-color: var(--joyn-primary);
    border-color: var(--joyn-primary);
    color: white;
    box-shadow: var(--joyn-shadow-primary);
}

.joyn-pagination__link i {
    font-size: 18px;
}

.joyn-pagination__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 var(--joyn-spacing-1);
    color: var(--joyn-gray-400);
}


/* ========================================
   Sticky Badge (고정 배지)
   ======================================== */
.joyn-sticky-badge {
    display: inline-flex;
    align-items: center;
}


/* ========================================
   Mobile Responsive (엑셀형 테이블)
   ======================================== */
@media (max-width: 768px) {
    /* 테이블 헤더 숨김 */
    .joyn-table-header {
        display: none;
    }

    /* 모바일: 카드형 행 레이아웃, 전체 왼쪽 정렬 */
    .joyn-table-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--joyn-table-row-border);
        text-align: left;
    }

    /* 번호 숨김 */
    .joyn-table-cell--num,
    .joyn-resources-container .joyn-table-row .joyn-cell--num {
        display: none !important;
    }

    /* 카테고리 - 왼쪽 정렬 */
    .joyn-table-cell--category,
    .joyn-resources-container .joyn-table-row .joyn-cell--cat {
        order: 1;
        justify-content: flex-start;
        text-align: left;
    }

    .joyn-table-cell--category .joyn-category-badge,
    .joyn-table-cell--category .badge {
        font-size: 11px;
        padding: 2px 8px;
    }

    /* 제목 - 왼쪽 정렬 */
    .joyn-table-cell--title,
    .joyn-resources-container .joyn-table-row .joyn-cell--title {
        order: 2;
        font-size: var(--joyn-font-size-md);
        padding-right: 0;
        justify-content: flex-start;
        text-align: left;
        width: 100%;
    }

    .joyn-table-cell--title a,
    .joyn-cell--title a {
        justify-content: flex-start;
        text-align: left;
        width: 100%;
    }

    .joyn-table-cell--title .joyn-title-text,
    .joyn-table-cell--title .title-text,
    .joyn-cell--title .title-text {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: left;
    }

    /* 조회수·다운로드 수 모바일에서 숨김 */
    .joyn-table-cell--views,
    .joyn-table-cell--downloads,
    .joyn-cell--stat {
        display: none !important;
    }

    /* 날짜 - 왼쪽 정렬 */
    .joyn-table-cell--date,
    .joyn-resources-container .joyn-table-row .joyn-cell--date {
        order: 3;
        justify-content: flex-start;
        text-align: left;
        font-size: 15px;
        color: var(--joyn-gray-400);
    }

    /* 테이블 래퍼 모바일 */
    .joyn-table-wrapper {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* 태블릿: 축소된 그리드 */
@media (min-width: 769px) and (max-width: 1024px) {
    .joyn-table-header,
    .joyn-table-row {
        grid-template-columns: 50px 90px 1fr 70px 70px 90px;
    }
}