@charset "utf-8";
/* ============================================================
   하위 페이지 전용 — 원본 .subCon / .sub_titbox / .location 골격
   (style.css 다음에 로드된다)
   ============================================================ */
.subCon { padding: 46px 60px 80px; }

.sub_titbox {
  border-bottom: 1px solid var(--gray-line);
  padding-bottom: 16px; margin-bottom: 34px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.sub_titbox .tit { font-size: var(--t-page); font-weight: 600; color: var(--text); letter-spacing: -.02em; }

.location ul { display: flex; align-items: center; gap: 6px; }
.location li { display: flex; align-items: center; gap: 6px; font-size: var(--t-small); color: var(--gray); }
.location li + li::before { content: "\203A"; color: var(--gray-line); }
.location a { color: var(--gray); }
.location a:hover { color: var(--azure); }
.location li:last-child a { color: var(--text); }

/* 섹션 — 원본의 '› 제목' */
.sec { margin-bottom: 46px; }
.sec_tit {
  font-size: var(--t-sec); font-weight: 600; color: var(--text);
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 18px;
  padding-bottom: 10px; border-bottom: 1px solid var(--gray-line);
}
.subBullet { font-style: normal; color: var(--sand); }
.sec_tit .n, .cvb .n, .works .n { font-size: var(--t-label); color: var(--sand); font-weight: 400; }

.lead { font-size: var(--t-meta); color: var(--body-gray); margin-bottom: 22px; }
.para { font-size: var(--t-body); line-height: 26px; color: var(--text); margin-bottom: 14px; }
.para.en { color: var(--body-gray); font-size: var(--t-meta); line-height: 24px; }
.noimg { display: block; width: 100%; aspect-ratio: 3 / 4; background: var(--wash); }
.collab img { width: 100%; }

.tracks { display: grid; gap: 16px; }
.track { border-left: 3px solid var(--sand); padding: 4px 0 4px 16px; }
.track-title { font-size: var(--t-item); font-weight: 600; margin-bottom: 6px; }
.track-desc { font-size: var(--t-meta); line-height: 1.85; color: var(--body-gray); }
.domains { display: flex; flex-wrap: wrap; gap: 10px; }
.domains li { border: 1px solid var(--gray-line); padding: 8px 16px; display: flex; gap: 10px; align-items: baseline; }
.domains b { font-size: var(--t-meta); font-weight: 600; }
.domains span { font-size: var(--t-small); color: var(--body-gray); }

.tag {
  display: inline-block; font-size: var(--t-label); padding: 2px 9px;
  background: var(--wash); color: var(--board-sub); white-space: nowrap;
}
.tag.on { background: var(--azure); color: #fff; }
.tag.off { background: var(--wash); color: var(--gray); }
.pill {
  display: inline-block; font-size: var(--t-label); padding: 4px 11px; margin-right: 5px;
  border: 1px solid var(--gray-line); color: var(--text);
}
.pill:hover { border-color: var(--azure); color: var(--azure); }
/* 졸업생의 현재 소속. 링크가 걸린 사람과 안 걸린 사람이 섞여 있는데 밑줄을 그으면
   링크 있는 줄만 도드라져, 그 사람을 일부러 내세운 것처럼 보였다. 색으로만 구분한다. */
.lnk { color: var(--azure); }
.btn { display: inline-block; background: var(--navy); color: #fff; font-size: var(--t-small); padding: 9px 18px; }
.btn:hover { background: var(--azure); color: #fff; }

.empty { text-align: center; color: var(--gray); padding: 44px 0; font-size: var(--t-meta); }

/* 목록형 (Lab log / News) */
.llist .lrow {
  display: grid; grid-template-columns: 108px 1fr auto; gap: 18px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--gray-line);
}
.llist time { font-size: var(--t-small); color: var(--date); }
.llist p { font-size: var(--t-meta); line-height: 1.6; color: var(--board-sub); }

/* Facility */
.facs { display: grid; gap: 26px; }
/* 사진과 스펙 목록의 길이가 제각각이라 둘을 위에 맞추면 짧은 쪽이 붕 떠 보였다.
   가운데로 맞춘다 — 사진이 위로 치우쳐 보이던 것이 사라진다. */
.fac { display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: center; padding-bottom: 26px; border-bottom: 1px solid var(--gray-line); }
.fac_img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fac_body h4 { font-size: var(--t-item); font-weight: 600; margin-bottom: 10px; display: flex; gap: 9px; align-items: center; }
.fac_body .qty { font-size: var(--t-label); color: var(--gray); font-weight: 400; }
.fac_body ul li { font-size: var(--t-small); color: var(--body-gray); line-height: 1.75; }

/* Patent */
.patlist .pat { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--gray-line); }
.pat_y { font-size: var(--t-small); color: var(--date); text-align: right; font-variant-numeric: tabular-nums; }
/* 글 번호 — News 목록의 .lno 와 같은 자리·같은 모양 */
.pno { font-size: 13.5px; color: var(--gray); text-align: center; font-variant-numeric: tabular-nums; padding-top: 2px; }
.pat h4 { font-size: var(--t-item); font-weight: 600; line-height: 1.5; margin-bottom: 6px; }
.pat .inv { font-size: var(--t-small); color: var(--text); margin-bottom: 7px; }
.pat .meta { display: flex; gap: 9px; align-items: center; font-size: var(--t-small); color: var(--body-gray); margin-bottom: 4px; }
.pat .assignee { font-size: var(--t-small); color: var(--body-gray); }

/* Professor */
.prof { display: grid; grid-template-columns: 250px 1fr; gap: 44px; padding-bottom: 36px; border-bottom: 1px solid var(--text); margin-bottom: 34px; }
.prof_img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.prof_body h3 { font-size: var(--t-page); font-weight: 600; margin-bottom: 4px; }
.prof_body .ko { font-size: var(--t-item); font-weight: 400; color: var(--body-gray); }
.prof_body .role { font-size: var(--t-small); color: var(--azure); margin-bottom: 4px; }
.prof_body .aff { font-size: var(--t-meta); color: var(--body-gray); margin-bottom: 15px; }
.prof_body .major { font-size: var(--t-meta); margin-bottom: 16px; }
.prof_body .major b { color: var(--sand); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .06em; margin-right: 7px; font-weight: 400; }
.prof_meta { display: grid; grid-template-columns: 70px 1fr; gap: 4px 12px; font-size: var(--t-small); margin-bottom: 18px; }
.prof_meta dt { color: var(--sand); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }
.cv { columns: 2; column-gap: 48px; }
.cvb { break-inside: avoid; margin-bottom: 34px; }
.cvb h4 {
  font-size: var(--t-meta); font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--gray-line);
  display: flex; gap: 8px; align-items: baseline;
}
.cvb li { font-size: var(--t-small); line-height: 1.7; color: var(--body-gray); padding: 5px 0; border-bottom: 1px solid var(--gray-line); }
.cvlnk { color: var(--text); border-bottom: 1px solid var(--sand); }
.cvlnk:hover { color: var(--azure); }

/* Members */
.team_shot { margin-bottom: 42px; }
.team_shot img { width: 100%; }
.team_shot figcaption { font-size: var(--t-small); color: var(--body-gray); margin-top: 9px; }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 22px; }
.mphoto { position: relative; }
.mphoto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--wash); }
.mbadge { position: absolute; left: 7px; bottom: 7px; font-size: var(--t-label); background: rgba(50, 66, 144, .9); color: #fff; padding: 2px 7px; }
.mcard h4 { font-size: var(--t-body); font-weight: 600; margin: 12px 0 2px; }
.mcard .mrole { font-size: var(--t-label); color: var(--azure); margin-bottom: 5px; }
.mcard .mint { font-size: var(--t-small); color: var(--body-gray); line-height: 1.55; margin-bottom: 9px; }

/* Alumni */
.acards { display: grid; gap: 22px; }
.acard { display: grid; grid-template-columns: 126px 1fr; gap: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--gray-line); }
.aphoto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--wash); }
.ayear { font-size: var(--t-label); color: var(--sand); margin-bottom: 3px; }
.acard h4 { font-size: var(--t-item); font-weight: 600; margin-bottom: 4px; }
.anow { font-size: var(--t-small); color: var(--body-gray); margin-bottom: 9px; }
.diss { font-size: var(--t-small); line-height: 1.65; margin-bottom: 10px; }
.diss b { color: var(--sand); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .06em; margin-right: 7px; font-weight: 400; }
.works summary { cursor: pointer; font-size: var(--t-small); color: var(--azure); }
.works ol { margin: 10px 0 0 20px; }
.works li { font-size: var(--t-small); line-height: 1.7; color: var(--body-gray); margin-bottom: 7px; }

