@charset "euc-kr"; /* ¹®Àڼ ¼³Á¤ */


/* ±×¸®µå ·¹À̾ƿôÀ» À§ÇÑ ±âº» ¼³Á¤ */
.gd {
  display: grid; /* ±×¸®µå ·¹À̾ƿô È°¼ºÈ­ */
}

/* Àüü ÄÁÅ×ÀÌ³Ê ½ºÅ¸ÀÏ */
#container {
  width: 600px; /* ÄÁÅ×À̳ÊÀÇ ³Êºñ */
  margin: 80px auto; /* »ó´Ü ¿©¹é ¹× °¡¿îµ¥ Á¤·Ä */
  counter-reset: button-counter; /* ¹öÆ° Ä«¿îÅÍ ÃʱâÈ­ */
  grid-template-columns: repeat(3, 1fr); /* 3°³ÀÇ Ä÷³À» ±Õµî ¹èÄ¡ */
}

/* ¹öÆ° ÄÁÅ×ÀÌ³Ê ½ºÅ¸ÀÏ */
.toggle-button-container {
  position: relative; /* »ó´ë À§Ä¡ ÁöÁ¤ */
  width: 200px; /* ¹öÆ° ÄÁÅ×À̳ÊÀÇ ³Êºñ */
  height: 140px; /* ¹öÆ° ÄÁÅ×À̳ÊÀÇ ³ôÀÌ */
  box-sizing: border-box; /* ¹Ú½º ¸ðµ¨ ¼³Á¤ */
}

/* Åä±Û ¹öÆ°ÀÇ ±âº» ½ºÅ¸ÀÏ */
.toggle-button {
  position: relative; /* »ó´ë À§Ä¡ ÁöÁ¤ */
  height: 100px; /* ¹öÆ° ³ôÀÌ */
  margin: 20px; /* ¸¶Áø */
  background-color: #fff; /* ¹è°æ»ö Èò»ö */
  box-shadow: 0 10px 20px -8px #c5d6d6; /* ±×¸²ÀÚ È¿°ú */
  border-radius: 4px; /* ¸ð¼­¸® µÕ±Û°Ô */
}

/* Åä±Û ¹öÆ°¿¡ Ä«¿îÅÍ Ç¥½Ã */
.toggle-button:before {
  counter-increment: button-counter; /* ¹öÆ° Ä«¿îÅÍ Áõ°¡ */
  content: counter(button-counter); /* Ä«¿îÅÍ ³»¿ë Ç¥½Ã */
  position: absolute; /* Àý´ë À§Ä¡ */
  right: 0; /* ¿À¸¥ÂÊ¿¡ ¹èÄ¡ */
  bottom: 0; /* ¾Æ·¡ÂÊ¿¡ ¹èÄ¡ */
  color: #d7e3e3; /* ÅؽºÆ® »ö»ó */
  font-size: 12px; /* ÆùÆ® Å©±â */
  line-height: 1; /* ÁÙ °£°Ý */
  padding: 5px; /* ³»ºÎ ¿©¹é */
}

/* ¹öÆ°°ú ¹è°æÀ» Æ÷ÇÔÇÏ´Â ÄÁÅ×ÀÌ³Ê ½ºÅ¸ÀÏ */
.knob,
.btn-bg {
  position: absolute; /* Àý´ë À§Ä¡ ÁöÁ¤ */
  top: 0; /* »ó´Ü */
  right: 0; /* ¿À¸¥ÂÊ */
  bottom: 0; /* ÇÏ´Ü */
  left: 0; /* ¿ÞÂÊ */
}



/* µÕ±Ù ¹öÆ° ½ºÅ¸ÀÏ */
.btn.btn-pill,
.btn.btn-pill > .btn-bg {
  border-radius: 100px; /* ¿ÏÀü µÕ±Û°Ô ¼³Á¤ */
}

/* Á÷»ç°¢Çü ¹öÆ° ½ºÅ¸ÀÏ */
.btn.btn-rect {
  border-radius: 2px; /* ¸ð¼­¸® »ì¦ µÕ±Û°Ô */
}

/* üũ¹Ú½º ¼û±â±â */
.checkbox {
  position: relative; /* »ó´ë À§Ä¡ ÁöÁ¤ */
  width: 100%; /* ³Êºñ 100% */
  height: 100%; /* ³ôÀÌ 100% */
  padding: 0; /* ³»ºÎ ¿©¹é ¾øÀ½ */
  margin: 0; /* ¿ÜºÎ ¿©¹é ¾øÀ½ */
  opacity: 0; /* üũ¹Ú½º ¼û±â±â */
  cursor: pointer; /* ¸¶¿ì½º Ä¿¼­¸¦ Æ÷ÀÎÅÍ·Î º¯°æ */
  z-index: 3; /* z-index Á¶Á¤ */
}

/* ³ëºê ¿µ¿ª */
.knob {
  z-index: 2; /* z-index ¼³Á¤ */
}

/* ¹è°æ ¿µ¿ª */
.btn-bg {
  width: 100%; /* ³Êºñ 100% */
  background-color: #ebf7fc; /* ¹è°æ»ö */
  transition: 0.3s ease all; /* Àüȯ È¿°ú */
  z-index: 1; /* z-index ¼³Á¤ */
}

