@charset "UTF-8";
@import url("../assets/_core.css");

/* LOGIN — split screen */
html,body{height:100%}
body{overflow:hidden}
.auth{display:grid;grid-template-columns:1.05fr 1fr;height:100svh}

/* left media */
.auth-media{position:relative;overflow:hidden}
.auth-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) brightness(.6) contrast(1.03);transform:scale(1.05);animation:slowdrift 26s var(--ease) forwards}
@keyframes slowdrift{to{transform:scale(1)}}
.auth-media::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(8,7,6,.55),rgba(8,7,6,.35) 50%,rgba(8,7,6,.78))}
.auth-media .m-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(34px,4vw,56px)}
.auth-media .m-brand .b1{font-family:var(--serif-en);font-size:26px;letter-spacing:.36em;color:var(--paper)}
.auth-media .m-brand .b2{font-family:var(--serif-en);font-size:10px;letter-spacing:.46em;text-transform:uppercase;color:var(--gold);margin-top:6px;padding-left:.3em}
.auth-media .m-quote{font-family:var(--serif-jp);font-size:clamp(20px,2vw,27px);line-height:1.8;letter-spacing:.08em;color:var(--paper);max-width:14em;text-wrap:pretty}
.auth-media .m-quote span{display:block;font-family:var(--serif-en);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);margin-top:18px}

/* right form */
.auth-panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,80px);position:relative;background:var(--ink-2);overflow-y:auto}
.auth-box{width:100%;max-width:400px;margin:0 auto}
.auth-back{position:absolute;top:clamp(24px,3vw,38px);right:clamp(24px,3vw,38px);font-family:var(--serif-en);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-2);transition:color .4s var(--ease)}
.auth-back:hover{color:var(--gold)}
.auth-box .eyebrow{margin-bottom:22px}
.auth-box h1{font-family:var(--serif-en);font-weight:400;font-size:clamp(38px,4.4vw,52px);line-height:1.02;letter-spacing:.03em;margin-bottom:10px}
.auth-box .sub{color:var(--mute);font-size:14.5px;line-height:1.9;margin-bottom:40px}
.auth-err{display:none;align-items:center;gap:10px;font-size:13.5px;color:#e0a59a;letter-spacing:.04em;padding:13px 16px;border:1px solid rgba(224,165,154,.3);background:rgba(224,165,154,.06);margin-bottom:24px}
.auth-err.show{display:flex;animation:fadeUp .5s var(--ease)}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin:-12px 0 30px}
.remember{display:flex;gap:10px;align-items:center;cursor:pointer;font-size:13px;color:var(--mute)}
.remember input{position:absolute;opacity:0}
.remember .box{width:16px;height:16px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.remember .box::after{content:"✓";font-size:10px;color:#1a1409;opacity:0;transition:.3s var(--ease)}
.remember input:checked+.box{background:var(--gold);border-color:var(--gold)}
.remember input:checked+.box::after{opacity:1}
.auth-row a{font-size:12.5px;color:var(--mute-2);letter-spacing:.04em;transition:color .4s var(--ease)}
.auth-row a:hover{color:var(--gold)}
.auth-div{display:flex;align-items:center;gap:18px;margin:34px 0;color:var(--mute-3);font-family:var(--serif-en);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.auth-div::before,.auth-div::after{content:"";flex:1;height:1px;background:var(--line-2)}
.auth-alt{display:flex;flex-direction:column;gap:14px}
.auth-alt a{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border:1px solid var(--line-2);font-size:14px;letter-spacing:.05em;color:var(--mute);transition:all .4s var(--ease)}
.auth-alt a .ar{font-family:var(--serif-en);color:var(--mute-3);transition:.4s var(--ease)}
.auth-alt a:hover{border-color:var(--line);color:var(--paper)}
.auth-alt a:hover .ar{color:var(--gold);transform:translateX(4px)}
.demo-hint{margin-top:30px;padding:16px 18px;border:1px dashed var(--line);background:rgba(201,169,106,.03);font-size:12.5px;color:var(--mute-2);line-height:1.9;letter-spacing:.04em}
.demo-hint b{color:var(--gold-2);font-weight:500;font-family:var(--serif-en);letter-spacing:.08em}

/* クリームテーマ：画像上のテキストは常に明るい色に固定 */
body.theme-cream .auth-media .m-brand .b1{color:#f3ede2}
body.theme-cream .auth-media .m-brand .b2{color:#c9a96a}
body.theme-cream .auth-media .m-quote{color:#f3ede2}
body.theme-cream .auth-media .m-quote span{color:#a99f8d}

@media (max-width:900px){
  body{overflow:auto}
  .auth{grid-template-columns:1fr}
  .auth-media{min-height:40vh}
  .auth-panel{min-height:60vh;padding-top:60px;padding-bottom:60px}
  .auth-media .m-brand .b1{font-size:20px;letter-spacing:.22em}
  .auth-media .m-brand .b2{font-size:9px;letter-spacing:.3em}
  .auth-media .m-quote{font-size:16px;letter-spacing:.04em;line-height:1.7}
  .auth-media .m-quote span{font-size:10px;letter-spacing:.22em;margin-top:12px}
  .auth-media .m-inner{padding:24px}
}