#insta-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
	gap:10px;
	padding:10px;
	max-width:100%;
	margin:0 auto;
}

.grid-item{
	background:#fff;
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 1px 4px rgba(0,0,0,.08);
}

.grid-item img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	display:block;
	transition:.25s;
}

.grid-item img:hover{
	transform:scale(1.03);
}

#scroll-sentinel{
	width:100%;
	height:1px;
}

/* 토스트 */
#toast-message{
	position:fixed;
	left:50%;
	bottom:30px;
	transform:translateX(-50%);
	background:rgba(0,0,0,.82);
	color:#fff;
	padding:12px 18px;
	border-radius:30px;
	font-size:14px;
	font-family:Arial,sans-serif;
	line-height:1.4;
	z-index:999999;
	opacity:0;
	pointer-events:none;
	transition:all .25s ease;
	white-space:nowrap;
}

#toast-message.show{
	opacity:1;
	bottom:45px;
}

/* 모달 */
#image-modal{
	display:none;
	position:fixed;
	z-index:99999;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.9);
	align-items:center;
	justify-content:center;
	padding:20px;
	box-sizing:border-box;
	touch-action:none;
}

#image-modal img{
	max-width:95%;
	max-height:95%;
	object-fit:contain;
	border-radius:8px;
	touch-action:pan-y;
	user-select:none;
	-webkit-user-drag:none;
}

#modal-close{
	position:absolute;
	right:22px;
	top:10px;
	width:54px;
	height:54px;
	background:none;
	border:0;
	border-radius:50%;
	color:rgba(255,255,255,.7);
	font-size:54px;
	line-height:1;
	cursor:pointer;
	z-index:100002;
	display:flex;
	align-items:center;
	justify-content:center;
	backdrop-filter:blur(4px);
	transition:.2s;
}

#modal-close:hover{ color:rgba(255,255,255,1); }

.modal-nav{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:56px;
	height:56px;
	border-radius:50%;
	border:0;
	background:none;
	color:rgba(255,255,255,.7);
	font-size:56px;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:100001;
	backdrop-filter:blur(4px);
	transition:.2s;
}

.modal-nav:hover{
	color:rgba(255,255,255,1);
}

#modal-prev{
	left:20px;
}

#modal-next{
	right:20px;
}

@media (max-width:700px){

	#insta-grid{
		grid-template-columns:repeat(3,1fr);
		gap:3px;
		padding:3px;
	}

	.grid-item{
		border-radius:3px;
	}

	.modal-nav{
		width:44px;
		height:44px;
		font-size:18px;
	}

	#modal-prev{
		left:10px;
	}

	#modal-next{
		right:10px;
	}

	#modal-close{
		right:10px;
		top:10px;
		width:44px;
		height:44px;
		font-size:34px;
	}

	#toast-message{
		bottom:24px;
		font-size:13px;
		padding:10px 15px;
	}

	#toast-message.show{
		bottom:38px;
	}
}