@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Varela+Round&display=swap');
/* header.css */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
a, a:link, a:visited{
  color:inherit;
  text-decoration:none;
}
li{
  list-style:none;
}
.container{
  max-width:1140px;
  width:100%;
  margin:0 auto;
  padding:0 20px;
}
header{
  position:fixed;
  color:white;
  top:0;
  z-index:10;
  width:100%;
  padding:1rem;
}
header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
}
header nav ul{
  display:flex;
}
header nav ul li{
  padding:10px;
}
header button{
  background: transparent;
  border:0;
  cursor: pointer;
  color:white; 
}
header h1 button{
  font-size: 2rem;
  font-weight: bold;
}
header nav ul li button{
  font-size: 1.2rem;
}
/* End header.css */
/* main.css */
main{
  width:100%;
  height:100vh;
  color:white;
  background:linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8));

  /* background-size:cover; */
  background-size:contain; /* 이미지가 요소의 너비와 높이에 맞게 조정되지만, 이미지의 비율은 유지됩니다. */
  background-position: center center; /* 이미지가 요소의 중앙에 위치하도록 설정 */
  background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
  background-color: black;

  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  transition: background-image 1s ease-in-out; /* 배경이 바뀔 때 부드럽게 전환 */
  filter: grayscale(100%) /* 이미지에 흑백 효과 적용 */
}
main h4{
  font-size:4.0rem;
}
main h2{
  font-size: clamp(1rem, 4.5vw, 2.5rem); /* 화면이 좁아지면 글자 크기도 줄여서 한 줄 유지 */
  margin:2rem 0;
  letter-spacing:3px;
  font-family:'Varela Round', sans-serif; /* 웹 폰트 추가 */
  white-space: nowrap; /* 타이핑 텍스트가 길어도 한 줄로 유지 */
}
main p{
  max-width:500px;
  margin:0 auto;
  font-size:1.25rem;
}
main button.download{
  background-color:transparent;
  border:3px solid white;
  border-radius:20px;
  padding:1rem 2rem;
  margin-top:3rem;
  color:white;
  font-weight:bold;
  cursor:pointer;
}
main button.mouse{
  background-color:transparent;
  border:none;
  color:white;
  font-size:2rem;
  position:absolute;
  bottom:1rem;
  left:50%;
  transform:translateX(-50%);
  animation:upDown 1s ease-in-out infinite;
  cursor:pointer;
}
@keyframes upDown{
  0%{
    bottom:1rem;
  }
  50%{
    bottom:1.5rem;
  }
  100%{
    bottom:1rem;
  }
}
main h2 span::after{
  content:"";
  height:40px;
  width:3px;
  background-color:#fff;
  display:inline-block;
  animation: blink .7s ease-in-out infinite;
}
@keyframes blink {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

/* about_me.css */
section{
  font-family:'Poppins', sans-serif;
  padding:5rem 0;
}
section:nth-child(2n){
  background-color:#f8f8f8;
}
section .title{
  margin-bottom:3rem;
}
section .title h4{
  font-size:1.35rem;
  color:#ed4848;
  position:relative;
}
section .title h2{
  font-size:3.5rem; 
}
section .title p{
  font-size:1.15rem;
}
section .about-self {
  display: flex;          /* Flexbox 활성화 (안드로이드의 LinearLayout Orientation='horizontal' 느낌) */
  align-items: center;    /* 수직 중앙 정렬 (내용물이 위아래 중앙에 오게 함) */
  justify-content: center; /* 가로 중앙 정렬 */
  gap: 7rem;              /* 이미지와 글자 사이의 간격을 직접 조절 (너무 멀면 이 값을 줄이세요) */
}
/* float 속성 해제 */
section .about-self::after{
  display: none; /* float 속성 제거 */
}
/* 본문 너비 절반 지정 & 왼쪽 배치 */
section .about-self .left{
  width:auto; /* 너비 자동 조절 */
  float:none; /* float 속성 제거 */
}
/* 이미지 크기가 부모 영역을 넘지 않도록 부모 영역의 최대 크기로 지정 */
section .about-self .left img{
  max-width:100%;
  max-height: 370px; /* 이미지의 최대 높이를 370px로 제한 */
  object-fit: cover; /* 이미지가 부모 요소를 완전히 채우도록 설정 */
  object-position: top; /* 이미지의 상단이 부모 요소의 상단에 맞춰지도록 설정 */
  display: block; /* 이미지가 줄 바꿈 없이 블록 요소로 표시되도록 설정 */
}
/* 본문 너비 절반 지정 & 오른쪽 배치 */
section .about-self .right{
  width:fit-content; /* 글자 크기에 맞게 너비 자동 조절 */
  float:none; /* float 속성 제거 */
  padding:0;
}
/* 본문 오른쪽 h3 태그의 글자 크기와 여백 지정 */
section .about-self .right h3{
  font-size:2.25rem;
  margin-bottom:1rem;
}
/* 자기소개 중간 문장이 길어도 줄바꿈 없이 한 줄로 표시되도록 화면 너비에 맞춰 축소 */
section .about-self .right h3:nth-of-type(2){
  font-size: clamp(0.85rem, 3.6vw, 2.25rem);
  white-space: nowrap;
}
/* 본문 오른쪽 h3 태그의 strong 태그 색상 강조 */
section .about-self .right h3 strong{
  color:#ed4848;
}
/* 본문 오른쪽 p 태그의 크기와 여백 지정 */
section .about-self .right p{
  font-size:1.1rem;
  margin:1rem 0;
  word-break: keep-all; /* 단어(어절) 중간에서 줄바꿈되지 않도록 함 */
  text-wrap: pretty; /* 마지막 한두 글자만 외로이 다음 줄로 넘어가는 현상 방지 (지원 브라우저 한정) */
}
/* 아이콘들을 세로 중앙 기준으로 정렬 */
section .about-self .right .social{
  display: flex;
  align-items: center;
}
/* 본문 오른쪽의 아이콘 폰트 크기와 여백 지정 */
section .about-self .right .social a{
  font-size:3rem;
  margin-right:0.2rem;
  display: flex;
  align-items: center;
}
/* velog 아이콘 이미지를 github/notion 폰트 아이콘과 같은 크기로 맞춤 */
section .about-self .right .social img{
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}
/* 캡션 내부 태그들을 감싸는 컨테이너 */
section.portfolio .portfolio-caption .tags {
  display: flex;
  flex-wrap: wrap;       /* 태그가 많아지면 다음 줄로 넘어가게 함 */
  justify-content: start;
  gap: 8px;              /* 태그 사이 간격 */
  padding: 0 10px;
}
/* 개별 태그(Badge) 스타일 */
section.portfolio .portfolio-caption span {
  background-color: #fff;       /* 하얀색 배경 */
  color: #313131;               /* 현재 상자 배경색과 동일한 글씨색 */
  padding: 5px 12px;            /* 태그 안쪽 여백 */
  border-radius: 100px;          /* 둥글둥글한 곡률 처리 */
  font-size: 0.9rem;            /* 글자 크기 살짝 조정 */
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 살짝 입체감 주는 그림자 (선택사항) */
  display: inline-block;
  transition: transform 0.2s ease;
}
/* 태그에 마우스를 올렸을 때 살짝 커지는 효과 */
section.portfolio .portfolio-caption span:hover {
  transform: scale(1.1);
}
/* End about_me.css */

/* what_i_do.css */
/* What I Do 컨테이너를 Flex박스로 변경 */
section .do-me {
  display: flex;
  flex-wrap: wrap;       /* 자식 요소들이 넘치면 다음 줄로 넘어가게 함 */
  gap: 20px;             /* 아이템 사이의 간격 (안드로이드의 itemDecoration 느낌) */
  justify-content: flex-start;
}

/* 각각의 아이템(카드) 설정 */
section .do-me .do-inner {
  background-color: #fff;
  /* 3열로 만들기: 전체 100%에서 간격(gap)을 제외한 뒤 3으로 나눕니다. */
  width: calc((100% - 40px) / 3); 
  padding: 2rem;
  cursor: pointer;
  transition: all 0.3s ease; /* 호버 효과를 위해 추가 */
  margin-right: 0; /* 기존 float용 마진 제거 */
  margin-bottom: 20px;
}

/* float 해제용 가상 요소는 이제 필요 없으므로 제거 */
section .do-me::after {
  display: none;
}
/* 아이콘 폰트 크기와 색상 */
section .do-me .do-inner .icon i{
  font-size:2.5rem;
  color:#ff6a6a;
}
/* HTML5, CSS3, BootStrap v5.0 텍스트 크기와 간격 */
section .do-me .do-inner .content h3{
  font-size:2rem;
  margin:1rem 0;
}
/* 사각형 텍스트 크기 */
section .do-me .do-inner .content p{
  font-size:1.15rem;
}
/* do-inner 클래스에 마우스를 올리면 배경색과 텍스트 색상 변경 */
section .do-me .do-inner:hover{
  background-color:lightcoral;
  color:white;
}
/* do-inner 클래스에 마우스를 올리면 아이콘 폰트 색상 변경 */
section .do-me .do-inner:hover i{
  color:white;
}
/* End what_i_do.css */
/* background.css */
.bg{
  background:url('./images/me5.jpg') center center;
  background-size:cover;
  background-attachment:fixed;
  height:650px;
}
/* End background.css */
/* portfolio.css */
/* clear 속성으로 float 속성값 해제*/
section.portfolio::after{
  content:"";
  display:block;
  clear:both;
}

section.portfolio .portfolio-me{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

/* portfolio-inner 사각형 꾸미기 */
section.portfolio .portfolio-inner{
  width:calc(33.333% - 14px);
  margin-right:0;
  padding:0;
  float:none;
  background-color:#f8f8f8;
  margin-bottom:3rem;
  overflow: hidden;
  position: relative;
}

/* --- 마우스 호버 효과를 위한 추가 코드 --- */

/* 움직일 내용물 전체를 감싸는 아이템 */
section.portfolio .portfolio-item {
  width: 100%;
  height: 100%;
  padding: 1rem; /* 안쪽 여백 */
}
/* 본문 내용물(이미지, 앱, 제목)만 따로 묶어서 움직이게 설정 */
section.portfolio .portfolio-item img,
section.portfolio .portfolio-item strong,
section.portfolio .portfolio-item h3 {
  transition: transform 0.5s ease-in-out;
  position: relative;
  z-index: 1; /* 글자가 파란 상자 뒤에 안 가려지도록 */
}
/* 마우스를 올렸을 때 전체 박스가 아닌 '본문 알맹이들'만 오른쪽으로 70% 밀어냄 */
section.portfolio .portfolio-inner:hover .portfolio-item img,
section.portfolio .portfolio-inner:hover .portfolio-item strong,
section.portfolio .portfolio-inner:hover .portfolio-item h3 {
  transform: translateX(70%);
}


/* 이미지의 크기가 부모 요소를 넘지 않도록 100%로 지정 */
section.portfolio .portfolio-inner img{
  width:50%;
  max-width: 200px; /* 이미지의 최대 너비를 200px로 제한 */
  height: auto; /* 이미지의 높이는 자동으로 조절 */
  top: -10px; /* 이미지가 위로 10px 이동하여 중앙에 위치하도록 조정 */
  display:block;
  margin: 0 auto;
  transition: transform 0.5s ease; /* 이미지도 살짝 움직이게 설정 */
}
/* 정보창(Caption) 초기 상태 (왼쪽 밖으로 밀어둠) */
section.portfolio .portfolio-caption {
  position: absolute;
  top: 0;
  left: -70%;         /* 왼쪽 밖으로 완전히 밀어둠 */
  width: 70%;
  height: 100%;
  background-color: rgba(49, 49, 49, 0.9);
  color: #fff;

  display: flex;
  flex-direction: column; /* 태그는 위에 날짜는 아래에 */
  justify-content: space-between; /* 날짜 텍스트는 위쪽에, 나머지 태그들은 아래쪽에 배치 */
  align-items: flex-start; /* 날짜 텍스트는 중앙 정렬 */

  transition: left 0.5s ease-in-out;
  z-index: 2;
  padding: 1.2rem 0.3rem;
}

/* 기술 스택 태그 영역 */
section.portfolio .portfolio-caption .tags {
display: flex;
  flex-wrap: wrap;       /* 줄바꿈 허용 */
  gap: 0.4rem;           /* 간격 */
  width: 100%;           /* 너비 꽉 채우기 */
  justify-content: flex-start;
  align-content: flex-start; /* 줄 사이 간격 밀착 */
}
/* 개별 태그(span) - 핵심은 'flex' 속성입니다 */
section.portfolio .portfolio-caption .tags span {
  display: inline-block;
  background-color: #fff;
  color: #313131;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 12px;
  text-align: center;
  padding: 5px 0;

  /* 한 줄에 2개를 넣는 '마법의 계산식' */
  /* (전체 100% / 2개) - (간격 0.4rem) */
  flex: 0 0 calc(50% - 0.2rem); 
  
  /* 글자 길어도 뚫고 나가지 않게 방어 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 글씨가 긴 태그는 폰트 크기를 줄여서 잘리지 않게 함 */
section.portfolio .portfolio-caption .tags span.tag-long {
  font-size: 0.65rem;
}
/* 날짜 텍스트 */
section.portfolio .portfolio-created {
  text-align: center;     /* 글자 자체를 중앙 정렬 */
  width: 100%;            /* 100%를 줘야 박스 중앙에 글자가 옵니다. */
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 0.5rem;
  margin-top: auto;       /* 위쪽 태그가 적어도 날짜는 항상 바닥에 붙게 함 */
}
/* 스토어 링크 (출시된 앱만) */
section.portfolio .portfolio-created a.store-link{
  display:block;
  margin-bottom:0.3rem;
  font-size:0.9rem;
  font-weight:bold;
  color:#ff6a6a;
}
section.portfolio .portfolio-created a.store-link:hover{
  text-decoration:underline;
}
section.portfolio .portfolio-created span{
  display:block; /* span이 인라인 요소이므로 block으로 변경하여 margin-top: auto가 제대로 작동하도록 함 */
  color: #fff;
  background-color: rgba(49, 49, 49, 0.9);
  border-radius: 0;
}


/* 마우스를 올렸을 때 파란 상자는 왼쪽(0) 벽에 딱 붙음 */
section.portfolio .portfolio-inner:hover .portfolio-caption {
  left: 0;
}
section.portfolio .portfolio-item img {
  width: 100%;
  display: block;
}

/* 캡션 내부 텍스트 색상 강제 지정 (배경이 파란색이므로) */
section.portfolio .portfolio-caption h3,
section.portfolio .portfolio-caption strong {
  color: white !important;
  margin: 5px 0;
}

/* strong 태그 색상과 간격 */
section.portfolio .portfolio-inner strong{
  color:#ff6a6a;
  margin:0.5rem 0;
  display:block;
}
/* h3 태그 색상과 간격 */
section.portfolio .portfolio-inner h3{
  font-size:1.75rem;
}

/* 노션 부분 밀려나는 효과 제거 (기존 애니메이션 무효화) */
section.portfolio .portfolio-inner.no-slide:hover .portfolio-item img,
section.portfolio .portfolio-inner.no-slide:hover .portfolio-item strong,
section.portfolio .portfolio-inner.no-slide:hover .portfolio-item h3 {
  transform: translateX(0); /* 밀리지 않고 제자리에 고정 */
}

/* 2. 파란/검은 상자(Caption) 안 나오게 하기 (선택 사항) */
section.portfolio .portfolio-inner.no-slide:hover .portfolio-caption {
  display: none; /* 이 카드는 캡션이 옆에서 안 나오게 함 */
}

/* 3. What I Do 섹션처럼 호버 시 배경색/글자색 변경 */
section.portfolio .portfolio-inner.no-slide {
  transition: all 0.3s ease; /* 부드러운 전환 */
  cursor: pointer; /* 마우스 커서 변경 */
}

section.portfolio .portfolio-inner.no-slide:hover {
  background-color: rgba(49, 49, 49, 0.9); /* What I Do와 동일한 색상 */
  color: white !important;      /* 글자색 하얗게 */
}

/* 호버 시 내부 텍스트(strong, h3) 색상 강제 변경 */
section.portfolio .portfolio-inner.no-slide:hover strong,
section.portfolio .portfolio-inner.no-slide:hover h3 {
  color: white !important;
}

/* End portfolio.css */
/* contact_with_me.css */

/* 컨테이너를 가로 정렬(Row)로 변경 */
section.contact .contact-me {
  display: flex;
  justify-content: space-between; /* 카드들 사이 간격을 일정하게 */
  gap: 20px;                     /* 카드 사이의 여백 */
  flex-wrap: wrap;               /* 화면 좁아지면 아래로 내려가게 */
}

section.contact .contact-me::after{
  display: none; /* float 해제용 가상 요소 제거 */
}

section.contact .contact-me .left{
  display: flex;
  width:100%;
  justify-content: space-between; /* 카드들 사이 간격을 일정하게 */
  gap: 1.5rem; /* 카드 사이의 여백 */
}
section.contact .contact-me .right{
  float:left;
  width:65%;
  margin-left:5%;
}
section.contact .contact-me .left .card{
  /* 3등분 하기: (100% / 3)에서 간격을 뺀 만큼 */
  flex: 1;                       /* 균등하게 너비를 나눠 가짐 (안드로이드 weight=1 느낌) */
  border: 1px solid #ccc;
  padding: 1.5rem;
  display: flex;
  align-items: center;           /* 중앙 정렬 */
  text-align: center;
  margin-bottom: 0;              /* 가로 정렬이므로 아래 여백 제거 */
  background-color: #fff;
  transition: transform 0.3s ease; /* 호버 시 살짝 커지는 효과 */
  flex-direction: column;        /* 아이콘이 위, 텍스트가 아래로 오게 (취향껏 선택) */
  justify-content: center;       /* 아이콘과 텍스트가 모두 중앙에 오도록 */
  max-width: 350px; /* 카드의 최대 너비를 제한하여 너무 커지는 것을 방지 */
}
section.contact .contact-me .left .card .icon i{
  font-size:2rem;
  margin-right:15px;
}

section.contact .contact-me .left .card .info-text h3 {
  margin-bottom: 8px;
}

section.contact .contact-me .right{ 
  float:left;
  width:65%;
  margin-left:5%;
  margin-bottom:2rem;
  border:1px solid #ccc;
  padding:1rem;
}
/* form-group 사이 간격 지정 */
section.contact .contact-me .right .form-group{
  margin-bottom:1.25rem;
}
/* label 태그가 인라인 성격이어서 외부 여백을 적용하기 위해 block으로 변경 */
section.contact .contact-me .right .form-group label{
  display:block;
  margin-bottom:0.85rem;
}
/* input 요소 꾸미기 */
section.contact .contact-me .right .form-group input{
  padding:0.625rem;
  width:100%;
  outline:none;
  border:1px solid #ccc;
  border-radius:10px;
}
/* :focus 가상 클래스 선택자로 입력 요소에 커서가 활성화되면 파란색 테두리와 그림자 효과 추가 */ 
section.contact .contact-me .right .form-group input:focus{
  border:1px solid #719ECE;
  box-shadow:0 0 10px #719ECE;
}
/* textarea 요소 꾸미기 */
section.contact .contact-me .right .form-group textarea{
  height:300px;
  width:100%;
  resize:none;
  border:1px solid #ccc;
  border-radius:10px;
}
/* textarea 요소에 커서 활성화가 되면 파란색 테두리와 그림자 효과 추가 */
section.contact .contact-me .right .form-group textarea:focus{
  outline:none;
  border:1px solid #719ECE;
  box-shadow:0 0 10px #719ECE;
}
/* 버튼 요소 꾸미기 */
section.contact .contact-me .right button{
  width:100%;
  padding:1rem;
  background-color:#f78b00;
  border:none;
  color:white;
}

/* End contact_with_me.css */
/* media.css */
@media screen and (max-width: 1140px){

  /* 메인 container 기준 1140 -> 992px */
  main .container{
    width: 992px;
  }
  
  /* 섹션 container 기준 1140 -> 600px */
  section .container{
    width:600px;
  }

  /* About me 영역 왼쪽을 너비를 50% -> 100% 변경 */
  section .about-self .left{
    width:100%;
    margin-bottom: 1.5rem;
  }
  /* About me 영역 오른쪽 너비를 50% -> 100% 변경 */
  section  .about-self .right{
    width:100%;
    padding:0;
  }

  /* What I Do 영역의 콘텐츠 박스의 너비를 30% -> 48% 변경 */
  section .do-me .do-inner{
    width:48%;
    margin-bottom: 1.5rem;
    margin-right: 0;
  }

  section .do-me .do-inner:nth-child(2n+1){
    margin-right:4%; /* 1, 3, 5...번째 본문 사각형에 margin-right 4% 적용 */
  }
  
  /* PortFolio 영역의 콘텐츠 박스 너비를 30% ->  48% 변경 */
  section .portfolio-me .portfolio-inner{
    width:48%;
    margin-right: 0;
  }

  section .portfolio-me .portfolio-inner:nth-child(2n+1){
    margin-right:4%;
  }

  /* Contact With Me 영역 */
  section.contact .contact-me .left{
    width:100%; /* 너비 변경 30% -> 100% */
  }
  
  section.contact .contact-me .right{
    width:100%;/* 너비 변경 65% -> 100% */
    margin-left: 0; /* margin 초기화 */
    
  }
}

@media (max-width: 992px){
  html{
    font-size: 15px;
  }

  /* 메인 영역 container 기준 너비 변경 */
  main .container{
    width: 768px; /* 992px -> 768px */
  }

  /* PortFolio 영역 */
  section .portfolio-me .portfolio-inner{
    width:100%; /* 48% -> 100% 변경 */
  } 
}

@media (max-width: 768px){
  html{
    font-size: 14px;
  }
  
  /* 메인 영역 container 기준 너비 변경 */
  main .container{
    width: 576px; /* 768px -> 576px */
  }

  section .container{
    width:400px; /* 600px -> 400px */
  }

  section .do-me .do-inner{
    width:100%; /* 48% -> 100% */
    margin-right: 0; /* margin 초기화 */
  }

  section .about-self{
    flex-direction: column;
    text-align:center;
    gap:2rem;
  }

  section.contact .contact-me .left{
    flex-direction:column;
    height:auto;
  }

  section.contact .contact-me .left .card{
    max-width:100%;
  }

}

@media (max-width: 576px){
  
  html{
    font-size: 12px;
  }

  main .container{
    width: 400px; /* 576px -> 400px */
  }

  section .container{
    width:360px; /* 400px -> 360px */
  }
}

@media (max-width: 400px){
  
  html{
    font-size: 13px;
  }
  main .container{
    width: 320px;/* 400px -> 320px */
  }

  main h4{
    font-size: 1.5rem;
  }
  section .container{
    width: 320px;/* 360px -> 320px */
  }
  section .title h2{
    font-size: 3rem; /* 3.5rem -> 3rem */
  }
}
/* End media.css */
header.active{
  background-color:rgba(0,0,0);
  animation:fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}