@charset "utf-8";

/** 공통 **/
#kboard-layout.kboard-faq {
  --faq-background: #F2F2F2;
  --faq-border-col: #DBDBDB;
  --faq-padding: 24px;
  --faq-font-l: clamp(16px, 1.2vw, 20px);
  --faq-font-m: 16px;
  --faq-font-num: clamp(16px, 1.8vw, 26px);
  --faq-border-r: 10px;
  --faq-gap: 50px;
  --faq-list-margin: 20px;
}
#kboard-layout.kboard-faq .kboard-faq__wrap {}
#kboard-layout.kboard-faq .kboard-faq__wrap ul {
  padding: 0; list-style: none;
}
#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item {
  position: relative;
  background: var(--faq-background);
  border-radius: var(--faq-border-r);
  overflow: hidden;
  margin-bottom: var(--faq-list-margin);
}
#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .kboard-faq__q,
#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .kboard-faq__a .kboard-faq__a__wrap {
  position: relative;
  display: flex; gap: var(--faq-gap);
  align-items: baseline;
}
#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .faq-title,
#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .faq-content {
  width: 85%;
}
#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .kboard-faq__q {
  background: var(--kboard-color-white);
  padding: var(--faq-padding) calc(var(--faq-padding) * 1.5);
  font-size: var(--faq-font-l);
  border: 1px solid var(--faq-border-col);
  box-sizing: border-box;
  border-radius: var(--faq-border-r);
  cursor: pointer;
  transition: .3s ease-out;
}
#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .kboard-faq__q .faq-arrow {
  position: absolute; right: 2%; top: 50%;
  transform: translate(-50%, -50%);
  transition: .3s ease-out;
}
#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .kboard-faq__q.active {
  background: var(--kboard-color-point);
  color: var(--kboard-color-white);
  border: none;
}
#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .kboard-faq__q.active .faq-arrow {
  transform: translate(-50%, -50%) rotate(180deg);
}
#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .kboard-faq__q.active .faq-arrow {
  filter: invert(1);
}
#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .kboard-faq__a {
  padding: calc(var(--faq-padding) * 1.5);
  font-size: var(--faq-font-m);
  display: none;
}

#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .faq-num {
  font-size: var(--faq-font-num); font-weight: 500;
  transition: .3s ease-out;
}
#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .kboard-faq__q.active .faq-num{
  color: var(--kboard-color-white);
}

#kboard-layout.kboard-faq .kboard-faq__wrap ul .kboard-faq__item .list-control {
  position: absolute; right: 10px; bottom: 10px;
}

@media (max-width:1024px) {
  #kboard-layout.kboard-faq {
    --faq-gap: 20px;
    --faq-padding: 20px;
  }
}

@media (max-width:640px) {
  #kboard-layout.kboard-faq {
    --faq-gap: 12px;
    --faq-padding: 15px;
  }
}