@charset "UTF-8"; 
@import "./account.css";
/* #### MAIN #### */
.home_ai_banner {
  border-radius: 0 0 24px 24px;
  padding-top: 48px;
  padding-bottom: 70px;
  background: var(--color-secondary) url(../_img/sub/home_ai_bg.png) no-repeat center center / 366px 366px;
}
.home_ai_banner .home_title {
  text-align: center;
  margin-bottom: 20px;
}
.home_ai_banner .home_title h1 {
  font-size: 22px;
  font-weight: 400;
  color: #fff;
}
.home_ai_banner .ai_img {
  position: relative;
  max-width: 210px;
  margin: 0 auto;
}
.home_ai_banner .goto_chat {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.home_ai_banner .goto_chat .btn_goto_chat {
  width: 220px;
  border-radius: 800px;
  background-color: #fff;
  border: 2px solid #248916;
  color: #248916;
}
.home__contents {
  transform: translateY(-80px);
}
.home__contents .home_card {
  background-color: #fff;
  padding: 22px 16px;
  border-radius: 24px;
  margin-bottom: 12px;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.04);
}
.home_weather .weather_info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.home_weather .weather_info .info {
  flex: 1;
}
.loc_filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  margin-bottom: 6px;
}
.loc_filter .filter {
  display: flex;
  align-items: center;
  gap: 4px;
}
.loc_filter .filter .btn_filter {
  width: auto;
  padding: 0 14px;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  border-radius: 800px;
  background-color: #F8F8FA;
  color: #999999;
  font-size: 13px;
  font-weight: 500;
}
.loc_filter .filter .btn_filter.active {
  background-color: #393E48;
  color: #fff;
}
.temp_weather {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.weather_info .info .loc {
  display: inline-block;
  padding-left: 6px;
  padding-right: 8px;
  background-color: #F8F8FA;
  border-radius: 800px;
}
.weather_info .info .loc span {
  font-size: 12px;
  font-weight: 500;
  color: #767676;
  padding-left: 17px;
  position: relative;
}
.weather_info .info .loc span::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(../_img/icon/icon_loc.svg) no-repeat center / contain;
}
.weather_info .info .temperature {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.weather_info .info .temperature h2 {
  font-size: 24px;
  font-weight: 700;
}
.weather_info .info .high_low {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #767676;
}
.weather_info .info .high_low span {
  font-size: 12px;
  font-weight: 500;
  color: #767676;
}
.weather_info .info .high_low span em {
  font-style: normal;
  font-weight: 400;
}
.weather_info .info .high_low span.high em {
  color: #E42925;
}
.weather_info .info .high_low span.low em {
  color: #1F4293;
}
.weather_info .weather_img {
  height: 58px;
  width: auto
}
.weather_info .weather_img img {
  height: 100%;
  object-fit: contain;
}
.weather_more {
  position: relative;
  margin-top: 12px;
}
.weather_more .btn_more {
  height: auto;
}
.weather_more .btn_more span {
  color: #767676;
  font-weight: 400;
}
.home_weather .weather_detail {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background-color: #F8F8FA;
  margin-top: 6px;
}
.home_weather .weather_detail>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  position: relative;
  padding-right: 12px;
}
.home_weather .weather_detail>div::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #F1F1F5;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.home_weather .weather_detail>div:last-child {
  padding-right: 0px;
}
.home_weather .weather_detail>div:last-child::after {
  content: none;
}
.home_weather .weather_detail>div span {
  font-size: 12px;
  line-height: 1;
  color: #767676;
  font-weight: 500;
}
.home_weather .weather_detail>div p {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  line-height: 1.4;
}

