/* 세상은 말랑해 · 로그인 화면 / 2026-11-06 */
.auth-chip{display:flex;align-items:center;gap:7px;max-width:190px;min-height:40px;padding:8px 13px;border-radius:999px;border:1px solid #e4d9ff4c;background:#342d60bd;color:#fff;font-size:11px;font-weight:800;white-space:nowrap}
.auth-chip img{height:24px;width:24px;object-fit:cover;border-radius:50%}
.auth-chip .auth-chip-label{overflow:hidden;text-overflow:ellipsis;max-width:102px}
.auth-chip img[hidden]{display:none!important}
.auth-gate{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;overflow-y:auto;padding:20px;background:radial-gradient(ellipse at 18% 20%,#7a6bd050,transparent 47%),#080d23e8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.auth-gate.is-open{display:flex}
.auth-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);width:min(900px,100%);min-height:510px;position:relative;overflow:hidden;border-radius:32px;border:1px solid #ffffff85;background:#fffefa;box-shadow:0 36px 110px #04071799,0 6px 35px #0a123450}
.auth-visual{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;min-width:0;padding:32px 22px;background:radial-gradient(circle at 50% 42%,#fdf0ff 0%,#d9d0ff 55%,#b7a8f1 100%);color:#45316f}
.auth-visual:before{position:absolute;content:"";inset:0;z-index:-1;opacity:.52;background-image:radial-gradient(#fff 2px,transparent 3px);background-size:55px 55px;background-position:12px 10px}
.auth-visual:after{content:"";position:absolute;bottom:-116px;left:-10%;width:120%;height:175px;border-radius:50%;background:#fff9f750;filter:blur(3px);z-index:-1}
.auth-art-circle{position:absolute;top:23%;left:50%;width:275px;height:275px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#fff7ff 15%,#f9ecffba 53%,#f2e1ff11 72%);box-shadow:0 0 0 23px #fff5,0 0 0 54px #fff2;z-index:-1}
.auth-art-caption{position:relative;display:inline-flex;align-items:center;padding:7px 14px;border-radius:50px;background:#fff9;color:#7b60b5;font-size:11px;font-weight:850;letter-spacing:.02em;box-shadow:0 6px 18px #9b76cb24}
.auth-visual img{position:relative;width:min(270px,82%);height:255px;object-fit:contain;margin:5px auto 0;filter:drop-shadow(0 22px 19px #9a72ce50);animation:auth-hello 4.5s ease-in-out infinite}
@keyframes auth-hello{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.auth-glimmer{position:absolute;color:#fffaf0;text-shadow:0 6px 18px #8f76c5;font-size:54px;pointer-events:none}
.auth-glimmer-one{top:22%;right:12%}.auth-glimmer-two{top:42%;left:9%;font-size:38px}
.auth-visual h2{position:relative;font-size:26px;font-weight:900;letter-spacing:-.07em;line-height:1.35;margin:2px 0 10px}
.auth-visual p{font-size:12px;font-weight:650;line-height:1.65;margin:0;color:#67538f;word-break:keep-all}
.auth-art-foot{position:absolute;bottom:23px;color:#725d9b;font-size:10px;font-weight:800;letter-spacing:-.015em}
.auth-panel{display:flex;min-width:0;flex-direction:column;justify-content:center;position:relative;padding:48px 48px 38px;color:#272043;background:linear-gradient(153deg,#fffdfb,#f6f2ff)}
.auth-dismiss{position:absolute;top:19px;right:20px;display:grid;place-items:center;height:34px;width:34px;padding:0;border:1px solid #e9e1f6;background:#fff;border-radius:12px;color:#85799c;font-size:14px;line-height:1;transition:background .2s}
.auth-dismiss:hover{background:#f0eafa}
.auth-eyebrow{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;border-radius:40px;padding:8px 13px;background:#f0e9ff;color:#7958bc;font-size:11px;font-weight:900;letter-spacing:.02em}
.auth-eyebrow span{color:#a47bdb}
.auth-panel h1{font-size:33px;font-weight:900;letter-spacing:-.075em;line-height:1.3;margin:19px 0 10px;word-break:keep-all}
.auth-panel h1 span{color:#8261ca}
.auth-panel p{color:#726b87;font-size:13px;line-height:1.85;word-break:keep-all;margin:0 0 24px}
.auth-action-label{display:flex;align-items:center;gap:8px;color:#63577e;font-size:11px;font-weight:850;margin-bottom:11px}
.auth-action-label:before{content:"";width:5px;height:5px;border-radius:50%;background:#b898ed}
.auth-google{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;min-height:49px;padding:10px 14px;border:1px solid #ddd7eb;border-radius:14px;color:#333044;background:#fff;box-shadow:0 6px 16px #31245413;font-size:14px;font-weight:850}
.auth-google svg{width:21px;height:21px;flex:0 0 auto}
.auth-google:hover,.auth-secondary:hover{border-color:#c4a9ee;background:#faf7ff}
.auth-google-host{display:flex;align-items:center;justify-content:center;min-height:48px;width:100%;overflow:hidden}
.auth-google-host iframe{max-width:100%!important}
.auth-google[hidden],.auth-google-host[hidden]{display:none!important}
.auth-secondary{width:100%;min-height:47px;padding:10px 14px;margin-top:12px;border:1px solid #dfd2f2;border-radius:14px;color:#775aab;background:#f2edfc;font-size:12px;font-weight:850;transition:background .2s,border-color .2s}
.auth-note{padding-top:19px;margin-top:16px;border-top:1px solid #eae5f3;color:#9990aa;font-size:11px;line-height:1.8;word-break:keep-all}
.auth-message{min-height:20px;margin-top:10px;color:#b04754;font-size:11px;font-weight:700;line-height:1.6;word-break:keep-all}
.auth-me{display:none;align-items:center;gap:12px;margin:10px 0;padding:14px;border:1px solid #e7ddf6;border-radius:15px;background:#f6f0ff}
.auth-me img{height:48px;width:48px;border-radius:50%;object-fit:cover;border:2px solid white}
.auth-me b{display:block;font-size:13px;color:#443267}
.auth-me small{display:block;margin-top:4px;font-size:10px;color:#7b718c;max-width:230px;overflow:hidden;text-overflow:ellipsis}
.auth-logout{display:none;padding:12px 14px;border:1px solid #dfd2f2;border-radius:12px;background:#fff;color:#7a66a4;font-weight:800;font-size:12px}
.auth-gate[data-signed-in='true'] .auth-me{display:flex}
.auth-gate[data-signed-in='true'] .auth-google,.auth-gate[data-signed-in='true'] .auth-google-host,.auth-gate[data-signed-in='true'] .auth-secondary,.auth-gate[data-signed-in='true'] .auth-action-label{display:none!important}
.auth-gate[data-signed-in='true'] .auth-logout{display:block}
.auth-gate button:focus-visible{outline:3px solid #a47ade;outline-offset:3px}
@media(max-width:700px) and (orientation:portrait){
 .auth-gate{padding:13px;align-items:flex-start}
 .auth-layout{grid-template-columns:1fr;max-width:410px;min-height:0;margin:auto;border-radius:25px}
 .auth-visual{height:225px;min-height:0;padding:14px}
 .auth-visual img{width:160px;height:132px;margin:4px auto 0}
 .auth-art-circle{height:175px;width:175px;top:22%}
 .auth-art-caption{font-size:9px;padding:5px 11px}
 .auth-visual h2{font-size:19px;margin:0 0 3px}
 .auth-visual p{font-size:10px}
 .auth-art-foot{display:none}
 .auth-glimmer{font-size:28px}.auth-glimmer-two{font-size:22px}
 .auth-panel{padding:29px 27px 25px}
 .auth-dismiss{top:12px;right:12px}
 .auth-eyebrow{font-size:10px}
 .auth-panel h1{font-size:26px;margin:14px 0 8px}
 .auth-panel p{margin-bottom:16px;font-size:12px}
 .auth-note{padding-top:13px;margin-top:13px;font-size:10px}
 .auth-secondary{margin-top:9px}
}
@media(max-height:520px) and (orientation:landscape){
 .auth-gate{align-items:flex-start;padding:9px}
 .auth-layout{grid-template-columns:35% 65%;min-height:0;max-width:810px;margin:auto;border-radius:20px}
 .auth-visual{padding:14px 10px}
 .auth-visual img{width:128px;height:130px}
 .auth-art-circle{width:155px;height:155px;top:20%}
 .auth-art-caption{font-size:9px;padding:5px 9px}
 .auth-visual h2{font-size:16px;margin:0 0 5px}
 .auth-visual p{display:none}.auth-art-foot{bottom:12px;font-size:9px}
 .auth-glimmer{font-size:24px}.auth-glimmer-two{font-size:18px}
 .auth-panel{padding:16px 37px 14px}
 .auth-dismiss{top:10px;right:10px;height:27px;width:27px}
 .auth-eyebrow{font-size:9px;padding:5px 9px}
 .auth-panel h1{font-size:22px;margin:8px 0 5px}
 .auth-panel p{font-size:11px;line-height:1.4;margin:0 0 8px}
 .auth-action-label{font-size:10px;margin-bottom:3px}
 .auth-google-host{min-height:42px}
 .auth-secondary{min-height:35px;padding:6px;margin-top:6px}
 .auth-note{font-size:9px;line-height:1.35;padding-top:6px;margin-top:6px}
 .auth-message{margin-top:3px;min-height:13px}
}
@media(prefers-reduced-motion:reduce){.auth-visual img{animation:none}}