@charset "utf-8";

/* ==========================================================================
   creator-marketplace 募集をつくる（body.job-new-page）専用の上書き。
   base.css の後に読み込む。案件一覧（jobs.css）・案件詳細（job.css）・
   応募見積（apply.css）と同じ誌面型：黒い地に面を積み、黒い見出し帯／
   象牙の入力面／黄の主行動／ラベンダーの補助行動。
   この画面は最初から最後まで「長い入力フォーム」なので、
   ・どこを入力しているかが分かる章立て（黄の見出し標）
   ・ラベル／補足／エラーの三段が文字の大きさと色で必ず区別できること
   ・下書き保存と確認の2つの行動が、黒帯の中で見失われないこと
   の3点だけを優先し、それ以外の装飾は足さない。
   ここで定義するものは全て .job-new-page 配下に閉じ、他ページには影響しない。
   jobs.css / job.css / apply.css とは別ファイルなので、共通の値は重複して持つ
   （共有の base.css は触らない）。
   画面の中身は page-job-new.js が #repeat-notice / #error-summary /
   #form-host / #confirm-host に組み立てる。JSは変更していないので、
   出てくる要素（.panel / .field / .grid-2 / .grid-3 / .btn-row / .dl /
   .callout / .note / #error-summary-box / #confirm-title）の見え方だけを
   ここで決める。入力欄・エラー文・注意書き・必須表示は一切隠さない。
   ========================================================================== */

.job-new-page {
  --film-bg: #111111;
  --film-bg-deep: #0b0b0b;
  --film-ink: #fafafa;
  --film-ink-dim: rgba(250, 250, 250, 0.62);
  --film-line: rgba(250, 250, 250, 0.14);

  --panel-yellow: #e6d45e;
  --panel-yellow-deep: #d8c449;
  --panel-yellow-pale: #fbf6dd;
  --panel-lavender: #c9b5ef;
  --lavender-pale: #ebe3fa;
  --lavender-wash: #f3eefc;
  --paper-ivory: #f7f4ec;
  --paper-white: #ffffff;

  --panel-ink: #111111;
  --panel-ink-dim: rgba(17, 17, 17, 0.72);
  --panel-line: rgba(17, 17, 17, 0.26);
  --panel-line-strong: rgba(17, 17, 17, 0.45);

  /* エラーは色だけに頼らないが、色自体は明るい面で十分な濃さにする */
  --warn-ink: #8a2216;
  --warn-line: rgba(138, 34, 22, 0.4);
  --warn-bg: #fbeeec;

  --accent: #e6d45e;
  --gutter: 40px;
  --panel-r: 14px;
  --row-pad: clamp(20px, 2.6vw, 32px);
}

/* ---------- 横方向はページの根元で止める ---------- */

/* 他ページと同じ理由でルートの横方向だけを切る。
   この画面には横スクロールさせたい表がないので、内側に
   overflow-x: auto の面は作らない（＝局所スクロールも発生させない）。

   overflow-x: clip を選ぶ理由：
   - clip はスクロールコンテナを作らないので、position: sticky の
     .site-header を壊さない（ルートの overflow はビューポートに伝播し、
     html 自身の使用値は visible に戻る）。
   - overflow-y には一切触れないため、縦スクロールは従来どおり。

   :has() は実際の body.job-new-page にだけ当てるための限定用。
   他ページの html には一切かからない。 */
:root:has(body.job-new-page) {
  overflow-x: clip;
}

body.job-new-page {
  background: var(--film-bg-deep);
  color: var(--film-ink);
  /* :has() 非対応環境の保険。html が visible のままならこの値が
     ビューポートに伝播して同じ結果になり、上の指定が効く環境では
     body 自身が二段目のクリップ面になる。どちらでも横方向だけ。 */
  overflow-x: clip;
}

/* 暗い面／明るい面でフォーカスリングの色を切り替える */
.job-new-page .demo-banner :focus-visible,
.job-new-page .site-header :focus-visible,
.job-new-page .page-head :focus-visible,
.job-new-page #form-host form > .btn-row :focus-visible,
.job-new-page .site-footer :focus-visible {
  outline-color: var(--accent);
}

.job-new-page #app-notices :focus-visible,
.job-new-page #repeat-notice :focus-visible,
.job-new-page #error-summary :focus-visible,
.job-new-page #form-host :focus-visible,
.job-new-page #confirm-host :focus-visible {
  outline-color: var(--panel-ink);
}

