/*
  Wide theme: designed for a desktop screen first, collapsing to one column on phones.

  All sizes come from the tokens below, in three layers:
    1. primitives  - raw colors, the type scale, the spacing scale, radii
    2. layout      - container width, 12-column grid, gutter, reading measure, section rhythm
    3. roles       - what each primitive is used for (text, accent, headings ...)
  Components only use layer 2 and 3 tokens. Page adaptations are permitted when their scope, values and rationale are recorded in page-design.json.
  To change the whole site (e.g. wider pages), change a token here, never a single page.
*/
:root {
  /* 1. primitives */
  --red-700: #a61955;     /* POSTECH Red (Pantone 215 C, RGB 166 25 85), the one accent */
  --red-100: #f6e4ec;
  --ink-900: #172b40;
  --ink-600: #596574;
  --ink-500: #6b7683;   /* 4.6:1 on white */
  --gray-200: #d8e0e8;
  --gray-50: #f3f6fa;
  --white: #ffffff;

  --fs-control: 15px;  /* compact navigation keeps a readable step between table metadata and prose */
  --fs-1: 13px;  --fs-2: 14px;  --fs-3: 16px;  --fs-4: 19px;  --fs-5: 26px;  --fs-6: clamp(32px, 4vw, 46px);  /* display shrinks with the screen so the two-line headline holds */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;  --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px;  --space-9: 96px;
  --radius-1: 6px; --radius-2: 12px;

  /* 2. layout */
  --container: 1200px;
  --page-margin: 48px;     /* minimum space at the screen edge */
  --columns: 12;
  --gutter: var(--space-7);
  --measure: 100%;         /* prose uses the full content width; a narrower cap broke short paragraphs at 760px and read as hard line breaks (2026-10-21) */
  --section-gap: var(--space-8);
  /* horizontal gaps inside a line: 4px for parts that belong together (venue + Oral), 8px within a group
     (name + affiliation, title + course code, chips), 12px between peer items (links, names), 24px between groups */
  --row-gap: var(--space-1);   /* between one-line rows in a list; multi-line items use --item-gap */
  --item-gap: var(--space-3);

  /* 3. roles */
  --bg: var(--white);
  --surface: var(--gray-50);
  --text: var(--ink-900);
  --muted: var(--ink-600);
  --faint: var(--muted);  /* one secondary grey: --faint is kept as an alias so older rules read the same (2026-10-22) */
  --line: var(--gray-200);
  --accent: var(--red-700);
  --accent-soft: var(--red-100);
  --callout-surface: color-mix(in srgb, var(--accent-soft) 45%, var(--bg));
  --callout-line: color-mix(in srgb, var(--accent) 15%, var(--bg));
  --callout-shadow: 0 var(--space-1) var(--space-4) color-mix(in srgb, var(--text) 4%, transparent);
  --text-small: var(--fs-1);
  --text-meta: var(--fs-2);
  --text-control: var(--fs-control);
  --text-body: var(--fs-3);
  --text-lead: var(--fs-4);
  --text-h2: var(--fs-5);   /* a section of its own: Home, Contact, the Research stages, the Faculty name */
  --text-group: var(--fs-4);  /* a heading that groups a list: years, Funding sponsors, member and mentee groups, courses, profile lists (2026-10-27) */
  --text-display: var(--fs-6);
  --text-brand: 23px;  /* the header name and the grey school part after it */
  --brand-pair: .43em;  /* header: between the two parts of one name (IMEN891K Data Engineering, MOAI Lab AI Study), 10px at 23px; in em so phones keep the same proportion */
  --brand-divide: .52em;  /* header: each side of the hairline before POSTECH, 12px at 23px */
  --text-paper: var(--text-body);  /* paper titles lead; supporting lines use the shared metadata size */
  --text-author: var(--text-meta);
  --text-paper-meta: var(--text-meta);
  --text-featured-meta: var(--text-meta);  /* compact badges inside featured cards */
  --text-featured-paper: var(--text-body);  /* featured cards and dense lists have different reading roles */
  --weight-regular: 400;
  --weight-medium: 500;  /* one step between body and emphasis: Seminar talk titles and speaker names (교수 2026-11-02) */
  --weight-emphasis: 600;
  --weight-heading: 700;
  --leading-body: 1.6;
  --leading-card: 1.4;
  --leading-group: 1.3;
  --leading-paper: 1.5;
  --tracking-display: -.025em;
  --photo-height: clamp(220px, 26vw, 380px);
  --page-start: var(--space-7);
  --subnav-start: var(--space-6);
  --card-padding: var(--space-5);
  --detail-gap: var(--space-1);
  --media-surface: #0b1220;
  --media-placeholder: #9aa7b8;

  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color-scheme: light;
  font-synthesis: none;
}

/* Base */
* { box-sizing: border-box; -webkit-user-select: text; user-select: text; }
html { scrollbar-gutter: stable; }  /* the scrollbar keeps its place, so a page never shifts sideways when a tab makes it shorter or longer */
/* Computers: the header stays at the top while the page scrolls (교수 2026-10-27). Phones and tablets keep it in the flow: there it is two lines and would cover a fifth of the screen */
@media (min-width: 961px) {
  html { scroll-padding-top: calc(88px + var(--space-5)); }  /* a #link lands below the header, not under it */
  .site-head { position: sticky; top: 0; z-index: 20; background: var(--bg); }
  .site-head::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--bg); }  /* the white runs edge to edge, so full-width bands (the Home hero) never show beside it */
}
body { margin: 0; background: var(--bg); color: var(--text); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
body { word-break: keep-all; }  /* Korean breaks between words, not inside one ("계층형 기 / 억·추론" on a phone); English is unaffected */
.wrap { width: min(var(--container), calc(100% - 2 * var(--page-margin))); margin-inline: auto; }
a { color: inherit; text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; -webkit-user-drag: none; }  /* a drag that starts on link text selects the text instead of dragging the link away, so every word on the site can be copied (교수 2026-10-27) */
a:hover { color: var(--accent); text-decoration: underline; }  /* a link reads as its surrounding text; accent and underline only on hover */
/* Links painted in the accent at rest: only the ones a visitor should act on (2026-10-22, "hyperlinks get colour only when they are the emphasis") */
.lede a, .hero-text a, .section-next a, .section-callout a, .profile-links a, .step-body a, .filter-link, .embed-caption a, .sec-news a, .profile-bio a, .study-sheet { color: var(--accent); }
.sec-news .news-paper { color: var(--accent); }  /* a paper with no link yet is painted like the linked ones */
.sec-news a.news-quiet { color: inherit; }  /* News paints papers; a workshop we organized stays in text colour, accent on hover */
.sec-news a.news-quiet:hover { color: var(--accent); }  /* News: the papers are the news, so their links stay painted (2026-10-22) */
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--bg); }  /* selection stays visible even on the rose notice band */
img { max-width: 100%; }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
.plain { margin: 0; padding: 0; list-style: none; }
.section-body > .plain:not(.course-parts):not(.course-grading) > li:first-child { padding-top: 0; }  /* trim row-list edges; filled cards keep their own internal padding */
.section-body > .plain:not(.course-parts):not(.course-grading) > li:last-child { padding-bottom: 0; }
.muted { color: var(--muted); }
.small { font-size: var(--text-meta); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type: semantics are chosen by the template, never by the page URL. */
strong, b { font-weight: var(--weight-emphasis); }
h1 { margin: 0; font-size: var(--text-display); font-weight: var(--weight-heading); line-height: 1.1; letter-spacing: var(--tracking-display); }
h2 { margin: 0 0 var(--space-5); font-size: var(--text-h2); font-weight: var(--weight-heading); line-height: 1.3; letter-spacing: -.6px; }
h3 { margin: 0 0 var(--space-1); font-size: var(--text-lead); font-weight: var(--weight-emphasis); line-height: 1.4; letter-spacing: -.3px; }
h3.sub { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-small); font-weight: var(--weight-emphasis); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
h3.sub:first-child { margin-top: 0; }
.lede { font-size: var(--text-body); line-height: var(--leading-body); }  /* page intros read as body text, not as a heading */
.section-body > p, .page-intro > * { max-width: var(--measure); }
.more { margin-top: var(--space-5); font-size: var(--text-meta); font-weight: var(--weight-regular); }

.skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: 100; padding: var(--space-3) var(--space-4); border-radius: var(--radius-1); background: var(--text); color: var(--bg); transform: translateY(calc(-100% - var(--space-4))); }
.skip-link:focus { transform: none; color: var(--bg); }

/* Header */
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); min-height: 88px; padding-block: var(--space-3); border-bottom: 1px solid var(--line); }  /* when the logos and the menu do not fit one line (tablets), the whole menu moves to its own line instead of folding into two */
.head-id { display: flex; align-items: center; flex-shrink: 0; min-width: 0; max-width: 100%; height: 42px; }  /* the lab brand (lab home), or the course title */
.brand { margin: 0; min-width: 0; }
.brand a { display: flex; min-height: 42px; min-width: 0; align-items: center; gap: 10px; color: var(--text); }
.brand a:hover { color: var(--accent); text-decoration: none; }
.brand a:hover .brand-code { color: var(--accent); }  /* the course code and title are one link, so they turn red together */
.brand-mark { width: auto; height: 32px; flex-shrink: 0; }
.brand-sub, .brand-school { flex-shrink: 0; display: flex; align-items: center; height: 22px; margin-left: var(--brand-divide); padding-left: var(--brand-divide); border-left: 1px solid var(--line); color: var(--muted); font-family: "Outfit", "Pretendard Variable", sans-serif; font-size: var(--text-brand); font-weight: var(--weight-regular); letter-spacing: -.3px; white-space: nowrap; }  /* the part after the name, behind a hairline: "MOAI Lab | POSTECH", "IMEN891K Data Engineering | POSTECH", "MOAI Lab | AI Study" (교수 2026-11-03). The wordmark stays in the footer */
.brand-sub { color: var(--text); font-weight: var(--weight-heading); }  /* AI Study is the site's own name, so dark and bold like MOAI Lab; only the school (POSTECH) is grey and thin. It is its own link to the study home, after MOAI Lab (lab home), to read as lab > study (교수 2026-11-03) */
/* course home code before the title, in the slot of the lab logo: "IMEN891K Data Engineering | POSTECH" */
.brand-code { flex-shrink: 0; color: var(--accent); font-family: "Outfit", "Pretendard Variable", sans-serif; font-size: var(--text-brand); font-weight: var(--weight-heading); letter-spacing: -.3px; white-space: nowrap; margin-right: calc(var(--brand-pair) - 10px); }  /* in the lab logo's place and colour (교수 2026-11-03); the brand link gap is 10px (for the logo); the code to title gap follows --brand-pair */
.brand-sub:hover, .brand-school:hover { color: var(--accent); text-decoration: none; }
.brand-word { min-width: 0; font-family: "Outfit", "Pretendard Variable", sans-serif; font-size: var(--text-brand); font-weight: var(--weight-heading); letter-spacing: -.3px; }
.site-nav, .course-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); }
.site-nav a, .course-nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--muted); font-size: var(--text-body); font-weight: var(--weight-emphasis); border-bottom: 2px solid transparent; }
.site-nav a:hover, .course-nav a:hover, .site-nav a[aria-current="page"], .course-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.site-nav a[aria-current="page"], .course-nav a[aria-current="page"] { font-weight: var(--weight-emphasis); }
.nav-group { position: relative; display: inline-flex; }
.nav-menu { position: absolute; top: 100%; left: calc(-1 * var(--space-3)); z-index: 10; display: none; min-width: 150px; padding: var(--space-1); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-2); box-shadow: 0 10px 28px rgba(23, 43, 64, .12); }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display: block; }
.site-nav .nav-menu a { font-weight: var(--weight-regular); display: flex; min-height: 38px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-1); color: var(--text); }
.site-nav .nav-menu a:hover { background: var(--surface); color: var(--accent); }
.subnav { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--subnav-start); }
.subnav a { display: inline-flex; align-items: center; min-height: 40px; padding: var(--space-1) var(--space-4); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: var(--text-control); font-weight: var(--weight-emphasis); }
.subnav a:hover { color: var(--accent); text-decoration: none; }
.subnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }  /* a tint, not a solid red block */

/* Page grid: every page lays its sections on the same 12 columns. Sections span all 12 unless placed. */
main { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); column-gap: var(--gutter); }
main > * { grid-column: 1 / -1; }
.content-section { padding: var(--section-gap) 0 0; }
main { padding-bottom: var(--space-8); }  /* breathing room before the site footer, on main itself: a page whose last child is a script (course and study schedules) used to lose it and end flush on the footer */
main { text-wrap: pretty; }  /* no single word left alone on a last line, on every page (교수 2026-11-02 for courses and study; the lab pages the same since 2026-11-03) */

/* Site footer: POSTECH-affiliated lab footer — POSTECH 대표홈 링크, 연구실 홈 링크,
   개인정보취급처리방침, 주소(정보기술팀 남단비 2026-09-15 디자인 권장사항) */
