@charset "UTF-8";
/*
 * 페이지네이션 (공통)
 * 두 가지 마크업을 모두 지원한다.
 *
 * 1) 퍼블리싱 button 기반 (정적 HTML 시안에서 사용)
 *    <div class="pagination-wrap">
 *      <div class="pagination">
 *        <button class="pg_first"><span class="visually-hidden">처음으로 가기</span></button>
 *        <button class="pg_prev"> ... </button>
 *        <ul>
 *          <li><button class="active">1</button></li>
 *          <li><button>2</button></li>
 *        </ul>
 *        <button class="pg_next"> ... </button>
 *        <button class="pg_last"> ... </button>
 *      </div>
 *    </div>
 *
 * 2) eGov UI 페이지네이션 태그 출력 (<ui:pagination type="image" ... />)
 *    <div class="pagination-wrap">
 *      <a href="#" class="icon first">목록 처음으로 이동</a>
 *      <a href="#" class="icon prev">이전 목록으로 이동</a>
 *      <a href="#" class="on">1</a>
 *      <a href="#">2</a>
 *      ...
 *      <a href="#" class="icon next">다음 목록으로 이동</a>
 *      <a href="#" class="icon last">목록 끝으로 이동</a>
 *    </div>
 */

/* 공통 래퍼 */
.pagination-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

/* ─────────────────────────────────────────────
 * 1) 퍼블리싱 button 기반 마크업
 * ───────────────────────────────────────────── */
.pagination { display: flex; align-items: center; }
.pagination [class^="pg_"] { width: 46px; height: 46px; }
.pagination ul { display: flex; align-items: center; margin: 0 40px; }
.pagination ul > li > button {
    min-width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--txt-size02);
    font-weight: var(--fw-medium);
    color: var(--color-black);
}
.pagination ul > li > button.active {
    background-color: var(--color-light-gray3);
    border-radius: 4px;
}

.pg_first { background: url('../images/ico/pg_first.svg') center center no-repeat; background-size: 36px; }
.pg_prev  { background: url('../images/ico/pg_prev.svg')  center center no-repeat; background-size: 36px; }
.pg_next  { background: url('../images/ico/pg_next.svg')  center center no-repeat; background-size: 36px; }
.pg_last  { background: url('../images/ico/pg_last.svg')  center center no-repeat; background-size: 36px; }

/* ─────────────────────────────────────────────
 * 2) eGov <ui:pagination> 마크업
 *    (.pagination-wrap 의 자식이 곧 <a> 들)
 * ───────────────────────────────────────────── */
.pagination-wrap > a {
    min-width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--txt-size02);
    font-weight: var(--fw-medium);
    color: var(--color-black);
    text-decoration: none;
    box-sizing: border-box;
}
.pagination-wrap > a + a { margin-left: 4px; }

.pagination-wrap > a.on {
    background-color: var(--color-light-gray3);
    border-radius: 4px;
}

/* 이동 아이콘 (first/prev/next/last) — 텍스트는 시각적으로 숨기고 SVG 배경 표시 */
.pagination-wrap > a.icon {
    width: 46px;
    height: 46px;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 36px;
}
.pagination-wrap > a.icon.first { background-image: url('../images/ico/pg_first.svg'); }
.pagination-wrap > a.icon.prev  { background-image: url('../images/ico/pg_prev.svg');  }
.pagination-wrap > a.icon.next  { background-image: url('../images/ico/pg_next.svg');  }
.pagination-wrap > a.icon.last  { background-image: url('../images/ico/pg_last.svg');  }

/* 페이지 번호 그룹과 prev/next 사이 여백 (button 마크업의 ul margin:0 40px 와 동일 톤) */
.pagination-wrap > a.icon.prev  { margin-right: 36px; }
.pagination-wrap > a.icon.next  { margin-left:  36px; }
/* first 와 prev 사이, last 와 next 사이는 기본 간격(4px) 유지 */
.pagination-wrap > a.icon.first + a.icon.prev { margin-right: 36px; }
.pagination-wrap > a.icon.next + a.icon.last  { margin-left: 4px;  }

/* ─────────────────────────────────────────────
 * 반응형 (모바일)
 * ───────────────────────────────────────────── */
@media (max-width: 767px) {
    .pagination-wrap { margin-top: 28px; }

    /* 1) button 마크업 */
    .pagination [class^="pg_"] { width: 34px; height: 34px; }
    .pagination ul { margin: 0 7px; }
    .pagination ul > li > button { min-width: 34px; height: 34px; font-size: var(--txt-size02); }
    .pg_first, .pg_prev, .pg_next, .pg_last { background-size: 34px; }

    /* 2) <a> 마크업 */
    .pagination-wrap > a { min-width: 34px; height: 34px; }
    .pagination-wrap > a.icon { width: 34px; height: 34px; background-size: 34px; }
    .pagination-wrap > a.icon.prev { margin-right: 7px; }
    .pagination-wrap > a.icon.next { margin-left:  7px; }
    .pagination-wrap > a.icon.first + a.icon.prev { margin-right: 7px; }
}