/* History */
.hlist { display: grid; gap: 10px; }
/* 위 시간축이 개관을 맡으므로 목록은 각주 자리로 물러난다 — 이름과 기간을 한 줄에
   놓고 사진을 줄인다. 칸을 넷으로 못박아 기간이 줄마다 세로로 맞게 한다. */
.hrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 42px; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--gray-line); }
/* 이름과 기간을 감싼 div 를 없는 셈 쳐서 둘 다 같은 줄의 칸이 되게 한다 */
.hrow > div { display: contents; }
.hrow > .tag { justify-self: end; }
/* 크기를 px 로 못박으면 칸 폭이 바뀔 때 따라오지 못한다 — 좁은 화면에서 칸은
   44px 로 줄었는데 높이만 52px 로 남아 얼굴이 세로로 늘어난 타원이 됐다.
   칸을 꽉 채우고 비율만 1:1 로 잡으면 칸 폭이 무엇이든 정원이 된다. */
.hrow img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--wash); }
.hname { font-size: 15px; font-weight: 600; }
.hwhen { font-size: 13px; color: var(--body-gray); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Projects */
.projs { display: grid; gap: 26px; }
.proj { display: grid; grid-template-columns: 250px 1fr; gap: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--gray-line); }
.proj_img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--wash); }
.proj_top { display: flex; gap: 11px; align-items: center; margin-bottom: 9px; }
.proj_top time { font-size: var(--t-small); color: var(--body-gray); }
.proj h4 { font-size: var(--t-item); font-weight: 600; line-height: 1.5; margin-bottom: 9px; }
.proj_desc { font-size: var(--t-meta); line-height: 1.85; color: var(--body-gray); margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* Video / V-log */
.vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
.vthumb { display: block; position: relative; overflow: hidden; background: #000; }
.vthumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vthumb .play { position: absolute; inset: 0; margin: auto; width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, .6); }
.vthumb .play::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 13px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  transform: translateX(2px);
}
.vtit { display: block; margin-top: 11px; font-size: var(--t-meta); line-height: 1.5; font-weight: 600; color: var(--text); }
.vid:hover .vtit { color: var(--azure); }

