/* ============================================================
   hey.way — Careers (인재채용) 전용 스타일
   ------------------------------------------------------------
   · style.css 의 토큰(--bg, --ink, --accent …)을 그대로 사용한다.
   · 타이포 스케일을 사이트 공통 기준에 맞춘다.
       히어로 h1   clamp(40px, 6.6vw, 92px)   ← .p-hero h1 과 동급
       섹션 제목    clamp(24px, 3.4vw, 42px)   ← h2.tt 계열
       본문        15px / 1.8
   · heyway2.waytogoit.co.kr 배포 시:
     이 파일을 renewal/css/careers.css 로 올리고 style.css 뒤에서 불러온다.
   ============================================================ */

/* ------------------------------------------------------------
   CMS 본문 래퍼 해제 — styles.css 의 `.contents{width:1400px; 배경; padding-bottom:300px}`
   가 전면 .sec/.wrap 레이아웃을 1400px 안에 가두고,
   `.contents h3{white-space:nowrap; text-overflow:ellipsis}` 가 이 페이지 h3 16개를
   전부 한 줄 말줄임으로 자른다. careers 페이지에서만 푼다.
   `.contents` 래퍼 자체는 유지한다(운영 .editorOutput p 방어가 그 래퍼에 걸려 있다).
   ------------------------------------------------------------ */
#wrapper.careers .contents {
  width: auto; max-width: none; margin: 0;
  background: none; padding: 0;
}
#wrapper.careers .contents h2,
#wrapper.careers .contents h3 {
  padding: 0; white-space: normal; overflow: visible; text-overflow: clip;
}


/* 채용 페이지 보조 색 — 채용 홍보물(보라)에서 가져온 톤.
   주 CTA는 사이트 공통 오렌지를 유지하고, 보라는 아이콘·강조에만 쓴다. */
:root {
  --cr: #8b5cf6;
  --cr-ink: #c9b3ff;
  --cr-soft: rgba(139, 92, 246, 0.13);
  --cr-line: rgba(139, 92, 246, 0.34);
}

/* ---------- 히어로 ---------- */
.cr-hero {
  position: relative; overflow: hidden;
  padding: clamp(112px, 14vh, 158px) 0 clamp(56px, 7vw, 88px);
  border-bottom: 1px solid var(--line-2);
  background:
    radial-gradient(ellipse 70% 120% at 12% 0%, var(--cr-soft) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.cr-hero h1 {
  margin: 14px 0 0; font-size: clamp(40px, 6.6vw, 92px); font-weight: 900;
  letter-spacing: -0.05em; line-height: 0.96;
  word-break: keep-all; overflow-wrap: break-word;
}
.cr-hero h1 em { font-style: normal; color: var(--accent); }
.cr-hero .lead { margin-top: 20px; max-width: none; word-break: keep-all; }
.cr-hero .hero-cta { margin-top: clamp(26px, 3.5vw, 38px); }

/* 모집 요약 배지 */
.cr-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cr-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 100px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.03); color: var(--ink-3);
}
.cr-tag b { color: #fff; font-weight: 800; }

/* ---------- 섹션 제목 (아이콘 + 라벨) ---------- */
.cr-head {
  display: flex; align-items: center; gap: clamp(14px, 1.6vw, 20px);
  margin-bottom: clamp(26px, 3.2vw, 40px);
}
.cr-ico {
  width: clamp(46px, 4.2vw, 56px); height: clamp(46px, 4.2vw, 56px);
  flex: none; border-radius: 14px; display: grid; place-items: center;
  background: var(--cr-soft); border: 1px solid var(--cr-line);
  color: var(--cr-ink);
}
.cr-ico svg { width: 54%; height: 54%; display: block; }
.cr-head-tx { min-width: 0; }
.cr-head h2 {
  margin: 0; font-size: clamp(24px, 3.4vw, 42px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.15;
  word-break: keep-all; overflow-wrap: break-word;
}
.cr-head-tx span {
  display: block; margin-top: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: var(--ink-3);
}

/* ---------- 모집 조건 표 ---------- */
.cr-meta {
  /* 항목이 6개이므로 3 / 2 / 1 열로만 나눠 빈 칸이 생기지 않게 한다 */
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden;
}
@media (max-width: 900px) { .cr-meta { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cr-meta { grid-template-columns: 1fr; } }
.cr-meta > div { background: var(--bg-2); padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 28px); }
.cr-meta dt {
  margin: 0 0 11px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em; color: var(--ink-3);
}
.cr-meta dd {
  margin: 0; font-size: clamp(16px, 1.4vw, 18px); font-weight: 700;
  line-height: 1.5; word-break: keep-all; overflow-wrap: break-word;
}

/* ---------- 담당업무 카드 ---------- */
.cr-tasks { display: grid; gap: 16px; }
.cr-task {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.4vw, 32px);
  align-items: start; padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: var(--bg-2); transition: 0.3s;
}
.cr-task:hover { border-color: var(--cr-line); transform: translateY(-3px); }
.cr-task .no {
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; letter-spacing: -0.04em;
  line-height: 1.15; color: var(--cr-ink); min-width: 52px;
}
.cr-task > div { min-width: 0; }
.cr-task h3 {
  margin: 0; font-size: clamp(18px, 2vw, 25px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.42;
  word-break: keep-all; overflow-wrap: break-word;
}
/* about 과 같은 이유로 `.contents` 를 끼워 명시도를 올린다 — 이 페이지는 신규 insert 라
   지금은 .editorOutput 래퍼가 없지만, 편집기로 한 번 저장되면 붙는다. */
.contents .cr-task p {
  margin: 12px 0 0; font-size: 15px; line-height: 1.85;
  color: var(--ink-2); word-break: keep-all; overflow-wrap: break-word;
}
@media (max-width: 560px) {
  .cr-task { grid-template-columns: 1fr; gap: 10px; }
  .cr-task .no { min-width: 0; }
}

/* ---------- 자격조건 · 우대사항 ---------- */
.cr-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 4vw, 56px); }
@media (max-width: 860px) { .cr-cols { grid-template-columns: 1fr; } }
.cr-cols > div { min-width: 0; }
.cr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cr-list li {
  display: flex; gap: 13px; align-items: flex-start; min-width: 0;
  font-size: 15px; line-height: 1.8; color: var(--ink-2);
  word-break: keep-all; overflow-wrap: break-word;
}
.cr-list li b { color: #fff; font-weight: 700; }
.cr-list li::before {
  content: ""; flex: none; margin-top: 9px;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--cr); transform: rotate(45deg);
}
.cr-list.plus li::before { background: var(--accent); }

