@media (min-width: 768px) {
  /* ★★以前は common.css が 768px 以上で .main { margin: 0 auto } を当てており、
       .app（flex-direction: column）の左右 margin が auto だと stretch が効かず
       幅が中身なり（約695px）に縮んでいた。青い背景が画面の中央にしか出ていなかった原因。
     ★2026-09-09 に common.css 側を .main { width: 100%; margin: 0 } に改めた
       （認証後の画面でも同じ症状がタブレット幅で出ていた。裁定 16-BK）ため、
       ここで打ち消すものは無くなった。同じ値を明示して残しているのは、
       common.css を画面イメージから取り込み直して margin: 0 auto が復活しても
       ログイン系だけは崩れないようにするためである。 */
  .app--plain .main {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* 通知エリアはカードの外（青背景の上）に出ると読みづらいため、
   ログイン系画面ではカード幅に合わせて中央に寄せる。
   ★CM-01 ログインだけは通知をカードの中に出すため、この指定は効かない
     （上部の通知エリアに何も描画されない。裁定 16-AM）。
     CM-03〜CM-05（パスワード再設定系）は従来どおり上部に出す。
   ★幅はカード（.login-card の max-width）と必ず同じ値にすること。
     ずれていると通知だけ細く（または広く）なり、カードとの縦のラインが揃わない。 */
.app--plain .content > .messages {
  max-width: 440px;
  /* ★★width: 100% を省かないこと。
     .content は縦積みの flex であり、左右 margin が auto だと stretch が効かず、
     通知が中身なりの幅（文言が短いと 100px 程度）に縮む。 */
  width: 100%;
  margin: 16px auto 0;
  padding: 0 12px;
}

/* ★通知が1件も無いときは枠ごと消す。
   高さは 0 でも margin-top: 16px が残るため、.content（縦積みの flex）の中で
   16px の死んだ帯になり、その分カードが下へずれて上下の中央からずれる。
   CM-01 ログインは通知をカードの中に出すため（裁定 16-AM）
   ここは<b>常に空</b>であり、必ずこの状態になる。
   ★:empty は使えない。Thymeleaf の条件が偽でも空白のテキストノードが残る。 */
.app--plain .content > .messages:not(:has(.alert)) {
  display: none;
}

/* -------------------------------------------------------------------------
  カード内の通知（CM-01 ログイン。裁定 16-AM）

  ★.login-card__body の直下に置いた .messages が対象である。
    カード幅（400px）に収まるよう、共通の .alert より余白と文字を詰める。
------------------------------------------------------------------------- */
.login-card__body > .messages > .alert {
  padding: 10px 12px;
  font-size: 13px;
}

/* 通知と最初の入力欄（ユーザID）の間隔。
   共通側の .messages > .alert:last-child { margin-bottom: 16px } を
   カード内では少し詰める。 */
.login-card__body > .messages > .alert:last-child {
  margin-bottom: 14px;
}

/* =========================================================================
  青背景を画面全体に広げ、カードを画面の中央に置く（Planner 裁定 16-AS / 16-AT）
  --------------------------------------------------------------------------
  ★本ファイルを読み込むのはログイン系5画面（CM-01〜CM-05）だけである。
    エラー画面（400/403/404/500）も layout-plain を使うが login.css は読まないため、
    ここの指定は影響しない。

  【ヘッダーを出さない理由】
    ヘッダーは「サイドバーの開閉」「機能名」「（旧）ユーザメニュー」のための領域である。
    未ログインではサイドバーもユーザも無く、システム名はカードの見出しに出ている。
    出しても情報が無い帯が残るだけなので出さない。

  【フッターは残す理由（★16-AT で方針変更）】
    著作権表示は未ログインでも表示する意味がある（社内システムであることを示す）。
    ただし白い帯として残すと青が途切れるため、
    <b>背景を透かして青の上に白文字で重ねる</b>。中央寄せにする。
========================================================================= */

/* ヘッダーを出さない（未ログインで機能名もメニューも無いため） */
.app--plain > .topbar {
  display: none;
}

/* ★シェルの高さを画面いっぱいにする。
   common.css の .app は calc(100dvh - var(--footer-h)) であり、
   そのままだとカードの中央がフッターの分だけ上へずれる。
   フッターは透過して上に重ねるため、高さを差し引く必要がない。 */
.app--plain {
  height: 100dvh;
}

/* =========================================================================
  背景（docs/coding-standards.md「9.8」）
  --------------------------------------------------------------------------
  ★common.css の .login-wrap は var(--login-bg) のべた塗りである。
    ログインは利用者が毎日最初に見る画面であり、システムの印象を決める。
    ここだけ奥行きのある配色にする。

  ★★<b>画像を使わない。</b>すべて CSS のグラデーションで描く。
    外部CDNを使えない前提（CLAUDE.md 15-(7)）であり、画像を足すと
    同梱アセットの管理（差し替え・ライセンス）が増える。

  ★色はデザイントークン（--brand / --brand-strong / --accent）から作る。
    ここで新しい色相を持ち込むと、ログイン後の画面と地続きに見えなくなる。
========================================================================= */
.app--plain {
  /* ★1箇所で定義する（.login-wrap の背景） */
  --login-hero:
    radial-gradient(115% 85% at 10% 6%, rgba(47, 128, 237, 0.36), transparent 58%),
    radial-gradient(95% 80% at 92% 96%, rgba(42, 95, 146, 0.62), transparent 55%),
    linear-gradient(155deg, #0e2740 0%, #1f4e79 48%, #2a5f92 100%);
}

.login-wrap {
  background: var(--login-hero);
  position: relative;
  /* ★横は隠し、縦だけ必要なときにスクロールさせる。
     画面全体（html, body）は overflow:hidden（裁定 16-AN）なので、
     ここで受けないと背の低い画面で入力欄に届かなくなる。 */
  overflow: hidden auto;
}

/* 細い格子（うっすらとした質感）。中央のカード付近では消えるようにして、
   入力欄の可読性を落とさない */
.login-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, transparent 35%, #000 100%);
  mask-image: radial-gradient(80% 70% at 50% 50%, transparent 35%, #000 100%);
  pointer-events: none;
}

/* ★カードは ::before より前面に出す（stacking context を作る） */
.login-wrap > .login-card {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------
  カードを上下左右の中央に置く

  ★common.css の .login-wrap は
      margin: -16px -14px;  min-height: 100%;
    で「.content の padding を打ち消して広げる」書き方になっている。
    打ち消しに頼ると .content の padding を変えたときに中央がずれるため、
    ログイン系では .content の padding 自体を 0 にして
    .login-wrap を残り全部に広げる素直な形へ置き換える。
------------------------------------------------------------------------- */
.app--plain > .main > .content {
  padding: 0;
  display: flex;
  /* ★★<b>縦積みにする（row のままにしない）。</b>
     .content の子は「上部通知エリア（.messages）」と「本文（section.screen）」の2つである。
     row のままだと通知が本文の<b>横</b>に並び、CM-02〜CM-05 で
     メッセージが出た瞬間にログインパネルが横へ押しやられる。 */
  flex-direction: column;
}

/* ★★<b>.content と .login-wrap の間には section.screen が挟まっている。</b>
     .screen は display:block・flex:0 1 auto のため、
     .login-wrap の flex:1 は<b>親が flex でないので効かない</b>。
     .screen を flex アイテムとして伸ばし、かつ flex コンテナにして初めて
     .login-wrap が画面いっぱいに広がる。
   ★これを入れないと、青い背景が中身なりの大きさ（約 695 × 412px）にとどまる。 */
.app--plain > .main > .content > .screen {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.login-wrap {
  margin: 0;
  flex: 1;
  /* ★min-height ではなく min-height:0 ＋ flex:1。
     flex アイテムは既定で内容より小さくならないため、
     min-height:0 が無いと縦方向にはみ出して中央がずれる。 */
  min-height: 0;
  display: grid;
  place-items: center;
}

/* -------------------------------------------------------------------------
  フッター（著作権表示）を青の上に透かして重ねる
------------------------------------------------------------------------- */
.app--plain ~ .footer {
  background: transparent;
  border-top: none;
  /* 著作権表示を中央に置く（ログイン後は右にボタンが並ぶため右寄せだが、
     ここは操作ボタンが無いので中央のほうが自然） */
  justify-content: center;
  /* ★カードと重ならないよう最小限の高さにする */
  min-height: auto;
  padding: 10px 16px;
  pointer-events: none;
}

.app--plain ~ .footer .footer__meta {
  margin-right: 0;
  color: rgba(255, 255, 255, 0.72);
}

/* =========================================================================
  カードの寸法（Planner 裁定 16-BE。画面イメージに合わせる）
  --------------------------------------------------------------------------
  ★これらは common.css で全画面共通に定義されている値の「ログイン画面だけの上書き」である。
    ログインは1画面に入力欄が2つしかない特別な画面であり、
    一覧やフォーム画面と同じ密度にすると間延びして見える。
    ★common.css 側は変えないこと（他の画面の入力欄まで大きくなる）。
========================================================================= */

/* カード幅。400px では余白が詰まって窮屈に見えるため広げる。
   ★max-width は template/LoginCardStyleTest が通知エリアの幅と突き合わせている。
     変えるときは login.css の .messages 側も一緒に直すこと */
.login-card {
  max-width: 440px;
  border-radius: 16px;
  /* 2枚重ねの影。近い影で輪郭を、遠い影で浮きを出す */
  box-shadow:
    0 1px 2px rgba(8, 20, 35, 0.18),
    0 28px 64px rgba(8, 20, 35, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: login-card-in 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes login-card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}

/* 見出し（濃紺の帯）。
   ★<b>シンボルと見出しを縦に積む</b>（.login-card__head は common.css で text-align:center）。
   ★帯は<b>情報量の割に場所を取らない高さ</b>に抑える。ここが厚いと
     入力欄が画面の下へ押し出され、背の低いノートPCでボタンが折り返しの外に出る。 */
.login-card__head {
  padding: 14px 24px 13px;
  background: linear-gradient(135deg, var(--brand-strong) 0%, var(--brand) 52%, #163b5c 100%);
  position: relative;
  overflow: hidden;
}

/* 帯の右上に淡い光を置いて、平坦な塗りに見えないようにする */
.login-card__head::after {
  content: "";
  position: absolute;
  top: -60%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}

.login-card__head h1 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  position: relative;
}

/* -------------------------------------------------------------------------
  帯の中のシンボル（docs/coding-standards.md「9.8」）

  ★画面イメージには無い要素である。ログイン系5画面すべてに置き、
    何のシステムのどの画面かをひと目で示す。
  ★アイコンは同梱の Material Symbols（static/lib）から選ぶ。
    CDN を参照しないこと（CLAUDE.md 15-(7)）。
------------------------------------------------------------------------- */
.login-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 auto 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  position: relative;
}

.login-mark .material-symbols-outlined {
  font-size: 19px;
  color: #fff;
}

.login-card__body {
  padding: 20px 24px 22px;
}

/* -------------------------------------------------------------------------
  入力欄

  ★文字サイズを 16px にしている。
    iOS Safari は 16px 未満の入力欄にフォーカスすると画面を自動でズームし、
    そのまま戻らない。ログインは全利用者が必ず通る画面なので特に効く。
------------------------------------------------------------------------- */
.login-field {
  margin-bottom: 14px;
}

.login-field label {
  font-size: 13.5px;
  margin-bottom: 5px;
}

.login-field .input {
  height: 44px;
  padding: 10px 14px;
  font-size: 16px;
  border-radius: 10px;
  background: #fbfcfe;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.login-field .input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.18);
  outline: none;
}

/* -------------------------------------------------------------------------
  入力欄の先頭アイコン（CM-01 のみ）

  ★装飾であり情報ではないため aria-hidden にする。
    項目名は <label> が持っており、読み上げが二重にならないようにする。
------------------------------------------------------------------------- */
.input-icon {
  position: relative;
  display: block;
}

.input-icon .input {
  padding-left: 44px;
}

.input-icon__ico {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--ink-weak);
  pointer-events: none;
  transition: color 0.15s;
}

.input-icon:focus-within .input-icon__ico {
  color: var(--accent);
}

/* ログインボタン。カード幅いっぱい・濃紺（.btn--primary の var(--brand)） */
.btn.login-btn {
  height: 46px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-strong) 0%, var(--brand) 100%);
  /* ★背景を濃紺に塗るのはここなので、文字色もここで白にする。
     .btn--primary 任せにすると、付け忘れたボタンが濃紺背景に黒文字（.btn の var(--ink)）になる。 */
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 78, 121, 0.32);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.btn.login-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(31, 78, 121, 0.4);
}

.btn.login-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(31, 78, 121, 0.3);
}

