@charset "utf-8";

/* ============================================================
   울산광역시 열린시장실 — base.css (리셋 / 변수 / 공통 요소)
   ============================================================ */


/* Pretendard : 로컬 파일만 사용 (CDN 폴백 제거 - 2026-08:
   사이트 CSP가 jsdelivr.net을 허용하지 않아 CDN 시도 시 항상 콘솔 에러만 발생함)
   → css/font/PretendardVariable.woff2 파일이 있어야 이 폰트가 적용된다 */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('./font/PretendardVariable.woff2') format('woff2-variations');
}

/* reset & common - 시작 */
@font-face {
    font-family: 'PartialSansKR';
    src: url('./font/PartialSansKR-Regular.woff2') format('woff2'),
        url('./font/PartialSansKR-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Light 굵기 설정 */
@font-face {
  font-family: 'YuhanKimberlyPureunSup';
  src: url('./font/YK_PureunSup_Light.eot'); /* IE9 호환용 */
  src: url('./font/YK_PureunSup_Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./font/YK_PureunSup_Light.woff2') format('woff2'), /* 최신 브라우저 */
       url('./font/YK_PureunSup_Light.woff') format('woff'); /* 범용 브라우저 */
  font-weight: 300; /* Light를 사용할 두께 수치 */
  font-style: normal;
}

/* Medium 굵기 설정 */
@font-face {
  font-family: 'YuhanKimberlyPureunSup';
  src: url('./font/YK_PureunSup_Medium.eot');
  src: url('./font/YK_PureunSup_Medium.eot?#iefix') format('embedded-opentype'),
       url('./font/YK_PureunSup_Medium.woff2') format('woff2'),
       url('./font/YK_PureunSup_Medium.woff') format('woff');
  font-weight: 500; /* Medium을 사용할 두께 수치 */
  font-style: normal;
}

/* Bold 굵기 설정 */
@font-face {
  font-family: 'YuhanKimberlyPureunSup';
  src: url('./font/YK_PureunSup_Bold.eot');
  src: url('./font/YK_PureunSup_Bold.eot?#iefix') format('embedded-opentype'),
       url('./font/YK_PureunSup_Bold.woff2') format('woff2'),
       url('./font/YK_PureunSup_Bold.woff') format('woff');
  font-weight: 700; /* Bold를 사용할 두께 수치 */
  font-style: normal;
}


:root{
	--fx:1;
	--container:144rem;
	/* 넓은 콘텐츠 영역 : 바깥 폭·여백은 헤더와 완전히 동일하게 두고(어긋남 방지),
	   넓게 쓰는 느낌은 안쪽 시트 여백을 줄여서 만든다 */
	--container_wide:var(--container);
	--gutter:6rem;
	--point:#1a5fb4;
	--point_dk:#164e97;
	--ink:#16181c;
	--mv_h:82rem;
	--pill_w:90rem;
	--pill_h:40rem;
	--pill_gap:3.6rem;
	--mayor_left:80rem;
	--mayor_h:48rem;
	--card_w:44rem;
	--card_h:29.5rem;
	--card_gap:3rem;
	--sec_pad:12rem;
	--tit:5rem;
	--deco:20rem;
}

*{margin:0; padding:0; box-sizing:border-box;}
html{font-size:62.5%; -webkit-text-size-adjust:100%; scrollbar-gutter:stable;}
/* 페이지 스크롤바 : 브랜드 블루 계열의 얇은 필 형태 */
/* 폭은 브라우저 기본값(15px)과 동일하게 유지 — 좁히면 레이아웃 폭이 늘어 min-width 브레이크포인트가 앞당겨진다 */
html{scrollbar-color:#9db9dd #eef3f9;}
::-webkit-scrollbar{width:15px; height:15px;}
::-webkit-scrollbar-track{background:#eef3f9;}
::-webkit-scrollbar-thumb{border:4px solid transparent; border-radius:15px; background:#9db9dd; background-clip:content-box; transition:background-color .2s;}
::-webkit-scrollbar-thumb:hover{background:var(--point); background-clip:content-box;}
::-webkit-scrollbar-thumb:active{background:var(--point_dk); background-clip:content-box;}
::-webkit-scrollbar-corner{background:transparent;}
	/* 큰 화면에서 rem 기준을 키워 전체 스케일업 */
body{font-family:"Pretendard Variable","Pretendard",-apple-system,sans-serif; font-size:1.6rem; line-height:1.5; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased;}
ul,ol{list-style:none;}
a{color:inherit; text-decoration:none;}
a:hover{color:var(--point);}
img{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit;}
address{font-style:normal;}
em{font-style:normal;}

.blind{overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap;}

.skip_nav{position:absolute; top:0; left:0; z-index:9999; width:100%;}
.skip_nav a{position:absolute; left:0; top:-4.4rem; display:block; width:100%; padding:1rem 0; text-align:center; font-weight:700; color:#fff; background:var(--point_dk); transition:top .2s;}
.skip_nav a:focus{top:0;}

.wrap{overflow-x:clip; overflow-y:visible; width:100%;}
.container{position:relative;}
.sec_in{width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}

/* 공통 섹션 헤더 */
.sec_head{display:flex; align-items:center; gap:1.8rem;}
.sec_head .sec_tit{flex:1 1 auto; min-width:0; text-wrap:pretty; font-family: 'YuhanKimberlyPureunSup';}
.sec_head .sec_tit > span.light_b{display:inline-block; font-weight:500; font-size:.72em; line-height:1.35;}
.sec_head .sec_tit .m_br{display:none;}
	/* 타이틀이 + 버튼과 만나 강제 줄바꿈되기 전에, 의도한 위치에서 두 줄로 끊는다 */
	@media (max-width:1200px){ .sec_head .sec_tit .m_br{display:inline;} }
.sec_head .hash{font-size: 12rem;font-weight:600; line-height: .7; color:#e3efff; position:absolute; z-index: -1; font-family:'esamanru'; top:-1.7rem; left:-5rem; mix-blend-mode:multiply;}
.sec_head .sec_tit{font-size:var(--tit); font-weight:800; letter-spacing:-.1rem; color:var(--ink); line-height: 1.3;}
.sec_head .btn_plus{display:grid; place-items:center; flex:0 0 auto; width:4.8rem; height:4.8rem; margin-left:auto; border-radius:50%; background:#fff; border:1px solid #dce4ee; color:var(--point); font-size:2.6rem; padding-bottom: .4rem; box-shadow:0 .8rem 2rem -1rem rgba(26,95,180,.32); transition:transform .3s;}
.sec_head .btn_plus:hover{transform:rotate(90deg);}

/* 스크롤 리빌 */
.js_reveal{opacity:0; transform:translateY(5.6rem); filter:blur(.6rem); transition:opacity 1.5s cubic-bezier(.16,1,.3,1),transform 1.5s cubic-bezier(.16,1,.3,1),filter 1.2s cubic-bezier(.16,1,.3,1); transition-delay:var(--rd,0ms); will-change:opacity,transform;}
.js_reveal.is_in{opacity:1; transform:none; filter:none;}
@media (prefers-reduced-motion:reduce){ .js_reveal{opacity:1; transform:none; filter:none; transition:none;} }

	/* 미디어쿼리 시작 ─ 기준점 : 1440 / 1280 / 1024(태블릿) / 768 / 480 / 380 */
	@media (max-width:1440px){
		:root{--container_wide:var(--container); --gutter:5rem; --pill_w:82rem; --pill_h:38rem; --card_w:44rem; --card_h:29.5rem; --tit:4.7rem; --deco:17rem;}
	}
	@media (max-width:1280px){
		:root{--gutter:4.5rem; --pill_w:74rem; --pill_h:36rem; --card_w:40rem; --card_h:26.8rem; --tit:4.4rem; --sec_pad:10rem; --deco:14rem;}
		.sec_head .hash{font-size:9rem; top:-1rem; left:-3rem;}
	}
	@media (max-width:1024px){
		:root{--gutter:4rem; --pill_w:62rem; --pill_h:34rem; --card_w:36rem; --card_h:24.2rem; --tit:4.2rem; --sec_pad:9rem; --deco:11rem;}
		.sec_head{gap:1.4rem;}
		.sec_head .hash{font-size:7.5rem; left:-2rem;}
		.sec_head .btn_plus{width:4.4rem; height:4.4rem; font-size:2.4rem;}
	}
	@media (max-width:768px){
		.sec_head{align-items:flex-start; gap:1.2rem;}
		.sec_head .btn_plus{margin-top:.2rem;}
		:root{--gutter:3rem; --pill_w:100%; --pill_h:30rem; --card_w:calc((100vw - 2 * 3rem) * .72); --card_h:calc((100vw - 2 * 3rem) * .5184); --card_gap:1.4rem; --tit:3.8rem; --sec_pad:7rem; --deco:8rem;}
		.sec_head .hash{font-size:6rem; top:-.6rem; left:-1rem;}
		.js_reveal{transform:translateY(3rem);}
	}
	@media (max-width:480px){
		:root{--gutter:2rem; --pill_h:28rem; --card_w:calc((100vw - 2 * 2rem) * .72); --card_h:calc((100vw - 2 * 2rem) * .5184); --card_gap:1.2rem; --tit:3.5rem; --sec_pad:6rem; --deco:6rem;}
		.sec_head{gap:1rem;}
		/* 모바일 섹션 헤더 : 부제 줄 우측에 + 버튼을 얹고, 큰 제목은 전체 폭을 쓰게 2단 구성
		   → 버튼 때문에 제목이 좁아져 어색하게 줄바꿈되거나 우측이 비는 문제를 구조로 해결 */
		.sec_head{position:relative; display:block;}
		.sec_head .sec_tit{display:block;}
		.sec_head .sec_tit > span.light_b{padding-right:5.4rem; font-size:.64em;}
		.sec_head .btn_plus{position:absolute; right:0; top:0; margin:0; width:4rem; height:4rem; font-size:2.2rem;}
	}
	@media (max-width:380px){
		:root{--gutter:1.6rem; --card_w:calc((100vw - 2 * 1.6rem) * .78); --card_h:calc((100vw - 2 * 1.6rem) * .5616); --card_gap:1rem; --tit:3.1rem; --sec_pad:5.2rem; --deco:5rem;}
		.sec_head{gap:.8rem;}
		/* 320px : 부제(15자)가 버튼 자리까지 피하다 한 글자만 다음 줄로 떨어지는 것을 방지 */
		.sec_head .btn_plus{width:3.6rem; height:3.6rem; font-size:2rem;}
		.sec_head .sec_tit > span.light_b{padding-right:4.2rem; font-size:.58em;}
		.pledge_ulsan .pl_sub, .pledge_ulsan .pledge_item.is_active .pl_sub{font-size:1.85rem;}
		.pledge_ulsan .pl_tit, .pledge_ulsan .pledge_item.is_active .pl_tit{font-size:3rem;}
	}
	/* 큰 화면 스케일업 (min-width) */
	@media (min-width:1600px){ html{font-size:66%;} :root{--fx:0.9469697;} }
	@media (min-width:1800px){ html{font-size:70%;} :root{--container:144rem; --fx:0.8928571;} }
	@media (min-width:2100px){ html{font-size:76%;} :root{--container:162rem; --fx:0.8223684;} }
	/* 미디어쿼리 끝 */
/* reset & common - 끝 */