.story-list {

  /* border: 1px solid #000; */
}

.story-list .row{
  justify-content: start;
}
.story-list .col-md-4{
  margin-bottom: 24px;
  justify-content: start;
}



@media (max-width: 992px) {
  .story-list .col-md-4{
    width: 50%;
  }
}

@media (max-width: 768px) {
  .story-list .col-md-4{
    width: 100%;
  }
}

.story-list .row{
  display: flex;
  justify-content: center;
}

.story-filters{
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

.story-list ul{
  list-style: none;
  display: flex;
  justify-content: right;
  gap: 20px;
  color: rgb(206, 136, 44);
}

.story-list li:hover{
  color: rgb(240, 213, 178);
  cursor: default;
}





/* ##### 타로 리스트 ###### */
.tarot-list-tb{
  margin-top: 30px;
}


/* #### login ##### */

.login-part{
  display: flex;
  /* margin-top: 60px; */
  height: 100vh;
}

.login-inner{
  background-color: white;
  border-radius: 6px;
  width: 36%;
  margin: auto;
  color: #444444;
  padding: 40px 20px;
}

.login-title{
  text-align: center;
  padding-bottom: 20px;
}

.id-pwd-field{
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.id-pwd-field label{
  color: #BDBDC7;
  font-size: 14px;
  padding-bottom: 6px;
}


.id-pwd-field input{
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 4px;
}

.id-check-field{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #bdbdc7;
  justify-content: space-between;
}

.id-check-field input{
  width: 16px;
  height: 16px;
  margin-right: 6px;
}



.id-check-field a{
  color: #BDBDC7;

}



.login-btn-field{
  padding: 24px 0;
}

.login-btn-field button{
  border: none;
}

.login-basic-btn button{
  width: 100%;
  padding: 12px 0;
  border-radius: 4px;
  margin-bottom: 8px;
  background-color: #444444;
  color: white;
}

.login-sns-btn {
  display: flex;
  gap: 8px;
}

.login-sns-btn button{
  width: 100%;
  padding: 12px 0;
  border-radius: 4px;
}

.login-sns-btn img{
  padding-right: 12px;
}



.login-join{
  display: flex;
  font-size: 14px;
  color: #ccc;
}

.auth-form{
  color: #444444;
}

.auth-form {
  
  padding: 20px;
}



.form-group{
  color: #BDBDC7;
  /* padding-bottom: 16px; */
  
}

.form-check {

  margin-bottom: 12px;
}


.login-btn button{
  width: 100%;
  padding: 10px;
  background-color: rgb(49, 49, 49);
  border: none;
}

.new-account{
  color: #BDBDC7;
}

.new-account a{
  color: #444444;
}

.no-gutters{
  /* border: 1px solid #000; */
  background-color: white;
  border-radius: 5px;
}



.sns-login{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.sns-login > a{
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sns-login > a > img{
  padding-right: 12px;
}




.story-title {
  width: 100%;
  height: 40px;
  display: flex;
  gap: 12px;
  padding: 0px 8px;
  margin-top: 16px;
}
.story-title label{
  flex: 1.5;
  /* background-color: #ececec; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-title input{
  flex: 8.5;
  border: none;
  border-radius: 4px;
  background-color: #fcf8ed;
  padding-left: 12px;
}

.story-title input:focus{
  outline: none;
}


.story-content{
  width: 100%;
  display: flex;
  margin-top: 16px;
  padding: 0px 8px;
  gap: 12px;
}

.story-content label{
  flex: 1.5;
  /* background-color: #ececec; */
  display: flex;
  align-items: center;
  justify-content: center;

}



.story_text{
  flex: 8.5;
  background-color: #fcf8ed;
  border: none;
  border-radius: 4px;
  padding-left: 12px;
}

.story_text:focus{
  border: 1px solid #BDBDC7;
  outline: none;
}


.story-writer{
  width: 100%;
  display: flex;
  margin-top: 12px;
  padding: 0px 8px;
  gap: 12px;
}

.story-writer {
  width: 100%;
  display: flex;
  margin-top: 12px;
  gap: 12px;
}

.story-writer label{
  flex: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-writer input{
  flex: 8.5;
  background-color: #efece2;
  border: none;
  padding-left: 10px;
}

.story-writer input:focus{
  border: none;
  outline: none;
}

.story-submit{
  display: flex;
  justify-content: right;
  margin: 10px;
}

.story-submit button{
  padding: 4px 10px 4px 10px;
  background-color: #cda45e;
  color: white;
  width: 100px;
  border: none;
  border-radius: 4px;
}





@media (max-width: 900px) {
  .login-part{
    width: 180%;
    margin-left: -40%;
  }
}

@media (max-width: 460px) {
  .login-part{
    width: 250%;
    margin-left: -75%;
  }
}


@media (min-width: 1300px) {
  .login-back{
    width: 100%;
    margin-left: 0%;
  }
}









/* ########## 회원가입 ########### */
.auth-form div{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 6px;
  font-size: 14px;
  gap: 4px;
}

.auth-form input{
  border: 1px solid #BDBDC7;
  border-radius: 4px;
}

.auth-form label{
  flex: 2;
}

.auth-form input{
  flex: 8;
  padding: 6px 6px;
}

.auth-form button{
  border: none;
  background-color: #cda45e;
  border-radius: 4px;
  color: white;
  padding: 6px;
}


.auth-form select{
  flex: 8;
  border: 1px solid #BDBDC7;
  border-radius: 4px;
  padding: 6px 0px;
}


/* 이메일, 닉네임 */
.join-email label,
.join-nick label{
  flex: 2.1;
}
.join-email input,
.join-nick input{
  flex: 6;
}

.join-email a,
.join-nick a{
  flex: 2;
  background-color: #BDBDC7;
  color: white;
  padding: 6px;
  text-align: center;
  border-radius: 4px;
}

.join-sub {
  width: 100%;
  margin: auto;
}


/* ########## 마이페이지 ############## */

.my-page-title{
  padding-top: 100px;
  text-align: center;
  padding-bottom: 20px;
  margin-top: 40px;
  color: #a86225;
}

.my-tab{
  /* margin: auto; */
  display: flex;
  /* justify-content: center; */
  gap: 2px;
  background-color: transparent;
}

.btn-tab{
  border: none;
  padding: 8px 20px;
}


.user-content{
  display: none;

}

.user-active{
  display: block;
}

.active-button{
  background-color: #cda45e;
  border-bottom: 2px solid #444444;
  font-weight: bold;
  color: white;
}


/* 내 정보, 약관 form */
.user-info-inner{
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0 10px 10px 10px;
}

.user-info-img img{
  width: 200px;
  height: 200px;
  background-color: #d8d8e0;
  border-radius: 20px;
}

.user-basic-info{
  width: 90%;
  margin-top: 40px;
  padding: 0 50px;
}

.basic-info{
  display: flex;
  margin-bottom: 12px;
}


.user-basic-info label{
  font-weight: bold;
  padding-right: 12px;
  flex: 3;
}
.user-basic-info input{
  flex: 7;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #d9d9e0;
  padding: .375rem .75rem;
  color: #000;
}

.user-basic-info input:focus{
  border: none;
}

.basic-info{
  color: #444444;
  display: flex;
  /* justify-content: center; */
}

.add-info{
  margin-top: 60px;
}

.basic-info-edu{
  color: #444444;
  display: flex;
  margin-bottom: 18px;
}

.basic-info-edu label{
  flex: 3;
}

.basic-info-edu-checkbox{
  flex: 7;
}

.basic-info-edu-checkbox input:first-child{
  margin-left: 0;
}
.basic-info-edu-checkbox input{
  margin-left: 16px;
  margin-right: 6px;
}


.info-select-top{
  margin-top: 10px;
}

.basic-info-select{
  color: #444444;
  display: flex;
}

.basic-info-select label{
  flex: 3;
}

.basic-info-select select{
  flex: 7;
  width: 100%;
  font-size: 14px;
  padding: 6px;
  border: none;
  border-radius: 4px;
}


.basic-info-wealth {
  color: #444444;
  padding-top: 30px;
}

.wealth-title{
  margin-bottom: 10px;
  
}

.wealth-select{
  color: #444444;
}

.basic-info-btn{
  padding-top: 40px;
  padding-bottom: 60px;
  width: 200px;
  margin: auto;
}

.basic-info-btn button{
  border: none;
  background-color: #a86225;
  border-radius: 4px;
  width: 100%;
  color: white;
  padding: 8px 0;
}


/* 반응형 #### */

@media (max-width:1024px){

  .user-basic-info{
    width: 100%;
    margin-top: 40px;
    padding: 0 50px;
  }


  
}

@media (max-width:770px){

  .user-info{
    width: 100%;
  }

  .user-info-inner{
    width: 100%;
  }
  .user-basic-info{
    width: 100%;
    margin-top: 40px;
    /* padding: 0 50px; */
  }

  .membership-container{
    width: 100%;
    margin: auto;
  }
  
  
}

@media (max-width:567px){
  .membership-container{
    width: 100%;
    padding: 0;
  }
  .user-info-inner{
    width: 100%;
    padding: 0;
  }
  .user-basic-info{
    width: 110%;
    margin-top: 40px;
    /* padding: 0 50px; */
  }
  .basic-info-file label{
    display: none;
  }
  .basic-info-file{
    width: 50%;
  }
}

@media (max-width:400px){
  .notice-cate{
    display: none;
  }
  .notice-table td{
    font-size: 14px;
  }

  .notice-view-th{
    font-size: 13px;
  }
  .help-td{
    display: none;
  }
}

/* icon+text list indent */
.check-list li p{
  padding-left:  1.5rem; padding-top: .375px;
}

/* 약관 */
.terms-service h3{
  border-bottom: 2px solid #cda45e; width: 100%; text-align: center; margin: 0 auto;
}
.terms-service ul,
.terms-service ol{
  list-style-type: none; padding: 0;
}
.terms-service h5+*:not(span){
  padding: 0 .5rem;
}
.terms-context > li:not(:last-of-type){
  margin-bottom: 15px;
}
.terms-context > li > ol li:not(:last-of-type){
  margin-bottom: 5px;
}
.terms-context span{
  display: block; padding-bottom: .5rem;
}
.terms-context table{
  border: 1px solid #a86225; margin-bottom: 10px;
}
.terms-context table>:not(:last-child)>:last-child>*{
  border-bottom-color: #a86225;
}
[class$='disc'] li,
[class$='ful-disc'] li{
  padding-left: .5rem;
}
[class$='disc'] > ::before{
  content: '⋄'; width: 1px; height: 1px;
}
[class$='ful-disc'] > ::before{
  content: '•'; width: 1px; height: 1px;
}