/* ===== iOS / Apple-inspired Design ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --text: #1d1d1f;         /* 제목·강조 */
    --text-body: #3c3c42;    /* 본문 — 제목보다 한 단 낮춰 눈부심을 줄인다 */
    --text-secondary: #6e6e73;  /* 캡션·라벨 */
    --accent: #0071e3;
    --accent-hover: #0077ed;
    --separator: #d2d2d7;
    --pill-bg: #e8e8ed;
    --radius: 16px;
    --shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.10);

    /* 테마마다 달라지는 값 — 다크에서 이 변수들만 갈아끼우면 된다 */
    --navbar-bg: rgba(255, 255, 255, 0.72);
    --navbar-border: rgba(0, 0, 0, 0.07);
    --code-bg: rgba(0, 0, 0, 0.05);
    --hairline: rgba(0, 0, 0, 0.09);
    --accent-soft: rgba(0, 113, 227, 0.08);

    /* 구버전 호환 변수 (인라인 스타일에서 참조) */
    --primary-black: #1d1d1f;
    --secondary-black: #2d2d2d;
    --primary-white: #ffffff;
    --secondary-white: #f5f5f7;
    --text-gray: #1d1d1f;
    --border-gray: #d2d2d7;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "SF Pro Text", "Apple SD Gothic Neo", "Helvetica Neue", "Segoe UI",
        "Malgun Gothic", sans-serif;
    background-color: var(--bg);
    color: var(--text-body);
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

/* ===== Container ===== */
.container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 22px;
}

/* ===== Navigation (frosted glass) ===== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--navbar-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--navbar-border);
    padding: 16px 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: 21px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.3px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-link {
    color: var(--text);
    opacity: 0.82;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.nav-link:hover {
    opacity: 1;
    color: var(--accent);
    border-bottom: none;
    padding-bottom: 0;
}

/* ===== Main: 흰색 라운드 시트 ===== */
main.container {
    background-color: var(--surface);
    border-radius: 24px;
    box-shadow: var(--shadow);
    max-width: 1024px;
    margin: 40px auto 60px;
    padding: 56px 60px 64px;
    min-height: auto;
}

/* ===== Hero ===== */
.hero {
    text-align: center;
    padding: 60px 0 50px;
    background: transparent;
    color: var(--text);
    margin-bottom: 40px;
}

.hero h1 {
    font-size: 56px;
    margin-bottom: 14px;
    font-weight: 700;
    letter-spacing: -1.8px;
}

.hero p {
    font-size: 23px;
    margin-bottom: 8px;
    color: var(--text-secondary);
    opacity: 1;
    font-weight: 400;
    letter-spacing: -0.4px;
}

.cta-button {
    display: inline-block;
    background-color: var(--accent);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 980px;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: background-color 0.2s ease;
    margin: 20px 5px 0;
}

.cta-button:hover {
    background-color: var(--accent-hover);
    transform: none;
    box-shadow: none;
}

