/* careers.css — careers.html 전용 스타일. 공통 히어로(.sub_hero 등)는 sub_common.css에 있다 */

.sub_page:has(.hiring_apply_btn.floating) {position:relative;}
/* section inner — Our People/Culture/Join Our Team이 공통으로 쓰는 1200px 중앙 정렬 컨테이너 */
.careers_inner{max-width:1260px;margin:0 auto;padding:0 30px;}

/* section head — 세 섹션이 공통으로 쓰는 eyebrow + 헤드라인 + 노트 텍스트 */
.careers_head_tit{font-family:'Inter',sans-serif;font-weight:700;font-size:24px;line-height:1;letter-spacing:-0.04em;color:var(--color-text-dark);}
.careers_desc_tit{margin-bottom:60px;font-family:'Pretendard',sans-serif;font-weight:800;font-size:40px;line-height:1.3;letter-spacing:-0.03em;color:var(--color-text-dark);word-break:keep-all;text-align:center;}
.careers_desc_note{font-family:'Inter',sans-serif;font-weight:600;font-size:18px;line-height:1.6;letter-spacing:-0.05em;color:#666;}

/* our people */
.ourpeople_section{width:100%;position: relative;}

/* our people diagram — managed_services.html의 .difference_diagram과 동일한 벤다이어그램 패턴(교차점 아이콘 .difference_intersect, 마커 .difference_marker 네이밍)을 따른다.
   Figma 기준 폭 1201px(원 지름 435px + 겹침 52px)을 100%로 두고 내부 수치를 전부 비율로 환산해, 폭이 줄어도 원이 1:1 비율을 유지하며 같이 축소되게 한다.
   원 안의 텍스트·간격은 container-type:inline-size 기준의 cqw로 환산해 원과 같은 비율로 축소시킨다 */
.ourpeople_diagram{display:flex;position:relative;width:100%;max-width:1201px;margin:0 auto;container-type:inline-size;}
.ourpeople_circle{ display: flex;overflow: hidden; position: relative; width: 50%;aspect-ratio: 1;border: 1px solid var(--color-axis-line);border-radius: 50%;flex-direction: column;justify-content: center; gap: 0; align-items: center;}
.ourpeople_circle+.ourpeople_circle{margin-left:-4.3297%;}
.ourpeople_circle_tit{width:90%;font-family:'Pretendard',sans-serif;font-weight:700;font-size:2.3314cqw;line-height:1.46;letter-spacing:-0.07em;text-align:center;color:var(--color-text-dark);word-break:keep-all;}
.ourpeople_circle_sub{font-family:'Inter',sans-serif;font-weight:600;font-size:1.6653cqw;letter-spacing:-0.05em;color:#353533;}
.ourpeople_diagram .diagram_quote { display: flex;align-items: flex-start;justify-content: center;gap: 12px;margin-top: 30px; color: #666; text-align: center; font-family: Pretendard; font-size: 18px; font-style: normal;font-weight: 500;line-height: 145%; /* 23.2px */ letter-spacing: -0.48px;}
.ourpeople_diagram .quote_mark { width: 21px; height: 18px; flex-shrink: 0 ;margin-top: 2px;}
.ourpeople_diagram .quote_mark--open {margin-right: 2px;}
.ourpeople_diagram .quote_mark--close {margin-left: 2px;}
.ourpeople_diagram .quote_text {white-space: nowrap;}



span.red_label { margin-bottom: 20px; color: #FFF; text-align: center;font-family: Inter; font-size: 18px;font-style: normal; font-weight: 700; line-height: 82%;letter-spacing: 0px;background: #B71C1C; padding: 12px 11px;}
/* our people intersect — 원이 겹치는 자리의 렌즈 장식. .difference_intersect와 동일한 아이콘(icon_difference_intersect.svg)을 원 크기에 맞는 사이즈로만 다르게 재사용한다. height 대신 aspect-ratio(52:207)로 잡아 폭과 함께 비율 그대로 줄어들게 한다 */
.ourpeople_intersect{display:block;position:absolute;top:26.4368%;width:4.3297%;height:auto;aspect-ratio:52/207;}
.ourpeople_intersect_col_1{left:31.8901%;}
.ourpeople_intersect_col_2{left:63.6969%;}

/* our people marker — 교차점 상/하단 표시용 사각 마커. top/bottom + col 조합으로 위치를 나누는 .difference_marker와 동일한 네이밍 패턴. 테두리 색(#B51C1C)은 Figma 원본 값을 그대로 따라 --color-accent-red(#B71C1C)와는 별개로 둔다 */
.ourpeople_marker{display:block;overflow:hidden;position:absolute;width:0.7494cqw;height:0.7494cqw;background:var(--color-bg);border:1px solid #B51C1C;font-size:0;color:transparent;text-indent:-999999px;transform:translate(-50%,-50%);}
.ourpeople_marker_top{top:26.4368%;}
.ourpeople_marker_bottom{top:73.7931%;}
.ourpeople_marker_col_1{left:33.9717%;}
.ourpeople_marker_col_2{left:65.8618%;}

/* our culture */
.culture_section{width:100%;padding:180px 0;}
.culture_head_icon{display:block;width:113px;height:113px;}
.culture_head .careers_desc_tit,.culture_head .careers_desc_note{text-align:center;}

/* our culture grid — top/bottom 3장, mid 4장. 카드 폭은 항상 371px로 고정하고 careers_inner(1200px)보다 넓은 1520px 컨테이너 안에서 가운데 정렬한다 */
.culture_grid_inner{max-width:1520px;margin:0 auto;padding:0 30px;}
.culture_row{display:flex;width:100%;justify-content:center;gap:12px;}
.culture_row+.culture_row{margin-top:12px;}
.culture_card{width:371px;overflow:hidden;border-radius:2px;background:var(--color-white);flex-shrink:0;}
.culture_card_img{display:block;width:100%;aspect-ratio:371/333;object-fit:cover;background:#FFECE8;}
.culture_card_body{padding:28px;}
.culture_card_row{display:flex;width:100%;justify-content:space-between;align-items:center;gap:15px;}
.culture_card_tit{font-family:'Pretendard',sans-serif;font-weight:700;font-size:24px;letter-spacing:-0.04em;color:var(--color-text-dark);}
.culture_card_icon{display:block;width:32px;height:32px;flex-shrink:0;}
.culture_card_sub{margin-top:10px;font-family:'Pretendard',sans-serif;font-weight:500;font-size:16px;letter-spacing:-0.02em;color:var(--color-text-secondary);}
.process_item_subtit.pref_tit {font-size: 24px; font-style: normal; font-weight: 700; line-height: normal;letter-spacing: -1.2px;}
/* join our team — 아코디언 리스트(.process_list/.process_item 등)는 sub_common.css의 공통 규칙을 그대로 쓴다. careers.html에만 필요한 "주요업무/우대사항" 두 번째 라벨과, 실제 사진이 있어서 필요한 media img/오버레이만 여기서 추가한다 */
.jointeam_section{width:100%;}
.process_item_subtit{font-family:'Pretendard',sans-serif;color: var(--color-text-dark); font-size: 30px;font-style: normal; font-weight: 800; line-height: 150%; letter-spacing: -0.9px;}

/* join our team media — 다른 process_item 페이지는 사진이 없어 라벨만 쓰지만, 여기는 실제 사진이 있어서 이미지+어두운 오버레이+큰 라벨을 얹는다 */
.jointeam_section .process_item_media{flex-direction:column;gap:30px;}
.jointeam_section .process_item_media img{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.jointeam_section .process_item_media::after{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);}
.jointeam_section .process_item_txt{z-index:1;font-size:27px;color:var(--color-white);letter-spacing: -0.81px;line-height: 130%;font-weight: 600;text-align:center;}

/* join our team 우대사항 — 주요업무(process_item_tags, 다크 pill)와 달리 문장형 항목이라 pill이 아닌 일반 텍스트 리스트로 보여준다 */
.process_item_pref_list{display:flex;width:100%;flex-direction:column;gap:5px;}
.process_item_pref_list li{font-family:'Pretendard',sans-serif;font-weight:500;font-size:16px;line-height:1.5;letter-spacing:-0.02em;color:var(--color-text-dark);word-break:keep-all;overflow-wrap:break-word;}
.process_item_pref_list .pref_list_desc {color: #67635F;text-align: center; font-family: Pretendard;font-size: 16px;font-style: normal; font-weight: 500;line-height: 150%;letter-spacing: -0.48px;}
/* hiring process — 다른 섹션(process_section/why_section/explore_section 등)과 동일하게 width:100%;padding:100px 0; 규칙을 쓴다. 타이틀은 sub_common.css의 .difference_tit(120px Inter 700) 스타일을 그대로 재사용한다 */
.hiring_section{width:100%;padding:180px 0 250px;}
.hiring_head{margin-bottom:40px;}
.hiring_head .difference_tit{margin-bottom:0;}
.hiring_subtit{margin-top:20px;font-family:'Pretendard',sans-serif;font-weight:700;font-size:20px;letter-spacing:-0.04em;text-align:center;color:var(--color-text-dark);}

.process_item_tags {margin-bottom: 15px;display: flex; width: 100%;flex-direction: column;gap: 5px; align-items: center;}
.process_item_content {padding-top: 0;}
/* hiring steps */
.hiring_steps{display:flex;width:100%;margin-bottom:80px;justify-content:center;align-items:center;}
.hiring_step{display:flex;width:266px;height:266px;border:1px solid var(--color-axis-line);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:8px;flex-shrink:0;text-align:center;}
.hiring_step.is_dark{border-color:transparent;background:var(--color-surface);}
.hiring_step_label{font-family:'Inter',sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.06em;color:var(--color-axis-line);}
.hiring_step.is_dark .hiring_step_label{color:var(--color-white);}
.hiring_step_tit{font-family:'Pretendard',sans-serif;font-weight:700;font-size:24px;letter-spacing:-0.05em;color:var(--color-text-dark);}
.hiring_step.is_dark .hiring_step_tit{color:var(--color-white);}
.hiring_step_note{font-family:'Pretendard',sans-serif;font-weight:600;font-size:20px;letter-spacing:-0.05em;color:var(--color-difference-sub);}
.hiring_step_connector{display:flex;position:relative;width:47px;flex-shrink:0;justify-content:center;align-items:center;text-indent: -99999px; color: transparent;font-size: 0;}
.hiring_step_connector::before{content:'';display:block;width:100%;height:0;border-top:1px dashed #a6a6a6;}
.hiring_step_connector::after{content: '';display: block;  position: absolute; top: 50%;right: -5px;width: 10px;height: 10px;margin: -5px 0 0 -5px; border: 1px solid #B51C1C;background: var(--color-bg) url(/main/images/common/icon_hiring_arrow.svg) no-repeat center / contain; z-index: 9;}
/* hiring details */
.hiring_details{display:flex;width:100%;margin-bottom:40px;padding-top:20px;border-top:1px solid rgba(217,213,210,0.58);flex-direction:column;}
.hiring_detail_item{display:flex;align-items: center;width:100%;padding-bottom:20px;margin-bottom:30px;border-bottom:1px solid rgba(217,213,210,0.58);gap:30px;}
.hiring_detail_tit{width: 173px;text-align: center; padding: 5px 12px; background: var(--color-white); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 26px;letter-spacing: -0.04em; color: #353533;}
.hiring_detail_desc{font-family:'Pretendard',sans-serif;font-weight:500;font-size:22px;line-height:1.5;letter-spacing:-0.04em;color:#333;word-break:keep-all;}
.hiring_note{font-family:'Pretendard',sans-serif;font-weight:500;font-size:14px;letter-spacing:-0.03em;color:var(--color-text-muted);}
.hiring_detail_item:last-child {margin-bottom: 0;}

/* hiring apply button */
.hiring_apply_btn{display:flex;width:100%;margin-top:40px;padding:20px 25px 20px 30px;border:0;border-radius:2px;background:var(--color-accent-red);font-family:'Pretendard',sans-serif;font-weight:600;font-size:30px;letter-spacing:-0.02em;color:var(--color-white);transition:opacity var(--transition-base);justify-content:space-between;align-items:center;cursor:pointer;}
.hiring_apply_btn:hover{opacity:0.85;}
.hiring_apply_btn img{display:block;width:44px;height:42px;}

/* hiring apply floating btn — 하단 고정 원형 CTA. 기본형(.hiring_apply_btn)과 배경색·폰트·트랜지션을 공유하고 모양만 바꾸므로
   별도 클래스 대신 .floating 조합으로 둔다. 미디어쿼리의 .hiring_apply_btn 재정의(vw 변환, 모바일 축소)보다
   .hiring_apply_btn.floating이 항상 우선순위가 높아서, 각 미디어쿼리마다 다시 잡아줄 필요 없이 여기 값이 유지된다.
   기본 상태에 깔린 Nebula 셰이더(어두운 성운 + 별)는 CSS 그라디언트로 재현했다. Figma 렌더를 픽셀로 뜯어보면 별 픽셀의 G·B가 기본/hover에서 완전히 동일하고 R만 플레이트 색을 따라가므로,
   별·성운은 두 상태가 공유하는 한 장이고 lighten으로 합성돼 있다. 그래서 배경 이미지는 고정해두고 background-color만 어두운 플레이트 <-> 레드로 트랜지션시킨다 — background-color는 트랜지션이 되지만 그라디언트는 안 되므로 이 분리가 필수다.
   별 색을 #5a5266~#8b7d94로 두는 이유도 같다. lighten 특성상 이 값이 기본 상태에선 그대로 별로 보이고, 레드 위에선 R만 183으로 덮여 Figma hover의 #b7738a와 일치한다.
   헤이즈는 B값을 35 이하로 눌러놨다. 이보다 밝으면 레드 위에서 보라빛이 떠서 Figma hover(거의 순수 #b71c1c)와 어긋난다.
   ::after로 분리하지 않은 이유 — button 요소는 음수 z-index 자식이 자기 배경 뒤로 숨어버려서 레이어가 아예 안 보인다 */
.hiring_apply_btn.floating{position:fixed;right:40px;bottom:40px;z-index:50;width:110px;height:110px;margin:0;padding:0;border-radius:50%;background-color:#0D0616;background-image:radial-gradient(circle at 18% 22%,#83738a 0 1px,transparent 1px),radial-gradient(circle at 57% 44%,#83738a 0 1px,transparent 1px),radial-gradient(circle at 82% 31%,#83738a 0 1px,transparent 1px),radial-gradient(circle at 31% 68%,#6b6375 0 0.9px,transparent 0.9px),radial-gradient(circle at 69% 79%,#6b6375 0 0.9px,transparent 0.9px),radial-gradient(circle at 24% 88%,#6b6375 0 0.9px,transparent 0.9px),radial-gradient(circle at 12% 51%,#6b6375 0 0.9px,transparent 0.9px),radial-gradient(circle at 75% 8%,#6b6375 0 0.9px,transparent 0.9px),radial-gradient(circle at 44% 13%,#4e4759 0 0.8px,transparent 0.8px),radial-gradient(circle at 88% 62%,#4e4759 0 0.8px,transparent 0.8px),radial-gradient(circle at 63% 92%,#4e4759 0 0.8px,transparent 0.8px),radial-gradient(circle at 37% 37%,#4e4759 0 0.8px,transparent 0.8px),radial-gradient(circle at 30% 26%,#150621 0%,transparent 35%),radial-gradient(circle at 74% 70%,#130520 0%,transparent 35%);background-blend-mode:lighten;font-weight:700;font-size:16px;line-height:1.3;letter-spacing:-0.03em;transition:background-color var(--transition-base);justify-content:center;flex-direction:column;gap:5px;    z-index: 1;}
.hiring_apply_btn.floating::before{content:'';display:block;width:35px;height:35px;background:url('/main/images/sub/careers/ico_apply.svg') no-repeat center/contain;flex-shrink:0;}
.hiring_apply_btn.floating:hover{background-color:var(--color-accent-red);opacity:1;}

/* apply panel — hiring_apply_btn 클릭 시 오른쪽에서 슬라이드로 열리는 지원서 작성 패널. common.css의 .gnb_open/.gnb_open_panel(왼쪽에서 열리는 GNB 패널)과 동일한 구조·트랜지션 방식을 오른쪽 방향으로 뒤집어 재사용한다 */
.apply_panel{display:flex;overflow:hidden;position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;min-height:100vh;visibility:hidden;justify-content:flex-end;opacity:0;transition:opacity var(--transition-base),visibility var(--transition-base);backdrop-filter:blur(4px);}
.apply_panel.is_active{visibility:visible;opacity:1;}
.apply_panel_box{display:flex;overflow-y:auto;position:relative;width:762px;max-width:92%;height:100%;padding-bottom:40px;background:var(--color-white);flex-direction:column;gap:40px;scrollbar-gutter:stable;will-change:transform;transform:translateX(100%);transition:transform var(--transition-slow);}
.apply_panel_box::before{content:'';display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:url('../images/common/noise.webp') repeat;background-size:1024px 1024px;opacity:0.04;pointer-events:none;}
.apply_panel.is_active .apply_panel_box{transform:translateX(0);}

/* apply panel header — 닫기 화살표(←) + SYWORKS 로고. 내용이 많아 패널 전체가 함께 스크롤된다 */
.apply_panel_head{display:flex;width:100%;flex-shrink:0;padding:30px 60px;align-items:center;gap:20px;}
.apply_panel_close{display:flex;width:28px;height:28px;border:0;background:none;flex-shrink:0;cursor:pointer;}
.apply_panel_close img{display:block;width:100%;height:100%;}
.apply_panel_logo{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;line-height:28px;letter-spacing:0;text-transform:uppercase;color:#333333;}
.apply_panel_tit{padding:0 60px;font-family:'Pretendard',sans-serif;font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-0.04em;color:var(--color-text-dark);}

/* apply form */
.apply_form{display:flex;width:100%;padding:0 60px;flex-direction:column;gap:40px;}
.apply_field_group{display:flex;width:100%;flex-direction:column;gap:20px;}
.apply_field_label{display:flex;align-items:center;gap:6px;font-family:'Pretendard',sans-serif;font-weight:700;font-size:18px;font-style:normal;line-height:107%;letter-spacing:-0.9px;color:var(--color-text-dark);}
.apply_badge{display:inline-flex;width:fit-content;padding:1px 8px;border:1px solid var(--color-accent-red);border-radius:20px;background:var(--color-white);font-family:'Pretendard',sans-serif;font-weight:700;font-size:12px;letter-spacing:-0.05em;color:var(--color-accent-red);align-items:center;flex-shrink: 0;}
.apply_badge.is_optional{border-color:var(--color-border-strong);color:var(--color-border-strong);}

/* apply field — 정적 텍스트/인풋 공통 박스 스타일 */
.apply_field_static{display:flex;width:100%;height:50px;padding:12px;border:1px solid var(--color-border);background:var(--color-white);font-family:'Pretendard',sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.02em;color:var(--color-text-muted);align-items:center;}
.apply_input_row{display:flex;width:100%;gap:12px;}

/* .apply_input 공통 선언(display/height/padding/border/background/font/color)은 sub_common.css에서
   .start_project_input과 함께 처리한다. 여기서는 이 페이지만 다른 정렬값만 남긴다 */
.apply_input{text-align:left;}
.apply_input_with_btn{width:100%;gap:12px;}

/* apply inline btn — 이메일 확인/파일 선택 버튼. check_ic 아이콘을 체크 표시로 쓴다.
   공통 선언(display/배경/색상 등)은 sub_common.css .start_project_inline_btn과 함께 처리한다 */
.apply_inline_btn{gap:8px;padding:7px 12px;border-radius:1.001px;font-family:'Inter',sans-serif;font-size:16px;line-height:150%;letter-spacing:-0.64px;}
.apply_inline_btn img{display:block;width:14px;height:9px;}

/* apply checkbox — 지원구분/직군(32px)은 원형, 개인정보 동의(36px, is_lg)는 라운드 사각형으로 구분한다.
   원형 체크박스 공통 선언은 sub_common.css .start_project_chip_input과 함께 처리한다.
   예전엔 input을 숨기고 옆의 빈 span(.apply_check_box)을 체크박스 모양으로 썼는데, 회사 CMS에 올리면
   내용 없는 빈 span 태그가 자동으로 제거돼서 체크박스가 사라지는 문제가 있었다. 그래서 별도 span 없이
   input 자체를 appearance:none으로 초기화해서 체크박스처럼 스타일링하는 방식으로 바꿨다 */
.apply_check_row{display:flex;flex-wrap:wrap;gap:20px;}
.apply_check_item{display:flex;align-items:center;gap:12px;font-family:'Pretendard',sans-serif;font-weight:600;font-size:16px;letter-spacing:-0.02em;color:var(--color-text-dark);cursor:pointer;}
.apply_check_input{width:32px;height:32px;}
.apply_check_input.is_lg{width:36px;height:36px;border-radius:0.5px;}
.apply_check_input:checked{border-color:var(--color-accent-red);background:var(--color-accent-red) url('/main/images/sub/common/check_ic.svg') no-repeat center/24px 14px;}

/* apply attach — 공통 선언(레이아웃/배경)은 sub_common.css .start_project_attach와 함께 처리한다 */
.apply_attach_row{height:50px;padding:13px 20px;border-radius:1px;gap:20px;}
.apply_attach_filename{font-family:Pretendard;font-weight:600;font-size:16px;font-style:normal;line-height:150%;letter-spacing:-0.48px;color:var(--color-text-dark);text-decoration:underline;}

/* apply agree — 개인정보 동의 섹션. 필수/선택 배지 옆 chevron은 펼침 표시용 장식 아이콘이며, 개발 연동 전이라 지금은 정적으로만 둔다 */
.apply_agree_group{display:flex;width:100%;padding-top:16px;border-top:2px solid #333;flex-direction:column;gap:16px;}
.apply_agree_divider{width:100%;height:1px;background:var(--color-border);}
.apply_agree_row{display:flex;width:100%;justify-content:space-between;align-items:center;padding-bottom: 16px; border-bottom: 1px solid #DDD;}
.apply_check_item.is_all{font-weight:700;font-size:18px;}
.apply_agree_note{display:flex;align-items:center;gap:20px;}
.apply_agree_note img{display:block;width:14px;height:7px;}
.apply_panel_btns{display:flex;width:100%;gap:6px;}

/* .apply_btn 공통 레이아웃(display/height/padding 등)은 sub_common.css에서 .start_project_submit_btn과 함께 처리한다 */
.apply_btn{font-weight:600;font-size:20px;}
.apply_btn.is_close{background:#000000;color:var(--color-white);}
.apply_btn.is_submit{background:var(--color-accent-red);color:var(--color-white);}
.apply_panel_info{display:flex;width:100%;margin-top:40px;padding:0 60px;flex-direction:column;gap:22px;}
.apply_panel_info p{font-family:Pretendard;font-weight:500;font-size:14px;font-style:normal;line-height:78%;color:#222;}
.apply_panel_info p.apply_tel { color: #222;  font-family: Inter;font-size: 24px;  font-style: normal;font-weight: 800; line-height: 78%; letter-spacing: -0.48px;}
.apply_agree_group.is_lg .apply_check_input {border-radius: 1.5px;}
.apply_attach_label > span {color: #222; font-family: Pretendard;font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%;letter-spacing: -0.48px;}

.apply_agree_content_list li { font-weight: 500;line-height: 150%; letter-spacing: -0.7px;text-indent: 0;}
.apply_agree_content_list li span { padding-left: 10px;}

/* alert popup — 지원서 제출 완료 팝업(공용 alert_popup 클래스). 닫으면 지원서 작성 패널까지 함께 닫는다 */
.alert_popup{display:flex;overflow:hidden;position:fixed;top:0;left:0;z-index:210;width:100%;height:100%;min-height:100dvh;justify-content:center;align-items:center;visibility:hidden;background:rgba(0,0,0,0.4);opacity:0;transition:opacity var(--transition-base),visibility var(--transition-base);backdrop-filter:blur(3px);}
.alert_popup.is_active{visibility:visible;opacity:1;}
.alert_popup_panel{display:flex;overflow:hidden;position:relative;width:762px;height:550px;max-width:90%;flex-direction:column;justify-content:center;align-items:center;padding:60px;border-radius:2px;background:var(--color-white);gap:20px;will-change:transform;transform:scale(0.95);transition:transform var(--transition-base);}
.alert_popup.is_active .alert_popup_panel{transform:scale(1);}
.alert_popup_tit{font-family:'Pretendard',sans-serif;font-weight:700;font-size:32px;letter-spacing:-1.28px;text-align:center;color:var(--color-text-dark);}
.alert_popup_desc{font-family:'Pretendard',sans-serif;font-weight:500;font-size:16px;line-height:1.5;letter-spacing:-0.48px;text-align:center;color:#67635f;}
.alert_popup_close{width:318px;}

.sub_hero_mascot {position: absolute;top: auto;bottom: -100px; right: 205px;overflow: hidden; width: 546px;height: 445px;aspect-ratio: 173 / 141;}
.sub_hero_mascot_main{height:auto;}

/* PC 비율 축소 (1025px~1920px) — 1920 디자인 기준 px를 vw로 변환해 레이아웃 재배치 없이 비율만 축소한다. 계산식: vw = px / 1920 * 100 */
@media screen and (min-width:1025px) and (max-width:1920px){
  .careers_inner{padding:0 1.5625vw;}
  .careers_head_tit{font-size:1.25vw;}
  .careers_desc_tit{margin-bottom:2.0833vw;font-size:2.083vw;}
  .careers_desc_note{font-size:0.9375vw;}
  .ourpeople_diagram{max-width:62.5521vw;}
  .culture_section{padding:9.375vw 0;}
  .culture_head_icon{width:5.8854vw;height:5.8854vw;}
  .culture_grid_inner{max-width:79.1667vw;padding:0 1.5625vw;}
  .culture_row{gap:0.625vw;}
  .culture_row+.culture_row{margin-top:0.625vw;}
  .culture_card{width:19.3229vw;border-radius:0.1042vw;}
  .culture_card_body{padding:1.4583vw;}
  .culture_card_row{gap:0.7813vw;}
  .culture_card_tit{font-size:1.25vw;}
  .culture_card_icon{width:1.6667vw;height:1.6667vw;}
  .culture_card_sub{margin-top:0.9896vw;font-size:0.8333vw;}
  .process_item_subtit.pref_tit{font-size:1.25vw;}
  .process_item_subtit{font-size:1.5625vw;}
  .jointeam_section .process_item_media{gap:1.5625vw;}
  .jointeam_section .process_item_media_label{font-size:3.125vw;}
  .jointeam_section .process_item_txt{font-size:1.40625vw;}
  .process_item_pref_list{gap:0.2604vw;}
  .process_item_pref_list li{font-size:0.8333vw;}
  .process_item_pref_list .pref_list_desc{font-size:0.8333vw;}
  .hiring_section{padding:5.2083vw 0 13.0208vw;}
  .hiring_head{margin-bottom:3.9063vw;}
  .hiring_subtit{margin-top:1.0417vw;font-size:1.0417vw;}
  .process_item_tags{margin-bottom:0.7813vw;gap:0.2604vw;}
  .hiring_steps{margin-bottom:4.1667vw;}
  .hiring_step{width:13.8542vw;height:13.8542vw;gap:0.4167vw;}
  .hiring_step_label{font-size:0.8333vw;}
  .hiring_step_tit{font-size:1.25vw;}
  .hiring_step_note{font-size:1.0417vw;}
  .hiring_step_connector{width:2.4479vw;}
  .hiring_step_connector::after{right:-0.2604vw;width:0.5208vw;height:0.5208vw;margin:-0.2604vw 0 0 -0.2604vw;}
  .hiring_details{margin-bottom:2.0833vw;padding-top:1.5625vw;}
  .hiring_detail_item{padding-bottom:1.5625vw;margin-bottom:1.5625vw;gap:1.1979vw;}
  .hiring_detail_tit{padding:0 0.625vw;font-size:1.6667vw;}
  .hiring_detail_desc{font-size:1.1vw;}
  .hiring_note{font-size:0.7292vw;}
  .hiring_apply_btn{margin-top:2.0833vw;padding:1.0417vw 1.3021vw 1.0417vw 1.5625vw;border-radius:0.1042vw;font-size:1.5625vw;}
  .hiring_apply_btn img{width:2.2917vw;height:2.1875vw;}
  .hiring_apply_btn.floating{right:2.0833vw;bottom:2.0833vw;width:5.7292vw;height:5.7292vw;font-size:0.8333vw;gap:0.2604vw;}
  .hiring_apply_btn.floating::before{width:1.8229vw;height:1.8229vw;}
  .apply_panel_box{width:39.6875vw;padding-bottom:2.0833vw;gap:1.1458vw;}
  .apply_panel_box::before{background-size:53.3333vw 53.3333vw;}
  .apply_panel_head{padding:1.5625vw 3.125vw;gap:1.0417vw;}
  .apply_panel_close{width:1.4583vw;height:1.4583vw;}
  .apply_panel_logo{font-size:1.0417vw;}
  .apply_panel_tit{padding:0 3.125vw;font-size:1.6667vw;}
  .apply_form{padding:0 3.125vw;gap:2.0833vw;}
  .apply_field_group{gap:1.0417vw;}
  .apply_field_label{gap:0.3125vw;font-size:0.9375vw;}
  .apply_badge{padding:0.0521vw 0.4167vw;border-radius:1.0417vw;font-size:0.625vw;}
  .apply_field_static{height:2.6042vw;padding:0.625vw;font-size:0.8333vw;}
  .apply_input_row{gap:0.625vw;}
  .apply_input_with_btn{gap:0.625vw;}
  .apply_inline_btn{gap:0.4167vw;padding:0.3646vw 0.625vw;border-radius:0.0521vw;font-size:0.8333vw;}
  .apply_inline_btn img{width:0.7292vw;height:0.4688vw;}
  .apply_check_row{gap:1.0417vw;}
  .apply_check_item{gap:0.625vw;font-size:0.8333vw;}
  .apply_check_input{width:1.6667vw;height:1.6667vw;}
  .apply_check_input.is_lg{width:1.875vw;height:1.875vw;border-radius:0.026vw;}
  .apply_check_input:checked{background:var(--color-accent-red) url('/main/images/sub/common/check_ic.svg') no-repeat center/0.7292vw 0.5208vw;}
  .apply_attach_row{height:2.6042vw;padding:0.6771vw 1.0417vw;border-radius:0.0521vw;gap:1.0417vw;}
  .apply_agree_group{padding-top:0.8333vw;gap:0.8333vw;}
  .apply_agree_row{padding-bottom:0.8333vw;}
  .apply_check_item.is_all{font-size:0.9375vw;}
  .apply_agree_note{gap:1.0417vw;}
  .apply_agree_note img{width:0.7292vw;height:0.3646vw;}
  .apply_panel_btns{gap:0.3125vw;}
  .apply_btn{font-size:1.0417vw;}
  .apply_panel_info{margin-top:2.0833vw;padding:0 3.125vw;gap:1.1458vw;}
  .apply_panel_info p{font-size:0.7292vw;}
  .apply_panel_info p.apply_tel{font-size:1.25vw;}
  .apply_agree_group.is_lg .apply_check_input{border-radius:0.0781vw;}
  .apply_attach_label > span{font-size:0.8333vw;}
  .apply_agree_content_list li span{padding-left:0.5208vw;}
  .alert_popup_panel{width:39.6875vw;height:28.6458vw;padding:3.125vw;border-radius:0.1042vw;gap:1.0417vw;}
  .alert_popup_tit{font-size:1.6667vw;}
  .alert_popup_desc{font-size:0.8333vw;}
  .alert_popup_close{width:16.5625vw;}
  .sub_hero_mascot{bottom: -5.208vw;right: 10.677vw;overflow: hidden;width: 28.438vw;height: 23.177vw;}
    
}

@media only screen and (max-width:1024px){
    .careers_desc_tit{font-size:clamp(20px,4vw,40px);}
    .careers_inner,.culture_grid_inner{padding:0 15px;}
    .culture_section{padding:100px 0;}
    .culture_grid{display:grid;grid-template-columns: repeat(2, 1fr);gap:10px;}
    .culture_row{display:contents;}
    .culture_card{width:100%;}
    .culture_card_body{padding:15px 15px 20px;}
    .culture_card_tit{font-size:17px;}
    .culture_card_sub{font-size:13px;margin-top:10px;}
    .culture_card_icon{width:25px;height:25px;}
    
    .jointeam_section .process_item_media {gap: 15px;}
    .jointeam_section .process_item_txt{font-size:clamp(16px,3vw,24px);}
    .process_item_subtit{font-size:clamp(22px,3.2vw,30px);}
    .process_item_subtit.pref_tit{font-size:clamp(18px,3vw,24px);}
    .process_item_pref_list .pref_list_desc{font-size:15px;}
    
    .hiring_section{padding:100px 0 75px;}
    .hiring_steps{flex-direction:column;gap:17px;margin-bottom:40px;}
    .hiring_step_connector{transform: rotate(90deg);width: 37px;}
    .hiring_details{padding-top:25px;margin-bottom:20px;}
    .hiring_detail_item{padding-bottom:25px;margin-bottom:25px;gap:15px;}
    .hiring_detail_tit {font-size:18px;}
    .hiring_detail_desc{font-size:15px;}
    .hiring_note{font-size:13px;}
    .hiring_apply_btn{margin-top:30px;font-size:20px;padding:15px;}
    .hiring_apply_btn img{width:26px; height:24px;}
    /* 플로팅 버튼은 모바일 Figma 시안이 없어 PC 비율(원 지름 대비 아이콘 32%)을 유지한 채 축소했다. 시안 나오면 값만 교체 */
    .hiring_apply_btn.floating{right:15px;bottom:15px;width:80px;height:80px;font-size:13px;}
    .hiring_apply_btn.floating::before{width:25px;height:25px;}
}
@media only screen and (max-width:768px){
	/* our people diagram — 원 3개를 세로로 적층한다. 원 지름(--circle_size) 하나만 정하면 겹침량·렌즈 크기·마커 위치가 전부 비율로 따라오게 묶어서, 브레이크포인트마다 좌표를 다시 잡지 않아도 되게 했다.
	   겹침량 11.87%는 임의값이 아니라 렌즈 아이콘(icon_difference_intersect.svg, 52:207) 비율에서 역산한 값이다. img로 불러온 svg는 고유 비율과 다른 박스에 넣으면 늘어나지 않고 레터박스로 여백이 생겨 렌즈 끝점이 원 교차점에 못 닿으므로, 반대로 겹침량을 svg 비율에 맞춘다.
	   현(chord) 길이 47.26% = 2*sqrt(r^2-(d/2)^2), 렌즈 중심 y = 지름의 94.07% / 182.20%. 결과적으로 PC 겹침 비율(11.95%)과도 거의 같아진다.
	   cqw는 컨테이너(.ourpeople_diagram) 자신에게는 적용되지 않으므로 자식에서만 쓰고, 70cqw가 기존 상한 350px을 넘지 않게 diagram 쪽에 max-width:500px을 둔다 */
	.ourpeople_diagram{max-width:500px;flex-direction:column;align-items:center;--circle_size:70cqw;}
    .ourpeople_circle{width:var(--circle_size);}
    .ourpeople_circle+.ourpeople_circle{margin-top:calc(var(--circle_size) * -0.1187);margin-left:0;}
    .ourpeople_circle_tit{font-size:3.7cqw;}
    .ourpeople_circle_sub{font-size:2.8cqw;}

    /* our people intersect — 겹침 영역의 색상+외곽선이 들어있는 icon_difference_intersect.svg를 PC(세로 렌즈)와 같은 파일로 재사용하고, 세로로 겹치는 모바일에선 rotate(90deg)로 눕히기만 한다. 높이는 base의 aspect-ratio(52/207)가 잡아주므로 폭만 지정한다 */
    .ourpeople_intersect{display:block;left:50%;width:calc(var(--circle_size) * 0.1187);transform:translate(-50%,-50%) rotate(90deg) !important;}
    .ourpeople_intersect_col_1{top:calc(var(--circle_size) * 0.9407);}
    .ourpeople_intersect_col_2{top:calc(var(--circle_size) * 1.822);}

    /* our people marker — 렌즈가 누웠으므로 col_1/col_2가 위/아래 교차점을, top/bottom이 그 교차점의 좌/우 끝점을 맡는다 */
    .ourpeople_marker{display:block;width:6px;height:6px;}
    .ourpeople_marker_top{left:calc(50% - var(--circle_size) * 0.2363);}
    .ourpeople_marker_bottom{left:calc(50% + var(--circle_size) * 0.2363);}
    .ourpeople_marker_col_1{top:calc(var(--circle_size) * 0.9407);}
    .ourpeople_marker_col_2{top:calc(var(--circle_size) * 1.822);}
}
@media only screen and (max-width:550px){
    /* 지름만 Figma 모바일 실측값(260px)으로 고정하면 겹침·렌즈·마커가 전부 따라 내려온다 */
    .ourpeople_diagram{--circle_size:260px;}
    .ourpeople_circle_tit{font-size:18px;}
    .ourpeople_circle_sub{font-size:16px;}
    .culture_card_row{flex-direction:column-reverse;align-items: flex-start;}
    .culture_card_icon{align-self: flex-end;}
    
    .hiring_step{width:200px;height:200px;}
    .hiring_step_label{font-size:12px;}
    .hiring_step_tit{font-size:20px;}
    .hiring_step_note{font-size:15px;}
}


@media only screen and (max-width: 1024px) {
span.process_item_kr { display: none;}
.process_item_tit {font-size: 22px;}
}