/* ============================================================
   Lesson Hub — auth.css
   認証画面（ログイン・登録・招待・パスワードリセット）共通スタイル
============================================================ */
:root {
  --black:      #080a07;
  --black-2:    #0d110c;
  --green-950:  #0a160a;
  --green-800:  #163318;
  --green-700:  #1e4820;
  --green-200:  #9dd4a3;
  --gold:       #c9a84c;
  --gold-light: #e8c97a;
  --gold-dim:   #7a6330;
  --cream:      #f5f0e8;
  --cream-dim:  #c8c0ad;
  --gray-mid:   #3a3d38;
  --gray-light: #6b6e68;
  --red:        #c0392b;
  --white:      #ffffff;
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Noto Serif JP', serif;
  --font-mono:    'Space Mono', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--cream);font-family:var(--font-body);font-weight:300;line-height:1.8;min-height:100vh;display:flex;flex-direction:column;cursor:none;-webkit-font-smoothing:antialiased;}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:9990;opacity:0.4;}
.cursor{position:fixed;width:8px;height:8px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference;}
.cursor-ring{position:fixed;width:36px;height:36px;border:1px solid rgba(201,168,76,0.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width 0.2s,height 0.2s,border-color 0.2s;}
body:has(a:hover) .cursor-ring,body:has(button:hover) .cursor-ring{width:54px;height:54px;border-color:var(--gold);}

/* NAV */
.auth-nav{display:flex;align-items:center;justify-content:space-between;padding:20px 48px;border-bottom:1px solid rgba(201,168,76,0.08);flex-shrink:0;}
.auth-nav-logo{display:flex;flex-direction:column;text-decoration:none;gap:1px;}
.auth-nav-logo-main{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--white);letter-spacing:0.04em;line-height:1;}
.auth-nav-logo-by{font-family:var(--font-mono);font-size:9px;color:var(--gold);letter-spacing:0.18em;text-transform:uppercase;}
.auth-nav-back{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream-dim);text-decoration:none;transition:color 0.2s;display:flex;align-items:center;gap:8px;}
.auth-nav-back:hover{color:var(--gold);}

/* LAYOUT */
.auth-wrap{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 126px);}

/* VISUAL */
.auth-visual{background:linear-gradient(135deg,var(--green-950) 0%,var(--green-800) 60%,rgba(201,168,76,0.04) 100%);padding:64px 56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;border-right:1px solid rgba(201,168,76,0.08);}
.auth-visual::before{content:'𝄞';position:absolute;font-family:var(--font-display);font-size:320px;color:rgba(30,72,32,0.15);line-height:1;bottom:-40px;right:-20px;pointer-events:none;}
.auth-visual-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;display:flex;align-items:center;gap:10px;}
.auth-visual-label::before{content:'';width:24px;height:1px;background:var(--gold);}
.auth-visual-title{font-family:var(--font-display);font-size:clamp(28px,3vw,48px);font-weight:300;color:var(--white);line-height:1.15;letter-spacing:-0.02em;margin-bottom:20px;}
.auth-visual-title em{font-style:italic;color:var(--green-200);}
.auth-visual-desc{font-size:14px;color:var(--cream-dim);line-height:2;max-width:360px;}
.auth-visual-features{display:flex;flex-direction:column;gap:14px;margin-top:36px;}
.auth-visual-feature{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:var(--cream-dim);line-height:1.7;}
.auth-visual-feature::before{content:'';width:16px;height:1px;background:var(--gold-dim);flex-shrink:0;margin-top:10px;}
.auth-visual-bottom{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;color:var(--gray-light);}

/* FORM PANEL */
.auth-form-panel{padding:56px;display:flex;flex-direction:column;justify-content:center;background:var(--black-2);overflow-y:auto;}
.auth-form-header{margin-bottom:36px;}
.auth-form-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:10px;}
.auth-form-eyebrow::before{content:'';width:20px;height:1px;background:var(--gold);}
.auth-form-title{font-family:var(--font-display);font-size:clamp(26px,2.8vw,40px);font-weight:300;color:var(--white);line-height:1.15;letter-spacing:-0.02em;}
.auth-form-title em{font-style:italic;color:var(--green-200);}
.auth-form-sub{font-size:13px;color:var(--cream-dim);margin-top:8px;line-height:1.8;}