/* 보조 행동 — 주된 버튼(프로젝트 보기)과 무게를 구분 */
.cta-button.secondary {
    background-color: transparent;
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--separator);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.cta-button.secondary:hover {
    background-color: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* ===== 이력서 다운로드 드롭다운 (PDF / Word 선택) =====
   기본은 숨김 — 주소에 #resume 을 붙여 접속했을 때만 나타난다 (:target).
   접근 제어가 아니라 은닉이다: 파일 URL을 아는 사람은 여전히 받을 수 있다. */
.dl {
    display: none;
    position: relative;
}

.dl:target {
    display: inline-block;
}

.dl > summary {
    list-style: none;          /* 기본 ▶ 마커 제거 */
    cursor: pointer;
    user-select: none;
}

.dl > summary::-webkit-details-marker {
    display: none;             /* Safari 마커 제거 */
}

.dl[open] > summary {
    background-color: rgba(0, 113, 227, 0.08);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.dl-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border-radius: 14px;
    box-shadow: var(--shadow-hover);
    padding: 8px;
    min-width: 170px;
    z-index: 50;
    text-align: left;
}

.dl-menu a {
    display: block;
    padding: 10px 16px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.dl-menu a:hover {
    background-color: var(--pill-bg);
}

.dl-menu .fmt {
    color: var(--text-secondary);
    font-size: 12px;
    margin-left: 4px;
}

/* 홈 소개문 — 문장 하나가 한 줄에 들어가도록 짧게 쓰고 폭은 본문만큼 넓게 */
.intro {
    font-size: 17px;
    line-height: 1.85;
    color: var(--text-secondary);
    text-align: center;
    max-width: none;
}

.intro .sentence + .sentence {
    margin-top: 2px;
}

/* 가장 긴 문장이 816px 라, 본문이 그보다 좁아지면 강제 줄바꿈을 풀고 자연스럽게 흐르게 둔다 */
@media (max-width: 1060px) {
    .intro {
        font-size: 16px;
        text-align: left;
    }

    .intro .sentence {
        display: inline;
    }

    .intro .sentence + .sentence {
        margin-top: 0;
    }
}

/* ===== Headings ===== */
h2 {
    font-size: 40px;
    margin-bottom: 36px;
    padding-bottom: 0;
    border-bottom: none;
    font-weight: 700;
    letter-spacing: -1px;
}

h3 {
    font-size: 22px;
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

p {
    margin-bottom: 16px;
    line-height: 1.6;
}

/* ===== Project Cards (홈 화면) ===== */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-bottom: 60px;
}

.project-card {
    background: var(--bg);
    border: none;
    border-radius: var(--radius);
    padding: 28px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}

.project-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

/* 카드 전체를 클릭 대상으로 (홈 → 해당 프로젝트) */
a.project-card {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.project-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.project-card h3 {
    color: var(--text);
    margin-top: 0;
}

.project-card p {
    font-size: 14px;
    color: var(--text-secondary);
}

.tech-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.tech-tag {
    background-color: var(--pill-bg);
    color: var(--text);
    padding: 4px 12px;
    border-radius: 980px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
}

/* ===== Project TOC ===== */
.toc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
    background-color: var(--bg);
    border-left: none;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 48px;
}

.toc-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.toc-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.toc-link {
    display: inline-block;
    padding: 7px 15px;
    border: none;
    border-radius: 980px;
    background-color: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.toc-link:hover {
    background-color: var(--accent);
    color: #ffffff;
    border-color: transparent;
}

/* 앵커 이동 시 고정 내비게이션에 제목이 가리지 않도록 */
h3[id] {
    scroll-margin-top: 90px;
}

h2[id] {
    scroll-margin-top: 90px;
}

/* ===== 프로젝트 그룹 (task 단위) ===== */
/* 페이지 제목(40px) > 그룹 제목(29px) > 프로젝트 제목(22px) 3단 위계 */
.group {
    background-color: var(--bg);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 48px;
}

.group-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.6px;
    margin: 0 0 32px;
}

.project {
    margin-bottom: 40px;
}

.group > .project:last-child {
    margin-bottom: 0;
}

.group-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 8px;
    vertical-align: 5px;
}

/* ===== 카드 접힌 상태 = 채용 담당자용 요약 ===== */
/* 상황·역할(메타) → 무엇을 했나(요약) → 결과(지표) → 스택(태그) 순서로 읽히게 */
.project-meta {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 4px 0 12px;
}

.project-summary {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0;
}

/* 문제 → 해결: 무엇을 했나 이전에 왜 했나가 먼저 읽히게 */
.ps {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin-top: 16px;
    max-width: 760px;   /* 문단·목록과 같은 폭 — 오른쪽 끝을 맞춘다 */
}

.ps dt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    padding-top: 4px;
    white-space: nowrap;
}

