/*컴포넌트 등*/

.metric-box {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  position: relative;
}

.common-wrap {
  align-items: flex-start;
  border-radius: 8px;
  display: flex;
  position: relative;
}

.left-wrap {
  flex-direction: column;
  gap: 20px;
  height: 300px;
  overflow: hidden;
  padding: 5px 20px; /* [UPDATE] 스타일 수정 */
  /* width: 455px; */
  flex: 1;
  background: #fff; /* [UPDATE] 색상 수정 */
  box-shadow: var(--box-shadow); /* [UPDATE] 그림자 추가 */

}

.right-wrap {
  flex-direction: column;
  gap: 20px;
  height: 300px;
  overflow: hidden;
  padding: 5px 20px;  /* [UPDATE] 스타일 수정 */
  /* width: 455px; */
  flex: 1;
  background: #fff; /* [UPDATE] 색상 수정 */
  box-shadow: var(--box-shadow); /* [UPDATE] 그림자 추가 */
}

.sensor-data-table {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  position: relative;
  width: 100%;
}

.bar-chart-area {
  align-items: flex-start;
  align-self: stretch;
  border: none;
  border-radius: 8px;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
  padding: 5px 20px; /* [UPDATE] 스타일 수정 */
  position: relative;
  background: #fff; /* [UPDATE] 색상 수정 */
  box-shadow: var(--box-shadow); /* [UPDATE] 그림자 추가 */
}

.frame-1707482126 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  left: 708px;
  position: absolute;
  top: 653px;
  width: 1921px;
}

.frame-159 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 40px;
  position: relative;
}

.weather-title {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  position: relative;
}

.component-15 {
  align-items: center;
  background-color: var(--dodger-blue);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 12px;
  position: relative;
  width: 120px;
}

.text-12 {
  color: var(--white);
  font-weight: 600;
  line-height: 24px;
  margin-top: -3px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.text-13 {
  color: var(--white);
  flex: 1;
  font-weight: 500;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  text-align: right;
}

.text-14 {
  color: var(--heather);
  font-weight: 400;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  text-align: right;
  white-space: nowrap;
  width: fit-content;
}

.component-1-1 {
  height: 24px;
  position: relative;
  width: 24px;
}

.databoard {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 20px;
  height: 850px;
  padding: 5px 20px;
  position: relative;
  width: 100%;
}

.quality-section {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  /* width: 930px; */
  flex: 1;
}

.x1 {
  align-self: stretch;
  background-color: var(--white);
  border-radius: 8px;
  height: 610px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.data-section {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  /* width: 930px; */
  flex: 1;
}

.component-37 {
  align-items: flex-start;
  display: flex;
  height: 40px;
  justify-content: center;
  margin-left: 168px;
  margin-top: 208px;
  min-width: 40px;
}

.ellipse-container {
  border-radius: 25px;
  height: 50px;
  margin-top: -5px;
  position: relative;
  width: 50px;
}

.flex-row {
  align-items: flex-start;
  display: flex;
  height: 308px;
  margin-left: 94px;
  margin-top: 68px;
  min-width: 242px;
}

.component-container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 228px;
  min-height: 308px;
  width: 60px;
}

.component-35 {
  align-items: flex-start;
  align-self: flex-end;
  display: flex;
  height: 40px;
  justify-content: center;
  min-width: 40px;
}

.component-34 {
  align-items: flex-start;
  display: flex;
  height: 40px;
  justify-content: center;
  min-width: 40px;
}

.ellipse-18-1 {
  background-color: var(--white);
  border: 3px solid;
  border-color: var(--cinnabar);
  border-radius: 13.5px;
  height: 27px;
  left: 12px;
  position: absolute;
  top: 12px;
  width: 27px;
}

.ellipse-19-1 {
  border-color: var(--cinnabar);
}

.ellipse-20-1 {
  border-color: var(--cinnabar);
}

.ellipse-21-1 {
  border-color: var(--cinnabar);
}

.component-36 {
  align-items: flex-start;
  align-self: center;
  display: flex;
  height: 40px;
  justify-content: center;
  margin-left: 98px;
  margin-top: 116px;
  min-width: 40px;
}

.component-33 {
  align-items: flex-start;
  display: flex;
  height: 40px;
  justify-content: center;
  margin-left: 4px;
  margin-top: 26px;
  min-width: 40px;
}

.ellipse-18-2 {
  background-color: var(--west-side);
  border-radius: 12px;
  height: 24px;
  left: 13px;
  position: absolute;
  top: 13px;
  width: 24px;
}

.ellipse-19-2 {
  border-color: var(--west-side);
}

.ellipse-20-2 {
  border-color: var(--west-side);
}

.ellipse-21-2 {
  border-color: var(--west-side);
}

.map-cate {
  align-items: flex-start;
  align-self: flex-start;
  background-color: #1a1d34;
  border-radius: 8px;
  box-shadow: 0px 0px 8px #0e101b33;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 87px;
  overflow: hidden;
  padding: 12px;
  position: relative;
}

.frame-1707482 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 12px;
  position: relative;
}

.vector-32-1 {
  height: 3px;
  position: relative;
  width: 32px;
}

