:root {
  /* 🎨 Brand Colors (브랜드 정체성) */
  --color-primary: #4f46e5;       /* 메인 컬러 (예: 신뢰감을 주는 보라/블루) */
  --color-primary-hover: #4338ca; /* 메인 컬러에 마우스 올렸을 때 (약간 어둡게) */
  --color-secondary: #06b6d4;     /* 서브 컬러 (포인트 강조용 청록색) */

  /* 🌓 Neutral Colors (배경 및 텍스트) */
  --color-bg-main: #ffffff;       /* 메인 배경색 */
  --color-bg-sub: #f9fafb;        /* 섹션 구분용 연한 회색 배경 */
  --color-text-main: #111827;     /* 기본 본문 글자색 (완전 검은색보다 눈이 편한 진회색) */
  --color-text-muted: #6b7280;    /* 설명글, 날짜 등 흐린 글자색 */
  --color-black: #000000;         /* 완전 검정 (project 목차 헤더 등 강조용) */

  /* ✍️ Typography (폰트 시스템) */
  /* Aleo는 한글(Hangul) 글리프가 없어서, 브라우저가 자동으로 다음 순서인 Noto Sans KR로 대체해 한글만 그 폰트로 표시된다.
     영문은 계속 Aleo가 매칭되어 그대로 유지됨 */
  --font-main: 'Aleo', 'Noto Sans KR', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, serif;
  --font-size-small: 0.8rem;      /* 작은 텍스트 (예: project 목차) */
  --font-size-base: 1rem;         /* 브라우저 기본 16px 기준 */
  --font-size-lg: 1.25rem;        /* 큰 본문 */
  --font-size-title: 2rem;        /* 제목 크기 */
  --line-height-base: 2;          /* 줄간격 (MS 워드 기준 200% = 2배 줄간격) */

  /* 📐 Layout & Misc (여백 및 테두리) */
  --space-unit: 4px; /* 기본 단위 */

  --space-xs: calc(var(--space-unit) * 2); /* 8px */
  --space-sm: calc(var(--space-unit) * 3); /* 12px */
  --space-md: calc(var(--space-unit) * 4); /* 16px */
  --space-lg: calc(var(--space-unit) * 6); /* 24px */
  --space-xl: calc(var(--space-unit) * 8); /* 32px */

  /* 🧭 Navigation */
  --nav-height: 64px; /* 원하는 값으로 바꿔서 navigation bar 높이를 조절하세요 */

  /* 🧭 Projects Section Layout */
  --project-cornor-position: 38.2vh; /* 목차 상단 위치: 화면 "높이" 기준이라 %가 아닌 vh 단위 사용 (황금비 38.2) */
  --project-width: 30%;

  /* 🧭 Footer Layout */
  --footer-top-gap: 20vh; /* Footer 섹션과 위 콘텐츠 사이 여백: 크고 여유롭게. 원하는 값으로 조절하세요 */

  /* 🧭 Project Detail Content Block Width */
  --content-block-width: 80vw; /* description/KEYWORDS 블록, movies·images, exhibition history가 공유하는 가로 폭. 테스트하며 자유롭게 조절하세요 */

  /* 🧭 Biography Page Layout */
  --biography-content-width: 70%; /* 본문+사이드바를 합친 전체 영역 가로 폭. 원하는 값으로 조절하세요 */
  --biography-photo-width: 25%;   /* 본문 폭 대비 프로필 사진 가로 비중. 원하는 값으로 조절하세요 */
  --biography-main-ratio: 80;     /* biography-content-width 안에서 본문(main) 비율. sidebar 비율과의 상대적인 비로 계산됨 (80:20 = 80%:20%) */
  --biography-sidebar-ratio: 20;  /* biography-content-width 안에서 사이드바 비율 */
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /*"내가 지정한 가로·세로 크기 안에 패딩(Padding)과 테두리(Border) 두께까지 전부 다 포함시켜라"*/
}

html {
    height: 100%;
}

/* 콘텐츠가 창 높이보다 짧아도 footer가 항상 창 맨 아래에 붙도록 하는 sticky-footer 구조.
   nav + (본문 1개) + footer(들)를 세로로 쌓고, 본문 쪽에 flex:1을 줘서 남는 세로 공간을 채운다.
   콘텐츠가 창보다 길면 자연스럽게 스크롤되고, footer는 그 아래에 그대로 붙는다. */
body {
    font-family: var(--font-main);
    line-height: var(--line-height-base);
    overflow-x: hidden; /* 100vw 풀블리드(zone-main-media) 사용 시 생기는 가로 스크롤 방지 */
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#site-nav {
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-lg);
    font-family: var(--font-main);
    border-bottom: 1px solid var(--color-bg-sub);
}

