@charset "utf-8";

/* ========= Design Tokens ========= */
:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --text:#222222;
  --muted:#8a8f98;
  --line:#e6e8eb;
  --primary:#222222;
  --primary-2:#111111;
  --accent:#ff5000;
  --radius:16px;
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --focus:0 0 0 3px rgba(34,34,34,.14);
}

/* 시스템/웹 안전 폰트 스택 */
html,body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Apple SD Gothic Neo","Noto Sans KR","맑은 고딕", sans-serif;
}

/* ========= 공통 ========= */
.check_box input[type="checkbox"]{display:none;}
.check_box input[type="checkbox"] + label{
  position:relative;font-size:14px;margin-left:32px;color:var(--text)
}
.check_box input[type="checkbox"] + label:before{
  content:"";display:block;position:absolute;top:50%;left:-32px;transform:translateY(-50%);
  width:20px;height:20px;border-radius:6px;border:1px solid var(--line);
  background:#fff url(./img/check.svg) no-repeat center/12px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
.check_box input[type="checkbox"]:checked + label:before{
  border-color:var(--primary);background-color:var(--primary);filter:invert(1);
}

/* ========= 페이지 레이아웃 ========= */
body{background:var(--bg);}
.mem03_skin{max-width:960px;margin:0 auto;padding:48px 16px 64px;}
.mem03_skin .title{
  padding:28px 0 20px;margin-bottom:24px;
  font-size:28px;line-height:1.25;text-align:center;font-weight:700;color:var(--text);
  border:0;
}
.mem03_skin .title_wrap{margin-bottom:8px;}

.login_wrap{max-width:560px;margin:0 auto;}
.login_wrap .intro_txt{margin:8px 0 20px;font-size:18px;color:var(--muted);}

/* ========= 카드 ========= */
#login_fs{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
}
#login_fs legend{position:absolute;left:-9999px;}

/* 상단 입력/버튼 영역 */
#login_fs .login_box{
  display:flex;align-items:stretch;gap:16px; /* 버튼과 인풋 사이 여백 */
}
#login_fs .login_box .input_wrap{flex:1;min-width:0}
#login_fs .login_box .btn_wrap{width:160px;margin-left:0}

/* ========= 인풋 ========= */
#login_fs .frm_input{
  width:80%;height:48px;padding:0 16px;border:1px solid var(--line);
  border-radius:12px;background:#fff;font-size:14px;color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#login_fs .frm_input + .frm_input{margin-top:10px;}
#login_fs .frm_input::placeholder{color:#9aa0a6}
#login_fs .frm_input:focus{outline:0;border-color:var(--primary);box-shadow:var(--focus);}
#login_fs #login_pw{margin-top:10px;} /* 기존 호환 */

/* ========= 버튼 ========= */
#login_fs .btn_wrap .btn_submit{
  width:100%;height:106px;border:0;border-radius:12px;
  background:linear-gradient(180deg, var(--primary), var(--primary-2));
  color:#fff;font-weight:700;letter-spacing:.2px;font-size:15px;
  box-shadow:0 6px 16px rgba(34,34,34,.15);
  transition:transform .06s ease, box-shadow .15s ease, opacity .15s ease;
}
#login_fs .btn_wrap .btn_submit:hover{box-shadow:0 8px 22px rgba(34,34,34,.18);}
#login_fs .btn_wrap .btn_submit:active{transform:translateY(1px);}

/* ========= 하단 링크/정보 ========= */
#login_fs .info_wrap{
  display:flex;align-items:center;justify-content:space-between;margin-top:18px;
  gap:16px;flex-wrap:wrap
}
#lost_password{display:flex;align-items:center;gap:16px;}
#lost_password a{
  font-size:14px;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
#login_fs .info_wrap #lost_password a:hover{color:var(--text);border-color:var(--text);}
#lost_password #join:hover{color:var(--accent);border-color:var(--accent);}

/* ========= SNS 로그인 ========= */
.sns_login{margin-top:28px;border-top:1px dashed var(--line);padding-top:22px;}
.sns_login .sns_list{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:12px;}
.sns_login .sns_list li{
  flex:1 1 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
}
.sns_login .sns_list li a{
  display:flex;align-items:center;justify-content:center;height:46px;gap:8px;
  color:var(--text);text-decoration:none;
}
.sns_login .sns_list li a img{width:22px;height:22px;object-fit:contain;}
.sns_login .sns_list li a span{font-size:14px}

/* ========= 반응형 ========= */
@media (max-width: 680px){
  .mem03_skin{padding:32px 14px 48px;}
  .mem03_skin .title{font-size:24px;}
  .login_wrap .intro_txt{font-size:16px;}
  #login_fs{padding:20px}
  #login_fs .login_box{flex-direction:column;gap:10px;}
  #login_fs .login_box .btn_wrap{width:100%;}
  #login_fs .btn_wrap .btn_submit{height:52px;}
}

/* ========= 접근성 & 모션 선호 ========= */
:focus-visible{outline:none;box-shadow:var(--focus);}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}