.title-wrap {
  margin-bottom: 16px;
}

.warning {
  margin: 16px 14px 0 14px;
}

[dir='rtl'] #rain-info {
  direction: ltr;
}

.day-select-btn-wrap {
  margin-bottom: 13px;
}

.hourly-detail-wrap {
  padding-bottom: 13px;
  margin: 0 -10px;
}

.date-front {
  padding: 0 10px;
  margin: 13px 0 5px 0;
}

.date-front:first-of-type {
  margin-top: 0;
}

.detail-close p,
.detail-close span {
  line-height: 1;
}

.detail-close > span {
  flex: 1;
  font-size: 17px;
  font-weight: var(--weight-regular);
  color: var(--main-color-d1);
  line-height: 24px;
}

.detail-close-icon {
  flex: 1;
  display: flex;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.detail-close-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.hourly-temperature {
  flex: 1;
}

.hourly-temperature p {
  font-size: 18px;
  font-weight: var(--weight-medium);
  color: var(--main-color-d1);
  line-height: 24px;
}

.hourly-rainfall {
  flex: 1;
  display: flex;
  align-items: center;
}

.hourly-rainfall img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: invert(61%) sepia(98%) saturate(471%) hue-rotate(170deg) brightness(97%) contrast(96%);
  padding: 1px;
}

.hourly-rainfall p {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--main-color-d5);
  letter-spacing: 0.31px;
  line-height: 24px;
  padding-left: 3px;
}

[dir='rtl'] .hourly-rainfall p {
  padding-left: 0;
  padding-right: 3px;
}

/* details */
.hourly-details {
  display: none;
  /* display: flex; */
  justify-content: center;
  /* align-items: center; */
  /* width: 360px; */
  /* height: 384px; */
  height: auto;
  background-color: var(--main-color-d1);
}

.hourly-container {
  background-color: var(--main-color-l2);
  padding: 9px 24px 20px 24px;
}

.hourly-detail-title {
  font-size: 20px;
  font-weight: var(--weight-medium);
  color: var(--main-color-d1);
  letter-spacing: 0.44px;
  padding: 0 2px 20px 2px;
}

.weather-detail-info .weather-card-wrap {
  padding: 0;
}

.weather-detail-title {
  display: flex;
  /* align-items: center; */
}

.weather-detail-title img {
  position: relative;
  left: -2px;
  width: 18px;
  height: 18px;
  filter: invert(66%) sepia(0%) saturate(0%) hue-rotate(179deg) brightness(96%) contrast(87%);
  padding: 2px;
  margin-right: 1px;
}

[dir='rtl'] .weather-detail-title img {
  left: unset;
  right: -2px;
  margin-right: 0;
  margin-left: 1px;
}

.weather-detail-title p {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: #9d9d9d;
  line-height: 18px;
  word-break: keep-all;
}

.weather-card-hourly {
  flex: 1 1 40%;
  border-radius: var(--border-radius-small);
  background-color: var(--color-l2);
  padding: 14px 18px;
  cursor: pointer;
}

.weather-card-hourly:nth-child(odd) {
  margin-right: 10px;
}

[dir='rtl'] .weather-card-hourly:nth-child(odd) {
  margin-right: 0px;
  margin-left: 10px;
}

.weather-card-hourly:nth-child(-n + 4) {
  margin-bottom: 10px;
}

.weather-card-hourly p.data {
  font-size: 22px;
  font-weight: var(--weight-bold);
  color: var(--main-color-d1);
  letter-spacing: -0.5px;
  padding-top: 9px;
}
.bar-rain {
  position: absolute;
  bottom: 1px;
  left: 25px;
  width: 10px;
  height: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  transition: height 2s ease;
}
#rainInfoDescription {
  justify-content: center;
  padding-bottom: 20px;
}
.rainInfoDescriptionContainer {
  display: flex;
  align-items: center;
}
.rainInfoDescriptionContainerMiddle {
  display: flex;
  align-items: center;
  margin: 0 10px;
}
.rainInfoDescriptionCircle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
#rainCircle {
  background-color: #27a7c6;
}
#snowCircle {
  background-color: #70c9fc;
}
#mixCircle {
  background-color: #e280e6;
}
.rainDescriptionContents {
  font-size: 13px;
  font-weight: var(--weight-regular);
  color: var(--main-color-d4);
}
/* #graph-container {
  position: relative;
  width: 600px;
  height: 400px;
  border: 1px solid var(--color-black);
} */