.site-foot { border-top: 1px solid var(--line); padding: var(--space-6) 0 var(--space-7); font-size: var(--text-meta); color: var(--muted); }  /* follows the content directly; short pages are not padded to the screen height */
.site-foot a { color: inherit; }
.site-foot a:hover { color: var(--accent); text-decoration: underline; }
.foot-main { display: flex; align-items: stretch; justify-content: space-between; gap: var(--space-5) var(--space-7); flex-wrap: wrap; }  /* one block, no inner rule: who and where on the left, school and legal on the right (교수 2026-11-03) */
.foot-addr p { margin: 0 0 var(--space-1); }
.foot-addr p:last-child { margin-bottom: 0; }  /* so the legal lines on the right end on the last address line */
.foot-line { display: block; text-wrap: balance; }  /* each address line wraps into even halves on phones, so "POSTECH" or "Korea" never sits alone (교수 2026-11-03) */
.foot-lab a { display: inline-flex; align-items: center; gap: 10px; font-family: "Outfit", "Pretendard Variable", sans-serif; font-weight: var(--weight-heading); font-size: var(--text-lead); letter-spacing: -.3px; color: var(--text); }
.foot-lab a:hover { text-decoration: none; }
.foot-lab img { width: auto; height: 30px; flex-shrink: 0; }
.foot-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: var(--space-4); text-align: right; }  /* the wordmark on the lab name line, the legal lines on the last address line */
.foot-postech { flex-shrink: 0; }
.foot-postech img { display: block; width: auto; height: 10px; margin-top: 10px; }  /* 118px wide, about the width of "MOAI Lab" beside it and just above the GUI0301 minimum; centred on the 30px lab name line (교수 2026-11-03: 14px read larger than the lab name) */
.foot-legal { font-size: var(--text-small); }
.foot-legal p { margin: 0 0 var(--space-1); }
.foot-legal p:last-child { margin-bottom: 0; }
.site-foot .foot-privacy { color: var(--text); }  /* the one required notice (안내 ③, a text link): body colour among the grey lines, no bold (교수 2026-11-03) */
@media (max-width: 900px) {  /* tablets and phones: "MOAI Lab" and the POSTECH wordmark share the first row as on wide screens, then the address and the legal lines run full width (교수 2026-11-03) */
  .foot-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); row-gap: 0; align-items: start; }  /* top-aligned: the wordmark keeps its 10px top margin and sits on the lab name line, as on wide screens */
  .foot-addr, .foot-side { display: contents; }
  .foot-postech { grid-column: 2; grid-row: 1; }
  .foot-addr > p:not(.foot-lab) { grid-column: 1 / -1; }
  .foot-legal { grid-column: 1 / -1; margin-top: var(--space-4); text-align: left; }
}
.page-intro { padding-top: var(--page-start); }
.visually-hidden + .content-section { padding-top: var(--page-start); }
.page-intro + .content-section { padding-top: var(--page-start); }  /* intros and the first block share the responsive page-start rhythm */
.page-intro + .embed-section { padding-top: min(var(--space-5), var(--page-start)); }  /* an intro that describes the picture right below stays with it, like a caption (Paper Stella) */
.page-intro + .stage-track > .research-area:first-child { padding-top: var(--page-start); }  /* Research Overview: the first stage follows the intro at the same page-start as every other page's first block */

/* Home hero: a full-width band, statement on the left, the orchestration picture on the right */
.hero-band { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); background: linear-gradient(180deg, var(--surface), var(--bg)); }
.hero { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding: var(--space-6) 0; }  /* same 32px above and below the art: the photo sits right under it (교수 2026-11-03) */
.hero-band + .content-section { padding-top: var(--space-6); }  /* hero art to the first heading: 32 + 32 = the usual 64px section gap */
.hero-copy { grid-column: span 7; }
.hero-art { grid-column: span 5; width: 100%; height: auto; }
.eyebrow { margin: 0 0 var(--space-5); color: var(--muted); font-size: var(--text-body); font-weight: var(--weight-emphasis); text-wrap: balance; }
.eyebrow strong { color: var(--accent); font-weight: var(--weight-heading); }
.hero h1 { text-wrap: balance; }
.hero h1 strong { color: var(--accent); font-weight: inherit; }
.hero-text { margin-top: var(--space-5); color: var(--muted); font-size: var(--text-lead); line-height: 1.55; max-width: var(--measure); }
.hero-text strong { color: var(--accent); font-weight: var(--weight-emphasis); }

/* Focus explorer: the chosen tab opens into one outlined box that holds its papers and people, so it is clear which field they belong to.
   One hairline outline, no grey fill; paper cards are the only filled shapes. */
.focus-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.focus-tab { position: relative; display: flex; align-items: center; gap: var(--space-4); margin-bottom: -1px; padding: var(--space-4) var(--space-5); border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-2) var(--radius-2) 0 0; background: none; color: var(--muted); font: inherit; font-size: var(--text-lead); font-weight: var(--weight-emphasis); text-align: left; cursor: pointer; }
.focus-tab span { overflow-wrap: normal; }
.focus-tab img { width: 40px; height: 40px; flex-shrink: 0; opacity: .55; }
.focus-tab:hover { color: var(--text); }
.focus-tab:hover img { opacity: .8; }
.focus-tab[aria-selected="true"] { z-index: 1; border-color: var(--line); background: var(--bg); color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.focus-tab[aria-selected="true"] img { opacity: 1; }
.focus-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.focus-panels { padding: var(--space-6); border: 1px solid var(--line); border-radius: 0 var(--radius-2) var(--radius-2) var(--radius-2); }
.focus-explorer:has(.focus-tab:last-child[aria-selected="true"]) .focus-panels { border-radius: var(--radius-2) 0 var(--radius-2) var(--radius-2); }
.focus-explorer:has(.focus-tab:nth-child(2)[aria-selected="true"]) .focus-panels { border-radius: var(--radius-2); }
.focus-panels > .focus-panel[hidden] { display: none; }  /* each panel is as tall as its own content (교수 2026-10-22: no stretching to the tallest) */
.focus-papers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }  /* cards in one row share that row's height; nothing is stretched beyond its content. Always three columns: a direction with two papers leaves the third empty so card width stays the same across tabs (교수 2026-11-04) */
.paper-chip { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--card-padding); background: var(--surface); border-radius: var(--radius-2); color: var(--text); }
a.paper-chip:hover { color: var(--accent); text-decoration: none; box-shadow: 0 0 0 1.5px var(--accent); }
.paper-chip .venue { background: var(--bg); font-size: var(--text-featured-meta); }  /* the card is already grey, so its badge is white */
.paper-chip .paper-title { font-size: var(--text-featured-paper); font-weight: var(--weight-emphasis); line-height: 1.4; }
.focus-people { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: var(--space-5) 0 0; font-size: var(--text-meta); font-weight: var(--weight-regular); }
.focus-people .label { margin-right: var(--space-1); color: var(--faint); font-size: var(--text-small); font-weight: var(--weight-emphasis); text-transform: uppercase; letter-spacing: .06em; }
.focus-people a, .focus-people span:not(.label) { color: var(--text); }
.focus-people a:hover { color: var(--accent); }

.venue { align-self: flex-start; display: inline-block; padding: 1px var(--space-2); background: var(--surface); color: var(--text); border-radius: var(--radius-1); font-size: var(--text-paper-meta); font-weight: var(--weight-emphasis); line-height: 1.4; }

/* Lists: light items (courses, talks, funding, seminar) are one row: the title on the left, term, place, or years right-aligned at the end.
   Mentees too: name and affiliation on the left, papers at the right end. Publications use several lines. */
.news li { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: var(--space-4); padding: var(--row-gap) 0; }
.media-source { margin-inline-start: var(--space-2); color: var(--muted); font-size: var(--text-meta); white-space: nowrap; }
.news li:first-child { padding-top: 0; }
.news time { color: var(--muted); font-size: var(--text-meta); font-variant-numeric: tabular-nums; }
.link-aside { color: var(--text); }  /* a parenthetical inside a link, e.g. "(oral)": part of the link, but not painted */
.news .muted { margin-left: var(--space-2); font-size: var(--text-meta); }
.item-list li { display: flex; align-items: baseline; gap: var(--space-1) var(--space-6); padding: var(--row-gap) 0; }
.item-list li:first-child { padding-top: 0; }
.item-main strong { font-weight: var(--weight-emphasis); }
.item-main strong a { color: var(--text); }
.item-sub, .item-side { color: var(--muted); font-size: var(--text-meta); }
.item-sub { margin-left: calc(var(--space-2) - var(--space-6)); }  /* a course code sits 8px after its title, not at the 24px gap of the right column */
.item-side { margin-left: auto; text-align: right; }
.item-side a { color: var(--muted); }  /* the right column is grey meta; a link there stays grey until hovered */
.item-side a:hover { color: var(--accent); }
.mentee-name { color: var(--text); font-weight: var(--weight-emphasis); }
a.mentee-name:hover { color: var(--accent); }
.mentee-aff { margin-left: var(--space-2); color: var(--muted); font-size: var(--text-meta); }  /* who they were and whom they worked with, right after the name */
.item-detail { display: block; margin-top: var(--row-gap); color: var(--muted); font-size: var(--text-meta); line-height: 1.4; }  /* a small step below its item, so the detail reads as part of it without touching it */
.item-list li:has(.item-detail):not(:last-child) { padding-bottom: var(--item-gap); }  /* a two-line item keeps its detail close and the next item clearly apart */  /* a line that belongs to the item above it, e.g. the Ph.D. thesis under KAIST */
.item-list + h3.sub, .more-news h3.sub { margin-top: var(--space-6); }
.more-news { margin-top: var(--space-4); }
.more-news summary { display: inline-flex; cursor: pointer; color: var(--accent); font-size: var(--text-meta); font-weight: var(--weight-emphasis); list-style: none; }
.more-news summary::-webkit-details-marker { display: none; }
.more-news summary::after { content: " ↓"; white-space: pre; }
.more-news[open] summary::after { content: " ↑"; }
.funding li { display: grid; grid-template-columns: 12em minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-5); padding: var(--row-gap) 0; }  /* one project per line: sponsor column, title, years at the right end; titles line up across groups */
.funding strong { font-weight: var(--weight-emphasis); }
.funding time { white-space: nowrap; color: var(--muted); font-size: var(--text-meta); font-variant-numeric: tabular-nums; }
.funding abbr { text-decoration: none; cursor: help; }  /* the full agency name shows on hover; no dotted underline, the site uses none */

/* Research: three area cards across, then each area as rows (topic, summary and papers under it) */
.research-overview .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.area-card { display: flex; flex-direction: column; gap: var(--space-2); color: var(--text); }
.area-card:hover { color: var(--accent); text-decoration: none; }
.area-card .card-icon { width: 64px; height: 64px; }
.area-card h3 { margin: 0; }
.area-topics { color: var(--muted); font-size: var(--text-meta); }
.area-topics span + span::before { content: " · "; }
/* Research stages: perception -> reasoning -> action as one vertical rail; each stage heads its area */
.stage-node { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--bg); font-size: var(--text-meta); font-weight: var(--weight-heading); }  /* the numbered stop on the stage rail */
.research-area { scroll-margin-top: var(--space-6); }
.research-area:target .stage-node { animation: stage-arrive 1.8s ease-out; }  /* arriving by link: the stage node rings once */
@keyframes stage-arrive { 0%, 40% { box-shadow: 0 0 0 8px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 var(--accent-soft); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.research-area { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.research-area { position: relative; }
.research-area:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: calc(var(--section-gap) + 36px); height: 100%; width: 2px; background: var(--faint); }  /* rail from this stage node to the next; it stops at the last node */
.page-intro + .stage-track > .research-area:first-child::before { top: calc(var(--page-start) + 36px); height: calc(100% + var(--section-gap) - var(--page-start)); }  /* the first stage starts at page-start, so its rail starts higher and runs that much longer to reach node 2 */
.research-head { grid-column: span 4; align-self: start; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); }  /* fixed at the top of its stage; it does not follow the scroll (2026-10-26) */
.research-head .stage-node { position: relative; margin-top: 18px; }  /* centred on the icon and stage-name row */
.research-head .stage-title { display: flex; align-items: center; gap: var(--space-3); }  /* icon left of the stage name (2026-10-26) */
.research-head .area-icon { display: block; flex-shrink: 0; width: 72px; height: 72px; object-fit: contain; }  /* the same size as before 2026-10-26: pictures before words */
.research-head h2 { margin: 0; }
.research-head p { margin: 0; }
.research-head .area-name { margin-top: var(--space-3); font-weight: var(--weight-heading); }
.research-head .area-blurb { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-meta); }
.section-next { margin: 0; font-size: var(--text-body); }
.content-section.section-next { padding-top: var(--space-5); }  /* a section's closing line: where to go next (Research and Home: publications) */
.section-body > .section-next { margin-top: var(--space-5); }
.section-next a { font-weight: var(--weight-regular); white-space: nowrap; }
/* Both next steps belong to one floating callout; the links remain part of each sentence. */
.section-actions .section-body { padding: var(--card-padding); background: var(--callout-surface); border: 1px solid var(--callout-line); border-inline-start: 3px solid var(--accent); border-radius: var(--radius-2); box-shadow: var(--callout-shadow); }
.section-actions .section-body > p:not(:last-child) { margin-bottom: var(--space-3); }
/* A dark band with a live preview behind the text (Home: Paper Stella in its ?mini=1 mode, 교수 2026-11-03).
   The band's empty part and its caption are one link to the preview's page; the text keeps its own links. */
