Update About

Author: githajae

_layouts/about-page.html

@@ -22,45 +22,54 @@
   margin-bottom: 4rem;
 }
 
-/* --- Info Panel General Style --- */
+/* --- Info Panel: Final Polished Version --- */
 .info-panel {
+  display: flex; /* Flexbox 레이아웃 적용 */
+  flex-direction: column; /* 아이템을 세로로 정렬 */
+  gap: 1.2rem; /* 모든 섹션 사이의 간격을 1.2rem으로 완벽히 통일 */
   text-align: left;
-  line-height: 1.6;
+  line-height: 1.5;
 }
 
 .info-name {
   font-size: 3em;
   font-weight: 700;
-  margin-bottom: 1rem;
   line-height: 1.2;
+  margin: 0; /* gap으로 제어하므로 개별 마진 불필요 */
 }
 
-/* --- 그룹핑 및 기본 스타일 --- */
+/* --- 각 정보 그룹 스타일 --- */
 .info-affiliation, .info-details, .info-research, .info-links {
-  padding-top: 1rem; /* margin-top을 없애고 이 값으로만 간격 조절 */
-  border-top: 1px solid #e5e5e5; /* 그룹을 나누는 옅은 선 */
+  margin: 0; /* 개별 마진 제거 */
 }
 
+/* 선(border)이 필요한 그룹에만 선과 선 아래 공간(padding) 추가 */
+.info-affiliation, .info-details, .info-research, .info-links {
+  border-top: 1px solid #e5e5e5;
+  padding-top: 1.2rem; /* 선과 내용물 사이의 간격 */
+}
+
+/* --- 텍스트 및 내부 간격 --- */
 .info-title {
   font-size: 1.2em;
   font-weight: 600;
-  color: #1d1d1f; /* 애플의 메인 텍스트 블랙 */
-  margin-top: 0; /* <-- 이 한 줄을 추가해주세요 */
-  margin-bottom: 0;
+  color: #1d1d1f;
+  margin: 0;
 }
 
 .info-university {
   font-size: 1.1em;
-  color: #86868b; /* 애플의 보조 텍스트 그레이 */
-  margin-bottom: 0.5rem;
+  color: #86868b;
+  margin: 0;
 }
 
-/* --- 상세 정보 링크 --- */
 .info-details p {
   font-size: 1.1em;
   color: #555;
-  margin-top: 0; /* <-- 이 한 줄을 추가해주세요 */
-  margin-bottom: 1rem;
+  margin: 0;
+}
+.info-details p:not(:last-child) {
+  margin-bottom: 0.5rem; /* Lab과 Advisor 사이의 간격 */
 }
 
 .info-details p strong {
@@ -69,49 +78,48 @@
 }
 
 .info-details a {
-  color: #0071e3; /* 애플 블루 */
+  color: #0071e3;
   text-decoration: none;
   font-weight: 500;
 }
 .info-details a:hover {
   text-decoration: underline;
 }
 
-/* --- 연구 분야 리스트 --- */
 .info-research h4 {
   font-size: 1.2em;
   font-weight: 600;
   color: #1d1d1f;
-  margin-bottom: 0.rem;
-  margin-top: 0; /* <-- 이 한 줄을 추가해주세요 */
+  margin: 0 0 1rem 0; /* 제목과 목록 사이 간격 */
 }
 
 .info-research ul {
   list-style: none;
   padding-left: 0;
+  margin: 0;
 }
 
 .info-research li {
   font-size: 1.1em;
   padding-left: 1.5em;
   position: relative;
-  margin-bottom: 0.5rem;
   color: #555;
 }
+.info-research li:not(:last-child) {
+  margin-bottom: 0.5rem; /* 목록 아이템 사이 간격 */
+}
 
 .info-research li::before {
-  content: "–"; /* 불릿을 대시(-)로 변경 */
+  content: "–";
   position: absolute;
   left: 0;
-  color: #0071e3; /* 불릿 포인트에 색상 강조 */
+  color: #0071e3;
 }
 
-
 /* --- 아이콘 링크 버튼 --- */
 .info-links {
-  padding-top: 1rem;
   display: flex;
-  gap: 1rem; /* 버튼 사이 간격 */
+  gap: 1rem;
   flex-wrap: wrap;
 }
 
@@ -122,7 +130,7 @@
   background-color: #f5f5f7;
   color: #1d1d1f;
   padding: 0.7rem 1.4rem;
-  border-radius: 99px; /* 알약 모양 */
+  border-radius: 99px;
   text-decoration: none;
   font-weight: 600;
   font-size: 1em;
@@ -285,7 +293,7 @@ <h4>Research Interests</h4>
 
   <nav class="qa-nav-wrapper">
     <a href="/research-interests/" class="qa-link-card">
-      <h2>What are your main research interests?</h2>
+      <h2>What are your research interests in detail?</h2>
     </a>
     <a href="/#pursuits" class="qa-link-card">
       <h2>What do you enjoy doing outside of research?</h2>