/* 웹폰트 — 기기에 폰트가 없어도 동일하게 보이도록 사이트에 직접 포함.
   Noto Sans KR (SIL Open Font License) */
@font-face{
  font-family:'Noto Sans KR';
  src:url('../fonts/NotoSansKR-Light.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Noto Sans KR';
  src:url('../fonts/NotoSansKR-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ---- 크기 기준값 (기기별로 이 값들만 바뀐다) ----
   데스크탑 기본값. 아래 미디어쿼리에서 태블릿/핸드폰용으로 덮어쓴다. */
:root{
  --font-big:17px;
  --font-small:calc(var(--font-big) / 1.618); /* 황금비: big : small = 1.618 : 1 */
  --letter-spacing:-0.05em; /* 피그마 기준 -5% */

  --thumb-w:220px;      /* 썸네일 박스 가로 */
  --thumb-h:160px;      /* 썸네일 박스 세로 */
  --timer-size:18px;    /* 좌측 상단 게이지 */
  --timer-top:20px;
  --timer-left:24px;
  --stack-left:80px;
  --stack-gap:32px;
  --peek:12px;

  --slide-w:68vw;       /* 상세페이지 슬라이드 폭 */
  --slide-pad:16vw;     /* 좌우 여백 — 옆 작업물이 잘려 보이는 정도 */
  --slide-gap:24px;
  --media-max-h:64vh;   /* 상세페이지 작업물 최대 높이 */
  --progress-w:180px;
}

/* 태블릿 */
@media (max-width:1024px){
  :root{
    --font-big:14px;
    --thumb-w:180px;
    --thumb-h:130px;
    --timer-size:16px;
    --stack-left:64px;
    --stack-gap:28px;
    --slide-w:74vw;
    --slide-pad:13vw;
    --slide-gap:20px;
    --progress-w:150px;
  }
}

/* 핸드폰 */
@media (max-width:640px){
  :root{
    --font-big:11px;
    --thumb-w:132px;
    --thumb-h:96px;
    --timer-size:13px;
    --timer-top:14px;
    --timer-left:16px;
    --stack-left:48px;
    --stack-gap:24px;
    --peek:8px;
    --slide-w:80vw;
    --slide-pad:10vw;
    --slide-gap:14px;
    --progress-w:110px;
  }
}

/* 가로모드 — 화면이 낮으면 작업물 높이를 줄여 잘리지 않게 */
@media (max-height:600px) and (orientation:landscape){
  :root{
    --thumb-h:92px;
    --media-max-h:58vh;
    --slide-w:56vw;
    --slide-pad:22vw;
  }
}
@media (max-height:440px) and (orientation:landscape){
  :root{
    --font-big:10px;
    --thumb-w:118px;
    --thumb-h:80px;
    --media-max-h:54vh;
  }
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  background:#ffffff;
  color:#000000;
  height:100%;
  overflow:hidden;
  -webkit-text-size-adjust:100%; /* 핸드폰이 임의로 글자 키우는 것 방지 */
}
body{
  font-family:'Noto Sans KR', sans-serif;
  font-size:var(--font-small);
  font-weight:300;
  letter-spacing:var(--letter-spacing);
}

#timer{
  position:fixed;
  top:var(--timer-top);
  left:var(--timer-left);
  width:var(--timer-size);
  height:var(--timer-size);
  border:1px solid #000000;
  background:#ffffff;
  overflow:hidden;
  z-index:200;
  cursor:pointer;
}
#gauge{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:0%; /* 시작 전에는 빈 게이지 */
  background:#000000;
}
a{color:#000000;text-decoration:underline;text-underline-offset:3px;}
a:hover{text-decoration:none;}

#field{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh; /* 핸드폰 주소창 때문에 화면이 잘리지 않게 */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--stack-gap);
  padding:calc(var(--timer-top) + var(--timer-size) + var(--stack-gap)) var(--timer-left) var(--stack-gap) var(--stack-left);
  overflow-y:auto;
  overflow-x:auto;
  scroll-padding-top:calc(var(--timer-top) + var(--timer-size) + var(--stack-gap));
  scroll-padding-bottom:24px;
  overflow-anchor:none;
}

/* 타이머와 스크롤 중인 썸네일을 잇는 직각 연결선. */
#connections{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
#connections path{
  fill:none;
  stroke:#000;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}

#connections .connection-cover{stroke:#fff;stroke-width:2;}
#connections .connection-signal{stroke-width:3;stroke-dasharray:8 108;}
#connections .connection-signal[hidden]{display:none;}
body.detail-open #field,
body.detail-open #connections{opacity:0;pointer-events:none;}
#connections .connection-active{
  stroke-dasharray:4 4;
  animation:connectionAnts .5s linear infinite;
}
@keyframes connectionAnts{to{stroke-dashoffset:-8;}}
@media (prefers-reduced-motion:reduce){
  .item, .project-note{transition:none !important;}
  .item::before, #connections .connection-active{animation:none !important;}
}