.ps dd {
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .ps {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .ps dt {
        padding-top: 8px;
    }
}

.metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.metric {
    background-color: var(--surface);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* 측정값은 고정폭으로 — 자릿수가 세로로 맞고, 본문과 구분돼 수치가 먼저 읽힌다 */
.metric-value {
    display: block;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
    font-variant-numeric: tabular-nums;
}

.metric-label {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* 소속 · 프로젝트 유형 배지 */
.badge {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: var(--pill-bg);
    padding: 3px 11px;
    border-radius: 980px;
    vertical-align: 3px;
}

.project .tech-tags {
    margin-top: 24px;
}

/* 상세 펼치기 — 정보(태그)가 아니라 동작이라 한 칸 더 띄운다 */
.project details {
    margin-top: 32px;
}

/* 상세 펼치기 — 카드 하단 전폭 바. 흰 시트 위에서 누르는 물건으로 보이도록
   배경을 한 단 낮추고 테두리를 준다. 안에 든 소제목을 미리 보여줘 열 이유를 만든다. */
.project summary {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 18px;
    border-radius: 12px;
    background-color: var(--bg);
    border: 1px solid var(--hairline);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.project summary::-webkit-details-marker {
    display: none;
}

.sum-hint {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 열려 있으면 라벨은 '접기'로 바뀌고, 소제목 예고는 본문에 다 보이므로 감춘다 */
.sum-close {
    display: none;
}

.project details[open] .sum-text,
.project details[open] .sum-hint {
    display: none;
}

.project details[open] .sum-close {
    display: block;
    flex: 1;
}

.project summary::after {
    content: "▾";
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: auto;
    transition: transform 0.18s ease;
}

.project details[open] summary::after {
    transform: rotate(180deg);
}

.project summary:hover {
    background-color: var(--pill-bg);
    border-color: var(--separator);
}

/* 좀은 화면에서는 소제목 예고를 접어 라벨만 남긴다 */
@media (max-width: 700px) {
    .sum-hint {
        display: none;
    }
}

.project summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ===== 프로젝트 상세 본문 서식 (18개 카드 공통) ===== */
.detail-head {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.2px;
    margin: 32px 0 12px;
}

/* 한 줄이 너무 길면 눈이 다음 줄 첫머리를 놓친다 — 한글 기준 55자 안팎으로 제한 */
.project p,
.detail-list {
    max-width: 760px;
}

.project p {
    margin-bottom: 24px;
}

/* 문단 첫머리 라벨 — "구현:", "성과:" 처럼 문단을 여는 굵은 말 */
.project p > strong:first-child {
    color: var(--text);
    font-weight: 600;
}

.detail-list {
    /* inside 로 두면 줄바꿈된 줄이 글머리 기호 아래로 흘러 문단처럼 뭉친다 */
    list-style-position: outside;
    padding-left: 24px;   /* 글머리 기호와 본문 사이 — 매달림 들여쓰기 기준선 */
    line-height: 1.6;
    margin-bottom: 24px;
}

.detail-list li + li {
    margin-top: 8px;
}

/* 리드 문장 + 그에 딸린 목록은 한 덩어리다.
   문단 사이(20px)와 같은 간격을 두면 목록이 위 문장에서 떨어져 보인다. */
/* 팀 프로젝트에서 담당 구분 — 무엇이 내 몫인지 흐려지지 않게 */
.who {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 1px 8px;
    margin-left: 6px;
    border-radius: 980px;
    background-color: var(--pill-bg);
    color: var(--text-secondary);
    vertical-align: 2px;
    white-space: nowrap;
}

.who.mine {
    background-color: var(--text);
    color: var(--surface);
}

/* 한 줄에 한 문장 — 마침표마다 줄이 바뀌어 눈이 문장 단위로 끊어 읽는다 */
.sentence {
    display: block;
}

.sentence + .sentence {
    margin-top: 4px;
}

/* 문장 스팬이 inline으로 흐르는 컨텍스트(모바일 intro·인쇄)에서 문장 사이 공백 보장
   — block일 때는 줄 머리 공백이라 렌더링에 영향 없음 */
.sentence + .sentence::before {
    content: " ";
}

.project code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    background-color: var(--code-bg);
    padding: 1px 5px;
    border-radius: 5px;
}

/* 그룹 안에서 프로젝트끼리는 옅은 선으로만 구분 (묶음은 패널이 담당) */
.rule-sub {
    border: none;
    border-top: 1px solid var(--hairline);
    margin: 32px 0;
}

@media (max-width: 768px) {
    .group {
        padding: 24px 20px 26px;
        border-radius: 18px;
    }

    .group-title {
        font-size: 24px;
    }
}

/* ===== 프로젝트 목차 — 넓은 화면: 좌측 고정 레일 / 좁은 화면: 플로팅 패널 ===== */
.side-nav {
    display: none;
}

.side-nav-toggle {
    display: none;
}

/* --- 내부 스타일: 레일·패널 공용 --- */
.side-nav-search {
    margin-bottom: 12px;
}

.side-nav-search input {
    width: 100%;
    padding: 7px 11px;
    font-family: inherit;
    font-size: 12px;
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--separator);
    border-radius: 9px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.side-nav-search input::placeholder {
    color: var(--text-secondary);
}

.side-nav-search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.side-nav-count {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.side-nav-count:empty {
    display: none;
}

.side-nav-group + .side-nav-group {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--hairline);
}

/* 검색으로 앞 그룹이 접히면, 남은 첫 그룹은 구분선 없이 시작 */
.side-nav-group.is-first-visible {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* 그룹 이름: 진하게·왼쪽 끝에 붙임 */
.side-nav-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text);
    margin-bottom: 5px;
    opacity: 0.5;
    transition: opacity 0.18s ease;
}

.side-nav-group.is-current .side-nav-label {
    opacity: 1;
}

/* 프로젝트: 한 단 들여쓰기 */
.side-nav a {
    display: block;
    padding: 2px 8px 2px 13px;
    border-left: 2px solid var(--hairline);
    border-radius: 0 6px 6px 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.side-nav a:hover {
    color: var(--text);
    background-color: rgba(0, 0, 0, 0.04);
}

.side-nav a.is-active {
    color: var(--accent);
    font-weight: 600;
    border-left-color: var(--accent);
}

.side-nav::-webkit-scrollbar {
    width: 4px;
}

.side-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

/* 검색 중엔 카테고리 그룹 대신 BM25 관련도순 리스트를 보여준다 */
.side-nav-ranked {
    display: none;
    counter-reset: rank;
}

.side-nav.is-searching .side-nav-ranked {
    display: block;
}

.side-nav.is-searching .side-nav-group {
    display: none;
}

.side-nav-ranked a::before {
    counter-increment: rank;
    content: counter(rank) "  ";
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

/* --- 좁은 화면 (<1500px): 우하단 플로팅 버튼 + 오버레이 패널 --- */
@media (max-width: 1499.98px) {
    .side-nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        position: fixed;
        right: 20px;
        top: 72px;   /* 네비게이션 바로 아래 */
        z-index: 120;
        padding: 10px 17px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.1px;
        color: var(--text);
        background: var(--navbar-bg);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border: 1px solid var(--navbar-border);
        border-radius: 980px;
        box-shadow: var(--shadow-hover);
        cursor: pointer;
    }

    .side-nav-toggle[aria-expanded="true"] {
        color: var(--accent);
        border-color: var(--accent);
    }

    .side-nav.is-open {
        display: block;
        position: fixed;
        right: 20px;
        top: 122px;   /* 토글 버튼 아래로 펼침 */
        width: 248px;
        max-height: min(480px, calc(100vh - 142px));
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 120;
        padding: 16px;
        background: var(--surface);
        border: 1px solid var(--navbar-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-hover);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .side-nav.is-open {
        animation: side-nav-pop 0.18s ease;
        transform-origin: top right;
    }

    @keyframes side-nav-pop {
        from { opacity: 0; transform: translateY(-6px) scale(0.98); }
        to { opacity: 1; transform: none; }
    }
}

/* --- 넓은 화면 (≥1500px): 본문 시트 왼쪽 여백에 고정 레일 --- */
@media (min-width: 1500px) {
    /* 좌측 목차가 보이는 폭에서는 상단 목차 박스를 접는다 (projects 페이지 한정) */
    .toc-projects {
        display: none;
    }

    .side-nav {
        display: block;
        position: fixed;
        top: 96px;
        right: calc(50% + 539px);   /* 본문 시트(1038px) 왼쪽에 20px 간격으로 붙임 */
        width: 168px;
        max-height: calc(100vh - 116px);
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 50;
    }

    /* 아래가 흐려지는 건 '실제로 넘칠 때 + 아직 끝이 아닐 때' 뿐이다.
       항상 켜두면 다 보이는데도 마지막 항목이 흐려 보인다. */
    .side-nav.can-scroll:not(.at-end) {
        mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
    }
}

/* ===== Skills Section ===== */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
}

.skill-category {
    background-color: var(--bg);
    padding: 26px;
    border-radius: var(--radius);
    border-left: none;
}

.skill-category h3,
.skill-category h4 {
    margin-top: 0;
    color: var(--text);
}

.contact-grid h4 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.skill-list {
    list-style: none;
}

.skill-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 14px;
    color: var(--text-secondary);
}

.skill-list li:last-child {
    border-bottom: none;
}

/* ===== Publications ===== */
.publication-item {
    background-color: var(--bg);
    padding: 24px 26px;
    margin-bottom: 18px;
    border-radius: var(--radius);
    border-left: none;
}

.publication-item h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.publication-item .meta {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* 섹션 제목 옆 부연 — "논문 7편 (전편 제1저자)" 의 괄호 부분 */
.count-note {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 8px;
    vertical-align: 2px;
}

.award-badge {
    display: inline-block;
    background-color: #ffd60a;
    color: #1d1d1f;
    padding: 2px 9px;
    border-radius: 980px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: 1px;
}

.pub-links {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}



/* ===== Footer ===== */
.footer {
    background-color: transparent;
    color: var(--text-secondary);
    text-align: center;
    padding: 10px 0 44px;
    margin-top: 0;
    border-top: none;
}

.footer p {
    margin-bottom: 8px;
    font-size: 13px;
}

.footer a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer a:hover {
    color: var(--accent);
    opacity: 1;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .nav-menu {
        gap: 14px;
        font-size: 12px;
    }

    main.container {
        margin: 20px 12px 40px;
        padding: 32px 24px 40px;
        border-radius: 20px;
    }

    .hero h1 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .hero p {
        font-size: 18px;
    }

    h2 {
        font-size: 30px;
    }

    .projects-grid,
    .skills-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .navbar .container {
        flex-direction: column;
        gap: 12px;
    }

    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .hero {
        padding: 30px 0;
    }

    .hero h1 {
        font-size: 30px;
    }

    main.container {
        margin: 12px 8px 30px;
        padding: 24px 18px 32px;
    }
}

/* ===== 연락처 ===== */
/* 6개 항목이라 3열 2행으로 떨어지게 (220px 이면 4+2 로 어긋남) */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.contact-grid .skill-category {
    text-align: center;
}



/* ===== 검색 결과 강조 ===== */
mark.search-hit {
    background-color: rgba(255, 204, 0, 0.42);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

mark.search-hit.is-current {
    background-color: var(--accent);
    color: #ffffff;
}

/* ===== 검색 필터로 숨겨진 요소 (마지막에 두어 다른 display 규칙보다 우선) ===== */
.is-filtered-out {
    display: none;
}

/* ===== 인쇄 · PDF 저장 =====
   제출용 문서로 바로 쓸 수 있게: 화면 전용 요소는 빼고, 접힌 상세는 펼친 상태로 */
.print-head {
    display: none;
}

@media print {
    @page {
        margin: 12mm 11mm;
    }

    html {
        scroll-behavior: auto;
    }

    body {
        background: #ffffff;
        font-size: 10.5pt;
        line-height: 1.6;
    }

    /* 화면 전용 요소 */
    .navbar,
    .footer,
    .side-nav,
    .side-nav-toggle,
    .toc-projects,
    .project summary,
    .theme-toggle,
    .cta-button {
        display: none !important;
    }

    /* 흰 시트·그림자·라운드는 종이에서 의미 없음 */
    main.container {
        max-width: none;
        margin: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    .print-head {
        display: block;
        margin-bottom: 18px;
        padding-bottom: 10px;
        border-bottom: 1px solid #999;
        font-size: 10pt;
    }

    .print-head span {
        display: block;
        margin-top: 3px;
        color: #555;
    }

    /* 그룹 패널 배경은 잉크만 먹으므로 선으로 대체 */
    .group {
        background: transparent;
        padding: 0;
        margin-bottom: 22px;
    }

    .group-title {
        font-size: 15pt;
        margin: 0 0 14px;
        padding-top: 10px;
        border-top: 2px solid #1d1d1f;
        break-after: avoid;
    }

    h2 {
        font-size: 18pt;
        margin-bottom: 16px;
    }

    h3 {
        font-size: 12.5pt;
        break-after: avoid;
    }

    .detail-head {
        font-size: 10.5pt;
        margin: 14px 0 6px;
        break-after: avoid;
    }

    /* 접힌 상세를 펼친 상태로 (JS 가 막힌 환경 대비) */
    details > div {
        display: block !important;
    }

    /* 배경색 대신 테두리로 — 배경 그래픽 옵션을 꺼도 형태가 남는다 */
    .metric,
    .badge,
    .tech-tag,
    .award-badge {
        background: transparent !important;
        box-shadow: none !important;
        border: 1px solid #bbb;
        color: #1d1d1f !important;
    }

    .metric-value {
        font-size: 10.5pt;
    }

    .metric-label,
    .project-meta,
    .publication-item .meta {
        color: #555 !important;
    }

    .publication-item {
        background: transparent;
        padding: 0;
        margin-bottom: 16px;
        border-left: 2px solid #ddd;
        padding-left: 12px;
    }

    /* 조각나면 안 되는 단위 */
    .publication-item,
    .metrics,
    .metric,
    li,
    img,
    .tech-tags,
    .detail-list {
        break-inside: avoid;
    }

    /* 화면 가독성용 폭 제한은 종이에서 오른쪽을 비게 만든다 */
    .project p,
    .detail-list,
    .intro,
    .ps {
        max-width: none;
    }

    /* 문제 → 해결: 카드마다 맨 앞에 오는 블록이라 페이지 경계에서 갈라지면 안 된다 */
    .ps {
        gap: 5px 12px;
        margin-top: 10px;
        break-inside: avoid;
    }

    .ps dd {
        font-size: 10.5pt;
        line-height: 1.55;
    }

    .ps dt {
        font-size: 9pt;
        padding-top: 2px;
    }

    /* 홈 핵심 성과 카드 — 회색 배경 대신 선으로 */
    .project-card {
        background: transparent !important;
        box-shadow: none !important;
        border: 1px solid #ccc;
        padding: 14px 16px;
        break-inside: avoid;
    }

    .projects-grid {
        gap: 12px;
        margin-bottom: 26px;
    }

    /* 연락처 — 종이에서는 카드 배경 없이 한 줄씩 */
    .contact-grid {
        gap: 6px 20px;
        break-inside: avoid;
    }

    .contact-grid .skill-category {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0;
        text-align: left;
    }

    .contact-grid h3 {
        font-size: 9pt;
        color: #555;
        margin: 0;
    }

    .contact-grid p {
        margin: 0;
    }

    .intro {
        text-align: left;
        font-size: 10.5pt;
    }

    .project {
        margin-bottom: 26px;
    }

    /* 링크는 종이에서 누를 수 없으니 주소를 함께 */
    .pub-links a[href^="http"]::after,
    .project a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 8.5pt;
        color: #666;
        word-break: break-all;
    }

    a {
        color: #1d1d1f !important;
        text-decoration: none;
    }

    mark.search-hit {
        background: transparent !important;
    }
}

/* ===== 다크 모드 =====
   기본은 OS 설정(prefers-color-scheme)을 따르되, 상단 바 버튼으로 고른 값이
   있으면 그쪽이 이긴다. 선택은 html[data-theme] 로 표시되고 localStorage 에 남는다.
   테마 차이가 전부 변수에 모여 있어, 팔레트 블록만 갈아끼우면 된다.
   아키텍처 다이어그램(SVG)의 흰 배경은 의도적으로 유지 — 도식이 흰 배경 기준으로
   그려져 있어 반전하면 가독성이 깨진다. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --bg: #0e0e10;
    --surface: #1c1c1e;
    --text: #f5f5f7;
    --text-body: #d4d4d9;
    --text-secondary: #a1a1a6;
    --accent: #2997ff;
    --accent-hover: #52aeff;
    --separator: #3a3a3c;
    --pill-bg: #2c2c2e;
    --shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.65);
    --navbar-bg: rgba(22, 22, 24, 0.72);
    --navbar-border: rgba(255, 255, 255, 0.08);
    --code-bg: rgba(255, 255, 255, 0.09);
    --hairline: rgba(255, 255, 255, 0.10);
    --accent-soft: rgba(41, 151, 255, 0.14);
    color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #0e0e10;
    --surface: #1c1c1e;
    --text: #f5f5f7;
    --text-body: #d4d4d9;
    --text-secondary: #a1a1a6;
    --accent: #2997ff;
    --accent-hover: #52aeff;
    --separator: #3a3a3c;
    --pill-bg: #2c2c2e;
    --shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.65);
    --navbar-bg: rgba(22, 22, 24, 0.72);
    --navbar-border: rgba(255, 255, 255, 0.08);
    --code-bg: rgba(255, 255, 255, 0.09);
    --hairline: rgba(255, 255, 255, 0.10);
    --accent-soft: rgba(41, 151, 255, 0.14);
    color-scheme: dark;
}

/* ===== 테마 전환 버튼 ===== */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--separator);
    border-radius: 980px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
    background-color: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
}

/* 라이트에서는 '다크로 전환'(달), 다크에서는 '라이트로 전환'(해) */
.theme-toggle .i-sun {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .i-sun {
        display: block;
    }

    :root:not([data-theme="light"]) .theme-toggle .i-moon {
        display: none;
    }
}

:root[data-theme="dark"] .theme-toggle .i-sun {
    display: block;
}

:root[data-theme="dark"] .theme-toggle .i-moon {
    display: none;
}

:root[data-theme="light"] .theme-toggle .i-sun {
    display: none;
}

:root[data-theme="light"] .theme-toggle .i-moon {
    display: block;
}

/* ===== 지표 미니 막대 =====
   "2,292 → 334ms" 처럼 전후 값이 있는 지표에만 붙는다. 두 값의 비율을 그대로
   길이로 옮기므로, 줄어든 것은 짧아지고 늘어난 것은 길어진다. */
.spark {
    display: block;
    margin-top: 8px;
    width: 100%;
    min-width: 92px;
}

.spark i {
    display: block;
    height: 3px;
    border-radius: 2px;
    background-color: var(--separator);
}

.spark i + i {
    margin-top: 3px;
    background-color: var(--accent);
}

/* ===== 경력 타임라인 ===== */
.timeline {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 4px 0 0 26px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(var(--separator), transparent);
}

.timeline li {
    position: relative;
    padding: 0 0 24px;
    line-height: 1.6;
}

.timeline li:last-child {
    padding-bottom: 0;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--separator);
}

.timeline li:first-child::before {
    border-color: var(--accent);
    background: var(--accent);
}

.timeline .org {
    font-size: 17px;
    font-weight: 600;
}

.timeline .when {
    display: block;
    margin-top: 2px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--text-secondary);
}

.timeline .what {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ===== 읽기 진행 바 ===== */
.progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--accent);
    z-index: 200;
    transition: width 0.08s linear;
}

