/* v5.97 — 우리의 경험: 머리말 아래 큰 세리프 제목 목록. 참고: aardvarkbookclub.com "Choose from".
   활성 제목(마우스를 올린 항목 / 스크롤로 화면 가운데에 가장 가까운 항목)만 Ink로 진하고, 그 항목의 사진·영상(최대 4개, 모바일 2개)이
   제목 위아래 네 모서리에 기울어져 나타난다. 카드는 aardvark처럼 세로(272:419), 둥근 모서리 + 3px 밝은 테두리(Cream — 흰색 대신 팔레트).
   카드 순서: 1 왼쪽 위 · 2 오른쪽 아래 · 3 오른쪽 위 · 4 왼쪽 아래(모바일은 1·2만 = 대각선 두 장).
   카드는 활성 제목 위·아래에만 놓여 활성 제목 글자를 가리지 않는다. 가로 위치는 활성 제목 글자 폭의 양 끝(--exp-g, experience-list.js가 잰다)에 걸치고 목록 폭 안으로 제한된다.
   활성 항목·카드 위치·영상 재생은 public/scripts/experience-list.js, 항목 마크업은 src/pages/index.astro(SSR)·public/scripts/content.js(런타임).
   PC(≥1024px)는 LIVE와 한 띠: 왼쪽 경험 + 오른쪽 LIVE 카드.
   색은 팔레트(Ink·Cream)만 쓰고 그림자·그레이디언트·검정/흰색은 쓰지 않는다.
   이전: 옆 카드 하나 design-archive/experience-list-2026-10/, Flick 카드 design-archive/experience-flick-2026-10/. */

.live-experience {
  position: relative;
  z-index: 4;
}

.experience-section {
  --exp-idle: color-mix(in srgb, var(--color-ink) 26%, transparent);
  /* 카드 크기: aardvark 모바일 8.5em(≈34vw) · PC 17em(1440px에서 204px ≈ 14.2vw) */
  --exp-card-w: 34vw;
  --exp-card-h: calc(var(--exp-card-w) * 419 / 272);
  --exp-card-radius: 0.5rem;
  --exp-card-gap: 0.4rem; /* 활성 제목과 카드 사이 */
  --exp-row-pad: clamp(1.15rem, 5cqw, 1.6rem); /* 제목 사이 간격의 절반 — 활성 항목의 한 줄 텍스트(최대 2줄)가 이 안에 들어간다 */
  container-type: inline-size;
  /* 위: 첫 항목의 위 카드가 섹션 밖으로 나가지 않을 만큼. 아래: 마지막 항목의 아래 카드 일부는 다음 섹션 위 여백에 걸친다. */
  padding: max(clamp(5rem, 16vw, 7rem), calc(var(--exp-card-h) - 2.5rem)) 0 calc(var(--exp-card-h) * 0.6 + 2rem);
}

/* ── 머리말 ── */
.experience-section__heading {
  display: grid;
  justify-items: center;
  width: calc(100% - (2 * var(--page-gutter)));
  max-width: 94rem;
  margin: 0 auto clamp(1.5rem, 4cqw, 2.75rem);
  text-align: center;
}

/* v5.98: 제목 글꼴·크기는 원래대로 공용 .showcase-heading h2(세리프, --section-title-size, KR은 main.css의 한글 규칙) */

/* ── 제목 목록 ── */
.experience-list {
  display: block;
  margin: 0;
  padding: 0 var(--page-gutter);
  list-style: none;
}

.experience-item {
  position: relative;
  padding-block: var(--exp-row-pad);
  text-align: center;
}

/* 활성 항목의 카드가 이웃 제목 위에 오도록 */
.experience-item.is-active {
  z-index: 2;
}

.experience-item__head {
  position: relative;
  max-width: 100%;
  margin-inline: auto;
}

.experience-item__title {
  margin: 0;
  color: var(--exp-idle);
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 7.4cqw, 2.3rem); /* v5.98: 모바일 줄바꿈 최소화(이전 9.4cqw) */
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
  word-break: keep-all;
  transition: color 500ms cubic-bezier(0.625, 0.05, 0, 1);
}

.experience-item.is-active .experience-item__title,
.experience-item:only-child .experience-item__title {
  color: var(--color-ink);
}

