/* =========================================================
   TIDE Lab — 연구실 전용 스타일 (랜딩 키트 style.css 위에 더한다)
   기준: dicolab-design references/lab-site.md
   - 사람 목록형·성과 목록형 틀, 해도 위 관측 정점, 모집 마감까지 남은 날, 지원 메일 양식, 휴대폰 하단 모집 바
   - 부이 주황(--c-buoy)은 입학 문의·지원 버튼에만 쓴다
   ========================================================= */

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
cite { font-style: italic; }
cite:lang(ko) { font-style: normal; }
[hidden] { display: none !important; }

/* ---------- 머리글: 1차 메뉴 6개 (템플릿은 5개 기준) ---------- */
.gnb__link, .util-btn { white-space: nowrap; }
.logo__en { letter-spacing: .04em; }
@media (max-width: 1360px) {
  .gnb__link { min-width: 0; padding: 0 clamp(10px, 1.3vw, 22px); font-size: 1.0625rem; }
  .util-btn--lang > span:first-of-type { display: none; }
  .site-header__inner { gap: 16px; }
}

/* ---------- 버튼: 입학 문의·지원 ---------- */
.btn--buoy { background: var(--c-buoy); color: #fff; }
.btn--buoy:hover { background: var(--c-buoy-deep); color: #fff; }
.btn--small { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.linklike { padding: 4px 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--c-primary); text-decoration: underline; text-underline-offset: .2em; }
.linklike:hover { color: var(--c-primary-deep); }

/* 마감까지 남은 날 */
.dday { display: inline-block; padding: 0 7px; border-radius: 4px; background: var(--c-buoy); color: #fff; font: 600 .8125rem/1.6 var(--font-mono); letter-spacing: 0; vertical-align: 1px; }
.is-closed .dday { background: var(--c-muted); }
.quick__name .dday { margin-left: 4px; font-size: .75rem; }

/* 페이지 머리의 갱신일 — 방치되지 않은 사이트라는 표시 */
.page-head__updated { margin-top: 10px; font: 500 .8125rem/1.5 var(--font-mono); color: var(--c-muted); }
.site-footer__sync { margin-top: 12px; font-size: .8125rem; color: #6B7A84; }

/* 메인 연구 카드: 그 주제 논문 수 */
.biz-card__count { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 100px; background: rgba(255, 255, 255, .16); font-size: .875rem; font-weight: 600; }

/* ---------- 논문 (성과 목록형 · 메인 최근 논문) ---------- */
.sync-note { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; padding: 14px 18px; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-line); font-size: .9375rem; line-height: 1.6; color: #44535D; }
.sync-note svg { flex: none; margin-top: 2px; color: var(--c-primary); }
.sync-note time { font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.author-legend { margin: 6px 0 22px; font-size: .875rem; color: var(--c-muted); }

.pub-list { list-style: none; margin: 0; padding: 0; }
.pub { padding: 20px 0; border-top: 1px solid var(--c-line); }
.pub:last-child { border-bottom: 1px solid var(--c-line); }
.pub__title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.5; letter-spacing: -0.01em; color: var(--c-ink); }
.pub__authors { margin-top: 4px; font-size: .9375rem; color: #444; }
.pub__authors b { font-weight: 700; color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: .22em; }
.pub__venue { font-size: .9375rem; color: #66757F; }
.pub__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ptag { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 100px; background: var(--c-gray); font-size: .75rem; font-weight: 600; line-height: 1.8; color: #56656F; }
.ptag--st { background: var(--c-primary-soft); color: var(--c-primary-deep); }
.ptag--st::before { content: ""; width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; }
.ptag--new { background: #FFF1D6; color: #8A5300; }
.ptag--oa { background: #E5F4EC; color: #1F6B45; }
.pub__actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; }
.pub__actions button { padding: 6px 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 600; color: var(--c-primary); text-decoration: underline; text-underline-offset: .2em; }
.pub__actions button:hover { color: var(--c-primary-deep); }
.pub.is-hidden, .year-group.is-hidden { display: none; }
.pub-list--compact .pub { padding: 16px 0; }
.pub-list--compact .pub__title { font-size: 1.0625rem; }

/* 메인: 대표 논문 큰 카드 + 최신 4편 */
.pub-feature { display: grid; gap: clamp(24px, 3vw, 48px); margin-top: 8px; }
@media (min-width: 1024px) { .pub-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.pub-feature__card { display: grid; gap: 18px; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius-xl); background: var(--c-surface); color: inherit; transition: box-shadow .3s; }
.pub-feature__card:hover { box-shadow: var(--shadow-card); }
.pub-feature__fig { margin: 0; padding: 16px; border-radius: var(--radius); background: #fff; }
.pub-feature__fig svg { display: block; width: 100%; height: auto; }
.pub-feature__fig figcaption { margin-top: 10px; font-size: .8125rem; line-height: 1.6; color: var(--c-muted); }
.pub-feature__body h3 { margin: 10px 0 8px; font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); line-height: 1.45; }
.pub-feature__body p { color: #555; }
.pub-feature__body .more-link { margin-top: 12px; display: inline-flex; }

/* 논문 페이지: 왼쪽 거르기 + 오른쪽 연도별 목록 */
.pubs-layout { display: grid; gap: 28px; }
@media (min-width: 1024px) { .pubs-layout { grid-template-columns: 290px minmax(0, 1fr); gap: 56px; align-items: start; } }
.filters { display: grid; gap: 18px; padding: 22px; border-radius: var(--radius); background: var(--c-surface); }
@media (min-width: 1024px) { .filters { position: sticky; top: calc(var(--header-h) + 80px); } }
.search { display: grid; gap: 6px; }
.search label { font-weight: 700; font-size: .9375rem; color: var(--c-ink); }
.search input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); background: #fff; font: 400 1rem/1.4 var(--font-body); color: var(--c-ink); }
.filters__more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--c-line-strong); border-radius: 100px; background: #fff; font-weight: 700; cursor: pointer; list-style: none; }
.filters__more > summary::-webkit-details-marker { display: none; }
.filters__more > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.filters__more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.filters__body { display: grid; gap: 18px; padding-top: 16px; }
@media (min-width: 1024px) { .filters__more > summary { display: none; } .filters__body { padding-top: 0; } }
.fgroup { margin: 0; padding: 0; border: 0; min-width: 0; }
.fgroup legend { margin-bottom: 8px; padding: 0; font-weight: 700; font-size: .9375rem; color: var(--c-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid #D3DEE3; border-radius: 100px; background: #fff; font: inherit; font-size: .9375rem; font-weight: 600; color: #4A5963; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.chip__n { font: 500 .75rem/1 var(--font-mono); color: var(--c-muted); }
.chip[aria-pressed="true"] { background: var(--c-primary-deep); border-color: var(--c-primary-deep); color: #fff; }
.chip[aria-pressed="true"] .chip__n { color: rgba(255, 255, 255, .8); }
.chip--st::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--c-primary); border-radius: 50%; }
.chip--st[aria-pressed="true"]::before { border-color: #fff; }
.years { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; align-items: end; }
.year-bar { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; }
.year-bar__col { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 64px; border-bottom: 1px solid var(--c-ink); }
.year-bar__col i { display: block; width: 70%; max-width: 22px; height: calc(var(--n) * 10px); border-radius: 3px 3px 0 0; background: #B9D8E3; transition: background-color .2s; }
.year-bar__n, .year-bar__y { font: 500 .6875rem/1 var(--font-mono); color: var(--c-muted); }
.year-bar__y { color: var(--c-ink); }
.year-bar:hover i { background: #7FB4C7; }
.year-bar[aria-pressed="true"] i { background: var(--c-primary-deep); }
.filters__count { font-size: .9375rem; }
.filters__count b { font-family: var(--font-mono); color: var(--c-ink); }
.year-group + .year-group { margin-top: 40px; }
.year-group__head { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: 1.625rem; font-weight: 500; letter-spacing: 0; color: var(--c-primary-deep); }
.year-group__head small { font-family: var(--font-body); font-size: .875rem; font-weight: 500; color: var(--c-muted); }
.year-group .pub-list { margin-top: 8px; }
.empty { padding: 32px 0; border-top: 1px solid var(--c-line); }

/* ---------- 표 (과제·특허·졸업생) — 휴대폰에서는 행마다 카드처럼 ---------- */
.lab-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--c-ink); font-size: .9688rem; }
.lab-table th, .lab-table td { padding: 16px 14px 16px 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.lab-table thead th { font-size: .8125rem; font-weight: 700; color: var(--c-muted); }
.lab-table tbody th { color: var(--c-ink); font-weight: 700; }
.lab-table td.num { white-space: nowrap; font-family: var(--font-mono); font-size: .875rem; }
.lab-table [hidden] { display: none !important; }
.pstatus { display: inline-block; padding: 1px 10px; border-radius: 100px; background: var(--c-gray); font-size: .8125rem; font-weight: 700; color: #66757F; white-space: nowrap; }
.pstatus--on { background: var(--c-primary-soft); color: var(--c-primary-deep); }
@media (max-width: 767px) {
  .lab-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lab-table, .lab-table tbody, .lab-table tr, .lab-table td, .lab-table th { display: block; }
  .lab-table tr { padding: 14px 0; border-bottom: 1px solid var(--c-line); }
  .lab-table td, .lab-table th { padding: 2px 0; border: 0; }
  .lab-table td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 4.5em; margin-right: 8px; font-size: .8125rem; color: var(--c-muted); }
}

/* 수상 */
.award-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-ink); }
.award-list li { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 4px 20px; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.award-list time { font: 500 .9375rem/1.6 var(--font-mono); color: var(--c-primary); }
.award-list b { color: var(--c-ink); }
.award-list span { display: block; font-size: .875rem; color: var(--c-muted); }
@media (max-width: 479px) { .award-list li { grid-template-columns: 1fr; } }

/* ---------- 연구 분야: 해도 위 관측 정점 ---------- */
.lab-chart { display: grid; gap: 32px; margin-bottom: clamp(40px, 6vw, 72px); }
@media (min-width: 1024px) { .lab-chart { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 56px; } }
.chart { position: relative; margin: 0; padding: 7px; border: 1px solid var(--c-ink); background: #fff; }
.chart::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--c-ink); pointer-events: none; }
.chart__map { position: relative; }
.chart__map > svg { display: block; width: 100%; height: auto; }
.chart figcaption { margin-top: 10px; font-size: .8125rem; color: var(--c-muted); }
.station { position: absolute; display: flex; align-items: center; gap: 2px; transform: translate(-22px, -50%); color: var(--c-primary-deep); }
.station__mark { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
.station__mark::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #9C1F66; background: #fff radial-gradient(circle, #9C1F66 0 3px, transparent 3.5px); }
.station__label { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border: 1px solid #9C1F66; border-radius: 4px; background: rgba(255, 255, 255, .95); color: #9C1F66; font-size: .875rem; font-weight: 700; line-height: 1.3; white-space: nowrap; transition: background-color .2s, color .2s; }
.station__label .mono { font-size: .75rem; font-weight: 500; }
.station:hover .station__label, .station:focus-visible .station__label { background: #9C1F66; color: #fff; }

/* 주제 상세 */
.detail-q { margin-top: 20px; color: #555; font-size: var(--fs-lead); line-height: 1.7; }
.topic-people { margin-top: 18px; color: #555; }
.topic-people b { color: var(--c-ink); margin-right: 6px; }
.figure { margin: 0; padding: 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--c-line); }
.figure svg { display: block; width: 100%; height: auto; max-width: 760px; margin-inline: auto; }
.figure figcaption { margin-top: 12px; font-size: .875rem; line-height: 1.6; color: var(--c-muted); }
.figure figcaption b { color: var(--c-ink); }

/* 장비·공개 자료 */
.pj-card__desc { color: #555; font-size: .9375rem; }
.data-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-ink); }
.data-list li { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.data-list b { font-size: 1.0625rem; color: var(--c-ink); }
.data-list span { color: #555; }
.data-list .ph, .data-list .more-link { justify-self: start; }

/* ---------- 구성원 (사람 목록형) ---------- */
.pi { display: grid; gap: 28px; }
@media (min-width: 900px) { .pi { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; } }
.pi__photo { margin: 0; }
.pi__photo svg { display: block; width: 100%; max-width: 260px; height: auto; border-radius: var(--radius); }
.pi__photo figcaption { margin-top: 8px; font-size: .8125rem; color: var(--c-muted); }
.pi__name { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.pi__name span { margin-left: 8px; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 500; color: var(--c-muted); }
.pi__lead { margin-top: 16px; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); }
.cv { display: grid; gap: 10px; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--c-line); }
.cv div { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 12px; }
.cv dt { color: var(--c-muted); }
.cv dd { margin: 0; }
.pi__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; padding: 0; list-style: none; font-size: .9375rem; }

.people-group + .people-group { margin-top: 48px; }
.people-group__title { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid var(--c-ink); font-family: var(--font-display); font-size: var(--fs-h3); }
.people-group__title span { font: 500 .875rem/1 var(--font-mono); color: var(--c-muted); }
.people { display: grid; list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1100px) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.person { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.person__mark { grid-row: span 4; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary-deep); font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; }
.person__name { font-weight: 700; font-size: 1.0625rem; color: var(--c-ink); }
.person__name span { margin-left: 8px; font-weight: 400; font-size: .875rem; color: var(--c-muted); }
.person__topic { font-size: .9375rem; color: #444; }
.person__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .875rem; color: var(--c-muted); }

/* ---------- 모집 ---------- */
.openings { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .openings { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opening { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); border-top: 4px solid var(--c-buoy); }
.opening.is-closed { border-top-color: var(--c-muted); }
.opening__state { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; color: var(--c-buoy-deep); }
.is-closed .opening__state { color: var(--c-muted); }
.opening h3 { font-family: var(--font-display); font-size: var(--fs-h3); }
.opening dl { display: grid; gap: 6px; margin: 0; font-size: .9375rem; }
.opening dl div { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 10px; }
.opening dt { color: var(--c-muted); }
.opening dd { margin: 0; }
.opening p { color: #555; font-size: .9375rem; }
.opening .more-link { margin-top: auto; align-self: flex-start; }

.flow__item--mail { grid-template-columns: 120px minmax(0, 1fr); }
@media (max-width: 767px) { .flow__item--mail { grid-template-columns: 1fr; } }
.mail { margin-top: 18px; padding: clamp(18px, 2vw, 26px); border-radius: var(--radius); background: var(--c-surface); }
.mail__label { margin-bottom: 8px; font-weight: 700; color: var(--c-ink); }
.mail__rows { display: grid; gap: 8px; margin: 18px 0 0; font-size: .9375rem; }
.mail__rows div { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 12px; }
.mail__rows dt { color: var(--c-muted); }
.mail__rows dd { margin: 0; }
.mail__subject { font-family: var(--font-mono); font-size: .875rem; color: var(--c-ink); }
.mail__body { margin: 14px 0 0; padding: 14px 16px; border-radius: var(--radius-sm); background: #fff; border-left: 3px solid var(--c-primary); color: #444; font-size: .9375rem; white-space: pre-line; }
.mail__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.week { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-ink); }
.week li { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 4px 18px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.week b { font-family: var(--font-display); font-size: 1.1875rem; color: var(--c-ink); }
.week p { font-weight: 600; color: var(--c-ink); }
.week span { display: block; font-weight: 400; font-size: .9375rem; color: var(--c-muted); }
.week li.is-field { margin-inline: -16px; padding-inline: 16px; border-radius: var(--radius-sm); background: var(--c-primary-soft); }

.support { display: grid; gap: 16px; margin: 0; }
@media (min-width: 720px) { .support { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.support div { padding: 22px 24px; border-radius: var(--radius); background: var(--c-gray); }
.support dt { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--c-ink); }
.support dd { margin: 6px 0 0; color: #555; }

/* ---------- 휴대폰 하단 모집 바 ---------- */
.join-bar { display: none; }
@media (max-width: 1023px) {
  body.has-join-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .join-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--c-primary-deep); color: #fff;
  }
  .join-bar p { margin: 0; font-size: .875rem; line-height: 1.45; }
  .join-bar b { display: block; font-size: .9375rem; }
  .join-bar .btn { flex: none; }
  .is-menu-open .join-bar, body:has(.site-menu:not([hidden])) .join-bar { display: none; }
}

/* ---------- 알림 (복사 완료 등) ---------- */
.lab-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 300; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: var(--radius-sm); background: var(--c-ink); color: #fff; font-size: .9375rem;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.lab-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1023px) { .has-join-bar .lab-toast { bottom: calc(92px + env(safe-area-inset-bottom)); } }

@media (prefers-reduced-motion: reduce) {
  .lab-toast { transform: translate(-50%, 0); }
}