@charset "utf-8";
/* 주민배심원제 운영 — 페이지 전용 CSS (탭 · 인포테이블 · 운영절차) */

/* ===== 공통 변수 ===== */
:root{
	--jy-navy:#0f2740;
	--jy-blue:#164e97;
	--jy-blue-d:#0f4d93;
	--jy-line:#e5ebf3;
	--jy-txt:#4a5a6e;
	--jy-glass:rgba(255,255,255,.72);
	--jy-glass-bd:rgba(255,255,255,.9);
	--jy-glass-sh:0 1.6rem 4rem -1.6rem rgba(20,50,90,.18), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ===== 섹션 간격 ===== */
.jy_sec + .jy_sec{margin-top:9rem;}

/* ===== 알약형 탭 (보류 — 미노출) ===== */
.jy_subtab{display:none; flex-wrap:wrap; gap:1rem; margin-bottom:4rem;}
.jy_pill_tab{display:inline-flex; align-items:center; height:5rem; padding:0 2.8rem; border-radius:2.5rem;
	background:rgba(255,255,255,.6); border:1px solid rgba(22,78,151,.16);
	font-size:1.7rem; font-weight:600; letter-spacing:-.03rem; color:#41506a; text-decoration:none; transition:.2s;}
.jy_pill_tab.is_active{background:linear-gradient(160deg,#2f7fd1,#0f4d93); border-color:transparent; color:#fff;}
.jy_subtab a:hover{background:#fff; color:var(--jy-blue-d);}
.jy_subtab a.is_active:hover{background:linear-gradient(160deg,#2f7fd1,#0f4d93); color:#fff;}

/* ===== 전체 폭 탭 ===== */
.jy_fulltab{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.4rem; margin-bottom:4.8rem;
	padding:.6rem; border-radius:1.4rem; background:#fff; border:1px solid rgba(22,78,151,.14);
	box-shadow:0 1.2rem 3rem -1.8rem rgba(20,50,90,.25);}
.jy_fulltab_a{display:flex; align-items:center; justify-content:center; height:5.6rem; border-radius:1rem;
	font-size:1.8rem; font-weight:600; letter-spacing:-.04rem; color:#41506a; text-decoration:none; transition:.2s;}
.jy_fulltab_a.is_active{background:linear-gradient(160deg,#2f7fd1,#0f4d93); color:#fff;
	box-shadow:0 .8rem 2rem -1rem rgba(15,77,147,.55);}
.jy_fulltab_a:not(.is_on):not(.is_active):hover{background:#fff; color:var(--jy-blue-d);}

/* ===== 운영개요 인포테이블 ===== */
.jy_infotbl{display:grid; grid-template-columns:minmax(11rem,15rem) minmax(0,1fr) minmax(11rem,15rem) minmax(0,1fr); overflow:hidden; border-radius:1.6rem;
	background:rgba(255,255,255,.78); border:1px solid var(--jy-glass-bd);
	backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
	box-shadow:var(--jy-glass-sh);}
.jy_infotbl dt,.jy_infotbl dd{display:flex; align-items:center; padding:2rem 3.2rem; line-height:1.5; letter-spacing:-.03rem;}
.jy_infotbl dt{background:#eef4fb; font-size:1.7rem; font-weight:700; color:#1b3453; border-right:1px solid #ccd6e3;}
.jy_infotbl dd{flex-wrap:wrap; gap:0 1rem; font-size:1.75rem; color:#41506a; border-right:1px solid #ccd6e3;}
.jy_infotbl dt:nth-of-type(n+3),.jy_infotbl dd:nth-of-type(n+3){border-top: 1px solid #ccd6e3;}
.jy_infotbl dd:last-of-type{grid-column:2 / -1;}
.jy_note{font-size:1.55rem; color:#8093a8;}
.jy_infotbl dd:nth-of-type(2n) {
  border-right: none;
}
.jy_infotbl dd:last-of-type {
  grid-column: 2 / -1;
  border-right: none;
}

/* ===== 운영절차 플로우 ===== */
.jy_flow{display:grid; grid-template-columns:minmax(0,1fr) 7.6rem minmax(0,1fr) 7.6rem minmax(0,1fr);
	align-items:stretch; gap:4rem 0;}

/* 순차 등장 (좌→우 스텝 순서) */
.jy_flow > *{transition-delay:0s !important;}
.jy_flow > *:nth-child(2){transition-delay:.12s !important;}
.jy_flow > *:nth-child(3){transition-delay:.2s !important;}
.jy_flow > *:nth-child(4){transition-delay:.32s !important;}
.jy_flow > *:nth-child(5){transition-delay:.4s !important;}
.jy_flow > *:nth-child(6){transition-delay:.52s !important;}
.jy_flow > *:nth-child(7){transition-delay:.6s !important;}
.jy_flow > *:nth-child(8){transition-delay:.72s !important;}
.jy_flow > *:nth-child(9){transition-delay:.8s !important;}

/* 단계 카드 */
.jy_step{display:flex; flex-direction:column; padding:3rem 3.2rem 3.2rem; border-radius:1.8rem;
	background:var(--jy-glass); border:1px solid var(--jy-glass-bd);
	backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
	box-shadow:var(--jy-glass-sh);}
.jy_step.is_primary{background:linear-gradient(160deg,#2f7fd1,#0f4d93); border-color:rgba(255,255,255,.28);
	box-shadow:0 1.8rem 4.4rem -1.8rem rgba(15,77,147,.72), inset 0 1px 0 rgba(255,255,255,.3);}

/* STEP 배지 */
.jy_step_no{display:flex; justify-content:center;}
.jy_step_no span{display:inline-flex; align-items:center; justify-content:center; height:3rem; padding:0 1.6rem;
	border-radius:1.5rem; background:#fff; border:1px solid rgba(26,95,180,.28);
	font-size:1.4rem; font-weight:700; letter-spacing:.02em; color:var(--jy-blue);}
.jy_step.is_primary .jy_step_no span{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55); color:#fff;}

/* 제목 · 일자 */
.jy_step_tit{margin-top:1.6rem; font-family:'YuhanKimberlyPureunSup','Pretendard Variable',sans-serif;
	font-size:2.2rem; font-weight:700; letter-spacing:-.06rem; line-height:1.3; text-align:center; color:var(--jy-navy);}
.jy_step_date{margin-top:.8rem; font-size:1.85rem; font-weight:700; letter-spacing:-.03rem; text-align:center; color:var(--jy-blue);}
.jy_step.is_primary .jy_step_tit,.jy_step.is_primary .jy_step_date{color:#fff;}

/* 음각 구분선 : 어두운 홈 1px + 하이라이트 1px, 양끝 페이드 */
.jy_step_line{display:block; height:2px; margin:2rem 0 1.8rem;
	background-image:
		linear-gradient(90deg,rgba(18,37,61,0),rgba(18,37,61,.2) 12%,rgba(18,37,61,.2) 88%,rgba(18,37,61,0)),
		linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95) 12%,rgba(255,255,255,.95) 88%,rgba(255,255,255,0));
	background-size:100% 1px,100% 1px; background-position:0 0,0 100%; background-repeat:no-repeat;}
.jy_step.is_primary .jy_step_line{
	background-image:
		linear-gradient(90deg,rgba(3,27,56,0),rgba(3,27,56,.55) 12%,rgba(3,27,56,.55) 88%,rgba(3,27,56,0)),
		linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.34) 12%,rgba(255,255,255,.34) 88%,rgba(255,255,255,0));}

/* 단계 리스트 */
.jy_step_list{display:flex; flex-direction:column; gap:.9rem;}
.jy_step_li{position:relative; padding-left:1.3rem; font-size:1.65rem; line-height:1.6; letter-spacing:-.03rem;
	color:var(--jy-txt); word-break:keep-all;}
.jy_step_li::before{content:''; position:absolute; left:0; top:.72em; width:.4rem; height:.4rem; border-radius:50%; background:#8ab0dd;}
.jy_step.is_primary .jy_step_li{font-weight:600; color:rgba(255,255,255,.94);}
.jy_step.is_primary .jy_step_li::before{background:rgba(255,255,255,.9);}

/* 화살표 */
.jy_arrow{position:relative; z-index:2; display:grid; place-items:center;}
.jy_arrow_mo{display:none;}
.jy_arrow_ic{display:grid; place-items:center; width:3.2rem; height:3.2rem; border-radius:50%;
	background:rgba(255,255,255,.7); border:1px solid var(--jy-glass-bd); box-shadow:0 .8rem 2rem -1rem rgba(20,50,90,.3);}
.jy_arrow_tri{width:0; height:0; margin-left:.2rem;
	border-top:.5rem solid transparent; border-bottom:.5rem solid transparent; border-left:.72rem solid #1a5fb4;}

/* ===== 반응형 : 1440 / 1280 / 1024 / 768 / 480 ===== */
@media (max-width:1440px){
	.jy_infotbl{grid-template-columns:minmax(10rem,14rem) minmax(0,1fr) minmax(10rem,14rem) minmax(0,1fr);}
	.jy_flow{grid-template-columns:minmax(0,1fr) 6rem minmax(0,1fr) 6rem minmax(0,1fr);}
}
@media (max-width:1280px){
	.jy_infotbl dt,.jy_infotbl dd{padding:1.8rem 2.4rem;}
	.jy_flow{grid-template-columns:minmax(0,1fr) 5rem minmax(0,1fr) 5rem minmax(0,1fr); gap:3.2rem 0;}
	.jy_step{padding:2.6rem 2.4rem 2.8rem;}
	.jy_step_tit{font-size:2.05rem;}
	.jy_step_date{font-size:1.75rem;}
	.jy_step_li{font-size:1.6rem;}
}
@media (max-width:1024px){
	.jy_flow{grid-template-columns:minmax(0,1fr) 4.4rem minmax(0,1fr); gap:2.4rem 0;}
	.jy_arrow{display:grid;}
	/* 줄바꿈 지점 화살표는 숨김 (모바일에서는 다시 노출) */
	.jy_flow > :nth-child(4),.jy_flow > :nth-child(8){display:none;}
	.jy_flow > :nth-child(9){grid-column:1/-1;}
	.jy_step{padding:2.8rem 2.8rem 3rem;}
	.jy_step_tit{font-size:2.2rem;}
	.jy_step_date{font-size:1.85rem;}
	.jy_step_li{font-size:1.65rem;}
	.jy_infotbl{grid-template-columns:minmax(12rem,18rem) minmax(0,1fr);}
	.jy_infotbl dt:nth-of-type(even):not(:last-of-type),
	.jy_infotbl dd:nth-of-type(even):not(:last-of-type){border-left:0;}
	.jy_infotbl dt:not(:first-of-type),.jy_infotbl dd:not(:nth-of-type(1)){border-top:1px solid var(--jy-line);}
	.jy_infotbl dd:last-of-type{grid-column:2;}
}
@media (max-width:768px){
	.jy_sec + .jy_sec{margin-top:6.4rem;}
	.jy_pill_tab{height:4.6rem; padding:0 2.2rem; font-size:1.6rem;}
	.jy_fulltab{margin-bottom:3.6rem;}
	.jy_fulltab_a{height:5rem; font-size:1.65rem;}
	.jy_flow{grid-template-columns:minmax(0,1fr); gap:0;}
	.jy_flow > :nth-child(4),.jy_flow > :nth-child(8),.jy_flow > :nth-child(9){grid-column:auto;}
	.jy_arrow,.jy_arrow_mo,.jy_flow > :nth-child(4),.jy_flow > :nth-child(8){display:grid; padding:1.2rem 0;}
	.jy_arrow_tri{margin-left:0; transform:rotate(90deg);}
	.jy_infotbl{display:block;}
	.jy_infotbl dt{display:block; grid-column:auto; border-top:1px solid var(--jy-line); border-right:0; padding:1.4rem 2rem;}
	.jy_infotbl dt:first-of-type{border-top:0;}
	.jy_infotbl dd{display:block; grid-column:auto; border-top:0; border-right:0; padding:1.4rem 2rem 2rem;}
	.jy_step{padding:2.4rem 2.4rem 2.6rem;}
	.jy_step_tit{font-size:2rem;}
	.jy_step_date{font-size:1.75rem;}
}
@media (max-width:480px){
	.jy_infotbl dt{font-size:1.6rem;}
	.jy_infotbl dd{font-size:1.65rem;}
	.jy_step{padding:2.2rem 2rem 2.4rem;}
	.jy_step_tit{font-size:1.9rem;}
	.jy_step_date{font-size:1.7rem;}
	.jy_step_li{font-size:1.55rem;}
}