body{
  background:#000 linear-gradient(135deg, rgba(26, 74, 74, 0.5),rgba(26, 74, 74, 0.3) 10%, rgba(0, 0, 0, 1), rgba(77, 0, 0, 0.3) 90%,rgba(77, 0, 0, 0.5));
  font-size:13px;
  font-family: "Noto Sans KR", sans-serif;
}
.container {
  filter: brightness(0.95) saturate(0.95);
}
.allpage{
  width:500px;
}
.container_all{
  display: flex;
  justify-content: center; 
  align-items: center;     
}
input{
  width:100%;
  height: 48px;
  border-radius: 8px; 
  margin-top:10px;
  padding:10px;
  outline: none;
  border:none;
}
input[type="text"],input[type="password"],input[type="tel"],input[type="email"]{
    background: rgba(255, 255, 255, 0.04); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); 
    
    color: #ddd;
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
input[type="text"]:focus,input[type="password"]:focus,input[type="tel"]:focus,input[type="email"]:focus{
    background: rgba(255, 255, 255, 0.07);  
    border-color: rgba(255, 255, 255, 0.3);    
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 8px rgba(255, 255, 255, 0.15); 
}
input[type="text"]::placeholder,input[type="password"]::placeholder,input[type="tel"]::placeholder,input[type="email"]::placeholder {
    color: rgba(255,255,255,0.4);
    transition: color 0.3s ease;
    font-size:13px;
    font-weight: 300;
}
input[type="text"]:focus::placeholder,input[type="password"]:focus::placeholder,input[type="tel"]:focus::placeholder,input[type="email"]:focus::placeholder {
    color: rgba(255,255,255,0.15);
}

button[type='button']{
  width:30%;
  height: 48px;
  margin-top:10px;
  border-radius:8px;
  color:#fff;
  background:var(--primary_color);
  border:none;
  box-sizing: border-box;
}
button[type='button']:hover,button[type='submit']:hover{
  background:var(--fill_hover_color);
}
button[type='button']:active,button[type='submit']:active{
  background:var(--fill_active_color);
}
button[type='submit']{
  width:100%;
  height: 48px;
  border-radius:8px;
  color:#fff;
  margin-top:10px;
  background:var(--primary_color);
  border:none;
  box-sizing: border-box;
}
.input{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title2{
  margin:0 auto;
  width:100%;
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom:10px;
}
.title1{
  text-align: center;
  margin-bottom:48px;
}
h2{
  margin-top:120px;
  font-size:33px;
  font-weight: 700;
  color:#fff;
}
.container div h3{
  font-size:20px;
  font-weight: 600;
  color:#fff;
}
.container div p{
  font-size: 12px;
  color:var(--primary_color);
}
.checkId{
  width:100%;
  display:flex;
  justify-content: space-between;
  gap:10px;
}
.reset{
  width:100%;
  height: 48px;
  display:flex;
}
.reset a{
  display:flex;
  justify-content: center;
  align-items: center;
  margin-top:10px;
  width:100%;
  height:48px;
  color: var(--white);
  border-radius: 8px;
  background:#2d2d2d;
}
.reset a:hover{
  background:#3d3d3d;
}
.reset a:active{
  background:#4d4d4d;
}
/* footer */
footer{
  margin-top:100px;
}
/* 유효성 검사 */
input.input-error {
  border: 1px solid rgba(255, 0, 0, 0.5);
  transition: box-shadow 0.5s;
  box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.5);
}

.error-message {
  width:100%;
  display:inline-block;
  color: red;
  font-size: 12px;
  line-height: 22px;
  text-align: left;
  display:none;
}
input.input-ok{
  border: 1px solid rgba(0, 161, 73, 0.5);
  transition: box-shadow 0.5s;
  box-shadow: inset 0 0 5px rgba(0, 161, 73, 0.5);
}
.ok-message{
  width:100%;
  display:inline-block;
  color: rgb(0,161,73);
  font-size: 12px;
  line-height: 22px;
  text-align: left;
  display:none;
}