.cube-mobile-name-section {
  display: none;
}
.side-wrap {
  display: flex;
  height: calc(100% - 80px);
  top: 80px;
  position: fixed;
  /*z-index: 100;*/
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE, Edge */
}

.side-wrap::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

@media screen and (max-width: 1280px) {
  .mobile-toggle-on .side-wrap {
    position: fixed;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    z-index: 101;
    pointer-events: auto;
  }
}

.header {
  z-index: 2;
  width: 215px;
  background: var(--aside-background-color);
  border-right: 1px solid #e5e7eb;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr;
}
body.dark .header {
  background: #212121;
  border-right: 1px solid #2f2f2f;
}

html:lang(en) .header {
  width: 235px;
}
.header .ww-hd-info {
  text-align: center;
  padding: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header .ww-hd-info .ww-hd-logo {
  display: none;
  width: 100%;
  text-align: center;
  padding: 24px 0 8px;
}
.header .ww-hd-info .hd_user_wrap {
}
.header .ww-hd-info .hd_user_wrap .hd_location .btn {
  line-height: 24px;
}
.header .ww-hd-info .hd_user_wrap .hd_user {
  text-align: left;
}
.header .ww-hd-info .hd_user_wrap .hd_user h5 {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}
.header .ww-hd-info .hd_user_wrap .hd_user .btnLogout {
  font-size: 10px;
  font-weight: 400;
  line-height: 11px;
  text-decoration: underline;
}
.header .ww-hd-user {
  display: flex;
  height: 120px;
  align-items: center;
  justify-content: center;
}
.header .ww-hd-user a {
  padding: 24px 0;
  text-align: center;
}
.header .ww-hd-user a span {
  display: inline-block;
}
.header .ww-hd-user a strong {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--font-color-400);
  line-height: 13px;
  padding: 4px 0;
}

.gnb-toggle-on .header {
  transform: translateX(0%);
  pointer-events: auto;
}

.aside {
  --ww-rotate: 0;
  --ww-skew-x: 0;
  --ww-skew-y: 0;
  --ww-scale-x: 1;
  --ww-scale-y: 1;
  overflow: hidden;
  width: 220px;
  background: var(--aside-background-color);
  border-right: 1px solid var(--primary-border);
  transform: translate(calc(-100% - 80px), 0) rotate(var(--ww-rotate)) skew(var(--ww-skew-x))
    skewY(var(--ww-skew-y)) scaleX(var(--ww-scale-x)) scaleY(var(--ww-scale-y));
}
.aside-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 0 16px;
  height: 48px;
  box-sizing: content-box;
  position: relative;
  z-index: 100;
}
.aside-title h3 {
  font-size: 18px;
  color: var(--font-color-500);
  font-weight: 600;
  line-height: 110%;
}
.aside .inner {
  position: relative;
  margin: 0 auto;
  padding: 24px 16px;
  height: 100vh;
  overflow-y: auto;
}
.ww-lnb-title {
  padding: 0 0 40px;
}
.ww-lnb-title h4 {
  font-size: 18px;
  font-weight: 500;
  color: var(--font-color-600);
}

.gnb-toggle-on .aside {
  z-index: 1;
}
.lnb-toggle-on .aside {
  transform: unset;
  pointer-events: auto;
}
.mobile-toggle-on .aside .inner {
  margin-top: -24px;
}
.mobile-toggle-on .aside .ww-gnb-toggle {
  display: inline-block;
  width: 48px;
  height: 48px;
  background: url("/images/common/menu-close.png") no-repeat center / 24px;
}

@media screen and (min-width: 1280px) {
  .content-title-select {
    width: 328px;
  }

  .header {
    width: 215px;
  }
  html:lang(en) .header {
    width: 235px;
  }
  .aside-title {
    display: none;
  }
}
body.dark #container {
  background-color: #212121;
}
#container {
  --ww-bg-opacity: 1;
  width: 100%;
  min-height: calc(100vh + 44px);
  background-color: #f1f1f1;
  height: 100%;
}

.content-wrap {
  min-height: 100vh;
  position: relative;
  width: calc(100% - 92px);
  margin-inline-start: 92px;
  z-index: 2;
}
body.dark .content-wrap {
  background: #2f2f2f;
}
.gnb-toggle-on .content-wrap {
  width: calc(100% - 215px);
  margin-inline-start: 215px;
}
html:lang(en) .gnb-toggle-on .content-wrap {
  width: calc(100% - 235px);
  margin-inline-start: 235px;
}
.gnb-closed .gnb-toggle-on .content-wrap {
  width: calc(100% - 92px);
  margin-inline-start: 92px;
}
.lnb-toggle-on .content-wrap {
  width: calc(100% - 215px);
  margin-inline-start: 215px;
}
html:lang(en) .lnb-toggle-on .content-wrap {
  width: calc(100% - 235px);
  margin-inline-start: 235px;
}
html:lang(en).gnb-closed .gnb-toggle-on .content-wrap {
  width: calc(100% - 92px);
  margin-inline-start: 92px;
}
@media screen and (min-width: 1280px) {
  .gnb-toggle-on .content-wrap {
    width: calc(100% - 215px);
    margin-inline-start: 215px;
  }

  .gnb-toggle-on.lnb-toggle-on .content-wrap {
    width: calc(100% - 215px);
    margin-inline-start: 215px;
  }
  html:lang(en) .gnb-toggle-on .content-wrap {
    width: calc(100% - 235px);
    margin-inline-start: 235px;
  }

  html:lang(en) .gnb-toggle-on.lnb-toggle-on .content-wrap {
    width: calc(100% - 235px);
    margin-inline-start: 235px;
  }
}

@media screen and (max-width: 1280px) {
  .content {
    padding: 20px;
  }
}

.gnb-toggle-on .content {
  overflow: hidden;
}
.content {
  padding: 24px;
}

.content-title-select {
  width: 328px;
  /* position: absolute; */
  /* left: 50%; */
  /* transform: translateX(-80%); */
}

/* Mobile landscape guard: show rotate message only */
.rotate-block {
  display: none;
}

@media screen and (max-width: 768px) and (orientation: landscape) {
  .rotate-block {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #ffffff;
    color: #111827;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
  }

  #container,
  footer,
  #webiLoading,
  .loadingbar {
    display: none !important;
  }
}

body.dark .summary-daily-bolus-pop-open .header-title-wrap,
.summary-daily-bolus-pop-open .header-title-wrap {
  z-index: 0;
}
.header-title-wrap {
  border-bottom: 1px solid #c3c3c3;
  background: var(--header-background-color);
  position: sticky;
  top: 0;
  z-index: 99;
}
body.dark .header-title-wrap {
  border-bottom: 1px solid #3d3d3d;
  background: #212121;
}
.content-title {
  padding: 0 24px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content-title .content-title-inner {
  display: flex;
  align-items: center;
  justify-content: start;
}
.content-title .content-title-inner img {
  width: 176px;
}
.content-title .content-title-inner .ww-gnb-toggle {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: url("/images/common/menu-open.svg") no-repeat center / 36px;
  margin-right: 2px;
}
.gnb-toggle-on.lnb-toggle-on .content-title .content-title-inner .ww-gnb-toggle {
  background: url("/images/common/menu-close.svg") no-repeat center / 36px;
}
.content-title p {
  display: none;
  font-size: 12px;
  font-weight: 400;
  line-height: 26px;
  text-align: left;
  color: #a3a3a3;
  vertical-align: top;
}

.content-title .content-title-menu {
  display: flex;
  gap: 16px;
  align-items: center;
  height: 80px;
}
.content-title .content-title-menu-icon {
  padding: 6px 8px;
  display: none;
}
.content-title .content-title-menu .expirationWrap {
  display: flex;
  gap: 16px;
  flex-direction: row;
  position: relative;
  min-width: 120px;
}

.content-title .content-title-menu .expirationInner {
  display: flex;
  font-size: 12px;
  align-items: center;
  gap: 4px;
  /* position: absolute; */
  /* bottom: -20px; */
  /* right: 0; */
}
.content-title .content-title-menu .expirationInner .expirationButton span {
  font-size: 11px;
  font-weight: 500;
}

.content-title .content-title-menu .expirationInner .expirationButton span small {
  font-size: 14px;
  font-weight: 700;
  line-height: 130%;
  color: #526262;
  letter-spacing: -0.04rem;
}
body.dark .content-title .content-title-menu .expirationInner .expirationButton span small {
  color: #cedcdc;
}

.content-title .content-title-menu .expirationWrap button {
  color: #4f4f4f;
  font-size: 14px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.56px;
  background: white;
}
body.dark .content-title .content-title-menu .expirationWrap button {
  background: transparent;
}
.content-title .content-title-menu a {
  display: flex;
  align-items: center;
  gap: 4px;
}
.btnLogout {
  padding: 8px;
}
.content-title .content-title-menu a strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.04rem;
  color: #2f2f2f;
}
body.dark .content-title .content-title-menu a strong {
  color: #f1f1f1;
}
#userDropdownBtn {
  max-width: 260px;
}

#userDropdownBtn .ww-icon-user {
  flex-shrink: 0;
}

#userDropdownBtn strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =======================
   User Dropdown
======================= */
.user-dropdown {
  position: relative;
}
.user-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: min(320px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #dee7e7;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 16px;
  z-index: 100;
}

