@charset "utf-8";
/* 납골당 메인 페이지 (inc/main.html) */

.yg-main, .yg-popup {
	--yg-ink: #0f1718;
	--yg-green: #4b5e46;
	--yg-mute: #666;
	--yg-cream: #f7f6f1;
	font-family: 'SUITE Variable', SUITE, 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', sans-serif;
	word-break: keep-all;
}
.yg-main { color: var(--yg-mute); }
.yg-main p { margin: 0; }
.yg-main a { text-decoration: none; }
.yg-main ul { list-style: none; margin: 0; padding: 0; }
.yg-wrap { position: relative; max-width: 1600px; margin: 0 auto; padding: 0 20px; }
.yg-big, .yg-small, .yg-vis-eyebrow, .yg-intro-logo, .yg-vis-pager, .yg-arrows, .yg-design-hover .t2,
.yg-life-box strong, .yg-life-box em, .yg-fac span, .yg-service-slide .num, .yg-service-slide .t1, .yg-service-nav, .yg-more, .yg-cg-logo {
	font-family: 'Jost', 'SUITE Variable', sans-serif;
}
.yg-small { font-size: 15px; letter-spacing: .08em; color: var(--yg-ink); }
.yg-big { margin: 12px 0 0; font-size: 40px; line-height: 1.19; font-weight: 400; letter-spacing: -.01em; color: var(--yg-ink); }
.yg-lead { margin-top: 24px !important; font-size: 16px; line-height: 1.8; font-weight: 500; color: var(--yg-ink); }
.yg-sub { margin-top: 12px !important; font-size: 20px; color: rgba(255,255,255,.85); }

/* 흐릿하게 시작해 또렷해지는 등장 효과 */
.yg-blur { opacity: 0; filter: blur(4px); transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), filter .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.yg-blur.is-in { opacity: 1; filter: none; transform: none; }