/* ---- thumbnail frame (one project each) ---- */
.item{
  position:relative;
  flex-shrink:0;
  z-index:2;
  width:var(--thumb-w);
  height:var(--thumb-h);
  border:1px solid #000000;
  background:#ffffff;
  overflow:hidden;
  cursor:pointer;
  isolation:isolate; /* 블렌드 모드를 이 박스 안에서만 적용 */
  transition:transform .38s cubic-bezier(.22,1,.36,1);
}

.item img,
.item video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

.item .text{
  width:100%;
  height:100%;
  padding:14px;
  font-size:var(--font-small);
  font-weight:300;
  line-height:1.5;
  overflow:auto;
  pointer-events:none;
}

/* ---- hover: rotating dashed outline (marching ants), black only ---- */
.item::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background-image:
    linear-gradient(90deg,#000 50%,transparent 50%),
    linear-gradient(90deg,#000 50%,transparent 50%),
    linear-gradient(0deg,#000 50%,transparent 50%),
    linear-gradient(0deg,#000 50%,transparent 50%);
  background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
  background-size:8px 1px,8px 1px,1px 8px,1px 8px;
  background-position:0 0,0 100%,0 0,100% 0;
  transition:opacity .15s ease;
}
.item:hover,
.item.selected{
  border-color:transparent;
  transform:translateX(var(--peek));
}
.item:hover::before,
.item.selected::before{
  opacity:1;
  animation:antsRotate .5s linear infinite;
}
@keyframes antsRotate{
  to{
    background-position:8px 0,-8px 100%,0 -8px,100% 8px;
  }
}

/* 썸네일과 설명은 같은 높이로 묶고, 글의 양에 따라 폭을 늘린다. */
.project-row{
  display:flex;
  align-items:flex-start;
  gap:32px;
  width:max-content;
  padding-right:var(--timer-left);
  flex-shrink:0;
  position:relative;
  z-index:2;
}
.project-note{
  width:480px;
  height:var(--thumb-h);
  flex-shrink:0;
  font-size:var(--font-small);
  font-weight:300;
  letter-spacing:var(--letter-spacing);
  line-height:1.7;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.project-note{
  transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.project-row > .item:hover ~ .project-note,
.project-row > .item.selected ~ .project-note{
  transform:translateX(var(--peek));
}
.project-note p + p{margin-top:1em;}
@media (max-width:640px){
  .project-row{gap:20px;}
}

/* ---- detail overlay ---- */
#overlay{
  position:fixed;
  inset:0;
  background:#ffffff;
  display:none;
  z-index:100;
}
#overlay.open{
  display:flex;
  flex-direction:column;
}
#overlay.is-closing{pointer-events:none;}
#mediaMagnifier{
  position:fixed;
  width:192px;
  height:192px;
  border:1px solid #000;
  pointer-events:none;
  z-index:9000;
}
#mediaMagnifier[hidden]{display:none;}
#detailContent{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  transform-origin:50% 50%;
}
#overlay .close{
  padding:var(--timer-top) var(--timer-left);
  font-size:var(--font-small);
  font-weight:300;
  align-self:flex-end;
}
/* 상세페이지 제목 */
#detailTitle{
  text-align:center;
  font-size:var(--font-big);
  font-weight:600;
  line-height:1.4;
  padding:0 5vw 16px;
}

/* 상세페이지 설명(제작연도/갈래 등) — 작은 글씨 룰: 작게 + 얇게 */
#detailDescription{
  text-align:center;
  font-size:var(--font-small);
  font-weight:300;
  line-height:1.7;
  padding:0 5vw 20px;
}
#detailDescription:empty{display:none;}