/* ===== 스크롤 진입 =====
   JS 가 붙었을 때만 숨긴다 — 스크립트가 막혀도 내용은 그대로 보인다. */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .js .reveal.in {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .progress {
        display: none !important;
    }

    .js .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =====================================================================
   레이아웃 클래스 — 인라인 스타일에서 이관 (2026-08-05)
   간격은 아래 스케일에서만 고른다: 4 · 8 · 12 · 16 · 24 · 32 · 48
   ===================================================================== */
.block {
    margin-bottom: 80px;
}

.hero-sub {
    font-size: 16px;
    opacity: 0.85;
}

.toc-wide {
    grid-column: 1 / -1;
}

/* 상세 펼침 내용 */
.detail-body {
    margin-top: 16px;
}

/* 스크린샷 · 결과 이미지 */
.shot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 24px 0;
    max-width: 760px;
}

.shot-grid.one {
    grid-template-columns: 1fr;
}

.shot-grid.narrow {
    max-width: 480px;
}

.shot {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
    border-radius: 8px;
    border: 1px solid var(--separator);
    cursor: zoom-in;
    transition: border-color 0.18s ease;
}

.shot:hover {
    border-color: var(--accent);
}

/* 한 장짜리 그리드는 잘라내지 않고 전체를 보여준다 */
.shot-grid.one .shot {
    aspect-ratio: auto;
    object-fit: contain;
}