.home_weather--skeleton .filter {
  gap: 8px;
}
.home_weather--skeleton .weather_img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.weather_skeleton {
  display: inline-block;
  border-radius: 999px;
  background: linear-gradient(90deg, #ececf1 25%, #f6f7fb 50%, #ececf1 75%);
  background-size: 200% 100%;
  animation: weatherSkeletonShimmer 1.4s ease-in-out infinite;
}
.weather_skeleton--loc {
  width: 110px;
  height: 28px;
}
.weather_skeleton--chip {
  width: 44px;
  height: 30px;
}
.weather_skeleton--temp {
  width: 86px;
  height: 28px;
}
.weather_skeleton--text {
  width: 56px;
  height: 24px;
}
.weather_skeleton--range {
  width: 120px;
  height: 14px;
  margin-top: 3px;
}
.weather_skeleton--icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
}
.weather_skeleton--label {
  width: 38px;
  height: 12px;
  margin-bottom: 8px;
}
.weather_skeleton--value {
  width: 52px;
  height: 18px;
}
@keyframes weatherSkeletonShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.home_weather--empty {
  padding-top: 24px;
  padding-bottom: 24px;
}
.weather_empty {
  padding: 20px 16px;
  border-radius: 16px;
  background-color: #F8F8FA;
  text-align: center;
}
.weather_empty__title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
}
.weather_empty__desc {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #767676;
  line-height: 1.5;
}
.home_card>h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
}
.home_farm .farm-diary__item {
  background-color: #F8F8FA;
}
.home_farm p.date {
  font-size: 12px;
  font-weight: 500;
  color: #767676;
  margin-bottom: 8px;
}
.home_farm .nodata,
.farm-list__content .nodata {
  width: 100%;
  padding: 16px 20px;
  background-color: #F8F8FA;
  border-radius: 16px;
}
.home_qna .qna__item {
  background-color: #F8F8FA;
}
.home_farm .more,
.home_qna .more {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}
.home_farm_status .status_title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}
.home_farm_status .status_title h4 {
  font-size: 18px;
  font-weight: 700;
  color: #181A1A;
}
.home_farm_status .status_title p {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #767676;
}
.home_farm_status .status_title img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
/* #### 농장 #### */
.farm-list {
  padding-top: 20px;
  padding-bottom: 140px;
}
.farm_reg_cnts {
  display: flex;
  align-items: center;
  gap: 8px;
}
.farm_reg_cnts h3 {
  font-size: 18px;
  font-weight: 700;
}
.farm_reg_cnts p {
  font-weight: 600;
  font-size: 16px;
  color: #999;
}
.farm-list .farm__list {
  margin-top: 16px;
}
.farm__list p.date {
  font-size: 13px;
  color: #505050;
  margin-bottom: 8px;
}

/* 농장정보 등록 */
.farm-reg {
  padding-top: 20px;
  padding-bottom: 150px;
}
.form_farm {
  margin-top: 20px;
}
.farm_reg_box {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #E6E9EF;
}
.farm_reg_box:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.farm_reg_box>h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}
.modal_reg_loc .input--select.select_loc .select-primary {
  background-color: #F2F4F6;
}
/* 검색 */
.diary-search .farm_wrap {
  margin-top: 20px;
}
/* 상세 */
.farm-dtl {
  padding-top: 20px;
  padding-bottom: 80px;
}
.crops__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.crops__list span {
  display: inline-block;
  width: auto;
  height: 22px;
  line-height: 22px;
  padding: 0 10px;
  background-color: #F2F4F6;
  border-radius: 800px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
}
.detail_menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.detail_menu .btn_delete {
  color: #F0371E;
}
/* 등록 */
.select_farm_loc {
  cursor: pointer;
}
.select_farm_loc span {
  font-size: 16px;
  font-weight: 500;
  color: #767676;
  position: relative;
  padding-left: 24px;
}
.select_farm_loc span:before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(../_img/icon/icon_loc.svg);
}
.select_farm_loc.active span {
  color: #111;
}
.select_farm_loc.active span::before {
  background-image: url(../_img/icon/icon_loc_on.svg);
}
.select_unit {
  display: flex;
  gap: 4px;
  background-color: #eceff3;
  padding: 6px;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
}
.select_unit input[type="radio"] {
  display: none;
}
.select_unit label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  font-weight: 500;
  color: #767676;
  background-color: transparent;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s;
}
.select_unit input[type="radio"]:checked + label {
  background-color: #fff;
  color: #111;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.cultivation_area {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  color: #111;
}
.cultivation_area .form-control {
  width: 85px;
}
.selected-crops__list {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.selected-crops__list .crops {
  padding-left: 16px;
  padding-right: 12px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #fff;
  border-radius: 800px;
}
.selected-crops__list .crops span {
  font-weight: 600;
  color: #767676;
}
.selected-crops__list .crops .btn_delete {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../_img/icon/icon_delete.svg) no-repeat center / contain;
}
.farm_reg_box .select_crops {
  margin-bottom: 8px;
}
.select_crops .select-primary span.current::before {
  content: '대표 재배작물';
}
.setting_rep_farm {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 8px;
}
.setting_rep_farm h3 {
  font-size: 16px;
  font-weight: 600;
}
.form_reg_farmloc {
  margin-top: 12px;
  padding-bottom: 80px;
}
.form_reg_farmloc .input--select {
  margin-bottom: 8px;
}
.select_loc .select-primary span.current::before {
  content: '지역 선택';
}
/* #### 채팅 #### */
.chat {
  padding-top: 20px;
  padding-bottom: 120px;
}
.no_chat {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 36px;
  text-align: center;
}
.no_chat h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 12px;
  margin-bottom: 8px;
}
.no_chat p {
  line-height: 1.5;
  color: #505050;
}
.no_chat .example_chat {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 12px;
  min-width: 232px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}
