/* ==========================================================================
   home.css — 홈(index.html) 전용 섹션 레이아웃
   --------------------------------------------------------------------------
   · 토큰은 css/jobs.css 의 :root 를 정본으로 쓴다 (--brand, --surface, --text …)
     → jobs.css 를 index.html 에서 함께 로드해야 한다.
   · jobs.css 는 수정하지 않는다. (jobs/jobs-all/test-card 3개 페이지의
     ?v= 연쇄 갱신을 피하기 위함)
   · styles.css 와 동시 로드해도 충돌하지 않음을 실측 확인했다 (2026-09-01).
     - 겹치는 엘리먼트 셀렉터 0건
     - 겹치는 :root 변수 0건
     - 겹치는 클래스 2건(.active/.badge)이나 둘 다 상위 셀렉터가 달라 무해
   · 이 파일의 모든 셀렉터는 .home- 접두사 또는 #home-* 하위로만 둔다.
     전역 엘리먼트 셀렉터(body/h1/p …)를 절대 정의하지 않는다.
   ========================================================================== */

/* ── 홈 전용 보조 토큰 (jobs.css 토큰 위에 얹는다) ───────────────────── */
.home {
  --home-gap:          20px;   /* 카드 사이 기본 간격 */
  --home-radius:       14px;   /* 카드 라운드 */
  --home-radius-lg:    18px;   /* 큰 블록 라운드 */
  --home-shadow:       0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --home-shadow-lift:  0 4px 12px rgba(16, 24, 40, .08);
  --home-hero-bg:      #eef4fd;  /* 히어로 연한 파랑 배경 */
  --home-hero-bg2:     #e6eefb;
  --home-section-gap:  28px;
  --home-maxw:         1400px;
}

/* ── 페이지 골격 ───────────────────────────────────────────────────── */
/* 🔴 .wjh-hdr 가 position:fixed 이므로 상단 여백으로 밀어내야 한다.
   2단계에서 헤더를 새로 짜면서 높이가 82px → 61px 로 줄어 여백도 맞췄다.
   (히어로의 margin-top 18px 이 더해져 시각적 여백이 된다) */
.home {
  background: var(--page-bg);
  padding: 62px 0 48px;
}
.home-wrap {
  max-width: var(--home-maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* 2단 배치 — 왼쪽 넓게 / 오른쪽 좁게 (목업의 A·B·C 행) */
.home-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: var(--home-gap);
  margin-bottom: var(--home-section-gap);
  align-items: start;
}
.home-row--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.home-row--full { grid-template-columns: minmax(0, 1fr); }

/* ── 섹션 공통 ─────────────────────────────────────────────────────── */
.home-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.home-sec-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.home-sec-more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.home-sec-more:hover { color: var(--brand); }
.home-sec-more::after { content: '›'; font-size: 16px; line-height: 1; }

.home-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
}

/* ── CSS 가 그리는 문구의 다국어 처리 ──────────────────────────────────
   🔴 `content:` 로 넣는 글자는 DOM 에 없어서 data-i18n / applyTranslations 가
      닿지 않는다. 실제로 5단계 검증과 그 뒤의 DOM 전수 스캔이 둘 다 놓쳤고,
      일본어 화면의 가이드 카드에 "준비 중" 이 한국어로 남아 있었다.
   → language-utils.js 의 changeLanguage() 가 `document.documentElement.lang`
      을 항상 갱신하므로(초기 로드의 initLanguage() 포함) html[lang] 으로 고른다.
   ⚠️ 앞으로 CSS 에 사용자에게 보이는 글자를 넣을 때는 반드시 이 토큰 방식을
      쓴다. 값은 translations.js 의 homepage.home.soon 과 같은 문구다.
   ------------------------------------------------------------------ */
:root          { --soon-label: "준비 중"; }
html[lang="en"] { --soon-label: "Coming soon"; }
html[lang="ja"] { --soon-label: "準備中"; }

/* ==========================================================================
   1. 히어로
   ========================================================================== */
.home-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--home-radius-lg);
  background: linear-gradient(180deg, var(--home-hero-bg) 0%, var(--home-hero-bg2) 100%);
  margin: 18px 0 var(--home-section-gap);
  min-height: 268px;
  display: grid;
  /* 목업 기준 우측 이미지는 전체 폭의 약 22%. 나머지가 카피+검색바. */
  grid-template-columns: minmax(0, 1fr) 22%;
}
.home-hero__inner {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 36px 28px;
}
.home-hero__copy { min-width: 0; }
.home-hero__title {
  margin: 0 0 12px;
  font-size: 31px;
  line-height: 1.32;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.8px;
}
.home-hero__title .accent { color: var(--brand); display: block; }
.home-hero__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-muted);
}

/* 히어로 배경 이미지 — assets/hero-globe.webp 재사용 */
.home-hero__art {
  background-image: url('../assets/hero-globe.webp');
  background-size: cover;
  background-position: center;
  border-radius: 0 var(--home-radius-lg) var(--home-radius-lg) 0;
}

/* 검색바 */
.home-search {
  background: var(--surface);
  border-radius: var(--home-radius);
  box-shadow: 0 6px 22px rgba(16, 24, 40, .10);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: stretch;
  padding: 10px;
  gap: 0;
}
.home-search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  min-width: 0;
}
.home-search__field + .home-search__field { border-left: 1px solid var(--border); }
.home-search__ico {
  flex: none;
  width: 19px; height: 19px;
  color: var(--text-subtle);
  display: grid; place-items: center;
}
.home-search__body { min-width: 0; flex: 1; }
.home-search__label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1px;
}
.home-search__input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  padding: 0;
  font-family: inherit;
}
.home-search__input::placeholder { color: #9aa4b2; }
.home-search__btn {
  flex: none;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  padding: 0 26px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.home-search__btn:hover { background: var(--brand-dark); }

/* 국가 칩 — 자리만. 실제 칩은 3단계에서 WJH.ui.buildChips 로 채운다 */
.home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}
.home-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--home-shadow);
  cursor: pointer;
}
.home-chip:hover { border-color: var(--brand-tint-border); background: var(--brand-tint); }
.home-chip__flag { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; flex: none; }
.home-chip--all { color: var(--brand); font-weight: 700; }
.home-chip--all::after { content: '›'; font-size: 15px; }

/* ── 고용주 유치 배너 (히어로 하단) ──────────────────────────────────
   목업은 히어로 우측 사진 위에 얹지만, 여기는 지구본 이미지(22%)를 그대로
   쓰기로 했으므로 검색바·칩 아래 가로 띠로 넣는다.
   🔴 표시/숨김은 js/home-nav.js 가 hidden 으로만 한다(N4 원칙 3).
   -------------------------------------------------------------------- */
