@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/complete/WantedSansVariable.min.css');
/* AI HUB 로그인. 허브의 유일한 진입점이라 사이트 GNB·푸터를 쓰지 않는다.
   좌: 사이트 히어로와 같은 블루그레이 배면에 블루·라임 블룸만. 우: 흰 판에 폼 하나.
   색은 DS 2.3 (Ink #19334F · Muted #50657B · Blue #1868DB · Navy #123263 · Line #D7E4EF).
   글자 크기는 DS 2.3 §5 + 2026-09-14 히어로 보정: 키 제목 52/650, 도입 20, 폼·CTA 18, 안내·경로 16, 라벨 13. */
.hub-login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;color:#19334F}
.hub-login *{box-sizing:border-box}
.hub-login p,.hub-login h1,.hub-login h2,.hub-login label{word-break:keep-all;overflow-wrap:anywhere}

/* 왼쪽 판 */
.hub-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#EEF4F8;isolation:isolate}
.hub-stage .mesh{position:absolute;inset:-12%;z-index:-2;filter:blur(52px);
 background:
  radial-gradient(60% 54% at 100% 100%,#DDF344 0%,#DDF344 26%,#DDF344cc 42%,#DDF34400 70%),
  radial-gradient(78% 84% at 0% 100%,#1868DB 0%,#1868DB 34%,#1868DBd9 54%,#1868DB00 84%),
  radial-gradient(60% 56% at 100% 62%,#3E8BEE 0%,#3E8BEEb3 36%,#3E8BEE00 76%),
  linear-gradient(160deg,#DAE7F0 0%,#AACAE3 45%,#6FA9E6 100%)}
.hub-stage .copy{position:absolute;left:clamp(40px,6vw,88px);right:clamp(40px,6vw,88px);bottom:clamp(48px,8vh,96px);color:#fff;text-shadow:0 1px 12px #12326333}
.hub-stage .brand{position:absolute;left:clamp(40px,6vw,88px);top:clamp(36px,6vh,64px);color:#fff;text-shadow:0 1px 12px #12326333}
.nf-page main .hub-stage .brand .nf-eyebrow{display:block;margin-bottom:6px;font-size:13px;letter-spacing:.18em;color:#fff;opacity:.85}
.hub-stage .brand strong{display:block;font-size:clamp(56px,6vw,84px);line-height:1;font-weight:700;letter-spacing:-.035em}
.nf-page main .hub-stage h2{margin:0;color:#fff;font-size:38px;line-height:1.28;font-weight:650;letter-spacing:-.02em;text-wrap:balance}
.nf-page main .hub-stage p{margin:20px 0 0;max-width:36em;font-size:18px;line-height:1.75;color:#ffffffd9}

/* 오른쪽 판 */
.hub-panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,7vh,72px) clamp(28px,7vw,112px)}
.hub-panel .mark{display:inline-flex;align-self:flex-start;text-decoration:none}
.hub-panel .mark svg{height:30px;width:auto;display:block}
.hub-form{width:100%;max-width:420px;margin-top:clamp(44px,9vh,96px)}
.nf-page main .hub-form h1{margin:0;font-size:52px;line-height:1.2;font-weight:650;letter-spacing:-.03em}
.hub-form>p{margin:24px 0 0;font-size:20px;font-weight:400;line-height:1.7;color:#50657B}
.hub-form label{display:block;margin:40px 0 10px;font-size:16px;font-weight:550}
.hub-form input[type=email]{width:100%;height:56px;padding:0 18px;border:1px solid #D7E4EF;border-radius:12px;background:#fff;font:inherit;font-size:18px;color:#19334F;transition:border-color .16s,box-shadow .16s}
.hub-form input::placeholder{color:#9AACBE}
.hub-form input:focus-visible{outline:0;border-color:#1868DB;box-shadow:0 0 0 4px #1868DB22}
.hub-form .btn{width:100%;height:56px;margin-top:20px;justify-content:center;font-size:18px;border-radius:12px}
.hub-form .note{margin:18px 0 0;font-size:16px;line-height:1.7;color:#50657B}
.hub-form .status{min-height:24px;margin:22px 0 0;padding:0;font-size:16px;line-height:1.7;color:#123263}
.hub-form .status.err{padding:14px 16px;border-radius:10px;background:#EEF4F8}
.hub-form .status:empty{display:none}
.hub-help{margin-top:clamp(40px,8vh,72px);max-width:460px;font-size:16px;line-height:1.75;color:#50657B}
.hub-help p{margin:0}.hub-help p+p{margin-top:10px}
.hub-help a{color:#1868DB;text-decoration:none;font-weight:500}
.hub-help a:hover{text-decoration:underline}
.hub-help .linklike{background:none;border:0;padding:0;font:inherit;font-weight:600;color:#1868DB;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.hub-dialog{width:min(520px,calc(100vw - 32px));padding:0;border:0;border-radius:20px;background:#fff;color:#19334F;box-shadow:0 24px 64px #12326333}
.hub-dialog::backdrop{background:#12326399;backdrop-filter:blur(4px)}
.hub-dialog .close{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:#EEF4F8;color:#50657B;font-size:26px;line-height:1;cursor:pointer}
.hub-dialog .close:hover{background:#D7E4EF;color:#19334F}
.hub-invite{margin:0;max-width:none;padding:36px}
.nf-page main .hub-invite h2{margin:0;font-size:24px;line-height:1.3;font-weight:650;color:#19334F}
.hub-invite>p{margin:8px 0 0;font-size:16px;color:#50657B}
.hub-invite label{margin:22px 0 8px}
.hub-invite input[type=text],.hub-invite input[type=email],.hub-invite textarea{width:100%;padding:0 16px;border:1px solid #D7E4EF;border-radius:12px;background:#fff;font:inherit;font-size:17px;color:#19334F}
.hub-invite input[type=text],.hub-invite input[type=email]{height:52px}
.hub-invite textarea{padding:12px 16px;resize:vertical;min-height:88px}
.hub-invite textarea:focus-visible,.hub-invite input:focus-visible{outline:0;border-color:#1868DB;box-shadow:0 0 0 4px #1868DB22}
.hub-invite .opt{font-weight:400;color:#50657B;font-size:14px}
.hub-invite .ck{display:flex;gap:10px;align-items:flex-start;margin:22px 0 0;font-size:15px;font-weight:400;color:#50657B}
.hub-invite .ck input{margin-top:4px;flex:none;accent-color:#1868DB}
.hub-invite .btn{margin-top:22px;height:52px}
.hub-invite .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hub-legal{display:flex;gap:18px;margin-top:18px;font-size:16px;color:#50657B}
.hub-legal a{color:inherit;text-decoration:none}
.hub-legal a:hover{color:#19334F}

@media (max-width:900px){
 .hub-login{grid-template-columns:1fr;min-height:auto}
 .hub-stage{min-height:260px;order:-1}
 .hub-stage .copy{left:20px;right:20px;bottom:28px;color:#123263;text-shadow:none}
 .hub-stage .brand{left:20px;top:24px;color:#123263;text-shadow:none}
 .nf-page main .hub-stage .brand .nf-eyebrow{color:#123263}
 .hub-stage .brand strong{font-size:44px}
 .hub-stage{position:relative;height:auto;min-height:300px}
 .nf-page main .hub-stage h2,.nf-page main .hub-stage .nf-eyebrow{color:#123263}
 .nf-page main .nf-page main .hub-stage h2{font-size:29px}
 .nf-page main .hub-stage .nf-eyebrow{font-size:12px}
 .nf-page main .hub-stage p{display:none}
 .hub-panel{padding:36px 20px 48px}
 .hub-form{margin-top:32px}
 .nf-page main .hub-form h1{font-size:32px}
 .hub-form>p{font-size:17px;margin-top:20px}
 .hub-form .btn{height:52px}
}
@media (prefers-reduced-motion:no-preference){
 .hub-form input,.hub-form .btn{transition-duration:.16s}
}