.no_chat .example_chat p {
  line-height: 1.6;
}
.no_chat .example_chat p b {
  font-weight: 600;
}
.floating_btn.chat {
  padding: 10px 20px;
  border-top: 1px solid #E6E9EF;
}
.input_chat {
  width: 100%;
  background-color: #F2F4F6;
  border-radius: 800px;
  height: 48px;
  border: 1px solid #E6E9EF;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
}
.input_chat input {
  height: 100%;
  flex: 1;
  width: 100%;
  background-color: transparent;
  border: none;
  font-weight: 500;
  line-height: 1.6;
}
.input_chat .btn_send {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: url(../_img/icon/icon_send_chat.svg) no-repeat center / contain;
}
.input_chat .btn_send:disabled {
  background-image: url(../_img/icon/icon_send_chat_disabled.svg);
}
.chat .btn_prev_chat {
  margin-bottom: 20px;
}
.chat__list .date {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}
.chat__list .date span {
  background-color: #F2F4F6;
  display: inline-block;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  color: #767676;
  height: 27px;
  line-height: 26px;
  border-radius: 800px;
}
.chat__wrap {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.chat__wrap.left {
  justify-content: flex-start;
  padding-right: 40px;
  padding-bottom: 20px; 
}
.chat__wrap.right {
  justify-content: flex-end;
  padding-left: 40px;
}
.chat__wrap.left .chat_cnts {
  background-color: #F2F4F6;
  padding: 16px;
  border-radius: 0px 16px 16px 16px;
  color: #111;
  line-height: 1.6;
}
.chat__wrap.right .chat_cnts {
  background-color: var(--color-primary);
  padding: 16px;
  border-radius: 16px 0 16px 16px;
  color: #fff;
  line-height: 1.6;
  word-break: break-all;
}
.chat__wrap .chat_time {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: #767676;
}
.chat__wrap.right .chat_time {
  text-align: right;  
}
.chat__wrap.left .chat__item {
  display: flex;
  gap: 6px;
}
.chat__wrap .chat__item .thum {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.chat__wrap .chat__item .thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat__item .chat_reception h3 {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 2px;
}
.chat__item .sound {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.chat__item .sound .btn_play {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../_img/icon/icon_play.svg) no-repeat center / contain;
}
.chat__item .sound .btn_play.paused {
  background-image: url(../_img/icon/icon_pause.svg);
}
.chat__item .sound .btn_write {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../_img/icon/icon_write.svg) no-repeat center / contain;
}
/* #### 영농일지 #### */
.diary {
  padding-top: 20px;
  padding-bottom: 80px;
}
.diary .select_farm {
  margin-bottom: 8px;
}
.select_farm .select-primary span.current::before {
  content: '농장선택';
}
.farm-list__content {
  padding: 12px 16px;
  background-color: #fff;
  border-radius: 8px;
}
.farm-list__content > h3 {
  font-size: 13px;
  color: #999;
  margin-bottom: 4px;
}
.farm-list__content .farm-diary__item {
  border: 1px solid #E5E5EC;
}
.form_search_diary input {
  border: none;
  background-color: #FFF;
  height: 48px;
  border-radius: 8px;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 20px;
}
/* 일지 등록 */
.select_diary_date {
  display: block;
  cursor: pointer;
}
.select_diary_date span {
  font-weight: 500;
  font-size: 16px;
  color: #767676;
}
.select_diary_date.active span {
  color: #111;
}
.modal_select_date .modal__inner {
  padding-left: 24px;
  padding-right: 24px;
}
.modal_select_date .calendar {
  margin: 24px 0;
  padding: 0;
}
.select_diary_farm {
  display: block;
  position: relative;
  cursor: pointer;
}
.select_diary_farm::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0;
  top: -8px;
  background: url(../_img/icon/icon_select_arrow.svg) no-repeat center / contain;
}
.select_diary_farm span {
  font-size: 16px;
  font-weight: 500;
  color: #767676;
}
.select_diary_farm.active span {
  color: #111;
}
.modal_select_farm .modal__content {
  padding-top: 24px;
}
.modal_select_farm .farm-diary__item {
  border: 1px solid #E5E5EC;
}
.modal_select_farm .farm_wrap {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 50dvh;
}
.modal_select_farm .farm_wrap::-webkit-scrollbar {
  display: none;
}
/* 일지 상세 */
.image_gallery {
  margin-bottom: 8px;
}
.image_gallery .active_image {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  max-width: 200px;
  margin: 0 auto;
  margin-bottom: 8px;
}
.image_gallery .active_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image_gallery .image_list .image{
  flex: 1;
  aspect-ratio: 1/1;
  height: auto;
}
/* #### 커뮤니티 (전문가에게 물어보기, 공지사항, 문의하기) #### */
.cmnty {
  padding-top: 20px;
  padding-bottom: 140px;
}
.cmnty__contents {
  margin-top: 20px;
}
.cmnty .nodata {
  padding: 50px 0;
}
/* 상세 */
.cmnty-dtl {
  padding-top: 20px;
  padding-bottom: 80px;
}
/* 전문가에게 물어보기 */
.qna__list {
  margin-top: 20px;
}
.satisfaction_rate {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #E6E9EF;
}
.satisfaction_rate .tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.satisfaction_rate .tit h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #111;
}
.satisfaction_rate .cnts {
  margin-top: 8px;
}
.stars {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.stars .star {
  display: inline-block;
  width: 20px;
  height: 19px;
  background: url(../_img/icon/icon_star.svg) no-repeat center / contain;
}
.stars .star.active {
  background-image: url(../_img/icon/icon_star_active.svg);
}
/* 공지사항 */
.notice__item {
  display: block;
  padding: 16px 20px;
  background-color: #fff;
  margin-bottom: 12px;
  border-radius: 16px;
}
.notice__item h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.notice__item p.date {
  font-size: 12px;
  font-weight: 500;
  color: #767676;
}
/* #### Setting #### */
.setting-term {
  margin-top: 20px;
}
.setting__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 8px;
}
.setting__item h3 {
  font-size: 16px;
  font-weight: 500;
  color: #111;
}
.setting__item .btn_go_term {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../_img/icon/icon_arrow_right.svg) no-repeat center / contain;
}
.setting-term .setting__item {
  margin-bottom: 0;
  border-radius: 0px;
  border-bottom: 1px solid #f1f1f5;
}
.setting-term .setting__item:first-child {
  border-radius: 8px 8px 0 0;
}
.setting-term .setting__item:nth-last-child(2) {
  border-radius: 0px 0px 8px 8px;
}
.setting-term .setting__item.marketing {
  margin-top: 8px;
  border-radius: 8px;
}
.setting-version {
  margin-top: 20px;
}
.setting-version>h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 8px;
}
/* 병해진단 */
.diagnosis {
  padding: 20px 0 80px;
}
.diagnosis_list {
  margin-top: 20px;
}
.diagnosis_item {
  margin-bottom: 8px;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
.diagnosis_item .diagnosis_tit {
  display: flex;
  align-items: center;
  gap: 8px;
}
.diagnosis_item .diagnosis_tit .thum {
  background-color: #F8F8FA;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
.diagnosis_item .diagnosis_tit h5 {
  font-size: 16px;
  font-weight: 600;
  color: #111;
}
.diagnosis_item .btn_go {
  background-color: #248916;
  padding: 0 12px;
  padding-right: 8px;
}
.diagnosis_item .btn_go span {
  color: #fff;
  position: relative;
  padding-right: 16px;
}
.diagnosis_item .btn_go span::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(../_img/icon/icon_diagnosis_arrow.svg) no-repeat center / contain;
}
.btn_go_ai {
  background-color: #fff;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}