/* 業種・勤務地モーダル（B1-1c。docs/design/05-job-search-modals.md §3〜5、要件 06 §5.1）
 * 外枠は template-parts/modal/shell.php（variant=search → .c-modal--search）。共通の見た目は components.css の .c-modal を上書きする。 */

/* ---------- §3 共通: 白地 r20・影なし、閉じるは下中央の「とじる」（右上 × は出さない。読み上げ名も「とじる」） ---------- */
.c-modal--search .c-modal__panel {
  max-width: 1120px;
  padding: 40px 60px;
  border-radius: var(--jn-radius-lg);
}
.c-modal--search .c-modal__head {
  position: static;
  padding: 0;
  border: 0;
}
.c-modal--search .c-modal__close { display: none; }
.c-modal--search .c-modal__title {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-bottom: 8px;
  background: linear-gradient(90deg, var(--jn-color-primary-line) 25%, transparent 25% 75%, var(--jn-color-primary-line) 75%) left bottom / 8px 2px round no-repeat; /* 両端を半ダッシュにして周期を幅に合わせる（Figma 描画の実測: 1440 一覧 160–161…1278–1279、規約 PC 370–371…1068–1069） */
  color: var(--jn-color-navy);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: var(--jn-ls-wide);
}
.c-modal--search .c-modal__title::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: var(--jn-color-primary);
  -webkit-mask: url("../img/icons/search.svg") center / contain no-repeat;
  mask: url("../img/icons/search.svg") center / contain no-repeat;
}
.c-modal--search .c-modal__body { padding: 40px 0 0; }

.jn-smodal__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

/* チェック（05 §4・§5: 箱 18 白・枠 1px #CCC・r2、文字との間 8。チェック済み 地 #34BFBD・印 白） */
.jn-check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--jn-color-text-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: var(--jn-ls-wide);
  cursor: pointer;
}
.jn-check__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.jn-check__box {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--jn-color-white);
  border: 1px solid var(--jn-color-border);
  border-radius: 2px;
}
.jn-check__input:checked + .jn-check__box { background: var(--jn-color-secondary); }
.jn-check__input:checked + .jn-check__box::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--jn-color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* 中間（配下の一部だけ）: Figma に無いので枠のみで仮置き（要件 06 §5.1） */
.jn-check__input:indeterminate + .jn-check__box { border: 2px solid var(--jn-color-secondary); }
.jn-check__input:focus-visible + .jn-check__box { outline: 2px solid var(--jn-color-focus); outline-offset: 2px; }
/* 業種の行の当たり判定（B1 UX 2 回目 M: SP で高さ 19）: 見た目は変えず、項目間 28 の半分ずつ ::before で上下に広げる（18+28=46） */
.jn-smodal__choices .jn-check::before { content: ""; position: absolute; inset: -14px 0; }

/* ---------- §4 業種: 横並び WRAP（項目間 28・行間 28） ---------- */
.jn-smodal__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ボタン（240×48・r999。はずす＝ピンク、確定＝ティール） */
.jn-smodal__actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.jn-smodal__btn {
  --jn-btn-color: var(--jn-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 240px;
  height: 48px;
  padding: 0 20px;
  background: var(--jn-color-white);
  border: 1px solid var(--jn-btn-color);
  border-radius: var(--jn-radius-pill);
  color: var(--jn-btn-color);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--jn-duration-hover);
}
.jn-smodal__btn--apply { --jn-btn-color: var(--jn-color-secondary); }
.jn-smodal__btn:hover { background: var(--jn-color-primary-soft); }
.jn-smodal__btn--apply:hover { background: rgba(52, 191, 189, 0.1); }
.jn-smodal__btn:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 2px; }
.jn-smodal__btn .jn-icon { flex: none; }
.jn-smodal__btn-arrow { width: 10px; height: 20px; }
.jn-smodal__btn-icon { width: 24px; height: 24px; }
.jn-smodal__btn-icon path { fill: currentColor; }
/* PC は文字を左・アイコンを右の両端寄せ（Figma 225:78553 の描画: 文字は枠の左端+37、矢印の描画は右端-39、虫眼鏡は右端-36）。SP の帯は中央寄せのまま */
@media (min-width: 768px) {
  #jn-modal-industry .c-modal__panel { padding-top: 68px; } /* Figma 業種 PC は見出し上端 y72（勤務地は y45 で共通の 40 と一致）。pixel-A5 #1 */
  .jn-smodal__btn { justify-content: space-between; padding: 0 36px; }
  .jn-smodal__btn--clear { padding-right: 39px; }
  .jn-smodal__btn--apply { padding-right: 35px; }
}

