/* =========================================================================
   SIA Lab — System Intelligence & Analytics Lab, Korea University
   Single stylesheet. Pretendard only (KR + EN).

   Motion: state changes only — colour and rule at 150ms, the nav underline
   growing at 160ms, and the BOARD dropdown fading in over 140ms. Nothing
   animates the page itself: no scroll effects, no reveals, no parallax — and
   all of it removed under prefers-reduced-motion. See the REFINEMENTS block
   at the end of the file.

   Two-colour system (used by role, never blended):
   - TEAL  #0e4d66  (SIA logo deep blue)  → interaction: links, nav, CTAs,
                                             tabs, accent rules, the logo.
   - CRIMSON #862633 (Korea University)    → identity: section/eyebrow labels,
                                             category tags, awards, hero.
   ========================================================================= */

/* The Pretendard @font-face rules live in pretendard.css, which base.html
   loads first. It is the upstream dynamic subset (92 unicode ranges), so a
   page fetches only the ranges it actually sets. */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --font-sans: "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  --accent: #0e4d66;        /* SIA logo deep blue/teal — interaction */
  --accent-press: #0a3a4f;
  --crimson: #862633;       /* Korea University crimson — identity */
  --crimson-press: #6c1f29;

  --ink: #181818;
  --muted: #5f6166;
  --faint: #6b6f76;   /* WCAG AA on both --paper (5.05:1) and --soft (4.59:1) */
  --line: #e3e3e1;
  --line-strong: #181818;
  --paper: #ffffff;
  --soft: #f5f4f2;

  --container: 1120px;
  --gutter: 24px;
}

/* ---- Reset / base ------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; font-size: 17px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  /* Korean must break at spaces, never between two syllables: the default
     line-breaking rule for CJK would split "한국SCM학회" after "학". This has
     no effect on Latin text, where it behaves as `normal`; the
     overflow-wrap above still rescues a token too long for its column. */
  word-break: keep-all;
}

/* --- overflow safety: never force horizontal scrolling on small screens --- */
html { overflow-x: hidden; }
h1, h2, h3, h4, .page-title, .bi-title { overflow-wrap: break-word; }
.person-meta, .person-meta a, .contact-grid, .contact-grid address, .bi-meta dd { overflow-wrap: anywhere; }
.research-entry > *, .news-row > *, .publication > *, .people-grid > *, .cv-section > *,
.contact-inner > *, .featured-seminar-inner > *, .recruit-intro > *, .profile > *,
.application-step > *, .seminar-item > summary > *, .activity-item > summary > * { min-width: 0; }

img { display: block; max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--accent-press); text-decoration: underline; }

