@charset "utf-8";

/* ============================================================
   울산광역시 열린시장실 — main.css (메인 비주얼 / 공약 / 갤러리 소개)
   ============================================================ */
@font-face {
  font-display: swap;
  font-family: 'esamanru';
  font-style: normal;
  font-weight: 600;
  src: url('./font/esamanru-Bold.woff') format('woff2');
}

/* main_visual - 시작 */
.main_visual{position:relative; width:100%; height:100vh; overflow:hidden;}
/* 화면 너비대비 높이가 지나치게 짧아져도 mv_side 콘텐츠(일정카드+유튜브+SNS)가 항상 다 들어가는 바닥값 */
@media (min-width:1281px){ .main_visual{min-height:77rem;} }
@media (min-width:1025px) and (max-width:1280px){ .main_visual{min-height:78rem;} }
.main_visual .mv_slider, .main_visual .mv_dim{position:absolute; inset:0;}
.main_visual .mv_fade{position:absolute; inset:0; display:none;}
.main_visual .mv_slide{position:absolute; inset:0; opacity:0; transition:opacity 1s ease;}
.main_visual .mv_slide.is_on{opacity:1;}
.main_visual .mv_slide img{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.main_visual .mv_photo_ph{display:grid; place-items:center; width:100%; height:100%; font-family:monospace; font-size:1.4rem; color:#8a93a0; background:repeating-linear-gradient(135deg,#e9edf2 0 2rem,#e2e7ee 2rem 4rem);}
.main_visual .mv_dim{background:linear-gradient(90deg,rgba(10,14,22,.55) 0%,rgba(10,14,22,.28) 42%,rgba(10,14,22,.12) 100%); pointer-events:none; opacity: 0.5;}

.main_visual .mv_inner{position:absolute; inset:0; z-index:5; width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}
.main_visual .title_zone{position:absolute; left:var(--gutter); bottom:15rem; color:#fff;}
.main_visual .mv_eng{margin-bottom:2rem; font-size:1.5rem; font-weight:600; letter-spacing:.3rem; opacity:.6;}
.main_visual .mv_sub{font-size:4.5rem; font-weight:500; letter-spacing:-.05rem; line-height:1.16;}
.main_visual .mv_tit{margin-top:1.4rem; font-size:5.4rem; font-weight:800; letter-spacing:-.1rem; line-height:1.1;}
.main_visual .mv_tit > small{margin-left: 1rem; font-weight: 500;}

/* slide control (공유: 메인비주얼 + 공약 슬라이드) - 시작 */
.sld_ctrl{display:flex; align-items:center; gap:1.6rem; color:#fff;}
.sld_ctrl .sld_btn{display:grid; place-items:center; width:2.8rem; height:2.8rem; color:inherit; transition:opacity .2s;}
.sld_ctrl .sld_btn:hover{opacity:.7;}
.sld_ctrl .ico{font-size:2rem; line-height:1;}
.sld_num{font-size:1.4rem; font-weight:700; width:calc(1.9rem * var(--fx));}
.sld_total{font-size:1.4rem; font-weight:700; opacity:.55;}
.sld_bar{position:relative; width:calc(7rem * var(--fx)); height:calc(.6rem * var(--fx)); background: rgb(255 255 255 / 50%); border-radius: calc(.6rem * var(--fx));}
.sld_bar::before{content:""; position:absolute; inset:0; background:currentColor; opacity:.28; border-radius:calc(.6rem * var(--fx));}
.sld_bar_fill{position:absolute; left:0; top:0; height:100%; width:0; opacity:1; background:currentColor; transition:width .6s ease; border-radius: calc(.6rem * var(--fx));}
.sld_play .ico{width:1.3rem; height:1.3rem; border-left:3px solid currentColor; border-right:3px solid currentColor;}
.sld_play.is_pause .ico{width:0; height:0; border:0; border-left:1.1rem solid currentColor; border-top:.7rem solid transparent; border-bottom:.7rem solid transparent;}
/* 밝은 배경용(공약 섹션): 남색 톤 */
.sld_ctrl_dark{color:#164e97;}
.sld_btn .arrow{width: calc(2.8rem * var(--fx)); height: calc(2.8rem * var(--fx));}
.sld_btn .arrow.flip_hor{transform: scaleX(-1);}
.sld_btn .pause_icon{width:calc(1rem * var(--fx));}
.sld_btn.sld_play .ico{display:none;}
.sld_btn.is_pause .ico{display:block;}
.sld_btn.is_pause .pause_icon{display:none;}
.sld_btn.is_pause .pause_icon{display:none;}
/* slide control - 끝 */

.main_visual .mv_control{position:absolute; left:var(--gutter); bottom:8rem;}

.main_visual .mv_side{position:absolute; z-index:6; right:var(--gutter); top:13rem; display:flex; flex-direction:column; gap:1.4rem; width:35.2rem;}
.main_visual .mv_side > *{flex:0 0 auto;}
.main_visual .sche_widget{position:relative; display:flex; flex-direction:column; min-height:0; width:100%; padding:2.6rem 2.4rem; border-radius:2rem; color:#fff; background:rgba(24,25,28,.62); backdrop-filter:blur(2rem); -webkit-backdrop-filter:blur(2rem); border:1px solid rgba(255,255,255,.1); box-shadow:0 3rem 6rem -2.8rem rgba(0,0,0,.6);}
.main_visual .sche_head{display:flex; align-items:center; justify-content:space-between;}
.main_visual .sche_tit{display:flex; align-items:center; gap:.9rem; font-size:1.8rem; font-weight:700; letter-spacing:-.03rem;}
.main_visual .sche_tit .dot{width:.6rem; height:.6rem; border-radius:50%; background:#4d7ce8;}
.main_visual .sche_nav{display:flex; gap:.6rem;}
.main_visual .sche_nav button{display: inline-flex; align-items:center; justify-content:center; width:2.8rem; height:2.8rem; border-radius:.8rem; background:rgba(255,255,255,.1); color:#fff; font-size:1.4rem; transition:background .2s;}
.main_visual .sche_nav button:hover{background:rgba(255,255,255,.22);}
.main_visual .sche_nav button .arrow{width:calc(.7rem * var(--fx));}
.main_visual .sche_nav button .arrow.flip_hor {transform: scaleX(-1);}
.main_visual .week_list.depth-1{display:flex; gap:.4rem; margin-top:2.2rem;}
/* 이전/다음 주로 넘길 때 방향에 맞춰 부드럽게 진입 */
@keyframes weekInNext{from{opacity:0; transform:translateX(2.2rem);} to{opacity:1; transform:none;}}
@keyframes weekInPrev{from{opacity:0; transform:translateX(-2.2rem);} to{opacity:1; transform:none;}}
.main_visual .week_list.depth-1.is_in_next{animation:weekInNext .45s cubic-bezier(.16,1,.3,1) both;}
.main_visual .week_list.depth-1.is_in_prev{animation:weekInPrev .45s cubic-bezier(.16,1,.3,1) both;}
.main_visual .week_list.depth-1 li{transition:background .2s, box-shadow .3s ease;}
.main_visual .week_list.depth-1 .day, .main_visual .week_list.depth-1 .date{transition:color .3s ease;}
.main_visual .sche_body{position:relative; margin-top:2rem; flex:0 0 auto; overflow:hidden; transition:height .42s cubic-bezier(.4,0,.2,1);}
/* 일정이 많을 때 : 리스트 영역만 스크롤 (유튜브·SNS 위치 고정) */
.main_visual .sche_body.is_scroll{overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2rem,#000 calc(100% - 3rem),transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 2rem,#000 calc(100% - 3rem),transparent 100%);}
.main_visual .sche_body.is_scroll.is_top{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 3rem),transparent 100%); mask-image:linear-gradient(180deg,#000 calc(100% - 3rem),transparent 100%);}
.main_visual .sche_body.is_scroll.is_end{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2rem,#000 100%); mask-image:linear-gradient(180deg,transparent 0,#000 2rem,#000 100%);}
.main_visual .sche_body.is_scroll.is_top.is_end{-webkit-mask-image:none; mask-image:none;}
.main_visual .sche_body::-webkit-scrollbar{width:.4rem;}
.main_visual .sche_body::-webkit-scrollbar-thumb{border-radius:.4rem; background:rgba(255,255,255,.35);}
.main_visual .sche_body::-webkit-scrollbar-track{background:transparent;}
.main_visual .sche_list.depth-1{margin-top:0;}
.main_visual .sche_list.depth-1 li{animation:scheItemIn .4s ease both;}
@keyframes scheItemIn{from{opacity:0; transform:translateY(.8rem);} to{opacity:1; transform:none;}}
.main_visual .week_list.depth-1 li{flex:1; text-align:center; padding:1.1rem 0 2rem 0; border-radius:1.2rem; cursor:pointer; transition:background .2s;}
.main_visual .week_list.depth-1 li:hover{background:rgba(255,255,255,.08);}
.main_visual .week_list.depth-1 li.has_sche{position:relative;}
.main_visual .week_list.depth-1 li.has_sche::after{content:""; position:absolute; left:50%; bottom:1rem; width:calc(.6rem * var(--fx)); height:calc(.6rem * var(--fx)); margin-left:-.2rem; border-radius:50%; background:#8fb0ff;}
.main_visual .week_list.depth-1 li.is_on.has_sche::after{background:#fff;}
.main_visual .week_list.depth-1 .day{display:block; font-size:1.5rem; color:rgba(255,255,255,.5);}
.main_visual .week_list.depth-1 .date{display:block; margin-top:.7rem; font-size:1.5rem; font-weight:600; color:rgba(255,255,255,.85);}
.main_visual .week_list.depth-1 li.is_on{background: linear-gradient(to bottom, #4d7ce8, #274bcf); box-shadow: 0 0.8rem 1.8rem -0.8rem rgba(0, 0, 0, 0.3);}
.main_visual .week_list.depth-1 li.is_on .day{color:rgba(255,255,255,.9);}
.main_visual .week_list.depth-1 li.is_on .date{color:#fff; font-weight:800;}
.main_visual .sche_list.depth-1{margin-top:0;}
.main_visual .sche_list.depth-1 li{display:flex; align-items:baseline; gap:1.6rem; padding:1.3rem 0;}
.main_visual .sche_list.depth-1 li + li{border-top:1px solid rgba(255,255,255,.09);}
.main_visual .sche_list.depth-1 .time{flex-shrink:0; width:4.6rem; font-size:1.3rem; font-weight:700; color:rgba(255,255,255,.55);}
.main_visual .sche_list.depth-1 .time.on{color:#8fb0ff;}
.main_visual .sche_list.depth-1 .desc{font-size:1.6rem; font-weight:600; line-height:1.45;}
.main_visual .sche_empty{display:none; padding:3.2rem 0; text-align:center; font-size:1.5rem; font-weight:500; color:rgba(255,255,255,.55); animation:scheItemIn .4s ease both;}
.main_visual .sche_empty.is_on{display:block;}
.main_visual .btn_more{display:flex; align-items:center; justify-content:center; gap:.8rem; width:100%; height:4.6rem; margin-top:1.6rem; border-radius:1.2rem; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.07); color:#fff; font-size:1.5rem; font-weight:600; transition:background .25s,border-color .25s;}
.main_visual .btn_more:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28);}
.main_visual .sche_nav .sche_all {
  position: relative; /* 가상 요소의 기준점 */
  overflow: hidden;   /* 그라데이션이 모서리를 벗어나지 않게 처리 */
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 2.8rem; 
  height: 2.8rem; 
  border-radius: .8rem; 
  background: rgba(255,255,255,.1); 
  color: #fff; 
  font-size: 1.6rem; 
  font-weight: 600; 
  /* 변경: 그림자 애니메이션을 위해 box-shadow도 추가하고 부드러운 커브값 적용 */
  transition: box-shadow .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
  z-index: 1;
}

/* '+' 아이콘 : 화면 배율에 따라 소수점 픽셀에서 막대 두께가 어긋나 보이므로
   벡터(SVG 마스크)로 그려 어떤 크기에서도 균일하게 렌더되도록 한다 */
.main_visual .sche_nav .sche_all::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.4v11.2M2.4 8h11.2' stroke='%23000' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.4v11.2M2.4 8h11.2' stroke='%23000' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* [핵심] 호버했을 때 나타날 그라데이션 레이어를 미리 깔아둡니다 */
.main_visual .sche_nav .sche_all::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, #4d7ce8, #274bcf);
  opacity: 0; /* 처음에는 안 보이게 설정 */
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1); /* 투명도가 부드럽게 변하도록 처리 */
  z-index: -1; /* 텍스트(color:#fff) 뒤로 보냄 */
}

/* 마우스 호버 상태 */
.main_visual .sche_nav .sche_all:hover {
  /* 그라데이션 레이어를 서서히 보여줍니다 */
  box-shadow: 0 0.8rem 1.8rem -0.8rem rgba(0, 0, 0, 0.3);
  transform: translateY(-1px); /* 고급스러움을 더하는 살짝 떠오르는 모션 (선택사항) */
}
.main_visual .sche_nav .sche_all:hover::before {
  opacity: 1; 
}

/* 화면 높이가 부족할 때 : 단계적 축소 (메인비주얼 높이 유지) */
/* 날짜 선택 영역·리스트 간격은 그대로 두고(일정 수와 무관하게 동일한 리듬 유지),
   바깥 여백과 유튜브 박스만 줄인다 */
.main_visual .mv_side.is_tight{gap:.9rem;}
.main_visual .mv_side.is_tight .sche_widget{padding:2.2rem 2.4rem;}
.main_visual .mv_side.is_tight .btn_more{height:4.4rem;}
.main_visual .mv_side.is_tight .sns_btn{border-radius:1.3rem;}
.main_visual .mv_side.is_tight .mv_sns.depth-1{gap:1rem;}

/* 유튜브 썸네일 */
.main_visual .mv_youtube{display:block; position:relative; overflow:hidden; width:100%; aspect-ratio:16/9; border-radius:2rem; border-top: 1px solid rgba(255, 255, 255, 0.3); border-left: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); background:rgba(24,25,28,.62); backdrop-filter:blur(2rem); -webkit-backdrop-filter:blur(2rem); box-shadow:0 3rem 6rem -2.8rem rgba(0,0,0,.6);}
.main_visual .mv_youtube .yt_thumb{display:block; width:100%; height:100%;}
.main_visual .mv_youtube .yt_thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.main_visual .mv_youtube::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,14,22,.1) 0%,rgba(10,14,22,.45) 100%); transition:opacity .3s;}
.main_visual .mv_youtube .yt_play {
  position: absolute; left: 50%; top: calc(50% + 2px); z-index: 2; 
  width: 5.6rem; height: 5.6rem; margin: -2.8rem 0 0 -2.8rem; 
  border-radius: 50%; 
  background: linear-gradient(135deg, #ff2a54, #b30022); 
  box-shadow: 0 1.2rem 2.8rem -0.8rem rgba(48, 4, 11, 0.5); 
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.main_visual .mv_youtube .yt_play::after {
  content: ""; position: absolute; left: 52%; top: 50%;
  width: 0; height: 0; margin: -1.0rem 0 0 -.7rem; 
  border-left: 1.6rem solid #fff; 
  border-top: 1.0rem solid transparent; 
  border-bottom: 1.0rem solid transparent;
}
.main_visual .mv_youtube:hover .yt_thumb img{transform:scale(1.06);}
.main_visual .mv_youtube:hover .yt_play{transform:scale(1.08);}

/* SNS 버튼 (호버 시 브랜드 컬러) */
.main_visual .mv_sns.depth-1{display:flex; gap:1.2rem;}
.main_visual .mv_sns.depth-1 li{flex:1;}
.main_visual .sns_btn{display:block; position:relative; width:100%; aspect-ratio:1/1; border-radius:1.6rem; border:1px solid rgba(255,255,255,.14); background:rgba(24,25,28,.62); backdrop-filter:blur(2rem); -webkit-backdrop-filter:blur(2rem); transition:background .2s,border-color .2s,transform .2s;}
.main_visual .sns_btn:hover{border-color:rgba(255,255,255,.3); transform:translateY(-.3rem);}
.main_visual .sns_btn::before{content:""; position:absolute; left:50%; top:50%; width:2rem; height:2rem; margin:-1rem 0 0 -1rem; background:url(../uploads/sns_list.svg) no-repeat 0 0 / auto 2rem;}
.main_visual .sns_btn.inst::before{background-position-x:0;}
.main_visual .sns_btn.ytub::before{background-position-x:-3rem;}
.main_visual .sns_btn.face::before{background-position-x:-6rem;}
.main_visual .sns_btn.blog::before{background-position-x:-9rem;}
.main_visual .sns_btn.xtwt::before{width:1.5rem; height:1.5rem; margin:-.75rem 0 0 -.75rem; background:url(../uploads/x-logo.svg) no-repeat center / contain;}
.main_visual .sns_btn.tik::before{width:1.7rem; height:1.9rem; margin:-.95rem 0 0 -.85rem; background:url(../uploads/tiktok.svg) no-repeat center / contain;}
.main_visual .sns_btn.face:hover{background:#1877F2;}
.main_visual .sns_btn.inst:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}
.main_visual .sns_btn.tik:hover{background:#010201;}
.main_visual .sns_btn.xtwt:hover{background:#111114;}
.main_visual .sns_btn.blog:hover{background:#5CE04A;}

	/* 미디어쿼리 시작 */
	@media (max-width:1440px){
		.main_visual .mv_sub{font-size:4.1rem;}
		.main_visual .mv_tit{font-size:5rem;}
		.main_visual .title_zone{bottom:13rem;}
		.main_visual .mv_control{bottom:6rem;}
		.main_visual .mv_side{width:33rem;}
	}
	@media (max-width:1280px){
		.main_visual .mv_sub{font-size:3.6rem;}
		.main_visual .mv_tit{font-size:4.4rem;}
		.main_visual .title_zone{bottom:12rem;}
		.main_visual .mv_side{top:14rem; width:31rem;}
	}
	/* 태블릿 이하 : 세로 흐름 배치 (일정·유튜브·SNS가 비주얼 아래로) */
	@media (max-width:1024px){
		/* 배경 이미지가 보이는 상단 밴드 높이 */
		:root{--mv_img:clamp(40rem,62vh,58rem);}
		.main_visual{height:auto; background:#101720;}
		.main_visual .mv_slider, .main_visual .mv_dim, .main_visual .mv_fade{top:0; left:0; bottom:auto; width:100%; height:var(--mv_img);}
		.main_visual .mv_fade{display:block; z-index:4; pointer-events:none; background:linear-gradient(180deg,rgba(16,23,32,0) 74%,#101720 100%);}
		.main_visual .mv_inner{position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:2.6rem; min-height:var(--mv_img); padding-top:16rem; padding-bottom:3.4rem;}
		.main_visual .title_zone{position:static;}
		.main_visual .mv_sub{font-size:3.5rem;}
		.main_visual .mv_tit{font-size:4.2rem;}
		.main_visual .mv_control{position:static;}
		/* .mv_side는 .mv_inner의 형제이므로 좌우 거터를 직접 준다.
		   태블릿에서는 2열(일정 | 유튜브+SNS)로 압축해 배경이 최대한 보이도록 한다 */
		.main_visual .mv_side{position:static; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; align-items:start; gap:1.4rem; width:100%; max-width:none; max-height:none; margin:0 auto 5rem; padding:0 var(--gutter); transform:none;}
		.main_visual .sche_widget{grid-column:1; grid-row:1 / span 2;}
		.main_visual .mv_youtube{grid-column:2; grid-row:1;}
		.main_visual .mv_sns.depth-1{grid-column:2; grid-row:2;}
		/* 버튼이 열 폭을 다 채워 커지므로 스프라이트 아이콘도 1.2배 키운다(셀 폭 3rem → 3.6rem) */
		.main_visual .sns_btn::before{width:2.4rem; height:2.4rem; margin:-1.2rem 0 0 -1.2rem; background-size:auto 2.4rem;}
		.main_visual .sns_btn.inst::before{background-position-x:0;}
		.main_visual .sns_btn.ytub::before{background-position-x:-3.6rem;}
		.main_visual .sns_btn.face::before{background-position-x:-7.2rem;}
		.main_visual .sns_btn.blog::before{background-position-x:-10.8rem;}
		.main_visual .sns_btn.xtwt::before{width:1.9rem; height:1.9rem; margin:-.95rem 0 0 -.95rem;}
		.main_visual .sns_btn.tik::before{width:2.1rem; height:2.3rem; margin:-1.15rem 0 0 -1.05rem;}
		/* 세로 흐름에서는 높이 축소 단계를 쓰지 않고, 리스트만 자체 스크롤 */
		.main_visual .mv_side.is_tight{gap:1.4rem;}
		.main_visual .mv_side.is_tight .sche_widget{padding:2.6rem 2.4rem;}
		.main_visual .sche_body{height:auto !important; max-height:19rem; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent; -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 2.4rem),transparent 100%); mask-image:linear-gradient(180deg,#000 calc(100% - 2.4rem),transparent 100%);}
		/* 섬션 하단(mv_side 여백) → 다음 섹션으로 자연스럽게 이어지는 그라데이션 */
		.main_visual::after{content:""; position:absolute; left:0; right:0; bottom:0; height:5rem; background:linear-gradient(180deg,rgba(16,23,32,0) 0%,#101720 100%); pointer-events:none;}
	}
	@media (max-width:768px){
		:root{--mv_img:clamp(45rem,70vh,60rem);}
		.main_visual .mv_inner{gap:3.4rem; padding-top:14.5rem; padding-bottom:4.2rem;}
		.main_visual .mv_eng{margin-bottom:1.8rem; font-size:1.5rem; letter-spacing:.2rem;}
		/* 모바일 : 문구 폭에 맞춰 유동 축소 → 특정 구간에서 갑자기 2줄이 되는 현상 방지
		   (13.1 = 부제 1줄 렌더 폭 ÷ 폰트크기, 제목은 부제의 1.25배로 위계 유지) */
		.main_visual .mv_sub{font-size:min(3.2rem, calc((100vw - 2 * var(--gutter) - .6rem) / 13.1)); line-height:1.14;}
		.main_visual .mv_tit{margin-top:.9rem; font-size:min(4rem, calc((100vw - 2 * var(--gutter) - .6rem) / 13.1 * 1.25)); line-height:1.1;}
		.main_visual .mv_side{grid-template-columns:1fr; grid-template-rows:none; gap:1.8rem; margin-bottom:4.8rem;}
		.main_visual::after{height:4rem;}
		.main_visual .sche_widget, .main_visual .mv_youtube, .main_visual .mv_sns.depth-1{grid-column:1;}
		.main_visual .sche_widget{grid-row:auto;}
		.main_visual .mv_youtube{grid-row:auto;}
		.main_visual .mv_sns.depth-1{grid-row:auto;}
		.main_visual .sche_body{max-height:15rem;}
		.main_visual .mv_youtube{border-radius:1.6rem;}
		.main_visual .sld_bar{width:9rem;}
		/* 일정 위젯이 352px 상단 컨럼 기준이다 → 1열 풀폭으로 바뀌는 구간에서는 내부 요소도 폭에 맞춰 키운다 */
		.main_visual .sche_widget{padding:3rem 2.8rem; border-radius:2.4rem;}
		.main_visual .sche_tit{gap:1.1rem; font-size:2rem;}
		.main_visual .sche_tit .dot{width:.8rem; height:.8rem;}
		.main_visual .sche_nav{gap:.8rem;}
		.main_visual .sche_nav button, .main_visual .sche_nav .sche_all{width:3.6rem; height:3.6rem; border-radius:1rem; font-size:1.8rem;}
		.main_visual .sche_nav button .arrow{width:.9rem;}
		.main_visual .week_list.depth-1{gap:.6rem; margin-top:2.4rem;}
		.main_visual .week_list.depth-1 li{padding:1.4rem 0 2.4rem;}
		.main_visual .week_list.depth-1 li.has_sche::after{bottom:1.2rem; width:.7rem; height:.7rem;}
		.main_visual .week_list.depth-1 .day{font-size:1.55rem;}
		.main_visual .week_list.depth-1 .date{font-size:1.7rem;}
		.main_visual .sche_list.depth-1 li{gap:2rem; padding:1.6rem 0;}
		.main_visual .sche_list.depth-1 .time{width:5.2rem; font-size:1.45rem;}
		.main_visual .sche_list.depth-1 .desc{font-size:1.7rem;}
		.main_visual .sche_empty{font-size:1.6rem;}
		.main_visual .btn_more{height:5.2rem; font-size:1.6rem;}
		/* SNS 버튼은 폭을 모두 채우는 원래 형태 그대로 둔 다(flex:1 / 1:1 정사각형) → 아이콘만 1.3배 */
		.main_visual .sns_btn{aspect-ratio:auto; height:5.6rem; border-radius:1.6rem;}
		.main_visual .sns_btn::before{width:2.6rem; height:2.6rem; margin:-1.3rem 0 0 -1.3rem; background-size:auto 2.6rem;}
		.main_visual .sns_btn.inst::before{background-position-x:0;}
		.main_visual .sns_btn.ytub::before{background-position-x:-3.9rem;}
		.main_visual .sns_btn.face::before{background-position-x:-7.8rem;}
		.main_visual .sns_btn.blog::before{background-position-x:-11.7rem;}
		.main_visual .sns_btn.xtwt::before{width:2rem; height:2rem; margin:-1rem 0 0 -1rem;}
		.main_visual .sns_btn.tik::before{width:2.2rem; height:2.5rem; margin:-1.25rem 0 0 -1.1rem;}
	}
	@media (max-width:480px){
		/* 메인비주얼 전용 : 좁은 폭에서 컨트롤을 문구 아래 '한 줄 풀폭 바'로 정리한다.
		   공통 컴포넌트(.sld_ctrl)는 손대지 않고 랩퍼(.mv_control) 스코프로만 재정의 → 공약 섹션 컨트롤은 그대로 */
		.main_visual .mv_control.sld_ctrl{width:100%; gap:.8rem;}
		.main_visual .mv_control .sld_bar{flex:1 1 auto; width:auto;}
		.main_visual .mv_control .sld_num, .main_visual .mv_control .sld_total{font-size:1.4rem;}
		/* 아이콘 크기는 유지하고 히트영역만 44px로 확대 (좌우 끝 정렬이 흐트러지지 않게 음수 마진으로 상쇄) */
		.main_visual .mv_control .sld_btn{width:4.4rem; height:4.4rem;}
		.main_visual .mv_control .sld_prev{margin-left:-.8rem;}
		.main_visual .mv_control .sld_next{margin-right:-.8rem;}
		:root{--mv_img:clamp(40rem,66vh,54rem);}
		.main_visual .mv_inner{gap:2.9rem; padding-top:12.5rem; padding-bottom:3.8rem;}
		.main_visual .mv_side{gap:1.6rem; margin-bottom:4.2rem;}
		.main_visual::after{height:3.4rem;}
		.main_visual .sche_body{max-height:13rem;}
		.main_visual .sche_widget{padding:2.4rem 2rem;}
		.main_visual .sche_tit{font-size:1.9rem;}
		.main_visual .week_list.depth-1 li{padding:1.2rem 0 2rem;}
		.main_visual .sche_list.depth-1 .desc{font-size:1.6rem;}
		.main_visual .mv_sns.depth-1{gap:.6rem;}
		.main_visual .mv_youtube .yt_play{width:4.8rem; height:4.8rem; margin:-2.4rem 0 0 -2.4rem;}
	}
	@media (max-width:380px){
		/* 320px 대응 : 일정 위젯 내부 요소를 한 단계 더 축소 (768 값이 그대로 적용돼 넘치던 문제) */
		.main_visual .sche_widget{padding:2rem 1.6rem; border-radius:1.8rem;}
		.main_visual .sche_tit{gap:.8rem; font-size:1.8rem;}
		.main_visual .sche_nav{gap:.5rem;}
		.main_visual .sche_nav button, .main_visual .sche_nav .sche_all{width:3rem; height:3rem; border-radius:.9rem; font-size:1.5rem;}
		.main_visual .sche_nav button .arrow{width:.7rem;}
		.main_visual .week_list.depth-1{gap:.2rem; margin-top:2rem;}
		.main_visual .week_list.depth-1 li{min-width:0; padding:1rem 0 1.8rem;}
		.main_visual .week_list.depth-1 li.has_sche::after{bottom:.9rem; width:.6rem; height:.6rem;}
		.main_visual .week_list.depth-1 .day{font-size:1.4rem;}
		.main_visual .week_list.depth-1 .date{margin-top:.5rem; font-size:1.6rem;}
		.main_visual .sche_list.depth-1 li{gap:1.2rem; padding:1.3rem 0;}
		.main_visual .sche_list.depth-1 .time{width:4.6rem; font-size:1.4rem;}
		.main_visual .sche_list.depth-1 .desc{font-size:1.6rem;}
		.main_visual .sche_empty{font-size:1.6rem;}
		.main_visual .btn_more{height:4.8rem; font-size:1.6rem;}
		/* 버튼이 36px 정도로 줄어드는 구간이라 아이콘은 기본 크기로 되돌린다 */
		.main_visual .sns_btn{aspect-ratio:auto; height:5rem; border-radius:1.3rem;}
		.main_visual .sns_btn::before{width:2rem; height:2rem; margin:-1rem 0 0 -1rem; background-size:auto 2rem;}
		.main_visual .sns_btn.inst::before{background-position-x:0;}
		.main_visual .sns_btn.ytub::before{background-position-x:-3rem;}
		.main_visual .sns_btn.face::before{background-position-x:-6rem;}
		.main_visual .sns_btn.blog::before{background-position-x:-9rem;}
		.main_visual .sns_btn.xtwt::before{width:1.5rem; height:1.5rem; margin:-.75rem 0 0 -.75rem;}
		.main_visual .sns_btn.tik::before{width:1.7rem; height:1.9rem; margin:-.95rem 0 0 -.85rem;}
	}
	/* 미디어쿼리 끝 */
/* main_visual - 끝 */


/* pledge_ulsan - 시작 */
.pledge_ulsan{position:relative; padding:var(--sec_pad) 0 6rem; background:linear-gradient(180deg,#fff 0%,#eef4fb 100%); overflow:hidden; padding-top:10rem;}
.pledge_ulsan::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, #dbecff, rgb(255 255 255 / 0%));
    pointer-events: none;
	z-index:1;
}
.pledge_ulsan::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(to top, #003366, rgb(0 51 102 / 50%), rgb(0 51 102 / 0%));

    pointer-events: none;
    opacity: 0.1;
    z-index: 2;
}
/* 장식 워드 : PC 기준 위치는 원본 유지, 타이틀이 2줄이 되는 구간에서만 top을 보정한다 */
.pledge_ulsan .deco_word, .gallery_sogae .deco_word{
  position:absolute; right:4rem; font-size:var(--deco); font-weight:800; line-height:1;
  letter-spacing:-.6rem; white-space:nowrap; user-select:none; pointer-events:none;
  background:linear-gradient(to bottom, rgb(44 118 229 / 15%) 0%, rgba(26,95,180,.03) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.pledge_ulsan .deco_word{top:10rem;}
.gallery_sogae .deco_word{top:7rem;}
	/* 1200 이하에서 갤러리 타이틀이 2줄이 되므로 장식 워드도 함께 내려 균형을 맞춘다 */
	@media (max-width:1200px){ .gallery_sogae .deco_word{top:9.6rem;} }
.pledge_ulsan .sec_in{position:relative; z-index: 10;}
.pledge_ulsan .sec_head{margin-bottom:1.5rem;}

.pledge_ulsan .pledge_slider{position:relative; width:100%; height:42rem; margin-left:-5rem; 
-webkit-user-select: none;  /* 사파리, 크롬, 오페라 브라우저 */
-moz-user-select: none;     /* 파이어폭스 */
-ms-user-select: none;      /* 인터넷 익스플로러 (구버전) */
user-select: none;  }
.pledge_ulsan .pledge_track{position:relative; height:42rem;}
.pledge_ulsan .pledge_item{position:absolute; left:0; top:2rem; width:var(--pill_w); height:var(--pill_h); border-radius:22rem; overflow:hidden; color:#fff; will-change:transform;}
.pledge_ulsan .pledge_item::before{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%); pointer-events:none;}
.pledge_ulsan .pledge_item.type_blue{background:linear-gradient(135deg,#2f74c9 0%,#164e97 100%); box-shadow:0 4rem 8rem -4rem rgba(22,78,151,.6), inset 0 0 0 1px rgba(255,255,255,.08);}
.pledge_ulsan .pledge_item.type_teal{background:linear-gradient(135deg,#33b6bb 0%,#1c8388 100%); box-shadow:0 4rem 8rem -4rem rgba(31,143,148,.55), inset 0 0 0 1px rgba(255,255,255,.08);}
.pledge_ulsan .pledge_item.type_orange{background:linear-gradient(135deg,#f26f42 0%,#df4a1e 100%); box-shadow:0 4rem 8rem -4rem rgba(225,74,31,.5), inset 0 0 0 1px rgba(255,255,255,.08);}
.pledge_ulsan .pledge_item.type_rose{background:linear-gradient(135deg,#e05f82 0%,#b23a5c 100%); box-shadow:0 4rem 8rem -4rem rgba(178,58,92,.55), inset 0 0 0 1px rgba(255,255,255,.08);}
.pledge_ulsan .pledge_item.type_indigo{background:linear-gradient(135deg,#6f66d1 0%,#443a9e 100%); box-shadow:0 4rem 8rem -4rem rgba(68,58,158,.55), inset 0 0 0 1px rgba(255,255,255,.08);}
.pledge_ulsan .pledge_item.type_green{background:linear-gradient(135deg,#4fae7a 0%,#2c7c53 100%); box-shadow:0 4rem 8rem -4rem rgba(44,124,83,.55), inset 0 0 0 1px rgba(255,255,255,.08);}
.pledge_ulsan .pledge_item.type_gold{background:linear-gradient(135deg,#e0a72e 0%,#b9791a 100%); box-shadow:0 4rem 8rem -4rem rgba(185,121,26,.5), inset 0 0 0 1px rgba(255,255,255,.08);}
.pledge_ulsan .pledge_item.type_navy{background:linear-gradient(135deg,#4a5a78 0%,#28324a 100%); box-shadow:0 4rem 8rem -4rem rgba(40,50,74,.6), inset 0 0 0 1px rgba(255,255,255,.08);}
.pledge_ulsan .pl_glow{position:absolute; right:0; top:0; bottom:0; width:46%; background-repeat:no-repeat; background-position:right top calc(3rem * var(--fx)); background-size:auto; opacity:.26; pointer-events:none; transition:all 0.8s ease;}
.pledge_ulsan .type_blue .pl_glow{background-image:url("../uploads/promise_illust1.svg");}
.pledge_ulsan .type_teal .pl_glow{background-image:url("../uploads/promise_illust2.svg");}
.pledge_ulsan .type_orange .pl_glow{background-image:url("../uploads/promise_illust3.svg");}
.pledge_ulsan .type_rose .pl_glow{background-image:url("../uploads/promise_illust4.svg");}
.pledge_ulsan .type_indigo .pl_glow{background-image:url("../uploads/promise_illust5.svg");}
.pledge_ulsan .type_green .pl_glow{background-image:url("../uploads/promise_illust6.svg");}
.pledge_ulsan .type_gold .pl_glow{background-image:url("../uploads/promise_illust7.svg");}
.pledge_ulsan .type_navy .pl_glow{background-image:url("../uploads/promise_illust8.svg");}
.pledge_ulsan .pl_text{position:relative; z-index:1; padding:7.4rem 0 0 12rem;}
.pledge_ulsan .pl_sub{display:inline-block; font-family:"PartialSansKR","Pretendard",sans-serif; font-size:2.8rem; letter-spacing:.05rem; opacity:.95; white-space:nowrap; transition:font-size .6s cubic-bezier(.4,0,.2,1), opacity .45s ease;}
.pledge_ulsan .pl_tit{margin-top:.4rem; font-family:"PartialSansKR","Pretendard",sans-serif; font-size:7.2rem; line-height:1.02; text-shadow:0 .6rem 2rem rgba(0,0,0,.14); white-space:nowrap; transition:font-size .6s cubic-bezier(.4,0,.2,1), opacity .45s ease;}
.pledge_ulsan .pl_tit .md_dot{font-family:"Pretendard",sans-serif;}
.pledge_ulsan .pl_desc{margin-top:2.4rem; font-size:2.1rem; font-weight:500; letter-spacing:-.03rem; color:rgba(255,255,255,.94); white-space:nowrap; transition:opacity .35s ease, margin .5s cubic-bezier(.4,0,.2,1), max-height .5s cubic-bezier(.4,0,.2,1);}
.pledge_ulsan .pl_desc strong{font-weight:800; color:#fff;}
.pledge_ulsan .btn_detail{display:inline-flex; flex-shrink:0; align-items:center; white-space:nowrap; gap:1.5rem; height:5.4rem; margin-top:3.4rem; padding:0 1.5rem 0 2.5rem; border-radius:3rem; font-size:1.6rem; font-weight:700; color:#fff; box-shadow:0 1.2rem 2.6rem -1.2rem rgba(0,0,0,.45); transition:transform .25s ease, background .25s ease, opacity .45s ease .12s, visibility 0s linear .12s;}
.pledge_ulsan .btn_detail .ico_arrow{display:grid; place-items:center; width:3.4rem; height:3.4rem; border-radius:50%; background:rgba(255,255,255,.22); font-size:1.6rem; transition:transform .25s ease;}
.pledge_ulsan .type_blue .btn_detail{background:#0f3f80;}
.pledge_ulsan .type_teal .btn_detail{background:#116e73;}
.pledge_ulsan .type_orange .btn_detail{background:#b23415;}
.pledge_ulsan .type_rose .btn_detail{background:#93304c;}
.pledge_ulsan .type_indigo .btn_detail{background:#372f80;}
.pledge_ulsan .type_green .btn_detail{background:#235f41;}
.pledge_ulsan .type_gold .btn_detail{background:#946014;}
.pledge_ulsan .type_navy .btn_detail{background:#1e2738;}
.pledge_ulsan .btn_detail:hover{transform:translateY(-.3rem);}
.pledge_ulsan .type_blue .btn_detail:hover{background:#0c356c;}
.pledge_ulsan .type_teal .btn_detail:hover{background:#0e5c60;}
.pledge_ulsan .type_orange .btn_detail:hover{background:#992c11;}
.pledge_ulsan .type_rose .btn_detail:hover{background:#7c2740;}
.pledge_ulsan .type_indigo .btn_detail:hover{background:#2c2568;}
.pledge_ulsan .type_green .btn_detail:hover{background:#1c4d34;}
.pledge_ulsan .type_gold .btn_detail:hover{background:#7c5010;}
.pledge_ulsan .type_navy .btn_detail:hover{background:#161d2b;}
/* 마스코트 이미지는 컨테이너 폭이 아니라 첫 카드(pill) 크기에 비례해 배치 →
   어떤 해상도에서도 첫 번째 pledge_item 우측에 같은 비율로 붙는다 (1920px 기준값의 비율) */
.pledge_ulsan .mayor{position:absolute; left:min(calc(var(--pill_w) * .69), calc(100% - var(--pill_h) * 1.475)); right:auto; bottom:calc(-12.8rem - var(--pill_h) * .313); z-index:20; width:calc(var(--pill_h) * 1.475); height:auto; filter:drop-shadow(0 2.4rem 4rem rgba(0,0,0,.22)); pointer-events:none;}
.pledge_ulsan .pledge_ctrl{position:relative; margin-top:4rem;}
/* 활성(커진) 슬라이드 */
.pledge_ulsan .pledge_item.is_active .pl_sub{font-size:2.8rem;}
.pledge_ulsan .pledge_item.is_active .pl_tit{font-size:7.2rem;}
.pledge_ulsan .pledge_item.is_active .pl_desc{font-size:2.1rem;}

/* 비활성(안 커진) 슬라이드 */
.pledge_ulsan .pledge_item.is_inactive .pl_sub{font-size:2.4rem; opacity: 0.3;}
.pledge_ulsan .pledge_item.is_inactive .pl_tit{font-size:5.2rem; opacity: 0.3;}
/* 버튼과 마찬가지로 설명문도 통짜로 접는다 → 카드 폭이 움직이는 동안 두 줄↔한 줄로 리훌로우되는 어색함 제거 */
.pledge_ulsan .pledge_item.is_inactive .pl_desc{opacity:0; pointer-events:none;}
.pledge_ulsan .pledge_item.is_active .pl_desc{max-height:16rem; opacity:1;}
.pledge_ulsan .pl_desc{transition:opacity .35s ease, max-height .5s cubic-bezier(.4,0,.2,1);}
.pledge_ulsan .pledge_item.is_inactive .btn_detail{visibility:hidden; opacity:0; pointer-events:none; transition:opacity .3s ease, visibility 0s linear .3s;}
.pledge_ulsan .pledge_item.is_inactive .pl_glow{background-position: right bottom;}
.pledge_ulsan .pledge_item.is_inactive .pl_text{padding:7.4rem 0 0 12rem;}

	/* 미디어쿼리 시작 */
	/* 1920 → 1700px 구간부터는 컨테이너 좌우 자동여백이 사라져 카드가 화면 왼쪽 끝에 붙는다.
	   slider의 음수 마진만 제거하면 mayor도 slider 기준(padding box)이라 카드와 함께 이동해 위치가 유지된다. */
	@media (max-width:1699px){
		.pledge_ulsan .pledge_slider{margin-left:0;}
	}
	@media (max-width:1440px){
		.pledge_ulsan .pledge_slider, .pledge_ulsan .pledge_track{height:40rem;}
		.pledge_ulsan .pl_text, .pledge_ulsan .pledge_item.is_inactive .pl_text{padding:6.6rem 0 0 9rem;}
		/* 활성/비활성 동일 패딩 유지 */
		.pledge_ulsan .pl_tit, .pledge_ulsan .pledge_item.is_active .pl_tit{font-size:6.4rem;}
	}
	@media (max-width:1280px){
		.pledge_ulsan{padding-top:9rem;}
		.pledge_ulsan .pledge_slider{margin-left:0;}
		.pledge_ulsan .pledge_slider, .pledge_ulsan .pledge_track{height:38rem;}
		.pledge_ulsan .pl_text, .pledge_ulsan .pledge_item.is_inactive .pl_text{padding:5.8rem 0 0 7rem;}
		.pledge_ulsan .pl_sub, .pledge_ulsan .pledge_item.is_active .pl_sub{font-size:2.4rem;}
		.pledge_ulsan .pl_tit, .pledge_ulsan .pledge_item.is_active .pl_tit{font-size:5.6rem;}
		.pledge_ulsan .pl_desc, .pledge_ulsan .pledge_item.is_active .pl_desc{font-size:1.9rem;}
		.pledge_ulsan .pledge_item.is_inactive .pl_tit{font-size:4.4rem;}
	}
	/* 컨테이너가 좁아져 mayor가 우측 끝에 붙는 구간(≈1160px 이하)부터는
	   mayor를 카드 뒤로 보내 비활성 카드 문구가 가려지지 않게 한다 */
	@media (max-width:1024px){
		/* 하단 여백·mayor 오버행은 공통 공식(pill_h 비례)을 그대로 사용해 화면 크기별 편차를 없앤다.
		   다만 컨테이너 폭이 좁아지므로 mayor는 좌측 기준이 아니라 우측 기준으로 붙여 잘리지 않게 한다 */
		.pledge_ulsan .mayor{left:auto; right:-4%; width:calc(var(--pill_h) * 1.475); bottom:calc(-14rem - var(--pill_h) * .313);}
		/* 컨트롤을 흐름에서 빼 mayor 오버행 영역(좌측 빈 공간) 안에 배치 → 섹션 하단 여백이 오버행과 정확히 일치 */
		.pledge_ulsan .pledge_ctrl{position:relative; left:auto; bottom:auto; margin-top:3rem; max-width:44%;}
		.pledge_ulsan .pledge_slider{margin-left:0;}
		.pledge_ulsan .pledge_slider, .pledge_ulsan .pledge_track{height:35.5rem;}
		.pledge_ulsan .pledge_item{top:1.5rem; border-radius:18rem;}
		/* 태블릿 이하 : 카드가 작아져 상단 고정 여백으로는 텍스트가 프레임에 붙어 보인다 →
		   세로 중앙 정렬 + pill 곡면을 고려한 좌측 여백 / 일러스트를 피하는 우측 여백 */
		.pledge_ulsan .pl_text{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; height:100%; padding:0 11rem 0 7.6rem;}
		/* 태블릿 : 카드가 작아져 22rem 필 형태는 과해 보인다 → 카드 높이에 비례한 완만한 라운드 */
		.pledge_ulsan .pledge_item{border-radius:9rem;}
		.pledge_ulsan .pledge_item.is_inactive .pl_text{padding:0 11rem 0 7.6rem;}
		/* 좁은 화면에서는 다음 카드 미리보기 영역이 mayor와 완전히 겹친다 →
		   반쯤 가려진 문구를 보여주는 대신 색 프리뷰만 남긴다(활성 카드 문구는 그대로) */
		.pledge_ulsan .pledge_item.is_inactive .pl_text{opacity:0; transition:opacity .3s ease;}
		.pledge_ulsan .pl_sub, .pledge_ulsan .pledge_item.is_active .pl_sub{font-size:2.2rem;}
		.pledge_ulsan .pl_tit, .pledge_ulsan .pledge_item.is_active .pl_tit{font-size:4.4rem;}
		.pledge_ulsan .pledge_item.is_inactive .pl_tit{font-size:3.5rem;}
		.pledge_ulsan .pl_desc, .pledge_ulsan .pledge_item.is_active .pl_desc{font-size:1.8rem;}
		/* 설명문이 mayor 영역까지 흘러가지 않도록 폭을 제한하고 어절 단위로 줄바꿈 */
		/* 폭을 %가 아닌 고정값으로 두어 카드 폭이 변해도 줄바꿈 위치가 흔들리지 않는다 */
		.pledge_ulsan .pl_desc, .pledge_ulsan .pledge_item.is_active .pl_desc{white-space:normal; max-width:32rem; word-break:keep-all; line-height:1.45; min-height:calc(1.45em * 2);}
		.pledge_ulsan .pl_desc strong{display:inline-block;}
		.pledge_ulsan .btn_detail{height:5rem; margin-top:2.6rem;}
		/* 태블릿부터는 컨트롤이 카드 밖 여백에 놓이므로 터치 크기에 맞춰 키운다 */
		.pledge_ulsan .pledge_ctrl{gap:1.4rem;}
		.pledge_ulsan .pledge_ctrl .sld_btn{width:4rem; height:4rem;}
		.pledge_ulsan .pledge_ctrl .sld_prev{margin-left:-.6rem;}
		.pledge_ulsan .pledge_ctrl .sld_num, .pledge_ulsan .pledge_ctrl .sld_total{font-size:1.6rem;}
		.pledge_ulsan .pledge_ctrl .sld_bar{width:14rem;}
	}
	@media (max-width:768px){
		/* 모바일에서는 장식 워드가 타이틀·카드와 겹쳐 지저분해지므로 숨긴다 */
		.pledge_ulsan .deco_word{display:none;}
		.pledge_ulsan{padding-top:7.5rem;}
		.pledge_ulsan .pledge_slider, .pledge_ulsan .pledge_track{height:31rem;}
		.pledge_ulsan .pledge_item{top:1rem; border-radius:3rem;}
		/* 문구 열 폭을 mayor 이미지가 시작되는 지점(카드 폭의 약 46%) 앞에서 끊어 겹침 방지 */
		.pledge_ulsan .pl_text, .pledge_ulsan .pledge_item.is_inactive .pl_text{width:54%; padding:0 0 0 3.6rem;}
		.pledge_ulsan .pl_sub, .pledge_ulsan .pledge_item.is_active .pl_sub{font-size:2.1rem;}
		.pledge_ulsan .pl_tit, .pledge_ulsan .pledge_item.is_active .pl_tit{font-size:min(3.9rem, calc((100vw - 2 * var(--gutter)) / 5.1));}
		.pledge_ulsan .pl_desc, .pledge_ulsan .pledge_item.is_active .pl_desc{margin-top:1.8rem; font-size:1.7rem; white-space:normal; max-width:none; min-height:calc(1.45em * 2);}
		.pledge_ulsan .btn_detail{height:4.8rem; margin-top:2.2rem; font-size:1.55rem;}
		.pledge_ulsan .pl_glow{width:50%;}
		/* 카드가 화면 전체 폭이므로 카드 오른쪩 끝에 정렬하고, 다리가 잘리지 않도록 내려쓰기를 줄인다 */

		.pledge_ulsan .mayor{left:auto; right:-14%; bottom:calc(-11.5rem - var(--pill_h) * .313); width:68%; filter:drop-shadow(0 1.6rem 2.6rem rgba(0,0,0,.18));}
		/* mayor 이미지가 우상단부터 하단을 덮으니 컨트롤은 좌상단 여유 안에서만 배지한다.
		   공약 슬라이더는 스와이프를 지원하므로 상하 화살표는 감생가 진행바 중심의 콤팝트 라인으로 정리 */
		.pledge_ulsan .pledge_ctrl{position:relative; left:auto; bottom:auto; margin-top:2.2rem; max-width:42%; gap:1rem;}
		.pledge_ulsan .pledge_ctrl .sld_prev, .pledge_ulsan .pledge_ctrl .sld_next{display:none;}
		.pledge_ulsan .pledge_ctrl .sld_bar{flex:1 1 auto; width:auto;}
		.pledge_ulsan .pledge_ctrl .sld_play{width:4.4rem; height:4.4rem; margin-right:-.8rem;}
	}
	@media (max-width:480px){
		.pledge_ulsan{padding-top:6.5rem;}
		.pledge_ulsan .pledge_slider, .pledge_ulsan .pledge_track{height:29rem;}
		.pledge_ulsan .pl_text, .pledge_ulsan .pledge_item.is_inactive .pl_text{width:52%; padding:0 0 0 3.4rem;}
		.pledge_ulsan .pl_sub, .pledge_ulsan .pledge_item.is_active .pl_sub{font-size:2rem;}
		.pledge_ulsan .pl_tit, .pledge_ulsan .pledge_item.is_active .pl_tit{font-size:min(3.5rem, calc((100vw - 2 * var(--gutter)) / 4.9));}
		.pledge_ulsan .pl_desc, .pledge_ulsan .pledge_item.is_active .pl_desc{font-size:1.6rem; white-space:normal; max-width:none; min-height:calc(1.45em * 2);}
		.pledge_ulsan .btn_detail{height:4.6rem; margin-top:1.8rem; padding:0 1.2rem 0 2rem; font-size:1.5rem;}
		.pledge_ulsan .btn_detail .ico_arrow{width:2.8rem; height:2.8rem;}
		.pledge_ulsan .pl_glow{width:13rem; opacity:.2;}

		.pledge_ulsan .mayor{left:auto; right:-20%; bottom:calc(-11.5rem - var(--pill_h) * .21); width:72%;}
		.pledge_ulsan .pledge_ctrl{max-width:42%; margin-top:2rem;}
	}
	@media (max-width:380px){
		.pledge_ulsan{padding-top:5.6rem;}
		.pledge_ulsan .pledge_slider, .pledge_ulsan .pledge_track{height:27rem;}
		/* 320px : 문구 열이 너무 좁아 상세 버튼이 두 줄로 깨진다 → 열 폭을 넓히고 버튼을 콤팩트하게 */
		.pledge_ulsan .pl_text, .pledge_ulsan .pledge_item.is_inactive .pl_text{width:58%; padding:0 0 0 2.8rem;}
		.pledge_ulsan .pl_desc, .pledge_ulsan .pledge_item.is_active .pl_desc{margin-top:1.4rem; font-size:1.5rem; line-height:1.4;}
		.pledge_ulsan .btn_detail{height:4rem; margin-top:1.4rem; padding:0 .7rem 0 1.4rem; gap:.8rem; font-size:1.35rem;}
		.pledge_ulsan .btn_detail .ico_arrow{width:2.6rem; height:2.6rem; font-size:1.3rem;}
		.pledge_ulsan .btn_detail .ico_arrow .arrow{width:1rem;}
		.pledge_ulsan .pl_glow{width:10.5rem; opacity:.18;}
		.pledge_ulsan .mayor{right:-22%; width:74%; bottom:calc(-10rem - var(--pill_h) * .21);}
		.pledge_ulsan .pledge_ctrl{max-width:46%; margin-top:1.8rem;}
	}
	/* 미디어쿼리 끝 */
/* pledge_ulsan - 끝 */


/* gallery_sogae - 시작 */
.gallery_sogae{position:relative; padding:10rem 0 8rem; background:linear-gradient(180deg,#eaeff6 0%,#f5f7fb 46%,#eef2f8 100%); overflow:hidden;}
.gallery_sogae .deco_grid{position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(24,44,74,.045) calc(.13rem * var(--fx)),transparent calc(.13rem * var(--fx))); background-size:2.4rem 2.4rem; -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent); mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);}
.gallery_sogae .deco_glow{position:absolute; width:64rem; height:64rem; border-radius:50%; filter:blur(.6rem); pointer-events:none;}
.gallery_sogae .deco_glow_a{left:-18rem; top:-14rem; background:radial-gradient(circle,rgba(26,95,180,.12),transparent 66%);}
.gallery_sogae .deco_glow_b{right:-20rem; bottom:-16rem; width:68rem; height:68rem; background:radial-gradient(circle,rgba(43,167,172,.12),transparent 66%);}
.gallery_sogae .deco_line{position:absolute; left:0; right:0; top:0; height:.1rem; background:linear-gradient(90deg,transparent,rgba(24,44,74,.1),transparent); pointer-events:none;}
.gallery_sogae .sec_in{position:relative;}
.gallery_sogae .sec_head{margin-bottom:1.5rem;}

.gallery_sogae .gallery_wrap{position:relative; width:100%; margin:0; padding:0;-webkit-user-select: none;  /* 사파리, 크롬, 오페라 브라우저 */
  -moz-user-select: none;     /* 파이어폭스 */
  -ms-user-select: none;      /* 인터넷 익스플로러 (구버전) */
  user-select: none;}
.gallery_sogae .gallery_view{position:relative; height:calc((var(--card_h) + 4.6rem) * 1.387);}
.gallery_sogae .gallery_track{position:relative; height:100%;}
.gallery_sogae .gallery_item{position:absolute; top:50%; left:50%; width:var(--card_w); margin-left:calc(var(--card_w) / -2); margin-top:calc(var(--card_h) / -2 - 2.2rem); will-change:transform,opacity; transition:transform .55s cubic-bezier(.2,.7,.3,1),opacity .55s ease;}
.gallery_sogae .thumb{position:relative; display:block; width:100%; height:var(--card_h); border-radius:1.6rem; overflow:hidden; background:repeating-linear-gradient(135deg,#e6eaf0 0 2rem,#dfe4ec 2rem 4rem); box-shadow:0 1.8rem 4.4rem -2.4rem rgba(0,0,0,.4); transition:box-shadow .38s ease;}
.gallery_sogae .gallery_item:hover .thumb{box-shadow:0 3.4rem 6rem -2.6rem rgba(0,0,0,.5);}
.gallery_sogae .thumb_ph{display:grid; place-items:center; width:100%; height:100%; font-family:monospace; font-size:1.3rem; color:#97a1b0;}
.gallery_sogae .thumb_ph img{width:100%; height:100%; object-fit: cover; pointer-events: none;}
.gallery_sogae .chip{display:none;}
.gallery_sogae .cap{display:block; margin-top:1.6rem; text-align:center; color:#3d4653;}
.gallery_sogae .cap .c_date{display:none; margin-bottom:.5rem; font-size:1.3rem; font-weight:600; color:#8a93a0;}
.gallery_sogae .cap .c_tit{display:block; font-size:2rem; font-weight:700; line-height:1.35; color:#20262f;}

.gallery_sogae .g_nav{position:absolute;top:calc((var(--card_h) + 4.6rem) * .6935);transform:translateY(-50%);z-index:10;display:grid;place-items:center;width: 8rem;height:5.8rem;border-radius: calc(6.5rem * var(--fx));background: rgba(255,255,255,.92);border:1px solid #e2e8f0;color:var(--point);font-size:2.2rem;box-shadow:0 1.4rem 3rem -1.2rem rgba(0,0,0,.35);backdrop-filter:blur(.4rem);transition:all .2s;opacity: 0.72;}
.gallery_sogae .g_nav:hover{background:#fff; opacity: 1;}
.gallery_sogae .g_prev{left:3rem;}
.gallery_sogae .g_next{right:3rem;}

.gallery_sogae .g_dots{display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:3rem;}
.gallery_sogae .g_dots button{width:calc(1.6rem * var(--fx)); height:calc(.8rem * var(--fx)); border-radius:calc(.8rem * var(--fx)); background:#c4cedb; transition:width .4s ease,background .3s ease;}
.gallery_sogae .g_dots button.is_on{width:calc(3.5rem * var(--fx)); background:var(--point);}
.gallery_sogae .g_ctrl{display:flex; align-items:center; justify-content:center; gap:1.6rem; margin-top:1rem; color:#164e97;}
.gallery_sogae .g_ctrl .g_dots{margin-top:0;}
.gallery_sogae .g_ctrl .sld_btn{display:grid; place-items:center; width:2.8rem; height:2.8rem; color:inherit; transition:opacity .2s;}
.gallery_sogae .g_ctrl .sld_btn:hover{opacity:.7;}
.gallery_sogae .sec_head .hash{color: #c6d7ed;}

	/* 미디어쿼리 시작 */
	@media (max-width:1440px){
	}
	@media (max-width:1280px){
		.gallery_sogae{padding:9rem 0 7rem;}
		.gallery_sogae .cap .c_tit{font-size:1.9rem;}
		.gallery_sogae .g_nav{width:7rem; height:5.4rem;}
	}
	@media (max-width:1024px){
		.gallery_sogae .g_nav{width:6rem; height:5rem; font-size:2rem;}
		.gallery_sogae .g_prev{left:2rem;}
		.gallery_sogae .g_next{right:2rem;}
		.gallery_sogae .cap .c_tit{font-size:1.8rem;}
	}
	@media (max-width:768px){
		.gallery_sogae .deco_word{display:none;}
		.gallery_sogae .g_nav{display:none;}
		.gallery_sogae{padding:7.5rem 0 6rem;}
		.gallery_sogae .g_nav{width:5rem; height:4.6rem;}
		.gallery_sogae .g_prev{left:1rem;}
		.gallery_sogae .g_next{right:1rem;}
		.gallery_sogae .cap .c_tit{font-size:1.7rem; line-height:1.35;}
	}
	@media (max-width:480px){
		.gallery_sogae{padding:6.5rem 0 5.5rem;}
		.gallery_sogae .g_nav{width:4.4rem; height:4.4rem; font-size:1.8rem;}
		.gallery_sogae .g_prev{left:.6rem;}
		.gallery_sogae .g_next{right:.6rem;}
		.gallery_sogae .cap .c_tit{font-size:1.6rem;}
	}
	@media (max-width:380px){
		.gallery_sogae{padding:5.6rem 0 4.8rem;}
		.gallery_sogae .cap{margin-top:1.2rem;}
		.gallery_sogae .cap .c_tit{font-size:1.5rem;}
		.gallery_sogae .g_dots{margin-top:2.4rem; gap:.6rem;}
		.gallery_sogae .g_ctrl{gap:1.2rem;}
	}
	/* 타이틀이 1줄인 구간 : 2줄짜리 pledge 섹션과 상단 여백의 시각적 균형을 맞춰 보정 */
	@media (min-width:1281px){ .gallery_sogae{padding-top:12.4rem;} .gallery_sogae .deco_word{top:9.4rem;} }
	@media (min-width:1201px) and (max-width:1280px){ .gallery_sogae{padding-top:11.2rem;} .gallery_sogae .deco_word{top:9.2rem;} }
	/* 미디어쿼리 끝 */
/* gallery_sogae - 끝 */