.home-bizpromo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--home-radius);
  background: var(--surface);
  border: 1px solid var(--brand-tint-border);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}
.home-bizpromo[hidden] { display: none; }
.home-bizpromo .wjh-biz--guest[hidden],
.home-bizpromo .wjh-biz--employer[hidden] { display: none; }
.home-bizpromo__ico {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--brand-tint);
  display: grid; place-items: center;
  font-size: 18px;
}
.home-bizpromo__body { min-width: 0; flex: 1 1 auto; }
.home-bizpromo__tt {
  margin: 0; font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.4;
}
.home-bizpromo__dd {
  margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-subtle);
}
.home-bizpromo__btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand);
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.home-bizpromo__btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.home-bizpromo__btn::after { content: "›"; font-size: 15px; line-height: 1; }

/* ==========================================================================
   2. 최신 채용공고 — 카드 자리
   ========================================================================== */
.home-jobs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
/* 3단계에서 WJH.renderJobCard 로 채운다. 그 전까지는 자리표시 골격만. */
.home-jobcard-slot {
  min-height: 196px;
  border: 1px dashed var(--border);
  border-radius: var(--home-radius);
  background: var(--surface);
}

/* ==========================================================================
   공통 — 빈 상태 (B-3 방식: 준비 중 안내 + 대체 CTA)
   데이터/콘텐츠가 생기면 JS 플래그만 true 로 바꾸고 이 블록을 감춘다.
   ========================================================================== */
.home-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 38px 22px;
  min-height: 180px;
}
.home-empty__ico {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
  display: grid; place-items: center;
  font-size: 21px;
}
.home-empty__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.home-empty__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-subtle);
  max-width: 34em;
}
.home-empty__cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--brand-tint-border);
  background: var(--brand-tint);
  color: var(--brand);
  border-radius: 9px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.home-empty__cta:hover { background: #e4f0fd; }

/* ==========================================================================
   4. 월드잡허브 Verified
   ========================================================================== */
.home-verified { padding: 20px 22px 22px; }
.home-verified__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
}
.home-verified__shield {
  width: 22px; height: 22px; flex: none;
  color: var(--brand);
}
.home-verified__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.home-vitem { display: flex; gap: 11px; align-items: flex-start; }
.home-vitem__ico {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
  display: grid; place-items: center;
  font-size: 16px;
}
.home-vitem__tt {
  margin: 0 0 3px;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.home-vitem__dd {
  margin: 0;
  font-size: 12.5px; line-height: 1.5; color: var(--text-subtle);
}

/* 우측 — 검증 일자리 모아보기 */
.home-vpromo {
  background: linear-gradient(180deg, #f2f7fe 0%, #eaf2fd 100%);
  border: 1px solid var(--brand-tint-border);
  border-radius: var(--home-radius);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 100%;
}
.home-vpromo__tt { margin: 0 0 7px; font-size: 16px; font-weight: 800; color: var(--text); }
.home-vpromo__dd { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.home-vpromo__btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface);
  border: 1px solid var(--brand-tint-border);
  color: var(--brand);
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 13.5px; font-weight: 700;
  text-decoration: none;
}
.home-vpromo__btn:hover { background: #f7fbff; }
.home-vpromo__art { font-size: 62px; line-height: 1; opacity: .9; }

/* ==========================================================================
   5. 국가별 취업 기회 — 사진 카드 자리
   ========================================================================== */
.home-countries__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
.home-country {
  border: 1px solid var(--border);
  border-radius: var(--home-radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--home-shadow);
  text-decoration: none;
  display: block;
}
.home-country:hover { box-shadow: var(--home-shadow-lift); }
/* 사진은 5단계 이후 확보. 그 전까지 브랜드 틴트 자리표시 */
.home-country__photo {
  height: 92px;
  background: linear-gradient(135deg, var(--brand-tint) 0%, #dceafb 100%);
  border-bottom: 1px solid var(--border);
}
.home-country__body { padding: 11px 13px 13px; }
.home-country__name {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 5px;
}
.home-country__flag { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; flex: none; }
.home-country__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12.5px; color: var(--text-subtle);
}
.home-country__go { color: var(--brand); font-weight: 700; }
.home-country--more {
  display: grid; place-items: center;
  background: var(--brand-tint);
  border-style: dashed;
  min-height: 100%;
  text-align: center;
  padding: 20px 12px;
  gap: 8px;
}
.home-country--more .ico { font-size: 26px; }
.home-country--more .tt { font-size: 13px; font-weight: 700; color: var(--brand); }

/* ==========================================================================
   6. 취업 · 비자 가이드
   ========================================================================== */
.home-guides__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.home-guide {
  border: 1px solid var(--border);
  border-radius: var(--home-radius);
  background: var(--surface);
  box-shadow: var(--home-shadow);
  padding: 16px 14px;
  text-decoration: none;
  display: block;
}
.home-guide__ico {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
  display: grid; place-items: center;
  font-size: 16px;
  margin-bottom: 11px;
}
.home-guide__tt { margin: 0 0 5px; font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.35; }
.home-guide__dd { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-subtle); }
/* 준비 중 상태 — 클릭 불가 표시 */
.home-guide.is-soon { opacity: .72; cursor: default; }
.home-guide.is-soon .home-guide__tt::after {
  content: var(--soon-label);
  display: inline-block;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-subtle);
  background: var(--tag-bg);
  border-radius: 999px;
  padding: 2px 7px;
  vertical-align: middle;
}

/* ==========================================================================
   7. 일자리 지도 (신규 섹션)
   ========================================================================== */
.home-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: center;
  padding: 22px 24px;
}
.home-map__tt { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: var(--text); }
.home-map__dd { margin: 0 0 16px; font-size: 13.5px; line-height: 1.62; color: var(--text-muted); }
.home-map__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: #fff;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
}
.home-map__btn:hover { background: var(--brand-dark); }
/* 미리보기 이미지 미확보 → 자리표시. 스크린샷 확보 시 background-image 로 교체 */
.home-map__preview {
  height: 158px;
  border-radius: var(--home-radius);
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 30% 40%, rgba(30,96,145,.14) 0 6px, transparent 7px),
    radial-gradient(circle at 62% 30%, rgba(30,96,145,.14) 0 5px, transparent 6px),
    radial-gradient(circle at 48% 68%, rgba(30,96,145,.14) 0 5px, transparent 6px),
    linear-gradient(135deg, #eef4fd 0%, #e3edfa 100%);
  display: grid; place-items: center;
  color: var(--text-subtle);
  font-size: 12.5px;
}

