/* ==========================================================================
   pz-form.css  —  writeWired 入力フォーム Plain描画 既定テーマ  v1 (2026-08-25)
   --------------------------------------------------------------------------
   方針
   - フレームワーク非依存。構造は Java（Drawer/Helper）が pz- クラスで出す。
     幅・並び・色はすべてここで決める。
   - 調整は :root の変数を上書きするだけで済むように寄せる。
   - 丸ごと差し替える場合は、このファイルを読み込まずに同じクラス名で書く。
   - 依存: なし（BS・jQuery不要）
   ========================================================================== */

:root {
  /* 色 */
  --pz-accent:        #2f6fed;   /* フォーカス・主ボタン */
  --pz-accent-text:   #ffffff;
  --pz-text:          #222222;
  --pz-muted:         #6b6b6b;   /* 説明・注記 */
  --pz-border:        #c9c9c9;
  --pz-border-focus:  var(--pz-accent);
  --pz-bg:            #ffffff;   /* 入力欄の背景 */
  --pz-bg-confirm:    #f7f7f7;   /* 確認画面の見出し帯 */
  --pz-required:      #d0342c;
  --pz-error-bg:      #fdecec;
  --pz-error-border:  #e4a3a0;
  --pz-success-bg:    #edf7ee;
  --pz-success-border:#a9d5ad;

  /* 寸法 */
  --pz-font:          system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --pz-font-size:     16px;  /* remだとサイト側の html{font-size:62.5%} 等で縮むため固定値。寸法は全てem=この値基準 */
  --pz-line:          1.6;
  --pz-radius:        4px;
  --pz-gap:           1.25em;   /* 項目間 */
  --pz-gap-inline:    .5em;     /* 部品間（年 月 日 など） */
  --pz-input-height:  2.6em;
  --pz-input-pad-x:   .75em;
  --pz-label-weight:  600;
  --pz-max-width:     100%;      /* フォーム全体の最大幅。狭めたいときに */
  --pz-break:         768px;     /* これ未満は1列 */
}

/* --------------------------------------------------------------------------
   器
   -------------------------------------------------------------------------- */
.pz-form {
  font-family: var(--pz-font);
  font-size: var(--pz-font-size);
  line-height: var(--pz-line);
  color: var(--pz-text);
  max-width: var(--pz-max-width);
  box-sizing: border-box;
}
.pz-form *, .pz-form *::before, .pz-form *::after { box-sizing: inherit; }

.pz-title   { font-size: 1.375em; font-weight: 700; margin: 0 0 .75em; }
.pz-guide   { margin: 0 0 var(--pz-gap); color: var(--pz-muted); }
.pz-heading { font-size: 1.0625em; font-weight: 700; margin: calc(var(--pz-gap) * 1.5) 0 .75em;
              padding-bottom: .375em; border-bottom: 1px solid var(--pz-border); }

.pz-fields { display: flex; flex-direction: column; gap: var(--pz-gap); }

/* 横並び（連続2項目・sidewaydspkbn）。狭い画面では1列 */
.pz-row { display: grid; grid-template-columns: 1fr; gap: var(--pz-gap); }
@media (min-width: 768px) {          /* = --pz-break。メディアクエリは変数を使えないため直書き */
  .pz-row { grid-template-columns: 1fr 1fr; }
  /* 単独の半幅項目（日付・電話・郵便など）。pz-row の中では効かせない */
  .pz-fields > .pz-field--half { max-width: calc(50% - var(--pz-gap) / 2); }
}

/* --------------------------------------------------------------------------
   項目
   -------------------------------------------------------------------------- */
.pz-field { display: flex; flex-direction: column; gap: .375em; min-width: 0; }

.pz-label { font-weight: var(--pz-label-weight); display: flex; align-items: center; flex-wrap: wrap; gap: .5em; }
.pz-required {
  font-size: .75em; font-weight: 600; line-height: 1;
  color: #fff; background: var(--pz-required);
  padding: .25em .5em; border-radius: 2px;
}
.pz-hint { font-size: .8125em; font-weight: 400; color: var(--pz-muted); }
.pz-help { font-size: .8125em; color: var(--pz-muted); margin: 0; }
.pz-form-fld-len-count { font-variant-numeric: tabular-nums; }  /* wwscript.js が数字を入れる span（クラス名・id=count_target_* は既存JS準拠で変えない） */
.pz-static { display: block; min-height: var(--pz-input-height); padding: .5em 0; }  /* 表示のみ項目（値＋hidden） */

