:root{--ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(0,0,.2,1);color-scheme:dark;--bg:#0f1115;--card:#15171c;--panel:#16181d;--line:#22262e;--line-2:#262a33;--text:#eef1f6;--sub:#a3abb9;--faint:#8a93a3;--error:#ff9b78}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif}
a{color:#ffa27f}
.wrap{max-width:1120px;margin:0 auto;padding-inline:24px}
.top{border-bottom:1px solid #1f232b}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#c9cfda;font-size:15px;font-weight:600;transition:color .15s var(--ease),opacity .15s var(--ease)}
.brand:hover{color:#fff}
.brand:hover img{opacity:.85}
.brand img{transition:opacity .15s var(--ease)}
.brand img{display:block;height:30px;width:auto}
.sep{width:1px;height:20px;background:#2b2f38}
main.hub{padding-block:40px 72px;display:flex;flex-direction:column;gap:40px}
section{display:flex;flex-direction:column;gap:20px}
h2{animation:rise .3s var(--ease-out) both;margin:0;padding-bottom:12px;border-bottom:1px solid #1f232b;font-size:22px;font-weight:700;letter-spacing:-.01em}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:18px;background:var(--panel);border:1px solid var(--line-2);color:var(--text);text-decoration:none;min-height:180px;transition:transform .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease);animation:rise .32s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms + 60ms)}
.card:hover{transform:translateY(-3px);border-color:#3a3f4a;background:#191c22;box-shadow:0 14px 32px rgba(0,0,0,.35)}
.card:active{transform:translateY(-1px) scale(.985);transition-duration:.08s}
.card img{transition:transform .25s var(--ease)}
.card:hover img{transform:scale(1.05)}
.card:focus-visible{outline:2px solid #ffa27f;outline-offset:2px}
.card.locked{opacity:.38;pointer-events:none}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card .text{display:flex;flex-direction:column;gap:6px;flex-grow:1}
.card .text b{font-size:18px;font-weight:650}
.card .text span{font-size:14px;color:var(--sub);line-height:1.5}
.card .go{color:#6f7888;display:flex;transition:transform .2s var(--ease),color .2s var(--ease)}
.card:hover .go{color:#eef1f6;transform:translateX(3px)}
.card.wide:hover .go{transform:translate(2px,-2px)}
.card .domain{font-size:12px;color:var(--faint);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip{flex-shrink:0;font-size:12px;padding:3px 9px;border-radius:999px;background:#22262e;color:#c9cfda}
.card.wide{flex-direction:row;align-items:center;min-height:0;max-width:520px;padding:16px 20px}
.card.wide .text b{font-size:16px}
.card.wide .text span{font-size:13px}
.login{width:100%;max-width:340px;margin:auto;padding:48px 36px 40px;border-radius:24px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:36px;animation:pop-in .35s var(--ease-out) both}
main.hub .login{margin-top:80px}
.identity{display:flex;flex-direction:column;align-items:center;gap:28px}
.identity h1{margin:0;font-size:30px;font-weight:750;letter-spacing:-.03em;line-height:1.1;text-align:center}
.identity img{display:block;animation:logo-in .45s var(--ease-out) .08s both}
.actions{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.google{width:100%;height:52px;border-radius:999px;border:1px solid #3a3f4a;background:transparent;color:var(--text);font:inherit;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:background-color .15s var(--ease),border-color .15s var(--ease),transform .1s var(--ease),box-shadow .15s var(--ease);animation:fade .2s var(--ease-out)}
.google:hover{background:#1c1f26;border-color:#4a505c;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.google:active{transform:scale(.97)}
.google svg{transition:transform .2s var(--ease)}
.google:hover svg{transform:rotate(-8deg) scale(1.08)}
.google:focus-visible{outline:2px solid #ffa27f;outline-offset:2px}
.google.busy{border-color:#2b2f38;background:#1c1f26;color:#c9cfda;cursor:default;box-shadow:none}
.google.busy:active{transform:none}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid #3a3f4a;border-top-color:var(--text);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes pop-in{from{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes logo-in{from{opacity:0;transform:scale(.8) rotate(-6deg)}}
@keyframes shake{0%{opacity:0;transform:translateX(0)}25%{opacity:1;transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}100%{transform:translateX(0)}}
.error{margin:0;font-size:13px;color:var(--error);text-align:center;animation:shake .35s var(--ease) both}
body.sso{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 72px}
body.sso main{width:100%;display:flex;justify-content:center}
.maker{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);height:16px;width:auto;opacity:.35;animation:fade .6s var(--ease-out) .2s both}
/* 같은 화면을 다시 그릴 때는 등장 애니메이션을 생략한다(상태만 바뀜) */
.calm .login,.calm .identity img,.calm h2,.calm .card{animation:none}
@media (max-width:480px){.login{padding:40px 24px 32px}.identity h1{font-size:26px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:1ms!important}}