/*
 * 고패들 게시글 두 단 — 같은 줄 카드 높이 맞춤 (gp-post.css)
 * 게시판은 본문의 <style>·flex·미디어쿼리를 지우므로 이 규칙은 사이트 쪽(theme/blog/head.php)에서 불러온다.
 * web_deploy/to_board_html.py 가 본문에 gp-post / gp-row / gp-col 이름표를 붙인다.
 * 이 파일이 없거나 오래된 브라우저면 본문 인라인 float 배치(두 칸·한 칸, 높이만 제각각)로 그대로 보인다.
 */
.gp-post { container-type: inline-size; }

/* 본문 폭이 넉넉할 때(PC)만 같은 줄 두 카드를 나란히, 같은 높이로. 휴대폰은 그대로 한 칸씩. */
@container (min-width: 700px) {
  .gp-post .gp-row { display: flex; }
  .gp-post .gp-row > .gp-col { float: none !important; width: 50% !important; max-width: none !important; display: flex; }
  .gp-post .gp-row > .gp-col > div { flex: 1; }
}

/* 스와이프 게시글 (2026-10-16) — to_board_html.py --swipe 가 gp-swipe / gp-slide 이름표를 붙인다.
 * 한 장씩 옆으로 넘긴다. 화살표·점·장 수는 /gp/gp-post.js 가 붙인다. 이 파일이 없으면 위아래로 이어서 보인다. */
.gp-post .gp-swipe { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none; transition: height .25s ease; }
.gp-post .gp-swipe::-webkit-scrollbar { display: none; }
.gp-post .gp-swipe > .gp-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.gp-post .gp-slide img { max-width: 100%; height: auto; }   /* 게시판이 본문 img의 width:100%를 지운다 */
.gp-post .gp-swipe:focus-visible { outline: 3px solid #50C0E8; outline-offset: 2px; }
.gp-swipe-hint { margin: 20px 0 0; text-align: center; font-size: 14px; font-weight: 700; color: #A90D3C; }
.gp-swipe-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 4px; }
.gp-swipe-nav button.gp-arr { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #E90044; color: #fff;
  font-size: 22px; line-height: 40px; padding: 0; cursor: pointer; }
.gp-swipe-nav button.gp-arr:disabled { background: #C5C7C7; cursor: default; }
.gp-swipe-dots { display: flex; gap: 6px; }
.gp-swipe-dots button { width: 8px; height: 8px; border: 0; border-radius: 4px; padding: 0; background: #C5C7C7; cursor: pointer; transition: width .2s; }
.gp-swipe-dots button[aria-current="true"] { width: 22px; background: #E90044; }
.gp-swipe-count { min-width: 44px; text-align: center; font-size: 14px; font-weight: 700; color: #1A1A1A; }
@media (prefers-reduced-motion: reduce) { .gp-post .gp-swipe { transition: none; scroll-behavior: auto; } }