/* とじる（66×22、500 14/22.4 #0387A8、× 16、下線 1px） */
.jn-smodal__close {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 40px auto 0;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--jn-color-contact);
  color: var(--jn-color-contact);
  font-size: 14px;
  font-weight: 500;
  line-height: 22.4px;
  cursor: pointer;
}
.jn-smodal__close-icon { width: 16px; height: 16px; }
/* PC: Figma は下線込みで 22（勤務地の下線 y725・パネル 766。pixel-A5#L6b）。行送り 22.4＋下線 1 だと 23.4 になるので 21＋1 */
@media (min-width: 768px) {
  .jn-smodal__close { line-height: 21px; }
}
.jn-smodal__close-icon path { fill: currentColor; stroke: currentColor; }
.jn-smodal__close:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 2px; }

/* ---------- §5 勤務地: 左 都道府県 224（＋隙間 8＋スクロールバー 16）、間 20、右 700（＋隙間 16＋16）、高さ 460 ---------- */
.jn-smodal__loc {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.jn-smodal__prefs,
.jn-smodal__pane {
  height: 460px;
  overflow-y: scroll;
  overscroll-behavior: contain;
}
/* 行とスクロールバーの隙間は padding-right で作る（スクロールバーは padding の外側に付く） */
.jn-smodal__prefs {
  flex: none;
  width: 248px;
  margin: 0;
  padding: 0 8px 0 0;
  list-style: none;
  border-radius: 10px;
}
.jn-smodal__prefs::-webkit-scrollbar,
.jn-smodal__pane::-webkit-scrollbar { width: 16px; }
.jn-smodal__prefs::-webkit-scrollbar-track,
.jn-smodal__pane::-webkit-scrollbar-track { background: #FAFAFA; border-radius: 20px; }
.jn-smodal__prefs::-webkit-scrollbar-thumb,
.jn-smodal__pane::-webkit-scrollbar-thumb {
  /* つまみは 8 幅でレール 16 の中央（左右 4 は透明の枠でレールの色を見せる） */
  background: var(--jn-color-border) padding-box;
  border: solid transparent;
  border-width: 0 4px;
  border-radius: 20px;
}
@supports not selector(::-webkit-scrollbar) {
  .jn-smodal__prefs, .jn-smodal__pane { scrollbar-color: var(--jn-color-border) #FAFAFA; }
}
.jn-smodal__pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 46px;
  padding: 0 26px 0 24px; /* 矢印の右 26（Figma 描画 PC x250–254・SP x257–259。pixel-A5#L4） */
  background: #FAFAFA;
  border: 1px solid var(--jn-color-white);
  color: var(--jn-color-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  letter-spacing: var(--jn-ls-wide);
  text-align: left;
  cursor: pointer;
}
/* 行の間の白線は Figma 1px（PC y161・SP も 1px）。上下の罫線が重なって 2px になるので 2 行目以降は上罫線を消し、
   代わりに上 1px の余白で文字位置と行ピッチ 46 を保つ（pixel-A5#L3） */
.jn-smodal__prefs > li + li .jn-smodal__pref { border-top: 0; padding-top: 1px; }
.jn-smodal__pref:hover { background: var(--jn-color-primary-soft); }
/* 選択中の行・選択ありの行: Figma に表現が無いので仮置き（地 #CDE7EE／文字 ティール太字） */
.jn-smodal__pref.is-current { background: var(--jn-color-corp-bg); }
.jn-smodal__pref.is-selected .jn-smodal__pref-name { color: var(--jn-color-secondary); font-weight: 700; }
.jn-smodal__pref:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: -3px; }
/* 矢印は文字と同じ #555（素材はピンク固定なので塗りを上書き）。10×20 の原寸で描く（Figma 6×10） */
.jn-smodal__pref-icon { flex: none; width: 10px; height: 20px; }
.jn-smodal__pref-icon path { fill: currentColor; }

.jn-smodal__pane-wrap { flex: 1 1 auto; min-width: 0; max-width: 732px; }
.jn-smodal__pane { padding-right: 16px; }
.jn-smodal__pane:focus { outline: none; }
.jn-smodal__pane:focus-visible { outline: 2px solid var(--jn-color-focus); }
.jn-smodal__back { display: none; }

.jn-smodal__bar {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 10px 20px;
  background: #FAFAFA;
  border-radius: 4px;
  color: var(--jn-color-text-muted); /* Figma #666（市区町村・業種のチェック文字と同じ）。pixel-A5 #2 */
}
.jn-smodal__bar .jn-check__input { top: 10px; left: 20px; }
.jn-smodal__bar--all { background: var(--jn-color-corp-bg); } /* 文字は他の帯と同じ #666（Figma どおり。AA 理由の #555 はやめた＝ユーザー決定 9/30。pixel-A5#2） */
.jn-smodal__group { margin-top: 28px; }
.jn-smodal__cities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 207px)); /* 1200〜は Figma の 207 固定と同じ。狭い幅では右枠からはみ出さないよう縮める */
  gap: 16px 20px;
  margin: 16px 0 0;
  padding: 0 20px;
  list-style: none;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .jn-smodal__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.jn-smodal__cities > li,
