Template:Codex/Recommend/styles.css

/* ============================================================
   틀:Codex/Recommend/styles.css (TemplateStyles)
   - 콘텐츠 모델은 반드시 'sanitized-css' 여야 합니다.
   [상호작용]
   - 적용 대상: 틀:Codex/Recommend 가 출력하는 .codex-rec 구조
   - 클래스 출처: .codex-rec__hero / __name 은 모듈:CodexRecommend 가 생성
   [반응형]
   - 768px 이상에서만 우측 인포박스 영역(약 440px)을 비워둠.
     좁은 화면에선 인포박스가 본문 위로 가므로 제한을 풀어 전체 폭 사용.
   ============================================================ */
.codex-rec {
	margin: 1em 0;
	padding: 12px 14px;
	border: 1px solid var(--border-color-base, #e1e5ea);
	border-radius: 10px;
	background: var(--color-surface-1, #ffffff);
}
.codex-rec__list {
	display: flex;
	flex-wrap: wrap;          /* 여러 명일 때 자동 줄바꿈 */
	gap: 14px;
}
.codex-rec__hero {
	display: inline-flex;
	flex-direction: column;   /* 포트레이트 위, 이름 아래 */
	align-items: center;
	gap: 4px;
	width: 88px;              /* 포트레이트 80px + 여유 */
	text-align: center;
}
.codex-rec__name {
	font-size: 0.9em;
	line-height: 1.3;
	word-break: keep-all;     /* 한글 이름이 어색하게 안 끊기도록 */
}

/* 넓은 화면에서만 우측 인포박스 영역을 비워둠 */
@media (min-width: 768px) {
	.codex-rec { max-width: calc(100% - 440px); }
}