/* 카드 하단 넘김 배선. 카드마다 스타일이 제각각이라 이 파일만 따로 얹는다.
   진우: "자료 1층 하나 누르면 그 다음이든 이전이든 루프로 계속 돌리게" — 끝나면 처음으로 돌아온다. */
.cardnav{
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px;
  max-width:860px; margin:44px auto 60px; padding:0 18px;
  font-family:"IBM Plex Sans KR","Apple SD Gothic Neo",sans-serif;
}
.cardnav .cn{
  display:flex; flex-direction:column; gap:4px; justify-content:center;
  padding:14px 16px; border-radius:3px; text-decoration:none;
  background:rgba(127,127,127,.07); border:1px solid rgba(127,127,127,.22);
  color:inherit; transition:border-color .14s ease, background .14s ease;
}
.cardnav .cn:hover{background:rgba(127,127,127,.13); border-color:rgba(127,127,127,.45)}
.cardnav .cn:focus-visible{outline:2px solid #3f7a4a; outline-offset:2px}
.cardnav .cn span{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.08em; opacity:.62}
.cardnav .cn b{font-size:.94rem; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cardnav .next{text-align:right}
.cardnav .home{
  align-items:center; text-align:center; white-space:nowrap;
  font-size:.82rem; font-weight:600; padding:14px 18px;
}
.cardnav .home small{display:block; font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; font-weight:400; opacity:.6; margin-top:3px; font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .cardnav{grid-template-columns:1fr 1fr; gap:8px}
  .cardnav .home{grid-column:1 / -1; order:-1}
}