/* 페이퍼로지 */
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

/* 핑크퐁 */
@font-face {
  font-family: 'PinkfongBabyShark';
  src: url('../fonts/Pinkfong Baby Shark Font_ Light.ttf') format('truetype');
  font-weight: 300;
  /* Light */
}

@font-face {
  font-family: 'PinkfongBabyShark';
  src: url('../fonts/Pinkfong Baby Shark Font_ Regular.ttf') format('truetype');
  font-weight: 400;
  /* Regular */
}

@font-face {
  font-family: 'PinkfongBabyShark';
  src: url('../fonts/Pinkfong Baby Shark Font_ Bold.ttf') format('truetype');
  font-weight: 700;
  /* Bold */
}

/* 집토끼(블랙) */
@font-face {
  font-family: 'HSJiptokki';
  src: url('../fonts/HSJiptokki-Black.ttf') format('truetype');
  font-weight: 900;
}

:root {
  /* 폰트패밀리 */
  --ff_paperozi: 'Paperozi', sans-serif;
  --ff_pinkfong-baby-shark: 'PinkfongBabyShark', sans-serif;
  --ff_hSJiptokki: 'HSJiptokki', sans-serif;

  /* 폰트 굵기 */
  --fw_light: 300;
  --fw_regular: 400;
  --fw_medium: 500;
  --fw_semi-bold: 600;
  --fw_bold: 700;
  --fw_black: 900;

  /* 폰트 사이즈 */
  --fs_16: 16px;
  --fs_18: 18px;
  --fs_20: 20px;
  --fs_24: 24px;
  --fs_28: 28px;
  --fs_32: 32px;
  --fs_40: 40px;
  --fs_60: 60px;
  --fs_180: 180px;

  /* 컬러 */
  --c_black: #585858;
  --c_white: #FFFFFF;
  --c_pink: #FEF5F5;
  --c_dep-pink: #FFDADB;
  --c_pink-brown: #976868;
  --c_pink-gray: #E9DBDB;
  --c_red: #FE7F7F;
}



/* Header */
#header {
  padding: 0 30px;

  border-bottom: 6px solid var(--c_pink-brown);

  background: var(--c_white);
  position: fixed;
  width: 100%;
  z-index: 999999;
}

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

/* Logo */
#header .logo {
  width: 88px;
}

#header .logo img {
  width: 100%;
  height: auto;
}

/* my-email-address */
#header .my-email-address {
  user-select: all;
  /* 클릭하면 전체 선택 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#header .my-email-address span {
  font-family: var(--ff_pinkfong-baby-shark);
  font-weight: var(--fw_bold);
  font-size: var(--fs_28);
}

/* Navigation */
#header .nav {
  font-family: var(--ff_pinkfong-baby-shark);
  font-weight: var(--fw_bold);
  font-size: var(--fs_28);
}

#header .nav .gnb {
  display: flex;
  gap: 20px;
}

#header .nav .gnb .lnb {
  transition: .5s;
}

#header .nav .gnb .lnb:hover {
  color: var(--c_pink-brown);
}

#header .nav-icon-mb {
  display: none;
}

#header .nav-mb {
  display: none;
}

/* Main visual */
.main-visual-section {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 25px;
  background-image: url(../images/main-visual-background.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 900px;
  padding-top: 175px;
}

.main-visual-section .visual-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 1200px;
  height: 500px;
  border-radius: 500px;
  border: 1px solid var(--c_pink-gray);

  background: var(--c_white);
}

.main-visual-section .visual-typing-text {
  font-family: var(--ff_pinkfong-baby-shark);
  font-size: var(--fs_180);
  font-weight: var(--fw_bold);
  color: var(--c_dep-pink);
  position: relative;
}

.main-visual-section .visual-typing-text::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 3px;
  height: 50%;
  background: var(--c_dep-pink);
  display: inline-block;
  animation: blink 0.7s infinite;
}

