/* ============================================================
   Professor Homepage – Custom Typography & Design Overrides
   Drop this file into: assets/css/custom.css
   Then add in _includes/head/custom.html (before the closing comment):
     <link rel="stylesheet" href="{{ base_path }}/assets/css/custom.css">
   ============================================================ */

/* ----------------------------------------------------------
   1. GOOGLE FONTS IMPORT
   - Playfair Display  → elegant serif for headings
   - Source Serif 4    → refined readable body text
   - JetBrains Mono    → clean monospace for code
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ----------------------------------------------------------
   2. DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  --font-heading:  'Playfair Display', Georgia, serif;
  --font-body:     'Source Serif 4', Georgia, serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  --color-ink:        #1a1a2e;   /* deep navy-black */
  --color-ink-light:  #3d3d5c;
  --color-accent:     #4a6fa5;   /* academic blue   */
  --color-accent-warm:#c17a38;   /* warm gold       */
  --color-border:     #d6d0c4;
  --color-bg-tint:    #f8f6f1;   /* warm off-white  */
  --color-bg-card:    #ffffff;

  --radius: 6px;
  --shadow: 0 2px 12px rgba(26,26,46,0.08);
}

/* ----------------------------------------------------------
   3. BASE TYPOGRAPHY
   ---------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-ink);
  background-color: #fafaf8;
}

/* Headings ─ use Playfair Display */
h1, h2, h3, h4, h5, h6,
.page__title,
.archive__item-title,
.nav__title {
  font-family: var(--font-heading) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-ink);
}

h1 { font-size: 2.2rem;  margin-bottom: 0.5em; }
h2 { font-size: 1.65rem; margin-top: 2em; margin-bottom: 0.4em; }
h3 { font-size: 1.3rem;  margin-top: 1.6em; }

/* Section divider accent under h2 */
.page__content h2 {
  padding-bottom: 0.35em;
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
}

/* Italic style for sub-labels (venue, journal, etc.) */
.page__content em,
.archive__item em {
  font-style: italic;
  color: var(--color-ink-light);
}

/* ----------------------------------------------------------
   4. LINKS
   ---------------------------------------------------------- */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.18s ease;
}
a:hover {
  color: var(--color-accent-warm);
  text-decoration: underline;
}

/* ----------------------------------------------------------
   5. MASTHEAD / NAVIGATION BAR
   ---------------------------------------------------------- */
/* greedy-nav 자체가 흰색 배경을 갖고 있어 흰 박스처럼 보이는 문제 해결 */
.masthead {
  background: #1a1a2e !important;
  border-bottom: 3px solid #c17a38 !important;
  box-shadow: 0 3px 20px rgba(26,26,46,0.22);
}

.masthead__inner-wrap,
.masthead__menu,
.greedy-nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 모바일 드롭다운 hidden-links */
.greedy-nav .hidden-links {
  background: #1a1a2e !important;
  border: 1px solid #c17a38 !important;
  box-shadow: 0 4px 16px rgba(26,26,46,0.3) !important;
}

.greedy-nav .hidden-links li a {
  color: #ffffff !important;
}

.greedy-nav .hidden-links li a:hover {
  color: #c17a38 !important;
  background: rgba(255,255,255,0.05) !important;
}

/* 메뉴 글씨 — 흰색으로 명확하게 */
.masthead__menu-item a,
.masthead__menu-item > a,
.greedy-nav a,
.greedy-nav .visible-links a,
.greedy-nav .visible-links > li > a {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff !important;
  text-transform: uppercase;
}

.masthead__menu-item a:hover,
.masthead__menu-item > a:hover,
.greedy-nav a:hover,
.greedy-nav .visible-links a:hover {
  color: #c17a38 !important;
  text-decoration: none;
}

/* 사이트 이름 */
.site-title,
.masthead__inner-wrap .site-title,
a.site-title {
  font-family: var(--font-heading) !important;
  font-size: 1.1rem !important;
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------
   6. AUTHOR / SIDEBAR PROFILE
   ---------------------------------------------------------- */
.sidebar .author__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-ink);
}

.sidebar .author__bio {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-ink-light);
  font-style: italic;
}

.sidebar .author__urls-wrapper .author__urls li a {
  font-size: 0.85rem;
  color: var(--color-ink-light);
}

.sidebar .author__urls-wrapper .author__urls li a:hover {
  color: var(--color-accent);
}

/* Decorative top accent on sidebar */
.sidebar .author__avatar img {
  border: 3px solid var(--color-accent-warm);
  box-shadow: var(--shadow);
}

/* ----------------------------------------------------------
   7. PAGE CONTENT AREA
   ---------------------------------------------------------- */
.page__content {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
}

/* Pull-quote / intro paragraph — slightly larger */
.page__content > p:first-of-type {
  font-size: 1.08rem;
  color: var(--color-ink-light);
  line-height: 1.85;
}