/* ==========================================================================
   8. 이메일 알림 CTA
   ========================================================================== */
.home-alert {
  background: linear-gradient(180deg, #f2f7fe 0%, #eaf2fd 100%);
  border: 1px solid var(--brand-tint-border);
  border-radius: var(--home-radius);
  padding: 20px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  text-align: center;
}
.home-alert__ico { font-size: 26px; flex: none; }
.home-alert__copy { text-align: left; }
.home-alert__tt { margin: 0 0 3px; font-size: 15px; font-weight: 800; color: var(--text); }
.home-alert__dd { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.home-alert__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: #fff;
  border: 0; border-radius: 10px;
  padding: 12px 22px;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  font-family: inherit;
}
.home-alert__btn:hover { background: var(--brand-dark); }
.home-alert__btn.is-soon {
  background: var(--tag-bg);
  color: var(--text-subtle);
  cursor: default;
}

/* ==========================================================================
   반응형
   목업은 데스크톱 기준. 좁은 화면에서는 단순 축소가 아니라 구조를 바꾼다.
   ========================================================================== */

/* ── 태블릿 ~1200px ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .home-row,
  .home-row--even { grid-template-columns: minmax(0, 1fr); }
  .home-jobs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero { grid-template-columns: minmax(0, 1fr) 30%; }
  .home-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home-map { grid-template-columns: minmax(0, 1fr); }
}

/* ── 모바일 ~768px ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .home-wrap { padding: 0 14px; }
  .home { padding: 58px 0 32px; }   /* 모바일 헤더 높이에 맞춘 값 */

  /* 히어로 — 배경 이미지 칸을 없애고 1단으로 */
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    margin: 12px 0 22px;
  }
  .home-hero__art { display: none; }
  .home-hero__inner { padding: 24px 16px; }
  .home-hero__title { font-size: 24px; }

  /* 검색바 — 3분할을 세로 3단으로 (넘침 방지) */
  .home-search { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .home-search__field + .home-search__field {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .home-search__btn { padding: 13px 20px; margin-top: 6px; }

  /* 칩 — 데스크톱과 같이 줄바꿈한다 (가로 스크롤 쓰지 않는다).
     스크롤 뒤로 칩이 숨지 않아 모든 국가가 한눈에 보인다. */
  .home-chips { flex-wrap: wrap; gap: 8px; }
  .home-chip { padding: 7px 13px; font-size: 12.5px; }

  /* 공고 카드 — 가로 스크롤. 실제 규칙은 아래 "공고 카드 — 가로 스크롤" 절에 있다
     (열 수를 여기서 정하지 않는다. grid-auto-flow: column 으로 넘어간다) */

  /* Verified — 2×2 */
  .home-verified__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .home-verified { padding: 16px; }
  .home-vpromo { grid-template-columns: minmax(0, 1fr); text-align: left; padding: 18px; }
  .home-vpromo__art { display: none; }

  /* 국가 카드 — 2열 */
  .home-countries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 가이드 — 2열 유지 */
  .home-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 고용주 배너 — 세로로 쌓는다. 버튼은 손가락에 맞게 full-width */
  .home-bizpromo { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; padding: 14px; }
  .home-bizpromo__ico { margin: 0 auto; }
  .home-bizpromo__btn { justify-content: center; }

  /* 알림 CTA — 세로 */
  .home-alert { flex-direction: column; gap: 12px; padding: 18px; }
  .home-alert__copy { text-align: center; }

  .home-sec-title { font-size: 16.5px; }
  .home-sec-more { font-size: 12.5px; }
}

/* ── 좁은 모바일 ~420px ─────────────────────────────────────────────── */
@media (max-width: 420px) {
  .home-verified__grid,
  .home-countries__grid,
  .home-guides__grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero__title { font-size: 21px; }
}


/* ==========================================================================
   WJH 헤더 — 2026-09-01 홈 개편 2단계
   --------------------------------------------------------------------------
   🔴 이 절은 헤더 마크업(<header class="wjh-hdr">)과 한 쌍이다.
      향후 공통 컴포넌트로 분리할 때 이 절과 마크업을 함께 옮긴다.
   ⚠️ index.html 인라인 <style> 에 옛 헤더 규칙(.header-container 등)이 남아 있으나
      새 마크업은 .wjh-hdr-* 를 쓰므로 대부분 적용되지 않는다.
      element 셀렉터(header, nav ul li a)는 여전히 적용되므로 그 위에 덮어쓴다.
   ========================================================================== */

.wjh-hdr {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
}
.wjh-hdr-bar {
  max-width: var(--home-maxw, 1400px);
  margin: 0 auto;
  padding: 11px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}

/* 로고 */
.wjh-hdr-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.wjh-hdr-logo__mark { display: flex; }
.wjh-hdr-logo__text { display: block; line-height: 1.15; }
.wjh-hdr-logo__name { font-weight: 800; font-size: 21px; letter-spacing: -.2px; white-space: nowrap; }
.wjh-hdr-logo__tag { display: block; font-size: 11px; color: var(--text-subtle); margin-top: 1px; white-space: nowrap; }

/* 주 메뉴 */
.wjh-hdr-nav { flex: 1 1 auto; min-width: 0; }
.wjh-hdr-menu {
  display: flex; align-items: center; gap: 30px;
  list-style: none; margin: 0; padding: 0;
}
.wjh-hdr-menu li { white-space: nowrap; }
.wjh-hdr .wjh-hdr-menu a {
  display: inline-block;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
  padding: 7px 0;
  transition: color .15s;
}
.wjh-hdr .wjh-hdr-menu a:hover { color: var(--brand); }
.wjh-hdr .wjh-hdr-menu a.active { color: var(--brand); font-weight: 700; }

/* 우측 도구 */
.wjh-hdr-tools { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }

.wjh-hdr-lang {
  display: flex; align-items: center; gap: 5px;
  color: var(--text-muted);
  margin: 0;
}
.wjh-hdr-lang__ico { display: flex; }
.wjh-hdr .wjh-hdr-lang select {
  border: 0; background: transparent; outline: none;
  font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  font-family: inherit; cursor: pointer; padding: 4px 2px;
}

.wjh-hdr-noti { position: relative; display: flex; align-items: center; }

/* 인증 버튼 */
.wjh-hdr .wjh-hdr-auth { display: flex; align-items: center; gap: 8px; }
.wjh-hdr .wjh-hdr-auth[hidden] { display: none; }
.wjh-hdr .wjh-hdr-btn {
  border-radius: 9px;
  padding: 8px 16px;
  font-size: 13.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.wjh-hdr .wjh-hdr-btn--ghost {
  background: var(--surface);
  border: 1px solid var(--border) !important;
  color: var(--text);
}
.wjh-hdr .wjh-hdr-btn--ghost:hover { background: var(--brand-tint); border-color: var(--brand-tint-border) !important; }
.wjh-hdr .wjh-hdr-btn--solid {
  background: var(--brand); border: 1px solid var(--brand) !important; color: #fff;
}
.wjh-hdr .wjh-hdr-btn--solid:hover { background: var(--brand-dark); }
/* ── 기업(고용주) 진입점 ─────────────────────────────────────────────
   마크업은 index.html 의 <div class="wjh-hdr-biz" id="wjh-biz"> 한 덩어리다.
   헤더를 공통 컴포넌트로 뗄 때 이 절과 함께 옮긴다.
   🔴 표시/숨김은 js/home-nav.js 가 hidden 속성으로만 한다(N4 원칙 3).
      여기서는 display 를 인라인으로 강제하지 않는다.
   -------------------------------------------------------------------- */
.wjh-hdr-biz { position: relative; display: flex; align-items: center; }
.wjh-hdr-biz [hidden] { display: none !important; }
.wjh-hdr-biz__ico { font-size: 14px; line-height: 1; }
.wjh-hdr-biz__caret { font-size: 14px; line-height: 1; }

/* 공통 버튼 모양 — 목업의 "테두리 강조" */
.wjh-hdr .wjh-hdr-biz__btn,
.wjh-hdr .wjh-hdr-biz__cta {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--brand-tint-border);
  background: var(--brand-tint);
  color: var(--brand);
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 13px; font-weight: 700;
  font-family: inherit; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.wjh-hdr .wjh-hdr-biz__btn:hover,
.wjh-hdr .wjh-hdr-biz__cta:hover { background: #e4f0fd; border-color: var(--brand); }

/* 고용주 상태는 한 단계 더 강조한다 (로그인 후 주 동선) */
.wjh-hdr .wjh-hdr-biz__cta { border-width: 1.5px; border-color: var(--brand); }

/* 비로그인 드롭다운 */
.wjh-hdr-biz__dd { position: relative; }
.wjh-hdr .wjh-hdr-biz__menu {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(16, 24, 40, .14);
  padding: 14px;
  z-index: 20;
}
.wjh-hdr-biz__dd.show .wjh-hdr-biz__menu { display: block; }
.wjh-hdr-biz__menu-tt {
  margin: 0 0 5px; font-size: 13.5px; font-weight: 800; color: var(--text);
}
.wjh-hdr-biz__menu-dd {
  margin: 0 0 12px; font-size: 12px; line-height: 1.55; color: var(--text-subtle);
  white-space: normal;
}
.wjh-hdr .wjh-hdr-biz__item {
  display: block; text-align: center;
  padding: 9px 12px; margin-bottom: 7px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text); font-size: 13px; font-weight: 700;
  text-decoration: none;
}
.wjh-hdr .wjh-hdr-biz__item:hover { background: var(--brand-tint); border-color: var(--brand-tint-border); color: var(--brand); }
.wjh-hdr .wjh-hdr-biz__item--solid {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.wjh-hdr .wjh-hdr-biz__item--solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.wjh-hdr .wjh-hdr-biz__more {
  display: block; text-align: center;
  margin-top: 2px; padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--brand); font-size: 12.5px; font-weight: 700;
  text-decoration: none;
}
.wjh-hdr .wjh-hdr-biz__more:hover { text-decoration: underline; }

/* 프로필 드롭다운 맨 위의 "고용주 대시보드 이동" — 목업처럼 강조 */
.wjh-hdr .wjh-hdr-dd__menu a.wjh-hdr-dd__go {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
  color: var(--brand);
  font-weight: 800;
  margin-bottom: 6px;
}
.wjh-hdr .wjh-hdr-dd__menu a.wjh-hdr-dd__go::after { content: "→"; font-size: 13px; }
.wjh-hdr .wjh-hdr-dd__menu a.wjh-hdr-dd__go:hover { background: #e4f0fd; }

/* 로그인 상태 묶음
   ⚠️ js/auth.js 의 checkAuthState() 가 인라인 display 를 'block'/'none' 으로 쓴다.
      다른 18개 페이지와 공유하는 코드라 그대로 두고, 여기서 flex 로 정규화한다.
      (기존 index.html 도 [style*="block"] 방식으로 같은 보정을 하고 있었다) */
.wjh-hdr .wjh-hdr-user { display: none; align-items: center; }
.wjh-hdr .wjh-hdr-user[style*="block"],
.wjh-hdr .wjh-hdr-user[style*="flex"] { display: flex !important; }

.wjh-hdr-dd { position: relative; }
.wjh-hdr .wjh-hdr-dd__btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  cursor: pointer; font-family: inherit;
}
.wjh-hdr .wjh-hdr-dd__btn:hover { background: var(--input-bg); }
.wjh-hdr-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--input-bg);
  display: grid; place-items: center;
  font-size: 15px; overflow: hidden; flex: none;
}
.wjh-hdr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wjh-hdr-uname {
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.wjh-hdr-dd__caret { font-size: 11px; color: var(--text-subtle); }

/* ⚠️ 폭은 특이도를 한 단계 더 올려서 잡는다.
      css/styles.css 의 .dropdown-menu { width:180px } 와
      index.html 인라인의 .user-profile .dropdown-menu { min-width:150px } 가
      같은 요소를 잡고 있고, 뒤에 오는 인라인 규칙이 동특이도로 이긴다.
      (모바일 로고 때와 같은 "옛 헤더 규칙 상속" 함정이다) */
.wjh-hdr .wjh-hdr-user .wjh-hdr-dd__menu {
  width: auto;
  min-width: 222px;   /* "고용주 대시보드 이동" 이 한 줄에 들어가는 폭 (ko/en/ja) */
}
.wjh-hdr .wjh-hdr-dd__menu {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(16, 24, 40, .14);
  padding: 6px;
  z-index: 20;
}
.wjh-hdr .wjh-hdr-dd:hover .wjh-hdr-dd__menu,
.wjh-hdr .wjh-hdr-dd.show .wjh-hdr-dd__menu { display: block; }
.wjh-hdr .wjh-hdr-dd__menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 13.5px; font-weight: 600;
  text-decoration: none;
}
.wjh-hdr .wjh-hdr-dd__menu a:hover { background: var(--brand-tint); color: var(--brand); }
/* 🔴 역할 메뉴는 hidden 속성으로만 토글한다 (home-nav.js).
      display 인라인 스타일을 쓰지 않으므로 auth.js 와 서로 간섭하지 않는다. */