/* 項目単位のエラー。サーバ（PagezContentFormSubmitHelper）がエラー項目の器に
   "has-error has-danger" を付ける（テンプレ文字列置換・既存仕様）。名前はBootstrap由来だが
   BSのCSSは不要。Plainではこのクラスをそのまま受ける */
.pz-field.has-error .pz-label { color: var(--pz-required); }
.pz-field.has-error .pz-input { border-color: var(--pz-required); background: var(--pz-error-bg); }
.pz-field.has-error .pz-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pz-required) 20%, transparent); }

/* 入力部品 共通 */
.pz-input {
  font: inherit; color: inherit;
  width: 100%; min-height: var(--pz-input-height);
  padding: 0 var(--pz-input-pad-x);
  background: var(--pz-bg);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
  outline: none;
}
.pz-input:focus { border-color: var(--pz-border-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pz-accent) 20%, transparent); }
.pz-input:disabled, .pz-input[readonly] { background: #f2f2f2; color: var(--pz-muted); }
.pz-textarea { min-height: calc(var(--pz-input-height) * 3); padding: .625em var(--pz-input-pad-x); resize: vertical; }
.pz-select   { appearance: auto; }
.pz-file     { padding: .5em var(--pz-input-pad-x); min-height: 0; }

/* 桁からの最大幅（旧 maxLength→col-md-N 表の移植。狭い画面では効かせない） */
@media (min-width: 768px) {
  .pz-field--text .pz-input[data-length]       { width: 100%; }
  .pz-field--text .pz-input[data-length="1"],
  .pz-field--text .pz-input[data-length="2"],
  .pz-field--text .pz-input[data-length="3"],
  .pz-field--text .pz-input[data-length="4"]   { max-width: 8em; }
  .pz-field--text .pz-input[data-length="5"],
  .pz-field--text .pz-input[data-length="6"],
  .pz-field--text .pz-input[data-length="7"],
  .pz-field--text .pz-input[data-length="8"]   { max-width: 12em; }
  .pz-field--text .pz-input[data-length="9"],
  .pz-field--text .pz-input[data-length="10"],
  .pz-field--text .pz-input[data-length="11"],
  .pz-field--text .pz-input[data-length="12"]  { max-width: 16em; }
  .pz-field--text .pz-input[data-length="13"],
  .pz-field--text .pz-input[data-length="14"],
  .pz-field--text .pz-input[data-length="15"],
  .pz-field--text .pz-input[data-length="16"],
  .pz-field--text .pz-input[data-length="17"]  { max-width: 22em; }
  .pz-field--text .pz-input[data-length="18"],
  .pz-field--text .pz-input[data-length="19"],
  .pz-field--text .pz-input[data-length="20"],
  .pz-field--text .pz-input[data-length="21"]  { max-width: 28em; }
  .pz-field--text .pz-input[data-length="22"],
  .pz-field--text .pz-input[data-length="23"],
  .pz-field--text .pz-input[data-length="24"],
  .pz-field--text .pz-input[data-length="25"]  { max-width: 34em; }
  /* 26桁以上は100% */
}

/* 分割部品（年 月 日／時 分／電話／郵便）— 折り返さない */
.pz-date, .pz-time, .pz-parts {
  display: flex; align-items: center; flex-wrap: nowrap; gap: var(--pz-gap-inline);
}
.pz-date .pz-input, .pz-time .pz-input, .pz-parts .pz-input { width: auto; }
/* 幅指定は上の width:auto より詳細度を下げない（.pz-date__y 単独だと負ける） */
.pz-date .pz-date__y  { width: 6em; }
.pz-date .pz-date__m, .pz-date .pz-date__d, .pz-time .pz-time__h, .pz-time .pz-time__m { width: 4em; }
.pz-parts--tel .pz-parts__n { width: 5em; }
.pz-parts--zip .pz-parts__n:nth-of-type(1) { width: 4.5em; }
.pz-parts--zip .pz-parts__n:nth-of-type(2) { width: 5.5em; }
.pz-date__sep, .pz-time__sep, .pz-parts__sep { color: var(--pz-muted); white-space: nowrap; }
.pz-date__range { color: var(--pz-muted); padding: 0 .25em; }
/* 標準ピッカー（type=date/time）は1本 */
.pz-field--date .pz-input[type="date"]  { width: auto; min-width: 11em; align-self: flex-start; }  /* pz-field(flex列)のstretchで全幅に伸びるのを止める */
.pz-field--time .pz-input[type="time"]  { width: auto; min-width: 7em; align-self: flex-start; }

/* 選択肢（radio / checkbox）
   現行Pagezの挙動に合わせる: 列数指定が 1 → 縦1列、それ以外 → 自由折り返しの横流し（col-auto相当）。
   固定N列グリッドにしたいサイトは data-cols を CSS で拾って上書きする（既定では使わない） */
.pz-choice { border: 0; margin: 0; padding: 0; min-width: 0;
             display: flex; flex-wrap: wrap; gap: .5em 1.25em; }
.pz-choice[data-cols="1"] { flex-direction: column; gap: .375em; }
.pz-choice__item { display: inline-flex; align-items: center; gap: .4em; cursor: pointer; }
.pz-choice__item input { width: 1.05em; height: 1.05em; margin: 0; accent-color: var(--pz-accent); }
/* 固定グリッドにする例（サイト側CSSで）:
   .pz-choice[data-cols="6"] { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); } */

/* --------------------------------------------------------------------------
   メッセージ
   -------------------------------------------------------------------------- */
.pz-messages { background: var(--pz-error-bg); border: 1px solid var(--pz-error-border);
               border-radius: var(--pz-radius); padding: .75em 1em; margin: 0 0 var(--pz-gap); }
.pz-complete { background: var(--pz-success-bg); border: 1px solid var(--pz-success-border);
               border-radius: var(--pz-radius); padding: 1em 1.25em; margin: 0 0 var(--pz-gap); }

/* --------------------------------------------------------------------------
   確認画面
   -------------------------------------------------------------------------- */
.pz-confirm { border: 1px solid var(--pz-border); border-radius: var(--pz-radius); overflow: hidden; }
.pz-confirm__list { margin: 0; display: grid; grid-template-columns: 1fr; }
.pz-confirm__list dt { background: var(--pz-bg-confirm); font-weight: var(--pz-label-weight);
                       padding: .625em 1em; border-top: 1px solid var(--pz-border); }
.pz-confirm__list dd { margin: 0; padding: .625em 1em; }
.pz-confirm__list dt:first-child { border-top: 0; }
@media (min-width: 768px) {
  .pz-confirm__list { grid-template-columns: 12em 1fr; }
  .pz-confirm__list dd { border-top: 1px solid var(--pz-border); }
  .pz-confirm__list dt:first-child + dd { border-top: 0; }
}

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */
.pz-actions { display: flex; flex-wrap: wrap; gap: .75em; justify-content: center; margin-top: calc(var(--pz-gap) * 1.5); }
.pz-btn {
  font: inherit; font-weight: 600; cursor: pointer;
  min-height: var(--pz-input-height); padding: 0 1.75em;
  border-radius: var(--pz-radius); border: 1px solid var(--pz-border);
  background: #fff; color: var(--pz-text);
}
.pz-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--pz-accent) 35%, transparent); outline-offset: 1px; }
.pz-btn--primary { background: var(--pz-accent); border-color: var(--pz-accent); color: var(--pz-accent-text); }
.pz-btn--primary:hover { filter: brightness(.95); }
.pz-actions--inline { justify-content: flex-start; margin-top: .5em; }   /* メルマガ登録など1項目＋ボタン */

/* --------------------------------------------------------------------------
   ログイン／パスワード（用途で器にクラスが付く）
   -------------------------------------------------------------------------- */
.pz-login, .pz-password-remind { --pz-max-width: 28em; margin-inline: auto; }
.pz-link-aside { font-size: .875em; text-align: right; }

/* --------------------------------------------------------------------------
   アクセシビリティ・環境
   -------------------------------------------------------------------------- */
.pz-input:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .pz-form * { transition: none !important; } }
@media print { .pz-actions { display: none; } }

/* --------------------------------------------------------------------------
   テーマ最小例（別ファイルに置く想定。ここはコメント）
   --------------------------------------------------------------------------
   :root {
     --pz-accent: #1a8f5a;    ブランド色
     --pz-radius: 0;          角丸なし
     --pz-label-weight: 500;
     --pz-font: "Noto Sans JP", sans-serif;
     --pz-max-width: 720px;
   }
   .pz-label { background:#dff5ea; display:inline-flex; padding:.15em .5em; }  ラベルを帯にする例
   ========================================================================== */