@charset "utf-8";
/* 릴레이 챌린지 피드 (#mc-cont8 / .mfeed)
   - 메인: SNS 피드형 카드 캐러셀 (5개 노출)
   - 모달: 전체 게시물 그리드 */

/* ===== 섹션 ===== */
.mfeed{background:#f8f9fd; text-align:center; overflow:hidden;}
.mfeed .tit-wrap{position:relative; z-index:2;}

/* ===== 캐러셀 ===== */
/* Swiper 가 .swiper-container 클래스를 붙이지 않아 기본 overflow:hidden 이 걸리지 않는다.
   그대로 두면 컨테이너 밖 슬라이드까지 화면에 보이므로 직접 잘라 준다(노출 5개 고정). */
.feed-swiper{margin:100px 0 60px; position:relative; z-index:100; overflow:hidden;
	cursor:grab; touch-action:pan-y;}
.feed-swiper:active{cursor:grabbing;}
.feed-swiper .swiper-wrapper{align-items:stretch;}
.feed-swiper .swiper-slide{height:auto;}
/* 드래그 중 텍스트가 선택되지 않도록 */
.feed-swiper .feed-card-head,
.feed-swiper .feed-actions,
.feed-swiper .feed-caption{user-select:none;}

/* ===== 피드 카드 ===== */
.feed-card{display:flex; flex-direction:column; height:100%; overflow:hidden;
	background:#fff; border-radius:24px; box-shadow:0 0 15px #33333338; text-align:left;
	transition:transform .3s, box-shadow .3s;}
.feed-card:hover{transform:translateY(-6px); box-shadow:0 8px 24px #33333340;}

/* 헤더 : 참여기관 */
.feed-card-head{display:flex; align-items:center; gap:10px; padding:14px 16px;}
/* 놀이하우스 로고의 집 모양 마크 (투명 배경).
   원본 logo.png 은 어두운 배경용 흰색 버전이라 흰 카드 위에서는 본체가 묻힌다.
   지붕의 브랜드 블루는 그대로 두고 본체만 남색(#051154)으로 바꾼 house-mark-navy.png 을 쓴다. */
.feed-avatar{flex:0 0 auto; width:28px; height:22px;
	background:url(../img/house-mark-navy.png) no-repeat center/contain;}
.feed-org{min-width:0; font-size:15px; font-weight:700; color:#111; letter-spacing:-.6px;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* 미디어 : 정방형 1:1.
   설명글(최대 100자)이 카드 안에서 잘리지 않고 모두 보이도록, 기존 4:5 틀을 정방형으로 줄여
   늘어나는 설명 줄 수만큼의 높이를 확보한다. */
.feed-media{display:block; position:relative; width:100%; aspect-ratio:1/1;
	background:#f4f6fa; overflow:hidden;}
/* 카드 크기를 맞추기 위해 틀은 1:1 로 고정하고 채운다(cover).
   잘릴 위치는 nori-feed.js 가 이미지마다 분석해 object-position 으로 지정한다. */
.feed-media img{position:relative; z-index:1; width:100%; height:100%;
	object-fit:cover; transition:transform .4s;
	-webkit-user-drag:none; user-select:none; pointer-events:none;}
.feed-media[data-fit="cover"] img{object-fit:cover;}
.feed-card:hover .feed-media img{transform:scale(1.04);}
/* 이미지 영역 경계를 은은하게 구분 */
.feed-media::after{content:""; position:absolute; inset:0; pointer-events:none;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
	background:rgba(0,0,0,0); transition:background .3s;}
.feed-card:hover .feed-media::after{background:rgba(0,0,0,.06);}

/* 액션 바 : 표시 전용 (실제 기능 없음) */
.feed-actions{display:flex; align-items:center; gap:14px; padding:12px 16px 0;}
.feed-actions svg{width:22px; height:22px; stroke:#222; stroke-width:1.7; fill:none;
	stroke-linecap:round; stroke-linejoin:round;}
.feed-act{display:inline-flex; align-items:center; gap:6px;
	font-size:14px; font-weight:700; color:#222; letter-spacing:-.3px;}
.feed-act-bookmark{margin-left:auto;}

/* 캡션 : 설명글 전문을 줄임 없이 모두 보여준다(관리자 등록 최대 100자).
   카드 높이는 Swiper 가 가장 긴 카드에 맞춰 늘리므로(align-items:stretch) 카드 크기는 모두 같게 유지되고,
   해시태그는 margin-top:auto 로 항상 최하단에 붙는다. */
.feed-caption{padding:10px 16px 18px; font-size:15px; line-height:1.55; color:#333;
	letter-spacing:-.6px; word-break:keep-all; overflow-wrap:anywhere; display:block;}
.feed-caption span{display:block;}

/* 해시태그 : 카드 최하단 한 줄, 볼드.
   8개 태그의 어떤 두 개 조합이 와도 한 줄에 들어가도록 실측해 정한 값이다.
   최악 조합 '#영유아사교육인식개선 #저마다의속도로피어납니다' = 219px, 글자 영역 228px. */
.feed-tags{margin-top:auto; padding:0 14px 16px; font-size:11px; font-weight:700;
	color:var(--main-color); letter-spacing:-.8px; line-height:1.4;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* 비어있을 때 */
.feed-empty{padding:80px 0; color:#888; font-size:18px;}

/* 컨트롤 : 놀이자료 섹션(#mc-cont2)과 동일한 배치 규칙 */
#mc-cont8 .slide-btn{display:flex; align-items:center; gap:8px; width:auto;}
/* 제목 텍스트를 침범할 만큼 화면이 좁아지면 숨긴다 (nori-feed.js 가 판단) */
#mc-cont8 .slide-btn.is-hidden{display:none;}
#mc-cont8 .slide-btn > .swiper-button-prev,
#mc-cont8 .slide-btn > .swiper-button-next,
#mc-cont8 .slide-btn > .data-toggle{position:relative; top:auto; right:auto; bottom:auto; left:auto;
	margin:0!important; flex:0 0 auto;}
/* 처음/마지막에서 화살표를 비활성 표시하는 규칙(무한 순환으로 바뀐 뒤에는 쓰이지 않지만 그대로 둔다) */
#mc-cont8 .swiper-button-disabled{opacity:.3; pointer-events:none;}

/* '더 많은 자료 보기' 왼쪽 재생/일시정지 버튼 (nori-feed.js 가 넣는다).
   모양은 사이트 공통 .data-toggle(원형 테두리 + 재생/일시정지 아이콘)과 같게 그린다.
   .data-toggle 클래스를 직접 쓰지 않는 이유 : '놀이 자료' 스크립트가 문서의 첫 번째 .data-toggle 을
   자기 버튼으로 잡기 때문에, 피드 버튼에 그 클래스가 있으면 '놀이 자료' 일시정지가 피드 버튼에 붙는다.
   크기는 nori-feed.js 가 '더 많은 자료 보기' 버튼 높이에 맞춘다(아래 46px 는 기본값). */
#mc-cont8 .feed-play{position:relative; display:inline-block; width:46px; height:46px; margin:0 12px 0 0;
	padding:0; vertical-align:middle; background:transparent; border-radius:50%;
	border:2px solid var(--main-color); color:var(--main-color); cursor:pointer;
	transition:background-color .3s, color .3s;}   /* 크기에는 애니메이션을 걸지 않는다(높이를 맞출 때 커지는 모습이 보이지 않게) */
#mc-cont8 .feed-play .control-icon{position:absolute; top:50%; left:50%; width:3px; height:12px;
	background:currentColor; transform:translate(-4px,-50%); box-shadow:7px 0 0 currentColor;}
#mc-cont8 .feed-play.is-paused .control-icon{width:0; height:0; background:transparent; box-shadow:none;
	border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:10px solid;
	transform:translate(-35%,-50%);}
#mc-cont8 .feed-play:hover{background:var(--main-color); color:#fff;}
#mc-cont8 .feed-play + .more-btn{vertical-align:middle;}
/* 공통 CSS 의 button:focus 테두리 대신 키보드 초점일 때만 원 바깥에 표시한다 */
#mc-cont8 .feed-play:focus{outline:none;}
#mc-cont8 .feed-play:focus-visible{outline:2px solid var(--main-color); outline-offset:3px;}
/* 화살표 옆 상단 재생 버튼은 쓰지 않는다(nori-feed.js 가 지운다. 스크립트 실행 전 잠깐 보이지 않도록 미리 감춘다). */
#mc-cont8 .slide-btn > .feed-toggle{display:none;}

/* 가장자리 이동 버튼 : 가려진 게시물이 더 있다는 신호.
   그라데이션 배경을 깔면 양 끝 카드가 흐려 보이므로 배경 없이 원형 버튼만 띄운다.
   클릭 영역도 원 크기로 제한해, 버튼 밖 카드 영역의 클릭·드래그를 가로채지 않게 한다. */
.feed-edge{position:absolute; top:50%; transform:translateY(-50%);
	width:46px; height:46px; z-index:20; background:transparent;
	display:flex; align-items:center; justify-content:center;
	border:0; padding:0; cursor:pointer; transition:opacity .25s;}
.feed-edge-prev{left:10px;}
.feed-edge-next{right:10px;}
.feed-edge > span{display:block; width:100%; height:100%; border-radius:50%;
	background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.18); position:relative;
	transition:background .2s, transform .2s;}
.feed-edge > span::after{content:""; position:absolute; top:50%; left:50%;
	width:11px; height:11px; border-right:2.5px solid var(--main-color);
	border-bottom:2.5px solid var(--main-color);}
.feed-edge-next > span::after{transform:translate(-65%,-50%) rotate(-45deg);}
.feed-edge-prev > span::after{transform:translate(-35%,-50%) rotate(135deg);}
.feed-edge:hover > span{background:var(--main-color); transform:scale(1.06);}
.feed-edge:hover > span::after{border-color:#fff;}
/* CMS 공통 CSS 의 button:focus{outline:-webkit-focus-ring-color auto 5px} 가
   버튼 전체(72px x 카드 높이)에 사각 테두리를 그린다. 이를 끄고,
   키보드 사용자를 위한 표시는 안쪽 원에만 남긴다(.data-toggle 과 같은 방식). */
.feed-edge:focus{outline:none;}
.feed-edge::-moz-focus-inner{border:0;}
.feed-edge:focus-visible > span{outline:2px solid var(--main-color); outline-offset:3px;}
/* 더 이동할 곳이 없으면 감춘다 */
.feed-edge.is-off{opacity:0; pointer-events:none;}

/* ===== 전체보기 모달 ===== */
.feed-modal{padding:10px 0 0;}
.feed-modal-head{display:flex; align-items:center; gap:14px; padding:0 4px 18px; border-bottom:1px solid #e6eaf0;}
.feed-modal-head .feed-avatar{width:46px; height:36px;}
.feed-modal-title{font-size:20px; font-weight:800; color:#111; letter-spacing:-.8px;}
.feed-modal-count{margin-top:4px; font-size:14px; color:#777;}
.feed-modal-count b{color:#0085FF;}

.feed-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:18px;}
.feed-grid-item{position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:#eef2f7;}
/* 모달 썸네일도 같은 규칙을 따른다 */
.feed-grid-item img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover;}
.feed-grid-item[data-fit="cover"] img{object-fit:cover;}
/* 호버 시 어두워지는 효과만 (좋아요/댓글 수 미노출) */
.feed-grid-item .feed-grid-hover{position:absolute; inset:0; display:block;
	background:rgba(0,0,0,.45); opacity:0; transition:opacity .25s;}
.feed-grid-item:hover .feed-grid-hover{opacity:1;}
.feed-grid-multi{position:absolute; top:10px; right:10px; width:18px; height:18px;
	border:2px solid #fff; border-radius:4px; box-shadow:3px -3px 0 -1px rgba(0,0,0,.15);}

.feed-modal-empty{padding:60px 0; text-align:center; color:#888;}

/* ===== 반응형 ===== */
@media only screen and (max-width:1240px){
	.feed-swiper{margin:70px 0 40px;}
}
@media only screen and (max-width:1023px){
	.feed-swiper{margin:50px 0 30px;}
	.feed-grid{gap:4px;}
}
@media only screen and (max-width:767px){
	.feed-card-head{padding:12px 14px;}
	.feed-org{font-size:14px;}
	.feed-caption{font-size:14px; padding:10px 14px 16px;}
	.feed-grid{grid-template-columns:repeat(3,1fr); gap:3px;}
	.feed-modal-head .feed-avatar{width:36px; height:28px;}
	.feed-modal-title{font-size:17px;}
}