/* StellaNet v4.30 — login, setup, invite and account pages (Toss/Apple-like; light/dark; phones first). Shared by login.html and account.html. */
:root{--bg:#f2f4f6;--surface:#fff;--surface-2:#f9fafb;--ink:#191f28;--ink-2:#4e5968;--ink-3:#8b95a1;--line:#e5e8eb;--accent:#3182f6;--accent-2:#1b64da;--accent-soft:#e8f3ff;--good:#0f9d58;--good-soft:#e6f6ee;--bad:#e34948;--bad-soft:#fdeeee;--warn:#c77700;--warn-soft:#fff5e1;--radius:22px;--field:14px;--shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06)}
@media (prefers-color-scheme:dark){:root{--bg:#101012;--surface:#1b1b1e;--surface-2:#222226;--ink:#f2f3f5;--ink-2:#c3c6cc;--ink-3:#8b9099;--line:#2e2f34;--accent:#4c94ff;--accent-2:#6aa6ff;--accent-soft:#1a2a44;--good:#34c27a;--good-soft:#14301f;--bad:#ff6b6b;--bad-soft:#3a1d1f;--warn:#f0b44c;--warn-soft:#3a2d12;--shadow:none}}
*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:"Pretendard GOV Variable","Pretendard","Hiragino Sans","Yu Gothic UI","Noto Sans JP","Noto Sans KR",system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.55;font-size:15px}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}

/* top bar */
.au-top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.6) blur(14px)}
.au-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.au-brand:hover{text-decoration:none}
.au-mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--accent);color:#fff;font-size:13px;font-weight:800;letter-spacing:0}
.au-brand small{color:var(--ink-3);font-weight:600;font-size:14px}
.au-top-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.au-seg{display:inline-flex;background:var(--line);border-radius:12px;padding:3px}
.au-seg button{border:0;background:transparent;color:var(--ink-2);font-size:13px;font-weight:600;padding:6px 11px;border-radius:9px;cursor:pointer}
.au-seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.au-link{color:var(--ink-2);font-size:14px;font-weight:600}

