/* Shared mobile welcome screen: customer My Page and authentication entry. */
html:has(.login-welcome:not([hidden])){background:#eceef2}
body:has(.login-welcome:not([hidden])){max-width:520px;margin:0 auto;min-height:100dvh;padding:0;background:#f3f4f7;color:#202124;box-shadow:none}
body:has(.login-welcome:not([hidden]))>header{position:static;min-height:86px;padding:30px 28px 18px;background:transparent;border:0;backdrop-filter:none;max-width:520px;margin:auto}
body:has(.login-welcome:not([hidden])) .brand{color:#202124}
body:has(.login-welcome:not([hidden])) .brand-wordmark{font-family:inherit;font-size:25px;font-weight:900;letter-spacing:-1.3px;text-shadow:none}
body:has(.login-welcome:not([hidden])) .brand-tagline,
body:has(.login-welcome:not([hidden])) .header-actions,
body:has(.login-welcome:not([hidden])) .bottom-nav,
body:has(.login-welcome:not([hidden]))>footer,
body:has(.login-welcome:not([hidden]))>header>.badge{display:none}
body:has(.login-welcome:not([hidden]))>header .wordmark{font-size:0;gap:0;color:#202124}
body:has(.login-welcome:not([hidden]))>header .wordmark .mark{display:none}
body:has(.login-welcome:not([hidden]))>header .wordmark:after{content:'AMAZING';font-size:25px;font-weight:900;letter-spacing:-1.3px}
body:has(.login-welcome:not([hidden])) main{display:block;width:100%;max-width:520px;min-height:0;padding:0 24px 20px;margin:0 auto}
body:has(.login-welcome:not([hidden])) .workspace{display:block}
body:has(.login-welcome:not([hidden])) #status:empty{display:none}
.login-welcome,#login-panel.login-welcome{display:flex;flex-direction:column;align-items:center;min-height:calc(100svh - 112px);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center}
.login-welcome .login-story{width:100%;margin:auto 0;padding:22px 0 32px}
.login-welcome .login-illustration{display:block;width:calc(100% + 24px);max-width:none;height:auto;aspect-ratio:1000/667;object-fit:contain;margin:0 -12px 20px}
.login-welcome h1,body.auth-view #login-panel.login-welcome h1{font-size:clamp(28px,7.3vw,36px);font-weight:850;letter-spacing:-1.5px;line-height:1.4;color:#202124;margin:0 0 14px;white-space:pre-line}
.login-welcome .login-description{color:#6b7078;font-size:14px;line-height:1.75;margin:0}
.login-welcome .login-actions{width:100%;padding:14px 0 max(12px,env(safe-area-inset-bottom))}
.login-welcome .kakao,body.auth-view #login-panel.login-welcome .kakao{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;margin:0;padding:16px 20px;border:0;border-radius:999px;background:#fee500;color:#191919;font-size:17px;font-weight:750;line-height:1.5;box-shadow:none;text-decoration:none;cursor:pointer}
.login-welcome .kakao:before{content:'';width:22px;height:20px;flex-shrink:0;background:#191919;clip-path:polygon(50% 0,75% 6%,94% 24%,100% 45%,94% 65%,75% 80%,43% 85%,18% 100%,23% 78%,7% 63%,0 43%,7% 22%,25% 6%)}
.login-welcome .kakao:focus-visible,.login-welcome .login-browse:focus-visible{outline:3px solid #202124;outline-offset:4px}
.login-welcome .login-browse{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:12px;padding:10px 18px;color:#555b64;background:transparent;font-size:13px;text-decoration:underline;text-underline-offset:4px}
body:has(.login-welcome:not([hidden])) .test-note{font-size:10px;color:#89909a;text-align:center;margin:4px 0 0}
body.auth-view #login-panel.login-welcome .login-test-note{border:0;padding:0;margin:6px 0 0;font-size:10px;color:#89909a;line-height:1.6}
@media(max-height:700px){.login-welcome .login-story{padding:5px 0 16px}.login-welcome .login-illustration{max-height:210px;margin-bottom:10px}.login-welcome h1,body.auth-view #login-panel.login-welcome h1{font-size:28px}.login-welcome .login-actions{padding-top:8px}}

/* The shared admin shell stays hidden in HTML until an actual panel is ready. */
body.auth-pending{margin:0 auto;max-width:520px;min-height:100svh;background:#fff;color:#24221b}
#auth-loading:not([hidden]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:100svh;padding:32px 24px;text-align:center;background:#fff;color:#24221b}
#auth-loading p{margin:0;font-size:14px;line-height:1.7;color:#666}
#auth-loading a{display:inline-flex;align-items:center;min-height:44px;color:#666;font-size:12px;text-underline-offset:4px}
#auth-loading noscript{font-size:13px;line-height:1.7}
.auth-loading-spinner{width:28px;height:28px;border:3px solid #e4dfd8;border-top-color:#f2d04e;border-radius:50%;animation:auth-loading-spin .8s linear infinite}
@keyframes auth-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.auth-loading-spinner{animation:none}}