@font-face {
  font-family: 'Charm';
  src: url('./src/font/Charm/Charm-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 기본 설정 */
body {
  font-family: 'Pretendard', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 네비게이션 바 */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 10vh; /* ✅ 상단바 높이 줄임 */
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.navbar-container {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;  
  /* ✅ 원하는 위치 조정 */
  margin-top: 0px;      /* ↑ 위로 이동 */
  margin-left: -30px;     /* ← 왼쪽으로 이동 */
  /* 필요 시 transform 또는 padding도 사용 가능 */
}

.navbar-logo img {
  height: 100px;
}

.navbar-menu ul {
  display: flex;
  gap: 3rem;
  list-style: none;
}

.navbar-menu a {
  text-decoration: none;
  color: #000;
  font-weight: 500;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.navbar-menu a:hover {
  color: #A25BA0;
}

/* Section 1 */
.hero-section {
  background-color: #FFF6FF;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10vh;
  box-sizing: border-box;
}

.hero-content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

/* 프로필 이미지 */
.hero-image {
  flex: 1 1 300px;
  text-align: center;
}

.hero-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
}

/* 텍스트 영역 전체 */
.hero-text {
  flex: 1 1 300px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 타이핑 텍스트 박스 */
.typing-box {
  min-height: 4em; /* h1 높이 고정으로 아래 요소 밀림 방지 */
  margin-bottom: 1.5rem;
}

/* 타이핑 텍스트 스타일 */
.typing-box h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.5;
  margin: 0;
}

/* 각각의 span은 줄바꿈 방지 및 자연스러운 타이핑 지원 */
#part1,
#part2,
#part3,
#part4 {
  display: inline-block;
  white-space: pre;
}

/* 하단 설명 + 버튼 */
.description-box {
  flex-shrink: 0;
}

.description-box p {
  margin-top: 0.8rem;
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  line-height: 1.5;
}

.description-box button {
  margin-top: 0.5rem;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  background-color: black;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.description-box button:hover {
  background-color: white;
  color: black;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 폰트 스타일 */
.pretendard-bold {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
}

.pretendard-black {
  font-family: 'Pretendard', sans-serif;
  font-weight: 900;
  color: #A25BA0;
}

.pretendard-regular {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
}

/* --- 페이드인 효과 --- */
.description-box {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.description-box.fade-in {
  opacity: 1;
}


/* Section 2: About */
.about-section {
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10vh;
  scroll-snap-align: start;
  box-sizing: border-box;
  overflow: hidden; 
}

.about-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: flex-end;
  padding: 2rem;
}

.about-left {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  margin-right: 2.3rem; /* ✅ 사진 오른쪽 여백 조절 */
}

.about-profile {
  width: 100%;
  max-width: 330px;
  height: auto;
  object-fit: contain;
  align-self: flex-end;
}

.about-right {
  align-self: center;
}

.about-name {
  font-size: 2.8rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.pretendard-extrabold {
  font-family: 'Pretendard';
  font-weight: 700;
  color: #000000;
}

.charm-colored {
  font-family: 'Charm';
  color: #A25BA0;
  font-size: 2.5rem;
}

.about-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.4rem;
  position: relative;
}

.about-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: black;
  position: absolute;
  bottom: -0.1rem;
  left: 0;
}

.icon-education {
  height: 28px;
  width: 28px;
}

.icon-work {
  height: 22px;
  width: 22px;
  margin-bottom: 3px;
  margin-left: 2px;
}

.pretendard-semibold {
  font-family: 'Pretendard';
  font-weight: 600;
  font-size: 1.1rem;
}

.pretendard-regular {
  font-family: 'Pretendard';
  font-weight: 400;
}

.colored {
  color: #A25BA0;
  font-size: 1.2rem;
}

.top-space-sm {
  margin-top: 0.3rem; /* 숙명여대 앞 간격 */
}

.top-space-md {
  margin-top: 0.3rem; /* 경력 항목 간격 */
}

.about-content p {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #000000;
  font-family: 'Pretendard';
}

.about-content p:first-of-type {
  margin-top: 0;  /* ✅ 숭실대/WePLAT 단락 위 여백 제거 */
}


/* Section 3: Course */
.course-section {
  height: 100vh;
  background-color: #fff6ff;
  padding-top: 4vh;
  margin-left: 0vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

.course-circle-wrapper {
  position: relative;
  width: 90vw;
  max-width: 1000px;
  aspect-ratio: 2 / 1;
  overflow: visible;
}

.circle-outline {
  width: 100%;
  height: auto;
  display: block;
}

.circle-text {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Pretendard ExtraBold', sans-serif;
  text-align: center;
  color: #000;
}

.circle-text span {
  display: block;
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.4;
}

/* 아이콘 영역 */
.icon-set {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.icon-item {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 20;
  width: auto;
  cursor: pointer;
}

/* 아이콘 이미지 크기 */
.icon-item img {
  width: clamp(80px, 14vw, 220px);
  height: clamp(80px, 14vw, 220px);
}

/* 아이콘 텍스트 wrapper (위치 결정용) */
.icon-text {
  position: absolute;
  white-space: nowrap;
}

/* 좌측에 텍스트 */
.icon-text.left {
  right: 100%;
  margin-right: -30px;
  text-align: center;
}

/* 우측에 텍스트 */
.icon-text.right {
  left: 100%;
  margin-left: -30px;
  text-align: center;
}

/* 상단에 텍스트 */
.icon-text.top {
  bottom: calc(100% - 40px); /* ⬅️ 아이콘과 텍스트 간 거리 줄이기 */
  margin-bottom: 0;
  padding-bottom: 0;         /* 패딩 제거 */
  line-height: 1.2;          /* 줄 간격 줄이기 */
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}

.icon-text-top .label,
.icon-text-top .sub {
  margin: 0;                 /* 여백 제거 */
  padding: 0;
}

.icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* 메인 타이틀 */
.icon-title {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: clamp(0.8rem, 1.4vw, 1.7rem);
  line-height: 1.3;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  display: inline-block;
  text-shadow: 0 0 0.5px rgba(0, 0, 0, 0.3);
}

/* 설명 텍스트 */
.icon-desc {
  font-family: 'Pretendard', sans-serif;
  font-weight: 300;
  font-size: clamp(0.6rem, 1vw, 1rem);
  margin-top: 0.2rem;
  color: #333;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  line-height: 1.4;
}

/* 아이콘 위치 (중심 기준) */
.icon-1 { left: 16.5%; top: 85%; }
.icon-2 { left: 26%; top: 48%; }
.icon-3 { left: 50%; top: 29%; }
.icon-4 { left: 74%; top: 48%; }
.icon-5 { left: 83.5%; top: 85%; }


/* 모달 템플릿 (비활성 상태) */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 2rem;
  border-radius: 10px;
  width: 80%;
  max-width: 500px;
  text-align: center;
}

.modal .close {
  position: absolute;
  top: 1rem;
  right: 2rem;
  font-size: 2rem;
  color: #aaa;
  cursor: pointer;
}

/* Section 4: MSP */
.msp-section {
  height: 100vh;
  padding-top: 10vh;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
}

.msp-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 90vh;
  position: relative;

  width: 100%;             /* ✅ 전체 화면을 채우도록 지정 */
  max-width: 1200px;       /* ✅ (선택) 너무 커지지 않게 제한 */
  margin: 0 auto;          /* ✅ 가로 중앙 정렬 */
  padding: 0 1rem;         /* ✅ 좌우 여백 확보 */
  box-sizing: border-box;
}

/* 타이틀 위치 */
.msp-title-box {
  position: absolute;
  top: 15%;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 아이콘 위치 조절 */
.msp-icons-box {
  position: absolute;
  top: 40%; /* ✅ ← 여기 숫자만 바꾸면 위치 조절 가능 */
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 버튼 위치 */
.msp-button-box {
  position: absolute;
  bottom: 12%; /* 하단에서 5% 위에 표시 */
  width: 100%;
  display: flex;
  justify-content: center;
}

.msp-title {
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.4;
}

.msp-title .extra-bold {
  font-family: 'Pretendard ExtraBold', sans-serif;
}

.msp-title .semi-bold {
  font-family: 'Pretendard SemiBold', sans-serif;
}

/* 아이콘 그리드 */
.msp-icons {
  display: flex;
  gap: 3vw;
  flex-wrap: wrap;
  justify-content: center;
}

.msp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.msp-item img {
  width: clamp(80px, 12vw, 200px);
  height: auto;
}

.msp-item p {
  margin-top: 0.5rem;
  font-family: 'Pretendard Bold', sans-serif;
  font-weight: 700;
  font-size: clamp(0.8rem, 1.6vw, 1.7rem);
}

/* 버튼 */
.msp-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background-color: #A25BA0;
  color: white;
  padding: clamp(0.2rem, 1vw, 0.6rem) clamp(1rem, 1.7vw, 1.2rem);
  border-radius: 0.5rem;

  font-family: 'Pretendard', sans-serif;
  font-weight: 600;

  font-size: clamp(0.4rem, 2vw, 1rem); /* ✅ 텍스트 사이즈 반응형 */
  text-decoration: none;
  transition: background-color 0.2s ease;

  z-index: 10;
}

.msp-button:hover {
  background-color: #8c4b8a;
}

.msp-button img {
  width: 1em;   /* ✅ 텍스트 크기에 따라 같이 변함 */
  height: 1em;
  flex-shrink: 0;
}

/* Section 5: Contents */
#section5 {
  height: 100vh;
  padding-top: 10vh;
  background-color: #fff6ff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.section-title {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 2rem;
}

.tab-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tab-button {
  padding: 0.6rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  cursor: pointer;
  background-color: #fff6ff;
  border: none;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tab-button img {
  height: 1.2rem;
}

.tab-button.active {
  background-color: #ffffff;
  color: black;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.contents-grid {
  display: grid;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  margin-bottom: 0rem;
  width: 100%;
  max-width: 1200px;
  padding: 0 1rem;
  box-sizing: border-box;
}

#content-yt .contents-grid {
  grid-template-columns: repeat(3, 1fr); /* ← 3열 고정 */
  gap: 0rem 1.5rem;
  place-items: center;
}

#content-fc .contents-grid {
  grid-template-columns: repeat(2, 1fr); /* ✅ 2열 고정 */
  place-items: center;                   /* ✅ 가운데 정렬 */
  gap: 1rem;
}

#content-fc .thumbnail {
  width: 85%;           /* ✅ 썸네일이 셀 전체를 다 차지하지 않도록 */
  max-width: 400px;     /* ✅ 원하는 최대 너비 설정 */
}

#content-yt .thumbnail {
  width: clamp(220px, 20vw, 270px); /* ✅ 반응형 + 제한 범위 설정 */
}

.thumbnail {
  height: auto;
  border-radius: 0.75rem;
  transition: transform 0.3s;
  margin: 0 auto;
}

.thumbnail:hover {
  transform: scale(1.03);
}

.hidden {
  display: none;
}

.view-all {
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  color: black;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Contact */
#contact {
  position: relative;
  padding: 10vh 2rem;
  background-color: white;
  text-align: center;
}

#contact h2 {
  font-family: 'Pretendard ExtraBold', sans-serif;
  font-size: 3.5rem;
  color: #874286;
  margin-bottom: 3rem;
}

.contact-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.contact-item {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 2rem;
  box-sizing: border-box;
  cursor: pointer;
}

.contact-item img {
  width: 80px;
  height: 80px;
  margin-bottom: 0.5rem;
}

.contact-item p {
  font-family: 'Pretendard', sans-serif;
  font-size: 1rem;
  color: black;
  word-break: break-word;
  text-align: center;
}

.divider {
  width: 1px;
  height: 80px;
  background-color: #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 600px) {
  .divider {
    display: none;
  }

  .contact-item {
    flex: 1 1 100%;
    padding: 1rem 0;
  }
}

/* SideBar */
.sidebar-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}

.sidebar-icon {
  width: 36px;
  height: 36px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.sidebar-icon:hover {
  transform: scale(1.1);
}

#btn-up:hover {
  content: url("src/sidebar/up_click.png");
}

#btn-contact:hover {
  content: url("src/sidebar/contact_click.png");
}