@media (max-width: 640px) {
    #site-nav {
        padding: 0 var(--space-md);
    }

    .nav-links {
        gap: var(--space-md);
    }
}

.nav-logo {
    color: var(--color-text-main);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: bold;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: var(--space-lg);
}

.nav-links a {
    color: var(--color-text-main);
    text-decoration: none;
    font-size: var(--font-size-base);
    transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--color-primary);
}

#hero {
    /* 폰트 및 컬러 */
    font-family: var(--font-main);
    font-size: var(--font-size-lg);
    color: var(--color-text-main);


    /* 레이아웃 */
    height: 15vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#hero h1{
    margin: var(--space-xs);
}

/* Projects section (index.html) */
#projects {
    font-family: var(--font-main);
    padding: var(--space-xl) var(--space-lg);
    flex: 1 0 auto; /* sticky-footer: 남는 세로 공간을 채워서 footer를 창 아래로 밀어줌 */
}

/* 화면에는 안 보이지만 스크린리더에는 남겨두는 소제목용 유틸리티 클래스 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Project 목차 위치/크기 커스텀 변수 (원하는 값으로 자유롭게 조절) */
#project-index {
    --projects-top: var(--project-cornor-position);  /* 목차 상단 여백: 황금비 38.2vh */
    --projects-width: var(--project-width);           /* 목차 가로 크기: 화면 가로 기준 % */
    --projects-offset-x: var(--space-xl);              /* 목차를 화면 왼쪽 끝에서 띄우는 여백(padding) */

    /* position:fixed를 쓰지 않고 일반 흐름(flow) 안에 배치 → 프로젝트가 늘어날수록
       #projects 섹션 높이가 함께 늘어나고, 그만큼 아래 footer도 자연스럽게 밀려남 */
    margin-top: var(--projects-top);
    margin-left: var(--projects-offset-x);
    width: var(--projects-width);
}

.project-list-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-xs);
    font-size: var(--font-size-small);
    font-weight: bold;
    color: var(--color-black);
}

#project-list {
    position: relative;
    list-style: none;
}

.project-row {
    border-bottom: 1px solid var(--color-bg-sub);
}

.project-row-link {
    display: flex;
    align-items: baseline;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-xs);
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    transition: opacity 0.3s ease, color 0.3s ease;
}

/* 다른 항목에 마우스를 올리면 나머지 항목은 흐려지도록 처리 */
#project-list:hover .project-row-link {
    opacity: 0.35;
}

#project-list .project-row-link:hover {
    opacity: 1;
    color: var(--color-black);
}

.project-title {
    flex: 1 1 auto;
}

.project-categories-inline {
    flex: 0 0 auto;
    width: 220px;
}

.project-date {
    flex: 0 0 auto;
    width: 70px;
    text-align: right;
}

.project-loading {
    color: var(--color-text-muted);
    text-align: center;
    list-style: none;
    padding: var(--space-md) 0;
}

/* 창 크기에 연동되는 썸네일 프리뷰 (마우스 위치와는 무관) */
.hover-preview {
    /* 프리뷰 가로 크기 = 창 가로 크기 * 이 값. 원하는 배율로 바꿔가며 테스트하세요. */
    --preview-width-ratio: 0.3333;

    position: fixed;
    top: 50%;
    left: 50%; /* 왼쪽 모서리가 항상 창 가로 크기의 절반 지점에 오도록 고정 */
    width: calc(100vw * var(--preview-width-ratio));
    aspect-ratio: 4 / 3;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%);
    z-index: 1000;
    overflow: hidden;
    border-radius: var(--space-xs);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hover-preview.is-visible {
    opacity: 1;
}

.hover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 항목별 모바일 프리뷰: 데스크톱에서는 위의 .hover-preview(화면 고정 팝업)가 이 역할을 하므로 기본은 숨김 */
.project-row-preview {
    display: none;
}

@media (max-width: 640px) {
    /* 목차가 화면 가로를 가득 채우도록: 왼쪽 여백/고정 폭을 해제 */
    #project-index {
        width: 100%;
        margin-left: 0;
        margin-top: var(--space-xl); /* nav와의 여백을 크게 두지 않음 */
    }

    .project-row-link {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .project-categories-inline {
        width: auto;
    }

    /* 화면 고정 팝업 프리뷰 대신, 항목 바로 아래에 펼쳐지는 프리뷰를 사용 */
    .hover-preview {
        display: none;
    }

    .project-row-preview {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .project-row-preview img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        display: block;
        margin: var(--space-xs) 0 var(--space-sm);
    }

    .project-row-link:hover + .project-row-preview,
    .project-row-link:focus + .project-row-preview {
        max-height: 480px;
    }
}