.user-dropdown-menu.open {
  display: block;
}
.user-dropdown-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.user-dropdown-name {
  display: block;
  font-weight: 700;
  font-size: 22px;
  line-height: 130%;
  letter-spacing: -0.88px;
  color: #377c4d;
}
.user-dropdown-section--info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.user-label-wrap {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.user-dropdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.user-dropdown-label {
  color: #6a7e7e;
  font-size: 16px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.64px;
}
.user-dropdown-value {
  color: #4f4f4f;
  font-size: 14px;
  font-weight: 700;
  line-height: 130%;
}
body.dark .user-dropdown-setting-title {
  color: #f1f1f1;
}
.user-dropdown-setting-title {
  color: #2f2f2f;
  font-size: 16px;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: -0.64px;
  padding: 8px 0;
}
body.dark .user-info-popup-setting-title {
  color: #f1f1f1;
}
.user-info-popup-setting-title {
  display: flex;
  padding: 8px 0;
  align-self: stretch;
  color: #2f2f2f;
  font-size: 16px;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: -0.64px;
}
.user-dropdown-setting-row {
  min-height: 42px;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user-dropdown-setting-label {
  color: #4f4f4f;
  font-size: 14px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.56px;
}
.user-dropdown-divider {
  height: 1px;
  background: #f1f1f1;
}
.user-dropdown-setting-action {
  min-height: 42px;
  padding: 12px 0;
  color: #4f4f4f;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.56px;
}
.userDropdownThemeToggleBtnWrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}
.user-dropdown-userinfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
body.dark .user-dropdown-userinfo span {
  color: #f1f1f1;
}
.user-dropdown-userinfo span {
  color: #2f2f2f;
  font-size: 16px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.64px;
}
.user-dropdown-userinfo-popup-close {
  height: 28px;
  padding: 0 8px;
}
.user-dropdown-theme-toggle-btn {
  width: 45px;
  height: 24px;
  border-radius: 30px;
  border: 2px solid #88a2a2;
  background: #f4f7f7;
  position: relative;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.user-dropdown-theme-toggle-btn .mobile-user-menu__theme-toggle-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  left: 2px;
  top: 2px;
  background: #88a2a2;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}
body.dark .user-dropdown-theme-toggle-btn.is-dark {
  border-color: #4dae6d;
  background: #274030;
}
.user-dropdown-theme-toggle-btn.is-dark {
  border-color: #4dae6d;
  background: #274030;
}
.user-dropdown-theme-toggle-btn.is-dark .mobile-user-menu__theme-toggle-thumb {
  transform: translateX(20px);
  background: #7ecb96;
}
body.dark .user-dropdown-menu {
  background: #1d2024;
  border-color: #3a4046;
}
body.dark .user-dropdown-section {
  border-color: #3a4046;
}
body.dark .content-title .content-title-menu .expirationWrap button,
body.dark .user-dropdown-setting-label {
  color: #bdbdbd;
}
body.dark .user-dropdown-name {
  color: #addabc;
}
body.dark .user-dropdown-label,
body.dark .user-dropdown-setting-action {
  color: #b4c7c7;
}
body.dark .user-dropdown-value {
  color: #d7e1e1;
}
body.dark .user-dropdown-divider {
  background: #3a4046;
}
body.dark .user-dropdown-theme-toggle-btn {
  background: #2f3940;
  border-color: #44535c;
}

/* =======================
   Password Change Modal
======================= */
.changePassword .popup__wrapper {
  width: 616px;
  padding: 48px 68px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.changePassword .popup__wrapper .popup__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 150%;
}

.changePassword .popup__wrapper .popup__content {
  width: 100%;
}

.changePassword .popup__footer a {
  border-radius: 18px;
  height: 56px;
}
.changePassword .popup__footer a.is-disabled {
  background: rgba(241, 241, 241, 1);
  color: rgba(159, 159, 159, 1);
  pointer-events: none;
}

.ww-icon-stethoscope {
  background: url("/images/icon/stethoscope.svg") no-repeat center / 18px;
  width: 18px;
  height: 18px;
}

.userInfoPopup .popup__wrapper {
  width: 320px;
  border: 1px solid #95b2b2;
  border-radius: 20px;
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 16px;
  gap: 24px;
}

.userInfoPopup .popup__title {
  color: #2f2f2f;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.04rem;
  text-align: left;
}

.user-info-popup__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.dark .user-info-popup__close {
  background: url("/images/icon/dark_caremedi_poopup_close.svg") no-repeat center / 16px;
}
.user-info-popup__close {
  width: 32px;
  height: 28px;
  border: 0;
  background: url("/images/icon/caremedi_poopup_close.svg") no-repeat center / 16px;
  cursor: pointer;
}

.user-info-popup__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.user-info-popup__name {
  color: #377c4d;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.04rem;
}

.user-info-popup__row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-info-popup__label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.user-info-popup__label {
  color: #6a7e7e;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.64px;
}

.user-info-popup__value {
  color: #4f4f4f;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.04rem;
}

.user-info-popup__remain-time {
  color: #526262;
  text-decoration: underline;
  cursor: pointer;
}

.user-info-popup__actions {
  width: 100%;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body.dark .user-info-popup__actions {
  border-color: #3a4046;
}

.user-info-popup__divider {
  width: 1px;
  height: 24px;
  background: #f1f1f1;
  justify-self: center;
}
.user-info-popup__divider.user-info-popup__divider--horizontal {
  width: calc(100% - 32px);
  height: 1px;
  margin: 0 16px;
}
body.dark .user-info-popup__divider {
  background: #3a4046;
}

.user-info-popup__action-button {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  color: #4f4f4f;
  font-size: 14px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.04rem;
  text-align: left;
  min-height: 42px;
  padding: 12px 16px;
  cursor: pointer;
}
body.dark .user-info-popup__action-button {
  color: #b4c7c7;
}
.user-info-popup__setting-row {
  padding: 12px 0px;
}

.pw-change-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pw-change-form .input_field {
  text-align: left;
  position: relative;
}

.pw-change-form .input_field > div {
  position: relative;
}

.pw-change-form .input_field label {
  display: inline-flex;
  font-size: 20px;
  font-weight: 700;
  color: rgba(47, 47, 47, 1);
  padding: 0 0 12px;
  gap: 16px;
}
.pw-change-form .input_field input.w-inp {
  width: 100%;
  border: 1px solid #e5e5e5;
  height: 62px;
  border-radius: 20px;
  padding: 15px 16px;
  font-size: 20px;
  font-weight: 700;
  box-sizing: border-box;
}
.pw-change-form .input_field input.w-inp::placeholder {
  color: #d4d4d4;
  font-weight: 500;
}
.pw-change-form .input_field input.w-inp:focus {
  border: 1px solid rgba(77, 174, 109, 1);
  outline: none;
}
.pw-change-form .input_field input.w-inp::-ms-reveal,
.pw-change-form .input_field input.w-inp::-ms-clear {
  display: none;
}
.pw-change-form .input_field input.w-inp.is-error {
  border-color: #e74c3c;
}
.pw-change-form .input_field .common-eye-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  background: url("/images/icon/visibility-off_24_outlined.svg") center no-repeat;
  right: 50px;
  bottom: 10px;
  border: none;
  cursor: pointer;
}
.pw-change-form .input_field .common-eye-btn.is-active {
  background: url("/images/icon/visibility-off_24_fill.svg") center no-repeat;
}

.pw-change-form .input_field .common-eye-btn {
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.pw-change-form .input_field:focus-within .common-eye-btn {
  opacity: 1;
  pointer-events: auto;
}

.pw-change-form .input_field .common-close-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  background: url("/images/icon/close.svg") center no-repeat;
  right: 10px;
  bottom: 10px;
}

.pw-change-form .input_field:focus-within .common-close-btn {
  opacity: 1;
  pointer-events: auto;
}

.pw-change-form .common-close-btn {
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.pw-change-form .input_field .error {
  color: #e74c3c;
  font-size: 12px;
  min-height: 0;
  margin-top: 4px;
}

/* 비밀번호 도움 버튼 */
.pw-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  background: url("/images/icon/iconNormalCircleQuestion.svg") no-repeat center / 20px;
}

/* 비밀번호 도움 툴팁 */
.pw-help-tooltip {
  display: none;
  position: absolute;
  top: -43px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(33, 33, 33, 1);
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
  z-index: 10;
  line-height: normal;
}

.pw-help-tooltip::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(33, 33, 33, 1);
}

.pw-help-tooltip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

.pw-help-tooltip.is-active {
  display: block;
}
.btnLogout strong {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #88a2a2 !important;
}
body.dark .btnLogout strong {
  color: #95b2b2 !important;
}

/*=========================================
	메뉴
=========================================*/
.ww-gnb-expand-icon {
  background: url("/images/icon/chevronDoubleLeft.svg") no-repeat center / 24px;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
  background-size: 18px;
  cursor: pointer;
  z-index: 99;
}

.gnb-closed .header {
  width: 92px;
}

html:lang(en).gnb-closed .header {
  width: 92px;
}
.header.is-active {
  width: 92px;
}
html:lang(en) .header.is-active {
  width: 92px;
}
.gnb-closed .ww-gnb-expand-icon {
  transform: rotate(180deg);
}
.ww-gnb-expand-icon.is-active {
  transform: rotate(180deg);
}
.gnb-closed .header .ww-gnb-list ul li a {
  flex-direction: column;
  gap: 6px;
  padding: 13px;
}

.gnb-closed .header .ww-gnb-list ul li a strong {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  line-height: 20px;
  display: none;
}
.header.is-active .ww-gnb-list ul li a {
  flex-direction: column;
  gap: 6px;
  padding: 13px;
}

.header.is-active .ww-gnb-list ul li a strong {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  line-height: 20px;
  display: none;
}
.ww-gnb-global {
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: start;
}
.ww-hd-gnb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px 24px 24px 24px;
  position: relative;
  height: 100%;
  min-height: 0;
}
.ww-gnb-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
#gnbCurrentResolution {
  position: absolute;
  bottom: 24px;
}
.ww-hd-gnb .joinCode {
  margin: 20px 12px 0;
  width: calc(100% - 24px);
  text-align: center;
  background: #4dae6d;
  border-radius: 10px;
  padding: 12px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
  display: none;
}
.ww-hd-gnb .joinCode br {
  display: none;
}
.ww-hd-gnb .joinCode #selectedUserName br {
  display: block;
}
.ww-hd-gnb .joinCode span {
  display: inline-block;
  margin-top: 4px;
  font-size: 20px;
  font-weight: bold;
}
.ww-gnb-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
.gnb-closed .header .gnb-list-joinCode {
  display: none;
}
.header.is-active .gnb-list-joinCode {
  display: none;
}
body.dark .gnb-list-joinCode {
  color: #f1f1f1;
}
.gnb-list-joinCode {
  display: flex;
  flex-direction: row;
  gap: 8px;
  font-size: 14px;
  line-height: 130%;
  font-weight: 700;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
}
/* 스크롤바 숨기기 */
.ww-gnb-list::-webkit-scrollbar {
  display: none;
}