.section-body.has-mini { position: relative; display: flex; align-items: center; min-height: 216px; padding: var(--space-6) var(--card-padding); overflow: hidden; border-radius: var(--radius-2); background: var(--media-surface); }
.mini-preview { position: absolute; inset: 0; display: block; }
.mini-preview iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; pointer-events: none; color-scheme: dark; }  /* the whole band; the page places the cloud itself (url align, clear). dark like the embedded page, or Chrome paints it white while it loads */
.mini-preview.has-poster::before { content: ""; position: absolute; left: var(--mini-x); top: var(--mini-y); height: var(--mini-h); aspect-ratio: 914 / 701; transform: translate(-50%, -50%); background: var(--mini-poster) center / contain no-repeat; transition: opacity .8s ease; pointer-events: none; }  /* still poster until the preview says it is drawing (scripts.html) */
.mini-preview.has-poster iframe { opacity: 0; transition: opacity .8s ease; }
.mini-preview.has-poster.is-ready iframe { opacity: 1; }
.mini-preview.has-poster.is-ready::before { opacity: 0; }
.mini-preview:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -2px; border-radius: var(--radius-2); }
.mini-caption { position: absolute; right: var(--space-4); bottom: var(--space-3); z-index: 2; color: var(--bg); opacity: 0; font-size: var(--text-small); transition: opacity .2s; }  /* shown on hover or focus only, so the band shows one link at rest (교수 2026-11-03) */
.mini-preview:hover .mini-caption, .mini-preview:focus-visible .mini-caption { opacity: 1; }
.content-section.section-band { padding-top: var(--space-5); }  /* attaches to Our focus above, like a closing line (교수 2026-11-03: 붙어 있는 편이 낫다) */
.mini-text { position: relative; z-index: 2; max-width: 40%; }  /* only the text box sits above the link; the map keeps names right of it (index.md mini.url clear=0.42) */
.mini-text br.wide-only { display: none; }  /* a line break that only wide screens keep (Home band: after "such as"), where the first line fits */
@media (min-width: 1280px) { .mini-text br.wide-only { display: inline; } }
.mini-text p { margin: 0; color: var(--white); font-size: var(--text-lead); line-height: var(--leading-paper); }
.mini-text a { color: var(--accent-soft); white-space: nowrap; }  /* the accent red is too dark on the band */
.content-section.section-callout { padding-top: var(--space-5); }  /* a notice band right under the section it belongs to (Home: recruiting under Our focus, 2026-10-27) */
.section-callout p { margin: 0; padding: var(--space-4) var(--space-5); background: var(--accent-soft); border-radius: var(--radius-2); }
.section-callout strong { color: var(--accent); }
.section-callout a { font-weight: var(--weight-regular); }
/* a photo band (Home: the lab group photo under the hero, 2026-10-27). The band height is the photo's own size; the photo is pre-cropped to the people and softened to sit with the page tones (2026-11-03) */
.hero-band + .section-photo { padding-top: 0; }  /* the photo sits right under the hero: only the hero's own 32px bottom padding between them (교수 2026-10-27) */
.section-photo p { margin: 0; }
.list-intro { margin: 0 0 var(--space-4); color: var(--muted); }  /* one line under a group heading that says what the list is (Teaching: regular courses and the AI study, 교수 2026-10-27·2026-11-03) */
.list-intro a { color: inherit; font-weight: var(--weight-regular); }
.list-intro a:hover { color: var(--accent); }
.section-photo img { display: block; width: 100%; height: var(--photo-height); object-fit: cover; object-position: 50% 25%; border-radius: var(--radius-2); }
.topic-cards { grid-column: span 8; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }  /* one card per row: topics read down the stage like the rail (2026-10-26) */
.topic-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--card-padding); background: var(--surface); border-radius: var(--radius-2); }
.topic-card h3 { margin: 0; }
.topic-card h3, .step-body h3, .study-overview h3, .study-learning-path h4, .course-parts strong, .study-step-title, .study-stat-breakdowns h3 { font-size: var(--text-body); font-weight: var(--weight-emphasis); line-height: var(--leading-card); letter-spacing: normal; }
.topic-card p { margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--text-meta); line-height: 1.5; }
.paper-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }  /* chips follow the lead paper; a shorter card keeps its spare room at the bottom */
.chip { display: inline-flex; align-items: baseline; gap: var(--space-1); padding: 2px var(--space-2); background: var(--bg); border-radius: var(--radius-1); color: var(--text); font-size: var(--text-meta); font-weight: var(--weight-emphasis); white-space: nowrap; }
.chip small { color: var(--faint); font-size: var(--text-small); font-weight: var(--weight-regular); }
a.chip:hover { text-decoration: none; box-shadow: 0 0 0 1.5px var(--accent); }
.area-icon { width: 44px; height: 44px; }
[id] { scroll-margin-top: var(--space-4); }
.row { padding: var(--item-gap) 0; }
.row h3 { margin: 0 0 2px; font-size: var(--text-body); line-height: 1.65; }
.row p { margin: 0; }

/* Seminar: one list, newest first, filtered by kind. One row per talk: date, title (takes all spare width), affiliation, speaker at the far right */
.filter-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-5); margin-bottom: var(--space-5); }  /* no full-width rule: the only line on a page is the one under the menu */
.filter-btn, .filter-link, .course-sheet, .study-sheet { font-size: var(--text-control); font-weight: var(--weight-emphasis); }
.filter-btn { padding: 0 0 var(--space-3); border: 0; background: none; color: var(--muted); font-family: inherit; line-height: inherit; cursor: pointer; }
.filter-btn span { margin-left: 2px; color: var(--faint); font-weight: var(--weight-regular); }
.filter-btn:hover { color: var(--text); }
.filter-btn[aria-pressed="true"] { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.filter-link { margin-left: auto; }
.schedule { width: 100%; border-collapse: separate; border-spacing: 0 var(--space-1); }  /* rows are filled bands, a small gap apart (2026-11-02) */
.schedule.is-locked { table-layout: fixed; }  /* column widths measured once over all talks (scripts.html), so filtering never moves a column */
.schedule td { padding: var(--space-3) 0; vertical-align: baseline; }
.schedule tr[data-kind] > td { background: var(--tone-row); box-shadow: 1px 0 0 var(--tone-row); }  /* the shadow covers the hairline between cells of one filled row, as on course schedules */  /* row colour by kind, two of the four course colours: lab sky, invited butter, the same weight */
.schedule tr[data-kind] > td:first-child { padding-left: var(--space-4); border-radius: var(--radius-1) 0 0 var(--radius-1); }
.schedule tr[data-kind] > td:last-child { padding-right: var(--space-4) !important; border-radius: 0 var(--radius-1) var(--radius-1) 0; }
.schedule-year th { line-height: var(--leading-group); padding: calc(var(--section-gap) - var(--space-1)) 0 calc(var(--space-4) - var(--space-1));  /* minus the gap between rows, so the year sits at the same gaps as every group heading */ color: var(--text); font-size: var(--text-group); font-weight: var(--weight-heading); text-align: left; }
.year-head { line-height: var(--leading-group); margin: var(--section-gap) 0 var(--space-4); font-size: var(--text-group); font-weight: var(--weight-heading); letter-spacing: normal; }  /* same year heading as the seminar list */
.section-body > .year-head:first-child { margin-top: 0; }
.schedule tbody > .schedule-year:first-child th { padding-top: 0; }
.schedule-date { width: 1%; padding-right: var(--space-5) !important; color: var(--tone, var(--faint)); font-size: var(--text-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.filter-swatch { display: inline-block; width: .7em; height: .7em; margin-right: var(--space-2); border-radius: 3px; background: var(--tone-tint); }  /* the row colour of that kind, as a legend */
.schedule-title { font-weight: var(--weight-medium); line-height: 1.5; }  /* every title one medium weight; the speaker matches it in size and weight (교수 2026-11-02) */
.is-upcoming .schedule-date { color: var(--accent); font-weight: var(--weight-emphasis); }  /* talks still to come: the date alone turns accent */
.schedule-title a { color: var(--text); }
.schedule-title a:hover { color: var(--accent); }
.schedule-speaker { width: 1%; padding-left: var(--space-4) !important; font-size: var(--text-body); font-weight: var(--weight-medium); white-space: nowrap; }  /* names left-aligned in the last column, so they line up at the right end; same medium weight as the title (교수 2026-11-02) */
.schedule-speaker a { color: var(--text); }
.schedule-speaker a:hover { color: var(--accent); }
.schedule tr.is-routine :is(.schedule-title, .schedule-speaker), .schedule tr.is-routine :is(.schedule-title, .schedule-speaker) a { color: var(--muted); font-weight: var(--weight-regular); }  /* not a topic talk (Monthly Sync, reviews, sharing sessions): title and name step back (교수 2026-11-02) */
.schedule-aff { width: 1%; padding-left: var(--space-6) !important; color: var(--muted); font-size: var(--text-meta); text-align: right; white-space: nowrap; }  /* right-aligned so it sits next to the name */
.schedule [hidden] { display: none; }

.sec-media a { color: var(--text); }  /* a whole headline in red was the heaviest red on Home; titles read as titles, hover shows the link */
.sec-media a:hover { color: var(--accent); }

/* Wide media */
.embed { position: relative; width: 100%; min-height: 360px; overflow: hidden; border-radius: var(--radius-2); background: var(--media-surface); border: 1px solid var(--line); }
.embed::before { content: "Loading the map\2026"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--media-placeholder); font-size: var(--text-meta); }  /* shows until the map paints over it */
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-caption { margin-top: var(--space-3); color: var(--muted); font-size: var(--text-meta); }
.embed-next { margin-top: var(--space-5); }  /* navigation after a visual follows the same body-size closing-link role */

/* Publications: title, authors, then venue and links under them */
.group-heading { margin-bottom: var(--space-4); font-size: var(--text-group); font-weight: var(--weight-heading); line-height: var(--leading-group); letter-spacing: normal; }
.page-list-view sup { line-height: 0; }  /* the equal-contribution marks no longer push their author line 2.5px taller than the others */
.pubs li { display: grid; grid-template-columns: 2.25em minmax(0, 1fr); gap: var(--detail-gap) var(--space-3); padding: var(--item-gap) 0; }  /* title, authors and metadata share the detail gap; padding separates papers by twice --item-gap */
.pubs li > * { grid-column: 2; }
.pubs li > .pub-num { grid-column: 1; grid-row: 1; align-self: baseline; color: var(--faint); font-size: var(--text-meta); font-weight: var(--weight-emphasis); font-variant-numeric: tabular-nums; text-align: right; }  /* shares its baseline with the title; right-aligned so every number sits 12px before its title */
.pubs li:first-child { padding-top: 0; }
.pubs .title { display: block; align-self: baseline; font-size: var(--text-paper); font-weight: var(--weight-emphasis); line-height: var(--leading-paper); text-wrap: pretty; }
.pubs .title a { color: var(--text); }
.pubs .title a:hover { color: var(--accent); }
.pubs .venue { padding: 0; background: none; border-radius: 0; font-size: inherit; font-weight: var(--weight-emphasis); line-height: inherit; }  /* venue reads as bibliographic text and shares the title/authors start line */
.pubs .authors { color: var(--faint); font-size: var(--text-author); line-height: var(--leading-paper); }
.author { white-space: nowrap; }  /* a name never breaks across lines */
.pubs .lab { color: var(--text); }
.pubs .note { margin-top: 0; color: var(--accent); font-size: var(--text-meta); font-weight: var(--weight-emphasis); line-height: 1.5; }  /* awards: a line of their own, in the accent colour */
.pub-meta { font-size: var(--text-paper-meta); line-height: var(--leading-paper); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); }
.pub-venue, .pub-links { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); }
.pub-links { gap: var(--space-3); }
.venue-honor { color: var(--accent); font-size: var(--text-paper-meta); font-weight: var(--weight-emphasis); }  /* presentation honours stay beside the venue, including when the links wrap */
.pub-link { white-space: nowrap; color: var(--muted); font-size: var(--text-paper-meta); font-weight: var(--weight-regular); }  /* resource links share the venue's supporting size */
.pub-link:hover { color: var(--accent); text-decoration: underline; }

