:root {
  --brand: #0f8a4b;
  --brand-dark: #0b6b3a;
  --brand-light: #e8f7ee;
  --ink: #16181d;
  --ink-soft: #565c66;
  --ink-faint: #6b7280;
  --line: #e7e9ed;
  --bg: #f6f7f9;
  --card: #ffffff;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
  --radius: 14px;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* --- Header --- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); overflow: hidden; }
.site-header .wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 80px; display: flex; justify-content: space-between; align-items: center; }
.site-header .brand { font-size: 20px; font-weight: 800; color: var(--brand); letter-spacing: -.02em; display: flex; align-items: center; }
.site-header .brand-logo { height: 48px; display: block; }
.header-bg-image, .footer-bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.site-bg-fixed { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1; pointer-events: none; }
.site-header nav { display: flex; align-items: center; gap: 4px; }
.site-header nav a, .site-header nav button.nav-login-btn { padding: 8px 14px; border-radius: 999px; color: var(--ink-soft); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; font-family: inherit; }
.site-header nav a:hover { background: var(--bg); color: var(--ink); }
.site-header nav a.nav-login-btn, .site-header nav button.nav-login-btn { margin-left: 6px; background: var(--brand); color: #fff; font-weight: 600; border: none; cursor: pointer; }
.site-header nav a.nav-login-btn:hover, .site-header nav button.nav-login-btn:hover { background: var(--brand-dark); color: #fff; }

/* 콘텐츠가 짧아도 푸터가 항상 브라우저 창 맨 아래에 붙도록(하단에 빈 공간이 남지 않게) —
   body를 세로 flex 컨테이너로 만들고 본문(site-main)이 남는 높이를 전부 차지하게 한다. */
body { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; max-width: 1120px; margin: 40px auto; padding: 0 24px; min-height: 60vh; width: 100%; }
.site-footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: 32px 24px; text-align: center; color: var(--ink-faint); font-size: 13px; margin-top: 64px; }
.site-footer .wrap { position: relative; z-index: 1; max-width: 1920px; margin: 0 auto; }
/* 일사이트(비-헤드헌터) 푸터는 헤더와 동일한 1120px 폭으로 맞춘다(item 14) — 개인사이트
   푸터(.hh-footer, FHD 1920px 유지)는 이 스코핑에서 제외한다. 좌우 24px 패딩도 .site-header
   .wrap/.site-main과 맞춰야 우측 정렬된 글자(.hh-footer-right)가 광고열/헤더보다 더 오른쪽으로
   삐져나가지 않는다(이전엔 패딩이 없어 24px만큼 더 오른쪽에 찍혔다). */
.site-footer:not(.hh-footer) .wrap { max-width: 1120px; padding: 0 24px; }
.site-footer .footer-company-info { margin: 0 0 6px; font-size: 12px; color: var(--ink-faint); }
.site-footer .footer-company-info a { color: var(--ink-faint); }
.site-footer .footer-company-info a:hover { color: var(--brand-dark); }

/* --- Hero --- */
/* display:flex + justify-content:center로 세로 중앙정렬 — 관리자가 "메인 이미지 세로 길이"를
   지정하면(아래 hero-image-height 인라인 style) 패딩과 무관하게 내용이 항상 정중앙에 오고,
   지정하지 않으면(기본값) 기존처럼 패딩이 곧 높이가 되어 동일하게 보인다. */
.hero { position: relative; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 126px 24px; margin-bottom: 44px; border-radius: 28px; background: radial-gradient(circle at 30% 20%, var(--brand-light), transparent 60%), linear-gradient(180deg, #fbfdfc, #f3f7f5); overflow: hidden; }
/* "일사이트" 제목(h1)이 이 배지와 검색창 사이 정중앙에 오도록, 배지의 아래 여백을 h1의
   아래 여백(30px)과 동일하게 맞춘다. 배지가 <p> 태그라 뒤의 .hero p(font-size/margin 지정)
   보다 명시도가 낮으면 그쪽에 밀리므로, .hero로 한 번 더 감싸 명시도를 올려둔다. */
.hero .hero-trust-badge { display: inline-block; margin: 0 0 30px; padding: 6px 16px; border-radius: 999px; background: var(--brand-light); color: var(--brand-dark); font-size: 25px; font-weight: 700; letter-spacing: .01em; line-height: 2.4; }
.hero h1 { font-size: 36px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 30px; line-height: 2.4; }
.hero p { color: var(--ink-soft); font-size: 15.5px; margin: 0; line-height: 2.8; }
/* 히어로 이미지 전용 레이어 — 투명도(기본 30%)를 이미지에만 적용하고 텍스트/키워드 박스는
   항상 완전히 선명하게 유지하기 위해 .hero 자체가 아니라 별도 절대배치 div로 분리했다.
   (필터바 버튼은 .filter-bar에서, 옛 .hero-search 검색창은 삭제되어 여기 없다.) */
.hero-bg-layer { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
/* 예전엔 이미지 위에 고정 어두운 오버레이(.hero-veil)를 깔아 글자 가독성을 확보했지만,
   관리자가 올린 이미지가 원본보다 항상 어둡게 보인다는 지적으로 제거했다 — 대신 아래
   .hero-with-image의 text-shadow만으로 가독성을 확보한다(이미지 자체는 밝기/투명도
   설정값 그대로 원본처럼 노출). */
.hero-with-image .hero-trust-badge, .hero-with-image h1, .hero-with-image > p { position: relative; z-index: 1; }
.filter-bar button { background: var(--brand); color: #fff; border: none; padding: 14px 26px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 14px; transition: background .15s, transform .15s; }
.filter-bar button:hover { background: var(--brand-dark); transform: translateY(-1px); }
.filter-bar button:active { transform: scale(.97); }
.hero-with-image { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.hero-with-image .hero-trust-badge { background: rgba(255,255,255,.16); color: #fff; }
.hero-with-image p { color: rgba(255,255,255,.85); }

/* --- 채용공고 키워드(해시태그) 박스 --- */
/* 배경만 기본 30% 투명 — opacity 속성 대신 rgba를 써서 안의 해시태그 버튼(.keyword-tag-btn)은
   투명도 영향 없이 항상 또렷하게 보이도록 한다. 히어로 이미지 안에 겹쳐 있던 것을 이미지
   하단 20px 아래의 독립 섹션으로 옮겼다(item 8) — .hero의 형제 요소라 더 이상 텍스트 정렬을
   .hero에서 물려받지 않으므로 여기서 명시한다. */
.home-keywords { position: relative; text-align: left; max-width: 1120px; margin: 20px auto 32px; padding: 22px 24px; background: rgba(255,255,255,.3); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.home-keywords h2 { font-size: 14px; font-weight: 700; margin: 0 0 14px; color: #16181d; }

/* --- 일사이트 홈 지역별 검색 버튼 (메인이미지 바로 아래) --- */
/* margin-bottom은 home.php가 키워드박스 유무에 따라 인라인으로 지정한다(둘 다 44px로 만들
   수 없는 두 요구사항을 동시에 만족시키기 위함 — 상세 설명은 home.php 주석 참고). */
.home-region-row { max-width: 1120px; margin: 20px auto 0; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.home-region-btn { flex: 1 1 0; min-width: 100px; text-align: center; padding: 12px 8px; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 700; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.home-region-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
@media (max-width: 720px) {
  .home-region-btn { flex: 1 1 calc(25% - 10px); min-width: 80px; }
}
/* flex-wrap 컨테이너는 justify-content가 줄마다 독립 적용되므로, space-between 하나로
   각 줄이 양끝까지 꽉 채워지는 "양끝맞추기"가 자동으로 된다. max-height+overflow는 3줄까지만
   노출하고 그 아래는 잘라낸다(정확한 px 값은 실제 버튼 높이를 브라우저에서 실측해 반영). */
.keyword-tag-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; max-height: 116px; overflow: hidden; }
.keyword-tag-btn { display: inline-block; padding: 7px 16px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.keyword-tag-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.keyword-tag-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.active-tag-chip { display: flex; align-items: center; gap: 8px; margin: -8px 0 18px; font-size: 13px; color: var(--ink-soft); }
.active-tag-chip span { font-weight: 700; color: var(--brand-dark); }
.active-tag-chip a { color: var(--ink-faint); }
.active-tag-chip a:hover { color: var(--brand-dark); }

/* --- Job list / cards (+ 우측 광고 레일) --- */
.section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.section-header h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.section-header a { color: var(--ink-soft); font-size: 13px; font-weight: 500; }
.section-header a:hover { color: var(--brand); }
/* .section-header a(위 규칙)가 13px/500 "더보기"류 링크용이라 font-size까지 상속을 끊어버려서,
   h2 자체 크기(19px/700)를 그대로 보여주려면 font: inherit로 h2의 폰트 속성 전체를 다시 물려받아야 한다. */
.section-header h2 a.section-title-link { font: inherit; color: inherit; text-decoration: none; }
.section-header h2 a.section-title-link:hover { color: var(--brand); }

.job-section-layout { display: grid; grid-template-columns: 1fr 200px; gap: 20px; align-items: start; }
.home-ad-rail { display: flex; flex-direction: column; gap: 12px; }
.home-ad-item { position: relative; display: block; width: 200px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: box-shadow .18s, transform .18s; }
.home-ad-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.home-ad-item img { display: block; width: 200px; height: 70px; object-fit: cover; }
/* 광고 이미지 위에 얹히는 광고명 라벨 — 글자색/크기는 관리자가 지정, 어느 이미지에서도
   읽히도록 하단에 반투명 어두운 띠를 깔고 그 위에 글자를 놓는다. */
.ad-title-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; background: rgba(10, 14, 20, .55);
  font-weight: 700; text-align: center; line-height: 1.3; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* 일사이트 홈 광고 레일 맨 위 고정 전자시계(선택, 최고관리자가 광고설정에서 노출여부/형태를
   고른다) — .home-ad-item과 동일한 200x70 크기를 맞춰 광고 목록과 나란히 자연스럽게 놓인다.
   형태별로 배경/글자만 다르고 마크업(.home-clock-date/.home-clock-time)은 공유한다. */
.home-clock {
  width: 200px; height: 70px; border-radius: 12px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.home-clock-date { font-size: 12.5px; letter-spacing: .6px; }
.home-clock-time { font-size: 21px; font-weight: 700; letter-spacing: 1.5px; font-variant-numeric: tabular-nums; line-height: 1; }

.home-clock-led { background: radial-gradient(130% 170% at 50% -10%, #123023 0%, #050e09 75%); border: 1px solid #164227; }
.home-clock-led .home-clock-date { font-family: 'Consolas', 'SFMono-Regular', monospace; color: #3fae6a; }
.home-clock-led .home-clock-time { font-family: 'Consolas', 'SFMono-Regular', monospace; color: #4dff9e; text-shadow: 0 0 6px rgba(77,255,158,.85), 0 0 16px rgba(77,255,158,.45); }

.home-clock-flip { position: relative; background: linear-gradient(180deg, #30343f 0%, #1a1d24 100%); border: 1px solid #3d4250; overflow: hidden; }
.home-clock-flip::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.45); }
.home-clock-flip .home-clock-date { font-family: 'Segoe UI', sans-serif; color: #9aa3b5; }
.home-clock-flip .home-clock-time { font-family: 'Consolas', 'SFMono-Regular', monospace; color: #f4f6fb; text-shadow: 0 1px 0 rgba(0,0,0,.6); }

.home-clock-minimal { background: linear-gradient(135deg, #4f6df5 0%, #7b5cf0 100%); }
.home-clock-minimal .home-clock-date { font-family: 'Segoe UI', sans-serif; color: rgba(255,255,255,.88); text-transform: uppercase; }
.home-clock-minimal .home-clock-time { font-family: 'Segoe UI', sans-serif; color: #fff; }

.home-clock-paper { background: #f4ecd8; border: 1px solid #d9cba6; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), var(--shadow-sm); }
.home-clock-paper .home-clock-date { font-family: Georgia, 'Times New Roman', serif; color: #8a7350; letter-spacing: .3px; }
.home-clock-paper .home-clock-time { font-family: Georgia, 'Times New Roman', serif; color: #3a2f1f; letter-spacing: .5px; }

.home-clock-neon { background: #0a0a0f; border: 1px solid #2a2a35; }
.home-clock-neon .home-clock-date { font-family: 'Segoe UI', sans-serif; color: #4dd8ff; text-shadow: 0 0 5px rgba(77,216,255,.8); }
.home-clock-neon .home-clock-time { font-family: 'Consolas', 'SFMono-Regular', monospace; color: #ff4de1; text-shadow: 0 0 6px rgba(255,77,225,.9), 0 0 18px rgba(255,77,225,.5); }

.home-clock-glass { position: relative; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.home-clock-glass .home-clock-date { font-family: 'Segoe UI', sans-serif; color: rgba(255,255,255,.85); }
.home-clock-glass .home-clock-time { font-family: 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); }

.home-clock-wood { background: linear-gradient(160deg, #8a5a34 0%, #5c3a20 100%); border: 1px solid #4a2f1a; }
.home-clock-wood .home-clock-date { font-family: Georgia, serif; color: #e6c99a; }
.home-clock-wood .home-clock-time { font-family: Georgia, serif; color: #fbe8c8; text-shadow: 0 1px 1px rgba(0,0,0,.4); }

.home-clock-pastel { background: linear-gradient(135deg, #ffd6e8 0%, #d6e4ff 50%, #d6fff0 100%); }
.home-clock-pastel .home-clock-date { font-family: 'Segoe UI', sans-serif; color: #7a6f8a; }
.home-clock-pastel .home-clock-time { font-family: 'Segoe UI', sans-serif; color: #5a4f6a; }

.home-clock-mono { background: #ffffff; border: 1.5px solid #111111; }
.home-clock-mono .home-clock-date { font-family: 'Consolas', 'SFMono-Regular', monospace; color: #444444; }
.home-clock-mono .home-clock-time { font-family: 'Consolas', 'SFMono-Regular', monospace; color: #111111; }

.home-clock-gold { background: linear-gradient(160deg, #1c1c1c 0%, #0a0a0a 100%); border: 1px solid #7a6224; }
.home-clock-gold .home-clock-date { font-family: Georgia, serif; color: #c9a24b; letter-spacing: .5px; }
.home-clock-gold .home-clock-time { font-family: Georgia, serif; color: #f1d78c; text-shadow: 0 0 8px rgba(241,215,140,.4); }

/* ================= 바늘시계(analog) 계열 — 텍스트 기반 시계와는 마크업 자체가 다른, 완전히
   다른 형태의 시계. 얼굴판(.clock-face) 위에 시침/분침/초침을 CSS transform:rotate로 얹고,
   JS가 매초 각도를 다시 계산해 회전시킨다. 스킨(클래식/모던/빈티지/원목)은 색상만 다르고
   구조는 공유한다. */
/* 원형 얼굴판을 광고박스와 동일한 폭(200px)의 카드 위에 얹는다(옵션1) — 카드 자체는
   .home-ad-item과 같은 배경/테두리/그림자를 써서 광고 목록과 짝을 이루는 느낌을 준다.
   사각테두리 스킨(*_square, 아래 .home-clock-shape-square)은 이 카드를 그대로 쓰면서
   얼굴판(.clock-face)의 모서리만 원형→사각으로 바꾼다(옵션2) — 카드/스킨 색상 코드는 완전히 공유. */
.home-clock-family-analog { width: 200px; height: 124px; margin: 0 auto; flex-direction: column; justify-content: flex-start; padding-top: 10px; gap: 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.home-clock-shape-square .clock-face { border-radius: 14px; }
.clock-face { position: relative; width: 88px; height: 88px; border-radius: 50%; }
.clock-tick { position: absolute; top: 3px; left: 50%; width: 2px; height: 9px; margin-left: -1px; transform-origin: 1px 41px; border-radius: 1px; }
.clock-num { position: absolute; font-size: 10px; font-weight: 700; }
.clock-num-12 { top: 8px; left: 50%; transform: translateX(-50%); }
.clock-num-6 { bottom: 8px; left: 50%; transform: translateX(-50%); }
.clock-num-3 { right: 9px; top: 50%; transform: translateY(-50%); }
.clock-num-9 { left: 9px; top: 50%; transform: translateY(-50%); }
.clock-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 3px; }
.clock-hand-hour { width: 4px; height: 22px; margin-left: -2px; }
.clock-hand-minute { width: 3px; height: 31px; margin-left: -1.5px; }
.clock-hand-second { width: 1.5px; height: 35px; margin-left: -.75px; }
.clock-center-dot { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; margin: -4px 0 0 -4px; }
.home-clock-family-analog .home-clock-date { font-size: 12px; }

.home-clock-analog_classic .clock-face { background: #ffffff; border: 2px solid #1f2430; }
.home-clock-analog_classic .clock-tick { background: #1f2430; }
.home-clock-analog_classic .clock-num { color: #1f2430; }
.home-clock-analog_classic .clock-hand-hour, .home-clock-analog_classic .clock-hand-minute { background: #1f2430; }
.home-clock-analog_classic .clock-hand-second { background: #d64545; }
.home-clock-analog_classic .clock-center-dot { background: #d64545; }
.home-clock-analog_classic .home-clock-date { color: #555555; }

.home-clock-analog_modern .clock-face { background: #f4f5f8; border: none; }
.home-clock-analog_modern .clock-tick { background: #c7ccd6; }
.home-clock-analog_modern .clock-num { display: none; }
.home-clock-analog_modern .clock-hand-hour, .home-clock-analog_modern .clock-hand-minute { background: #2b2f3a; }
.home-clock-analog_modern .clock-hand-second { background: #4f6df5; }
.home-clock-analog_modern .clock-center-dot { background: #2b2f3a; }
.home-clock-analog_modern .home-clock-date { color: #8a90a0; }

.home-clock-analog_retro .clock-face { background: #f4ecd8; border: 3px solid #8a7350; }
.home-clock-analog_retro .clock-tick { background: #8a7350; }
.home-clock-analog_retro .clock-num { color: #5c4a2e; font-family: Georgia, serif; }
.home-clock-analog_retro .clock-hand-hour, .home-clock-analog_retro .clock-hand-minute { background: #5c4a2e; }
.home-clock-analog_retro .clock-hand-second { background: #a5342c; }
.home-clock-analog_retro .clock-center-dot { background: #a5342c; }
.home-clock-analog_retro .home-clock-date { color: #8a7350; }

.home-clock-analog_wood .clock-face { background: linear-gradient(160deg, #8a5a34 0%, #5c3a20 100%); border: 3px solid #4a2f1a; }
.home-clock-analog_wood .clock-tick { background: #f1d9b0; }
.home-clock-analog_wood .clock-num { display: none; }
.home-clock-analog_wood .clock-hand-hour, .home-clock-analog_wood .clock-hand-minute { background: #fbe8c8; }
.home-clock-analog_wood .clock-hand-second { background: #e6b325; }
.home-clock-analog_wood .clock-center-dot { background: #e6b325; }
.home-clock-analog_wood .home-clock-date { color: #e6c99a; }

/* ================= 이진법(binary) 시계 — 시/분/초 각 자리를 2진수 점(BCD)으로 표시하는,
   바늘시계와도 또 다른 형태. 6열(시 십/일의자리, 분 십/일의자리, 초 십/일의자리) x 4행. */
.home-clock-family-binary { width: 200px; height: 96px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: #0a0a0f; border: 1px solid #22242e; }
.binary-clock { display: flex; gap: 8px; }
.bin-col { display: flex; flex-direction: column; gap: 3px; }
.bin-dot { width: 8px; height: 8px; border-radius: 50%; background: #23262f; display: block; }
.bin-dot.on { background: #4dff9e; box-shadow: 0 0 5px rgba(77,255,158,.85); }
.bin-labels { display: flex; gap: 21px; font-size: 9px; color: #6a7080; padding-left: 3px; }
.home-clock-family-binary .home-clock-date { font-size: 11.5px; color: #6a7080; }

/* ================= 원형 게이지(ring) 시계 — 초를 원형 진행바로 보여주고 중앙에 디지털 시각을
   같이 표시하는 하이브리드 형태. 레이아웃(.home-clock-family-ring)은 색 배치와 무관하게
   공유하고, 배경/링 색상/글자색은 스킨별(.home-clock-ring 등)로 분리해 밝은 형태를 포함한
   여러 색 배치를 추가하기 쉽게 한다. */
.home-clock-family-ring { width: 200px; height: 110px; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 6px; gap: 4px; border-radius: 12px; }
.clock-ring-wrap { position: relative; width: 70px; height: 70px; }
.clock-ring circle { fill: none; stroke-width: 6; }
.clock-ring-progress { stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .25s linear; }
.clock-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.clock-ring-text .home-clock-time { font-size: 10.5px; letter-spacing: .5px; font-family: 'Segoe UI', sans-serif; }
.home-clock-family-ring .home-clock-date { font-size: 11px; }

.home-clock-ring { background: #111318; border: 1px solid #262a35; }
.home-clock-ring .clock-ring-bg { stroke: rgba(255,255,255,.12); }
.home-clock-ring .clock-ring-progress { stroke: #4dd8ff; }
.home-clock-ring .clock-ring-text .home-clock-time { color: #fff; }
.home-clock-ring .home-clock-date { color: #7d8494; }

.home-clock-ring_bright { background: #ffffff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.home-clock-ring_bright .clock-ring-bg { stroke: rgba(16,24,40,.08); }
.home-clock-ring_bright .clock-ring-progress { stroke: #4f6df5; }
.home-clock-ring_bright .clock-ring-text .home-clock-time { color: #1f2430; }
.home-clock-ring_bright .home-clock-date { color: #7a8194; }

.home-clock-ring_sunset { background: linear-gradient(135deg, #fff1e6 0%, #ffe0d0 100%); border: 1px solid #f6cdb3; }
.home-clock-ring_sunset .clock-ring-bg { stroke: rgba(122,59,30,.14); }
.home-clock-ring_sunset .clock-ring-progress { stroke: #ff6b45; }
.home-clock-ring_sunset .clock-ring-text .home-clock-time { color: #7a3b1e; }
.home-clock-ring_sunset .home-clock-date { color: #a56a49; }

.home-clock-ring_ocean { background: linear-gradient(160deg, #0b3d5c 0%, #072a42 100%); border: 1px solid #0a4a6e; }
.home-clock-ring_ocean .clock-ring-bg { stroke: rgba(255,255,255,.14); }
.home-clock-ring_ocean .clock-ring-progress { stroke: #38e1ff; }
.home-clock-ring_ocean .clock-ring-text .home-clock-time { color: #fff; }
.home-clock-ring_ocean .home-clock-date { color: #9cc2d6; }

.home-clock-ring_forest { background: linear-gradient(160deg, #123524 0%, #0a2318 100%); border: 1px solid #1a4530; }
.home-clock-ring_forest .clock-ring-bg { stroke: rgba(255,255,255,.14); }
.home-clock-ring_forest .clock-ring-progress { stroke: #6ee7a0; }
.home-clock-ring_forest .clock-ring-text .home-clock-time { color: #f2fbf5; }
.home-clock-ring_forest .home-clock-date { color: #9fc9ac; }

@media (max-width: 800px) {
  .job-section-layout { grid-template-columns: 1fr; }
  .home-ad-rail { flex-direction: row; flex-wrap: wrap; }
}

.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
/* 카드 높이를 고정하고 제목을 2줄로 말줄임(line-clamp)해서, 글자수와 무관하게 카드 크기가
   항상 동일하게 유지되도록 한다. */
.job-card { display: flex; flex-direction: column; height: 170px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s, border-color .2s; }
.job-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: transparent; }
.job-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex: 0 0 auto; }
.job-card-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line); }
.job-card-logo-fallback { display: flex; align-items: center; justify-content: center; background: var(--brand-light); color: var(--brand-dark); font-weight: 800; font-size: 14px; }
.job-card-title { font-size: 20px; font-weight: 800; margin: 12px 0 0; color: var(--ink); line-height: 1.35; flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-card-company { font-size: 13px; color: var(--ink-soft); margin: 0; }
.job-card-badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
/* 일사이트 홈 "최신 채용공고" 전용 — 제목 17px·2줄 기준으로, 2줄이 잘리지 않는 선에서
   박스 세로길이를 최소로 줄였다. */
.job-grid-compact .job-card { height: 108px; padding: 14px; }
.job-grid-compact .job-card-top { margin-bottom: 6px; }
.job-grid-compact .job-card-title { font-size: 17px; line-height: 1.3; margin-top: 6px; }

/* 잡허브 홈 "최신 채용공고" 전용(12박스) — 제목은 18px·2줄(기본 job-card-title의 line-clamp:2를
   그대로 물려받음), 박스 세로길이는 2줄이 잘리지 않는 선에서 최소로만 늘렸다. 위
   job-grid-compact(일사이트, 9박스/24px/2줄)와는 별도 클래스로 완전히 분리해서 일사이트
   쪽에는 영향이 없다. */
.job-grid-compact-jobhub .job-card { height: 112px; padding: 14px; }
.job-grid-compact-jobhub .job-card-top { margin-bottom: 6px; }
.job-grid-compact-jobhub .job-card-title { font-size: 18px; line-height: 1.3; margin-top: 6px; }

/* --- 채용공고 리스트 페이지(/jobs) — 상단 박스형 카드 한 줄 + 그 아래 리스트형 행 --- */
.job-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 20px; }
.job-list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: var(--card); border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background .15s; }
.job-list-row:last-child { border-bottom: none; }
.job-list-row:hover { background: var(--bg); }
.job-list-title { font-weight: 700; font-size: 15px; color: var(--ink); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-list-meta { display: flex; gap: 5px; flex-wrap: nowrap; flex-shrink: 0; }

/* --- 채용공고 리스트 페이지 헤더 바로 아래 상단배너(세로 200px, 최고관리자가 여러 개 등록시 무작위 노출) --- */
.jobs-listing-banner { display: block; width: 100%; height: 200px; overflow: hidden; }
.jobs-listing-banner img { width: 100%; height: 200px; object-fit: cover; display: block; }

/* --- 채용공고 리스트/상세 페이지 푸터 바로 위 광고 8개 열(개인사이트 hh-ad-strip과 동일한 타일 재사용) --- */
.jobs-footer-ad-row { max-width: 1120px; margin: 40px auto 0; padding: 0 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-blue { background: #eaf1ff; color: #2358d6; }
.badge-gray { background: #f0f1f3; color: #565c66; }
.badge-green { background: var(--brand-light); color: var(--brand-dark); }
.badge-orange { background: #fef2e6; color: #c26a1c; }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; background: var(--card); padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.filter-bar select, .filter-bar input { padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; background: #fff; transition: border-color .15s; }
.filter-bar select:focus, .filter-bar input:focus { outline: none; border-color: var(--brand); }
.result-count { color: var(--ink-soft); font-size: 13px; margin-bottom: 14px; }
.empty { text-align: center; padding: 64px 24px; color: var(--ink-faint); background: var(--card); border-radius: var(--radius); border: 1px dashed var(--line); }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.pagination a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); font-size: 13px; font-weight: 500; transition: background .15s; }
.pagination a:hover { background: var(--bg); }
.pagination a.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --- Job detail --- */
.back-link { display: inline-block; margin-bottom: 16px; color: var(--ink-faint); font-size: 13px; font-weight: 500; }
.back-link:hover { color: var(--ink); }
.job-detail-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-sm); }
.job-detail-image { width: 100%; border-radius: 12px; margin-bottom: 30px; max-height: 260px; object-fit: cover; }
.job-detail-card h1 { font-size: 36px; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 4px; }
.job-detail-company { color: var(--ink-soft); margin: 0 0 4px; font-weight: 500; }
.job-detail-summary { color: var(--ink-faint); font-size: 14px; margin-bottom: 16px; }
.job-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 14px; background: var(--bg); border-radius: 14px; padding: 20px; margin: 24px 0; }
.job-info-grid .label { font-size: 12px; color: var(--ink-faint); margin: 0; }
.job-info-grid .value { font-size: 14px; font-weight: 700; margin: 3px 0 0; }
.content-panel { margin-bottom: 24px; }
.content-panel h2 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.pre-wrap { white-space: pre-wrap; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.notice-box { background: #eef6fb; border: 1px solid #cfe6f4; border-radius: 12px; padding: 18px; }
.company-name { font-weight: 700; }
.apply-btn { display: block; text-align: center; background: var(--brand); color: #fff; padding: 16px; border-radius: 14px; margin-top: 28px; font-weight: 700; font-size: 15px; box-shadow: var(--shadow-md); transition: background .15s, transform .1s; }
.apply-btn:hover { background: var(--brand-dark); }
.apply-btn:active { transform: scale(.98); }

/* --- TEMPLATE poster --- */
.template-poster { display: flex; flex-direction: column; gap: 22px; margin-top: 30px; margin-bottom: 26px; }
.template-banner { width: 100%; border-radius: 14px; object-fit: cover; }
.template-title { text-align: center; font-size: 23px; font-weight: 800; color: #b91c1c; margin: 0; }
.template-intro { color: var(--ink-soft); font-size: 14px; margin: 0; }
.template-section-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.template-table { border: 1px solid #cfe0ee; border-radius: 12px; overflow: hidden; }
.template-table-row { display: grid; grid-template-columns: 100px 1fr; font-size: 14px; }
.template-table-row + .template-table-row { border-top: 1px solid #cfe0ee; }
.template-table-label { background: #eef6fb; padding: 12px 14px; font-weight: 700; color: var(--ink); }
.template-table-value { padding: 12px 14px; color: var(--ink-soft); }

.consent-disclosure { margin-top: 28px; padding: 18px; background: var(--bg); border-radius: 14px; font-size: 12px; color: var(--ink-faint); line-height: 1.8; }

.job-footer-text p { font-size: 12px; color: var(--ink-faint); line-height: 1.8; }
.job-footer-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; padding: 20px; margin: 24px 0; border: 1px solid var(--line); border-radius: 14px; }
.job-footer-logos img { height: 40px; max-width: 140px; object-fit: contain; }

/* --- Headhunter profile / directory --- */

/* 개인사이트 메인(커버) 화면 — 배경 이미지는 브라우저 폭 전체(100vw)로 노출되고, 그 위의
   콘텐츠는 FHD(1920px) 폭 안에서 중앙 정렬된다. site-main-full이 기존 site-main의
   1120px 폭 제약(max-width/margin/padding)을 해제한다. display:flex 체인(아래 hh-cover-section/
   hh-cover-content/hh-main-banner까지 flex:1로 이어짐)은 sticky-footer 패턴(site-main이
   flex:1 0 auto로 남는 세로공간을 다 차지)에서 메인이미지가 그 늘어난 공간을 전부 채우게 해
   메인이미지 아래·푸터 위에 빈 공간이 남지 않도록 한다. */
.site-main.site-main-full { max-width: none; margin: 0; padding: 0; min-height: 0; display: flex; flex-direction: column; }

/* 개인사이트 메인 커버 — 배경이미지는 CSS background-image로 폭 100%에 맞춰 세로는 원본
   비율 그대로(background-size:100% auto) 배치하고, 콘텐츠보다 짧으면 세로로 반복(repeat-y)해서
   빈틈없이 채운다(높이가 짧은 이미지를 억지로 늘려 흐려지는 것 방지). 섹션 자체의 높이는
   min-height 없이 콘텐츠 높이 그대로 — 그래야 이미지가 마지막 콘텐츠(광고) 바로 아래에서
   끝나고 곧바로 푸터 구분선으로 이어져 빈 공간이 남지 않는다. */
.hh-cover-section { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; flex: 1; display: flex; flex-direction: column; }
/* 배경 이미지 전용 레이어 — 헤드/중앙/푸터 모두의 공통 배경이 되도록 특정 섹션이 아니라
   body 최상단에 뷰포트 고정(position:fixed)으로 렌더링되어 모든 콘텐츠 뒤에 깔린다
   (app/Views/site/layout/main.php에서 렌더링). */
.hh-cover-bg-layer { position: fixed; inset: 0; z-index: -1; background-repeat: repeat-y; background-position: top center; background-size: 100% auto; pointer-events: none; }
/* padding 없음 — 메인이미지(.hh-main-banner)가 좌우로 FHD(1920px) 가로 사이즈를 그대로 채우고,
   위아래로도 여백 없이 헤드/푸터에 바로 맞닿아야 하기 때문(아래 .hh-main-banner 주석 참고). */
.hh-cover-content { position: relative; z-index: 1; width: 100%; max-width: 1920px; margin: 0 auto; padding: 0; flex: 1; display: flex; flex-direction: column; }

/* 메인이미지(FHD) 배너 — 배경이미지(맨 아래 바탕) 위에 올라오는 실제 주인공 이미지이며,
   그 위에 중앙문구+채용공고가 오버레이로 얹힌다. 위아래 여백 없이 곧바로 헤드/푸터와 맞닿도록
   .hh-cover-content의 padding을 0으로 없앴고, 그래서 모서리가 헤드/푸터와 어긋나 보이지 않게
   border-radius도 주지 않는다. 이미지가 없어도 레이아웃이 유지되도록 그라데이션 배경을 기본값으로 둔다. */
.hh-main-banner { position: relative; flex: 1; min-height: 70vh; overflow: hidden; display: flex; align-items: center; background: linear-gradient(135deg, var(--ink), #1b2233); }
.hh-main-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* 예전엔 이미지 위에 고정 어두운 오버레이(.hh-main-banner-veil)를 깔았지만, 관리자가 올린
   이미지가 원본보다 항상 어둡게 보인다는 지적(일사이트/루트사이트와 동일 패턴)으로 제거했다
   — 히어로 문구(.hh-cover-title)는 이미 text-shadow가 있어 가독성에 영향 없음. */

/* 메인이미지 위 콘텐츠 — 좌측(중앙문구)/우측(채용공고) 동일 높이 2단(기획 와이어프레임 반영).
   우측(채용공고 카드)이 메인이미지 우측선에서 100px 떨어지도록 padding-right만 100px —
   하단 광고줄(.hh-ad-strip)의 우측 여백(100px)과 맞춰 시각적으로 같은 세로선에 정렬된다. */
/* 하단 padding을 크게 잡아(240px) 콘텐츠가 실제 담당하는 세로 폭을 줄인다 — .hh-main-layout이
   부모(.hh-main-banner)의 align-items:center로 수직 중앙정렬되므로, 이렇게 아래쪽 여백을
   비대칭으로 키우면 콘텐츠(우측 채용공고 박스 포함)가 그만큼 위로 밀려 올라가 절대배치된
   하단 광고줄(.hh-ad-strip, 최대 2줄 기준 약 196px)과 겹치지 않는다. */
.hh-main-layout { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr 320px; align-items: stretch; gap: 32px; padding: 48px 100px 240px 48px; }
.hh-main-layout-single { grid-template-columns: 1fr; }
/* 채용공고 박스(우측 320px 고정폭) — 화면이 좁아지면 좌측 문구 트랙이 너무 눌리므로, 진짜
   모바일(640px)까지 기다리지 않고 좀 더 넉넉한 폭(900px)에서부터 미리 세로로 쌓는다. */
@media (max-width: 900px) {
  .hh-main-layout { grid-template-columns: 1fr; }
}
.hh-main-left { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; }
.hh-cover-title { align-self: stretch; color: #fff; font-size: 32px; font-weight: 800; text-align: center; text-shadow: 0 2px 16px rgba(0,0,0,.4); padding: 0 24px; margin: 0; line-height: 1.3; }
.hh-cta-box { position: relative; display: flex; align-items: center; justify-content: center; min-height: 90px; min-width: 200px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; border: none; border-radius: 14px; box-shadow: var(--shadow-md); transition: box-shadow .18s, transform .18s; overflow: hidden; font-weight: 700; font-size: 15px; text-align: center; padding: 8px; }
.hh-cta-box:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* 광고 줄 — 마크업상 .hh-main-banner의 형제(.hh-cover-content 바로 아래)로 옮겨졌지만, PC에서는
   여전히 절대배치로 메인이미지 하단에 겹쳐 보이도록 한다(.hh-cover-content가 position:relative라
   기준이 되고, 데스크톱에서는 이 줄이 흐름에서 빠지므로 .hh-cover-content의 높이는 사실상
   .hh-main-banner 높이와 같아 기존과 동일한 위치에 고정된다). 좌우 모두 메인이미지 가장자리에서
   100px씩 여백을 두고 펼쳐진다. 헤드헌터정보 버튼이 맨 처음에 오고, 뒤이어 광고가 나열된다.
   모바일(아래 640px 미디어쿼리)에서는 버튼 개수가 많아 여러 줄로 감싸질 때 bottom 고정 절대배치가
   위쪽으로 계속 자라나 이미지 상단 밖으로 넘쳐 overflow:hidden에 잘려 첫 버튼(헤드헌터정보)이
   안 보이는 문제가 있었다 — position:static으로 바꿔 이미지 아래에 자연스러운 흐름으로 배치한다. */
.hh-ad-strip { position: absolute; left: 100px; right: 100px; bottom: 40px; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
/* 개인사이트 광고 버튼 — 일사이트 홈 광고 레일과 동일하게 가로 200 x 세로 70 고정. 헤드헌터정보
   버튼도 동일 사이즈로 통일한다. */
.hh-cta-ad, .hh-cta-info { width: 200px; height: 70px; min-height: 70px; min-width: 200px; padding: 0; }

/* 채용공고 — 메인이미지 우측에 떠 있는 카드. 노출 개수는 개인이 설정(headhunter_profiles.jobs_limit)
   에서 제한하지만, 혹시 항목이 많아 박스가 커지더라도 하단 광고줄과 겹치지 않도록 최대높이를
   .hh-main-layout의 하단 예약 여백(240px)보다 낮게 잡고 넘치면 스크롤한다. */
.hh-main-right { background: rgba(255,255,255,.95); border-radius: 16px; padding: 22px; max-height: 55vh; overflow-y: auto; box-shadow: var(--shadow-md); }
.hh-joblist-empty { color: var(--ink-faint); font-size: 13px; }
.hh-job-list-blocks { display: flex; flex-direction: column; gap: 10px; }
/* 일사이트 채용공고 박스(.job-card)와 노출내용을 동일하게 맞춘다 — 지역/직종/고용형태
   배지(.job-card-badges/.badge, 공용 클래스 재사용) + 제목. 최소높이만 고정하고 실제
   높이는 배지 줄바꿈 여부에 따라 자연스럽게 늘어나도록 auto로 둔다(폭이 좁아 배지 3개가
   한 줄에 다 안 들어갈 수 있음). */
.hh-job-block { display: flex; flex-direction: column; justify-content: center; min-height: 92px; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); transition: box-shadow .15s, transform .15s; }
.hh-job-block:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.hh-job-block .job-card-badges { justify-content: flex-start; margin-bottom: 6px; }
.hh-job-block strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 700; color: var(--ink); }

/* --- Headhunter profile: portfolio card (자기소개/실적/연락처) --- */
/* 정보보기(/info) 페이지 전용 — 일반 .site-main(1120px 제약)을 벗어나 개인사이트 메인페이지와
   동일한 폭(최대 1920px)까지 화면 전체로 펼친다(.hh-cover-section과 동일한 breakout 기법). */
/* max-width를 여기 두면 폭이 1920px를 넘는 화면(4K 등)에서 margin-left:calc(50% - 50vw)가
   전체 뷰포트 기준으로 계산된 채 고정되어 상자가 왼쪽으로 쏠려 보인다(헤드/푸터의 .wrap은
   width:100%+margin:0 auto라 항상 중앙 유지되는 것과 다른 동작) — 그래서 이 요소는 실제로
   폭 제한 없이 100vw 그대로 펼치고, 중앙정렬은 아래 .hh-profile이 max-width+margin:0 auto로
   맡아 헤드/푸터와 동일한 방식으로 화면 중앙에 위치하도록 한다. */
.hh-info-wrap { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: 40px 48px 64px; box-sizing: border-box; overflow: hidden; }
/* 바탕이미지(선택) 레이어 — 이미지가 없으면 .hh-info-wrap의 인라인 background-color(설정값 또는
   기본 투명)만 보인다. 카드(.hh-profile)는 항상 불투명 배경이라 이미지 위에서도 내용은 선명하다. */
.hh-info-bg-layer { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
/* 좌우 패딩만 100px로 넓힘(상하는 기존 36px 유지) — 프로필 사진의 좌측 여백과 우측
   소개내용 박스의 우측 여백을 각각 100px씩 확보해 달라는 요청. */
.hh-profile { position: relative; z-index: 1; max-width: 1920px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 36px 100px; box-shadow: var(--shadow-sm); }
/* 좌: 프로필 사진/게시판, 우: 소개 내용 — 사진 가로:세로 3:4(600×800)에 맞춰 좌측 트랙도
   그만큼 확보한다(600px 고정 트랙 + 우측 1fr). 우측 소개 내용이 너무 좁아지지 않도록,
   폭이 좁아지면(아래 브레이크포인트도 600px 트랙에 맞춰 1200px로 올렸다) 세로로 쌓는다.
   가운데 트랙(.hh-profile-divider)은 사진과 내용 사이에 옅은 세로 구분선 하나를 두기 위한
   1px 폭 칼럼 — gap을 100px로 키워 구분선 좌우로 각각 100px씩 공간이 생기도록 한다. */
.hh-profile-split { display: grid; grid-template-columns: 600px 1px 1fr; gap: 100px; align-items: start; }
.hh-profile-photo-col { position: sticky; top: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.hh-profile-divider { align-self: stretch; width: 1px; background: var(--line); }
.hh-profile-content-col { text-align: left; }
.hh-profile-photo-large { width: 100%; max-width: 600px; aspect-ratio: 3 / 4; border-radius: 24px; object-fit: cover; box-shadow: var(--shadow-md); }
.hh-profile-photo-fallback.hh-profile-photo-large { display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--hh-accent, var(--brand)); font-size: 96px; font-weight: 800; }
.hh-profile-heading h1 { font-size: 28px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.01em; display: inline-block; }
.hh-tag { display: inline-block; margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--hh-accent, var(--brand)) 12%, white); color: var(--hh-accent, var(--brand)); font-size: 12.5px; font-weight: 700; vertical-align: middle; }
.hh-profile-meta { color: var(--ink-faint); font-size: 13px; margin: 4px 0 0; }
.hh-profile-stat { display: inline-block; margin-top: 14px; text-align: center; padding: 10px 22px; border-radius: 14px; background: var(--bg); }
.hh-profile-stat strong { display: block; font-size: 24px; font-weight: 800; color: var(--hh-accent, var(--brand)); letter-spacing: -.02em; }
.hh-profile-stat span { font-size: 11.5px; color: var(--ink-faint); }
@media (max-width: 1200px) {
  /* 스택(세로) 레이아웃으로 바뀐 뒤에는 좌측 트랙 폭 제약이 없어져 사진이 그대로 600px까지
     커질 수 있다 — 진짜 좁은 모바일에서는 width:100%가 뷰포트 폭으로 알아서 다시 줄어들므로
     별도의 축소값을 강제하지 않는다. */
  .hh-profile-split { grid-template-columns: 1fr; }
  .hh-profile-photo-col { position: static; }
  .hh-profile-photo-large { margin: 0 auto; }
  .hh-profile-divider { display: none; }
}

.hh-profile-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.hh-profile-section h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.hh-profile-section p { margin: 0; }
/* 주요경력/교육훈련 및 자격/기타사항/커스텀 항목 — 섹션마다(줄 단위가 아니라 섹션 전체가 하나로)
   개별 박스로 노출한다. 위 .hh-profile-section의 위쪽 구분선은 박스 테두리로 대체되므로 취소. */
.hh-profile-section-boxed { border-top: none; background: color-mix(in srgb, var(--hh-accent, var(--brand)) 5%, white); border: 1px solid color-mix(in srgb, var(--hh-accent, var(--brand)) 16%, white); border-radius: 14px; padding: 20px; margin-left: -1px; margin-right: -1px; }
.hh-profile-section-boxed h2 { color: var(--hh-accent, var(--brand)); }

.hh-contact-card { margin-top: 28px; padding: 22px; border-radius: 16px; background: #f2f4f6; }
.hh-contact-card h2 { color: #16181d; font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.hh-contact-links { display: flex; gap: 12px; flex-wrap: wrap; }
.hh-contact-link { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #ffffff; border: 1px solid var(--line); color: #16181d; font-size: 13.5px; font-weight: 600; transition: background .15s, color .15s; }
.hh-contact-link:hover { background: var(--hh-accent, var(--brand)); color: #fff; border-color: transparent; }
.hh-contact-link svg { width: 16px; height: 16px; flex-shrink: 0; }

/* --- 정보보기 페이지 사진 하단 게시판(의뢰/상담) --- */
.hh-board-box { width: 100%; max-width: 640px; box-sizing: border-box; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.hh-board-box h3 { font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.hh-board-msg { font-size: 12.5px; padding: 8px 10px; border-radius: 8px; margin: 0 0 10px; }
.hh-board-msg-success { background: #e2f5df; color: #1c6b2e; }
.hh-board-msg-error { background: #fde2e2; color: #a4222b; }
.hh-board-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hh-board-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.hh-board-item summary::-webkit-details-marker { display: none; }
.hh-board-item[open] summary { margin-bottom: 8px; border-radius: 10px 10px 0 0; }
.hh-board-date { color: var(--ink-faint); font-size: 11.5px; flex-shrink: 0; }
.hh-board-writer { color: var(--ink-faint); font-size: 11.5px; flex-shrink: 0; }
.hh-board-verify-form { display: flex; gap: 6px; padding: 0 2px 8px; }
.hh-board-verify-form input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; font-family: inherit; }
.hh-board-item-unlocked { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 12.5px; }
.hh-board-item-unlocked .hh-board-date { display: block; margin-bottom: 6px; }
.hh-board-write summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 700; color: var(--hh-accent, var(--brand)); }
.hh-board-write summary::-webkit-details-marker { display: none; }
.hh-board-write-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.hh-board-write-form input, .hh-board-write-form textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; font-family: inherit; }
.hh-board-write-form button { align-self: flex-start; }

/* --- 개인 SNS 박스버튼 — "연락하기" 카드 안에 다른 연락처(전화/휴대폰/이메일)와 나란히 배치 --- */
.hh-sns-box { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #2a2a2a; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.hh-sns-box svg { width: 20px; height: 20px; }
.hh-sns-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

@media (max-width: 640px) {
  .hh-profile { padding: 24px; }
  .hh-profile-header { gap: 14px; }
  .hh-profile-stat { padding: 8px 16px; }
  .hh-main-layout { grid-template-columns: 1fr; padding: 28px 20px; }
  .hh-main-right { max-height: none; }
  .hh-ad-strip { position: static; left: auto; right: auto; bottom: auto; padding: 20px; }
}

.hh-link { display: inline-block; margin-top: 8px; font-size: 13px; color: #2358d6; font-weight: 500; }

/* --- 개인사이트 헤더/푸터 웨이브 구분선 --- */
.hh-wave-divider { width: 100%; line-height: 0; margin-top: -1px; }
.hh-wave-divider svg { display: block; width: 100%; height: 32px; }
.hh-wave-divider-flip svg { transform: scaleY(-1); }
.hh-wave-divider-shadow svg { filter: drop-shadow(0 3px 6px rgba(0,0,0,.18)); }

/* --- 개인사이트 헤더 --- */
/* 개인사이트만 헤드 내용 폭을 FHD(1920px)로 통일한다(일사이트 헤더의 기존 1120px 폭은 그대로
   유지) — header 요소 타입까지 붙여 명시도를 .site-header .wrap보다 확실히 높여 항상 이긴다. */
header.hh-header .wrap { max-width: 1920px; }

/* --- 개인사이트 푸터 (좌: 회사정보 / 우: 개인 연락처) --- */
/* .site-footer의 기본 margin-top:64px(일사이트용 여백)을 개인사이트 커버 이미지 바로 아래에
   붙는 푸터에는 적용하지 않는다 — 이미지와 푸터 구분선 사이에 빈 공간이 남으면 안 된다. */
.hh-footer { margin-top: 0; transition: none; }
.hh-footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; text-align: left; }
.hh-footer-left { text-align: left; }
.hh-footer-right { text-align: right; }
.hh-footer-right p, .hh-footer-left p { margin: 0 0 4px; }
.hh-footer-left-full { width: 100%; }
@media (max-width: 640px) {
  .hh-footer-grid { flex-direction: column; }
  .hh-footer-left, .hh-footer-right { text-align: left; }
}

/* --- Popup --- */
.popup-overlay { position: fixed; inset: 0; background: rgba(15,17,20,.55); z-index: 1000; display: flex; }
.popup-box { position: absolute; background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.popup-close { position: absolute; top: 8px; right: 10px; background: rgba(255,255,255,.85); border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink-soft); z-index: 1; }
.popup-body { flex: 1; overflow-y: auto; padding: 18px; }
.popup-body img { width: 100%; display: block; margin-bottom: 10px; border-radius: 8px; }
.popup-body h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.popup-hide-today { border: none; border-top: 1px solid var(--line); background: var(--bg); padding: 12px; font-size: 13px; color: var(--ink-soft); cursor: pointer; font-weight: 500; }


#apply-fields[disabled] { opacity: .5; }

/* --- 신청폼 단일페이지 (후보자등록/서비스의뢰) --- */
.request-page { max-width: 720px; margin: 48px auto 80px; padding: 0 24px; }
/* 서비스의뢰 페이지 전용 — 의뢰내용 입력칸이 더 넓게 쓰이도록 카드 전체를 기본보다 넓게 잡는다. */
.request-page-wide { max-width: 980px; }
.request-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 44px 40px; box-shadow: var(--shadow-md); }
.request-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--brand); margin: 0 0 8px; }
.request-card h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.request-lead { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin: 0 0 32px; }
.request-notice-box { background: #eef6fb; border: 1px solid #cfe6f4; border-radius: 14px; padding: 18px 20px; font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 28px; }
.request-form { display: flex; flex-direction: column; gap: 36px; }
.request-section { padding-top: 28px; border-top: 1px solid var(--line); }
.request-section:first-child { padding-top: 0; border-top: none; }
.request-section h2 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 18px; display: flex; align-items: baseline; gap: 6px; }
.request-optional { font-weight: 400; font-size: 12px; color: var(--ink-faint); }
.request-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.request-grid label, .request-section > label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.request-grid label.span-2 { grid-column: 1 / -1; }
.request-grid input, .request-grid textarea, .request-section > label input, .request-section > label textarea {
  font: inherit; font-weight: 400; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; transition: border-color .15s, background .15s; width: 100%; box-sizing: border-box;
}
.request-grid input:focus, .request-grid textarea:focus, .request-section > label input:focus, .request-section > label textarea:focus {
  outline: none; border-color: var(--brand); background: #fff;
}
.request-grid textarea, .request-section > label textarea { resize: vertical; line-height: 1.6; }
.request-checkbox-grid { display: flex; flex-direction: column; gap: 10px; }
.request-checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.request-checkbox-item input { width: auto; margin: 0; }
.request-consent-section { padding-top: 28px; }
.request-consent-box { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; font-size: 12.5px; line-height: 1.8; color: var(--ink-faint); margin-bottom: 16px; }
.request-consent-box p { margin: 0 0 6px; }
.request-consent-box p:last-child { margin-bottom: 0; }
.request-consent-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.request-consent-check input { width: auto; margin: 0; }
.request-submit-btn {
  align-self: flex-end; padding: 15px 40px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 15px; box-shadow: var(--shadow-md);
  transition: background .15s, transform .1s;
}
.request-submit-btn:hover { background: var(--brand-dark); }
.request-submit-btn:active { transform: scale(.98); }
.request-success-card { text-align: center; padding: 64px 40px; }
.request-success-icon {
  width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background: var(--brand-light);
  color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700;
}
.request-success-card h1 { text-align: center; }
.request-success-card .request-lead { margin: 0 auto 28px; max-width: 420px; }
.request-success-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.request-success-btn { background: var(--ink); }
.request-success-btn:hover { background: #000; }

@media (max-width: 640px) {
  .request-page { margin: 24px auto 56px; padding: 0 16px; }
  .request-card { padding: 28px 22px; border-radius: 18px; }
  .request-grid { grid-template-columns: 1fr; }
  .request-submit-btn { align-self: stretch; text-align: center; }
}

@media (max-width: 640px) {
  .site-header .wrap { padding: 12px 16px; }
  .site-header nav a { padding: 6px 10px; font-size: 13px; }
  .hero { padding: 44px 16px; }
  .hero h1 { font-size: 26px; }
  .job-detail-card { padding: 20px; }
}

/* 채용공고 박스 배경색/효과(선택, jobs.card_bg_color/card_bg_effect) — 일사이트 메인/목록의
   .job-card와 개인사이트 메인의 .hh-job-block 양쪽에서 공용으로 쓴다. 색상 미지정 시에는
   이 클래스 자체가 안 붙어 각 박스의 기존 기본 배경(var(--card)/var(--bg))이 그대로 유지된다. */
.job-card.jc-effect-solid, .hh-job-block.jc-effect-solid { background: var(--jc-bg); }
.job-card.jc-effect-blink, .hh-job-block.jc-effect-blink { background: var(--jc-bg); animation: jcBlink 1.4s ease-in-out infinite; }
.job-card.jc-effect-pulse, .hh-job-block.jc-effect-pulse { background: var(--jc-bg); animation: jcPulse 1.8s ease-in-out infinite; }
.job-card.jc-effect-shimmer, .hh-job-block.jc-effect-shimmer {
  background: linear-gradient(120deg, var(--jc-bg) 0%, color-mix(in srgb, var(--jc-bg) 55%, white) 50%, var(--jc-bg) 100%);
  background-size: 220% 100%;
  animation: jcShimmer 2.2s linear infinite;
}
.job-card.jc-effect-gradient, .hh-job-block.jc-effect-gradient {
  background: linear-gradient(270deg, var(--jc-bg), color-mix(in srgb, var(--jc-bg) 45%, #000), var(--jc-bg));
  background-size: 400% 400%;
  animation: jcGradientFlow 6s ease infinite;
}
@keyframes jcBlink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes jcPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes jcShimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }
@keyframes jcGradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* 추가 배경 효과 10종 — 대부분 ::before 오버레이를 쓰므로 카드 자체에 position:relative/overflow:hidden을
   걸고, 그 위에 얹히는 콘텐츠(직계 자식)만 z-index로 끌어올려 오버레이에 가려지지 않게 한다. */
.job-card.jc-effect-glow, .hh-job-block.jc-effect-glow { background: var(--jc-bg); animation: jcGlow 2s ease-in-out infinite; }
@keyframes jcGlow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--jc-bg) 55%, transparent); }
  50% { box-shadow: 0 0 18px 4px color-mix(in srgb, var(--jc-bg) 55%, transparent); }
}

.job-card.jc-effect-neon, .hh-job-block.jc-effect-neon { position: relative; overflow: hidden; background: var(--jc-bg); }
.job-card.jc-effect-neon > *, .hh-job-block.jc-effect-neon > * { position: relative; z-index: 1; }
.job-card.jc-effect-neon::before, .hh-job-block.jc-effect-neon::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--jc-bg), inset 0 0 16px 2px var(--jc-bg);
  animation: jcNeon 3s linear infinite;
}
@keyframes jcNeon {
  0% { filter: hue-rotate(0deg) brightness(1.3); }
  50% { filter: hue-rotate(180deg) brightness(1.6); }
  100% { filter: hue-rotate(360deg) brightness(1.3); }
}

.job-card.jc-effect-ripple, .hh-job-block.jc-effect-ripple { position: relative; overflow: hidden; background: var(--jc-bg); }
.job-card.jc-effect-ripple > *, .hh-job-block.jc-effect-ripple > * { position: relative; z-index: 1; }
.job-card.jc-effect-ripple::before, .hh-job-block.jc-effect-ripple::before {
  content: ''; position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(circle, transparent 0%, color-mix(in srgb, var(--jc-bg) 40%, white) 20%, transparent 40%);
  animation: jcRipple 2.6s ease-out infinite;
}
@keyframes jcRipple { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

.job-card.jc-effect-wave, .hh-job-block.jc-effect-wave {
  background: repeating-linear-gradient(45deg, var(--jc-bg) 0 12px, color-mix(in srgb, var(--jc-bg) 70%, white) 12px 24px);
  background-size: 200% 200%;
  animation: jcWave 3.5s linear infinite;
}
@keyframes jcWave { 0% { background-position: 0 0; } 100% { background-position: 34px 34px; } }

.job-card.jc-effect-sparkle, .hh-job-block.jc-effect-sparkle { position: relative; overflow: hidden; background: var(--jc-bg); }
.job-card.jc-effect-sparkle > *, .hh-job-block.jc-effect-sparkle > * { position: relative; z-index: 1; }
.job-card.jc-effect-sparkle::before, .hh-job-block.jc-effect-sparkle::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, white 1px, transparent 1.5px),
    radial-gradient(circle, white 1px, transparent 1.5px),
    radial-gradient(circle, white 1px, transparent 1.5px);
  background-size: 40px 40px, 60px 60px, 50px 50px;
  background-position: 0 0, 20px 30px, 35px 10px;
  animation: jcSparkle 1.6s ease-in-out infinite;
}
@keyframes jcSparkle { 0%, 100% { opacity: .15; } 50% { opacity: .55; } }

.job-card.jc-effect-aurora, .hh-job-block.jc-effect-aurora { position: relative; overflow: hidden; background: var(--jc-bg); }
.job-card.jc-effect-aurora > *, .hh-job-block.jc-effect-aurora > * { position: relative; z-index: 1; }
.job-card.jc-effect-aurora::before, .hh-job-block.jc-effect-aurora::before {
  content: ''; position: absolute; inset: -30%; pointer-events: none;
  background: conic-gradient(from 0deg, var(--jc-bg), color-mix(in srgb, var(--jc-bg) 40%, #7dd3fc), color-mix(in srgb, var(--jc-bg) 40%, #c4b5fd), var(--jc-bg));
  filter: blur(18px);
  animation: jcAurora 8s linear infinite;
}
@keyframes jcAurora { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.job-card.jc-effect-vignette, .hh-job-block.jc-effect-vignette {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--jc-bg) 55%, white) 0%, var(--jc-bg) 70%, color-mix(in srgb, var(--jc-bg) 55%, black) 100%);
  background-size: 160% 160%;
  background-position: center;
  animation: jcVignette 3s ease-in-out infinite;
}
@keyframes jcVignette { 0%, 100% { background-size: 160% 160%; } 50% { background-size: 120% 120%; } }

.job-card.jc-effect-checker, .hh-job-block.jc-effect-checker {
  background-color: var(--jc-bg);
  background-image: linear-gradient(45deg, color-mix(in srgb, var(--jc-bg) 70%, white) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--jc-bg) 70%, white) 75%, color-mix(in srgb, var(--jc-bg) 70%, white)),
    linear-gradient(45deg, color-mix(in srgb, var(--jc-bg) 70%, white) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--jc-bg) 70%, white) 75%, color-mix(in srgb, var(--jc-bg) 70%, white));
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  animation: jcChecker 5s linear infinite;
}
@keyframes jcChecker { 0% { background-position: 0 0, 12px 12px; } 100% { background-position: 24px 24px, 36px 36px; } }

.job-card.jc-effect-flash, .hh-job-block.jc-effect-flash { position: relative; overflow: hidden; background: var(--jc-bg); }
.job-card.jc-effect-flash > *, .hh-job-block.jc-effect-flash > * { position: relative; z-index: 1; }
.job-card.jc-effect-flash::before, .hh-job-block.jc-effect-flash::before {
  content: ''; position: absolute; inset: 0; background: white; opacity: 0; pointer-events: none;
  animation: jcFlash 2.4s ease-in-out infinite;
}
@keyframes jcFlash { 0%, 90%, 100% { opacity: 0; } 95% { opacity: .45; } }

.job-card.jc-effect-rainbow, .hh-job-block.jc-effect-rainbow { position: relative; overflow: hidden; background: var(--jc-bg); }
.job-card.jc-effect-rainbow > *, .hh-job-block.jc-effect-rainbow > * { position: relative; z-index: 1; }
.job-card.jc-effect-rainbow::before, .hh-job-block.jc-effect-rainbow::before {
  content: ''; position: absolute; inset: 0; background: var(--jc-bg); pointer-events: none;
  animation: jcRainbow 5s linear infinite;
}
@keyframes jcRainbow { 0% { filter: hue-rotate(0deg) saturate(1.4); } 100% { filter: hue-rotate(360deg) saturate(1.4); } }