.ww-gnb-list ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ww-gnb-list ul li {
}
.ww-gnb-list ul li.gnb-user-info-item {
  display: none;
}
.ww-gnb-list ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 0px 13px 20px;
  background: #f4f7f7;
  border-radius: 16px;
}
body.dark .ww-gnb-list ul li a {
  background: #3f4b4b;
}
.ww-gnb-list ul li a span {
  text-align: center;
}
body.dark .ww-gnb-list ul li a strong {
  color: #b8cbcb;
}
.ww-gnb-list ul li a strong {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 130%;
  color: #6a7e7e;
}

body.dark .ww-gnb-list ul li a.ww-gnb-on {
  background: #4dae6d;
}
.ww-gnb-list ul li a.ww-gnb-on {
  background: #4dae6d;
}

body.dark .ww-gnb-list ul li a.ww-gnb-on strong {
  color: white;
}
.ww-gnb-list ul li a.ww-gnb-on strong {
  color: white;
}

/* @media (max-width: 1280px) {
  .ww-gnb-list ul li a {
    flex-direction: column;
    gap: 6px;
  }

  .ww-gnb-list ul li a strong {
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    line-height: 20px;
  }

  .ww-hd-gnb .joinCode {
    font-size: 12px;
    padding: 8px 0;
  }
  .ww-hd-gnb .joinCode br {
    display: block;
  }
  .ww-hd-gnb .joinCode span {
    font-size: 12px;
  }
} */

/*=========================================
	메뉴
=========================================*/
.ww-lnb {
  padding: 0 0 12px;
  position: relative;
}
.ww-lnb .ww-lnb-toggle {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/images/common/arrow-down-16.png") no-repeat center / 16px;
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(0);
}
.ww-lnb.lnb-toggle-on .ww-lnb-toggle {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/images/common/arrow-down-16.png") no-repeat center / 16px;
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(180deg);
}
.ww-lnb-toggle-title {
  cursor: pointer;
}

.ww-lnb h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  text-align: left;
  color: var(--font-color-400);
  padding: 0 0 14px;
}
.ww-lnb ul {
  padding: 0 0 20px;
}
.ww-lnb ul li {
  padding: 2px 0;
}
.ww-lnb ul li a {
  display: block;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: var(--font-color-400);
  border-radius: 4px;
}
.ww-lnb ul li a.on {
  color: var(--font-active-color);
  font-weight: 700;
}

/*=========================================
	ww-search
=========================================*/
.ww-search-1 {
}
.ww-search-1 .ww-search-inner {
  overflow-x: auto;
}
.ww-search-1 .ww-search-head {
  padding: 12px;
  background: var(--tertiary-background);
  margin-bottom: 14px;
  border-radius: 4px;
}
.ww-search-1 .ww-search-head h4 {
  font-size: 14px;
  color: var(--font-color-white);
}
.ww-search-1 .ww-inp {
  height: 38px;
}

.ww-search-1 .ww-select {
  height: 38px;
}

