@charset "utf-8";
/* Maker : H.J Jeon // E-Mail : jinia21@naver.com */

/* 화면 구역별 조각이 생기면 여기에 @import 로 더함. 순서가 곧 우선순위임 */


/* ============================================================ */
/* Sub Content — 서브 본문 영역 */
/* ============================================================ */

.sub-content {
    padding: 50px 0 120px;
}


/* ============================================================ */
/* List Tool — 리스트 상단 툴바 */
/* ============================================================ */

.list-tool {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* 안쪽이 늘어나도 뚫고 나오지 않게 최소 높이로 잡음 */
    min-height: 40px;
    margin-bottom: 30px;
}

.list-total {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--color-text-weak);
    line-height: 1.4;
}

.list-total b {
    font-weight: var(--font-weight-bold);
    color: var(--color-point);
}

.list-util {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 10px;
}


/* List Tool :: 개수 선택 */
.list-count {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    height: 40px;
}

.list-count .list-count-select {
    width: 100%;
    height: 100%;
    padding: 0 40px 0 20px;
    border: 1px solid var(--color-line-field);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-family: inherit;
    font-size: var(--font-size-md);
    color: var(--color-text-sub);
    cursor: pointer;
}

.list-count-ico {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 16px;
    height: 16px;
    color: var(--color-text-weak);
    transform: translateY(-50%);
    pointer-events: none;
}


/* List Tool :: 보기 방식 전환 — 단추 data-view 와 짝인 .list-panel 만 보임 (common.js listView) */
.list-panel[data-view-panel]:not(.active) {
    display: none;
}

/* 첫 버튼(카드형)만 아이콘이 조금 작음 */
.list-view-btn:first-child :is(svg, i[class*="ph-"]) {
    width: var(--icon-sm);
    font-size: var(--icon-sm);
    height: var(--icon-sm);
}


/* ============================================================ */
/* Paging — 페이지네이션 */
/* ============================================================ */

.paging {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 44px;
}

/* 페이지 이동 옆에 버튼을 두는 줄.
   오른쪽 빈 칸을 하나 둬야 페이지 이동이 진짜 가운데에 옴 */
.paging-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md);
    margin-top: 50px;
}

.paging-row .paging {
    margin-top: 0;
}

.paging-util {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 버튼을 오른쪽에 두는 경우. 칸을 못 박아야 페이지 이동이 가운데에 남음 */
.paging-row.right .paging {
    grid-column: auto;
}

.paging-row.right .paging-util {
    grid-column: auto;
    justify-content: flex-end;
}

.paging-btn,
.paging-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-size: var(--font-size-md);
    color: var(--color-text-weak);
    text-decoration: none;
    transition: border-color var(--duration-fast), background-color var(--duration-fast), color var(--duration-fast);
}

.paging-btn:hover,
.paging-num:hover,
.paging-btn:focus-visible,
.paging-num:focus-visible {
    border-color: var(--color-point);
    color: var(--color-point);
}

.paging-btn[aria-disabled="true"] {
    color: var(--color-text-faint);
    pointer-events: none;
}

.paging-num[aria-current="page"] {
    border-color: var(--color-point);
    background-color: var(--color-point);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

.paging-btn :is(svg, i[class*="ph-"]) {
    width: 18px;
    font-size: 18px;
    height: 18px;
    stroke-width: 1.6;
}

/* 현재 위치 — 숫자를 다 못 넣는 좁은 화면에서만 씀 */
.paging-now {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    padding: 0 10px;
    font-size: var(--font-size-md);
    color: var(--color-text-weak);
}

.paging-now b {
    font-weight: var(--font-weight-semibold);
    color: var(--color-point);
}


/* List Tool / Paging :: 반응형 */
.paging-row {
    justify-items: center;
}

.paging-util .btn {
    width: 100%;
}

.list-tool {
    flex-wrap: wrap;
}

.list-util {
    width: 100%;
}

.paging-num {
    display: none;
}

@media screen and (min-width: 600px) {
    .paging-row {
        grid-template-columns: 1fr auto 1fr;
        justify-items: normal;
        gap: var(--space-lg);
        margin-top: 70px;
    }

    .paging-row.right .paging {
        grid-column: 2;
    }

    .paging-row.right .paging-util {
        grid-column: 3;
    }

    .paging-util .btn,
    .list-util {
        width: auto;
    }

    .list-tool {
        flex-wrap: nowrap;
        gap: 20px;
        margin-bottom: 56px;
    }

    .paging {
        gap: 4px;
        margin-top: 70px;
    }

    .paging-num {
        display: flex;
    }

    .paging-now {
        display: none;
    }
}