/* ============================================
   UDNX 프로토타입 공통 스타일
   people.html / about.html 이 함께 사용
   ============================================ */

:root{
  --bg:#000000;
  --fg:#ffffff;
  --dim:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.15);
  --font:"Montserrat",Helvetica,Arial,sans-serif;
  --photo-w:420px;            /* 원본이 550px. 이 이상 키우면 흐려짐 */
  --photo-ratio:550/600;
  --text-w:760px;             /* 읽기 좋은 본문 폭 */
  --pad:clamp(24px,5vw,80px);
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* 스크롤바 자리를 항상 비워둔다. 안 그러면 스크롤이 있는 페이지(About·People)와
     없는 페이지(Work·Contact) 사이에서 내용 폭이 15px 달라져 화면이 좌우로 튄다 */
  overflow-y:scroll;
  scrollbar-gutter:stable;
}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font);font-weight:300;
  letter-spacing:.03em;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---- 진입 화면 (index) : 화면 전체가 About으로 들어가는 문 ---- */
.gate{
  position:fixed;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;color:var(--fg);
  /* 아래 여백을 더 줘서 덩어리를 화면 중앙보다 살짝 위로.
     기하학적 정중앙에 놓으면 눈에는 아래로 처져 보인다 */
  padding:var(--pad) var(--pad) calc(var(--pad) + 40px);
}
/* 로고와 풀네임의 폭이 거의 같아지도록 잡은 값.
   둘이 같은 폭이면 위아래로 한 덩어리처럼 읽힌다 */
.gate .mark-lg{
  width:clamp(74px,7.8vw,110px);height:auto;display:block;
  opacity:0;animation:gate-in 1100ms ease-out 120ms forwards;
  transition:opacity 500ms ease-in-out;
}
.gate .full{
  font-size:clamp(13px,1.24vw,17.4px);letter-spacing:.42em;
  font-weight:400;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin:clamp(13px,1.2vw,17px) 0 0;
  /* 자간을 벌리면 마지막 글자 뒤에도 간격이 붙어 로고와 중심이 어긋난다 */
  text-indent:.42em;
  opacity:0;animation:gate-in 1100ms ease-out 520ms forwards;
}
.gate .enter{
  position:absolute;bottom:clamp(34px,5vw,60px);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.34);margin:0;text-indent:.3em;
  opacity:0;animation:gate-in 900ms ease-out 1100ms forwards;
  transition:color 500ms ease-in-out;
}
.gate:hover .mark-lg{opacity:.78}
.gate:hover .enter{color:rgba(255,255,255,.7)}
@keyframes gate-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .gate .mark-lg,.gate .full,.gate .enter{animation:none;opacity:1}
}

/* ---- 상단 고정 덩어리 : 뒤가 비침 ---- */
.bar{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}

/* 스크롤 진행 막대 : 연한 트랙 = 전체 길이, 밝은 부분 = 읽은 만큼 */
.progress{
  height:1px;width:100%;
  background:rgba(255,255,255,.13);
  transition:opacity 300ms ease-in-out;
}
.progress span{
  display:block;height:100%;width:0;
  background:rgba(255,255,255,.6);
}

/* 헤더 : 로고 좌 / 메뉴 우 */
.hdr{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 var(--pad);
}
.hdr .logo img{height:14px;width:auto;display:block}
.hdr nav{display:flex;gap:clamp(22px,3vw,50px)}
.hdr nav a{
  color:rgba(255,255,255,.62);text-decoration:none;
  font-size:13px;font-weight:400;letter-spacing:.13em;
  transition:color 450ms ease-in-out;
}
.hdr nav a:hover{color:var(--fg)}
.hdr nav a.active{color:var(--fg);font-weight:500}

/* ---- 인물 목록 (People 전용) ----
   상단 바 안이 아니라 첫 사진 위에 둔다. 바 높이를 다른 페이지와 같게 유지하고,
   스크롤하면 목록은 위로 흘러가 사라진다 */
.top{
  padding:26px var(--pad) 24px;
  text-align:center;
}
.people-index{padding-top:clamp(34px,4vw,54px)}
.top nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px clamp(20px,4vw,52px);
}
.top nav a{
  color:var(--dim);text-decoration:none;
  font-size:13px;font-weight:400;letter-spacing:.12em;
  padding-bottom:5px;border-bottom:1px solid transparent;
  transition:color 400ms ease-in-out,border-color 400ms ease-in-out;
}
.top nav a:hover{color:var(--fg);border-bottom-color:var(--fg)}
.top nav a.active{color:var(--fg)}
.top nav a .r{
  display:block;font-size:9px;letter-spacing:.16em;
  color:rgba(255,255,255,.42);font-weight:400;margin-top:6px;
  text-transform:uppercase;
}
.top nav a.active .r{color:rgba(255,255,255,.72)}

