*, *::before, *::after { letter-spacing: 0; }
.visually-hidden { position: absolute; width: 0; height: 0; contain: content; clip-path: rect(0 0 0 0); }

.layout-home { --radius: 20rem; display: grid; gap: 30rem; max-width: calc(var(--container) * 1rem); padding-bottom: clamp(30rem, calc(50 / var(--container) * 100vw), 50rem);
	@media (width >= 1280px) { grid-template: "hero info" 1fr "gallery info" "gallery notice" / 1fr 470rem;
		.section-hero { grid-area: hero; }
		.section-info { grid-area: info; }
		.section-gallery { grid-area: gallery; }
		.section-notice { grid-area: notice; }
	}
	.section-hero { display: grid; grid-template-rows: 1fr auto; background: #fff7ee; border-radius: var(--radius);
		.banner { position: relative; display: grid; padding: clamp(22rem, calc(75 / var(--container) * 100vw), 75rem) clamp(22rem, calc(100 / var(--container) * 100vw), 100rem) clamp(22rem, calc(74 / var(--container) * 100vw), 74rem); background: #fff7ee no-repeat 50% 0 / cover; border-radius: var(--radius) var(--radius) 0 0; isolation: isolate;
			.heading { margin-bottom: 0.3em; font: 700 clamp(22rem, calc(30 / var(--container) * 100vw), 30rem) / 1.48 var(--font-gwangsun); color: var(--primary); }
			.subheading { font: 600 var(--font-size-18-to-14) / 1.66666667 var(--font-sans); text-wrap: balance; color: var(--secondary); }
			.link { display: inline-flex; place-self: end; gap: 1.11111111em; margin-top: 1lh; padding: 0.80555556em 2.36111111em; font: 600 var(--font-size-18-to-14) var(--font-sans); color: #fff; background: var(--primary); border-radius: 5em;
				&::after { display: block; width: 0.94444444em; aspect-ratio: 17 / 16; background: url("/images/home/ui-arrow.svg") no-repeat 50% / contain; content: ""; }
			}
			@media (width >= 768px) { background-image: url("/images/home/hero-bg-pc.webp"); }
			@media (width >= 1280px) { grid-template: auto 1fr / 1fr auto;
				.link { grid-area: 1 / 2 / 3 / 3; }
			}
			@media (width < 768px) {
				&::before { position: absolute; inset: 0; z-index: -1; background-color: inherit; border-radius: var(--radius); opacity: 0.4; content: ""; } background-image: url("/images/home/hero-bg-mob.webp");
			}
		}
		.navigation { --border-color: #eee; padding-block: 15rem; font: 14rem / 25rem var(--font-sans); text-align: center; color: #555; background: #fff; border-radius: var(--radius); box-shadow: 0 0 30rem #0000000d;
			.list { display: grid; gap: clamp(10rem, calc(20 / var(--container) * 100vw), 20rem) 0;
				@media (width >= 1280px) { grid-template-columns: repeat(6, 1fr); }
				@media (width < 1280px) { grid-template-columns: repeat(3, 1fr);
					.item:nth-child(4) { border-left: 0; }
				}
			}
			.item + .item { border-left: 1px solid var(--border-color); }
			.link { display: grid; grid-template-rows: 40rem 1fr; gap: 10rem; height: 100%; }
			.icon { width: 100%; height: 40rem; color: var(--primary); }
			.title { align-content: center; }
		}
	}
	.section-info { display: grid; align-self: start; gap: clamp(10rem, calc(20 / var(--container) * 100vw), 20rem);
		.donation-block { display: grid; gap: 0.52777778em 2ch; padding: clamp(22rem, calc(30 / var(--container) * 100vw), 30rem); font: 700 var(--font-size-18-to-14) var(--font-sans); color: #fff; background: var(--primary) url("/images/home/donation-bg.webp") no-repeat 50% / cover; border-radius: var(--radius);
			&::before { display: block; border-top: 1px solid #ffffff4d; content: ""; }
			.link { display: grid; grid-template-columns: 2.77777778em 1fr auto; align-items: center; gap: 2.5ch; }
			.link--1 { order: -1; }
			.link::before { display: block; aspect-ratio: 1; background: no-repeat 50% / contain; content: ""; }
			.link--1::before { background-image: url("/images/home/donation-icon-1.png"); }
			.link--2::before { background-image: url("/images/home/donation-icon-2.png"); }
			.link::after { display: block; width: 0.94444444em; aspect-ratio: 17 / 16; margin-right: 1.6ch; background: url("/images/home/ui-arrow.svg") no-repeat 50% / contain; content: ""; }
			@media (768px <= width < 1280px) { grid-template-columns: 1fr auto 1fr;
				&::before { border: 0; border-left: 1px solid #ffffff4d; }
			}
		}
		.contact-block {
			.links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25em; padding: clamp(22rem, calc(30 / var(--container) * 100vw), 30rem) clamp(22rem, calc(30 / var(--container) * 100vw), 30rem) clamp(22rem, calc(29 / var(--container) * 100vw), 29rem); font: var(--font-size-16-to-14) var(--font-sans); color: #fff; background: var(--primary); border-radius: var(--radius) var(--radius) 0 0; }
			.link { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 0.9375em; }
			.icon-block { display: grid; grid-area: 1 / 1 / 3 / 2; place-items: center; width: 50rem; aspect-ratio: 1; background: #fff; border-radius: 50%; }
			.icon { width: 100%; height: 1.25em; color: var(--primary); }
			.number { font: 700 1.125em var(--font-sans); }
			.hours { display: flex; justify-content: center; gap: 1.25em; padding: 18rem clamp(16rem, calc(29 / var(--container) * 100vw), 29rem) 16rem; border: 1px solid var(--border-color); border-radius: 0 0 var(--radius) var(--radius); }
			.hour { display: flex; gap: 0.625em; }
			.time { font-weight: 700; }
		}
		.directions-block { display: grid; grid-template-columns: 1fr auto 1fr; justify-items: start; gap: 1.88888889em; padding: clamp(22rem, calc(29 / var(--container) * 100vw), 29rem); font: 700 var(--font-size-18-to-14) var(--font-sans); border: 1px solid var(--border-color); border-radius: var(--radius);
			&::before { display: block; height: 2.77777778em; border-left: 1px solid var(--border-color); content: ""; }
			.link { display: inline-flex; align-items: center; gap: 1.7ch; }
			.link--1 { order: -1; }
			.icon-block { display: grid; place-items: center; width: 2.77777778em; aspect-ratio: 1; color: #fff; background: var(--primary); border-radius: 50%; }
			.icon--1 { width: 36%; aspect-ratio: 18 / 23; }
			.icon--2 { width: 58%; aspect-ratio: 29 / 20; }
		}
	}
	.shared-heading-block { display: grid; grid-template-columns: 1fr auto;
		.shared-heading { padding-left: 2ch; font: 700 clamp(22rem, calc(28 / var(--container) * 100vw), 28rem) var(--font-sans); color: #000; background: url("/images/ui/marker.png") no-repeat 0 0.17857143em / 0.96428571em; }
		.shared-link { display: inline-flex; align-items: center; gap: 1.25em; font: 500 var(--font-size-16-to-14) var(--font-sans); color: #999; text-transform: uppercase;
			&::after { display: block; width: 1.875em; aspect-ratio: 1; background: linear-gradient(#fff) no-repeat 50% / 0.6875em 2rem, linear-gradient(#fff) no-repeat 50% / 2rem 0.6875em, var(--primary); border-radius: 50%; content: ""; }
		}
	}
	.section-gallery { min-width: 0;
		.swiper { min-width: 0; margin-top: 20rem; }
		.swiper-slide { width: 285rem; margin-right: clamp(16rem, calc(20 / var(--container) * 100vw), 20rem); }
		.swiper-slide:last-child { margin-right: 0; }
		.link { display: block; aspect-ratio: 285 / 280; background: var(--thumbnail-url, none) no-repeat 50% / cover, #e0e0e0 url("/images/brand/symbol-gray.png") no-repeat 50% / 40rem; border-radius: var(--radius); }
		.info { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5lh; width: 100%; height: 100%; padding: 5%; font: var(--font-size-18-to-14) / 1.5 var(--font-sans); text-align: center; text-wrap: balance; color: #fff; background: hsla(0, 0%, 0%, 0.7); border-radius: var(--radius);
			.link:not(:hover, :focus) & { opacity: 0; }
			@media (prefers-reduced-motion: no-preference) { transition: 0.3s; }
		}
		.icon { display: block; width: 2.77777778em; aspect-ratio: 1; background: linear-gradient(#fff) no-repeat 50% / 0.6875em 2rem, linear-gradient(#fff) no-repeat 50% / 2rem 0.6875em, var(--primary); border-radius: 50%; }
		.title { display: -webkit-box; overflow: hidden; word-break: keep-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
	}
	.section-notice {
		.list { margin-top: 16rem; }
		.link { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2ch; padding: 23rem 20.5rem 19rem; border-bottom: 1px solid var(--border-color); }
		.title { display: -webkit-box; overflow: hidden; font: 500 var(--font-size-18-to-16) var(--font-sans); word-break: break-all; color: #000; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
		.date { font: 700 var(--font-size-16-to-14) var(--font-sans); color: #ccc; }
	}
}

.section-home-partner { padding-block: 14rem 15rem; border-top: 1px solid var(--border-color);
	.inr { max-width: 1700rem; }
	.swiper-slide { width: auto; margin-right: clamp(40rem, calc(50 / var(--container) * 100vw), 50rem); }
	.logo { display: block; width: 100%; height: 60rem; object-fit: contain; }
	@media (width >= 768px) {
		.swiper-slide { width: 200rem; }
	}
	@media (width < 768px) {
		.swiper-slide { max-width: 60vw; }
	}
}