.wjh-hdr .wjh-hdr-dd__menu a[hidden] { display: none; }
.wjh-hdr-dd__sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* 햄버거 — 데스크톱에서는 숨김 */
.wjh-hdr .wjh-hdr-burger {
  display: none;
  background: none; border: 0;
  font-size: 22px; line-height: 1; color: var(--text);
  cursor: pointer; padding: 4px 6px;
}

/* ── 기업 진입점을 보여줄 수 있는 최소 폭 = 1320px ───────────────────
   🔴 실측으로 정한 값이다. 상단 메뉴 6개를 유지하기로 했기 때문에
      헤더 가로 예산이 이미 빠듯하다. 여기에 기업 버튼을 얹으면
      메뉴 마지막 항목이 도구 모음 "밑으로 들어가" 겹친다.

   1101px 에서 메뉴가 도구 모음을 침범하는 양(음수 = 겹침)
     기업 버튼 없음 : ko +36 · ja −41
     기업 버튼 있음 : ko −115 · en −183 · ja −195
   폭을 올려가며 잰 결과
     1240px : ko +24 · en −44 · ja −56   ← 아직 겹침
     1320px : ko +104 · en +36 · ja +24  ← 세 언어 모두 여유
     1400px : ko +184 · en +116 · ja +104

   → 1320px 이상에서만 노출한다. 그 아래에서는 히어로 배너와
     프로필 드롭다운의 "고용주 대시보드 이동"이 진입점을 맡는다.
     (배너는 모든 폭에서 보이므로 휴대폰·노트북에 진입점이 없지 않다)

   ⚠️ 별개로 발견한 기존 결함 — 이 버튼과 무관하다.
      일본어는 기업 버튼이 없어도 1101px 에서 이미 41px 겹치고,
      로그인 상태에서는 1000px 에서도 겹친다(ko 12 / ja 65).
      메뉴 6개 + 사용자 이름(최대 110px)이 900~1200px 구간에서 넘친다.
      고치려면 메뉴 간격·브레이크포인트를 손봐야 해서 이번 범위 밖으로 두었다.
      docs/PROJECT_STATUS.md 유지보수 목록에 적어두었다.
   -------------------------------------------------------------------- */
