/* Hubako サインイン。承認済みモック（docs/specs/features/mockups/SCANPOD_IDENTITY_SIGNIN_MOCK.html）の案 A から写した。見た目を変えるときはモックと一緒に直す */
:root{
  --brand:#22BB80; --brand-deep:#0F7A56; --brand-ink:#0b2a20; --brand-ink-2:#103a2c; --mint:#bff2dc; --mint-soft:#e9fbf3;
  --bg:#f2f4f3; --panel:#ffffff; --field:#f6f8f7; --line:#e3e8e6; --line-strong:#cbd3cf;
  --text:#14201b; --text-2:#4b5a54; --text-3:#6c7a74;
  --error:#d0342c; --error-soft:#fdebea; --warn:#8a5a00; --warn-soft:#fff6e2;
  --frame:#d5dad8; --chrome:#e7ebe9; --wm:#6b6b6b;
  --vis-1:#f4fff9; --vis-2:#dff7ec; --vis-3:#c9f0de; --vis-text:#0f2a20; --vis-text-2:#3f6656; --vis-em:#0F7A56; --vis-card:#ffffff; --vis-card-line:#cfe9dc; --vis-box:rgba(255,255,255,.55); --vis-box-line:#9fd8bf; --glow-a:#9ff0cd; --glow-b:#d8f7b0; --glow-c:#b9ecff;
  --shadow:0 1px 2px rgba(11,42,32,.05),0 20px 50px -20px rgba(11,42,32,.25);
  --display:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif;
  --body:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",system-ui,sans-serif;
  --wordmark:"Outfit","Futura","Century Gothic",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --brand:#2fd197; --brand-deep:#1fa877; --brand-ink:#07170f; --brand-ink-2:#0c2419; --mint:#1d4a38; --mint-soft:#11281f;
  --bg:#0e1312; --panel:#151c19; --field:#1b2420; --line:#26312c; --line-strong:#38463f;
  --text:#e8efec; --text-2:#b3c0ba; --text-3:#8d9b95; --error:#ff8b82; --error-soft:#3a1d1b; --warn:#f2c76e; --warn-soft:#33291a;
  --frame:#232a27; --chrome:#1c2320; --glow-a:#14563d; --glow-b:#2d4a17; --glow-c:#15394a; --wm:#c9cfcc; --vis-1:#15241e; --vis-2:#112019; --vis-3:#0e1a15; --vis-text:#e6f6ee; --vis-text-2:#9cc4b2; --vis-em:#5fe0aa; --vis-card:#1c2b24; --vis-card-line:#2a4036; --vis-box:rgba(255,255,255,.03); --vis-box-line:#2f5546; color-scheme:dark}}
:root[data-theme="dark"]{
  --brand:#2fd197; --brand-deep:#1fa877; --brand-ink:#07170f; --brand-ink-2:#0c2419; --mint:#1d4a38; --mint-soft:#11281f;
  --bg:#0e1312; --panel:#151c19; --field:#1b2420; --line:#26312c; --line-strong:#38463f;
  --text:#e8efec; --text-2:#b3c0ba; --text-3:#8d9b95; --error:#ff8b82; --error-soft:#3a1d1b; --warn:#f2c76e; --warn-soft:#33291a;
  --frame:#232a27; --chrome:#1c2320; --glow-a:#14563d; --glow-b:#2d4a17; --glow-c:#15394a; --wm:#c9cfcc; --vis-1:#15241e; --vis-2:#112019; --vis-3:#0e1a15; --vis-text:#e6f6ee; --vis-text-2:#9cc4b2; --vis-em:#5fe0aa; --vis-card:#1c2b24; --vis-card-line:#2a4036; --vis-box:rgba(255,255,255,.03); --vis-box-line:#2f5546; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--panel);color:var(--text);font-family:var(--body);font-size:14px;line-height:1.6}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* ── 画面本体（3 案が同じ部品を別の着せ方で描く） ── */
.auth{position:relative;display:grid;min-height:640px;background:var(--panel);overflow:hidden}
.pane{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:48px 32px}
.form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:18px;animation:rise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:.0;transform:translateY(8px)}to{opacity:1;transform:none}}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:.02em}
.logo .mk{width:38px;height:38px;flex:none}
.logo .wm{font-family:var(--wordmark);font-weight:600;font-size:28px;letter-spacing:-.03em;color:var(--wm);line-height:1}
.form h2{font-family:var(--display);font-weight:900;font-size:30px;line-height:1.25;margin:0;letter-spacing:.01em;text-wrap:balance}
.lede{margin:-8px 0 0;color:var(--text-2);font-size:14px}
.acct{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--field)}
.acct .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#7fe0b8);display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--display);flex:none}
.acct .who{min-width:0;flex:1}
.acct .who b{display:block;font-size:14px}
.acct .who span{display:block;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct a{font-size:12px;color:var(--brand-deep);text-decoration:none;white-space:nowrap}
.field{position:relative}
.field input{width:100%;height:56px;border:1.5px solid var(--line);border-radius:14px;background:var(--field);padding:22px 16px 6px;font:inherit;font-size:16px;color:var(--text);transition:border-color .15s,background .15s,box-shadow .15s}
.field label{position:absolute;left:17px;top:17px;font-size:15px;color:var(--text-3);pointer-events:none;transition:all .15s}
.field input:focus,.field input:not(:placeholder-shown){outline:none}
.field input:focus{border-color:var(--brand);background:var(--panel);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.field input:focus+label,.field input:not(:placeholder-shown)+label{top:8px;font-size:11px;letter-spacing:.04em;color:var(--text-2)}
.field .eye{position:absolute;right:10px;top:12px;width:32px;height:32px;border:none;background:none;color:var(--text-3);cursor:pointer;border-radius:8px}
.field.bad input{border-color:var(--error);background:var(--error-soft)}
.field.bad{animation:shake .38s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.msg{font-size:12.5px;color:var(--error);margin-top:6px;display:flex;gap:6px}
.btn{height:52px;border-radius:14px;border:1.5px solid var(--line-strong);background:var(--panel);font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;transition:transform .08s,filter .15s,background .15s}
.btn:active{transform:scale(.985)}
.btn.go{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
.btn.go:hover{filter:brightness(1.25)}
.btn.key{background:var(--brand);border-color:var(--brand);color:#06281b;position:relative;overflow:hidden}
.btn.key::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:sheen 3.2s ease-in-out 1s infinite}
@keyframes sheen{to{transform:translateX(100%)}}
.btn.ghost{border:none;background:none;height:auto;padding:4px;font-weight:500;font-size:13.5px;color:var(--text-2)}
.btn svg{width:20px;height:20px;flex:none}
.or{display:flex;align-items:center;gap:12px;color:var(--text-3);font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.socials{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.socials .btn{height:50px}
.socials .btn span{font-size:13px;font-weight:500}
.links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px}
.links a{color:var(--brand-deep);text-decoration:none;font-weight:500}
.links a:hover{text-decoration:underline}
.fine{font-size:12px;color:var(--text-3);margin:0;line-height:1.7}
.otp{display:grid;grid-template-columns:repeat(3,1fr) 14px repeat(3,1fr);gap:8px;align-items:center}
.otp i{height:2px;background:var(--line-strong);border-radius:2px}
.otp input{height:60px;border:1.5px solid var(--line);border-radius:14px;background:var(--field);text-align:center;font-family:var(--mono);font-weight:700;font-size:24px;color:var(--text);min-width:0;width:100%}
.otp input:focus{outline:none;border-color:var(--brand);background:var(--panel);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.toggle{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2);cursor:pointer;user-select:none}
.toggle input{appearance:none;width:36px;height:22px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;flex:none;transition:background .15s}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle input:checked{background:var(--brand)}
.toggle input:checked::after{left:17px}
.callout{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.6}
.callout svg{width:18px;height:18px;flex:none;margin-top:1px}
.callout.err{background:var(--error-soft);color:var(--error)}
.callout.info{background:var(--mint-soft);color:var(--text)}
.callout.warn{background:var(--warn-soft);color:var(--warn)}
.orb{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--mint-soft);color:var(--brand-deep);position:relative;align-self:flex-start}
.orb svg{width:44px;height:44px}
.orb.pulse::before,.orb.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand);opacity:0;animation:ring 2s ease-out infinite}
.orb.pulse::after{animation-delay:1s}
@keyframes ring{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.6);opacity:0}}
.orb.ok{background:var(--brand);color:#fff}
.orb.ok path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s .15s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.legal{display:flex;gap:14px;font-size:11.5px;color:var(--text-3)}
.sheetgrab{display:none}
.dir-a .blob,.dir-c .blob{display:none}

/* ── 案 A: 仕分けの机（明るい面。届いたものが仕事の箱へ入っていく） ── */
.dir-a{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.dir-a .visual{background:radial-gradient(110% 90% at 0% 0%,var(--vis-1),var(--vis-2) 60%,var(--vis-3));color:var(--vis-text);padding:44px 44px 36px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;position:relative;overflow:hidden;border-right:1px solid var(--line)}
.dir-a .visual .logo{color:var(--vis-text)}
.tag{font-family:var(--display);font-weight:900;font-size:34px;line-height:1.3;letter-spacing:.01em;text-wrap:balance;margin:0;color:var(--vis-text)}
.tag em{font-style:normal;color:var(--vis-em)}
.sub2{margin:10px 0 0;color:var(--vis-text-2);font-size:14px;max-width:34ch}
.desk{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);height:234px}
.lane{position:relative}
.item{position:absolute;left:0;right:0;height:46px;padding:0 12px;border-radius:12px;background:var(--vis-card);border:1px solid var(--vis-card-line);box-shadow:0 6px 16px -10px rgba(11,42,32,.35);font-size:12px;color:var(--vis-text);display:flex;gap:8px;align-items:center;animation:fly 9s cubic-bezier(.65,0,.35,1) infinite;z-index:2}
.item svg{width:16px;height:16px;flex:none;color:var(--brand-deep)}
.item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i1{top:36px;--dy:-36px;animation-delay:0s}
.i2{top:94px;--dy:22px;animation-delay:-6s}
.i3{top:152px;--dy:-94px;animation-delay:-3s}
/* 右へ 1 列ぶん＋中央の 54px だけ飛んで、狙いの箱に重なって消える */
@keyframes fly{0%{transform:translateX(-14px);opacity:0}8%,58%{transform:none;opacity:1}74%{transform:translate(calc(100% + 54px),var(--dy)) scale(.96);opacity:1}82%,100%{transform:translate(calc(100% + 54px),var(--dy)) scale(.9);opacity:0}}
.hub{position:relative}
.hubline{position:absolute;left:50%;top:10px;bottom:10px;width:2px;transform:translateX(-50%);background:linear-gradient(transparent,var(--vis-em) 30%,var(--vis-em) 70%,transparent);opacity:.35}
.aichip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#06281b;box-shadow:0 0 0 7px color-mix(in srgb,var(--brand) 22%,transparent);animation:hum 3s ease-in-out infinite}
@keyframes hum{50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--brand) 10%,transparent)}}
.boxes{display:flex;flex-direction:column;gap:12px}
.theme{height:46px;padding:0 12px;border-radius:12px;background:var(--vis-box);border:1px dashed var(--vis-box-line);font-size:12.5px;display:flex;justify-content:space-between;align-items:center;gap:8px;animation:catch 9s ease-out infinite}
.theme b{font-weight:700;color:var(--vis-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theme small{font-family:var(--mono);color:var(--brand-deep);background:var(--vis-card);border-radius:999px;padding:1px 8px}
.t0{animation-delay:0s}.t2{animation-delay:-6s}.t1{animation-delay:-3s}.t3{animation:none}
@keyframes catch{0%,72%{border-style:dashed;background:var(--vis-box)}76%{border-style:solid;border-color:var(--brand);background:var(--vis-card);transform:scale(1.03)}88%,100%{transform:none}}
.dir-a .quote{font-size:12.5px;color:var(--vis-text-2);border-top:1px solid var(--vis-card-line);padding-top:14px;margin:0}

/* スマホ（枠がスマホのときと、画面そのものが狭いとき） */
.auth.phone{min-height:720px}
.auth.phone.dir-a{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.auth.phone.dir-a .visual{padding:28px 22px 22px;gap:12px}
.auth.phone.dir-a .tag{font-size:22px}
.auth.phone.dir-a .desk,.auth.phone.dir-a .quote,.auth.phone.dir-a .sub2{display:none}
.auth.phone.dir-a .form .logo{display:none}
.auth.phone .pane{padding:26px 20px 30px;align-items:flex-start}
.auth.phone.dir-b .pane{padding:40px 16px}
.auth.phone.dir-b .form{padding:26px 20px 20px;border-radius:24px}
.auth.phone.dir-c .visual{padding:34px 20px 64px}
.auth.phone.dir-c .pane{padding:18px 20px 30px}
.auth.phone .form h2{font-size:26px}
.auth.phone .socials .btn span{display:none}
@media (max-width:760px){
  .auth.dir-a{grid-template-columns:1fr}
  .auth.dir-a .desk,.auth.dir-a .quote{display:none}
  .auth .socials .btn span{display:none}
  .pane{padding:28px 18px}
}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ── 本物の画面だけで使うもの ── */
.auth{min-height:100vh;min-height:100dvh}
.form form{display:flex;flex-direction:column;gap:18px;margin:0}
.btn.link{display:inline;width:auto;height:auto;border:none;background:none;color:var(--brand-deep);font-weight:500;font-size:13px;padding:0;cursor:pointer}
.qr{align-self:center;width:200px;height:200px;border-radius:12px;background:#fff;padding:8px;border:1px solid var(--line)}
.secret{font-family:var(--mono);font-size:13px;letter-spacing:.08em;word-break:break-all;background:var(--field);border-radius:10px;padding:10px 12px}
.otp-single{font-family:var(--mono);font-size:24px;letter-spacing:.4em;text-align:center}
@media (max-width:760px){.auth.dir-a{grid-template-rows:auto 1fr}.auth.dir-a .visual{padding:28px 22px 22px;gap:12px}.auth.dir-a .tag{font-size:22px}.auth.dir-a .sub2{display:none}.pane{align-items:flex-start}}
/* 案 A は左の面（スマホでは上の帯）にロゴがあるので、右の欄では出さない（モックと同じ） */
.dir-a .form .logo{display:none}
a.btn{text-decoration:none}