/* People: students as a four-column roster, mentees as rows (name and affiliation, work under it) */
.person { padding: var(--item-gap) 0; line-height: 1.5; }
.person-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); }
.person-name { color: var(--text); font-size: var(--text-body); font-weight: var(--weight-emphasis); }
a.person-name:hover { color: var(--accent); }
.person-aff { color: var(--muted); font-size: var(--text-meta); }
.person-topic { display: block; margin-top: 2px; color: var(--text); font-size: var(--text-meta); font-weight: var(--weight-emphasis); }
.person-degree, .person .role { display: block; color: var(--muted); font-size: var(--text-meta); }
.people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-7) var(--gutter); }
.people-grid .person { padding: 0; }
.person-photo { display: block; width: 100%; max-width: 180px; aspect-ratio: 1; margin-bottom: var(--space-4); border-radius: 50%; object-fit: cover; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }  /* a hairline keeps white-background photos from melting into the page */
.people-grid .person-name { font-size: var(--text-lead); }
.person-work { display: block; margin-top: 2px; font-size: var(--text-meta); }

/* Faculty profile: photo beside the name block, bio below */
.profile { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: var(--gutter); }
.profile-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
.profile h2 { margin-bottom: var(--space-2); }
.profile-contact { margin-bottom: var(--space-4); }
.profile-contact p { margin: 0; }
.profile-role { margin-bottom: var(--space-2); font-size: var(--text-lead); }
.profile-head p { margin-bottom: var(--space-1); }
.profile-head .small { font-size: var(--text-meta); }  /* contact and links read at meta size, not footnote size */

/* Contact: Join us is one surface panel (same surface and radius as the Home focus panel) with the two steps
   as white cards on the left and the path picture on the right. Red only on the step numbers and the
   picture's MOAI circle. */
.page-contact main > .contact-block { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.page-contact main > .contact-join { margin-top: var(--space-6); padding: var(--space-7); background: var(--surface); border-radius: var(--radius-2); }  /* the panel sets its own padding; the room before the footer is main's, as on every page */
.contact-join .contact-main { display: contents; }  /* its parts join the panel grid: heading and intro run the full width, the steps sit beside the picture */
.contact-join h2, .contact-join .section-body { grid-column: 1 / -1; }
.contact-join .contact-steps { grid-column: 1 / span 7; }
.contact-join .contact-art { grid-column: span 5; width: 100%; height: auto; }
.contact-join h2 { margin-bottom: var(--space-2); color: var(--text); }
.contact-join .section-body p { color: var(--muted); }
.contact-steps { display: grid; gap: var(--item-gap); margin-top: var(--space-5); }
.contact-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--card-padding); background: var(--bg); border-radius: var(--radius-2); }
.step-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--text-meta); font-weight: var(--weight-heading); }
.step-body h3 { margin: 2px 0 var(--space-1); font-size: var(--text-body); }
.step-body p { margin-bottom: var(--space-1); }
.step-body p:last-child { margin-bottom: 0; }
@media (max-width: 960px) {
  .contact-join .contact-steps { grid-column: 1 / -1; }
  .contact-join .contact-art { grid-column: 1 / -1; max-width: 400px; margin: var(--space-6) auto 0; }
}
@media (max-width: 680px) {
  .page-contact main > .contact-join { padding: var(--space-5); }
  .contact-step { padding: var(--card-padding); gap: var(--space-3); }
}


/* Narrower screens: tokens shrink, multi-column parts stack */
@media (max-width: 1199px) {
  .hero h1 br { display: none; }  /* avoid an orphaned "of" in the narrower desktop column */
}
@media (max-width: 960px) {
  :root { --gutter: var(--space-6); --page-margin: 32px; }
  .hero-copy, .hero-art { grid-column: 1 / -1; }
  .hero-art { display: none; }  /* tablets keep the statement and lab photo without a second tall illustration */
  .focus-tabs { align-items: stretch; }
  .focus-tab { flex-direction: column; justify-content: flex-start; gap: var(--space-2); text-align: center; }
  .focus-papers, .research-overview .cards { grid-template-columns: 1fr; gap: var(--space-5); }
  .research-head, .topic-cards { grid-column: 1 / -1; }
  .research-head { position: static; margin-bottom: var(--space-5); }
  .research-area::before { display: none; }  /* stacked stages: the node beside each heading is enough */
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .section-body.has-mini { display: block; min-height: 0; padding: var(--space-4); }  /* phones: text, then the preview under it */
  .mini-text { max-width: none; }
  .mini-preview { position: relative; inset: auto; aspect-ratio: 16 / 10; margin-top: var(--space-4); }
  .mini-preview iframe { left: 0; width: 100%; }
  .mini-preview.has-poster::before { left: 50%; top: 50%; }  /* the phone frame centres the map */
  :root { --fs-3: 16px; --fs-4: 18px; --fs-5: 24px; --page-margin: 16px; --section-gap: var(--space-7); --gutter: var(--space-4); --page-start: var(--space-4); --subnav-start: var(--space-4); --card-padding: var(--space-4); --row-gap: var(--space-2); }
  .site-head { display: block; padding: var(--space-4) 0 var(--space-2); }
  .head-id { margin-bottom: var(--space-2); }
  .site-nav, .course-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 44px; min-height: 88px; align-content: start; gap: 0 var(--space-3); }
  .site-nav > a, .site-nav .nav-group > a, .course-nav > a { justify-content: center; width: 100%; min-height: 44px; }  /* six links form two even rows, with full touch targets */
  .course-nav { min-height: 44px; }  /* course and study menus have three links: one row, so no empty band sits between the menu and its rule */
  .subnav a { padding-inline: var(--space-3); }  /* People's three tabs stay on one line on a phone instead of leaving Other Mentees alone below */
  .filter-bar { column-gap: var(--space-3); }  /* Seminar: All, Lab, Invited and Full schedule share one line on a phone */
  .person-photo { max-width: 120px; }
  .mentee-aff { display: block; margin-left: 0; }  /* phones: name, then affiliation, then papers */
  .mentee-list li { padding: var(--item-gap) 0; }  /* three lines per person, so the wider multi-line gap */
  .nav-menu { display: none !important; }
  .hero { padding: var(--space-7) 0 var(--space-6); }
  .hero-art { display: none; }  /* phones: the hero sentence already says what the picture shows, so the lab photo comes right under it (교수 2026-10-27) */
  .eyebrow { font-size: var(--text-meta); }
  .focus-tab { flex-direction: column; justify-content: flex-start; gap: var(--space-2); padding: var(--space-3) 0; font-size: var(--text-meta); line-height: 1.3; text-align: center; }
  .focus-panels { padding: var(--space-4); }
  .focus-tabs { align-items: stretch; }  /* a two-line label keeps the three icons on one line */
  .focus-tab img { width: 36px; height: 36px; }
  .section-photo img { height: auto; aspect-ratio: 1780 / 933; }  /* phones show the whole pre-cropped photo so no one at the ends is cut (2026-11-03) */
  .news li, .profile { grid-template-columns: 1fr; gap: 2px; }
  .profile { gap: var(--space-5); }
  .contact-step { grid-template-columns: 32px minmax(0, 1fr); align-items: center; }
  .step-body { display: contents; }
  .step-body h3 { margin: 0; }
  .step-body p { grid-column: 1 / -1; margin: 0; }
  .pubs li { grid-template-columns: 2.25em minmax(0, 1fr); }
  .item-list li { flex-wrap: wrap; gap: 2px var(--space-3); padding: var(--space-2) 0; }  /* on phones one-line items wrap to two or three lines, so they need the wider gap */
  .funding li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); }
  .funding li span { grid-column: 1 / -1; grid-row: 2; }
  .item-side { margin-left: 0; text-align: left; flex-basis: 100%; }
  .item-sub { flex-basis: 100%; }
  .item-sub { margin-left: 0; }
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .profile-photo { width: 140px; height: 140px; }
  .embed { aspect-ratio: 4 / 5 !important; }
  .schedule, .schedule tbody, .schedule tr, .schedule td, .schedule th { display: block; width: auto; }
  .schedule tr[hidden] { display: none; }
  .schedule tr:not(.schedule-year) { margin-bottom: var(--space-1); padding: var(--space-3); border-radius: var(--radius-1); background: var(--tone-row); }
  .schedule-year th { line-height: var(--leading-group); padding: calc(var(--section-gap) - var(--space-1)) 0 var(--space-4); }  /* cards here: the card above already leaves its --space-1 margin, so the year keeps the plain group gaps from card edge to card edge */
  .schedule tr[data-kind] > td, .schedule tr[data-kind] > td:first-child, .schedule tr[data-kind] > td:last-child { padding: 0 !important; background: none; box-shadow: none; border-radius: 0; }  /* the card carries fill and padding */
  .schedule td { padding: 0 !important; text-align: left; white-space: normal; }
  .schedule tr[data-kind]:not([hidden]) { display: flex; flex-wrap: wrap; align-items: baseline; }
  .schedule td.schedule-date, .schedule td.schedule-title { flex-basis: 100%; }
  .schedule td.schedule-speaker, .schedule td.schedule-aff { margin-top: 2px; }  /* name first, affiliation after it on one line, though the affiliation comes first in the row (td. beats .schedule td above) */
  .schedule td.schedule-speaker { order: 1; }
  .schedule td.schedule-aff { order: 2; margin-left: var(--space-2); }
  main { overflow-wrap: anywhere; }
}
@media (max-width: 380px) {  /* 360px phones (many Galaxy models): the tightest spacing that still keeps these rows on one line */
  .subnav a { padding-inline: var(--space-2); }
  .filter-bar { column-gap: var(--space-2); }
}
@media (max-width: 360px) {
  .focus-tab { font-size: var(--text-small); }
}
@media print {
  .hero-art, .site-nav, .subnav { display: none; }
  a { color: inherit; }
}

/* Documented page adaptations. IDs, before/after and rationale: page-design.json. */
.page-lab-members .person-aff, .page-lab-members .person-degree, .page-lab-members .person-topic,
.page-lab-members .person-work, .page-lab-members .person .role { font-size: var(--text-body); }
.page-faculty .profile-head .small { font-size: var(--text-body); }
.page-other-mentees .mentee-aff { font-size: var(--text-body); }
.page-overview .topic-card p { font-size: var(--text-body); }
.page-courses .item-side { font-size: var(--text-control); }


/* Course sites (layout: course). A course runs as its own small site: its own header and menu, the lab only in the footer.
   Template: includes/course/README.md */

/* Colour template, one set for every course (2026-10-28). Parts take their colour from their position, never per course:
   sky blue, mint and coral; logistics (overview, exams, project days, grading) use butter yellow.
   Distinct pastel fills share a lightness range, with darker matching labels. Guest lectures and seminars use the logistics yellow on the course schedule;
   no-class days use a quiet grey fill. POSTECH Red stays on navigation and materials.
   --tone is text (4.5:1 or more on its row), --tone-tint bars and borders, --tone-row rows and cards. */
.tone-p1 { --tone:#4c6480; --tone-tint:#cbd7e4; --tone-row:#edf3f9; }
.tone-p2 { --tone:#4e6c5a; --tone-tint:#cadbd0; --tone-row:#edf5f0; }
.tone-p3 { --tone:#8a5d57; --tone-tint:#e3cbc6; --tone-row:#f8eeec; }
.tone-logistics { --tone:#7b683f; --tone-tint:#e2d6b5; --tone-row:#faf5e8; }
.tone-guest     { --tone: var(--muted); --tone-tint: var(--line); --tone-row: #f8f9fb; }
.tone-none      { --tone: var(--muted); --tone-tint: var(--line); --tone-row: var(--surface); }

.study-lab-brand img { width: auto; height: 28px; }

/* Home: title, lead and optional resource links on the left (7 of 12 columns), logistics on the right (5 columns),
   the shape of the MIT, Stanford, CMU and Berkeley course pages (2026-10-26) */
.course-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: start; padding-top: var(--space-7); }
.course-eyebrow { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin: 0 0 var(--space-3); color: var(--accent); font-size: var(--text-meta); font-weight: var(--weight-emphasis); }
.course-eyebrow span + span::before, .course-meta span + span::before { content: "\00b7"; margin-right: var(--space-3); color: var(--muted); font-weight: var(--weight-regular); }
.course-hero h1 { margin-bottom: var(--space-5); text-wrap: balance; }
.course-lead { color: var(--muted); font-size: var(--text-lead); line-height: 1.55; }
.course-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 0; }
.course-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-5); border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--text); font-size: var(--text-meta); font-weight: var(--weight-emphasis); }
.course-btn:hover { text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.course-btn.is-primary { background: var(--accent); box-shadow: none; color: var(--bg); }
.course-btn.is-primary:hover { color: var(--bg); filter: brightness(.9); }
.course-facts { margin: 0; padding: var(--space-3) var(--space-5); background: var(--surface); border-radius: var(--radius-2); }
.course-fact { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; }  /* 8em fits the longest label, LOCATION & TIME, on one line (2026-11-03 디자인 검토) */
.course-fact + .course-fact { box-shadow: inset 0 1px 0 var(--line); }
.course-fact dt { color: var(--muted); font-size: var(--text-small); font-weight: var(--weight-emphasis); text-transform: uppercase; letter-spacing: .06em; line-height: 1.9; }
.course-fact dd { margin: 0; font-size: var(--text-body); }
.course-fact dd a { font-weight: var(--weight-emphasis); }
.course-fact dd a + a { margin-left: var(--space-3); }
.course-instructor { grid-template-columns: 1fr; gap: var(--space-2); }  /* the photo row needs the full width of the panel */
.course-person { display: flex; align-items: center; gap: var(--space-3); }
.course-person + .course-person { margin-top: var(--space-3); }
.course-person img { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.course-person-details { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.course-person small { color: var(--muted); font-size: var(--text-meta); overflow-wrap: anywhere; }
.course-support dd { min-width: 0; }
.course-meeting p { margin: 0; }
.course-meeting p + p { margin-top: var(--detail-gap); }
.course-time { white-space: nowrap; }  /* a time range breaks after the days, never inside "9:30 – 10:45 KST" (교수 2026-11-03 디자인 검토) */

.course-outline { margin-top: 0; }

/* Schedule and Term Project: the page name as the title, the course on the line below */
.course-head { padding-top: var(--space-7); }
.course-heading-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-3); }
.course-heading-row h1 { margin: 0; }
.course-heading-row:last-child { margin-bottom: 0; }  /* no meta line under the title (AI Study): the first section's own gap follows */
.course-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin: 0; color: var(--muted); font-size: var(--text-body); font-weight: var(--weight-regular); }
.course-first { padding-top: var(--space-6); }