@keyframes blink {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.main-visual-section .visual-content .visual-deco {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

/* 딸기 */
.main-visual-section .visual-content .visual-deco .deco-strawberry {
  width: 150px;
  height: 142px;
  background-image: url(../images/main-visual-strawberry.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* 토끼 */
.main-visual-section .visual-content .visual-deco .deco-rabbit {
  width: 164px;
  height: 155px;
  background-image: url(../images/rabbit.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* 눈 감고있는 토끼 */
.main-visual-section .visual-content .visual-deco .deco-rabbit .eye {
  width: 164px;
  height: 155px;
  background-image: url(../images/rabbit-eye.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 1;
  z-index: 2;

  animation: blink;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.35s;
  animation-fill-mode: none;
}

/* 데코 키프레임 애니메이션 */
/* 기본 상태: 등장 애니메이션 */
.main-visual-section .visual-content .visual-deco>div {
  opacity: 0;
}

/* 순차 등장 - html 기준 */

/* 딸기 */
.main-visual-section .visual-content .visual-deco .deco-strawberry.strawberry1 {
  animation:
    popShow 1.3s steps(1, end) 0s forwards,
    shake 4s ease-in-out 2.7s infinite;
}

/* 딸기 */
.main-visual-section .visual-content .visual-deco .deco-strawberry.strawberry2 {
  animation:
    popShow 1.3s steps(1, end) 0.4s forwards,
    shake 4s ease-in-out 2.7s infinite;
}

/* 딸기 */
.main-visual-section .visual-content .visual-deco .deco-strawberry.strawberry3 {
  animation:
    popShow 1.3s steps(1, end) 0.8s forwards,
    shake 4s ease-in-out 2.7s infinite;
}

/* 토끼 */
.main-visual-section .visual-content .visual-deco .deco-rabbit {
  animation: popShow 1.3s steps(1, end) 1.2s forwards;
}

/* 딸기 */
.main-visual-section .visual-content .visual-deco .deco-strawberry.strawberry4 {
  animation:
    popShow 1.3s steps(1, end) 1.6s forwards,
    shake 4s ease-in-out 2.7s infinite alternate;
}

/* 키프레임 정의 */
@keyframes popShow {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
    transform-origin: bottom;
  }

  10% {
    transform: rotate(-3deg);
    transform-origin: bottom;
  }

  30% {
    transform: rotate(3deg);
    transform-origin: bottom;
  }

  50% {
    transform: rotate(-3deg);
    transform-origin: bottom;
  }

  70% {
    transform: rotate(3deg);
    transform-origin: bottom;
  }

  90% {
    transform: rotate(-2deg);
    transform-origin: bottom;
  }

  100% {
    transform: rotate(0deg);
    transform-origin: bottom;
  }
}

@keyframes blink {

  0%,
  80%,
  100% {
    opacity: 0;
  }

  85%,
  95% {
    opacity: 1;
  }
}

/* 태그 */
.main-visual-section .visual-tag {}

.main-visual-section .visual-tag .visual-tag-list {
  display: flex;
  gap: 20px;
}

.main-visual-section .visual-tag .visual-tag-item {
  font-family: var(--ff_pinkfong-baby-shark);
  font-size: var(--fs_24);
  font-weight: var(--fw_bold);

  width: 140px;
  height: 50px;

  background: var(--c_white);
  border-radius: 50px;
  border: 1px solid var(--c_pink-gray);

  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 50px;
}

.main-visual-section .visual-tag .visual-tag-item span {
  color: var(--c_pink-brown);
  text-align: center;
}

.main-visual-section .scroll-down {
  display: none;
}

/* About me */
.about-me-section {
  background-image: url(../images/about-me-background.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 100px 0;
}

.about-me-section .main-title {
  width: 425px;
  height: 140px;
  background-image: url(../images/about-me-title.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 auto 100px auto;
}

.about-me-section .wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.about-me-section .area {}

.about-me-section .area.front {
  width: 350px;
}

.about-me-section .area.back {
  display: grid;
  grid-template-columns: 550px 550px;
  grid-gap: 100px;
}

/* 프로필 박스 */
.about-me-section .profile-photo {
  width: 350px;
  height: 450px;
  object-fit: contain;
}

.about-me-section .profile-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
  margin-top: 30px;
  border-top: 2px solid var(--c_dep-pink);
}

.about-me-section .profile-info {
  font-size: var(--fs_28);
  font-weight: var(--fw_medium);
  color: var(--c_pink-brown);
}

.about-me-section .profile-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.about-me-section .profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  width: fit-content;
  cursor: pointer;
}

.about-me-section .profile-item::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  background: var(--c_red);
  left: 0;
  bottom: -5px;
  border-radius: 5px;
  transition: .3s;
  transform: translateX(50px);
}

.about-me-section .profile-item:hover::after {
  width: calc(100% - 50px);
}


.about-me-section .profile-item-icon {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 40px;
  height: 40px;
}

.about-me-section .profile-item-icon.email {
  background-image: url(../images/email-icon.svg);
}

.about-me-section .profile-item-icon.github {
  background-image: url(../images/github-icon.svg);
}

.about-me-section .profile-item-icon.resume {
  background-image: url(../images/resume-icon.svg);
}


.about-me-section .profile-text {
  font-size: var(--fs_20);
  font-weight: var(--fw_regular);
  transition: .4s;
}

.about-me-section .profile-item:hover .profile-text {
  color: var(--c_red);
}

/* back 박스들 */
.about-me-section .text-box {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.about-me-section .text-box .sub-title {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 3px solid var(--c_dep-pink);
}

.about-me-section .sub-title .en {
  font-family: var(--ff_hSJiptokki);
  font-size: var(--fs_60);
  font-weight: var(--fw_black);
  color: var(--c_pink-brown);
}

.about-me-section .sub-title .ko {
  font-family: var(--ff_paperozi);
  font-size: var(--fs_20);
  font-weight: var(--fw_medium);
  color: var(--c_pink-brown);
}

/* 소개 박스 */
.about-me-section p {
  font-size: var(--fs_24);
  font-weight: var(--fw_regular);
  line-height: 1.5;
}

/* 학력사항, 경력사항 박스 */
.about-me-section .item-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.about-me-section .items {
  display: flex;
  align-items: center;
  gap: 10px;
}

.about-me-section .item-text {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.about-me-section .item-text-wrap {
  display: flex;
  justify-content: space-between;
  width: 55%;
}

.about-me-section .items span {
  font-size: var(--fs_20);
  font-weight: var(--fw_regular);
}

.about-me-section .item-icon {
  width: 30px;
  height: 34px;
  background-image: url(../images/strawberry-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 소프트웨어 박스 */
.about-me-section .software-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}



/* Skill */
.skill-section {
  padding: 100px 0;
}

.skill-section .main-title {
  width: 263px;
  height: 140px;
  background-image: url(../images/skill-title.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 auto 100px auto;
}

.skill-section .skill-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 35px;
  grid-row-gap: 30px;
  justify-content: space-between;
}

.skill-section .skill-list .skill-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  border: 2px solid var(--c_pink-gray);
  border-radius: 20px;
  padding: 30px;
  transition: .3s;
}

.skill-section .skill-list .skill-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.skill-section .skill-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.skill-section .skill-text .skill-tag {
  width: fit-content;
  height: 33px;
  border-radius: 50px;
  background: var(--c-pink);
  border: 2px solid var(--c_red);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 15px;
  margin-bottom: 10px;
}

.skill-section .skill-tag .item-icon {
  width: 17px;
  height: 20px;
  background-image: url(../images/strawberry-icon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.skill-section .skill-tag span {
  font-size: var(--fs_18);
  font-weight: var(--fw_medium);
  color: var(--c_pink-brown);
}

.skill-section .skill-text p {
  font-size: var(--fs_24);
  font-weight: var(--fw_light);
}

.skill-section .skill-icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

/* Project list */
.project-list-section {
  background: var(--c_pink);
  padding: 100px 0;
}

.project-list-section .main-title {
  width: 574px;
  height: 147px;
  background-image: url(../images/project-list-title.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 auto 100px auto;
}

.project-list-section .project-filter-list {
  display: flex;
  justify-content: space-between;
}

.project-list-section .filter-group {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.project-list-section .filter-item {
  display: flex;
}

.project-list-section .input {}

.project-list-section input:checked+.filter-btn .check {
  display: block;
}

.project-list-section .filter-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.project-list-section .filter-box {
  width: 33px;
  height: 33px;
  flex-shrink: 0;
  position: relative;
  display: flex;
}

.project-list-section .check {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.project-list-section .filter-name {
  font-size: var(--fs_28);
  font-weight: var(--fw_semi-bold);
}


/* 프로젝트 리스트 */
.project-list-section .project-card-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 55px;
}

.project-list-section .project-card {
  background: var(--c_white);
  border: 2px solid var(--c_pink-gray);

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  width: 100%;
}

/* 프로젝트 비주얼 영역 */
.project-list-section .project-visual-area {
  width: 700px;
  height: 500px;
}

.project-list-section .project-visual-area img {
  width: 100%;
  height: 100%;
}

/* 프로젝트 콘텐츠 영역 */
.project-list-section .project-content-area {
  width: 700px;
  height: 370px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-list-section .project-title {
  font-size: var(--fs_40);
  font-weight: var(--fw_bold);
}

.project-list-section .br-mb {
  display: none;
}

/* 프로젝트 태그 리스트 */
.project-list-section .project-tag-list {
  display: flex;
  gap: 10px;
}

.project-list-section .project-tag-item {
  background: var(--c_red);
  color: var(--c_white);
  font-size: var(--fs_16);
  font-weight: var(--fw_medium);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50px;
}

.project-list-section .project-desc {
  font-size: var(--fs_24);
  font-weight: var(--fw_light);
}

/* 프로젝트 링크 리스트 */
.project-list-section .project-link-list {
  display: flex;
  gap: 10px;
}

.project-list-section .project-link-item {
  width: 150px;
  height: 50px;
  background: var(--c_white);
  border: 2px solid var(--c_pink-brown);
  border-radius: 50px;
  padding-right: 30px;
  transition: .4s;
  cursor: pointer;
}

.project-list-section .project-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-list-section .project-link-item:hover {
  background: var(--c_pink-brown);
}

.project-list-section .project-link-item:hover .project-link-name {
  color: var(--c_white);
}

.project-list-section .project-link-icon {
  transform: translateX(-2px);
}

.project-list-section .project-link-name {
  font-size: var(--fs_20);
  font-weight: var(--fw_regular);
  color: var(--c_pink-brown);
  transition: .4s;
}

/* footer */
.footer-section {
  background: url(../images/footer-section-background.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 100px 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-section .content-box {
  width: 1200px;
  height: 500px;
  background: var(--c_white);
  border-radius: 500px;

  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 80px;
}

.footer-section .content-box-text {}

.footer-section .footer-title {
  font-size: var(--fs_32);
  font-weight: var(--fw_semi-bold);
  margin-bottom: 40px;
}

.footer-section .footer-arrow-wrap {
  display: none;
}

.footer-section .footer-email {
  font-size: var(--fs_60);
  font-weight: var(--fw_bold);
  margin-bottom: 30px;
}

.footer-section .footer-desc {
  font-size: var(--fs_24);
  font-weight: var(--fw_regular);
  margin-bottom: 10px;
}

.footer-section .send-email-link {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  width: fit-content;
}

.footer-section .send-email-link:hover .send-email-text::after {
  width: 100%;
}

.footer-section .send-email-link:hover .send-email-text {
  color: var(--c_red);
}

.footer-section .send-email-text {
  font-size: var(--fs_24);
  font-weight: var(--fw_regular);
  position: relative;
  transition: .4s;
}

.footer-section .send-email-text::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  background: var(--c_red);
  left: 0;
  bottom: -5px;
  border-radius: 5px;
  transition: .4s;
}

.footer-section .send-email-icon {
  background: url(../images/footer-section-send-email-icon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 30px;
  height: 30px;
}

.content-box-character-mb {
  display: none;
}

.footer-section .content-box-character {
  background: url(../images/footer-section-character.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 265px;
  height: 342px;
}