@charset "utf-8";

@import url(../../core/css/storyCms.css);

/********************************
 만족도조사
 *******************************/
.stf_box {margin-top:50px; border:1px solid #d5d5d5;}
.stf_t_box {position:relative; padding:10px 20px;}
.stf_t_box .stf_txt {position:relative; margin-bottom:0; padding-left:18px; display:inline-block;}
.stf_t_box .stf_txt strong {display:inline-block; margin:0 5px; color:#333;}
.stf_t_box .stf_txt span {display:inline-block; margin:0 5px;}
.stf_t_box .stf_txt span .m_hidden {display:inline; margin:0;}
.stf_t_box .stf_txt span em {color:#157883; letter-spacing:0;}
.stf_t_box .stf_txt:before {content:''; display:inline-block; position:absolute; top:3px; left:0; width:18px; height:18px; background-image:url(../images/sub_ir.png); background-repeat:no-repeat;}
.stf_t_box .stf_txt.stf_l:before {background-position:-379px 0;}
.stf_t_box .stf_txt.stf_r:before {background-position:-398px 0;}
.stf_line {position:relative; display:inline-block; padding-left:20px; margin-left:15px;}
.stf_line:before {content:''; display:inline-block; position:absolute; top:3px; left:0; width:6px; height:18px; background:url(../images/sub_ir.png) -417px 0 no-repeat;}

.stf_srchbox {padding:15px 30px; background-color:#f7f7f7;}
.stf_srchbox .stf_fix {position:relative;}
.stf_srchbox .stf_fix .stf_srchinner {display:table; position:relative; width:75%; padding-left:90px; height:76px;}
.stf_srchbox .stf_fix .stf_srchinner:before {content:''; display:inline-block; position:absolute; top:0; left:0; width:76px; height:76px; background:url(../images/sub_ir.png) -275px -27px no-repeat;}
.stf_srchbox .stf_fix .stf_srchinner dl {display:table-cell; vertical-align:middle;}
.stf_srchbox .stf_fix .stf_srchinner dt {color:#333;}
.stf_srchbox .stf_fix .stf_srchinner dd {display:inline-block; margin:2px;}
.stf_srchbox .stf_fix .stf_srchinner dd.user_comt {display:block; width:100%; margin:2px;}
.stf_srchbox .stf_fix .stf_srchinner dd.user_comt label {display:block; margin:0; padding:0;}
.stf_srchbox .stf_fix .stf_srchinner dd.user_comt input {display:block; width:100%; height:40px; line-height:40px; border:1px solid #ddd; background-color:#fff;}
.stf_srchbox .stf_fix .stf_srchinner input {margin-right:3px; vertical-align:middle;}
.stf_srchbox .stf_fix .srf_btn {display:inline-block; position:absolute; right:0; top:50%; margin-top:-20px; width:140px; height:40px; font-weight:500; color:#fff; border-radius:5px; background-color:#333;}
.stf_srchbox .stf_fix .srf_btn:hover, .stf_srchbox .stf_fix .srf_btn:active, .stf_srchbox .stf_fix .srf_btn:focus {background-color:#157883; transition: background-color 0.1s linear;}

.stf_t_box + .stf_line + .stf_srchbox {border-top:1px solid #e0e2e3;}

fieldset {margin:0; padding:0; border:0;}
legend {overflow:hidden; position:absolute; top:-99999px; width:0; height:0; line-height:0; text-indent:-99999px;}

/* ============================================================
   울산광역시 열린시장실 — sub.css (서브 비주얼 / 서브 본문 틀 / 진입효과)
   ============================================================ */

/* sub_visual - 시작 */
.sub_visual{position:relative; z-index:3; width:100%; height:56.8rem;}
/* 드롭다운이 섹션 바닥선에서 잘리지 않도록 클리핑은 배경 래퍼에만 적용 */
.sub_visual .sv_bg{overflow:hidden; position:absolute; inset:0;}
.sub_visual .sv_bg img{width:100%; height:100%; object-fit:cover; object-position:center 32%; transform:scale(1.02); backface-visibility:hidden; will-change:transform;}
.sub_visual .sv_fade,
.sub_visual .sv_dim{pointer-events:none;}
.sub_visual .sv_dim{position:absolute; inset:0; opacity:.5; background:linear-gradient(100deg,rgba(6,11,22,.86) 0%,rgba(7,13,25,.6) 44%,rgba(8,14,26,.24) 100%);}
.sub_visual .sv_fade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,11,22,.5) 0%,rgba(6,11,22,0) 30%,rgba(6,11,22,.62) 100%);}

.sub_visual .sv_inner{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; width:100%; max-width:var(--container); margin:0 auto; padding:0 0 4.6rem;}
.sub_visual .sv_head{display:flex; align-items:flex-end; justify-content:space-between; gap:4.8rem; padding:0 var(--gutter); color:#fff;}

/* sv_txt : 메인비주얼(mv_sub/mv_tit) 타입 스케일과 위계를 공유한다
   레이블(1.5rem, 자간 +) → 제목(5.4rem, 자간 −) → 설명(1.8rem) 3단 위계 */
.sub_visual .sv_txt{max-width:72rem;}
.sub_visual .sv_eng{position:relative; display:inline-block; padding-bottom:1.1rem; font-size:1.25rem; font-weight:700; letter-spacing:.32rem; line-height:1; color:#a8c7ef; text-transform:uppercase;}
/* 기본(A) : 포인트에서 사라지는 얼상선 */
.sub_visual .sv_eng.eng_line::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(90deg,rgba(91,155,239,.85),rgba(255,255,255,.12) 72%,transparent);}

/* B : 섹션 넘밍 — 숫자를 셼로 보여 장식 없이 리즘을 만든다 */
.sub_visual .sv_eng.eng_num{display:inline-flex; align-items:baseline; gap:1.2rem; padding-bottom:0;}
.sub_visual .sv_eng.eng_num::before{content:"04"; font-family:"PartialSansKR","Pretendard",sans-serif; font-size:2.2rem; font-weight:400; letter-spacing:0; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(168,199,239,.55);}

/* C : 오픈 반면 — 왒이 들어가는 언더라인이 아니라 글자 자체만 밝기로 대베 */
.sub_visual .sv_eng.eng_plain{padding-bottom:0; font-weight:800; color:#c9dcf7; opacity:.9;}
.sub_visual .sv_eng.eng_plain em{color:#5b9bef;}

/* D : 짧은 수직 바 — 수평선 대승 제목 문단과 간섭하지 않는다 */
.sub_visual .sv_eng.eng_bar{display:inline-flex; align-items:center; gap:1.1rem; padding-bottom:0;}
.sub_visual .sv_eng.eng_bar::before{content:""; width:2px; height:1.4rem; border-radius:1px; background:linear-gradient(180deg,#5b9bef,rgba(91,155,239,.25));}
.sub_visual .sv_eng::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(90deg,rgba(91,155,239,.85),rgba(255,255,255,.14) 70%,transparent);}
.sub_visual .sv_tit{margin-top:1.8rem; font-size:5.4rem; font-weight:800; letter-spacing:-.1rem; line-height:1.1; text-shadow:0 .4rem 2rem rgba(4,8,16,.5), 0 .1rem .3rem rgba(4,8,16,.45);}
.sub_visual .sv_desc{margin-top:1.5rem; max-width:56rem; font-size:1.8rem; font-weight:500; letter-spacing:-.03rem; line-height:1.65; color:rgba(255,255,255,.78); text-wrap:pretty;}
.sub_visual .sv_line{height:1px; margin:3.4rem var(--gutter) 0; background:linear-gradient(90deg,rgba(255,255,255,.32),rgba(255,255,255,.06));}

/* 서브 경로(뎁스) 선택 */
.sv_path{display:flex; flex-shrink:0; height:5.8rem; padding:.4rem; gap:.4rem; border-radius:2.9rem; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2rem 4rem -2.4rem rgba(0,0,0,.6);}
.sv_path .path_item{position:relative;}
.sv_path .path_btn{display:flex; align-items:center; justify-content:space-between; gap:2.2rem; height:100%; padding:0 2.2rem 0 2.6rem; border-radius:2.5rem; color:rgba(255,255,255,.9); font-size:1.65rem; font-weight:700; letter-spacing:-.02rem; transition:background-color .25s, color .25s;}
.sv_path .path_item:first-child .path_btn{width:25.8rem; background:linear-gradient(180deg,rgba(50,120,205,.98),rgba(22,78,151,.98)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1rem 2.2rem -1.2rem rgba(26,95,180,.75);}
.sv_path .path_item:last-child .path_btn{width:20rem;}
.sv_path .path_btn .arw{width:0; height:0; flex-shrink:0; border-left:.55rem solid transparent; border-right:.55rem solid transparent; border-top:.6rem solid currentColor; opacity:.8; transition:transform .3s;}
.sv_path .path_item.is_open .path_btn .arw{transform:rotate(180deg);}
.sv_path .path_btn:hover{background:rgba(255,255,255,.12);}
.sv_path .path_item:first-child .path_btn:hover{background:var(--point_dk);}

.sv_path .path_list{overflow:hidden; position:absolute; left:0; right:0; top:calc(100% + .8rem); z-index:5; max-height:0; padding:0; border-radius:1.4rem; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); box-shadow:0 1.8rem 4rem -1.4rem rgba(15,29,74,.4); opacity:0; transition:max-height .32s cubic-bezier(.16,1,.3,1), padding .32s cubic-bezier(.16,1,.3,1), opacity .22s;}
.sv_path .path_item.is_open .path_list{max-height:32rem; padding:.7rem; opacity:1;}
.sv_path .path_list a{display:flex; align-items:center; padding:1.05rem 1.6rem; border-radius:.9rem; font-size:1.6rem; font-weight:600; letter-spacing:-.02rem; color:#3a4252; white-space:nowrap; transition:color .2s, background-color .2s;}
.sv_path .path_list a:hover{color:var(--point); background:rgba(26,95,180,.07);}
.sv_path .path_list a.on{color:var(--point);}

	/* 미디어쿼리 시작 ─ 기준점 : 1440 / 1280 / 1024 / 768 / 480 / 380 */
	@media (max-width:1440px){
		.sub_visual{height:52rem;}
		.sub_visual .sv_tit{font-size:5rem;}
	}
	@media (max-width:1280px){
		.sub_visual{height:48rem;}
		.sub_visual .sv_tit{font-size:4.4rem; margin-top:1.6rem;}
		.sub_visual .sv_desc{font-size:1.75rem;}
		.sv_path{height:5.4rem;}
		.sv_path .path_item:first-child .path_btn{width:23rem;}
		.sv_path .path_item:last-child .path_btn{width:18rem;}
	}
	@media (max-width:1024px){
		.sub_visual{height:44rem;}
		.sub_visual .sv_inner{padding-bottom:4rem;}
		.sub_visual .sv_eng{font-size:1.25rem; letter-spacing:.22rem;}
		.sub_visual .sv_tit{font-size:4.2rem; margin-top:1.5rem;}
		.sub_visual .sv_desc{margin-top:1.3rem; font-size:1.7rem; line-height:1.6;}
		.sub_visual .sv_line{margin-top:2.8rem;}
		.sv_path{height:5rem;}
		.sv_path .path_btn{gap:1.4rem; padding:0 1.8rem 0 2rem; font-size:1.55rem;}
		.sv_path .path_item:first-child .path_btn{width:20rem;}
		.sv_path .path_item:last-child .path_btn{width:15.6rem;}
	}
	@media (max-width:768px){
		.sub_visual{height:auto; min-height:40rem;}
		.sub_visual .sv_inner{position:relative; inset:auto; padding:16rem 0 3.4rem;}
		/* 모바일 : 텍스트 아래로 경로 선택을 내리고 전체 폭을 쓴다 */
		.sub_visual .sv_head{flex-direction:column; align-items:stretch; gap:2.8rem;}
		/* 모바일 : 제목이 폭에 맞춰 유동 축소되어 어색한 2줄 분리를 막는다 */
		.sub_visual .sv_txt{max-width:none;}
		.sub_visual .sv_eng{margin-bottom:.2rem; font-size:1.2rem; letter-spacing:.2rem;}
		.sub_visual .sv_tit{margin-top:1.4rem; font-size:min(4rem, calc((100vw - 2 * var(--gutter)) / 5.6)); letter-spacing:-.08rem;}
		.sub_visual .sv_desc{margin-top:1.2rem; max-width:52rem; font-size:1.6rem; line-height:1.62;}
		.sub_visual .sv_line{margin-top:2.4rem;}
		.sv_path{height:5.2rem; width:100%;}
		.sv_path .path_item{flex:1; min-width:0;}
		.sv_path .path_item:first-child .path_btn,
		.sv_path .path_item:last-child .path_btn{width:100%;}
		.sv_path .path_btn{gap:1rem; padding:0 1.4rem 0 1.6rem; font-size:1.5rem;}
		.sv_path .path_btn .txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	}
	@media (max-width:480px){
		.sub_visual{min-height:36rem;}
		.sub_visual .sv_inner{padding:13rem 0 3rem;}
		.sub_visual .sv_eng{padding-bottom:.9rem; font-size:1.15rem; letter-spacing:.22rem;}
		.sub_visual .sv_tit{margin-top:1.2rem; font-size:min(3.6rem, calc((100vw - 2 * var(--gutter)) / 5.2)); letter-spacing:-.06rem;}
		.sub_visual .sv_desc{margin-top:1rem; font-size:1.5rem; line-height:1.6;}
		.sub_visual .sv_head{gap:2.2rem;}
		.sv_path{height:4.8rem;}
		.sv_path .path_btn{font-size:1.4rem;}
		.sv_path .path_list a{font-size:1.5rem;}
	}
	@media (max-width:380px){
		.sub_visual .sv_tit{font-size:min(3rem, calc((100vw - 2 * var(--gutter)) / 4.8));}
		.sub_visual .sv_desc{font-size:1.45rem;}
		.sv_path{flex-direction:column; height:auto; border-radius:1.6rem;}
		.sv_path .path_item{width:100%;}
		.sv_path .path_btn{height:4.6rem; border-radius:1.3rem;}
		.sv_path .path_list{position:static; box-shadow:none;}
	}
	/* 미디어쿼리 끝 */
/* sub_visual - 끝 */

/* 서브 상단 : 본문이 중앙 정렬이므로 비주얼도 중앙 정렬로 맞춘다 */
/* [수정] 스크림을 단일 알파값으로 정리 + 텍스트 존(상단 중앙)에만 집중시켜 사진 톤을 밝게 되살렸다 */
.sub_visual .sv_dim{opacity:1; background:radial-gradient(130% 100% at 50% 18%,rgba(6,11,22,.5) 0%,rgba(6,11,22,.14) 45%,rgba(6,11,22,.06) 65%,rgba(5,9,18,.34) 100%);}
.sub_visual .sv_fade{background:linear-gradient(180deg,rgba(6,11,22,.5) 0%,rgba(6,11,22,.05) 30%,rgba(6,11,22,0) 50%,rgba(6,11,22,.08) 68%,rgba(6,11,22,.46) 100%);}
.sub_visual{height:48rem;}
.sub_visual .sv_inner{justify-content:center; padding:9rem 0 0;}
.sub_visual .sv_head{flex-direction:column; align-items:center; gap:2.4rem; text-align:center;}
.sub_visual .sv_txt{display:flex; flex-direction:column; align-items:center; max-width:76rem;}
.sub_visual .sv_tit{margin-top:0; font-size:5.6rem; font-weight:700; letter-spacing:-.16rem; line-height:1;}
.sub_visual .sv_line{display:none;}
.sub_visual .sv_path{height:4.6rem; padding:.35rem; border-radius:2.3rem;}
.sub_visual .sv_path .path_btn{gap:1.4rem; padding:0 1.7rem 0 1.9rem; border-radius:2rem; font-size:1.45rem; font-weight:600;}
.sub_visual .sv_path .path_item:first-child .path_btn,
.sub_visual .sv_path .path_item:last-child .path_btn{width:auto; min-width:0;}
/* 경로 알약 : 메인 .sche_widget 글래스 스펙 통일(가독성 확보) + 라운드값 통일 */
.sub_visual .sv_path .path_btn,
.sub_visual .sv_path .path_item:first-of-type .path_btn,
.sub_visual .sv_path .path_item:last-child .path_btn{border-radius:2.6rem; color:#fff; background:linear-gradient(180deg,rgba(58,62,72,.62),rgba(18,19,22,.68)); -webkit-backdrop-filter:blur(2rem); backdrop-filter:blur(2rem); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.28), 0 .9rem 1.8rem -.8rem rgba(0,0,0,.55), 0 3rem 6rem -2.8rem rgba(0,0,0,.6); transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, background .3s ease;}
.sub_visual .sv_path .path_btn:hover,
.sub_visual .sv_path .path_item:first-of-type .path_btn:hover{background:linear-gradient(180deg,rgba(70,75,86,.72),rgba(20,21,25,.78)); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.3), 0 1.4rem 2.4rem -.9rem rgba(0,0,0,.6), 0 3rem 6rem -2.8rem rgba(0,0,0,.6);}
.sub_visual .sv_path .path_btn:active,
.sub_visual .sv_path .path_item:first-of-type .path_btn:active{transform:translateY(0); box-shadow:inset 0 2px 4px rgba(0,0,0,.35), 0 .6rem 1.2rem -.6rem rgba(0,0,0,.5);}
/* 라벨 시각 중앙 정렬 + 셰브론 정리 */
.sub_visual .sv_path .path_btn{align-items:center; line-height:1;}
.sub_visual .sv_path .path_btn .txt{display:block; line-height:1; transform:translateY(.05em);}
.sub_visual .sv_path .path_btn .arw{width:.72rem; height:.72rem; border:0; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; border-bottom-right-radius:1px; opacity:.85; transform:translateY(-.14rem) rotate(45deg); transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease;}
.sub_visual .sv_path .path_btn:hover .arw{opacity:1;}
.sub_visual .sv_path .path_item.is_open .path_btn .arw{transform:translateY(.14rem) rotate(225deg);}
.sub_visual .sv_path .path_list{min-width:18rem;}
/* 경로 드롭다운 : 버튼보다 넓어질 때 화면 밖으로 나가 잘리지 않게 한다 */
.sub_visual .sv_path .path_list{position:absolute; left:0; right:auto; min-width:100%; width:max-content; max-width:calc(100vw - var(--gutter, 1.6rem) * 2);}
.sub_visual .sv_path .path_item:last-of-type .path_list{left:auto; right:0;}
.sub_visual .sv_path .path_list a{font-size:1.45rem; padding:.9rem 1.4rem; font-weight:500;}
	@media (max-width:1280px){ .sub_visual{height:44rem;} .sub_visual .sv_tit{font-size:5rem;} }
	@media (max-width:1024px){ .sub_visual{height:40rem;} .sub_visual .sv_inner{padding:8rem 0 0;} .sub_visual .sv_tit{font-size:4.4rem;} .sub_visual .sv_head{gap:2.2rem;} }
	@media (max-width:768px){ .sub_visual{height:auto;} .sub_visual .sv_inner{padding:17rem 0 4.6rem;} .sub_visual .sv_head{align-items:stretch; text-align:center; gap:2.8rem;} .sub_visual .sv_txt{align-items:center; text-align:center;} .sub_visual .sv_tit{font-size:3.8rem; letter-spacing:-.1rem;} .sub_visual .sv_path .path_item:first-child .path_btn,
	.sub_visual .sv_path .path_item:last-child .path_btn{width:100%;} }
	@media (max-width:380px){ .sub_visual .sv_inner{padding:15rem 0 2.4rem;} }


/* sub_content - 시작 */
.sub_content{position:relative; z-index:2; background:#f4f6fa; padding:2rem 0 13rem; overflow-x:clip; overflow-y:visible;}
.sub_content .bg_dot{position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(24,44,74,.05) 1.3px,transparent 1.3px); background-size:24px 24px; -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 60%,transparent); mask-image:linear-gradient(180deg,transparent,#000 12%,#000 60%,transparent);}
.sub_content .bg_blur1{position:absolute; left:-16rem; top:-10rem; width:46rem; height:46rem; border-radius:50%; background:radial-gradient(circle,rgba(26,95,180,.08),transparent 68%); pointer-events:none;}
.sub_content .bg_blur2{position:absolute; right:-14rem; bottom:0; width:40rem; height:40rem; border-radius:50%; background:radial-gradient(circle,rgba(43,167,172,.08),transparent 68%); pointer-events:none;}
/* 모든 서브페이지 공통 좌우 여백 — 폭/여백은 여기 한 곳에서만 관리한다 (--container_wide, --gutter 는 base.css) */
.sub_content .sub_in{position:relative; z-index:2; width:100%; max-width:var(--container_wide); margin:0 auto; padding:0 var(--gutter);}
.sub_content .cont_ready{display:grid; place-items:center; min-height:32rem; border-radius:2rem; background:#fff; border:1px solid #e7ebf1; color:#8a93a0; font-size:1.6rem; font-weight:600; letter-spacing:-.02rem;}
	@media (max-width:1024px){ .sub_content{padding:8rem 0 10rem;} }
	@media (max-width:768px){ .sub_content{padding:6rem 0 8rem;} .sub_content .cont_ready{min-height:24rem; font-size:1.5rem;} }
/* sub_content - 끝 */


/* board_util (건수 + 검색) - 시작 */
.board_util{display:flex; align-items:end; justify-content:space-between; gap:1.6rem 3rem;}

/* 건수 : 페이징 글래스 필과 같은 재질의 캡슐로 좌측 무게를 맞춘다 */
.board_count{display:inline-flex; align-items:baseline; gap:.5rem; font-size:1.6rem; font-weight:600; letter-spacing:-.03rem; color:#8a93a0; white-space:nowrap;}
.board_count strong{font-size:1.65rem; font-weight:800; color:var(--point); font-variant-numeric:tabular-nums;}
.board_count .range{color:#a6aeba; font-weight:500;}

/* 검색 : 셀렉트 + 입력 + 버튼을 하나의 글래스 필로 */
.board_search{display:flex; align-items:center; flex-shrink:0; height:5rem; padding:.5rem .5rem .5rem 1.8rem; border-radius:1.4rem; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1.6rem 3.4rem -2rem rgba(20,40,80,.35); transition:border-color .22s, box-shadow .22s, background-color .22s;}
.board_search:focus-within{background:rgba(255,255,255,.8); border-color:rgba(157,189,230,.9); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1.6rem 3.4rem -1.8rem rgba(26,95,180,.45);}
.board_search .sel_wrap{position:relative; display:flex; align-items:center; flex-shrink:0;}
.board_search .sel_wrap select{appearance:none; height:2.8rem; padding:0 2rem 0 0; border:0; background:transparent; font-family:inherit; font-size:1.5rem; font-weight:700; letter-spacing:-.03rem; color:#3d4653; cursor:pointer;}
.board_search .sel_wrap .arw{position:absolute; right:.2rem; width:0; height:0; border-left:.45rem solid transparent; border-right:.45rem solid transparent; border-top:.55rem solid #8a93a0; pointer-events:none;}
.board_search .divider{flex-shrink:0; width:1px; height:1.8rem; margin:0 1.6rem; background:rgba(20,40,80,.12);}
.board_search input{width:26rem; height:2.8rem; border:0; background:transparent; font-family:inherit; font-size:1.55rem; letter-spacing:-.03rem; color:var(--ink); outline:none;}
.board_search input::placeholder{color:#a6aeba; font-weight:500;}
.board_search .btn_bs{display:grid; place-items:center; flex-shrink:0; width:4rem; height:4rem; margin-left:1.2rem; border-radius:1rem; background:linear-gradient(180deg,rgba(50,120,205,.98),rgba(22,78,151,.98)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1rem 2rem -1rem rgba(26,95,180,.75); transition:transform .22s, box-shadow .22s;}
.board_search .btn_bs svg{width:1.8rem; height:1.8rem; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.board_search .btn_bs:hover{transform:scale(1.05);}

	@media (max-width:1280px){
		.board_search input{width:20rem;}
	}
	@media (max-width:1024px){
		.board_util{flex-direction:column; align-items:stretch; gap:1.2rem;}
		.board_count{align-self:flex-start;}
		.board_search{width:100%; max-width:100%; box-sizing:border-box;}
		.board_search input{flex:1 1 auto; width:auto; min-width:0;}
	}
	/* 작은 화면 : 조건(위) · 검색어+버튼(아래) 2행 그리드로 재구성한다 */
	@media (max-width:600px){
		.board_search{display:grid; grid-template-columns:1fr auto; grid-template-areas:"sel sel" "inp btn"; align-items:center; height:auto; padding:1.2rem; gap:.9rem; border-radius:1.8rem;}
		.board_search .sel_wrap{grid-area:sel; width:100%; height:4.8rem; padding:0 1.6rem; border-radius:1.2rem; background:#fff; box-shadow:inset 0 0 0 1px rgba(20,40,80,.09);}
		.board_search .sel_wrap select{width:100%; height:4.8rem; padding-right:2.2rem; font-size:1.6rem;}
		.board_search .sel_wrap .arw{right:1.6rem;}
		.board_search .divider{display:none;}
		.board_search input{grid-area:inp; width:100%; min-width:0; height:4.8rem; padding:0 1.6rem; border-radius:1.2rem; background:#fff; box-shadow:inset 0 0 0 1px rgba(20,40,80,.09); font-size:1.6rem; text-overflow:ellipsis;}
		.board_search input:focus{box-shadow:inset 0 0 0 1.5px rgba(50,120,205,.55);}
		.board_search .btn_bs{grid-area:btn; width:5.6rem; height:4.8rem; margin-left:0; border-radius:1.2rem;}
		.board_search .btn_bs svg{width:2rem; height:2rem;}
	}
	@media (max-width:480px){
		.board_count{font-size:1.55rem;}
		.board_count strong{font-size:1.6rem;}
	}
/* board_util - 끝 */


/* 레이블이 빠졌으므로 제목이 첫 요소가 된다 */
.sub_visual.sv_v4 .sv_tit{margin-top:0;}

/* 레이블(약 4.2rem) 만큼 섹션 높이를 낮춰 비주얼 비율을 유지 */
.sub_visual.sv_v4{height:52rem;}

	@media (max-width:1440px){
		.sub_visual.sv_v4{height:48rem;}
	}
	@media (max-width:1280px){
		.sub_visual.sv_v4{height:44rem;}
	}
	@media (max-width:1024px){
		.sub_visual.sv_v4{height:40rem;}
		.sub_visual.sv_v4 .sv_inner{padding-bottom:3.6rem;}
	}
	@media (max-width:768px){
		.sub_visual.sv_v4{height:auto; min-height:35rem;}
		.sub_visual.sv_v4 .sv_inner{padding:13.5rem 0 3.2rem;}
		.sub_visual.sv_v4 .sv_line{margin-top:2.2rem;}
	}
	@media (max-width:480px){
		.sub_visual.sv_v4{min-height:31rem;}
		.sub_visual.sv_v4 .sv_inner{padding:11rem 0 2.8rem;}
	}
	@media (max-width:380px){
		.sub_visual.sv_v4{min-height:29rem;}
		.sub_visual.sv_v4 .sv_inner{padding:10.4rem 0 2.6rem;}
	}


/* btn_top - 시작 */
.btn_top{position:fixed; right:var(--gutter); bottom:4rem; z-index:90; display:grid; place-items:center; width:5.2rem; height:5.2rem; border-radius:50%; background:var(--point); color:#fff; font-size:2rem; line-height:1; box-shadow:0 1.8rem 3.4rem -1.6rem rgba(22,78,151,.7); opacity:0; pointer-events:none; transform:translateY(1rem); transition:opacity .3s, transform .3s, background-color .2s;}
.btn_top.is_on{opacity:1; pointer-events:auto; transform:none;}
.btn_top:hover{background:var(--point_dk);}
	@media (max-width:768px){ .btn_top{width:4.6rem; height:4.6rem; bottom:2.4rem;} }
/* btn_top - 끝 */


/* ==========================================================================
   서브 진입 효과 + 스크롤 축소   [sub_intro.css]
   ========================================================================== */
/* ============================================================
   서브 비주얼 진입 효과 — 페이지 최초 접속 시 1회 재생
   ============================================================ */

/* 배경 : 살짝 확대된 상태에서 천천히 제자리로 (켄번즈)
   [수정] opacity 페이드를 제거하고(이미지가 처음부터 선명하게 보이도록) 확대 폭을 12%→2%에서 5%→0.5%로 줄여
   등장 시 이미지가 뿌옇게 보이던 현상을 없앴다 */
.sub_visual .sv_bg img{
	animation:svBgIn 6s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes svBgIn{
	from{transform:scale(1.05);}
	to  {transform:scale(1.005);}
}

/* 딤/페이드 : 배경과 함께 짧고 동시에 얹혀, 사진이 오래 흐려 보이지 않는다 */
.sub_visual .sv_dim,
.sub_visual .sv_fade{animation:svFadeIn .6s ease .05s both;}
@keyframes svFadeIn{from{opacity:0;} to{opacity:1;}}

/* 텍스트 : 아래에서 순차로 올라온다 */
.sub_visual .sv_crumb{animation:svUp .8s cubic-bezier(.22,.61,.36,1) .35s both;}
.sub_visual .sv_tit{animation:svUp .9s cubic-bezier(.22,.61,.36,1) .48s both;}
.sub_visual .sv_desc{animation:svUp .9s cubic-bezier(.22,.61,.36,1) .60s both;}
.sub_visual .sv_path{animation:svUp .9s cubic-bezier(.22,.61,.36,1) .72s both;}
@keyframes svUp{
	from{opacity:0; transform:translateY(2.4rem);}
	to  {opacity:1; transform:none;}
}

/* 스크롤 축소 : JS가 --sv-shrink(1→0.78), --sv-p(0→1) 를 갱신한다 */
.sub_visual{--sv-shrink:1; --sv-p:0;}
.sub_visual.sv_v4{height:calc(52rem * var(--sv-shrink)); will-change:height;}
.sub_visual .sv_bg img{transform-origin:center 40%;}
.sub_visual .sv_inner{transform:translateY(calc(var(--sv-p) * 1.6rem));}
.sub_visual .sv_txt{opacity:calc(1 - var(--sv-p) * .35);}

@media (prefers-reduced-motion:reduce){
	.sub_visual .sv_bg img,
	.sub_visual .sv_dim,
	.sub_visual .sv_fade,
	.sub_visual .sv_crumb,
	.sub_visual .sv_tit,
	.sub_visual .sv_desc,
	.sub_visual .sv_path{animation-duration:.01ms !important; animation-delay:0s !important;}
}

	@media (max-width:1440px){ .sub_visual.sv_v4{height:calc(48rem * var(--sv-shrink));} }
	@media (max-width:1280px){ .sub_visual.sv_v4{height:calc(44rem * var(--sv-shrink));} }
	@media (max-width:1024px){ .sub_visual.sv_v4{height:calc(40rem * var(--sv-shrink));} }
	@media (max-width:768px){
		.sub_visual.sv_v4{height:auto; min-height:35rem;}
		/* 모바일 : sv_inner 가 min-height 를 가득 채워 아래가 비지 않게 한다 */
		.sub_visual{display:flex; flex-direction:column; justify-content:flex-end;}
		.sub_visual .sv_inner{flex:1 1 auto; justify-content:flex-end;}
		.sub_visual .sv_inner{transform:none;}
		.sub_visual .sv_txt{opacity:1;}
	}


/* ============================================================
   서브 상단 리뉴얼 — 제목 중앙 정렬 + 우측 경로(홈+뎁스) + 라운드 본문
   ============================================================ */
.sub_visual.sv_v4{height:calc(44rem * var(--sv-shrink));}
.sub_visual .sv_inner,
.sub_visual.sv_v4 .sv_inner{justify-content:stretch; padding:11rem 0 3.5rem;}
.sub_visual .sv_head{flex:1; flex-direction:column; align-items:stretch; justify-content:space-between; gap:2.4rem;}
/* 제목 : 헤더 아래 남은 영역의 정중앙 — 상단이 헤더로 눌려 보이므로 살짝 아래로 */
.sub_visual .sv_txt{max-width:none; margin:auto auto; padding-top:4.4rem; text-align:center;}
	@media (max-width:768px){
		.sub_visual .sv_txt{padding-top:0;}
	}
.sub_visual.sv_v4 .sv_tit{margin-top:0; font-size:5.2rem; font-weight:700; letter-spacing:-.06rem; text-shadow:0 .4rem 2rem rgba(4,8,16,.5), 0 .1rem .3rem rgba(4,8,16,.45);}
.sub_visual .sv_desc{margin:1.4rem auto 0;}

/* 경로 : 글래스 알약 3개(홈 + 뎁스2) — 비주얼 하단 우측 기준선에 맞춘다 */
.sv_path{align-self:flex-end; align-items:center; height:auto; padding:0; gap:.8rem; border:0; border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;}
.sv_path .path_home{display:grid; place-items:center; flex-shrink:0; width:5.2rem; height:5.2rem; border-radius:50%; background:linear-gradient(180deg,rgba(50,120,205,.98),rgba(22,78,151,.98)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1rem 2.2rem -1.2rem rgba(26,95,180,.75); transition:background .22s, transform .22s;}
.sv_path .path_home svg{width:1.9rem; height:1.9rem; fill:currentColor;}
.sv_path .path_home:hover{background:var(--point_dk); transform:translateY(-2px);}
.sv_path .path_item{height:5.2rem;}
.sv_path .path_btn,
.sv_path .path_item:first-of-type .path_btn{width:auto; min-width:18rem; justify-content:space-between; height:100%; padding:0 2rem 0 2.4rem; gap:1.8rem; border-radius:2.6rem; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:rgba(255,255,255,.92); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2rem 4rem -2.4rem rgba(0,0,0,.6); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);}
.sv_path .path_btn:hover,
.sv_path .path_item:first-of-type .path_btn:hover{background:rgba(255,255,255,.13);}
.sv_path .path_btn .arw{border:0; width:.85rem; height:.85rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; opacity:.75; transform:rotate(45deg) translate(-.12rem,-.12rem);}
.sv_path .path_item.is_open .path_btn .arw{transform:rotate(225deg) translate(-.12rem,-.12rem);}
/* 드롭다운이 버튼보다 넓어질 때 화면 밖으로 나가 잘리지 않게 한다 */
.sv_path .path_list{left:0; right:auto; min-width:100%; width:max-content; max-width:calc(100vw - var(--gutter, 1.6rem) * 2);}
.sv_path .path_item:last-of-type .path_list{left:auto; right:0;}

/* 본문 : 상단 라운드로 비주얼 위에 겹쳐 올라온다
   (board.css 의 .sv_v4 ~ .sub_content 보다 높은 우선순위로 상단 유틸바가 말려 잘리지 않게 한다) */
.container .sub_content,
.container .sv_v4 ~ .sub_content{position:relative; z-index:5; padding-top:3.6rem;}
/* 드롭다운이 열릴 때만 비주얼을 본문 위로 올려 목록이 가려지지 않게 한다 */
.sub_visual:has(.path_item.is_open){z-index:7;}
/* 비주얼의 투명 레이어가 본문(라운드 겹침 구간)의 클릭을 가로채지 않게 한다 —
   보이는 영역과 잡히는 영역을 일치시킨다 */
.sub_visual .sv_inner{pointer-events:none;}
.sub_visual .sv_txt,
.sub_visual .sv_path{pointer-events:auto;}

	@media (max-width:1440px){
		.sub_visual.sv_v4{height:calc(42rem * var(--sv-shrink));}
	}
	/* 헤더 메뉴가 햄버거로 접히는 구간 : 상단 시각 무게가 사라지므로
	   제목을 눌러 내리던 보정 여백을 줄여 다시 광학 중앙에 놓는다 */
	@media (max-width:1439px){
		.sub_visual .sv_txt{padding-top:1.4rem;}
	}
	@media (max-width:1280px){
		.sub_visual.sv_v4{height:calc(40rem * var(--sv-shrink));}
		.sub_visual.sv_v4 .sv_tit{font-size:4.8rem;}
		.sub_visual.sv_v4 .sv_inner{padding:10.4rem 0 3.5rem;}
	}
	@media (max-width:1024px){
		.sub_visual.sv_v4{height:calc(37rem * var(--sv-shrink));}
		.sub_visual.sv_v4 .sv_inner{padding:9.6rem 0 3.5rem;}
		.sub_visual .sv_head{gap:2rem;}
		.sub_visual.sv_v4 .sv_tit{font-size:4.4rem;}
		.sv_path .path_home{width:4.8rem; height:4.8rem;}
		.sv_path .path_item{height:4.8rem;}
		.sv_path .path_btn{padding:0 1.7rem 0 2rem; gap:1.4rem;}
		.container .sub_content,
		.container .sv_v4 ~ .sub_content{padding-top:6.4rem;}
	}
	@media (max-width:768px){
		.sub_visual.sv_v4{height:auto; min-height:32rem;}
		.sub_visual .sv_inner,
		.sub_visual.sv_v4 .sv_inner{padding:11rem 0 3.5rem;}
		.sub_visual .sv_head{gap:3.2rem;}
		.sub_visual .sv_txt{margin:0 auto;}
		.sub_visual.sv_v4 .sv_tit{font-size:min(4rem, calc((100vw - 2 * var(--gutter)) / 5));}
		.sv_path{align-self:stretch; padding:0; gap:.6rem;}
		.sv_path .path_item{flex:1; min-width:0;}
		.sv_path .path_btn,
		.sv_path .path_item:first-of-type .path_btn{width:100%; min-width:0; padding:0 1rem 0 1.3rem; gap:.7rem; font-size:1.45rem; letter-spacing:-.03rem;}
		.sv_path .path_btn .txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
		.sv_path .path_home{width:4.2rem; height:4.2rem; flex-shrink:0;}
		.sv_path .path_home svg{width:1.6rem; height:1.6rem;}
		.sv_path .path_item{height:4.2rem;}
		.container .sub_content,
		.container .sv_v4 ~ .sub_content{padding-top:5.4rem;}
	}
	@media (max-width:380px){
		.sub_visual .sv_inner,
		.sub_visual.sv_v4 .sv_inner{padding-bottom:2.4rem;}
		.sub_visual .sv_head{gap:2.6rem;}
		.sv_path{flex-direction:row; gap:.5rem;}
		.sv_path .path_item{height:4rem;}
		.sv_path .path_home{width:4rem; height:4rem;}
		.sv_path .path_btn,
		.sv_path .path_item:first-of-type .path_btn{padding:0 .8rem 0 1rem; gap:.5rem; font-size:1.4rem; border-radius:2.4rem;}
	}


/* 서브 타이틀 : 영문 소제목 + 국문 제목 (중앙 정렬, 밑줄 없음) */
.sub_visual .sv_eng.sv_eng_c{display:block; padding-bottom:0; font-size:1.7rem; font-weight:700; letter-spacing:.06rem; line-height:1; color:#7db0f2; text-transform:none;}
.sub_visual .sv_eng.sv_eng_c::after,
.sub_visual .sv_eng.sv_eng_c::before{display:none; content:none;}
.sub_visual.sv_v4 .sv_eng.sv_eng_c + .sv_tit{margin-top:1.6rem;}
	@media (max-width:1024px){
		.sub_visual .sv_eng.sv_eng_c{font-size:1.55rem;}
		.sub_visual.sv_v4 .sv_eng.sv_eng_c + .sv_tit{margin-top:1.3rem;}
	}
	@media (max-width:480px){
		.sub_visual .sv_eng.sv_eng_c{font-size:1.4rem; letter-spacing:.04rem;}
		.sub_visual.sv_v4 .sv_eng.sv_eng_c + .sv_tit{margin-top:1.1rem;}
	}


/* 콘텐츠 상단 유틸 바 : 경로(breadcrumb) + 공유/인쇄 */
/* 콘텐츠 최상단 유틸 바 : 공유/인쇄 */
.sv_v4 ~ .sub_content{padding-top:3.2rem;}
.cont_head{display:flex; align-items:center; justify-content:flex-end; gap:2rem; margin-bottom:3.4rem;}
.cont_head .head_util{display:flex; align-items:center; gap:.8rem; flex-shrink:0;}
.cont_head .util_btn{position:relative; display:inline-flex; align-items:center; justify-content:center; width:4.2rem; height:4.2rem; border-radius:50%; background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(255,255,255,.42)); border:1px solid rgba(255,255,255,.75); color:#41506a; -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); box-shadow:0 .6rem 1.6rem -.8rem rgba(24,44,74,.3), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(24,44,74,.05); transition:color .25s, border-color .25s, transform .25s, box-shadow .25s, background .25s;}
.cont_head .util_btn svg{width:1.8rem; height:1.8rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.cont_head .util_btn:hover{color:var(--point); background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(214,231,252,.55)); border-color:rgba(255,255,255,.9); transform:translateY(-.2rem); box-shadow:0 1rem 2.2rem -.9rem rgba(26,95,180,.5), inset 0 1px 0 rgba(255,255,255,.95);}
.cont_head .util_btn.is_copied::after{content:"주소가 복사되었습니다"; position:absolute; top:calc(100% + .8rem); right:0; z-index:4; padding:.7rem 1.1rem; border-radius:.8rem; background:rgba(24,44,74,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; font-size:1.3rem; font-weight:600; letter-spacing:-.02rem; white-space:nowrap;}

	@media (max-width:1024px){
		.sv_v4 ~ .sub_content{padding-top:6rem;}
		.cont_head{display:none;}
	}
	@media (max-width:768px){
		.sv_v4 ~ .sub_content{padding-top:5rem;}
	}

/* 서브 상단 공통 규격(sv_v4 / 경로바 / cont_head / 본문 상단여백)은
   css/sub-common.css 에서만 관리한다. 이 파일과 페이지 CSS에서 재정의 금지. */