@media (max-width: 1319px) {
  .wjh-hdr-biz { display: none; }
}

/* ── 헤더 반응형 ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .wjh-hdr-logo__tag { display: none; }
  .wjh-hdr-menu { gap: 20px; }
  .wjh-hdr .wjh-hdr-menu a { font-size: 14px; }
  /* 기업 진입점 숨김은 아래 별도 @media(max-width:1319px) 절에서 다룬다 */
}

@media (max-width: 900px) {
  .wjh-hdr-bar { padding: 10px 14px; gap: 12px; }
  .wjh-hdr .wjh-hdr-burger { display: block; }

  /* 메뉴를 접이식 패널로 — 데스크톱 가로 배열을 그대로 줄이지 않는다 */
  .wjh-hdr-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .10);
    display: none;
    flex: none;
  }
  .wjh-hdr-nav.is-open { display: block; }
  .wjh-hdr-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 8px; }
  .wjh-hdr .wjh-hdr-menu a { display: block; padding: 12px 12px; border-radius: 8px; }
  .wjh-hdr .wjh-hdr-menu a:hover { background: var(--brand-tint); }

  /* 좁은 화면에서는 로그인/회원가입만 남긴다 */
  .wjh-hdr-logo__name { font-size: 18px; }
  .wjh-hdr .wjh-hdr-lang select { max-width: 74px; }
  .wjh-hdr-uname { display: none; }
  .wjh-hdr .wjh-hdr-dd__btn { padding: 4px; border-radius: 50%; }
  .wjh-hdr-dd__caret { display: none; }
}

@media (max-width: 560px) {
  .wjh-hdr .wjh-hdr-btn { padding: 7px 11px; font-size: 12.5px; }
  .wjh-hdr-tools { gap: 7px; }
  .wjh-hdr-lang__ico { display: none; }
}


/* ==========================================================================
   반응형 — 데스크톱 구조를 그대로 내린다 (2026-09-01 재정리)
   --------------------------------------------------------------------------
   🔴 방향 전환: 2단계에서 별도 모바일 목업에 맞춰 넣었던
      "가로 스크롤 / 한 줄 요약" 특수 처리를 걷어냈다.
      이제 데스크톱 목업 구조를 좁은 화면에서 열 수만 줄여 내린다.
      · 공고 카드   : 4열 -> 2열 -> 1열
      · 국가 카드   : 3열 -> 2열
      · Verified    : 4칸 -> 2×2 -> 1열 (요약 카드로 축소하지 않는다)
      · 가이드      : 4열 -> 2×2 (설명 문구를 계속 보여준다)
      · 알림 CTA    : 가로 -> 세로
      · 국가 칩     : 줄바꿈 유지 (가로 스크롤 쓰지 않는다)
   이유: 콘텐츠가 숨지 않고, 한 벌의 구조만 유지하면 되므로
        화면 크기·언어가 바뀌어도 예측 가능하다.
   ========================================================================== */

/* 모바일 전용 요약 카드는 더 이상 쓰지 않는다 (마크업은 남겨두되 항상 숨긴다) */
.home-verified__compact { display: none !important; }

