/* 포트폴리오 공통 디자인이다. 아래 미디어 쿼리에서 화면 너비에 따라 배치를 조정한다. */
/* 사이트 전반에서 재사용하는 아이보리·본문·파란색 변수를 정의한다. */
:root {
    --bg:#faf9f5;
    --ink:#202824;
    --muted:#68716b;
    --line:#dddfd6;
    --blue:#225bd6;
    --card:#fdfcf9;
}

/* 테두리와 안쪽 여백을 요소의 지정 너비에 포함한다. */
* {
    box-sizing:border-box;
}

/* 기본 글꼴, 배경색과 본문 줄 간격을 지정한다. */
body {
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
    font-size:15px;
    line-height:1.75;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
a {
    color:inherit;
    text-decoration:none;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
a:hover {
    color:var(--blue);
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
a:focus-visible {
    outline:2px solid var(--blue);
    outline-offset:5px;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
h1,h2,h3,p {
    margin-top:0;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
h1,h2,h3 {
    line-height:1.25;
    letter-spacing:-.035em;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
img {
    display:block;
    max-width:100%;
}

/* 본문 최대 너비와 좌우 여백을 통일한다. */
.container {
    max-width:1140px;
    padding:0 40px;
    margin:auto;
}

/* 상단 헤더와 메뉴의 구분선 및 배치를 설정한다. */
.site-header {
    border-bottom:1px solid var(--line);
}

/* 브랜드와 메뉴를 한 줄에 배치한다. */
.header-inner {
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

/* 사이트 이름과 로고 문자의 크기를 설정한다. */
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
    font-weight:750;
    letter-spacing:.09em;
    white-space:nowrap;
}

/* 사이트 이름과 로고 문자의 크기를 설정한다. */
.brand-mark {
    font-family:Georgia,serif;
    color:var(--blue);
    font-size:36px;
    letter-spacing:-.1em;
}

/* 내비게이션 항목 사이의 간격을 지정한다. */
nav {
    display:flex;
    gap:30px;
}

/* 상단 헤더와 메뉴의 구분선 및 배치를 설정한다. */
.site-header nav a {
    padding:33px 0 29px;
    font-size:13px;
    color:var(--muted);
    border-bottom:2px solid transparent;
}

/* 상단 헤더와 메뉴의 구분선 및 배치를 설정한다. */
.site-header nav a[aria-current=page] {
    color:var(--blue);
    border-color:var(--blue);
    font-weight:650;
}

/* 홈의 프로필과 자기소개를 두 열로 배치한다. */
.hero {
    display:grid;
    grid-template-columns:235px minmax(0,1fr);
    gap:80px;
    padding:76px 0 82px;
}

/* 프로필 정보와 항목별 간격을 설정한다. */
.profile-panel {
    padding-top:4px;
}

/* 프로필 이미지를 원형으로 표시한다. */
.avatar {
    width:154px;
    height:154px;
    border-radius:50%;
    margin-bottom:25px;
    border:1px solid var(--line);
    object-fit:cover;
}

/* 프로필 정보와 항목별 간격을 설정한다. */
.profile-panel h2 {
    font-size:23px;
    margin-bottom:8px;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
.specialty {
    color:var(--muted);
    font-size:13px;
    margin-bottom:25px;
}

/* 프로필 정보와 항목별 간격을 설정한다. */
.profile-meta {
    font-size:12px;
    margin:0 0 22px;
}

/* 프로필 정보와 항목별 간격을 설정한다. */
.profile-meta div {
    display:flex;
    gap:14px;
    margin-bottom:6px;
}

/* 프로필 정보와 항목별 간격을 설정한다. */
.profile-meta dt {
    color:var(--muted);
    flex:0 0 28px;
}

/* 프로필 정보와 항목별 간격을 설정한다. */
.profile-meta dd {
    margin:0;
    overflow-wrap:anywhere;
}

/* 연락처 링크를 줄바꿈 가능한 가로 목록으로 배치한다. */
.contact-links {
    display:flex;
    flex-wrap:wrap;
    gap:6px 15px;
    font-size:12px;
}

/* 연락처 링크를 줄바꿈 가능한 가로 목록으로 배치한다. */
.contact-links a,.text-link {
    color:var(--blue);
    text-decoration:underline;
    text-underline-offset:4px;
}

/* 주소가 없는 링크의 준비 중 상태를 표시한다. */
.pending-link {
    color:var(--blue);
    text-decoration:underline;
    text-underline-offset:4px;
}

/* 주소가 없는 링크의 준비 중 상태를 표시한다. */
.pending-link small {
    font-size:10px;
    color:var(--muted);
}

/* 날짜와 구역 설명 등 작은 보조 문구의 스타일이다. */
.eyebrow {
    font-size:10px;
    font-weight:600;
    letter-spacing:.13em;
    color:var(--muted);
    display:flex;
    gap:14px;
    margin-bottom:14px;
}

/* 주요 강조 문구에 파란색을 적용한다. */
.accent {
    color:var(--blue);
}

/* 홈의 큰 이름과 소개 영역을 조정한다. */
.introduction h1 {
    font-size:58px;
    margin:17px 0 24px;
    letter-spacing:-.055em;
}

/* 소개 요약을 본문보다 크게 표시한다. */
.intro-lead {
    font-size:19px;
    line-height:1.8;
    letter-spacing:-.035em;
}

/* 연구 소개의 문단 간격과 글자색을 지정한다. */
.research-copy {
    color:var(--muted);
    font-size:14px;
}

/* 연구 소개의 문단 간격과 글자색을 지정한다. */
.research-copy p {
    margin-bottom:10px;
}

/* 본문 링크를 줄바꿈 가능한 가로 목록으로 배치한다. */
.inline-links {
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    font-size:13px;
}

/* 연구 키워드 태그의 간격과 테두리를 지정한다. */
.keyword-list {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:23px 0;
}

/* 연구 키워드 태그의 간격과 테두리를 지정한다. */
.keyword-list span {
    border:1px solid var(--line);
    border-radius:3px;
    font-size:10px;
    padding:3px 10px;
    color:var(--muted);
}

/* 홈의 프로필과 자기소개를 두 열로 배치한다. */
.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:29px;
}

/* 페이지 이동 버튼의 크기와 강조색을 지정한다. */
.button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    border:1px solid var(--line);
    padding:10px 18px;
    border-radius:3px;
    font-size:12px;
    font-weight:600;
}

/* 페이지 이동 버튼의 크기와 강조색을 지정한다. */
.button.primary {
    color:white;
    background:var(--blue);
    border-color:var(--blue);
}

/* 홈의 각 콘텐츠 구역을 여백과 얇은 선으로 구분한다. */
.home-section {
    padding:40px 0 43px;
    border-top:1px solid var(--line);
}

/* 구역 제목과 전체 보기 링크를 배치한다. */
.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:26px;
}

/* 구역 제목과 전체 보기 링크를 배치한다. */
.section-heading .eyebrow {
    font-size:10px;
    letter-spacing:.04em;
    margin-bottom:9px;
}

/* 구역 제목과 전체 보기 링크를 배치한다. */
.section-heading h2 {
    font-size:27px;
    margin:0;
}

/* 전체 보기 링크의 크기와 화살표 색을 지정한다. */
.view-all {
    font-size:11px;
    color:var(--muted);
}

/* 전체 보기 링크의 크기와 화살표 색을 지정한다. */
.view-all span {
    color:var(--blue);
    margin-left:9px;
}

/* 카드 목록의 열 수와 내부 여백을 지정한다. */
.card-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

/* 홈의 이력 요약을 참고 시안처럼 학력·경력 열과 수상 열로 나눈다. */
.cv-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 48px;
}

/* 이력 구분 하나는 진한 밑줄이 있는 제목과 행 목록으로 구성한다. */
.cv-block {
    margin-bottom:44px;
}

.cv-block h3 {
    font-size:15px;
    font-weight:600;
    margin:0;
    padding-bottom:12px;
    border-bottom:1px solid var(--ink);
}

/* 자격증·수상 제목 옆의 총 개수는 사이트 강조색인 파란색으로 표시한다. */
.cv-count {
    font-weight:600;
    color:var(--blue);
}

/* About의 이력은 한 열이며 자기소개 아래에 같은 형식으로 이어진다. */
.about-cv {
    margin-top:36px;
}

/* 이력 한 행은 왼쪽 기간 열과 오른쪽 내용 열로 나누고 얇은 선으로 구분한다. */
.cv-entry {
    display:grid;
    grid-template-columns:106px minmax(0,1fr);
    gap:0 16px;
    padding:22px 0 18px;
    border-bottom:1px solid var(--line);
}

/* 기간은 작은 고정폭 대문자 문구로 표시한다. */
.cv-period {
    margin:0;
    padding-top:4px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    word-break:keep-all;
}

/* 제목은 굵게, 기관과 요약은 그 아래 작은 보조색 줄로 쌓는다. */
.cv-body h4 {
    font-size:14px;
    font-weight:600;
    margin:0 0 6px;
    line-height:1.5;
    word-break:keep-all;
}

.cv-meta {
    margin:0;
    font-size:12.5px;
    line-height:1.6;
    color:var(--muted);
}

/* 요약은 기관과 같은 작은 보조색 마크다운이다. markdown.css보다 우선하도록 두 클래스를 함께 쓴다. */
.cv-summary.markdown-body {
    font-size:12.5px;
    line-height:1.6;
    color:var(--muted);
}

.cv-summary.markdown-body p {
    margin:0 0 .3em;
}

.cv-summary.markdown-body ul,
.cv-summary.markdown-body ol {
    margin:.2em 0 .4em;
    padding-left:1.3em;
}

.cv-summary.markdown-body li {
    margin:.1em 0;
}

.cv-empty {
    margin:18px 0 0;
    font-size:13px;
    color:var(--muted);
}

/* 이력 상세 마크다운은 작은 글자로 표시한다. markdown.css보다 우선하도록 두 클래스를 함께 쓴다. */
.cv-detail.markdown-body {
    margin-top:14px;
    font-size:13px;
    line-height:1.65;
}

.cv-detail.markdown-body p {
    margin:0 0 .6em;
}

.cv-detail.markdown-body ul {
    margin:0;
    padding-left:1.2em;
}

/* 번호 목록은 기본 숫자 대신 파란 두 자리 번호와 구분선이 있는 세부 항목으로 표시한다. */
.cv-detail.markdown-body ol {
    list-style:none;
    counter-reset:cv-item;
    margin:0;
    padding:0;
}

/* 번호는 절대 위치로 왼쪽에 두어 설명 문단이 번호 열에 끼지 않게 한다. */
.cv-detail.markdown-body ol > li {
    list-style:none;
    counter-increment:cv-item;
    display:block;
    position:relative;
    margin:0;
    padding:14px 0 14px 36px;
    border-top:1px solid var(--line);
}

.cv-detail.markdown-body ol > li::before {
    content:counter(cv-item,decimal-leading-zero);
    position:absolute;
    left:0;
    top:18px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10px;
    color:var(--blue);
}

/* 세부 항목의 첫 굵은 글씨는 제목 줄로 띄우고 바로 뒤 줄바꿈은 숨긴다. */
.cv-detail.markdown-body ol > li > strong:first-child {
    display:block;
    font-size:14px;
    margin-bottom:4px;
}

.cv-detail.markdown-body ol > li > strong:first-child + br {
    display:none;
}

/* 콘텐츠 카드의 테두리와 제목 표시를 지정한다. 바깥으로 퍼지는 hover 테두리가 잘리지 않도록 overflow는 쓰지 않고, 제목 링크 덮개의 기준이 되도록 relative로 둔다. */
.content-card {
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:4px;
    min-width:0;
    cursor:pointer;
}

/* 제목 링크의 덮개가 카드 전체를 덮어 카드 어디를 눌러도 상세로 이동한다(stretched link). */
.content-card h3 a::after {
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
}

/* 요약·태그 안의 실제 링크는 덮개 위로 올려 그 링크 자체로 이동하게 한다. */
.content-card .summary a,.content-card .tags a,.content-card .authors a,.content-card .venue a {
    position:relative;
    z-index:2;
}

/* Hover.css의 Outline Out 효과다. 카드 테두리 위치에서 시작한 파란 테두리가 바깥 8px까지 퍼진다. 클릭은 가로채지 않는다. */
.content-card::before {
    content:'';
    position:absolute;
    inset:0;
    border:3px solid var(--blue);
    border-radius:var(--outline-radius, 4px);
    opacity:0;
    pointer-events:none;
    transition-property:top, right, bottom, left, border-radius, opacity;
    transition-duration:.3s;
}

/* 키보드로 제목 링크에 들어오거나 터치로 누르는 동안 테두리를 바깥으로 퍼뜨린다. 모서리는 카드와 같은 중심을 갖도록 8px만큼 키운다. */
.content-card:focus-within::before,
.content-card:active::before {
    inset:-8px;
    border-radius:var(--outline-radius-out, 12px);
    opacity:1;
}

/* 마우스처럼 hover가 가능한 입력에서만 hover로 같은 효과를 낸다. */
@media (hover:hover) {
    .content-card:hover::before {
        inset:-8px;
        border-radius:var(--outline-radius-out, 12px);
        opacity:1;
    }
}

/* 카드 테두리 효과가 포커스 표시를 대신하므로 제목 링크 자체의 외곽선은 생략한다. */
.content-card h3 a:focus-visible {
    outline:none;
}

/* 동작 줄이기 설정에서는 퍼지는 전환 없이 테두리가 바로 나타난다. */
@media (prefers-reduced-motion: reduce) {
    .content-card::before {
        transition:none;
    }
}

/* 카드 목록의 열 수와 내부 여백을 지정한다. */
.card-content {
    padding:24px;
}

/* 콘텐츠 카드의 테두리와 제목 표시를 지정한다. */
.content-card h3 {
    font-size:18px;
    line-height:1.5;
    margin:0 0 14px;
    overflow-wrap:anywhere;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
.arrow {
    color:var(--blue);
    font-size:15px;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
.summary {
    font-size:12px;
    color:var(--muted);
    line-height:1.9;
    margin-bottom:16px;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
.tags {
    font-size:10px;
    color:var(--blue);
    margin:20px 0 0;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
.authors,.venue {
    font-size:12px;
    color:var(--muted);
    margin-bottom:8px;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
.venue {
    color:var(--blue);
}

/* 선택적 썸네일의 표시 영역을 지정한다. 카드가 overflow를 쓰지 않으므로 위쪽 모서리는 썸네일이 직접 자른다. */
.thumbnail {
    display:block;
    height:168px;
    border-bottom:1px solid var(--line);
    background:#f0f1eb;
    border-radius:3px 3px 0 0;
    overflow:hidden;
}

/* 선택적 썸네일의 표시 영역을 지정한다. */
.thumbnail img {
    width:100%;
    height:100%;
}

/* 원본 비율을 유지하면서 이미지 전체가 보이게 한다. */
.fit-contain {
    object-fit:contain;
}

/* 원본 비율을 유지하면서 넘치는 부분을 잘라 영역을 채운다. */
.fit-cover {
    object-fit:cover;
}

/* 논문 목록을 배경과 장식을 줄인 형태로 표시한다. */
.publications .content-card,.notes .content-card {
    background:transparent;
    border:0;
    border-top:1px solid var(--line);
    border-radius:0;
}

/* 모서리 없는 논문·기록 카드는 hover 테두리도 각진 모양으로 퍼진다. */
.publications .content-card,.notes .content-card {
    --outline-radius:0;
    --outline-radius-out:0;
}

/* 논문 목록을 배경과 장식을 줄인 형태로 표시한다. */
.publications .card-content,.notes .card-content {
    padding:22px 0 0;
}

/* 논문 목록을 배경과 장식을 줄인 형태로 표시한다. */
.publications .thumbnail {
    margin-top:18px;
    border:0;
    border-radius:0;
}

/* 기록 카드의 제목 크기를 조정한다. */
.notes h3 {
    font-size:17px;
}

/* 푸터의 구분선, 여백과 정렬을 지정한다. */
.site-footer {
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--line);
    padding-top:25px;
    padding-bottom:28px;
    font-size:10px;
    color:var(--muted);
    margin-top:45px;
}

/* 개별 목록 페이지의 제목과 설명을 배치한다. */
.page-heading {
    padding:65px 0 40px;
    border-bottom:1px solid var(--line);
    margin-bottom:32px;
}

/* 개별 목록 페이지의 제목과 설명을 배치한다. */
.page-heading h1 {
    font-size:50px;
    margin-bottom:18px;
}

/* 개별 목록 페이지의 제목과 설명을 배치한다. */
.page-heading>p:last-child {
    color:var(--muted);
    font-size:14px;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
.listing {
    padding-bottom:70px;
}

/* 빈 목록의 안내를 전체 열에 걸쳐 표시한다. */
.empty-state {
    color:var(--muted);
    font-size:13px;
    padding:22px 0;
    grid-column:1/-1;
}

/* 상세 페이지의 본문 폭과 이미지 크기를 지정한다. */
.detail {
    max-width:790px;
    margin:45px auto 90px;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
.breadcrumb a {
    font-size:12px;
    color:var(--blue);
}

/* 상세 페이지의 본문 폭과 이미지 크기를 지정한다. */
.detail-heading {
    padding:38px 0 25px;
    border-bottom:1px solid var(--line);
}

/* 상세 페이지의 본문 폭과 이미지 크기를 지정한다. */
.detail h1 {
    font-size:40px;
    overflow-wrap:anywhere;
}

/* 상세 페이지의 본문 폭과 이미지 크기를 지정한다. */
.detail-image {
    margin:30px 0;
}

/* 상세 페이지의 본문 폭과 이미지 크기를 지정한다. */
.detail-image img {
    width:100%;
    max-height:480px;
    background:#f0f1eb;
}

/* 상세 페이지의 본문 폭과 이미지 크기를 지정한다. */
.detail-image .fit-cover {
    height:400px;
}

/* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
figcaption {
    font-size:12px;
    color:var(--muted);
    margin-top:8px;
}

/* 긴 본문의 줄 간격과 긴 문자열 줄바꿈을 처리한다. */
.prose {
    font-size:15px;
    line-height:1.95;
    overflow-wrap:anywhere;
}

/* 상세 페이지의 본문 폭과 이미지 크기를 지정한다. */
.detail .prose {
    margin:30px 0;
}

/* 소개 페이지의 프로필과 이력 영역을 배치한다. */
.about-layout {
    display:grid;
    grid-template-columns:235px minmax(0,1fr);
    gap:80px;
    padding:15px 0 50px;
}

/* 소개 페이지의 프로필과 이력 영역을 배치한다. */
.about-intro {
    padding-bottom:32px;
}

/* 소개 페이지의 프로필과 이력 영역을 배치한다. */
.about-layout h2 {
    font-size:23px;
}

/* 본문 바로가기 링크를 키보드 포커스가 있을 때 표시한다. */
.skip-link {
    position:absolute;
    top:-80px;
    left:20px;
    padding:10px;
    background:var(--bg);
    z-index:5;
}

/* 본문 바로가기 링크를 키보드 포커스가 있을 때 표시한다. */
.skip-link:focus {
    top:10px;
}

/* 화면 너비 조건에 따라 데스크톱·태블릿·모바일 배치를 적용한다. */
@media(min-width:761px) {
    /* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
    main {
        min-height:65vh;
    }

}

/* 화면 너비 조건에 따라 데스크톱·태블릿·모바일 배치를 적용한다. */
@media(max-width:960px) {
    /* 홈의 프로필과 자기소개를 두 열로 배치한다. */
    .hero,.about-layout {
        gap:40px;
        grid-template-columns:200px minmax(0,1fr);
    }

    /* 내비게이션 항목 사이의 간격을 지정한다. */
    nav {
        gap:20px;
    }

    /* 본문 최대 너비와 좌우 여백을 통일한다. */
    .container {
        padding-left:28px;
        padding-right:28px;
    }

    /* 사이트 이름과 로고 문자의 크기를 설정한다. */
    .brand {
        font-size:10px;
    }

    /* 카드 목록의 열 수와 내부 여백을 지정한다. */
    .card-content {
        padding:18px;
    }

    /* 홈의 큰 이름과 소개 영역을 조정한다. */
    .introduction h1 {
        font-size:49px;
    }

}

/* 화면 너비 조건에 따라 데스크톱·태블릿·모바일 배치를 적용한다. */
@media(max-width:760px) {
    /* 본문 최대 너비와 좌우 여백을 통일한다. */
    .container {
        padding-left:22px;
        padding-right:22px;
    }

    /* 브랜드와 메뉴를 한 줄에 배치한다. */
    .header-inner {
        display:block;
        padding-top:12px;
    }

    /* 사이트 이름과 로고 문자의 크기를 설정한다. */
    .brand {
        font-size:10px;
    }

    /* 사이트 이름과 로고 문자의 크기를 설정한다. */
    .brand-mark {
        font-size:29px;
    }

    /* 상단 헤더와 메뉴의 구분선 및 배치를 설정한다. */
    .site-header nav {
        justify-content:space-between;
        gap:10px;
        margin-top:4px;
    }

    /* 상단 헤더와 메뉴의 구분선 및 배치를 설정한다. */
    .site-header nav a {
        font-size:12px;
        padding:12px 0;
    }

    /* 홈의 프로필과 자기소개를 두 열로 배치한다. */
    .hero,.about-layout {
        grid-template-columns:1fr;
        gap:36px;
        padding-top:36px;
        padding-bottom:43px;
    }

    /* 프로필 정보와 항목별 간격을 설정한다. */
    .profile-panel {
        text-align:center;
    }

    /* 프로필 이미지를 원형으로 표시한다. */
    .avatar {
        width:124px;
        height:124px;
        margin:0 auto 16px;
    }

    /* 프로필 정보와 항목별 간격을 설정한다. */
    .profile-panel h2 {
        font-size:21px;
    }

    /* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
    .specialty {
        margin-bottom:15px;
    }

    /* 프로필 정보와 항목별 간격을 설정한다. */
    .profile-meta div,.contact-links {
        justify-content:center;
    }

    /* 프로필 정보와 항목별 간격을 설정한다. */
    .profile-meta {
        margin-bottom:15px;
    }

    /* 홈의 큰 이름과 소개 영역을 조정한다. */
    .introduction {
        border-top:1px solid var(--line);
        padding-top:30px;
    }

    /* 홈의 큰 이름과 소개 영역을 조정한다. */
    .introduction h1 {
        font-size:43px;
        margin:14px 0 20px;
    }

    /* 소개 요약을 본문보다 크게 표시한다. */
    .intro-lead {
        font-size:17px;
    }

    /* 카드 목록의 열 수와 내부 여백을 지정한다. */
    .card-grid {
        grid-template-columns:1fr;
        gap:18px;
    }

    /* 모바일에서는 이력 요약을 한 열로 쌓고 기간 열을 좁힌다. */
    .cv-grid {
        grid-template-columns:1fr;
    }

    .cv-entry {
        grid-template-columns:84px minmax(0,1fr);
        gap:0 12px;
    }

    /* 홈의 각 콘텐츠 구역을 여백과 얇은 선으로 구분한다. */
    .home-section {
        padding:30px 0;
    }

    /* 구역 제목과 전체 보기 링크를 배치한다. */
    .section-heading {
        align-items:flex-start;
        gap:12px;
        flex-wrap:wrap;
        margin-bottom:22px;
    }

    /* 구역 제목과 전체 보기 링크를 배치한다. */
    .section-heading h2 {
        font-size:25px;
    }

    /* 전체 보기 링크의 크기와 화살표 색을 지정한다. */
    .view-all {
        font-size:10px;
    }

    /* 카드 목록의 열 수와 내부 여백을 지정한다. */
    .card-content {
        padding:23px;
    }

    /* 선택적 썸네일의 표시 영역을 지정한다. */
    .thumbnail {
        height:200px;
    }

    /* 개별 목록 페이지의 제목과 설명을 배치한다. */
    .page-heading {
        padding:38px 0 25px;
    }

    /* 개별 목록 페이지의 제목과 설명을 배치한다. */
    .page-heading h1 {
        font-size:40px;
    }

    /* 상세 페이지의 본문 폭과 이미지 크기를 지정한다. */
    .detail h1 {
        font-size:30px;
    }

    /* 상세 페이지의 본문 폭과 이미지 크기를 지정한다. */
    .detail-image .fit-cover {
        height:250px;
    }

    /* 푸터의 구분선, 여백과 정렬을 지정한다. */
    .site-footer {
        margin-top:25px;
        font-size:9px;
    }

    /* 해당 요소의 글자, 여백 또는 정렬을 지정한다. */
    .listing {
        padding-bottom:30px;
    }

}

/* 메뉴 아래 배너는 화면 전체 너비를 사용하고 프로필·소개는 그 아래에 배치한다. */
.home-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--bg);
}

/* 흐린 배경은 기본적으로 숨기고 1440px보다 넓은 화면에서만 표시한다. */
.banner-backdrop {
    display: none;
}

/* 전체 표시 모드는 원본 비율을 유지한다. 이미지 속 문구도 잘리지 않는다. */
.banner-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    object-position: center;
}

/* 전경 이미지와 오버레이를 담는 틀이다. 흐린 배경 위에 쌓이고 오버레이의 기준이 된다. */
.banner-frame {
    position: relative;
}

/* 잘라 채우기 모드는 참고 화면처럼 넓은 가로 영역을 채운다. */
.banner-image.fit-cover {
    height: clamp(240px, 40vw, 560px);
    object-fit: cover;
}

/* 1440px보다 넓은 화면에서는 전경을 1440px로 제한하고 좌우 여백을 흐린 배경으로 채운다. */
@media (min-width: 1441px) {
    /* 배경은 배너 영역 전체를 덮고 흐림 가장자리가 비치지 않도록 살짝 확대한다. */
    .banner-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: blur(40px) brightness(0.55) saturate(1.1);
        transform: scale(1.15);
        pointer-events: none;
    }

    /* 전경 틀은 가운데 정렬하고 좌우 끝을 그라디언트 마스크로 배경에 녹인다. 오버레이도 같은 마스크를 받는다. */
    .banner-frame {
        max-width: 1440px;
        margin: 0 auto;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
    }
}

/* 모바일에서도 전체 표시 모드는 원본 비율을 유지하고 cover만 높이를 제한한다. */
@media (max-width: 760px) {
    .banner-image.fit-cover {
        height: clamp(180px, 40vw, 300px);
    }
}

/* 소개 본문 링크는 연락처와 동일한 파란 밑줄로 표시한다. */
.intro-lead a, .research-copy a, .about-intro .prose a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

/* 프로필 이름과 홈의 큰 이름을 사이트의 파란 강조색으로 표시한다. */
.profile-panel h2,
.introduction h1 {
    color: var(--blue);
}

/* 상세 이미지와 첨부는 화면 폭만 제한하며 원본 비율과 파일을 유지한다. */
.detail-image img.original-image,
.attachment-gallery img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}
.attachment-gallery figure { margin: 32px 0; }
.attachment-gallery .text-link { font-size: 12px; }
/* 논문의 대표 썸네일 공간은 본문 첨부와 독립적으로 유지한다. */
.publications .thumbnail { height: 180px; }

/* 제공된 원본 로고를 변형하지 않고 상단 브랜드 옆에 표시한다. */
.brand-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex-shrink: 0;
}
@media (max-width: 760px) {
    .brand-logo { width: 30px; height: 30px; }
}

/* 홈 구역 제목 옆 공개 게시물 수는 CV의 개수 표시와 같은 파란 괄호 숫자로 표시한다. */
.section-count {
    font-size: .74em;
    font-weight: 600;
    color: var(--blue);
    letter-spacing: 0;
    vertical-align: .08em;
}

/* 화면에는 보이지 않고 스크린리더에만 읽히는 보조 문구다. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Animate.css의 fadeInDown과 같은 모양이며 이동 거리만 카드에 맞게 줄였다. */
@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translate3d(0, -32px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 스크립트가 동작할 때만 아직 나타나지 않은 홈 카드를 숨긴다. 자리는 그대로 차지해 레이아웃이 움직이지 않는다. */
.js-reveal .home-section .card-grid > .content-card:not(.is-revealing):not(.is-revealed) {
    opacity: 0;
}

/* 화면에 들어온 카드는 순번별 지연 뒤에 한 번 재생한다. */
.js-reveal .home-section .card-grid > .content-card.is-revealing {
    animation: fade-in-down .6s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms) both;
}

/* 동작 줄이기 설정에서는 애니메이션 없이 바로 보인다. */
@media (prefers-reduced-motion: reduce) {
    .js-reveal .home-section .card-grid > .content-card,
    .js-reveal .home-section .card-grid > .content-card.is-revealing {
        opacity: 1;
        animation: none;
    }
}

/* 배너 문구용 Montserrat 가변 글꼴을 자체 호스팅한다(SIL OFL 1.1, fonts/OFL.txt). 라틴 범위만 담는다. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/Montserrat-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* 오버레이는 전경 이미지와 정확히 같은 영역을 덮는다. 문구 크기는 이 틀의 너비(cqw)를 기준으로 비례한다. */
.banner-overlay {
    position: absolute;
    inset: 0;
    container-type: inline-size;
    pointer-events: none;
    overflow: hidden;
}

/* 링·로고 SVG는 원본과 같은 2004x785 좌표계로 틀 전체를 채운다. */
.banner-overlay-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* 문구 줄은 원본 좌표(--y: 줄 상단, --fs: 글자 크기, --dx: 가로 보정)를 2004 기준 cqw로 환산해 놓는다. 앞쪽 여백은 마지막 글자 뒤 자간을 상쇄해 가운데를 맞춘다. */
.banner-copy p {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--y) / 20.04 * 1cqw);
    margin: 0;
    padding-left: var(--ls);
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: calc(var(--fs) / 20.04 * 1cqw);
    letter-spacing: var(--ls);
    line-height: 1;
    text-align: center;
    white-space: pre;
    color: #f3f6fa;
    transform: translateX(calc(var(--dx, 0) / 20.04 * 1cqw));
}

/* 큰 제목은 굵은 흰 글자에 옅은 빛을 둘러 원본 질감에 맞춘다. */
.banner-copy .bc-title {
    --y: 460;
    --fs: 60;
    --ls: 0.057em;
    --dx: -3;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: 0 0 0.25em rgba(160, 220, 255, 0.35);
}

/* 부제는 얇은 시안 글자를 넓게 벌린다. */
.banner-copy .bc-sub {
    --y: 529.7;
    --fs: 40;
    --ls: 0.435em;
    font-weight: 300;
    text-transform: uppercase;
    color: #3cc6f2;
    text-shadow: 0 0 0.3em rgba(40, 180, 255, 0.45);
}

/* 좌우명은 얇은 흰 글자에 자간을 넓힌다. */
.banner-copy .bc-motto {
    --y: 635.2;
    --fs: 24;
    --ls: 0.306em;
    --dx: -8;
    font-weight: 300;
}

/* 연구 분야 줄은 작은 회색 글자다. 구분선 앞뒤 공백은 원문 그대로 유지한다. */
.banner-copy .bc-tags {
    --y: 687.3;
    --fs: 22;
    --ls: 0.31em;
    --dx: -13;
    font-weight: 300;
    color: #a3a8b2;
}

/* 링은 대시 길이 1로 칠해 두고 오프셋으로 그려지는 정도를 조절한다. 기본값은 완성 상태다. */
.bo-ring {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

/* 마무리 글로우의 최종 밝기다. */
.bo-bloom {
    opacity: 0.35;
}

/* 동작 줄이기를 설정하지 않은 환경에서만 한 번 재생한다. 그렇지 않으면 처음부터 완성 상태로 보인다. */
@media (prefers-reduced-motion: no-preference) {
    /* 링은 0~1.2초 동안 12시 방향에서 시계방향으로 그려진다. */
    .bo-ring {
        animation: bo-draw 1.2s ease-in-out both;
    }

    /* 링이 닫히는 순간 글로우가 잠깐 강해졌다가 은은하게 남는다. */
    .bo-bloom {
        animation: bo-bloom 0.8s ease-out 1.1s both;
    }

    /* 원판과 로고는 1.1~1.9초에 함께 나타난다. */
    .bo-disc, .bo-logo {
        animation: bo-fade 0.8s ease-out 1.1s both;
    }

    /* 문구와 수평선은 1.8~2.6초에 한 번에 나타난다. */
    .bo-text-art, .banner-copy {
        animation: bo-fade 0.8s ease-out 1.8s both;
    }
}

/* 링 그리기: 대시 오프셋을 1에서 0으로 줄인다. */
@keyframes bo-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

/* 투명도만 바꾸는 fadeIn이다. */
@keyframes bo-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 마무리 글로우: 0에서 최대로 밝아졌다가 최종 밝기로 돌아온다. */
@keyframes bo-bloom {
    0% { opacity: 0; }
    45% { opacity: 0.9; }
    100% { opacity: 0.35; }
}