/* 応募確認モーダル（B3。04-frontend §3.5 手順 2。template-parts/modal/apply.php）
 * 外枠は検索モーダル（search-modal.css の .c-modal--search、05 §3）と同じ見た目。見出しアイコンだけ虫眼鏡→鉛筆。
 * ボタン（.jn-smodal__btn）・並び（.jn-smodal__actions）は search-modal.css のものを使う（求人詳細では両方読まれる）。 */

.c-modal--apply .c-modal__panel {
  max-width: 720px;
  padding: 40px 60px;
  border-radius: var(--jn-radius-lg);
}
.c-modal--apply .c-modal__head {
  position: static;
  padding: 0;
  border: 0;
}
/* 右上 × は出さない（検索モーダルと同じ。閉じるは「キャンセル」「閉じる」・Esc・背景） */
.c-modal--apply .c-modal__close { display: none; }
.c-modal--apply .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--apply .c-modal__title::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: var(--jn-color-primary);
  -webkit-mask: url("../img/icons/pencil.svg") center / contain no-repeat;
  mask: url("../img/icons/pencil.svg") center / contain no-repeat;
}
/* 完了ステップだけ見出しアイコンをチェックに（apply.js が dialog に .is-done を付ける） */
.c-modal--apply.is-done .c-modal__title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
.c-modal--apply .c-modal__body { padding: 32px 0 0; }

.jn-amodal { font-size: 14px; line-height: 1.6; }
.jn-amodal__en { display: block; color: var(--jn-color-text-muted); font-size: 12px; font-weight: 400; }
.jn-amodal__lead { margin: 0 0 16px; color: var(--jn-color-text-muted); font-size: 13px; }

.jn-amodal__job { display: grid; gap: 8px; margin: 0; }
.jn-amodal__row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.jn-amodal__row dt { color: var(--jn-color-navy); font-weight: 700; }
.jn-amodal__row dt .jn-amodal__en { display: inline; margin-left: 4px; }
.jn-amodal__row dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.jn-amodal__resume {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--jn-color-primary-soft);
  border-radius: var(--jn-radius-sm);
}
.jn-amodal__current, .jn-amodal__need { margin: 0; }
.jn-amodal__file { font-weight: 700; overflow-wrap: anywhere; }
.jn-amodal__need { color: var(--jn-color-primary); font-weight: 700; }
.jn-amodal__need[hidden] { display: none; }
/* 差し替えで上書きされる登録済みの履歴書の注意（PDF を選んだときだけ）。英語は別行 */
.jn-amodal__replace-note {
  margin: 4px 0 0;
  color: var(--jn-color-primary);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.jn-amodal__replace-note[hidden] { display: none; }
.jn-amodal__replace-note .jn-amodal__en { color: inherit; font-weight: 400; }
/* 押せる範囲は 44px のまま、上下の余白（文字の上下 約 11px）を負の margin で詰めて枠の下が空きすぎないようにする */
.jn-amodal__replace {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 44px;
  margin: -6px 0 -11px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--jn-color-contact);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
.jn-amodal__replace .jn-amodal__en { display: inline; color: inherit; }
.jn-amodal__replace:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 2px; }

.jn-amodal__upload { margin-top: 12px; }
.jn-amodal__upload[hidden] { display: none; }
.jn-amodal__label { display: block; margin-bottom: 6px; color: var(--jn-color-navy); font-weight: 700; }
.jn-amodal__req {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  background: var(--jn-color-primary);
  border-radius: 4px;
  color: var(--jn-color-white);
  font-size: 11px;
  line-height: 18px;
  vertical-align: 1px;
}
.jn-amodal__req[hidden] { display: none; }
.jn-amodal__input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px;
  background: var(--jn-color-white);
  border: 1px solid var(--jn-color-border);
  border-radius: var(--jn-radius-sm);
  font: inherit;
}
.jn-amodal__input.is-error { border-color: var(--jn-color-primary); }
.jn-amodal__input:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 2px; }
.jn-amodal__picked { margin: 6px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.jn-amodal__picked:empty { display: none; }

.jn-amodal__error {
  margin-top: 20px;
  padding: 12px 16px;
  background: #FFF0F5;
  border: 1px solid var(--jn-color-primary);
  border-radius: var(--jn-radius-sm);
  color: var(--jn-color-primary);
  font-weight: 700;
}
.jn-amodal__error[hidden] { display: none; }
.jn-amodal__error-text { margin: 0; white-space: pre-line; }
.jn-amodal__error .jn-amodal__en { margin-top: 2px; color: inherit; font-weight: 500; }
.jn-amodal__reload { margin-top: 8px; }

.jn-amodal__actions { margin-top: 32px; }
/* 応募する＝塗り（ページの応募ボタンと同じピンク）。キャンセルは検索モーダルの「はずす」と同じ線ボタン */
.jn-amodal__submit {
  background: var(--jn-color-primary);
  color: var(--jn-color-white);
}
.jn-amodal__submit:hover { background: var(--jn-color-primary); opacity: 0.85; }
.jn-amodal__submit .jn-smodal__btn-icon path { fill: currentColor; }
.jn-amodal__submit:disabled {
  background: var(--jn-color-muted-btn);
  border-color: var(--jn-color-muted-btn);
  opacity: 1;
  cursor: not-allowed;
}
/* 送信中のキャンセル（閉じても応募は止まらないので押せなくする） */
.jn-amodal__actions [data-jn-amodal-cancel]:disabled { opacity: 0.5; cursor: not-allowed; }
.jn-amodal__actions .jn-amodal__en { display: inline; margin-left: 6px; color: inherit; font-size: 12px; }

/* 送信中のスピナー（aria-busy の間だけ。送信アイコンと入れ替える） */
.jn-amodal__spinner { display: none; }
.jn-amodal__submit[aria-busy="true"] .jn-amodal__spinner {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: var(--jn-color-white);
  border-radius: 50%;
  animation: jn-amodal-spin 0.8s linear infinite;
}
.jn-amodal__submit[aria-busy="true"] .jn-smodal__btn-icon { display: none; }
@keyframes jn-amodal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .jn-amodal__submit[aria-busy="true"] .jn-amodal__spinner { animation-duration: 2s; }
}

/* 終了ステップの本文（見出しに結果、ここは次の案内）。英語は別行 */
.jn-amodal__done {
  margin: 8px 0 0;
  color: var(--jn-color-navy);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  white-space: pre-line;
}
.jn-amodal__done .jn-amodal__en { margin-top: 6px; font-size: 13px; }
.jn-amodal__done:focus { outline: none; }
/* 送信中にフォーカスを退避させる見出し（tabindex=-1、操作対象ではないので枠は出さない） */
.c-modal--apply .c-modal__title:focus { outline: none; }

/* ---------- SP（〜767）: 検索モーダルと同じ 335 幅・r20 のカード ---------- */
@media (max-width: 767px) {
  .c-modal--apply.c-modal--panel { padding: 20px; }
  .c-modal--apply .c-modal__panel {
    height: auto;
    max-height: calc(100dvh - 40px);
    padding: 40px 20px;
    border-radius: var(--jn-radius-lg);
  }
  .c-modal--apply .c-modal__title { font-size: 18px; line-height: 25.2px; }
  .c-modal--apply .c-modal__title::before { width: 20px; height: 20px; }
  .jn-amodal__row { grid-template-columns: 1fr; gap: 0; }
  .jn-amodal__resume { padding: 12px 16px; }
  .jn-amodal__actions { flex-direction: column-reverse; align-items: center; gap: 12px; }
  .jn-amodal__actions .jn-smodal__btn { width: 100%; max-width: 295px; }
}