/* SELAB 공개 홈페이지 색 레이어(2026-10-26)
   body 의 --tone(메뉴 색, utils/site_content.py PUBLIC_TONES)을 강조색으로 써서 페이지마다 다른 색이 스민다.
   관리자 페이지(www_admin)와 같은 색 체계 — Team 파랑, Publications 주황, Research 보라, Photo 호박, Course 초록, Contact 청록. */
body.has-tone {
    --tone-soft: color-mix(in srgb, var(--tone) 8%, #fff);
    --tone-tint: color-mix(in srgb, var(--tone) 15%, #fff);
    --tone-line: color-mix(in srgb, var(--tone) 40%, #fff);
    --tone-ink: color-mix(in srgb, var(--tone) 78%, #000);
    --accent: var(--tone);
    --accent-ink: var(--tone-ink);
    --accent-soft: var(--tone-soft);
    /* 굵은 구분선(원래 2px 검정)을 페이지 색 파스텔로 — 색 띠·카드 톤과 어긋나지 않게 */
    --rule-heavy: 2px solid var(--tone-line);
    /* 연구실 색 띠(모든 메뉴 색을 한 줄에) */
    /* 차분한 연구실 색 띠: 끊긴 원색 대신 옅게 이어지는 그라데이션(맨 위 한 곳에만) */
    --spectrum: linear-gradient(90deg, rgba(216,85,43,.55), rgba(37,99,235,.45) 30%, rgba(139,92,246,.45) 55%, rgba(13,148,136,.45) 80%, rgba(216,85,43,.4));
}

/* ---------- 머리말·내비 ---------- */
.site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--spectrum); }
.brand__name { background: linear-gradient(90deg, var(--ink), var(--tone-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-nav__link { transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.site-nav__link:hover { color: color-mix(in srgb, var(--t, var(--tone)) 80%, #000); border-bottom-color: color-mix(in srgb, var(--t, var(--tone)) 45%, #fff); }
.site-nav__link.is-active { color: color-mix(in srgb, var(--t, var(--tone)) 80%, #000); border-bottom-color: var(--t, var(--tone)); border-bottom-width: 3px; }
.auth-links a:hover { color: var(--tone-ink); }

/* ---------- 페이지 머리(hero) ---------- */
.hero { position: relative; overflow: hidden;
    background:
        radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 60%),
        radial-gradient(40% 90% at 0% 100%, color-mix(in srgb, var(--tone) 8%, transparent), transparent 70%),
        var(--paper); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--tone), var(--tone-line) 45%, transparent); }
.hero__title { color: var(--ink); }
.eyebrow { color: var(--tone-ink); }
.eyebrow::before { background: var(--tone); }

/* ---------- 공통 부품 ---------- */
.btn:not(.btn--ghost):not(.btn--outline) { background: var(--tone); border-color: var(--tone); color: var(--tone-on, #fff); }
.btn:not(.btn--ghost):not(.btn--outline):hover { filter: brightness(.93); color: var(--tone-on, #fff); }
.btn--outline { border-color: var(--tone); color: var(--tone-ink); }
.btn--outline:hover { background: var(--tone-soft); color: var(--tone-ink); }
.btn--ghost:hover { border-color: var(--tone); }
.card { border-top: 3px solid var(--tone-line); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px color-mix(in srgb, var(--tone) 14%, transparent); border-top-color: var(--tone); }
.card__icon { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; color: var(--tone-on, #fff);
    background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--tone)) 70%, #fff), var(--c, var(--tone))); }
.badge, .tag, .chip { border-color: var(--tone-line); }
.badge--accent, .tag--key { background: var(--tone-soft); }
.section--soft { background: linear-gradient(180deg, var(--tone-soft), var(--paper-soft)); }
.rule-top { border-top-color: var(--tone-line) !important; }
a:not(.btn):not(.site-nav__link):not(.brand):hover { color: var(--tone-ink); }

/* ---------- 홈: 여러 색 ---------- */
.home-hero { position: relative;
    background:
        radial-gradient(45% 80% at 92% 10%, rgba(139, 92, 246, .14), transparent 65%),
        radial-gradient(40% 70% at 70% 95%, rgba(37, 99, 235, .10), transparent 65%),
        radial-gradient(35% 60% at 5% 20%, rgba(216, 85, 43, .10), transparent 65%),
        var(--paper); }
.home-hero__title { background: linear-gradient(100deg, var(--ink) 0 45%, #b13f1a 70%, #7c3aed 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 연구 트랙·원칙 카드: 순서마다 다른 색 */
.home-focus-card:nth-child(4n+1), .home-principles__item:nth-child(4n+1), .research-era:nth-child(4n+1), .timeline-program__item:nth-child(4n+1) { --c: #d8552b; }
.home-focus-card:nth-child(4n+2), .home-principles__item:nth-child(4n+2), .research-era:nth-child(4n+2), .timeline-program__item:nth-child(4n+2) { --c: #2563eb; }
.home-focus-card:nth-child(4n+3), .home-principles__item:nth-child(4n+3), .research-era:nth-child(4n+3), .timeline-program__item:nth-child(4n+3) { --c: #8b5cf6; }
.home-focus-card:nth-child(4n+4), .home-principles__item:nth-child(4n+4), .research-era:nth-child(4n+4), .timeline-program__item:nth-child(4n+4) { --c: #16a34a; }
.home-focus-card { border-top-color: var(--c) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, #fff), #fff 55%); }
.home-principles__list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1rem !important; }
.home-principles__item { position: relative; padding: 1.05rem 1.1rem 1.1rem !important; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff) !important;
    border-top: 4px solid var(--c) !important; border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, #fff), #fff 70%);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.home-principles__item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--c) 16%, transparent); }
@media (max-width: 1100px) { .home-principles__list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .home-principles__list { grid-template-columns: 1fr !important; } }
.home-principles__no { color: var(--c); }
.home-promo { background: linear-gradient(120deg, color-mix(in srgb, #d8552b 9%, #fff), color-mix(in srgb, #8b5cf6 9%, #fff)); }

/* ---------- Team ---------- */
.team-tabs__item.is-active { color: var(--tone-ink); border-color: var(--tone); background: var(--tone-soft); }
/* 구성원 카드: 사진과 글을 한 장의 둥근 카드로. 평소 파스텔 테두리, 마우스를 올리면 페이지 색 + 살짝 떠오름(검정 없음) */
.member-card, .lead-card { border: 1px solid var(--tone-line) !important; border-radius: 14px; overflow: hidden; background: #fff;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.lead-card { border-top: 4px solid var(--tone) !important; }
.member-card:hover, .lead-card:hover { border-color: var(--tone) !important; transform: translateY(-3px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--tone) 16%, transparent); }
.member-card__img { border: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--tone-line) !important; }
.lead-card__photo { border: 1px solid var(--tone-line) !important; border-radius: 10px; overflow: hidden; box-shadow: none !important; }
.profile-identity__img { border-radius: 12px; box-shadow: 0 0 0 1px var(--tone-line) !important; }
.member-card__role, .lead-card__eyebrow, .members-heading__count, .profile-block__eyebrow, .profile-identity__role { color: var(--tone-ink); }

/* ---------- Publications ---------- */
.archive-rail__item.is-active, .archive-rail a[aria-current] { color: var(--tone-ink); border-color: var(--tone); }
.archive-rail__count { background: var(--tone-soft); color: var(--tone-ink); }
.archive-pub { border-left: 3px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.archive-pub:hover { border-left-color: var(--tone); background: var(--tone-soft); }
.archive-pub__year, .archive-section__title { color: var(--tone-ink); }
.archive-pub__venue { color: var(--ink-soft); }

/* ---------- Research ---------- */
.research-section__title, .research-timeline__year { color: var(--tone-ink); }
.research-era { border-left: 4px solid var(--c, var(--tone)); padding-left: 1rem; }
/* 연구 트랙 카드: 트랙마다 자기 색의 파스텔 테두리 둥근 카드(검정 위선 없음), 홀수 개면 마지막 카드는 가로 전체 */
.timeline-program__item { border: 1px solid color-mix(in srgb, var(--c, var(--tone)) 28%, #fff) !important;
    border-top: 4px solid var(--c, var(--tone)) !important; border-radius: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--tone)) 6%, #fff), #fff 60%) !important; }
.timeline-program__meta { color: color-mix(in srgb, var(--c, var(--tone)) 80%, #000) !important; }
@media (min-width: 640px) { .timeline-program > .timeline-program__item:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.research-standfirst { border-left: 4px solid var(--tone); background: var(--tone-soft); padding: 1rem 1.2rem; }

/* ---------- Photo · Course · Contact ---------- */
.photo-summary__year, .photo-group__date { color: var(--tone-ink); }
.photo-card { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.photo-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px color-mix(in srgb, var(--tone) 18%, transparent); }
/* 학기 묶음: 색 띠 아래 제목, 제목과 목록 사이 여백을 같게(컴팩트) */
.course-semester { border-top: 3px solid var(--tone-line); padding-top: .85rem; }
.course-semester + .course-semester { margin-top: 2.6rem; }
.course-semester h2, .course-semester .section-header, .course-semester .section-header__title { margin-top: 0; margin-bottom: .85rem; }
.course-semester .course-list { margin-top: 0; border-top: 1px solid var(--line-strong); }
.course-list__item:hover { background: var(--tone-soft); }
.contact-card { border-top: 1px solid var(--line); }
.contact-card:first-child { border-top: 0; }
.contact-card__icon { display: inline-grid; place-items: center; flex: 0 0 2.4rem; width: 2.4rem; height: 2.4rem; align-self: flex-start;
    line-height: 1; font-size: 1.05rem; color: #fff; border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 70%, #fff), var(--tone)); }

/* ---------- 바닥글 ---------- */
.site-footer { position: relative; border-top: 1px solid var(--line); }

/* 스크롤바(관리자와 같은 얇은 페이지 색 손잡이) */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--tone, #8a8f9a) 45%, #ddd) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--tone, #8a8f9a) 40%, #ddd); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; }

/* 구성원 진입점(로그인 전): 오른쪽 위 작은 링크 */
.member-entry { display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 .75rem; border: 1px solid var(--line-strong);
    border-radius: 99px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.member-entry:hover { border-color: var(--tone); color: var(--tone-ink); background: var(--tone-soft); }
@media (max-width: 640px) { .member-entry span { display: none; } .member-entry { width: 32px; padding: 0; justify-content: center; } }

/* 선택된 칩(연도 필터 등): 검정 대신 페이지 색 */
.chip.is-active { background: var(--tone); border-color: var(--tone); color: var(--tone-on, #fff); }
.chip.is-active .year-chip__year, .chip.is-active .year-chip__count { color: var(--tone-on, #fff); border-color: color-mix(in srgb, var(--tone-on, #fff) 40%, transparent); }

/* ---------- 모바일 다듬기(2026-10-26 반응형 점검) ---------- */
@media (max-width: 639px) {
    /* 칩 줄은 옆으로 밀지 않고 줄바꿈(가로 스크롤 없음) */
    .chip-row--scroll { flex-wrap: wrap !important; overflow-x: visible !important; padding-bottom: 0 !important; }
    /* 숫자 타일 5개: 마지막 타일은 가로 전체(홀로 남지 않게) */
    .home-infra__metrics > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* 작은 링크도 누르기 쉽게(위아래 여백) */
.breadcrumbs { align-items: center; }
.breadcrumbs a, .member-card__link, .lead-card__cta, .profile-back { display: inline-block; padding-top: .35rem; padding-bottom: .35rem; }
.profile-more__summary, .profile-courses__all, .lead-card__contact a { display: inline-block; padding-top: .35rem; padding-bottom: .35rem; }
/* 구성원 카드 전체를 누르면 프로필로: 카드 안 유일한 링크(View profile)의 누르는 영역을 카드 전체로 늘린다 */
.member-card { position: relative; cursor: pointer; }
.member-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.member-card:focus-within { border-color: var(--tone) !important; box-shadow: 0 0 0 3px var(--tone-soft); }

/* 2026-10-26 hover/focus: never a black outline. Same pastel family as the page tone. */
.chip:hover, .auth-links a:hover, a.card:hover, .card--link:hover,
.mode-button:hover, .choice-card:hover, .photo-card:focus-within {
    border-color: color-mix(in srgb, var(--tone) 55%, #fff); color: var(--tone-ink);
    background: var(--tone-soft);
}
.chip:hover .year-chip__count { border-color: color-mix(in srgb, var(--tone) 35%, #fff); }
.chip.is-active:hover { background: var(--tone); border-color: var(--tone); color: var(--tone-on, #fff); }
.choice-card:has(input:checked), .mode-button.is-active { border-color: var(--tone); }
.input:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--tone); box-shadow: 0 0 0 3px var(--tone-soft);
}

/* 2026-10-26 GPU 칸: 마우스를 올리거나(PC) 누르면(모바일) 모델명 */
.home-infra__units { position: relative; }
.home-infra__cell { position: relative; cursor: help; outline: none; transition: transform .12s ease; }
.home-infra__cell:hover, .home-infra__cell:focus-visible, .home-infra__cell:focus { transform: translateY(-2px); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 35%, #fff); }
.home-infra__cell[data-tip]:hover::after, .home-infra__cell[data-tip]:focus::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  white-space: nowrap; padding: 5px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.2;
  background: #fff; color: var(--tone-ink); border: 1px solid var(--tone-line); box-shadow: 0 4px 14px rgba(0,0,0,.08); z-index: 5; pointer-events: none; }
.home-infra__cell:nth-child(-n+2)::after { left: 0 !important; transform: none !important; }
.home-infra__cell:nth-last-child(-n+2)::after { left: auto !important; right: 0; transform: none !important; }

/* 2026-10-26 홈 마무리 문장: 밋밋한 왼쪽 선 → 같은 톤의 파스텔 콜아웃 카드 */
section p.home-focus-closing {
  align-items: center; gap: 16px; max-width: none;
  margin-top: var(--sp-6, 2rem); padding: 18px 22px;
  border: 1px solid var(--tone-line); border-left: 1px solid var(--tone-line); border-radius: 16px;
  background: linear-gradient(120deg, var(--tone-soft) 0%, color-mix(in srgb, var(--tone-soft) 35%, #fff) 70%, #fff 100%);
  color: var(--ink); font-size: 1.06rem; line-height: 1.6; font-weight: 500;
  position: relative; overflow: hidden;
}
section p.home-focus-closing::after {   /* 오른쪽 아래 은은한 원 장식 */
  content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 10%, transparent); pointer-events: none;
}
section p.home-focus-closing i {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 1.25rem;
  background: var(--tone); color: var(--tone-on, #fff); line-height: 1;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--tone) 28%, transparent);
}
section p.home-focus-closing span { position: relative; z-index: 1; }
@media (max-width: 639px) {
  section p.home-focus-closing { padding: 14px 16px; gap: 12px; font-size: 1rem; align-items: flex-start; }
  section p.home-focus-closing i { width: 38px; height: 38px; font-size: 1.1rem; }
}