/* ---------------- 상단 유틸바 ---------------- */
.util-bar{
  width:100%;
  background:#fafafa;
  border-bottom:1px solid #eee;
}
.util-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:8px 20px;
  display:flex;
  justify-content:flex-end;
  gap:16px;
    height:36px; /* 🔥 기준 높이 고정 */
  font-size:13px;
  color:#666;
}
.util-inner a{
  color:#666;
  text-decoration:none;
}

.util-inner a.worker{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:22px;        /* 🔥 버튼 높이 따로 */
  padding:0 10px;     /* 🔥 좌우만 */
  
background:var(--brand-strong);
  color:#fff;
  border-radius:999px;
  font-weight:600;
}
.util-inner a.worker:hover{
  background:#4CAF2F;
}
.top-wrap{
  position:sticky;
  top:0;
  z-index:999;
  transition:.3s ease;
}
.top-wrap.scrolled{
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
}
.top-wrap.scrolled .gnb a{
  color:#111;
  text-shadow:none;
}

/* ---------------- 헤더 ---------------- */
.header{
  position:relative; /* ❌ absolute 제거 */
  top:0;
  left:0;
  width:100%;
  z-index:30;
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo img{
  width:118px;
  height:auto;
  display:block;
}

.logo-white{
  display:block;
}
.logo-black{
  display:none;
}
.logo img.logo-black{
  display:none;
}

/* 스크롤 후 */
.top-wrap.scrolled .logo-white{
  display:none;
}
.top-wrap.scrolled .logo-black{
  display:block;
}
.top-wrap.scrolled .logo img.logo-black{
  display:block;
}

/* 기본 (처음) */
.region{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  background:var(--brand-strong);
  color:#fff;
  font-size:12px;
  font-weight:400;
  line-height:1;
  white-space:nowrap;
}
.gnb{
  display:flex;
  align-items:center;
  gap:30px;
}
.gnb a{
  color:#fff;
  font-weight:700;
  font-size:16px;
  text-shadow:0 2px 10px rgba(0,0,0,0.25);
}

/* 햄버거는 기본 숨김 */
.menu-btn{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  margin-left:auto;
  position:relative;
  flex:0 0 44px;
}

.menu-btn span{
  position:absolute;
  left:50%;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transform:translateX(-50%);
  display:block;
}

.menu-btn span:nth-child(1){top:13px;}
.menu-btn span:nth-child(2){top:21px;}
.menu-btn span:nth-child(3){top:29px;}

/* ---------------- 메인 비주얼 ---------------- */
.hero{
	position:relative;
	margin-top:-100px;
	padding-top:100px;
	width:100%;
	min-height:100vh;
	min-height:100svh;
	overflow:hidden;
	background-image:url('../images/main_seoul-southwest.webp');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.28);
  z-index:1;
}
@media (min-width:768px){
	.hero{
		min-height:720px;
		background-position:center 35%;
	}
}
@media (min-width:1600px){
	.hero{
		background-position:center 40%;
	}
}
.seo-hidden{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
.hero-inner{
  position:absolute;
  inset:0;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:190px 64px 80px;
  display:flex;
  align-items:flex-start;
    z-index:2;
	  transform:translateY(40px);
  opacity:0;
  transition:all .8s ease;
}
.hero-inner.active{
  transform:translateY(0);
  opacity:1;
}

.hero-copy{
  width:100%;
  max-width:520px;
  color:#fff;
      margin-top:-40px; 
}

.hero-copy h2{
  margin:0 0 20px;
  font-size:65px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-0.05em;
  word-break:keep-all;
  text-shadow:0 3px 10px rgba(0,0,0,0.35);
}

.hero-copy p{
  margin:0;
  font-size:26px;
  line-height:1.45;
  word-break:keep-all;
  text-shadow:0 2px 8px rgba(0,0,0,0.3);
}

/* =========================
   히어로 정렬 (핵심)
========================= */

.hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;   /* 👉 PC 쏠림 해결 */
  align-items:flex-start;
   max-width:520px;          /* 👉 텍스트 폭 제한 (핵심) */
}

/* =========================
   CTA 전체
========================= */
.hero-cta-group{
	width:100%;
	margin-top:24px;
}