/* ---- 인물 (People 전용) ---- */
.person{
  padding:clamp(70px,10vw,140px) var(--pad);
  text-align:center;
  border-bottom:1px solid var(--line);
  scroll-margin-top:var(--bar-h);
}
.person:first-of-type{padding-top:clamp(40px,5vw,70px)}
.person img{
  width:min(var(--photo-w),100%);
  aspect-ratio:var(--photo-ratio);
  object-fit:cover;object-position:center 15%;
  display:block;margin:0 auto 44px;
  filter:saturate(0);
}
.role{
  font-size:10px;letter-spacing:.24em;
  color:rgba(255,255,255,.82);font-weight:500;
  text-transform:uppercase;margin:0 0 12px;
}
.name{
  font-size:clamp(19px,2.4vw,28px);font-weight:300;
  letter-spacing:.08em;line-height:1.2;margin:0;
}
.rule{width:56px;height:1px;background:var(--line);margin:22px auto 34px}

/* ---- About : 각 섹션이 화면 하나씩 ---- */
:root{--bar-h:65px}          /* 헤더 64 + 진행막대 1 — 모든 페이지 동일 */
:root{--sec-pad:clamp(50px,6vw,90px)}
.stmt-sec,.block,.closing{
  min-height:calc(100vh - var(--bar-h));
  display:flex;flex-direction:column;justify-content:center;
  /* 아래 여백을 더 줘서 내용을 위로. 상단 바를 뺀 영역의 중앙에 놓으면
     바가 반투명이라 화면 전체 기준으로는 아래로 처져 보인다 */
  padding:var(--sec-pad) var(--pad) calc(var(--sec-pad) + 112px);
  text-align:center;
  scroll-margin-top:var(--bar-h);
}
.stmt-sec,.block{border-bottom:1px solid var(--line)}

/* About 문단 목록 (Hero 위 한 줄). 이 높이만큼 Hero를 줄여야 첫 화면이 딱 맞는다 */
:root{--idx-h:106px}
.page-index{padding:clamp(34px,4vw,54px) var(--pad) 24px}
.page-index nav{gap:12px clamp(24px,4vw,56px)}
.page-index nav a{font-size:13px;letter-spacing:.14em}
.stmt-sec{min-height:calc(100vh - var(--bar-h) - var(--idx-h))}

/* Hero */
.stmt-name{
  font-size:12px;letter-spacing:.3em;font-weight:400;
  color:rgba(255,255,255,.7);text-transform:uppercase;
  margin:0 0 34px;
}
.stmt{
  font-size:clamp(26px,3.9vw,50px);font-weight:300;
  letter-spacing:.03em;line-height:1.32;
  margin:0;
}
.stmt-sub{
  font-size:clamp(15px,1.5vw,20px);font-weight:300;
  line-height:1.75;color:rgba(255,255,255,.62);
  max-width:32em;margin:40px auto 0;
}

/* 문단 제목 — People의 인물 이름과 같은 형식 */
.block .label{
  font-size:clamp(22px,3vw,36px);font-weight:300;
  letter-spacing:.08em;line-height:1.2;
  color:var(--fg);text-transform:uppercase;margin:0;
}
.block .rule{margin:26px auto 44px}
.block .cv{max-width:700px}
.block .cv p{
  font-size:19px;line-height:1.8;margin:0 0 28px;
  color:rgba(255,255,255,.88);
}
.block .cv p:last-child{margin-bottom:0}

/* 마무리 한 줄 */
.closing p{
  font-size:clamp(22px,2.9vw,38px);font-weight:300;
  letter-spacing:.04em;line-height:1.4;margin:0;
  color:rgba(255,255,255,.92);
}

/* ---- Work : 목록 (바둑판) ---- */
.proj-list{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,5vw,70px) var(--pad);
}
.proj-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);   /* 4개일 때 2+2로 균형. 3열이면 3+1로 깨지고 4열이면 사진이 썸네일 크기 */
  gap:clamp(30px,3.4vw,50px);
  max-width:1300px;margin:0 auto;width:100%;
}
.card{
  text-decoration:none;display:block;color:var(--fg);
  text-align:center;
}
.card img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  display:block;
  transition:opacity 450ms ease-in-out;
}
.card:hover img{opacity:.72}
.card h2{
  font-size:clamp(13px,1.4vw,17px);font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;
  margin:18px 0 6px;line-height:1.4;
}
.card .yr{
  font-size:10px;letter-spacing:.2em;
  color:rgba(255,255,255,.5);margin:0;
}

