/* ===================== GOOGLE FONT ===================== */

     @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');



     /* ===================== VARIABLE CSS ===================== */

     :root {

         --header-height: 3.5rem;

         /* ===================== COLORS  ===================== */

         /* purple : 250  */
         --first-hue: 250;
         --sat: 66%;
         --lig: 75%;
         --second-hue: 219;

         /* HSL color mode */
         /* hsl(색상,채도,명도,투명도) */
         /* hsl(hue,saturation,lightness) */
         --first-color: hsl(var(--first-hue), var(--sat), var(--lig));
         --first-color-alt: hsl(var(--first-hue), var(--sat), 71%);
         --title-color: hsl(var(--second-hue), 15%, 95%);
         --text-color: hsl(var(--second-hue), 8%, 75%);
         --text-color-light: hsl(var(--second-hue), 4%, 55%);
         --body-color: hsl(var(--second-hue), 48%, 8%);
         --container-color: hsl(var(--second-hue), 32%, 12%);

         /* ===================== FONT & TYPOGRAPHY ===================== */
         --body-font: 'Noto Sans KR', sans-serif;

         /* 1rem = 16px */
         --biggest-font-size: 2rem;
         --h1-font-size: 1.5rem;
         --h2-font-size: 1.25rem;
         --h3-font-size: 1.125rem;
         --normal-font-size: 0.938rem;
         --small-font-size: 0.813rem;
         --smaller-font-size: 0.75rem;
         --tiny-font-size: 0.625rem;

         /* ===================== FONT WEIGHT ===================== */
         --font-medium: 500;
         --font-semi-bold: 600;
         --font-bold: 800;

         /* ===================== Z-INDEX ===================== */
         --z-tooltip: 10;
         --z-fixed: 100;
         --z-modal: 1000;
     }

     /* ===================== DESK-TOP (responsive) ===================== */

     @media screen and (min-width:968px) {
         :root {
             --biggest-font-size: 3rem;
             --h1-font-size: 2.25rem;
             --h2-font-size: 1.5rem;
             --h3-font-size: 1.25rem;
             --normal-font-size: 1rem;
             --small-font-size: 0.875rem;
             --smaller-font-size: 0.813rem;
         }
     }

     /* ===================== // DESK-TOP  ===================== */


     /* ===================== BUTTON  ===================== */

     /* ===================== BASE  ===================== */
     * {
         box-sizing: border-box;
         padding: 0;
         margin: 0;
     }

     html {
         scroll-behavior: smooth;
     }

     body,
     button,
     input,
     textarea {
         font-family: var(--body-font);
         font-size: var(--normal-font-size);
     }

     body {
         background-color: var(--body-color);
         color: var(--text-color);
         transition: 0.4s;
         /* light - dark 테마 변경 시 animation효과 */
     }

     h1,
     h2,
     h3 {
         color: var(--title-color);
         font-weight: var(--font-semi-bold);
     }

     ul {
         list-style: none;
     }

     a {
         text-decoration: none;
     }

     button {
         cursor: pointer;
         border: none;
         outline: none;
     }

     img {
         max-width: 100%;
         height: auto;
     }

     /* ===================== THEME Change  ===================== */
     .change-theme {
         font-size: 1.25rem;
         cursor: pointer;
         transition: 0.3s;
     }

     .change-theme:hover {
         color: var(--first-color);
     }

     /* ===================== THEME Light  ===================== */
     body.light-theme {
         --title-color: hsl(var(--second-hue), 15%, 15%);
         --text-color: hsl(var(--second-hue), 8%, 35%);
         --body-color: hsl(var(--second-hue), 100%, 99%);
         --container-color: #fff;
     }

     .light-theme .scroll-header {
         box-shadow: 0 2px 4px hsla(0, 0%, 1%, 0.1);
     }

     .light-theme .nav__menu {
         background-color: hsla(var(--second-hue), 32%, 90%, 0.8);
     }

     .light-theme .section__subtitle {
         color: var(--text-color);
     }

     .light-theme .home__social-link {
         box-shadow: 0 2px 8px hsla(var(--second-hue), 48%, 8%, 0.1);
     }

     .light-theme .home__social::after {
         background-color: var(--text-color);
     }

     .light-theme .home__social-link,
     .light-theme .home__scroll,
     .light-theme .button {
         color: var(--text-color);
     }

     .light-theme .about__box {
         box-shadow: 0 2px 8px hsla(var(--second-hue), 48%, 8%, 0.1)
     }

     .light-theme .skills__content,
     .light-theme .services__card,
     .light-theme .work__card,
     .light-theme .qna__card,
     .light-theme .contact__card {
         box-shadow: 0 2px 16px hsla(var(--second-hue), 48%, 8%, 0.1)
     }

     .light-theme .footer__title,
     .light-theme .footer__link,
     .light-theme .footer__copy {
         color: var(--title-color);
     }

     .light-theme::-webkit-scrollbar {
         background-color: hsl(var(--second-hue), 8%, 66%);
     }

     .light-theme::-webkit-scrollbar-thumb {
         background-color: hsl(var(--second-hue), 8%, 54%);
     }

     .light-theme::-webkit-scrollbar-thumb:hover {
         background-color: hsl(var(--second-hue), 8%, 44%);
     }

     /* ===================== 재사용 CSS CLASS  ===================== */

     .container {
         max-width: 968px;
         margin: 0 1rem;
     }

     .grid {
         display: grid;
         gap: 1.25rem;
     }

     .main {
         overflow: hidden;
     }

     .section {
         padding: 4.5rem 0 1rem;
     }

     .section__title,
     .section__subtitle {
         text-align: center;
     }

     .section__title {
         font-size: var(--h2-font-size);
         color: var(--first-color);
         margin-bottom: 2rem;
     }

     .section__subtitle {
         display: block;
         font-size: var(--smaller-font-size);
         color: var(--text-color-light);
     }


     /* ===================== HEADER , NAV ===================== */

     .header {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         background-color: var(--body-color);
         z-index: var(--z-fixed);
         transition: 0.4s
             /* 테마 변경시 animation 효과*/
     }

     .nav {
         height: var(--header-height);
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .nav__logo {
         color: var(--first-color);
         font-weight: var(--font-medium);
         transition: 0.4s;
     }

     .nav__logo:hover {
         color: var(--first-color-alt);
     }

     .nav__menu {
         position: fixed;
         bottom: 1rem;
         background-color: hsla(var(--second-hue), 32%, 16%, 0.8);
         width: 90%;
         border-radius: 5rem;
         padding: 1rem 2.25rem;
         backdrop-filter: blur(10px);
         transition: 0.4s
             /* 테마 변경시 animation 효과*/
     }

     .nav__list {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .nav__link {
         color: var(--text-color);
         font-size: var(--h2-font-size);
         padding: 0.4rem;
         display: flex;
         border-radius: 5rem;
     }

     /* Active link */
     .active-link {
         background: linear-gradient(180deg,
                 hsla(var(--first-hue), var(--sat), var(--lig), 1),
                 hsla(var(--first-hue), var(--sat), var(--lig), 0.2));

         box-shadow: 0 0 16px hsla(var(--first-hue), var(--sat), var(--lig), 0.4)
     }

     /* change background header */

     .scroll-header {
         box-shadow: 0 4px 4px hsla(0, 0%, 4%, 0.3);
     }

     /* ===================== HOME ===================== */
     .home__container {
         position: relative;
         row-gap: 4.5rem;
         padding-top: 2rem;
     }

     .home__data {
         text-align: center;
     }

     .home__greeting,
     .home__education {
         font-size: var(--small-font-size);
         font-weight: var(--font-medium);
     }

     .home__greeting {
         display: block;
         color: var(--title-color);
         margin-bottom: 0.25rem;
     }

     .home__education {
         color: var(--text-color);
         margin-bottom: 2.5rem;
     }

     .home__name {
         font-size: var(--biggest-font-size);
     }

     .home__img {
         width: 200px
             /* 160px */
     }

     .home__handle {
         justify-self: center;
         width: 215px;
         height: 260px;
         background: linear-gradient(180deg,
                 hsla(var(--first-hue), var(--sat), var(--lig), 1),
                 hsla(var(--first-hue), var(--sat), var(--lig), 0.2));
         border-radius: 10rem 10rem 1rem 1rem;
         display: flex;
         /* align-items: flex-end; */
         justify-content: end;
         overflow: hidden;
     }

     .home__buttons {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 1.5rem;
     }

     .home__social,
     .home__scroll {
         position: absolute;
         bottom: 5rem;
         left: 0;
         display: grid;
         row-gap: 0.5rem;
     }

     .home__social-link {
         width: max-content;
         background-color: var(--container-color);
         color: var(--first-color);
         padding: 0.25rem;
         border-radius: 0.25rem;
         display: flex;
         font-size: 1rem;
         transition: 0.4s;
     }

     .home__social-link:hover {
         background-color: var(--first-color);
         color: #fff;
     }

     .home__social::after {
         content: '';
         width: 32px;
         height: 2px;
         background-color: var(--first-color);
         transform: rotate(90deg) translate(16px, 5px);
     }

     .home__scroll {
         color: var(--first-color);
         right: -35rem;
         bottom: -5rem;
         display: grid;
         row-gap: 2.25rem;
         justify-items: center;
     }

     .home__scroll-icon {
         font-size: 1.5rem;
     }

     .home__scroll-name {
         font-size: var(--smaller-font-size);
         transform: rotate(90deg);
     }

     /* ===================== BUTTONS ===================== */

     .button {
         display: inline-block;
         background-color: var(--first-color);
         color: var(--body-color);
         padding: 0.75rem 1rem;
         border-radius: 0.5rem;
         font-weight: var(--font-medium);
         transition: 0.4s;
     }

     .button:hover {
         background-color: var(--first-color-alt);
         color: var(--body-color);
     }

     .button--ghost {
         background-color: transparent;
         border: 2px solid var(--first-color);
         color: var(--first-color);
     }


     /* ===================== About me ===================== */

     .about__container {
         row-gap: 2.5rem;
     }

     .about__img {
         width: 220px;
         height: 280px;
         border-radius: 1.5rem;
         justify-self: center;
     }

     .about__data {
         text-align: center;
     }

     .about__info {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 0.7rem;
         margin-bottom: 2rem;
     }

     .about__box {
         background-color: var(--container-color);
         border-radius: 0.75rem;
         padding: 0.75rem;
     }

     .about__icon {
         font-size: 1.5em;
         color: var(--first-color);
         margin-bottom: 0.5rem;
     }

     .about__title {
         font-size: var(--small-font-size);
     }

     .about__subtitle {
         font-size: var(--tiny-font-size);
     }

     .about__description {
         margin-bottom: 2rem;
         line-height: 26px;
     }

     /* ===================== SKILLS ===================== */

     .skills__container {
         row-gap: 2rem;
         padding-top: 1rem;
     }

     .skills__content {
         background-color: var(--container-color);
         padding: 1.2rem;
         border-radius: 1.25rem;
     }

     .skills__title {
         font-size: var(--normal-font-size);
         font-weight: var(--font-medium);
         color: var(--first-color);
         text-align: center;
         margin-bottom: 1.5rem;
     }

     .skills__box {
         display: flex;
         justify-content: center;
         column-gap: 2.5rem;
     }

     .skills__group {
         display: grid;
         align-content: flex-start;
         row-gap: 1rem;
     }

     .skills__data {
         display: flex;
         column-gap: 0.5rem;
     }

     .skills .bxs-check-circle {
         font-size: 1.5rem;
         color: var(--first-color);
     }

     .skills__name {
         font-size: var(--normal-font-size);
         font-weight: var(--font-medium);
         line-height: 18px;
     }

     .skills__level {
         font-size: var(--tiny-font-size);
     }

     /* ===================== SERVICES ===================== */

     .services__container {
         grid-template-columns: repeat(2, 1fr);
         gap: 1.5rem;
         padding-top: 1rem;
     }

     .services__card {
         background-color: var(--container-color);
         padding: 3rem 1.5rem 1.5rem;
         border-radius: 1rem;
     }

     .services__title {
         font-size: var(--h3-font-size);
         margin-bottom: 2.5rem;
     }

     .services__button {
         color: var(--first-color);
         font-size: var(--small-font-size);
         display: flex;
         align-items: center;
         column-gap: 0.25rem;
         cursor: pointer;
     }

     /* .services__button :hover 할 때 .services__icon에 효과를 주는 것. */
     .services__button:hover .services__icon {
         transform: translateX(0.25rem)
     }

     .services__icon {
         font-size: 1rem;
         transition: 0.4s;
     }

     /* Services Modal */
     .services__modal {
         position: fixed;
         inset: 0;
         background-color: hsla(var(--second-hue), 28%, 16%, 0.7);
         padding: 2rem 1rem;
         display: grid;
         place-items: center;
         visibility: hidden;
         opacity: 0;
         transition: 0.4s;
         z-index: var(--z-modal);
     }

     .services__modal-content {
         position: relative;
         background-color: var(--body-color);
         padding: 4.5rem 1.5rem 2.5rem;
         border-radius: 1.5rem;
     }

     .services__modal-title,
     .services__modal-description {
         text-align: center;
     }

     .services__modal-title {
         font-size: var(--h3-font-size);
         color: var(--first-color);
         margin-bottom: 1rem;
     }

     .services__modal-description {
         font-size: var(--small-font-size);
         margin-bottom: 2rem;
     }

     .services__modal-list {
         display: grid;
         row-gap: 0.75rem;
     }

     .services__modal-item {
         display: flex;
         align-items: flex-start;
         column-gap: 0.5rem;
     }

     .services__modal-icon {
         font-size: 1.5rem;
         color: var(--first-color);
     }

     .services__modal-info {
         font-size: var(--small-font-size);
     }

     .services__modal-close {
         position: absolute;
         top: 1.5rem;
         right: 1.5rem;
         font-size: 1.5rem;
         color: var(--first-color);
         cursor: pointer;
     }

     .services__modal-close:hover {
         color: var(--text-color);
         transition: 0.4s;
     }

     /* ===================== WORK ===================== */
     .work__container {
         padding-top: 1rem;
     }

     .work__filters {
         display: flex;
         justify-content: center;
         align-items: center;
         column-gap: 0.75rem;
         margin-bottom: 2rem;
     }

     .work__item {
         cursor: pointer;
         color: var(--title-color);
         padding: 0.25rem 0.75rem;
         font-weight: var(--font-medium);
         border-radius: 0.5rem;
     }

     .work__item:hover {
         color: var(--text-color);
         transition: 0.4s;
     }

     .work__card {
         background-color: var(--container-color);
         padding: 1rem;
         border-radius: 1rem;
     }

     .work__img {
         border-radius: 1rem;
         margin-bottom: 0.75rem;
     }

     .work__title {
         font-size: var(--normal-font-size);
         font-weight: var(--font-medium);
         margin-bottom: 0.25rem;
     }

     .work__button {
         width: max-content;
         color: var(--first-color);
         font-size: var(--small-font-size);
         display: flex;
         align-items: center;
         column-gap: 0.25rem;
     }

     .work__button:hover .work__icon {
         transform: translateX(0.25rem);
         transition: 0.4s;
     }

     .work__icon {
         font-size: 1rem;

     }

     /* Active Item Work */

     .active-work {
         background-color: var(--first-color);
         color: var(--body-color);
     }

     /* ===================== QNA ===================== */

     .qna__card {
         background-color: var(--container-color);
         padding: 1.25rem 1.5rem;
         border-radius: 1.5rem;
         margin-bottom: 3rem;
     }

     .qna__img {
         width: 55px;
         border-radius: 2.5rem;
         margin-bottom: 0.75rem;
     }

     .qna__name {
         font-size: var(--normal-font-size);
         font-weight: var(--font-medium);
         color: var(--first-color);
         margin-bottom: 0.35rem;
     }

     .qna__description {
         font-size: var(--small-font-size);
     }

     /* Swiper */

     .swiper-pagination-bullet {
         background-color: var(--text-color-light);
     }

     .swiper-pagination-bullet-active {
         background-color: var(--first-color);
     }

     /* ===================== CONTACT ===================== */

     .contact__container {
         row-gap: 3rem;
         padding-bottom: 3rem;
     }

     .contact__title {
         text-align: center;
         font-size: var(--h3-font-size);
         margin-bottom: 1.5rem;
     }

     .contact__info {
         display: grid;
         gap: 1rem;
     }

     .contact__card {
         background-color: var(--container-color);
         padding: 1rem;
         border-radius: 0.75rem;
         text-align: center;
     }

     .contact__card-icon {
         font-size: 1.75rem;
         color: var(--title-color);
         margin-bottom: 0.25rem;
     }

     .contact__card-title,
     .contact__card-data {
         font-size: var(--small-font-size);
     }

     .contact__card-title {
         font-weight: var(--font-medium);
     }

     .contact__card-data {
         display: block;
         margin-bottom: 0.75rem;
     }

     .contact__button {
         color: var(--first-color);
         font-size: var(--small-font-size);
         display: flex;
         align-items: center;
         justify-content: center;
         column-gap: 0.25rem;
     }

     .contact__button:hover .contact__button-icon {
         transform: translateX(0.25rem);
     }

     .contact__button-icon {
         font-size: 1rem;
         transition: 0.4s;
     }

     .contact__form-div {
         position: relative;
         margin-bottom: 2rem;
         height: 4rem;
     }

     .contact__form-input {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border: 2px solid var(--text-color-light);
         background: none;
         color: var(--text-color);
         outline: none;
         padding: 1rem;
         border-radius: 0.75rem;
         z-index: 1;
     }

     .contact__form-tag {
         position: absolute;
         top: -0.75rem;
         left: 1.25rem;
         font-size: var(--smaller-font-size);
         padding: 0.25rem;
         background-color: var(--body-color);
         z-index: 10;
     }

     .contact__form-area {
         height: 11rem;
     }

     .contact__form-area textarea {
         resize: none;
     }

     /* ===================== FOOTER ===================== */
     .footer {
         background-color: var(--first-color);
     }

     .footer__container {
         padding: 2rem 0 6rem;
     }

     .footer__title,
     .footer__link {
         color: var(--body-color);
     }

     .footer__title {
         text-align: center;
         margin-bottom: 2rem;
     }

     .footer__link:hover {
         color: var(--text-color);
         transition: 0.4s;
     }

     .footer__list {
         display: flex;
         justify-content: center;
         column-gap: 1.5rem;
         margin-bottom: 2rem;
     }


     .footer__social {
         display: flex;
         justify-content: center;
         column-gap: 1.25rem;
     }

     .footer__social-link {
         /* background-color: var(--body-color); */
     }

     .footer__social-link img {
         width: 36px;
     }

     .footer__copy {
         display: block;
         margin-top: 4rem;
         color: var(--container-color);
         text-align: center;
         font-size: var(--smaller-font-size);
     }

     /* ===================== SCROLL BAR ===================== */
     ::-webkit-scrollbar {
         width: 0.6rem;
         border-radius: 0.5rem;
         background-color: hsl(var(--second-hue), 8%, 38%);
     }

     ::-webkit-scrollbar-thumb {
         background-color: hsl(var(--second-hue), 8%, 26%);
         border-radius: 0.5rem;
     }

     ::-webkit-scrollbar-thumb:hover {
         background-color: hsl(var(--second-hue), 8%, 20%);
     }

     /* ===================== SHOW MENU ===================== */

     /* ===================== ACTIVE LINK ===================== */

     /* Active Modal */

     .active-modal {
         opacity: 1;
         visibility: visible;
     }

     /* ===================== Breakpoints ===================== */

     /* 모바일 (s) */
     @media screen and (max-width:380px) {
         .nav__menu {
             padding: 1rem 1.5rem;
         }

         .home__buttons {
             flex-direction: column;
         }

         .home__handle {
             max-width: 180px;
             max-height: 253px;
         }

         .home__img {
             max-width: 180px;
         }

         .about__info {
             grid-template-columns: repeat(1, 1fr);
         }

         .skills__box {
             column-gap: 1rem;
         }

         .skills__name {
             font-size: var(--small-font-size);
         }

         .services__container {
             grid-template-columns: 145px;
             justify-content: center;
         }

         .work__item {
             font-size: var(--small-font-size);
         }

         .work__filters {
             column-gap: 0.5rem;
         }
     }

     /* 테블릿 */
     @media screen and (min-width:576px) {
         .nav__menu {
             width: 328px;
             left: 0;
             right: 0;
             margin: 0 auto;
         }

         .about__info {
             grid-template-columns: repeat(3, 150px);
             justify-content: center;
         }

         .about__description {
             padding: 0 5rem;
         }

         .skills__container {
             justify-content: center;
         }

         .skills__content {
             padding: 2rem 4rem;
         }

         .services__container {
             grid-template-columns: repeat(2, 155px);
             justify-content: center;
         }

         .services__modal-content {
             width: 500px;
             padding: 3rem 2rem;
         }

         .services__modal-description {
             padding: 0 2rem;
         }

         .work__container {
             justify-content: center;
         }

         .work__img {
             width: 300px;

         }

         .contact__info {
             /* grid-template-columns: repeat(2, 200px); */
             grid-template-columns: repeat(1, 1fr);
             justify-content: center;
         }

         .contact__form {
             width: 360px;
             margin: 0 auto;
         }

         .contact__form .button {
             display: flex;
             margin: 0 auto;
         }
     }

     /* 데스크탑 */
     @media screen and (min-width: 767px) {
         .nav__menu {
             width: 430px;
         }

         .home__img {
             max-width: max-content
         }

         .about__info {
             grid-template-columns: repeat(3, 1fr);
         }

         .skills__container {
             grid-template-columns: repeat(2, 420px);
             justify-content: center;
         }

         .services__container {
             grid-template-columns: repeat(3, 280px);
             justify-content: center;
         }

         .work__container {
             grid-template-columns: repeat(2, 420px);
         }

         .contact__info {
             grid-template-columns: repeat(1, 1fr);
             gap: 3rem;
         }

         .contact__container {
             /* grid-template-columns: repeat(2, 1fr); */
             justify-content: center;
             column-gap: 3rem;
         }
     }

     /* 992px 이상 큰 화면일 때  */
     @media screen and (min-width:992px) {
         .container {
             margin-left: auto;
             margin-right: auto;
         }

         .container__content {
             width: 40rem;
             grid-template-columns: repeat(1, 1fr)
         }

         .section {
             padding: 6.5rem 0 1rem;
         }

         .section__title {
             margin-bottom: 3rem;
         }

         .nav {
             height: calc(var(--header-height) + 1rem);
         }

         .home__handle {
             width: 225px;
             height: 270px;
         }

         .home__img {
             width: 220px;
         }

         .home__social-link {
             padding: 0.4rem;
             font-size: 1.4rem;
         }

         .home__social::after {
             transform: rotate(90deg) translate(20px, 0)
         }

         .home__scroll-icon {
             font-size: 1.9rem;
         }

         .about__container {
             grid-template-columns: repeat(2, 1fr);
             align-items: start;
             column-gap: 4rem;
         }

         .about__img {
             width: 270px;
             height: auto;
         }

         .about__data {
             text-align: initial;
         }

         .about__info {
             justify-content: start;
         }

         .about__box {
             text-align: center;
             padding: 1rem;
             width: 12rem;
         }

         .about__subtitle {
             font-size: 0.75rem;
         }

         .about__description {
             padding: 0 4rem 0 0;
             margin-bottom: 2.5rem;
         }

         .skills__container {
             column-gap: 3rem;
         }

         .services__container {
             column-gap: 3rem;
         }

         .services__card {
             padding: 4rem 2rem 2rem;
         }

         .work__container {
             gap: 3rem;
         }

         .work__card {
             padding: 2rem;
             justify-self: center;
         }

         .work__img {
             margin-bottom: 1rem;
         }

         .work__title {
             margin-bottom: 0.6rem;
         }

         .qna__container {
             width: 860px;
         }

         .qna__card {
             padding: 1.25rem;
             margin-right: 38px;
         }

         .contact__container {
             column-gap: 4.5rem;
         }
     }