@charset "utf-8";

#shopPage{ background: var(--light-blue); padding: 0 0 140px; }
#shopPage .shop-lead{ max-width: 720px; margin: 20px 0 50px; color: var(--gray02); line-height: 1.8; }
#shopPage .shop-sec{ scroll-margin-top: 140px; margin-bottom: 80px; }
#shopPage .shop-sec h3{ font-size: 2rem; font-weight: 800; color: var(--blue); margin-bottom: 12px; }
#shopPage .shop-sec p.desc{ color: var(--gray03); margin-bottom: 28px; line-height: 1.7; }
#shopPage .product-grid{
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
#shopPage .product-card{
	background: #fff; border-radius: 24px; padding: 0 0 18px;
	box-shadow: 0 10px 30px rgba(30,108,255,0.08);
	display: flex; flex-direction: column; min-height: 220px;
	overflow: hidden;
	border: 1px solid #dbe7ff;
	transition: transform .25s ease, box-shadow .25s ease;
}
#shopPage .product-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(225,29,72,0.12);
	border-color: #ffc1cd;
}
#shopPage .product-card .thumb{
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: linear-gradient(160deg, #eff4ff, #ffe4ea);
}
#shopPage .product-card .pad{ padding: 18px 20px 4px; }
#shopPage .product-card .badge{
	display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--yellow);
	margin-bottom: 10px; letter-spacing: 0.04em;
}
#shopPage .product-card h4{ font-size: 1.15rem; font-weight: 800; line-height: 1.45; margin-bottom: 12px; }
#shopPage .product-card .price{ margin-top: auto; font-size: 1.35rem; font-weight: 800; color: var(--blue); }
#shopPage .product-card .price s{ display: block; font-size: 0.85rem; font-weight: 500; color: #9aa4a8; margin-bottom: 4px; }
#shopPage .product-card .cta{
	margin: 8px 20px 4px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	font-weight: 700; color: #fff; background: var(--blue);
	padding: 10px 14px; border-radius: 999px;
}
#shopPage .product-card .cta i{ color: #fff; }
#shopPage .product-card .cta:hover{ background: var(--red); }
#shopPage .guide-box{
	background: #fff; border-radius: 28px; padding: 40px 36px;
	border: 1px solid #d7e1e5;
}
#shopPage .guide-box li{ position: relative; padding-left: 18px; margin-bottom: 10px; color: var(--gray02); line-height: 1.7; }
#shopPage .guide-box li::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); position: absolute; left: 0; top: 10px; }
#shopPage .bank-box{ margin-top: 28px; padding: 22px 24px; background: var(--blue); color: #fff; border-radius: 18px; }
#shopPage .bank-box strong, #shopPage .bank-box span, #shopPage .bank-box p{ color: #fff; }
#shopPage .bank-box p{ margin-top: 6px; opacity: 0.9; }

@media screen and (max-width: 1100px){
	#shopPage .product-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 700px){
	#shopPage .product-grid{ grid-template-columns: 1fr; }
	#shopPage .guide-box{ padding: 28px 20px; }
}