/* Publications */
.pubsum { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 22px; }
.pubsum li { display: flex; align-items: baseline; gap: 7px; }
.pubsum b { font-size: var(--t-sec); font-weight: 600; }
.pubsum span { font-size: var(--t-label); color: var(--body-gray); }
.publist .pub { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 21px 0; border-bottom: 1px solid var(--gray-line); }
.pub_y { font-size: var(--t-small); color: var(--date); padding-top: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.pub_m { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.kind { font-size: var(--t-label); padding: 3px 8px; letter-spacing: .04em; }
.kind.intl { background: var(--navy); color: #fff; }
.kind.dom { background: var(--navy-tint); color: var(--navy); }
.bdg { font-size: var(--t-label); padding: 2px 8px; border: 1px solid var(--sand); color: var(--gray-ink); }
.pub h4 { font-size: var(--t-item); font-weight: 600; line-height: 1.45; margin-bottom: 5px; }
.pub .authors { font-size: var(--t-small); color: var(--text); }
.pub .venue { font-size: var(--t-small); color: var(--body-gray); font-style: italic; }
.pub .plnk { margin-top: 10px; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; }
.gitem { margin: 0; }
.gbtn { display: block; width: 100%; padding: 0; cursor: zoom-in; }
.gbtn .thumb { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--wash); }
.gbtn .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gbtn:hover .thumb img { transform: scale(1.04); }
.gbtn .plus {
  position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sand); color: var(--sand-ink);
  font-size: 20px; line-height: 34px; text-align: center;
}
.gitem figcaption { font-size: var(--t-small); line-height: 1.5; margin-top: 10px; text-align: left; }
.gitem time { display: block; font-size: var(--t-label); color: var(--sand); margin-bottom: 3px; }

.lightbox {
  position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .93);
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
.lightbox[hidden] { display: none; }
.lb_img { max-width: min(1200px, 92vw); max-height: 82vh; object-fit: contain; }
.lb_cap { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #d6dae6; font-size: var(--t-meta); padding: 0 40px; }
.lb_close, .lb_prev, .lb_next { position: absolute; color: #fff; }
.lb_close { top: 16px; right: 22px; font-size: 34px; }
.lb_prev, .lb_next { top: 50%; transform: translateY(-50%); font-size: 46px; padding: 12px 20px; }
.lb_prev { left: 6px; }
.lb_next { right: 6px; }

/* ---------------------------------------------------------------- 반응형 */
@media (max-width: 1200px) {
  .subCon { padding: 36px 36px 64px; }
  .mgrid { grid-template-columns: repeat(3, 1fr); }
  .vids, .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 999px) {
  .subCon { padding: 26px 20px 56px; }
  .sub_titbox .tit { font-size: var(--t-page); }
  .prof, .fac, .proj { grid-template-columns: 1fr; gap: 18px; }
  .prof_img img, .fac_img img, .proj_img img { max-width: 300px; }
  .cv { columns: 1; }
  .mgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .llist .lrow, .pub, .pat { grid-template-columns: 1fr; gap: 5px; }
  .pno { display: none; }
  .acard { grid-template-columns: 92px 1fr; gap: 14px; }
  .vids, .gallery, .mgrid { grid-template-columns: 1fr; }
  .sub_titbox { display: block; }
  .location { margin-top: 8px; }
  .hrow { grid-template-columns: 28px minmax(0, 1fr) auto 40px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .gbtn:hover .thumb img { transform: none; }
}