.ww-search-1 .ww-search-input {
  margin-bottom: 4px;
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: stretch;
}
.ww-search-1 .ww-search-input > label {
  display: block;
  padding: 12px;
  font-size: 13px;
  color: var(--font-color-400);
  font-weight: 500;
  background: var(--secondary-background);
  margin-right: 4px;
  border-radius: 4px;
}
.ww-search-1 .ww-search-cont {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ww-search-1 .ww-search-field {
  flex: 1 0 0;
}
.ww-search-1 .ww-search-field.ww-search-shrink {
  flex-shrink: 0;
  flex: none;
}
.ww-search-inputbox {
  display: inline-block;
}
.ww-search-inputbox input {
  display: none;
}
.ww-search-inputbox input + label {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  line-height: 36px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid var(--button-border-color-3);
  color: var(--button-text-color-3);
  background: var(--button-background-color-3);
}

.ww-search-date {
  display: inline-grid;
  grid-template-columns: 148px 24px 148px;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.ww-search-date.ww-search-date-inline {
  width: 50%;
}
.ww-search-date span {
  text-align: center;
}

.ww-search-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 12px 0 12px;
  gap: 4px;
}
.ww-search-btn-wrap button {
  min-width: 68px;
}

.ww-search-btn-wrap.ww-search-btn-wrap-none {
  justify-content: normal;
}

.ww-search-count {
  display: flex;
  align-items: center;
  color: var(--font-color-400);
  font-size: 12px;
  line-height: 48px;
}

/*=========================================
	ww-card
=========================================*/
.ww-input-card-wrap {
  --card-background: #fff;
  --card-border: var(--primary-border);
  --card-font-color: var(--font-color-800);

  --card-background-active-1: rgba(20, 184, 166, 0.2);
  --card-border-active-1: rgba(20, 184, 166, 1);
  --card-font-color-active-1: rgba(20, 184, 166, 1);

  --card-background-active-2: rgba(211, 171, 158, 0.2);
  --card-border-active-2: rgba(211, 171, 158, 1);
  --card-font-color-active-2: rgba(211, 171, 158, 1);

  --card-background-active-3: rgba(171, 196, 255, 0.2);
  --card-border-active-3: rgba(171, 196, 255, 1);
  --card-font-color-active-3: rgba(171, 196, 255, 1);

  --card-background-active-4: rgba(207, 160, 255, 0.2);
  --card-border-active-4: rgba(207, 160, 255, 1);
  --card-font-color-active-4: rgba(207, 160, 255, 1);

  --card-background-active-5: rgba(255, 131, 132, 0.2);
  --card-border-active-5: rgba(255, 131, 132, 1);
  --card-font-color-active-5: rgba(255, 131, 132, 1);

  --card-background-active-6: rgba(151, 193, 169, 0.2);
  --card-border-active-6: rgba(151, 193, 169, 1);
  --card-font-color-active-6: rgba(151, 193, 169, 1);
}

.ww-input-card-inner {
  display: block;
  font-size: 0;
  margin: 24px -8px 0;
}
.ww-input-card {
  display: inline-block;
  margin: 0 8px 16px;
  width: calc(25% - 16px);
}
.ww-input-card input[type="radio"] {
  display: none;
}
.ww-input-card label {
  display: inline-block;
  width: 100%;
  padding: 20px;
  border-radius: 4px;
  background: var(--card-background);
  border: 1px solid var(--card-border);
  cursor: pointer;
}
.ww-input-card label > * {
  display: block;
  color: var(--card-font-color);
}
.ww-input-card label span {
  padding: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
}
.ww-input-card label strong {
  font-size: 16px;
  font-weight: 400;
}

.ww-input-card.card-1 input[type="radio"]:checked + label {
  border: 1px solid var(--card-border-active-1);
  background: var(--card-background-active-1);
}
.ww-input-card.card-2 input[type="radio"]:checked + label {
  border: 1px solid var(--card-border-active-2);
  background: var(--card-background-active-2);
}
.ww-input-card.card-3 input[type="radio"]:checked + label {
  border: 1px solid var(--card-border-active-3);
  background: var(--card-background-active-3);
}
.ww-input-card.card-4 input[type="radio"]:checked + label {
  border: 1px solid var(--card-border-active-4);
  background: var(--card-background-active-4);
}
.ww-input-card.card-5 input[type="radio"]:checked + label {
  border: 1px solid var(--card-border-active-5);
  background: var(--card-background-active-5);
}
.ww-input-card.card-6 input[type="radio"]:checked + label {
  border: 1px solid var(--card-border-active-6);
  background: var(--card-background-active-6);
}

.ww-input-card.card-1 input[type="radio"]:checked + label > * {
  color: var(--card-font-color-active-1);
}
.ww-input-card.card-2 input[type="radio"]:checked + label > * {
  color: var(--card-font-color-active-2);
}
.ww-input-card.card-3 input[type="radio"]:checked + label > * {
  color: var(--card-font-color-active-3);
}
.ww-input-card.card-4 input[type="radio"]:checked + label > * {
  color: var(--card-font-color-active-4);
}
.ww-input-card.card-5 input[type="radio"]:checked + label > * {
  color: var(--card-font-color-active-5);
}
.ww-input-card.card-6 input[type="radio"]:checked + label > * {
  color: var(--card-font-color-active-6);
}

@media screen and (max-width: 1280px) {
  .ww-input-card-inner {
    display: block;
    font-size: 0;
    margin: 24px -8px 0;
  }
  .ww-input-card {
    display: inline-block;
    margin: 0 8px 16px;
    width: calc(33.333% - 16px);
  }
}

@media screen and (max-width: 768px) {
  .ww-input-card-inner {
    display: block;
    font-size: 0;
    margin: 24px -8px 0;
  }
  .ww-input-card {
    display: inline-block;
    margin: 0 8px 16px;
    width: calc(50% - 16px);
  }
}

/*=========================================
	ww-flex
=========================================*/
.ww-flex {
  display: flex;
}

@media screen and (min-width: 1280px) {
}
.ww-flex-col {
  flex-direction: column;
}
.ww-flex-row {
  flex-direction: row;
}
.ww-align-center {
  align-items: center;
}

@media screen and (min-width: 768px) {
  .ww-flex--tablet {
    display: flex;
  }
  .ww-flex-col--tablet {
    flex-direction: column;
  }
  .ww-flex-row--tablet {
    flex-direction: row;
  }
  .ww-align-center--tablet {
    align-center: center;
  }
}
@media screen and (min-width: 1280px) {
  .ww-flex-col--desktop {
    flex-direction: column;
  }
  .ww-flex-row--desktop {
    flex-direction: row;
  }
}

/*=========================================
	ww-list-1
=========================================*/

.ww-list-1 {
  --list-1-backgorund: #fff;
  --list-1-border: 1px solid var(--primary-border);
}
.ww-list-1 .ww-list-head {
  display: none;
}
.ww-list-1 .ww-list-head .ww-list-head-txt {
}
.ww-list-1 .ww-list-head .ww-list-head-txt span {
  display: block;
  color: var(--font-color-400);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 0;
}
.ww-list-1 .ww-list-body {
  width: 100%;
  border: 1px solid var(--primary-border);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
  padding: 20px;
  margin-bottom: 12px;
  border-radius: 4px;
  background: var(--primary-background);
}
.ww-list-1 .ww-list-body .ww-list-body-txt {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.ww-list-1 .ww-list-body .ww-list-body-txt strong {
  color: var(--font-color-400);
  font-size: 14px;
  font-weight: 400;
  padding: 8px 0;
}
.ww-list-1 .ww-list-body .ww-list-body-txt span {
  display: block;
  color: var(--font-color-600);
  font-size: 14px;
  font-weight: 400;
  padding: 8px 0;
}
.ww-list-1 .ww-btn {
  margin-bottom: 4px;
  height: 32px;
  line-height: 32px;
}
@media screen and (min-width: 1280px) {
  .ww-list-1 .ww-list-head {
    display: block;
    padding: 20px;
    border-radius: 4px;
  }
  .ww-list-1 .ww-list-body .ww-list-body-txt strong {
    display: none;
  }
  .ww-list-1 .ww-list-body .ww-list-body-txt {
    display: block;
  }
}

/*=========================================
	ww-list-2
=========================================*/
.ww-list-2 {
  display: grid;
  align-items: center;
  grid-template-columns: 32px 1fr 80px;
}
.ww-list-2 > div > label {
  display: block;
  cursor: pointer;
  font-size: 14px;
  color: var(--font-color-600);
  font-weight: 500;
  padding: 8px 0;
  margin-bottom: 2px;
}
.ww-list-2 .ww-btn {
  height: 32px;
  line-height: 30px;
}

/*=========================================
	ww-table-1
=========================================*/

.ww-table-1 {
  overflow-x: scroll;
}
.ww-table-1 .ww-table-inner {
  min-width: 1080px;
  width: 100%;
}
.ww-table-1 table {
  width: 100%;
  border-spacing: 0 10px;
  border-collapse: separate;
}
.ww-table-1 thead {
  border-spacing: 0 10px;
}
.ww-table-1 tbody {
  border-spacing: 0 10px;
}
.ww-table-1 tr {
  /*height:48px;*/
  height: 30px;
}
.ww-table-1 th {
  color: var(--font-color-800);
  font-size: 12px;
  font-weight: 500;
  padding: 8px;
  text-align: center;
  background: #fafafa;
}

.ww-table-1 td {
  color: var(--font-color-800);
  font-size: 12px;
  font-weight: 400;
  background: #fff;
  padding: 8px;
  text-align: center;
}
.ww-table-1 td.ww-td-left,
.ww-table-1 th.ww-td-left {
  text-align: left;
}
.ww-table-1 td.ww-td-right,
.ww-table-1 th.ww-td-right {
  text-align: right;
}
.ww-table-1 tbody td:first-child,
.ww-table-1 thead th:first-child {
  border-radius: 4px 0 0 4px;
}
.ww-table-1 tbody td:last-child,
.ww-table-1 thead th:last-child {
  border-radius: 0 4px 4px 0;
}

.ww-table-1 .ww-table-btn button {
  height: 28px;
  line-height: 28px;
  font-size: 10px;
  vertical-align: top;
  margin: 2px 0;
}

.ww-table-1 .empty {
  border-radius: 4px !important;
}

.ww-table-1 .ww-checkbox-wrap {
  display: inline-block;
}

.ww-table-1.ww-table-w-input td {
  padding: 8px;
}

/*=========================================
        ww-category-list
    =========================================*/

.ww-category-list {
}
.ww-category-list ul {
}
.ww-category-list ul li {
}
.ww-category-input {
}
.ww-category-input input[type="radio"] {
  display: none;
}
.ww-category-input input[type="radio"] + label {
  font-size: 13px;
  color: var(--font-color-600);
  background: #fff;
  display: block;
  align-items: center;
  height: 100%;
  padding: 8px 12px;
  border-radius: 4px;
}
.ww-category-input input[type="radio"]:checked + label {
  background: var(--input-active-background-color);
}

.ww-floating-btn {
  position: fixed;
  bottom: 48px;
  right: 30px;
  z-index: 999;
}
.ww-floating-btn .ww-floating-btn-wrap {
}
.ww-floating-btn .ww-floating-btn-wrap a {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ww-floating-btn .ww-floating-btn-wrap a .ww-home-icon {
  display: block;
  width: 44px;
  height: 44px;
  background: var(--primary-color) url(/images/common/home.svg) no-repeat center / 24px;
  border-radius: 50%;
  margin: 0 auto;
}
.ww-floating-btn .ww-floating-btn-wrap a strong {
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-color);
}

.ww-vote-list-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ww-vote-list-add table {
  width: 100%;
}
.ww-vote-list-add .ww-file-upload {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ww-vote-list-add .ww-file-upload .ww-preview-file {
  padding: 0;
}
.ww-vote-list-add .ww-file-upload .ww-preview-file span {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
.ww-vote-list-add .ww-file-upload .ww-file-upload-btn {
  padding: 0 14px;
  width: 80px;
  text-align: cer;
  height: 48px;
  line-height: 46px;
}

/* 입력 커스텀 */
body.dark #ui-datepicker-div {
  background: #212121;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6);
}
#ui-datepicker-div {
  display: none;
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 18px;
  box-shadow: 0px 0px 30px 0px rgba(178, 178, 178, 0.3);
}

.ui-datepicker-trigger {
  width: 16px;
  height: 16px;
  background: url("/images/icon/calendar.svg") 100% center no-repeat !important;
  background-size: 16px !important;
  text-indent: 99999px;
}

.ui-datepicker-header {
  position: relative;
  margin-bottom: 32px;
}
.ui-datepicker-unselectable.ui-state-disabled:not(.ui-datepicker-other-month) {
  cursor: no-drop;
}
body.dark .ui-datepicker-prev {
  background: url("/images/icon/dark_arrow_left.svg");
}

.ui-datepicker-prev {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  background: url("/images/icon/arrow_left.svg");
  cursor: pointer;
}

body.dark .ui-datepicker-next {
  background: url("/images/icon/dark_arrow_right.svg");
}
.ui-datepicker-next {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  background: url("/images/icon/arrow_right.svg");
  cursor: pointer;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  /*text-indent: 999999px;*/
}

body.dark .ui-datepicker-title {
  color: #f1f1f1;
}
.ui-datepicker-title {
  font-size: 16px;
  font-weight: 400;
  color: #020202;
  text-align: center;
}

body.dark .ui-datepicker-calendar th {
  color: #8c8c8c;
}
.ui-datepicker-calendar th {
  padding: 12px 0;
  font-size: 12px;
  font-weight: 400;
  color: #d5d5d6;
  text-align: center;
}

/* .ui-datepicker-calendar tr th:first-child {
  color: #db6051;
}

.ui-datepicker-calendar tr th:last-child {
  color: #006ae8;
} */

.ui-datepicker-calendar .ui-datepicker-other-month .ui-state-default {
  color: #d5d5d6;
}
body.dark .ui-datepicker-calendar .ui-state-default {
  color: #f1f1f1;
}
.ui-datepicker-calendar .ui-state-default {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 400;
  color: #6a6a6d;
  line-height: 22px;
  align-items: center;
  justify-content: center;
}

.ui-datepicker-calendar
  tr
  td:not(.ui-state-disabled):first-child
  .ui-state-default:not(.ui-state-active):not(.ui-state-hover) {
  color: #db6051;
}

/* .ui-datepicker-calendar
  tr
  td:not(.ui-state-disabled):last-child
  .ui-state-default:not(.ui-state-active):not(.ui-state-hover) {
  color: #006ae8;
} */

body.dark .ui-datepicker-calendar .ui-state-disabled .ui-state-default {
  color: #8c8c8c;
}
.ui-datepicker-calendar .ui-state-disabled .ui-state-default {
  color: #d5d5d6;
}

body.dark .ui-datepicker-calendar .ui-state-default.ui-state-active {
  color: #c9e8e5;
  background: #1c6f67;
}
.ui-datepicker-calendar .ui-state-default.ui-state-active {
  background: #ccc;
  color: #ffffff;
}
body.dark .ui-datepicker-calendar .ui-state-default.ui-state-hover {
  color: #c9e8e5;
  background: #1c6f67;
}
.ui-datepicker-calendar .ui-state-default.ui-state-hover {
  background: #4dae6d;
  color: #ffffff;
}

/*차트*/
.chartjs-tooltip {
  position: absolute;
  background: #ffffff;
  color: #000000;
  font-size: 12px;
  font-weight: bold;
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

/* 범례 */
.legendWrap {
  padding: 30px 0 0 30px;
  display: flex;
  gap: 15px;
  align-items: center;
  position: absolute;
  bottom: 30px;
}

.legendWrap span {
  font-size: 16px;
  font-weight: 500;
  padding-right: 30px;
  position: relative;
}

.legendWrap span:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  right: 0;
  top: 5px;
}

.legendWrap span.immediately:after {
  background: #4dae6d;
}
.legendWrap span.extend:after {
  background: #dbefe2;
}

.legendWrap span.base:after {
  background: rgba(60, 110, 154, 0.5);
}
.legendWrap span.base2:after {
  background: #3c6e9a;
}

/* =======================
   공통 Lang (리뉴얼 버전)
======================= */
.lang-dropdown {
  position: relative;
  display: inline-block;
  padding-bottom: 0;
  transition: height 0.3s ease;
  height: 80px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding: 4px;
  width: 64px;
}
.lang-dropdown.open {
  height: 320px;
}
.lang-container {
  margin-top: 17.5px;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.lang-dropdown.open .lang-container {
  box-shadow: 0px 0px 8px 0px #00000033;
}
.lang-btn {
  background: white;
  font-weight: bold;
  cursor: pointer;
  height: 37px;
  flex-shrink: 0;
  padding: 8px 4px 8px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
body.dark .lang-btn {
  background: transparent;
}
.lang-btn.open span {
  font-weight: 700;
}
body.dark .lang-btn.open {
  background: #2f2f2f;
}

.lang-btn span {
  line-height: 130%;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.04rem;
  color: #4f4f4f;
}
body.dark .lang-btn span {
  color: #f1f1f1;
}
body.dark .lang-container .lang-btn:hover span,
.lang-container .lang-btn:hover span {
  color: #4dae6d;
}
.lang-arrow-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}
.lang-arrow-icon.open {
  transform: rotate(180deg);
}

body.dark .lang-menu {
  background: #2f2f2f;
}
.lang-menu {
  background: white;
  opacity: 0;
  pointer-events: none;
}
.lang-menu.open {
  opacity: 1;
  pointer-events: auto;
}

body.dark .lang-menu li a {
  color: #bdbdbd;
}
.lang-menu li a {
  display: block;
  padding: 8px 0px 8px 12px;
  color: #4f4f4f;
  font-weight: 500;
  font-size: 12px;
  line-height: 130%;
  letter-spacing: -0.04rem;
  text-align: left;
}

body.dark .lang-menu li a:hover {
  background-color: #4dae6d;
  color: #2f2f2f;
}
.lang-menu li a:hover {
  background-color: #4dae6d;
  color: white;
}
.no-transition * {
  transition: none !important;
}

/* =======================
   공통 dateDropDown (리뉴얼 버전)
======================= */
.date-dropdown {
  position: relative;
  display: inline-block;
  padding-bottom: 0;
  transition: height 0.3s ease;
  height: 80px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding: 4px;
  width: 64px;
}
.date-dropdown.open {
  height: 320px;
}
.date-container {
  margin-top: 17.5px;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.date-dropdown.open .date-container {
  box-shadow: 0px 0px 8px 0px #00000033;
}
.date-btn {
  background: white;
  font-weight: bold;
  cursor: pointer;
  height: 37px;
  flex-shrink: 0;
  padding: 8px 4px 8px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.date-btn.open span {
  font-weight: 700;
}
.date-btn span {
  line-height: 130%;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.04rem;
  color: #4f4f4f;
}

.date-container:hover .date-btn span {
  color: #4dae6d;
}
.date-arrow-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}
.date-arrow-icon.open {
  transform: rotate(180deg);
}
.date-menu.open {
  opacity: 1;
}
.date-menu {
  background: white;
  opacity: 0;
}

.date-menu li a {
  display: block;
  padding: 8px 0px 8px 12px;
  color: #4f4f4f;
  font-weight: 500;
  font-size: 12px;
  line-height: 130%;
  letter-spacing: -0.04rem;
  text-align: left;
}

.date-menu li a:hover {
  background-color: #4dae6d;
  color: white;
}
.mobile-menu-icon {
  display: none;
}
.content-menu-wrap,
.content-select-wrap {
  display: none;
}

.header-title-wrap-v2 {
  display: none;
}

.mobile-user-menu {
  display: none;
}

.header-v2-top {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}

.header-v2-logo img {
  width: 88px;
}

.header-v2-top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-v2-lang-dropdown {
  position: relative;
  width: 64px;
  overflow: visible;
  z-index: 20;
}
.header-v2-lang-dropdown.open {
  height: 40px;
}

.header-v2-lang-container {
  border-radius: 16px;
}

.header-v2-lang-dropdown.open .header-v2-lang-container {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.header-v2-lang-btn {
  border: 0;
  background: #ffffff;
  min-width: 52px;
  height: 32px;
  border-radius: 8px;
  padding: 0 4px 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body.dark .header-v2-lang-btn {
  background: #2f2f2f;
}

.header-v2-lang-btn span {
  font-size: 12px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.04rem;
  color: #4f4f4f;
}

body.dark .header-v2-lang-btn span {
  color: #f1f1f1;
}

.header-v2-lang-arrow-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.header-v2-lang-dropdown.open .header-v2-lang-arrow-icon {
  transform: rotate(180deg);
}

.header-v2-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 72px;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 12;
}

body.dark .header-v2-lang-menu {
  background: #2f2f2f;
}

.header-v2-lang-dropdown.open .header-v2-lang-menu {
  opacity: 1;
  pointer-events: auto;
}

.header-v2-lang-menu li a {
  display: block;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.04rem;
  color: #4f4f4f;
}

body.dark .header-v2-lang-menu li a {
  color: #f1f1f1;
}

.header-v2-lang-menu li a:hover {
  background: #4dae6d;
  color: #ffffff;
}

.header-v2-menu-btn {
  border: 0;
  background: #ffffff;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.dark .header-v2-menu-btn {
  background: #2f2f2f;
}

.header-v2-menu-icon {
  width: 24px;
  height: 24px;
}

.header-v2-page-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}

.header-v2-page-dropdown {
  position: relative;
  width: auto;
  min-width: 92px;
  padding: 0;
  margin-top: auto;
  overflow: visible;
  z-index: 20;
}
.header-v2-page-dropdown.open {
  height: 40px;
}

.header-v2-page-btn {
  border: 0;
  background: transparent;
  height: 40px;
  padding: 8px 4px 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  justify-content: center;
}

body.dark .header-v2-page-btn {
  background: transparent;
}

.header-v2-page-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.04rem;
  color: #4f4f4f;
}

.header-v2-page-arrow-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.header-v2-page-dropdown.open .header-v2-page-arrow-icon {
  transform: rotate(180deg);
}

.header-v2-page-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 124px;
  border-radius: 14px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  background: #ffffff;
  z-index: 12;
  opacity: 0;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.header-v2-page-menu li {
  list-style: none;
}

body.dark .header-v2-page-menu {
  background: #2f2f2f;
}

.header-v2-page-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.header-v2-page-menu a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 130%;
  letter-spacing: -0.04rem;
  color: #4f4f4f;
  font-weight: 500;
  white-space: nowrap;
}

body.dark .header-v2-page-menu a {
  color: #f1f1f1;
}

.header-v2-page-menu a.is-current {
  background: #4dae6d;
  color: #ffffff;
  font-weight: 500;
}

.header-v2-page-menu a:hover {
  background: #f4f7f7;
}

.header-v2-page-menu a.is-current:hover {
  background: #4dae6d;
}

.header-v2-download-btn {
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-v2-download-btn.is-hidden {
  display: none;
}

.header-v2-download-icon {
  width: 20px;
  height: 20px;
}

.header-mobile-filter {
  display: none;
}

.header-mobile-compare-summary {
  display: none;
}
.header-mobile-compare-editor {
  display: none;
}

.header-mobile-filter.is-active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}

.header-mobile-filter-cycle {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.header-mobile-filter-cycle-wrap {
  position: relative;
}

.header-mobile-cycle-gradation {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  width: 24px;
  height: 36px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 80%);
  pointer-events: none;
}

.header-mobile-filter-cycle-wrap.is-scroll-end .header-mobile-cycle-gradation {
  z-index: -1;
  background: transparent;
}

.header-mobile-filter-cycle::-webkit-scrollbar {
  display: none;
}

.header-mobile-filter-cycle a:focus,
.header-mobile-filter-cycle a:focus-visible,
.header-mobile-filter-cycle a:active {
  outline: none;
  box-shadow: none;
}
body.dark .header-mobile-filter-cycle a {
  color: #b8cbcb;
  background: #3f4b4b;
  border-color: transparent;
}
.header-mobile-filter-cycle a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 14px;
  background: #f4f7f7;
  color: #6a7e7e;
  font-size: 14px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.04rem;
  white-space: nowrap;
}

body.dark .header-mobile-filter-cycle a.is-active {
  color: #addabc;
  border-color: #469e63;
  background: #20492e;
}
.header-mobile-filter-cycle a.is-active {
  background: #edf7f0;
  color: #377c4d;
  border: 1px solid #4dae6d;
}

.header-mobile-filter-range {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-mobile-filter-date {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  border: 1px solid #d2d2d2;
  border-radius: 14px;
  background: transparent;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.header-mobile-filter-date span {
  font-size: 14px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.04rem;
  color: #469e63;
}

.header-mobile-filter-calendar {
  width: 16px;
  height: 16px;
}

.header-mobile-filter-tilde {
  font-size: 16px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.04rem;
  color: #4f4f4f;
}

.cm-inline-range-calendar {
  max-height: 0;
  opacity: 0;
  transition: max-height 240ms ease;
  margin-top: -16px;
  pointer-events: none;
  overflow: hidden;
}
.cm-inline-range-calendar[data-compare-step="right"],
.cm-inline-range-calendar[data-compare-step="left"] {
  margin-top: -8px;
}

.cm-inline-range-calendar.is-open {
  opacity: 1;
  max-height: 500px;
  margin-top: 8px;
  pointer-events: auto;
}
body.has-mobile-compare-summary.is-compare-filter-editing
  .header-mobile-compare-editor
  .cm-inline-range-calendar:not(.is-open)
  .cm-range-calendar__panel {
  display: none;
}
body.has-mobile-compare-summary.is-compare-filter-editing
  .header-mobile-compare-editor
  .cm-inline-range-calendar.is-open
  .cm-range-calendar__panel {
  display: flex;
}

.cm-range-calendar__panel {
  background: #ffffff;
  border-radius: 16px;
  /* padding: 16px; */
  /* box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15); */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cm-range-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}

.cm-range-calendar__month-btn {
  width: 24px;
  height: 24px;
  border: 0;
  background-color: transparent;
}

.cm-range-calendar__month-btn.prev {
  background: url("/images/icon/chevron_left_primary.svg") center no-repeat;
  background-size: 20px;
}

.cm-range-calendar__month-btn.next {
  background: url("/images/icon/chevron_right_primary.svg") center no-repeat;
  background-size: 20px;
}

.cm-range-calendar__month-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

body.dark .header-mobile-compare-editor .cm-range-calendar__month-btn.prev {
  background: url("/images/icon/dark_compare_chevron_left.svg") center no-repeat;
  background-size: 20px;
}

body.dark .header-mobile-compare-editor .cm-range-calendar__month-btn.next {
  background: url("/images/icon/dark_compare_chevron_right.svg") center no-repeat;
  background-size: 20px;
}
body.dark .header-mobile-compare-editor .cm-range-calendar__month-btn.prev:disabled {
  background: url("/images/icon/dark_compare_chevron_left_disabled.svg") center no-repeat;
}

body.dark .header-mobile-compare-editor .cm-range-calendar__month-btn.next:disabled {
  background: url("/images/icon/dark_compare_chevron_right_disabled.svg") center no-repeat;
}
.cm-range-calendar__month-label {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.04rem;
  font-weight: 700;
  color: #2f2f2f;
}

.cm-range-calendar__weekday {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cm-range-calendar__weekday-item {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: -0.04rem;
  font-weight: 500;
  color: #6f6f6f;
}

.cm-range-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cm-range-calendar__day {
  position: relative;
  height: 38px;
  border: 0;
  background: transparent;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.04rem;
  font-weight: 500;
  color: #2f2f2f;
}

body.dark .cm-range-calendar__day.is-sunday,
.cm-range-calendar__day.is-sunday {
  color: #db6051;
}

body.dark .cm-range-calendar__day.is-outside {
  color: #8c8c8c;
}
.cm-range-calendar__day.is-outside {
  color: #bdbdbd;
}

body.dark .cm-range-calendar__day.is-disabled {
  color: #8c8c8c;
}
.cm-range-calendar__day.is-disabled {
  color: #d7d7d7;
  cursor: no-drop;
}

body.dark .cm-range-calendar__day.is-in-range {
  background: #1c6f67;
  color: #c9e8e5;
}
.cm-range-calendar__day.is-in-range {
  color: #248e84;
  border-top: 1px solid #248e84;
  border-bottom: 1px solid #248e84;
  background: #ddf1ef;
}

.cm-range-calendar__day.is-range-start,
.cm-range-calendar__day.is-range-end {
  color: #248e84;
  font-weight: 700;
}

body.dark .cm-range-calendar__day.is-range-start,
body.dark .cm-range-calendar__day.is-range-end {
  background: #1c6f67;
  color: #c9e8e5;
}

.cm-range-calendar__day.is-range-start {
  border-radius: 32px 0 0 32px;
  box-shadow:
    inset 1px 0 0 #248e84,
    inset 0 1px 0 #248e84,
    inset 0 -1px 0 #248e84;
  background: #ddf1ef;
}

.cm-range-calendar__day.is-range-end {
  border-radius: 0 32px 32px 0;
  box-shadow:
    inset 0 1px 0 #248e84,
    inset -1px 0 0 #248e84,
    inset 0 -1px 0 #248e84;
  background: #ddf1ef;
}

.cm-range-calendar__day.is-range-start.is-range-end {
  border-radius: 32px;
  box-shadow:
    inset 1px 0 0 #248e84,
    inset 0 1px 0 #248e84,
    inset -1px 0 0 #248e84,
    inset 0 -1px 0 #248e84;
}

.cm-range-calendar__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cm-range-calendar__cancel,
.cm-range-calendar__apply {
  height: 44px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.04rem;
}

.cm-range-calendar__cancel {
  border: 1px solid #d2d2d2;
  color: #4f4f4f;
  background: #ffffff;
}

.cm-range-calendar__apply {
  border: 0;
  color: #ffffff;
  background: #4dae6d;
}

body.dark .cm-range-calendar__panel {
  background: #212121;
}

body.dark .cm-range-calendar__month-label,
body.dark .cm-range-calendar__day {
  color: #f1f1f1;
}

body.dark .cm-range-calendar__weekday-item {
  color: #8c8c8c;
}

body.dark .cm-range-calendar__cancel {
  border-color: #4f4f4f;
  color: #f1f1f1;
  background: #2f2f2f;
}

.header-v2-page-label-row {
  display: none;
}
.header-v2-month-row {
  display: none;
}
@media (max-width: 1280px) {
  .ww-gnb-list ul li.gnb-user-info-item {
    display: list-item;
  }
  html:lang(en) .header.is-active,
  .header.is-active {
    width: 76px;
  }
  .content-title .content-title-menu .btnLogout,
  .content-title .content-title-menu .expirationWrap {
    display: none;
  }
  .btnLogout {
    padding: 8px;
  }
  .content {
    padding: 16px;
  }
  .content-title .content-title-menu-icon {
    display: block;
  }
  .ww-hd-gnb {
    padding: 34px 16px 24px 16px;
  }
  .content-wrap {
    min-height: 100vh;
    position: relative;
    width: calc(100% - 76px);
    margin-inline-start: 76px;
    z-index: 2;
  }
  .gnb-closed .gnb-toggle-on .content-wrap {
    width: calc(100% - 76px);
    margin-inline-start: 76px;
  }
  html:lang(en).gnb-closed .gnb-toggle-on .content-wrap {
    width: calc(100% - 76px);
    margin-inline-start: 76px;
  }
  .ww-gnb-expand-icon {
    display: none;
  }
  .gnb-closed .header {
    width: 76px;
  }

  html:lang(en).gnb-closed .header {
    width: 76px;
  }
  .header.is-active {
    width: 76px;
  }
  html:lang(en) .header.is-active {
    width: 76px;
  }
}

@media (min-width: 769px) and (max-width: 1280px) {
  .userInfoPopup .popup__wrapper {
    width: 320px;
    border: 1px solid #dee7e7;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 16px;
    gap: 24px;
  }

  .userInfoPopup .popup__title {
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.04rem;
  }

  .userInfoPopup .user-info-popup__content {
    gap: 16px;
  }

  .userInfoPopup .user-info-popup__divider {
    width: 100%;
    height: 1px;
    margin: 0;
    background: #f1f1f1;
  }

  .userInfoPopup .user-info-popup__action-button {
    min-height: 42px;
    padding: 12px 0;
    color: #4f4f4f;
    font-size: 14px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.04rem;
  }

  body.dark .userInfoPopup .popup__wrapper,
  body.dark .userInfoPopup .user-info-popup__content,
  body.dark .userInfoPopup .user-info-popup__actions {
    border-color: #3a4046;
  }

  body.dark .userInfoPopup .popup__wrapper {
    background: #1d2024;
  }
  body.dark .userInfoPopup .user-info-popup__name {
    color: ##addabc;
  }

  body.dark .userInfoPopup .popup__title {
    color: #f1f1f1;
  }

  body.dark .userInfoPopup .user-info-popup__label,
  body.dark .userInfoPopup .user-info-popup__action-button {
    color: #bdbdbd;
  }

  body.dark .userInfoPopup .user-info-popup__value {
    color: #bdbdbd;
  }

  body.dark .userInfoPopup .user-info-popup__divider {
    background: #3a4046;
  }
}

@media screen and (max-width: 768px) {
  .header-mobile-compare-summary {
    display: none;
  }
  body.has-mobile-compare-summary .header-mobile-compare-summary {
    display: block;
    padding: 16px 0;
  }
  body.has-mobile-compare-summary.is-compare-filter-editing .header-mobile-compare-summary {
    display: none;
  }
  .header-mobile-compare-summary-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    background: #ffffff;
    padding: 14px 40px 14px 12px;
    text-align: left;
    position: relative;
  }
  .header-mobile-compare-summary-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .header-mobile-compare-summary-key {
    min-width: 44px;
    font-size: 12px;
    font-weight: 500;
    line-height: 130%;
    color: #6d7684;
  }
  .header-mobile-compare-summary-value {
    font-size: 12px;
    font-weight: 700;
    line-height: 130%;
    color: #2f2f2f;
    letter-spacing: -0.48px;
  }
  .header-mobile-compare-summary-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: url("/images/icon/search.svg") center no-repeat;
    background-size: 16px;
  }

  body.has-mobile-compare-summary .header-mobile-filter {
    display: none;
  }
  body.has-mobile-compare-summary.is-compare-filter-editing .header-mobile-filter.is-active {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: fixed;
    top: var(--compare-filter-top, 0px);
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    max-height: var(--compare-filter-max-height, 100dvh);
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    background: var(--header-background-color);
    z-index: 110;
  }
  body.has-mobile-compare-summary.is-compare-filter-editing .header-mobile-compare-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  body.has-mobile-compare-summary.is-compare-filter-editing .header-mobile-filter-cycle-wrap,
  body.has-mobile-compare-summary.is-compare-filter-editing .header-mobile-filter-range {
    display: none;
  }
  body.has-mobile-compare-summary.is-compare-filter-editing
    .header-mobile-filter
    > .cm-inline-range-calendar {
    display: none;
  }
  .header-mobile-compare-editor-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .header-mobile-compare-editor-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.04rem;
    color: #ffffff;
  }
  .header-mobile-compare-editor-badge.badge-left {
    background: #6a7e7e;
  }
  .header-mobile-compare-editor-badge.badge-right {
    background: #f16959;
  }
  .header-mobile-compare-editor-cycle {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
  }
  .header-mobile-compare-editor-cycle.is-dragging {
    cursor: grabbing;
    user-select: none;
  }
  .header-mobile-compare-editor-cycle::-webkit-scrollbar {
    display: none;
  }
  .header-mobile-compare-editor-cycle a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 14px;
    background: #f4f7f7;
    color: #6a7e7e;
    font-size: 14px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.04rem;
    white-space: nowrap;
  }
  .header-mobile-compare-editor-cycle a.is-active {
    background: #edf7f0;
    color: #377c4d;
    border: 1px solid #4dae6d;
  }
  .header-mobile-compare-editor-range {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 8px;
  }
  .header-mobile-compare-editor-range button {
    flex: 1 1 0;
    min-width: 0;
    height: 36px;
    border: 1px solid #d2d2d2;
    border-radius: 14px;
    background: transparent;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .header-mobile-compare-editor-range [data-compare-editor-start],
  .header-mobile-compare-editor-range [data-compare-editor-end] {
    font-size: 14px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.04rem;
    color: #469e63;
  }
  .header-mobile-compare-editor-divider {
    width: 100%;
    height: 1px;
    background: #f1f1f1;
  }
  .header-mobile-compare-editor .cm-range-calendar__actions {
    display: none;
  }
  .header-mobile-compare-editor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .header-mobile-compare-editor-cancel,
  .header-mobile-compare-editor-apply {
    height: 44px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.04rem;
  }
  .header-mobile-compare-editor-cancel {
    border: 1px solid #d2d2d2;
    color: #4f4f4f;
    background: #ffffff;
  }
  .header-mobile-compare-editor-apply {
    border: 0;
    color: #ffffff;
    background: #4dae6d;
  }

  .content {
    padding: 16px;
  }

  body.has-mobile-compare-summary.is-compare-filter-editing {
    overflow: hidden;
    height: 100%;
  }

  html.compare-filter-lock {
    overflow: hidden;
    height: 100%;
  }

  body.has-mobile-compare-summary.is-compare-filter-editing::before {
    content: "";
    position: fixed;
    top: var(--compare-filter-top, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(24, 32, 42, 0.45);
    z-index: 98;
  }

  body.has-mobile-compare-summary.is-compare-filter-editing .content-wrap {
    overflow: hidden;
  }

  body.has-mobile-compare-summary.is-compare-filter-editing #container {
    overflow: hidden;
    height: 100dvh;
    min-height: 100dvh;
  }

  .lang-dropdown {
    height: 40px;
  }
  .lang-menu li a {
    padding: 8px 0 8px 8px;
  }
  .lang-container {
    margin-top: 0;
  }
  .lang-btn {
    padding: 0;
    height: 32px;
    width: 100%;
    justify-content: center;
  }
  .gnb-closed .gnb-toggle-on .content-wrap {
    width: 100%;
    margin-inline-start: 0;
  }
  .content-title .content-title-inner img {
    width: 88px;
  }
  .ww-input-card-inner {
    display: block;
    font-size: 0;
    margin: 24px -8px 0;
  }
  .ww-input-card {
    display: inline-block;
    margin: 0 8px 16px;
    width: calc(50% - 16px);
  }
  .content-title-select {
    display: none;
  }
  .content-select-wrap .content-title-select {
    display: flex;
    flex: 1;
    height: 52px;
    align-items: center;
    padding: 0 2px;
  }

  .content-title {
    padding: 0;
    border-bottom: none;
    position: initial;
    z-index: 1;
    height: auto;
  }
  .mobile-menu-icon {
    display: block;
  }
  body.dark .mobile-menu-icon .menu-btn {
    background: #212121;
  }
  .mobile-menu-icon .menu-btn {
    padding: 8px;
    background: white;
    cursor: pointer;
  }
  .mobile-menu-icon .menu-btn .header-menu-icon {
    width: 24px;
    aspect-radio: 1/1;
  }
  .mobile-menu-icon .menu-btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  .side-wrap {
    display: none;
  }
  .content-wrap {
    min-height: 100vh;
    position: relative;
    width: 100%;
    z-index: 2;
    margin-inline-start: 0px;
  }
  .content {
    padding: 16px;
  }
  .content-title .content-title-menu {
    gap: 4px;
    height: 40px;
  }

  .header-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid #c3c3c3;
    position: sticky;
    top: 0;
    z-index: 99;
    padding: 0 20px;
  }
  body.dark .header-title-wrap .content-border {
    background: #2f2f2f;
  }
  .header-title-wrap .content-border {
    position: absolute;
    height: 1px;
    width: 100%;
    background: #f1f1f1;
    left: 0;
    top: 80px;
  }
  .header-title-wrap > .content-title {
    display: flex;
  }
  .header-title-wrap-v2 {
    display: flex;
    flex-direction: column;
  }
  .header-title-wrap-v2 .header-v2-top,
  .header-title-wrap-v2 .header-v2-page-row {
    display: none;
  }
  .content-select-wrap {
    display: none !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .header-title-wrap.is-select-collapsed .content-select-wrap {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .content-menu-wrap {
    display: none;
    position: relative;
    padding: 4px 0;
  }
  .content-menu-wrap::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    width: 72px;
    height: 36px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 80%);
    pointer-events: none;
  }
  .content-menu-wrap.is-scroll-end::after {
    z-index: -1;
  }
  .content-menu-wrap .content-menu-scroll {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .content-menu-wrap .content-menu-scroll::-webkit-scrollbar {
    display: none;
  }
  .content-menu-wrap .content-menu-scroll a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 14px;
    background: #f4f7f7;
    color: #6a7e7e;
    font-size: 14px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.04rem;
    white-space: nowrap;
  }
  .content-menu-wrap .content-menu-scroll a.is-active {
    background: #4dae6d;
    color: #ffffff;
  }
  .mobile-user-menu {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: block;
    opacity: 1;
    pointer-events: none;
  }
  .mobile-user-menu.is-active .mobile-user-menu__dim {
    background: rgba(0, 0, 0, 0.42);
  }
  .mobile-user-menu.is-active {
    /* opacity: 1; */
    pointer-events: auto;
  }
  .mobile-user-menu__dim {
    position: absolute;
    inset: 0;
  }
  .mobile-user-menu__panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow: hidden;
  }
  .mobile-user-menu.is-active .mobile-user-menu__panel {
    transform: translateX(0);
  }
  .mobile-user-menu__header {
    height: 40px;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    display: flex;
  }
  .mobile-user-menu__header .content-title-inner {
    display: flex;
    align-items: center;
  }
  .mobile-user-menu__header .mobile-user-menu__lang-dropdown {
    /* display: block; */
    /* width: 64px; */
    /* height: 40px; */
    margin-left: auto;
    margin-right: 4px;
    /* overflow: visible; */
  }
  .mobile-user-menu__header .mobile-user-menu__lang-dropdown .lang-container {
    margin-top: 0;
    /* overflow: visible; */
  }
  .mobile-user-menu__header .mobile-user-menu__lang-dropdown .lang-btn {
    width: 100%;
    height: 32px;
  }
  .mobile-user-menu-icon {
    display: block;
  }
  .mobile-user-menu__close {
    padding: 8px;
    background: transparent;
    cursor: pointer;
  }
  .mobile-user-menu__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .mobile-user-menu .content-select-wrap {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible;
    margin: 0;
    padding: 0;
    pointer-events: auto !important;
  }
  .mobile-user-menu .content-select-wrap .content-title-select {
    display: flex;
    height: 52px;
    align-items: center;
    padding: 0;
    width: 100%;
  }
  .mobile-user-menu__userinfo {
    border: 1px solid #dee7e7;
    border-radius: 16px;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .mobile-user-menu__userinfo .ww-icon-user {
    background: url(/images/icon/mobile_header_user_icon.svg) no-repeat center / 18px;
  }
  .mobile-user-menu__userinfo .user-info-popup__content {
    gap: 0;
  }
  body.dark .mobile-user-menu__userinfo .user-info-title {
    color: #f1f1f1;
  }
  .mobile-user-menu__userinfo .user-info-title {
    color: #2f2f2f;
    font-size: 16px;
    font-weight: 700;
    line-height: 160%;
  }

  .mobile-user-menu__userinfo .user-info-popup__label {
    font-size: 14px;
    line-height: 130%;
  }
  .mobile-user-menu__userinfo .user-info-popup__value {
    font-size: 14px;
    line-height: 130%;
  }
  body.dark .mobile-user-menu__userinfo .user-info-popup__name {
    color: #addabc;
  }
  .mobile-user-menu__userinfo .user-info-popup__name {
    font-size: 16px;
    line-height: 130%;
    color: #377c4d;
  }
  .mobile-user-menu__userinfo .user-info-popup__row {
    padding: 8px 0;
    justify-content: normal;
  }
  .mobile-user-menu__setting {
    border: 1px solid #dee7e7;
    border-radius: 16px;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
  }
  .mobile-user-menu__setting-title {
    padding: 8px 16px;
    color: #2f2f2f;
    font-size: 16px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: -0.04rem;
  }
  .mobile-user-menu__setting-row {
    min-height: 42px;
    padding: 9px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .mobile-user-menu__setting-label {
    color: #4f4f4f;
    font-size: 14px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.04rem;
  }
  .mobile-user-menu__setting-divider {
    width: calc(100% - 32px);
    margin: 0 16px;
    height: 1px;
    background: #f1f1f1;
  }
  .mobile-user-menu__theme {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
  }
  .mobile-user-menu__theme-toggle-btn {
    width: 45px;
    height: 24px;
    border-radius: 30px;
    border: 2px solid #88a2a2;
    background: #f4f7f7;
    position: relative;
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease;
  }
  .mobile-user-menu__theme-toggle-thumb {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    left: 2px;
    top: 2px;
    background: #88a2a2;
    transition:
      transform 0.2s ease,
      background-color 0.2s ease;
  }
  .mobile-user-menu__theme-toggle-btn.is-dark {
    border-color: #ffffff;
    background: #4dae6d;
  }
  .mobile-user-menu__theme-toggle-btn.is-dark .mobile-user-menu__theme-toggle-thumb {
    transform: translateX(21px);
    background: #ffffff;
  }
  .mobile-user-menu__setting-action {
    min-height: 42px;
    padding: 12px 16px;
    justify-content: flex-start;
    color: #4f4f4f;
    font-size: 14px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.04rem;
    text-align: left;
    text-decoration: none;
  }
  .mobile-user-menu .content-menu-wrap {
    display: block;
    padding: 0;
  }
  .mobile-user-menu .content-menu-wrap::after {
    display: none;
  }
  .mobile-user-menu .content-menu-scroll {
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
  }
  .mobile-user-menu .content-menu-scroll a {
    min-width: calc(50% - 4px);
  }
  html.mobile-user-menu-open,
  body.mobile-user-menu-open {
    overflow: hidden;
    height: 100%;
  }
  body.dark .mobile-user-menu__panel {
    background: #212121;
  }
  body.dark .mobile-user-menu__header {
    border-bottom-color: #3d4c4c;
  }
  body.dark .mobile-user-menu__userinfo {
    border-color: #3f4b4b;
  }
  body.dark .mobile-user-menu__setting {
    border-color: #3f4b4b;
  }
  body.dark .user-info-popup__value {
    color: #bdbdbd;
  }
  body.dark .user-info-popup__remain-time {
    color: #cedcdc;
  }
  body.dark .user-info-popup__label {
    color: #b8cbcb;
  }
  body.dark .mobile-user-menu__setting-action,
  body.dark .mobile-user-menu__setting-label {
    color: #bdbdbd;
  }
  body.dark .mobile-user-menu__setting-title {
    color: #f1f1f1;
  }
  body.dark .mobile-user-menu__setting-divider {
    background: #2f2f2f;
  }
  body.dark .mobile-user-menu__theme-toggle-btn {
    border-color: #88a2a2;
    background: #3d4c4c;
  }
  body.dark .mobile-user-menu__theme-toggle-btn .mobile-user-menu__theme-toggle-thumb {
    background: #88a2a2;
  }
  body.dark .mobile-user-menu__theme-toggle-btn.is-dark {
    border-color: #4dae6d;
    background: #274030;
  }
  body.dark .mobile-user-menu__theme-toggle-btn.is-dark .mobile-user-menu__theme-toggle-thumb {
    background: #4dae6d;
  }
  body.dark .mobile-user-menu .content-menu-scroll a {
    background: #3d4c4c;
    color: #cedcdc;
  }
  body.dark .mobile-user-menu .content-menu-scroll a.is-active {
    background: #4dae6d;
    color: #ffffff;
  }
  .header-v2-lang-dropdown {
    height: 40px;
  }
  .header-v2-lang-container {
    margin-top: 0;
    overflow: visible;
  }
  .header-v2-lang-btn {
    width: 100%;
    height: 32px;
  }
  .header-v2-page-dropdown {
    height: 40px;
  }
  .header-v2-page-container {
    margin-top: 0;
    border-radius: 14px;
    overflow: visible;
    transition: box-shadow 0.3s ease;
  }
  .header-v2-page-dropdown.open .header-v2-page-container {
    box-shadow: none;
  }
  .header-v2-page-menu a {
    min-height: 40px;
    font-size: 16px;
    padding: 8px 12px;
  }
  .header-v2-page-label {
    font-size: 16px;
    font-weight: 700;
  }
  .has-mobile-header-filter .dateSection {
    display: none !important;
  }

  /* header v2 dropdown: language/menu unified style (Figma 6664:331323) */
  .header-title-wrap-v2 .header-v2-dropdown {
    position: relative;
    height: 40px;
    overflow: visible;
    z-index: 30;
  }
  .header-title-wrap-v2 .header-v2-dropdown.open {
    height: 40px;
  }
  .header-title-wrap-v2 .header-v2-dropdown-container {
    position: relative;
    margin-top: 0;
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
    transition: box-shadow 0.2s ease;
  }
  .header-title-wrap-v2 .header-v2-dropdown.open .header-v2-dropdown-container {
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  }
  body.dark .header-title-wrap-v2 .header-v2-dropdown.open .header-v2-dropdown-container {
    background: #2f2f2f;
  }
  .header-title-wrap-v2 .header-v2-dropdown-btn {
    height: 40px;
    border: 0;
    background: transparent;
    padding: 8px 4px 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .header-title-wrap-v2 .header-v2-dropdown-btn span {
    font-size: 16px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.04rem;
    color: #4f4f4f;
  }
  body.dark .header-title-wrap-v2 .header-v2-dropdown-btn span {
    color: #f1f1f1;
  }
  .header-title-wrap-v2 .header-v2-dropdown-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
  }
  .header-title-wrap-v2 .header-v2-dropdown.open .header-v2-dropdown-arrow {
    transform: rotate(180deg);
  }
  .header-title-wrap-v2 .header-v2-dropdown-menu {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    max-height: 260px;
    overflow-y: auto;
  }
  .header-title-wrap-v2 .header-v2-dropdown.open .header-v2-dropdown-menu {
    display: block;
  }
  .header-title-wrap-v2 .header-v2-dropdown-menu li {
    list-style: none;
  }
  .header-title-wrap-v2 .header-v2-dropdown-menu a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.04rem;
    color: #4f4f4f;
    white-space: nowrap;
  }
  body.dark .header-title-wrap-v2 .header-v2-dropdown-menu a {
    color: #f1f1f1;
  }
  .header-title-wrap-v2 .header-v2-dropdown-menu a.is-current {
    background: #4dae6d;
    color: #ffffff;
  }
  .header-title-wrap-v2 .header-v2-dropdown-menu a:hover {
    background: #f4f7f7;
  }
  .header-title-wrap-v2 .header-v2-dropdown-menu a.is-current:hover {
    background: #4dae6d;
  }
  .header-title-wrap-v2 .header-v2-lang-dropdown {
    width: 64px;
  }
  .header-title-wrap-v2 .header-v2-lang-dropdown .header-v2-dropdown-btn {
    width: 100%;
    justify-content: center;
  }
  .header-title-wrap-v2 .header-v2-lang-dropdown.open .header-v2-dropdown-container {
    min-width: 64px;
  }
  .header-title-wrap-v2 .header-v2-page-dropdown {
    min-width: 92px;
  }
  .header-title-wrap-v2 .header-v2-page-dropdown .header-v2-dropdown-btn {
    justify-content: center;
  }
  .header-title-wrap-v2 .header-v2-page-dropdown.open .header-v2-dropdown-container {
    min-width: 124px;
  }

  .header-v2-page-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header-v2-month-row.is-active {
    display: block;
    padding: 16px 0px;
  }
  .header-v2-month-row .monthWrap {
    justify-content: space-between;
    margin-left: 0;
    margin-right: 0;
    gap: 8px;
  }
  .header-v2-month-row .monthWrap strong {
    font-size: 16px;
    color: #469e63;
  }
  .header-v2-month-row .monthWrap .buttonWrap {
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: initial;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header-v2-month-row .monthWrap .buttonWrap.is-disabled {
    background: transparent;
  }

  .header-v2-page-label-dropdown {
    position: relative;
    height: 40px;
    overflow: visible;
    z-index: 30;
    width: 135px;
    padding: 0;
    margin-left: -12px;
  }
  html:lang(en) .header-v2-page-label-dropdown {
    width: 185px;
  }
  .header-v2-page-label-dropdown.open {
    height: 40px;
  }
  .header-v2-page-label-menu li a {
    text-align: left;
    /* Compact/sm/medium */
    font-size: 16px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.04rem;
    padding: 8px 12px;
  }
  .header-v2-page-label-container {
    position: relative;
    margin-top: 0;
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
  }
  .header-v2-page-label-dropdown.open .header-v2-page-label-container {
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    width: 100%;
  }
  body.dark .header-v2-page-label-dropdown.open .header-v2-page-label-container {
    background: #2f2f2f;
  }
  .header-v2-page-label-btn {
    height: 40px;
    border: 0;
    background: transparent;
    padding: 8px 4px 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
  }

  .header-v2-page-label-text {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 130%;
    letter-spacing: -0.04rem;
    color: #4f4f4f;
  }
  body.dark .header-v2-page-label-text {
    color: #f1f1f1;
  }
  .header-v2-page-label-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
  }
  .header-v2-page-label-dropdown.open .header-v2-page-label-arrow {
    transform: rotate(180deg);
  }
  .header-v2-page-label-menu {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .header-v2-page-label-dropdown.open .header-v2-page-label-menu {
    display: block;
  }
  .header-v2-page-label-menu li {
    list-style: none;
  }
  .header-v2-page-label-menu a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.04rem;
    color: #4f4f4f;
    white-space: nowrap;
  }
  body.dark .header-v2-page-label-menu a {
    color: #f1f1f1;
  }

  .header-v2-page-label-menu a:hover {
    background: #f4f7f7;
  }

  .header-v2-page-label-download {
    border: 0;
    background: transparent;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-v2-page-label-download-icon {
    width: 20px;
    height: 20px;
  }
  body.dark .header-mobile-cycle-gradation {
    background: linear-gradient(to right, rgba(47, 47, 47, 0), #2f2f2f 80%);
  }
  .mobile-setting-bolus {
    margin-top: 0;
  }
}
@media screen and (max-width: 400px) {
  .mobile-user-menu__header,
  .header-title-wrap {
    padding: 0px 16px;
  }
}

@media screen and (min-width: 769px) {
  .header-v2-page-label-download {
    display: none;
  }
}