@charset "utf-8";

/* Login Prompt */
.login-prompt-card {position:absolute; top:7px; left:7px; width:calc(100% - 14px); height:calc(100% - 14px); z-index:50; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:30px; background:var(--layout-max-lv1); backdrop-filter:var(--layout-blur); -webkit-backdrop-filter:var(--layout-blur); border-radius:17px; text-align:center; animation:smoothFadeIn var(--motion-duration) var(--motion)}
.login-prompt-card h3 {font-size:1.5rem; margin-bottom:10px; letter-spacing:-0.5px; line-height:1.2;}
.login-prompt-card p {font-size:0.9rem; color:var(--text-lv2); margin-bottom:30px;}
.prompt-icon {position:relative; width:84px; height:84px; background:linear-gradient(135deg, #6c5ce7, #a29bfe); border-radius:26px; display:inline-flex; align-items:center; justify-content:center; font-size:2.4rem; color:var(--color-white); margin-bottom:24px; box-shadow:0 15px 35px rgba(108, 92, 231, 0.4); z-index:1; transition:transform var(--motion-duration) var(--motion)}
.prompt-icon:hover {transform:scale(1.1) rotate(-5deg)}
.prompt-icon i {transform: rotate(45deg);animation:rocketShake 5s infinite ease-in-out}
.login-btn-group {width:100%; max-width:280px; display:flex; flex-direction:column; gap:14px; z-index:1}
.login-action-btn.google {width:100%; padding:12px; border:1px solid var(--layout-min-lv3); border-radius:50px; background:var(--color-white); font-size:1rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; transition:var(--motion-all); box-shadow:var(--dark-shadow-lv1); overflow:hidden}
.login-action-btn.google:hover {transform:translateY(-3px); box-shadow:var(--dark-shadow-lv1), var(--dark-shadow-lv2); border-color:transparent}
.login-action-btn.google:active {transform:scale(0.98)}
.sub-login-btns {display:flex; gap:10px}
.social-btn {flex:1; height:43px; border-radius:50px; cursor:pointer; transition:var(--motion-all); display:flex; align-items:center; justify-content:center; position:relative}
.social-btn:hover {transform:translateY(-4px) scale(1.02)}
.social-btn:active {transform:scale(0.95)}
.social-btn.kakao {background:#FEE500; font-size:1rem; color:#191919; box-shadow:0 4px 10px rgba(254, 229, 0, 0.2)}
.social-btn.kakao:hover {box-shadow:0 12px 25px rgba(254, 229, 0, 0.5)}
.social-btn.naver {background:#03C75A; color:var(--color-white); box-shadow:0 4px 10px rgba(3, 199, 90, 0.2)}
.social-btn.naver:hover {box-shadow:0 12px 25px rgba(3, 199, 90, 0.5)}
.n-icon {font-weight:900; font-size:1.3rem; letter-spacing:-1px}
.prompt-footer {margin-top:25px; font-size:0.85rem; color:var(--text-lv2); z-index:1; opacity:0.8; transition:opacity var(--motion-duration) var(--motion)}
.prompt-footer:hover {opacity:1}

/* [공통] 소셜 로그인 버튼 베이스 스타일 */
.sns-wrap {display: flex; flex-direction: column; gap: 7px;}

.social_link {background-image:none; border-radius:35px; cursor:pointer; font-family:'Roboto', arial, sans-serif; font-size:14px; width:100%; height:45px; letter-spacing:0.25px;  overflow:hidden; padding:0 12px; text-align:center; transition:background-color .218s, border-color .218s, box-shadow .218s; vertical-align:middle; white-space:nowrap;}

.social_link [class$="-content-wrapper"] {align-items:center; display:flex;flex-direction:row; flex-wrap:nowrap; height:100%; justify-content:space-between; width:100%}
.social_link [class$="-contents"] {flex-grow:1; font-weight:500; overflow:hidden; text-overflow:ellipsis; vertical-align:top}
.social_link [class$="-state"] {transition:opacity .218s; bottom:0; left:0; opacity:0; position:absolute; right:0; top:0}

/* [개별] 구글 버튼 */
.gsi-material-button {background-color:rgba(255,255,255,0.8); color:#1f1f1f; border: solid 1px #eee; box-shadow:var(--dark-shadow-lv1), var(--dark-shadow-lv2);}
.gsi-material-button:hover {background-color:rgba(255,255,255,1);box-shadow: 0 8px 13px -3px rgba(0,0,0,0.12), 0 3px 5px -4px rgba(0,0,0,0.5)}
.gsi-material-button-icon {height:20px; width:20px; margin-left:5px;}

/* [개별] 네이버 버튼 */
.naver-material-button {background-color:rgba(3,169,77,0.8); color:#ffffff; border: solid 1px #03a94d; box-shadow:var(--dark-shadow-lv1), var(--dark-shadow-lv2);}
.naver-material-button:hover {background-color:rgba(3,169,77,1);box-shadow: 0 8px 13px -3px rgba(3,169,77,0.4), 0 3px 5px -4px rgba(255,255,255,0.5)}
.naver-material-button-icon {height:15px; width:15px; margin-left:7px;}

/* [개별] 카카오 버튼 */
.kakao-material-button {background-color:rgba(254,229,0,0.8); color:#1a1807; border: solid 1px #fee500; box-shadow:var(--dark-shadow-lv1), var(--dark-shadow-lv2);}
.kakao-material-button:hover {background-color:rgba(254,229,0,1);box-shadow: 0 8px 13px -3px rgba(254,229,0,0.4), 0 3px 5px -4px rgba(255,255,255,0.5);}
.kakao-material-button-icon {height:18px; width:18px; margin-left:6px;}