/* public/signup.css
 *
 * 公開の申し込みフォーム（public/signup.html）専用スタイル（T5・F29-1〜F29-11・S270）。
 *
 * 🔴 style.css はlinkしない（意図的・PMO承認済み）。理由: style.css は複数タスクが並行編集中の
 * 共有コンポーネントファイルで、linkすると相手の変更がこのページに意図せず波及し／このページの
 * 追記が相手の作業と衝突する（P3非対称実装の温床）。前例: automation.css も同じ理由で自己完結。
 * 見た目を「地続き」にするため（A4）、tokens.css は直接linkして変数を共有し、コンポーネント値
 * （.inp/.fld/.btn--pri.lg.w100 等）は style.css の実測値をそのままミラーしている
 * （padding 8px 10px・font-size 12.5px・border-radius 3px・ボタン高さ40px 等。
 * 2026-08-06 PMO裁定: ログイン画面と並べて視覚的に揃っているかで判定する）。
 */

/* tokens.css の body{overflow:hidden} はSPA（index.html）前提。このページは縦に長い
   通常の1画面完結ページなので、ブラウザの標準スクロールに戻す。 */
html, body { height: auto; }
body { overflow: visible; }

.su-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

/* ---------------------------------------------------------------------
   ヘッダー（ログイン画面の .logomark と同一寸法で揃える・2026-08-06 PMO裁定③）
   --------------------------------------------------------------------- */
.su-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.su-brand { display: flex; align-items: center; gap: 11px; }
/* 2026-08-21 ロゴ差し替え: ドット絵ロゴ案1（担当者）。imgタグに変更したためグラデ背景・
   回転四角(i要素)の描画は不要。マークは img[src="/img/logo/mark.svg"] を直接 .su-mark に付ける。 */
/* 2026-08-21 W10修正（検品1-①+5-①）: 16グリッド設計のドット絵を16の整数倍(32px=2倍)に統一。 */
.su-mark {
  width: 32px; height: 32px; flex: none; display: block; image-rendering: pixelated;
}
.su-nm { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--nvl-ink); }
.su-hdActions { display: flex; align-items: center; gap: 18px; }

/* リンク調ボタン（style.css .linkbtn の実測値ミラー） */
.su-linklike {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--nvl-blue); font-size: 11.5px; font-weight: 500; letter-spacing: .04em;
  text-decoration: underline; text-underline-offset: 3px;
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.su-linklike:hover { color: var(--nvl-navy); text-decoration: underline; }

/* ---------------------------------------------------------------------
   通知（F29-1 青・自由記述の要約バナー 赤）
   --------------------------------------------------------------------- */
.su-notice {
  border-radius: 4px;
  padding: 13px 16px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.75;
}
.su-notice--blue {
  background: var(--nvl-tint-blue);
  border: 1px solid var(--edit-line);
  color: var(--nvl-text);
}
.su-notice p { margin: 0; }

.su-alert {
  border-radius: 4px;
  padding: 13px 16px;
  margin-bottom: 18px;
  background: var(--err-bg);
  border: 1px solid var(--err-line);
}
.su-alert__msg { margin: 0; font-size: 13px; font-weight: 700; color: var(--err); }
.su-alert__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.su-alert__item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 2px 0;
  font-size: 12.5px; color: var(--err); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; font-family: inherit;
}
.su-alert__item:hover { color: var(--nvl-navy); }

/* ---------------------------------------------------------------------
   2ペインレイアウト（F29-11①②）
   --------------------------------------------------------------------- */
.su-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
.su-layout > * { min-width: 0; }

.su-panel {
  border: 1px solid var(--nvl-border);
  border-radius: 4px;
  background: var(--nvl-white);
  padding: 28px;
  min-width: 0;
}

/* ---------------------------------------------------------------------
   フォーム部品（style.css .fld/.inp/.hint/.inline-err の実測値ミラー）
   --------------------------------------------------------------------- */
.su-group { margin-bottom: 22px; }
.su-group:last-of-type { margin-bottom: 26px; }
.su-groupTitle {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
  color: var(--nvl-text); margin-bottom: 14px;
}
.su-groupNum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--nvl-gradient); color: var(--nvl-white);
  font-family: var(--nvl-font-en); font-size: 10.5px; font-weight: 600;
  flex: none;
}

.su-fld { margin-bottom: 15px; min-width: 0; }
.su-fld > label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 6px;
}
.su-optional {
  font-size: 9.5px; font-weight: 500; letter-spacing: .04em;
  color: var(--muted); background: var(--nvl-bg-light);
  border-radius: 128px; padding: 1px 7px; letter-spacing: .06em;
}

