:root { --gateway-green: #5ce6ac; --gateway-mint: #a8ffdc; --gateway-ink: #06110e; --gateway-line: rgba(132, 220, 186, .18); }
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; color-scheme: dark; }
body { margin: 0; font-family: Inter, Pretendard, "Noto Sans KR", "Segoe UI", sans-serif; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid #7cf2c1; outline-offset: 3px; }
.gateway-page { min-height: 100svh; overflow: hidden; color: #e9f8f1; background: #06100d; }
.gateway-scene { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: #071510; opacity: 0; animation: scene-enter .7s ease-out forwards; }
.scene-depth { position: absolute; z-index: -5; pointer-events: none; }
.scene-depth-a { inset: -18% 36% 30% -12%; background: radial-gradient(ellipse at 40% 40%, #174b39 0%, #0d291f 35%, transparent 72%); transform: rotate(-8deg); }
.scene-depth-b { inset: 20% -20% -32% 32%; background: radial-gradient(ellipse at center, rgba(21, 82, 61, .78), rgba(7, 27, 21, .45) 44%, transparent 74%); transform: rotate(13deg); }
.scene-grid { position: absolute; z-index: -4; inset: 0; background-image: linear-gradient(rgba(110, 186, 157, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 186, 157, .055) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.72) 58%, transparent 96%); }
.scene-grid::before { position: absolute; inset: 0; background: repeating-linear-gradient(116deg, transparent 0 110px, rgba(108, 214, 172, .025) 111px 112px); content: ""; }
.workspace-map { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }
.map-contour { fill: none; stroke: rgba(110, 213, 170, .075); stroke-width: 1; }
.workspace-zone { fill: url(#zoneFill); stroke: rgba(88, 211, 161, .12); stroke-width: 1; opacity: .46; }
.zone-two { opacity: .2; }
.route { fill: none; stroke-linecap: round; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: route-draw 1.8s .35s cubic-bezier(.32,.7,.22,1) forwards; }
.route-primary { stroke: url(#routeMain); filter: url(#routeGlow); }
.route-secondary, .route-branch { stroke: rgba(88, 211, 161, .28); animation-delay: .72s; }
.map-node { color: #86d7b5; opacity: 0; animation: node-enter .45s 1.5s ease-out forwards; }
.map-node:nth-of-type(2) { animation-delay: 1.68s; }.map-node:nth-of-type(3) { animation-delay: 1.84s; }.map-node:nth-of-type(4) { animation-delay: 2s; }.map-node:nth-of-type(5) { animation-delay: 2.16s; }
.map-node circle:first-child { fill: #0a2018; stroke: rgba(111, 236, 185, .42); }
.map-node .node-core { fill: #6df0b8; stroke: none; filter: drop-shadow(0 0 5px #58d9a5); }
.map-node text { fill: currentColor; font-size: 8px; font-weight: 750; letter-spacing: 1.4px; }
.gateway-brand { position: absolute; top: clamp(28px, 5vw, 66px); left: clamp(28px, 6vw, 90px); display: flex; align-items: center; gap: 13px; opacity: 0; animation: element-enter .55s 1.75s ease-out forwards; }
.gateway-symbol { position: relative; display: grid; width: 38px; height: 38px; grid-template: 1fr 1fr / 1fr 1fr; gap: 3px; padding: 7px; border: 1px solid rgba(124, 242, 193, .42); }
.gateway-symbol i { background: #65dcab; }.gateway-symbol i:nth-child(2), .gateway-symbol i:nth-child(3) { opacity: .28; }
.gateway-symbol b { position: absolute; right: -5px; bottom: -5px; width: 9px; height: 9px; background: #0b1b16; border: 1px solid #7cf2c1; }
.gateway-brand div { display: grid; gap: 1px; }.gateway-brand strong { font-size: 16px; letter-spacing: -.02em; }.gateway-brand small { color: #668e7d; font-size: 7px; font-weight: 800; letter-spacing: .19em; }
.project-fragment { position: absolute; display: grid; width: 190px; gap: 3px; padding: 12px 13px; color: #86a99a; background: #0a1d17; border-left: 2px solid #3cae7d; box-shadow: 0 16px 40px rgba(0,0,0,.16); opacity: 0; animation: fragment-enter .55s 1.92s ease-out forwards; }
.project-fragment span { font-size: 7px; font-weight: 800; letter-spacing: .16em; }.project-fragment strong { color: #c2d9cf; font-size: 10px; font-weight: 620; }.project-fragment i { position: absolute; right: 12px; bottom: 12px; width: 5px; height: 5px; background: #54daa2; border-radius: 50%; box-shadow: 0 0 10px #54daa2; }
.fragment-alpha { top: 23%; left: 12%; transform: rotate(-2deg); }.fragment-beta { bottom: 18%; left: 35%; animation-delay: 2.08s; }
.task-beacon { position: absolute; top: 45%; left: 24%; display: grid; min-width: 178px; gap: 2px; padding: 13px 15px; background: #103328; border: 1px solid rgba(104, 225, 177, .28); opacity: 0; animation: beacon-enter .6s 2.18s ease-out forwards; }
.task-beacon span { color: #67ae91; font-size: 7px; letter-spacing: .12em; }.task-beacon strong { font-size: 11px; }.task-beacon i { position: absolute; top: 12px; right: 12px; color: #78e8ba; font-size: 6px; font-style: normal; letter-spacing: .1em; }
.gateway-auth { position: absolute; z-index: 3; top: 50%; right: clamp(40px, 9vw, 140px); width: min(360px, calc(100vw - 48px)); padding: 30px 32px 25px; color: #eaf7f1; background: #091713; border: 1px solid rgba(127, 205, 173, .2); border-top: 2px solid #58d7a2; box-shadow: 28px 34px 70px rgba(0, 0, 0, .34); opacity: 0; transform: translateY(calc(-50% + 16px)); animation: auth-enter .62s 2.08s cubic-bezier(.22,.8,.24,1) forwards; }
.gateway-auth::before, .gateway-auth::after { position: absolute; width: 12px; height: 12px; border-color: #69e5b2; content: ""; }.gateway-auth::before { top: -5px; left: -5px; border-top: 1px solid; border-left: 1px solid; }.gateway-auth::after { right: -5px; bottom: -5px; border-right: 1px solid; border-bottom: 1px solid; }
.auth-route { position: absolute; top: 74px; right: 100%; width: clamp(90px, 12vw, 188px); height: 1px; background: linear-gradient(90deg, transparent, rgba(92,230,172,.7)); }.auth-route span { position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; background: #64e4ad; border-radius: 50%; box-shadow: 0 0 12px #64e4ad; }
.auth-heading { margin-bottom: 26px; }.auth-sequence { color: #5fae8d; font-size: 7px; font-weight: 800; letter-spacing: .18em; }.auth-heading h1 { margin: 8px 0 7px; font-size: 25px; line-height: 1.25; letter-spacing: -.035em; }.auth-heading p { margin: 0; color: #708f82; font-size: 10px; line-height: 1.55; }
.gateway-form { display: grid; gap: 17px; }.gateway-field { display: grid; gap: 6px; }.gateway-field label { color: #91aa9f; font-size: 9px; font-weight: 650; }.gateway-field label span { margin-right: 7px; color: #457b65; font-size: 7px; }
.gateway-field input { width: 100%; height: 42px; padding: 9px 11px; color: #edf9f4; background: #0d211a; border: 1px solid rgba(113, 179, 151, .22); border-radius: 0; outline: 0; transition: border-color .16s, background .16s, box-shadow .16s; }.gateway-field input::placeholder { color: #446357; }.gateway-field input:hover { border-color: rgba(124, 226, 184, .38); }.gateway-field input:focus { background: #10271f; border-color: #64dba9; box-shadow: inset 3px 0 #64dba9; }
.gateway-submit { position: relative; height: 43px; margin-top: 5px; overflow: hidden; color: #07120e; background: #65dfac; border: 0; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .025em; transition: background .16s, transform .16s; }.gateway-submit:hover { background: #8aefc4; transform: translateY(-1px); }.gateway-submit::before { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35), transparent 74%); content: ""; transform: translateX(-120%); transition: transform .55s; }.gateway-submit:hover::before { transform: translateX(120%); }.gateway-submit i { position: absolute; top: 50%; right: 16px; width: 13px; height: 1px; background: #173d2e; }.gateway-submit i::after { position: absolute; top: -3px; right: 0; width: 6px; height: 6px; border-top: 1px solid; border-right: 1px solid; content: ""; transform: rotate(45deg); }.gateway-submit:disabled { cursor: wait; opacity: .72; }.gateway-submit:disabled i { width: 12px; height: 12px; margin-top: -6px; background: transparent; border: 1px solid rgba(7,18,14,.28); border-top-color: #07120e; border-radius: 50%; animation: submit-spin .7s linear infinite; }.gateway-submit:disabled i::after { display: none; }
.gateway-auth footer { display: flex; align-items: center; gap: 6px; margin-top: 19px; color: #4f7062; font-size: 6px; font-weight: 750; letter-spacing: .12em; }.gateway-auth footer b { color: #345347; }.secure-pulse { width: 5px; height: 5px; background: #63dfa9; border-radius: 50%; box-shadow: 0 0 8px #63dfa9; }
.gateway-alert { display: flex; align-items: center; gap: 8px; padding: 8px 9px; margin: -12px 0 16px; border-left: 2px solid; font-size: 9px; }.gateway-alert-error { color: #efb9ae; background: #291714; border-color: #dc7261; }.gateway-alert-success { color: #a4e8c8; background: #10251d; border-color: #5dd8a5; }.gateway-alert span { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.gateway-status { position: absolute; right: clamp(28px, 5vw, 72px); bottom: 24px; left: clamp(28px, 6vw, 90px); display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 10px; color: #456759; font-size: 6px; letter-spacing: .14em; opacity: 0; animation: element-enter .5s 2.35s forwards; }.gateway-status strong { color: #75988a; font-size: 7px; }.gateway-status i { height: 1px; background: rgba(92, 170, 137, .16); }
.gateway-page.is-leaving .gateway-scene { opacity: .72; transition: opacity .38s; }.gateway-page.is-leaving .gateway-auth { transform: translateY(-50%) scale(.99); transition: transform .38s; }
@keyframes scene-enter { to { opacity: 1; } } @keyframes route-draw { to { stroke-dashoffset: 0; } } @keyframes node-enter { from { opacity: 0; } to { opacity: 1; } } @keyframes element-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes fragment-enter { from { opacity: 0; margin-top: 10px; } to { opacity: .82; margin-top: 0; } } @keyframes beacon-enter { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } @keyframes auth-enter { to { opacity: 1; transform: translateY(-50%); } } @keyframes submit-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .gateway-auth { right: 28px; }.fragment-beta { display: none; }.task-beacon { left: 14%; }.gateway-status { left: 28px; }.auth-route { width: 70px; } }
@media (max-width: 640px) { .gateway-scene { min-height: 100svh; }.gateway-brand { top: 25px; left: 24px; }.gateway-brand small { display: none; }.workspace-map { opacity: .58; transform: scale(1.25) translateX(-12%); }.project-fragment { opacity: .45; }.fragment-alpha { top: 18%; left: 8%; }.task-beacon { display: none; }.gateway-auth { top: auto; right: 20px; bottom: 54px; left: 20px; width: auto; transform: translateY(12px); animation-name: auth-enter-mobile; }.auth-route { top: auto; right: auto; bottom: 100%; left: 34px; width: 1px; height: 74px; background: linear-gradient(transparent, rgba(92,230,172,.7)); }.auth-route span { top: -3px; right: -3px; }.gateway-status { display: none; } }
@media (max-width: 640px) { .gateway-page.is-leaving .gateway-auth { transform: scale(.99); } }
@media (max-height: 660px) and (min-width: 641px) { .gateway-auth { padding-top: 23px; padding-bottom: 20px; }.auth-heading { margin-bottom: 19px; }.gateway-form { gap: 12px; }.gateway-auth footer { margin-top: 14px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; }.gateway-scene, .gateway-brand, .project-fragment, .task-beacon, .gateway-auth, .gateway-status, .map-node { opacity: 1; }.gateway-auth { transform: translateY(-50%); }.route { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) and (max-width: 640px) { .gateway-auth { transform: none; } }
@keyframes auth-enter-mobile { to { opacity: 1; transform: none; } }