@media (max-width: 768px) {

  /* ── 공고 카드 — 가로 스크롤 (2026-09-01 재변경) ──────────────────
     세로 1열 쌓기에서 가로 넘김으로 바꿨다.
     🔴 카드 "디자인"은 그대로다. 원형 로고·회사명 이니셜·NEW 배지·
        파란 회사명·급여+외화 병기·D-day·태그 한 줄, 그리고
        제목 → 회사 → 위치 → 급여 → 태그 순서까지 손대지 않았다.
        여기서 정하는 것은 "카드를 어떻게 늘어놓는가" 뿐이다.

     카드 폭 265px 은 임의값이 아니라 **급여 한 줄이 잘리지 않는 최소 폭**이다.
     기준은 일본어다 — D-day 배지가 "あと22日" 로 한국어보다 21px 넓어
     같은 카드 폭에서 급여 칸이 가장 좁다. 265px 에서 급여 168px / 가용 168px.
     375px 기준 실측:
       232px → 1.53장 · 급여 33px 잘림
       250px → 1.42장 · 급여 15px 잘림
       265px → 1.35장 · 잘림 0            ← 채택 (다음 카드가 93px 보인다)
     ⚠️ 더 넓히면 다음 카드가 덜 보이고, 더 좁히면 급여가 … 로 잘린다.
        급여를 살리는 쪽을 택했다. 폭을 바꾸려면 grid-auto-columns 한 줄이다.

     화면 끝까지 흘리기: margin-inline 으로 .home-wrap 의 좌우 14px 를 상쇄하고
     같은 값을 padding 으로 되돌린다. 첫 카드 왼쪽은 본문과 맞고,
     스크롤하면 카드가 화면 끝까지 이어진다.
     ---------------------------------------------------------------- */
  .home-jobs__grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;   /* 위 절들의 열 지정을 끈다 */
    grid-auto-columns: 265px;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: -14px;
    padding-inline: 14px;
    padding-block: 2px 6px;        /* 카드 그림자가 잘리지 않게 */
    justify-items: stretch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;     /* 스냅 위치를 본문 왼쪽에 맞춘다 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;         /* Firefox — 다음 카드가 보이는 것이 안내 역할 */
  }
  .home-jobs__grid::-webkit-scrollbar { display: none; }
  .home-jobs__grid .job-card {
    width: auto;                   /* 폭은 grid-auto-columns 가 정한다 */
    max-width: none;
    scroll-snap-align: start;
  }

  /* 국가 카드 — 2열 그리드 (가로 스크롤 제거) */
  .home-countries__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Verified — 4칸을 2×2 로. 요약 카드로 바꾸지 않는다 */
  .home-verified { padding: 16px; }
  .home-verified__head { display: flex; margin-bottom: 14px; }
  .home-verified__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* 가이드 — 2×2. 설명 문구를 계속 보여준다 */
  .home-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-guide { padding: 14px 12px; text-align: left; }
  .home-guide__ico { width: 32px; height: 32px; margin: 0 0 10px; font-size: 15px; }
  .home-guide__tt { font-size: 13px; line-height: 1.35; }
  .home-guide__dd { display: block; font-size: 11.5px; }
  .home-guide.is-soon .home-guide__tt::after {
    display: inline-block; margin: 0 0 0 6px; font-size: 10px; padding: 2px 7px;
  }

  /* 알림 CTA — 세로로 */
  .home-alert { flex-direction: column; gap: 12px; padding: 18px; text-align: center; }
  .home-alert__copy { text-align: center; }
  .home-alert__ico { font-size: 26px; }
  .home-alert__tt { font-size: 14px; }
  .home-alert__dd { font-size: 12px; white-space: normal; overflow: visible; }
  .home-alert__btn { padding: 12px 20px; font-size: 13.5px; }
}

/* 좁은 모바일 — 2열도 좁아지는 지점에서 1열로 */
@media (max-width: 480px) {
  .home-countries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-verified__grid  { grid-template-columns: minmax(0, 1fr); }
  .home-guides__grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 국가 칩 — 데스크톱과 동일하게 줄바꿈. "전체 국가 보기" 문구도 그대로 쓴다 */
.home-chip__all-dots { display: none !important; }


/* 깜빡임 완화 — 로그인 이력이 있는 방문자에게 인증 확정 전까지만 인증 버튼을 숨긴다.
   js/home-nav.js 가 클래스를 붙이고, 인증 콜백/타임아웃이 반드시 뗀다. */
.wjh-hdr.wjh-auth-pending .wjh-hdr-auth,
.wjh-hdr.wjh-auth-pending .wjh-hdr-biz { visibility: hidden; }


/* ==========================================================================
   3단계 — 실데이터 연동에 따른 추가 스타일
   ========================================================================== */

/* 국가 칩의 건수 배지 */
.home-chip__n {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}

/* 🔴 국가 사진 자산 미확보 — 가짜 이미지를 쓰지 않고 국기를 크게 얹는다.
      사진이 준비되면 .home-country__photo 에 background-image 를 얹고
      .home-country__bigflag 를 지우면 된다. */
.home-country__photo--flag {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.home-country__photo--flag::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(30,96,145,.10) 0%, rgba(30,96,145,.02) 100%);
}
.home-country__bigflag {
  width: 54px; height: 40px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(16,24,40,.16);
}

/* 최신 공고 그리드 안에서 jobs.css 의 .job-card 가 칸을 꽉 채우게 한다 */
.home-jobs__grid > .job-card { min-width: 0; height: 100%; }

/* 적극 채용 중인 기업 — HOME_FLAGS.companies 가 true 일 때 쓰는 목록 */
.home-colist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}
.home-co {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 11px 12px;
  text-decoration: none;
  background: var(--surface);
  min-width: 0;
}
.home-co:hover { border-color: var(--brand-tint-border); background: var(--brand-tint); }
.home-co__logo {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--logo-bg);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: var(--text-muted);
  overflow: hidden;
}
.home-co__logo img { width: 100%; height: 100%; object-fit: contain; }
.home-co__name {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-co__n { flex: none; font-size: 12px; color: var(--text-subtle); }

@media (max-width: 768px) {
  .home-colist { grid-template-columns: minmax(0, 1fr); }
  .home-country__bigflag { width: 44px; height: 32px; }
}


/* ==========================================================================
   최신 채용공고 카드 — jobs.css 의 .job-card 를 홈 그리드용 세로 카드로 재배치
   --------------------------------------------------------------------------
   🔴 jobs.css 는 수정하지 않는다. renderJobCard 가 만든 마크업을 그대로 쓰되,
      .home-jobs__grid 안에서만 레이아웃을 덮어쓴다.

   jobs.css 의 .job-card 는 목록형(로고 | 본문 | 급여·버튼)이라
   4열 그리드에 넣으면 본문 칸이 눌려 제목이 세로로 쏟아진다.
   목업의 홈 카드는 세로형(로고·배지 → 제목 → 회사 → 위치 → 급여 → 태그 → 하단)이다.
   구조는 다음과 같다:
     .job-card > .job-card__logo / .job-card__main / .job-card__aside / .job-card__save
   ========================================================================== */

/* --------------------------------------------------------------------------
   목업 카드 구조로 재배치 (2026-09-01)

   renderJobCard 가 만드는 DOM:
     .job-card
       .job-card__logo
       .job-card__main   > .job-card__title(+.job-badge-new) / __company / __location / __tags
       .job-card__aside  > .job-salary / .job-salary-sub / .job-dday / .job-card__actions
       .job-card__save

   목업 순서는 제목 -> 회사 -> 위치 -> 급여 -> 태그 인데,
   태그는 __main 안에 있고 급여는 __main 밖(__aside)에 있어
   order 만으로는 서로를 넘나들 수 없다.
   -> .job-card__main 에 display:contents 를 줘서 그 자식들을
      카드 그리드의 직접 항목으로 끌어올린 뒤 grid-area 로 순서를 정한다.
      (__main 은 의미 없는 래퍼 div 라 접근성 영향이 없다)
   🔴 jobs.css / jobs-card.js 는 건드리지 않는다.
   -------------------------------------------------------------------------- */
.home-jobs__grid .job-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "logo  title"
    "logo  company"
    "loc   loc"
    "sal   sal"
    "tags  tags";
  align-items: start;
  column-gap: 10px;
  row-gap: 3px;
  padding: 30px 13px 11px;   /* 상단은 좌상단 배지 자리 */
  position: relative;
  height: 100%;
  min-width: 0;
}
.home-jobs__grid .job-card__main { display: contents; }
.home-jobs__grid .job-card__logo     { grid-area: logo; }
.home-jobs__grid .job-card__title    { grid-area: title; }
.home-jobs__grid .job-card__company  { grid-area: company; }
.home-jobs__grid .job-card__location { grid-area: loc; }
.home-jobs__grid .job-card__aside    { grid-area: sal; }
.home-jobs__grid .job-card__tags     { grid-area: tags; }