/* v5.99 모바일·태블릿: 제목을 누르면 그 항목이 화면 가운데로 온다(experience-list.js) */
@media (max-width: 1023px) {
  .experience-item__title {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

/* 한 줄 텍스트: 활성 항목만, 제목 바로 아래(제목 사이 간격 안, 레이아웃을 밀지 않는다) */
.experience-item__summary {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  display: -webkit-box;
  width: min(100%, 34rem);
  margin: 0;
  overflow: hidden;
  color: var(--color-ink);
  font-family: var(--font-pretendard);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-wrap: pretty;
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  opacity: 0;
  translate: -50% 0;
  transition: opacity 400ms ease;
}

.experience-item.is-active .experience-item__summary,
.experience-item:only-child .experience-item__summary {
  opacity: 1;
}

/* ── 카드 ── */
.experience-item__cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.experience-card {
  --r: 0deg;
  --tx: 0%;
  --ty: 0%;
  --d: 0ms;
  position: absolute;
  z-index: 1;
  display: block;
  width: var(--exp-card-w);
  aspect-ratio: 272 / 419;
  overflow: hidden;
  border: 3px solid var(--color-cream);
  border-radius: var(--exp-card-radius);
  background: var(--color-cream);
  opacity: 0;
  scale: 0.86;
  transition:
    opacity 450ms ease var(--d),
    scale 650ms cubic-bezier(0.625, 0.05, 0, 1) var(--d),
    rotate 650ms cubic-bezier(0.625, 0.05, 0, 1) var(--d),
    translate 650ms cubic-bezier(0.625, 0.05, 0, 1) var(--d);
  -webkit-user-select: none;
  user-select: none;
}

.experience-card__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 가로: 왼쪽 카드는 제목 글자 왼쪽 끝, 오른쪽 카드는 오른쪽 끝에 걸친다(--exp-g = 글자 폭의 절반, 없으면 30%). 목록 폭 안으로 제한. */
.experience-card--1,
.experience-card--4 {
  left: clamp(0px, calc(50% - var(--exp-g, 30%) - var(--exp-card-w) * 0.7), calc(100% - var(--exp-card-w)));
}

.experience-card--2,
.experience-card--3 {
  left: clamp(0px, calc(50% + var(--exp-g, 30%) - var(--exp-card-w) * 0.3), calc(100% - var(--exp-card-w)));
}

/* 세로: 1·3은 제목 위, 2·4는 제목 아래(한 줄 텍스트가 있으면 그 아래) */
.experience-card--1,
.experience-card--3 {
  bottom: calc(100% + var(--exp-card-gap));
}

.experience-card--2,
.experience-card--4 {
  top: calc(100% + var(--exp-card-gap));
}

.experience-item__head:has(.experience-item__summary) .experience-card--2,
.experience-item__head:has(.experience-item__summary) .experience-card--4 {
  top: calc(100% + var(--exp-card-gap) + 2.85rem);
}

/* aardvark처럼 장마다 조금씩 다른 기울기·어긋남. 짝수 항목은 기울기 방향을 뒤집는다. */
.experience-card--1 { --r: -8deg; --tx: -5%; --ty: 3%; }
.experience-card--2 { --r: 6deg; --tx: 5%; --ty: -3%; --d: 60ms; }
.experience-card--3 { --r: 4deg; --tx: 4%; --ty: 5%; --d: 30ms; }
.experience-card--4 { --r: -3deg; --tx: -4%; --ty: -4%; --d: 90ms; }

.experience-item:nth-child(even) .experience-card {
  --flip: -1;
}

.experience-item.is-active .experience-card,
.experience-item:only-child .experience-card {
  opacity: 1;
  rotate: calc(var(--r) * var(--flip, 1));
  scale: 1;
  translate: var(--tx) var(--ty);
}

/* 모바일: 앞의 두 장(왼쪽 위·오른쪽 아래)만 */
@media (max-width: 767px) {
  .experience-card--3,
  .experience-card--4 {
    display: none;
  }
}

/* ── 768~1023px: 카드 넷, 조금 작게 ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .experience-section {
    --exp-card-w: clamp(140px, 17vw, 170px);
    --exp-card-radius: 0.65rem;
    --exp-row-pad: clamp(1.1rem, 2.6cqw, 1.6rem);
  }

  .experience-item__title {
    font-size: clamp(2.6rem, 6.4cqw, 3.75rem);
  }
}

/* ── PC(≥1024px): LIVE가 있으면 왼쪽 경험 + 오른쪽 LIVE 한 띠 ── */
@media (min-width: 1024px) {
  .live-experience {
    --live-w: min(33.333vw, 420px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--live-w) + clamp(1.5rem, 4vw, 4rem));
    column-gap: clamp(1.5rem, 2.5vw, 3rem);
    align-items: start;
    max-width: 96rem;
    margin-inline: auto;
    padding-inline: var(--page-gutter);
  }

  /* LIVE가 비어 있으면 경험이 한 줄 전체를 쓴다 */
  .live-experience:not(:has(.live-floating:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr);
  }

  .live-experience > .experience-section {
    --exp-card-w: clamp(120px, 10vw, 160px); /* v5.98: 제목 오른쪽 부채꼴용(이전 14.2vw) */
    --exp-card-radius: 0.875rem;
    --exp-row-pad: clamp(1.25rem, 2.2cqw, 1.75rem);
    grid-column: 1;
    grid-row: 1;
  }

  .live-experience > .live-floating {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    /* 카드 높이(사진 3:4 + 머리말·점·하단 약 16rem)의 70% — 나머지 30%는 위 섹션 경계 위로 걸친다 */
    height: calc(((var(--live-w) - 2rem) * 1.3334 + 16rem) * 0.7);
  }

  .live-experience .live-floating__card {
    left: 50%;
    width: var(--live-w);
    transform: translate(-50%, -30%) rotate(7deg);
  }

  .experience-section__heading,
  .experience-list {
    padding-inline: 0;
  }

  .experience-section__heading {
    width: 100%;
    max-width: none;
  }

  .experience-item__title {
    font-size: clamp(2.1rem, 4.4cqw, 4rem);
  }

  /* v5.98 PC: 머리말·제목은 왼쪽 정렬, 사진·영상은 활성 제목 글자 오른쪽(--exp-tw + 간격)에 놓인다.
     v5.99: 한 줄로 겹친 부채꼴 대신 장끼리 간격을 띄우고 위아래로 엇갈린 흩어진 배치(카드 수 1~4장마다 균형 잡힌 자리).
     자리 단위: 가로 --dx × 카드 폭, 세로 --dy × 카드 높이(제목 세로 가운데 기준). 제목 칸은 배치 폭만큼 좁혀 카드가 제목을 가리지 않는다. */
  .live-experience > .experience-section,
  .experience-section {
    --exp-card-h: calc(var(--exp-card-w) * 419 / 272);
    --exp-fan-w: calc(var(--exp-card-w) * 2.36);
    --exp-fan-gap: 2.75rem;
  }

  .experience-section__heading {
    justify-items: start;
    margin-bottom: max(3rem, calc(var(--exp-card-h) * 0.5)); /* 첫 항목의 위쪽 카드가 머리말에 닿지 않게 */
    text-align: left;
  }

  .experience-item {
    text-align: left;
  }

  .experience-item__head {
    max-width: calc(100% - var(--exp-fan-w) - var(--exp-fan-gap));
    margin-inline: 0;
  }

  .experience-item__summary {
    left: 0;
    width: min(100%, 34rem);
    translate: none;
  }

  .experience-card,
  .experience-item__head:has(.experience-item__summary) .experience-card {
    --dx: 0;
    --dy: 0;
    top: calc(50% + var(--dy) * var(--exp-card-h));
    bottom: auto;
    left: calc(var(--exp-tw, 60%) + var(--exp-fan-gap) + var(--dx) * var(--exp-card-w));
    translate: 0 -46%;
  }

  .experience-card--1 { --r: -6deg; --tx: 0%; --ty: -50%; }
  .experience-card--2 { --r: 5deg; --tx: 0%; --ty: -50%; }
  .experience-card--3 { --r: 3deg; --tx: 0%; --ty: -50%; }
  .experience-card--4 { --r: -4deg; --tx: 0%; --ty: -50%; }

  /* 2장: 왼쪽 위 · 오른쪽 아래 */
  .experience-item__cards:has(> .experience-card--2) .experience-card--1 { --dx: 0; --dy: -0.24; }
  .experience-item__cards:has(> .experience-card--2) .experience-card--2 { --dx: 1.3; --dy: 0.24; }
  /* 3장: 왼쪽 위 · 오른쪽 위(조금 아래) · 가운데 아래 */
  .experience-item__cards:has(> .experience-card--3) .experience-card--1 { --dx: 0; --dy: -0.5; }
  .experience-item__cards:has(> .experience-card--3) .experience-card--2 { --dx: 1.3; --dy: -0.28; }
  .experience-item__cards:has(> .experience-card--3) .experience-card--3 { --dx: 0.5; --dy: 0.62; }
  /* 4장: 2×2를 엇갈리게 — 왼쪽 위 · 오른쪽 위(아래로) · 왼쪽 아래(오른쪽으로) · 오른쪽 아래(더 아래로) */
  .experience-item__cards:has(> .experience-card--4) .experience-card--1 { --dx: 0; --dy: -0.56; }
  .experience-item__cards:has(> .experience-card--4) .experience-card--2 { --dx: 1.3; --dy: -0.36; }
  .experience-item__cards:has(> .experience-card--4) .experience-card--3 { --dx: 0.14; --dy: 0.6; }
  .experience-item__cards:has(> .experience-card--4) .experience-card--4 { --dx: 1.36; --dy: 0.74; }
}

@media (prefers-reduced-motion: reduce) {
  .experience-item__title,
  .experience-item__summary,
  .experience-card {
    transition: none;
  }
}

/* ── VIEW ALL 모달의 경험 카드: 링크가 없으므로 올라오는 효과도 없다 ── */
.work-card--note .work-card__brand {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  text-wrap: balance;
  word-break: keep-all;
}

.work-card--note .work-card__project {
  text-transform: none;
  word-break: keep-all;
}

@media (hover: hover) {
  .work-card--note:hover .work-card__media {
    box-shadow: none;
    translate: none;
  }

  .work-card--note:hover .work-card__video,
  .work-card--note:hover .work-card__image {
    transform: none;
  }
}