/* 메인 버튼 */
.cta-main{
	display:inline-flex;
	width:320px;              /* 👉 PC에서 적당한 크기 */
	max-width:100%;

	padding:16px;
	border-radius:14px;

	font-size:16px;
	font-weight:700;
	text-align:center;
}

/* 근로자 묶음 */
.worker-box{
	margin-top:14px;
}

/* 근로자 문구 */
.worker-guide{
    font-size:16px !important;
	color:rgba(255,255,255,0.9);
	margin-bottom:6px !important;
}

/* 근로자 버튼 */
.cta-sub{
	display:block;
	width:320px;             /* 👉 메인 버튼과 맞춤 */
	max-width:100%;
	padding:15px;
	border-radius:14px;
	font-size:15px;
	text-align:center;
	background:rgba(255,255,255,0.25);
	color:#fff;
	border:1px solid rgba(255,255,255,0.5);
}
@media (max-width:768px){
	.hero-cta-group{
	  display:flex;
	flex-direction:column;
		align-items:center;
	}
}
/* ---------------- 모바일 ---------------- */
@media (max-width:767px){
	  .top-wrap{
		background:rgba(255,255,255,0.0);
	  }
	  .top-wrap.scrolled{
		background:#fff;
	  }
	  .util-bar{
		display:none;
	  }
	  .header{
		top:0;
	  }
	  .header-inner{
		padding:16px 20px; /* 🔥 위아래 동일 */
		display:flex;
		align-items:center; 
		justify-content:space-between;
	  }
	  .logo{
		gap:8px;
	  }
	  .logo img{
		width:108px;
	  }
	  .region{
		height:26px;
		padding:0 9px;
		font-size:11px;
	  }
	  .gnb{
		display:none;
	  }
	  .gnb a{
		color:#111;   /* 🔥 검정으로 */
		text-shadow:none;
	  }
	  .menu-btn{
		display:block;
	  }
	  .hero{
		min-height:100svh;
		background-position:center center;
	  }
	  .hero-inner{
		padding:0 20px 60px;
		align-items:center;
		justify-content:flex-end;
	  }
	  .hero-copy{
		transform:translateY(60px);
	  }
	  .hero-copy h2{
		font-size:40px;
		line-height:1.18;
	  margin:80px 0 24px;
	  }
	  .hero-copy p{
		font-size:17px;
		line-height:1.45;
		margin:0 0 24px;
	  }
}

/* ---------------- 모바일 메뉴 ---------------- */
.mobile-dim{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,0.45);
	opacity:0;
	visibility:hidden;
	transition:.25s ease;
	z-index:98;
}

.mobile-nav{
	position:fixed;
	top:0;
	right:0;
	width:min(86vw, 360px);
	height:100vh;
	background:#fff;
	box-shadow:-10px 0 30px rgba(0,0,0,0.15);
	transform:translateX(100%);
	transition:.25s ease;
	z-index:9999;
	padding:18px 18px 28px;
}

.mobile-nav-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-bottom:12px;
}

.mobile-nav-head strong{
	font-size:18px;
	color:#111;
	font-weight:600;
}

.mobile-close{
	padding:0;
	border:0;
	background:none;
	font-size:34px;
	line-height:1;
	color:#111;
	cursor:pointer;
}

.mobile-nav-quick{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	padding:16px 0 18px;
	margin-bottom:8px;
	border-bottom:1px solid #f0f0f0;
}

.mobile-nav-quick a{
	display:flex;
	align-items:center;
	gap:8px;
	min-height:54px;
	padding:0 14px;
	border-radius:14px;
	background:#f8f8f8;
	color:#111;
	font-size:13px;
	font-weight:700;
}
.top-wrap.scrolled .menu-btn span{
	background:#111;
}

.quick-ico{
	font-size:16px;
	line-height:1;
}

.mobile-nav-links{
	display:flex;
	flex-direction:column;
	gap:10px;
	padding-top:18px;
}

.mobile-nav-links a{
	display:flex;
	align-items:center;
	min-height:58px;
	padding:0 2px;
	font-size:17px;
	font-weight:600;
	color:#111;
	border-bottom:1px solid #efefef;
}

body.nav-open{
	overflow:hidden;
}

body.nav-open .mobile-dim{
	opacity:1;
	visibility:visible;
}
body.nav-open .mobile-nav{
	transform:translateX(0);
}