/* Site footer (index.html) */
#site-footer {
    font-family: var(--font-main);
    margin-top: var(--footer-top-gap); /* projects 섹션과의 여백: --footer-top-gap 변수로 조절 */
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border-top: 1px solid var(--color-bg-sub);
}

.footer-copyright {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.footer-social {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.footer-social img {
    display: block;
    width: 20px;
    height: 20px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.footer-social a:hover img {
    opacity: 1;
}

/* Project detail page (project.html) */
#project-footer {
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-main);
}

.back-link {
    color: var(--color-text-main);
    text-decoration: none;
    font-size: var(--font-size-base);
}

.back-link:hover {
    color: var(--color-black);
}

#project-detail {
    font-family: var(--font-main);
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-lg);
    flex: 1 0 auto; /* sticky-footer: 남는 세로 공간을 채워서 footer를 창 아래로 밀어줌 */
    width: 100%;
}

/* title(왼쪽) + categories/date(오른쪽) 한 줄 배치.
   nav의 좌우 padding(--space-lg)과 동일하게 맞춰서 title 왼쪽 끝은 nav-logo 시작 지점과,
   categories/date 오른쪽 끝은 nav-links의 Contact 끝나는 지점과 정렬되도록
   #project-detail의 800px 폭 제한을 벗어나 화면 가로 전체로 확장한다.
   이 행의 높이는 --project-header-row-height로 조절 가능 */
.project-detail-header {
    --project-header-row-height: 4.5rem;

    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0 var(--space-lg);
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    height: var(--project-header-row-height);
    margin-bottom: var(--space-xl);
}

/* title, categories, date 공통 한 칸: 값 + 그 아래 작은 라벨(TITLE/CATEGORIES/DATE) */
.project-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.project-field-title {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
}

.project-detail-meta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-xl);
}

.project-field-categories,
.project-field-date {
    align-items: flex-end;
    text-align: right;
}

/* title / categories / date 값: 동일한 폰트 & 크기 */
.project-title-value,
.project-categories-value,
.project-date-value {
    display: block;
    max-width: 100%;
    margin: 0;
    font-family: inherit;
    font-size: var(--font-size-lg);
    font-weight: 400;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 작은 필드명 라벨 (title/categories/date는 값 아래, keywords/dimensions/technical stack는 값 위에 사용) */
.field-label {
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* main_image 바로 아래: description(왼쪽) + keywords/dimensions/technical stack(오른쪽 박스).
   movies·images(.zone-visual), exhibition history(.zone-history)도 이 블록과 좌우 끝을 맞추기 위해
   전부 --content-block-width(:root)를 공유해서 같은 폭·같은 중심으로 배치한다. */
.zone-main-info,
.zone-visual,
.zone-history {
    width: var(--content-block-width);
    margin-left: 50%;
    transform: translateX(-50%);
}

.zone-main-info {
    display: flex;
    align-items: flex-start;
    gap: 4rem; /* description과 오른쪽 정보 박스 사이 여백 */
    margin-bottom: var(--space-xl);
}

.main-info-description {
    flex: 1 1 auto;
    min-width: 0;
}

.main-info-box {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg); /* keywords / dimensions / technical stack 사이 여백 */
}

/* 라벨과 값이 같은 왼쪽 시작점에 정렬되도록 keywords/dimensions/technical stack 모두 일반 텍스트로 통일 */
.project-field-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.project-field-value {
    color: var(--color-text-main);
}

@media (max-width: 640px) {
    /* title 한 줄 배치가 좁은 화면에서 잘리지 않도록 title/meta를 세로로 풀어줌 */
    .project-detail-header {
        flex-wrap: wrap;
        height: auto;
        padding: var(--space-md) var(--space-lg);
        gap: var(--space-sm);
    }

    .project-field-title {
        flex: 1 1 100%;
    }

    .project-detail-meta {
        gap: var(--space-lg);
    }

    /* 본문 폭 제한 콘텐츠 블록들은 좁은 화면에서 여백을 줄여 더 넓게 사용 */
    .zone-main-info,
    .zone-visual,
    .zone-history {
        width: 90vw;
    }

    .zone-main-info {
        flex-direction: column;
        gap: var(--space-xl);
    }

    .main-info-box {
        flex: 1 1 auto;
    }
}

/* 메인 이미지/동영상: #project-detail의 800px 폭 제한을 벗어나 화면 가로 전체를 채움 */
.zone-main-media {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--space-xl);
}