/* ---------- 告知帯（文言は据え置き、地味な黒に） ---------- */

.job-new-page .demo-banner {
  background: var(--film-bg-deep);
  color: var(--film-ink-dim);
  border-bottom: 1px solid var(--film-line);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  padding: 7px var(--gutter);
  text-align: left;
}

.job-new-page .demo-banner strong {
  color: var(--film-ink);
}

/* ---------- ヘッダー（一覧・案件詳細・応募と同一の見え方） ---------- */

.job-new-page .site-header {
  background: var(--film-bg);
  border-bottom: 1px solid var(--film-line);
}

.job-new-page .site-header__inner {
  max-width: none;
  padding: 16px var(--gutter);
  gap: var(--s3) var(--s6);
}

.job-new-page .brand {
  color: var(--film-ink);
  align-items: baseline;
  gap: var(--s3) var(--s4);
  flex-wrap: wrap;
}

.job-new-page .brand__wordmark {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3em;
  /* 字間ぶんの右余白を視覚的に打ち消す */
  margin-right: -0.3em;
}

.job-new-page .brand__sub {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.3em;
  color: var(--film-ink-dim);
  margin-right: -0.3em;
}

.job-new-page .site-nav a {
  color: rgba(250, 250, 250, 0.82);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.job-new-page .site-nav a:hover {
  color: var(--film-ink);
  border-bottom-color: rgba(250, 250, 250, 0.45);
}

.job-new-page .site-nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ---------- 骨格：黒い地に面を積む ---------- */

.job-new-page main,
.job-new-page main.main--wide {
  max-width: none;
  margin: 0;
  padding: 0 0 14px;
  display: grid;
  gap: 14px;
  min-width: 0;
}

/* JSが中身を入れていない置き場は行も余白も作らない */
.job-new-page #app-notices:empty,
.job-new-page #repeat-notice:empty,
.job-new-page #error-summary:empty,
.job-new-page #form-host:empty,
.job-new-page #confirm-host:empty {
  display: none;
}

.job-new-page #app-notices:not(:empty) {
  padding: var(--s4) var(--gutter) 0;
}

/* ---------- 見出し帯（黒・入力が主役なので低く抑える） ---------- */

.job-new-page .page-head {
  background: var(--film-bg);
  color: var(--film-ink);
  padding: clamp(16px, 2vw, 24px) var(--gutter) clamp(14px, 1.8vw, 20px);
}

.job-new-page .page-head__inner {
  display: grid;
  gap: clamp(8px, 1.2vw, 12px);
}

.job-new-page .page-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.24em;
  color: var(--film-ink-dim);
}

.job-new-page .page-head__num {
  color: var(--film-ink);
  letter-spacing: 0.14em;
}

/* 細い罫。装飾なので読み上げ対象外。 */
.job-new-page .page-head__rule {
  flex: 0 1 clamp(40px, 8vw, 120px);
  height: 1px;
  background: var(--film-line);
}

.job-new-page .page-head__en {
  color: var(--accent);
}

/* 見出しは1行で収まる大きさに留める（縦を食わせない） */
.job-new-page .page-head__title {
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: var(--film-ink);
  word-break: auto-phrase;
}

/* 「何を決める画面か」の説明。黒地なので線量を落として読ませる。 */
.job-new-page .page-head .lede {
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: var(--film-ink-dim);
  max-width: 68ch;
  word-break: auto-phrase;
}

/* ---------- 現在位置 ---------- */

.job-new-page .page-head__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s3);
  border-top: 1px solid var(--film-line);
  padding-top: 2px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: var(--film-ink-dim);
}

.job-new-page .page-head__crumbs a,
.job-new-page .page-head__crumbs > span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.job-new-page .page-head__crumbs a {
  color: var(--film-ink-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--film-line);
}

.job-new-page .page-head__crumbs a:hover {
  color: var(--film-ink);
  border-bottom-color: rgba(250, 250, 250, 0.45);
}

.job-new-page .page-head__crumbs [aria-current="page"] {
  color: var(--film-ink);
  font-weight: 600;
}

/* ---------- 本文（1本の列。入力に集中させる） ---------- */

.job-new-page .jobnew-body {
  margin-inline: var(--gutter);
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  /* 長大なフォームを1列で流すと行が長くなりすぎるので、上限を置く */
  max-width: 940px;
}

