/* 기본 설정 및 테마 변수 */
:root {
  /* Dark Mode (Default) Variables */
  --bg-color: #1e1e1e;
  --text-main: #ddd;
  --text-header: #fff;
  --text-meta: #888;
  --text-link: #888;
  --text-link-hover: #fff;
  --border-color: #333;
  --card-bg: transparent;
  /* 혹시 카드 배경이 필요하면 사용 */

  --btn-border: #555;
  --btn-text: #ccc;
  --btn-hover-border: #fff;
  --btn-hover-text: #fff;

  --nav-icon-filter: brightness(0.8);
  --nav-icon-hover-filter: brightness(1);

  --badge-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Light Mode Variables */
html.light-mode {
  --bg-color: #ffffff;
  --text-main: #333;
  --text-header: #111;
  --text-meta: #666;
  --text-link: #555;
  --text-link-hover: #007bff;
  --border-color: #e0e0e0;

  --btn-border: #ccc;
  --btn-text: #555;
  --btn-hover-border: #333;
  --btn-hover-text: #333;

  --nav-icon-filter: brightness(1);
  /* 원래 색상 유지 */
  --nav-icon-hover-filter: brightness(1.1);
  /* 호버시 약간 밝게 */

  --badge-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html {
  overflow-y: scroll;
  background-color: var(--bg-color);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

/* Profile Section */
.profile-section {
  text-align: center;
  flex-shrink: 0;
  width: 250px;
}

.about-top-section {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 3rem;
}

@media (max-width: 768px) {
  .about-top-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

img.profile-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 3px solid var(--border-color);
}

.profile-section h1 {
  margin: 0.5rem 0 0.5rem;
  font-size: 2rem;
  color: var(--text-header);
}

.profile-section .role {
  color: var(--text-meta);
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

.contact-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 1rem;
  background: var(--border-color);
  /* Use border color as bg for pill? Or define a surface color */
  border-radius: 20px;
  color: var(--text-main);
  text-decoration: none;
  transition: all 0.2s;
  font-size: 0.9rem;
}

/* Slight adjustment for light mode pill background could be needed, but border-color is ok for now or make a --surface-color */
body.light-mode .contact-links a {
  background: #f0f0f0;
}


.contact-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: var(--nav-icon-filter);
}

.contact-links a:hover .contact-icon {
  filter: var(--nav-icon-hover-filter);
}

.contact-links a:hover {
  background: var(--border-color);
  filter: brightness(1.1);
  /* simple hover effect */
  color: var(--text-header);
}

/* Main Content & Navigation */
main {
  padding-top: 0;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-contacts {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.nav-icon-link img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: var(--nav-icon-filter);
  transition: all 0.2s;
}

.nav-icon-link:hover img {
  filter: var(--nav-icon-hover-filter);
  transform: scale(1.1);
}

.top-nav a {
  color: var(--text-link);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  transition: color 0.2s;
}

.top-nav a:hover,
.top-nav a.active {
  color: var(--text-link-hover);
}

.year-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  color: var(--text-header);
  font-size: 1.5rem;
}

/* News Items Style */
.news-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 24px;
}

.news-date {
  flex-shrink: 0;
  width: 100px;
  color: var(--text-meta);
  font-weight: 500;
  font-size: 0.95rem;
  text-align: left;
}

.news-content {
  color: var(--text-main);
  line-height: 1.5;
  font-size: 1rem;
}

/* Publication Styling */
.publication-item {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  align-items: flex-start;
}

.pub-thumbnail {
  position: relative;
  width: 160px !important;
  /* 직사각형으로 너비 증가 */
  height: 90px !important;
  /* 16:9 비율에 맞게 조정 */
  max-width: 160px !important;
  flex-shrink: 0;
  background-color: transparent;
  margin-top: 10px;
  border: 1px solid var(--border-color);
}

.pub-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.venue-badge {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  padding: 2px 8px;
  color: #fff;
  /* 항상 흰색 텍스트 (배경색 있음) */
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 4px;
  z-index: 10;
  box-shadow: var(--badge-shadow);
  white-space: nowrap;
}

/* Badge colors remain same */
.badge-blue {
  background-color: #007bff;
}

.badge-pink {
  background-color: #e83e8c;
}

.badge-gray {
  background-color: #6c757d;
}

.badge-yellow {
  background-color: #E8C63E;
}

.pub-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Site Branding (Name at top-left) */
.site-branding {
  position: fixed;
  top: 2rem;
  left: 2rem;
  /* Aligned with typical page padding */
  font-size: 1.5rem;
  /* Larger */
  font-weight: 800;
  /* Bolder */
  color: var(--text-header);
  text-decoration: none;
  z-index: 9999;
  transition: color 0.2s, opacity 0.2s;
  line-height: 1;
  /* Ensure line height doesn't mess up vertical alignment too much */
}

.site-branding:hover {
  color: var(--text-link-hover);
  opacity: 1;
}

@media (max-width: 1400px) {

  /* When screen is not super wide, move it to inline flow or adjust position */
  .site-branding {
    /* Keep it fixed but might overlap if screen is narrow but not mobile yet.
        Actually user asked for "left of the page" not inline.
        But if it overlaps content (wrapper is 900px), we need to be careful.
        (100vw - 900px) / 2 is the margin.
        If margin < left position + width, it overlaps.
        Let's keep it fixed for now as requested.
     */
  }
}

@media (max-width: 1200px) {
  .site-branding {
    position: static;
    display: block;
    margin: 0 0 1rem 0;
    /* Reset margins */
    font-size: 1.8rem;
  }
}

.pub-title {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-header);
  margin-bottom: 0.5rem;
  line-height: 1.4;
  text-decoration: none;
}

.pub-title:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

.pub-authors {
  display: block;
  color: var(--text-main);
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  line-height: 1.5;
  word-break: keep-all;
}

/* Highlight author name */
.pub-authors strong {
  color: var(--text-header);
  font-weight: 600;
}

.pub-venue {
  display: block;
  color: var(--text-meta);
  font-style: italic;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

.pub-buttons {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.btn-outline {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  color: var(--btn-text);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-text);
  background: var(--border-color);
  /* optional hover bg */
}

@media (max-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 2rem;
  }

  .publication-item {
    flex-direction: column;
    gap: 12px;
  }

  .pub-thumbnail {
    /* 모바일에서도 동일하게 유지하거나 조금 줄일 수 있음. 일단 유지 */
    width: 160px !important;
    height: 90px !important;
  }
}

.research-interests-header {
  font-size: 1.2rem;
  color: var(--text-header);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* Theme Toggle Button Style */
.theme-toggle-btn {
  background: none;
  border: none;
  color: var(--text-link);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-btn:hover {
  color: var(--text-link-hover);
  transform: scale(1.1);
}

/* Publication Award Styling - Boxed */
.pub-award {
  display: inline-block;
  width: fit-content;
  /* This ensures box wraps only text content */
  font-weight: 700;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 0.8rem;
  margin-top: 0.2rem;
  line-height: normal;

  /* Default (Dark Mode) */
  color: #FFD700;
  /* Bright Gold */
  background-color: rgba(255, 215, 0, 0.15);
  /* Transparent Gold bg */
  border: 1px solid rgba(255, 215, 0, 0.4);
}

/* Light Mode Override */
html.light-mode .pub-award {
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
}