@charset "utf-8";
/* promise - 공약개요 (공약 총괄도표 + 실천과제 상세)
   · 페이지 공통 배경/섹션헤드/진입효과는 css/manifesto.css(.mf_page)를 그대로 사용한다
   · 이 파일은 총괄도표 카드 / 확대 레이어 / 실천과제 아코디언·표 전용 규칙만 관리한다
   · 1rem = 10px */

.pv_wrap{position:relative;}

/* ── 총괄도표 카드 ─────────────────── */
.pv_card{padding:1.6rem 3.2rem; border-radius:2.4rem;
	background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.92);
	backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
	box-shadow:0 1.8rem 4.4rem -1.8rem rgba(20,50,90,.2), inset 0 1px 0 rgba(255,255,255,.9);}
.pv_img{display:block; width:100%; max-width:120rem; height:auto; margin:0 auto;}

/* 크게 보기 버튼 : 이미지가 작아지는 구간에서만 스크립트가 노출한다 */
.pv_zoom_wrap{display:none; justify-content:center; margin-top:1.2rem;}
.pv_zoom_wrap.is_on{display:flex;}
.pv_zoom_open{display:inline-flex; align-items:center; gap:.9rem; height:4.8rem; padding:0 2.2rem; border-radius:2.4rem;
	background:rgba(255,255,255,.8); border:1px solid rgba(26,95,180,.28); color:var(--pt,#1a5fb4);
	font-size:1.6rem; font-weight:700; letter-spacing:-.03rem; cursor:pointer;
	box-shadow:0 .8rem 2rem -1rem rgba(20,50,90,.24); transition:background .25s, transform .25s;}
.pv_zoom_open:hover,.pv_zoom_open:focus-visible{background:#fff; transform:translateY(-.2rem);}
.pv_zoom_open_ic{display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%;
	background:rgba(26,95,180,.12); font-size:1.4rem; line-height:1;}

/* ── 총괄도표 확대 레이어 ──────────── */
.pv_layer{position:fixed; inset:0; z-index:9999; display:none; padding:3.2rem;
	background:rgba(9,18,32,.62); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);}
.pv_layer.is_open{display:block;}
.pv_layer[hidden]{display:none;}
.pv_layer.is_open[hidden]{display:block;}
.pv_layer_box{display:flex; flex-direction:column; width:100%; max-width:140rem; height:100%; margin:0 auto; overflow:hidden;
	border-radius:2.2rem; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.7);
	box-shadow:0 3.2rem 8rem -2.4rem rgba(6,16,32,.6);}

.pv_layer_head{display:flex; align-items:center; justify-content:flex-end; gap:.8rem; flex:0 0 auto;
	padding:1.4rem 1.8rem; border-bottom:1px solid rgba(18,37,61,.1); background:rgba(255,255,255,.6);}
.pv_zoom_ctrl{display:flex; align-items:center; gap:.4rem; padding:.4rem; border-radius:1.6rem;
	background:rgba(26,95,180,.07); border:1px solid rgba(26,95,180,.14);}
.pv_zc_btn{display:grid; place-items:center; width:3.6rem; height:3.6rem; border-radius:1.2rem;
	background:#fff; border:1px solid rgba(18,37,61,.1); color:var(--pt,#1a5fb4);
	font-size:2rem; font-weight:600; line-height:1; cursor:pointer; transition:background .2s;}