/* Code blocks */
pre, code {
  font-family: var(--font-mono) !important;
  font-size: 0.85em;
}

pre {
  background: #f2efea;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

code {
  background: #ede9e1;
  padding: 0.15em 0.4em;
  border-radius: 3px;
  color: var(--color-ink);
}

/* Blockquote */
blockquote {
  border-left: 4px solid var(--color-accent-warm);
  background: var(--color-bg-tint);
  margin: 1.5em 0;
  padding: 0.8em 1.4em;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--color-ink-light);
}

/* ----------------------------------------------------------
   8. PUBLICATION / ARCHIVE ITEMS
   ---------------------------------------------------------- */
.archive__item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.archive__item:hover {
  box-shadow: 0 6px 24px rgba(26,26,46,0.13);
  transform: translateY(-2px);
}

.archive__item-title {
  font-size: 1.05rem;
  margin-bottom: 0.25em;
  color: var(--color-ink);
}

.archive__item-title a {
  color: var(--color-accent);
}
.archive__item-title a:hover {
  color: var(--color-accent-warm);
}

.archive__item-excerpt {
  font-size: 0.9rem;
  color: var(--color-ink-light);
  line-height: 1.65;
  margin-top: 0.3em;
}

/* Publication category headers */
.archive h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-ink);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.3em;
  margin-top: 2.5em;
}

/* ----------------------------------------------------------
   9. BUTTONS & BADGES
   ---------------------------------------------------------- */
.btn, .btn--primary, .btn--inverse {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  transition: all 0.18s ease;
}

.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-accent-warm);
  border-color: var(--color-accent-warm);
}

/* ----------------------------------------------------------
   10. PAGE FOOTER
   ---------------------------------------------------------- */
.page__footer {
  background: var(--color-ink);
  color: #a8a4b8;
  font-size: 0.82rem;
  font-family: var(--font-body);
  border-top: 3px solid var(--color-accent-warm);
}

.page__footer a {
  color: #c8c4d8;
}
.page__footer a:hover {
  color: var(--color-accent-warm);
}

/* ----------------------------------------------------------
   11. NOTICE BOXES
   ---------------------------------------------------------- */
.notice, .notice--info, .notice--warning, .notice--success, .notice--danger {
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.92rem;
  border-left-width: 4px;
}

/* ----------------------------------------------------------
   12. TABLE STYLING
   ---------------------------------------------------------- */
table {
  font-size: 0.92rem;
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
}

thead tr {
  background: var(--color-ink);
  color: #fff;
}

thead th {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.6em 1em;
}

tbody tr:nth-child(even) {
  background: var(--color-bg-tint);
}

tbody td {
  padding: 0.5em 1em;
  border-bottom: 1px solid var(--color-border);
}

/* ----------------------------------------------------------
   13. DECORATIVE PAGE HEADER UNDERLINE
   ---------------------------------------------------------- */
.page__title {
  font-size: 2rem !important;
  position: relative;
  padding-bottom: 0.4em;
}

.page__title::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 3px;
  background: var(--color-accent-warm);
  margin-top: 0.4em;
  border-radius: 2px;
}

/* ── Publications: 항목 간격 줄이기 ── */
.archive__item {
  margin-bottom: 0.6em !important;
  padding-bottom: 0.6em !important;
}

.archive__item-title {
  margin-top: 0.3em !important;
  margin-bottom: 0.15em !important;
  font-size: 1.05em !important;
  border-bottom: none !important;
}

.archive__item-excerpt {
  margin-top: 0.1em !important;
  margin-bottom: 0.2em !important;
  font-size: 0.9em !important;
}

/* ── Conference venue 강조 (em 태그 안 venue) ── */
.archive__item-excerpt em {
  font-style: normal !important;
  font-weight: 600 !important;
  color: #2a5db0 !important;
  background: #eef3fb !important;
  padding: 1px 7px !important;
  border-radius: 4px !important;
  font-size: 0.87em !important;
}

/* ── fallback: page__content 직접 h2인 경우 ── */
.page__content h2 {
  margin-top: 0.6em !important;
  margin-bottom: 0.1em !important;
  border-bottom: none !important;
}

.page__content h2 + p em {
  font-style: normal !important;
  font-weight: 600 !important;
  color: #2a5db0 !important;
  background: #eef3fb !important;
  padding: 1px 7px !important;
  border-radius: 4px !important;
  font-size: 0.87em !important;
}

.page__content h2 + p + p {
  margin-top: 0.1em !important;
  margin-bottom: 0.6em !important;
  font-size: 0.9em !important;
}

.archive__item p i.venue-short {
  font-style: normal !important;
  font-weight: 600 !important;
  color: #2a5db0 !important;
  background: #eef3fb !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 0.87em !important;
  margin-right: 6px !important;
}