@charset "utf-8";
/* greeting - 시장 인사말 : 사진 + 본문 2단, 장식 없는 정돈된 레이아웃 */

.gr_page{--ink:#111820; --ink2:#4a5560; --pt:#0B4F9E;}

/* 배경 : 비전/매니페스토 페이지와 동일 재질 */
.gr_page.sub_content{background:linear-gradient(180deg,#fbfcfe 0%,#f4f7fb 55%,#f7fafb 100%);
	padding:2rem 0 14rem; overflow:visible;}
.gr_page .bg_dot{opacity:.3; background-image:radial-gradient(rgba(18,37,61,.09) 1.2px,transparent 1.2px); background-size:26px 26px;}
.gr_page .bg_dot,.gr_page .sp_aur{max-width:100%;}
.gr_page .sp_aur{position:absolute; border-radius:50%; pointer-events:none; filter:blur(11rem); opacity:.5; z-index:0;}
.gr_page .sp_aur.a1{width:52rem; height:52rem; left:0; top:-6rem; background:radial-gradient(circle,rgba(43,167,172,.20),transparent 70%);}
.gr_page .sp_aur.a2{width:56rem; height:56rem; right:0; top:26%; background:radial-gradient(circle,rgba(26,95,180,.14),transparent 70%);}
.gr_page .sp_aur.a3{width:52rem; height:52rem; right:6%; bottom:0; background:radial-gradient(circle,rgba(43,167,172,.14),transparent 70%);}
.wrap:has(.gr_page){overflow:visible;}

/* 상단 유틸 */
.gr_page .head_util{display:flex; gap:.8rem;}
.gr_page .util_btn{display:grid; place-items:center; width:4.6rem; height:4.6rem; border-radius:50%; color:#1c3a5e;
	background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9);
	backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background .25s,transform .25s,color .25s;}
.gr_page .util_btn:hover{background:#fff; color:var(--pt); transform:translateY(-2px);}
.gr_page .util_btn svg{width:1.9rem; height:1.9rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

/* 2단 */
.greeting-section{display:grid;grid-template-columns:40rem minmax(0,1fr);gap: 0 8rem;align-items:start;}
/* 좌측 인물 컬럼 : 본문(.greeting-body) 끝까지만 따라오다 멈춤 */
.mayor-col{align-self:stretch;}
.mayor-photo{position:sticky; top:11rem; display:block; width:100%; aspect-ratio:41/56; margin:0; overflow:hidden;
	border-radius:2rem;
	background:linear-gradient(155deg,rgba(255,255,255,.62) 0%,rgba(224,235,248,.42) 48%,rgba(11,79,158,.14) 100%);
	backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
	border:1px solid rgba(255,255,255,.72);
	box-shadow:0 3.2rem 7rem -2.4rem rgba(15,39,64,.30), 0 .2rem 1rem rgba(15,39,64,.06),
		inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.35);}
.mayor-photo::before{
	content:'';
	position:absolute;
	left: -25%;
	top: -28%;
	width:78%;
	height:70%;
	z-index:1;
	pointer-events:none;
	border-radius:50%;
	transform:rotate(-12deg);
	background:radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
	}
.mayor-photo img{object-fit:contain;  z-index:2;}
.mayor-photo .ph_txt{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.3rem; color:#7f8b96; white-space:nowrap;}


/* 본문 : 넓어진 컬럼 기준으로 재정돈 */
.greeting-body{max-width:none; padding-top:3.2rem;}
.greeting-section{
	padding:6.4rem 8rem 5.6rem;
	border-radius: 2.6rem;
	background:rgba(255,255,255,.6);
	border:1px solid rgba(255,255,255,.85);
	backdrop-filter:blur(34px) saturate(150%);
	-webkit-backdrop-filter:blur(34px) saturate(150%);
	box-shadow:0 3rem 7rem rgba(20,50,90,.14), inset 0 1px 0 rgba(255,255,255,.9);
	}
.gr_title{position:relative; padding-top:5rem; font-family:'YuhanKimberlyPureunSup',"Pretendard Variable",sans-serif;
	font-size:4.6rem; font-weight:800; line-height:1.34;
	letter-spacing:-.2rem; color:var(--ink); word-break:keep-all; margin-bottom:3.2rem;}
.gr_title::before{content:'“'; position:absolute; left:-.6rem; top:-1.4rem; font-family:Georgia,'Times New Roman',serif;
	font-size:11rem; line-height:1; pointer-events:none;
	background:linear-gradient(150deg,#1a5fb4 0%,#3d86d6 55%,#8fc3ea 100%);
	-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
	filter:drop-shadow(0 2px 4px rgba(26,95,180,.28));}
.gr_intro{margin:0 0 4.4rem; max-width:66rem; font-size:2.4rem; font-weight:700; line-height:1.68; letter-spacing:-.055rem;
	color:var(--ink); word-break:keep-all;}
.greeting-body .para{margin:0 0 2.2rem; font-size:1.8rem; font-weight:400; line-height:1.95; letter-spacing:-.02em;
	color:#000; word-break:keep-all; text-wrap:pretty;}
.greeting-body .para:last-of-type{margin-bottom:0;}
.greeting-body .hl{font-style:normal; font-weight:700; color:var(--pt);}

/* 서명 */
.greeting-section{position:relative; z-index:2;}
.signature{grid-column:2/-1; display:flex; align-items:baseline; justify-content:flex-start; gap:1.6rem;
	width:100%; margin-top:5.6rem; padding-top:3.2rem; border-top:1px solid rgba(18,37,61,.10);}
.signature .sg_role{font-size:1.7rem; font-weight:600; letter-spacing:-.02em; color:#68737e; white-space:nowrap;}
.signature .signature-img-slot{display:inline-flex; align-items:flex-end; justify-content:flex-start; height:5.6rem;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.2rem; color:#9aa5af;}
.signature .signature-img-slot img{max-width:19rem; max-height:100%; object-fit:contain; object-position:0 100%;}

@media (max-width:1600px){
	.greeting-section{grid-template-columns:40rem minmax(0,1fr);gap: 0 6rem;padding:5.8rem 7rem 5.2rem;}
}
@media (max-width:1350px){
	.greeting-section{grid-template-columns:30rem minmax(0,1fr); gap:0 4.8rem; padding:5rem 6rem 4.6rem;}
	.gr_title{font-size:4.2rem;}
	.greeting-body{padding-top:2.4rem;}
	.signature{margin-top:5rem; padding-top:3rem;}
	.gr_intro{max-width:56rem; margin-bottom:3.6rem;}
	.greeting-body .para{font-size:1.8rem;}
}
@media (max-width:1024px){
	.greeting-section{grid-template-columns:25rem minmax(0,1fr); gap:0 4rem; padding:4.4rem 5rem 4rem; border-radius:3rem;}
	.gr_title{font-size:4rem;}
	.mayor-photo{top:9rem;}
	.signature{margin-top:4.6rem;}
	.gr_intro{max-width:none;}
}
@media (max-width:900px){
	.gr_page.sub_content{padding:6rem 0 10rem;}
	.greeting-section{grid-template-columns:1fr; gap:4.4rem 0; padding:4.4rem 3.8rem 4rem; border-radius:2.4rem;}
	.mayor-col{display:block; width:100%; max-width:38rem; margin:0; justify-self:center; align-self:auto;}
	.mayor-photo{display:block; position:relative; top:auto; aspect-ratio:1/1.1; border-radius:1.6rem;}
	.greeting-body{text-align:center;}
	.gr_title::before{left:50%; transform:translateX(-50%);}
	.gr_intro{margin-left:auto; margin-right:auto;}
	.greeting-body .para{text-align:left;}
	.mayor-photo img{display:block; position: absolute; top: 55%; left: 0; transform: translate(0, -50%);}
	.greeting-body{padding-top:0;}
	.gr_title{font-size:3.8rem; padding-top:4rem; margin-bottom:2.6rem;}
	.gr_title::before{font-size:8.2rem; top:-1.2rem;}
	.gr_intro{font-size:2.25rem;margin-bottom:2.8rem;padding-bottom: 2.8rem;border-bottom: 1px #d9d9d9 dotted;}
	.greeting-body .para{font-size:1.8rem; line-height:1.95; margin-bottom:2rem;}
	.signature{grid-column:1/-1; margin-top:0; padding-top:3rem; gap:1.4rem;}
	.signature .signature-img-slot{height:5.2rem;}
	.signature .signature-img-slot img{max-width:17rem;}
}
@media (max-width:600px){
	.gr_page.sub_content{padding:4.4rem 0 8rem;}
	.gr_page .util_btn{width:4rem; height:4rem;}
	.gr_page .util_btn svg{width:1.8rem; height:1.8rem;}
	.greeting-section{gap:3.6rem 0; padding:3.8rem 3.2rem 3.6rem; border-radius:1.8rem;}
	.mayor-col{display:block; width:100%; max-width:100%; justify-self:start;}
	.greeting-body{text-align:left;}
	.gr_intro{margin-left:0; margin-right:0;}
	.mayor-photo{display:block; aspect-ratio:1/1; border-radius:1.4rem;}
	.gr_title{font-size:3.2rem; padding-top:3.4rem; letter-spacing:-.14rem; margin-bottom:2.2rem;}
	.gr_title::before{font-size:6.6rem; top:-.9rem; left:-.4rem; transform:none;}
	.gr_intro{font-size:2.1rem; line-height:1.7; margin-bottom:2.4rem;}
	.gr_intro br{display:none;}
	.greeting-body .para{font-size:1.8rem; line-height:1.95; margin-bottom:1.9rem;}
	.signature{flex-direction:column; align-items:flex-start; gap:.8rem; margin-top:0; padding-top:2.6rem;}
	.signature .sg_role{font-size:1.6rem;}
	.signature .signature-img-slot{height:4.6rem;}
	.signature .signature-img-slot img{max-width:15rem;}
}
@media (max-width:400px){
	.signature{margin-top:0; padding-top:2.4rem;}
	.greeting-body .para{font-size:1.8rem;}
}

/* 진입 리빌 */
.gr_page .vs_rv{opacity:0; transform:translateY(2.4rem);
	transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);}
.gr_page .vs_rv.is_in{opacity:1; transform:none;}
.gr_page .greeting-body.vs_rv{transition-delay:.12s;}
.gr_page .signature.vs_rv{transition-delay:.06s;}
@media (prefers-reduced-motion:reduce){
	.gr_page .vs_rv{opacity:1; transform:none; transition:none;}
}