/* Utopia Office 로그인 배경: 글자와 로그인 영역만 덮는 작은 반투명 유리 양문. 이미지 없이 CSS로만 그립니다. */
.door-stage,.door-stage *,.door-stage *::before,.door-stage *::after{box-sizing:border-box}
.door-stage{--floor:clamp(56px,20vh,180px);--handle:56px;--metal:#59605c;--brass:#d2ad62;position:fixed;inset:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(180deg,#f3f0e8,#e6e2d7);padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) var(--floor) max(12px,env(safe-area-inset-left))}
.door-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--floor);background:linear-gradient(180deg,#cdc4b0,#dcd5c5);border-top:2px solid #a9a18f}
/* 문 뒤 실내: 유리에 흐릿하게 비치는 형광등과 어두운 복도 */
.door-frame{position:relative;z-index:1;width:min(100%,360px);max-height:100%;border:5px solid var(--metal);border-bottom-width:6px;background:radial-gradient(60% 12% at 30% 12%,#fffef6 0 55%,transparent 100%),radial-gradient(60% 12% at 72% 26%,#fffef6 0 50%,transparent 100%),linear-gradient(90deg,transparent 0 12%,rgba(70,82,76,.55) 12% 26%,transparent 26% 72%,rgba(70,82,76,.45) 72% 90%,transparent 90%),linear-gradient(180deg,#b9c0ba 0,#a8afa8 62%,#b5ac97 62%,#c3bba8 100%)}
.door-leaf{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:linear-gradient(115deg,rgba(255,255,255,.2) 0 18%,rgba(255,255,255,.5) 18% 26%,rgba(255,255,255,.2) 26% 58%,rgba(255,255,255,.38) 58% 62%,rgba(255,255,255,.2) 62%),rgba(232,240,236,.46);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.door-leaf:first-child{left:0;border-right:2px solid var(--metal)}
.door-leaf:nth-child(2){right:0;border-left:2px solid var(--metal)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.door-leaf{background-color:rgba(232,240,236,.82)}}
.door-handle{position:absolute;z-index:3;top:50%;width:6px;height:var(--handle);margin-top:calc(var(--handle)/-2);border-radius:3px;background:linear-gradient(90deg,#8f7238,var(--brass) 45%,#f0d898 60%,#a58443);box-shadow:1px 1px 3px rgba(0,0,0,.35)}
.door-handle.left{left:calc(50% - 15px)}
.door-handle.right{left:calc(50% + 9px)}
.login-content{position:relative;z-index:2;display:grid;grid-template-rows:1fr var(--handle) 1fr;row-gap:14px;padding:clamp(20px,5vh,34px) clamp(18px,6vw,26px)}
.login-logo-area{align-self:end;display:flex;justify-content:center}
.login-actions-area{grid-row:3;align-self:start;width:100%}
.login-logo{display:block;width:100%;max-width:290px;height:auto}
@media (max-height:520px) and (orientation:landscape){
 .door-stage{--floor:clamp(24px,10vh,44px);--handle:48px}
 .door-frame{width:min(100%,640px)}
 .login-content{grid-template-rows:auto;grid-template-columns:1fr 1fr;column-gap:52px;row-gap:0;align-items:center;padding:clamp(18px,7vh,34px) 22px}
 .login-logo-area,.login-actions-area{grid-row:1;align-self:center}
}

/* Login refinement: local type, provider identity, and accessible controls. */
@font-face{font-family:Pretendard;src:url("fonts/PretendardVariable.woff2") format("woff2");font-weight:100 900;font-display:swap}
html,body{margin:0;min-height:100%;font-family:Pretendard,"Apple SD Gothic Neo",sans-serif;color:#303a35}
::selection{background:#d9e4da;color:#233a2d}
.door-stage{position:relative;min-height:100svh;--floor:clamp(40px,16vh,150px);padding-top:32px;overflow:visible}
.door-frame{width:min(100%,396px);border-width:4px;border-bottom-width:6px}
.login-content{row-gap:24px;padding:40px 28px 30px}
.login-logo{max-width:310px}
.login-logo-area{padding:8px 0 10px}
.login-actions-area{display:grid;gap:14px}
.btns{display:grid;gap:12px;width:88%;justify-self:center}
.social-login{display:grid;grid-template-columns:20px 1fr 20px;align-items:center;gap:12px;min-height:52px;width:100%;padding:12px 18px;border:1px solid transparent;border-radius:8px;font:600 15px/1.4 Pretendard,"Apple SD Gothic Neo",sans-serif;letter-spacing:-.015em;color:#1f1f1f;cursor:pointer;transition:background-color .15s,border-color .15s}
.social-login img{width:20px;height:20px;display:block}
.social-login span{grid-column:2;text-align:center}
.social-login.kakao{background:#fee500;color:#191919}
.social-login.google{background:#fff;border-color:#747775;font-weight:500}
.social-login:focus-visible{outline:3px solid #244b38;outline-offset:4px}
.social-login:active{transform:translateY(1px)}
.preview-feedback{margin:0;font-size:12px;line-height:1.55;text-align:center;background:#faf8f2;border-radius:6px;padding:10px;color:#303a35}
.preview-feedback:empty{display:none}
@media(hover:hover){.social-login.kakao:hover{background:#f5dc00}.social-login.google:hover{background:#f2f4f2;border-color:#303a35}}
@media(max-width:380px){.login-content{padding:30px 18px 24px;row-gap:20px}.social-login{padding-inline:14px}}
@media(max-height:520px) and (orientation:landscape){.door-stage{padding-top:16px;--floor:28px}.door-frame{width:min(100%,640px)}.login-content{padding:26px 20px;column-gap:48px;row-gap:0}.login-logo-area{padding:0}.social-login{min-height:48px;font-size:14px;padding:10px 12px}.login-actions-area{gap:8px}}
@media(prefers-reduced-motion:reduce){.social-login{transition:none}}

/* The shop sign belongs above the doors, outside the glass. */
.entrance{position:relative;z-index:1;width:min(100%,396px);display:grid;gap:18px}
.office-sign{min-height:100px;display:flex;align-items:center;justify-content:center;padding:16px 26px;background:linear-gradient(180deg,#fffdf7,#f2efe5);border:0;border-radius:3px;box-shadow:0 3px 2px rgba(117,111,94,.24),0 9px 16px rgba(48,58,53,.14)}
.office-sign .login-logo-area{padding:0;width:100%}
.office-sign .login-logo{width:100%;max-width:310px}
.korean-sign{margin:0;font:650 clamp(27px,8.5vw,38px)/1.35 Pretendard,sans-serif;letter-spacing:-.035em;white-space:nowrap;color:#303a35}
.entrance .door-frame{width:100%}
.entrance .login-content{min-height:320px;display:flex;align-items:flex-end;padding:28px 28px 16px}
.entrance .login-actions-area{align-self:auto}
.entrance .door-handle{top:44%}
@media(max-width:380px){.office-sign{min-height:88px;padding:14px 18px}.entrance{gap:14px}.entrance .login-content{min-height:290px;padding:24px 18px 12px}}
@media(max-height:520px) and (orientation:landscape){.entrance{width:min(100%,640px);gap:12px}.office-sign{min-height:62px;padding:8px 20px}.office-sign .login-logo{max-width:210px}.korean-sign{font-size:31px}.entrance .login-content{min-height:170px;padding:20px 20px 10px;justify-content:flex-end}.entrance .login-actions-area{width:47%}.entrance .door-handle{top:60%}}