/*
   게시물 카드 — 사용가이드 홈(guideHome.jsp)과 망고소식 홈(noticeHome.jsp)이 함께 싣는다.
   Figma 컴포넌트 '게시물 리스트 카드'(목록형·썸네일형)와 '게시물 링크 카드'의 공통 규칙이다.
   처음 만든 가이드 홈의 클래스 이름(guide-home-*)을 그대로 쓴다 — article.js(대표 이미지 404)와 noticeHome.js 가 이 이름을 찾는다.
   guideHome.css 에서 원래 순서와 미디어 조건 그대로 옮겨 왔고, 두 화면 모두 화면 CSS(guideHome.css·noticeHome.css) 바로 앞에 싣는다.
   가이드 홈에만 맞춘 카드 제목 크기·말줄임·썸네일 선·'자세히 보기'는 guideHome.css 에, 망고소식 카드 값은 noticeHome.css 에 있다.
*/
.guide-home-list-card:focus-visible,.guide-home-link-card:focus-visible {outline:3px solid #a38700;outline-offset:4px;}
/*
   게시물 리스트 카드(Figma 컴포넌트). 두 모양이 같은 마크업을 쓴다.
   - 목록형: '알아두면 유용한 활용 팁'. 한 줄에 한 장, 썸네일 285x160 이 왼쪽이다(20192:102142, hover 20192:51070).
   - 썸네일형(.is-thumb): '처음이라면'·'새로운 기능'. 세 장이 한 줄, 썸네일이 위다.
   카드 상자는 안쪽 여백 16px 을 두고 hover 때만 배경이 보인다.
*/
.guide-home-list-card {display:flex;align-items:flex-start;gap:30px;min-width:0;padding:16px;border-radius:7px;color:#20232a;transition:background-color .2s;}
.guide-home-list-card:hover {background:#f6f7f9;}
.guide-home-list-card.is-thumb {flex-direction:column;gap:20px;}
/* 대표 이미지가 없거나 404 여도 회색 상자는 남긴다. 줄마다 글의 시작선이 어긋나지 않는다. */
.guide-home-thumb {display:block;flex:0 0 285px;width:285px;height:160px;overflow:hidden;border-radius:7px;background:#e4e4e8;}
.guide-home-thumb img {display:block;width:100%;height:100%;object-fit:cover;}
.is-thumb .guide-home-thumb {flex:none;width:100%;height:auto;aspect-ratio:57/32;}
/* 제목·설명은 위, '자세히 보기'는 썸네일 아래 선에 붙는다. 글이 길면 카드가 함께 늘어난다. */
.guide-home-list-copy {display:flex;flex:1 1 0;flex-direction:column;justify-content:space-between;align-items:flex-start;align-self:stretch;min-width:0;padding:4px 0;}
.is-thumb .guide-home-list-copy {flex:none;padding:0;}
/* 썸네일형 카드는 세 칸이라 설명 칸이 좁다. 운영자가 긴 설명을 넣어도 카드 높이가 크게 어긋나지 않게 두 줄에서 자른다. */
.is-thumb .guide-home-list-text p {display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.guide-home-list-text {display:flex;flex-direction:column;gap:8px;align-self:stretch;padding-left:4px;}
.guide-home-list-card h3 {margin:0;font-size:22px;line-height:1.5;font-weight:600;letter-spacing:-.015em;color:#20232a;word-break:keep-all;overflow-wrap:anywhere;}
.guide-home-list-card p {margin:0;font-size:16px;line-height:1.5;font-weight:400;letter-spacing:-.015em;color:#70777f;word-break:keep-all;overflow-wrap:anywhere;}
/*
   게시물 링크 카드(Figma 컴포넌트). '자주 묻는 질문'과 '자료 및 이용 안내'가 쓴다.
   회색 상자 오른쪽 위에 ↗ 한 줄(33px)을 두고 그 아래 제목과 설명을 놓는다.
   FAQ 질문(.is-faq)은 말줄임 없이 접는다. 세 칸이 좁아지는 1200px 프레임에서 시안도 질문을 두 줄로 보여 준다. 같은 줄 카드는 가장 긴 카드 높이에 맞춰진다.
   자료 카드 제목은 모든 폭에서 한 줄 말줄임이다(시안 I20192:103994;20192:51099 등). 망고소식 채널 카드도 같은 규칙을 쓴다.
*/
.guide-home-links {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;}
.guide-home-link-card {position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:63px 27px 20px;border-radius:7px;background:#f6f7f9;color:#20232a;}
.guide-home-link-card:before {content:'\2197';position:absolute;top:20px;right:27px;color:#70777f;font-size:22px;line-height:33px;font-weight:300;}
.guide-home-link-card h3 {margin:0;word-break:keep-all;overflow-wrap:anywhere;font-size:18px;line-height:27px;font-weight:500;letter-spacing:-.015em;color:#20232a;}
.guide-home-links:not(.is-faq) .guide-home-link-card h3 {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.guide-home-visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* 700px 이하(guideHome.css 의 같은 단계 주석 참고): 카드 줄이 한 장씩 쌓이고, 카드 글자는 360 프레임 값이다. */
@media screen and (max-width:700px) {
    .guide-home-links {grid-template-columns:minmax(0,1fr);}
    .guide-home-links {gap:24px;}
    .guide-home-list-card {flex-direction:column;gap:20px;}
    .guide-home-thumb {flex:none;width:100%;height:auto;aspect-ratio:57/32;}
    .guide-home-list-copy {flex:none;padding:0;}
    .guide-home-list-card p {font-size:14px;line-height:21px;}
    .guide-home-links:not(.is-faq) .guide-home-link-card h3 {font-size:16px;line-height:24px;}
}
@media (prefers-reduced-motion:reduce) {
    .guide-home-list-card {animation:none;transition:none;}
}