/* ============================================================
   bridge.css — arkdio_blog_list 와 버틀러 사이의 다리

   플러그인 파일은 한 줄도 고치지 않는다. 새 버전으로 갈아끼워도
   이 파일만 살아 있으면 톤이 유지된다. 되돌리려면 플러그인을 끈다.

   실측으로 확인한 것 (2026-08-21)
     · 플러그인 CSS 는 전부 `.abl-` 접두어 · 변수는 `--abl-*` → 테마와 충돌 없음
     · 색·크기·간격이 인스턴스 설정에서 인라인 변수로 내려온다
       → 여기서는 설정으로 못 만드는 것만 손댄다(서체·커서·여백·머리글)
   ============================================================ */

/* ── ① 커서 되살리기 ──
   사이트는 자체 커서 도트를 그리려고 `site-tail.php` 에서
   `@media (pointer:fine){*{cursor:none !important}}` 로 전역 커서를 죽여 둔다.
   목록은 전부 링크라 손가락 표시가 없으면 눌리는 줄 모른다.
   ⚠ `!important` 대 `!important` 라 특이도로 이겨야 한다. */
@media (pointer: fine) {
	.abl-wrapper a,
	.abl-wrapper button { cursor: pointer !important; }
}

/* ── ② 서체 ──
   플러그인 기본은 'Noto Sans KR' 단독. 테마는 라틴을 'Noto Sans' 로 먼저 잡는다.
   숫자·영문이 본문과 달라 보이던 것을 테마 스택에 맞춘다. */
.abl-wrapper,
.abl-wrapper .abl-title,
.abl-wrapper .abl-excerpt,
.abl-wrapper .abl-date,
.abl-wrapper .abl-cat,
.abl-wrapper .abl-page-btn,
.abl-wrapper .abl-page-arrow {
	font-family: 'Noto Sans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── ③ 색 ──
   플러그인 기본은 진한 먹색이다. 버틀러 본문색 체계로 내린다. */
.abl-wrapper .abl-title   { color: #1A1A1A; }
.abl-wrapper .abl-excerpt { color: #5A6560; }
.abl-wrapper .abl-date    { color: #8A928D; font-variant-numeric: tabular-nums; }

/* 링크 색 가드 — wp-bridge.css 의 `body .breakdance a{color:inherit}` (0,2,1) 을 이긴다 */
body .breakdance .abl-card-link,
body .breakdance .abl-card-link:hover,
body .breakdance .abl-card-link:focus { color: inherit; }

/* 제목 호버 — 초록은 "이동한다"는 뜻으로 아껴 쓴다. 여기서는 먹색이 옅어지는 것으로 충분하다. */
.abl-wrapper .abl-card-link:hover .abl-title { color: #4A4A4A; }
.abl-wrapper .abl-card-link:focus-visible { outline: 2px solid #186133; outline-offset: 3px; }

/* ── ④ 폭·여백 ──
   플러그인은 화면 폭을 그대로 쓴다. 버틀러의 다른 페이지와 같은 `.wrap` 규격(1280 / 좌우 24)에 맞춘다. */
.babl-page .abl-wrapper {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 24px;
}

/* 첫 카드 위 선 — 목록의 시작을 알린다(텍스트형은 아래쪽에만 선이 있다) */
.babl-page .abl-style-text .abl-grid { border-top: 1px solid #E6E6E6; }

/* ── ⑤ 페이지 머리글 ──
   About 계열의 `.en-hero`/`.ko-sub` 를 그대로 쓴다. 크기만 한 단계 내린다. */
.babl-head { padding-top: clamp(72px, 8vw, 128px); }
.babl-head .wrap { text-align: center; }
.babl-title { display: block; margin: 0; }
.babl-head + .abl-wrapper { margin-top: clamp(32px, 4vw, 56px); }

/* ── ⑥ 페이지 아래 여백 ──
   리빌 푸터가 올라오기 전 숨 쉴 자리. 여백은 카드가 아니라 페이지에 준다. */
.babl-page main { padding-bottom: clamp(96px, 10vw, 160px); }

/* ⚠ 배치되지 않은 본문은 z-index:0 인 고정 푸터보다 먼저 그려진다.
   그대로 두면 마지막 화면의 페이징 버튼이 푸터에 가려 클릭이 먹힌다. */
.babl-page main { position: relative; z-index: 1; }

/* ── ⑦ 페이징 ──
   플러그인 기본은 사각 버튼이다. 버틀러의 절제된 톤에 맞춰 선만 남긴다. */
.abl-wrapper .abl-pagination { margin-top: 44px; gap: 4px; }
.abl-wrapper .abl-page-btn,
.abl-wrapper .abl-page-arrow {
	min-width: 34px;
	height: 34px;
	border: 0;
	border-radius: 0;
	background: none;
	color: #8A928D;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	transition: color .2s ease;
}
.abl-wrapper .abl-page-btn:hover,
.abl-wrapper .abl-page-arrow:not([disabled]):hover { color: #1A1A1A; }
.abl-wrapper .abl-page-btn.active {
	color: #1A1A1A;
	font-weight: 500;
	border-bottom: 1px solid #1A1A1A;
}
.abl-wrapper .abl-page-arrow[disabled] { color: #D8D8D8; }

/* ── ⑧ 빈 상태 ──
   글을 아직 안 쓴 동안 보이는 화면이다. 휑하지 않게. */
.abl-wrapper .abl-empty {
	grid-column: 1 / -1;
	padding: 64px 20px;
	text-align: center;
	color: #8A928D;
	font-size: 14px;
}

@media (max-width: 767px) {
	.babl-page .abl-wrapper { padding: 0 20px; }
	.babl-head { padding-left: 20px; padding-right: 20px; }
}