/* ★フォーカスの輪郭は必ず見えるようにする（キーボード操作のため） */
.btn.login-btn:focus-visible {
  outline: 3px solid rgba(47, 128, 237, 0.55);
  outline-offset: 2px;
}

.login-card__link {
  margin-top: 12px;
  font-size: 13.5px;
}

.login-card__link a {
  color: var(--brand-strong);
  text-decoration: none;
  border-bottom: 1px solid rgba(42, 95, 146, 0.3);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}

.login-card__link a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 注意書き（★枠をやめて注記にした。login.html のコメントを参照）。
   ログイン以外の画面（CM-03 等）でも .login-card__note を使っているため、
   カード本文の最後に来たときだけ上余白を付ける */
.login-card__body > .login-card__note:last-child {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

/* =========================================================================
  ★動きを抑える設定を尊重する（OS の「視差効果を減らす」）
  --------------------------------------------------------------------------
  前庭障害のある利用者には、拡大・移動する演出が体調不良の原因になる。
  ログインは全利用者が必ず通る画面であり、回避する手段が無い。
========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .login-card {
    animation: none;
  }

  .btn.login-btn,
  .btn.login-btn:hover,
  .btn.login-btn:active {
    transform: none;
    transition: none;
  }
}

/* =========================================================================
  レスポンシブ（docs/coding-standards.md「9.8」）
  --------------------------------------------------------------------------
  ★CLAUDE.md 4.3 のブレークポイント（768px / 1024px）に合わせる。

  ★<b>幅によってカードの構造を変えない。</b>どの幅でも
    「見出し帯（.login-card__head）が上、本文（.login-card__body）が下」の縦積み1枚である。
    以前は PC（>=1024px）だけ見出し帯を<b>左パネルへ横置き</b>して全画面2カラムにしていたが、
    ログインは入力欄が2つしかない画面であり、全画面を占有するほどの中身が無い。
    幅で構造が変わると<b>PC とスマホで別画面に見え</b>、崩れたときの原因も切り分けにくい。

  スマホ  (<768)      … カードを画面幅いっぱいに近づけ、要素を詰める
  それ以上 (>=768)     … 中央にカード1枚（上の既定値）
========================================================================= */

/* -------------------------------------------------------------------------
  スマホ（<768px）

  ★入力欄の font-size は 16px のまま変えない。
    iOS Safari は 16px 未満の入力欄にフォーカスすると画面を自動でズームし、
    そのまま戻らない（既定値の .login-field .input で指定している）。
  ★ボタンの高さは 48px を確保する。指で押す領域を小さくしない。
------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* ★下の余白を厚くする。.footer は position:fixed でカードの上に重なるため、
     ここを詰めると注記や「パスワードをお忘れですか？」が隠れる */
  .login-wrap {
    padding: 14px 12px 40px;
  }

  .login-card {
    border-radius: 14px;
    box-shadow:
      0 1px 2px rgba(8, 20, 35, 0.18),
      0 16px 34px rgba(8, 20, 35, 0.38);
  }

  .login-card__head {
    padding: 12px 16px 11px;
  }

  .login-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    margin-bottom: 6px;
  }

  .login-mark .material-symbols-outlined {
    font-size: 17px;
  }

  .login-card__head h1 {
    font-size: 15.5px;
  }

  .login-card__body {
    padding: 18px 18px 20px;
  }

  .login-field {
    margin-bottom: 12px;
  }

  .btn.login-btn {
    height: 48px;
  }

  /* フッターの著作権表示はカードと重なりやすいので詰める */
  .app--plain ~ .footer {
    padding: 6px 12px;
    font-size: 11px;
  }
}