:root {
  --read: 1440px;
  /* 로고에서 뽑은 색이 전부다. 파랑·초록·주황·보라를 섞을 이유가 없다. */
  --navy: #0c1854;
  --navy-ink: #17246b;
  --navy-tint: #e7eaf5;
  --navy-line: #ccd3e8;
  /* 본문 안에서 굵게 강조한 곳에 쓰는 파랑. --navy 로 칠했더니 본문(--ink-soft)
     보다 오히려 어두워서, 파랗다기보다 그냥 진해 보였다 — 강조가 눈에 안 띄었다.
     본문보다 밝고 채도가 높아야 강조로 읽힌다. 흰 바탕 대비 6.27:1 (AA 통과).
     링크(--navy)와 색이 다르지만 링크에는 밑줄이 있어 서로 헷갈리지 않는다. */
  --emph: #1b56d6;
  --red: #a81818;
  --red-tint: #f8e8e8;
  --red-line: #e8c9c9;
  --gray: #909090;
  --gray-ink: #5f6472;
  --gray-line: #e2e5ec;
  /* 본문 잉크 두 단계와 옅은 남색 바닥. 같은 역할인데 #1a1f2e/#14192a/#171c2e,
     #3a4256/#414a5e 처럼 미세하게 다른 값이 흩어져 있었다 — 이름으로 묶는다. */
  --ink: #1a1f2e;
  --ink-soft: #3a4256;
  --wash: #f7f9fd;
}

@charset "utf-8";
/* ============================================================
   추가 컴포넌트 — 다축 필터 바 · 소셜 아이콘 · AI 어시스턴트 데모
   (style.css / sub.css 다음에 로드)
   ============================================================ */

/* ---------------------------------------------------------------- 필터 바 */
.filterbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
  border-top: 1px solid var(--text); border-bottom: 1px solid var(--gray-line);
  padding: 9px 0; margin-bottom: 12px;
}
.filterbar + .filterbar { border-top: 0; margin-bottom: 26px; }
.fcap {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sand); margin-right: 12px; white-space: nowrap;
}
.fbtn {
  font-size: 13px; color: #888; padding: 5px 12px;
  border-bottom: 2px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0;
}
.fbtn:hover { color: var(--text); }
.fbtn.is-on { color: var(--text); font-weight: 600; border-bottom-color: var(--sand); }

/* 두 개 이상 겹칠 때 두 번째 바가 첫 바 아래에 붙도록 */
.filterbar:nth-of-type(2) { top: 44px; }

/* 세미나 학기 뱃지 */
.sem .term {
  display: inline-block; font-size: 11px; color: var(--body-gray);
  border: 1px solid var(--gray-line); padding: 1px 7px; margin-top: 4px;
}

/* ─── 메인 히어로 ──────────────────────────────────────────────
   배너 문구가 JPG 안에 구워져 있던 것을 실제 텍스트로 옮겼다.
   원본과 같은 2단 구성이다: 위는 남색 머리띠, 아래는 밝은 본문.
   협력기관 로고가 밝은 쪽에 앉아야 흰 카드처럼 뜨지 않는다. */