/* 面を積む間隔はグリッドの gap で取る（JS側の余白クラスは無効化） */
.job-new-page .jobnew-body > .section-gap {
  margin-top: 0;
}

/* ---------- 再発注のお知らせ（ラベンダーの面） ---------- */

.job-new-page #repeat-notice .callout,
.job-new-page #repeat-notice .callout--yellow {
  background: var(--lavender-pale);
  border: 0;
  border-left: 5px solid var(--panel-lavender);
  border-radius: 0 var(--panel-r) var(--panel-r) 0;
  padding: clamp(16px, 2vw, 22px) var(--row-pad);
  color: var(--panel-ink);
  font-size: 15px;
  line-height: 1.9;
  display: grid;
  gap: var(--s2);
  min-width: 0;
}

.job-new-page #repeat-notice .note {
  font-size: 13px;
  line-height: 1.9;
  color: var(--panel-ink-dim);
  word-break: auto-phrase;
}

.job-new-page #repeat-notice .note a {
  color: var(--panel-ink);
  font-weight: 700;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

/* ---------- 入力エラーの一覧（送信後だけ出る） ---------- */

.job-new-page #error-summary {
  min-width: 0;
}

.job-new-page #error-summary .callout,
.job-new-page #error-summary .callout--warn {
  background: var(--paper-white);
  border: 1px solid var(--warn-line);
  border-left: 5px solid var(--warn-ink);
  border-radius: 0 var(--panel-r) var(--panel-r) 0;
  padding: clamp(16px, 2vw, 22px) var(--row-pad);
  color: var(--panel-ink);
  font-size: 14px;
  display: grid;
  gap: var(--s2);
  min-width: 0;
}

.job-new-page #error-summary .callout > p {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--warn-ink);
}

.job-new-page #error-summary ul {
  gap: var(--s2);
}

.job-new-page #error-summary li {
  font-size: 14px;
  line-height: 1.9;
  color: var(--panel-ink);
  border-left: 2px solid var(--warn-line);
  padding-left: var(--s3);
  word-break: auto-phrase;
}

/* 一覧から該当欄へ飛ぶリンク。押せる高さを確保する。 */
.job-new-page #error-summary li a {
  display: inline-block;
  min-height: 32px;
  color: var(--warn-ink);
  font-weight: 700;
  text-underline-offset: 4px;
}

.job-new-page #error-summary li a:hover {
  color: var(--panel-ink);
}

/* 送信時にここへフォーカスが飛ぶので、輪郭を必ず出す */
.job-new-page #error-summary-box:focus {
  outline: 3px solid var(--warn-ink);
  outline-offset: 3px;
}

/* ---------- 入力面（象牙の面を章ごとに積む） ---------- */

.job-new-page #form-host,
.job-new-page #form-host form,
.job-new-page #form-host form > .stack--loose {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.job-new-page #form-host .panel {
  background: var(--paper-ivory);
  border: 0;
  border-radius: var(--panel-r);
  padding: clamp(20px, 2.6vw, 30px) var(--row-pad) clamp(20px, 2.4vw, 28px);
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  color: var(--panel-ink);
  min-width: 0;
}

/* 章の見出し。左の黄の標で「ここから次のまとまり」が一目で分かるようにする。 */
.job-new-page #form-host .panel > h2 {
  position: relative;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--panel-ink);
  padding-left: 14px;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--panel-line);
}

.job-new-page #form-host .panel > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 4px;
  height: 1.05em;
  border-radius: 2px;
  background: var(--panel-yellow-deep);
}

/* 1行に2〜3欄並べる箱。狭くなったら base.css の auto-fit で自然に積まれる。 */
.job-new-page #form-host .grid-2,
.job-new-page #form-host .grid-3 {
  gap: clamp(14px, 1.8vw, 20px);
  min-width: 0;
}

/* ---------- 1つの入力欄：ラベル → 補足 → 入力 → エラー ---------- */

.job-new-page #form-host .field {
  gap: 6px;
  min-width: 0;
}

.job-new-page #form-host .field > label {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--panel-ink);
  word-break: auto-phrase;
}

/* 「（必須）」は JS が .note で出す。灰色の補足に見えると必須が伝わらないので、
   黄の小さな札に反転させる（文言はそのまま＝読み上げも変わらない）。 */
