/* ============================================================================
   ログイン / パスワード変更

   背景は、奥へ伸びていく鋼製格子。自社製品そのものを最初の一枚に置く。
   ・ベアリングバー（縦）＋クロスバー（横）を CSS だけで組み、遠近で寝かせる
   ・白基調に合わせ、亜鉛めっきの「明るい面」として描く（旧テーマは暗い槽の底）
   フォームは白いカードで手前に浮かせ、ログイン後の画面と地続きにする。
   色はダイクレアイデアポストと同じものを使う。
   ============================================================================ */

*, *::before, *::after { box-sizing:border-box; }

:root {
  --ink-0:#16202E; --ink-1:#16202E; --ink-2:#4A5A70; --ink-3:#6B7A90;
  --surface:#FFFFFF; --surface-2:#F8FAFD; --surface-3:#F1F5FA;
  --line:#E2E8F2; --line-soft:#EDF2F9;
  --rail:#F4F7FB;
  --signal:#E8710A;
  --urgent:#DC2626; --urgent-soft:#FEF2F2;
  --focus:#2563EB;
  --font-ui:"Noto Sans JP","BIZ UDPGothic","Yu Gothic UI","Hiragino Sans",system-ui,sans-serif;
  --font-num:"Cascadia Mono","Consolas","SF Mono",ui-monospace,monospace;
}

html, body { height:100%; }
body {
  margin:0; font-family:var(--font-ui); font-size:15px; line-height:1.75;
  color:var(--ink-1); background:var(--rail);
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- 背景の格子 */
.stage { position:fixed; inset:0; overflow:hidden; background:var(--rail); }
/* 明るい床面。奥へ向かってわずかに色を持たせる */
.stage::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(130% 90% at 22% 4%, #FFFFFF 0%, #EFF4FB 46%, #E4EBF5 100%);
}
/* 鋼製格子。縦がベアリングバー、横がクロスバー。白地なので線は影として置く */
.grate {
  position:absolute; left:-40%; right:-40%; top:-18%; bottom:-30%;
  background:
    repeating-linear-gradient(0deg,
      rgba(22,32,46,.10) 0 2px,
      rgba(22,32,46,.05) 2px 4px,
      rgba(0,0,0,0) 4px 78px),
    repeating-linear-gradient(90deg,
      rgba(22,32,46,.13) 0 1px,
      rgba(22,32,46,.07) 1px 3px,
      rgba(22,32,46,.16) 3px 5px,
      rgba(0,0,0,0) 5px 27px);
  transform:perspective(1000px) rotateX(52deg) scale(1.55);
  transform-origin:50% 24%;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 46%, transparent 88%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 46%, transparent 88%);
}
/* 亜鉛の面を渡る光。11秒かけて1本だけ */
.sheen {
  position:absolute; inset:-20%;
  background:linear-gradient(104deg, transparent 38%,
    rgba(232,113,10,.10) 47%, rgba(255,255,255,.5) 50%, transparent 61%);
  animation:sweep 11s linear infinite;
}
@keyframes sweep { from { transform:translateX(-38%); } to { transform:translateX(38%); } }

/* ---------------------------------------------------------------- 版面 */
.shell {
  position:relative; z-index:2; min-height:100%;
  display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:64px;
  align-items:center; max-width:1240px; margin:0 auto; padding:56px 40px;
}

