/* about-hero.css - Upgraded for Light/Dark Mode */

/* --- Main Layout --- */
.about-main {
  margin-top: 8rem;
  margin-bottom: 8rem;
  padding: 0;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
}

/* --- Hero Section --- */
.about-hero {
  display: flex;
  gap: 0;
  align-items: stretch;
  position: relative;
  overflow-x: hidden;
  padding-right: 3vw; 
}

.about-purpose {
  flex: 1 1 0%;
  max-width: 1200px;
  min-width: 140px;
  transition: width 0.2s, opacity 0.22s, filter 0.22s;
}

.about-purpose-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--purpose-font, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  word-break: keep-all;
  margin: 0;
  color: var(--text-tertiary-color); 
  transition: font-size 0.22s cubic-bezier(.51,1.22,.31,1);
  padding-right: 1vw;
}

.purpose-section {
  transition: color 0.2s;
  opacity: 1;
  cursor: var(--cursor-grab2);
  display: inline-block;
  position: relative;
  font-size: inherit;
  margin: 0 0.9em;
  padding-left: 2rem;
}
.purpose-section.hovered {
  color: var(--text-primary-color);
  font-weight: bold;
}  

.swap-hanja,
.swap-hangul,
.swap-roma {
  font-family: inherit;
  color: var(--text-primary-color); 
  font-weight: 900;
  letter-spacing: 0.01em;
}
.swap-hanja { font-size: 0.9em; vertical-align: 0.08em; font-family: 'Noto Serif TC', serif; }
.swap-hangul { font-size: 1.1em; margin-left: 0.04em; vertical-align: 0.15em; font-family: 'East Sea Dokdo', cursive; }
.swap-roma { font-size: 0.76em; font-weight: 700; margin-left: 0.04em; vertical-align: 0.1em; font-family: 'Georgia', 'Times New Roman', serif; }

.swap-word {
  display: inline-block;
  cursor: var(--cursor-grab2);
  transition: opacity 0.28s cubic-bezier(.4,1.2,.56,1);
}

.about-divider {
  width: 5px;
  min-width: 5px;
  background: linear-gradient(to bottom, var(--border-primary-color), var(--border-secondary-color) 50%, var(--border-primary-color));
  cursor: var(--cursor-ew-resize2);
  border-radius: 4px;
  margin: 0 2rem;
  position: relative;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-divider-hitzone {
  position: absolute;
  left: -35px;
  top: 0;
  width: 120px;
  height: 100%;
  cursor: var(--cursor-ew-resize2);
  z-index: 2;
  background: transparent;
}  
.drag-icon {
  position: absolute;
  top: 50%;
  font-size: 1.6rem;
  z-index: 3;
  pointer-events: none;
  opacity: 0.92;
  color: var(--text-tertiary-color); 
  transition: color 0.18s, opacity 0.18s;
}
.drag-icon.left  { left: -35px; animation: icon-bounce-left 1.2s infinite alternate; }
.drag-icon.right { left: 10px;  animation: icon-bounce-right 1.2s infinite alternate; }

@keyframes icon-bounce-left {
  from { transform: translateY(-50%) translateX(0); }
  to   { transform: translateY(-50%) translateX(-9px); }
}
@keyframes icon-bounce-right {
  from { transform: translateY(-50%) translateX(0); }
  to   { transform: translateY(-50%) translateX(9px); }
}
.drag-icon.hide { opacity: 0; pointer-events: none; }

.about-divider:hover .drag-icon { color: var(--text-primary-color); }

.about-divider:hover, .about-divider.dragging {
  background: linear-gradient(to bottom, var(--border-secondary-color), var(--text-tertiary-color) 50%, var(--border-secondary-color));
}

.about-profile {
  flex: 0 0 400px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 10rem;
  transition: width 0.2s;
  max-width: 900px;
  padding-left: 2.5rem;
}

.about-profile-desc {
  font-size: 1.1rem;
  color: var(--text-primary-color);
  line-height: 1.7;
  padding-right: 2rem;
  margin-right: 3rem;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  hyphens: none;
}

 .about-profile-desc p {
  margin-bottom: 1.2rem;
}

.about-profile-photo {
  width: 150px;
  height: 150px;
  border-radius: 1.5rem;
  overflow: hidden;
  margin-left: -1rem;
  margin-bottom: -2rem;
  display: flex;
  align-items: left;
  justify-content: left;
  cursor: var(--cursor-grab2);
  transition: transform 0.3s ease-in-out;
}

.about-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.5rem;
  display: block;
}

.about-profile-photo:hover {
  transform: scale(1.05);
}

.about-section-gap {
  height: 10rem; 
  width: 100%;
}

/* --- Responsive Design --- */

/* [모바일 수정] 1000px 이하에서 가로 스크롤이 생기던 문제 수정 */
@media (max-width: 1000px) {
  .about-main {
    overflow-x: hidden !important; /* 가로 스크롤 제거 */
    min-width: unset; /* 최소 너비 제한 제거 */
  }
}

/* [모바일 수정] 768px 이하에서 Hero 섹션 레이아웃을 수직으로 변경 */
@media (max-width: 768px) {
  .about-main {
    margin-top: 6rem;
    margin-bottom: 4rem;
    padding: 0 2rem; /* 좌우 패딩 추가 */
  }

  .about-hero {
    flex-direction: column; /* 수직 정렬 */
    gap: 3rem; /* 섹션 간 간격 */
    padding-right: 0;
  }

  .about-purpose,
  .about-profile {
    width: 100%; /* 너비를 100%로 설정 */
    min-width: unset; /* 최소 너비 제한 제거 */
    max-width: 100%; /* 최대 너비 제한 제거 */
    padding-left: 0;
    padding-right: 0;
  }
  
  .about-purpose-title {
    font-size: 2.2rem; /* 모바일용 폰트 크기 */
    line-height: 1.2;
  }

  .purpose-section {
    padding-left: 0;
    margin: 0 0.5em; /* 좌우 마진 조정 */
  }

  .about-divider {
    display: none; /* Divider 숨김 */
  }

  .about-profile {
    padding-top: 0; /* 상단 패딩 제거 */
    gap: 1.5rem;
    flex-direction: column; /* 프로필 내부 요소도 수직 정렬 */
    align-items: flex-start; /* 왼쪽 정렬 */
  }

  .about-profile-photo {
    width: 120px;
    height: 120px;
    margin-left: 0;
    margin-bottom: 0;
  }
  
  .about-profile-desc {
    font-size: 1rem;
    margin-right: 0;
    padding-right: 0;
  }

  .about-section-gap {
    height: 6rem; /* 섹션 간 간격 조정 */
  }
}