.wpmsl-wrap {
margin: 18px auto 0;
max-width: 820px;
width: 100%;
}
.wpmsl-title {
font-size: 14px;
line-height: 1.5;
margin-bottom: 12px;
color: #666;
text-align: center;
}
.wpmsl-buttons {
display: grid;
gap: 12px;
}
.wpmsl-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 54px;
border-radius: 12px;
text-decoration: none;
font-weight: 700;
font-size: 16px;
line-height: 1;
padding: 14px 18px;
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
border: 1px solid rgba(0,0,0,.08);
box-sizing: border-box;
box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.wpmsl-button:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(16,24,40,.08);
opacity: .98;
}
.wpmsl-button:focus-visible {
outline: 2px solid rgba(59,130,246,.45);
outline-offset: 2px;
}
.wpmsl-style-light .wpmsl-button,
.wpmsl-style-dark .wpmsl-button {
color: #1f2937;
}
.wpmsl-google {
background: #ffffff;
border-color: #dadce0;
}
.wpmsl-kakao {
background: #fee500;
color: #191919;
border-color: #e6cf00;
}
.wpmsl-naver {
background: #03c75a;
color: #ffffff;
border-color: #03b251;
}
.wpmsl-button-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.wpmsl-icon {
position: relative;
width: 24px;
height: 24px;
display: inline-block;
}
.wpmsl-button-label {
display: inline-block;
letter-spacing: -0.01em;
}
.wpmsl-icon-google {
border-radius: 50%;
background: conic-gradient(#4285f4 0 90deg,#34a853 90deg 180deg,#fbbc05 180deg 270deg,#ea4335 270deg 360deg);
}
.wpmsl-icon-google::before {
content: "";
position: absolute;
inset: 4px;
background: #fff;
border-radius: 50%;
}
.wpmsl-icon-google::after {
content: "G";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
color: #4285f4;
font-family: Arial, sans-serif;
}
.wpmsl-icon-kakao {
border-radius: 50%;
background: #191919;
}
.wpmsl-icon-kakao::before {
content: "";
position: absolute;
left: 5px;
top: 5px;
width: 14px;
height: 11px;
background: #fee500;
border-radius: 7px;
}
.wpmsl-icon-kakao::after {
content: "";
position: absolute;
left: 9px;
bottom: 4px;
width: 6px;
height: 6px;
background: #fee500;
clip-path: polygon(0 0, 100% 0, 25% 100%);
}
.wpmsl-icon-naver {
border-radius: 6px;
background: #ffffff;
}
.wpmsl-icon-naver::after {
content: "N";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 15px;
color: #03c75a;
font-family: Arial, sans-serif;
}
.wpmsl-error {
margin: 18px auto 12px;
padding: 10px 12px;
border-radius: 10px;
background: #fff5f5;
color: #b42318;
border: 1px solid rgba(180,35,24,.12);
font-size: 14px;
line-height: 1.5;
max-width: 820px;
}
@media (max-width: 860px) {
.wpmsl-wrap,
.wpmsl-error {
max-width: 100%;
}
}