.job-new-page #form-host .field > label .note {
  display: inline-block;
  margin-left: var(--s2);
  vertical-align: 2px;
  background: var(--panel-yellow);
  border: 1px solid var(--panel-yellow-deep);
  border-radius: 999px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--panel-ink);
}

.job-new-page #form-host .field__hint {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--panel-ink-dim);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.job-new-page #form-host input[type="text"],
.job-new-page #form-host input[type="number"],
.job-new-page #form-host input[type="date"],
.job-new-page #form-host select,
.job-new-page #form-host textarea {
  background: var(--paper-white);
  color: var(--panel-ink);
  border: 1px solid var(--panel-line-strong);
  border-radius: 8px;
  min-height: 48px;
  min-width: 0;
  max-width: 100%;
  padding: var(--s2) var(--s3);
  margin-top: 2px;
}

.job-new-page #form-host textarea {
  min-height: 112px;
  line-height: 1.85;
}

/* 参考URLは1行1件なので、他の自由記述より深く取る */
.job-new-page #form-host #f-referenceUrls {
  min-height: 132px;
}

.job-new-page #form-host input[type="number"],
.job-new-page #form-host input[type="date"] {
  font-variant-numeric: tabular-nums;
}

/* 金額・本数・尺は桁を揃えて読ませる */
.job-new-page #form-host input[type="number"] {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.job-new-page #form-host select {
  cursor: pointer;
}

.job-new-page #form-host input:focus,
.job-new-page #form-host select:focus,
.job-new-page #form-host textarea:focus {
  border-color: var(--panel-ink);
}

/* エラーのある欄は枠と地色で示す（文言は field__error が持つ） */
.job-new-page #form-host input[aria-invalid="true"],
.job-new-page #form-host select[aria-invalid="true"],
.job-new-page #form-host textarea[aria-invalid="true"] {
  border-color: var(--warn-ink);
  background: var(--warn-bg);
  box-shadow: inset 0 0 0 1px var(--warn-ink);
}

/* hidden 属性で出し入れするので display は触らない */
.job-new-page #form-host .field__error {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--warn-ink);
  word-break: auto-phrase;
}

/* ---------- 行動（黒帯の中に「確認」と「下書き保存」を並べる） ---------- */

/* JS が付ける .section-gap（48px）は空きすぎるので、章の間隔より少し広い程度に */
.job-new-page #form-host form > .btn-row.section-gap {
  margin-top: var(--s5);
}

.job-new-page #form-host form > .btn-row {
  background: var(--film-bg);
  border: 1px solid var(--film-line);
  border-radius: var(--panel-r);
  padding: clamp(18px, 2.2vw, 24px) var(--row-pad);
  gap: var(--s4);
  min-width: 0;
}

/* 黒帯のすぐ下の保存に関する注意書き（黒地なので明るい字で残す） */
.job-new-page #form-host form > .note {
  font-size: 13px;
  line-height: 1.9;
  color: var(--film-ink-dim);
  padding-inline: 2px;
  word-break: auto-phrase;
}

.job-new-page .btn {
  border-radius: 999px;
  min-height: 46px;
  padding-inline: 24px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 明るい面：主行動は黒 */
.job-new-page .btn:not(.btn--secondary):not(.btn--quiet):not(.btn--danger) {
  background: var(--panel-ink);
  color: var(--paper-white);
  border-color: var(--panel-ink);
}

.job-new-page .btn:not(.btn--secondary):not(.btn--quiet):not(.btn--danger):hover {
  background: #000000;
  color: var(--paper-white);
}

.job-new-page .btn--secondary {
  background: transparent;
  color: var(--panel-ink);
  border-color: var(--panel-line-strong);
}

.job-new-page .btn--secondary:hover {
  background: var(--panel-ink);
  color: var(--paper-white);
  border-color: var(--panel-ink);
}

/* 確認へ進む＝この画面の結論。黄で一番強く置く。 */
.job-new-page #form-host button[type="submit"] {
  background: var(--accent);
  color: var(--panel-ink);
  border-color: var(--panel-yellow-deep);
  min-height: 52px;
  padding-inline: 32px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.job-new-page #form-host button[type="submit"]:hover {
  background: #f0e27a;
  color: var(--panel-ink);
}

