/* ═══════════════════════════════════════════════════════════
   nodongtalktalk 메인 스킨 — 구미노동법률상담센터 디자인 산출물 기반 홈 화면.
   - main.css 는 홈(FrontHomeController)에서만 로드됨 → .site-main 제약 해제 안전.
   - 전체 규칙은 .home-wrap 하위로 스코프해 레이아웃 크롬에 누수 없음.
   ═══════════════════════════════════════════════════════════ */

/* 레이아웃의 .site-main 은 일반 콘텐츠 페이지 여백용 padding을 갖는데, 홈 화면은
   디자인 산출물처럼 섹션마다 자체 여백(엣지투엣지 히어로·파트너 배너 등)을 쓰므로 상쇄한다.
   width:100vw로 명시해 flex stretch를 받지 않고 실제 뷰포트 폭을 그대로 따르게 한다 —
   .home-partners 등 엣지투엣지 섹션은 이 100vw 폭을 그대로 상속받아 자체적으로 vw 단위를
   다시 계산할 필요가 없다(스크롤바 유무로 vw와 실제 폭이 어긋나는 문제 회피).
   base .site-main의 min-width:1600px(1024px 이하는 해제)는 여기서 재정의하지 않으므로 그대로
   상속 — 뷰포트가 1600px 미만(1024px 초과)이면 width:100vw보다 min-width가 우선해 헤더/푸터와
   동일하게 1600px을 유지한다.
   ⚠ 단, .site-main 자체에는 min-width가 없어(1600px은 body 것) width:100vw가 그대로 적용돼
   1600px 밑에서 뷰포트를 따라 줄어들던 문제 — .site-main에도 동일한 min-width:1600px을 직접 걸어
   1024px(아래 @media에서 해제)까지는 헤더/푸터처럼 고정폭을 유지하게 한다. */
.site-main:has(.home-wrap) { width: 100vw; min-width: 1600px; max-width: none; margin: 0; padding: 0; }

.home-wrap {
  --hw-blue1: #15527A;
  --hw-blue2: #15527A;
  --hw-border: #ddd;
  --hw-radius: 25px;
  --hw-maxw: 1400px;
  position: relative;
}
.home-wrap * { box-sizing: border-box; }
.home-wrap::after {
  content: '';
  position: absolute; left: 0; top: 0; width: 100%;
  aspect-ratio: 1944 / 716; z-index: -1; pointer-events: none; opacity: .3;
  background-image: url('./images/main_bg.png');
  background-size: 100% 100%; background-repeat: no-repeat; background-position: top center;
}
.home-inner-wide { max-width: var(--hw-maxw); margin: 0 auto; padding: 0; }

