@charset "utf-8";
/* 하위메뉴 탭(.category-tabs/.tab_select) 스타일은 css/tabs.css 공통 파일에서 관리한다 */
/* vision3 - 비전과 목표 (시정비전 + 시정목표 리스트) : 이 파일 하나만 연결하면 됩니다 */

.vs_page{--ink3:#12253d; --ink3_sub:#3d5573; --pt:#1a5fb4; --pt2:#2ba7ac; --line:#e1e5ea;}

/* ── 배경 : 취임사 페이지와 동일 재질 ─────────────── */
.vs_page.sub_content{background:linear-gradient(180deg,#fbfcfe 0%,#f4f7fb 55%,#f7fafb 100%); padding:2rem 0 14rem;}
.vs_page .bg_dot{opacity:.3; background-image:radial-gradient(rgba(18,37,61,.09) 1.2px,transparent 1.2px); background-size:26px 26px;}
.vs_page .sp_aur{position:absolute; border-radius:50%; pointer-events:none; filter:blur(11rem); opacity:.55; z-index:0;}
.vs_page .sp_aur.a1{width:62rem; height:62rem; left:-16rem; top:-14rem; background:radial-gradient(circle,rgba(43,167,172,.22),transparent 70%);}
.vs_page .sp_aur.a2{width:70rem; height:70rem; right:-20rem; top:20%; background:radial-gradient(circle,rgba(26,95,180,.16),transparent 70%);}
.vs_page .sp_aur.a3{width:64rem; height:64rem; right:2%; bottom:-10rem; background:radial-gradient(circle,rgba(43,167,172,.16),transparent 70%);}
/* 큰 화면에서 html font-size가 커지므로 base.css의 --fx로 보정 → 콘텐츠 폭 항상 1600px */
/* .sub_in 폭·좌우 여백은 sub.css 공통 규칙을 그대로 사용한다 (개별 지정 금지) */

/* ── 상단 유틸 ─────────────────────── */
.vs_page .head_util{display:flex; gap:.8rem;}
.vs_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;}
.vs_page .util_btn:hover{background:#fff; color:var(--pt); transform:translateY(-2px);}
.vs_page .util_btn svg{width:2rem; height:2rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

/* ── 콘텐츠 폭 ─────────────────────── */
.vs_area{position:relative; z-index:2; width:100%; min-width:0; margin:0 auto;}

/* ── 시정비전 배너 ─────────────────── */
.vision-section{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center;
	padding:7.2rem 6rem 7.6rem; border-radius:3.2rem;
	background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(234,242,251,.62) 52%,rgba(232,247,248,.66));
	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);}
/* 은은한 라인 그래픽 */
.vision-section::before{content:''; position:absolute; inset:0; pointer-events:none;
	background:
		repeating-linear-gradient(90deg,rgba(26,95,180,.05) 0 1px,transparent 1px 12rem),
		linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 40%);
	-webkit-mask-image:radial-gradient(120% 90% at 50% 50%,#000 20%,transparent 78%);
	mask-image:radial-gradient(120% 90% at 50% 50%,#000 20%,transparent 78%);}
.vision-section > *{position:relative; z-index:1;}

.vision-section .badge-label{display:inline-flex; align-items:center; height:3.6rem; padding:0 2rem; border-radius:2rem;
	background:linear-gradient(180deg,rgba(50,120,205,.98),rgba(22,78,151,.98)); color:#fff;
	font-size:1.5rem; font-weight:700; letter-spacing:.02em; line-height:1;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1rem 2.2rem -1.2rem rgba(26,95,180,.75);}
.vision-section .vision-eng{margin-top:2rem; font-family:"Pretendard Variable","Pretendard",sans-serif; font-size:1.4rem; font-weight:600;
	letter-spacing:.24em; text-transform:uppercase; color:#3d6fae;}
.vision-section .vision-slogan{margin-top:2.2rem; font-family:'YuhanKimberlyPureunSup',"Pretendard Variable",sans-serif;
	font-size:5.2rem; font-weight:700; line-height:1.34; letter-spacing:-.055em; color:#0f2740; text-wrap:pretty;}
.vision-section .vision-slogan .highlight{background:linear-gradient(100deg,var(--pt),var(--pt2));
	-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.vision-section .vision-rule{width:6rem; height:3px; margin-top:3rem; border-radius:2px;
	background:linear-gradient(90deg,var(--pt),var(--pt2));}

/* ── 시정목표 ──────────────────────── */
.goal-section{margin-top:8rem;}
.goal-section .goal-head{display:flex; align-items:flex-end; justify-content:space-between; gap:3rem;
	padding-bottom:2rem; margin-bottom:3.2rem; border-bottom:1px solid rgba(18,37,61,.14);}
.goal-section .gh_tit{display:flex; align-items:center; gap:1.1rem; font-family:'YuhanKimberlyPureunSup',"Pretendard Variable",sans-serif;
	font-size:3.2rem; font-weight:700; letter-spacing:-.08rem; line-height:1.25; color:#0f2740;}
.goal-section .gh_tit::before{content:''; width:1rem; height:1rem; border-radius:50%;
	background:linear-gradient(140deg,#54cdd4,#1a5fb4); box-shadow:0 0 1.6rem rgba(43,167,172,.55);}
.goal-section .gh_count{display:flex; align-items:baseline; gap:.6rem; padding-bottom:.6rem;
	font-family:"Pretendard Variable","Pretendard",sans-serif; font-size:1.4rem; color:#5b7a9c;}
.goal-section .gh_count strong{font-size:2.8rem; font-weight:700; letter-spacing:-.1rem; color:var(--pt);}
.goal-section .gh_count span{font-family:"Pretendard Variable",sans-serif;}

/* ── 진입 효과 ─────────────────────── */
.vs_page .vs_rv{opacity:0; transform:translateY(2.4rem);
	transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .3s, background .3s;}
.vs_page .vs_rv.is_in{opacity:1; transform:none;}
.vs_page .goal-card.vs_rv:nth-child(2n){transition-delay:.08s;}
@media (prefers-reduced-motion:reduce){
	.vs_page .vs_rv{opacity:1; transform:none; transition:none;}
}

/* ── 시정목표 : 가로 리스트형 ───────────── */
 .goal-list{display:flex; flex-direction:column; gap:2rem; list-style:none;}
 .goal-row{display:grid; grid-template-columns:34rem minmax(0,1fr) 14rem; align-items:center; gap:3.2rem;
	padding:2rem; border-radius:2rem;
	background:rgba(255,255,255,.74); border:1px solid rgba(255,255,255,.9);
	backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
	box-shadow:0 1.6rem 4rem -1.8rem rgba(20,50,90,.18), inset 0 1px 0 rgba(255,255,255,.9);
	transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .3s, background .3s;}
 .goal-row:hover{transform:translateY(-.4rem); background:rgba(255,255,255,.92); border-color:rgba(26,95,180,.32);
	box-shadow:0 2.6rem 5.6rem -2rem rgba(20,50,90,.26), inset 0 1px 0 #fff;}

/* 썸네일 (플레이스홀더) */
 .goal-row .gr_thumb{position:relative; display:block; align-self:center; width:100%; border-radius:1.4rem; overflow:hidden; aspect-ratio:16/10; background:#e7eef7;
	background-image:repeating-linear-gradient(135deg,rgba(26,95,180,.07) 0 8px,rgba(26,95,180,0) 8px 16px);}
 .goal-row .gr_thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
 .goal-row .gr_thumb .ph_txt{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.3rem; letter-spacing:.02em; color:#5c748e; white-space:nowrap;}

/* 본문 */
 .goal-row .gr_body{min-width:0; padding:1.2rem 0;}
 .goal-row .gr_no{display:inline-flex; align-items:center; gap:.9rem; height:3.2rem; padding:0 1.4rem; border-radius:1.6rem;
	background:linear-gradient(140deg,var(--c1),var(--c2)); color:#fff;
	box-shadow:0 1rem 2.2rem -1.2rem rgba(20,50,90,.55), inset 0 1px 0 rgba(255,255,255,.35);}
 .goal-row .gr_no .lb{font-size:1.3rem; font-weight:600; letter-spacing:-.03rem; line-height:1; color:rgba(255,255,255,.92);}
 .goal-row .gr_no .no{font-family:"Pretendard Variable","Pretendard",sans-serif; font-size:1.6rem; font-weight:700; line-height:1; letter-spacing:.02em;}
 .goal-row .gr_tit{margin-top:1.6rem; font-family:'YuhanKimberlyPureunSup',"Pretendard Variable",sans-serif;
	font-size:2.8rem; font-weight:700; line-height:1.4; letter-spacing:-.06rem; color:#0f4278; word-break:keep-all; text-wrap:pretty;}
 .goal-row .gr_mean{display:flex; align-items:flex-start; gap:1.2rem; margin-top:1.4rem;}
 .goal-row .gr_mean .mean-badge{flex:0 0 auto; margin-top:.3rem; padding:.5rem 1rem; border-radius:.6rem;
	background:#eaf2fb; border:1px solid rgba(26,95,180,.12);
	font-size:1.3rem; font-weight:700; line-height:1; letter-spacing:-.02rem; color:var(--pt);}
 .goal-row .gr_mean p{font-size:1.7rem; line-height:1.7; letter-spacing:-.03rem; color:#2b3b4d; word-break:keep-all; text-wrap:pretty;}

/* 자세히 보기 : 우측 전용 컬럼 (아이콘 + 라벨 세로 정렬) */
 .goal-row .gr_more{align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
	border-left:1px solid rgba(18,37,61,.09); border-radius:0 1.2rem 1.2rem 0;}
 .goal-row .gr_more .ar{display:grid; place-items:center; width:5.2rem; height:5.2rem; border-radius:50%;
	background:#eaf2fb; border:1px solid rgba(26,95,180,.14);
	font-family:"Pretendard Variable","Pretendard",sans-serif; font-size:1.9rem; line-height:1; color:var(--pt);
	transition:background .3s, color .3s, border-color .3s, transform .3s, box-shadow .3s;}
 .goal-row .gr_more .tx{font-size:1.5rem; font-weight:600; letter-spacing:-.04rem; line-height:1; color:#2e4a6b; white-space:nowrap; transition:color .25s;}
 .goal-row:hover .gr_more .ar{background:linear-gradient(160deg,#2f7fd1,#0f4d93); border-color:transparent; color:#fff;
	transform:translateY(-.2rem); box-shadow:0 1.4rem 2.8rem -1.2rem rgba(15,77,147,.75);}
 .goal-row:hover .gr_more .tx{color:var(--pt);}
 .goal-row .gr_more:focus-visible{outline:2px solid var(--pt); outline-offset:2px;}

/* 목표별 포인트 톤 */
 .goal-row.g1{--c1:#1a5fb4; --c2:#2f7fd1;}
 .goal-row.g2{--c1:#1a5fb4; --c2:#2f7fd1;}
 .goal-row.g3{--c1:#1a5fb4; --c2:#2f7fd1;}
 .goal-row.g4{--c1:#1a5fb4; --c2:#2f7fd1;}
 .goal-row.g5{--c1:#1a5fb4; --c2:#2f7fd1;}
 .goal-row.g6{--c1:#1a5fb4; --c2:#2f7fd1;}
 /*
 .goal-row.g2{--c1:#1f6fb2; --c2:#2ba7ac;}
 .goal-row.g3{--c1:#2b8fb4; --c2:#54cdd4;}
 .goal-row.g4{--c1:#2a6bc0; --c2:#4f9bdc;}
 .goal-row.g5{--c1:#1f5aa8; --c2:#3f86c9;}
 .goal-row.g6{--c1:#2b9aab; --c2:#5cc6c9;}
 */

@media (max-width:1350px){
	 .goal-row{grid-template-columns:28rem minmax(0,1fr) 12rem; gap:2.4rem;}
	 .goal-row .gr_tit{font-size:2.4rem;}
}

/* ── 텍스트 가독성 보정 : 회색 톤 → 진한 잉크 톤 ───── */
 .goal-section .gh_count{color:#2e4a6b;}
 .goal-section .gh_tit{color:#0b2138;}
 .vision-section .vision-slogan{color:#0b2138;}
 .goal-row .gr_mean .mean-badge{background:#e2edfa; border-color:rgba(26,95,180,.24); color:#0f4278;}

/* ── 시정비전 배너 : 격자 패턴 제거 + 슬로건 이미지 ───── */
 .vision-section::before{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 40%);}
 .vision-section .vision-slogan{align-self:stretch; display:flex; justify-content:center; width:100%; margin-top:3.2rem;}
 .vision-section .vs_slogan_img{display:block;width: 95%;max-width:calc(92rem * var(--fx));height:auto;margin:0 auto;}

/* ── 시정비전 헤드 : 시정목표 헤드와 동일 스타일 ───── */
 .vision-block{margin-top:0;}
 .vision-block .goal-head{margin-bottom:2.8rem;}
 .vision-section{padding-top:6rem; padding-bottom:6rem;}

/* ══ 반응형 ══════════════════════════════ */
 .vision-section .vs_slogan_pic{display:block; width:100%; max-width:calc(92rem * var(--fx));}

@media (max-width:1440px){
	 .goal-row{grid-template-columns:30rem minmax(0,1fr) 13rem;}
}
@media (max-width:1280px){
	 .vision-section{padding:5.2rem 4rem;}
	 .goal-row .gr_tit{font-size:2.3rem;}
}
@media (max-width:1024px){
	 .goal-section .goal-head{margin-bottom:2.4rem;}

	/* 목표 리스트 : 세로 스택 */
	 .goal-row{grid-template-columns:minmax(0,1fr); align-items:start; gap:2rem; padding:1.8rem;}
	 .goal-row .gr_thumb{aspect-ratio:16/7;}
	 .goal-row .gr_body{padding:0 .4rem;}
	 .goal-row .gr_mean .mean-badge{display:none;}
	 .goal-row .gr_mean{gap:0;}
	 .goal-row .gr_more{align-self:stretch; flex-direction:row; align-items:center; justify-content:center; gap:.9rem;
		height:4.8rem; margin-top:.4rem; padding:0 1.8rem; border-left:0; border-top:0;
		border-radius:2.4rem; background:#fff; border:1px solid rgba(26,95,180,.3);
		transition:background .25s, border-color .25s;}
	 .goal-row .gr_more .ar{display:none;}
	 .goal-row .gr_more .tx{font-size:1.7rem; font-weight:700; color:var(--pt);}
	 .goal-row:hover .gr_more{background:linear-gradient(160deg,#2f7fd1,#0f4d93); border-color:transparent;
		box-shadow:0 1.4rem 2.8rem -1.4rem rgba(15,77,147,.7);}
	 .goal-row:hover .gr_more .ar{display:none;}
	 .goal-row:hover .gr_more .tx{color:#fff;}
}
@media (max-width:850px){
	 .vision-section{padding:4.4rem 3rem;}
	 .goal-row .gr_tit{font-size:2.2rem; margin-top:1.4rem;}
	 .goal-row .gr_mean p{font-size:1.6rem;}
}
@media (max-width:768px){
	 .vision-section{padding:3.6rem 2.4rem; border-radius:2rem;}
	 .vision-section .vision-slogan{margin-top:2.4rem;}
	 .vision-section .vs_slogan_pic{max-width:calc(46rem * var(--fx)); padding:0 2.4rem;}
	 .vision-section .vs_slogan_pic .vs_slogan_img{max-width: 80%;margin:0 auto;}
	 .goal-section{margin-top:6rem;}
	 .goal-row{padding:1.6rem; border-radius:1.6rem; gap:1.8rem;}
	 .goal-row .gr_thumb{aspect-ratio:16/9;}
	 .goal-row .gr_tit{font-size:2.1rem;}
}
@media (max-width:500px){
	 .vision-section{padding:3rem 1.8rem;}
	 .goal-row{padding:1.4rem; gap:1.6rem;}
	 .goal-row .gr_no{height:3rem; padding:0 1.2rem;}
	 .goal-row .gr_no .lb{font-size:1.2rem;}
	 .goal-row .gr_tit{font-size:2rem; line-height:1.45;}
	 .goal-row .gr_mean{gap:1rem;}
	 .goal-row .gr_mean p{font-size:1.55rem;}
	 .goal-row .gr_more{height:4.4rem;}
}
@media (max-width:390px){
	 .vision-section .vs_slogan_pic .vs_slogan_img{max-width:95%;}
	 .goal-row .gr_mean{flex-direction:column; gap:.8rem;}
	 .goal-row .gr_mean .mean-badge{margin-top:0;}
	 .goal-row .gr_tit{font-size:1.9rem;}
}

/* ══ 1024px 이하 : 목표 카드 2열 → 600px 이하 1열 ══ */
@media (max-width:1024px){
	 .goal-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.8rem;}
	 .goal-row{gap:1.6rem; padding:1.6rem;}
	 .goal-row .gr_thumb{aspect-ratio:16/10;}
	 .goal-row .gr_body{display:flex; flex-direction:column; align-items:flex-start;}
	 .goal-row .gr_no{align-self:flex-start;}
	 .goal-row .gr_tit{margin-top:1.2rem; font-size:2.1rem;}
	 .goal-row .gr_mean p{font-size:1.55rem; line-height:1.65;}
	 .goal-row .gr_more{height:4.6rem; margin-top:.2rem;}
	 .goal-row .gr_more .tx{font-size:1.6rem;}
}
@media (max-width:600px){
	 .goal-list{grid-template-columns:minmax(0,1fr); gap:1.6rem;}
	 .goal-row .gr_thumb{aspect-ratio:16/9;}
	 .goal-row .gr_tit{font-size:2rem;}
}

/* ══ 폰트 크기 하한 점검 : 시각적으로 작아지는 구간 보정 ══ */
@media (max-width:1350px){
	 .goal-row .gr_tit{font-size:2.5rem;}
	 .goal-row .gr_mean p{font-size:1.7rem;}
}
@media (max-width:1280px){
	 .goal-row .gr_tit{font-size:2.4rem;}
}
@media (max-width:1024px){
	 .goal-row .gr_no .lb{font-size:1.4rem;}
	 .goal-row .gr_no .no{font-size:1.7rem;}
	 .goal-row .gr_tit{font-size:2.3rem;}
	 .goal-row .gr_mean p{font-size:1.7rem; line-height:1.7;}
	 .goal-row .gr_more .tx{font-size:1.7rem;}
	 .goal-row .gr_thumb .ph_txt{font-size:1.4rem;}
	 .goal-section .gh_tit{font-size:3rem;}
}
@media (max-width:768px){
	 .goal-row .gr_tit{font-size:2.25rem;}
	 .goal-section .gh_tit{font-size:2.8rem;}
	 .goal-section .gh_count strong{font-size:2.6rem;}
	 .goal-section .gh_count{font-size:1.5rem;}
}
@media (max-width:600px){
	 .goal-row .gr_tit{font-size:2.2rem;}
	 .goal-row .gr_mean p{font-size:1.7rem;}
}
@media (max-width:500px){
	 .goal-row .gr_no{height:3.2rem; padding:0 1.4rem;}
	 .goal-row .gr_no .lb{font-size:1.35rem;}
	 .goal-row .gr_tit{font-size:2.15rem;}
	 .goal-row .gr_more{height:4.8rem;}
	 .goal-row .gr_more .tx{font-size:1.7rem;}
	 .goal-section .gh_tit{font-size:2.6rem;}
}
@media (max-width:390px){
	 .goal-row .gr_tit{font-size:2.05rem;}
	 .goal-row .gr_mean p{font-size:1.65rem;}
}

/* ══ 850px 이하 : 셀렉트 → 아이콘 상단 + 라벨 하단 타일형 탭 ══ */

/* ══ 600px 이하 : 셀렉트 형태로 교체 ══════════ */

/* ══ 좌우 여백 : sub.css 공통 .sub_content .sub_in 규칙 사용 ══ */

/* ══ 시정비전 배너 : 슬로건 마진 제거 → 배너 안쪽 여백으로 높이 제어 ══ */
 .vision-section .vision-slogan{margin:0;}
 .vision-section{padding:5.6rem 6rem;}
@media (max-width:1280px){  .vision-section{padding:5rem 4.4rem;} }
@media (max-width:1024px){  .vision-section{padding:4.6rem 4rem;} }
@media (max-width:850px){  .vision-section{padding:4.2rem 3rem;} }
@media (max-width:768px){  .vision-section{padding:3.8rem 2rem;} }
@media (max-width:500px){  .vision-section{padding:3.2rem 1.6rem;} }

/* ══ 시정비전 배너 : 최종 비례 (슬로건 폭 ↓ · 상하 여백 ↑) ══ */
 .vision-section{justify-content:center; padding:7.2rem 8rem; min-height:calc(28rem * var(--fx));}
 .vision-section .vs_slogan_pic{max-width:calc(78rem * var(--fx)); padding:0;}
@media (max-width:1280px){
	 .vision-section{padding:6.4rem 6rem; min-height:26rem;}
	 .vision-section .vs_slogan_pic{max-width:68rem;}
}
@media (max-width:1024px){
	 .vision-section{padding:5.6rem 5rem; min-height:23rem;}
	 .vision-section .vs_slogan_pic{max-width:60rem;}
}
@media (max-width:850px){
	 .vision-section{padding:5rem 4rem; min-height:20rem;}
	 .vision-section .vs_slogan_pic{max-width:52rem;}
}
@media (max-width:768px){
	 .vision-section{padding:4.6rem 3.2rem; min-height:18rem;}
	 .vision-section .vs_slogan_pic{max-width:40rem;}
}
@media (max-width:500px){
	 .vision-section{padding:4rem 2.4rem; min-height:15.6rem;}
	 .vision-section .vs_slogan_pic{max-width:30rem;}
}

/* ══ 시정비전 배너 : 슬로건은 안쪽 폭 가득, 상하 여백으로 높이 확보 ══ */
 .vision-section{min-height:0;padding: 5.5rem 6rem;}
 .vision-section .vs_slogan_pic{max-width:calc(112rem * var(--fx)); padding:0;}
@media (max-width:1280px){
	 .vision-section{padding: 5.5rem 5rem;}
	 .vision-section .vs_slogan_pic{max-width:none;}
}
@media (max-width:1024px){  .vision-section{padding: 4.5rem 4.4rem;} }
@media (max-width:850px){  .vision-section{padding: 4.4rem 3.6rem;} }
@media (max-width:768px){
	 .vision-section{padding: 4rem 3rem;}
	 .vision-section .vs_slogan_pic{max-width:none;}
}
@media (max-width:500px){  .vision-section{padding:2.4rem 2.2rem;} }