/* 下書き保存は「途中で離脱しても失わない」ための行動。確認と同格に見せる。
   黄と競わないようにラベンダーの面で、しかし同じ高さ・同じ太さで置く。 */
.job-new-page #form-host form > .btn-row .btn--secondary {
  background: var(--panel-lavender);
  color: var(--panel-ink);
  border-color: var(--lavender-pale);
  min-height: 52px;
  padding-inline: 28px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.job-new-page #form-host form > .btn-row .btn--secondary:hover {
  background: var(--lavender-pale);
  color: var(--panel-ink);
  border-color: var(--paper-white);
}

/* 黒帯の中の戻り導線は控えめに、しかし押せる大きさは残す */
.job-new-page #form-host form > .btn-row .btn--quiet {
  background: transparent;
  color: var(--film-ink-dim);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-left: auto;
}

.job-new-page #form-host form > .btn-row .btn--quiet:hover {
  background: transparent;
  color: var(--film-ink);
}

/* 押せないボタンは消さずに、押せないことが分かる形で残す */
.job-new-page .btn:disabled,
.job-new-page .btn[aria-disabled="true"],
.job-new-page .btn:not(.btn--secondary):not(.btn--quiet):not(.btn--danger):disabled,
.job-new-page .btn:not(.btn--secondary):not(.btn--quiet):not(.btn--danger):disabled:hover {
  background: rgba(17, 17, 17, 0.09);
  color: rgba(17, 17, 17, 0.5);
  border-color: var(--panel-line);
  cursor: not-allowed;
}

/* 黒帯の中で無効化されたときは、黒地に沈まないよう明るい側で出す */
.job-new-page #form-host form > .btn-row .btn:disabled,
.job-new-page #confirm-host .btn:disabled {
  background: rgba(250, 250, 250, 0.16);
  color: rgba(250, 250, 250, 0.62);
  border-color: var(--film-line);
}

/* ---------- 入力内容の確認（象牙の面・読むための組み） ---------- */

.job-new-page #confirm-host {
  min-width: 0;
}

.job-new-page #confirm-host .panel {
  background: var(--paper-ivory);
  border: 0;
  border-radius: var(--panel-r);
  padding: clamp(20px, 2.6vw, 32px) var(--row-pad) clamp(20px, 2.4vw, 28px);
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  color: var(--panel-ink);
  min-width: 0;
}

.job-new-page #confirm-host .panel > h2 {
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.06em;
  color: var(--panel-ink);
  border-bottom: 1px solid var(--panel-line);
  padding-bottom: var(--s3);
}

/* 確認に進んだ直後にここへフォーカスが飛ぶので、輪郭を必ず出す */
.job-new-page #confirm-host #confirm-title:focus {
  outline: 3px solid var(--panel-ink);
  outline-offset: 4px;
}

.job-new-page #confirm-host .note {
  font-size: 13px;
  line-height: 1.9;
  color: var(--panel-ink-dim);
  word-break: auto-phrase;
}

/* 項目名と内容は罫線の行として拾い読みさせる */
.job-new-page #confirm-host .dl {
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0 var(--s5);
  font-size: 14px;
  border-top: 1px solid var(--panel-line);
  min-width: 0;
}

.job-new-page #confirm-host .dl dt,
.job-new-page #confirm-host .dl dd {
  border-bottom: 1px solid var(--panel-line);
  padding: 9px 0;
  min-width: 0;
}

.job-new-page #confirm-host .dl dt {
  font-size: 12px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--panel-ink-dim);
}

/* 参考URLは改行区切りで入るので、改行をそのまま行として見せる */
.job-new-page #confirm-host .dl dd {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--panel-ink);
  font-variant-numeric: tabular-nums;
  white-space: pre-wrap;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* 一覧に追加する＝確認面の結論。黄で置く。 */
.job-new-page #confirm-host .btn-row {
  gap: var(--s3) var(--s4);
  border-top: 1px solid var(--panel-line);
  padding-top: clamp(14px, 1.8vw, 20px);
}

.job-new-page #confirm-host .btn-row > .btn:not(.btn--secondary):not(.btn--quiet):not(.btn--danger) {
  background: var(--accent);
  color: var(--panel-ink);
  border-color: var(--panel-yellow-deep);
  min-height: 52px;
  padding-inline: 32px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.job-new-page #confirm-host .btn-row > .btn:not(.btn--secondary):not(.btn--quiet):not(.btn--danger):hover {
  background: #f0e27a;
  color: var(--panel-ink);
}

