/* 페이징 색상 토큰 — 라이트 값은 기존 값 그대로. 다크는 리스킨된 페이지(body.hj-page) 안에서만 전환한다. */ :root{ --pg-bg:#ffffff; --pg-line:#eaeaea; --pg-text:#666666; --pg-text-off:#bebebe; } [data-theme="dark"] body.hj-page{ --pg-bg:var(--card); --pg-line:var(--line); --pg-text:var(--text2); --pg-text-off:var(--text3); } /*페이징영역이 없는 디자인 폰트*/ /* ★max-width 를 max-content 로 두면 줄바꿈이 원천 차단된다★ 페이지 번호는 `번호양쪽4개노출` 기준 최대 9개 + 앞뒤 버튼 4개 = 13개까지 나오는데, 버튼이 40px 고정이라 좁은 화면에서는 무조건 넘친다. 폭 제한을 풀고 wrap 을 허용한다. (블록은 100% 로 펴지지만 안쪽 span 이 justify-content:center 라 가운데 정렬은 그대로다) */ .page_wrap_st { max-width: 100%; margin: 50px auto 0; } .page_wrap_st > span{ display:flex !important; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px; } .page_now, .page_nomal, .page_prev0, .page_next0, .page_prev, .page_next, .page_prev0_no, .page_next0_no, .page_prev_no, .page_next_no { font-family:'Noto Sans KR',Gulim,'굴림','돋움','맑은 고딕',Dotum,'굴림',tahoma,Gulim,NanumGothic,Helvetica,'Apple SD Gothic Neo',Sans-serif; min-width:40px; height:40px; display:flex; align-items:center; justify-content:center; line-height: 1.6; } /*현재 선택된 페이징*/ .page_now { background:var( --main-pcm-color-10 ); border:1px solid var( --main-pcm-color-10 ); vertical-align:middle; color:#fff; text-align:center; border-radius:0.2em; font-size:14px; } .page_now a { color:#fff;} /*아작스페이징에서 사용*/ /*선택안된 페이징*/ .page_nomal { background:var(--pg-bg); border:1px solid var(--pg-line); vertical-align:middle; color:var(--pg-text); text-align:center; border-radius:0.2em; font-size:14px; } .page_nomal a { color:var(--pg-text); width:40px; height:40px; display:inline-block; line-height:40px; } .page_nomal:hover { border:1px solid var( --main-pcm-color-10 ); } .page_nomal:hover a { color:var( --main-pcm-color-10 ); } /*이전으로 건너뛰기*/ .page_prev0 { background:var(--pg-bg); border:1px solid var(--pg-line); vertical-align:middle; color:var(--pg-text); text-align:center; border-radius:0.2em; font-size:14px; } .page_prev0 a { color:var(--pg-text); width:40px; height:40px; display:inline-block; line-height:40px; } .page_prev0 img { margin-top:10px; } .page_prev0 svg { margin-top:10px; } .page_prev0:hover { border:1px solid var( --main-pcm-color-10 ); } .page_prev0:hover a { color:var( --main-pcm-color-10 ); } /*다음으로 건너뛰기*/ .page_next0 { background:var(--pg-bg); border:1px solid var(--pg-line); vertical-align:middle; color:var(--pg-text); text-align:center; border-radius:0.2em; font-size:14px; } .page_next0 a { color:var(--pg-text); width:40px; height:40px; display:inline-block; line-height:40px; } .page_next0 img { margin-top:10px; } .page_next0 svg { margin-top:10px; } .page_next0:hover { border:1px solid var( --main-pcm-color-10 ); } .page_next0:hover a { color:var( --main-pcm-color-10 ); } /*한꺼번에 다음으로 건너뛰기*/ .page_next { background:var(--pg-bg); border:1px solid var(--pg-line); vertical-align:middle; color:var(--pg-text); text-align:center; border-radius:0.2em; font-size:14px; } .page_next a { color:var(--pg-text); width:40px; height:40px; display:inline-block; line-height:40px; } .page_next img { margin-top:10px; border:!px solid red;} .page_next svg { margin-top:10px; border:!px solid red;} .page_next:hover { border:1px solid var( --main-pcm-color-10 ); } .page_next:hover a { color: var( --main-pcm-color-10 ); } /*한꺼번에 이전으로 건너뛰기*/ .page_prev { background:var(--pg-bg); border:1px solid var(--pg-line); vertical-align:middle; color:var(--pg-text); text-align:center; border-radius:0.2em; font-size:14px; } .page_prev a { color:var(--pg-text); width:40px; height:40px; display:inline-block; line-height:40px; } .page_prev img { margin-top:10px; } .page_prev svg { margin-top:10px; } .page_prev:hover { border:1px solid var( --main-pcm-color-10 ); } .page_prev:hover a { color:var( --main-pcm-color-10 ); } /**************************** 클릭안될때 *********************/ /*이전으로 건너뛰기 클릭안될때 */ .page_prev0_no { background:var(--pg-bg); border:1px solid var(--pg-line); vertical-align:middle; color:var(--pg-text-off); text-align:center; border-radius:0.2em; font-size:14px; } .page_prev0_no { color:var(--pg-text-off); width:40px; height:40px; display:inline-block; line-height:40px;} .page_prev0_no img { margin-top:10px; } .page_prev0_no svg { margin-top:10px; } /*한꺼번에 이전으로 건너뛰기 클릭안될때 */ .page_prev_no { background:var(--pg-bg); border:1px solid var(--pg-line); vertical-align:middle; color:var(--pg-text-off); text-align:center; border-radius:0.2em; font-size:14px; } .page_prev_no { color:var(--pg-text-off); width:40px; height:40px; display:inline-block; line-height:40px;} .page_prev_no img { margin-top:10px; } .page_prev_no svg { margin-top:10px; } /*다음으로 건너뛰기 클릭안될때 */ .page_next0_no { background:var(--pg-bg); border:1px solid var(--pg-line); vertical-align:middle; color:var(--pg-text-off); text-align:center; border-radius:0.2em; font-size:14px; } .page_next0_no { color:var(--pg-text-off); width:40px; height:40px; display:inline-block; line-height:40px;} .page_next0_no img { margin-top:10px; } .page_next0_no svg { margin-top:10px; } /*한꺼번에 다음으로 건너뛰기 클릭안될때*/ .page_next_no { background:var(--pg-bg); border:1px solid var(--pg-line); vertical-align:middle; color:var(--pg-text-off); text-align:center; border-radius:0.2em; font-size:14px; } .page_next_no { color:var(--pg-text-off); width:40px; height:40px; display:inline-block; line-height:40px;} .page_next_no img { margin-top:10px; } .page_next_no svg { margin-top:10px; } /* ========================================================================= HAPPYJOB 리스킨 — 페이징 (시안 .hj-pg 기준) 리스킨 페이지의