@charset "utf-8";

.iw-outlogin { width:100%; margin:0px; padding:0px; }
.basic-outlogin .iw-login { width:100%; }
.basic-outlogin .iw-login {  }
.basic-outlogin .login-box { display:table; width:100%; table-layout:fixed; padding:10px; }
.basic-outlogin .iw-login-box { background:#fff; }
.basic-outlogin .login-cell { display:table-cell; padding:0px; vertical-align:middle; }

.basic-outlogin .login-cell.login-btn { width:85px; height:70px; text-align:center; color:#2e2e2e; font-weight:bold; background:#e65520; -webkit-transition:all 0.6s ease 0s; transition:all 0.6s ease 0s; border-left:0px; cursor:pointer; letter-spacing:-1px; font-size:13px; }
.basic-outlogin .login-cell.login-btn:hover { cursor:pointer; width:85px; height:65px; text-align:center; color:#2e2e2e; background:#d03902; border-left:0px; cursor:pointer; letter-spacing:-1px; font-size:13px; }
.basic-outlogin .login-cell .form-control:focus { border-color:#444 !important; box-shadow:none !important; }
.basic-outlogin .login-cell .no-top-border { border-top:0px !important }
.basic-outlogin .login-misc { margin-top:8px; letter-spacing:-1px; color:#888; }
.basic-outlogin .login-misc label { line-height:12px; font-weight: normal; cursor: pointer; }

.basic-outlogin .profile .photo { margin-right:10px; }
.basic-outlogin .profile .photo img { width:50px; height:50px; border-radius: 3px; border:0; }
.basic-outlogin .profile .photo i { width:50px; height:50px; font-size:26px; line-height:44px; text-align:center; background:#404040; border-radius: 3px; color:#fff; }
.basic-outlogin .bar { color:#ccc; margin:0px 4px; }
.basic-outlogin .exp-bar { margin:8px 0px; }
.basic-outlogin .exp-bar .progress { margin-top:15px; height:10px !important; }
.basic-outlogin .logout-btn { background:#383c4a; border:1px solid #404552; border-radius: 4px; text-align:center; width: 60px; height: 25px; color: #d9d9d9; font-size: 12px; line-height: 23px; letter-spacing:-1px; }
.basic-outlogin .security { margin-left:-28px; padding-top:5px; }
.basic-outlogin .security ul { list-style:none; }
.basic-outlogin .security li { float:left; }

/* progress */
.progress-bar {text-align:right;line-height:24px;color:#fff;background-color:#4B4C50;}

/*custom*/
.btn-iw-login.btn { color:#2e2e2e !important; font-weight:bold; border-top:none; border-top:1px solid #e3e7ee; border-right:1px solid #e3e7ee; border-bottom:none; background:#fff; height:51px; }
.btn-iw-login.active.btn, .btn-iw-login.btn:hover, .btn-iw-login.btn:focus, .btn-iw-login.btn:active { background:#F2F4F7; }
.form-control { border:1px solid #e3e7ee; box-shadow:none; background:#fff; }

.basic-outlogin .info-line { bottom:0; right:0; width:100%; margin-top:17px; padding:0px; box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px; }
.basic-outlogin .info-line #alarm:hover { cursor:pointer; }
.basic-outlogin .info-line div.info-menu { padding:9px 5px 9px 5px; border:1px solid #404552; background:#fff; float:left; width:25%; border-left:none; }
.basic-outlogin .info-line div.info-menu-left { padding:9px 5px 9px 5px; border:1px solid #404552; background:#fff; float:left; width:25%; border-left:none; }
.basic-outlogin .info-line div.info-menu-right { padding:9px 5px 9px 5px; border:1px solid #404552; background:#fff; float:left; width:25%; border-left:0px; border-right:none; }

.member-login { padding:15px; border-radius: 10px; background: #3b3d4a; }
.basic-outlogin label { line-height:12px; font-weight: normal; cursor: pointer; }
.basic-outlogin .profile .photo { margin-right:12px; }
.basic-outlogin .profile .photo img { width:50px; height:50px; border-radius: 6px; border:0; }
.basic-outlogin .profile h3 { font-size:18px; line-height:32px; padding:0px; margin:0px; letter-spacing:-1px; display:block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; }
.basic-outlogin .login-line { padding-top: 17px; border-top:1px solid #333; }
.basic-outlogin .form-group { margin-bottom:10px; }
.text-muted { color: #d9d9d9 !important; }
.btn-custom {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  background-color: #5c6af7;
  padding: 16px 60px;
  border-radius: 6px;
  margin: 0 auto;
  transition: all 0.3s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.btn-custom:hover {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  background-color: #555EF1;
  padding: 16px 60px;
  border-radius: 6px;
  margin: 0 auto;
  transition: all 0.3s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.btn-custom span {
  position: relative; 
  z-index: 1;
}

.input-group-addon { border:1px solid #444; background-color: #2c2c2c; }
.basic-outlogin .input-group .form-control { height: 40px; border-radius: 6px !important; }
.basic-outlogin .input-group { width: 100%; }

/* 유니콘 대신 골드 아이콘 포인트 */
.login-notice-bar i { 
    margin-right: 8px; 
    color: #d4af37; /* 리얼 골드 */
    font-size: 18px;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.6)); 
}

.btn-neon-login {
    width: 100%;
    height: 54px; /* 로그인 박스 규격에 맞춤 */
    border-radius: 6px;
    color: #fff !important; /* 가독성을 위해 블랙 고정 */
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    position: relative;
    z-index: 1;

    /* 보내주신 색상 그대로 유지 */
    background: #5c6af7;
    background-size: 400%;
    
    /* 두 애니메이션 결합: 흐르는 배경 + 퍼지는 파동 */
    animation: inout 1.8s ease infinite, animate 18s linear infinite;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 배경 흐름 애니메이션 (보내주신 값 유지) */
@keyframes animate {
    0% { background-position: 0%; }
    100% { background-position: 400%; }
}

/* 파동 애니메이션 (보내주신 로직 유지) */
@keyframes inout {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(255,255,255,0.15);
    -moz-box-shadow: 0 0 0 0px rgba(255,255,255,0.15);
    box-shadow: 0 0 0 0px rgba(255,255,255,0.15);
  }
  100% {
    
    -webkit-box-shadow: 0 0 0 20px rgba(255,255,255,0);
    -moz-box-shadow: 0 0 0 20px rgba(255,255,255,0);
    box-shadow: 0 0 0 20px rgba(255,255,255,0);
  }
}

/* 호버 시: 툭 튀지 않고 부드럽게 상승 */
.btn-neon-login:hover {
    background: #555EF1;
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.05); /* 눈 안 아픈 수준의 미세한 밝기 향상 */
}

/* 클릭 시 피드백 */
.btn-neon-login:active {
    transform: translateY(-1px) scale(0.98);
}