/* 채용 사이트 공용 UI — 공고 카드 · 지역 칩 · 절차 카드.

   유학생 랜딩(/jobs)의 <style> 안에만 있던 .jl-* 를 여기로 뽑았다. 같은 카드를 세 화면
   (/jobs · /jobs/home · /jobs/list)이 쓰는데 화면마다 <style> 로 베껴 두면 한 곳만 고쳐지고
   셋이 갈라진다 — 그 순간 "같은 사이트" 로 읽히지 않는다.

   ⚠️ 값은 메인 랜딩(landing.css)의 토큰 그대로다. landing.css 를 <link> 하지 않는 이유는
      landing.html 주석에 있다 — 2,600줄짜리 구조 CSS라 끌어오면 이 화면들이 그쪽 변경에
      같이 흔들린다. 값만 옮긴다.
   ⚠️ Tailwind 프리빌드본(CLAUDE.md §4-1)과 무관한 정적 파일이다. 여기 쓴 클래스는
      npm run build:css 없이 그대로 산다.
   ⚠️ 이 파일은 <head> 에서 읽히고 common.css 는 헤더 프래그먼트가 <body> 에서 한 번 더 읽는다.
      .jl-* 는 common.css 에 없는 이름이라 겹치지 않는다 — 새 이름을 지을 때 이 전제를 확인할 것. */

/* ── 토큰 ────────────────────────────────────────────────────────────
   :root 에 둔다. 랜딩은 <body class="jl-page"> 지만 홈·목록은 배경까지 바꾸지 않으므로
   "토큰을 얻으려면 배경도 따라온다" 가 되면 안 된다. */