.jn-smodal__choices > li { display: flex; }
.jn-smodal__msg { padding: 20px; color: var(--jn-color-text-muted); font-size: 14px; line-height: 1.6; }
.jn-smodal__msg--error { color: var(--jn-color-primary); }
.jn-smodal__retry {
  margin-top: 12px;
  padding: 8px 20px;
  background: var(--jn-color-white);
  border: 1px solid var(--jn-color-primary);
  border-radius: var(--jn-radius-pill);
  color: var(--jn-color-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* ---------- SP（〜767）: 335 幅・r20 のカード（要件と食い違い #7 は Figma 優先＝D1） ---------- */
@media (max-width: 767px) {
  .c-modal--search.c-modal--panel { padding: 20px; }
  .c-modal--search .c-modal__panel {
    height: auto;
    max-height: calc(100dvh - 40px);
    padding: 40px 20px;
    border-radius: var(--jn-radius-lg);
  }
  .c-modal--search .c-modal__title { font-size: 18px; line-height: 25.2px; }
  .c-modal--search .c-modal__title::before { width: 20px; height: 20px; }

  .jn-smodal__choices { flex-direction: column; }
  .jn-smodal__choices .jn-check { font-size: 12px; line-height: 15.6px; }
  .jn-smodal__actions { flex-direction: column; align-items: center; }
  .jn-smodal__btn { width: 100%; max-width: 295px; }
  .jn-smodal--location .jn-smodal__btn--clear { font-size: 14px; }
  .jn-smodal--location .jn-smodal__btn--apply { font-size: 16px; }

  /* 勤務地は 2 段: 1 段目＝都道府県リスト、2 段目＝市区町村（「都道府県一覧へ戻る」は D1 で追加） */
  .jn-smodal__loc { display: block; }
  /* 行 271＋隙間 8＋スクロールバー 16（Figma 225:78435: 行 x20〜291、レール x299〜315） */
  .jn-smodal__prefs { width: 295px; max-width: 100%; }
  .jn-smodal__pane-wrap { max-width: none; }
  .jn-smodal--location[data-jn-step="pref"] .jn-smodal__pane-wrap,
  .jn-smodal--location[data-jn-step="pane"] .jn-smodal__prefs { display: none; }
  .jn-smodal__pane { height: auto; overflow: visible; padding-right: 0; }
  .jn-smodal__pane:focus-visible { outline: none; } /* Figma 225:78461 に枠無し。2 段目のフォーカスは「都道府県一覧へ戻る」に置く */
  .jn-smodal__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 4px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--jn-color-contact);
    color: var(--jn-color-contact);
    font-size: 14px;
    font-weight: 500;
    line-height: 22.4px;
    cursor: pointer;
  }
  .jn-smodal__back-icon { width: 10px; height: 20px; transform: scaleX(-1); }
  .jn-smodal__back-icon path { fill: currentColor; }
  .jn-smodal__back:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 2px; }
  .jn-smodal__cities { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
  .jn-smodal__city { font-size: 12px; line-height: 15.6px; }

  /* 当たり判定 44px（B1 UX M1）。見た目の行は変えず、行間 16 の半分ずつ ::before で広げる */
  .jn-smodal__city { min-height: 28px; }
  .jn-smodal__city::before { content: ""; position: absolute; inset: -8px 0; }
  /* 帯の見た目は Figma の 38（225:78461）。当たり判定だけ上下 3 ずつ広げて 44（pixel-C3 M2） */
  .jn-smodal__bar::before { content: ""; position: absolute; inset: -3px 0; }
  .jn-smodal__group { margin-top: 16px; }
  .jn-smodal__bar--all + .jn-smodal__group { margin-top: 20px; } /* 「すべて」→最初の地域 19（pixel-C3 M3） */
  /* 「北海道すべて」と地域バーはパネルの端まで（Figma 225:78461: x0〜335）。チェックは x20 で市区町村の列とそろう */
  .jn-smodal__bar { width: calc(100% + 40px); margin-inline: -20px; border-radius: 0; }

  /* 下の帯（チェックをはずす／確定（N）／とじる）はパネルの下端に固定（B1 UX H1: 北海道の 2 段目で確定が 7,000px 下にあった）。
     高さ 120 以内に収めるため、2 つのボタンは横並び・高さ 44。 */
  /* scroll-padding: Tab で移ったチェックが帯（高さ約 91）の下に隠れないよう、帯の分だけ上で止める */
  .c-modal--search .c-modal__panel { padding-bottom: 0; scroll-padding-bottom: 112px; }
  .jn-smodal__foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 24px -20px 0;
    padding: 12px 20px calc(8px + env(safe-area-inset-bottom));
    background: var(--jn-color-white);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  }
  .jn-smodal__foot .jn-smodal__actions { flex-direction: row; align-items: stretch; gap: 8px; margin-top: 0; }
  .jn-smodal__foot .jn-smodal__btn { width: auto; max-width: none; height: 44px; padding: 0 12px; gap: 6px; }
  .jn-smodal__foot .jn-smodal__btn--clear { flex: 0 0 auto; font-size: 14px; }
  .jn-smodal__foot .jn-smodal__btn--apply { flex: 1 1 0; min-width: 0; font-size: 16px; }
  .jn-smodal__foot .jn-smodal__btn-arrow { display: none; }
  .jn-smodal__foot .jn-smodal__btn-icon { width: 20px; height: 20px; }
  .jn-smodal__foot .jn-smodal__close { position: relative; margin-top: 4px; }
  .jn-smodal__foot .jn-smodal__close::before { content: ""; position: absolute; inset: -11px -12px; }
}
/* 360 未満は「確定（27）」が虫眼鏡込みで収まらない（320 で中身 100 > 内側 92） */
@media (max-width: 359px) {
  .jn-smodal__foot .jn-smodal__btn { padding: 0 8px; }
  .jn-smodal__foot .jn-smodal__btn-icon { display: none; }
}