@charset "utf-8";

/* ==============================
  Feedback Index - PC
============================== */

#feedback_page .feedback_toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  margin-bottom: 28px;
}

#feedback_page .feedback_search {
  display: flex;
  align-items: center;
  gap: 12px;

  flex: 1;
}

/* ==============================
  Custom Select
============================== */

#feedback_page .custom_select {
  position: relative;
  min-width: 160px;
}

#feedback_page .feedback_search .custom_select_btn {
  position: relative;
  width: 100%;
  height: 52px;
  padding: 0 46px 0 18px;
  border: 1px solid #dde5df;
  border-radius: 16px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  color: #111111;
}

#feedback_page .feedback_search .custom_select_btn:hover {
  background: #fff;
  transform: unset;
  box-shadow: unset;
}

#feedback_page .custom_select_btn::after {
  content: "\f107";
  position: absolute;
  right: 18px;
  top: 50%;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  transform: translateY(-50%);
  color: #8a928d;
}

#feedback_page .custom_select.active .custom_select_btn {
  border-color: rgba(76, 175, 80, .45);
  box-shadow: 0 0 0 4px rgba(76, 175, 80, .08);
}

#feedback_page .custom_select.active .custom_select_btn::after {
  transform: translateY(-50%) rotate(180deg);
}

#feedback_page .custom_select_list {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: 100%;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(17, 24, 39, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease;
}

#feedback_page .custom_select.active .custom_select_list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#feedback_page .custom_select_list li {
  padding: 12px 13px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #333333;
  cursor: pointer;
}

#feedback_page .custom_select_list li:hover,
#feedback_page .custom_select_list li.active {
  background: rgba(76, 175, 80, .1);
  color: var(--point-color);
}

#feedback_page .custom_select_list li:hover,
#feedback_page .custom_select_list li.active {
  background: rgba(76, 175, 80, .1);

  color: var(--point-color);
}

#feedback_page .feedback_search input {
  flex: 1;

  height: 52px;
  padding: 0 18px;

  border: 1px solid #dde5df;
  border-radius: 16px;

  background: #ffffff;

  font-size: 14px;
  color: #111111;
}

#feedback_page .feedback_search input:focus {
  border-color: rgba(76, 175, 80, .45);

  box-shadow: 0 0 0 4px rgba(76, 175, 80, .08);
}

#feedback_page .feedback_search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 52px;
  padding: 0 22px;

  border-radius: 16px;

  background: #111827;

  font-size: 14px;
  font-weight: 900;
  color: #ffffff;

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

#feedback_page .feedback_search button:hover {
  transform: translateY(-2px);

  background: #1b2435;

  box-shadow: 0 14px 28px rgba(17, 24, 39, .12);
}

#feedback_page .feedback_write_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 52px;
  padding: 0 24px;

  border-radius: 16px;

  background: var(--point-color);

  font-size: 14px;
  font-weight: 900;
  color: #ffffff;

  white-space: nowrap;

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

#feedback_page .feedback_write_btn:hover {
  transform: translateY(-2px);

  box-shadow: 0 14px 28px rgba(17, 24, 39, .12);
}

#feedback_page .feedback_list {
  display: grid;
  gap: 18px;
}

#feedback_page .feedback_item {
  display: block;

  padding: 30px;

  border: 1px solid #e5e7eb;
  border-radius: 30px;

  background: #ffffff;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

#feedback_page .feedback_item:hover {
  transform: translateY(-2px);

  border-color: rgba(76, 175, 80, .25);

  box-shadow: 0 18px 40px rgba(17, 24, 39, .06);
}

#feedback_page .feedback_item_top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 20px;
}

#feedback_page .feedback_type,
#feedback_page .feedback_status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 34px;
  padding: 0 14px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;
}

#feedback_page .feedback_type {
  background: rgba(76, 175, 80, .1);
  color: var(--point-color);
}

#feedback_page .feedback_status.waiting {
  background: #f4f6f8;
  color: #666666;
}

#feedback_page .feedback_status.checking {
  background: rgba(255, 152, 0, .12);
  color: #ff9800;
}

#feedback_page .feedback_status.done {
  background: rgba(76, 175, 80, .12);
  color: var(--point-color);
}

#feedback_page .feedback_item h2 {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.4;
  color: #111111;
}

#feedback_page .feedback_item p {
  margin-top: 14px;

  font-size: 15px;
  line-height: 1.8;
  color: #666666;
}

#feedback_page .feedback_meta {
  display: flex;
  align-items: center;
  gap: 18px;

  margin-top: 28px;

  font-size: 13px;
  font-weight: 700;
  color: #888888;
}

#feedback_page .feedback_empty {
  padding: 80px 20px;

  border-radius: 30px;

  background: #ffffff;

  text-align: center;

  font-size: 15px;
  font-weight: 700;
  color: #777777;
}

/* ==============================
  Feedback Image Icon
============================== */

#feedback_page .feedback_item h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

#feedback_page .feedback_image_icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  height: 30px;
  padding: 0 10px;

  border-radius: 999px;

  background: rgba(76, 175, 80, .1);

  font-size: 12px;
  font-weight: 900;
  color: var(--point-color);

  flex-shrink: 0;
}

#feedback_page .feedback_image_icon i {
  font-size: 12px;
}

/* ==============================
  Paging
============================== */

#feedback_page .feedback_paging {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

  margin-top: 42px;
}

#feedback_page .feedback_paging a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border: 1px solid #dfe5e1;
  border-radius: 14px;

  background: #ffffff;

  font-size: 14px;
  font-weight: 800;
  color: #555555;

  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

#feedback_page .feedback_paging a:hover {
  border-color: rgba(76, 175, 80, .35);

  background: rgba(76, 175, 80, .05);
}

#feedback_page .feedback_paging a.active {
  border-color: var(--point-color);

  background: var(--point-color);

  color: #ffffff;
}

/* ==============================
  Feedback Index - Tablet
============================== */

@media (max-width: 1199px) and (min-width: 768px) {

  #feedback_page .feedback_toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #feedback_page .feedback_write_btn {
    width: 100%;
  }

}

/* ==============================
  Feedback Index - Mobile
============================== */

@media (max-width: 767px) {

  #feedback_page .feedback_toolbar {
    flex-direction: column;
    align-items: stretch;

    gap: 14px;
  }

  #feedback_page .feedback_search {
    flex-direction: column;
    align-items: stretch;
  }

  #feedback_page .custom_select,
  #feedback_page .feedback_search input,
  #feedback_page .feedback_search button,
  #feedback_page .feedback_write_btn {
    width: 100%;
  }

  #feedback_page .feedback_search input {
    padding: 18px;
  }

  #feedback_page .feedback_item {
    padding: 24px 20px;

    border-radius: 24px;
  }

  #feedback_page .feedback_item_top {
    flex-wrap: wrap;
    gap: 10px;
  }

  #feedback_page .feedback_item h2 {
    font-size: 22px;
  }

  #feedback_page .feedback_item p {
    font-size: 14px;
  }

  #feedback_page .feedback_meta {
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 22px;
  }

}