:root {
  --jl-bg: #EBEFFE;           /* 메인 랜딩 배경 */
  --jl-card: #ffffff;
  /* ⚠️ 인디고는 <b>남겨 둔 것</b>이지 안 고친 것이 아니다(2026-09-10 결정).
     목록 히어로(.jl-lhero)만 브랜드 파랑(#1D71FE)으로 바꿨는데, 그 아래 칩(.jl-chip)은
     아직 인디고다 — 한 화면에 두 색이 섞여 보이지만 <b>일부러 그렇게 뒀다.</b>
     .jl-chip 은 유학생 랜딩(/jobs)과 공용이라, 여기를 바꾸면 승인된 랜딩 디자인까지 같이 바뀐다.
     채용 화면 전체를 브랜드 파랑으로 가려면 이 토큰을 바꾸면 되고, 그건 랜딩을 포함한 결정이다. */
  --jl-indigo: #4F46E5;       /* --hero-indigo */
  --jl-indigo-dark: #4338CA;  /* --hero-indigo-dark */
  --jl-subtle: #EEF1FF;       /* --color-brand-subtle */
  --jl-light: #E0E5FE;        /* --color-brand-light */
  --jl-ink: #111827;          /* --hero-ink */
  --jl-desc: #6B7280;         /* --hero-desc */
  --jl-note: #8C8F9E;         /* --hero-note */
  --jl-line: #E5E7EB;
  --jl-title: 'Paperlogy', 'Pretendard', sans-serif;  /* --hero-title-font */
  /* 고른 것을 표시하는 파랑 그라데이션(v4.79). 값은 common.css 의 .btn-blue 와 <b>같은 톤</b>이다
     (#3395F8 → #1D71FE) — 새 색을 만들지 않는다(§4-2). 칩·필터 알약·체크박스가 이걸 같이 쓴다:
     한 화면에서 '고름' 의 표시는 하나여야 한다. */
  --jl-pick: linear-gradient(135deg, #3395F8 0%, #1D71FE 100%);
  --jl-pick-shadow: 0 6px 14px rgba(29, 113, 254, .28);
  --jl-shadow: 0 4px 6px rgba(0, 0, 0, .04), 0 20px 60px rgba(79, 70, 229, .12);
  --jl-lift: 0 10px 21px rgba(76, 71, 154, .05), 0 39px 39px rgba(76, 71, 154, .09),
             0 87px 52px rgba(76, 71, 154, .05);
}

/* 한국어·중국어는 keep-all 로 어절이 안 끊기고, 라틴/키릴은 긴 토큰만 넘칠 때 끊긴다.
   openhtmltopdf 와 달리 브라우저는 keep-all 을 지원한다(CLAUDE.md §11). */
.jl-kk { word-break: keep-all; overflow-wrap: anywhere; }

/* common.css 의 .fs-info-card 를 <이미 패딩이 있는 카드 안>에 넣을 때. 여백은 바깥 카드가 쥔다.
   기본값(카드 20px + 섹션 좌우 20px)은 페이지 배경 위에 홀로 설 때의 값이라, 흰 카드 안에서는
   두 겹으로 겹쳐 글이 40px 안으로 밀린다(마이페이지 '지원 현황' 의 빈 상태가 그랬다).
   ⚠️ 반드시 .fs-info-card 와 <겹쳐> 쓴다. 이 파일은 <head>, common.css 는 <body> 라
      common.css 가 나중이다 — 한 클래스로 두면 .fs-info-card 의 padding 이 이걸 덮는다
      (common.css 의 .legal-notice 가 같은 이유로 겹쳐 쓴다). */
.fs-info-card.jl-flush,
.fs-info-card.jl-flush .fs-info-section { padding: 0; }

/* ── 버튼 (landing.css .btn-start) ─────────────────────────────────── */
.jl-btn { display: inline-flex; align-items: center; gap: 7px;
          padding: 15px 23px 15px 27px; background: var(--jl-indigo);
          border: 1px solid transparent; border-radius: 10px; color: #fff;
          font-size: 17px; font-weight: 600; line-height: 1.2; text-decoration: none;
          cursor: pointer; font-family: inherit;
          transition: background .25s ease, color .25s ease, border-color .25s ease; }
.jl-btn:hover { background: #fff; color: var(--jl-indigo); border-color: var(--jl-indigo); }
.jl-btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
.jl-btn-ghost { background: #fff; color: var(--jl-indigo); border-color: var(--jl-light); }
.jl-btn-ghost:hover { background: var(--jl-indigo); color: #fff; border-color: var(--jl-indigo); }
.jl-btn-sm { padding: 10px 16px; font-size: 14px; border-radius: 9px; }
.jl-btn-block { width: 100%; justify-content: center; padding: 15px; }
.jl-btn:disabled { opacity: .6; cursor: default; }

/* ── picker ──────────────────────────────────────────────────────── */
.jl-pick { margin-top: 26px; }
.jl-pick:first-child { margin-top: 0; }
.jl-pick-h { font-size: 14px; font-weight: 700; color: var(--jl-desc); margin-bottom: 11px; }

/* 지역 — <b>줄바꿈하지 않는다.</b> wrap 으로 뒀더니 1024px 에서 라벨이 긴 en/ru 만 2줄로
   접혀 아래가 44px 밀렸다(ko/zh 는 1줄). 2줄분을 비워 두면 넓은 화면에 빈 줄이 생기므로
   "항상 한 줄" 로 <b>구조를 고정</b>한다 — 넘치면 가로로 민다. */
.jl-areas { display: flex; gap: 7px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
            scrollbar-width: none; -ms-overflow-style: none; }
.jl-areas::-webkit-scrollbar { display: none; }
/* 위 판단은 <b>랜딩 전용</b>이다 — 거기는 선택지가 6개로 고정이고 4개 언어가 나란히 선다.
   목록 화면(/jobs/list)의 지역은 운영자가 늘리는 목록(job_filter_option)이라 개수가 정해져
   있지 않고, 스크롤바를 감춘 가로 스크롤은 <b>넘친 줄을 아무도 못 찾는다</b>. 거기서는 접는다. */
.jl-areas-wrap { flex-wrap: wrap; overflow-x: visible; }

/* ⚠️ display 를 <b>여기서</b> 못박는다. 같은 칩인데 태그가 둘이라서다 —
   '전체' 는 <a>, 나머지는 <input>을 품은 <label> 이다. 이 줄이 없으면 label 은 inline 이라
   글자가 베이스라인에 걸리고, inline-flex 인 <a> 와 <b>한 픽셀씩 어긋나 보인다</b>.
   랜딩의 <button> 은 원래 가운데 정렬이라 이 규칙으로 달라지지 않는다. */
.jl-chip { position: relative; flex: 0 0 auto; display: inline-flex;
           align-items: center; justify-content: center;
           border: 1px solid var(--jl-line); background: #fff;
           border-radius: 999px; padding: 9px 15px; font: inherit; font-size: 13.5px;
           font-weight: 600; color: #374151; cursor: pointer; white-space: nowrap;
           text-align: center; line-height: 1.2;
           transition: background .15s, border-color .15s, color .15s; }
.jl-chip:hover { border-color: var(--jl-indigo); color: var(--jl-indigo); }
/* 두 가지 켜는 법을 같이 받는다 — 랜딩은 <button aria-pressed>(JS 가 다시 그린다),
   목록은 <label> 안의 radio(JS 없이 GET 폼으로 제출된다). 겉모습은 하나여야 한다. */
/* 켜진 칩. 검정이었는데 그라데이션으로 바꿨다(v4.77) — 검정은 '고른 것' 이 아니라
   '꺼진 것' 처럼 읽혔다.
   ⚠️ 여기는 <b>세 화면 공용</b>이다(랜딩·홈·목록). 색을 바꾸면 승인된 랜딩 디자인까지 같이
      바뀌므로 이 규칙은 인디고 계열로 둔다 — 목록 화면만 파랑으로 쓰려면 아래 .jl-fbar 안의
      덮어쓰기를 본다(v4.79). */
.jl-chip[aria-pressed='true'], .jl-chip:has(:checked), .jl-chip-all.is-on {
  background: linear-gradient(135deg, var(--jl-indigo) 0%, #7C3AED 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 14px rgba(99, 62, 216, .28); }
/* ⚠️ 마크업의 <input> 에 <b>class="sr-only" 가 반드시 있어야</b> 한다.
   common.css 의 input[type="checkbox"]:not(.sr-only):not(.hidden) 이 특이도(0,3,1)로
   아래 규칙(0,1,1)을 <b>이기고</b> position:relative·18px 를 도로 씌운다 — 그러면 안 보이는
   체크박스가 칩 안에서 자리를 먹어 글자가 오른쪽으로 밀린다(실측 좌 38px / 우 16px).
   그 규칙이 :not(.sr-only) 로 열어 둔 문이 sr-only 다. 여기서 특이도로 싸우지 않는다. */
.jl-chip input { position: absolute; opacity: 0; pointer-events: none; }
/* ⚠️ display:inline-flex 는 UA 의 [hidden]{display:none} 을 <b>이긴다.</b> 못박지 않으면
   '더보기' 로 접은 칩이 그대로 보인다 — 같은 함정을 이 저장소가 .fs-modal-backdrop 에서
   한 번, 운영자 목록의 선택 바에서 또 한 번 겪었다. */
.jl-chip[hidden] { display: none; }
/* 더보기·접기 — 칩과 같은 알약이되 '고르는 것' 이 아니라 '펼치는 것' 이라 점선으로 구분한다. */
.jl-chip-more { border-style: dashed; color: var(--jl-note); background: transparent; }
.jl-chip-more:hover { border-style: solid; }
/* '전체' 는 링크다(§ 지역 칩 주석). 칩 모양은 같아야 하므로 링크 기본값을 지운다.
   ⓘ display·정렬은 .jl-chip 이 이미 쥔다 — 여기서 다시 적으면 두 곳이 갈린다. */
a.jl-chip { text-decoration: none; color: #374151; }
a.jl-chip:hover { color: var(--jl-indigo); }
a.jl-chip-all.is-on, a.jl-chip-all.is-on:hover { color: #fff; }
.jl-chip:has(:focus-visible) { outline: 2px solid var(--jl-indigo); outline-offset: 2px; }

/* ── 공고 카드 ────────────────────────────────────────────────────── */
.jl-count { margin-top: 18px; font-size: 13px; color: var(--jl-note); }
.jl-count b { color: var(--jl-indigo); font-weight: 800; }
.jl-jobs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 12px; }
.jl-jobs-3 { grid-template-columns: repeat(3, 1fr); }
.jl-job { background: #fff; border: 1px solid var(--jl-line); border-radius: 18px; padding: 22px;
          display: flex; flex-direction: column; gap: 11px;
          transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .2s; }
.jl-job:hover { transform: translateY(-8px); box-shadow: var(--jl-lift); border-color: transparent; }
/* 카드 전체가 링크인 화면(홈·목록)이 있다. 밑줄·파란 글씨가 카드 안을 헤집지 않게 막는다.
   높이 100% 는 <li> 안에 넣었을 때 카드가 줄 높이를 채우게 한다. */
a.jl-job { height: 100%; color: inherit; text-decoration: none; }
.jl-job-cat { font-size: 12px; font-weight: 700; color: var(--jl-indigo); }
.jl-job-cat i { font-style: normal; color: var(--jl-note); font-weight: 500; }
.jl-job-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.jl-job-t { font-size: 17px; font-weight: 700; color: var(--jl-ink); letter-spacing: -.2px; }
/* 카드 안의 제목은 <b>두 줄까지</b>, 넘치면 말줄임.
   그리드 한 줄의 카드 높이는 가장 큰 카드를 따라간다 — 제목 하나가 넉 줄이 되면 그 줄의 카드가
   전부 같이 커지고, 짧은 공고의 카드에는 빈 공간만 남는다.
   ⚠️ <b>카드 안에서만</b> 자른다(.jl-job 하위). 상세 화면의 제목은 그 화면의 주인공이라
      한 글자도 감추지 않는다 — 거기서 이 클래스를 쓰게 되더라도 그대로 다 보인다. */
.jl-job .jl-job-t {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.jl-job-biz { font-size: 13px; color: var(--jl-desc); margin-top: 3px; }
.jl-pay { font-size: 19px; font-weight: 800; color: var(--jl-indigo); white-space: nowrap; text-align: right; }
.jl-pay small { display: block; font-size: 11.5px; font-weight: 600; color: var(--jl-note); }
.jl-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #4B5563; }
.jl-meta span::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
                        background: var(--jl-indigo); margin-right: 6px; vertical-align: middle; }
/* 마감·체류자격과 [자세히 보기] 줄은 <b>카드 바닥에 붙인다</b>. 카드 높이는 그리드가 한 줄에서
   맞춰 주는데(a.jl-job 의 height:100%), 이 줄이 내용을 따라 떠 있으면 옆 카드와 높이가 어긋나
   눈이 줄을 못 잡는다. 위 내용은 위에, 이 줄은 아래에 — 남는 공간은 이 margin 이 먹는다.
   ⓘ .jl-job 에 justify-content:space-between 을 주지 않는 이유: 자식이 넷이라(업종·제목·조건·이 줄)
     남는 공간이 <b>사이마다</b> 나뉘어 위쪽 내용까지 흩어진다. 붙일 것은 이 줄 하나뿐이다. */
.jl-job-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px;
               margin-top: auto; flex-wrap: wrap; }
/* '자세히 보기' 는 어느 카드에서나 <b>오른쪽 끝</b>이다.
   도장이 많은 카드는 foot 가 줄바꿈되는데, 그때 space-between 은 혼자 남은 버튼을
   <b>그 줄의 왼쪽</b>에 둔다 — 카드마다 버튼 자리가 달라져 목록이 들쭉날쭉해진다.
   auto 여백은 줄바꿈 여부와 상관없이 남는 폭을 왼쪽으로 몰아 버튼을 끝으로 민다. */
.jl-job-foot .jl-btn { margin-left: auto; }
/* 카드가 통째로 링크일 때 foot 의 '자세히 보기' 는 <b>버튼이 아니라 그림</b>이다(중첩 금지).
   그래도 손 모양·hover 는 카드와 같이 움직여야 눌리는 것으로 읽힌다. */
.jl-job:hover .jl-btn-ghost { background: var(--jl-indigo); color: #fff; border-color: var(--jl-indigo); }
/* 원안의 '도장' 태그. 붉은 도장 대신 브랜드 톤으로 옮겼다. */
.jl-stamp { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700;
            border: 1.5px solid var(--jl-indigo); color: var(--jl-indigo); border-radius: 5px;
            padding: 2px 8px; margin-right: 5px; }
.jl-stamp-major { border-color: var(--jl-indigo-dark); color: var(--jl-indigo-dark); background: var(--jl-subtle); }
/* 조건이 아니라 사실을 말하는 태그(마감일 등). 인디고 도장과 나란히 서면 둘 다 조건으로 읽혀
   "이 비자여야 한다" 와 "언제까지" 가 섞인다 — 무채색으로 한 겹 내린다. */
.jl-stamp-mute { border-color: var(--jl-line); color: var(--jl-note); background: #F9FAFB; }

/* ── 절차 카드 ────────────────────────────────────────────────────── */
.jl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.jl-step { background: #fff; border-radius: 20px; padding: 30px 28px; box-shadow: var(--jl-shadow);
           transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.jl-step:hover { transform: translateY(-14px); box-shadow: var(--jl-lift); }
.jl-step-n { width: 34px; height: 34px; border-radius: 11px; background: var(--jl-indigo); color: #fff;
             font-size: 15px; font-weight: 800; display: grid; place-items: center; }
.jl-step h3 { margin-top: 15px; font-family: var(--jl-title); font-size: 19px; font-weight: 600;
              color: var(--jl-ink); letter-spacing: -.4px; }
.jl-step p { margin-top: 8px; font-size: 14.5px; color: var(--jl-desc); line-height: 1.6; }
/* 번호와 아이콘을 한 줄에 둔다. 아이콘은 <b>장식</b>이라 번호보다 뒤로 물린다 —
   둘 다 진하면 "무엇을 먼저 보라" 가 없어진다. */
.jl-step-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jl-step-ico { flex: 0 0 auto; color: var(--jl-indigo); opacity: .38; }

/* 2열은 900 에서 바로 1열로 간다(랜딩이 그렇게 검증돼 있다). 3열은 한 단계를 더 거친다 —
   900 에서 곧장 1열로 떨어뜨리면 태블릿에서 카드가 필요 이상으로 커진다. */
@media (max-width: 900px) {
  .jl-jobs { grid-template-columns: 1fr; }
  .jl-jobs-3 { grid-template-columns: repeat(2, 1fr); }
  .jl-steps { grid-template-columns: 1fr; }
  /* 1열이 되면 카드가 화면만큼 넓어져, space-between 이 아이콘을 저 혼자 오른쪽 끝으로
     보낸다 — 무엇에 붙은 표시인지 안 읽힌다. 번호 옆에 붙여 둔다. */
  .jl-step-head { justify-content: flex-start; gap: 12px; }
}
@media (max-width: 620px) {
  .jl-jobs-3 { grid-template-columns: 1fr; }
}

/* ── 목록 화면(/jobs/list) 전용 ────────────────────────────────────────
   랜딩·홈은 쓰지 않는다. 새 파일로 빼지 않은 이유는 여기 토큰(--jl-*)을 그대로 쓰기 때문이다 —
   빼면 같은 값을 한 벌 더 적게 된다. 이름은 전부 .jl-l* 또는 .jl-fbar* 로 시작한다.
   ⚠️ Tailwind 프리빌드본과 무관한 정적 파일이라(§4-1) npm run build:css 없이 그대로 산다. */
.jl-wrapc { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* 히어로 — 랜딩(/jobs)의 얼굴을 목록까지 이어 붙인다.
   배경은 <b>진한 보라 그라데이션</b>이다(v4.77). 연한 --jl-bg 로는 헤더·본문과 명도가 붙어
   첫 화면이 통째로 밋밋했다. 끝 색은 브랜드 인디고에서 보라 쪽으로만 민다 — 새 색을 만들지 않는다. */
/* ⚠️ 브랜드 색(#1D71FE → #0851CC)이다. 예전에는 인디고→보라 그라데이션이었는데,
   같은 사이트의 홈 히어로(jobs/home.html)가 이미 브랜드 파랑이라 두 화면이 갈렸다 —
   홈에서 목록으로 넘어가는 순간 색이 바뀌면 다른 사이트로 읽힌다.
   값은 CLAUDE.md §4-2 의 프라이머리·진한 톤 그대로이고, 홈 히어로와 <b>같은 각도·같은 두 색</b>이다. */
.jl-lhero { position: relative; overflow: hidden; padding: 54px 0 50px;
            background: linear-gradient(135deg, #1D71FE 0%, #0851CC 100%); }
/* 배경 위의 빛 두 덩이. 단색 그라데이션만 있으면 넓은 화면에서 평평해 보인다. */
.jl-lhero-glow { position: absolute; border-radius: 50%; pointer-events: none;
                 width: 420px; height: 420px; left: -120px; top: -180px;
                 background: radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 70%); }
/* 아래쪽 빛도 파랑 계열로. 보라(rgba(167,139,250)) 를 남기면 파란 배경 위에 보라 얼룩이 진다.
   값은 연한 브랜드 배경(#EBF1FD)이다 — 새 색을 만들지 않는다(§4-2). */
.jl-lhero-glow2 { left: auto; right: -140px; top: auto; bottom: -260px; width: 520px; height: 520px;
                  background: radial-gradient(circle, rgba(235,241,253,.30) 0%, rgba(235,241,253,0) 70%); }
.jl-lhero-in { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 24px;
               text-align: center; }
.jl-lhero-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px;
                  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
                  color: #fff; background: rgba(255,255,255,.16);
                  border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(2px); }
.jl-lhero-t { font-size: 38px; font-weight: 700; line-height: 132%; letter-spacing: -1.3px; color: #fff; }
/* 강조어는 색을 바꾸지 않는다 — 진한 배경 위에서 색만 바꾸면 대비가 떨어진다. 밑줄 하이라이트로 든다. */
.jl-lhero-t b { font-weight: 700; color: #fff; box-shadow: inset 0 -.34em 0 rgba(255,255,255,.22); }
.jl-lhero-s { margin-top: 12px; font-size: 16px; color: rgba(255,255,255,.82); }
.jl-lhero-s b { font-weight: 700; color: #fff; }

.jl-lsearch { display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 26px auto 0;
              background: #fff; border-radius: 16px; padding: 8px 8px 8px 18px;
              /* 그림자도 배경 색을 따라간다. 남보라(rgba(30,20,90)) 를 두면 파란 배경 위에서 탁해진다. */
              box-shadow: 0 18px 40px rgba(8, 81, 204, .28), 0 2px 6px rgba(8, 81, 204, .18); }
.jl-lsearch svg { flex: 0 0 auto; width: 19px; height: 19px; color: #1D71FE; }
.jl-lsearch input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit;
                    font-size: 15px; color: var(--jl-ink); padding: 12px 4px; }
.jl-lsearch input::placeholder { color: #9AA0AE; }
.jl-lsearch input:focus { outline: none; }
/* 검색 아이콘(x 표시)은 브라우저마다 다르게 그려 칩 안에서 어긋난다 — 쓰지 않는다. */
.jl-lsearch input::-webkit-search-cancel-button { display: none; }
/* ⚠️ 검색 버튼은 히어로 <b>안</b>에 있다. --jl-indigo 로 두면 파란 배경 위에 보라 버튼이 남는다.
   이 블록만 브랜드 파랑을 쓴다 — 토큰(--jl-indigo)은 랜딩·상세가 같이 쓰므로 건드리지 않는다. */
.jl-lsearch button { flex: 0 0 auto; border: 0; border-radius: 12px; background: #1D71FE;
                     color: #fff; font: inherit; font-size: 15px; font-weight: 700;
                     padding: 13px 26px; cursor: pointer; transition: background .15s; }
.jl-lsearch button:hover { background: #0851CC; }

/* 필터 바 — 흩어진 셀렉트를 흰 카드 한 덩어리로 묶는다. */
.jl-fbar { margin-top: 26px; background: #fff; border: 1px solid var(--jl-line); border-radius: 16px;
           padding: 16px 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.jl-fbar-row { display: flex; align-items: center; gap: 14px; }
/* ⚠️ 폭을 고정하지 않는다. '지역'(38px)에 맞춰 두었더니 같은 자리가 en 'Region' ·
   ru 'Регион' · vi 'Khu vực' 에서 두 줄로 접혔다 — 한국어로 보는 한 안 보이는 종류의 고장이다.
   min-width 로 한국어의 정렬만 지키고, 긴 라벨은 자기 폭을 갖게 한다. */
.jl-fbar-h { flex: 0 0 auto; min-width: 38px; white-space: nowrap;
             font-size: 12.5px; font-weight: 700; color: var(--jl-note); }
.jl-fbar-sep { height: 1px; background: var(--jl-line); margin: 15px 0; }
.jl-sels { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }

/* 목록 화면의 지역 칩만 <b>브랜드 파랑</b>으로(v4.79).
   같은 화면의 필터 알약·체크박스·'나에게 맞는 공고' 가 이미 파랑이라, 칩만 인디고면
   한 줄 위아래로 두 색이 갈린다. 공용 규칙(.jl-chip)을 건드리지 않고 여기서만 덮는다 —
   랜딩(/jobs)의 칩은 그대로 둔다. */
.jl-fbar .jl-chip[aria-pressed='true'],
.jl-fbar .jl-chip:has(:checked),
.jl-fbar .jl-chip-all.is-on {
  background: var(--jl-pick);
  box-shadow: var(--jl-pick-shadow); }

/* 필터 알약 = details/summary. 열고 닫는 것은 브라우저가 하고, CSS 는 모양만 맡는다.
   ⚠️ summary 의 기본 삼각형을 지운다(브라우저마다 다르게 그린다). */
.jl-fdrop { position: relative; flex: 0 0 auto; }
.jl-fbtn { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
           border: 1px solid var(--jl-line); background: #fff; border-radius: 999px;
           padding: 9px 13px 9px 15px; font-size: 13.5px; color: var(--jl-note);
           white-space: nowrap; /* 알약 안에서 줄바꿈하지 않는다 — '고용형/태' 로 갈라진다 */
           transition: background .15s, border-color .15s, color .15s; }
.jl-fbtn > span { flex: 0 0 auto; }
/* 고른 값이 길면 <b>말줄임</b>한다. 좁은 화면에서 알약이 줄을 먹고 늘어나는 것보다 낫다. */
.jl-fbtn b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jl-fbtn::-webkit-details-marker { display: none; }
.jl-fbtn:hover { border-color: var(--jl-indigo); }
.jl-fbtn b { font-weight: 700; color: var(--jl-ink); }
.jl-fbtn-c { flex: 0 0 auto; color: #9CA3AF; transition: transform .18s ease; }
.jl-fdrop[open] .jl-fbtn { border-color: var(--jl-indigo); }
.jl-fdrop[open] .jl-fbtn-c { transform: rotate(180deg); }
/* 값이 걸린 알약은 칩과 같은 보라 그라데이션으로 켠다 — 화면 안에서 '고름' 의 표시가 하나여야 한다. */
.jl-fdrop.is-on .jl-fbtn { background: var(--jl-pick);
                           border-color: transparent; color: rgba(255,255,255,.82);
                           box-shadow: var(--jl-pick-shadow); }
.jl-fdrop.is-on .jl-fbtn b { color: #fff; }
.jl-fdrop.is-on .jl-fbtn-c { color: rgba(255,255,255,.8); }

.jl-fpanel { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 208px;
             background: #fff; border: 1px solid var(--jl-line); border-radius: 14px; padding: 8px;
             box-shadow: 0 12px 30px rgba(17, 24, 39, .12); }
/* 체류자격처럼 항목이 많은 것은 두 줄로 편다 — 세로로 길어지면 화면 밖으로 나간다. */
.jl-fpanel-2 { min-width: 300px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4px; }
.jl-fpanel-2 .jl-fpanel-act { grid-column: 1 / -1; }
.jl-fopt { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px;
           font-size: 13.5px; color: #374151; cursor: pointer; white-space: nowrap; }
.jl-fopt:hover { background: #F7F8FC; }
/* ⚠️ 마크업의 <input> 에 <b>class="sr-only" 가 반드시 있어야</b> 한다.
   common.css 의 input[type="checkbox"]:not(.sr-only):not(.hidden) 이 특이도(0,3,1)로
   아래 규칙(0,1,1)을 <b>이기고</b> position:relative·18px 를 도로 씌운다 — 그러면 안 보이는
   체크박스가 칩 안에서 자리를 먹어 글자가 오른쪽으로 밀린다(실측 좌 38px / 우 16px).
   그 규칙이 :not(.sr-only) 로 열어 둔 문이 sr-only 다. 여기서 특이도로 싸우지 않는다. */
.jl-fopt input { position: absolute; opacity: 0; pointer-events: none; }
.jl-fopt i { flex: 0 0 auto; width: 17px; height: 17px; border: 1.5px solid #CBD0DC; border-radius: 5px;
             background: #fff; transition: background .12s, border-color .12s; }
.jl-fopt:has(:checked) { color: var(--jl-indigo-dark); font-weight: 700; }
/* ⚠️ 체크 표시와 그라데이션은 <b>두 겹</b>이다. background 한 줄에 gradient 와 url 을 같이 적으면
   그 선언 전체가 무효가 되고, border 까지 투명이라 <b>네모가 통째로 사라진다</b>(그렇게 한 번 없어졌다). */
.jl-fopt:has(:checked) i {
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"),
                    var(--jl-pick);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 12px, auto; }
.jl-fopt:has(:focus-visible) { outline: 2px solid var(--jl-indigo); outline-offset: -2px; }
.jl-fpanel-act { margin-top: 4px; padding: 6px 4px 2px; border-top: 1px solid #F1F2F6; }
.jl-fapply { width: 100%; border: 0; border-radius: 10px; cursor: pointer; font: inherit;
             font-size: 13.5px; font-weight: 700; color: #fff; padding: 10px;
             background: var(--jl-pick); }
.jl-fapply:hover { filter: brightness(1.06); }

.jl-fbar-reset { flex: 0 0 auto; border: 1px solid var(--jl-line); border-radius: 999px; background: #fff;
                 color: var(--jl-desc); font-size: 14px; font-weight: 600; padding: 10px 16px;
                 text-decoration: none; transition: border-color .15s, color .15s; }
.jl-fbar-reset:hover { border-color: var(--jl-indigo); color: var(--jl-indigo); }

/* '나에게 맞는 공고' — 초기화 옆에 선다. 켜져 있을 때는 채워서, 누르면 풀린다. */
.jl-mine { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
           border: 1px solid var(--jl-light); border-radius: 999px; background: var(--jl-subtle);
           color: var(--jl-indigo-dark); font-size: 14px; font-weight: 700; padding: 10px 16px;
           text-decoration: none; white-space: nowrap; /* 아이콘과 글자가 두 줄로 갈라지지 않게 */
           transition: background .15s, color .15s, box-shadow .15s; }
.jl-mine svg { flex: 0 0 auto; }
.jl-mine:hover { border-color: transparent; color: #fff;
                 background: var(--jl-pick); }
/* 켜졌을 때는 칩·필터와 같은 보라 그라데이션 — 화면 안에서 '고름' 의 표시는 하나여야 한다. */
.jl-mine.is-on { border-color: transparent; color: #fff;
                 background: var(--jl-pick);
                 box-shadow: var(--jl-pick-shadow); }
.jl-mine.is-on:hover { filter: brightness(1.06); }

.jl-lmain { padding-bottom: 44px; }

@media (max-width: 760px) {
  .jl-lhero { padding: 34px 0 30px; }
  .jl-lhero-glow, .jl-lhero-glow2 { display: none; }
  .jl-lhero-badge { margin-bottom: 12px; padding: 6px 12px; font-size: 11.5px; }
  .jl-lhero-t { font-size: 25px; letter-spacing: -.7px; }
  .jl-lhero-s { font-size: 14px; }
  /* 좁은 화면에서는 검색 버튼을 아래로 내린다 — 한 줄에 두면 입력칸이 글자 두어 개 폭이 된다. */
  .jl-lsearch { flex-wrap: wrap; padding: 12px; margin-top: 20px; }
  .jl-lsearch input { flex: 1 1 60%; }
  .jl-lsearch button { width: 100%; }

  .jl-wrapc { padding: 0 16px; }
  .jl-fbar { padding: 14px; border-radius: 14px; }
  .jl-fbar-row { flex-wrap: wrap; gap: 10px; }
  .jl-fbar-h { width: auto; }
  /* 지역 칩은 <b>줄바꿈 대신 가로 스크롤</b>이다 — 지역이 늘어나면 필터 바가 화면을 다 먹는다.
     스크롤바는 감추되 오른쪽 끝을 흐려 "더 있다" 를 보이게 한다(감춘 스크롤의 함정 보완). */
  .jl-areas-wrap { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
                   scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%); }
  .jl-areas-wrap::-webkit-scrollbar { display: none; }
  .jl-sels { width: 100%; gap: 6px; }
  .jl-fdrop { flex: 1 1 calc(50% - 3px); }
  .jl-fbtn { width: 100%; justify-content: space-between; padding: 10px 12px; }
  /* 패널은 알약 밑이 아니라 <b>화면 아래에서 올라오는 시트</b>다 — 좁은 폭에서 알약에 붙이면
     오른쪽 두 개가 화면 밖으로 나가고, 손가락이 닿기도 먼 위쪽에 열린다. */
  .jl-fpanel, .jl-fpanel-2 { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto;
                             min-width: 0; max-height: 62vh; overflow-y: auto; border-radius: 16px;
                             box-shadow: 0 -6px 34px rgba(17, 24, 39, .22); }
  .jl-fpanel-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jl-fopt { padding: 12px 10px; }   /* 손가락으로 누르는 크기 */
  .jl-fbtn { font-size: 12.5px; padding: 9px 10px 9px 12px; gap: 6px; }
  .jl-fbar-reset { width: 100%; text-align: center; }
  .jl-mine { width: 100%; justify-content: center; }
  .jl-lmain { padding-bottom: 32px; }
}

/* ── 상세 화면(/jobs/detail) 전용 ──────────────────────────────────────
   목록과 같은 토큰을 쓰되 이름은 .jl-d* 로 갈라 둔다 — 목록의 .jl-l* 와 섞이지 않게. */
.jl-dmain { padding-top: 22px; padding-bottom: 44px; max-width: 940px; }
.jl-dcrumb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
             color: var(--jl-note); text-decoration: none; }
.jl-dcrumb:hover { color: var(--jl-indigo); }
.jl-dcard { margin-top: 14px; background: #fff; border: 1px solid var(--jl-line); border-radius: 20px;
            padding: 26px 28px; }

/* 상단 한 덩어리 — 넓으면 지도가 오른쪽, 좁아지면 글 아래로 내려간다. */
.jl-dtop { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 26px; align-items: start; }
.jl-dtop.is-nomap { grid-template-columns: minmax(0, 1fr); }
.jl-dpill { display: inline-flex; align-items: center; gap: 6px; background: var(--jl-subtle);
            color: var(--jl-indigo-dark); border-radius: 999px; padding: 6px 12px;
            font-size: 12.5px; font-weight: 700; }
.jl-dtitle { margin-top: 12px; font-size: 27px; font-weight: 800; line-height: 132%;
             letter-spacing: -.8px; color: var(--jl-ink); }
.jl-dpay { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; }
.jl-dpay b { font-size: 28px; font-weight: 800; color: var(--jl-indigo); letter-spacing: -.9px; }
.jl-dpay small { font-size: 12.5px; font-weight: 600; color: var(--jl-note); }
.jl-dhr { height: 1px; background: #F1F2F6; margin: 20px 0 18px; }
.jl-dstore { display: flex; align-items: flex-start; gap: 14px; }
.jl-dava { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 16px; background: var(--jl-subtle);
           color: var(--jl-indigo); display: grid; place-items: center; }
.jl-dname { font-size: 17px; font-weight: 800; letter-spacing: -.4px; color: var(--jl-ink); }
.jl-daddr { margin-top: 5px; font-size: 13.5px; color: var(--jl-desc); }
.jl-dchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.jl-dchip { border: 1px solid var(--jl-line); border-radius: 999px; padding: 5px 11px;
            font-size: 12px; font-weight: 600; color: #4B5563; }

/* 지도 — 네이버 지도 SDK 가 이 칸을 채운다. 못 그리면 스크립트가 칸째로 접는다. */
.jl-dmap { height: 300px; border-radius: 16px; overflow: hidden; border: 1px solid var(--jl-line);
           background: #F2F3F5; }
.jl-dmapfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.jl-dmapfoot p { font-size: 12.5px; color: var(--jl-desc); }
.jl-dmapfoot button { flex: 0 0 auto; border: 1px solid var(--jl-line); background: #fff; border-radius: 9px;
                      padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 600;
                      color: var(--jl-desc); cursor: pointer; white-space: nowrap; }
.jl-dmapfoot button:hover { border-color: var(--jl-indigo); color: var(--jl-indigo); }

/* 지원 자격 패널 */
.jl-dcheck { margin-top: 14px; background: #fff; border: 1.5px solid var(--jl-indigo);
             border-radius: 20px; overflow: hidden; }
.jl-dcheck-h { display: flex; align-items: center; justify-content: space-between; gap: 16px;
               background: var(--jl-subtle); padding: 15px 24px; }
.jl-dcheck-h b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800;
                 color: var(--jl-indigo-dark); }
.jl-dcheck-h > span { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px;
                      font-weight: 600; color: var(--jl-indigo); }
.jl-dcheck-h a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.jl-dcheck-b { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 24px;
               padding: 22px 24px 20px; align-items: center; }
.jl-dchecks { display: flex; flex-direction: column; gap: 12px; }
.jl-dci { display: flex; align-items: flex-start; gap: 12px; }
.jl-dci .m { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px; display: grid;
             place-items: center; background: var(--jl-indigo); color: #fff; }
.jl-dci.is-no .m { background: #FEE2E2; color: #B91C1C; }
.jl-dci.is-warn .m { background: #FEF3C7; color: #B45309; }
.jl-dci p { font-size: 14px; line-height: 150%; color: #4B5563; }
.jl-dci b { font-weight: 700; color: var(--jl-ink); }
.jl-dcheck-r { border-left: 1px solid #F1F2F6; padding-left: 24px; }
.jl-dbadge { display: inline-flex; align-items: center; gap: 7px; background: var(--jl-indigo); color: #fff;
             border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; }
.jl-dbadge.is-no { background: #FEF3C7; color: #B45309; }
.jl-dcheck-r p { margin-top: 11px; font-size: 12.5px; line-height: 165%; color: var(--jl-desc); }
.jl-dcta { display: block; margin-top: 13px; text-align: center; background: var(--jl-indigo); color: #fff;
           border-radius: 13px; padding: 14px; font-size: 15px; font-weight: 700; text-decoration: none; }
.jl-dcta:hover { background: var(--jl-indigo-dark); }
.jl-dcheck-note { padding: 0 24px 18px; font-size: 11.5px; color: var(--jl-note); }

/* 근무 조건 · 상세 */
.jl-dh2 { font-size: 15.5px; font-weight: 800; letter-spacing: -.3px; color: var(--jl-ink); }
.jl-dh2 span { margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--jl-note); }
.jl-dh2-m { margin-top: 24px; }
.jl-ddl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: 10px; }
.jl-ddl div { display: flex; align-items: center; justify-content: space-between; gap: 12px;
              padding: 12px 0; border-bottom: 1px solid #F1F2F6; }
.jl-ddl p { font-size: 12.5px; color: var(--jl-note); }
.jl-ddl b { font-size: 14px; font-weight: 700; color: var(--jl-ink); }
.jl-dtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.jl-ddesc { margin-top: 11px; font-size: 15px; line-height: 175%; color: #4B5563; white-space: pre-line; }

/* 같은 사업장의 다른 공고 */
.jl-dother { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 16px 18px;
             border: 1px solid var(--jl-line); border-radius: 16px; text-decoration: none; color: inherit;
             transition: border-color .15s, box-shadow .2s; }
.jl-dother:hover { border-color: var(--jl-light); box-shadow: var(--jl-shadow); }
.jl-dother-b { flex: 1 1 auto; min-width: 0; }
.jl-dother-cat { display: block; font-size: 11.5px; font-weight: 700; color: var(--jl-indigo); }
.jl-dother-t { display: block; margin-top: 3px; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.jl-dother-s { display: block; margin-top: 3px; font-size: 12.5px; color: var(--jl-desc); }
.jl-dother-p { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.jl-dother-p b { font-size: 15px; font-weight: 800; color: var(--jl-indigo); letter-spacing: -.3px; }
.jl-dother-p small { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; color: var(--jl-note); }

/* 지원 절차 — 공고 상세와 <b>구직자 마이페이지</b>가 같이 쓴다(v4.77).
   ⚠️ 마이페이지는 좌측 메뉴가 있는 2단이라 카드가 들어가는 칸이 상세(940px)보다 좁다
      (한 칸 ~215px). 지금 문구는 제목이 한 줄에 들어가지만, 늘릴 때 여기서 한 번 본다. */
.jl-dsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.jl-dstep { background: #fff; border: 1px solid var(--jl-line); border-radius: 18px; padding: 19px 20px 21px; }
.jl-dstep .h { display: flex; align-items: center; justify-content: space-between; }
.jl-dstep .n { width: 29px; height: 29px; border-radius: 10px; background: var(--jl-indigo); color: #fff;
               font-size: 13.5px; font-weight: 800; display: grid; place-items: center; }
.jl-dstep .i { color: var(--jl-indigo); opacity: .35; }
.jl-dstep h3 { margin-top: 12px; font-size: 15.5px; font-weight: 700; letter-spacing: -.3px; color: var(--jl-ink); }
.jl-dstep p { margin-top: 6px; font-size: 13px; line-height: 162%; color: var(--jl-desc); }

.jl-dwarn { display: flex; gap: 11px; margin-top: 14px; background: #F9FAFB; border-radius: 13px;
            padding: 15px 17px; }
.jl-dwarn svg { flex: 0 0 auto; color: #B6BAC6; margin-top: 1px; }
.jl-dwarn p { font-size: 12.5px; line-height: 165%; color: var(--jl-note); }

/* 좁은 화면 — 지도가 글 아래로, 자격 패널의 결론이 아래로 내려간다. */
@media (max-width: 1024px) {
  .jl-dtop { grid-template-columns: minmax(0, 1fr); }
  .jl-dcheck-b { grid-template-columns: minmax(0, 1fr); }
  .jl-dcheck-r { border-left: 0; border-top: 1px solid #F1F2F6; padding-left: 0; padding-top: 18px; }
  .jl-ddl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jl-dsteps { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .jl-dcard { padding: 20px 18px; }
  .jl-dtitle { font-size: 22px; letter-spacing: -.6px; }
  .jl-dpay b { font-size: 24px; }
  .jl-dmap { height: 200px; }
  .jl-ddl { grid-template-columns: minmax(0, 1fr); }
  .jl-dcheck-h { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 18px; }
  .jl-dcheck-b { padding: 18px; }
  .jl-dcheck-note { padding: 0 18px 16px; }
}

/* 상세 오른쪽 칸 — 지도를 못 그리면 이 위치 카드가 그 자리를 지킨다(빈 칸을 남기지 않는다). */
.jl-dside { display: flex; flex-direction: column; }
.jl-dloc { border: 1px solid var(--jl-line); border-radius: 16px; background: #FAFAFD;
           padding: 22px 20px; text-align: left; }
.jl-dloc.is-off { display: none; }
.jl-dloc-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px;
             background: var(--jl-subtle); color: var(--jl-indigo); }
.jl-dloc-h { margin-top: 13px; font-size: 12.5px; font-weight: 700; color: var(--jl-note); }
.jl-dloc-a { margin-top: 5px; font-size: 15px; font-weight: 700; color: var(--jl-ink); letter-spacing: -.2px; }
.jl-dloc-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.jl-dloc-act a, .jl-dloc-act button { border: 1px solid var(--jl-line); background: #fff; border-radius: 9px;
                                      padding: 8px 13px; font: inherit; font-size: 12.5px; font-weight: 600;
                                      color: var(--jl-desc); text-decoration: none; cursor: pointer; }
.jl-dloc-act a:hover, .jl-dloc-act button:hover { border-color: var(--jl-indigo); color: var(--jl-indigo); }
.jl-dname-go { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--jl-indigo);
               text-decoration: underline; text-underline-offset: 3px; }

/* 지도 덮개 — 지도를 누르면 네이버 지도로 나간다. 평소에는 보이지 않다가 hover/focus 에서 뜬다.
   ⚠️ 덮개는 <b>진짜 링크</b>다(키보드·새 탭이 살아 있게). 그래서 지도 조작은 스크립트에서 끈다. */
.jl-dmap-wrap { position: relative; }
.jl-dmap-open { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16px;
                text-decoration: none; background: transparent; transition: background .15s; }
.jl-dmap-open span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px;
                     border-radius: 999px; background: rgba(17, 24, 39, .82); color: #fff;
                     font-size: 13px; font-weight: 700; opacity: 0; transform: translateY(4px);
                     transition: opacity .15s, transform .15s; }
.jl-dmap-open:hover { background: rgba(17, 24, 39, .12); }
.jl-dmap-open:hover span, .jl-dmap-open:focus-visible span { opacity: 1; transform: none; }
.jl-dmap-open:focus-visible { outline: 2px solid var(--jl-indigo); outline-offset: 2px; }
/* 손가락 화면에는 hover 가 없다 — 늘 보이게 둔다(누를 수 있다는 표시가 사라지면 그냥 그림이 된다). */
@media (hover: none) {
  .jl-dmap-open { align-items: end; padding-bottom: 10px; }
  .jl-dmap-open span { opacity: 1; transform: none; font-size: 12.5px; padding: 8px 13px; }
}

/* 지원 방식 3택(v4.79) — 내 이력서 / 간단 작성 / 파일 첨부.
   ⚠️ 라디오를 감춘 <label> 이다. 화면에서 안 보일 뿐 <b>키보드로 고를 수 있어야</b> 하므로
      display:none 이 아니라 opacity:0 으로 두고, focus 는 칸 테두리로 드러낸다. */
.jl-dkinds { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px;
             padding: 5px; background: #F3F4F8; border-radius: 12px; }
.jl-dkind { position: relative; display: grid; place-items: center; padding: 9px 10px;
            border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--jl-desc);
            cursor: pointer; transition: background .15s, color .15s; }
.jl-dkind input { position: absolute; opacity: 0; pointer-events: none; }
.jl-dkind:hover { color: var(--jl-ink); }
.jl-dkind:has(:checked) { background: #fff; color: var(--jl-indigo-dark);
                          box-shadow: 0 1px 3px rgba(17, 24, 39, .10); }
.jl-dkind:has(:focus-visible) { outline: 2px solid var(--jl-indigo); outline-offset: 1px; }