.course-summary { padding-top: var(--space-7); }
.course-summary h2 { margin-bottom: var(--space-3); }
.course-summary .course-note { margin-top: var(--space-2); }
.course-summary .course-parts { margin-top: var(--space-4); }
.course-summary + .content-section { padding-top: var(--space-7); }

/* Step cards on the project page (the course page no longer has part cards: each part is described in its own row of the schedule) */
.course-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.course-parts li { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--card-padding); background: var(--tone-row, var(--surface)); border-top: 4px solid var(--tone-tint, var(--line)); border-radius: var(--radius-2); }
.course-part-name { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--tone, var(--accent)); font-size: var(--text-meta); font-weight: var(--weight-heading); }
.course-part-name small { color: var(--muted); font-size: var(--text-meta); font-weight: var(--weight-regular); }

.course-part-text { color: var(--muted); font-size: var(--text-meta); line-height: 1.5; }

/* Schedule: one row per class day; lectures carry their number, other days only their colour and title */
.course-schedule { width: 100%; border-collapse: separate; border-spacing: 0 3px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }  /* rows read as coloured blocks, as in the sheet */
.course-schedule thead th { padding: 0 var(--space-4) var(--space-2) 0; border-bottom: 1px solid var(--text); color: var(--muted); font-size: var(--text-small); font-weight: var(--weight-emphasis); text-align: left; text-transform: uppercase; letter-spacing: .06em; }
/* Column alignment, one rule for every course and study table (README 표 정렬, 교수 2026-11-02):
   short values of one shape (number, date, cohort, entry year, link columns, presentation slots) centre;
   text of uneven length (titles, people, papers, reading, departments, lists of markers) stays left;
   a heading takes its column's alignment; stacked cards on narrow screens read left. */
.course-schedule :is(th, td):is(.cs-n, .cs-date, .cs-slides, .project-round),
/* Short fixed-width values (#, cohort, entry, department, LinkedIn chip) sit centred; names, IDs and participation chips read from the left (교수 2026-11-03) */
.study-members-table :is(th, td):is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(7)) { text-align: center; }
.lecture-schedule :is(th, td).cs-slides { text-align: left; }  /* course schedules: the cell is exactly its PDF and Lab columns (.cs-mat), each centred under its own heading (교수 2026-11-03) */
@media (min-width: 681px) { .lecture-schedule :is(th, td).cs-reading { text-align: right; } }  /* course schedules: Reading is the last column and ends on the same right edge as a guest's place and time (교수 2026-11-03) */
.course-schedule thead th:first-child { padding-left: var(--space-3); }  /* same inset as the first cell, so a centred heading sits over its values */
.course-schedule td { padding: var(--space-3) var(--space-4) var(--space-3) 0; background: var(--tone-row); vertical-align: baseline; }
.course-schedule td:not(:last-child) { box-shadow: 1px 0 0 var(--tone-row); }  /* covers the hairline between cells of one filled row */
.course-schedule td:first-child { border-radius: var(--radius-1) 0 0 var(--radius-1); }
.course-schedule td:last-child { border-radius: 0 var(--radius-1) var(--radius-1) 0; }
.course-schedule tr.tone-none td { box-shadow: inset 0 -1px 0 var(--line); border-radius: 0; }
.course-schedule td:last-child { padding-right: var(--space-3); }  /* text keeps off the edge of a filled row */
.course-schedule th:last-child { padding-right: 0; }
.course-part-row th { padding: var(--space-6) 0 var(--space-2); box-shadow: inset 0 -2px 0 var(--tone-tint); color: var(--tone); font-size: var(--text-meta); font-weight: var(--weight-heading); text-align: left; }
.course-part-row .cp-title { margin-left: var(--space-2); color: var(--text); font-weight: var(--weight-emphasis); }
.course-part-row .cp-span { margin-left: var(--space-3); color: var(--muted); font-weight: var(--weight-regular); }
.course-part-row .cp-text { display: block; margin-top: 2px; color: var(--muted); font-weight: var(--weight-regular); }
.cs-date { width: 1%; white-space: nowrap; color: var(--muted); font-size: var(--text-meta); }
.cs-date small { display: inline-block; min-width: 2.1em; margin-left: var(--space-2); color: var(--muted); font-size: var(--text-small); text-align: left; }  /* every weekday as wide as Wed, so centred dates line up */
.cs-n { width: 1%; color: var(--tone); font-weight: var(--weight-heading); }
.cs-topic { line-height: 1.5; }
.cs-title { font-weight: var(--weight-emphasis); }
.cs-tag { display: inline-block; margin-right: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-1); background: var(--bg); color: var(--tone); font-size: var(--text-small); font-weight: var(--weight-emphasis); vertical-align: 1px; }  /* study schedule only (Optional); course schedule rows carry no tag */
.cs-speaker { display: block; color: var(--muted); font-size: var(--text-meta); }
.cs-icon { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; color: var(--tone); }  /* a day with no lecture number shows what kind of day it is (kind-icon.html) */
.is-project .cs-icon, .is-exam .cs-icon { color: var(--accent); }  /* the days students must not miss: only the icon carries the accent */
.is-break .cs-icon { color: var(--muted); }
.is-break .cs-title { color: var(--muted); font-weight: var(--weight-regular); }
.is-outside .cs-title { color: var(--muted); font-weight: var(--weight-regular); }  /* still a class day: the yellow row and the icon say so, the title steps back like a break */
.cs-session { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0 var(--space-5); }
.cs-speaker-name { color: var(--text); font-size: var(--text-body); font-weight: var(--weight-emphasis); }
a.cs-speaker-name:hover { color: var(--accent); }
.cs-session-meta { display: block; color: var(--muted); font-size: var(--text-meta); text-align: right; }
.cs-session-meta > span { display: block; }  /* location, then time, one per line like the course Home, at the right end */
.cs-session-time { color: var(--tone); font-weight: var(--weight-emphasis); }
.cs-slides { width: 1%; white-space: nowrap; }
.cs-slides a { margin-right: var(--space-3); color: var(--accent); font-size: var(--text-meta); font-weight: var(--weight-emphasis); }  /* the links a student comes for, so they keep the accent at rest */
.cs-slides a:last-child { margin-right: 0; }
.cs-slot { visibility: hidden; font-size: var(--text-meta); font-weight: var(--weight-emphasis); }  /* empty Lab place, so PDF lines up in rows without a lab */
.cs-reading { width: 1%; white-space: nowrap; color: var(--muted); font-size: var(--text-meta); }
.cs-reading a { color: var(--muted); }
.cs-reading a:hover { color: var(--accent); }
.is-next td { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent) !important; }  /* the next class: a red frame around its own colour */
.is-next td:first-child { box-shadow: inset 2px 2px 0 var(--accent), inset 0 -2px 0 var(--accent) !important; }
.is-next td:last-child { box-shadow: inset -2px 2px 0 var(--accent), inset 0 -2px 0 var(--accent) !important; }
.is-next .cs-date { font-weight: var(--weight-heading); }  /* frame only carries the accent; the date stays text colour */
.course-schedule td:first-child { padding-left: var(--space-3); }

/* One column grid for every course schedule (교수 2026-11-03: "세 강의 양식이 모두 동일", "맨 오른쪽 열은 오른쪽 정렬하더라도 맨 끝에서
   어느 정도 마진", "Topic 은 너무 길지도 작지도 않게", "PDF랑 Lab을 다른 열로, 가운데 정렬", "Slide Lab").
   Date and # are fixed and centred; Topic takes the rest. Slides (the PDF link) and Lab are two 56px columns, each centred under its heading
   (Lab only when the course has labs). Reading, when present, is the last column and ends --cs-end before the row's end.
   The rightmost column ends on that end line, and a guest's place and time end where its last text ends. */
@media (min-width: 681px) {
  .lecture-schedule { --cs-slot: 56px; --cs-slots: 1; --cs-reading: 136px; --cs-end: var(--space-3); table-layout: fixed; }
  .lecture-schedule.has-lab { --cs-slots: 2; }
  .lecture-schedule th.cs-date { width: 108px; }
  .lecture-schedule th.cs-n { width: 40px; }
  .lecture-schedule :is(th, td).cs-slides { width: calc(var(--cs-slots) * var(--cs-slot) + 2 * var(--space-3)); padding-inline: var(--space-3); }
  .lecture-schedule :is(th, td).cs-slides:last-child { width: calc(var(--cs-slots) * var(--cs-slot) + var(--space-3) + var(--cs-end)); padding-right: var(--cs-end); }
  .lecture-schedule .cs-mat { display: inline-grid; grid-template-columns: repeat(var(--cs-slots), var(--cs-slot)); justify-items: center; }
  .lecture-schedule .cs-mat a { margin-right: 0; }
  .lecture-schedule :is(th, td).cs-reading { width: var(--cs-reading); padding-left: var(--space-3); padding-right: var(--cs-end); }
  .lecture-schedule td.cs-topic[colspan] { padding-right: var(--cs-end); }
  .lecture-schedule:not(.has-reading) td.cs-topic[colspan] { padding-right: calc(var(--cs-end) + (var(--cs-slot) - 24px) / 2); }  /* with Lab last, place and time end where the centred "Lab" (24px) ends */
  .lecture-schedule .cs-session { align-items: baseline; }  /* place sits on the title's baseline and time on the speaker's (교수 2026-11-03: "게스트렉처 세로 간격") */
  .lecture-schedule :is(.cs-speaker, .cs-session-meta > span) { line-height: 24px; }  /* both sides step by the title's 24px line, so the second lines line up too */
  .lecture-schedule td.cs-topic[colspan] { padding-bottom: calc(var(--space-3) + 1px); }  /* one-line rows keep 20px under the baseline (their PDF and Reading cells add 2px); a guest row matches it */
  .lecture-schedule .cs-session-meta { margin-left: auto; }  /* if a long title wraps place and time, they stay at the right */
}
/* The project Teams table ends its last column on the same end line as the schedule, and its heading carries the same right
   padding as its cells so the centred FINAL sits over its values (2026-11-03 디자인 검토). */
@media (min-width: 681px) {
  .project-teams { --cs-end: var(--space-3); }
  .project-teams :is(th, td):last-child { padding-right: var(--cs-end); }
}
@media (min-width: 1000px) { .project-teams { --cs-end: 64px; } }
@media (min-width: 1000px) {
  .lecture-schedule { --cs-reading: 168px; --cs-end: 64px; }  /* PDF text to Reading text about 54px, 64px end margin */
}

a.cs-title { color: var(--text); }  /* project days lead to the project page */
a.cs-title:hover { color: var(--accent); }

