/* =========================================================
 * JPCC Theme — シングル/ログイン レイアウト専用
 *
 * layout_single_jpcc.html からのみ読み込む。
 * 共通ベース(jpcc-overrides.css)の「後ろ」に読み込むこと。
 *
 * 背景・ロゴ lockup は Figma 納品(01_login)準拠。
 *   - 深ネイビー背景 + 円パターン(login-bg-pattern.png) + vignette
 *   - 白カード(枠 #D8D3C8 / 角丸6px)
 *   - ロゴ = チップ(jpcc-chip.svg) + 金文字(jpcc-wordmark.svg) をカード上に配置
 * ========================================================= */

/* ---- 背景(navy grad ベース + 薄ロゴ + vignette / Figma 01_login 実測) ----
 * レイヤ(上→下):
 *   1) Deep vignette  : 右側を暗く落とすグラデーション
 *   2) 薄ロゴ PNG      : 影は PNG に焼込済。左端 49vw(=741/1512) / 幅 72.2vw(=1092/1512)・縦中央。
 *                       右へはみ出して約30%がクリップされる(右はみ出しが正)。
 *   3) ベース navy grad: フレーム塗り(単色ではなくグラデーション) */
.login-page-body {
  min-height: 100vh;
  background-color: #071A37;   /* フォールバック(grad 中間色) */
  background-image:
    linear-gradient(to right, rgba(16, 43, 95, 0) 0%, rgba(6, 20, 44, .08) 57.02%, rgba(2, 8, 23, .5) 100%),
    url('/img/login-bg-pattern.png'),
    linear-gradient(145.75deg, #020817 0%, #071A37 50.02%, #0C2C5C 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 49vw center, 0 0;
  background-size: 100% 100%, 72.2vw auto, 100% 100%;
  background-attachment: fixed, fixed, fixed;
}

/* ---- レイアウト: カードは左寄せ1カラム(Figma 01_login 準拠) ----
 * フレーム 1512 中、カードは x≈192 / 幅≈502。中央寄せにしない。 */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-block: 2.5rem;
  padding-inline-start: clamp(1.5rem, 12.7vw, 16rem);  /* 1512px時 ≈192px */
  padding-inline-end: 1.5rem;
}
.login-col {
  width: 100%;
  max-width: 502px;   /* Figma カード幅 */
}

/* ---- ロゴ lockup(カード上・濃ネイビー背景上) ---- */
.login-brand {
  margin-bottom: 1.5rem;
}
.login-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.login-brand-chip {
  height: 40px;
  width: auto;
  display: block;
}
.login-brand-word {
  height: 30px;
  width: auto;
  display: block;
}
.login-brand-caption {
  margin-top: .75rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, .85);   /* 濃ネイビー上のゴールド系キャプション */
}

/* ---- カード ---- */
.login-card {
  background-color: #FFFFFF;
  border: 1.2px solid #D8D3C8;
  border-radius: .375rem;            /* 6px (Figma) */
  box-shadow: 0 18px 40px -20px rgba(0, 15, 41, .45);
  overflow: hidden;
}
.login-card-title {
  color: var(--bs-primary);
  letter-spacing: -.01em;
}
.login-card-sub {
  color: var(--jpcc-grey);
  font-size: .8125rem;
  line-height: 1.4;
}

/* ---- エラー画面(404/500): カード無し・ネイビー背景に直接 ---- */
.error-screen {
  color: #FFFFFF;
  max-width: 30rem;
}
.error-code {
  font-size: clamp(4.5rem, 13vw, 7.5rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
  color: #FFFFFF;
}
.error-status-text {
  display: block;
  margin-top: .5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jpcc-gold);
}
.error-desc {
  color: rgba(255, 255, 255, .75);
  font-size: .9rem;
  line-height: 1.6;
  margin: 1.25rem 0 1.75rem;
}
/* dev 限定のエラー詳細(リクエスト/スタック) */
.error-detail { margin-top: 2rem; text-align: left; }
.error-detail h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin: 1.5rem 0 .5rem;
}
.error-detail h2::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background-color: var(--jpcc-gold);
}

/* Request data — key/value テーブル */
.error-request {
  background-color: #0A1A30;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: .5rem;
  overflow: hidden;
}
.error-request table {
  width: 100%;
  border-collapse: collapse;
  font-size: .75rem;
}
.error-request tr + tr { border-top: 1px solid rgba(255, 255, 255, .06); }
.error-request th {
  width: 78px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  padding: .5rem .75rem;
  color: var(--jpcc-gold);
  font-weight: 600;
  letter-spacing: .04em;
  background-color: rgba(255, 255, 255, .03);
}
.error-request td {
  padding: .5rem .75rem;
  color: #D7E0EC;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

/* Error stack */
.error-stack {
  background-color: #0A1A30;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: .5rem;
  padding: .85rem 1rem;
  max-height: 360px;
  overflow: auto;
}
.error-trace-message {
  margin-bottom: .65rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #FFB4B4;
  font-weight: 600;
  font-size: .8rem;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
}
.error-trace-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  line-height: 1.65;
}
.error-trace-stack li {
  padding-left: 1.1rem;
  color: rgba(199, 210, 224, .6);
  word-break: break-all;
}
.error-trace-stack li:first-child {
  padding-left: 0;
  color: #D7E0EC;
}

/* ---- レスポンシブ: 狭い画面では固定背景を解除(モバイルのちらつき回避) ---- */
@media (max-width: 575.98px) {
  .login-page-body {
    background-attachment: scroll, scroll, scroll;
    background-position: 0 0, 55vw center, 0 0;
    background-size: 100% 100%, 95vw auto, 100% 100%;
  }
  .login-brand-chip { height: 34px; }
  .login-brand-word { height: 26px; }
  .error-code { font-size: 2.75rem; }
}