/* ---- 시리즈 캐러셀: 좌우로 슬라이드, 양옆 작품이 살짝 보임 ---- */
#carousel{
  flex:1;
  display:flex;
  align-items:center;
  gap:var(--slide-gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:0 var(--slide-pad);  /* 양끝 슬라이드도 가운데로 올 수 있게 */
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
#carousel::-webkit-scrollbar{display:none;}

#carousel .slide{
  position:relative;
  flex:0 0 var(--slide-w);     /* 남는 공간에 앞뒤 작품이 짤려 보임 */
  scroll-snap-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
#carousel .slide img,
#carousel .slide video{
  max-width:100%;
  max-height:var(--media-max-h);
  display:block;
}
/* 영상 컨트롤 UI 완전 제거 */
#carousel .slide video::-webkit-media-controls{display:none !important;}
#carousel .slide video::-webkit-media-controls-enclosure{display:none !important;}
#carousel .slide .caption{
  max-width:560px;
  font-size:var(--font-small);
  font-weight:300;
  line-height:1.7;
  text-align:center;
}

/* 시리즈 안에서 각 작업물이 자기 제목을 가질 때 */
#carousel .slide figure{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  max-height:100%;
}
#carousel .slide figure img,
#carousel .slide figure video{
  max-height:calc(var(--media-max-h) - 6vh);
}
#carousel .slide figcaption{
  font-size:var(--font-small);
  font-weight:300;
  text-align:center;
}

/* ---- 워터마크: 핸드폰·태블릿 해상도에서만, 스톡사진처럼 작게 촘촘히 반복.
   실제 DOM 텍스트라 사이트 본문과 동일한 폰트/자간(Noto Sans KR, -10%)을 그대로 씀 ---- */
.watermark{
  display:none;
  position:fixed;
  inset:0;
  z-index:300;
  overflow:hidden;
  pointer-events:none; /* 조작은 그대로 가능하게 */
  opacity:0.07;
}
.watermark-inner{
  position:absolute;
  /* 세로로 긴 핸드폰 화면(가로:세로 비율이 극단적인 경우)도 회전 후
     빈틈없이 덮으려면 160%로는 부족해서 220%로 넉넉하게 잡음 */
  top:-60%;
  left:-60%;
  width:220%;
  height:220%;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  transform:rotate(-28deg);
}
.watermark-inner span{
  flex:0 0 auto;
  width:90px;
  margin:12px 0;
  font-family:'Noto Sans KR', sans-serif;
  font-weight:600;
  font-size:var(--font-small); /* 큰 글씨의 1.618배 작게 — 사이트 본문과 동일한 황금비 규칙 */
  letter-spacing:var(--letter-spacing);
  white-space:nowrap;
  color:#000000;
}
@media (max-width:1024px){
  .watermark{display:block;}
}

/* ---- 납작한 진행 게이지 ---- */
#progress{
  height:4px;
  width:var(--progress-w);
  margin:20px auto 28px;
  border:1px solid #000000;
  position:relative;
  overflow:hidden;
}
#progress.hidden{visibility:hidden;}

/* 모든 작업물 로딩이 끝나기 전에는 감춰뒀다가 한 번에 나타난다 */
#overlay .pending{
  opacity:0;
}
.media-loader{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:2;
}
.media-loader[hidden]{display:none;}
.media-loader::before{
  content:'';
  width:12px;
  height:12px;
  background:#000;
  animation:square-loading 1.6s cubic-bezier(.65,0,.35,1) infinite;
}
.slide:not(.is-video-active) .media-loader{display:none;}
@keyframes square-loading{
  0%,10%{transform:rotate(0deg);}
  45%,55%{transform:rotate(90deg);}
  90%,100%{transform:rotate(180deg);}
}
@media (prefers-reduced-motion:reduce){
  .media-loader::before{animation:none;}
}
#progressBar{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  background:#000000;
}
#mediaMagnifier{
  position:fixed;
  width:160px;
  height:160px;
  border:1px solid #000;
  background:#fff;
  pointer-events:none;
  z-index:9000;
}
#mediaMagnifier[hidden]{display:none;}
/* 세 점의 유기적 형태를 difference로 합성해 아래 픽셀을 반전한다. */
#negative-cursor{
  position:fixed;
  top:0;
  left:0;
  width:27px;
  height:34px;
  mix-blend-mode:difference;
  pointer-events:none;
  z-index:10000;
  visibility:hidden;
  transform:translate(-50%, -50%) scale(1);
  transition:transform .2s cubic-bezier(.22,1,.36,1);
}
#negative-cursor svg{display:block;width:100%;height:100%;fill:#fff;overflow:visible;}
#negative-cursor.is-pressed{transform:translate(-50%, -50%) scale(.6);}
@media (prefers-reduced-motion:reduce){
  #negative-cursor{transition:none;}
}
@media (any-hover:hover) and (any-pointer:fine){
  html.custom-cursor, html.custom-cursor *{cursor:none !important;}
  html.custom-cursor #negative-cursor{visibility:visible;}
}