/* ---------- 保存状態の警告（layout.js が #app-notices に出す） ---------- */

.job-new-page #app-notices .callout,
.job-new-page #app-notices .callout--warn {
  background: var(--paper-white);
  border: 1px solid var(--warn-line);
  border-left: 5px solid var(--warn-ink);
  border-radius: 0 var(--panel-r) var(--panel-r) 0;
  padding: clamp(16px, 2vw, 22px) var(--row-pad);
  color: var(--panel-ink);
  font-size: 14.5px;
  line-height: 1.9;
  display: grid;
  gap: var(--s3);
  min-width: 0;
}

.job-new-page #app-notices .btn--danger {
  background: var(--paper-white);
  color: var(--warn-ink);
  border-color: var(--warn-ink);
}

.job-new-page #app-notices .btn--danger:hover {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

/* ---------- 通知（トースト） ---------- */

.job-new-page .toast {
  background: var(--film-bg);
  border: 1px solid var(--film-line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  color: var(--film-ink);
  font-size: 14px;
  line-height: 1.8;
}

.job-new-page .toast--error {
  background: var(--warn-ink);
  border-color: var(--warn-ink);
  border-left-color: var(--panel-yellow);
}

/* ---------- フッター ---------- */

.job-new-page .site-footer {
  background: var(--film-bg-deep);
  border-top: 1px solid var(--film-line);
}

.job-new-page .site-footer__inner {
  max-width: none;
  padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(48px, 6vw, 88px);
  display: grid;
  gap: clamp(28px, 4.4vw, 56px);
  color: var(--film-ink-dim);
}

.job-new-page .site-footer__mark {
  font-size: clamp(38px, 11vw, 132px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--film-ink);
}

.job-new-page .site-footer__notes {
  display: grid;
  gap: 12px;
  max-width: 72ch;
  font-size: 13px;
  line-height: 2;
  border-top: 1px solid var(--film-line);
  padding-top: clamp(20px, 3vw, 40px);
}

/* ---------- 中くらいの画面 ---------- */

@media (max-width: 1040px) {
  .job-new-page {
    --gutter: 24px;
  }

  .job-new-page .jobnew-body {
    max-width: none;
  }
}

/* ---------- 狭い画面（375px を含む） ---------- */

@media (max-width: 720px) {
  .job-new-page {
    --gutter: 16px;
    --row-pad: 16px;
  }

  .job-new-page .demo-banner {
    font-size: 11px;
  }

  .job-new-page .site-header__inner {
    padding: 12px var(--gutter);
    gap: var(--s2) var(--s4);
  }

  .job-new-page .brand__wordmark {
    font-size: 16px;
    letter-spacing: 0.22em;
    margin-right: -0.22em;
  }

  .job-new-page .brand__sub {
    font-size: 9px;
    letter-spacing: 0.22em;
    margin-right: -0.22em;
  }

  .job-new-page .site-nav a {
    font-size: 13px;
  }

  .job-new-page .page-head {
    padding: 16px var(--gutter) 14px;
  }

  .job-new-page .page-head__title {
    font-size: 20px;
    letter-spacing: 0.06em;
  }

  .job-new-page .page-head .lede {
    font-size: 13.5px;
    line-height: 1.9;
  }

  /* 2〜3列の行は1列に積む（auto-fit 任せだと端数で潰れる幅が出る） */
  .job-new-page #form-host .grid-2,
  .job-new-page #form-host .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .job-new-page #form-host .panel > h2 {
    font-size: 17px;
    letter-spacing: 0.06em;
  }

  .job-new-page #form-host textarea {
    min-height: 104px;
  }

  .job-new-page #form-host #f-referenceUrls {
    min-height: 120px;
  }

  /* 確認の定義リストはラベルと値を積む */
  .job-new-page #confirm-host .dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .job-new-page #confirm-host .dl dt {
    border-bottom: 0;
    padding: 10px 0 0;
    line-height: 1.7;
  }

  .job-new-page #confirm-host .dl dd {
    padding: 2px 0 10px;
  }

  /* 狭い画面ではボタンを行幅いっぱいに */
  .job-new-page .btn-row > .btn {
    width: 100%;
  }

  .job-new-page #form-host form > .btn-row .btn--quiet {
    margin-left: 0;
  }
}