/*====================================*/
/* 피드 메인 - 전체 레이아웃(좌 고정 + 우 스크롤) */
/*====================================*/

/* 니 main_layout 헤더 높이에 맞춰 숫자만 조절해라 */
:root{
	--feed_main_header_height: 0px;
	--feed_main_layout_gap: 14px;
	--feed_main_left_width: 25%; /* 레퍼런스 느낌 폭 */
}

/* 전체 폭 100% 쓰기 */
.feed_main_layout{
	width: 100%;
	max-width: none;
	margin: 0;
	display: flex;
	gap: var(--feed_main_layout_gap);
	box-sizing: border-box;
	align-items: flex-start;
}

/*====================================*/
/* 피드 메인 - 왼쪽(고정 영역) */
/*====================================*/

.feed_main_title_feed_fixed{
	width: var(--feed_main_left_width);
	flex: 0 0 var(--feed_main_left_width);
	position: sticky;
	top: var(--feed_main_header_height);
	height: calc(100vh - var(--feed_main_header_height));
	/* 18px은 feed_main_layout padding-top이랑 대충 맞추려고 빼준 값 */
}

/* “카드” 자체 (정사각형 금지, 화면 높이 다 씀) */
.feed_main_title_feed_container{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	background: #f2f2ef;
	user-select: none;
}

/* 슬라이드 트랙 */
.feed_main_title_feed_track{
	display: flex;
	width: 100%;
	height: 100%;
	transform: translate3d(0,0,0);
}
.feed_main_title_feed_track.is_transition{
	transition: transform 420ms ease;
}

/* 한 장 */
.feed_main_title_feed_slide{
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	position: relative;
	display: block;
	color: #111;
	text-decoration: none;
	box-sizing: border-box;
	background: #f2f2ef;
}

.feed_main_title_feed_top {
	padding: 24px;
}

/* 상단 배지 */
.feed_main_title_feed_badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	margin-top: 20px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.16);
	color: rgba(0,0,0,0.70);
	font-size: 12px;
	font-weight: 500;
	background: rgb(249 249 249 / 90%);
}