/* 구조도 — 두 장을 나란히. 자세히는 클릭 확대가 담당한다.
   다크 모드에서도 도식은 흰 바탕을 유지한다. */
.diagram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 24px 0;
    max-width: 760px;
}

.diagram-fig {
    margin: 0;
}

.diagram-fig .caption {
    margin-top: 8px;
}

.diagram {
    background: #ffffff;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--separator);
    cursor: zoom-in;
    transition: border-color 0.18s ease;
}

.diagram:hover {
    border-color: var(--accent);
}

/* 이미지·도표 설명 */
.caption {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* 데모 영상 */
.demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.demo {
    text-align: center;
    padding: 24px;
    background-color: var(--pill-bg);
    border-radius: 16px;
}

.demo p {
    margin: 0 0 12px;
    font-weight: 600;
}

.demo-btn {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 980px;
    background-color: var(--text);
    color: var(--surface);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.demo-btn:hover {
    background-color: var(--accent);
}

/* 저장소 링크 */
.repo-link {
    margin-top: 16px;
}



/* 논문·특허 페이지의 큰 구분선 */
.rule-major {
    border: none;
    border-top: 1px solid var(--separator);
    margin: 48px 0;
}

/* =====================================================================
   타이포 스케일 마감 — 줄 간격을 크기당 하나로 고정한다.
   제목 1.6 · 본문 1.75 · UI 1.4 세 종류만 쓴다.
   ===================================================================== */
.metric-value,
.who,
.count-note,
.group-count,
.caption,
.timeline .when,
.toc-link,
.nav-link,
.project summary,
.dl-menu a,
.dl-menu .fmt,
.demo-btn,
.pub-links a,
.publication-item .meta,
.side-nav-count,
.side-nav-label,
.side-nav a {
    line-height: 1.4;
}

/* 4px 스케일에서 벗어나 있던 나머지 */
h2 {
    margin-bottom: 32px;
}

.project code {
    border-radius: 4px;
}

@media (min-width: 1500px) {
    .side-nav-group + .side-nav-group {
        margin-top: 12px;
    }

    .side-nav-label {
        margin-bottom: 4px;
    }

    .side-nav a {
        border-radius: 0 4px 4px 0;
    }
}


/* =====================================================================
   상세 본문 세로 리듬 — 한 곳에서 결정한다
   L1 문장↔문장 4 · L2 리드↔목록·항목↔항목 8 · L3 덩어리↔덩어리 24
   L4 절 제목 위 32 / 아래 12
   '덩어리' = 리드 문단 + 딸린 목록 한 세트, 또는 혼자 서는 문단 하나.
   기본값 하나(L3)에 예외 셋만 얹어 음수 마진 없이 성립시킨다.
   ===================================================================== */
/* 개별 요소의 아래 여백은 무효화하고, 간격은 아래 규칙만으로 정한다.
   .project p 보다 선택자가 강해야 상쇄되지 않는다. */
.project .detail-body > * {
    margin-bottom: 0;
}

/* L3 — 기본: 덩어리 사이 */
.detail-body > * + * {
    margin-top: 20px;
}

/* L4 — 절 경계 */
.detail-body > * + .detail-head {
    margin-top: 28px;
}

.detail-body > .detail-head + * {
    margin-top: 12px;
}

/* L2 — 리드 문단에 딸린 목록은 한 덩어리 */
.detail-body > p + .detail-list {
    margin-top: 8px;
}


/* ===== 이미지 확대 보기 =====
   목록에서는 작게 싣고, 누르면 전체를 덮어 크게 보여준다. */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    place-items: center;
    padding: 32px;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    cursor: zoom-out;
}

.lightbox.open {
    display: grid;
}

.lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 120px);
    object-fit: contain;
    background: #ffffff;
    border-radius: 8px;
}