/* ---------- 지원하기 ---------- */
.cr-apply {
  border: 1px solid var(--cr-line); border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 140% at 85% 8%, var(--cr-soft) 0%, transparent 60%),
    var(--bg-2);
  padding: clamp(34px, 4.6vw, 68px) clamp(24px, 4vw, 68px);
  text-align: center;
}
.cr-apply h2 {
  margin: 14px 0 0; font-size: clamp(28px, 3.8vw, 52px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.14;
  word-break: keep-all; overflow-wrap: break-word;
}
.cr-apply .desc {
  margin: 18px auto 0; max-width: 48ch;
  font-size: 15px; line-height: 1.85; color: var(--ink-2);
  word-break: keep-all; overflow-wrap: break-word;
}
.cr-mail {
  display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px, 3vw, 36px);
  padding: 18px 32px; border-radius: 100px; max-width: 100%;
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
  font-size: clamp(15px, 1.5vw, 19px); font-weight: 800; letter-spacing: -0.01em;
  transition: 0.25s; overflow-wrap: anywhere;
}
.cr-mail:hover { background: #fff; border-color: #fff; color: #000; }
.cr-mail svg { width: 20px; height: 20px; flex: none; }

/* 안내 항목 — 좌측 정렬 블록 (패널 안에서 가운데 배치) */
.cr-note {
  max-width: 620px; margin: clamp(30px, 3.6vw, 46px) auto 0;
  padding-top: clamp(24px, 2.8vw, 32px); border-top: 1px solid var(--line-2);
  text-align: left;
}
.cr-note dl { margin: 0; display: grid; gap: 0; }
.cr-note dl > div {
  display: grid; grid-template-columns: 88px 1fr; gap: 16px;
  align-items: baseline; padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.cr-note dl > div:last-child { border-bottom: 0; }
.cr-note dt {
  margin: 0; font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; color: var(--ink-3); white-space: nowrap;
}
.cr-note dd {
  margin: 0; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.65;
  color: var(--ink-2); word-break: keep-all; overflow-wrap: break-word;
}
.cr-privacy {
  margin: 18px 0 0; text-align: left;
  font-size: 12.5px; line-height: 1.75; color: var(--ink-3);
  word-break: keep-all; overflow-wrap: break-word;
}
@media (max-width: 560px) {
  .cr-apply { padding: 30px 20px; }
  .cr-note dl > div { grid-template-columns: 1fr; gap: 5px; }
  .cr-mail {
    width: 100%; justify-content: center;
    padding: 16px 18px; font-size: 14.5px; gap: 9px;
  }
  .cr-mail svg { width: 17px; height: 17px; }
}

/* ---------- 좁은 폭 보정 ---------- */
@media (max-width: 400px) {
  .cr-ico { border-radius: 11px; }
  .cr-tag { font-size: 12px; padding: 8px 13px; }
}

/* ============================================================
   모집부문 2개 구분 (기획자 / 디자이너)
   ============================================================ */

/* 상단 부문 선택 카드 */
.cr-parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 800px) { .cr-parts { grid-template-columns: 1fr; } }
.cr-part-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: var(--bg-2); transition: 0.3s;
}
.cr-part-card:hover { border-color: var(--cr-line); transform: translateY(-4px); }
.cr-part-card .no {
  font-size: 12px; font-weight: 900; letter-spacing: 0.18em; color: var(--cr-ink);
}
.cr-part-card h3 {
  margin: 12px 0 0; font-size: clamp(21px, 2.4vw, 30px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.25;
  word-break: keep-all; overflow-wrap: break-word;
}
.cr-part-card .sum { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.cr-part-card .sum span {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  padding: 6px 12px; border-radius: 100px; border: 1px solid var(--line-2);
}
.cr-part-card .go {
  margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink-2); transition: color 0.25s;
}
.cr-part-card:hover .go { color: var(--accent); }
.cr-part-card .go svg { width: 15px; height: 15px; transition: transform 0.3s; }
.cr-part-card:hover .go svg { transform: translateX(5px); }

/* 부문 섹션 대제목 */
.cr-part-hd {
  display: flex; align-items: flex-start; gap: clamp(16px, 2vw, 26px);
  padding-bottom: clamp(22px, 2.6vw, 32px); margin-bottom: clamp(30px, 3.6vw, 46px);
  border-bottom: 1px solid var(--cr-line);
}
.cr-part-hd .num {
  font-size: clamp(30px, 4vw, 54px); font-weight: 900; line-height: 0.95;
  letter-spacing: -0.05em; color: var(--cr-ink); flex: none;
}
.cr-part-hd-tx { min-width: 0; }
.cr-part-hd h2 {
  margin: 0; font-size: clamp(26px, 3.6vw, 46px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 1.14;
  word-break: keep-all; overflow-wrap: break-word;
}
.cr-part-hd .sum {
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-3);
  word-break: keep-all; overflow-wrap: break-word;
}

/* 부문 내부 블록 (주요업무 / 지원자격 / 우대사항) */
.cr-blk { margin-top: clamp(38px, 4.4vw, 62px); }
.cr-blk:first-of-type { margin-top: 0; }
.cr-blk > h3 {
  display: flex; align-items: center; gap: 11px; margin: 0 0 clamp(18px, 2.2vw, 26px);
  font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: -0.03em;
}
.cr-blk > h3::before {
  content: ""; flex: none; width: 3px; height: 1.1em; border-radius: 2px;
  background: var(--cr);
}
.cr-blk > h3 em {
  font-style: normal; font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em; color: var(--ink-3);
}

/* 모집 직급 카드 */
.cr-grades { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 700px) { .cr-grades { grid-template-columns: 1fr; } }
.cr-grade {
  min-width: 0; padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg-2);
}
.cr-grade b {
  display: block; font-size: clamp(17px, 1.8vw, 21px); font-weight: 800;
  letter-spacing: -0.03em;
}
.cr-grade span {
  display: block; margin-top: 9px; font-size: 14px; line-height: 1.7; color: var(--ink-2);
  word-break: keep-all; overflow-wrap: break-word;
}

