/* 벧엘장로교회 메인 - 바로가기 카드 (모던 클린 버전)
   위치: /theme/bethel/css/main_fa.css
   기존 main.css와 충돌하지 않도록 모든 클래스에 qm- 접두어 사용 */

.qm {
	--qm-navy: #1e2b4f;
	--qm-gold: #a97f2e;
	--qm-ink: #1a2238;
	--qm-text: #6b7385;
	--qm-bg: #f4f6fa;        /* 카드 기본 배경 */
	--qm-bg-hover: #ffffff;
	--qm-line: #e6e9f0;
	--qm-icon-bg: #ffffff;
	--qm-radius: 16px;
	background: #fff;
	padding: 36px 0 24px;
	font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* 갤러리 구역 */
.qm.qm-latest {
	padding: 32px 0 0;
	background: #fff;
}

.qm-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.qm-group + .qm-group { margin-top: 64px; }

/* 섹션 제목: 얇은 선 하나로 정리 */
.qm-head {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 24px;
}
.qm-head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--qm-line);
}
.qm-head h3 {
	order: -1;
	margin: 0;
	font-family: "Noto Serif KR", "Batang", serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--qm-navy);
	letter-spacing: -0.02em;
}
.qm-head p {
	margin: 0;
	font-size: 14px;
	color: var(--qm-text);
}

/* 카드 그리드 */
.qm-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.qm-list--3 { grid-template-columns: repeat(3, 1fr); }
.qm-list--5 { grid-template-columns: repeat(5, 1fr); }
.qm-list li { margin: 0; padding: 0; float: none; width: auto; }

.qm-list a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 22px 24px;
	box-sizing: border-box;
	background: var(--qm-bg);
	border: 1px solid #eceff4; /* 아주 얇고 연한 기본 테두리 */
	border-radius: var(--qm-radius);
	color: var(--qm-ink);
	text-decoration: none;
	transition: background .2s, border-color .2s, box-shadow .2s;
}
.qm-list a:hover,
.qm-list a:focus-visible {
	background: var(--qm-bg-hover);
	border-color: var(--qm-line);
	box-shadow: 0 10px 28px -12px rgba(30, 43, 79, .25);
}
.qm-list a:focus-visible {
	outline: 3px solid rgba(169, 127, 46, .4);
	outline-offset: 2px;
}

/* 5열은 폭이 좁아 아이콘을 위, 글자를 아래로 쌓습니다 */
.qm-list.qm-list--5 a {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 20px 22px;
}

/* 아이콘 */
.qm-ico {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--qm-icon-bg);
	color: var(--qm-navy);
	font-size: 19px;
	box-shadow: 0 1px 2px rgba(30, 43, 79, .08);
	transition: background .2s, color .2s;
}
.qm-list a:hover .qm-ico,
.qm-list a:focus-visible .qm-ico {
	background: var(--qm-navy);
	color: #fff;
}

/* 텍스트 */
.qm-txt { min-width: 0; }
.qm-txt strong {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	word-break: keep-all;
}
.qm-txt span {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--qm-text);
	word-break: keep-all;
}

/* 중간 폭 노트북: 5열 → 3열 */
@media (max-width: 1100px) {
	.qm-list--5 { grid-template-columns: repeat(3, 1fr); }
	.qm-list { grid-template-columns: repeat(2, 1fr); }
	.qm-list--3 { grid-template-columns: repeat(3, 1fr); }
}

/* 태블릿 */
@media (max-width: 960px) {
	.qm { padding: 24px 0 16px; }
	.qm.qm-latest { padding: 24px 0 0; }
	.qm-group + .qm-group { margin-top: 48px; }
	.qm-list,
	.qm-list--3,
	.qm-list--5 { grid-template-columns: repeat(2, 1fr); }
}

/* 모바일 */
@media (max-width: 560px) {
	.qm-inner { padding: 0 16px; }
	.qm-head { margin-bottom: 16px; gap: 14px; }
	.qm-head h3 { font-size: 20px; }
	.qm-list,
	.qm-list--3,
	.qm-list--5 { grid-template-columns: 1fr; gap: 10px; }
	.qm-list a,
	.qm-list.qm-list--5 a {
		padding: 16px 18px;
		flex-direction: row;
		align-items: center;
		gap: 14px;
		border-radius: 14px;
	}
	.qm-ico { flex-basis: 44px; width: 44px; height: 44px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.qm-list a, .qm-ico { transition: none; }
}