/* ── 1. 로고 — 원형 컬러 블록 ────────────────────────────────────────
   실제 로고가 있으면 renderJobCard 가 <img> 를 넣으므로 이미지가 우선한다.
   없을 때만 home-data.js 가 회사명 이니셜을 채운다 (가짜 로고를 만들지 않는다). */
.home-jobs__grid .job-card__logo {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  flex: none;
  align-self: start;
  background: var(--logo-bg);
  border: 1px solid var(--border);
  font-size: 15px;
}
.home-jobs__grid .job-card__logo img { width: 100%; height: 100%; object-fit: cover; }
/* 이니셜 표시 — 배경색은 home-data.js 가 회사명 해시로 정한다 */
.home-jobs__grid .job-card__logo.is-initial {
  border: 0;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.3px;
}

/* ── 2. NEW 배지 — 카드 좌상단 ─────────────────────────────────────
   renderJobCard 는 배지를 제목(h3) 안에 넣는다. 카드 기준으로 띄운다. */
.home-jobs__grid .job-badge-new {
  position: absolute;
  top: 9px; left: 13px;
  margin: 0;
  z-index: 1;
}

/* ── 3. 제목 크게 굵게 / 회사명 파란색 ─────────────────────────────── */
.home-jobs__grid .job-card__title {
  font-size: 15px;
  line-height: 1.32;
  font-weight: 700;
  margin: 0;
  display: block;
  word-break: keep-all;
  overflow-wrap: anywhere;
  padding-right: 24px;        /* 우상단 하트 자리 */
}
.home-jobs__grid .job-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
}
.home-jobs__grid .job-card__company {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  color: var(--brand);        /* 목업의 파란 회사명 */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-jobs__grid .job-card__location {
  font-size: 12px;
  line-height: 1.4;
  margin: 4px 0 0;
  color: var(--text-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 4. 급여 — 데이터에 저장된 그대로. 변환·가공하지 않는다 ──────────
   .job-salary     : displayText (자체공고는 현지통화·시급, 가져오기는 원화 연봉)
   .job-salary-sub : foreignDisplay (가져오기 공고의 외화 환산 병기)
   🔴 이전 단계에서 높이를 줄이려고 sub 를 숨겼던 것을 되돌린다. */
/* 🔴 급여 문자열이 길다("6,834만원 ~ 7,810만원 (연봉)").
   flex 로 두면 좁은 칸에서 여러 줄로 감겨 카드가 확 늘어난다.
   각 줄을 1줄로 고정하고 넘치면 … 로 자른다. 원문은 상세 페이지에서 본다. */
.home-jobs__grid .job-card__aside {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "sal  dday"
    "sub  sub";
  align-items: center;
  gap: 2px 7px;
  text-align: left;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
}
.home-jobs__grid .job-salary {
  grid-area: sal;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-jobs__grid .job-salary-sub {
  grid-area: sub;
  display: block;             /* 되살림 — 이전 단계의 숨김 처리를 되돌린다 */
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-subtle);
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* D-day 는 유지한다 (마감 임박이 신선도보다 행동을 좌우한다) */
.home-jobs__grid .job-dday { grid-area: dday; margin: 0; white-space: nowrap; }

/* 상세보기·지원하기 버튼은 홈에서 감춘다 — 카드 전체가 상세로 가는 링크다 */
.home-jobs__grid .job-card__actions { display: none; }

/* ── 5. 태그 — 한 줄만. 카드가 태그 개수에 따라 들쭉날쭉해지지 않게 ── */
.home-jobs__grid .job-card__tags {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 5px;
  max-height: 22px;
}
.home-jobs__grid .job-tag { font-size: 10.5px; padding: 2px 7px; white-space: nowrap; }

/* ── 6. 저장(하트) — 우상단 고정 ──────────────────────────────────── */
.home-jobs__grid .job-card__save {
  position: absolute;
  top: 26px; right: 10px;
  margin: 0;
  width: 26px; height: 26px;
  font-size: 14px;
}

@media (max-width: 768px) {
  /* 가로 스크롤 카드(265px) 안쪽 여백 */
  .home-jobs__grid .job-card { padding: 28px 12px 10px; }
  .home-jobs__grid .job-card__title { font-size: 14.5px; }
}

/* ── 휴대폰 폭 ────────────────────────────────────────────────────────
   여기 있던 "1열 카드 폭 296px 중앙 정렬" 규칙은 걷어냈다.
   가로 스크롤로 바뀌면서 카드 폭은 위 절의 grid-auto-columns(265px) 가
   정한다. 중앙 정렬(justify-items:center)을 남겨두면 카드가 늘어나지 않고
   내용 폭으로 쪼그라들어 배치가 깨진다.

   ⚠️ 320px 에서도 카드 폭은 265px 그대로다. 화면보다 카드가 좁아
      다음 카드가 살짝 보이는 형태가 유지된다(1.14장).
   -------------------------------------------------------------------- */

/* ── 모바일 헤더 — 로고 잘림 해소 (2026-09-01) ──────────────────────
   🔴 원인: css/styles.css 의 @media (max-width:576px) 가 '옛 헤더'용으로
      .logo / .logo-text / .logo-icon 을 !important 로 잠가 두었다.
        .logo { flex:0 1 auto !important; min-width:0 !important; overflow:hidden !important }
      새 헤더도 js/auth.js 호환을 위해 같은 클래스명(.logo/.logo-text/.logo-icon/
      .language-selector/.auth-buttons)을 함께 달고 있어 이 잠금을 그대로 물려받았다.
      → 도구 모음이 넓어지면 로고 칸이 눌리고 overflow:hidden 이 글자를 잘랐다
        (375px 일본어에서 "WO / JOE").
      ⚠️ 이전 시도인 .wjh-hdr-logo { flex: none } 은 특이도가 낮아
         !important 를 이기지 못해 아무 효과가 없었다.

   🔴 고치는 방법: styles.css 는 건드리지 않는다 (21개 페이지 공용).
      .wjh-hdr 를 앞에 붙여 특이도를 올리고 !important 로 맞선다.
      이 절은 헤더 마크업과 한 쌍이므로 공통 컴포넌트로 뗄 때 함께 옮긴다.

   실측 (로컬, 잘림 0 / 가로 스크롤 없음):
     375px  ko 240 · en 240 · ja 337  (가용 347)
     360px  ko 300 · en 300 · ja 317  (가용 332)
     320px  ko 240 · en 240 · ja 258  (가용 292, 워드마크 접힘 단계)
   ------------------------------------------------------------------ */
@media (max-width: 560px) {
  /* 로고는 줄지도 잘리지도 않는다. 필요한 폭은 도구 모음에서 뺀다 */
  .wjh-hdr .wjh-hdr-logo {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    gap: 7px;
  }
  .wjh-hdr .wjh-hdr-logo__mark { margin-right: 0 !important; }
  .wjh-hdr .wjh-hdr-logo__mark svg { width: 28px !important; height: 28px !important; }

  /* 목업처럼 2줄로 쌓는다 (WORLD / JOB HUB) */
  .wjh-hdr .wjh-hdr-logo__name {
    display: block;
    font-size: 12.5px !important;
    line-height: 1.12;
    letter-spacing: -.2px;
  }
  .wjh-hdr .wjh-hdr-logo__name .logo-text-world { display: block; }

  /* 로고가 쓸 폭을 만들기 위해 도구 모음을 줄인다 */
  .wjh-hdr-bar { gap: 8px; }
  .wjh-hdr .wjh-hdr-tools { gap: 6px; }
  .wjh-hdr .wjh-hdr-auth  { gap: 6px; }
  .wjh-hdr .wjh-hdr-btn   { padding: 7px 9px !important; font-size: 12px !important; }
  .wjh-hdr .wjh-hdr-lang select { max-width: 58px; padding: 4px 0 !important; }
  .wjh-hdr .wjh-hdr-burger { padding: 4px 2px; font-size: 20px; }
}

/* ~400px — 한 단계 더 줄인다 (일본어 문자열이 가장 길다) */
@media (max-width: 400px) {
  .wjh-hdr .wjh-hdr-tools { gap: 5px; }
  .wjh-hdr .wjh-hdr-auth  { gap: 5px; }
  .wjh-hdr .wjh-hdr-btn   { padding: 6px 8px !important; font-size: 11.5px !important; }
  .wjh-hdr .wjh-hdr-lang select { max-width: 52px; font-size: 11.5px !important; }
  .wjh-hdr .wjh-hdr-logo__name { font-size: 12px !important; }
}

/* ~344px — 워드마크를 접고 심볼만 남긴다.
   여기서 더 줄이면 글자가 잘린다. 잘린 글자보다 깨끗한 심볼이 낫다. */
@media (max-width: 344px) {
  .wjh-hdr .wjh-hdr-logo__text { display: none; }
}


/* ==========================================================================
   4단계 — 정적 섹션 마무리
   "준비 중"을 초라해 보이지 않게. 회색 비활성이 아니라
   "곧 제공됩니다"로 읽히도록 브랜드 톤을 유지한다.
   ========================================================================== */

/* 준비 중 표시용 점 — 은은하게 숨쉬는 애니메이션 */
.home-soon-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-light, #2d8bc9);
  margin-right: 7px;
  vertical-align: middle;
  animation: home-soon-pulse 2.4s ease-in-out infinite;
}
@keyframes home-soon-pulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .home-soon-dot { animation: none; opacity: .8; }
}

/* 섹션 헤더의 "준비 중" 배지 */
.home-sec-soon {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700;
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}

/* 빈 상태 — 제목에 점이 들어가므로 정렬을 맞춘다 */
.home-empty__title { display: inline-flex; align-items: center; }
.home-empty__desc br { display: block; content: ''; }

/* ── Verified 우측 카드 ─────────────────────────────────────────────── */
.home-vpromo__btn.is-soon {
  display: inline-flex; align-items: center;
  background: var(--surface);
  border: 1px dashed var(--brand-tint-border);
  color: var(--brand);
  cursor: default;
}
.home-vpromo__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-subtle);
}
.home-vpromo__note a { color: var(--brand); font-weight: 600; }

/* ── 일자리 지도 ────────────────────────────────────────────────────── */
/* 스크린샷이 없어 아이콘 패널로 둔다. 자산이 생기면
   이 요소에 background-image 를 얹고 __preview-inner 를 지우면 된다. */
.home-map__preview {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.home-map__preview-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--brand);
}
.home-map__pin { font-size: 30px; line-height: 1; }
.home-map__preview-tt { font-size: 12.5px; font-weight: 700; }

/* ── 알림 CTA 버튼 ─────────────────────────────────────────────────── */
.home-alert__btn.is-soon {
  display: inline-flex; align-items: center;
  background: var(--surface);
  border: 1px dashed var(--brand-tint-border);
  color: var(--brand);
}

/* ── 가이드 카드 "준비 중" — 회색 비활성 대신 은은한 브랜드 톤 ──────── */
.home-guide.is-soon { opacity: 1; cursor: default; }
.home-guide.is-soon .home-guide__ico { opacity: .85; }
.home-guide.is-soon .home-guide__tt::after {
  content: var(--soon-label);
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
}

@media (max-width: 768px) {
  .home-sec-soon { font-size: 11px; padding: 3px 9px; }
  .home-vpromo__note { font-size: 11.5px; }
}