.su-inp {
  width: 100%;
  border: 1px solid var(--nvl-border);
  border-radius: 3px;
  padding: 8px 10px;
  font-size: 12.5px;
  background: var(--nvl-white);
  font-family: var(--nvl-font-ja);
  min-width: 0;
}
.su-inp:focus { outline: none; border-color: var(--nvl-blue); }
.su-inp--num { font-family: var(--nvl-font-en); font-variant-numeric: tabular-nums; }
.su-select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
.su-select:invalid { color: var(--muted); }

.su-hint { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.65; }
.su-hintLink { color: var(--nvl-blue); text-decoration: underline; text-underline-offset: 2px; }
.su-hintLink:hover { color: var(--nvl-navy); }
.su-inlineErr { font-size: 11px; color: var(--err); margin-top: 5px; line-height: 1.6; }

.su-fld.has-error .su-inp,
.su-fld.has-error .su-select { border-color: var(--err); background: var(--err-bg); }

.su-freeMailNotice {
  font-size: 11px; color: var(--warn); background: var(--warn-bg);
  border: 1px solid var(--warn-line); border-radius: 3px;
  padding: 8px 10px; margin-top: 8px; line-height: 1.65;
}

.su-twoCol { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.su-twoCol > * { min-width: 0; }

/* ---------------------------------------------------------------------
   送信ボタン（style.css .btn.btn--pri.lg.w100 の実測値ミラー）
   --------------------------------------------------------------------- */
.su-submitBtn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: 40px;
  padding: 0 22px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: var(--nvl-gradient);
  color: var(--nvl-white);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  margin-top: 4px;
}
.su-submitBtn:hover:not(:disabled) { filter: brightness(1.06); }
.su-submitBtn:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------------
   右パネル（紹介・個人事業主向け案内）
   --------------------------------------------------------------------- */
.su-introPanel { background: var(--nvl-bg-light); border-color: var(--nvl-border); }
.su-introLead { margin: 0; font-size: 13px; line-height: 1.85; color: var(--nvl-text); }
.su-introDivider { height: 1px; background: var(--nvl-border); margin: 20px 0; }
.su-personalBlock p { margin: 0 0 10px; font-size: 12px; line-height: 1.75; color: var(--muted); }

/* ---------------------------------------------------------------------
   送信完了（F29-12）
   --------------------------------------------------------------------- */
.su-doneCard { max-width: 640px; margin: 0 auto; padding: 40px; }
.su-doneTitle { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.su-doneLead { margin: 0 0 22px; font-size: 13px; line-height: 1.85; color: var(--nvl-text); }
.su-receipt {
  display: flex; align-items: baseline; gap: 12px;
  background: var(--nvl-tint-blue); border: 1px solid var(--edit-line); border-radius: 4px;
  padding: 14px 18px; margin-bottom: 22px;
}
.su-receipt__label { font-size: 10.5px; font-weight: 500; letter-spacing: .1em; color: var(--muted); }
.su-receipt__value { font-size: 17px; font-weight: 600; color: var(--nvl-blue); }

.su-doneSummary {
  display: grid; grid-template-columns: 130px 1fr;
  row-gap: 10px; column-gap: 14px;
  margin: 0 0 22px; padding: 18px 0; border-top: 1px solid var(--nvl-border);
}
.su-doneSummary dt { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; color: var(--muted); }
.su-doneSummary dd { margin: 0; font-size: 12.5px; color: var(--nvl-text); word-break: break-word; min-width: 0; }
.su-doneSupport { margin: 0; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------------
   モーダル（style.css .mbg/.modal の骨格をミラー）
   --------------------------------------------------------------------- */
.su-modalBg {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 8, 8, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.su-modal {
  /* #D5D5D5 は style.css .modal の実測値そのまま（tokens.css にこの色専用の変数は無い） */
  background: var(--nvl-white); border: 1px solid #D5D5D5; border-radius: 4px;
  width: 100%; max-width: min(92vw, 480px);
  max-height: 82vh; overflow: auto;
}
.su-modalHead {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--nvl-border);
}
.su-modalHead h2 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: .05em; }
.su-modalClose {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  background: none; border: none; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1;
}
.su-modalClose:hover { color: var(--nvl-ink); }
.su-modalBody { padding: 19px 20px; }
.su-modalBody p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.8; color: var(--nvl-text); }
.su-modalBody p:last-child { margin-bottom: 0; }
.su-modalBody a { color: var(--nvl-blue); }

/* ---------------------------------------------------------------------
   375px幅対応（F29-11。N9の意図的な例外）
   --------------------------------------------------------------------- */
@media (max-width: 680px) {
  .su-wrap { padding: 20px 16px 48px; }
  .su-layout { grid-template-columns: 1fr; gap: 16px; }
  .su-twoCol { grid-template-columns: 1fr; gap: 0; }
  .su-panel { padding: 20px; }
  .su-doneCard { padding: 24px; }
  .su-doneSummary { grid-template-columns: 100px 1fr; }
  .su-hd { gap: 10px; }
}