/* 로그인 시작 *********************************************/

    .card {width:min(420px, 92%); margin:  0 auto;}
    
    /* inputs */
    .input {width:100%; height:48px; padding:0 12px; border:1px solid #ddd; border-radius:5px; background:#fff;font-size: 14px;}
    .input::placeholder {color:#a3acb7}
    .input:focus {outline:none; border-color: #cfd6ea; box-shadow: 0 0 0 2px rgba(18, 58, 116, .08);}
    .row {display:flex; gap:10px; align-items:center}
    .mt7 {margin-top:7px} .mt15{margin-top:15px} 
    .right {display:flex; justify-content:flex-end; align-items:center; gap:8px; color:#555; font-size:14px}
    
    /* buttons */
    .btn {width:100%; height:50px; border:0; border-radius: 5px;font-size: 16px; font-weight:bold; cursor:pointer}
    .btn-primary {background:var(--main_cor2); color:#fff;}
    .btn-primary:hover {filter:brightness(1.05)}
    /* SNS buttons */
    .sns {display:flex; flex-direction:column; gap:8px; margin-top:8px}
    .sns .btn {display:flex; align-items:center; gap:12px; padding:0 14px; justify-content:center; font-weight:bold; position: relative;}
    .sns .btn img {width: 100%; max-width: 30px; position: absolute;top: 10px; left: 15px; }
    /* .sns > button:after { display: block; visibility: hidden; clear: both; content: "";} */
    .btn-kakao {background:#FFEB3B; color:#1f1f1f;}
    .btn-naver {background:#03C75A; color:#fff;}
    .btn-google {background:#EA4335; color:#fff;}
    
    /* 회원가입/아이디/비밀번호 찾기 */
    .links {margin-top:15px; padding-top:15px; border-top:1px solid #e8e8e8; text-align:center; color:#6b7280; font-size:14px}
    .links a {color:#666;}
    .links a:hover {text-decoration:underline}
    .links .sep {margin:0 10px; opacity:.45}
    
    /* sr-only */
    .sr {position:absolute; left:-9999px}

  /* 로그인 끝 *********************************************/

  /* 아이디찾기 시작 *********************************************/
    /* 모바일 이메일 텍스트 가리기 */
    .sr-only {position:absolute;left:-9999px}

    /* 아이디 박스 */
    .findid-wrap {display:grid; place-items:center;  }
    .title {font-size:24px; font-weight:bold; color:var(--main_cor2); margin:0 0 20px; text-underline-offset:6px; }
    .findid-form { width:100%; max-width: 560px; border:1px solid #ddd; border-radius:15px; padding:22px; background:#fff; box-shadow:0 8px 26px rgba(18,58,116,.06); display:flex; flex-direction:column; gap:20px; }
    .findid-form input[type="email"] { height:50px; padding:0 14px; border:1px solid #ddd; border-radius:8px; font-size:16px; color:#333; }
    .findid-form input[type="email"]:focus { border-color:#cfd6ea;box-shadow: 0 0 0 2px rgba(18, 58, 116, .08); outline:0;  }
    .hint{  color:#666; font-size:14px;line-height: 1.5;word-break: keep-all; }

    /* 확인버튼 */
    .btn-primary { height:50px; border:0; border-radius:8px;  background:linear-gradient(180deg, #123a74, #0e2e5a); color:#fff; font-weight:bold; font-size: 16px; cursor:pointer;  box-shadow:0 6px 16px rgba(18,58,116,.18); transition:filter .2s, transform .06s, box-shadow .2s;}
    .btn-primary:hover { filter:brightness(1.02); box-shadow:0 8px 20px rgba(18,58,116,.22); }
    .btn-primary:active { transform:translateY(1px); }

    /* 모달 */
    .modal[hidden] { display:none !important; }
    .modal { position:fixed; inset:0; z-index:1000; }
    .modal .dim { position:absolute; inset:0; background:rgba(0,0,0,.4); }
    .dialog {  position:relative; z-index:1; width:min(520px,92vw); margin:12vh auto 0; background:#fff; border:1px solid #ddd; border-radius:18px; box-shadow:0 14px 38px rgba(0,0,0,.18); animation:pop .16s ease-out both; }
    .dialog-body { padding:22px 20px 8px; }
    .md-title { margin:0 0 6px; font-size:16px; color:#4a5568; font-weight:bold; }
    .md-text { margin:0; padding-right:8px; font-size:16px; color:#333; line-height:1.6; }
    .dialog-actions {  display:flex; justify-content:flex-end; gap:10px; padding:14px 16px 16px; }
    .btn-outline {   height:44px; min-width:92px; padding:0 16px; border-radius:100px;  border:1px solid #cfd6ea; background:#fff; color:var(--main_cor2); font-weight:800; cursor:pointer;    transition:background .16s, box-shadow .16s; }
    .btn-outline:hover{ background:#f7f9fc; box-shadow:0 2px 8px rgba(18,58,116,.1); }

    /* 애니메이션 & 반응형 */
    /* @keyframes pop{ from{ transform:translateY(6px); opacity:0 } to{ transform:none; opacity:1 } } */


    /* 반응형 */
    @media (max-width:480px){

      .findid-form{ padding:18px }
      .title{ font-size:22px; }

    }
  /* 아이디찾기 끝 *********************************************/

  /* 비밀번호 찾기 시작 *********************************************/

    .sr-only {position:absolute;left:-9999px}

    .pwreset-wizard { display:grid; place-items:center; }
    .wizard-box { width:100%; max-width:650px; }

    /* 화면 전환 */
    .screen[hidden] { display:none !important; }
    .fade-in { animation:fade .22s ease both; }
    
    @keyframes fade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

    /* 카드 & 폼 */
    .card { border:1px solid #ddd; border-radius:10px; background:#fff; box-shadow:0 10px 26px rgba(18,58,116,.06); padding:22px; color:#333; }
    .title {font-size:24px; font-weight:bold;color: var(--main_cor2); margin:0 0 20px;  text-underline-offset:6px; text-align: center;}
    .desc { margin:5px 0px 18px; color:#333; line-height:1.5;text-align: center;word-break: keep-all;  font-size: 16px; }
    .hint { margin:8px 0px 20px; color:#666; font-size:14px;word-break: keep-all;line-height: 1.5; }

    input[type="text"], input[type="email"] { width:100%; height:50px; padding:0 14px; color:#333;  border:1px solid #ddd; border-radius:8px; outline:0; font-size: 16px;}
    input:focus { border-color:#cfd6ea; box-shadow:0 0 0 2px rgba(18,58,116,.08); }

    /* 버튼 */
    .btn-primary {width: 100%; height:50px; border:0; border-radius:8px;  background:linear-gradient(180deg, #123a74, #0e2e5a); color:#fff; font-weight:bold; font-size: 16px; cursor:pointer;  box-shadow:0 6px 16px rgba(18,58,116,.18); transition:filter .2s, transform .06s, box-shadow .2s;}
    .btn-primary:hover { filter:brightness(1.02); box-shadow:0 8px 20px rgba(18,58,116,.22); }
    .btn-primary:active { transform:translateY(1px); }
    
    /* 로그인하기 버튼 */
    .actions { display:flex; gap:10px; flex-wrap:wrap }
    .btn-dark { display:inline-block; width: 100%; text-align:center; height:50px; line-height:50px; border-radius:10px; text-decoration:none; background:#2f3f5f; color:#fff; font-weight:bold; transition:filter .2s, transform .06s; }
    .btn-dark:hover { filter:brightness(1.05) }
    .btn-dark:active { transform:translateY(1px) }




    /* 반응형 */
    @media (max-width:480px){
      .card{ padding:18px }
      .title{ font-size:22px }
      .desc { font-size: 14px; }

    }

  /* 비밀번호 찾기 끝 *********************************************/



.validation-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
  display: none;
}

.gomain { display:inline-block; width: 100%; text-align:center; height:50px; line-height:50px; border-radius:10px; text-decoration:none; border:1px solid #ddd; background:#fff; color:#666; font-weight:bold; transition:filter .2s, transform .06s; margin-top: 12px;}

@media (max-width:767px){
  .gomain { font-size: 18px;}
}