/* =========================================
   pages/auth.css
   Auth pages (login / signup / password reset)

   POLICY
   - layout / spacing only (基本)
   - help / helptext（但し書き）は補助情報として最小限の調整を許可
   - Keep selectors scoped to .page-auth to avoid side effects
========================================= */

/* コンテンツ幅（フォームが広すぎないように） */
.page-auth .main-frame{
    max-width: 980px;
  }
  
  /* フォーム箱：行間を一定に */
  .page-auth .form-box{
    display: grid;
    row-gap: 14px;
    max-width: 860px;
  }
  
  /* ラベル左 + 入力右（横並び） */
  .page-auth .form-box .form-field{
    display: grid;
    grid-template-columns: 140px 1fr;
    column-gap: 14px;
    row-gap: 8px;
    align-items: center;
  }
  
  /* label の余白で縦ズレるのを抑止 */
  .page-auth .form-box .form-field > label{
    margin: 0;
  }
  
  /* 入力は右カラムで伸ばす */
  .page-auth .form-box .form-field > input,
  .page-auth .form-box .form-field > select,
  .page-auth .form-box .form-field > textarea{
    width: 100%;
    min-width: 0;
  }
  
  /* -----------------------------------------
     Help / Helptext / Error placement & tuning
     - 右カラムに寄せる
     - 「この項目は必須です」「password rules」等を同一扱い
  ----------------------------------------- */
  
  /* help / errors は右カラムへ */
  .page-auth .form-box .form-field > .help,
  .page-auth .form-box .form-field > .helptext,
  .page-auth .form-box .form-field > ul,
  .page-auth .form-box .form-field > .text-danger,
  .page-auth .form-box .form-field > .errorlist{
    grid-column: 2;
  }
  
  /* 但し書き・補助テキスト（必須です / password rules 共通） */
  .page-auth .form-box .form-field > .help,
  .page-auth .form-box .form-field > .helptext,
  .page-auth .form-box .form-field > ul{
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    margin-top: 6px;     /* 入力欄との隙間を詰める */
    margin-bottom: 4px;  /* 次の要素との隙間を詰める */
  }
  
  /* 箇条書きの見た目整理 */
  .page-auth .form-box .form-field > ul{
    padding-left: 18px;
  }
  
  /* エラーリストは余白を暴れさせない */
  .page-auth .form-box .form-field > .errorlist{
    margin: 0;
    padding-left: 18px;
  }
  
  /* ボタン列：右寄せ */
  .page-auth .actions{
    justify-content: flex-end;
  }
  .page-auth .actions .left-actions{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  /* フッターリンク */
  .page-auth .auth-footlink{
    text-align: right;
    margin-top: 8px;
  }
  
  /* モバイル：縦積み */
  @media (max-width: 640px){
    .page-auth .form-box .form-field{
      grid-template-columns: 1fr;
    }
    .page-auth .form-box .form-field > .help,
    .page-auth .form-box .form-field > .helptext,
    .page-auth .form-box .form-field > ul,
    .page-auth .form-box .form-field > .text-danger,
    .page-auth .form-box .form-field > .errorlist{
      grid-column: auto;
    }
  
    .page-auth .actions{
      justify-content: flex-start;
    }
    .page-auth .actions .left-actions,
    .page-auth .actions button[type="submit"],
    .page-auth .actions a.btn{
      width: 100%;
    }
  }