@charset "utf-8";

body{
  background: var(--jh-bg);
}

.p-login{
  padding: 0;
}

.c-login-social{
  display:grid;
  gap:12px;
}
.c-login-social__divider{
  position:relative;
  text-align:center;
  padding: 6px 0;
}
.c-login-social__divider::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:#e5e7eb;
}
.c-login-social__divider > span{
  position:relative;
  display:inline-block;
  padding:0 12px;
  background:#fff;
  color:#6b7280;
  font-size:12px;
  font-weight:500;
}
.c-login-social__btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  border-radius:14px;
  text-decoration:none;
  font-size:16px;
  font-weight:800;
}
.c-login-social__btn--kakao,
.c-login-social__btn--naver{
  width:100%;
  min-height:54px;
  padding:0 18px;
  border-radius:8px;
}

.c-login-social__btn--kakao{
  border:1px solid #fee500;
  background:#fee500;
  color:#3c1e1e;
}
.c-login-social__symbol,
.c-login-social__naver-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
}
.c-login-social__icon{
  width:20px;
  height:20px;
  display:block;
  fill:#3c1e1e;
}

.c-login-social__btn--naver{
  border:1px solid #03c75a;
  background:#03c75a;
  color:#fff;
}
.c-login-social__naver-mark{
  font-size:19px;
  font-weight:900;
  line-height:1;
  color:#fff;
}

.c-login-social__divider--id{
  margin-top:16px;
}

.c-login-social__recent{
  position:absolute;
  top:-9px;
  right:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  padding:0 8px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:-.02em;
  box-shadow:0 4px 10px rgba(15,23,42,.16);
}

.c-login-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 18px;
  padding-top:6px;
}
.c-login-links__item{
  position:relative;
  color:#4b5563;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}
.c-login-links__item + .c-login-links__item::before{
  content:"";
  position:absolute;
  left:-9px;
  top:50%;
  width:1px;
  height:12px;
  background:#d1d5db;
  transform:translateY(-50%);
}

@media (min-width: 768px){
  .p-login{
    padding:calc(40px + env(safe-area-inset-top)) 24px 60px;
  }


}

.c-social-pending,
.c-social-link-box{
  display:grid;
  gap:12px;
  padding:16px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fafafa;
  margin-bottom: 10px;
}

.c-social-pending__head{
  display:grid;
  gap:6px;
}

.c-social-pending__ttl{
  font-size:15px;
  font-weight:800;
  color:#111827;
}

.c-social-pending__desc{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#4b5563;
  word-break:keep-all;
}

.c-social-pending__meta,
.c-social-link-box__row{
  display:grid;
  gap:8px;
  padding: 2px 5px 8px;
}

.c-social-pending__row,
.c-social-link-box__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding: 0;
  border-bottom:1px solid #f1f5f9;
}

.c-social-pending__row > b,
.c-social-link-box__row > b{
  flex:0 0 auto;
  font-size:12px;
  font-weight:700;
  color:#6b7280;
}

.c-social-pending__row > span,
.c-social-link-box__row > span{
  min-width:0;
  text-align:right;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  color:#111827;
  word-break:break-word;
}

.c-social-pending__action{
  width:100%;
  min-height:52px;
  justify-content:center;
  border-radius:14px;
  text-decoration:none;
  font-size:15px;
  font-weight:700;
}

.c-social-pending__actions{display:grid;gap:10px;}
.c-social-pending__action{width:100%;min-height:52px;justify-content:center;border-radius:14px;text-decoration:none;font-size:15px;font-weight:800;}

.c-social-id-ellipsis{
  flex:1 1 auto;
  min-width:0;
  max-width:180px;
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align:right;
}