/* ---------- VISUAL ---------- */
.yg-vis { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--yg-ink); }
.yg-vis-bg { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transform: scale(1.08); transition: opacity 1.8s ease, transform 6s linear; }
.yg-vis-bg.is-active { opacity: 1; transform: scale(1); }
.yg-vis-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,23,24,.35), rgba(15,23,24,.1) 45%, rgba(15,23,24,.6)); }
.yg-vis-txt { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-40%); color: #fff; text-align: center; opacity: 0; transition: opacity 1.2s ease .3s, transform 1.2s ease .3s; }
.yg-vis.is-ready .yg-vis-txt { opacity: 1; transform: translateY(-50%); }
.yg-vis-eyebrow { font-size: 14px; letter-spacing: .4em; opacity: .85; }
.yg-vis-txt h2 { margin: 20px 0 0; font-size: 38px; line-height: 1.3; font-weight: 300; color: #fff; }
.yg-vis-sub { margin-top: 20px !important; font-size: 15px; opacity: .85; }

/* 원형 인트로: 가운데 원이 커지며 화면이 열린다 */
.yg-intro { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.yg-intro-circle { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; box-shadow: 0 0 0 200vmax var(--yg-ink); transition: transform 1.6s cubic-bezier(.7,0,.2,1); }
.yg-intro-logo { position: relative; display: flex; flex-direction: column; align-items: center; color: #fff; font-size: 34px; font-weight: 500; letter-spacing: .25em; transition: opacity .6s ease; }
.yg-intro-logo span { margin-top: 6px; font-size: 13px; letter-spacing: .6em; opacity: .8; }
.yg-vis.is-open .yg-intro-circle { transform: scale(14); }
.yg-vis.is-open .yg-intro-logo { opacity: 0; }
.yg-vis.is-skip .yg-intro { display: none; }

.yg-quick { position: absolute; right: 20px; bottom: 90px; z-index: 6; display: flex; flex-direction: column; gap: 10px; }
.yg-quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--yg-ink); font-size: 12px; transition: transform .3s, background .3s; }
.yg-quick a i { font-size: 20px; color: var(--yg-green); }
.yg-quick a:hover { transform: scale(1.06); background: #fff; }
.yg-badge { position: absolute; left: 20px; bottom: 36px; z-index: 6; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.5); border-radius: 30px; color: #fff !important; font-size: 13px; backdrop-filter: blur(6px); }
.yg-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #9fd18b; box-shadow: 0 0 0 0 rgba(159,209,139,.7); animation: yg-pulse 1.8s infinite; }
@keyframes yg-pulse { 70% { box-shadow: 0 0 0 10px rgba(159,209,139,0); } 100% { box-shadow: 0 0 0 0 rgba(159,209,139,0); } }
.yg-vis-pager { position: absolute; right: 20px; bottom: 40px; z-index: 6; display: flex; align-items: center; gap: 12px; color: #fff; font-size: 13px; }
.yg-vis-pager b { font-weight: 500; }
.yg-vis-pager em { font-style: normal; opacity: .6; }
.yg-vis-bar { position: relative; width: 80px; height: 1px; background: rgba(255,255,255,.35); overflow: hidden; }
.yg-vis-bar i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #fff; }
.yg-vis-bar i.is-run { width: 100%; transition: width 5s linear; }

/* ---------- ABOUT ---------- */
.yg-about { padding: 120px 0; background: #fff; }
.yg-about .yg-tit { text-align: center; }
.yg-about .yg-lead { text-align: center; max-width: 900px; margin-left: auto !important; margin-right: auto !important; }
.yg-about-img { margin-top: 64px; aspect-ratio: 16 / 9; border-radius: 0 0 120px 0; background: center/cover no-repeat; }

/* ---------- DESIGN ---------- */
.yg-design { padding: 100px 0 120px; background: var(--yg-cream); overflow: hidden; }
.yg-design-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.yg-arrows, .yg-service-nav { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--yg-ink); }
.yg-arrows button, .yg-service-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(15,23,24,.25); background: none; color: inherit; font-size: 18px; transition: background .3s, color .3s; }
.yg-arrows button:hover { background: var(--yg-ink); color: #fff; }
.yg-arrows b, .yg-service-nav b { font-weight: 500; }
.yg-design-track, .yg-fac-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.yg-design-track::-webkit-scrollbar, .yg-fac-track::-webkit-scrollbar { display: none; }
.yg-design-card { position: relative; flex: 0 0 82%; scroll-snap-align: start; }
.yg-design-img { aspect-ratio: 3 / 4; background: center/cover no-repeat; }
.yg-design-hover { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; background: linear-gradient(to top, rgba(15,23,24,.85), rgba(15,23,24,.15)); color: #fff; opacity: 0; transition: opacity .5s; }
.yg-design-card:hover .yg-design-hover, .yg-design-card:focus-within .yg-design-hover { opacity: 1; }
.yg-design-hover .t1 { font-size: 20px; font-weight: 500; }
.yg-design-hover .t2 { margin-top: 8px !important; font-size: 14px; letter-spacing: .15em; opacity: .75; }
.yg-design-hover .t3 { margin-top: 16px !important; font-size: 14px; line-height: 1.8; opacity: .85; }
.yg-design-name { margin-top: 18px !important; font-size: 18px; color: var(--yg-ink); }

/* ---------- FOREST LIFE ---------- */
.yg-life { padding: 120px 0; background: var(--yg-ink); }
.yg-life .yg-big { color: #fff; }
.yg-life-head { text-align: center; margin-bottom: 56px; }
.yg-life-panels { display: grid; gap: 20px; }
.yg-life-panel { position: relative; display: block; min-height: 420px; overflow: hidden; color: #fff !important; }
.yg-life-bg { position: absolute; inset: 0; background: center/cover no-repeat; transition: transform 1.2s ease; }
.yg-life-panel:before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(15,23,24,.85), rgba(15,23,24,.1) 60%); }
.yg-life-panel:hover .yg-life-bg { transform: scale(1.06); }
.yg-life-box { position: absolute; left: 28px; right: 28px; bottom: 32px; z-index: 2; display: flex; flex-direction: column; gap: 14px; }
.yg-life-box strong { font-size: 26px; font-weight: 400; letter-spacing: .04em; }
.yg-life-box span { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.8); }
.yg-life-box em { font-style: normal; font-size: 13px; letter-spacing: .2em; border-bottom: 1px solid rgba(255,255,255,.6); align-self: flex-start; padding-bottom: 4px; }

/* ---------- FACILITY ---------- */
.yg-facility { padding: 120px 0; background: #fff; overflow: hidden; }
.yg-fac-track { align-items: flex-end; padding: 0 20px 8px; }
.yg-fac { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.yg-fac span { display: block; margin-bottom: 10px; font-size: 14px; color: var(--yg-green); }
.yg-fac div { background: center/cover no-repeat; }
.yg-fac.s1 div { width: 180px; height: 180px; }
.yg-fac.s2 div { width: 260px; height: 330px; border-radius: 0 0 90px 0; }
.yg-fac.s3 div { width: 260px; height: 330px; border-radius: 130px 130px 0 0; }
.yg-fac figcaption { margin-top: 14px; font-size: 16px; color: var(--yg-ink); }

/* ---------- SERVICE ---------- */
.yg-service { position: relative; display: grid; background: var(--yg-ink); color: #fff; }
.yg-service-imgs { position: relative; min-height: 360px; overflow: hidden; }
.yg-service-imgs div { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transform: scale(1.05); transition: opacity 1s ease, transform 1.4s ease; }
.yg-service-imgs div.is-active { opacity: 1; transform: none; }
.yg-service-txt { padding: 64px 20px 72px; display: flex; flex-direction: column; }
.yg-service-head .yg-big { color: #fff; margin: 0; }
.yg-service-slide { display: none; margin-top: 48px; }
.yg-service-slide.is-active { display: block; animation: yg-fade .8s ease both; }
.yg-service-slide .num { font-size: 15px; color: #9fd18b; }
.yg-service-slide .t1 { margin-top: 10px !important; font-size: 28px; letter-spacing: .04em; }
.yg-service-slide .t2 { margin-top: 10px !important; font-size: 18px; color: rgba(255,255,255,.9); }
.yg-service-slide .t3 { margin-top: 20px !important; max-width: 520px; font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.7); }
.yg-service-nav { margin-top: 48px; color: #fff; }
.yg-service-nav button { border-color: rgba(255,255,255,.35); }
.yg-service-nav button:hover { background: #fff; color: var(--yg-ink); }
.yg-more { display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; margin-left: auto; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); color: #fff !important; font-size: 13px; letter-spacing: .15em; text-align: center; line-height: 1.4; transition: background .3s, color .3s, transform .2s; }
.yg-more:hover { background: #fff; color: var(--yg-ink) !important; }
@keyframes yg-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- CG ---------- */
.yg-cg { padding: 120px 0 60px; background: #fff; }
.yg-cg-logo { display: flex; flex-direction: column; align-items: center; font-size: 44px; font-weight: 500; letter-spacing: .2em; color: var(--yg-ink); }
.yg-cg-logo span { margin-top: 6px; font-size: 15px; letter-spacing: .6em; color: var(--yg-green); }
.yg-cg-row { display: grid; gap: 32px; margin-top: 56px; align-items: center; }
.yg-cg-img { aspect-ratio: 16 / 10; border-radius: 160px 0 0 0; background: center/cover no-repeat; }
.yg-cg-txt { font-size: 22px; line-height: 1.6; font-weight: 500; color: var(--yg-ink); }

/* ---------- CONTACT ---------- */
.yg-contact { padding: 60px 0 120px; background: #fff; }
.yg-contact-grid { display: grid; gap: 40px; }
.yg-contact-list { margin-top: 24px !important; }
.yg-contact-list li { padding: 22px 0; border-top: 1px solid rgba(15,23,24,.12); }
.yg-contact-list strong { display: block; font-size: 17px; color: var(--yg-ink); font-weight: 600; }
.yg-contact-list p { margin-top: 6px !important; font-size: 15px; color: var(--yg-mute); }
.yg-contact-links { display: flex; gap: 8px; margin-top: 12px; }
.yg-contact-links a { padding: 6px 14px; border: 1px solid rgba(15,23,24,.2); border-radius: 20px; font-size: 13px; color: var(--yg-ink) !important; transition: background .3s, color .3s; }
.yg-contact-links a:hover { background: var(--yg-ink); color: #fff !important; }
.yg-contact-tel { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font-family: 'Jost', sans-serif; font-size: 30px; color: var(--yg-ink) !important; }
.yg-contact-map { overflow: hidden; border-radius: 0 0 80px 0; background: #e9ece6; }
.yg-contact-map iframe { display: block; width: 100%; height: 360px; border: 0; }

/* ---------- POPUP ---------- */
.yg-popup { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.yg-popup[hidden] { display: none; }
.yg-popup-dim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.yg-popup-box { position: relative; width: 100%; max-width: 420px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.yg-popup-x { position: absolute; top: -36px; right: 0; background: none; border: 0; color: #fff; font-size: 13px; }
.yg-popup-img { position: relative; height: 200px; background: center/cover no-repeat; }
.yg-popup-img span { position: absolute; left: 24px; bottom: 16px; font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: .3em; color: #fff; }
.yg-popup-body { padding: 24px 24px 20px; }
.yg-popup-body h3 { margin: 0; font-size: 22px; font-weight: 600; color: #0f1718; }
.yg-popup-body p { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: #555; }
.yg-popup-cta { display: block; margin-top: 20px; height: 46px; line-height: 46px; text-align: center; background: #0f1718; color: #fff !important; font-size: 14px; }
.yg-popup-foot { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 24px; border-top: 1px solid rgba(0,0,0,.1); font-size: 13px; color: #555; cursor: pointer; }

/* ---------- 반응형 ---------- */
@media (min-width: 768px) {
	.yg-wrap { padding: 0 40px; }
	.yg-big { font-size: 56px; }
	.yg-lead { font-size: 17.28px; }
	.yg-sub { font-size: 24px; }
	.yg-vis-txt h2 { font-size: 64px; }
	.yg-vis-sub { font-size: 18px; }
	.yg-quick { right: 60px; bottom: 120px; }
	.yg-quick a { width: 92px; height: 92px; font-size: 13px; }
	.yg-badge { left: 60px; bottom: 50px; }
	.yg-vis-pager { right: 60px; bottom: 56px; }
	.yg-design-card { flex-basis: calc((100% - 40px) / 3); }
	.yg-life-panels { grid-template-columns: 1fr 1fr; }
	.yg-life-panel { min-height: 560px; }
	.yg-life-box { left: 48px; right: 48px; bottom: 48px; }
	.yg-life-box strong { font-size: 34px; }
	.yg-fac-track { padding: 0 40px 8px; gap: 28px; }
	.yg-fac.s1 div { width: 214px; height: 214px; }
	.yg-fac.s2 div, .yg-fac.s3 div { width: 354px; height: 450px; }
	.yg-fac.s2 div { border-radius: 0 0 100px 0; }
	.yg-fac.s3 div { border-radius: 177px 177px 0 0; }
	.yg-service { grid-template-columns: 1fr 1fr; min-height: 100vh; }
	.yg-service-imgs { min-height: 100%; }
	.yg-service-txt { padding: 120px 80px; justify-content: center; }
	.yg-cg-row { grid-template-columns: 1.4fr 1fr; gap: 80px; }
	.yg-cg-txt { font-size: 30px; }
	.yg-contact-grid { grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: center; }
	.yg-contact-map iframe { height: 460px; }
}
@media (min-width: 1200px) {
	.yg-big { font-size: 66.24px; }
	.yg-wrap { padding: 0 60px; }
	.yg-fac-track { padding: 0 60px 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.yg-blur { opacity: 1; filter: none; transform: none; transition: none; }
	.yg-intro { display: none; }
	.yg-vis-txt { opacity: 1; transform: translateY(-50%); transition: none; }
	.yg-vis-bg, .yg-service-imgs div { transition: none; }
	.yg-badge-dot { animation: none; }
}