/* [drt_posts] 렌터카·캠핑카 메인 글 목록 (drt-manage 1.37.0, 2026-10-10 결정: 가안 바탕 + 나안 카드)
   위: 많이 본 글 사진 카드 4개(PC 4열, 모바일 2열) / 아래: 최신 글 번호 목록(PC 2열, 모바일 1열).
   제목은 잉크색, "전체 보기"만 파란 텍스트 링크. 카드 그림자·들어올림 없음. */
.drt-posts {
	--drt-posts-ink: #020F16;
	--drt-posts-body: #575757;
	--drt-posts-muted: #8A928F;
	--drt-posts-line: #DFE4E2;
	--drt-posts-soft: #F0FAF5;
	--drt-posts-g7: #2E9970;
	--drt-posts-g8: #1F7A55;
	--drt-posts-link: #1155CC;
	max-width: 1140px;
	margin: 28px auto 8px;
	padding: 0 20px;
	color: var(--drt-posts-body);
	box-sizing: border-box;
}
.drt-posts *, .drt-posts *::before, .drt-posts *::after { box-sizing: border-box; }
.drt-posts .drt-posts__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.drt-posts .drt-posts__title { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; color: var(--drt-posts-ink); letter-spacing: -.02em; }
.drt-posts a.drt-posts__more { font-size: 15px; font-weight: 600; color: var(--drt-posts-link); text-decoration: none; white-space: nowrap; }
.drt-posts a.drt-posts__more:hover { text-decoration: underline; }
.drt-posts .drt-posts__block + .drt-posts__block { margin-top: 26px; }
.drt-posts .drt-posts__label { margin: 0 0 10px; font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--drt-posts-ink); display: flex; align-items: center; gap: 8px; }
.drt-posts .drt-posts__label small { font-size: 13px; font-weight: 500; color: var(--drt-posts-muted); }
.drt-posts .drt-chip { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 7px; border-radius: 4px; background: var(--drt-posts-soft); color: var(--drt-posts-g8); }
.drt-posts .drt-date { font-size: 13px; color: var(--drt-posts-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.drt-posts a:focus-visible { outline: 3px solid rgba(69, 188, 138, .45); outline-offset: 2px; border-radius: 6px; }

/* 많이 본 글: 사진 카드 */
.drt-posts .drt-pcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.drt-posts a.drt-pcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: inherit; text-decoration: none; }
.drt-posts .drt-thumb { display: block; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: #E6E8E7; }
.drt-posts .drt-thumb img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.drt-posts .drt-pcard__meta { display: flex; align-items: center; gap: 8px; }
.drt-posts .drt-pcard__t { font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--drt-posts-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.drt-posts a.drt-pcard:hover .drt-pcard__t { text-decoration: underline; }

/* 최신 글: 번호 목록 */
.drt-posts .drt-rank { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; border-top: 1px solid var(--drt-posts-line); }
.drt-posts .drt-rank li { margin: 0; padding: 0; border-bottom: 1px solid var(--drt-posts-line); }
.drt-posts .drt-rank li::marker { content: none; }
.drt-posts .drt-rank a { display: flex; align-items: baseline; gap: 12px; padding: 11px 2px; color: inherit; text-decoration: none; }
.drt-posts .drt-rank__n { flex: 0 0 18px; font-size: 16px; font-weight: 800; color: var(--drt-posts-g7); font-variant-numeric: tabular-nums; }
.drt-posts .drt-rank__t { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--drt-posts-ink); }
.drt-posts .drt-rank a:hover .drt-rank__t { text-decoration: underline; }

@media (max-width: 767px) {
	.drt-posts { margin-top: 22px; padding: 0 15px; }
	.drt-posts .drt-posts__title { font-size: 19px; }
	.drt-posts a.drt-posts__more { font-size: 14px; }
	.drt-posts .drt-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
	.drt-posts .drt-pcard__t { font-size: 14px; }
	.drt-posts .drt-pcard .drt-date { display: none; }
	.drt-posts .drt-rank { grid-template-columns: 1fr; }
	.drt-posts .drt-rank .drt-date { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.drt-posts a.drt-pcard .drt-thumb img { transition: opacity .15s ease; }
	.drt-posts a.drt-pcard:hover .drt-thumb img { opacity: .92; }
}