.home-section { margin-top: 50px; }
.home-biz { margin-top: 120px; }
.home-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.home-title { margin: 0; font-size:3rem; font-weight: 700; color: #000; }
.home-notice .home-title, .home-gallery .home-title { color: #142B3A; }
.home-gallery .home-more { background: none; }
.home-more {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  background: #fff; border: 1.5px solid #142B3A; color: #142B3A;
  font-weight: 700; font-size:1.5rem; padding: 10px 20px; border-radius: 999px;
  transition: background .15s, color .15s;
}
/* svg의 stroke가 currentColor가 아니라 마크업에 색이 고정 지정돼 있어(#142B3A/#fff), 아이콘도 별도로 반전 */
.home-more:hover, .home-more:active { background: #142B3A; color: #fff; }
.home-more:hover svg, .home-more:active svg { stroke: #fff; }
.home-more--light { background: none; border-color: #fff; color: #fff; }
.home-more--light:hover, .home-more--light:active { background: #fff; color: #000; }
.home-more--light:hover svg, .home-more--light:active svg { stroke: #000; }

/* ── 공통 캐러셀 화살표 ─────────────────────────────────── */
.home-hero__arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hw-border); background: #fff; color: #666;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.08); flex: none;
  transition: background .15s, color .15s, border-color .15s;
}
.home-hero__arrow--sm { width: 36px; height: 36px; }
.home-hero__arrow:hover, .home-hero__arrow:active { background: var(--hw-blue1); border-color: var(--hw-blue1); color: #fff; }

/* ════════════════════════════════════════════════════════════
   ① 히어로 — 디자인 산출물 index.html #top/.hero-box 수치 그대로
   ════════════════════════════════════════════════════════════ */
.home-hero-section {
  width: 100%; max-width: 1580px; margin: 0 auto; box-sizing: border-box;
  padding: 30px 0 0; position: relative;
}
.home-hero-box { position: relative; }
/* 이미지·화살표 전용 박스 — 클리핑(overflow:hidden)은 여기만 걸어, 767px 이하에서
   .home-hero__cta-wrap이 position:static으로 바뀌어도 이 박스 밖(아래)에 그대로 노출된다. */
.home-hero__media {
  position: relative; border-radius: var(--hw-radius); overflow: hidden;
  width: 100%; aspect-ratio: 1580 / 600; min-height: 220px; color: var(--hw-blue1);
  background: linear-gradient(160deg, #1f5cab, #6b7fc9);
}
.home-hero__slides { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; user-select: none; }
.home-hero__slides:active { cursor: grabbing; }
.home-hero__slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s ease;
}
.home-hero__slide.is-active { opacity: 1; }
.home-hero__nav {
  position: absolute; top: 50px; right: 50px; z-index: 5;
  display: flex; align-items: center; gap: 10px;
}
.home-hero__nav .home-hero__arrow {
  width: 30px; height: 30px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.5); color: #fff; box-shadow: none;
}
.home-hero__nav .home-hero__arrow:hover,
.home-hero__nav .home-hero__arrow:active { background: var(--hw-blue1); border-color: var(--hw-blue1); color: #fff; }
.home-hero__pos { font-size:1.3rem; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }

.home-hero__cta-wrap { position: absolute; left: 0; right: 0; bottom: -70px; z-index: 6; max-width: 1400px; margin: 0 auto; }
.home-hero__cta {
  border-radius: 20px;
  box-shadow: 0px 5px 15px rgba(5,20,45,.22); padding: 30px; box-sizing: border-box;
  background-image: linear-gradient(to right, rgba(21,82,122) 50%, rgba(21,147,140));
}
.home-hero__cta-inner {
  max-width: var(--hw-maxw); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 24px;
  box-sizing: border-box;
}
.home-hero__cta-text { flex: 1; min-width: 0; display: block; color: #fff; font-weight: 500; font-size:2.4rem; line-height: 1.3; }
.home-hero__quick { display: flex; justify-content: space-between; flex: 0 1 439px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.home-hero__quick li { position: relative; width: 100%; text-align: center; }
.home-hero__quick a { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-size:1.7rem; line-height: 1.3; transition: opacity .15s; }
.home-hero__quick a:hover { opacity: .72; }
.home-hero__quick-ic { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.home-hero__quick-ic img { width: 34px; height: 34px; display: block; filter: brightness(0) invert(1); }

/* ════════════════════════════════════════════════════════════
   ② 사업안내 3카드 — 디자인 산출물 .biz-card/.biz-chip 수치 그대로
   ════════════════════════════════════════════════════════════ */
.home-biz__grid { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
.home-biz__card { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; box-sizing: border-box; border-radius: 20px; padding: 45px 30px; transition: .18s; }
.home-biz__card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(5,20,45,.14); }
.home-biz__card--legal { background: #DDEEF5; }
.home-biz__card--edu { background: #E2F1ED; }
.home-biz__card--welfare { background: #F6E8C9; }
.home-biz__card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.home-biz__head { display: flex; align-items: center; gap: 14px; }
.home-biz__text { flex: 1; min-width: 0; }
.home-biz__title-row { display: flex; align-items: center; gap: 10px; }
.home-biz__title-row h3 { flex: 1; min-width: 0; margin: 0; font-size:2.2rem; font-weight: 700; color: #142B3A; line-height: 1.3; }
.home-biz__icon { flex: none; width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); }
.home-biz__card--legal .home-biz__icon { color: var(--hw-blue1); background: #c9e9f6; }
.home-biz__card--edu .home-biz__icon { color: #17a589; background: #d2efe7; }
.home-biz__card--welfare .home-biz__icon { color: #e88219; background: #f5e1b4; }
.home-biz__arrow {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .15s;
}
.home-biz__card--legal .home-biz__arrow { color: var(--hw-blue1); }
.home-biz__card--edu .home-biz__arrow { color: #17a589; }
.home-biz__card--welfare .home-biz__arrow { color: #ff6b57; }
.home-biz__card--legal:hover .home-biz__arrow { background: var(--hw-blue1); color: #fff; transform: translateX(3px); }
.home-biz__card--edu:hover .home-biz__arrow { background: #17a589; color: #fff; transform: translateX(3px); }
.home-biz__card--welfare:hover .home-biz__arrow { background: #ff6b57; color: #fff; transform: translateX(3px); }
.home-biz__desc { margin: 15px 0 0 0; font-size:1.6rem; color: #4a4a4a; line-height: 1.6; }

/* ════════════════════════════════════════════════════════════
   ③ 센터소식(옛 공지사항, 최신 3건 고정 목록) + 미디어자료
   ════════════════════════════════════════════════════════════ */
.home-notice-media { display: flex; gap: 50px; align-items: stretch; }
.home-notice { display: flex; flex-direction: column; flex: 1 1 0; padding: 30px 0; min-width: 0; }
.home-notice__intro { margin: -10px 0 22px; font-size:1.6rem; color: #666; line-height: 1.6; }
.home-notice__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.home-notice__list a {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 28px; border-radius: 16px; border: 1px solid var(--hw-border); background: #fff; color: inherit; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.home-notice__list a:hover { border-color: #15527A !important; box-shadow: 0 10px 26px rgba(21,82,122,.16) !important; }
/* 분류별 색상 — 게시판(front/board/list/list.html)의 .ds-badge 색상 토큰 값과 동일하게 맞춤(공지=파랑 기본값) */
.home-notice__cat {
  flex: none; font-size:1.4rem; font-weight: 700; color: var(--hw-blue1);
  background: color-mix(in srgb, var(--hw-blue1) 10%, #fff); padding: 6px 14px; border-radius: 999px;
}
.home-notice__cat.is-success { color: #176b3b; background: #e9f6ee; }
.home-notice__cat.is-warn    { color: #8f5907; background: #fdf3e3; }
.home-notice__cat.is-neutral { color: #717c8c; background: #eef1f5; }
.home-notice__t { flex: 1; min-width: 0; font-size:1.9rem; font-weight: 700; color: #142B3A; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-notice__date { flex: none; font-size:1.5rem; color: #aaa; }

.home-media { border-radius: 20px; padding: 35px 30px; box-sizing: border-box; color: #fff; display: flex; flex-direction: column; flex: 0 0 450px; min-width: 0; background: linear-gradient(160deg,#15b8a6 0%,#0a5a58 60%,#052e26 100%); box-shadow: 2.7px 7.5px 28.5px 1.5px rgba(0,0,0,.1); }
.home-media .home-title { color: #fff; font-size:2.8rem; font-weight: 700; }
.home-media__tabs { display: flex; gap: 8px; margin-bottom: 15px; }
.home-media__tabs button {
  flex: 1; text-align: center; padding: 10px 0; border-radius: 8px; cursor: pointer; font-family: inherit;
  font-weight: 700; font-size:1.6rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); color: #fff;
}
.home-media__tabs button.is-on { background: #fff; color: #0a5a58; border-color: #fff; }
.home-media__panel { flex: 1; min-height: 0; position: relative; }
.home-media__stage { display: block; width: 100%; height: 100%; min-height: 220px; border-radius: 14px; overflow: hidden; background-color: #14315e; background-size: cover; background-position: center; }
.home-media__dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.home-media__dots button { border: 0; padding: 0; cursor: pointer; border-radius: 999px; width: 8px; height: 8px; background: rgba(255,255,255,.45); transition: width .2s, background .2s; }
.home-media__dots button.is-on { width: 22px; background: #fff; }

/* ════════════════════════════════════════════════════════════
   ④+⑤ 배경 강조 밴드 — 갤러리(현장소식) + 최저임금/오시는 길을 감싸는 엣지투엣지 배경.
   .home-partners와 동일하게 .home-wrap의 100vw 폭을 그대로 상속하고, 내부 .home-inner-wide로
   다시 1400px 정렬. padding-top을 둬 첫 자식(.home-gallery)의 margin-top(.home-section)이
   부모 밖으로 마진 병합되지 않게 하고, 중복 여백 방지를 위해 첫 자식 margin-top은 0으로 리셋.
   ════════════════════════════════════════════════════════════ */
.home-highlight { background: #F6F9FA; padding: 50px 0; }
.home-highlight > .home-inner-wide > .home-section:first-child { margin-top: 0; }

/* ════════════════════════════════════════════════════════════
   ④ 갤러리
   ════════════════════════════════════════════════════════════ */
.home-head--gallery { align-items: flex-end; }
.home-head--gallery .home-title { font-size:3rem; font-weight: 700; line-height: 1.4; }
.home-gallery__intro { margin: -10px 0 22px; font-size:1.6rem; color: #666; line-height: 1.6; }
.home-gallery__viewport { position: relative; }
.home-gallery__viewport .home-hero__arrow { position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%); z-index: 2; opacity: .55; }
.home-gallery__viewport .home-hero__arrow--next { left: auto; right: 0; transform: translate(50%,-50%); }
/* 클리핑(overflow:hidden)과 이동(transform)을 별개 요소로 분리 — 파트너 배너(.home-partners__clip/__track)와 동일 기법.
   한 요소에 overflow:hidden + transform + 음수 margin을 함께 걸면 빠른 연속 클릭으로 트랜지션이
   중간에 끊길 때 클리핑 경계 계산이 깨져 카드가 그려지지 않는 경우가 있어 분리했다. */
.home-gallery__clip { overflow: hidden; }
.home-gallery__track { display: flex; gap: 20px; transition: transform .45s cubic-bezier(.16,.84,.44,1); }
.home-gallery__card { position: relative; z-index: 1; flex: 0 0 333px; width: 333px; padding: 0; overflow: hidden; box-sizing: border-box; display: block; border-radius: 20px; background: #fff; border: 1px solid #ddd; color: inherit; transition: border-color .18s; }
.home-gallery__card:hover { z-index: 2; border-color: var(--hw-blue1); }
.home-gallery__body { padding: 20px; }
.home-gallery__title { margin: 0; font-size:2rem; font-weight: 700; color: #142B3A; line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-gallery__img { display: block; height: 170px; border-radius: 0; background-size: cover; background-position: center; background-color: #f5f5f5; }
.home-gallery__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.home-gallery__date { font-size:1.5rem; color: #999; }
.home-gallery__arrow {
  flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center; color: #666;
  transition: background .15s, color .15s, transform .15s;
}
.home-gallery__card:hover .home-gallery__arrow { background: var(--hw-blue1); color: #fff; transform: translateX(2px); }

/* ════════════════════════════════════════════════════════════
   ⑤ 최저임금 + 오시는 길
   ════════════════════════════════════════════════════════════ */
.home-info2 { display: flex; gap: 30px; align-items: stretch; }
.home-wage {
  display: flex; flex-direction: column; flex: 1 1 0; min-width: 0;
  border-radius: 20px; padding: 35px 30px; box-sizing: border-box;
  background-image: linear-gradient(160deg, #1f5cab, #6b7fc9);
  box-shadow: 2.7px 7.5px 28.5px 1.5px rgba(0,0,0,.1);
  transition: transform .18s;
}
.home-wage:hover { transform: translateY(-3px); }
.home-wage h3 { margin: 0 0 30px; color: #fff; font-size:2.8rem; font-weight: 700; }
.home-wage__row { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.home-wage__item { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.home-wage__item--divider::before { content: ''; position: absolute; top: 0; bottom: 0; left: -15px; width: 0; border-left: 2px dashed rgba(255,255,255,.2); }
.home-wage__tag { flex: none; align-self: flex-start; padding: 3px 15px; color: #2177c0; font-weight: 700; font-size:1.5rem; border-radius: 20px; background: #fff; }
.home-wage__amt-wrap { text-align: right; line-height: 1.6; min-width: 0; }
.home-wage__amt { color: #fff; font-size:2.5rem; font-weight: 700; white-space: nowrap; display: block; }
.home-wage__sub { color: #fff; font-size:1.5rem; opacity: .85; white-space: nowrap; display: block; }

.home-loc {
  position: relative; overflow: hidden; display: block; flex: 0 0 420px; min-width: 0; padding: 35px 30px; box-sizing: border-box;
  border-radius: 20px; background: #fff; border: 1px solid var(--hw-border); color: inherit;
  transition: .18s;
}
.home-loc:hover { filter: brightness(1.03); transform: translateY(-3px); border-color: var(--hw-blue1) !important; }
.home-loc h3 { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size:2.8rem; font-weight: 900; color: #142B3A; letter-spacing: -.01em; position: relative; z-index: 2; }
.home-loc__arrow {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center; color: #666;
  transition: background .18s, color .18s, transform .18s;
}
.home-loc:hover .home-loc__arrow { background: var(--hw-blue1); color: #fff; transform: translateX(2px); }
.home-loc p { margin: 30px 0 0; font-size:1.6rem; color: #333; font-weight: 500; line-height: 1.6; position: relative; z-index: 2; }
.home-loc__icon { position: absolute; right: 10px; bottom: -35px; width: 190px; height: auto; pointer-events: none; }

/* ════════════════════════════════════════════════════════════
   ⑥ 유관기관 배너 — 화살표로 1개씩 이동 + 자동 롤링(JS, data-partner-track)
   목록(main.html)이 2벌 이어붙어 있어 정방향 끝에서 트랜지션 없이 순간 복귀해 이음매 없이 순환.
   ════════════════════════════════════════════════════════════ */
.home-partners {
  background: #fff;
  height: 80px; padding: 0; margin-top: 0;
  display: flex; align-items: center;
}
.home-partners__viewport { position: relative; width: 100%; max-width: var(--hw-maxw); margin: 0 auto; }
.home-partners__viewport .home-hero__arrow { position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%); z-index: 2; opacity: .65; }
.home-partners__viewport .home-hero__arrow--next { left: auto; right: 0; transform: translate(50%,-50%); }
/* 화살표는 .home-partners__viewport 기준 절대배치라 경계에 반쯤 걸치는 게 의도된 디자인 —
   클리핑은 로고 트랙 전용 래퍼(.home-partners__clip)에만 걸어 화살표가 잘리지 않게 분리 */
.home-partners__clip { overflow: hidden; }
.home-partners__track { display: flex; gap: 32px; align-items: center; transition: transform .5s ease; }
/* 화면에 정확히 5개만 노출(요청사항) — 뷰포트 폭 기준 5등분, JS(partnerStep)가 첫 아이템 실측 width + gap으로
   이동거리를 계산하므로 폭이 가변이어도 캐러셀 동작은 그대로 맞는다. */
.home-partners__track a { flex: 0 0 calc((100% - 4 * 32px) / 5); height: 40px; display: flex; align-items: center; justify-content: center; opacity: .75; position: relative; }
/* 항목 사이 구분선 — gap(32px)의 정중앙에 오도록 아이템 왼쪽 끝에서 gap의 절반만큼 당겨 배치(요청사항) */
.home-partners__track a:not(:first-child)::before {
  content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 24px; background: var(--hw-border);
}
.home-partners__track img { height: 100%; width: auto; object-fit: contain; transition: transform .18s; }
.home-partners__track a:hover img { transform: scale(1.06); }

/* ════════════════════════════════════════════════════════════
   반응형 — 브레이크포인트별로 전체 규칙(레이아웃+폰트 축소 포함)을 한 블록에 모음(1024/767/480).
   같은 breakpoint를 여러 곳에 나눠 적지 말 것 — 여기 해당 블록에 이어서 추가.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* 공통 */
  .site-main:has(.home-wrap) { min-width: 0; }
  .home-inner-wide { padding: 0 20px; }
  .home-title, .home-head--gallery .home-title { font-size:2.5rem; }
  .home-more { font-size:1.4rem; }

  /* ① 히어로 — aspect-ratio 제거(높이 고정 600px, main.css:78) 후 좁은 화면에서도 그대로 유지되던
     문제 수정. 1024/767/480 단계별로 높이를 줄여 모바일에서 과도하게 크지 않게 함 */
  .home-hero-section { padding-left: 20px; padding-right: 20px; }
  .home-hero__media { aspect-ratio: 1024 / 850; }
  .home-hero__cta-text { font-size:2rem; }
  .home-hero__cta-wrap { position: relative; bottom: 0; margin: 30px auto 0 auto; }

  /* ② 사업안내 — 디자인 산출물은 1024px에서는 3열 유지, gap만 줄이고 767px에서 1열로 전환.
     아이콘을 위, 텍스트를 아래로 세로 배치(요청사항) */
  .home-biz { margin-top: 50px; }
  .home-biz__grid { gap: 16px; }
  .home-biz__card { padding: 25px 20px; }
  .home-biz__head { flex-direction: column; }
  .home-biz__head h3 { font-size:1.9rem; }
  .home-biz__icon { width: 88px; height: 88px; }
  .home-biz__arrow { width: 30px; height: 30px; }
  .home-biz__desc { font-size:1.5rem; }

  /* ③ 센터소식 + 미디어자료 — 1024px에서는 좌우 반반(50/50) 배치 유지(요청사항), 767px에서만 세로 스택으로 전환 */
  .home-notice-media { gap: 30px; }
  .home-notice { flex: 55 1 0; }
  .home-media { flex: 45 1 0; }
  .home-notice__t {
    font-size:1.8rem; white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  } /* 1024px에서는 컬럼이 좁아지므로 1줄 말줄임 대신 2줄까지 허용(요청사항) */
  .home-notice__date { font-size:1.4rem; }
  .home-media .home-title { font-size:2.3rem; } /* .home-media .home-title(0,2,0)가 공통 .home-title(0,1,0)보다 우선하므로 별도 명시 필요 */

  /* ④ 갤러리 */
  .home-gallery__card { flex: 0 0 calc((100% - 40px) / 3); width: calc((100% - 40px) / 3); }
  .home-gallery__title { font-size:1.7rem; }
  .home-gallery__date { font-size:1.4rem; }

  /* ⑤ 최저임금 + 오시는 길 — 1024px에서는 좌우 70:30 비율 배치 유지(요청사항), 767px에서만 세로 스택으로 전환 */
  .home-wage { flex: 70 1 0; }
  .home-loc { flex: 30 1 0; }
  .home-wage h3, .home-loc h3 { font-size:2.3rem; }
  /* 시급/일급/월급을 가로 배치 대신 세로로 줄바꿈(요청사항) — 항목 사이 점선도 좌측 세로선 대신 위쪽 가로선으로 전환 */
  .home-wage__row { flex-direction: column; align-items: stretch; gap: 20px; }
  .home-wage__item { width: 100%; }
  .home-wage__item--divider::before {
    top: -10px; bottom: auto; left: 0; right: 0; width: auto; height: 0;
    border-left: 0; border-top: 2px dashed rgba(255,255,255,.2);
  }
  .home-wage__tag { font-size:1.4rem; }
  .home-wage__amt { font-size:2.1rem; }
  .home-wage__sub { font-size:1.4rem; }
  .home-loc p { font-size:1.7rem; }

  /* ⑥ 유관기관 배너 — 뷰포트 폭 기준 3등분해 3개만 꽉 채워 노출(요청사항).
     gap은 32px 그대로 유지 — JS(partnerStep)가 첫 아이템 실측 width + 32px로 이동거리를 계산한다. */
  .home-partners__viewport .home-hero__arrow { left: 4px; transform: translateY(-50%); }
  .home-partners__viewport .home-hero__arrow--next { left: auto; right: 4px; transform: translateY(-50%); }
  .home-partners__track a { flex: 0 0 calc((100% - 2 * 32px) / 3); }
}

@media (max-width: 767px) {
  /* 공통 */
  .home-section { margin-top: 30px; }
  .home-partners { margin-top: 0; }
  .home-title { font-size:2.1rem; }
  .home-more { font-size:1.3rem; }
  /* 센터소식·미디어자료(.home-head)·현장소식(.home-head--gallery) 제목+전체보기 줄 —
     767px 이하에서는 기본 baseline/flex-end 대신 세로 중앙 정렬(요청사항) */
  .home-head, .home-head--gallery { align-items: center; }

  /* ① 히어로 — cta-wrap을 이미지 위 오버레이(position:absolute)가 아니라 이미지 아래 일반 흐름 블록으로 전환(요청사항).
     .home-hero__media만 overflow:hidden으로 클리핑되므로 cta-wrap은 그 바깥에 그대로 노출된다. */
  .home-hero__nav { top: auto; right: auto; bottom: 16px; left: 50%; transform: translateX(-50%); }
  .home-hero__cta-wrap { position: static; margin-top: 14px; }
  .home-hero__cta { border-radius: var(--hw-radius); padding: 20px 0; }
  .home-hero__cta-text { font-size:1.8rem; text-align: center; }
  .home-hero__cta-inner { gap: 16px; padding: 0 20px; flex-wrap: wrap; }
  .home-hero__quick { flex: 1 1 100%; width: 100%; justify-content: space-around; }
  .home-hero__quick-ic { width: 34px; height: 34px; }
  .home-hero__quick-ic img { width: 22px; height: 22px; }
  .home-hero__quick a { font-size:1.3rem; gap: 4px; }

  /* ② 사업안내 — 767px은 1024px의 세로 배치(아이콘 위/텍스트 아래)를 되돌려 아이콘+텍스트 좌우 배치로(요청사항) */
  .home-biz__grid { flex-direction: column; gap: 16px; }
  .home-biz__card { flex: 1 1 auto; }
  .home-biz__head { flex-direction: row; }
  .home-biz__head h3 { font-size:1.8rem; }
  .home-biz__icon { width: 70px; height: 70px; }
  .home-biz__icon svg { width: 42px; height: auto; }
  .home-biz__arrow { width: 28px; height: 28px; }
  .home-biz__desc { font-size:1.4rem; }

  /* ③ 센터소식 + 미디어자료 — 767px에서만 세로 스택으로 전환(1024px은 좌우 반반 유지, 요청사항).
     좁은 화면에서 행 패딩(데스크톱 22px 28px)이 콘텐츠 공간을 과도하게 차지해 축소 */
  .home-notice-media { flex-direction: column; }
  .home-notice, .home-media { flex: 1 1 auto; }
  .home-notice { padding: 0; }
  .home-notice__list a { padding: 16px 20px; gap: 14px; }
  .home-notice__t { font-size:1.7rem; }
  .home-notice__date { font-size:1.3rem; }
  .home-notice .home-title { font-size:2.2rem; } /* 현장소식·미디어자료와 통일(요청사항) */
  .home-media { padding: 20px; }
  .home-media .home-title { font-size:2.2rem; } /* 현장소식·센터소식과 통일(요청사항) */
  /* 1024px 이하에서 공지/미디어가 좌우 배치면 형제 높이(align-items:stretch)에 맞춰지지만,
     767px 세로 스택 전환 시엔 형제 높이 기준이 사라지므로 폭 100%, 높이 260px 고정(요청사항) */
  .home-media__panel { flex: none; }
  .home-media__stage { width: 100%; height: 260px; min-height: 0; } /* 미디어자료 이미지 슬라이드 높이 260px 고정(요청사항, 1024는 좌우 배치라 형제 높이를 따름) */
  /* 767px은 카드 폭이 좁아 width:100% 기준 높이(특히 정방형 webtoon)가 260px을 넘길 수 있어 상한 지정(요청사항) */
  .home-media__stage { max-height: 340px; }

  /* ④+⑤ 배경 강조 밴드 */
  .home-highlight { padding: 32px 0; }

  /* ④ 갤러리 — 더보기 버튼은 공지사항(.home-head)과 동일하게 제목과 한 줄 배치(기존 column 스택 제거).
     카드도 공지사항과 같은 방식으로 뷰포트 폭 2등분해 2개만 노출, 패딩도 공지사항과 동일하게 20px로 축소 */
  .home-head--gallery .home-title { font-size:2.2rem; } /* 디자인 산출물의 갤러리 제목 예외값(일반 21px 대신 22px) */
  .home-gallery__card { flex: 0 0 calc((100% - 20px) / 2); width: calc((100% - 20px) / 2); }
  .home-gallery__title { font-size:1.5rem; }
  .home-gallery__date { font-size:1.3rem; }

  /* ⑤ 최저임금 + 오시는 길 — 767px에서만 세로 스택으로 전환(1024px은 좌우 반반 유지, 요청사항) */
  .home-info2 { flex-direction: column; }
  .home-wage, .home-loc { flex: 1 1 auto; }
  .home-wage h3, .home-loc h3 { font-size:2rem; }
  .home-wage__tag { font-size:1.3rem; padding: 3px 15px; }
  .home-wage__amt { white-space: normal; font-size:1.8rem; }
  .home-wage__sub { font-size:1.3rem; }
  .home-loc p { font-size:1.6rem; }

  /* ⑥ 유관기관 배너 — 1024px은 3개, 767px은 2개씩 · gap 15px(요청사항, JS partnerStep()이
     실측 gap을 읽어 자동으로 맞춰짐). margin/padding 없이 고정 높이(기본 .home-partners 규칙)로만 유지 */
  .home-partners__track { gap: 15px; }
  .home-partners__track a { flex: 0 0 calc((100% - 1 * 15px) / 2); }
  .home-partners__track a:not(:first-child)::before { left: -7.5px; }
}

@media (max-width: 480px) {
  /* ① 히어로 */
  .home-hero-section { padding-left: 16px; padding-right: 16px; }
  .home-hero__cta-text { font-size:1.6rem; }
  .home-hero__quick { gap: 16px 0; }
  .home-hero__quick li { width: 45%; }

  /* ③ 센터소식 — 좁은 화면에서 제목이 카테고리·날짜에 밀려 너무 좁아지지 않도록 줄바꿈 허용 */
  .home-notice__list a { flex-wrap: wrap; }
  .home-notice__t { flex: 1 1 100%; white-space: normal; order: 1; }
  .home-notice__cat { order: 2; }
  .home-notice__date { order: 3; margin-left: auto; }

  /* ④ 갤러리 — 1개씩만 노출(요청사항) */
  .home-gallery__card { flex: 0 0 100%; width: 100%; }
  .home-gallery__img { height: 200px; }

  /* ⑤ 오시는 길 — 아이콘이 작아진 만큼 기존 bottom:-35px 고정 오프셋이 아이콘 높이의 절반 가까이를
     잘라내 카드 하단에 파묻힌 것처럼 보이던 문제 수정. 다른 사이즈와 비슷한 노출 비율이 되도록 축소(요청사항) */
  .home-loc__icon { width: 150px; bottom: -25px; }

  /* ⑥ 유관기관 배너 — 1개씩만 노출(요청사항) */
  .home-partners__track a { flex: 0 0 100%; width: 100%; }
}