.lightbox figcaption {
    margin-top: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.4;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 980px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.26);
}

.lightbox-close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

body.no-scroll {
    overflow: hidden;
}

@media print {
    .lightbox {
        display: none !important;
    }

    .shot {
        aspect-ratio: auto;
        object-fit: contain;
    }
}


/* ===== 번호 붙은 소주제 (①②③) =====
   번호를 왼쪽 여백으로 빼내 걸고, 본문과 딸린 목록을 같은 선에 맞춘다.
   세 덩어리가 서로 떨어져 보이도록 위 여백도 한 단계 키운다. */
.detail-body > .point {
    margin-top: 28px;
    padding-left: 28px;
    text-indent: -28px;
}

.detail-body > .point:first-child {
    margin-top: 0;
}

/* 소주제에 딸린 목록은 소주제 본문 선에서 다시 들여쓴다 */
.detail-body > .point + .detail-list {
    padding-left: 52px;
}


/* ===== 소제목과 내용의 층위 =====
   내용을 한 단 들여쓰고 소제목만 왼쪽 끝에 걸어, 절 경계가 선으로 보이게 한다.
   왼쪽 선: 0 소제목 · 16 본문 · 40 목록 · 44 소주제 본문 · 68 소주제 목록 */
.detail-body {
    padding-left: 16px;
}

.detail-body > .detail-head {
    margin-left: -16px;
}


/* ===== 링크 =====
   본문에서 밖으로 나가는 링크는 한 가지 모습으로. 밑줄이 있어야 링크임이
   분명하고, 인쇄본에서도 구분된다. 크기는 문맥을 따른다(상속). */
.repo-link a,
.pub-links a,
.contact-grid a {
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--separator);
    transition: color 0.18s ease, border-color 0.18s ease;
}

.repo-link a:hover,
.pub-links a:hover,
.contact-grid a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.contact-grid a {
    word-break: break-all;
}

/* ===== 논문·특허 항목 — 프로젝트 카드와 같은 리듬 =====
   제목만 왼쪽 끝, 나머지는 한 단 들여쓴다 (소제목 0 / 내용 16 규칙). */
.publication-item > *:not(h4) {
    margin-left: 16px;
}

.publication-item .meta {
    margin-bottom: 12px;
}

.publication-item p {
    margin-bottom: 0;
}

.pub-links {
    margin-top: 16px;
}


/* 제목과 강조는 본문보다 진하게 — 색으로도 위계를 만든다 */
h1, h2, h3, h4,
strong,
.metric-value,
.org {
    color: var(--text);
}