h1, h2, h3, h4, p { margin: 0; }
strong { font-weight: 600; }
em { font-style: italic; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[id] { scroll-margin-top: 24px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Small labels — Korea University crimson (identity). Set in Pretendard like
   everything else, in sentence case: uppercasing them and opening the tracking
   turned Hangul and Latin into the same wall of letterforms and read as a
   different typeface from the rest of the page. */
.eyebrow,
.section-label,
.page-kicker {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  color: var(--crimson);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.role {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.text-link {
  display: inline-block;
  color: var(--accent);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.text-link:hover { color: var(--accent-press); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
}
.skip-link:focus { left: 8px; }

/* ---- Header / nav ------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 84px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 50px; width: auto; }

.primary-nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.primary-nav > a,
.nav-group-label {
  position: relative;
  padding-block: 30px;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}
/* No underline under nav items: each label is a different width, so a per-item
   rule read as a row of mismatched dashes. The current page is marked by
   colour and weight instead. */
.primary-nav > a:hover { color: var(--accent); text-decoration: none; }
.primary-nav > a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* Dropdown menus (RESEARCH, BOARD) */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group-label { cursor: default; }
.nav-group-label::after { content: " \25BE"; font-size: 0.7em; color: var(--faint); }
.nav-group:hover .nav-group-label,
.nav-group:focus-within .nav-group-label,
.nav-group-label.is-current { color: var(--accent); }
.nav-group-label.is-current { font-weight: 600; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 190px;
  margin-left: -95px;
  background: var(--paper);
  border: 1px solid var(--line);
  z-index: 60;
  /* Not display:none, so the panel can fade rather than pop. visibility keeps
     it out of the tab order and unclickable while hidden; its transition has
     no duration, only a delay, so it flips after the fade out and instantly
     on the way in. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s;
}
.nav-dropdown a {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.nav-dropdown a:last-child { border-bottom: 0; }
.nav-dropdown a:hover { color: var(--accent); text-decoration: none; background: var(--soft); }
.nav-dropdown a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* Members' entrance. Set apart from the site navigation by a rule rather than
   a colour, so it reads as a door rather than another page. */
.primary-nav > .nav-login,
.primary-nav > .nav-team {
  margin-left: 6px;
  padding-inline: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding-block: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.primary-nav > .nav-login:hover,
.primary-nav > .nav-team:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.primary-nav > .nav-team { border-color: var(--accent); color: var(--accent); }
/* these two are pills, not nav items — the underline rule above excludes them */

.mobile-nav { display: none; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 88px;
  color: var(--muted);
  font-size: 0.85rem;
}
.footer-inner p { margin: 0; }

/* ---- Sections ----------------------------------------------------------- */
.section { padding-block: 84px; }
.section + .section { border-top: 1px solid var(--line); }
.section--soft { background: var(--soft); }

.section-head { margin-bottom: 38px; }
.section-head h2,
.section-head-row h2 {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 38px;
}

/* =========================================================================
   HOME
   ========================================================================= */
.hero {
  padding-block: 56px;
  min-height: clamp(420px, 42vw, 760px);
  display: flex;
  align-items: center;
  background-color: #2a1016;       /* fallback; photo set inline from editable content */
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
  color: #fff;
}
.hero > .container { width: 100%; }
.hero-copy { max-width: 980px; }
/* larger again than the in-page labels — these two sit at hero scale, against
   a full-bleed photograph, so they carry more size than the same components
   do inside a page */
.hero .eyebrow { color: #f1c4cc; font-size: 1.15rem; }
.hero-copy h1 {
  margin-bottom: 18px;
  font-size: clamp(2.1rem, 1.4rem + 2.2vw, 2.85rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.hero-ko { margin-bottom: 22px; color: rgba(255, 255, 255, 0.82); font-size: 1.15rem; font-weight: 500; }
/* wide enough to carry "…a research group at Korea University." to the end of
   the first line before it wraps */
.hero-lead { max-width: 80ch; margin-bottom: 28px; font-size: 1.2rem; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.hero .text-link { color: #fff; font-size: 1.12rem; }
.hero .text-link:hover { color: #f1c4cc; }

/* News + activity cards (photo + text) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.activity-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
}
.activity-card:hover { border-color: var(--ink); }
.activity-card > img,
.activity-card > .ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.activity-card .body { padding: 20px 22px 24px; }
.card-tag {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  color: var(--crimson);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.activity-card h3 {
  margin-bottom: 8px;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.45;
}
.activity-card:hover h3 { color: var(--accent); }
.activity-card .date { margin-bottom: 10px; color: var(--faint); font-size: 0.9rem; }
.activity-card .excerpt { margin: 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; }

/* Placeholder for a photo that has not been supplied yet. A quiet panel with
   a hairline reads as a considered blank; a labelled grey box reads as an
   unfinished page, so the label is gone. */
.ph {
  display: block;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Intro / welcome — single column, justified */
.intro { max-width: none; }
.intro p { font-size: 1.15rem; line-height: 1.75; text-align: justify; word-break: keep-all; }
.intro p + p { margin-top: 18px; }

/* The two accent emphases, available in any field that runs through the
   inline renderer: ++teal++ and ==crimson==, following the file's colour
   split — teal for what the lab is, crimson for what it is applied to. */
.em-accent { color: var(--accent); }
.em-crimson { color: var(--crimson); }

/* News — plain dated text list */
.news-list { border-top: 2px solid var(--line-strong); }
/* The date and tag columns are sized to their longest real value and no more,
   so the headline gets the rest of the measure. */
.news-row {
  display: grid;
  grid-template-columns: 104px 132px minmax(0, 1fr);
  gap: 24px;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
}
.news-row time { color: var(--muted); font-size: 0.92rem; font-weight: 500; }
.news-type {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--crimson);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.7;
}
/* Ranged left, not justified: a headline is short enough that justifying it
   stretches two or three words across the whole line. It fills the measure by
   having the measure to itself, not by having its spaces pulled apart. */
.news-row h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.5; }
.news-row .desc { margin-top: 6px; color: var(--muted); font-size: 0.96rem; line-height: 1.6; }

/* Home contact */
.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  border-top: 2px solid var(--line-strong);
  padding-top: 28px;
}
.contact-grid address { font-style: normal; line-height: 1.75; font-size: 1.02rem; }
.contact-grid p { margin: 0; font-size: 1.02rem; line-height: 1.75; }
.contact-grid .label { margin-bottom: 8px; color: var(--muted); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; }

/* =========================================================================
   INNER PAGE HERO
   ========================================================================= */
.page-hero { padding-block: 70px; border-bottom: 1px solid var(--line); }
.page-title { font-size: clamp(1.95rem, 1.5rem + 1.5vw, 2.45rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; }
.page-deck { max-width: 76ch; margin-top: 16px; color: var(--muted); font-size: 1.12rem; line-height: 1.6; }

.content { padding-block: 74px; }

/* Board tabs — switch between News / Seminar / Activity */
.board-tabs {
  display: inline-flex;
  border: 1px solid var(--line);
  margin-bottom: 44px;
}
.board-tabs a {
  padding: 12px 28px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.board-tabs a:hover { color: var(--accent); text-decoration: none; }
.board-tabs a + a { border-left: 1px solid var(--line); }
.board-tabs a[aria-current="page"] { background: var(--accent); color: #fff; }
.board-tabs a[aria-current="page"]:hover { color: #fff; }

/* sits directly under an empty .project-list, which already draws the rule */
.part-empty {
  padding: 28px 0;
  color: var(--faint);
  font-size: 0.98rem;
}

/* ---- Research ------------------------------------------------------------
   Centred heading over full-width copy, as on the original site: the English
   title, its Korean parallel under it, then the prose across the measure.
   -------------------------------------------------------------------------- */
.research-list { display: grid; gap: 0; border-top: 2px solid var(--line-strong); }
.research-entry {
  padding-block: 56px;
  border-bottom: 1px solid var(--line);
}
.research-entry:first-child { padding-top: 44px; }
/* the title uses the full measure: constrained, these run to three and four
   lines, which is what made them look broken up */
.research-head { margin: 0 auto 34px; text-align: center; }
.research-num { color: var(--accent); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; }
.research-head h2 {
  margin-top: 8px;
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.research-ko { margin-top: 12px; color: var(--muted); font-size: 1.02rem; line-height: 1.5; }
.research-copy { max-width: none; }
.research-copy p { color: #34383d; font-size: 1.05rem; text-align: justify; word-break: keep-all; }
.research-copy p + p { margin-top: 16px; }
.research-copy strong { color: var(--ink); }
/* A figure and the paragraph it illustrates share a row, so that paragraph
   keeps a single measure top to bottom. Anything past the last figure is a
   plain full-width block. The figure column changes sides from one entry to
   the next so the page does not march down one edge. */
.research-body { display: grid; gap: 34px; }
.research-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 44px);
  /* the two columns are rarely the same height; splitting the difference
     reads as margin rather than as a hole under the figure */
  align-items: center;
}
.research-pair > .research-copy { grid-area: 1 / 1; }
.research-pair > .research-figure { grid-area: 1 / 2; }
.research-entry:nth-of-type(even) .research-pair { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.research-entry:nth-of-type(even) .research-pair > .research-copy { grid-area: 1 / 2; }
.research-entry:nth-of-type(even) .research-pair > .research-figure { grid-area: 1 / 1; }

/* Each figure fills its column at its own proportions. A fixed frame was
   shrinking the near-square diagrams to 84% of the column to letterbox them
   into a wide box; the width/height attributes on the tag keep the space
   reserved, so nothing shifts as a lazily-loaded image arrives. No grey
   backing — these are diagrams on white, and the panel only boxed them in. */
.research-figure { margin: 0; }
.research-figure img { width: 100%; height: auto; }

/* ---- Projects (a listing, so it follows the Publications rhythm) --------- */
.project-list { border-top: 2px solid var(--line-strong); }
.project-entry {
  display: grid;
  grid-template-columns: minmax(140px, 170px) minmax(0, 1fr);
  gap: 28px;
  padding-block: 26px;
  border-bottom: 1px solid var(--line);
}
.project-period { color: var(--ink); font-size: 0.9rem; font-weight: 600; line-height: 1.4; }
.project-status { margin-top: 4px; color: var(--accent); font-size: 0.8rem; font-weight: 500; }
/* h2, not h3: on its own page each project is a direct child of the page
   title. Sized to match .publication h3 — the two are the same kind of list. */
.project-copy h2 { margin-bottom: 6px; font-size: 1.1rem; font-weight: 600; line-height: 1.5; }
.project-copy p { margin: 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; }
.project-ko { margin-bottom: 6px; }
.project-role:not(:empty)::before { content: " · "; }
.project-body { margin-top: 10px; }
.project-body p { color: #34383d; line-height: 1.7; word-break: keep-all; }
.project-body p + p { margin-top: 10px; }
.project-link { margin-top: 8px; }
.project-link a { font-size: 0.9rem; font-weight: 600; }

/* ---- PI profile --------------------------------------------------------- */
.profile { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }
.profile-photo { margin: 0; }
.profile-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; background: var(--soft); }
.profile-copy h1 { margin-bottom: 16px; font-size: clamp(1.85rem, 1.4rem + 1.3vw, 2.35rem); font-weight: 700; letter-spacing: -0.02em; }
.profile-copy h1 span { margin-left: 8px; color: var(--muted); font-size: 0.5em; font-weight: 500; }
.profile-title { margin-bottom: 18px; font-size: 1.12rem; font-weight: 600; line-height: 1.6; }
.profile-copy > p { color: var(--muted); line-height: 1.75; font-size: 1.02rem; }
.profile-copy > p + p { margin-top: 10px; }

.cv-section { padding-block: 42px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; }
.cv-section:first-child { border-top: 2px solid var(--line-strong); }
.cv-section > h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.cv-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 20px; padding-block: 15px; border-bottom: 1px solid var(--line); }
.cv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cv-row:first-child { padding-top: 0; }
.cv-row strong { font-size: 1.02rem; }
.cv-row .where { margin-top: 2px; color: var(--muted); font-size: 0.96rem; }
.cv-row time { color: var(--muted); font-size: 0.92rem; }
.cv-block p + p { margin-top: 14px; }
.cv-block > p { line-height: 1.75; font-size: 1.02rem; }
.plain-list { margin: 14px 0 0; padding-left: 18px; }
.plain-list li { margin-bottom: 8px; line-height: 1.6; font-size: 1.02rem; }
.plain-list li:last-child { margin-bottom: 0; }
/* a paragraph following a list needs the same air as one following a
   paragraph — without this the next heading sits on the last bullet */
.plain-list + p { margin-top: 14px; }

/* ---- Members ------------------------------------------------------------ */
.recruit-banner {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  padding-block: 28px;
  margin-bottom: 54px;
  border-top: 2px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.recruit-banner p:last-child { font-size: 1.15rem; line-height: 1.6; }
.people-group + .people-group { margin-top: 64px; }
.people-group > h2 { margin-bottom: 28px; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; }
.people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 28px; }
.person img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; background: var(--soft); margin-bottom: 16px; }
.person .role { margin: 0 0 8px; color: var(--ink); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none; }
.person h3 { font-size: 1.12rem; font-weight: 600; }
.person h3 span { color: var(--muted); font-weight: 500; font-size: 0.85em; }
.person .period { margin: 6px 0 8px; color: var(--faint); font-size: 0.9rem; }
.person .person-meta { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.6; }

/* ---- Publications ------------------------------------------------------- */
.pub-group + .pub-group { margin-top: 56px; }
.pub-group > h2 { margin-bottom: 16px; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; }
.pub-note { margin-bottom: 24px; color: var(--muted); font-size: 0.9rem; }
.pub-list { border-top: 2px solid var(--line-strong); }
.publication { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 28px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.pub-year { color: var(--ink); font-size: 0.9rem; font-weight: 600; line-height: 1.4; }
.pub-year .pending { display: block; color: var(--accent); font-weight: 500; font-size: 0.8rem; }
.publication h3 { margin-bottom: 6px; font-size: 1.1rem; font-weight: 600; line-height: 1.5; }
.publication p { margin: 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; }
.publication .award { margin-top: 6px; color: var(--crimson); font-weight: 600; font-size: 0.9rem; }

/* ---- Recruiting --------------------------------------------------------- */
.recruit-intro { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; }
.recruit-intro > h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.recruit-intro-copy p { font-size: 1.1rem; line-height: 1.75; }
.recruit-intro-copy > p { margin-bottom: 14px; }
.notice { margin-top: 8px; padding: 22px 24px; border-left: 3px solid var(--accent); background: var(--soft); }
.notice p { font-size: 1rem; line-height: 1.65; text-align: left; }
.notice p + p { margin-top: 10px; }
.application-list { margin-top: 64px; border-top: 2px solid var(--line-strong); }
.application-step { display: grid; grid-template-columns: 64px 230px minmax(0, 1fr); gap: 32px; padding-block: 36px; border-bottom: 1px solid var(--line); }
.step-no { color: var(--accent); font-size: 1.2rem; font-weight: 700; }
.application-step h3 { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.01em; }
.application-step .step-body p { color: var(--muted); line-height: 1.75; font-size: 1.02rem; }
.application-step .step-body p + p { margin-top: 10px; }

/* =========================================================================
   BOARD ACCORDION — click a row to reveal details (Seminar & Activity)
   <details>/<summary>: instant open/close, no animation.
   ========================================================================= */
.board-list { border-top: 2px solid var(--line-strong); }
.board-item { border-bottom: 1px solid var(--line); }
.board-item > summary {
  list-style: none;
  cursor: pointer;
  padding-block: 24px;
}
.board-item > summary::-webkit-details-marker { display: none; }
.board-item > summary::after {
  content: "+";
  justify-self: end;
  align-self: center;
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
}
.board-item[open] > summary::after { content: "\2212"; }   /* minus */
.board-item > summary:hover .bi-title { color: var(--accent); }
.bi-title { display: block; font-size: 1.16rem; font-weight: 600; line-height: 1.45; }
.bi-sub { display: block; margin-top: 4px; color: var(--muted); font-size: 0.96rem; }
.bi-detail { padding: 2px 0 30px; }
.bi-detail > p,
.bi-detail .bi-body p { color: #34383d; line-height: 1.75; font-size: 1.05rem; word-break: keep-all; }
.bi-detail > p + p,
.bi-detail .bi-body p + p { margin-top: 14px; }
.bi-meta { display: grid; grid-template-columns: 130px 1fr; gap: 8px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.bi-meta dt { color: var(--ink); font-weight: 600; font-size: 0.9rem; }
.bi-meta dd { margin: 0; color: var(--muted); font-size: 0.96rem; }

/* Seminar accordion row.
   The date sits in its own column; the abstract underneath is indented by
   exactly that column plus the gap, so it begins on the same line as the
   talk title rather than under the date. */
/* the date column carries "Aug 03" now, not "Mon 03 Aug 2026" — the year is
   the block heading above */
.seminar-item {
  --sem-date-col: 96px;
  --sem-gap: 28px;
}
.seminar-item > summary {
  display: grid;
  grid-template-columns: var(--sem-date-col) minmax(0, 1fr) 28px;
  gap: var(--sem-gap);
  align-items: baseline;
}
.seminar-item > .bi-detail {
  padding-left: calc(var(--sem-date-col) + var(--sem-gap));
}
.seminar-item.is-next > summary { border-left: 3px solid var(--accent); padding-left: 18px; }
.seminar-item .bi-when { color: var(--ink); font-size: 0.96rem; font-weight: 600; }
.seminar-item .bi-when .next-tag { display: block; margin-top: 4px; color: var(--accent); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; }
.seminar-block + .seminar-block { margin-top: 54px; }
.seminar-block > h2 { margin-bottom: 22px; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; }
.seminar-note {
  margin-bottom: 40px;
  padding: 20px 24px;
  border-left: 3px solid var(--accent);
  background: var(--soft);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* Activity accordion row */
.activity-item > summary {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 28px;
  gap: 28px;
  align-items: center;
}
.activity-item .bi-thumb,
.activity-item .bi-thumb img,
.activity-item .bi-thumb .ph {
  width: 168px;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}
.activity-item .bi-main .card-tag { margin-bottom: 8px; }
.activity-item .bi-date { display: block; margin-top: 6px; color: var(--faint); font-size: 0.9rem; }
.activity-item .bi-detail .bi-photo { width: 100%; max-width: 560px; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 16px; background: var(--soft); }

/* =========================================================================
   CONTENT UPDATES
   ========================================================================= */
/* PI photo — keep the original aspect ratio (no crop) */
.profile-photo img { aspect-ratio: auto; object-fit: contain; object-position: top; }
.pi-koname { margin: 2px 0 14px; color: var(--muted); font-size: 1.05rem; font-weight: 500; }
.pi-koname .ko-name { font-size: 1.45rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.pi-koname .ko-role { font-size: 1rem; font-weight: 500; color: var(--muted); }
.pi-contact { margin-top: 18px; }
.pi-contact p { margin: 0 0 8px; color: var(--muted); line-height: 1.65; }
.pi-contact p:last-child { margin-bottom: 0; }
.pi-contact .pi-ic { display: inline-block; width: 1.5em; }

/* Home contact block */
.contact-heading { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 16px; }
.contact-block { font-style: normal; line-height: 1.9; font-size: 1.05rem; color: var(--ink); }

/* News recruiting banner */
.news-banner { margin: 0 0 26px; padding: 16px 20px; border-left: 3px solid var(--crimson); background: var(--soft); font-size: 1.05rem; line-height: 1.6; }

/* Members recruit banner — full width, no label column */
.recruit-banner { display: block; }
.recruit-banner > p { max-width: none; }
.personal-site { display: inline-block; margin-top: 4px; font-size: 0.9rem; font-weight: 600; }
/* The "add a personal site" slot is markup only an editor receives, and it
   stays hidden until they actually turn editing on — so a member with no site
   shows nothing at all, whether you are signed in or not. edit.css reveals it. */
.personal-site--empty { display: none; color: var(--faint); font-weight: 500; cursor: pointer; }

/* Publications arXiv link */
.pub-arxiv { margin-top: 4px; }
.pub-arxiv a { font-size: 0.9rem; font-weight: 600; }
.publication--noyear { grid-template-columns: 1fr; }

/* Recruiting — single-line lead */
.recruit-lead { max-width: none; margin-bottom: 8px; }
.recruit-h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; margin-bottom: 14px; }
.recruit-link { font-size: 1.1rem; margin-bottom: 2px; }
.recruit-lead .notice { margin-top: 22px; }

/* A row without a step number keeps the same three columns as the numbered
   ones and simply leaves the first empty, so its heading and body stay on the
   same two lines as the steps above instead of sliding left by a column. */
.application-step--nonum { grid-template-columns: 64px 230px minmax(0, 1fr); }
.application-step--nonum > h3 { grid-column: 2; }
.application-step--nonum > .step-body { grid-column: 3; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px) {
  .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seminar-item { --sem-date-col: 150px; --sem-gap: 20px; }
}

@media (max-width: 860px) {
  .primary-nav { display: none; }
  .mobile-nav { display: block; position: relative; }
  .mobile-nav summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 0;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
  }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav nav {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 50;
    display: grid;
    width: 236px;
    background: var(--paper);
    border: 1px solid var(--line);
  }
  .mobile-nav nav a {
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
  }
  .mobile-nav nav a:last-child { border-bottom: 0; }
  .mobile-nav nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-inner,
  .recruit-intro { grid-template-columns: 1fr; gap: 24px; }
  /* no room for two columns — the figure drops under its paragraph */
  .research-pair,
  .research-entry:nth-of-type(even) .research-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .research-pair > .research-copy,
  .research-entry:nth-of-type(even) .research-pair > .research-copy { grid-area: 1 / 1; }
  .research-pair > .research-figure,
  .research-entry:nth-of-type(even) .research-pair > .research-figure { grid-area: 2 / 1; }
  .project-entry { grid-template-columns: 1fr; gap: 8px; }
  /* period and status read as one line once the meta column is gone */
  .project-meta { display: flex; align-items: baseline; gap: 10px; }
  .project-meta .project-status { margin-top: 0; }
  .profile { grid-template-columns: 1fr; gap: 28px; }
  .profile-photo { max-width: 280px; }
  .cv-section { grid-template-columns: 1fr; gap: 16px; }
  .recruit-banner { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 680px) {
  .section { padding-block: 58px; }
  .page-hero { padding-block: 50px; }
  .hero { padding-block: 74px; }
  .content { padding-block: 52px; }
  .section-head-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .news-row { grid-template-columns: 1fr; gap: 6px; padding-block: 18px; }
  .news-type { line-height: 1.3; }
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .publication { grid-template-columns: 1fr; gap: 6px; }
  .cv-row { grid-template-columns: 1fr; gap: 4px; }
  .seminar-item > summary { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px 16px; }
  .seminar-item .bi-when,
  .seminar-item .bi-main { grid-column: 1; }
  .seminar-item > summary::after { grid-column: 2; grid-row: 1; }
  /* the date is no longer a column, so the abstract goes back to the margin */
  .seminar-item > .bi-detail { padding-left: 0; padding-right: 0; }
  .activity-item > summary { grid-template-columns: 96px minmax(0, 1fr) 24px; gap: 16px; }
  .activity-item .bi-thumb,
  .activity-item .bi-thumb img,
  .activity-item .bi-thumb .ph { width: 96px; }
  .bi-meta { grid-template-columns: 1fr; gap: 2px; }
  .bi-meta dd { margin-bottom: 10px; }
  .application-step { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .application-step--nonum { grid-template-columns: 1fr; }
  .application-step .step-body { grid-column: 1 / -1; }
  .application-step--nonum > h3,
  .application-step--nonum > .step-body { grid-column: 1 / -1; }
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding-block: 24px; }
  .intro p, .research-copy p, .recruit-intro-copy p, .bi-detail > p { text-align: left; }
}

@media (max-width: 480px) {
  .hero { min-height: 340px; padding-block: 52px; }
  .hero-copy h1 { font-size: 1.7rem; }
  .hero-ko { font-size: 1rem; }
  .hero-lead { font-size: 1.05rem; }
  .page-title { font-size: 1.7rem; }
  .people-grid { gap: 30px 16px; }
}

@media (max-width: 440px) {
  :root { --gutter: 18px; }
  .card-grid { grid-template-columns: 1fr; }
  .board-tabs { display: flex; }
  .board-tabs a { flex: 1; text-align: center; padding-inline: 12px; }
}

/* =========================================================================
   REFINEMENTS
   Craft layer. Nothing here changes the layout, the palette or the type
   family — it sharpens how the existing design is set and rendered.
   ========================================================================= */

/* ---- Line breaking ------------------------------------------------------
   Headings are balanced so a title never drops a single orphan word onto its
   last line; body copy is set "pretty" for the same reason at paragraph level.
   ------------------------------------------------------------------------ */
h1, h2, h3, h4,
.page-title, .bi-title, .section-head h2, .section-head-row h2,
.contact-heading, .recruit-h2, .hero-copy h1 {
  text-wrap: balance;
}
p, li, figcaption, .page-deck, .hero-lead {
  text-wrap: pretty;
}
/* Balancing evens the lines by shortening them, which is right for a title
   sitting on its own but wrong for these: they are full sentences filling a
   wide column, and balancing left the right-hand side empty. */
.news-row h3,
.project-copy h2 {
  text-wrap: pretty;
}

/* ---- Numerals -----------------------------------------------------------
   Dates, years and periods sit in columns, so they are set with fixed-width
   figures and line up vertically instead of drifting row to row.
   ------------------------------------------------------------------------ */
.news-row time,
.activity-card .date,
.activity-item .bi-date,
.seminar-item .bi-when,
.person .period,
.cv-row time,
.pub-year {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- Links inside running text -----------------------------------------
   A link in a paragraph must not rely on colour alone to be recognisable
   (WCAG 1.4.1). Prose links carry a hairline underline that firms up on
   hover; standalone links — nav, cards, buttons, .text-link — are excluded
   because their role is already clear from position and form.
   ------------------------------------------------------------------------ */
.intro a,
.news-banner a,
.news-row .desc a,
.research-copy a,
.recruit-intro-copy a,
.recruit-lead a,
.notice a,
.seminar-note a,
.bi-detail a,
.bi-meta dd a,
.cv-block a,
.profile-title a,
.project-body a,
.plain-list a,
.person-meta a,
.publication p a,
.page-deck a,
.contact-block a,
.contact-grid a,
.application-step .step-body a,
.recruit-banner a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
}
.intro a:hover,
.news-banner a:hover,
.news-row .desc a:hover,
.research-copy a:hover,
.recruit-intro-copy a:hover,
.recruit-lead a:hover,
.notice a:hover,
.seminar-note a:hover,
.bi-detail a:hover,
.bi-meta dd a:hover,
.cv-block a:hover,
.profile-title a:hover,
.project-body a:hover,
.plain-list a:hover,
.person-meta a:hover,
.publication p a:hover,
.page-deck a:hover,
.contact-block a:hover,
.contact-grid a:hover,
.application-step .step-body a:hover,
.recruit-banner a:hover {
  text-decoration-color: currentColor;
}

/* ---- Justified copy -----------------------------------------------------
   The design justifies its long-form English. Justification without
   hyphenation opens rivers of white space between words, which is what makes
   a justified column look amateur; hyphenation closes them. Korean is
   unaffected — it is governed by word-break: keep-all above.
   ------------------------------------------------------------------------ */
.intro p,
.research-copy p,
.recruit-intro-copy p,
.bi-detail > p {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 4 3;   /* don't break short words, keep 4+3 either side */
}

/* ---- Selection ---------------------------------------------------------- */
::selection { background: rgba(14, 77, 102, 0.15); color: var(--ink); }

/* ---- Motion -------------------------------------------------------------
   Colour and rule transitions, at 150ms. Enough to make hover feel resolved
   rather than abrupt; not enough to animate the page. The only two other
   moving parts are declared with the components they belong to: the nav
   underline's scale and the BOARD dropdown's fade.
   ------------------------------------------------------------------------ */
a,
.text-link,
.primary-nav > a,
.nav-group-label,
.nav-dropdown a,
.mobile-nav nav a,
.board-tabs a,
.activity-card,
.activity-card h3,
.bi-title,
.board-item > summary::after {
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    text-decoration-color 150ms ease;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* the dropdown defers its visibility flip by a delay, not a duration —
       without this it would linger after the pointer leaves */
    transition-delay: 0s !important;
  }
}