/* Team project page: criteria as name + one line, then one row per team with a cell per presentation round */
.project-sub { margin-top: var(--space-6); }
.project-evaluation-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.project-evaluation-group { display: flex; flex-direction: column; padding: var(--card-padding); background: var(--surface); border-radius: var(--radius-2); }
.project-evaluation-group .project-criteria { flex: 1; }  /* the criterion blocks of both groups end on one line */
.project-evaluation-team { grid-column: span 3; }
.project-evaluation-individual { grid-column: span 1; }
.project-evaluation-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin-bottom: var(--space-5); }  /* label and reviewers on one line */
.project-evaluation-heading strong { font-weight: var(--weight-emphasis); }
.project-evaluation-heading span { color: var(--muted); font-size: var(--text-meta); }
.project-criteria { display: grid; grid-template-columns: repeat(var(--criteria-count, 3), minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.project-criteria li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--bg); border-radius: var(--radius-1); }  /* four criterion blocks, grouped 3 / 1 by the grey cards around them */
.project-criteria strong { font-weight: var(--weight-emphasis); }
.project-criteria li > span { color: var(--muted); font-size: var(--text-meta); }
@media (min-width: 681px) and (max-width: 960px) {  /* tablet: the team and individual cards stack, so four criteria keep room for words like "professionalism" (2026-11-03 디자인 검토) */
  .project-evaluation-groups { grid-template-columns: 1fr; }
  .project-evaluation-team, .project-evaluation-individual { grid-column: auto; }
}
@media (max-width: 680px) {
  .project-evaluation-groups, .project-criteria { grid-template-columns: 1fr; }
  .project-evaluation-team, .project-evaluation-individual { grid-column: auto; }
}
.course-sheet { display: inline-flex; align-items: baseline; gap: var(--space-1); margin-left: auto; color: var(--accent); white-space: nowrap; }
.project-teams .cs-n { padding-left: var(--space-3); }
.project-sheet-note { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); background: var(--accent-soft); border-radius: var(--radius-2); font-size: var(--text-body); }  /* students act here, so it reads as a notice */
.project-sheet-note a { color: var(--accent); font-weight: var(--weight-heading); }
.project-round { width: 1%; white-space: nowrap; }
@media (min-width: 681px) {
  .project-teams .project-round { min-width: calc(var(--text-meta) * 8); padding-inline: var(--space-4); }
}
.project-when { color: var(--muted); font-size: var(--text-meta); font-variant-numeric: tabular-nums; }
.project-teams td { vertical-align: middle; }  /* title and members on the left, one line per round on the right */
.project-highlights { display: grid; gap: var(--item-gap); margin: 0; padding: 0; list-style: none; }  /* one card per award: photo left, what and who right */
.project-highlights > li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); align-items: center; padding: var(--card-padding); background: var(--surface); border-radius: var(--radius-2); }
.project-highlights img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 35%; border-radius: var(--radius-1); }  /* every highlight image uses the 16:9 slide frame */
.project-highlight-title { display: block; font-size: var(--text-lead); font-weight: var(--weight-emphasis); }  /* inline strong role: 600, as the design contract asks */
.project-highlight-title a { color: inherit; }
.project-highlight-when { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-meta); }
.project-highlights p { margin: var(--space-3) 0 0; }
@media (max-width: 680px) { .project-highlights > li { grid-template-columns: 1fr; } }
.project-round a { display: block; margin-top: var(--space-1); color: var(--accent); font-size: var(--text-meta); font-weight: var(--weight-emphasis); }  /* PDF under the date and order */

/* Undergraduate AI Study Schedule: a tab per term. The table columns are fixed so switching terms never moves a column */
.study-intro { padding-top: var(--space-7); }
.study-intro h1 { margin-bottom: var(--space-4); text-wrap: balance; }
.study-intro .course-lead { margin-bottom: 0; }
.study-join { padding-top: var(--space-6); }
.study-join h2 { margin-bottom: var(--space-3); font-size: var(--text-body); line-height: var(--leading-group); letter-spacing: normal; }
.study-join p { margin: 0; color: var(--muted); }
.study-join a { color: var(--accent); }
.study-terms, .study-full-list { padding-top: var(--space-6); }  /* title to tabs: the same 32px on Schedule and Members */
.study-term-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-5); }
.study-term-heading:has(+ .study-term-tldr-lead) { margin-bottom: var(--space-2); }
.study-term-tldr-lead { margin: 0 0 var(--space-5); color: var(--muted); font-size: var(--text-lead); line-height: 1.5; }  /* the same one-sentence summary as the Home card */
.study-term-heading h2 { margin-bottom: 0; }
.study-term-details { display: grid; gap: var(--space-5); margin-bottom: var(--space-6); }
.study-term-details .course-facts { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: var(--space-5); padding: var(--space-5) 0; background: none; border-radius: 0; border-block: 1px solid var(--line); }
.study-term-details .course-fact { display: block; padding: 0; }
.study-term-details .course-fact + .course-fact { box-shadow: none; }
.study-term-details .course-fact dt { margin-bottom: var(--space-2); }
/* Learning path: the Home timeline's look. A numbered dot on a line, then a bordered card. */
.study-learning-path { display: grid; grid-template-columns: repeat(var(--study-steps), minmax(0, 1fr)); list-style: none; padding: 0; margin: var(--space-5) 0 0; gap: var(--space-5); }
.study-learning-path li { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.study-step-mark { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 24px; }
.study-step-mark::before { content: ""; position: absolute; left: 6px; right: calc(-1 * var(--space-5)); top: 50%; height: 2px; background: var(--accent-soft); }
.study-learning-path li:last-child .study-step-mark::before { right: 0; }  /* last line runs to the card's right edge */
.study-step-dot { position: relative; flex: none; width: 14px; height: 14px; border: 3px solid var(--accent); border-radius: 50%; background: var(--bg); }
.study-step-label { position: relative; padding-right: var(--space-2); background: var(--bg); color: var(--accent); font-size: var(--text-small); font-weight: var(--weight-emphasis); }
.study-step-range { color: var(--muted); font-weight: var(--weight-regular); }  /* range reads as a quiet note beside the stage number */
.study-step { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius-2); background: var(--bg); color: inherit; }
.study-step-title { display: block; }
.study-step-text { display: block; color: var(--muted); font-size: var(--text-meta); text-wrap: pretty; }
.study-step-text strong { color: var(--text); font-weight: var(--weight-emphasis); }  /* stage topics in bold (교수 2026-11-03) */
.study-learning-path li.is-linked .study-step { border-color: var(--accent); box-shadow: var(--callout-shadow); }  /* hovering a stage tints its sessions in the table */
.study-learning-path li[data-sessions] { cursor: pointer; }  /* a click pins the stage's sessions in the table (교수 2026-11-03) */
.study-learning-path li[data-sessions]:focus-visible { outline: none; }
.study-learning-path li[data-sessions]:focus-visible .study-step { outline: 2px solid var(--accent); outline-offset: 2px; }
.study-step { transition: border-color .15s, box-shadow .15s; }
.study-table tr.is-step-linked td { background: var(--accent-soft); }
.study-table tr.is-step-linked td:not(:last-child) { box-shadow: 1px 0 0 var(--accent-soft); }
.study-member-filter { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); font-weight: var(--weight-emphasis); }
.study-member-filter a { color: var(--accent); font-size: var(--text-control); }
.study-schedule-overview { margin-bottom: var(--space-7); }
.study-overview h3 { margin: 0 0 var(--space-2); font-size: var(--text-body); font-weight: var(--weight-emphasis); }
.study-overview p { margin: 0; color: var(--muted); }
.study-overview .study-reference { margin-top: var(--space-4); font-size: var(--text-meta); }
.study-reference a { color: var(--accent); font-weight: var(--weight-emphasis); }
.study-tablist { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.study-tablist button { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: var(--space-2) var(--space-5); border: 0; border-radius: var(--radius-2); background: var(--surface); color: var(--muted); font: inherit; font-size: var(--text-body); line-height: 1.4; text-align: left; cursor: pointer; }
.study-tablist button strong { font-weight: var(--weight-emphasis); }
.study-tablist button span { font-size: var(--text-meta); }
.study-tablist button:hover { color: var(--accent); }
.study-member-tablist button { flex-direction: row; align-items: baseline; gap: var(--space-1); }
.study-member-tablist button span { opacity: .7; }
.study-tablist button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }  /* the same tint as the current subnav tab */
.study-panel h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-bottom: 0; }
.study-panel h2 span { white-space: nowrap; color: var(--muted); font-size: var(--text-lead); font-weight: var(--weight-emphasis); }
.study-note { margin-bottom: var(--space-4); color: var(--muted); font-size: var(--text-meta); }
.study-note strong { margin-right: var(--space-1); color: var(--text); font-weight: var(--weight-emphasis); }
.study-note a { color: var(--accent); font-weight: var(--weight-emphasis); }
.study-table { table-layout: fixed; }
.study-table .sc-n { width: 3.2em; }
.study-table .sc-date { width: 4.6em; }
/* Title and keywords already make every row two lines, so Topic is wide enough for the keywords on one line
   and the other cells fit those two lines: Papers may wrap once, Demo, Presenters and Materials stay on one (교수 2026-11-02). */
.study-table .sc-topic { width: 32%; }
.study-table .sc-papers { width: 16%; }
.study-table .sc-demo { width: 15%; }
.study-table .sc-who { width: 10%; }  /* two Korean names fit on one line; widths re-balanced on all four terms at 1200px (교수 2026-11-03) */
.study-table .sc-mat { width: 10.5em; }  /* Slides and Lab get their own room instead of the leftover, which squeezed Lab against the table edge (교수 2026-11-03) */
.study-table .st-links { font-size: var(--text-meta); line-height: 1.5; }  /* two lines of papers are as tall as title + keywords */
.study-table .st-material-group { vertical-align: top; }
.study-table td { overflow-wrap: anywhere; }
.study-table-lectures .sc-topic { width: 44%; }
.study-table-lectures .sc-lec { width: 15%; }
.study-table-lectures .sc-who { width: 15%; }
.study-table-lectures .sc-mat { width: 10.5em; }
.study-table .cs-slides { width: auto; white-space: nowrap; }
.study-table :is(th, td).cs-slides, .study-table :is(th, td).cs-slides:last-child { padding-inline: var(--space-3); text-align: center; }  /* centred with the same inset on both sides, so the last column does not touch the edge */  /* the column takes its width from the colgroup, not the 1% of course tables */
.study-table .st-material-group { display: inline-grid; justify-items: center; white-space: nowrap; color: var(--accent); font-size: var(--text-meta); font-weight: var(--weight-emphasis); }
.study-table .st-material-group + .st-material-group { margin-left: var(--space-5); }  /* Slides and Lab read as two columns, not one run of links (교수 2026-11-03) */
.study-table .st-material-group > * { grid-area: 1 / 1; }  /* the hidden widest entry sizes the slot, so a group starts at the same place in every row */
.study-table th .st-material-head { color: inherit; font: inherit; }  /* heading labels (Slides, Lab) take the th style; the hidden entry under each sizes the slot to match the rows */
.study-table th .st-material-head .cs-slot { text-transform: none; letter-spacing: normal; }
.study-table td .st-slot-head { font-size: var(--text-small); text-transform: uppercase; letter-spacing: .06em; }  /* the hidden heading word in each row, so a slot is never narrower than its heading */
.study-table .cs-slides a { display: inline-block; margin-right: 0; }  /* Keep all material links on one line. */
.st-links a, .st-links span { display: inline-block; vertical-align: top; margin-right: var(--space-3); font-size: var(--text-meta); }  /* top, not baseline: a name that folds onto two lines in a narrow column (1024px) would otherwise put the row's baseline on its last line and push the rest of the row down */
.st-links a { color: var(--text); }
.st-links a:hover { color: var(--accent); }
.st-lectures a { color: var(--accent); margin-right: 0; }  /* "Lec 5, 6" reads as one list, left-aligned like the Papers column (교수 2026-11-04) */
.st-who { color: var(--muted); font-size: var(--text-meta); }
.is-optional .cs-title { color: var(--muted); font-weight: var(--weight-regular); }

/* Public aggregate statistics; member details are rendered only after decrypting. */
.study-member-unlock { padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius-2); }
.study-member-unlock p { margin: 0 0 var(--space-4); color: var(--muted); }
.study-unlock-fields { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.study-unlock-fields label { font-size: var(--text-meta); }
.study-unlock-fields input { min-width: 0; max-width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-1); color: var(--text); background: var(--bg); font: inherit; }
.study-unlock-fields button { padding: var(--space-2) var(--space-4); border: 1px solid var(--accent); border-radius: var(--radius-1); color: var(--accent); background: var(--bg); font: inherit; font-size: var(--text-control); font-weight: var(--weight-emphasis); cursor: pointer; }
.study-unlock-fields button:disabled { opacity: .6; cursor: wait; }
.study-unlock-message { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--text-meta); }
.study-unlock-message:empty { display: none; }
.study-home-overview .study-term-heading h3 { margin: 0; }
.study-home-overview .study-term-heading h3 span { margin-left: var(--space-3); color: var(--muted); font-size: var(--text-meta); font-weight: var(--weight-regular); }
@media (max-width: 680px) {
  .study-unlock-fields label { width: 100%; }
  .study-unlock-fields input { flex: 1 1 8em; width: 8em; }
}

/* Study member directory: source-sheet column order, one row per person. */
.study-member-group h3 span { margin-left: var(--space-3); color: var(--muted); font-size: var(--text-meta); font-weight: var(--weight-regular); }
.study-members-table tr.is-representative > * { background: var(--callout-surface); }  /* the term's student representative leads its tab (교수 2026-11-02) */
.study-member-role { padding: 0 var(--space-2); border-radius: var(--radius-1); background: var(--accent-soft); color: var(--accent); font-size: var(--text-small); font-weight: var(--weight-emphasis); white-space: nowrap; }
.study-members-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-body); }
/* Column widths = longest content (heading or value) + one even gutter of about 48px at the 1200px container, so every gap between
   columns reads the same and the table breathes instead of crowding left; Participation takes what is left.
   2026-11-04 교수: Name and POSTECH ID were too far apart, then everything looked squeezed. */