/* ---- Work : 개별 프로젝트 — 세로로 내려보는 사진 ---- */
.project{
  padding:clamp(20px,2.4vw,32px) var(--pad);
  text-align:center;
}
.proj-head{margin:0 0 clamp(26px,3vw,40px)}
.proj-title{
  font-size:clamp(20px,2.4vw,30px);font-weight:300;
  letter-spacing:.07em;line-height:1.3;
  color:var(--fg);text-transform:uppercase;margin:0 0 20px;
}
.credits{
  margin:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-content:center;
  gap:10px clamp(28px,4vw,60px);
  /* 항목이 5개든 6개든 같은 높이 — 프로젝트를 옮겨도 사진이 위아래로 안 튄다 */
  min-height:58px;
}
/* 좌우로 넘기는 사진.
   프로젝트 + 하단 이동줄이 한 화면에 들어오고, 푸터만 그 아래로 */
:root{--next-h:73px}
.project{
  min-height:calc(100vh - var(--bar-h) - var(--next-h));
  display:flex;flex-direction:column;
}
.slider{display:flex;flex-direction:column;flex:1;min-height:0}
.slides{
  position:relative;flex:1;min-height:min(46vh,430px);
  cursor:pointer;          /* 사진을 눌러도 다음 장으로 */
}
.slides img{
  position:absolute;inset:0;margin:auto;
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  opacity:0;transition:opacity 450ms ease-in-out;
  pointer-events:none;
}
.slides img.on{opacity:1}

/* 화살표는 사진 좌우에. 아래 구석보다 여기가 먼저 눈에 띈다 */
.slides button{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background:none;border:0;cursor:pointer;
  padding:22px 14px;
  color:rgba(255,255,255,.5);
  font-family:var(--font);font-size:26px;line-height:1;
  transition:color 300ms ease-in-out;
}
.slides button:hover{color:var(--fg)}
.slides .nav-prev{left:0}
.slides .nav-next{right:0}

/* 점 — 몇 장인지 한눈에 보이게 */
.dots{
  display:flex;justify-content:center;gap:9px;
  margin-top:20px;
}
.dots button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.28);cursor:pointer;
  transition:background 300ms ease-in-out;
}
.dots button:hover{background:rgba(255,255,255,.6)}
.dots button.on{background:rgba(255,255,255,.9)}
/* 라벨과 값을 한 줄에 나란히 — 세로로 쌓으면 사진 자리를 뺏는다 */
.credits > div{display:flex;align-items:baseline;gap:10px}
.credits dt{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-weight:500;margin:0;
  white-space:nowrap;
}
.credits dd{
  margin:0;font-size:14px;font-weight:300;
  letter-spacing:.05em;color:rgba(255,255,255,.9);
  white-space:nowrap;
}

/* 프로젝트 하단 이동 */
.proj-next{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;
  padding:26px var(--pad);
  border-top:1px solid var(--line);
}

.proj-next a{
  color:rgba(255,255,255,.62);text-decoration:none;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  transition:color 400ms ease-in-out;
}
.proj-next a:hover{color:var(--fg)}

/* ---- Contact ---- */
/* 헤더 + 본문 + 푸터가 스크롤 없이 한 화면에 들어감 */
body.page-fit{display:flex;flex-direction:column;min-height:100vh}
body.page-fit .contact-sec,
body.page-fit .project{flex:1;min-height:0}
body.page-fit .ftr{padding:34px var(--pad) 30px}   /* 한 화면에 맞추려 푸터도 축소 */

.contact-sec{
  display:flex;flex-direction:column;justify-content:center;
  padding:24px var(--pad);
}
/* 화면 가운데, 글자도 가운데 정렬 — 푸터와 같은 축 */
.contact-inner{
  width:max-content;max-width:100%;
  margin:0 auto;text-align:center;
  /* 가운데에서 조금 아래로. relative라 높이를 차지하지 않아
     푸터를 밀어내지 않는다 */
  position:relative;top:30px;
}
.locs{
  display:flex;flex-direction:column;
  gap:clamp(34px,4vw,46px);
}
.loc h2{
  font-size:clamp(14px,1.4vw,17px);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 12px;color:var(--fg);
}
.loc p{
  margin:0;font-size:14px;line-height:1.85;
  color:rgba(255,255,255,.62);letter-spacing:.04em;
}
.email-block{margin-top:clamp(52px,6vw,74px)}
.email-block .lbl{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.82);font-weight:500;margin:0 0 12px;
}
.email-block a{
  font-size:clamp(17px,1.8vw,23px);font-weight:300;
  letter-spacing:.04em;color:var(--fg);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:4px;
  transition:border-color 400ms ease-in-out;
}
.email-block a:hover{border-bottom-color:var(--fg)}