.text-1 {
  color: var(--white);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.vector-32 {
  height: 12px;
  position: relative;
  width: 32px;
}

.weather-week {
  align-items: flex-start;
  align-self: stretch;
  background-blend-mode: overlay;
  background-color: var(--white-2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 214px;
  justify-content: space-between;
  overflow: hidden;
  padding: 20px;
  position: relative;
  width: 100%;
  background: #fff; /* [UPDATE] 색상 수정 */
  box-shadow: var(--box-shadow); /* [UPDATE] 그림자 추가 */
}

.text-2 {
  color: var(--white);
  font-weight: 600;
  line-height: 28px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-8-3 {
  color: var(--heather);
  font-weight: 400;
  line-height: 24px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.weather-days {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

/* .each-day {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  position: relative;
}

.address {
  align-self: stretch;
  color: var(--white);
  font-weight: 600;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
} */

/* each-day 안에서 오전/오후 블록 */
.each-day {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* gap: 8px; 
  padding: 12px 8px; */
  border-radius: 8px;
  /* background: rgba(255, 255, 255, 0.02); 살짝 박스 느낌 */
}

.each-day .address {
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-m);
  margin-bottom: 6px;
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  text-align: center;
}

/* 오전 / 오후 개별 블록 */
.half-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  /* width: 100%; */
  /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
}

.half-day:first-of-type {
  border-top: none; /* 오전에는 라인 없음 */
}

.time-label {
  font-size: var(--font-size-s);
  font-weight: 600;
  color: var(--heather);
}

/* 아이콘 */
.half-day .icon-wrap {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.half-day .icon-wrap img {
  width: 70%;
  height: auto;
}

/* 상태 텍스트 */
.half-day .text-3 {
  font-size: var(--font-size-s);
  font-weight: 500;
  color: var(--white);
}

/* 온도 */
.half-day .temp-row-high {
  display: flex;
  gap: 2px;
  font-size: var(--font-size-s);
}
.half-day .temp-row-high .text-1 {
  color: var(--supernova); /* 최고 기온 강조 */
}
.half-day .temp-row-high .text-4 {
  color: var(--blue-bayoux); /* 최저 기온 차분하게 */
}

.icon-wrap {
  height: 58px;
  position: relative;
  width: 58px;
}

.group-1 {
}

.overlap-group {
  height: 40px;
  position: relative;
  width: 40px;
}

.ellipse-4 {
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotate(-180deg);
  width: 40px;
}

.mask-group {
  height: 29px;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotate(-180deg);
  width: 40px;
}

.text-3 {
  align-self: stretch;
  color: var(--white);
  font-weight: 600;
  line-height: 20px;
  position: relative;
  text-align: center;
}

.weather-temps {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  position: relative;
}

.temp-row-high {
  display: flex;
}

.text-4 {
  color: var(--wild-blue-yonder);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.vector {
  height: 120px;
  position: relative;
  width: 1px;
  /* padding: 6px; */
  margin-left: 5px;
  margin-right: 5px;
}

.group-9 {
  align-items: flex-start;
  display: flex;
  height: 52px;
  left: 2px;
  min-width: 54px;
  position: relative;
  top: 2px;
}

.overlap-group-container {
  height: 129px;
  margin-left: -71px;
  margin-top: -24.66px;
  position: relative;
  width: 154px;
}

.overlap-group-1 {
  height: 129px;
  left: 0;
  position: absolute;
  top: 0;
  width: 154px;
}

.ellipse-5 {
  background-color: var(--supernova);
  border-radius: 10.87px;
  filter: blur(2px);
  height: 22px;
  left: 91px;
  position: absolute;
  top: 25px;
  width: 22px;
}

.ellipse-4-1 {
  height: 21px;
  left: 91px;
  position: absolute;
  top: 25px;
  width: 21px;
}

.mask-group-1 {
  left: 91px;
  top: 31px;
}

.union {
  height: 129px;
  left: 0;
  position: absolute;
  top: 0;
  width: 142px;
}

.union-1 {
  height: 121px;
  left: 24px;
  width: 131px;
}

.group-container {
  height: 19px;
  left: 77px;
  position: absolute;
  top: 58px;
  width: 30px;
}

.group-3 {
  -webkit-backdrop-filter: blur(7px) brightness(100%);
  backdrop-filter: blur(7px) brightness(100%);
  background-image: url(../img/group-4-2@2x.png);
  background-size: 100% 100%;
  box-shadow: -21px 15px 50px #1c254640, 0px -7px 41px #23bdff4c;
  height: 11px;
  left: 0;
  position: absolute;
  top: 0;
  width: 30px;
}

.group-4 {
  -webkit-backdrop-filter: blur(7px) brightness(100%);
  backdrop-filter: blur(7px) brightness(100%);
  background-image: url(../img/group-4@2x.png);
  background-size: 100% 100%;
  box-shadow: -21px 15px 50px #1c254640, 0px -7px 41px #23bdff4c;
  height: 11px;
  left: 3px;
  position: absolute;
  top: 8px;
  width: 18px;
}

.group-1-1 {
  align-items: flex-start;
  display: flex;
  height: 38px;
  left: 3px;
  min-width: 53px;
  position: relative;
  top: 10px;
}

.overlap-group-2 {
  height: 58px;
  margin-left: -3px;
  margin-top: -10.43px;
  position: relative;
  width: 58px;
}

.ellipse-5-1 {
  background-color: var(--supernova);
  border-radius: 10.67px;
  filter: blur(2.5px);
  height: 21px;
  left: 23px;
  position: absolute;
  top: 10px;
  width: 21px;
}

.ellipse-4-2 {
  height: 21px;
  left: 23px;
  position: absolute;
  top: 11px;
  width: 21px;
}

.mask-group-2 {
  left: 23px;
  top: 17px;
}

.union-2 {
  height: 58px;
  left: 0;
  width: 58px;
}

.group-3-1 {
  -webkit-backdrop-filter: blur(7px) brightness(100%);
  backdrop-filter: blur(7px) brightness(100%);
  background-image: url(../img/group-4-3@2x.png);
  background-size: 100% 100%;
  box-shadow: -21px 15px 50px #1c254640, 0px -7px 41px #23bdff4c;
  height: 11px;
  width: 30px;
}

.group-4-1 {
  -webkit-backdrop-filter: blur(7px) brightness(100%);
  backdrop-filter: blur(7px) brightness(100%);
  background-image: url(../img/group-4-1@2x.png);
  background-size: 100% 100%;
  box-shadow: -21px 15px 50px #1c254640, 0px -7px 41px #23bdff4c;
  height: 11px;
  left: 3px;
  position: absolute;
  top: 8px;
  width: 18px;
}

.frame-6-1 {
  align-self: stretch;
  flex-direction: column;
  height: 330px;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
}

/*
.frame-1707482064 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 17px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.frame-1707482063 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 20px;
  position: relative;
}*/

.group-5 {
  height: 8px;
  position: relative;
  width: 16px;
}

.overlap-group-3 {
  height: 8px;
  position: relative;
  width: 17px;
}

.vector-10 {
  height: 1px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 4px;
  width: 17px;
}

.ellipse-6 {
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--cerulean);
  border-radius: 4px;
  height: 8px;
  left: 4px;
  position: absolute;
  top: 0;
  width: 8px;
}

.price-1 {
  color: var(--white);
  line-height: 20px;
  white-space: nowrap;
  width: fit-content;
}

.ellipse-6-1 {
  border: 1px solid;
  border-color: var(--green);
  border-radius: 4px;
  height: 8px;
  left: 4px;
  top: 0;
  width: 8px;
}

.orp {
  color: var(--white);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.ellipse-6-2 {
  border: 1px solid;
  border-color: var(--west-side);
  border-radius: 4px;
  height: 8px;
  left: 4px;
  top: 0;
  width: 8px;
}

.text-31 {
  color: var(--white);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.sensor-wrap {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  position: relative;
  width: 100%;
}

.sensor-datas {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.sensor-datas .text-11 {
  color: var(--text-color) !important; /* [UPDATE] 색상 추가 */
}

.group-4-2 {
  align-self: stretch;
  display: flex;
  height: 188px;
  position: relative;
  width: 100%;
}

/*.frame-1707482056 {
  align-items: center;
  display: flex;
  gap: 8px;
  height: 188px;
  position: relative;
  width: 890px;
}*/

/*.frame-1707482055 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  width: 25px;
}*/

.number-4 {
  align-self: stretch;
  color: var(--white);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
}

.number {
  align-self: stretch;
  color: var(--white);
  font-weight: 400;
  line-height: 20px;
  position: relative;
}

/*
.frame-1707482054 {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  height: 164px;
  justify-content: space-between;
  position: relative;
}*/

.vector-1-2 {
  align-self: stretch;
  height: 1px;
  margin-top: -0.5px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.vector-1 {
  align-self: stretch;
  height: 1px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.vector-8 {
  align-self: stretch;
  height: 1px;
  margin-bottom: -0.5px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.group-4-3 {
  height: 147px;
  left: 46px;
  position: absolute;
  top: 13px;
  width: 637px;
}

.overlap-group-container-1 {
  height: 30px;
  left: 0;
  position: absolute;
  top: 117px;
  width: 637px;
}

.overlap-group-6 {
  height: 7px;
  left: 0;
  position: absolute;
  top: 23px;
  width: 637px;
}

.vector-9 {
  height: 4px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 633px;
}

.ellipse-5-2 {
  background-color: var(--white);
  border: 0.5px solid;
  border-color: var(--cerulean);
  border-radius: 2px;
  height: 4px;
  left: 0;
  position: absolute;
  top: 3px;
  width: 4px;
}

.ellipse-6-3 {
  border: 0.5px solid;
  border-color: var(--cerulean);
  border-radius: 2px;
  height: 4px;
  left: 129px;
  top: 2px;
  width: 4px;
}

.ellipse-7 {
  background-color: var(--white);
  border: 0.5px solid;
  border-color: var(--cerulean);
  border-radius: 2px;
  height: 4px;
  left: 255px;
  position: absolute;
  top: 2px;
  width: 4px;
}

.ellipse-8 {
  background-color: var(--white);
  border: 0.5px solid;
  border-color: var(--cerulean);
  border-radius: 2px;
  height: 4px;
  left: 381px;
  position: absolute;
  top: 1px;
  width: 4px;
}

.ellipse-9 {
  background-color: var(--white);
  border: 0.5px solid;
  border-color: var(--cerulean);
  border-radius: 2px;
  height: 4px;
  left: 507px;
  position: absolute;
  top: 0;
  width: 4px;
}

.ellipse-10 {
  background-color: var(--white);
  border: 0.5px solid;
  border-color: var(--cerulean);
  border-radius: 2px;
  height: 4px;
  left: 633px;
  position: absolute;
  top: 2px;
  width: 4px;
}

.overlap-group1 {
  height: 24px;
  left: 0;
  position: absolute;
  top: 0;
  width: 637px;
}

.vector-9-1 {
  height: 21px;
  top: 2px;
}

.ellipse-5-3 {
  background-color: var(--white);
  border: 0.5px solid;
  border-color: var(--green);
  border-radius: 2px;
  height: 4px;
  left: 0;
  position: absolute;
  top: 17px;
  width: 4px;
}

.ellipse-6-4 {
  border: 0.5px solid;
  border-color: var(--green);
  border-radius: 2px;
  height: 4px;
  left: 129px;
  top: 5px;
  width: 4px;
}

.ellipse-7-1 {
  border-color: var(--green);
  top: 20px;
}

.ellipse-8-1 {
  border-color: var(--green);
  top: 7px;
}

.ellipse-9-1 {
  border-color: var(--green);
}

.ellipse-10-1 {
  border-color: var(--green);
  top: 15px;
}

.group-3-2 {
  align-items: flex-start;
  display: flex;
  height: 90px;
  min-width: 637px;
}

.overlap-group2 {
  height: 90px;
  position: relative;
  width: 637px;
}

.vector-9-2 {
  height: 88px;
  top: 1px;
}

.ellipse-5-4 {
  background-color: var(--white);
  border: 0.5px solid;
  border-color: var(--west-side);
  border-radius: 2px;
  height: 4px;
  left: 0;
  position: absolute;
  top: 77px;
  width: 4px;
}

.ellipse-6-5 {
  border: 0.5px solid;
  border-color: var(--west-side);
  border-radius: 2px;
  height: 4px;
  left: 129px;
  top: 86px;
  width: 4px;
}

.ellipse-7-2 {
  border-color: var(--west-side);
  top: 74px;
}

.ellipse-8-2 {
  border-color: var(--west-side);
  top: 48px;
}

.ellipse-9-2 {
  border-color: var(--west-side);
}

.ellipse-10-2 {
  border-color: var(--west-side);
  top: 49px;
}

.frame-1707482055-1 {
  align-items: flex-end;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 0px 30px 0px 60px;
  position: relative;
  width: 100%;
}

.surname {
  color: var(--white);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  width: 45px;
}

.quality-wrap {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
  position: relative;
  width: 100%;
}

.frame-6-2 {
  flex-direction: column;
  gap: 20px;
  height: 386px;
  overflow: hidden;
  padding: 20px;
  width: 455px;
}

.phone {
  color: var(--heather);
  font-weight: 400;
  line-height: 24px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.four-units {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 5px;
  /*justify-content: center;*/
  position: relative;
  width: 100%;
}

.inner-units {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 5px;
  position: relative;
  width: 98%;
}

.sole-unit::before {
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  background: linear-gradient(
    119deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 8px;
  content: "";
  inset: 0;
  mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.sole-unit {
  align-items: flex-start;
  align-self: stretch;
  box-shadow: 0 2px 6px rgba(184, 190, 195, 0.5); /* [UPDATE] 그림자 추가 */
  background-color: #fafdff; /* [UPDATE] 색상 수정 */
  background-blend-mode: overlay;
  /* [DELETE] background-color: var(--cyan--aqua);
  background: rgb(14 64 255 / 8%);
  /background: rgba(255, 255, 255, 0.03);
  border: none; */
  /* border: 1px solid; */
  border-image-source: linear-gradient(
    118.86deg,
    #ffffff 1.95%,
    rgba(255, 255, 255, 0) 98.05%
  );

  border-radius: 8px;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 5px;
  padding: 10px;
  position: relative;
}

.sole-unit-empty {
  align-items: flex-start;
  align-self: stretch;
  background-blend-mode: overlay;
  background-color: var(--cyan--aqua);
  background: rgb(14 64 255 / 8%);
  /background: rgba(255, 255, 255, 0.03);
  border: none;
  /* border: 1px solid; */
  border-image-source: linear-gradient(
    118.86deg,
    #ffffff 1.95%,
    rgba(255, 255, 255, 0) 98.05%
  );

  border-radius: 8px;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
  padding: 20px;
  position: relative;
}

.price-2 {
  align-self: stretch;
  color: var(--heather);
  line-height: 26px;
  text-align: center;
}

.number-1 {
  letter-spacing: -0.75px;
  line-height: 33px;
  position: relative;
  align-self: center;
  text-align: center;
}

.orp-1 {
  align-self: stretch;
  color: var(--heather);
  font-weight: 400;
  line-height: 26px;
  margin-top: -1px;
  position: relative;
  text-align: center;
}

.text-33 {
  align-self: stretch;
  color: var(--heather);
  font-weight: 400;
  line-height: 26px;
  margin-top: -1px;
  position: relative;
  text-align: center;
}

.frame-1707482075 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.text-34 {
  color: var(--heather);
  font-weight: 400;
  line-height: 26px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.unit_percentage {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.frame-1707482071 {
  align-items: flex-end;
  display: inline-flex;
  flex: 0 0 auto;
  position: relative;
}

.number-5 {
  letter-spacing: -0.75px;
  line-height: 48px;
  margin-top: -1px;
  position: relative;
  text-align: right;
  white-space: nowrap;
  width: fit-content;
}

.number-5-h20px {
  letter-spacing: -0.75px;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: right;
  white-space: nowrap;
  width: fit-content;
}

.text-35 {
  color: var(--heather);
  font-weight: 600;
  line-height: 20px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.frame-6-3 {
  flex-direction: column;
  gap: 20px;
  height: 386px;
  overflow: hidden;
  padding: 20px 0px;
  width: 455px;
}

.alarm-title {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 0px 20px;
  position: relative;
  width: 100%;
}

.text-36 {
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  flex: 1;
  font-weight: 600;
  font-size: 18px; /* [UPDATE] 스타일 추가 */
  line-height: 24px;
  margin-top: -1px;
  position: relative;
}

.alarm-list {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  width: 100%;
}

.list-header {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 12px 20px;
  position: relative;
  width: 100%;
}

.text-37 {
  color: var(--geyser);
  flex: 1;
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
}

.vector-1-1 {
  height: 11px;
  position: relative;
  width: 1px;
}

.text-38 {
  color: var(--geyser);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  width: 56px;
}

.text-39 {
  color: var(--geyser);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  width: 50px;
}

.text-40 {
  color: var(--geyser);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  width: 80px;
}

.text-41 {
  color: var(--geyser);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  width: 62px;
}

.frame-17074820-3 {
  align-items: center;
  align-self: stretch;
  background-blend-mode: overlay;
  background-color: var(--white-3);
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 8px 20px;
  position: relative;
  width: 100%;
}

.text-5 {
  color: var(--coconut);
  flex: 1;
  font-weight: 600;
  line-height: 20px;
  position: relative;
}

.price {
  color: var(--coconut);
  font-weight: 600;
  line-height: 20px;
  position: relative;
  text-align: center;
  width: 56px;
}

.number-2 {
  color: var(--coconut);
  font-weight: 600;
  line-height: 20px;
  position: relative;
  text-align: center;
  width: 50px;
}

.text-6 {
  color: var(--blue-jeans);
  font-weight: 600;
  line-height: 20px;
  position: relative;
  text-align: center;
  width: 80px;
}

.frame-1707482077 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  position: relative;
  width: 62px;
}

/*양호 플래그*/
.component {
  align-items: center;
  background-color: var(--green-2);
  border: 1px solid;
  border-color: var(--green);
  border-radius: 8px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 4px 12px;
  position: relative;
}

.text-7 {
  color: var(--green);
  font-weight: 600;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  width: 24px;
}

/*양호 플래그*/

.text-8 {
  color: var(--cinnabar);
  font-weight: 600;
  line-height: 20px;
  position: relative;
  text-align: center;
  width: 80px;
}

/*경고 플래그*/
.component-2 {
  align-items: center;
  background-color: var(--west-side-2);
  border: 1px solid;
  border-color: var(--west-side);
  border-radius: 8px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 4px 12px;
  position: relative;
}

.text-9 {
  color: var(--west-side);
  font-weight: 600;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  width: 24px;
}

/*경고 플래그*/

/*위험 플래그*/
.component-18 {
  align-items: center;
  background-color: var(--cinnabar-2);
  border: 1px solid;
  border-color: var(--cinnabar);
  border-radius: 8px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 4px 10px;
  position: relative;
}

.text-10 {
  color: var(--cinnabar);
  font-weight: 600;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  width: 24px;
}

/*위험 플래그*/

/*

.frame-1707482071-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin-bottom: -6px;
  padding: 8px 20px;
  position: relative;
  width: 100%;
}

.frame-1707482072 {
  align-items: center;
  align-self: stretch;
  background-blend-mode: overlay;
  background-color: var(--white-3);
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin-bottom: -50px;
  padding: 8px 20px;
  position: relative;
  width: 100%;
}
*/
/* .scroll {
  -webkit-backdrop-filter: blur(5px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(5px) brightness(100%);
  background-color: #30374e;
  border-radius: 100px;
  display: flex;
  gap: 10px;
  height: 262px;
  justify-content: center;
  left: 441px;
  padding: 1px;
  position: absolute;
  top: 52px;
  width: 8px;
} */

/* .rectangle-1116 {
  -webkit-backdrop-filter: blur(5px) brightness(100%);
  backdrop-filter: blur(5px) brightness(100%);
  background-color: var(--wild-blue-yonder);
  border-radius: 100px;
  height: 46px;
  position: relative;
  width: 6px;
} */

.status-wrap {
  align-self: stretch;
  gap: 20px;
  height: 170px;
  overflow: hidden;
  padding: 20px;
  width: 100%;

  align-items: flex-start;
  background-blend-mode: overlay;
  background: #fff; /* [UPDATE] 색상 수정 */
box-shadow: var(--box-shadow); /* [UPDATE] 그림자 추가 */
  border-radius: 8px;
  display: flex;
  position: relative;
}

/*.frame-6-4 {
}*/

.status-left {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  position: relative;
}

.status-body {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 12px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.text-6-1 {
  color: var(--wild-blue-yonder);
  font-weight: 400;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  width: 90px;
}

.text-65 {
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  font-weight: 600;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-67 {
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  font-weight: 600;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.date {
  color: var(--white);
  font-weight: 600;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.status-right {
  align-items: center;
  align-self: stretch;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 40px;
  position: relative;
}

.status-infra {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 13px;
  justify-content: center;
  position: relative;
  width: 96px;
}

.component-30 {
  height: 32px;
  position: relative;
  width: 32px;
}

.overlap-group-4 {
  height: 30px;
  left: 1px;
  position: relative;
  top: 1px;
  width: 31px;
}

.vector-21 {
  height: 21px;
  left: 0;
  position: absolute;
  top: 7px;
  width: 31px;
}

.vector-22 {
  height: 24px;
  left: 4px;
  position: absolute;
  top: 6px;
  width: 3px;
}

.vector-28 {
  height: 24px;
  left: 20px;
  position: absolute;
  top: 6px;
  width: 3px;
}

.vector-27 {
  height: 24px;
  left: 8px;
  position: absolute;
  top: 6px;
  width: 3px;
}

.vector-29 {
  height: 24px;
  left: 24px;
  position: absolute;
  top: 6px;
  width: 3px;
}

.vector-26 {
  height: 8px;
  left: 11px;
  position: absolute;
  top: 0;
  width: 9px;
}

.number-3 {
  color: var(--white);
  font-family: var(--font-family-paperlogy-6semibold);
  font-size: var(--font-size-s);
  font-weight: 600;
  left: 10px;
  letter-spacing: -0.18px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 9px;
  width: 10px;
}

.text-11 {
  color: var(--white);
  font-weight: 600;
  line-height: 20px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.map-pop {
  align-items: flex-start;
  background-color: #fff;
  border: 1px solid;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* left: 463px; */
  overflow: hidden;
  padding: 20px;
  position: absolute !important;
  z-index: 9999 !important;
  pointer-events: auto;
}

.sensor-title {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.sensor-position-title {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  position: relative;
  width: 100%;
}

.text-8-1 {
  color: var(--heather);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  width: 80px;
}

.text-8-2 {
  color: var(--heather);
  font-weight: 600;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.weather-shows {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: center;
  position: relative;
  width: 153px;
}

.weather-box {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 4px;
  position: relative;
}

.text-88 {
  align-self: stretch;
  color: var(--heather);
  font-weight: 600;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
}

.table-first-col {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}

.text_label {
  color: var(--heather);
  font-weight: 600;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.t-body-1 {
  border-color: var(--white-2);
}

.text_label-1 {
  color: var(--heather);
  font-weight: 400;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.table-sec-col {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 88px;
}

.t-body-2 {
  border-color: var(--blue-bayoux);
}

.address-7 {
  align-self: stretch;
  color: var(--white);
  font-weight: 600;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
}

.ellipse-10-3 {
  background-color: var(--white);
  border: 0.5px solid;
  border-radius: 2px;
  height: 4px;
  left: 633px;
  position: absolute;
  width: 4px;
}

.ellipse-19-3 {
  border: 2px solid;
  border-radius: 17px;
  height: 34px;
  left: 8px;
  opacity: 0.6;
  position: absolute;
  top: 8px;
  width: 34px;
}

.ellipse-20-3 {
  border: 2px solid;
  border-radius: 21px;
  height: 42px;
  left: 4px;
  opacity: 0.3;
  position: absolute;
  top: 4px;
  width: 42px;
}

.ellipse-21-3 {
  border: 2px solid;
  border-radius: 25px;
  height: 50px;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 50px;
}

.ellipse-6-6 {
  background-color: var(--white);
  position: absolute;
}

.ellipse-7-3 {
  background-color: var(--white);
  border: 0.5px solid;
  border-radius: 2px;
  height: 4px;
  left: 255px;
  position: absolute;
  width: 4px;
}

.ellipse-8-3 {
  background-color: var(--white);
  border: 0.5px solid;
  border-radius: 2px;
  height: 4px;
  left: 381px;
  position: absolute;
  width: 4px;
}

.ellipse-9-3 {
  background-color: var(--white);
  border: 0.5px solid;
  border-radius: 2px;
  height: 4px;
  left: 507px;
  position: absolute;
  top: 0;
  width: 4px;
}

.frame-6-5 {
}

.group-3-3 {
  left: 0;
  position: absolute;
  top: 0;
}

.mask-group-3 {
  height: 15px;
  position: absolute;
  width: 21px;
}

.price-3 {
  font-weight: 400;
  margin-top: -1px;
  position: relative;
}

.t-body-3 {
  align-items: center;
  align-self: stretch;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: flex;
  height: 50px;
  justify-content: center;
  padding: 0px 20px;
  position: relative;
  width: 100%;
}

.union-3 {
  position: absolute;
  top: 0;
}

.vector-9-3 {
  left: 2px;
  position: absolute;
  width: 633px;
}

.alarm-table-wrap {
  /*  margin-top: 24px;*/
  overflow-x: auto;
  border-radius: 8px;
  background-color: #fff; /* [UPDATE] 색상 수정 */
  box-shadow: var(--box-shadow); /* [UPDATE] 색상 수정 */
  width: 100%;
}

.alarm-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--heather); /* [UPDATE] 색상 수정 */
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  /* min-width: 68vh; */
  /* min-width: 720px; */
}

.alarm-table thead {
  background-color: var(--th-color); /* [UPDATE] 색상 수정 */
}

.alarm-table th {
  padding: 8px;
  text-align: center;
  font-weight: 600; /* [UPDATE] 스타일 수정 */
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  border-bottom: 1px solid var(--border-color); /* [UPDATE] 색상 수정 */
}

.alarm-table td {
  padding: 12px 10px;
  text-align: center;
   /* [DELETE] border-bottom: 1px solid #2e334a; */
  border-top: 1px solid var(--border-color); /* [UPDATE] 스타일 추가 */
}

.alarm-value.up {
  color: var(--cinnabar); /* [UPDATE] 색상 수정 */
  font-weight: bold;
}

.alarm-value.down {
  color: var(--green); /* [UPDATE] 색상 수정 */
  font-weight: bold;
}

.status {
  display: inline-block;
  padding: 4px 10px;
  font-weight: 600;
  font-size: 13px;
  border-radius: 8px;
}

.status.good {
  background-color: #1b3e2b;
  color: var(--green); /* [UPDATE] 색상 수정 */
}

.status.warning {
  background-color: #493a16;
  color: var(--west-side); /* [UPDATE] 색상 수정 */
}

.status.danger {
  background-color: #4a1a1a;
  color: var(--cinnabar); /* [UPDATE] 색상 수정 */
}

/*컴포넌트 등*/

/* 전체 적용 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 스크롤바 트랙 (배경) */
::-webkit-scrollbar-track {
  background: #bec8d4; /* [UPDATE] 색상 수정 */
  /* 어두운 배경 */
  border-radius: 4px;
}

/* 스크롤바 핸들 (움직이는 바) */
::-webkit-scrollbar-thumb {
  background: #7688a0; /* [UPDATE] 색상 수정 */
  /* 연한 보라 회색 */
  border-radius: 4px;
}

/* 마우스 hover 시 핸들 색상 변경 */
::-webkit-scrollbar-thumb:hover {
  background: #64768d; /* [UPDATE] 색상 수정 */
}

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

/* 방문한 링크도 동일하게 처리 */
a:visited {
  color: inherit;
  text-decoration: none;
}

/* 마우스 올렸을 때도 스타일 유지 */
a:hover {
  color: inherit;
  text-decoration: none;
}

/* 활성화 상태일 때도 스타일 유지 */
a:active {
  color: inherit;
  text-decoration: none;
}

/*login_*/

.login_wrapper {
  display: flex !important;
  justify-content: center;
  /* 가로 중앙 정렬 */
  align-items: center !important;
  /* 세로 중앙 정렬 */
  color: #fff;
  height: 80vh;
  /* 뷰포트 높이만큼 wrapper 전체 높이 확보 */
}

.login_frame {
  position: relative;
  width: 1000px;
  height: 600px;
  border-radius: 20px;
  overflow: hidden;
  /* [DELETE]border: 6px solid; */
  /* [DELETE] border-color: #162037; */
  box-shadow: var(--box-shadow); /* [UPDATE] 그림자 추가 */
}

.login_frame .left {
  position: absolute;
  width: 500px;
  height: 600px;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow: hidden;
}

.login_frame .IT-n {
  position: absolute;
  width: 500px;
  height: 600px;
  top: 0;
  left: 0;
  object-fit: cover;
}

.login_frame .right {
  position: absolute;
  width: 500px;
  height: 600px;
  top: 0;
  left: 500px;
  /* background-color: var(--variable-collection-grey-950); */
  background: #0e1b29; /* [UPDATE] 색상 수정 */
}

.login_frame .group {
  position: relative;
  width: 360px;
  height: 396px;
  top: 102px;
  left: 70px;
}

.login_frame .login_frame {
  flex-direction: column;
  width: 360px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  display: flex;
  position: relative;
}

.login_frame .login_inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  position: relative;
}

.login_frame .logo-wrapper {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  position: relative;
}

.login_frame .logo {
  position: relative;
  width: 180px;
  height: 31px;
}

.login_frame .login_form {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  position: relative;
}

.login_frame .login_inputs {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  position: relative;
}

.login_frame .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
}

.login_frame .input {
  display: flex;
  align-items: center;
  gap: 4px;
  /* padding: 12px 20px; */
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--variable-collection-grey-700);
  border-radius: 8px;
}

.login_frame .err {
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  position: relative;
}

.login_frame .component {
  position: relative;
  width: 16px;
  height: 16px;
}

.login_frame .login_p {
  position: relative;
  flex: 1;
  margin-top: 2px;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  color: red;
}

.login_frame .button {
  cursor: pointer !important;
  all: unset;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100% !important;
  flex: 0 0 auto;
  border-radius: 8px;
  justify-content: center !important;
}

.login_frame .passfind {
  cursor: pointer;
  position: relative;
  margin-top: 20px;
  width: 131px;
  height: 20px;
  width: 100%;
  text-align: center;
  color: #2e90fa;
}

.login_frame .passmsg {
  /* position: absolute;
  height: 20px;
  top: 0;
  left: 0; */
}

.login_text {
  width: 100%;
  /* height: 24px; */
  border-radius: 8px;
  border: 1px solid var(--border-color);  /* [UPDATE] 색상 추가 */
  background: #fff; /* [UPDATE] 색상 수정 */
  padding: 12px 20px;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  color: var(--heather); /* [UPDATE] 색상 수정 */
}

/*login*/

.map-legend-region {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  background: #1b1e35;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: #fff;
}

.map-legend-region ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.map-legend-region li {
  margin: 6px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.color-box {
  display: inline-block;
  width: 22px;
  height: 12px;
  margin-right: 8px;
  border-radius: 2px;
}

.color-box.han {
  background-color: #a9efc5;
}

.color-box.geum {
  background-color: #e9d7fe;
}

.color-box.nak {
  background-color: #fecdc9;
}

.color-box.seom {
  background-color: #fedf89;
}

.color-box.yeong {
  background-color: #a5f0fc;
}

.marker.blinking {
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  from {
    transform: scale(1);
    background-color: yellow;
  }

  to {
    transform: scale(1.2);
    background-color: orange;
  }
}

.dashboard {
  align-items: flex-start;
  overflow: hidden;
  width: 100%;
}

.dashboard .overlap-group1 {
}

.dashboard .frame-wrap {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  /* min-width: 1920px; */
}

.dashboard .header {
  align-items: flex-end;
  align-self: stretch;
  background: #5dbff6; /* [UPDATE] 색상 수정 */
  background: linear-gradient(90deg, #5DBFF6 0%, #5BBFFD 100%);  /* [UPDATE] 색상 추가 */
  box-shadow: 0px 2px 5px #26334d08;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 10px 20px; /* [UPDATE] 스타일 수정 */
  position: relative;
  width: 100%;
}

header {
  display: flex;
  align-items: center;
}

header span {
  color: #7d89af;
}

h1 {
  font-size: 20px;
}

.dashboard .frame-158 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 40px;
  position: relative;
}

.dashboard .logo {
  /* [DELETE] height: 29.37px; */
  position: relative;
  width: 170px; /* [UPDATE] 스타일 수정 */
  cursor: pointer;
}

.dashboard .filter-select-wrap {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  position: relative;
}

.dashboard .filter-select-wrap .selectbox input {
  border: none; /* [UPDATE] 스타일 추가 */
}

.dashboard .menu-item {
  align-items: center;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 12px;
  position: relative;
  width: 160px;
  cursor: pointer;
}

.dashboard .menu-item:hover {
  background-color: #fff; /* [UPDATE] 색상 수정 */
  font-weight: 600; /* [UPDATE] 스타일 추가*/
}

.dashboard .menu-item:hover .text,
.dashboard .menu-item:hover .text-9 {
  color: var(--dodger-blue); /* [UPDATE] 색상 추가 */
  font-weight: 600; /* [UPDATE] 스타일 추가*/
}

.dashboard .text {
  color: var(--white);
  font-weight: 400;
  line-height: 24px;
  margin-top: -3px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.dashboard .menu-on {
  align-items: center;
  background-color: #fff; /* [UPDATE] 색상 수정 */
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 12px;
  position: relative;
  width: 160px;
}

.dashboard .menu-on .text {
  color: var(--dodger-blue); /* [UPDATE] 색상 추가 */
  font-weight: 600; /* [UPDATE] 스타일 추가*/
}

.dashboard .menu-on .text-9 {
  color: var(--dodger-blue); /* [UPDATE] 색상 추가 */
}

.dashboard .text-9 {
  color: #fff; /* [UPDATE] 색상 수정 */
  font-weight: 600;
  line-height: 24px;
  margin-top: -3px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.dashboard .component-18 .text-9 {
  color: var(--cinnabar); /* [UPDATE] 색상 추가 */
}

.dashboard .user {
  align-items: center;
  background: linear-gradient(90deg,rgba(205, 229, 251, 1) 0%, rgba(205, 229, 251, 0.2) 100%); /* [UPDATE] 색상 수정 */
  border-radius: 25px; /* [UPDATE] 스타일 수정 */
  display: flex;
  gap: 8px;
  height: 50px;
  justify-content: flex-end;
  padding: 0px 8px 0px 12px;
  position: relative;
  width: 242px;
}

.user {
  position: relative;
  cursor: pointer;
}

.user-dropdown {
  display: none;
  position: absolute;
  top: 51px;
  right: 0;
  background-color: #fff; /* [UPDATE] 색상 수정 */
  border: 1px solid var(--border-color); /* [UPDATE] 색상 수정 */
  border-radius: 6px;
  padding: 10px 0;
  width: 100%;
  z-index: 1000;
  box-shadow: var(--box-shadow); /* [UPDATE] 그림자 수정 */

  /* [DELETE] border: 2px solid #2e90fa; */
}

.user-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: #b9c0d4;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
}

.user-dropdown .dropdown-item img {
  width: 16px;
  margin-right: 8px;
}

.user-dropdown .dropdown-item:hover {
  background-color: var(--dodger-blue); /* [UPDATE] 색상 수정 */
  color: #fff;
}

.user-dropdown .dropdown-item:hover span {
  color: #fff; /* [UPDATE] 색상 추가 */
}

.dashboard .avatar-container {
  background-color: var(--white);
  border-radius: 100px;
  display: flex;
  height: 32px;
  overflow: hidden;
  position: relative;
  width: 32px;
}

.dashboard .avatar-image {
  height: 32px;
  width: 32px;
}

.dashboard .user-name-wrap {
  align-items: center;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 4px;
  position: relative;
}

.dashboard .text-10 {
  color: var(--white);
  flex: 1;
  font-weight: 500;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  text-align: right;
}

.dashboard .text-11 {
  color: #fff; /* [UPDATE] 색상 수정 */
  font-weight: 400;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  text-align: right;
  white-space: nowrap;
  width: fit-content;
}

.dashboard .user-menu-icon {
  height: 24px;
  position: relative;
  width: 24px;
}

.dashboard .frame-body {
  align-items: center;
  align-self: stretch;
  display: flex;
  /* [DELETE] height: 890px; */
  min-height: 850px;  /* [UPDATE] 스타일 수정 */
  justify-content: space-between;
  padding: 20px;
  position: relative;
  width: 100%;
  gap: 20px;
}

.dashboard .frame-lnb {
  align-items: flex-start;
  /* background-blend-mode: overlay;
  background-color: var(--white-2); */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 890px;
  overflow: hidden;
  padding: 12px;
  position: relative;
  min-width: 196px;
  border-radius: 8px;
  background: #fff; /* [UPDATE] 색상 수정 */
  box-shadow: var(--box-shadow); /* [UPDATE] 그림자 추가 */
  background-blend-mode: overlay;
}

.dashboard .lnb-list-wrap {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  position: relative;
  width: 100%;
}

.dashboard .lnb-folder-item {
  align-items: center;
  background-color: var(--dodger-blue); /* [UPDATE] 색상 수정 */
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 8px;
  position: relative;
  width: 168px;
}

.dashboard .lnb-item-inner {
  align-items: center;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 8px;
  position: relative;
}

.dashboard .lnb-folder-item .lnb-item-inner .text-1 {
  color: #fff; /* [UPDATE] 색상 추가 */
}

.dashboard .folder {
  height: 20px;
  position: relative;
  width: 20px;
}

.dashboard .text-1 {
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.dashboard .lnb-expand-icon {
  height: 20px;
  position: relative;
  width: 20px;
}

.dashboard .lnb-submenu-item {
  gap: 8px;
  justify-content: space-around;
}

.dashboard .lnb-indicator-slot {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  position: relative;
}

.dashboard .text-2 {
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.dashboard .lnb-highlight-item {
  align-items: center;
  background-color: #e8ecf0; /* [UPDATE] 색상 수정 */
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: space-around;
  padding: 8px;
  position: relative;
  width: 168px;
}

.dashboard .lnb-highlight-item .text-1,
.dashboard .lnb-highlight-item .text-2 {
  color: #1677d2; /* [UPDATE] 색상 추가 */
  font-weight: 600; /* [UPDATE] 스타일 추가 */
}

.dashboard .vector-31 {
  align-self: stretch;
  height: 1px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.dashboard .lnb-alert-item {
  justify-content: space-between;
}

.dashboard .bell-01 {
  height: 20px;
  position: relative;
  width: 20px;
}

.dashboard .frame-content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* [DELETE] height: 890px; 스타일 수정 */
  min-height: 850px; /* [UPDATE] 스타일 수정 */
  position: relative;
  width: 100%;
}

.dashboard .flx-center {
  flex-direction: row;
  justify-content: center;
}

.dashboard .scr-comp {
  gap: 20px;
  align-items: flex-start;
  align-self: stretch;
  /* background-blend-mode: overlay;
  background-color: #ffffff80; */
  border-radius: 8px;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  padding: 5px 20px; /* [UPDATE] 스타일 수정 */
  position: relative;
  width: 100%;
  border-radius: 8px;
  background: #fff; /* [UPDATE] 색상 수정 */
  box-shadow: var(--box-shadow); /* [UPDATE] 그림자 추가 */
  background-blend-mode: overlay;
}

.dashboard .text-3-1 {
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  font-weight: 600;
  line-height: 28px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.dashboard .lnb-container {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  position: relative;
  flex-direction: column;
}

.dashboard .filter-wrap {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  position: relative;
  width: 100%;
  justify-content: space-between;
}

.dashboard .left-btns {
  display: flex;
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  gap: 20px;
  align-items: center;
}

.dashboard .right-btns {
  display: flex;
}

.dashboard .text-4-1 {
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  font-weight: 400;
  line-height: 24px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.dashboard .selectbox {
  align-items: center;
  background-color: #fff; /* [UPDATE] 색상 수정 */
  border-radius: 8px;
  border: 1px solid var(--border-color) !important; /* [UPDATE] 색상 추가 */
  display: flex;
  justify-content: space-between;
  padding: 12px 12px 12px 20px;
  position: relative;
  width: 200px;
}

.dashboard .text-3 {
  color: var(--heather);
  flex: 1;
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
}

.dashboard .data-table-row {
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--border-color); /* [UPDATE] 스타일 추가 */
  display: inline-flex;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}

.dashboard .selectbox-1 {
  cursor: pointer;
  align-items: center;
  border-left: 1px solid var(--border-color); /* [UPDATE] 스타일 추가 */
  background-color: #fff; /* [UPDATE] 색상 수정 */
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 12px;
  position: relative;
}

.dashboard .selectbox-1:first-child {
  border-left: none; /* [UPDATE] 스타일 추가 */
}

.dashboard .text-4 {
  color: var(--heather); /* [UPDATE] 색상 수정 */
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  /* width: 56px; */
}

.dashboard .selectbox-2 {
  align-items: center;
  background-color: #5d6a97;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 12px;
  position: relative;
}

.dashboard .selectbox-2 .text-4,
.dashboard .selectbox-2 .text-5 {
  color: #fff; /* [UPDATE] 색상 추가 */
}

.dashboard .text-5 {
  color: var(--heather); /* [UPDATE] 색상 수정 */
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  width: 56px;
}

.dashboard .selectbox-3 {
  cursor: pointer;
  align-items: center;
  background-color: #7e56d8;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 12px;
  position: relative;
}

.dashboard .selectbox-3 .text-5 {
  color: #fff; /* [UPDATE] 색상 추가 */
}

.dashboard .inputdate {
  align-items: center;
  background-color: var(--fiord);
  border-radius: 8px;
  box-shadow: 0px 2px 5px #26334d08;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 12px 12px 12px 20px;
  position: relative;
}

.dashboard .x2024-07-18 {
  color: var(--heather);
  font-weight: 400;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.dashboard .selectbox-variant7 {
  height: 20px;
  position: relative;
  width: 20px;
}

.dashboard .button {
  background-color: var(--dodger-blue);
  display: flex;
  justify-content: space-between;
  width: 80px;
}

.dashboard .button:hover {
  background-color: #0a5bb3;
}

.dashboard .text-6 {
  color: var(--white);
  font-weight: 400;
  line-height: normal;
  margin-top: -0.5px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  /*width: fit-content;*/
}

.dashboard .data-table-header {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 11px;
  position: relative;
}

.dashboard .button-1 {
  border: 1px solid;
  border-color: #6b7280; /* [UPDATE] 색상 수정 */
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  width: 108px;
  background-color: #6b7280; /* [UPDATE] 색상 추가 */
}

.dashboard .ms-excel-1 {
  height: 20px;
  position: relative;
  width: 20px;
}

.dashboard .button-2 {
  border: 1px solid;
  border-color: #6b7280; /* [UPDATE] 색상 수정 */
  display: flex;
  gap: 8px;
  /*width: 108px;*/
  background: #6b7280; /* [UPDATE] 색상 추가 */
}

.dashboard .settings-01 {
  height: 20px;
  position: relative;
  width: 20px;
}

.dashboard .text-12 {
  color: var(--white);
  flex: 1;
  font-weight: 400;
  line-height: normal;
  margin-top: -0.5px;
  position: relative;
  text-align: center;
}

.dashboard .table {
  align-items: flex-start;
  align-self: stretch;
  /* background-blend-mode: overlay; */
  /* background-color: var(--white-2); */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 800px;
  padding: 20px;
  position: relative;
  border-radius: 8px;
  background: #fff; /* [UPDATE] 색상 수정 */
  box-shadow: var(--box-shadow); /* [UPDATE] 그림자 추가 */
  background-blend-mode: overlay;
  overflow-y: auto;
}

.dashboard .search-summary {
  /* display: flex; */
  width: 100%;
}

.dashboard .lnb-section-header {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
  position: relative;
  width: 100%;
}

.dashboard .text-7 {
  color: var(--green); /* [UPDATE] 색상 수정 */
  font-weight: 400;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.dashboard .span {
  letter-spacing: -0.02px;
}

.dashboard .pagination-summary {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  position: relative;
  /* width: 927.5px; */
}

.dashboard .text-6-1 {
  color: var(--heather); /* [UPDATE] 색상 수정 */
  font-weight: 400;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.dashboard .span1-1 {
  color: var(--white);
}

.dashboard .span2 {
  color: var(--heather);
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-s);
  font-weight: 600;
  letter-spacing: -0.02px;
}

.dashboard .btn_download {
  align-items: center;
  border-radius: 8px;
  display: flex;
  gap: 4px;
  height: 40px;
  justify-content: center;
  position: relative;
  width: 70px;
}

.dashboard .sort-vertical-02 {
  height: 24px;
  position: relative;
  width: 24px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background-color: transparent;
  color: #fff;
  font-family: "Pretendard", sans-serif;
  table-layout: fixed;
  border-spacing: 0;
}

.data-table thead th {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.data-table tbody td {
  text-align: center;
  font-weight: 400;
  font-size: 15px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-content: space-evenly;
  position: relative;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03);
  transition: background-color 0.2s ease;
}

.dashboard .t-body {
  align-items: center;
  align-self: stretch;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--heather);
  border-top-style: solid;
  border-top-width: 1px;
  display: flex;
  height: 50px;
  justify-content: center;
  padding: 0px 20px;
  position: relative;
  width: 100%;
}

.dashboard .text-8 {
  color: var(--west-side);
  font-weight: 600;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.dashboard .t-body-1 {
  align-items: center;
  align-self: stretch;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--heather);
  display: flex;
  height: 50px;
  justify-content: center;
  padding: 0px 20px;
  position: relative;
  width: 100%;
}

.dashboard .text_label {
  color: var(--heather);
  font-weight: 400;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.dashboard .pagenation {
  align-items: center;
  align-self: stretch;
  display: flex;
  height: 40px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.dashboard .frame {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 24px;
  justify-content: center;
  position: relative;
  width: 24px;
}

.dashboard .number {
  align-self: stretch;
  color: var(--dodger-blue);
  font-weight: 600;
  line-height: 20px;
  position: relative;
  text-align: center;
}

.dashboard .button-3 {
  align-items: center;
  border-radius: 6px;
  height: 44px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  justify-content: center;
  cursor: pointer;
}

.dashboard .chevron {
  height: 24px;
  position: relative;
  width: 24px;
}

.dashboard .chevron-double {
  height: 24px;
  position: relative;
  width: 24px;
}

.component-30-3 {
  height: 20px;
  position: relative;
  width: 20px;
}

.dashboard .lnb-hover-box {
  align-items: center;
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  padding: 8px;
  position: relative;
  width: 168px;
}

/* 마우스 오버 상태 */
.lnb-hover-box:hover {
  background-color: #d2d6db; /* [UPDATE] 색상 수정 */
  cursor: pointer;
}

/* active 또는 클릭 후 강조 상태 */
.lnb-hover-box.active,
.lnb-hover-box.on {
  background-color: #2e90fa;
  color: #fff;
}

.lnb-hover-box.active .text-1,
.lnb-hover-box.active .text-2,
.lnb-hover-box.on .text-1,
.lnb-hover-box.on .text-2 {
  color: #fff !important;
  font-weight: 600;
}

.dashboard .overlap {
  /* height: 2399px;
  width: 3233px; */
}

.dashboard .span1-2 {
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-s);
  font-weight: 600;
  letter-spacing: -0.02px;
}

.dashboard .x1-8 {
  align-self: stretch;
  color: var(--geyser);
  font-weight: 400;
  line-height: 20px;
  position: relative;
  text-align: center;
}

.chart-container {
  width: 100%;
  height: 250px;
  margin-bottom: 20px;
}

.chart-wrap {
  width: 100%;
  height: 250px;
  margin-bottom: 20px;
}

/* .settings-button {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  background: #1a1e3a;
  padding: 8px 14px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  border: 1px solid #444;
} */

.settings-panel {
  position: absolute;
  top: 50px;
  right: 0px;
  background: #fff; /* [UPDATE] 색상 수정 */
  border: 1px solid var(--border-color); /* [UPDATE] 색상 수정 */
  border-radius: 8px;
  padding: 15px;
  /* width: 220px; */
  display: none;
  z-index: 10;
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  box-shadow: var(--custom-shadow); /* [UPDATE] 그림자 추가 */
}

.settings-panel h4 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600; /* [UPDATE] 스타일 수정 */
}

.settings-panel label {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
}

/**/
.datepicker-container {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}

input.flatpickr-input {
  /* background-color: #2a2f45; */
  background-color: #fff; /* [UPDATE] 색상 수정 */
  /* color: white; */
  color: var(--heather);
  border: 1px solid var(--border-color); /* [UPDATE] 색상 수정 */
  border-radius: 5px;
  padding: 10px;
  width: 200px;
  text-align: center;
  font-family: "pretendard", sans-serif;
}

label {
  font-size: 14px;
}

/**/

#map {
  width: 100%;
  height: 100%;
}

.marker {
  width: 20px;
  height: 20px;
  background-color: #00aa55;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 170, 85, 0.3);
  position: absolute;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s;
}

.marker.hovered {
  background-color: orange;
  /* hover 시 */
}

.marker.active {
  background-color: yellow;
  /* 클릭 시 */
}

.popup-box {
  background-color: #1e1e2f;
  color: white;
  border-radius: 10px;
  padding: 15px;
  font-family: sans-serif;
  width: 320px;
}

.popup-box h4 {
  margin: 0 0 10px;
  font-size: 18px;
}

.sensor-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.status {
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 12px;
}

.safe {
  background-color: green;
  color: white;
}

.danger {
  background-color: red;
  color: white;
}

/**/
.popup-wrapper {
  font-family: "Pretendard", sans-serif;
  background-color: #1b203d;
  color: #fff;
  border-radius: 12px;
  padding: 16px;
  width: 360px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.popup-header .label {
  font-size: 14px;
  color: #aaa;
}

.popup-header .value {
  font-size: 18px;
  font-weight: bold;
  margin-top: 4px;
}

.popup-header .date {
  font-size: 13px;
  color: #ccc;
  margin-top: 8px;
}

.popup-header .right {
  text-align: right;
}

.popup-header .weather {
  font-size: 14px;
}

.popup-header .temp {
  font-size: 13px;
  color: #ccc;
}

.popup-header .temp span {
  color: #999;
  margin-left: 6px;
}

.sun-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffce00, #ff8800);
  margin-top: 6px;
  margin-left: auto;
}

.sensor-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 14px;
}

.sensor-table thead tr {
  background-color: #2c3155;
}

.sensor-table th,
.sensor-table td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid #2c3155;
}

.status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 14px;
  font-weight: bold;
}

.status.good {
  color: #00d26a;
  border: 1px solid #00d26a;
}

.status.danger {
  color: #ff4e4e;
  border: 1px solid #ff4e4e;
}

/**/
/* 사용자 지정 마커 스타일 */
.custom-marker {
  width: 20px;
  height: 20px;
  background: green;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 128, 0, 0.3);
  position: absolute;
  transform: translate(-50%, -50%);
}

/* 팝업 스타일 */
.custom-info {
  background: #1e1e2f;
  color: white;
  border-radius: 8px;
  padding: 12px;
  font-family: sans-serif;
  width: 300px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.custom-info .status {
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: bold;
}

.status.safe {
  background: green;
  color: white;
}

.status.danger {
  background: red;
  color: white;
}

.dashboard .mobile-header {
  display: none;
  /* background-color: #1e2133; */
  padding: 10px 16px;
  z-index: 999;
  position: relative;
}

.dashboard .mobile-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.dashboard .mobile-logo img {
  /* height: 28px; */
}

.dashboard .hamburger-menu,
.dashboard .mobile-user {
  cursor: pointer;
}

.overlay {
  display: none;
}

/* 테이블 스크롤 감싸기 */
.table-scroll-wrapper {
  width: 100%;
  /*overflow-x: auto;*/
  overflow: visible !important;
  -webkit-overflow-scrolling: touch;
}

.table-scroll-wrapper, .dataTables_scrollBody {
  overflow: visible !important;
}
.selectbox {
  position: relative;
  cursor: pointer;
  width: 160px;

  align-items: center;
  background-color: #fff;/* [UPDATE] 색상 수정 */
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  padding: 9px 12px 12px 9px;
  position: relative;
  width: 200px;
}

.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 2px solid #2e90fa;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #1b1e35;
  z-index: 100;
  color: #fff;
}

.option-item {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
}

.option-item:hover {
  background-color: #181b30;
  color: #fff;
}

footer {
  color: rgba(255, 255, 255, 0.1);
  /* position: absolute; */
  bottom: 130px;
  text-align: center;
  width: 100%;
  padding-left: 60px;
  padding-right: 60px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.password-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 620px;
  margin: 0 auto;
  padding: 80px;
  /* [DELETE] border: 6px solid; */
  /* [DELETE] border-color: #162037;*/
  border-radius: 20px;
  background: #fff; /* [UPDATE] 색상 수정*/
  box-shadow: var(--box-shadow); /* [UPDATE] 그림자 추가 */
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  margin-bottom: 40px;
}

.form-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: center;
}

.form-title {
  color: var(--dodger-blue); /* [UPDATE] 색상 수정 */

  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  /* Font/H1 - SB */
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
}

.form-description {
  color: var(--Base-White, #fff);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  /* Font/T3 - R */
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

.password-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.input-label {
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  font-feature-settings: "liga" off, "clig" off;
  /* Font/T3 - R */
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

.input-field {
  padding: 12px 20px;
  background-color: var(--variable-collection-grey-700);
  border-radius: 8px;
  border: none;
  color: var(--variable-collection-base-white);
  font-family: var(--font-t3-r-font-family);
  font-size: var(--font-t3-r-font-size);
}

.requirements-wrapper {
  display: flex;
  gap: 20px;
  margin-top: 4px;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.requirement-icon {
  width: 16px;
  height: 16px;
}

.requirement-label {
  color: var(--Bule-500, #2e90fa);
  font-feature-settings: "liga" off, "clig" off;
  /* Font/T5 - R */
  font-family: Pretendard;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
}

.additional-requirements {
  margin-top: 8px;
  display: flex;
  gap: 20px;
}

.additional-requirement-text {
  color: var(--Bule-500, #2e90fa);
  font-feature-settings: "liga" off, "clig" off;
  /* Font/T5 - R */
  font-family: Pretendard;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
}

.btn-submit {
  display: flex;
  height: 56px;
  padding: 0px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 8px;
  background: var(--dodger-blue); /* [UPDATE] 색상 수정 */
  color: #fff;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  border: unset;
  cursor: pointer !important;
}

.btn-submit:hover {
  background-color: #0a5bb3;
}

.skip-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  cursor: pointer;
  margin-top: 40px;
}

.skip-text {
  font-family: var(--font-t3-r-font-family);
  font-weight: var(--font-t3-r-font-weight);
  color: var(--variable-collection-grey-400);
  font-size: var(--font-t3-r-font-size);
  letter-spacing: var(--font-t3-r-letter-spacing);
  line-height: var(--font-t3-r-line-height);
  font-style: var(--font-t3-r-font-style);
}

.skip-icon {
  width: 20px;
  height: 20px;
}

/*setting*/

.account-management {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff; /* [UPDATE] 색상 수정 */
  border-radius: 8px;
  background-blend-mode: overlay;
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  width: 930px;
  height: 100%;
  background: #fff; /* [UPDATE] 색상 수정 */
  box-shadow: var(--box-shadow); /* [UPDATE] 그림자 추가 */
}

.account-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

header {
  width: 100%;
}

h1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-icon {
  width: 20px;
  height: 20px;
}

hr {
  width: 100%;
  height: 1px;
  background-color: var(--border-color); /* [UPDATE] 색상 수정 */
  border: none;
  margin: 20px 0;
}

h2 {
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  margin-bottom: 10px;
}

.err-msg {
  margin-top: -13px;
  color: red;
  /* font-size: 12px; */
}

.warning-msg {
  margin-top: -13px;
  color: orange;
  /* font-size: 12px; */
}

dt,
label {
  width: 125px;
}

dd,
input {
  flex: 1;
  padding: 5px 10px;
  background-color: #fff; /* [UPDATE] 색상 수정 */
  border-radius: 8px;
  font-weight: 400;
  font-size: 16px;
  border: 1px solid var(--border-color); /* [UPDATE] 색상 수정 */
  color: var(--heather); /* [UPDATE] 색상 수정 */
  width: 100%;
}

dd > input,
dd > input.flatpickr-input {
  border: none;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.edit-button,
.store-button {
  padding: 10px;
  border: none;
  text-align: center;
  cursor: pointer;
}

.edit-button {
  background-color: #5d6b98;
  width: 100px;
  border-radius: 6px;
  font-size: 16px;
  color: #fff;
}

.store-button {
  background-color: #2e90fa;
  width: 140px;
  border-radius: 6px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

.save-button {
  background-color: #2e90fa;
  width: 242px;
  padding: 10px;
  margin-top: 40px;
  border-radius: 6px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

.save-button:hover {
  background-color: #0a5bb3;
}

.cancle-button {
  background-color: unset !important;
  border: 2px solid #2e90fa;
  color: #2e90fa !important;
  width: 242px;
  padding: 10px;
  margin-top: 40px;
  border-radius: 6px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

/*setting*/

/*센서리스트 팝업*/
.sensor-data {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 20px;
  padding: 20px; */
  border-radius: 8px;
  border: 1px solid var(--variable-collection-bule-500);
}

.sensor-data__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.alert-values {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.04);

  border-radius: 8px;
  border: 1px solid var(--variable-collection-grey-600);
}

.alert-values__label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(125, 137, 175, 1);
}

.alert-values__label::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 13px;
  background-color: rgba(125, 137, 175, 1);
  margin-left: 8px;
}

.alert-values__list {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.alert-values__item {
  display: inline-flex;
  align-items: center;
  gap: 17px;
}

.sensor-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  width: 100%;
}

.sensor-option {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.sensor-data__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.sensor-data__close img {
  width: 24px;
  height: 24px;
}

dl {
  width: 100%;
}

.login-info {
  width: 100%;
}

.user-info {
  width: 100%;
}

/*mailform*/

.mail-form {
  display: flex;
  flex-direction: column;
  width: 464px;
  align-items: center;
  gap: 20px;
  padding: 20px;
  position: relative;
  border-radius: 8px;
  /* border: 1px solid; */
}

.mail-form .div {
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  position: relative;
}

.mail-form .text-wrapper {
  margin-top: -1px;
}

.mail-form .component {
  position: relative;
  width: 24px;
  height: 24px;
}

.mail-form .div-2 {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  position: relative;
}

.mail-form .div-3 {
  height: 48px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  width: 100%;
  display: flex;
  position: relative;
}

.mail-form .input {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  border-radius: 8px;
}

.mail-form .default-wrapper {
  align-items: center;
  gap: 10px;
  flex: 1;
  flex-grow: 1;
  display: flex;
  position: relative;
}

.mail-form .default {
  position: relative;
  width: fit-content;
}

.mail-form .button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  width: 82px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  position: relative;
  align-self: stretch;
}

.mail-form .text {
  position: relative;
  width: fit-content;
}

.mail-form .text-wrapper-2 {
}

.mail-form .button-2 {
  all: unset;
  box-sizing: border-box;
  width: 82px;
  height: 33px;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid;

  display: flex;
  align-items: center;
  position: relative;
}

.mail-form .text-2 {
  margin-top: -1px;
}

.mail-form .button-3 {
  all: unset;
  box-sizing: border-box;
  width: 242px;
  justify-content: space-between;
  padding: 12px;
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  position: relative;
}

.mail-form .text-3 {
  margin-top: -1px;
}

.mail-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.title {
}

.close-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.close-icon {
  width: 24px;
  height: 24px;
}

.verification-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.input-group {
  display: flex;
  gap: 8px;
  width: 100%;
}

.verification-input {
  flex-grow: 1;
  padding: 12px 20px;
}

.verify-button {
  width: 82px;
  padding: 12px;
  background-color: #5d6b98;
  border: unset;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.timer-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.timer {
}

.resend-button {
  width: 82px;
  padding: 8px 12px;
  background: none;
  cursor: pointer;
  border: unset;
  border-radius: 4px;
  border: 1px solid #5d6b98;
  color: #fff;
}

.save-button {
  /* width: 242px;
  padding: 12px;
  cursor: pointer; */
  border: unset;
}

.cancle-button {
  /* width: 242px;
  padding: 12px;
  cursor: pointer;
  border: unset; */
}

.pass-button-group {
  display: flex;
  gap: 10px;
}

.footer-top {
  display: flex;
  color: #fff;
  gap: 20px;
  font-size: 14px;
  font-style: normal;
  font-weight: 100;
}

.footer-top p {
  text-align: left;
  color: var(--heather); /* [UPDATE] 색상 수정 */
  line-height: 20px;
}

.footer-top .ftitle {
  color: var(--text-color); /* [UPDATE] 색상 수정 */
  font-weight: 900;
}

.footer-top .fx {
  width: 80px;
}

.footer-top img {
  position: relative;
  top: 4px;
}

.footer-bottom {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.1);
}

.w_100 {
  width: 100%;
}

.w_450 {
  width: 450px !important;
  height: 32px;
}

.h_20 {
  height: 20px;
}

.h_32 {
  height: 32px;
  width: 100%;
  display: flex;
  padding-top: 6px;
  align-items: center;
  justify-content: space-between;
}

.w_200 {
  width: 160px;
  border-radius: 8px;

  background-color: #404968;
  display: flex;
  justify-content: space-between;
}

.right-placeholder::placeholder {
  text-align: right;
  color: #7d89af;
}

.right-placeholder {
  text-align: left;
  width: 98%;
}

.add-sensor-btn {
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  border: unset;
  border-radius: 4px;
  background: #2e90fa;
  color: #fff;
  cursor: pointer;
}

.add-sensor-btn:hover {
  background-color: #0a5bb3;
}

.soace {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

/*admin*/

.td-options {
  cursor: pointer;
}

.td-adj {
  top: -28px !important;
  right: 120px !important;
}

.td-adj2 {
  top: -15px !important;
  right: 230px !important;
}

.td-adj3 {
  top: -28px !important;
  right: 240px !important;
}

.td-options-list {
  display: none;
  position: absolute;
  transform: translate(-150px, -30px);
  /*top: 20px;
  right: 50px;*/
  background-color: #fff;
  /* border: 1px solid #ccc; */
  border-radius: 6px;
  padding: 10px 0;
  width: 151px;
  z-index: 2001;
  box-shadow: var(--box-shadow);
  border: 2px solid var(--border-color);
}

.td-options-list .dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: #7d89af;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
}

.td-options-list .dropdown-item img {
  width: 16px;
  margin-right: 8px;
}

.td-options-list .dropdown-item:hover {
  background-color: var(--dodger-blue);
  color: #fff;
}

/**/

.device-options {
  cursor: pointer;
}

.device-options-list {
  display: none;
  position: absolute;
  top: -9px;
  right: 80px;
  background-color: #1b1e35;
  /* border: 1px solid #ccc; */
  border-radius: 6px;
  padding: 10px 0;
  width: 151px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  border: 2px solid #2e90fa;
}

.device-options-list .dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: #b9c0d4;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
}

.device-options-list .dropdown-item img {
  width: 16px;
  margin-right: 8px;
}

.device-options-list .dropdown-item:hover {
  background-color: #181b30;
  color: #fff;
}

.no-user {
  color: red;
}

.admit-form {
  width: 640px;
  display: flex;
  flex-direction: column;
}

.admit-line {
  display: flex;
}

.admin-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.using-day {
  font-size: 16px;
  color: #7d89af;
  position: absolute;
  right: 0;
  top: 26px;
}

.no-bg {
  background: unset;
  position: relative;
}

.admin-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: rgba(0, 0, 0, 0.6);*/
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.admin-popup {
  display: flex;
  flex-direction: column;
  width: 464px;
  height: 240px;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  position: relative;
  background-color: #1b1e35;
  border-radius: 8px;
  border: 2px solid #2e90fa;
  color: #fff;
}

.admin-popup .confirmation-message {
  font-size: 15px;
  line-height: 20px;
}

.admin-popup header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-popup .close-button {
  background: none;
  border: none;
  cursor: pointer;
}

.admin-popup .action-buttons {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  gap: 10px;
  margin-top: 20px;
}

.admin-popup .delete-button:hover,
.admin-popup .cancel-buttons:hover {
  background-color: #0a5bb3;
}

.admin-popup .delete-button,
.admin-popup .cancel-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background-color: #2e90fa;
  cursor: pointer;
  border-radius: 6px;
  color: #fff;
  border: unset;
}

.admin-popup .cancel-button {
  background-color: transparent;
  color: #2e90fa;
  border: 1px solid #2e90fa;
}

.close-button {
  background: none;
  border: none;
  cursor: pointer;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  gap: 10px;
  margin-top: 20px;
}

.delete-button:hover,
.cancel-buttons:hover {
  background-color: #0a5bb3;
}

.delete-button,
.cancel-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background-color: #2e90fa;
  cursor: pointer;
  border-radius: 6px;
  color: #fff;
  border: unset;
}

.cancel-button {
  background-color: transparent;
  color: #2e90fa;
  border: 1px solid #2e90fa;
}

/*현황판*/

.dashboard-overview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 20px 0;
  border-radius: 20px;
}

.status-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 10px 10px 20px;
  border-radius: 20px;
}

.status-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.icon-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff; /* [UPDATE] 색상 수정 */
}

.icons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 24px;
  max-height: 24px;
}

.status-label {
  font-size: 24px;
  color: #ffffff;
  text-align: center;
}

.status-count {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 20px;
  font-size: 40px;
  color: #fff;
  display: flex;
  padding: 20px;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background: #fff; /* [UPDATE] 색상 수정 */
}

.count {
  text-align: center;
}

.total {
  background-color: #2e90fa;
}

.no-signal {
  background-color: #5d6b98;
}

.sensor-error {
  background-color: #f04438;
}

.battery-warning {
  background-color: #f79009;
}

.battery-icon {
  position: relative;
  width: 23px;
  height: 23px;
  top: 13px;
  left: 13px;
}

.battery-left {
  position: absolute;
  width: 11px;
  height: 23px;
  top: 0;
  left: 0;
}

.battery-right {
  position: absolute;
  width: 12px;
  height: 23px;
  top: 0;
  left: 11px;
}

/**/

.sensor-installation-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  /* background-color: var(--variable-collection-wop-40); */
  border-radius: 8px;
  overflow: hidden;
  background-blend-mode: overlay;
  width: 221px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.03);
}

.total-sensors {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #3839b1;
}

.section-title {
  color: #fff;
  text-align: center;
}

.sensor-count {
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--variable-collection-base-white);
  font-size: 20px;
  text-align: center;
  letter-spacing: -0.3px;
  line-height: 20px;
}

.count {
  color: var(--heather); /* [UPDATE] 색상 수정 */
}

.unit {
  color: #7d89af;
}

.regional-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.region-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.region-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transition: all 0.3s ease-out;
}

.region-name {
  color: #fff;
}

.region-count {
  font-weight: 600;
  font-size: 16px;
  text-align: center;
}

.divider {
  width: 100%;
  height: 1px;
  opacity: 0.2;
  border: none;
  margin: 12px 0;
}

@media (max-width: 768px) {
  .sensor-installation-status {
    width: 100%;
  }
}

/*미디어쿼리*/

@media (min-width: 1921px) {
  .dashboard {
    margin: 0 auto;
    /* max-width: 1920px; */
  }
}

/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
  .dashboard .frame-wrap {
    min-width: 100vw;
    /* [DELETE] padding: 0 8px; */
  }

  .dashboard .header {
    /* flex-direction: column; */
    align-items: flex-start;
    gap: 12px;
    padding: 12px 8px 0px;
  }

  .dashboard .frame-body {
    flex-direction: column;
    height: auto;
    padding: 12px 8px; /* [UPDATE] 스타일 수정 */
  }

  .dashboard .frame-lnb {
    flex-direction: row;
    width: 100%;
    height: auto;
    min-width: unset;
    min-height: unset; /* [UPDATE] 스타일 추가 */
    padding: 8px 0;
    gap: 8px;
    border-radius: 0;
  }

  .dashboard .frame-content {
    width: 100%;
    height: auto;
    padding: 8px 0;
  }

  .dashboard .scr-comp {
    padding: 12px;
    min-width: unset;
    flex: none; /* [UPDATE] 스타일 추가 */
  }

  .dashboard .table {
    padding: 8px;
    height: auto;
  }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
  .dashboard {
    background-image: none;
  }

  .dashboard .mobile-header-inner {
    padding: 10px;
  }

  .quality-section {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    width: 100%;
    flex: 1;
  }

  .bar-chart-area {
    overflow-x: auto;
  }

  .data-section {
    width: 100%;
    flex: 1;
  }

  .weather-week {
    overflow-x: auto;
  }

  .weather-days {
    /* overflow-x: auto; */
  }

  .quality-wrap {
    flex-direction: column;
  }

  .left-wrap {
    width: 100%;
    flex: 1;
  }

  .right-wrap {
    width: 100%;
    flex: 1;
  }

  .user {
    display: none;
  }

  .header:not(.mobile-header) {
    display: none !important;
  }

  .mobile-header {
    display: flex !important;
  }

  .alarm-table-wrap {
    width: 100%;
    overflow-x: auto;
  }

  /* 모바일 메뉴 오버레이 */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100vh;
    background-color: #0c0f1b; /* [UPDATE] 색상 수정 */
    color: white;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 20px 20px;
    overflow-y: auto;
  }

  .overlay.hidden {
    display: none;
  }

  .overlay-inner {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  .overlay-title {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: bold;
    text-align: left;
  }

  .overlay-menu,
  .overlay-sub ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
  }

  .overlay-menu li,
  .overlay-sub ul li {
    background: #1e293b; /* [UPDATE] 색상 수정 */
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer; /* [UPDATE] 스타일 추가 */
  }

  .overlay-menu li a img {
    width: 16px;
    height: 16px;
  }

  .overlay-sub h3 {
    margin: 10px 0 8px;
    font-size: 16px;
    font-weight: bold;
  }

  .overlay-close {
    margin-bottom: 20px;
    /* padding: 10px 20px; */
    /* background: #2e90fa; */
    /* border: none; */
    /* color: white; */
    border-radius: 6px;
    /* width: 100%; */
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: end;
  }

  .nav-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #0c0f1b;
    z-index: 9999;
    overflow-y: auto;
  }

  .nav-body {
    max-width: 480px;
    margin: 0 auto;
    padding: 60px 20px 20px;
    color: #fff;
  }

  .nav-list,
  .nav-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nav-link,
  .nav-sublink {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    font-size: 16px;
    background: #1e293b; /* [UPDATE] 색상 수정 */
    color: #ffffff;
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.2s;
  }

  /* 2뎁스 */
  .nav-sublink {
    padding: 12px 20px;
    font-size: 15px;
    background: #1e293b; /* [UPDATE] 색상 수정 */
    margin-bottom: 6px;
    border-radius: 4px;
    cursor: pointer;
    color: #ffffff;
    transition: background 0.2s;
  }

  .nav-sublink:hover {
    background-color: #334155; /* [UPDATE] 색상 수정 */
  }

  /* 3뎁스 */
  .nav-subsub-link {
    padding: 10px 36px;
    font-size: 14px;
    background: #34374d;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    margin: 4px 0;
    cursor: pointer;
    transition: background 0.2s;
  }

  .nav-subsub-link:hover {
    background-color: #434660;
  }

  .nav-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-dashboard {
    background-image: url("../img/icon-dashboard.svg");
  }

  .icon-data {
    background-image: url("../img/icon-data.svg");
  }

  .icon-search {
    background-image: url("../img/icon-search.svg");
  }

  .nav-text {
    flex-grow: 1;
  }

  /* 3뎁스 이상: 더 안쪽 들여쓰기 */
  .nav-sub-sublist .nav-sublink {
    padding-left: 48px;
    background: unset;
    font-size: 14px;
    border-bottom: 1px solid;
    border-radius: unset;
  }

  /* 펼침 화살표 회전 */
  .nav-toggle {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.3s ease;
  }

  .has-children.open > .nav-link .nav-toggle,
  .has-children.open > .nav-sublink .nav-toggle {
    transform: rotate(0deg);
  }

  .has-children > .nav-sublist {
    display: none;
  }

  .has-children.open > .nav-sublist {
    display: block;
  }

  .nav-close {
    margin-top: 30px;
    padding: 12px;
    width: 100%;
    background: #2e90fa;
    color: #fff;
    border: none;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
  }

  .frame-lnb.mobile-hidden {
    display: none !important;
  }

  .databoard {
    flex-direction: column;
    align-items: center;
    height: auto;
  }

  .dashboard .frame-wrap {
    min-width: 100vw;
    /* [DELETE] padding: 0 4px; */
  }

  .dashboard .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 4px 0px;
  }

  .dashboard .frame-body {
    flex-direction: column;
    height: auto;
    padding: 8px 8px; /* [UPDATE] 스타일 수정 */
  }

  .dashboard .frame-lnb {
    flex-direction: row;
    width: 100%;
    height: auto;
    min-width: unset;
    padding: 4px 0;
    gap: 4px;
    border-radius: 0;
  }

  .dashboard .frame-content {
    width: 100%;
    height: auto;
    padding: 4px 0;
  }

  .dashboard .scr-comp {
    padding: 10px;
    min-width: unset;
  }

  .dashboard .table {
    padding: 4px;
    height: auto; /* [UPDATE] 색상 수정 */
    background-color: #fff; /* [UPDATE] 색상 수정 */
  }

  .data-table thead th,
  .data-table tbody td {
    font-size: 12px;
    padding: 8px 0;
  }

  .dashboard .user {
    width: 100%;
    min-width: 0;
    padding: 0 4px;
  }

  .dashboard .logo {
    width: 120px;
    height: auto;
  }

  /* 모바일에서 테이블 줄이기 방지 */
  .table-scroll-wrapper table {
    min-width: 700px;
    /* 또는 900px 등 테이블 열 수에 따라 적절히 설정 */
  }

  .dashboard .lnb-container {
    flex-direction: column;
    gap: 10px;
  }

  .dashboard .filter-wrap {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .dashboard .data-table-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .selectbox-1,
  .selectbox-2 {
    flex: 1;
    /* 가로 너비를 균등 분할 */
    text-align: center;
    padding: 10px 0;
    /* 선택 사항 */
    box-sizing: border-box;
    cursor: pointer;
    /* 클릭 가능한 요소처럼 보이게 */
    width: 25%;
    justify-content: center;
  }

  .dashboard .button-3 {
    width: 100%;
  }

  .dashboard .button-2 {
    width: 100%;
  }

  .dashboard .filter-select-wrap {
    width: 100%;
  }

  .dashboard .selectbox {
    width: 100%;
  }

  input.flatpickr-input {
    width: 100%;
    height: 40px;
  }

  .datepicker-container input {
    width: 100%;
    flex: 1;
  }

  .dashboard .data-table-header {
    width: 100%;
    flex-direction: row;
  }

  .mw_50 {
    width: 50% !important;
  }

  .status-wrap {
    width: 100%;
    overflow-x: auto;
  }

  .map-pop {
    gap: 1px;
    padding: 6px;
    max-width: 390px;
    /* padding: 15px; */
    /* gap: 12px; */
    padding: 6px;
  }

  .login_wrapper {
    display: flex !important;
    justify-content: center;
    /* 가로 중앙 정렬 */
    align-items: center !important;
    /* 세로 중앙 정렬 */
    color: #fff;
    height: unset;
    /* 뷰포트 높이만큼 wrapper 전체 높이 확보 */
  }

  .login_frame {
    position: relative;
    width: 1000px;
    height: 600px;
    border-radius: 20px;
    overflow: hidden;
    border: 6px solid;
    /* [DELETE] border-color: #162037; */
    box-shadow: none; /* [UPDATE] 스타일 추가 */
  }

  .login_frame .left {
    display: none;
  }

  .login_frame .IT-n {
    position: absolute;
    width: 500px;
    height: 600px;
    top: 0;
    left: 0;
    object-fit: cover;
  }

  .login_frame .group {
    position: relative;
    width: 80%;
    height: 396px;
    top: 102px;
    left: 0px;
  }

  .login_frame .right {
    /* position: absolute; */
    display: flex;
    justify-content: center;
    width: 100%;

    height: 600px;
    top: 0;
    left: 0px;
    /* background-color: var(--variable-collection-grey-950); */
  }

  .login_wrap {
    display: flex;
    flex-direction: column;
  }

  .password-wrapper {
    padding: 10px;
  }

  .chart-container {
    width: 1000px;
  }

  .chart-wrap {
    overflow-x: auto;
    height: unset;
  }

  .dashboard .left-btns {
    display: flex;
    gap: 10px;
    flex-direction: column;
    width: 100%;
  }

  .dashboard .right-btns {
    display: flex;
    width: 100%;
  }

  .login-info {
    width: 100%;
    gap: 10px;
  }

  dd,
  input {
    /* margin-bottom: 10px; */
  }

  .settings-panel {
    position: absolute;
    top: 287px;
  }

  .info-item {
    display: unset;
    align-items: unset;
  }

  .account-management {
    width: 100%;
    height: unset;
  }

  .err-msg {
    display: block;
    margin-top: 15px;
    width: 100%;
    color: red;
    font-size: 16px;
  }

  .info-item dt {
    margin-top: 10px;
    margin-bottom: 5px;
  }

  .mail-form {
    width: 100%;
    margin: auto;
  }

  .pass-button-group {
    display: flex;
    gap: 10px;
    flex-direction: column;
  }

  .cancle-button {
    /* [DELETE] margin-top: unset; */
  }

  .dashboard .t-body {
    height: 20px;
  }

  .dashboard .t-body-1 {
    height: 30px;
  }

  .dashboard .t-body-3 {
    height: 30px;
  }

  .map-pop .icon-wrap {
    display: none;
  }

  footer {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-top {
    flex-direction: column;
  }
}

.city-marker-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-100%);
}

.city-marker-label .label {
  background: #007bff;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 12px;
  margin-bottom: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.city-marker-label img {
  width: 24px;
  height: 24px;
}

.city-marker-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-100%);
  pointer-events: auto;
}

.city-marker-label .label {
  background: #007bff;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 12px;
  margin-bottom: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.city-marker-label img {
  width: 24px;
  height: 24px;
}

@keyframes pulseHighlight {
  0% {
    background-color: rgba(0, 123, 255, 0.2);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  }
  50% {
    background-color: rgba(0, 123, 255, 0.5);
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.9);
  }
  100% {
    background-color: rgba(0, 123, 255, 0.2);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  }
}

.region-item.highlight {
  box-sizing: border-box;
  border-radius: 5px;
  color: #fff;
  animation: pulseHighlight 1.5s infinite ease-in-out;
  padding: 20px;
}

/* ============================================================
   FHD(1920×1080) 초과 해상도 — 지도(.x1)·차트(#divWeeklyTrendChart) 높이만 확장
   다른 스타일은 일절 변경하지 않음
   ============================================================ */
@media (min-width: 1921px) {
  /* align-items: center 때문에 x1이 위로 넘치는 현상 방지 */
  .databoard {
    align-items: flex-start;
  }

  /* 지도 영역 */
  .x1 {
    height: calc(100vh - 320px);
  }

  /* 주간 트렌드 차트 (인라인 style 덮어쓰기) */
  #divWeeklyTrendChart {
    height: calc((100vh - 680px)) !important;
    width: 100% !important;
  }

  .dashboard .frame-body {
    align-items: flex-start;
    height: calc(100vh - 100px);
  }

  /* LNB 패널 */
  .dashboard .frame-lnb {
    height: calc(100vh - 110px);
  }


  .dashboard .table {
      height: calc(100vh - 120px) !important;
          width: 100% !important;
    }

  .dashboard .frame-content {
    height: calc(100vh - 110px);
  }

  /* scr-comp: flex-grow 차단 → 검색 필터 영역 크기 고정 */
  .dashboard .scr-comp {
    flex: 0 0 auto;
    flex-grow: 0;
  }
}

.dashboard .frame-lnb {
  align-self: stretch;
  height: auto;
}

.dashboard .frame-content {
  align-self: stretch;
  height: auto;
}

.header-right-group {
    display: flex;
    align-items: center;
    gap: 24px;
}

.mobile-lang-row {
    display: flex;
    justify-content: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lang-toggle.mobile-overlay .lang-item {
    font-size: 16px;
    padding: 4px 10px;
}