.study-members-table .sm-n { width: 5.8%; }
.study-members-table .sm-cohort { width: 8.8%; }
.study-members-table .sm-year { width: 8.3%; }
.study-members-table .sm-department { width: 11.8%; }
.study-members-table .sm-name { width: 9%; }  /* names only; the representative's 대표 chip sits in the # column */
.study-members-table .sm-email { width: 12.3%; }
.study-members-table .sm-linkedin { width: 8.8%; }
.study-members-table .sm-participation { width: 35.2%; }
@media (min-width: 961px) and (max-width: 1179px) {  /* narrower table: POSTECH ID needs more share so the longest ID stays on one line */
  .study-members-table .sm-n { width: 5%; }
  .study-members-table .sm-cohort { width: 8.5%; }
  .study-members-table .sm-year { width: 8.5%; }
  .study-members-table .sm-department { width: 11.5%; }
  .study-members-table .sm-name { width: 9%; }
  .study-members-table .sm-email { width: 14.8%; }
  .study-members-table .sm-linkedin { width: 8.5%; }
  .study-members-table .sm-participation { width: 34.2%; }
}
.study-members-table th, .study-members-table td { padding: var(--space-3) var(--space-2); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.study-members-table thead th { padding-top: 0; padding-bottom: var(--space-2); border-bottom-color: var(--text); color: var(--muted); font-size: var(--text-small); font-weight: var(--weight-emphasis); text-transform: uppercase; letter-spacing: .06em; }  /* same table head as the course and study schedules */
.study-members-table tbody th { font-weight: var(--weight-emphasis); overflow-wrap: anywhere; }
.study-members-table .study-member-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.study-members-table td { overflow-wrap: anywhere; }
.study-members-table th:first-child, .study-members-table td:first-child { padding-left: 0; }  /* the table starts on the page edge */
.study-members-table :is(th, td):is(:nth-child(5), :nth-child(8)) { padding-left: var(--space-5); }  /* left-aligned columns after a centred one need a little more room to match the other gaps */
.study-members-table th:last-child, .study-members-table td:last-child { padding-right: 0; }  /* equal inline padding keeps centred values truly centred */
.study-member-email { color: var(--muted); overflow-wrap: anywhere; }
.study-member-markers { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.study-member-marker { padding: 0 var(--space-2); border-radius: var(--radius-1); background: var(--surface); color: var(--muted); font-size: var(--text-small); white-space: nowrap; text-decoration: none; }
/* Cohort, entry, department and participation open the matching list (교수 2026-11-03): they read as plain table text and turn accent on hover */
.study-member-link { color: inherit; text-decoration: none; }
.study-member-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.study-member-marker:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
/* Hovering or focusing a name shows that student's POVIS photo above it (교수 2026-11-03). The photo comes from the encrypted roster only. */
.study-member-name { position: relative; }
.study-member-photo-note { margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--text-meta); }
/* No underline under names: nearly everyone has a photo and the note above the tabs says so (2026-11-03) */
.study-member-photo { position: absolute; z-index: 5; bottom: calc(100% + var(--space-2)); left: 0; width: 96px; max-width: none; height: 128px; object-fit: cover; border-radius: var(--radius-2); border: 1px solid var(--line); background: var(--surface); visibility: hidden; pointer-events: none; }
.study-member-name:is(:hover, :focus) .study-member-photo { visibility: visible; }
.study-member-name:hover { color: var(--accent); }  /* the one hover cue: the name that opens a photo turns accent (2026-11-03 디자인 점검) */
/* No photo anywhere: one shared default profile figure, drawn with tokens so it follows the theme (교수 2026-11-03) */
.study-member-photo.is-default { display: block; overflow: hidden; }
.study-member-photo.is-default::before { content: ""; position: absolute; inset: 0; background: var(--muted); opacity: .45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 128'%3E%3Ccircle cx='48' cy='50' r='20'/%3E%3Cpath d='M10 128c0-30 17-46 38-46s38 16 38 46z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 128'%3E%3Ccircle cx='48' cy='50' r='20'/%3E%3Cpath d='M10 128c0-30 17-46 38-46s38 16 38 46z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.study-member-name:focus:not(:focus-visible) { outline: none; }  /* a tap shows the photo without a focus ring */
/* LinkedIn: a small 'in' chip in the marker style, accent on hover (교수 2026-11-03) */
.study-member-in { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-1); background: var(--surface); color: var(--muted); font-size: var(--text-small); font-weight: var(--weight-heading); text-decoration: none; }
.study-member-in:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
@media (max-width: 960px) {
  .study-members-table, .study-members-table tbody { display: block; }
  .study-members-table thead { display: none; }
  .study-members-table colgroup { display: none; }
  /* Narrow screens: one compact card per person. Line 1 "# Name", line 2 cohort · entry · department · email, line 3 participation. */
  .study-members-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .study-members-table th, .study-members-table td { display: block; padding: 0; border: 0; text-align: left; }
  .study-members-table .study-member-n { order: 0; min-width: 2.75em; font-size: var(--text-meta); }  /* room for the 대표 chip */
  .study-members-table tbody th { order: 1; flex: 1 1 calc(100% - 3.75em); }
  .study-members-table td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7)) { order: 2; color: var(--muted); font-size: var(--text-meta); }
  .study-members-table td:nth-child(2) { margin-left: calc(2.75em + var(--space-2)); }
  .study-members-table td:is(:nth-child(2), :nth-child(3), :nth-child(4))::after { content: "\00b7"; margin-left: var(--space-2); }
  .study-members-table td:last-child { order: 3; flex-basis: 100%; padding-left: calc(2.75em + var(--space-2)); }
  .study-members-table td:empty { display: none; }
  .study-members-table tr.is-representative { padding-inline: var(--space-3); background: var(--callout-surface); }
  .study-members-table tr.is-representative > * { background: none; }
}

/* Grading: item and weight on one line */
.course-grading { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); }  /* two to four items share the row evenly */
.course-grading li { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-4) var(--space-5); background: var(--tone-row); border-radius: var(--radius-2); }  /* grading is logistics */
.course-grading strong { color: var(--tone); font-weight: var(--weight-heading); }
.course-grading strong { font-size: var(--text-lead); }
.course-note { margin-top: var(--space-4); color: var(--muted); font-size: var(--text-meta); }

@media (max-width: 960px) {
  .study-table .sc-topic { width: 20%; }
  .study-table .sc-papers { width: 11%; }
  .study-table .st-links[data-label] { position: relative; padding-left: 5.2em !important; }  /* cards drop the table heading, so Papers and Demo name themselves; the label sits in its own gutter, so wrapped links start under the first one (교수 2026-11-04) */
  .study-table .st-links[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 0; color: var(--muted); font-size: var(--text-small); font-weight: var(--weight-emphasis); text-transform: uppercase; letter-spacing: .06em; line-height: calc(1.5 * var(--text-meta)); }
  .course-parts, .course-grading { grid-template-columns: 1fr; gap: var(--space-3); }
  .course-hero { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 680px) {
  .study-learning-path { grid-template-columns: 1fr; gap: var(--space-4); }
  .study-step-mark::before { display: none; }
  .study-term-details .course-facts { grid-template-columns: 1fr; gap: var(--space-4); }
  .study-term-details .course-fact + .course-fact { border-top: 1px solid var(--line); padding-top: var(--space-4); }
  .course-lead { font-size: var(--text-body); }
  .course-brand { flex-wrap: wrap; }
  .course-meta span + span::before, .course-eyebrow span + span::before { content: none; }
  .study-tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-term-heading { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .study-term-heading .course-sheet { margin-left: 0; }  /* the term name, then Study sheet under it on every term; a long name used to push the link alone to the right end of its own line */
  .study-tablist button { min-width: 0; padding-inline: var(--space-3); }
  .course-fact { grid-template-columns: 1fr; gap: 0; }
  .course-schedule thead { display: none; }
  .course-schedule, .course-schedule tbody, .course-schedule tr { display: block; width: auto; }
  .course-schedule tr:not(.course-part-row) { display: grid; grid-template-columns: minmax(1.4em, auto) minmax(0, 1fr); gap: 2px var(--space-3); margin-bottom: 3px; padding: var(--space-3); background: var(--tone-row); border-radius: var(--radius-1); }
  .course-schedule tr.tone-none { box-shadow: inset 0 -1px 0 var(--line); border-radius: 0; }
  .course-part-row th { display: block; }
  .course-schedule td { display: block; width: auto; padding: 0 !important; border: 0; background: none; white-space: normal; }
  .course-schedule tr.tone-none td { box-shadow: none; }
  .is-next { box-shadow: inset 0 0 0 2px var(--accent) !important; }
  .is-next td, .is-next td:first-child, .is-next td:last-child { box-shadow: none !important; }  /* on a phone the card carries the one frame; the first and last cell rules above would draw a second one inside it */
  .cs-date { grid-column: 1 / -1; }
  .course-schedule :is(th, td):is(.cs-n, .cs-date, .cs-slides, .st-lectures, .project-round) { text-align: left; }
  .cs-n:empty { display: none !important; }  /* the number column is at least two digits wide (1.4em), so titles line up from 9 to 10 */
  .cs-n:empty + .cs-topic { grid-column: 1 / -1; }
  .cs-slides, .cs-reading { grid-column: 1 / -1; }
  .cs-slot { display: none; }
  .cs-mat > span:not(:empty) + span:not(:empty) { margin-left: var(--space-3); }  /* phones: PDF and Lab sit side by side with the usual gap (each link is now in its own column span) */
  .cs-mat a { display: inline-block; padding: 13px 6px; margin: -13px -6px; }  /* a thumb-sized target (about 44px tall) around the same text; the negative margin keeps every line where it was (교수 2026-11-05) */
  .cs-slides:empty, .cs-reading:empty { display: none !important; }
  .cs-session { display: block; }
  .cs-session-meta { margin-top: var(--space-1); text-align: left; }  /* on a phone, place and time follow the speaker */
  .project-round { grid-column: 1 / -1; }
  .project-round:empty { display: none !important; }
  .project-round a { display: inline; margin: 0 0 0 var(--space-3); }  /* phones keep one line per round */
  .project-round::before { content: attr(data-round) "\00a0\00a0"; color: var(--muted); font-size: var(--text-small); font-weight: var(--weight-emphasis); text-transform: uppercase; letter-spacing: .06em; }

  .study-table colgroup { display: none; }
  .study-table .cs-date { order: -1; }  /* cards open like the course cards: date, then number and title on one line */
  .st-links, .st-who { grid-column: 1 / -1; }
  .st-links:empty, .st-who:empty { display: none !important; }
  .study-table .st-material-group:has(> span:first-child:empty) { display: none; }
  .study-table .st-material-group, .study-table .st-material-group + .st-material-group { margin: 0 var(--space-2) 0 0; }
  .study-table :is(th, td).cs-slides, .study-table :is(th, td).cs-slides:last-child { padding-inline: 0; text-align: left; }  /* cards read left: PDF and Lab start at the card edge like the papers, not centred in the card */
}

/* Study schedules have more columns than course schedules; stack them at tablet width. */
@media (min-width: 681px) and (max-width: 960px) {
  .study-table tr > td:first-child { padding-left: 0; }  /* the number starts at the card edge like the date above it */
  .study-term-details .course-facts { grid-template-columns: 1fr 1fr; }  /* three narrow columns broke "Prof. Sangwoo / Mo"; two people side by side, then place and time across */
  .study-term-details .course-facts > .course-meeting { grid-column: 1 / -1; }
  .study-table thead, .study-table colgroup { display: none; }
  .study-table, .study-table tbody, .study-table tr { display: block; width: auto; }
  .study-table tr { display: grid; grid-template-columns: minmax(1.4em, auto) minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin-bottom: var(--space-1); padding: var(--space-3); background: var(--tone-row); border-radius: var(--radius-1); }
  .study-table td { display: block; width: auto; padding: 0; border: 0; background: none; white-space: normal; }
  .study-table .cs-date, .study-table .st-links, .study-table .st-who, .study-table .cs-slides { grid-column: 1 / -1; }
  .study-table .cs-date { order: -1; }
  .study-table .st-links:empty, .study-table .st-who:empty, .study-table .cs-slides:empty { display: none; }
  .study-table :is(th, td):is(.cs-n, .cs-date, .cs-slides, .st-lectures) { text-align: left; }
  .study-table .cs-slot, .study-table .st-material-group:has(> span:first-child:empty) { display: none; }  /* cards read left, so empty slots would only indent */
  .study-table .st-material-group, .study-table .st-material-group + .st-material-group { margin: 0 var(--space-2) 0 0; }
  .study-table :is(th, td).cs-slides, .study-table :is(th, td).cs-slides:last-child { padding-inline: 0; text-align: left; }  /* cards read left: PDF and Lab start at the card edge like the papers, not centred in the card */
}

/* One table-owned bottom rule for every course/study table, including mobile and hidden term panels. */
.course-schedule tbody > tr:last-child.tone-none,
.course-schedule tbody > tr:last-child.tone-none td { box-shadow: none; }
/* Every course and study page ends with main's usual room before the footer and keeps the footer rule, so the last row or card never touches it (교수 2026-11-02, AI Study; courses the same since 2026-11-04). */

/* Connected milestones: dates, expected work and presentation format. */
.project-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-5) 0 0; padding: 0; list-style: none; counter-reset: milestone; }
.project-timeline > li { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--card-padding); background: var(--surface); border-radius: var(--radius-2); }  /* three blocks: team formation, proposal, final */
.project-timeline > li:not(:last-child)::after { content: "→"; position: absolute; right: calc(-1 * var(--space-5)); top: 50%; transform: translate(25%, -50%); color: var(--muted); }
.project-milestone { display: flex; align-items: center; gap: var(--space-2); }
.project-milestone::before { counter-increment: milestone; content: counter(milestone); display: grid; place-items: center; flex-shrink: 0; width: 1.5em; height: 1.5em; border: 1px solid var(--line); border-radius: 50%; font-size: var(--text-small); font-weight: var(--weight-emphasis); color: var(--muted); }
.project-timeline-when { color: var(--text); font-size: var(--text-body); font-weight: var(--weight-emphasis); font-variant-numeric: tabular-nums; }
.project-timeline-title { font-size: var(--text-body); font-weight: var(--weight-emphasis); }
.project-timeline p { margin: var(--space-2) 0 0; font-size: var(--text-meta); color: var(--muted); }
.project-timeline p strong { color: var(--text); }
.project-timeline .project-stage-note { margin-top: var(--space-3); font-size: var(--text-small); }
.project-timeline .project-presentation { margin-top: var(--space-3); color: var(--text); font-weight: var(--weight-emphasis); }
.project-deliverables { margin: var(--space-2) 0 0; padding-left: var(--space-4); color: var(--muted); font-size: var(--text-meta); }
.project-deliverables li + li { margin-top: var(--space-2); }
@media (max-width: 680px) {
  .project-timeline { grid-template-columns: 1fr; gap: var(--space-6); }
  .project-timeline > li:not(:last-child)::after { content: "↓"; left: 50%; right: auto; top: auto; bottom: calc(-1 * var(--space-6)); transform: translate(-50%, 0); }
}