/* 지원자격 하위 그룹 */
.cr-quals { display: grid; gap: clamp(24px, 2.8vw, 34px); }
.cr-qual { min-width: 0; }
.cr-qual > h4 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
}
.cr-qual > h4 i {
  font-style: normal; display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--cr-soft); border: 1px solid var(--cr-line);
  font-size: 11px; font-weight: 900; color: var(--cr-ink);
}
.cr-qual > h4 em {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink-3);
}

/* 부문별 지원 링크 */
.cr-inline-apply { margin-top: clamp(30px, 3.4vw, 44px); }

/* 부문별 '지원하기' 버튼 → 하단 이메일로 이동 + 포커싱
   앵커만으로 동작하므로 JS가 필요 없다. 표준에 따라 focusable 요소는
   프래그먼트 이동 시 포커스를 받으며, :target 으로 시각적 강조도 준다. */
#applyMail {
  scroll-margin-top: clamp(170px, 24vh, 280px);
  outline-offset: 4px;
}
#applyMail:target,
#applyMail:focus-visible {
  outline: 2px solid var(--cr-ink);
  box-shadow: 0 0 0 7px var(--cr-soft);
}
#applyMail:target { animation: crPulse 1.5s ease-out 1; }
@keyframes crPulse {
  0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0.55); }
  70%  { box-shadow: 0 0 0 18px rgba(139,92,246,0); }
  100% { box-shadow: 0 0 0 7px var(--cr-soft); }
}