/* -----------------  dark mode styling ----------------- */

@media (prefers-color-scheme: dark) {
  /* 개별 페이지 */

  /* airQuality : 대기질 */
  .air-quality-bottom img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(0%) saturate(61%) hue-rotate(191deg) brightness(95%) contrast(86%);
  }

  .air-quality-bottom span {
    color: #8a8a8a;
  }

  .air-quality-index.summary {
    color: var(--color-white);
  }

  #primaryProp.air-quality-index,
  #primaryProp2.air-quality-index {
    color: var(--color-white);
  }

  #primaryValue.air-quality-index,
  #primaryValue2.air-quality-index {
    color: var(--color-white);
  }

  .air-quality-item .air-quality-index.unit {
    color: var(--color-white);
  }

  .air-quality-item .air-quality-index.value {
    color: var(--color-white);
  }

  .bottom-popup {
    background-color: var(--color-d3);
    color: var(--color-white);
  }

  .bottom-popup h3 {
    color: var(--color-white);
  }

  .popupTable_1 th,
  .popupTable_1 tr,
  .popupTable_1 td {
    border: 1px solid #ccc;
  }

  .table4:first-child tr:nth-child(2n - 1) > td:nth-child(n + 2) {
    background-color: var(--color-l5);
  }

  .table4:last-child tr:nth-child(2n - 1) > td {
    background-color: var(--color-l5);
  }

  .table4 th,
  .table4 td {
    background-color: var(--color-l2);
  }

  .info-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(103deg) brightness(105%) contrast(105%);
  }

  .air-graph-y-label {
    border-color: var(--color-d4);
    opacity: 1;
    color: #686868;
  }

  .air-graph-y-label:first-child {
    border-color: var(--color-d4);
    opacity: 1;
    color: #686868;
  }

  .map-wrap .air-map-play-img {
    content: url('../images/example/player-play-dark.png');
  }

  .map-wrap .air-map-play-img.stop {
    content: url('../images/example/player-stop-dark.png');
  }

  .map-wrap .air-map-bar-wrap input {
    box-shadow: inset -1px 1px 5px 0 rgba(255, 255, 255, 0.3);
  }

  .map-wrap .current-marker {
    color: var(--color-white);
  }

  .map-wrap .air-map-bar-wrap .tick-marks > div {
    border-right: 1px solid var(--color-white);
  }

  .map-wrap .air-map-bar-wrap .tick-marks > div > span {
    color: var(--color-white);
  }

  /* flu : 코로나 */
  .flu-outlook-title {
    color: #b081e1;
  }

  .flu-outlook-content {
    color: var(--color-white);
  }

  .information-wrap > p {
    color: var(--color-white);
  }

  .information-source {
    color: #bfbfbf;
  }

  .flu-y-label {
    border-bottom: 1px solid rgba(46, 46, 46);
  }

  .flu-y-label:first-child {
    border-top: 1px solid rgba(46, 46, 46);
  }

  .flu-tip-title {
    color: var(--color-white);
  }

  .flu-tip-title:nth-child(2) {
    color: #7f7f7f;
  }

  .contents {
    color: var(--color-white);
  }

  .contents-title {
    color: var(--color-white);
  }

  .linkBtn {
    color: #cc0101;
  }

  .covidFAQ .radioButtons {
    color: #fff;
  }

  .covidFAQ .FAQContent > label {
    color: #fff;
  }

  input[id*='FQA_item_'] + label + div {
    color: #7f7f7f;
  }

  input[id*='FQA_item_'] + label img {
    filter: invert(100%);
  }

  /* precipitation : 강수량 */
  /* .graph-wrap .card h3 {
    color: var(--color-white);
  } */

  /* .graph-wrap .card p {
    color: var(--color-white);
  } */

  .card-list .card-item:not(:last-of-type) {
    border-right: 1px solid #2c2c2c;
  }

  .card-list .card-item .card-item-top .card-item-text .text-val {
    color: var(--color-white);
  }

  .card-list .card-item .card-item-top .card-item-text .text-unit {
    color: var(--color-white);
  }

  .card-list .card-item .card-item-bottom p {
    color: var(--color-white);
  }

  .summary-text {
    color: var(--color-white);
  }

  .etc-wrap {
    background-color: #171717;
    color: var(--color-white);
  }

  /* seasonWeather : 계절별 콘텐츠 */
  .seasonPopup.on {
    background-color: var(--color-black);
  }

  .options-kItemNm {
    background-color: #171717;
    color: #fcfcfc;
    border-right: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
  }

  /* national-weather-map */
  .date-select-wrap li.active {
    color: var(--color-white);
  }

  .time-select-wrap span {
    background-color: var(--color-d3);
    color: var(--color-white);
  }

  .time-select-wrap span:not(:last-child) {
    border-right: 1px solid var(--color-black);
  }

  .map-footer {
    color: var(--color-white);
  }

  .article-wrap {
    color: var(--color-white);
  }

  /* sun-and-moon */
  .sun-and-moon .sun-table-wrap {
    background-color: var(--color-black);
  }

  .sun-and-moon .headline {
    color: var(--color-white);
  }

  .sun-and-moon .column-img {
    filter: brightness(200%);
  }

  .sun-and-moon .column-img.change-to-moon {
    filter: invert(100%);
  }

  .sun-and-moon .fourth-column .column-img {
    filter: invert(100%);
  }

  .sun-and-moon td {
    color: var(--color-white);
  }

  .sun-and-moon .day-select-button {
    color: var(--color-white);
    background-color: var(--color-d3);
  }

  .sun-and-moon .day-select-button.active {
    color: var(--color-black);
    background-color: var(--color-l2);
  }

  .sun-and-moon .menu-footer {
    color: var(--color-white);
    background-color: var(--color-black);
  }
}