/* ---- 左: 名乗りと、このシステムがやること ---- */
.pitch { color:var(--ink-2); max-width:620px; }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:52px; }
.brand .mk { width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  font-size:17px; background:linear-gradient(135deg,var(--signal),#FBBF24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px rgba(232,113,10,.28); }
.brand b { color:var(--ink-0); font-size:17px; font-weight:800; letter-spacing:.06em; }
.brand span { color:var(--ink-3); font-size:11.5px; letter-spacing:.22em; display:block;
  line-height:1.3; }

.lead { font-size:clamp(34px,4.6vw,58px); font-weight:800; line-height:1.32;
  letter-spacing:-.01em; color:var(--ink-0); margin:0 0 22px; }
.lead em { font-style:normal; color:var(--signal); }
.sub { font-size:15.5px; color:var(--ink-2); margin:0; max-width:34em; }

/* 20日ルールを目盛りとして置く。この製品の芯にある数字だから */
.ruler { display:flex; gap:5px; align-items:flex-end; margin:44px 0 10px; }
.ruler i { display:block; width:5px; height:14px; border-radius:1px;
  background:#CBD5E1; }
.ruler i:nth-child(5n) { height:20px; background:#94A3B8; }
.ruler i.on { height:30px; width:6px; background:var(--signal);
  box-shadow:0 3px 12px rgba(232,113,10,.45); }
.ruler-lb { font-size:12.5px; color:var(--ink-3); letter-spacing:.04em; }
.ruler-lb b { font-family:var(--font-num); font-size:16px; color:var(--ink-0); margin:0 2px; }

/* ---- 右: フォーム ---- */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:34px 34px 30px;
  box-shadow:0 10px 24px rgba(16,32,56,.10), 0 26px 60px rgba(16,32,56,.10);
  position:relative; overflow:hidden;
}
/* ダッシュボードのヘッダーと同じ帯。ログイン後と地続きにする */
.card::before { content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--signal);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 4px);
  mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 4px); }
.card h1 { margin:0 0 4px; font-size:20px; font-weight:800; color:var(--ink-0);
  letter-spacing:.02em; }
.card .hint { margin:0 0 24px; font-size:12.5px; color:var(--ink-2); line-height:1.7; }

.field { margin-bottom:16px; }
.field label { display:block; font-size:12px; font-weight:700; color:var(--ink-2);
  letter-spacing:.06em; margin-bottom:6px; }
.field input {
  width:100%; font:inherit; font-size:15px; padding:12px 14px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface-2);
  color:var(--ink-0); transition:border-color .14s, box-shadow .14s, background .14s;
}
.field input:hover { border-color:#CBD5E1; }
.field input:focus { outline:none; background:var(--surface); border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(37,99,235,.14); }
.field .help { font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.6; }
.field ul.errorlist { margin:6px 0 0; padding-left:17px; color:var(--urgent); font-size:12px; }

.go {
  width:100%; margin-top:22px; font:inherit; font-size:15px; font-weight:800;
  background:var(--signal); color:#fff; border:0; border-radius:10px; padding:14px;
  cursor:pointer; letter-spacing:.06em;
  transition:background .14s, transform .06s, box-shadow .14s;
  box-shadow:0 4px 16px rgba(232,113,10,.28);
}
.go:hover { background:#CE6409; box-shadow:0 6px 22px rgba(232,113,10,.36); }
.go:active { transform:translateY(1px); }

.err { background:var(--urgent-soft); border:1px solid rgba(220,38,38,.25);
  border-left:3px solid var(--urgent); color:var(--urgent); border-radius:8px;
  padding:11px 14px; font-size:12.5px; margin-bottom:20px; line-height:1.7; }
.err b { color:var(--urgent); }

.foot { margin-top:24px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:11.5px; color:var(--ink-3); line-height:1.75; }
.foot a { color:var(--focus); }

/* ---------------------------------------------------------------- 可搬性 */
@media (max-width:1080px) {
  .shell { grid-template-columns:1fr; gap:40px; padding:44px 28px; align-content:center; }
  .pitch { max-width:none; }
  .brand { margin-bottom:32px; }
  .ruler { margin:32px 0 8px; }
  .card { max-width:460px; width:100%; }
}
@media (max-width:560px) {
  .lead { font-size:30px; }
  .sub { font-size:14px; }
  .ruler i:nth-child(n+13) { display:none; }   /* 目盛りは折り返さず間引く */
  .card { padding:26px 22px 24px; }
}
@media (prefers-reduced-motion:reduce) {
  .sheen { animation:none; opacity:.5; }
  * { transition-duration:.001ms !important; }
}