.pv_zc_btn:hover,.pv_zc_btn:focus-visible{background:#eaf1fb;}
.pv_zc_val{min-width:6rem; text-align:center; font-size:1.5rem; font-weight:700; letter-spacing:-.02rem; color:#22405f;}
.pv_zc_fit{height:4.4rem; padding:0 1.6rem; border-radius:1.4rem; background:rgba(255,255,255,.9);
	border:1px solid rgba(18,37,61,.12); color:#22405f; font-size:1.45rem; font-weight:700; letter-spacing:-.02rem;
	cursor:pointer; transition:background .2s;}
.pv_zc_fit:hover,.pv_zc_fit:focus-visible{background:#f1f5fa;}
.pv_zc_close{display:grid; place-items:center; width:4.4rem; height:4.4rem; border-radius:1.4rem;
	background:#0f2740; border:1px solid rgba(255,255,255,.14); color:#fff; font-size:2rem; line-height:1;
	cursor:pointer; transition:background .2s;}
.pv_zc_close:hover,.pv_zc_close:focus-visible{background:var(--pt,#1a5fb4); color:#fff;}

.pv_layer_view{flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; padding:2.4rem; cursor:grab;
	background:repeating-linear-gradient(135deg,rgba(18,37,61,.03) 0 12px,rgba(18,37,61,0) 12px 24px), #f6f8fb;}
.pv_layer_view.is_grabbing{cursor:grabbing;}
.pv_layer_img{display:block; width:100%; max-width:none; height:auto; margin:0 auto;
	border-radius:1.2rem; background:#fff; user-select:none; -webkit-user-drag:none;}
.pv_layer_foot{flex:0 0 auto; margin:0; padding:1.2rem 2.4rem; border-top:1px solid rgba(18,37,61,.08);
	font-size:1.4rem; font-weight:500; letter-spacing:-.02rem; color:#7b8fa5;}

/* ── 실천과제 상세 : 아코디언 ───────── */
.pv_head_acc{margin-top:9rem;}
.pv_acc_group{display:flex; flex-direction:column; gap:1.4rem;}
.pv_acc{overflow:hidden; border-radius:1.8rem; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.92);
	backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
	box-shadow:0 1.2rem 3.2rem -1.8rem rgba(20,50,90,.18), inset 0 1px 0 rgba(255,255,255,.9);
	scroll-margin-top:12rem; transition:border-color .3s, box-shadow .3s;}
.pv_acc.is_open{border-color:rgba(26,95,180,.3);}

.pv_acc_btn{display:flex; align-items:center; justify-content:space-between; gap:2rem; width:100%;
	padding:2.6rem 3.2rem; background:transparent; border:0; text-align:left; cursor:pointer;}
.pv_acc_btn:focus-visible{outline:2px solid var(--pt,#1a5fb4); outline-offset:-4px;}
.pv_acc_ttl{display:flex; align-items:baseline; gap:1.4rem; min-width:0;}
.pv_acc_no{font-family:'YuhanKimberlyPureunSup',"Pretendard Variable",sans-serif;
	font-size:2rem; font-weight:700; color:var(--pt,#1a5fb4);}
.pv_acc_nm{font-family:'YuhanKimberlyPureunSup',"Pretendard Variable",sans-serif;
	font-size:2.2rem; font-weight:700; letter-spacing:-.06rem; color:#0f2740; word-break:keep-all;}
.pv_acc_cnt{font-size:1.5rem; font-weight:600; color:#7b94b1;}

.pv_acc_ic{position:relative; flex:0 0 auto; width:3.4rem; height:3.4rem; border-radius:50%;
	background:rgba(26,95,180,.08); transition:background .25s;}
.pv_acc_ic::before,.pv_acc_ic::after{content:''; position:absolute; left:50%; top:50%; width:1.4rem; height:2px;
	margin:-1px 0 0 -.7rem; border-radius:1px; background:var(--pt,#1a5fb4); transition:transform .3s cubic-bezier(.16,1,.3,1);}
.pv_acc_ic::after{transform:rotate(90deg);}
.pv_acc.is_open .pv_acc_ic{background:rgba(26,95,180,.14);}
.pv_acc.is_open .pv_acc_ic::after{transform:rotate(0deg);}

.pv_acc_body{display:none; padding:0 3.2rem 3.2rem;}
.pv_acc.is_open > .pv_acc_body{display:block;}
.pv_acc_body.is_anim{display:block; overflow:hidden; transition:max-height .5s cubic-bezier(.16,1,.3,1);}
@media (prefers-reduced-motion:reduce){
	.pv_acc_body.is_anim{transition:none;}
}

/* 가로 스크롤 안내 */
.pv_hint{display:none; align-items:center; gap:.8rem; margin:0 0 1.2rem; padding:.9rem 1.4rem; border-radius:1rem;
	background:rgba(26,95,180,.07); border:1px solid rgba(26,95,180,.16);
	font-size:1.45rem; font-weight:600; letter-spacing:-.02rem; color:var(--pt,#1a5fb4);}
.pv_hint.is_on{display:flex;}

/* ── 실천과제 표 ───────────────────── */
.pv_scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.pv_table{width:100%; min-width:60rem; border-collapse:collapse; table-layout:fixed;}
.pv_table thead tr{background:rgba(26,95,180,.06);}
.pv_table th{padding:1.6rem 1.2rem; border-top:1px solid rgba(26,95,180,.28); border-bottom:1px solid rgba(18,37,61,.12);
	font-size:1.55rem; font-weight:700; color:#22405f;}
.pv_table .pv_th_num{width:11%; min-width:9rem; border-right:1px solid rgba(18,37,61,.12);}
.pv_table .pv_th_task{border-right:1px solid rgba(18,37,61,.12);}
.pv_table .pv_th_dept{width:22%; min-width:16rem;}

.pv_table td{border-bottom:1px solid rgba(18,37,61,.08);}
.pv_table tbody tr{transition:background .2s;}
.pv_table tbody tr:hover{background:rgba(255,255,255,.9);}
.pv_num{padding:1.5rem 1rem; text-align:center; white-space:nowrap;
	font-size:1.5rem; font-weight:600; color:#22405f; border-right:1px solid rgba(18,37,61,.08);}
.pv_task{padding:1.5rem 2rem; font-size:1.65rem; font-weight:500; line-height:1.6; letter-spacing:-.03rem; color:#2f4a68;
	word-break:keep-all; text-wrap:pretty; border-right:1px solid rgba(18,37,61,.08);}
.pv_dept{padding:1.5rem 1rem; text-align:center; font-size:1.5rem; font-weight:500; line-height:1.55; color:#56718f;
	word-break:keep-all;}

/* ══ 반응형 ─ 1535 / 1440 / 1350 / 1280 / 1024 / 850 / 768 / 500 / 390 ══════ */
@media (max-width:1535px){
	.pv_img{max-width:112rem;}
}
@media (max-width:1440px){
	.pv_head_acc{margin-top:8rem;}
	.pv_acc_btn{padding:2.4rem 2.8rem;}
	.pv_acc_body{padding:0 2.8rem 2.8rem;}
}
@media (max-width:1350px){
	.pv_card{padding:1.6rem 2.8rem;}
	.pv_acc_nm{font-size:2.1rem;}
}
@media (max-width:1280px){
	.pv_head_acc{margin-top:7rem;}
	.pv_card{padding:1.6rem 2.4rem;}
	.pv_table .pv_th_dept{width:24%;}
}
@media (max-width:1024px){
	.pv_head_acc{margin-top:6.4rem;}
	.pv_acc{border-radius:1.6rem;}
	.pv_acc_btn{padding:2.2rem 2.4rem;}
	.pv_acc_body{padding:0 2.4rem 2.6rem;}
	.pv_acc_no{font-size:1.9rem;}
	.pv_acc_nm{font-size:2rem;}
	.pv_layer{padding:2.4rem;}
	.pv_layer_view{padding:1.8rem;}
}
@media (max-width:850px){
	.pv_card{padding:1.4rem 1.8rem;}
	.pv_acc_ttl{gap:1.1rem;}
	.pv_table th{font-size:1.5rem;}
}
@media (max-width:768px){
	.pv_head_acc{margin-top:5rem;}
	.pv_card{padding:1.4rem;}
	.pv_acc_btn{padding:2rem 1.8rem; gap:1.2rem;}
	.pv_acc_body{padding:0 1.6rem 2.2rem;}
	.pv_acc_ttl{flex-wrap:wrap; gap:.4rem 1rem;}
	.pv_acc_nm{font-size:1.85rem;}
	.pv_acc_cnt{font-size:1.45rem;}
	.pv_acc_ic{width:3.2rem; height:3.2rem;}
	.pv_layer{padding:1.2rem;}
	.pv_layer_box{border-radius:1.6rem;}
	.pv_layer_head{padding:1.2rem;}
	.pv_layer_view{padding:1.2rem;}
	.pv_layer_foot{padding:1rem 1.4rem; font-size:1.35rem;}
	.pv_zc_fit{padding:0 1.2rem;}
	.pv_table .pv_th_num{width:14%;}
	.pv_task{padding:1.4rem 1.4rem; font-size:1.6rem;}
}
@media (max-width:500px){
	.pv_zoom_open{width:100%; justify-content:center; font-size:1.55rem;}
	.pv_acc_btn{padding:1.8rem 1.4rem;}
	.pv_acc_body{padding:0 1.2rem 2rem;}
	.pv_acc_no{font-size:1.75rem;}
	.pv_acc_nm{font-size:1.8rem;}
	.pv_hint{font-size:1.4rem; padding:.8rem 1.2rem;}
	.pv_zc_val{min-width:5rem; font-size:1.4rem;}
	.pv_zc_btn{width:3.4rem; height:3.4rem;}
	.pv_zc_close{width:4rem; height:4rem;}
}
@media (max-width:390px){
	.pv_acc_nm{font-size:1.72rem;}
	.pv_task{font-size:1.55rem;}
	.pv_num,.pv_dept{font-size:1.45rem;}
	.pv_zc_fit{display:none;}
}