/* AI Study Home: hero (copy + weekly-loop picture) -> term cards -> community -> join.
   Detailed learning flows and term logistics remain in Schedule (교수 2026-11-02: Home 이 글뿐이라 그림 위주로). */
.study-home-band { margin-bottom: 0; }
.study-home-hero { padding: var(--space-7) 0 var(--space-6); }
.study-home-hero .study-intro { padding-top: 0; }
.study-home-advisor { margin: var(--space-4) 0 0; color: var(--muted); font-size: var(--text-meta); }
.study-home-advisor a { color: var(--text); }
.study-home-hero .hero-copy { grid-column: 1 / -1; }  /* one column, no picture */
.study-home-hero .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 0; }
.study-home-hero .button { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-5); border: 1px solid var(--accent); border-radius: var(--radius-1); color: var(--accent); background: var(--bg); font-size: var(--text-control); font-weight: var(--weight-emphasis); text-decoration: none; transition: background-color .15s; }
.study-home-hero .button.primary { background: var(--accent); color: var(--white); }
.study-home-hero .button:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.study-home-hero .button.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); color: var(--white); }
/* Term timeline: oldest cohort on the left, the current term on the right. */
.study-term-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.study-term-card { display: flex; flex-direction: column; gap: var(--space-3); }
.study-term-step { position: relative; display: flex; align-items: center; gap: 0; min-height: 24px; color: var(--muted); font-size: var(--text-meta); }
.study-term-step::before { content: ""; position: absolute; left: 6px; right: calc(-1 * var(--space-5)); top: 50%; height: 2px; background: var(--line); }
.study-term-card:last-child .study-term-step::before { display: none; }  /* the line ends at the latest term's dot; nothing trails past its label */
.study-term-card:nth-last-child(2) .study-term-step::before { background: linear-gradient(90deg, var(--line), var(--accent)); }
.study-term-dot { position: relative; flex: none; width: 14px; height: 14px; border: 3px solid var(--line); border-radius: 50%; background: var(--bg); }
.study-term-when { position: relative; padding: 0 var(--space-2); background: var(--bg); }  /* the line breaks on both sides of the label */
.study-term-card.is-current .study-term-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.study-term-card.is-current .study-term-when { color: var(--accent); font-weight: var(--weight-emphasis); }
.study-term-card > a { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius-2); background: var(--bg); color: var(--text); text-decoration: none; transition: border-color .15s; }
.study-term-card > a:hover { border-color: var(--accent); text-decoration: none; color: var(--text); }  /* one hover per link on Home: the border turns accent (교수 2026-11-03) */
.study-term-card.is-current > a { border-color: var(--callout-line); background: var(--callout-surface); }
.study-term-card > a img { width: 56px; height: 56px; margin-bottom: var(--space-2); border-radius: var(--radius-1); }
.study-term-now { position: relative; padding: 2px var(--space-2); border-radius: 999px; line-height: 18px; background: var(--accent); color: var(--white); font-size: var(--text-small); font-weight: var(--weight-emphasis); }  /* 22px tall: fits the 24px step row so the current card starts on the same line as the others */
.study-term-card .study-term-title { margin: 0; font-size: var(--text-body); font-weight: var(--weight-emphasis); line-height: 1.4; letter-spacing: normal; }  /* the shared card-heading role */
.study-term-count { color: var(--accent); font-size: var(--text-meta); font-weight: var(--weight-emphasis); }
.study-term-tldr { padding-top: var(--space-3); color: var(--muted); font-size: var(--text-meta); line-height: var(--leading-card); }  /* the term in one sentence (tldr), shared with the Schedule tab; starts right under the count so the four cards' sentences begin on one line */

/* Member statistics: one panel row of summary numbers, then cohort bars and a department treemap side by side. */
.study-stat-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5); }
.study-stat-head h2 { margin: 0; }
.study-stat-members { color: var(--accent); font-size: var(--text-control); }
.study-stat-summary { margin: 0; }
.study-stat-summary > div { display: flex; align-items: baseline; gap: var(--space-2); }  /* 39 members since Fall 2025 */
.study-stat-summary dt { color: var(--muted); font-size: var(--text-meta); }
.study-stat-summary dd { margin: 0; font-size: var(--text-h2); font-weight: var(--weight-heading); line-height: 1.2; }
.study-stat-breakdowns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-5); }
.study-stat-panel { margin: 0; }
.study-stat-panel figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.study-stat-panel h3 { margin: 0; }
.study-cohort-bar .is-new { background: var(--accent); }
.study-cohort-bar .is-existing { background: color-mix(in srgb, var(--accent) 35%, var(--bg)); }
/* the latest bar names its two parts in place of a corner legend (labels sit on the shape) */
.study-cohort-bar > span:not(.study-chart-value) { display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
.study-bar-key { padding: 0 var(--space-1); font-size: var(--text-small); white-space: nowrap; }
.study-cohort-bar .is-new .study-bar-key { color: var(--white); }
.study-cohort-bar .is-existing .study-bar-key { color: var(--text); }
.study-cohort-chart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); align-items: end; height: 320px; }  /* same height as the department map beside it */
.study-cohort-chart li { height: 100%; }
.study-cohort-link { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; color: inherit; text-decoration: none; }
.study-cohort-link:hover { color: inherit; text-decoration: none; }
.study-cohort-link:is(:hover, :focus-visible) .study-cohort-bar { outline: 2px solid var(--text); outline-offset: 2px; }  /* same one hover as a department tile */
.study-cohort-track { display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--space-5); }
.study-cohort-bar { position: relative; display: flex; flex-direction: column; min-height: 24px; border-radius: var(--radius-1) var(--radius-1) 0 0; overflow: visible; }
.study-cohort-bar > span:first-of-type { border-radius: var(--radius-1) var(--radius-1) 0 0; }
.study-cohort-bar .study-chart-value { position: absolute; bottom: 100%; left: 0; right: 0; padding-bottom: var(--space-1); text-align: center; font-size: var(--text-body); font-weight: var(--weight-heading); font-variant-numeric: tabular-nums; }
.study-cohort-label { display: flex; flex-direction: column; align-items: center; padding-top: var(--space-2); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-small); }
.study-cohort-label b { color: var(--text); font-size: var(--text-meta); font-weight: var(--weight-emphasis); }
.study-cohort-chart li:last-child .study-cohort-label b { color: var(--accent); }
.study-dept-map { position: relative; height: 320px; }
.study-dept-map li { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-2) var(--space-3); border: 2px solid var(--bg); border-radius: var(--radius-1); background: color-mix(in srgb, var(--accent) var(--share, 30%), var(--bg)); color: var(--text); font-size: var(--text-meta); overflow: hidden; }
.study-dept-map li .study-chart-value { font-size: var(--text-h2); font-weight: var(--weight-heading); line-height: 1.2; }
.study-dept-map li.is-dark { color: var(--white); }
.study-dept-map li span { overflow: hidden; font-weight: var(--weight-emphasis); }
.study-dept-map li small { margin-left: 2px; font-size: var(--text-small); font-weight: var(--weight-regular); opacity: .85; }
.study-dept-map li.is-small small { display: none; }
.study-dept-map li.is-small { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: 0 var(--space-1); padding: var(--space-1); font-size: var(--text-small); text-align: center; }
.study-dept-map li.is-small span { max-width: 100%; white-space: nowrap; text-overflow: ellipsis; }
.study-dept-map li.is-small .study-chart-value { font-size: var(--text-meta); }
.study-dept-map li.is-tiny { flex-direction: column; flex-wrap: nowrap; gap: var(--space-1); }  /* name over count, centred, in a thin tile */
.study-dept-map:not(.is-drawn) { height: auto; }
.study-dept-link { position: absolute; inset: 0; border-radius: inherit; }  /* the whole tile opens Members filtered to that department */
.study-dept-link:is(:hover, :focus-visible) { outline: 2px solid var(--text); outline-offset: -4px; }
.study-dept-map:not(.is-drawn) li { position: static; }
.study-home-community > h2 { font-size: var(--text-h2); }
.study-home-join { padding-top: var(--section-gap); }
.study-home-join .study-join-next { margin-top: var(--space-4); }
.study-home-join .study-join-next a { color: var(--accent); }
@media (max-width: 1024px) {
  .study-term-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-term-card:nth-child(2n) .study-term-step::before { right: 0; }  /* a row's last line stops at its card edge */
}
@media (max-width: 680px) {
  .study-term-cards { grid-template-columns: 1fr; gap: var(--space-4); }
  /* phones: icon beside the text so four terms do not make a long scroll */
  .study-term-card > a { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1); align-items: start; }
  .study-term-card > a img { grid-row: 1 / span 3; width: 48px; height: 48px; margin: 0; }
  .study-term-card > a > :not(img) { grid-column: 2; }
  .study-term-tldr { padding-top: var(--space-2); }
  .study-cohort-label { white-space: nowrap; }
  .study-dept-map li.is-sliver > span:first-child { display: none; }  /* a sliver keeps only its number; the name stays in its tooltip */
  /* phones: the timeline runs down the left; cards sit right of the line, under their term label */
  .study-term-card { position: relative; }
  .study-term-card > a { margin-left: 22px; }
  .study-term-step { position: static; }
  .study-term-step::before { left: 6px; right: auto; top: 12px; bottom: calc(-1 * var(--space-4) - 12px); width: 2px; height: auto; }  /* dot to the next term's dot */
  .study-term-card:nth-last-child(2) .study-term-step::before { background: linear-gradient(180deg, var(--line), var(--accent)); }
  .study-home-hero .hero-actions .button { width: 100%; justify-content: center; }  /* stacked buttons share one width */
  .study-stat-breakdowns { grid-template-columns: 1fr; gap: var(--space-6); }
  .study-cohort-chart { height: 240px; gap: var(--space-3); }
  .study-dept-map { height: 240px; }
}

.study-home-community > .section-next { margin-top: var(--space-5); }


/* Header layout is shared by the lab, AI Study and courses, including the wrap point. */
@media (min-width: 681px) and (max-width: 900px) {  /* "MOAI Lab | POSTECH" and the six tabs share one line from 901px (교수 2026-11-03) */
  .site-head { display: block; }
  .site-head .head-id { margin-bottom: var(--space-2); }
}
@media (max-width: 680px) {
  .brand-word, .brand-code, .brand-sub, .brand-school { font-size: var(--text-lead); line-height: 1.3; }
}
@media (max-width: 480px) {
  .brand-word, .brand-code, .brand-sub, .brand-school { font-size: var(--text-body); white-space: nowrap; }  /* MOAI Lab | AI Study stays on one line on phones; the course code stays too, the same size as the title (교수 2026-11-04) */
  .brand-mark { height: 26px; }
}
@media (max-width: 359px) {
  .head-id:has(.brand-code) :is(.brand-word, .brand-code, .brand-school) { font-size: var(--text-control); }  /* "IMEN574 Programming for AX | POSTECH" is 2px short of 320px at 16px; one step down keeps it on one line. The lab and AI Study headers keep their size */
}