html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Roboto", 'Nanum Gothic', sans-serif;
  display: flex;
  color: #1A1D29;
}

h2 {
  font-size: 50px;
}

/* 좌측 사이드 내비게이션 (고정) */
nav {
  width: 250px;
  height: 100vh;
  background-color: #002F6C;
  position: fixed;
  box-sizing: border-box;
}

nav a.logo {
  text-decoration: none;
}

nav h1 {
  font-size: 35px;
  font-weight: bold;
  text-decoration: none;
  margin-top: 30px;
  margin-bottom: 40px;
  margin-left: 30px;
  padding: 20px;
  color: #F3F0E9;
}

nav a.menu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  margin-left: 35px;
  color: #F3F0E9;
  text-decoration: none;
  font-weight: bold;
  font-size: 22px;
  transition: color 0.2s;
}

nav .menu:hover {
    color: #FFA552;
}

nav .material-symbols-outlined{
  font-size: inherit;
  display: inline;
  text-decoration: none;
  color: #FFA552;
}

/* 우측 본문 영역 (스크롤) */
#main {
  margin-left: 250px; /* 네비게이션 너비만큼 띄움 */
  width: calc(100% - 250px);
}

/* 개별 페이지 섹션 */
section {
  min-height: 100vh; /* 화면 1개 높이 차지 */
  box-sizing: border-box;
  background-color: #F3F0E9;
}

/* 인트로 */
#intro-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #002F6C;
}

.intro {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* border: 1px solid red; */
  width: 300px;
  height: 320px;
}

.intro .profile-image {
  width: 170px;
  height: 170px;
  margin-bottom: 1px;
  border-radius: 100%;
  background-image: url("./images/홍건표.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* border: 1px solid red */
}

.intro .profile {
  width: 250px;
  height: 300px;
  text-align: center;
  /* border: 1px solid #e64040; */
}

.intro .profile h1 {
  margin-top: 0px;
  margin-bottom: 7px;
  font-size: 35px;
  /* border: 1px solid red */
}

.intro .swiper {
  /* border: 1px solid red; */
  color: #F3F0E9;
  height: 30px;
  font-size: 18px;
}

.links .github-link {
  display: inline-block;
  text-decoration: none;
}

.links .github-icon {
  width: 30px; 
  height: 30px;
  fill: #F3F0E9;
  transition: fill 0.3s ease; 
}

.links .github-icon:hover {
  fill: #000000;
}

.links .instagram-link {
  display: inline-block;
  text-decoration: none;
  margin-left: 15px;
}

.links .instagram-icon {
  width: 30px;
  height: 30px;
  fill: #F3F0E9;
  transition: fill 0.3s ease;
}

.links .instagram-icon:hover {
  fill: #E1306C;
}

.links .tistory-link {
  display: inline-block;
  text-decoration: none;
  margin-left: 15px; 
}

.links .tistory-icon {
  width: 30px;  
  height: 30px;
  fill: #F3F0E9;  
  transition: fill 0.3s ease;
}

.links .tistory-icon:hover {
  fill: #EB531F;
}

.links .kakao-link {
  display: inline-block;
  text-decoration: none;
  margin-left: 15px; 
}

.links .kakao-icon {
  width: 35px;
  height: 35px;
  fill: #F3F0E9; 
  transition: fill 0.3s ease;
}

.links .kakao-icon:hover {
  fill: #FEE500; 
}