.zone-main-media img,
.zone-main-media video {
    display: block;
    width: 100%;
    height: auto; /* 원본 비율 그대로, 크롭 없음 */
}

.zone {
    margin-bottom: var(--space-xl);
}

.zone h2 {
    font-size: var(--font-size-lg);
    color: var(--color-text-main);
    margin-bottom: var(--space-sm);
    margin-top: var(--space-lg);
}

.zone h2:first-child {
    margin-top: 0;
}

/* Visual zone: movies(위) → images(아래), 위→아래로만 스크롤. description과의 간격은 넉넉하게.
   가로 폭/좌우 위치는 위쪽의 --content-block-width 공유 규칙을 따르고,
   세로는 각 미디어의 원본 비율에 맞춰 자동으로 늘어나거나 줄어든다 */
.zone-visual {
    margin-top: 5rem;
}

.project-movies {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.movie-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
}

.movie-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.project-images-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.project-image-item img {
    width: 100%;
    display: block;
}

.project-image-item figcaption {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-top: var(--space-xs);
}

/* Concept zone */
.project-description {
    color: var(--color-text-main);
    line-height: var(--line-height-base);
    white-space: pre-line;
}

/* History zone: 한 줄짜리 텍스트를 작은 bullet과 함께 나열 */
.exhibition-history {
    list-style: disc;
    padding-left: 1.1em;
}

.exhibition-history li {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-bg-sub);
    color: var(--color-text-main);
}

.exhibition-history li::marker {
    font-size: 0.7em; /* bullet을 작게 */
}

/* Biography / Contact pages */
.content-page {
    font-family: var(--font-main);
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
    flex: 1 0 auto; /* sticky-footer: 남는 세로 공간을 채워서 footer를 창 아래로 밀어줌 */
    width: 100%;
}

/* Biography 페이지만 본문 가로 폭을 --biography-content-width로 별도 제어 (다른 content-page에는 영향 없음).
   그 안에서 본문(.biography-main)과 사이드바(.biography-sidebar)를
   --biography-main-ratio : --biography-sidebar-ratio 비율로 좌우 배치한다. */
#biography-page {
    max-width: none;
    width: var(--biography-content-width);
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
}

.biography-main {
    flex: var(--biography-main-ratio) 1 0%;
    min-width: 0;
}

.biography-sidebar {
    flex: var(--biography-sidebar-ratio) 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* 프로필 사진: 우측 상단에 띄우고 본문 글이 사진을 피해서 흐르도록 float 처리.
   사진 높이를 넘어서면 자연스럽게 그 아래로 텍스트가 꽉 차게 이어진다 */
.biography-photo {
    float: right;
    width: var(--biography-photo-width);
    margin-left: var(--space-xl);
    margin-bottom: var(--space-lg);
}

.biography-sidebar-name {
    font-size: var(--font-size-lg);
    font-weight: 400;
    color: var(--color-text-main);
}

.biography-sidebar-bio {
    color: var(--color-text-main);
    line-height: var(--line-height-base);
}

.biography-cv {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.biography-cv-links {
    display: flex;
    gap: var(--space-md);
}

.biography-cv-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-small);
}

.biography-cv-link:hover {
    color: var(--color-primary-hover);
}

@media (max-width: 640px) {
    #biography-page {
        width: 92%;
        flex-direction: column;
        gap: var(--space-lg);
    }

    .biography-main,
    .biography-sidebar {
        flex: 1 1 auto;
        width: 100%;
    }

    /* 좁은 화면에서는 사진을 옆에 흘리지 않고 본문 위에 꽉 차게 배치 */
    .biography-photo {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-bottom: var(--space-lg);
    }
}

.content-page h1 {
    font-size: var(--font-size-title);
    color: var(--color-text-main);
    margin-bottom: var(--space-lg);
}

.content-page > p {
    line-height: var(--line-height-base);
    color: var(--color-text-main);
    margin-bottom: var(--space-lg);
}

.content-page section {
    margin-bottom: var(--space-lg);
}

.content-page h2 {
    font-size: var(--font-size-lg);
    color: var(--color-text-main);
    margin-bottom: var(--space-sm);
}

.content-page ul {
    list-style: none;
    color: var(--color-text-main);
    line-height: var(--line-height-base);
}

.content-page a {
    color: var(--color-primary);
}

.content-page a:hover {
    color: var(--color-primary-hover);
}

.contact-email {
    display: inline-block;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-lg);
}