/*
 * 관심 직업 선택 이벤트(JOBPICK) 보조 스타일 — PC(/w), 모바일(/m) 공용
 * 본 스타일은 퍼블리싱(.event-quest4, event.css)에 없는 요소만 다룬다.
 *   - 초기화 버튼(.reset-w .btn-reset)
 *   - 테마 2개 선택 후 잠긴 상태(.theme-box.locked)
 *   - 직업이 없을 때 안내 문구(.jobpick-empty)
 */
/* 직업 카드가 나오면 이전/다음 화살표(.btn-arr)가 박스 밖(음수 left/right)으로 나가며 화면 폭을 넘겨 가로로 늘어난다.
   가로 방향만 잘라 가로 스크롤/늘어남을 막는다(세로는 그대로 두어 테마 화살표 등은 보인다). */
.event-quest4 { max-width: 100%; overflow-x: clip; }

/* 모바일: 이전/다음 화살표가 퍼블리싱 값(--q4-out: 30px, 40px)으로는 이벤트 영역(.event-quest4) 밖까지 나가 가장자리가 잘린다.
   바깥으로 나가는 거리를 줄이고 화살표를 조금 작게 해서 영역 안(흰 박스 안쪽)에 완전히 들어오게 한다. */
@media (max-width: 480px) {
    .event-quest4.is-mobile .sel-box .sel-job .job-box { --q4-out: 10px; }
    .event-quest4.is-mobile .sel-box .sel-job .job-box .btn-arr { width: 34px; height: 34px; }
}

/* 직업 카드가 나오기 전에는 .sel-job 의 위쪽 여백이 없어 테마 아래 화살표(.theme-arr)가 관심등록 바와 겹친다. 같은 여백을 대신 둔다. */
.event-quest4 .sel-box .sel-theme.no-job { padding-bottom: 40px; }
.event-quest4.is-mobile .sel-box .sel-theme.no-job { padding-bottom: 16px; }

/* 초기화 버튼: 테마 박스(.theme-box) 아래 오른쪽, 화살표(.theme-arr)와 같은 줄의 빈 공간에 둔다.
   직업 영역(.sel-job)의 위쪽 여백 안에 들어오도록 박스 기준으로 절대 위치를 잡아 레이아웃 높이는 바꾸지 않는다. */
.event-quest4 .theme-box .reset-w { position: absolute; right: 0; top: calc(100% + 10px); z-index: 2; }
.event-quest4 .theme-box .btn-reset {
    height: 40px; padding: 0 24px;
    border: 1px solid #FC5A4B; border-radius: 100px;
    background: #fff; color: #FC5A4B; font-size: 16px; font-weight: 700; cursor: pointer;
}
.event-quest4 .theme-box .btn-reset:hover { background: #FEE6D8; }
.event-quest4.is-mobile .theme-box .reset-w { top: calc(100% + 6px); }
.event-quest4.is-mobile .theme-box .btn-reset { height: 34px; padding: 0 16px; font-size: 14px; }

/* 테마 2개를 다 고르면 잠긴다(초기화 전까지 변경 불가): 고르지 않은 항목만 흐리게 */
.event-quest4 .theme-box.locked li label { cursor: not-allowed; }
.event-quest4 .theme-box.locked li label:not(.selected) { opacity: .4; }

/* 모바일 이벤트 화면의 확인창(초기화 확인 등): 취소/확인 버튼을 조금 작게, 버튼 사이 간격을 둔다 */
.jobpick-confirm .cc-btn-box-06 { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.jobpick-confirm .cc-btn-box-06 .com-btn.type-01.md { flex: 0 1 auto; min-width: 88px; min-height: 40px; padding: 8px 20px; font-size: 15px; }

/* 직업명: 퍼블리싱의 음수 자간 때문에 줄 끝 글자(예: '~사'의 ㅏ)가 잘려 'ㅣ'로 보여 자간을 없앤다.
   event.css 보다 먼저 로드되므로 선택자를 한 단계 더 구체적으로 쓴다. */
.event-quest4 .sel-box .sel-job .job-box .job-slide .job-list .job-item .name,
.event-quest4 .sel-box .sel-job .job-box .job-slide .job-list .job-item .name > span { letter-spacing: 0; }
.event-popup.quest4 .popup-cnt ul.result-list li .name,
.event-popup.quest4 .popup-cnt ul.result-list li .name > span { letter-spacing: 0; }

.event-quest4 .jobpick-empty { padding: 24px 0; text-align: center; color: #6b7280; }