/* Lucian UX/UI Prompt #064 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#064 */
/*
 * マイページのログイン（ログイン用リンクをメールで送る）。lp/u064.js が動かす。
 * 色は tokens.css の --z-* に対応させる。サイトにダークテーマはまだないため、
 * ダークの値は :root[data-theme="dark"] のときだけ使う（元のダークの値をそのまま残している）。
 */
.u064{
  --ux-surface:#fff;
  --ux-surface-2:var(--z-surface);
  --ux-ink:var(--z-navy);
  --ux-ink-3:var(--z-text-4);
  --ux-line:var(--z-border);
  --ux-line-2:var(--z-border-input);
  --ux-accent:var(--z-blue);
  --ux-accent-soft:rgba(61,90,254,.14);
  --ux-accent-ink:#fff;
  --ux-mint:var(--z-success);
  --ux-danger:var(--z-error);
  --ux-page:#fff;
  --ux-shadow-strong:rgba(11,21,48,.3);
  /* 封筒の色（元の紫を、zaitoの青に置き換え） */
  --ux-env-back:#C5CEFF;
  --ux-env-front-1:#8C9DFF;
  --ux-env-front-2:#3D5AFE;
  --ux-env-flap:#6F84FF;
  --ux-env-line:#E6E9F7;
  --ux-env-line-1:#5C74FF;
  --ux-ease:cubic-bezier(.2,.8,.2,1);
  --ux-spring:cubic-bezier(.34,1.45,.64,1);
}
:root[data-theme="dark"] .u064{
  --ux-surface:#13141C;--ux-surface-2:#1A1B25;--ux-ink:#F4F0E8;--ux-ink-3:rgba(244,240,232,.42);
  --ux-line:rgba(255,255,255,.08);--ux-line-2:rgba(255,255,255,.16);
  --ux-accent:#A9B8FF;--ux-accent-soft:rgba(169,184,255,.15);--ux-accent-ink:#0B0C12;
  --ux-mint:#7EE8C0;--ux-danger:#FF7D8C;--ux-page:#07080D;--ux-shadow-strong:rgba(0,0,0,.72);
}
.u064,.u064 *,.u064 *::before,.u064 *::after{box-sizing:border-box}
.u064 [hidden]{display:none!important}
.u064 :focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}

/* 日本語の説明が入るぶん、元の 470px より高くしている */
.u064{position:relative;width:340px;max-width:100%;height:540px;margin:0 auto;border-radius:30px;background:var(--ux-surface);color:var(--ux-ink);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);overflow:hidden}
.u064-art{position:absolute;left:50%;top:40px;width:180px;height:150px;margin-left:-90px;transition:transform .7s cubic-bezier(.5,-.3,.6,1),opacity .5s}
.u064.fly .u064-art{transform:translate(170px,-160px) rotate(18deg) scale(.4);opacity:0}
.u064.sent .u064-art{transform:none;opacity:1;transition:transform .7s var(--ux-spring),opacity .4s}
.u064-env{position:absolute;left:10px;right:10px;bottom:0;height:104px;perspective:400px}
.u064-clip{position:absolute;left:0;right:0;top:-90px;bottom:0;overflow:hidden;border-radius:0 0 12px 12px}
.u064-back{position:absolute;left:0;right:0;bottom:0;height:104px;border-radius:12px;background:var(--ux-env-back)}
.u064-letter{position:absolute;left:16px;right:16px;bottom:30px;height:118px;border-radius:8px;background:#fff;box-shadow:0 4px 14px rgba(11,21,48,.2);padding:14px;transition:transform .6s var(--ux-ease)}
.u064-letter i{display:block;height:7px;margin-bottom:8px;border-radius:4px;background:var(--ux-env-line)}
.u064-letter i:first-child{width:46%;background:var(--ux-env-line-1)}
.u064-letter i:nth-child(3){width:70%}
.u064-front{position:absolute;inset:0;border-radius:12px;background:linear-gradient(160deg,var(--ux-env-front-1),var(--ux-env-front-2));clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%)}
.u064-flap{position:absolute;left:0;right:0;top:0;height:64px;transform-origin:50% 0;transform:rotateX(180deg);transition:transform .5s var(--ux-ease)}
.u064-flap::before{content:"";position:absolute;inset:0;background:var(--ux-env-flap);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:12px 12px 0 0}
.u064.sealed .u064-letter{transform:translateY(70px)}
.u064.sealed .u064-flap{transform:none;transition-delay:.45s}
.u064-badge{position:absolute;right:-6px;top:-10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ux-mint);color:var(--ux-accent-ink);box-shadow:0 0 0 4px var(--ux-surface);transform:scale(0);transition:transform .5s var(--ux-spring) .3s}
.u064-badge svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.u064.sent .u064-badge{transform:none}
.u064-pane{position:absolute;left:0;right:0;bottom:0;top:208px;margin:0;padding:0 26px 24px;display:flex;flex-direction:column;text-align:center;transition:transform .55s var(--ux-ease),opacity .35s}
.u064 .u064-pane h2,.u064 .u064-pane h3{margin:0;padding:0;border:0;font-size:21px;font-weight:900;line-height:1.4;letter-spacing:-.02em;color:var(--ux-ink)}
.u064 .u064-pane p{margin:6px 0 18px;font-size:13.5px;line-height:1.6;color:var(--ux-ink-3)}
.u064 .u064-pane p b{color:var(--ux-ink);word-break:break-all}
.u064-done{transform:translateY(30px);opacity:0;pointer-events:none}
.u064.sent .u064-ask{transform:translateY(-20px);opacity:0;pointer-events:none}
.u064.sent .u064-done{transform:none;opacity:1;pointer-events:auto;transition-delay:.15s}
.u064-box{display:flex;align-items:center;height:52px;padding:0 16px;border-radius:15px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .25s,background-color .25s;cursor:text}
.u064-box:focus-within{background:var(--ux-surface);box-shadow:inset 0 0 0 1.5px var(--ux-accent),0 0 0 4px var(--ux-accent-soft)}
.u064-box.bad{box-shadow:inset 0 0 0 1.5px var(--ux-danger)}
.u064-box input{flex:1;min-width:0;height:100%;border:0;padding:0;background:none;font:inherit;font-size:16px;font-weight:600;color:var(--ux-ink);outline:none;text-align:left}
.u064-box input:focus-visible{outline:none}
.u064-box input::placeholder{color:var(--ux-ink-3);font-weight:500}
.u064-b{height:52px;margin-top:10px;border:0;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ux-ink);color:var(--ux-page);font:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .3s var(--ux-spring),opacity .3s}
.u064-b:hover{color:var(--ux-page)}
.u064-b:active{transform:scale(.97)}
.u064-b.ghost,.u064-b.ghost:hover{background:var(--ux-surface-2);color:var(--ux-ink)}
.u064-b[aria-disabled="true"]{opacity:.55;cursor:default}
.u064-ring{width:20px;height:20px;transform:rotate(-90deg)}
.u064-ring circle{fill:none;stroke-width:2.5}
.u064-ring .t{stroke:var(--ux-line-2)}
.u064-ring .p{stroke:var(--ux-accent);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0) * 100);stroke-linecap:round}
.u064-link{align-self:center;margin-top:12px;border:0;padding:4px;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--ux-ink-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.u064 .u064-err{margin:10px 0 0;font-size:13px;font-weight:700;color:var(--ux-danger);line-height:1.5}

@media (prefers-reduced-motion:reduce){
  .u064,.u064 *,.u064 *::before,.u064 *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}