.hero {
  /* 세 슬라이드의 글줄 수가 달라 배너 높이가 튀었다. 가장 긴 장에 맞춰
     고정하고, 남는 공간은 본문이 흡수한다.
     560px 는 첫 화면을 배너 하나로 채워, 아래에 무엇이 더 있는지 안 보였다.
     440px 면 배너 아래 소개 글의 첫 줄이 함께 보인다. */
  height: 440px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* 도표는 저마다 흰 바탕 위에 그려져 있다. 아래 칸을 회색으로 두면 그 흰 바탕이
     '흰 상자'로 도드라져 그림이 액자에 갇힌 것처럼 보였다. 같은 흰색으로 맞추면
     도표만 떠 보이고, 아래 경계선이 본문과의 구분을 대신한다. */
  background: #fff;
  border-bottom: 1px solid #e6eaf2;
}
.hero_head {
  /* 배너를 얇게 하면서도 도표는 크게 보여야 한다. 둘 다 같은 440px 를 나눠 쓰므로,
     머리띠에서 아낀 만큼이 그대로 도표의 키가 된다. */
  padding: 17px 48px 16px;
  background: linear-gradient(120deg, #101a4d 0%, var(--navy-ink) 60%, #1d2f86 100%);
  color: #fff;
}
.hero_ko {
  margin: 0 0 5px;
  font-size: 30px; line-height: 1.26; font-weight: 800; letter-spacing: -.022em;
  /* 흰색을 .hero_head 에서 물려받고 있었는데, 바닥값의 h1~h6 잉크색이 h3 에 직접
     걸리면서 상속을 이겼다 — 상속은 요소에 직접 걸린 규칙에 항상 진다.
     남색 띠 위에 앉는 제목이니 색을 여기에 못박는다. */
  color: #fff;
}
.hero_en { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #b9c6ff; }
.hero_lead {
  margin: 0; padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: 18px; line-height: 1.45; color: #e8ecff;
}
.hero_main {
  flex: 1;
  display: grid;
  /* 도표가 이 배너에서 가장 볼 것이 많은 쪽이다. 글보다 넓게 준다. */
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  /* 세 슬라이드에서 같은 자리에 오도록: 체크 목록은 남는 공간의 가운데,
     협력기관 로고는 아래에 붙인다. 슬라이드마다 줄 수가 달라도 위치가 안 흔들린다. */
  gap: 30px; align-items: stretch;
  padding: 14px 48px 16px;
  /* 도표는 폭이 정해지면 제 비율대로 키를 정한다. 그 키가 배너보다 크면 이 칸이
     배너 밖으로 밀려나고, 넘친 부분(협력기관 로고)은 그대로 잘려 사라졌다.
     칸 높이를 배너가 남긴 만큼으로 못박아 그림이 그 안에 들어오게 한다. */
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
/* 왼쪽 칸을 세로로 채워, 체크는 가운데 로고는 바닥에 둔다 */
.hero_txt { display: flex; flex-direction: column; min-height: 0; }
.hero_pts {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  margin: 0 0 20px; padding: 0; list-style: none;
}
.hero_pts li {
  position: relative; margin-bottom: 11px; padding-left: 30px;
  font-size: var(--t-body); line-height: 1.5; color: var(--ink);
}
.hero_pts li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  font-size: 17px; font-weight: 800; color: var(--navy-ink);
}
.hero_pts strong { color: #c2410c; font-weight: 800; }
.hero_partners { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 26px; margin: auto 0 0; }
/* 원본에서 잘라낸 로고. 배경이 순백이라 밝은 본문 위에서 이음매가 안 보인다. */
.hero_partners img { height: 38px; width: auto; }
.hero_fig {
  /* 세 도표의 가로세로비가 2.65 / 3.63 / 1.45 로 제각각이라 그냥 두면
     슬라이드마다 그림 크기가 달라진다. 같은 크기 상자에 담아 맞춘다. */
  /* 도표마다 가로세로비가 달라 가운데 두면 오른쪽에 남는 자리가 슬라이드마다
     들쭉날쭉했다. 오른쪽 끝에 붙이면 머리띠의 오른쪽 끝과 한 줄로 선다. */
  margin: 0; display: flex; align-items: center; justify-content: flex-end;
  width: 100%; min-width: 0; min-height: 0; height: 100%;
}
/* 배너의 도표는 작게 담길 수밖에 없다. 눌러서 그 과제의 글로 가면 원본 크기로 본다. */
.hero_fig a { display: block; height: 100%; min-width: 0; }
.hero_fig a img { transition: transform .2s ease; }
.hero_fig a:hover img { transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) { .hero_fig a:hover img { transform: none; } }
.hero_fig img {
  /* 잘라낸 도표마다 가로세로비가 달라 슬라이드 높이가 튀었다.
     세로를 묶어 세 장이 같은 높이로 서게 한다.
     카드(흰 배경·그림자·둥근 모서리)를 씌우면 그림이 액자 안에 갇혀 작아 보인다.
     배경이 이미 흰색이라 액자 없이도 도표가 그대로 떠 보인다. */
  display: block;
  width: 100%; height: 100%; object-fit: contain;
}

/* 상단 메뉴가 막 자리를 잡는 1000~1150px 구간. 배너 높이는 그대로인데 글줄이
   한 줄씩 늘어나 협력기관 로고가 배너 아래로 밀려 잘렸다. 글자만 한 단 줄인다. */
@media (min-width: 1000px) and (max-width: 1150px) {
  .hero_ko { font-size: 26px; }
  .hero_en { font-size: 15px; margin-bottom: 10px; }
  .hero_lead { font-size: 16px; }
  .hero_pts li { font-size: 15.5px; margin-bottom: 9px; padding-left: 26px; }
  .hero_partners img { height: 28px; }
}

@media (max-width: 999px) {
  /* 좁은 화면에서는 두 칸이 위아래로 쌓여 560px 를 넘긴다. 넘친 부분은
     .mainVisual 의 overflow:hidden 에 잘려 도표와 로고가 사라졌다.
     (min-height:0 은 .hero 에 min-height 가 없으므로 아무 일도 하지 않았다.) */
  .hero { height: auto; }
  .hero_head { padding: 22px 20px 18px; }
  .hero_ko { font-size: 20px; }
  .hero_lead { font-size: 14.5px; }
  .hero_main { grid-template-columns: 1fr; padding: 20px 20px 34px; gap: 18px; }
  .hero_partners { gap: 16px; }
  .hero_partners img { height: 26px; }
}

/* ─── 홈 NEWS ─────────────────────────────────────────────────
   전부 같은 회색 작은 글씨라 무엇이 중요한지 안 보였다.
   태그 폭을 고정해 왼쪽을 한 줄로 세우고, 제목을 키워 본문답게 만든다. */
.board013 .board_list li { border-bottom: 1px solid var(--gray-line); }
.board013 .board_list li:last-child { border-bottom: 0; }
.board013 .board_list li a {
  display: grid;
  /* 글자 수가 달라도 태그 폭은 같아야 왼쪽 모서리가 한 줄로 선다 */
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 15px 6px;
}
.board013 .board_list li a:hover { background: var(--wash); }

.ntag {
  display: inline-block;
  width: 96px; box-sizing: border-box;
  padding: 5px 0;
  border-radius: 5px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  line-height: 1.5; text-align: center; white-space: nowrap;
  /* 채운 태그와 외곽선 태그의 높이를 같게 — 없으면 행마다 2px 씩 흔들린다 */
  border: 1px solid transparent;
}
/* 두 색(남색=연구 성과, 빨강=수상·모집) × 세 무게(채움 > 옅은 채움 > 테두리).
   무게가 곧 중요도라, 색을 늘리지 않고도 위계가 선다. */
.ntag-paper   { background: var(--navy); color: #fff; }
.ntag-award   { background: var(--red); color: #fff; }
.ntag-talk    { background: #fff; color: var(--navy-ink); border-color: var(--navy-line); }
/* 갈래는 넷이다. 연구 성과(Paper)·수상(Award)·발표(Talk) 셋만 이름을 갖고,
   신입·모집·과제·언론은 Etc. 로 묶는다. 일곱 갈래였을 때는 'New Member' 가
   96px 칸에 여백을 18px 밖에 남기지 못해 혼자 빽빽해 보였다. */
.ntag-etc     { background: #fff; color: var(--gray-ink); border-color: var(--gray-line); }

/* 제목과 NEW 배지를 담는 칸. min-width:0 이 없으면 이 칸이 제목 길이만큼 부풀어,
   말줄임이 걸리지 않고 긴 제목이 화면 밖으로 나가 가로 스크롤을 만들었다. */
.board013 .board_list .nsub {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
}
.board013 .board_list .subject {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink);
  font-size: 16px; line-height: 1.5; font-weight: 600;
}
.board013 .board_list li a:hover .subject { color: var(--navy-ink); }

/* 최근 60일 항목 표시 */
.nnew {
  flex: none;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--red); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  vertical-align: 1px;
}
.nmeta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.board013 .board_list .date {
  color: var(--gray-ink); font-size: 13.5px; white-space: nowrap;
}

@media (max-width: 999px) {
  .sitesearch { padding: 0 20px; }
}
@media (max-width: 700px) {
  .board013 .board_list li a { grid-template-columns: 88px minmax(0, 1fr); row-gap: 6px; }
  .ntag { width: 88px; }
  .nsub { flex-wrap: wrap; }
  .board013 .board_list .subject { white-space: normal; font-size: 15px; }
  .nmeta { grid-column: 2; justify-content: flex-start; }
}

/* ─── 사이트 검색 (사이드바) ──────────────────────────────────
   정적 사이트라 검색 서버가 없다. assets/search-index.json 을 받아
   브라우저에서 찾는다. 사이드바가 220px 로 좁아 결과는 본문 위로 띄운다. */
.sitesearch { position: relative; margin: 26px 0 6px; padding: 0 20px; }
.ss_label {
  display: block; margin-bottom: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #9aa3b8;
}
.ss_input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid #dde2ee; border-radius: 10px;
  background: #fff; color: var(--ink);
  font-size: 13.5px; font-family: inherit;
}
.ss_input::placeholder { color: #a8b0c2; }
.ss_input:focus {
  outline: none; border-color: var(--navy-ink);
  box-shadow: 0 0 0 3px rgba(23, 36, 107, .1);
}
/* 사이드바 폭에 갇히면 결과가 못 읽힌다 — 본문 쪽으로 넓게 펼친다 */
.ss_results {
  position: absolute; z-index: 60;
  left: 20px; top: 100%; margin-top: 8px;
  width: 460px; max-width: calc(100vw - 48px);
  max-height: 62vh; overflow-y: auto;
  padding: 8px;
  border: 1px solid #e3e8f2; border-radius: 10px; background: #fff;
  box-shadow: 0 14px 38px rgba(16, 26, 77, .16);
}
.ss_count, .ss_empty { margin: 6px 10px 8px; font-size: 12.5px; color: var(--gray-ink); }
.ss_list { list-style: none; margin: 0; padding: 0; }
.ss_list a { display: block; padding: 9px 11px; border-radius: 10px; }
.ss_list a:hover { background: var(--wash); }
.ss_where {
  display: block; margin-bottom: 3px;
  font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #8e97ad;
}
.ss_txt { display: block; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.ss_txt mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }

/* 제목 속 강조는 그 줄 태그와 같은 색을 옅게 깐다. 색은 남색·빨강 둘뿐이다. */
.nkey {
  font-style: normal; font-weight: 700;
  padding: 2px 7px; border-radius: 5px;
  color: var(--navy); background: var(--navy-tint);
}

@media (max-width: 999px) {
  .sitesearch { padding: 0 var(--gutter); margin: 14px 0; }
  .ss_results { width: auto; right: 16px; }
}

/* ─── 홈 카드 그리드 ──────────────────────────────────────────
   4개씩이라 카드가 좁아 제목이 잘렸다. 3개씩으로 넓혀 제목을 살린다. */
.gallery115 .gal_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 24px;
  list-style: none; margin: 0; padding: 0;
  float: none;
}
.gallery115 .gal_list li { width: auto; margin: 0; float: none; }
.gallery115 .gal_tit {
  display: block; margin-top: 12px;
  font-size: 15.5px; line-height: 1.5; font-weight: 600; color: var(--ink);
}
/* BOARD 와 같은 16:9 로 맞춘다. 4:3 은 2:1 에 가까운 과제 도표의 좌우를 크게 잘라먹었다.
   사진이 아니라 도표라 cover 로 채우지 않고 contain 으로 통째로 담는다. */
.gallery115 .thumb {
  display: block; position: relative; overflow: hidden;
  border-radius: 10px; aspect-ratio: 16 / 9; background: #fff;
  border: 1px solid #eceff6;
}
.gallery115 .thumb img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  transition: transform .3s ease;
}
.gallery115 li a:hover .thumb img { transform: scale(1.02); }
.gallery115 li a:hover .gal_tit { color: var(--navy-ink); }

@media (max-width: 1100px) { .gallery115 .gal_list { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .gallery115 .gal_list { grid-template-columns: 1fr; } }

/* ─── 상단 네비게이션 ──────────────────────────────────────────
   원래는 220px 사이드바가 화면 왼쪽을 상시 차지했다. 이 사이트의 본문은
   과제 도표·논문 목록·갤러리처럼 가로를 먹는 것들이라, 메뉴를 위로 올리고
   그 220px 를 본문에 돌려준다. HTML 은 그대로 두고 배치만 바꾼다.
   드롭다운은 main.js 의 is-open 클래스와 CSS 호버를 함께 받는다. */
@media (min-width: 1000px) {
  /* 991px 이하에서는 style.css 가 햄버거 버튼을 띄운다. 여기 상단 메뉴와 겹쳐
     둘 다 보이는 구간(901~991)이 있었다. 상단 메뉴가 있으면 햄버거는 필요 없다. */
  .m-toggle { display: none; }
  .lnb { display: block; }
  .head-group {
    float: none; width: 100%;
    position: sticky; top: 0; z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--gray-line);
  }
  /* 스크롤이 내려가면 바를 띄워 본문과 구분한다 */
  .head-group::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
    background: linear-gradient(rgba(16,26,77,.055), rgba(16,26,77,0));
    pointer-events: none;
  }
  .menu {
    display: flex; align-items: center;
    /* 좁아질수록 사이 간격부터 줄여, 메뉴가 화면을 넘지 않게 한다 */
    gap: clamp(14px, 2.2vw, 34px);
    max-width: none; margin: 0;
    padding: 0 40px;
    background: #fff;
    height: 100px;
  }
  .logo { flex: none; margin: 0; padding: 0; }
  .logo a { display: block; }
  .logo, .menu .logo { padding: 0; margin: 0; height: auto; }
  .menu .logo img { height: 64px !important; width: auto !important; display: block; }

  .lnb { flex: 1; min-width: 0; padding: 0; background: transparent; }
  .depth1 { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
  .depth1 > li {
    position: relative; float: none;
    width: auto; margin: 0; background: transparent; border: 0;
  }
  .depth1 > li > .d1 {
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
    height: 100px; padding: 0 clamp(9px, 1.2vw, 17px);
    background: none;
    font-size: 15.5px; font-weight: 700; line-height: 1;
    color: var(--ink-soft); letter-spacing: -.01em;
    position: relative;
  }
  /* 아코디언 시절 +/- 뱃지를 작은 꺾쇠로 바꾼다 */
  .depth1 > li > .d1:not(.no-sub)::after {
    content: ""; position: relative; right: auto; top: auto; transform: none;
    width: 7px; height: 7px; margin-top: -3px;
    border-right: 1.6px solid #aeb6c8; border-bottom: 1.6px solid #aeb6c8;
    rotate: 45deg;
    transition: rotate .18s ease, border-color .18s ease;
  }
  html.can-hover .depth1 > li:hover > .d1::after,
  .depth1 > li:focus-within > .d1::after { border-color: var(--navy-ink); rotate: 225deg; margin-top: 2px; }
  .depth1 > li.is-open > .d1::after { content: ""; }

  /* 밑줄이 좌우로 자라며 현재 위치를 짚는다 */
  .depth1 > li > .d1::before {
    content: ""; position: absolute;
    left: clamp(9px, 1.2vw, 17px); right: clamp(9px, 1.2vw, 17px); bottom: 0;
    height: 3px; border-radius: 3px 3px 0 0;
    background: var(--navy-ink);
    transform: scaleX(0); transform-origin: center;
    transition: transform .2s ease;
  }
  .depth1 > li:hover > .d1, .depth1 > li:focus-within > .d1 { color: var(--navy-ink); }
  html.can-hover .depth1 > li:hover > .d1::before,
  .depth1 > li:focus-within > .d1::before { transform: scaleX(1); }
  .depth1 > li:has(.on) > .d1 { color: var(--navy-ink); }
  .depth1 > li:has(.on) > .d1::before { transform: scaleX(1); }

  .depth2 {
    display: none;
    position: absolute; left: 8px; top: 100px;
    min-width: 196px; padding: 8px;
    background: #fff;
    border: 1px solid var(--gray-line); border-radius: 14px;
    box-shadow: 0 18px 40px rgba(16, 26, 77, .14);
  }
  /* .can-hover 는 마우스를 처음 움직였을 때 main.js 가 붙인다 */
  html.can-hover .depth1 > li:hover > .depth2,
  .depth1 > li:focus-within > .depth2,
  .depth1 > li.is-open > .depth2 { display: block; animation: ddIn .16s ease; }
  @keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .depth2 li { border: 0; margin: 0; width: auto; background: none; }
  .depth2 a {
    display: block; padding: 10px 13px; border-radius: 10px;
    font-size: 14.5px; font-weight: 500; color: var(--ink-soft); white-space: nowrap;
  }
  .depth2 a:hover { background: #f1f5fd; color: var(--navy-ink); }
  .depth2 a.on { background: var(--navy-tint); color: var(--navy-ink); font-weight: 700; }

  /* 화면이 좁아지면 검색창이 먼저 양보한다. 고정 208px 로 두었더니 1000px 쯤에서
     메뉴가 다 들어갈 자리가 없어 검색창이 화면 밖으로 밀려나고 가로 스크롤이 생겼다. */
  .sitesearch { flex: none; width: clamp(150px, 15vw, 208px); margin: 0; padding: 0; position: relative; }
  .ss_label { display: none; }
  .ss_input {
    padding: 9px 13px 9px 34px; font-size: 13.5px;
    border-radius: 999px; border-color: var(--gray-line); background: #f6f8fc;
  }
  /* 돋보기 */
  .sitesearch::before {
    content: ""; position: absolute; left: 13px; top: 50%; z-index: 1;
    width: 11px; height: 11px; margin-top: -7px;
    border: 1.7px solid #9aa3b8; border-radius: 50%;
    pointer-events: none;
  }
  .sitesearch::after {
    content: ""; position: absolute; left: 22px; top: 50%; z-index: 1;
    width: 6px; height: 1.7px; margin-top: 3px;
    background: #9aa3b8; rotate: 45deg;
    pointer-events: none;
  }
  .ss_input:focus { background: #fff; border-color: var(--navy-ink); }
  .ss_results { left: auto; right: 0; top: 100%; margin-top: 10px; width: min(440px, calc(100vw - 80px)); }

  .content { float: none; width: 100%; }
  /* 1520px 블록을 통째로 가운데 두면 양옆 여백의 경계가 세로선처럼 보이고,
     반대로 폭을 다 풀면 글줄이 늘어져 모바일 페이지처럼 된다.
     그래서 블록은 화면 끝까지 두되(배경이 꽉 차게), 안쪽 내용만 가운데로 모은다. */
  .wrap, .content, .content > * { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }
  .menu { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
}

/* ─── 좌우 여백 ───────────────────────────────────────────────
   블록마다 padding 을 따로 적어 두었더니, 클래스 이름을 바꿀 때마다 목록에서
   하나씩 조용히 빠졌다. .etc003 을 .sec_head 로 바꾼 뒤 PROJECTS·BOARD 머리만
   화면 끝까지 나갔고, .mvp122 를 .boardfeat 로 바꾼 뒤 좁은 화면에서 BOARD
   카드가 가장자리에 붙었다. 본문은 멀쩡한데 그 두 줄만 튀어나와, 보는 사람에게는
   여백을 안 맞춘 것으로 읽힌다 (STYLE.md 5절: 오른쪽 끝은 하나여야 한다).

   그래서 폭은 --gutter 한 곳에서만 정한다. 블록을 새로 만들면 padding 을 새로
   적지 말고 아래 목록에 이름만 더한다. 값은 여기 말고는 없다. */
:root { --gutter: 20px; }
@media (min-width: 901px) {
  /* 블록은 화면 끝까지 두되(배경이 꽉 차게) 안쪽 내용만 --read 폭으로 모은다 */
  :root { --gutter: max(40px, (100% - var(--read)) / 2); }
}

.etc002, .board013, .gallery115, .boardfeat, .sec_head,
.hero_head, .hero_main, .subCon, #footer .inner {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* ─── BOARD ───────────────────────────────────────────────────
   위의 PROJECTS 가 3열인데 여기만 큰 것 하나 + 작은 것 둘이면 두 개의
   다른 규칙이 붙어 있는 것처럼 읽힌다. 같은 3열로 맞추고, 영상과 사진을
   섞어 한 줄에 둔다. 영상은 재생 표시로 구분한다. */
.boardfeat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 24px;
  padding-bottom: 56px;
}
.bf_item { display: flex; flex-direction: column; min-width: 0; }
.bf_shot {
  display: block; position: relative; overflow: hidden;
  border-radius: 10px; background: #eef1f7;
  aspect-ratio: 16 / 9;
}
.bf_shot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.bf_item:hover .bf_shot img { transform: scale(1.04); }
.bf_play {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(23, 36, 107, .86);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  transition: background .2s ease, transform .2s ease;
}
.bf_play::after {
  content: ""; position: absolute; left: 22px; top: 17px;
  border-left: 17px solid #fff;
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.bf_item:hover .bf_play { background: var(--navy-ink); transform: scale(1.07); }
.bf_meta { display: block; margin-top: 13px; }
.bf_kind {
  display: inline-block; margin-bottom: 7px;
  padding: 3px 9px; border-radius: 5px;
  background: var(--navy-tint); color: #3b4a86;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.is-video .bf_kind { background: var(--navy-ink); color: #fff; }
.bf_tit { display: block; font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.bf_item:hover .bf_tit { color: var(--navy-ink); }

@media (max-width: 1100px) { .boardfeat { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .boardfeat { grid-template-columns: 1fr; } }

/* ─── 푸터 ────────────────────────────────────────────────────
   위 메뉴와 똑같은 다섯 항목을 아래에 한 번 더 두고 있었다. 상단 메뉴가 스크롤을
   따라다니므로 아래 것은 하는 일이 없어 걷어냈다. 남은 것은 찾아오는 데 필요한
   정보(주소·연락처)뿐이다. */
#footer { margin-top: 8px; border-top: 1px solid var(--gray-line); background: #fafbfd; }
/* .inner 가 자체 max-width 로 가운데 정렬돼 본문보다 안쪽에서 시작했다.
   폭은 풀고 좌우는 본문과 같은 규칙(위 padding 목록)이 잡게 한다. */
#footer .inner {
  max-width: none; width: 100%; margin: 0;
  padding-top: 34px; padding-bottom: 38px;
  /* 로고를 왼쪽에 세우고 주소·저작권을 그 옆으로 붙인다 */
  display: flex; align-items: flex-start; gap: 38px;
}
#footer .foot_logo { flex: none; margin: 0; }
#footer .foot_logo img { display: block; width: auto; height: 58px; }
#footer .foot_info { min-width: 0; }
#footer .foot_info p { margin: 0 0 9px; }
#footer .addr { line-height: 1.7; color: var(--ink-soft); }
#footer .tel { line-height: 1.7; color: var(--ink-soft); }
#footer .tel a { color: inherit; }
#footer .copy {
  margin: 12px 0 0 !important;
  font-size: var(--t-small);
  letter-spacing: .02em; color: var(--gray);
}

/* 좁아지면 로고를 주소 위로 올린다 — 옆에 두면 글줄이 두 단어씩 끊긴다 */
@media (max-width: 700px) {
  #footer .inner { flex-direction: column; gap: 20px; }
  #footer .foot_logo img { height: 46px; }
}

/* ─── Lab log ─────────────────────────────────────────────────
   73줄이 전부 같은 회색이라 무엇이 성과인지 안 보였다. 홈 NEWS 와 같은
   태그·강조 체계를 그대로 쓴다. 태그를 왼쪽으로 당겨 날짜와 붙이면
   시선이 왼쪽에서 오른쪽으로 한 번에 흐른다. */

/* ─── 목록 제목줄 ──────────────────────────────────────────────
   연도 필터 바를 걷어낸 자리에 칸 이름을 다는 줄을 둔다. 아래 줄들과 똑같은
   격자를 써야 이름과 내용이 세로로 맞는다 — 값이 어긋나면 제목줄이 거짓말을 한다.
   이름은 한국어로 둔다. 옆에 남은 chrome(‘구분’·‘전체’)이 한국어라서다. */
.lcount {
  margin: 0 0 9px; text-align: right;
  font-size: 13px; color: var(--gray-ink);
}
.lhead {
  display: grid; align-items: center; gap: 18px;
  padding: 11px 6px;
  border-top: 2px solid var(--navy);
  border-bottom: 1px solid var(--gray-line);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--gray-ink);
}
.lhead--news { grid-template-columns: 52px minmax(0, 1fr) auto; }
.lhead--news > :first-child { text-align: center; }
.lhead--news > :last-child { text-align: right; }
/* 논문·특허는 [연도][내용] 두 칸 — sub.css 의 .pub·.pat 와 같은 값을 쓴다.
   .pub 만 좌우 12px 여백이 있어(extra.css 의 알약 모양 규칙) 그것도 맞춘다. */
.lhead--pub { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 11px 12px; }
.lhead--pat { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 11px 0; }
.lhead--pub > :first-child, .lhead--pat > :first-child { text-align: center; }
.lhead--pub > :last-child, .lhead--pat > :last-child { text-align: right; }
@media (max-width: 700px) {
  /* 줄이 위아래로 쌓이면 칸 이름이 가리킬 칸이 없다 */
  .lhead { display: none; }
}

.llist { list-style: none; margin: 0; padding: 0; }
.llist .lrow {
  display: grid;
  /* [번호][제목][날짜] 석 칸. 번호와 날짜는 폭이 정해져 있고 제목이 남은 자리를
     전부 가진다 — 제목이 길어져도 날짜가 밀리지 않고 오른쪽 끝에 그대로 선다. */
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 6px;
  border-bottom: 1px solid var(--gray-line);
}
/* 글 번호. 가장 오래된 글이 1번이라 새 글이 올라와도 아래 번호가 밀리지 않는다.
   자릿수가 달라도 세로줄이 맞도록 고정폭 숫자를 쓴다. */
.llist .lno {
  font-size: 13.5px; color: var(--gray); text-align: center;
  font-variant-numeric: tabular-nums;
}
.llist .lrow:hover { background: var(--wash); }
.llist .lrow p {
  margin: 0;
  font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--ink);
  /* 긴 제목이 두 줄로 접히면 그 줄만 키가 커져 목록의 가로줄 간격이 들쭉날쭉해진다.
     한 줄로 자르고 끝에 … 를 남긴다 — 전체 제목은 눌러서 들어가면 보인다.
     좁은 화면에서는 줄이 위아래로 쌓여 폭이 넉넉하므로 아래에서 다시 접게 둔다. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.llist .lrow time { font-size: 13.5px; color: var(--gray-ink); white-space: nowrap; text-align: right; }
/* 태그 색을 본문 강조에도 물려준다 (홈 NEWS 와 동일한 규칙) */

@media (max-width: 700px) {
  /* 좁은 화면에서는 한 줄에 늘어놓을 자리가 없다. 위아래로 쌓고 제목을 맨 위에 둔다. */
  .llist .lrow {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 6px;
    padding: 14px 4px;
  }
  /* 번호는 좁은 화면에서 한 줄을 통째로 차지하면서 아무것도 알려주지 않는다 — 감춘다 */
  .llist .lno { display: none; }
  .llist .lrow p { white-space: normal; order: -1; }
}

/* ─── 쪽 나누기 ───────────────────────────────────────────────
   뉴스 75, 갤러리 77, 논문 48 을 한 장에 쏟으면 끝까지 스크롤해야 한다.
   걸러진 결과를 쪽으로 끊고 아래에 번호를 단다. 연도 필터와 함께 동작한다. */
.pager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  margin: 34px 0 8px;
}
.pg {
  min-width: 38px; height: 38px; padding: 0 11px;
  /* 쪽 번호가 단추에서 링크(a)로 바뀌었다 — a 는 글자를 세로 중앙에 놓지 않으므로
     직접 가운데로 모으고 밑줄을 뗀다. 단추(필터 없는 목록의 대체 동작)도 같은 모양. */
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  border: 1px solid var(--gray-line); border-radius: 10px;
  background: #fff; color: var(--ink-soft);
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pg:hover:not(:disabled):not(.is-on):not(.is-off) { background: var(--wash); border-color: #c9d4ec; color: var(--navy-ink); }
.pg.is-on { background: var(--navy-ink); border-color: var(--navy-ink); color: #fff; cursor: default; }
.pg:disabled, .pg.is-off { opacity: .35; cursor: default; }
.pg_nav { font-size: 17px; line-height: 1; }
.pg_gap { padding: 0 4px; color: #a8b0c2; }

/* ─── Publications ────────────────────────────────────────────
   48편의 뱃지가 전부 같은 회색이라 Top 1% 도 Q2 도 똑같이 보였다.
   수상 > 최상위 등급 > 낮은 게재율 > 색인 순으로 무게를 준다. */
.publist .pub_m { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 9px; }
.bdg {
  display: inline-block;
  padding: 3px 9px; border-radius: 5px;
  border: 1px solid transparent;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.55;
  white-space: nowrap;
}
/* 수상 — 가장 강하게 */
.bdg-award { background: var(--red); color: #fff; }
/* Top 1~5%, #1 in category, 게재율 20% 이하 */
.bdg-top   { background: var(--navy); color: #fff; }
/* 그 밖의 낮은 게재율 */
.bdg-sel   { background: var(--navy-tint); color: var(--navy); border-color: var(--navy-line); }
/* Q1 */
.bdg-q1    { background: #fff; color: var(--navy-ink); border-color: var(--navy-line); }
/* SSCI·SCIE·Q2 등 사실 표기 */
.bdg-plain { background: #fff; color: var(--gray-ink); border-color: var(--gray-line); }

.publist .pub h4 {
  margin: 0 0 6px;
  font-size: 16.5px; line-height: 1.5; font-weight: 700; color: var(--ink);
}
.publist .authors { margin: 0 0 3px; font-size: var(--t-meta); color: var(--ink-soft); }
.publist .venue { margin: 0; font-size: 14px; font-style: italic; color: var(--gray-ink); }
/* 수상작·최상위 등급을 왼쪽 세로줄 + 배경으로 표시했더니, 그 줄만 안쪽으로 16px
   밀려 연도·제목·저자의 왼쪽 끝이 다른 줄과 어긋났다. 목록에서 가장 먼저 보이는 것이
   그 어긋남이라 강조가 아니라 흠으로 읽힌다.
   무게는 이미 뱃지 색이 지고 있으므로(수상=빨강 채움 > Top=남색 채움 > 나머지),
   줄 자체는 건드리지 않는다. */

/* 우리 랩 저자는 굵게 — 외부 공저자와 한눈에 갈린다 */
.publist .authors .ours { font-weight: 800; color: var(--navy); }

/* 배너: 체크와 로고의 높이를 맞춘다 */
.hero_pts li::before {
  content: "✓"; position: absolute; left: 0; top: 2px;
  font-size: 17px; font-weight: 900; color: var(--navy);
}
.hero_pts li { padding-left: 31px; }
.hero_partners { align-items: center; gap: 26px; margin: auto 0 0; padding-top: 4px; }
/* 로고마다 가로세로비가 달라 같은 height 를 줘도 글자 크기가 달라 보인다.
   높이는 묶고 가로는 비율대로 두되, 지나치게 넓은 것만 눌러 준다. */
.hero_partners img { height: 34px; width: auto; max-width: 150px; object-fit: contain; flex: none; }

/* 구성원 단체사진이 화면을 가득 채워 아래 내용이 안 보였다 */
.team_shot { margin: 0 0 34px; text-align: center; }
.team_shot img {
  display: block; margin: 0 auto;
  /* 원본 4:3 은 천장과 바닥이 절반이라 세로만 잡아먹었다. 사람이 없는 위아래를
     덜어내 1.85 로 만들고(team-2025-homecoming.jpg), 세로를 560 으로 묶는다.
     가로 약 1040px — 칼럼의 3/4 쯤 앉는다. */
  max-height: 560px; width: auto; max-width: 100%;
  border-radius: 10px;
}
.team_shot figcaption { margin-top: 10px; font-size: 13px; color: var(--gray-ink); }

/* ─── 게시글 상세 ─────────────────────────────────────────────
   원본 에디터가 뱉은 본문은 문단 구분도 여백도 없이 이어져 있어서,
   그대로 두면 붙여넣은 덩어리로 읽힌다. 문단을 띄우고 글줄만 붙잡는다.

   글 전체를 860px 로 묶어 두었더니, 바로 위 페이지 제목·breadcrumb 은 칸 끝까지
   가는데 제목과 본문만 화면 절반에서 끊겨 오른쪽이 통째로 비었다. 이제 글도
   다른 페이지와 같은 칸을 쓰고, 줄이 너무 길어지지 않게 문단만 붙든다. */
.post { max-width: none; }
/* 읽는 줄의 길이 — 한글 기준 한 줄 55~60자.
   제목 아래 구분선은 글이 아니라 이 글 전체의 테두리라, 사진과 같은 폭으로 둔다.
   그래야 바깥 선이 하나로 맞고 안쪽 글줄만 짧아진 것으로 읽힌다. */
.post_tit, .post_meta,
.post_body > p, .post_body > ul, .post_body > ol, .post_body > blockquote,
.post_body > h4, .post_body > h5 { max-width: var(--line); }
.post_head {
  padding-bottom: 20px; margin-bottom: 28px;
  border-bottom: 2px solid var(--navy);
}
.post_tit {
  margin: 0 0 10px;
  font-size: 27px; line-height: 1.36; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink);
  word-break: keep-all;                 /* 한국어 제목이 단어 중간에서 끊기지 않게 */
}
.post_meta { margin: 0; font-size: 14px; color: var(--gray-ink); }

.post_body { font-size: 16.5px; line-height: 1.85; color: var(--ink-soft); }
.post_body p { margin: 0 0 1.15em; word-break: keep-all; }
.post_body p:last-child { margin-bottom: 0; }
.post_body strong, .post_body b { font-weight: 700; color: var(--emph); }
.post_body a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.post_body a:hover { color: var(--red); }
.post_body u { text-decoration: none; border-bottom: 1px solid var(--navy-line); }
.post_body br + br { content: ""; display: block; height: .5em; }

/* 본문 이미지: 크기가 제각각이라 같은 비율 격자에 담는다 */
.post_gal {
  /* 화면 폭(100vw)으로 재면 이 칸이 실제로 얼마나 넓은지와 무관한 값이 나온다.
     격자가 격자 안에 들어간 글에서는 592px 칸 안에 1200px 가 들어앉아 페이지에
     가로 스크롤이 생겼다. 칸을 그대로 채우면 그런 일이 없다. */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin: 10px 0 1.8em;
  width: 100%;
  /* 사진마다 키가 다르므로 위를 맞춘다 (아래로 늘여 잡아당기지 않는다) */
  align-items: start;
}
.post_gal img {
  /* 잘라서 채우면 발표 슬라이드·상장·포스터의 가장자리가 날아가고,
     그렇다고 비율을 그대로 두면 옆칸과 키가 달라 오른쪽이 뭉텅 빈다.
     칸은 같은 크기로 세우되 그림은 통째로 담는다 — 잘리지도, 어긋나지도 않는다.
     (목록의 사진 칸과 같은 규칙이다.) */
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: contain;
  border-radius: 10px; background: #f4f6fa;
}
/* 한 장뿐이면 지나치게 커지지 않게만 잡는다 */
.post_gal:has(img:only-child) { grid-template-columns: 1fr; }
.post_gal:has(img:only-child) img { max-height: 680px; width: auto; max-width: 100%; }

/* 이전 글 / 다음 글 — 좌우로 갈라 놓으면 한쪽만 있는 글(맨 처음·맨 끝)에서
   덩그러니 한쪽에 붙어 무엇을 가리키는지 알기 어려웠다. 표처럼 위아래로 쌓고
   라벨을 왼쪽에 고정하면, 하나만 있어도 줄이 그대로 읽힌다. */
.pnav {
  display: block;
  margin: 44px 0 22px;
  border-top: 1px solid var(--gray-line);
}
.pnav_i {
  display: grid; grid-template-columns: 78px minmax(0, 1fr);
  align-items: center; gap: 16px;
  padding: 15px 6px;
  border-bottom: 1px solid var(--gray-line);
  max-width: var(--line);
}
.pnav_i:hover { background: var(--wash); }
.pnav_i span {
  font-size: var(--t-label); font-weight: 800; letter-spacing: .04em; color: var(--gray-ink);
}
.pnav_i b {
  font-size: var(--t-meta); font-weight: 600; line-height: 1.45; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pnav_i:hover b { color: var(--navy); }
.post_back { margin: 0; }
.post_back .pill {
  display: inline-block; padding: 10px 20px;
  border: 1px solid var(--navy); border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--navy);
}
.post_back .pill:hover { background: var(--navy); color: #fff; }

@media (max-width: 700px) {
  .post_tit { font-size: 23px; }
  .post_body { font-size: 17px; line-height: 1.8; }
  .post_gal { grid-template-columns: 1fr; }
  .pnav_i { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
}

/* ─── Publications 머리 ────────────────────────────────────────
   통계 줄과 '구분' 버튼이 같은 숫자를, 필터바 두 줄이 같은 건수를 각각 되풀이했다.
   숫자는 버튼이 들고 있으니 통계 줄을 빼고, 건수는 한 번만 보여준다. */
.publications .filterbar, #content .filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-line);
  /* 위 규칙에서 top:0 으로 화면에 붙여 두었는데, 상단 메뉴가 같은 자리에 100px 높이로
     먼저 붙어 있어 스크롤하면 필터 바가 그 뒤로 완전히 숨었다. 목록은 이제 쪽으로
     끊기므로 붙여 둘 이유도 없다. 제자리에 둔다. */
  position: static;
}
.fcap {
  margin-right: 8px; min-width: 40px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--gray-ink);
}
.fbtn {
  padding: 7px 14px;
  border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--ink-soft);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
}
.fbtn:hover { background: var(--wash); color: var(--navy); }
.fbtn.is-on { background: var(--navy); color: #fff; }
.fcount { margin-left: auto; font-size: 13px; color: var(--gray-ink); }
.fcount.is-filtered { color: var(--navy); font-weight: 700; }

/* ─── 글자 척도 ───────────────────────────────────────────────
   본문 계열 크기가 12~21px 사이에 17종으로 흩어져 있었고, '페이지 제목'만
   30 / 34 / 27px 세 가지였다. 역할별로 하나씩만 정해 전 페이지에 같은 척도를 쓴다.

     페이지 제목 32 · 구역 제목 23 · 항목 제목 18.5 · 본문 18 · 보조 15.5 · 라벨 12.5

   화면에서 읽기에 작다는 이야기가 있어 척도 전체를 2px 씩 올렸다.
   여기 여섯 줄만 바꾸면 전 페이지가 같이 따라온다. */
:root {
  --t-page: 31px;
  --t-sec: 22px;
  --t-item: 17.5px;
  --t-body: 17px;
  --t-meta: 14.5px;
  --t-label: 11.5px;
  /* 버튼·캡션·주석이 12.5~14px 사이에서 제각각이던 것을 여기로 모은다 */
  --t-small: 13.5px;

  /* 읽는 줄의 길이. 칸은 넓어도 글줄은 이 폭을 넘지 않는다 (한글 55~60자). */
  --line: 1000px;

  /* 모서리는 다섯 단뿐이다. 이름으로 역할을 못 박아 새로 만들 때 고민하지 않게 한다. */
  --r-panel: 14px;     /* 카드·패널·대화창 — 가장 큰 판 */
  --r-media: 10px;     /* 사진·영상·목록 행 */
  --r-chip: 5px;       /* 뱃지·태그처럼 작은 것 */
  --r-pill: 999px;     /* 알약 버튼 */
  --r-dot: 50%;        /* 동그라미 */

  /* 옛 사이트에서 따라온 두 색을 뿌리에서 갈아 끼운다.
     azure(#1576c8) 하늘색 링크와 sand(#d0c2b9) 황토색 라벨이 하위 페이지
     스물한 군데에 남아, 상단 남색과 두 팔레트처럼 보였다.
     sub.css 가 이 두 이름을 참조하므로 여기 한 번이면 전부 따라온다. */
  --azure: #17246b;    /* 링크·강조 — 메뉴 호버와 같은 남색 */
  --sand: #5f6472;     /* 작은 라벨(OFFICE, Dissertation 따위) — 회색으로 */
  --sand-ink: #ffffff;

  /* style.css 의 나머지 옛 이름들도 여기서 잇는다. 실측해 보니 한 화면에
     #333/#636363/#393939/#c0c0c0 네 가지 회색이 같은 '글자' 역할로 섞여
     나오고 있었다. 값을 넷에서 셋(잉크·보조·옅은)으로 줄인다. */
  --text: var(--ink);          /* 기본 글자 — #333 이었다 */
  --body-gray: var(--ink-soft);/* 본문 단락 — #636363 이었다 */
  --board-sub: var(--ink-soft);/* 게시판 보조 — #393939 였다 */
  --date: var(--gray-ink);     /* 날짜 — #c0c0c0 는 흰 배경에서 너무 옅었다 */
  --depth3: var(--gray-ink);
  --depth2-bg: var(--wash);
}

/* 페이지 제목 — 서브페이지 상단과 홈 소개 제목을 같은 크기로 */
.sub_titbox .tit,
.etc002 .tit { font-size: var(--t-page); line-height: 1.32; letter-spacing: -.022em; }

/* 구역 제목 — PROJECTS / BOARD / NEWS / 구성원 분류
   .board013 안으로 한정해 두어 NEWS 만 22px·800 이 되고 PROJECTS·BOARD 는
   style.css 의 18px·600 에 남아 있었다. 셋은 같은 자리의 같은 제목이다. */
.board_tit,
.sec .sec_tit { font-size: var(--t-sec); font-weight: 800; color: var(--ink); letter-spacing: -.015em; }

/* 항목 제목 — 카드·목록의 각 줄 */
.gallery115 .gal_tit,
.bf_tit,
.board013 .board_list .subject,
.llist .lrow p,
.publist .pub h4,
.proj_body h4 { font-size: var(--t-item); line-height: 1.5; }

/* 본문 */
.etc002 .txtco,

/* 보조 — 날짜, 저자, 학회명 */
.board013 .board_list .date,
.llist .lrow time,
.publist .authors,
.publist .venue,
.post_meta,
.fcount { font-size: var(--t-meta); }

/* 라벨 — 태그, 뱃지, 분류 */
.ntag, .bdg, .bf_kind, .nnew, .fcap { font-size: var(--t-label); }

/* 상세 페이지에서는 아래에 진짜 제목이 오므로 상단 'News' 는 이름표 크기로 줄인다 */
.subCon:has(.post) .sub_titbox .tit { font-size: var(--t-sec); color: var(--gray-ink); font-weight: 700; }
.post_tit { font-size: var(--t-page); }

/* 하위 페이지의 글자들 — sub.css 시절 12~18px 사이 스무 가지가 흩어져 있었다.
   같은 역할이면 같은 크기가 되도록 위 척도에 물린다. 크기가 함께 올라간다. */
.prof_body h3 { font-size: var(--t-page); }
.acard h4, .fac_body h4, .proj h4, .track-title,
.mcard h4, .sem h4, .pat h4, .pub h4, .hname,
.vtit, .gitem figcaption { font-size: var(--t-item); line-height: 1.5; }

.para, .post_body, .track-desc, .proj_desc,
.prof_body .major, .domains b { font-size: var(--t-body); }
/* 영문 문단은 바로 위 한국어 문단의 번역이다. 같은 말을 같은 크기로 두 번 하니
   읽을 것이 두 배로 보였다 — 필요한 사람에게는 그대로 두되 한 단 뒤로 물린다. */
.para.en { font-size: var(--t-meta); line-height: 1.8; color: var(--body-gray); }

.lead, .anow, .diss, .works li, .cvb li, .mint, .hwhen,
.pat .inv, .pat .assignee,
.prof_body .aff, .prof_meta, .fac_body ul li, .domains span,
.team_shot figcaption, .pill, .mcard .mrole, .location li,
#footer .addr, #footer .tel { font-size: var(--t-meta); }

.tag, .ayear, .gitem time, .cvb h4, .fac_body .qty,
.pat_y, .pub_y, .kind, #footer .copy { font-size: var(--t-label); }
.cvb h4 { font-size: var(--t-meta); }        /* CV 소제목은 라벨보다 한 단 위 */

/* 메뉴와 검색창도 같이 올린다 — 첫 화면에서 가장 먼저 읽는 글자들이다 */
@media (min-width: 1000px) {
  .depth1 > li > .d1 { font-size: var(--t-body); }
  .depth2 a { font-size: var(--t-item); }
  .ss_input { font-size: var(--t-body); }
}
.ss_txt { font-size: var(--t-item); }
.ss_where, .ss_count, .ss_empty { font-size: var(--t-meta); }

/* ─── 도우미 ──────────────────────────────────────────────────
   "죽은 스타일 걷어내기" 때 .ai_dock 한 덩어리가 통째로 지워졌는데, 안에는
   아직 쓰는 것들이 섞여 있었다. 떠 있어야 할 버튼이 문서 흐름에 얹힌 맨 버튼이
   되어 푸터 아래에 굴러다녔다 — 아이콘이 깨진 것처럼 보인 것이 이것이다.
   되살리되 값은 STYLE.md 의 이름으로 다시 적는다. */
.ai_dock {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.ai_fab {
  width: 56px; height: 56px; border-radius: var(--r-dot); position: relative;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-small); font-weight: 700; letter-spacing: -.02em;
  box-shadow: 0 10px 26px rgba(12, 24, 84, .34);
  cursor: pointer; transition: transform .18s ease;
}
.ai_fab:hover { transform: scale(1.06); }
/* 'HAI' 라고만 적힌 동그라미는 눌러 보기 전에는 무엇인지 알 수 없었다. 말풍선은
   설명 없이도 '말을 걸 수 있는 것' 으로 읽힌다. 열려 있을 때는 ×— 같은 자리에서
   닫히니 버튼이 하나로 느껴진다. */
.ai_fab_i { width: 27px; height: 27px; display: block; }
.ai_fab_close { display: none; }
.ai_fab[aria-expanded="true"] .ai_fab_chat { display: none; }
.ai_fab[aria-expanded="true"] .ai_fab_close { display: block; }
/* 안 읽은 것이 있다는 빨간 점 — 열면 뗀다 */
.ai_fab::after {
  content: ""; position: absolute; right: -1px; top: -1px;
  width: 12px; height: 12px; border-radius: var(--r-dot);
  background: var(--red); border: 2px solid #fff;
}
.ai_fab[aria-expanded="true"]::after { display: none; }

.ai_panel {
  width: 340px; max-width: calc(100vw - 40px);
  border: 1px solid var(--gray-line); border-radius: var(--r-panel); overflow: hidden;
  background: #fff; box-shadow: 0 20px 48px rgba(12, 24, 84, .18);
  transform-origin: 100% 100%;
  animation: aiPop .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes aiPop { from { opacity: 0; transform: translateY(10px) scale(.96); } }

.ai_top {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--gray-line); background: #fff;
}
.ai_avatar {
  width: 34px; height: 34px; border-radius: var(--r-dot); flex: none;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-label); font-weight: 700; letter-spacing: -.02em;
}
.ai_who { min-width: 0; }
.ai_who b { display: block; font-size: var(--t-meta); font-weight: 700; line-height: 1.3; color: var(--ink); }
.ai_who .state { display: flex; align-items: center; gap: 5px; font-size: var(--t-label); color: var(--gray-ink); }
.ai_who .state::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-dot); background: #22b07d; }
.ai_x { margin-left: auto; padding: 2px 4px; font-size: 19px; line-height: 1; color: var(--gray); }
.ai_x:hover { color: var(--ink); }

.ai_body {
  padding: 18px 16px 14px; background: var(--wash);
  /* 말이 쌓이면 패널이 화면 밖으로 자라기만 하고 지난 말을 볼 수 없었다.
     높이를 묶고 안에서 굴린다. */
  max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain;
}
.ai_body::-webkit-scrollbar { width: 8px; }
.ai_body::-webkit-scrollbar-thumb { background: #d3d9e6; border-radius: var(--r-pill); }
.ai_body::-webkit-scrollbar-thumb:hover { background: #b9c2d6; }

.ai_sugg { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; margin: 4px 0 16px; }
.ai_sugg span {
  padding: 9px 15px;
  background: #fff; border: 1px solid var(--gray-line); border-radius: var(--r-pill);
  font-size: var(--t-small); color: var(--navy);
  box-shadow: 0 2px 6px rgba(12, 24, 84, .05);
  transition: border-color .18s ease, color .18s ease;
}

@media (max-width: 999px) {
  .ai_dock { right: 16px; bottom: 16px; }
  .ai_fab { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai_panel { animation: none; }
  .ai_fab:hover { transform: none; }
  .ai_sugg span { transition: none; }
}

/* 내 말과 도우미 말을 갈라 놓아야 읽힌다 */
/* 도우미 말은 패널 바닥과 같은 색이어서 말풍선이 안 보였다 — 흰 바닥 + 테두리 */
.ai_msg { max-width: 88%; margin: 0 0 10px; padding: 10px 13px; border-radius: 10px;
  background: #fff; border: 1px solid var(--gray-line);
  color: var(--ink); font-size: var(--t-meta); line-height: 1.6; white-space: pre-wrap; }
.ai_msg.is-me { margin-left: auto; background: var(--navy); border-color: var(--navy); color: #fff; }
.ai_input {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--gray-line); background: #fff;
}
.ai_input #aiText {
  flex: 1; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--gray-line); border-radius: 999px;
  font-family: inherit; font-size: var(--t-meta); color: var(--ink);
}
.ai_input #aiText:focus { outline: none; border-color: var(--navy); }
.ai_send {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: var(--t-body); cursor: pointer;
}
.ai_send:hover { background: var(--navy-ink); }
.ai_sugg span { cursor: pointer; }
.ai_sugg span:hover { border-color: var(--navy); color: var(--navy); }

/* 구역 제목 앞 '›' 가 글자에 붙어 있어 읽는 데 걸린다 */
.sec_tit .subBullet { margin-right: 8px; color: var(--navy); font-style: normal; }
.sec .sec_tit { display: flex; align-items: baseline; gap: 0; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--gray-line); }
.sec .sec_tit .n { margin-left: 9px; font-size: var(--t-small); font-weight: 700; color: var(--gray-ink); }

/* ─── 사진·영상 목록 ──────────────────────────────────────────
   Gallery / Alumni / Video / V-log 를 같은 3열 격자로 맞춘다.
   한 쪽에 12장(3x4)씩 끊으므로 마지막 줄이 비지 않는다. */
/* 목록 클래스는 .vids > .vid > .vthumb / .vtit 다 (.vidlist·.vid_thumb 는 없는 이름이라
   여기 규칙이 아무 데도 안 걸려 있었다). */
.gallery, .acards, .vids {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 24px;
}
.gallery .gitem, .vids .vid { margin: 0; min-width: 0; }
.gallery .thumb, .vids .vthumb {
  display: block; position: relative; overflow: hidden;
  border-radius: 10px; background: #eef1f7;
  aspect-ratio: 4 / 3;
}
.gallery .thumb img, .vids .vthumb img {
  /* 목록에서는 칸을 같은 크기로 세워야 줄이 맞는다. 다만 잘라서 채우면
     가로로 긴 슬라이드·현수막 사진의 양옆이 날아간다. 통째로 담고 남는 자리는
     옅은 바탕으로 둔다 — 잘린 그림보다 여백이 낫다. */
  display: block; width: 100%; height: 100%; object-fit: contain;
  transition: transform .35s ease;
}
/* 영상 칸은 16:9. 미리보기(hqdefault)는 4:3 인데 검은 띠가 그림 안에 구워져
   있어서, contain 으로 담으면 양옆 회색(칸 바탕)에 위아래 검정(그림 속 띠)까지
   같이 보였다. cover 로 위아래를 자르면 정확히 그 띠만 잘려 나간다 —
   16:9 영상의 내용 영역(480x270)은 그대로 남는다. Video·V-log 둘 다 .vids 다. */
.vids .vthumb { aspect-ratio: 16 / 9; }
.vids .vthumb img { object-fit: cover; }
.gallery .gitem:hover .thumb img, .vids .vid:hover .vthumb img { transform: scale(1.04); }
.gallery figcaption, .vids .vtit {
  display: block; margin-top: 11px;
  font-size: var(--t-item); line-height: 1.5; font-weight: 600; color: var(--ink);
}
.gallery figcaption time {
  display: block; margin-bottom: 4px;
  font-size: var(--t-meta); font-weight: 700; color: var(--gray-ink);
}
.gallery figcaption a { color: inherit; }
.gallery figcaption a:hover { color: var(--navy); }
.gallery .gbtn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }

@media (max-width: 1100px) { .gallery, .acards, .vids { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .gallery, .acards, .vids { grid-template-columns: 1fr; } }

/* 본문 사진은 눌러서 크게 볼 수 있다는 것을 손끝에 알려 준다 */
.post_gal img { cursor: zoom-in; }
.post_gal img:hover { filter: brightness(.94); }

/* 과제·장비 목록의 그림도 같은 규칙 — 잘라 채우지 않고 통째로 담는다.
   과제 그림은 대부분 가로로 긴 구성도라 4:3 으로 자르면 양 끝이 날아갔다. */
.proj_img img, .fac_img img {
  aspect-ratio: 16 / 10; object-fit: contain;
  /* 통째로 담으면 가로세로가 안 맞는 만큼 바닥이 드러난다. 그 바닥이 옅은 회색이라
     장비 사진마다 양옆에 띠가 남았다 — 제품 사진이 죄다 흰 배경이라 흰색이면
     띠가 아예 안 보인다. */
  background: #fff; border-radius: 10px;
}

/* ─── 글 안의 영상 ────────────────────────────────────────────
   유튜브는 재생기 크기를 보고 화질을 고른다. 작은 창으로 띄우면 낮은 화질로
   시작하므로, 본문 폭을 넘어 사진 격자와 같은 폭까지 키운다. */
.post_video {
  width: min(1200px, calc(100vw - 96px));
  margin: 0 0 1.8em;
  aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden;
  background: #000;
  box-shadow: 0 8px 26px rgba(16, 26, 77, .16);
}
.post_video iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 999px) {
  .post_video { width: 100%; }
  .post_gal { width: 100%; }
}

/* ─── 마감 손질 ───────────────────────────────────────────────
   기능은 다 들어갔는데 마무리가 조금씩 덜 된 자리들이 있었다. 색·간격 체계는
   그대로 두고, 같은 역할끼리 같은 모양이 되도록 마지막으로 한 번 훑는다.
   새 색을 들이지 않는다 — 남색·빨강·회색 세 가지 안에서만 쓴다. */

/* 구역 제목: '›' 글자를 쓰던 자리를 남색 막대로. 글자는 글꼴마다 모양이 달라
   어떤 화면에서는 그냥 부등호로 보였다. */
.sec .sec_tit { position: relative; padding-left: 15px; }
.sec .sec_tit .subBullet { display: none; }
.sec .sec_tit::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 4px; height: .96em; border-radius: 2px;
  background: var(--navy);
}
/* 개수는 글이 아니라 표식이다 — 알약으로 */
.sec .sec_tit .n, .cvb .n, .works .n {
  display: inline-block; margin-left: 10px; padding: 2px 9px;
  border-radius: 999px; background: var(--navy-tint);
  font-size: var(--t-small); font-weight: 700; color: var(--navy);
}

/* 페이지 제목 아래 선을 남색으로 한 겹 받쳐 위쪽을 붙잡는다 */
.sub_titbox {
  border-bottom: 0;
  padding-bottom: 14px; margin-bottom: 30px;
  position: relative;
}
.sub_titbox::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--navy) 0 96px, var(--gray-line) 96px);
}

/* 카드 — 구성원·졸업생·과제·장비를 같은 판으로 맞춘다.
   테두리 하나와 얹히는 그림자만으로 '누를 수 있는 것' 처럼 보이게 한다. */
.mcard, .acard, .fac, .proj {
  border: 1px solid var(--gray-line); border-radius: 14px;
  background: #fff;
  padding: 16px;
}
/* 카드에는 호버를 걸지 않는다.
   .mcard·.acard·.proj 는 카드째로 누를 수 없다 — 링크는 안에 있는 제목이나
   메일 한두 곳뿐인데, 카드 전체가 떠오르면 아무 데나 눌러도 될 것처럼 보인다.
   .fac·.track 은 안에 링크가 아예 없다.
   호버는 '누를 수 있다'는 신호라, 눌러도 아무 일 없는 카드에 걸면 거짓말이 된다.
   (과제 카드를 통째로 누르게 하고 싶으면 호버를 되살릴 게 아니라
    .proj 를 <a> 로 감싸야 한다.) */
/* 원래 칸을 갈라 주던 아래 선은 테두리와 겹치므로 뺀다 */
.acard, .fac, .proj { border-bottom: 1px solid var(--gray-line); padding-bottom: 16px; }
.facs, .projs, .acards { gap: 18px; }

/* 카드 안의 사진도 같은 곡선으로 */
.mphoto img, .aphoto img, .fac_img img, .proj_img img, .prof_img img {
  border-radius: 10px;
}
.mbadge {
  left: 10px; bottom: 10px; border-radius: 999px; padding: 3px 8px;
  /* 사진 칸이 116px 이다. 'Publicity Manager' 가 기본 크기로는 안 들어가
     두 줄로 접혔다 — 접히면 배지가 사진을 반쯤 덮는다. 한 줄로 못 박고
     들어갈 만큼만 줄인다. 배지 넷이 다 같은 크기여야 하므로 전부에 건다. */
  white-space: nowrap; font-size: 10px; letter-spacing: -.01em;
}

/* 알약·태그 모양 통일 — 어떤 것은 각지고 어떤 것은 둥글었다 */
.pill, .tag, .sem .term, .domains li {
  border-radius: 999px;
}
.pill { padding: 5px 13px; border-color: var(--gray-line); }
.pill:hover { border-color: var(--navy); color: var(--navy); background: var(--wash); }
.tag { padding: 3px 11px; }
.kind { border-radius: 5px; padding: 3px 9px; }
.domains li { padding: 9px 18px; border-color: var(--gray-line); }

/* 논문 줄 — 누르는 곳은 아니지만 눈으로 짚을 수 있게 */
.publist .pub { border-radius: 10px; padding-left: 12px; padding-right: 12px; }
.publist .pub:hover { background: #f8faff; }

/* 교수 소개 — 사진과 정보를 한 판 위에 */
.prof {
  border: 1px solid var(--gray-line); border-radius: 14px;
  background: linear-gradient(180deg, #fbfcff 0%, #fff 42%);
  padding: 26px; gap: 34px;
  border-bottom: 1px solid var(--gray-line);
}
.prof_meta dt { color: var(--navy); font-weight: 700; }
.cvb h4 { border-bottom: 1px solid var(--gray-line); color: var(--navy); }

/* 연구 분야 — 나란한 셋이 아니라 이어지는 세 단계다.
   Overview 가 그렇게 적고 있다: 멀티모달 AI 를 '개발하고', 이를 Human-centered AI 로
   '확장하여', 현장의 AI Transformation 으로 '연결한다'. 똑같이 생긴 둥근 상자 셋으로
   그리면 그 순서가 지워지고, 어디서나 보는 카드 세 장이 된다.
   상자를 걷어내고 번호와 가로줄로 흐름을 드러낸다. */
.tracks { position: relative; column-gap: 30px; }
/* 단계를 잇는 가로줄. 번호 동그라미의 한가운데를 지난다. */
.tracks::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 12px;
  height: 1px; background: var(--navy-line);
}
.track {
  position: relative;
  border: 0; border-radius: 0; background: none;
  padding: 38px 0 0;
}
.track-step {
  position: absolute; top: 0; left: 0; margin: 0;
  display: flex; align-items: center; gap: 9px;
  /* 가로줄이 글자 뒤로 지나가지 않게 바탕색으로 덮는다 */
  background: #fff; padding-right: 12px;
  font-size: var(--t-label); font-weight: 800; letter-spacing: .06em;
  color: var(--gray-ink);
}
.track-step b {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.track-title { color: var(--navy); }
@media (min-width: 1000px) { .tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 999px) {
  /* 한 칸으로 쌓이면 가로줄이 이을 것이 없다 */
  .tracks::before { display: none; }
  .track { padding-top: 34px; }
}

/* 이력 안의 접이 — 과제 23건을 한꺼번에 펴면 화면을 통째로 먹는다.
   진행 중인 것만 펴 두고 끝난 것은 접는다. 지우지는 않는다 — 끝난 과제도 이력이다. */
/* 카드는 여백이 0 이고 summary·ul 이 각자 16px 을 갖는 구조다. 이 접이도 같은
   16px 을 줘야 목록과 왼쪽 끝이 맞는다 — 안 주면 카드 모서리에 붙어 버린다.
   위 간격은 목록(ul)의 아래 여백 12px 이 이미 만들어 준다. */
.cv_more { margin: 0; padding: 0 16px 14px; }
.cv_more > ul { padding: 0; }
.cv_more > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-label); font-weight: 700; color: var(--gray-ink);
  padding: 5px 11px; border: 1px solid var(--gray-line); border-radius: 999px;
}
.cv_more > summary::-webkit-details-marker { display: none; }
.cv_more > summary::before { content: "+"; font-weight: 700; color: var(--navy); }
.cv_more[open] > summary::before { content: "−"; }
.cv_more > summary:hover { border-color: var(--navy); color: var(--navy); background: var(--wash); }
.cv_more > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.cv_more > ul { margin-top: 8px; }

/* ─── 장비를 숫자로 ────────────────────────────────────────────
   장비 목록만 있으면 스펙은 정확해도 '여기서 뭘 할 수 있는지' 가 안 잡힌다.
   아래 목록에 적힌 값을 그대로 더해 맨 위에 놓는다 — 지어낸 수는 없고,
   작은 글씨의 내역이 그 근거다. 값이 바뀌면 내역도 같이 고쳐야 한다. */
.facstat {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--gray-line);
  border: 1px solid var(--gray-line);
  margin: 0 0 38px;
}
.facstat > div { background: #fff; padding: 17px 19px; }
.facstat b {
  display: block; line-height: 1.05;
  font-size: 34px; font-weight: 700; letter-spacing: -.03em;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
.facstat b i {
  margin-left: 3px; font-size: 15px; font-weight: 700; font-style: normal;
  color: var(--navy-ink);
}
.facstat span {
  display: block; margin-top: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.facstat em {
  display: block; margin-top: 4px; font-style: normal;
  font-size: 11.5px; line-height: 1.55; color: var(--gray-ink);
}
@media (max-width: 820px) { .facstat { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .facstat { grid-template-columns: 1fr; } }

/* ─── 운영진 시간축 ───────────────────────────────────────────
   역할 셋이 따로 선 목록 세 개였다. 그래서 이 쪽이 답해야 할 질문 — 누가 누구와
   같이 운영진이었나 — 이 안 보였다. 최두성(Social)과 김유원(Lab)은 1년 넘게 겹치는데
   서로 다른 상자에 떨어져 있었다. 기간 자료는 목록이 아니라 한 시간축에 놓아야 한다.

   아래 목록은 그대로 둔다. 사진과 정확한 날짜가 거기 있고, 좁은 화면에서는 목록만
   쓴다. 시간축은 aria-hidden 이라 읽어 주는 도구에는 목록만 한 번 읽힌다. */
.tline { margin: 0 0 44px; }
.tl_years {
  position: relative; height: 18px; margin-left: 132px;
  font-size: var(--t-label); color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.tl_years span { position: absolute; transform: translateX(-50%); }
.tl_lane {
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px; align-items: center; margin-bottom: 7px;
}
.tl_role { margin: 0; font-size: 13px; font-weight: 700; color: var(--gray-ink); }
.tl_track {
  position: relative; height: 34px;
  background: var(--wash); border-radius: 5px;
}
/* 해가 바뀌는 자리 */
.tl_track > i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--gray-line); }
.tl_bar {
  position: absolute; top: 4px; bottom: 4px;
  display: flex; align-items: center; overflow: hidden;
  padding: 0 10px; border-radius: 4px;
  background: var(--navy-tint); color: var(--navy-ink);
  font-size: 12.5px; font-weight: 700; font-style: normal;
}
.tl_bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 지금 맡고 있는 사람 — 뱃지를 따로 달지 않고 색으로 짚는다 */
.tl_bar.is-now { background: var(--navy); color: #fff; }
/* 이제 막 시작한 임기는 막대가 좁다. 글자를 한 단 줄여 이름이 들어가게 한다. */
.tl_bar.is-tight { padding: 0 6px; font-size: 11px; }
@media (max-width: 860px) {
  /* 좁은 화면에서 55개월을 한 줄에 펴면 한 달이 몇 픽셀이 안 된다 — 목록만 쓴다 */
  .tline { display: none; }
}

/* 운영 이력 — 현재 담당자를 옅은 남색 판으로 짚는다 */
.hrow { border-radius: 8px; padding: 7px 11px; border-bottom: 1px solid var(--gray-line); }
.hrow.now { background: var(--navy-tint); border-bottom-color: transparent; }
.hrow.now .tag.on { background: var(--navy); color: #fff; }

/* 쪽 번호 — 지금 쪽을 조금 더 또렷하게 */
.pg.is-on { box-shadow: 0 4px 12px rgba(16, 26, 77, .22); }

@media (max-width: 700px) {
  .mcard, .acard, .fac, .proj { padding: 12px; border-radius: 14px; }
  .prof { padding: 18px; }
}

/* 남은 각진 버튼 하나 — Google Scholar. 같은 알약 모양으로 */
.btn { border-radius: 999px; padding: 10px 20px; font-weight: 700; }
.btn:hover { background: var(--navy-ink); }

/* ─── 특허 ────────────────────────────────────────────────────
   한 건에 출원·공개·등록 세 가지 번호가 붙을 수 있다. 한 줄로 이어 붙이면
   어디가 어느 번호인지 안 보여서, 번호마다 옅은 판을 깔아 끊어 준다. */
.patlist .pat { border-bottom: 1px solid var(--gray-line); }
.pat .meta { flex-wrap: wrap; gap: 7px; }
.pnum {
  display: inline-block; padding: 3px 10px;
  border: 1px solid var(--gray-line); border-radius: 999px;
  background: #fafbfe; color: var(--gray-ink);
  font-size: var(--t-label); white-space: nowrap;
}
/* 등록된 건은 첫 번호(등록번호)를 남색으로 짚는다 */
.pat .tag.on + .pnum { border-color: var(--navy-line); background: var(--navy-tint); color: var(--navy); font-weight: 700; }
.pnote { margin-top: 6px; font-size: var(--t-label); color: var(--gray); }

/* 구성원 카드도 졸업생·사진·영상과 같은 3열로. 4열은 칸이 좁아 이름과 관심분야가
   줄줄이 접혔고, 같은 페이지 묶음 안에서 열 수만 달랐다. */
.mgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 24px;
}
@media (max-width: 1100px) { .mgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .mgrid { grid-template-columns: 1fr; } }

/* 3열이 되면서 칸이 넓어져 인물 사진이 카드를 압도했다. 사진만 붙잡아 둔다. */
/* 3열로 넓어진 칸에 세로 카드를 두니, 사진만 260px 로 묶고 나머지 200px 가
   통째로 비었다. 졸업생 카드처럼 가로로 눕힌다 — 사진이 왼쪽, 글이 오른쪽이라
   빈 자리가 생기지 않고 두 페이지의 카드 모양도 같아진다. */
/* 3열로 넓어진 칸에 세로 카드를 두니 사진 오른쪽이 200px 비었다. 졸업생 카드처럼
   눕힌다 — 사진 왼쪽, 글 오른쪽. 마크업의 .mbody 래퍼가 글을 한 덩어리로 묶어 준다
   (래퍼가 없으면 이름·관심분야·링크가 각자 칸을 차지해 흩어진다). */
.mcard { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 15px; align-items: start; }
.mphoto { max-width: none; }
.mbody { min-width: 0; }
.mcard h4 { margin: 0 0 4px; }
.mcard .mint { margin: 0 0 9px; }
.mcard .mlnk { margin: 0; }
@media (max-width: 640px) { .mcard { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } }

/* ─── 교수 CV ─────────────────────────────────────────────────
   아홉 구역 79항목이 전부 펼쳐져 있어 글 벽으로 읽혔다. 구역을 접어 두고
   옆의 숫자로 안에 몇 건이 있는지 알린다. 학력·경력만 펼쳐 둔다.

   여러 단(columns) 위에 접이식을 얹으면 하나를 열 때마다 다른 구역이 단을
   넘나들며 튄다. 격자로 바꿔 각 칸이 제자리를 지키게 한다. */
.cv {
  columns: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; gap: 14px 48px;
}
.cvb {
  margin: 0;
  border: 1px solid var(--gray-line); border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.cvb > summary {
  list-style: none; cursor: pointer;
  padding: 13px 16px;
  display: flex; align-items: center; gap: 8px;
}
.cvb > summary::-webkit-details-marker { display: none; }
.cvb > summary h4 {
  margin: 0; border: 0; padding: 0; flex: 1;
  display: flex; align-items: baseline;
}
/* 펼침 표시 — 오른쪽 끝의 작은 꺾쇠 */
.cvb > summary::after {
  content: ""; flex: none;
  width: 8px; height: 8px; margin-right: 2px;
  border-right: 1.8px solid #aeb6c8; border-bottom: 1.8px solid #aeb6c8;
  rotate: 45deg; translate: 0 -2px;
  transition: rotate .18s ease, border-color .18s ease;
}
.cvb[open] > summary::after { rotate: 225deg; translate: 0 2px; border-color: var(--navy); }
.cvb > summary:hover { background: var(--wash); }
.cvb > summary:hover::after { border-color: var(--navy); }
.cvb > ul { padding: 0 16px 12px; }
.cvb li { border-bottom: 1px solid #f4f6fa; }
.cvb li:last-child { border-bottom: 0; }

@media (max-width: 999px) { .cv { grid-template-columns: 1fr; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .cvb > summary::after { transition: none; } }

/* ─── 글 상세: 한 칸으로 ───────────────────────────────────────
   제목선은 칸 끝(1425px)까지 가는데 글은 1000px 에서 끊기고, 사진은 또 다른 폭이라
   한 화면에 오른쪽 끝이 세 개였다. 무엇을 기준으로 봐야 할지 알 수 없어
   '여백이 관리가 안 된' 것처럼 읽힌다. 제목·글·그림이 같은 칸을 쓰게 한다. */
.subCon:has(.post) .sub_titbox,
.subCon:has(.post) .sub_body { max-width: 1120px; }
.post_tit, .post_meta,
.post_body > p, .post_body > ul, .post_body > ol, .post_body > blockquote,
.post_body > h4, .post_body > h5,
.pnav_i { max-width: none; }

/* 그림이 한 장뿐이면 4:3 상자에 가두지 않는다. 과제 구성도는 대부분 가로로 길어
   위아래에 회색 띠만 크게 남았다. 제 비율대로 칸을 채운다. */
.post_gal:has(img:only-child) img {
  aspect-ratio: auto; height: auto; width: 100%; max-width: 100%; max-height: none;
}

/* 한때 이 자리에서 굵기만 남기고 색을 되돌렸다 — 원본에서 색으로 강조한 곳이
   <strong> 으로 넘어오면서 문단의 절반이 굵은 남색이 되는 글이 있었기 때문이다.
   세어 보니 그런 글은 198편 중 32편뿐이었고, 나머지는 이름·학회·논문 제목에만
   제대로 걸려 있었다. 그 32편은 색과 무관하게 마크업이 잘못된 것이라 따로 고친다.
   검은 굵은 글씨는 본문 색과 거의 같아 강조가 눈에 띄지 않았다 — 남색으로 돌린다.
   (위 719줄에 같은 규칙이 있다. 여기서 덮지 않으므로 그것이 그대로 산다.) */
.post_body { line-height: 1.9; }

/* 과제 구성도는 이 폭이면 그대로 읽힌다 — 눌러서 키울 일이 없다 */
[data-kind="project"] .post_gal img { cursor: default; }
[data-kind="project"] .post_gal img:hover { filter: none; }

/* ─── 홈 구역 머리 ────────────────────────────────────────────
   NEWS 에만 '더보기' 가 있어, PROJECTS·BOARD 에서 전체 목록으로 가려면 위 메뉴를
   다시 거쳐야 했다. 세 구역을 같은 머리로 맞추고 모두 목록으로 이어 준다. */
/* NEWS 의 머리는 .board013 안에 있어 밑줄이 본문 폭에서 끝났는데, PROJECTS·BOARD 는
   머리 자체가 여백을 쓰는 블록이라 밑줄만 화면 끝까지 그어졌다. 셋의 구조를 같게
   맞춘다 — 여백은 바깥(.sec_head)이 갖고, 밑줄은 안쪽(.board_head)이 긋는다. */
.sec_head { margin-bottom: 22px; }
.sec_head .board_head { margin-bottom: 0; }
.board_head .more {
  flex: none;
  padding: 6px 14px;
  border: 1px solid var(--gray-line); border-radius: 999px;
  font-size: var(--t-meta); font-weight: 600; color: var(--gray-ink);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.board_head .more::after { content: " ›"; }
.board_head .more:hover { border-color: var(--navy); color: var(--navy); background: var(--wash); }
@media (prefers-reduced-motion: reduce) { .board_head .more { transition: none; } }

/* ─── 목록은 훑는 곳 ──────────────────────────────────────────
   과제 목록이 카드마다 설명 문단을 통째로 싣고 있어, 28개를 훑으려면 글을 다 읽어야
   했다. 목록 카드에는 그림·진행 상태·기간·제목·지원 정보만 두고, 설명은 글로
   들어가서 본다 (research/index.html 에서 .proj_desc 자체를 걷어냈다).

   졸업생 카드의 논문 제목은 그 자체가 정보라 지우지 않고 세 줄에서 끊는다. */
.acard .diss {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── 배너 넘김 ───────────────────────────────────────────────
   나가는 장을 display:none 으로 즉시 지우고 들어오는 장을 opacity 0 에서 띄웠다.
   그 사이 한 프레임이 비어 화면이 번쩍였다 — 빛에 민감한 사람에게는 위험하다.
   세 장을 같은 칸에 겹쳐 두고 투명도만 주고받게 한다. 비는 순간이 없다. */
.slide_wrap { display: grid; }
.slide {
  display: block;                      /* none 이 아니라 늘 자리에 있다 */
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;                /* 안 보이는 장의 링크가 눌리지 않게 */
  animation: none;                     /* 옛 fadeIn 을 끈다 */
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.slide.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .7s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-on { transition: none; }
}

/* ─── 협력기관 ────────────────────────────────────────────────
   Application Domains 칩과 로고 벽(합성 PNG 한 장)이 같은 기관을 두 번 보여줬고,
   PNG 한 장에는 새 기관을 붙일 자리가 없었다. 분야별 한 판으로 합친다.
   추가 방법은 about/index.html 의 주석에 있다 — 파일 하나, 줄 하나. */
.partners { display: grid; gap: 18px; }
.pgroup { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: start; }
.plabel {
  margin: 6px 0 0; font-size: var(--t-label); font-weight: 800; letter-spacing: .05em;
  color: var(--gray-ink); text-transform: uppercase;
}
.plist { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.plist li {
  display: flex; align-items: center; justify-content: center;
  min-height: 62px; padding: 10px 20px;
  background: #fff; border: 1px solid var(--gray-line); border-radius: 14px;
}
/* 로고 안의 글자가 작아 기관 이름이 잘 안 읽혔다. 한 단 키운다. */
.plist img { display: block; height: 32px; width: auto; max-width: 196px; object-fit: contain; }
.plist .pname { font-size: var(--t-meta); font-weight: 700; color: var(--ink-soft); }
@media (max-width: 700px) {
  .pgroup { grid-template-columns: 1fr; gap: 8px; }
  .plabel { margin: 0; }
  .plist li { min-height: 52px; padding: 8px 15px; }
  .plist img { height: 26px; }
}

/* 주소를 'Email' 알약 뒤에 숨겨 두면 눌러 봐야 누구 주소인지 안다.
   주소 자체가 짧은 정보라 그냥 적는다. 누르면 메일이 열리는 것은 그대로. */
.mcard .mlnk { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mmail {
  font-size: var(--t-meta); color: var(--gray-ink);
  border-bottom: 1px solid var(--gray-line);
  word-break: break-all;
}
/* Google Scholar — 글자 대신 아이콘 하나. 좁은 칸에서 자리를 덜 먹는다.
   폰트 글리프로 그리면 단색이라 무슨 표인지 알아보기 어려웠다. 협력기관 로고들과
   같은 방식으로 실제 로고 파일(assets/img/logo-google-scholar.svg)을 싣는다.
   그림만 있으면 읽어 주는 도구가 이름을 못 부르므로 aria-label 을 단다. */
.mscholar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 999px; line-height: 1;
  border: 1px solid var(--gray-line); background: #fff;
  transition: border-color .18s ease, background .18s ease;
}
.mscholar img { display: block; width: 17px; height: 17px; }
.mscholar:hover { border-color: var(--navy-line); background: var(--wash); }

.mmail:hover { color: var(--navy); border-bottom-color: var(--navy); }

/* 온클레브 로고는 어두운 배경용(크림색 글자)으로만 배포된다. 그 칸만 어둡게 깔면
   로고 벽에서 한 칸만 튀므로, 밝기를 뒤집어 흰 배경용으로 만들었다
   (로즈색 대괄호는 채도를 살려 브랜드 색을 지켰다 — assets/img/logo-onclev.png). */

/* 정사각에 가까운 로고(ZHAW, 대한치매학회)는 같은 height 를 줘도 가로가 짧아 작아 보인다.
   폭이 좁은 것만 조금 키워 시각적 무게를 맞춘다. */
.plist img[src*="zhaw"], .plist img[src*="kda"] { height: 34px; }

/* ─── Demos ───────────────────────────────────────────────────
   Projects 와 같은 짜임이다 — 목록에서 고르고 들어가면 그 하나만 있다.

   폭은 하나다. 글 760 · 시연 880 · 시연 속 화면 605 로 갈라 두었더니 한 화면에
   오른쪽 끝이 네 군데였고, 그것이 "여백 관리가 안 된다" 로 읽혔다 (STYLE.md 5절).
   제목부터 논문 목록까지 --demo-col 하나로 끝을 맞춘다.

   그 하나를 880 으로 잡았더니 이번엔 오른쪽이 465px 비었다. 같은 자리의 다른 글
   (Projects·News 상세)은 1120 이라, 이 페이지만 안쪽으로 밀려 들어가 보였다.
   폭을 그 1120 에 맞춘다 — 남는 여백이 아니라 옆 페이지와 같은 자리가 기준이다. */
.demo { --demo-col: 1120px; max-width: var(--demo-col); }

/* 상세 머리 — 갈래 이름은 목록 카드와 같은 칩으로 단다.
   여기 있던 'Demos / 갈래' 줄은 걷어냈다. 페이지 위 빵부스러기가 이미 그 일을 한다. */
.demo_top { margin: 0 0 12px; }
.demo_title { margin: 0 0 4px; font-size: var(--t-page); font-weight: 800; line-height: 1.35;
  letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
.demo_sub { margin: 0 0 8px; font-size: var(--t-body); line-height: 1.85; color: var(--ink-soft); }
.demo_people { margin: 0 0 30px; font-size: var(--t-meta); color: var(--gray-ink); }

/* Try It — 시연물은 제 폭(챗봇 660px, 키오스크 330px)을 갖고 있어서 넓은 칸에
   덩그러니 놓이면 깨진 것처럼 보였다. 받침을 깔아 칸을 채우고 가운데 세운다. */
.demo_play {
  padding: 26px 24px; border-radius: var(--r-panel); background: var(--wash);
  border: 1px solid var(--gray-line);
}
.demo_play > * { margin-left: auto; margin-right: auto; }

/* Video */
.demo_video { aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden;
  background: #000; box-shadow: 0 8px 26px rgba(12, 24, 84, .16); }
.demo_video iframe, .demo_video video { display: block; width: 100%; height: 100%; border: 0; }

/* Notes */
.demo_know { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.demo_know li { padding-left: 15px; position: relative; font-size: var(--t-body);
  line-height: 1.8; color: var(--ink-soft); }
.demo_know li::before { content: ""; position: absolute; left: 0; top: .72em;
  width: 5px; height: 5px; border-radius: var(--r-dot); background: var(--navy-line); }
.demo_know b { color: var(--navy); font-weight: 700; }

/* Publications — 학회 이름만 적혀 있고 논문으로 가는 길이 없었다.
   Publications 페이지의 한 줄과 같은 짜임으로 적고, 제목이 곧 링크다. */
.demo_papers { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; }
.demo_papers li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px;
  padding: 13px 16px; border: 1px solid var(--gray-line); border-radius: var(--r-media); background: #fff; }
/* 논문 묶음의 소제목 — 논문 행과 같은 흰 상자로 찍혀 구분이 안 됐다.
   상자를 벗기고(border·background 없음) 대문자 라벨로 세운다. */
.demo_papers li.dp_group {
  display: block; border: 0; background: none; padding: 0 2px 2px;
  margin-top: 18px;
  font-size: var(--t-label); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy);
}
.demo_papers li.dp_group:first-child { margin-top: 0; }
.dp_y { font-size: var(--t-meta); font-weight: 800; color: var(--navy); }
.dp_b b { display: block; font-size: var(--t-meta); font-weight: 700; line-height: 1.5; color: var(--ink); }
.dp_b b a { color: inherit; }
.dp_v { display: block; margin-top: 3px; font-size: var(--t-small); color: var(--gray-ink); }
.dp_note::before { content: "· "; }
.demo_back { margin: 0; }

/* ─── Demos 목록 ──────────────────────────────────────────────
   두 건뿐인데 Projects(28건)의 전폭 가로줄을 그대로 쓰고 있었다. 줄 하나에
   250px 그림과 짧은 글만 있고 오른쪽 절반이 통째로 비었다. 칸으로 세운다. */
.dcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dcard {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--gray-line); border-radius: var(--r-panel); overflow: hidden;
  background: #fff; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dcard:hover { border-color: var(--navy-line); transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(12, 24, 84, .10); }
.dcard_shot { display: block; aspect-ratio: 16 / 9; background: var(--wash); overflow: hidden; }
.dcard_shot img { width: 100%; height: 100%; object-fit: cover; }
.dcard_body { display: block; padding: 18px 20px 20px; }
.dcard_body .tag.on { display: inline-block; margin-bottom: 10px; }
.dcard_tit { display: block; margin-bottom: 7px; font-size: var(--t-item); font-weight: 700;
  line-height: 1.5; color: var(--ink); }
.dcard:hover .dcard_tit { color: var(--navy-ink); }
.dcard_lead { display: block; margin-bottom: 12px; font-size: var(--t-meta); line-height: 1.7;
  color: var(--ink-soft); }

@media (max-width: 900px) { .dcards { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .demo_title { font-size: var(--t-sec); }
  .demo_play { padding: 18px 14px; }
  .demo_papers li { grid-template-columns: 1fr; gap: 4px; }
}


/* ─── 마감 규칙 ───────────────────────────────────────────────
   지금까지는 컴포넌트마다 제 나름의 마감을 갖고 있었다. 여기서 사이트 전체가
   따르는 것만 한 곳에 모은다. 새 컴포넌트를 만들 때 아래는 자동으로 따라온다. */

/* 키보드로 다닐 때 지금 어디인지 늘 보이게. 마우스 클릭에는 테두리가 안 생긴다. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--navy-ink);
  outline-offset: 2px;
  border-radius: 3px;
}
/* 옛 스타일이 남긴 outline:none 을 되돌린다 — 키보드 사용자가 길을 잃는다 */
:where(a, button, input, summary):focus-visible { outline-style: solid; }

/* 글을 긁었을 때도 사이트 색으로 */
::selection { background: var(--navy-tint); color: var(--navy); }

/* 본문 속 링크는 밑줄이 있어야 링크로 보인다. 메뉴·버튼·카드처럼 이미 생김새로
   구분되는 것은 빼고, 글 안에서만 긋는다. */
.post_body a:not(.pill),
/* .abody(졸업생 카드)는 뺐다 — sub.css 의 .lnk 주석과 같은 이유다. */
.demo_know a, .para a, .proj_desc a, .cvb a:not(.btn):not(.cvlnk) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--navy-line);
}
.post_body a:hover, .demo_know a:hover, .para a:hover { text-decoration-color: currentColor; }

/* 이력 목록(.cvb)의 링크 — 밑줄을 그으면 링크 있는 줄만 튀어서, 줄은 여느 줄과
   똑같이 두고 끝에 작은 ↗ 로만 알린다. 짚으면 남색 밑줄이 돌아온다. */
.cvlnk { color: inherit; text-decoration: none; }
.cvlnk::after {
  content: "\2197";
  margin-left: 5px;
  font-size: .82em; color: var(--gray);
}
.cvlnk:hover { color: var(--navy-ink); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }
.cvlnk:hover::after { color: var(--navy-ink); }

/* 사진이 아직 안 왔을 때 흰 구멍이 뚫리지 않게 — 모든 이미지에 같은 바닥 */
:where(.mphoto, .aphoto, .fac_img, .proj_img, .prof_img, .thumb, .bf_shot) img,
:where(.gallery, .vids) img { background: var(--wash); }

/* 표는 이 사이트에 드물지만, 나오면 이 모양을 따른다 */
.sub_body table { width: 100%; border-collapse: collapse; font-size: var(--t-meta); }
.sub_body th, .sub_body td { padding: 10px 12px; border-bottom: 1px solid var(--gray-line); text-align: left; }
.sub_body th { font-weight: 700; color: var(--navy); background: var(--wash); }
.sub_body td { font-variant-numeric: tabular-nums; }

/* 숫자가 세로로 늘어서는 곳은 자릿수를 맞춘다 */
.pub_y, .pat_y, .llist time, .demo_papers b, .pg { font-variant-numeric: tabular-nums; }

/* 움직임을 줄여 달라고 한 사람에게는 전부 끈다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ─── 바닥값 ──────────────────────────────────────────────────
   style.css 의 body 가 원본 사이트에서 온 13px / #000 을 깔고 있었다.
   컴포넌트마다 제 크기와 색을 지정해 두어 겉으로는 안 보였지만, 클래스 없는
   컨테이너(li, div, p)는 전부 그 값을 물려받아 — 실측하니 한 페이지에서
   13px 613곳, 순수 검정 769곳이 상속으로 흐르고 있었다.
   바닥을 사이트 기준으로 바꾼다. 위에 얹힌 규칙들은 그대로 이긴다. */
body {
  font-size: var(--t-body);
  color: var(--ink-soft);
  line-height: 1.75;
}
/* 순수 검정은 화면에서 눈을 찌른다. 제목은 잉크, 본문은 그보다 옅게. */
h1, h2, h3, h4, h5, h6 { color: var(--ink); }

/* style.css 는 링크와 큰 제목을 순수 검정으로 둔다 (원본 사이트의 값). 잉크로 옮긴다. */
a { color: inherit; }
.etc002 .tit, .sub_titbox .tit { color: var(--ink); }

/* style.css 는 링크와 큰 제목을 순수 검정으로 둔다 (원본 사이트의 값). 잉크로 옮긴다. */
a { color: inherit; }
.etc002 .tit, .sub_titbox .tit { color: var(--ink); }

/* ---------------------------------------------------------------- 404
   주소가 바뀌어 들어온 사람을 빈손으로 돌려보내지 않는다. 옛 CMS 주소를
   눌러 온 방문자가 여기서 찾던 곳으로 갈 수 있게 갈래를 펼쳐 둔다. */
.nf_lead { font-size: 15px; line-height: 1.8; color: var(--body-gray); margin-bottom: 28px; }
.nf_links { list-style: none; border-top: 1px solid var(--line); margin-bottom: 24px; }
.nf_links li { border-bottom: 1px solid var(--line); }
.nf_links a {
  display: inline-block; min-width: 160px; padding: 16px 0;
  font-size: 16px; font-weight: 700; color: var(--navy); text-decoration: none;
}
.nf_links a:hover { color: var(--azure); text-decoration: underline; }
.nf_links span { font-size: 14px; color: var(--body-gray); }
.nf_help { font-size: 14px; line-height: 1.8; color: var(--body-gray); }
@media (max-width: 640px) {
  .nf_links a { display: block; min-width: 0; padding: 14px 0 4px; }
  .nf_links li { padding-bottom: 12px; }
}