/* Work: 프로젝트 카드 목록 (피그마 899:681). 디자인 원칙(CLAUDE.md) 토큰만 씀.
   12칸 그리드에 타일 4칸씩(한 줄 3개), 가로·세로 간격 같게 촘촘히 (사용자 레퍼런스 "워크페이지 레퍼런스.png").
   사진 아래 캡션 없음: 사진 안 왼쪽 위 팀/개인 캡슐 + 오른쪽 위 ↗(유일한 링크). 마우스 올리면 하단 블러 위로 이름/연도·설명·역할·크레딧.
   헤더·하단바·스크롤바·페이지 이동은 about 과 같음 (body: hero-page about-page work-page) */
.work {
  position: relative;
  padding: calc(463 * var(--k)) var(--edge) calc(200 * var(--k));
  color: var(--fg);
}

.work__grid {
  position: relative;                  /* 카드 offsetLeft/Top 의 기준 (work-sort.js 칸 계산) — 빼면 순서 바꾸기가 어긋남 */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--gap);                 /* 캡션이 없으니 가로·세로 같은 간격 */
}
.card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  font-weight: 400;
  letter-spacing: var(--track);
}

/* 썸네일: 피그마 프레임 1167×1159 비율, R 은 아래 '모서리' */
.card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1167 / 1159;
  overflow: hidden;
  isolation: isolate;                 /* 둥근 모서리 밖으로 레이어가 새지 않게 */
}
.card__layer {
  position: absolute;
  overflow: hidden;
  /* 마우스 올리면 이미지만 아주 천천히 살짝 다가옴 (원칙 9: 긴 감속, 튕김 없음) */
  transition: scale 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.card__layer--open { overflow: visible; }
.card__layer img { position: absolute; max-width: none; display: block; }
@media (hover: hover) {
  .card:hover .card__thumb > .card__layer { scale: 1.035; }
}

/* 사진 안 정보: 왼쪽 위 = 팀/개인 프로젝트 캡슐 (흰 유리, 작게 — 사진을 가리지 않게. 회색 글라스 통일은 사용자가 되돌림)
   오른쪽 위 = ↗ : 카드에서 유일한 링크. 상단 메뉴와 같은 메타볼 캡슐(nav.js) → 화살표에 올리면 진한 회색이 펴지며 옆으로 늘어남.
   사진에 올렸을 땐 화살표 그대로 */
.card__kind {
  position: absolute;
  top: max(10px, calc(28 * var(--k)));
  left: max(10px, calc(28 * var(--k)));
  z-index: 2;
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}
.card .card__go {
  position: absolute;
  top: max(10px, calc(28 * var(--k)));
  right: max(10px, calc(28 * var(--k)));
  z-index: 3;
  height: 32px;
  /* 10-30 사용자: 카드 아무 데나 눌러도 들어가니 ↗ 는 안 보이게. 링크(키보드·work-sort.js 클릭 대신 누르기)는 그대로 둠 */
  opacity: 0;
  pointer-events: none;
}
.card .card__go:focus-within { opacity: 1; }      /* 키보드 Tab 으로 왔을 때만 보임 */
.card__go .nav__item { color: var(--fg-ui); }
.card__go .nav__item.is-active { color: #fff; }
.card__go svg { display: block; }

/* 마우스 올리면: 사진 아래쪽이 위로 갈수록 옅어지는 블러(+살짝 어둡게) 위로 상세가 떠오름.
   블러 값은 고정, 투명도만 움직임 (블러 값 애니메이션은 끝날 때 툭 바뀜 — 컨택트 창에서 겪은 문제) */
.card__veil {
  position: absolute;
  inset: 30% 0 0;                 /* 줄글이 들어가서 조금 더 위부터 */
  z-index: 1;
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to top, #000 40%, transparent);
  mask-image: linear-gradient(to top, #000 40%, transparent);
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}
/* 상세 (하단 블러 위, 흰 글자): 이름 / 연도(--t-lg) → 간단 설명(--t-md) → 줄글 두 줄(--t-sm) → 맨 아래 역할 · 크레딧(--t-xs) */
.card__detail {
  position: absolute;
  left: max(16px, calc(56 * var(--k)));
  right: max(16px, calc(56 * var(--k)));
  bottom: max(16px, calc(52 * var(--k)));
  z-index: 2;
  display: flex;
  flex-direction: column;
  max-width: 30em;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.card__title { font-size: var(--t-lg); line-height: var(--lh-tight); }
.card__year { opacity: 0.6; }
.card__tag { display: none; }          /* 팀/개인 — 폰·터치에서만 제목 옆 (아래 hover:none 블록). 컴퓨터는 사진 안 캡슐 */
.card__desc { margin-top: 0.4em; font-size: var(--t-md); line-height: var(--lh); opacity: 0.9; }
/* 줄글 설명: 두 줄까지만 (넘치면 … ) */
.card__text {
  margin-top: 0.6em;
  max-width: 34em;
  font-size: var(--t-sm);
  line-height: var(--lh);
  opacity: 0.8;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.card__meta { display: flex; flex-direction: column; margin-top: var(--head-gap); font-size: var(--t-xs); line-height: var(--lh); opacity: 0.7; }
@media (hover: hover) {
  .card:hover .card__veil, .card:focus-visible .card__veil { opacity: 1; }
  .card:hover .card__detail, .card:focus-visible .card__detail { opacity: 1; transform: none; transition-delay: 0.08s; }
}

/* 모서리: 레퍼런스처럼 작은 R 하나로 고정 (토글·분류 탭은 정신없어서 뺌) */
.card__thumb { border-radius: max(8px, calc(24 * var(--k))); }

/* ---------- 크게 / 작게 보기 (로고 아래 토글, work-sort.js) ----------
   작게 = 한 줄에 6개, 사진만 (캡슐·↗·하단 설명 없음). 마우스 올리면 프로젝트 이름 캡슐만. 카드 아무 데나 누르면 상세로.
   작게 보기에서만 꾹 눌러 순서 바꾸기. 보기 바꿀 때 카드가 제자리에서 줄고 늘며 이동 (FLIP) */
.work__view {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin: calc(-32px - max(12px, calc(28 * var(--k)))) 0 max(12px, calc(28 * var(--k))) auto;   /* 오른쪽, 카드 바로 위 (헤더 메뉴 아래 줄) — 카드 위치는 그대로 */
}
.work__view .nav__item { padding: 0; border: 0; background: none; font: inherit; color: var(--fg-ui); cursor: pointer; }
.work__view .nav__item.is-active { color: #fff; }
.work__view svg { display: block; width: 13px; height: 13px; fill: currentColor; }

/* 작게 = 크게 보기를 그대로 줄인 모양 (한 줄 3개 × 4줄, 가운데). 간격·모서리도 같은 비율로.
   토글도 줄어든 목록의 오른쪽 위 끝으로 같이 미끄러져 감 */
.work.is-small { --s: 0.42; }
.work__view { transition: margin-right 0.65s cubic-bezier(0.32, 0.72, 0, 1); }
.work.is-small .work__view { margin-right: calc(100% * (1 - var(--s)) / 2); }
.work.is-small .work__grid {
  width: calc(100% * var(--s));
  margin-inline: auto;
  gap: calc(var(--gap) * var(--s));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card { cursor: pointer; }                 /* 카드 아무 데나 누르면 상세로 (크게·작게 둘 다, work-sort.js) */
.work.is-small .card { grid-column: span 1; }
.work.is-small .card__thumb { border-radius: max(6px, calc(24 * var(--k) * var(--s))); }
.work.is-small .card__kind { display: none; }
/* ↗ 는 display:none 말고 안 보이게만 — 크기를 잴 수 있어야 크게 보기로 돌아왔을 때 안 찌그러짐 (nav.js) */
.work.is-small .card__go { visibility: hidden; pointer-events: none; }
/* 마우스 올리면 크게 보기와 같은 하단 블러 + 흰 글자, 단 이름만 (연도·설명·소개·역할 숨김) */
.work.is-small .card__desc,
.work.is-small .card__text,
.work.is-small .card__meta,
.work.is-small .card__year { display: none; }
.work.is-small .card__veil { inset: 55% 0 0; }
.work.is-small .card__detail { left: max(10px, calc(24 * var(--k))); right: max(10px, calc(24 * var(--k))); bottom: max(10px, calc(22 * var(--k))); }
.work.is-small .card__title { font-size: var(--t-sm); }
/* 크게↔작게 전환 중 (work-sort.js, 0.65초): 유리 블러·↗·마우스오버 끄고 카드마다 GPU 레이어 — 끊김·잔상 방지 */
.work.is-morphing .work__grid { pointer-events: none; }
.work.is-morphing .card { will-change: transform; }
.work.is-morphing .card__go,
.work.is-morphing .card__veil,
.work.is-morphing .card__detail { visibility: hidden; }
.work.is-morphing .card__kind { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.92); }
.work.is-morphing .card__layer { scale: 1 !important; transition: none; }

/* ---------- 순서 바꾸기 (작게 보기에서 꾹 누르기 → 흔들림 → 끌어서 자리 바꿈 → 완료) ----------
   움직임 곡선은 iOS 와 같은 cubic-bezier(0.32, 0.72, 0, 1). 흔들림은 rotate 속성이라 자리 이동(transform)과 안 부딪힘.
   흔들림은 작고 느리게 (사용자: 처음 것은 경박함) */
.card { position: relative; -webkit-touch-callout: none; }
.card img { -webkit-user-drag: none; }
/* 누르는 동안 살짝 눌림 → 0.45초 차면 편집 */
.card { transition: scale 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
.card.is-pressing { scale: 0.96; }
@keyframes card-jiggle {
  0%, 100% { rotate: -0.45deg; }
  50% { rotate: 0.45deg; }
}
.work__grid.is-editing .card {
  animation: card-jiggle 0.62s ease-in-out infinite;
  animation-delay: calc(var(--j, 0s) * -1);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), scale 0.3s;
  will-change: transform;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.work__grid.is-editing .card.is-lifted { animation: none; transition: none; z-index: 5; cursor: grabbing; }
.card.is-lifted .card__thumb { box-shadow: 0 40px 80px rgba(0, 0, 0, 0.22); }
.work__grid.no-anim, .work__grid.no-anim .card { transition: none !important; }
/* 편집 중엔 유리 블러·마우스오버 설명을 끔 (블러 12장이 흔들리며 매 프레임 다시 그려지는 게 끊김 원인). ↗ 는 위에서 이미 숨김 */
.work__grid.is-editing .card__veil,
.work__grid.is-editing .card__detail { display: none; }
.work__grid.is-editing .card__kind { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.92); }
.work__grid.is-editing .card__layer { scale: 1 !important; }
@media (prefers-reduced-motion: reduce) { .work__grid.is-editing .card { animation: none; } }

/* 아래 가운데: 원래대로 / 완료 */
.work-edit {
  position: fixed;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  z-index: 50;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(24, 24, 24, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  translate: -50% 16px;
  opacity: 0;
  transition: opacity 0.3s, translate 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-edit.is-in { opacity: 1; translate: -50% 0; }
.work-edit button {
  font: inherit;
  font-size: 14px;
  letter-spacing: var(--track);
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
}
.work-edit button[data-done] { background: #fff; color: #111; }
.work-edit button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 1200px) { .card { grid-column: span 6; } .work.is-small { --s: 0.6; } }
@media (max-width: 760px) {
  .work { padding-top: var(--page-top); }   /* 로고·메뉴 아래 (hero.css 폰) */
  .work__view { display: none; }          /* 폰은 크게·작게가 똑같이 한 줄 하나라 토글이 의미 없음 */
  .work__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 48px; }
  .card { grid-column: 1 / -1; }
  .work.is-small { --s: 1; }
  .card__thumb, .work.is-small .card__thumb { border-radius: 6px; }
}
/* 폰·터치 (마우스 올리기가 없음, 사용자 11-01): 설명을 사진 위가 아니라 사진 아래에 늘 보이게. 흰 글자 → 페이지 글자색 */
@media (hover: none), (max-width: 760px) {
  .card__veil { display: none; }
  .card .card__detail {
    position: static;
    display: flex;
    max-width: none;
    margin-top: 14px;
    color: var(--fg);
    opacity: 1;
    transform: none;
  }
  .card__year { opacity: 1; color: var(--fg-2); }
  /* 팀/개인: 사진 안 캡슐 대신 제목 옆 작은 캡슐 (사용자 11-01) */
  .card__kind { display: none; }
  .card__title { display: flex; align-items: center; flex-wrap: wrap; column-gap: 0.3em; }
  .card .card__tag {
    display: inline-flex;
    align-items: center;
    height: 18px;                          /* 11-01 사용자 "더 작게, 여백이 없어 보임" 22 → 18 */
    margin-left: auto;                     /* 제목 줄 오른쪽 끝 (사용자 11-01) */
    padding: 0 7px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: -0.01em;
    color: var(--fg-ui);
    background: rgba(17, 17, 17, 0.06);
  }
  .card__desc { opacity: 1; }
  .card__text { opacity: 1; color: var(--fg-2); }
  .card__meta { opacity: 1; margin-top: 10px; color: var(--fg-2); }
}

/* 아직 안 채운 프로젝트를 누르면 카드 가운데에 잠깐 뜨는 캡슐 (pj-modal.js soon(), 10-31). 크기는 상단 메뉴 캡슐 그대로 */
.soon-toast {
  position: fixed;
  z-index: 60;
  font-size: 13px;
  letter-spacing: var(--track);
  cursor: default;
  pointer-events: none;
  color: #fff;                                   /* 밝은 사진 위에서도 보이게 메뉴 올렸을 때의 진한 캡슐 톤 */
  background: linear-gradient(180deg, rgba(110, 110, 110, 0.6) 0%, rgba(80, 80, 80, 0.62) 55%, rgba(70, 70, 70, 0.56) 100%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.soon-toast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }