/* EK ログイン画面 — ライト/ダーク 2 テーマ + ベクター背景
 *
 * 設計の元になった検証済みプロトタイプのスクリーンショットは本変更の PR に添付。
 * 依存: なし（Bootstrap / jQuery プラグインいずれにも依存しない）。
 * 色: ek-theme.css / shell-patch.css と同じ色相（#1a365d / #2c5282 / #3182ce）。
 * テーマ: 既定はライト（body.ek-login--light）。ダークは .ek-login--light を外す
 *        （= ベースが暗色）。JSP 側は login.theme の値でクラスを出し分ける。
 */


:root{
  --ek-navy-deep:#0f2440; --ek-navy-900:#1a365d; --ek-navy-800:#14294a; --ek-navy-700:#2c5282;
  --ek-blue-500:#3182ce; --ek-blue-300:#63b3ed;
  --ek-ink:#1a202c; --ek-body:#334155; --ek-muted:#64748b; --ek-border:#e2e8f0; --ek-canvas:#f7fafc;
  --ek-danger:#e53e3e; --ek-danger-ink:#9b2c2c; --ek-danger-bg:#fff5f5; --ek-danger-border:#fed7d7;
  --ek-radius:8px;
  --ek-font:"Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body.ek-login{margin:0;background:var(--ek-navy-deep);color:var(--ek-ink);font-family:var(--ek-font);-webkit-font-smoothing:antialiased}

.ek-login-stage{
  position:relative;min-height:100vh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(368px,432px);
  align-items:center;gap:56px;padding:56px 60px;
  background:
    radial-gradient(1180px 760px at 10% 2%, rgba(49,130,206,.30) 0%, rgba(49,130,206,0) 58%),
    radial-gradient(900px 640px at 15% 80%, rgba(49,130,206,.24) 0%, rgba(49,130,206,0) 70%),
    radial-gradient(880px 680px at 92% 98%, rgba(44,82,130,.5) 0%, rgba(44,82,130,0) 60%),
    linear-gradient(155deg,#0f2440 0%,#14294a 44%,#1a365d 100%);
}

/* ── 背景：ベクター画（5 種からランダム／右へ淡くフェード） ──────── */
.ek-login-art{
  position:absolute;inset:0;pointer-events:none;
  transform:translate3d(calc(var(--ek-tx,0)*12px),calc(var(--ek-ty,0)*12px),0);
  transition:transform .35s ease-out;
  -webkit-mask-image:linear-gradient(96deg,#000 0%,#000 48%,rgba(0,0,0,.4) 72%,transparent 92%);
          mask-image:linear-gradient(96deg,#000 0%,#000 48%,rgba(0,0,0,.4) 72%,transparent 92%);
}
.ek-art{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .55s ease}
.ek-art.is-active{opacity:1}
.ek-art *{vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:no-preference){
  .ek-art.is-active{animation:ek-art-in .9s ease-out both}
}
@keyframes ek-art-in{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}

/* ── マストヘッド ───────────────────────────────────────────── */
/* 左カラム：設定値の大きな見出し＋環境バッジ＋ブランド（下部） */
body.ek-login{
  --ek-headline:rgba(255,255,255,.96); --ek-scrim:rgba(11,27,48,.86); --ek-scrim-soft:rgba(11,27,48,.46);
}
.ek-login-left{align-self:stretch;display:grid;grid-template-rows:1fr auto;
  position:relative;z-index:2;min-width:0}
.ek-login-headline{align-self:center;max-width:100%}
.ek-login-headline-title{margin:0;max-width:20em;font-size:clamp(27px,2.8vw,46px);font-weight:700;
  line-height:1.42;letter-spacing:.02em;color:var(--ek-headline);overflow-wrap:anywhere}
.ek-login-env{display:inline-flex;align-items:center;gap:9px;margin:22px 0 0;padding:8px 15px;
  border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.05em;
  background:var(--ek-env-bg);border:1px solid var(--ek-env-border);color:var(--ek-env-text)}
.ek-login-env-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.ek-login-env--test{--ek-env-bg:rgba(246,173,85,.16);--ek-env-border:rgba(246,173,85,.42);--ek-env-text:#f6c177}
.ek-login-env--staging{--ek-env-bg:rgba(99,179,237,.16);--ek-env-border:rgba(99,179,237,.42);--ek-env-text:#90cdf4}
.ek-login-env--prod{--ek-env-bg:rgba(104,211,145,.14);--ek-env-border:rgba(104,211,145,.4);--ek-env-text:#9ae6b4}
/* 文字の背後をやわらかく落として可読性を確保（ベクター画の上・内容の下） */
.ek-login-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(960px 680px at 21% 48%, var(--ek-scrim) 0%, var(--ek-scrim-soft) 44%, transparent 78%)}
body.ek-login--light{
  --ek-headline:#12274a; --ek-scrim:rgba(255,255,255,.93); --ek-scrim-soft:rgba(255,255,255,.56);
}
body.ek-login--light .ek-login-env--test{--ek-env-bg:#fff6e5;--ek-env-border:#f0c674;--ek-env-text:#8a5a00}
body.ek-login--light .ek-login-env--staging{--ek-env-bg:#e9f2fd;--ek-env-border:#a7c7e7;--ek-env-text:#1c4b7a}
body.ek-login--light .ek-login-env--prod{--ek-env-bg:#e9f7ef;--ek-env-border:#9ae6b4;--ek-env-text:#1c6b3f}
.ek-login-brand{position:relative;align-self:end;padding-left:22px}
.ek-login-masthead-rule{position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,#63b3ed 0%,rgba(99,179,237,.08) 100%)}
.ek-login-plate{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:14px 19px;
  box-shadow:0 24px 42px -26px rgba(3,12,28,.95)}
.ek-login-plate img{display:block;height:30px;width:auto}
.ek-login-plate-text{font-size:28px;font-weight:800;letter-spacing:.02em;color:var(--ek-ink)}
.ek-login-sysname{margin:18px 0 0;color:rgba(255,255,255,.93);font-size:21px;font-weight:600;
  line-height:1.6;letter-spacing:.03em;line-break:strict;overflow-wrap:anywhere}

/* ── シート（白い紙の積層） ─────────────────────────────────── */
.ek-login-sheet-wrap{position:relative;z-index:3}
.ek-login-sheet-wrap::before,.ek-login-sheet-wrap::after{
  content:"";position:absolute;inset:0;border-radius:16px;z-index:0;
}
.ek-login-sheet-wrap::before{background:rgba(255,255,255,.40);transform:rotate(-1.7deg) translateY(-7px)}
.ek-login-sheet-wrap::after{background:rgba(255,255,255,.20);transform:rotate(1.5deg) translateY(-14px)}
/* 紙の層をカードの子に置くと、入場アニメ（fill-mode:both）でカードが stacking context に
   なった後は z-index:-1 が背面に回らず前面を覆う（実機でカードが青灰化）。親側に置いて解決。 */
.ek-login-sheet{
  position:relative;z-index:1;background:#fff;border-radius:16px;padding:40px 36px 30px;
  box-shadow:0 44px 84px -36px rgba(3,12,28,.85), 0 2px 8px rgba(3,12,28,.22);
}

.ek-login-title{margin:0 0 24px;font-size:21px;font-weight:600;letter-spacing:.01em}
.ek-login-title small{display:block;margin-top:6px;font-size:12.5px;font-weight:500;color:var(--ek-muted);letter-spacing:.02em}

.ek-alert{display:flex;gap:10px;align-items:flex-start;margin:0 0 20px;padding:11px 14px;
  background:var(--ek-danger-bg);border:1px solid var(--ek-danger-border);
  border-radius:var(--ek-radius);color:var(--ek-danger-ink);font-size:13.5px;line-height:1.55}
.ek-alert svg{flex:0 0 auto;width:16px;height:16px;margin-top:2px;color:var(--ek-danger)}

.ek-field{margin-bottom:18px}
.ek-label{display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--ek-body)}
.ek-input{width:100%;height:46px;padding:0 14px;font-family:inherit;font-size:16px;color:var(--ek-ink);
  background:#fff;border:1px solid #cbd5e1;border-radius:var(--ek-radius);
  transition:border-color .15s ease, box-shadow .15s ease}
.ek-input:hover{border-color:#94a3b8}
.ek-input:focus{outline:none;border-color:var(--ek-blue-500);box-shadow:0 0 0 3px rgba(49,130,206,.22)}

.ek-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:6px;
  font-family:inherit;font-size:16px;font-weight:600;border:0;border-radius:var(--ek-radius);cursor:pointer;
  transition:background-color .15s ease, box-shadow .15s ease}
.ek-btn--primary{background:linear-gradient(180deg,#2c5282 0%,#1f4069 100%);color:#fff;
  box-shadow:0 10px 22px -14px rgba(26,54,93,.9)}
.ek-btn--primary:hover{background:linear-gradient(180deg,#1a365d 0%,#152c4d 100%)}
.ek-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(49,130,206,.4)}
.ek-btn[aria-busy="true"]{opacity:.72;cursor:progress}

.ek-check{position:relative;display:flex;align-items:center;gap:10px;margin-top:16px;font-size:14px;color:#475569;cursor:pointer;user-select:none}
.ek-check input{position:absolute;opacity:0;width:1px;height:1px}
.ek-check-box{position:relative;flex:0 0 auto;width:18px;height:18px;background:#fff;border:1px solid #cbd5e1;
  border-radius:4px;transition:background-color .15s ease,border-color .15s ease}
.ek-check-box::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(45deg) scale(.6);opacity:0;transition:opacity .12s ease,transform .12s ease}
.ek-check input:checked + .ek-check-box{background:var(--ek-navy-700);border-color:var(--ek-navy-700)}
.ek-check input:checked + .ek-check-box::after{opacity:1;transform:rotate(45deg) scale(1)}
.ek-check input:focus-visible + .ek-check-box{box-shadow:0 0 0 3px rgba(49,130,206,.28)}

.ek-login-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--ek-border);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.ek-lang{display:inline-flex;gap:2px;padding:3px;background:var(--ek-canvas);border:1px solid var(--ek-border);border-radius:999px}
.ek-lang a{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:500;color:#475569;text-decoration:none;
  transition:background-color .15s ease,color .15s ease}
.ek-lang a:hover{background:#eef2f7;color:var(--ek-navy-900)}
.ek-lang a[aria-current="true"]{background:var(--ek-navy-900);color:#fff}
.ek-lang a:focus-visible{outline:2px solid var(--ek-blue-500);outline-offset:2px}
.ek-login-version{font-size:12px;color:var(--ek-muted);font-variant-numeric:tabular-nums}

.ek-otp-hint{margin:0 0 4px;font-size:13px;line-height:1.6;color:var(--ek-muted)}
.ek-otp{display:flex;justify-content:center;gap:8px;margin:18px 0 22px}
.ek-otp input{width:48px;flex:0 0 auto;height:52px;padding:0;font-family:inherit;font-size:20px;font-weight:600;
  text-align:center;color:var(--ek-ink);background:#fff;border:1px solid #cbd5e1;border-radius:var(--ek-radius);
  font-variant-numeric:tabular-nums}
.ek-otp input:nth-child(3){margin-right:12px}
.ek-otp input:focus{outline:none;border-color:var(--ek-blue-500);box-shadow:0 0 0 3px rgba(49,130,206,.22)}

@media (prefers-reduced-motion:no-preference){
  .ek-login-sheet{animation:ek-sheet-in 460ms cubic-bezier(.22,.61,.36,1) 220ms both}
  .ek-login-masthead{animation:ek-fade .6s ease-out .25s both}
}
@keyframes ek-sheet-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ek-fade{from{opacity:0}to{opacity:1}}

/* ── ライトテーマ（背景を明るく／線画は反転して紺系に） ──────── */
body.ek-login--light{background:#eef3fa}
body.ek-login--light .ek-login-stage{
  background:
    radial-gradient(1180px 760px at 12% 2%, rgba(49,130,206,.18) 0%, rgba(49,130,206,0) 60%),
    radial-gradient(900px 640px at 15% 80%, rgba(49,130,206,.16) 0%, rgba(49,130,206,0) 70%),
    linear-gradient(155deg,#fbfdff 0%,#eef4fb 46%,#e4ecf7 100%);
}
body.ek-login--light .ek-login-art{filter:invert(1) hue-rotate(180deg)}
body.ek-login--light .ek-login-plate{background:#fff;border:1px solid rgba(26,54,93,.10);
  box-shadow:0 18px 32px -22px rgba(26,54,93,.38)}
body.ek-login--light .ek-login-sysname{color:#1a365d}
body.ek-login--light .ek-login-masthead-rule{background:linear-gradient(180deg,#2c5282 0%,rgba(44,82,130,.08) 100%)}
body.ek-login--light .ek-login-sheet{border:1px solid rgba(26,54,93,.07);
  box-shadow:0 34px 64px -36px rgba(26,54,93,.45), 0 1px 3px rgba(26,54,93,.10)}
body.ek-login--light .ek-login-sheet-wrap::before{background:rgba(216,228,242,.92)}
body.ek-login--light .ek-login-sheet-wrap::after{background:rgba(203,217,235,.72)}

@media (max-width:1023px){
  .ek-login-stage{grid-template-columns:1fr;align-items:start;gap:0;padding:26px 20px 36px}
  .ek-login-art{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.35) 62%,transparent 82%);
                mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.35) 62%,transparent 82%)}
  .ek-login-left{display:flex;flex-direction:column;padding-top:96px;margin-bottom:26px}
  .ek-login-brand{order:-1;margin-bottom:26px}
  .ek-login-headline{align-self:auto;margin-bottom:22px}
  .ek-login-headline-title{font-size:26px}
  .ek-login-sheet{padding:30px 24px 24px;border-radius:14px}
  .ek-login-sheet-wrap::before,.ek-login-sheet-wrap::after{border-radius:14px}
}
@media (max-width:420px){
  .ek-login-plate{padding:11px 15px}
  .ek-login-plate img{height:26px}
  .ek-login-plate-text{font-size:22px}
  .ek-login-sysname{font-size:17px}
}