:root{
  --fg:#111;
  --bg:#fff;

  /* ===== Sidebar ===== */
  --sidebar-w: 160px;
  --sidebar-pad-x: 16px;
  --sidebar-pad-y: 16px;

  /* ===== Typography ===== */
  --font: Helvetica, Arial, sans-serif;

  /* 이름: (요청) 현재보다 더 작게 + 더 얇게 */
  --name-size: 16px;
  --name-weight: 400;

  /* 메뉴 */
  --nav-size: 13px;
  --sub-size: 13px;
  --nav-weight: 500;
  --sub-weight: 500;

  /* 캡션: 전 섹션 동일 기준 */
  --cap-size: 11px;
  --cap-weight: 400;

  /* underline */
  --u-thickness: 1px;
  --u-offset: 2px;

  /* ===== Spacing ===== */
  --content-pad-x: 22px;
  --content-pad-y: 22px;
  --works-top: 190px;          /* painting/web/moving 동일 */
  --work-gap: 220px;           /* 작품 간격 */
  --cap-gap: 12px;

  /* ===== Sizing ===== */
  --content-max: 980px;        /* 메인 컨텐츠 폭 */
  --work-max: 720px;           /* 작품(썸네일/이미지) 최대 폭 */
  --work-max-h: 62vh;          /* 데스크탑: 한 화면에 들어오게 */
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

a{ color:inherit; text-decoration:none; }

/* ===== Layout ===== */
.page{ min-height:100vh; display:flex; }

.sidebar{
  position:fixed;
  left:0; top:0; bottom:0;
  width:var(--sidebar-w);
  padding:var(--sidebar-pad-y) var(--sidebar-pad-x);
  overflow:auto;
}

.main{
  margin-left:var(--sidebar-w);
  width:calc(100% - var(--sidebar-w));
  padding:var(--content-pad-y) var(--content-pad-x) 140px;
}

/* 컨텐츠는 (요청대로) 오른쪽 여백을 유지한 채 오른쪽으로 안정적으로 붙게 */
.main .content{
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: 0;
}

/* ===== Menu ===== */
.site-name a{
  display:inline-block;
  font-size:var(--name-size);
  font-weight:var(--name-weight);
  line-height:1.12;
  text-transform:uppercase;
}

.nav{ margin-top:14px; }

/* WORKS / ABOUT / CV는 모두 줄바꿈(요청 2) */
.nav-title{
  display:block;
  width:fit-content;
  font-size:var(--nav-size);
  font-weight:var(--nav-weight);
  line-height:1.55;
  text-transform:uppercase;
}

.nav-sub{
  margin-top:4px;
  margin-left:14px;
}

.nav-sub a{
  display:block;
  width:fit-content;
  font-size:var(--sub-size);
  font-weight:var(--sub-weight);
  line-height:1.55;
  white-space:nowrap;
}

/* works 하위메뉴 -> ABOUT 로 넘어갈 때 줄간격(요청 3): WORKS~painting과 동일하게 */
.nav-secondary{ margin-top:12px; }
.nav-secondary a{ display:block; width:fit-content; }
/* (요청) ABOUT - CV 사이 간격을 더 넓게 */
.nav-secondary a + a{ margin-top:14px; }

.nav a.active{
  text-decoration: underline;
  text-decoration-thickness: var(--u-thickness);
  text-underline-offset: var(--u-offset);
  text-decoration-skip-ink: auto;
}

/* ===== Works shared ===== */
.worksTopSpace{ height: var(--works-top); }

.grid{
  display:flex;
  flex-direction:column;
  gap: var(--work-gap);
}

/* 데스크탑: 오른쪽 정렬 + 폭 통일 */
.workItem{
  width:100%;
  max-width: var(--work-max);
  margin-left: auto;
  margin-right: 0;
  display:flex;
  flex-direction:column;
}

.workImg{
  display:block;
  width:100%;
  height:auto;
  max-height: var(--work-max-h);
  object-fit: contain;
}

.caption{
  margin-top: var(--cap-gap);
  width:100%;
  text-align:center;
  font-size: var(--cap-size);
  font-weight: var(--cap-weight);
  line-height: 1.45;
  overflow-wrap:anywhere;
}

/* 캡션 안에 play 링크가 들어가는 경우(웹/영상): 동일 기준 유지 */
.caption .capline{ margin:0; }
.caption .capplay{ margin-top:6px; }
.caption .capplay a{ text-decoration: underline; text-underline-offset: var(--u-offset); }

/* 클릭 가능한 썸네일(웹/영상 갤러리) */
.thumb{ display:block; cursor: zoom-in; }

/* ===== Lightbox (painting) ===== */
.lightbox{ position:fixed; inset:0; display:none; z-index:2000; }
.lightbox.open{ display:block; }
.lbBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.72); }
.lbWrap{ position:relative; height:100%; width:100%; display:flex; align-items:center; justify-content:center; padding:22px; }
.lbInner{ position:relative; max-width:min(1200px, 92vw); max-height:calc(100vh - 44px); }
.lbTop{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.lbClose{ border:0; background:transparent; font-size:28px; font-weight:600; color:#fff; cursor:pointer; padding:8px 10px; line-height:1; }
.lbImg{ display:block; max-width:min(1200px, 92vw); max-height:calc(100vh - 210px); width:auto; height:auto; margin:0 auto; cursor: zoom-out; }
.lbCap{ margin-top:12px; text-align:center; font-size: var(--cap-size); font-weight: var(--cap-weight); color:#fff; line-height:1.45; opacity:0.9; }

/* ===== Modal (web-based / moving-image galleries) ===== */
.modal{ position:fixed; inset:0; display:none; z-index:2100; }
.modal.open{ display:block; }
.modalPanel{ position:absolute; inset:0; background: rgba(0,0,0,0.72); display:flex; align-items:center; justify-content:center; padding:22px; }
.modalInner{ width:min(1200px, 92vw); max-height:calc(100vh - 44px); background:transparent; color:#fff; }
.modalTop{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.modalClose{ border:0; background:transparent; font-size:28px; font-weight:600; color:#fff; cursor:pointer; padding:8px 10px; line-height:1; }
.modalViewer{ display:flex; align-items:center; justify-content:center; }
.modalViewer img{ display:block; max-width:min(1200px, 92vw); max-height:calc(100vh - 240px); width:auto; height:auto; }
.modalCaption{ margin-top:12px; text-align:center; font-size: var(--cap-size); font-weight: var(--cap-weight); line-height:1.45; opacity:0.9; }
.modalBottom{ margin-top:10px; display:flex; align-items:center; justify-content:center; gap:16px; }
.modalBtn{ border:1px solid rgba(255,255,255,0.5); background:transparent; color:#fff; font-size:12px; padding:6px 10px; cursor:pointer; }
.counter{ font-size:12px; opacity:0.9; }

/* ===== Responsive ===== */
@media (max-width: 520px){
  :root{
    --sidebar-w: 128px;
    --sidebar-pad-x: 12px;
    --sidebar-pad-y: 12px;

    /* (요청) 이름은 아주 미세하게 더 크게 + 아주 미세하게 더 두껍게 */
    --name-size: 16px;
    --name-weight: 500;

    /* (요청) 메뉴(레드 박스) 글씨만 아주 미세하게 더 작게 (두께 유지) */
    --nav-size: 11.5px;
    --sub-size: 11.5px;
    --nav-weight: 500;
    --sub-weight: 500;

    --cap-size: 10px;

    --content-pad-x: 14px;
    --content-pad-y: 14px;

    /* (요청) 모바일에서 작업이 더 아래로 + 작품 사이 공백 더 넓게 */
    --works-top: 200px;
    --work-gap: 280px;

    --work-max: 82vw;      /* (요청) 오른쪽 여백 유지 */
    --work-max-h: 60vh;    /* 한 화면에 들어오게 */
  }

  .main .content{ max-width:100%; }

  /* 모바일은 가운데 정렬(좌우 여백 안정) + 이미지가 우측에 붙지 않게 추가 거터 */
  .grid{ align-items:center; }
  .workItem{
    margin-left:auto;
    margin-right:auto;
    max-width: calc(100% - 20px);
  }
}

/* ===== Desktop Inter only ===== */
@media (min-width: 521px){
  :root{ --font: "Inter", Helvetica, Arial, sans-serif; }
}