/* ¹öÆ° 10ÀÇ ½ºÅ¸ÀÏ - ³ëºê, ÅؽºÆ®, üũ¹Ú½º »óÅ Á¶Á¤ */
#button-10 .knob:before,
#button-10 .knob:after,
#button-10 .knob span {
  position: absolute; /* Àý´ë À§Ä¡ ÁöÁ¤ */
  top: 5px; /* »ó´Ü ¿©¹é */
  width: 25px; /* ³Êºñ */
  height: 12.5px; /* ³ôÀÌ */
  font-size: 12.5px; /* ÆùÆ® Å©±â */
  font-weight: bold; /* ±Û¾¾ µÎ²² */
  text-align: center; /* ÅؽºÆ® °¡¿îµ¥ Á¤·Ä */
  line-height: 1; /* ÁÙ °£°Ý */
  padding: 11.25px 5px; /* Æеù ¼³Á¤ */
  border-radius: 2.5px; /* ¸ð¼­¸® µÕ±Û°Ô */
  transition: 0.3s ease all; /* Àüȯ È¿°ú */
}

/* '¾øÀ½' ÅؽºÆ®¸¦ À§ÇÑ ½ºÅ¸ÀÏ */
#button-10 .knob:before {
  content: ""; /* ³»¿ë ¾øÀ½ */
  left: 5px; /* ¿ÞÂÊ ¿©¹é */
  background-color: #F64328; /* ¹è°æ»ö »¡°­ */
}

/* 'ÀÖÀ½' ÅؽºÆ®¸¦ À§ÇÑ ½ºÅ¸ÀÏ */
#button-10 .knob:after {
  content: "ÀÖÀ½"; /* 'ÀÖÀ½' ÅؽºÆ® */
  right: 7px; /* ¿À¸¥ÂÊ ¿©¹é */
  color: #4e4e4e; /* ±ÛÀÚ »ö»ó */
}

/* '¾øÀ½' ÅؽºÆ® »ö»ó ¼³Á¤ */
#button-10 .knob span {
  display: inline-block; /* ÀζóÀÎ ºí·ÏÀ¸·Î Ç¥½Ã */
  left: 5px; /* ¿ÞÂÊ ¿©¹é */
  color: #fff; /* ±ÛÀÚ »ö»ó Èò»ö */
  z-index: 1; /* z-index ¼³Á¤ */
}

/* üũ¹Ú½º°¡ üũµÈ »óÅ¿¡¼­ '¾øÀ½' ÅؽºÆ® »ö»ó º¯°æ */
#button-10 .checkbox:checked + .knob span {
  color: #4e4e4e; /* ±ÛÀÚ »ö»ó º¯°æ */
}

/* üũ¹Ú½º°¡ üũµÈ »óÅ¿¡¼­ '¾øÀ½' ¹öÆ° »ö»ó À̵¿ ¹× ¹è°æ»ö º¯°æ */
#button-10 .checkbox:checked + .knob:before {
  left: 47px; /* ¹öÆ° À̵¿ */
  background-color: #2695A5; /* ¹è°æ»ö º¯°æ */
}

/* üũ¹Ú½º°¡ üũµÈ »óÅ¿¡¼­ 'ÀÖÀ½' ÅؽºÆ® »ö»ó º¯°æ */
#button-10 .checkbox:checked + .knob:after {
  color: #fff; /* ±ÛÀÚ »ö»ó Èò»ö */
}

/* üũ¹Ú½º°¡ üũµÈ »óÅ¿¡¼­ ¹öÆ° ¹è°æ»ö º¯°æ */
#button-10 .checkbox:checked ~ .btn-bg {
  background-color: #fcebeb; /* ¹è°æ»ö º¯°æ */
}



/*--------------------------------------------------------------------------*/
/*Pure CSS custom checkboxes*/

/* // take it out of document flow  opacity: 0; // hide it */
  
.styled-checkbox {
    position: absolute; 
    & + label {
      position: relative;
      cursor: pointer;
      padding: 0;
    }
  
    /* // Box. */
    & + label:before {
      content: '';
      display: inline-block;
      vertical-align: text-top;
      width: 18px;
      height: 18px;
      background: white;
      border: 1px solid #ddd;
    }
  
    /* // Box hover */
    &:hover + label:before {
      background: #f35429;
    }
    
    /* // Box focus */
    &:focus + label:before {
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
    }
  
    /* // Box checked */
    &:checked + label:before {
      background: #F64328;
    }
    
    /* // Disabled state  */
    /* label. */
    &:disabled + label {
      color: #b8b8b8;
      cursor: auto;
    }
  
    /* // Disabled box. */
    &:disabled + label:before {
      box-shadow: none;
      background: #ddd;
    }
  
    /* // Checkmark.  */
    /* Could be replaced with an  */
    /* image */
    &:checked + label:after {
      content: '';
      position: absolute;
      left: 5px;
      top: 9px;
      background: white;
      width: 2px;
      height: 2px;
      box-shadow: 
        2px 0 0 white,
        4px 0 0 white,
        4px -2px 0 white,
        4px -4px 0 white,
        4px -6px 0 white,
        4px -8px 0 white;
      transform: rotate(45deg);
    }
  }
  
/*------------------------------------------------------------------------*/