/* ---- 본문 : 블록은 가운데, 글자는 왼쪽 정렬 ---- */
.cv{max-width:var(--text-w);margin:0 auto;text-align:left}
.bio{
  font-size:16px;line-height:1.85;margin:0 0 42px;
  color:rgba(255,255,255,.92);
}
.sect{margin:0 0 32px}
.sect h3{
  font-size:14px;font-weight:500;letter-spacing:.07em;
  margin:0 0 9px;line-height:1.5;
}
.sect p{
  margin:0;font-size:14px;line-height:1.8;
  color:rgba(255,255,255,.68);
}


/* ---- 푸터 ---- */
.ftr{
  padding:46px var(--pad) 40px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;
}
.ftr .line1{
  display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:16px;opacity:.6;
  font-size:12px;letter-spacing:.04em;
}
.ftr .line1 .mark img{height:11px;width:auto;display:block}
.ftr .copy{opacity:.6;font-size:12px;letter-spacing:.04em}

@media (max-width:820px){
  :root{--photo-w:300px}
  .hdr{height:56px}
  .hdr nav{gap:16px}
  .hdr nav a{font-size:10px}
  .top{padding:4px var(--pad) 16px}
  .top nav a{font-size:11px}
  .person{scroll-margin-top:120px}
  :root{--bar-h:57px}
  .top.sections{padding:14px var(--pad)}
  .top.sections nav a{font-size:11px}
  .block .cv p{font-size:16px;margin:0 0 22px}
  .ftr .line1{gap:6px;flex-direction:column}
}


@media (max-width:760px){
  .proj-grid{grid-template-columns:1fr}   /* 좁은 화면에서는 한 줄에 하나 */
  /* 좁은 화면에서는 화살표가 사진 위로 올라와 가린다. 스와이프와 점으로 넘긴다 */
  .slides button{display:none}
  /* 크레딧이 여러 줄로 접히므로 조금 줄여 사진 자리를 남긴다 */
  .credits{min-height:0;gap:6px 20px}
  .credits dt{font-size:9px;letter-spacing:.18em}
  .credits dd{font-size:13px}
  .dots{margin-top:14px}
  .dots button{width:8px;height:8px}
}

/* ============================================
   모바일 보수 (2026-09-08)
   390 / 360 / 768px 실제 화면을 캡처해 확인한 뒤 고친 것들.
   기존 규칙을 지우지 않고 뒤에서 덮어쓴다 — 되돌리려면 이 블록만 지우면 된다.
   ============================================ */

/* 1) 태블릿 세로(761~820px)에서 인물 사진이 너무 작았다.
      300px는 폰용 값인데 820px 분기에 들어 있어 768px 화면에도 걸렸다.
      본문 글줄은 760px로 꽉 차는데 사진만 300px이면 균형이 깨진다 */
@media (min-width:761px) and (max-width:820px){
  :root{--photo-w:420px}
}

/* 2) 프로젝트 상세의 크레딧.
      폰에서 6항목이 제멋대로 접혀 PHOTOGRAPHY와 YEAR가 한 줄에 붙고
      STATUS만 외톨이 줄로 남았다. 항목당 한 줄로 고정하면
      줄 수는 비슷하면서 정렬이 떨어진다 */
@media (max-width:760px){
  .credits{
    flex-direction:column;
    align-items:center;
    gap:7px;
    min-height:0;
  }
  .credits > div{gap:8px}
}

/* 3) About 각 섹션의 아래 여백.
      데스크톱은 상단 바가 반투명이라 아래 여백을 112px 더 줘서 내용을 위로 올렸다.
      폰은 바가 57px로 더 얇아 그 보정이 과하다 — 첫 화면 아래가 크게 빈다 */
@media (max-width:760px){
  .stmt-sec,.block,.closing{
    padding-bottom:calc(var(--sec-pad) + 40px);
  }
  /* 섹션 목록이 폰에서 두 줄로 접히지만, 같은 분기에서 위아래 여백도
     함께 줄어 실제 높이는 81px이다(실측). 추정하지 말 것 */
  :root{--idx-h:81px}
}

/* 4) 아주 좁은 화면(≈332px 미만)에서 상단 바의 로고와 메뉴가 맞닿는다.
      로고 75 + 메뉴 209 + 좌우 여백 48 = 332px 이 필요한데
      320~326px 폰에서는 자리가 모자라 UDNX 와 About 이 한 덩어리로 붙어 보인다.
      좌우 여백과 메뉴 간격을 줄여 총폭을 301px 로 낮춘다 */
@media (max-width:400px){
  .hdr{padding:0 16px}
  .hdr nav{gap:11px}
}