/* 제목(레퍼런스처럼 굵고 큼) */
.feed_main_title_feed_subject{
	margin-top: 40px;
	font-size: 40px;
	line-height: 1.12;
	letter-spacing: -0.03em;
	font-weight: 900;
	word-break: keep-all;
	height: calc(1.1em * 2);

	/* ✅ 1~2줄이면 아래로 붙게 */
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.feed_main_title_feed_subject > span{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 부제목 */
.feed_main_title_feed_sub_subject{
	/* 기존 유지 */
	margin-top: 20px;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(0,0,0,0.72);
	font-weight: 600;

	/* ✅ 핵심 */
	word-break: break-word;
	overflow-wrap: anywhere;

	/* 2줄까지만 */
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 날짜 */
.feed_main_title_feed_regdate{
	margin-top: 16px;
	font-size: 13px;
	color: rgba(0,0,0,0.45);
	font-weight: 600;
}

/* 하단 큰 이미지(레퍼런스처럼 크게) */
.feed_main_title_feed_image{
	position: relative;
	left: 0;
	right: 0;
	bottom: 0;

	/* 위 텍스트 공간을 남기고 아래를 꽉 채우는 형태 */
	width: 100%;
	height: 45%;
	min-height: 320px;
	overflow: hidden;
	border-top: 1px solid rgba(0,0,0,0.06);
	background: #eee;
}

.feed_main_title_feed_image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 썸네일 없을 때 */
.feed_main_title_feed_image_empty{
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f2f2f2, #e8e8e8);
}

/* 비어있을 때 */
.feed_main_title_feed_empty{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* 인디케이터(카드 이미지 위에 얹히는 느낌) */
.feed_main_title_feed_indicator{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 5;
	pointer-events: auto;
}

.feed_main_title_feed_indicator_dot{
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(0,0,0,0.22);
	transition: transform 180ms ease, background 180ms ease;
}

.feed_main_title_feed_indicator_dot.active{
	background: rgba(0,0,0,0.55);
	transform: scale(1.25);
}

/*====================================*/
/* 피드 메인 - 오른쪽 */
/*====================================*/

/* 오른쪽은 나머지 다 먹기 */
.feed_main_right_area{
	flex:1;
	min-width:0;
	padding: 18px 0 50px 18px;
}

/*====================================*/
/* 피드 메인 - 우측 필터 바 */
/*====================================*/

.feed_main_right_filter_bar{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	padding: 6px 10px 18px 0px;
}

.feed_main_right_filter_left{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
}

.feed_main_right_filter_item{
	flex:0 0 auto;          /* ✅ flex 안에서 찌그러짐 방지 */
}

#state, #district, #village {
    cursor: pointer;
}

.feed_main_right_filter_item select{
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	height: 33px;
	line-height: 31px;
	padding: 0 30px 0 16px; /* 오른쪽 화살표 공간 */
	border:1px solid #e5e5e5;
	border-radius:999px;
	background:#fff;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 12px center;
	background-size:14px 14px;
	font-size: 12px;

	/* 기본 폭: JS가 자동조절 */
	min-width:86px;
	max-width:300px;

	/* 긴 텍스트 말줄임 */
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

/* ============================ */
/* 분류 탭(사진처럼) */
/* ============================ */

.feed_main_right_category_tabs{
	display:flex;
	align-items:center;
	gap: 8px;
	flex-wrap:wrap;
	padding:6px 0 12px 0;
}

.feed_main_right_category_tab{
	height:32px;
	padding:0 14px;
	border-radius:999px;
	border:1px solid #d9d9d9;
	background:#fff;
	font-size: 12px;
	transition: background-color 0.3s ease, all 0.5s ease;
	cursor: pointer;
}

.feed_main_right_category_tab:hover {
	transform: translateY(-3px) !important;
}

.feed_main_right_category_tab.active{
	border:0;
	background:#111;
	color:#fff;
}

.feed_main_right_region_selects{
	display:flex;
	gap:10px;
	align-items:center;
	flex-wrap:wrap; /* 좁으면 줄바꿈 */
	padding: 6px 0 12px 0;
}

/*====================================*/
/* 피드 메인 - 우측 섹션 */
/*====================================*/

.feed_main_right_section{
	margin-top: 9px;
}

.feed_main_right_section_head{
	margin-bottom:10px;
}

.feed_main_right_section_title{
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 16.5px;
	font-weight: 650;
	color: #222222;
}

/* 2번째 섹션부터만 적용 */
.feed_main_right_section:nth-of-type(n+2) .feed_main_right_section_title{
	margin-top: 50px;
}

/*====================================*/
/* 피드 메인 - 우측 캐러셀 */
/*====================================*/

.feed_main_right_carousel{
	width:100%;
	overflow:hidden; /* ✅ 스크롤바 원천 차단 */
	position:relative;

	touch-action: pan-y;      /* 가로 드래그는 JS가, 세로 스크롤은 브라우저가 */
	user-select: none;
}

.feed_main_right_track{
	display:flex;
	will-change:transform;
	transform:translate3d(0,0,0);
	transition:transform .38s ease;
	overflow:visible;
}

.feed_main_right_track::-webkit-scrollbar{ height:10px; }
.feed_main_right_track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:999px; }

/* ============================ */
/*  피드 메인 - 5개 단위 페이지 래퍼 */
/* ============================ */

.feed_main_right_page{
	flex:0 0 100%;
	padding-top: 10px;
	width:100%;
	display:flex;
	gap: 16px;
}

/*====================================*/
/* 피드 메인 - 5개 단위 페이지 래퍼 로딩 */
/*====================================*/

.feed_main_right_carousel.is_restoring{
	position: relative;
}

.feed_main_right_carousel.is_restoring::after{
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.92);
	z-index: 10;
}

/* ✅ 선택한 custom loader */
.feed_main_right_carousel.is_restoring::before{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 11;

	width: 30px;
	height: 30px;
	border-radius: 50%;

	background:
		radial-gradient(farthest-side,#D9D9D9 94%,#0000) top/4px 4px no-repeat,
		conic-gradient(#0000 30%,#D9D9D9);

	-webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0);

	animation: feed_main_restore_spinner 1s linear infinite;
}

@keyframes feed_main_restore_spinner{
	100%{
		transform: translate(-50%, -50%) rotate(1turn);
	}
}

/* ============================ */
/*  피드 메인 - 피드 카드 */
/* ============================ */

.feed_main_right_card{
	flex:0 0 auto;
	width: 250px;
	border-radius:16px;
	overflow:hidden;
	background:#fff;
	border:1px solid #eee;
	box-shadow:0 2px 10px rgba(0,0,0,.04);
	transition: background-color 0.3s ease, all 0.5s ease;
}

.feed_main_right_card:hover{
	background-color:#f1f5ff;
	transform: translateY(-3px) !important;
}

.feed_main_right_card_link{
	display:block;
	color:inherit;
	text-decoration:none;
}

.feed_main_right_card_thumb{
	position:relative;
	width:100%;
	height: 173px;
	background:#f6f6f6;
	overflow:hidden;
}

.feed_main_right_card_thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.feed_main_right_card_thumb_empty{
	width:100%;
	height:100%;
	background:#f0f0f0;
}

/* ✅ 잇방인 선호 뱃지 */
.feed_main_right_card_pref_badge{
	position: absolute;
    left: 10px;
    top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgb(0 0 0 / 40%);
    border: 1px solid rgba(0, 0, 0, .08);
    font-size: 11px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1;
    backdrop-filter: blur(6px);
}

/* 하트 버튼은 기존 유지 */
.feed_main_right_card_fav_btn{
	position:absolute;
	right: 7px;
	top: 6px;
	width: 31px;
	height: 30px;
	border-radius:999px;
	/* background: rgb(0 0 0 / 15%); */
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

.feed_main_right_card_fav_btn i{
	font-size: 18px;
	line-height: 1;
	color: #fff;
}

/* ✅ 즐겨찾기 ON (하트 채움 상태) */
.feed_main_right_card_fav_btn.is_on{
	border: 1px solid rgb(0 0 0 / 0%);
	/* border-color: rgba(231, 76, 60, 0.25); */
	background: rgb(255 255 255 / 0%);
}

.feed_main_right_card_fav_btn.is_on::after{
	content: "";
	position: absolute;
	inset: 0;
	/* background: rgba(231, 76, 60, 0.12); */
	border-radius:999px;
	z-index: 10;
}

.feed_main_right_card_fav_btn.is_on i{
	font-size: 19px;
	line-height: 1;
	color: rgb(251 98 83 / 90%);
}

.feed_main_right_card_body{
	padding:10px 12px 12px 12px;
}

.feed_main_right_card_title{
	font-size: 13.5px;
	font-weight: 650;
	min-height: 21px;

	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

/* ✅ 날짜 + 지역 한줄 */
.feed_main_right_card_meta_line{
	margin-top:6px;
	font-size:12px;
	color:#777;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.feed_main_right_card_date{
	white-space:nowrap;
	flex:0 0 auto;
}

.feed_main_right_card_region{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	text-align:right;
	flex:1 1 auto;
}

/*====================================*/
/* 반응형: 좁아지면 좌우 -> 세로 스택 */--feed_main_left_width
/*====================================*/

@media (max-width: 1100px){
	:root{
		--feed_main_left_width: 460px;
	}
}

@media (max-width: 980px){
	.feed_main_layout{
		flex-direction: column;
	}
	.feed_main_title_feed_fixed{
		width: 100%;
		flex: 0 0 auto;
		position: relative; /* 모바일에선 sticky 해제 */
		top: auto;
		height: 520px; /* 모바일은 적당히 */
	}

	.feed_view_grid,
	.feed_view_left,
	.feed_view_right,
	.feed_side_box,
	.feed_view_left_top_card,
	.feed_view_left_bottom_card{
		min-width: 0;
	}
}