/* #sun {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--color-sun);
  transform: translate(-50%, -50%);
} */

#weekly-info-btn.wide-lang {
  margin-right: 20px;
  margin-bottom: 20px;
}

[dir='rtl'] #weekly-info-btn.wide-lang {
  margin-right: 0;
  margin-left: 20px;
}

.weather-card.head {
  display: flex;
  align-items: center;
  padding: 12px 12px 12px 16px;
  margin-bottom: 10px;
  background-color: var(--color-l2);
  border-radius: var(--border-radius-small);
}
.weather-card.head .head-txt {
  flex: 2;
}

.weather-card.head h3 {
  font-size: 10px;
  font-weight: var(--weight-black);
  color: var(--main-color-d1);
  letter-spacing: 0.3px;
  padding-bottom: 3px;
}
.weather-card.head p {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--main-color-d4);
  line-height: 18px;
}

.weather-card.head .head-video-img {
  flex: 1;
  position: relative;
  top: 2px;
  width: 100%;
  padding-bottom: 20%;
  margin-left: 12px;
}
.weather-card.head .head-video-img img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-small);
}

/* 반응형 */
@media all and (min-width: 768px) {
  .video-url-0 {
    display: none;
  }
  .title-wrap {
    background-color: var(--card-color);
    border-radius: var(--border-radius-medium);
    padding: 16px 20px 20px 20px;
  }

  .title-wrap .headline,
  .title-wrap #locInfo.sub-title {
    padding-left: 0;
  }

  [dir='rtl'] .title-wrap .headline,
  [dir='rtl'] .title-wrap #locInfo.sub-title {
    padding-right: 0;
  }

  .title-wrap .warning {
    margin: 16px 0 0;
  }

  .hourly-detail-wrap {
    margin: 0;
  }

  .date-front {
    padding: 0 6px;
  }

  .weather-detail-close.weather-detail {
    padding: 0;
    border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
  }

  .detail-close {
    padding: 14px 20px;
  }

  .hourly-container {
    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
  }
}

/* 카드 데이터 줄바꿈 방지 */
/* @media (max-width: 400px) {
  .hourly-detail-title, .weather-card-hourly p.data {
    font-size: 20px;
  }

  .weather-card-hourly {
    padding: 14px 16px;
  }
} */

/* @media (max-width: 374px) {
  .weather-card-hourly p.data {
    font-size: 20px;
  }
} */

@media (max-width: 360px) {
  .detail-close > span {
    font-size: 15px;
  }

  .hourly-temperature p {
    font-size: 16px;
  }

  /* 카드 데이터 줄바꿈 방지 */
  /* .hourly-detail-title, .weather-card-hourly p.data {
    font-size: 16px;
  }

  .weather-card-hourly {
    padding: 14px 14px;
  } */
}

@media (max-width: 330px) {
  .detail-close > span {
    font-size: 12px;
  }

  .hourly-temperature p {
    font-size: 13px;
  }

  /* 카드 데이터 줄바꿈 방지 */
  /* .hourly-detail-title {
    font-size: 15px;
  }
  
  .weather-card-hourly p.data {
    font-size: 15px;
  } */
}

@media (max-width: 300px) {
  /* 카드 데이터 줄바꿈 방지 */
  /* .hourly-detail-title, .weather-card-hourly p.data {
    font-size: 14px;
  }

  .weather-card-hourly {
    padding: 14px 12px;
  } */
}

/* 다크모드 */
@media (prefers-color-scheme: dark) {
  .weather-detail-close.weather-detail.active,
  .hourly-container {
    background-color: var(--color-d1);
  }

  .weather-card-hourly {
    background-color: var(--color-d3);
  }
  .weather-card.head {
    background-color: var(--color-d3);
  }
}