/* login column */
.au-center{display:grid;place-items:start center;padding:24px 16px 64px}
.au-card{width:100%;max-width:420px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 28px}
.au-hero{margin:0 0 24px}
.au-hero h1{margin:14px 0 6px;font-size:26px;letter-spacing:-.03em;line-height:1.3}
.au-hero p{margin:0;color:var(--ink-2)}
.au-eyebrow{margin:0;color:var(--accent);font-weight:700;font-size:14px}
.au-form{display:grid;gap:14px}
.au-field{display:grid;gap:6px}
.au-field>span{font-size:13px;font-weight:600;color:var(--ink-2)}
.au-in{width:100%;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--field);padding:13px 14px;font-size:16px;transition:border-color .15s,background .15s}
.au-in:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.au-in[readonly]{color:var(--ink-2)}
.au-pw{position:relative}
.au-pw .au-in{padding-right:64px}
.au-pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--ink-3);font-size:13px;font-weight:600;padding:8px 10px;border-radius:10px;cursor:pointer}
.au-hint{margin:0;font-size:13px;color:var(--ink-3)}
.au-meter{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.au-meter i{display:block;height:100%;width:0;background:var(--bad);transition:width .2s,background .2s}
.au-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--field);padding:13px 18px;font-size:16px;font-weight:700;cursor:pointer;background:var(--accent-soft);color:var(--accent);transition:filter .15s,transform .05s}
.au-btn:active{transform:scale(.99)}
.au-btn.primary{background:var(--accent);color:#fff}
.au-btn.primary:hover{background:var(--accent-2)}
.au-btn.ghost{background:transparent;color:var(--ink-2);padding:10px 12px}
.au-btn.danger{background:var(--bad-soft);color:var(--bad)}
.au-btn.small{font-size:13px;padding:8px 12px;border-radius:11px}
.au-btn[disabled]{opacity:.55;cursor:default}
.au-btn.block{width:100%}
.au-msg{margin:0;padding:12px 14px;border-radius:14px;font-size:14px;background:var(--bad-soft);color:var(--bad)}
.au-card>.au-msg{margin-bottom:16px}
.au-msg.ok{background:var(--good-soft);color:var(--good)}
.au-msg.info{background:var(--accent-soft);color:var(--accent)}
.au-msg.warn{background:var(--warn-soft);color:var(--warn)}
.au-sep{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:var(--ink-3);font-size:13px}
.au-sep::before,.au-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.au-foot{margin:18px 0 0;color:var(--ink-3);font-size:13px;text-align:center}
.au-who{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--surface-2);margin:0 0 6px}
.au-dot{flex:none;display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.au-who b{display:block}
.au-who span{color:var(--ink-3);font-size:13px}

/* account page */
.au-main{max-width:880px;margin:0 auto;padding:8px 16px 72px;display:grid;gap:16px}
.au-page-head{padding:20px 4px 4px}
.au-page-head h1{margin:6px 0 6px;font-size:clamp(24px,4vw,32px);letter-spacing:-.03em;line-height:1.25}
.au-page-head p{margin:0;color:var(--ink-2)}
.au-sec{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 22px}
.au-sec>h2{margin:0 0 4px;font-size:18px;letter-spacing:-.02em}
.au-sec>.au-hint{margin-bottom:14px}
.au-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.au-row>.au-field{flex:1 1 200px}
.au-swatches{display:flex;gap:8px;flex-wrap:wrap}
.au-swatch{width:30px;height:30px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0}
.au-swatch.on{border-color:var(--ink)}
.au-list{list-style:none;margin:0;padding:0;display:grid}
.au-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.au-item:first-child{border-top:0}
.au-item-main{flex:1 1 220px;min-width:0}
.au-item-main b{display:inline-flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.au-item-main small{display:block;color:var(--ink-3);font-size:13px;overflow-wrap:anywhere}
.au-item-act{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.au-badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--line);color:var(--ink-2);white-space:nowrap}
.au-badge.owner{background:var(--accent-soft);color:var(--accent)}
.au-badge.good{background:var(--good-soft);color:var(--good)}
.au-badge.bad{background:var(--bad-soft);color:var(--bad)}
.au-badge.warn{background:var(--warn-soft);color:var(--warn)}
.au-sel{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:7px 10px;font-size:14px;min-width:0}
.au-copy{display:flex;gap:8px;margin-top:10px}
.au-copy .au-in{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.au-copy .au-btn{flex:none;white-space:nowrap}
select.au-in{min-height:52px}
.au-in{min-height:50px}
.au-result{margin-top:14px;padding:16px;border-radius:16px;background:var(--accent-soft)}
.au-result p{margin:0 0 4px;color:var(--ink-2);font-size:14px}
.au-toggle{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.au-toggle:first-of-type{border-top:0}
.au-toggle div{min-width:0}
.au-toggle b{display:block;font-weight:600}
.au-toggle small{display:block;color:var(--ink-3);font-size:13px}
.au-switch{position:relative;flex:none;width:50px;height:30px;border-radius:999px;border:0;background:var(--line);cursor:pointer;transition:background .15s}
.au-switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s}
.au-switch[aria-checked=true]{background:var(--accent)}
.au-switch[aria-checked=true]::after{transform:translateX(20px)}
.au-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
.au-table{width:100%;border-collapse:collapse;font-size:13px}
.au-table th,.au-table td{text-align:left;padding:9px 6px;border-top:1px solid var(--line);vertical-align:top}
.au-table th{color:var(--ink-3);font-weight:600;border-top:0;white-space:nowrap}
.au-table td.nowrap{white-space:nowrap}
.au-routes{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.au-routes code{font-size:12px;background:var(--surface-2);border:1px solid var(--line);padding:2px 7px;border-radius:8px;overflow-wrap:anywhere}
.au-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.au-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px)}
.au-toast.on{opacity:1;transform:translate(-50%,0)}
.au-toast.bad{background:var(--bad);color:#fff}
.au-empty{color:var(--ink-3);font-size:14px;margin:4px 0 0}
.au-sub{margin:22px 0 4px!important;color:var(--ink)!important}
.au-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.42)}
.au-modal-card{width:100%;max-width:400px;background:var(--surface);border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.3);padding:24px}
.au-modal-card h2{margin:0;font-size:20px;letter-spacing:-.02em}
@media (max-width:560px){
  .au-top{padding:10px 16px}.au-brand small{display:none}.au-top-r{gap:8px 10px}.au-link{font-size:13px}
  .au-card{padding:26px 20px;border-radius:20px}
  .au-sec{padding:18px 16px}
  .au-grid2{grid-template-columns:1fr}
  .au-copy{flex-direction:column}
}