/* FORM PARTS */
.form-group{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
.form-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:6px;}
.form-required{color:var(--red);}
.form-input,.form-select,.form-textarea{width:100%;background:rgba(30,72,32,0.06);border:1px solid rgba(201,168,76,0.15);color:var(--cream);font-family:var(--font-body);font-size:15px;font-weight:300;padding:13px 16px;outline:none;transition:border-color 0.2s,background 0.2s;border-radius:0;appearance:none;}
.form-input::placeholder,.form-textarea::placeholder{color:var(--gray-light);font-size:13px;}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:rgba(201,168,76,0.5);background:rgba(30,72,32,0.1);}
.form-input.error,.form-select.error,.form-textarea.error{border-color:rgba(192,57,43,0.5);}
.form-error-msg{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;color:var(--red);display:none;}
.form-error-msg.show{display:block;}
.form-hint{font-size:12px;color:var(--gray-light);line-height:1.7;}
.input-pw-wrap{position:relative;}
.input-pw-wrap .form-input{padding-right:48px;}
.pw-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--gray-light);cursor:none;padding:0;display:flex;align-items:center;}
.pw-toggle svg{width:18px;height:18px;}
.form-select{cursor:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;}
.form-select option{background:var(--black-2);color:var(--cream);}
.form-textarea{resize:vertical;min-height:100px;line-height:1.8;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:8px;}
.form-checkbox-wrap{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--cream-dim);line-height:1.7;cursor:none;}
.form-checkbox-wrap input[type="checkbox"]{width:16px;height:16px;flex-shrink:0;margin-top:3px;accent-color:var(--gold);cursor:none;}
.form-checkbox-wrap a,.form-link-small{color:var(--gold-dim);text-decoration:none;transition:color 0.2s;font-size:12px;}
.form-checkbox-wrap a:hover,.form-link-small:hover{color:var(--gold);}
.form-section-title{font-family:var(--font-display);font-size:20px;font-weight:400;color:var(--white);margin:28px 0 16px;padding-bottom:10px;border-bottom:1px solid rgba(201,168,76,0.1);letter-spacing:-0.01em;}
.form-divider{height:1px;background:linear-gradient(90deg,rgba(201,168,76,0.15),transparent);margin:24px 0;}

/* ALERT */
.auth-alert{background:rgba(192,57,43,0.08);border:1px solid rgba(192,57,43,0.3);border-left:3px solid var(--red);padding:13px 16px;margin-bottom:20px;font-size:13px;color:#e87070;line-height:1.7;display:none;}
.auth-alert.show{display:block;}

/* SUBMIT */
.btn-auth-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--black);background:var(--gold);border:none;padding:15px;cursor:none;margin-top:6px;transition:background 0.2s,transform 0.2s var(--ease);}
.btn-auth-submit:hover{background:var(--gold-light);transform:translateY(-1px);}
.btn-auth-submit:disabled{opacity:0.5;transform:none;}
.btn-auth-submit svg{width:16px;height:16px;transition:transform 0.3s var(--ease);}
.btn-auth-submit:hover svg{transform:translateX(3px);}

/* LINKS */
.auth-links{margin-top:22px;display:flex;flex-direction:column;gap:9px;padding-top:22px;border-top:1px solid rgba(201,168,76,0.08);}
.auth-link{font-size:13px;color:var(--cream-dim);text-align:center;}
.auth-link a{color:var(--gold-dim);text-decoration:none;transition:color 0.2s;}
.auth-link a:hover{color:var(--gold);}

/* FOOTER */
.auth-footer{padding:18px 48px;flex-shrink:0;border-top:1px solid rgba(201,168,76,0.06);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.auth-footer-logo{font-family:var(--font-display);font-size:14px;color:var(--gray-light);}
.auth-footer-logo span{color:var(--gold);}
.auth-footer-links{display:flex;gap:20px;}
.auth-footer-links a{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gray-light);text-decoration:none;transition:color 0.2s;}
.auth-footer-links a:hover{color:var(--gold);}

/* RESPONSIVE */
@media(max-width:960px){.auth-wrap{grid-template-columns:1fr;}.auth-visual{display:none;}.auth-form-panel{padding:48px 40px;justify-content:flex-start;padding-top:40px;}}
@media(max-width:600px){.auth-nav{padding:16px 20px;}.auth-form-panel{padding:32px 20px;}.auth-footer{padding:16px 20px;}.form-row{grid-template-columns:1fr;}body{cursor:auto;}.cursor,.cursor-ring{display:none;}}