@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

body, a, span, button, input, select, textarea, ul, li
, h1, h2, h3, h4, h5, h6 {
  font-family: 'Pretendard', sans-serif !important;
}

a {
  text-decoration: none;
}

body {
  margin: 0;
  padding: 0;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background-color: #ffffff;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  z-index: 1000;
} */

/* footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background-color: #ffffff;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
} */

/* 메인 컨텐츠 */
main {
  /* max-width: 480px; */
  margin: 0 auto;
  /* margin: 56px auto; */
  padding-bottom: 72px;
  background-color: #fff;
  flex: 1;
  box-sizing: border-box;
}


.select-alert {
  color: #525252;
  background-color: #F5F5F5;
  border-radius: 10px;
  padding: 20px 25px;
  font-weight: 700;
}
.btn-select {
  border: 1px solid #E4E4E4;
  background-color: #F5F5F5;
  border-radius: 10px;
  margin-top: 15px;
  text-align: left;
  height: 160px;
  padding: 0 30px;
  background-repeat: no-repeat;
  background-position: bottom 25px right 20px;
  transition-duration: .3s;
}
.btn-select.simple {
  background-image: url('../images/icon_simple.svg');
}
.btn-select.deepen {
  background-image: url('../images/icon_deepen.svg');
}
.btn-select.active {
  background-color: #FFEAA6; 
  border: 0;
}
.btn-select > .title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 5px;
}
.btn-select > .desc {
  font-size: 16px;
  font-weight: 600;
  color: #7E7E7E;
  margin-bottom: 0;
}
.btn-select.active > .desc {
  color: #7D630E;
}
.btn-selected {
  border: 0;
  height: 55px;
  border-radius: 10px;
  background-color: #F5F5F5;
  color: #7E7E7E;
  font-weight: bold;
  font-size: 16px;
  transition-duration: .3s;
}
.btn-selected.active {
  background-color: #262626;
  color: #FFF;
}

.text-hilight {
    color: #EFA212;
}

.questions-list {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.question-item {
  background: rgba(39, 39, 39, 1);
  border-radius: 10px; 
  padding: 10px;
}

.question-item-title {
  color: rgba(239, 162, 18, 1); 
  font-size: 14px; 
  font-weight: bold;
}

.question-item-answer {
  color: rgb(255, 255, 255);
  font-size: 14px; 
  font-weight: bold;
  background: rgba(50, 50, 50, 1);
  border: 1px solid rgba(72, 72, 72, 1);
  border-radius: 55px;
  padding: 5px;
  margin-bottom: 10px;
}



.answer-list {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.answer-item {
  background: rgba(39, 39, 39, 1);
  border-radius: 10px; 
  padding: 10px;
}

.answer-item-title {
  color: rgba(239, 162, 18, 1); 
  font-size: 14px; 
  font-weight: bold;
  padding-bottom: 10px;
}

.answer-item-answer {
  color: rgb(255, 255, 255);
  font-size: 14px; 
  font-weight: bold;
  padding-bottom: 10px;
}

.modal-wrap.deepen {
  background: rgba(255, 255, 255, 0.9);
}


.deepen .questions-list {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.deepen > .questions-list > .question-item{
  background: rgb(209, 209, 209);
  border-radius: 10px; 
  padding: 10px;
}


.deepen  .questions-list  .question-item-answer{
  color: rgb(0, 0, 0);
  border-radius: 10px; 
  padding: 0px;
  font-weight: 400;
  background: rgba(249, 249, 249, 1);
  border: 1px solid rgba(227, 227, 227, 1);
  padding: 5px;
  border-radius: 55px;
  margin-bottom: 10px;
}



.question-item-title2 {
  color: rgba(239, 162, 18, 1); 
  font-size: 14px; 
  font-weight: bold;
}

.question-item-answer2 {
  color: rgb(0, 0, 0);
  font-size: 14px; 
  font-weight: bold;
}



.answer-list2 {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.answer-item2 {
  background: rgb(209, 209, 209);
  border-radius: 10px; 
  padding: 10px;
}

.answer-item-title2 {
  color: rgba(239, 162, 18, 1); 
  font-size: 14px; 
  font-weight: bold;
  padding-bottom: 10px;
}

.answer-item-answer2 {
  color: rgb(0, 0, 0);
  font-size: 14px; 
  font-weight: bold;
  padding-bottom: 10px;
}


.question-answer-list {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inserted-question-item {
  color: rgb(0, 0, 0);
  font-size: 14px; 
  background: rgba(255, 203, 59, 1);
  border-radius: 10px; 
  padding: 10px;
  width: 80%;
  margin-left: auto;
  margin-bottom: 10px;
  text-align: justify;
}


.inserted-answer-item {
  color: rgb(255, 255, 255);
  font-size: 14px; 
  background: rgb(75, 75, 75);
  border-radius: 10px; 
  padding: 10px;
  width: 80%;
  margin-bottom: 10px;
  text-align: justify;
}


.inserted-waiting-item {
  color: rgb(255, 255, 255);
  font-size: 14px; 

  border-radius: 10px; 
  padding: 10px;
  width: 100%;
  margin-bottom: 10px;
  text-align: justify;
}


.deepen .inserted-question-item {
  color: rgb(0, 0, 0);
  font-size: 14px; 
  background: rgba(255, 203, 59, 1);
  border-radius: 10px; 
  padding: 10px;
  width: 80%;
  margin-left: auto;
  margin-bottom: 10px;
  text-align: justify;
  
  
}

.deepen .inserted-answer-item {
  color: rgb(0, 0, 0);
  font-size: 14px; 
  background: rgba(232, 232, 232, 1);
  border-radius: 10px; 
  padding: 10px;
  width: 80%;
  margin-bottom: 10px;
  text-align: justify;
}


.deepen .inserted-waiting-item {
  color: rgb(0, 0, 0);
}