/* ============================================================
 * business.css — Business landing page (pages/business.html)
 * Index of the DS MADE group: 1 umbrella card + 4 subsidiary
 * / partner brand cards.
 * ========================================================== */

/* Force light editorial canvas (same override pattern the
   press/brand pages use — homepage's styles.css paints body
   dark with !important). */
body {
  background: #ffffff !important;
  color: #0a0a0a !important;
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout: 2-column (좌 헤더 / 우 ExpandingCards) ────────
   데스크톱에서 헤더가 왼쪽에 정돈되고 카드가 오른쪽에서 확장됨.
   모바일(<768px)은 stacked 로 자동 전환 (헤더 위, 카드 아래). */
.biz-layout {
  /* 폭을 넓혀 오른쪽에 남는 흰 여백을 카드가 채우게 함.
     1400 → 1560 + 좌측 헤더 컬럼 비중을 5fr→4fr 로 낮춰 카드가
     더 넓은 컬럼(8fr) 을 확보. */
  max-width: 1560px;
  margin: 0 auto;
  /* 상단: nav pill(top:20 + ~62px) 여유만 확보 (110px).
     하단: 카드가 뷰포트 하단에 가깝게 붙도록 최소화 (24-32px). */
  padding: clamp(100px, 11vw, 130px) clamp(20px, 4vw, 48px) clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 56px);
  /* align-items: start — Back pill 은 이 grid 를 이용하지 않고 아래
     .biz-layout::after 로 아코디언 옆에 absolute 로 붙는다. 두 컬럼
     은 각자 자기 컨텐츠 높이만큼만 차지하도록 start 유지. */
  align-items: start;
  /* Back pill 을 아코디언(.ec) 하단선에 맞춰 절대 위치시키기 위한
     기준 컨테이너. */
  position: relative;
}
@media (max-width: 900px) {
  .biz-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ── Header ─────────────────────────────────────────────── */

.biz-header {
  max-width: 1200px;
  margin: 0 auto;
  /* Top padding clears the fixed SharedNav pill (~82px). */
  padding: clamp(140px, 15vw, 200px) clamp(20px, 4vw, 48px) clamp(48px, 6vw, 80px);
}

/* Header-in-column variant: 부모(.biz-layout) 가 이미 padding + max-
   width 를 담당하므로 본인의 여백은 제거하되, 타이틀을 카드 영역
   중반쯤으로 내리기 위해 top padding 을 넉넉히. */
.biz-header--col {
  max-width: none;
  margin: 0;
  padding: 0;
  /* 타이틀을 카드 세로 중반 근처까지 내려 편집적인 여백 확보. */
  padding-top: clamp(80px, 11vw, 180px);
  /* 크럼을 절대 위치로 카드 상단과 정렬시키기 위한 기준. */
  position: relative;
}

/* ── Back pill 최종 배치 로직 ─────────────────────────────────
   사용자의 반복 요청 (며칠에 걸쳐 여러 번): "Back 버튼을 우측 아코
   디언(사진) 맨 아래 끝단과 y-좌표가 맞도록" — 즉 시각적으로 사진
   바닥선과 나란히 놓여야 한다.

   이전 시도들이 왜 실패했나:
     (v1) 아코디언 아래 grid 세 번째 자식 → 두 번째 줄에 놓여 너무
          내려감.
     (v2) Header 컬럼 내부 flex-column + margin-top:auto + grid
          align-items:stretch → 브라우저에서 stretch 가 명확히 적용
          되지 않아 실제로 컬럼 높이가 아코디언만큼 늘어나지 않음.
          결과적으로 back-row 가 헤더 텍스트 바로 밑에 붙어 사진
          하단선과 정렬 안 됨.

   확실한 해법 (v3, 이번):
     - .biz-layout 을 position: relative 로 설정.
     - .biz-back-row--in-header 를 position: absolute 로 좌측 헤더
       컬럼 폭 안에서 bottom:0 에 고정.
     - bottom 값은 .biz-layout 의 padding-bottom(24-40px) 을 제외한
       실제 아코디언 하단선 위치 = padding-bottom 만큼.
     - 결과: 우측 아코디언 하단선과 좌측 Back 버튼 아래 라인이 정확
       히 같은 y-좌표. 아코디언 높이(뷰포트에 따라 580~920px)가 어
       떻게 변해도 자동으로 따라감. */
.biz-back-row--in-header {
  position: absolute;
  bottom: 0;
  left: clamp(20px, 4vw, 48px);
  right: calc(66.67% + clamp(28px, 4vw, 56px));
  margin: 0;
  padding: 0;
  z-index: 2;
  width: auto !important;
}
@media (max-width: 900px) {
  /* Mobile: pull the Home pill OUT of the absolute-positioned
     "sit at the bottom of the left column" layout so it doesn't
     overlap the accordion cards below. Flow it naturally after
     the accordion instead, centered under it.
     User report 2026-08-17: "홈 버튼이 LUMORA 위에 겹쳐있어" */
  .biz-back-row--in-header {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    /* Push the button down past the accordion — the accordion
       lives in a following section and takes ~viewport height on
       mobile. This margin creates a comfortable gap between the
       last accordion card and the Home pill. */
    margin-top: clamp(32px, 8vw, 56px);
    margin-bottom: clamp(24px, 5vw, 40px);
  }
}

/* 크럼만 카드(배너) 최상단과 같은 y-위치로 끌어올리기.
   .biz-header--col 의 padding-top(80–180px) 을 무시하고 컬럼
   최상단(=.biz-layout padding-top 이후) 에 붙음. 타이틀/lede/
   Back pill 은 원래 위치 그대로 유지. */
.biz-header--col .biz-crumb {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.biz-crumb {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(10, 10, 10, 0.6);
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.biz-crumb a { color: inherit; text-decoration: none; }
.biz-crumb a:hover { color: #0a0a0a; }
.biz-crumb__sep { opacity: 0.4; }
.biz-crumb__current {
  /* 사이트 전체 크럼 "current" 색은 크림슨 레드 (--crumb-current)로
     통일. 히어로 타이틀 강조는 여전히 --pink(오렌지) 유지. */
  color: var(--crumb-current, #E30D2E);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.biz-title {
  /* 카드 안 타이틀(.ec__title)과 톤 일치: Playfair Display, weight 800,
     letter-spacing -0.02em. 크기는 히어로 답게 조금 크되 예전 96px 대비
     대폭 축소해 절제된 편집 톤으로. */
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: balance;
  color: #0a0a0a;
}
.biz-title em {
  /* Business 강조 부분 — italic + pink 강조 폐기. Title 과 완전히
     동일한 잉크 검정 + non-italic 으로 통일. */
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}

.biz-lede {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  color: rgba(10, 10, 10, 0.7);
  max-width: 620px;
  /* 타이틀 아래로 살짝 여백. 좌측 정렬 (컬럼과 동일 축). */
  margin: clamp(24px, 3vw, 40px) 0 0;
  text-align: left;
  text-wrap: pretty;
}

/* ── Back pill row ─────────────────────────────────────────
   accordion 밑 중앙에 놓여 페이지를 다 본 뒤 홈으로 이동.

   사용자 요청: 홈 버튼을 사진(아코디언) 맨 아래 끝단과 맞춰야
   한다 — 즉 아코디언 하단과 버튼 사이 여백을 없애서 버튼이 사진
   바로 아래 끝선에 밀착되게. 이전엔 clamp(32px,4vw,56px) 위 여백
   이 있어 버튼이 사진에서 뚝 떨어져 보였음. 이 상단 여백을 0 으로
   지우고, 아래로만 여백을 유지해 다음 섹션(footer)과의 간격 확보. */
.biz-back-row {
  display: flex;
  justify-content: center;
  width: 100%;
  /* 위 0 — 사진(아코디언) 끝선 바로 밑에 버튼이 밀착.
     아래는 그대로 유지 → footer 와의 여백만 담당. */
  margin: 0 0 clamp(20px, 3vw, 40px);
}

/* ── Back pill (icon-only, unified with About/History) ────
   Circular icon-only button; matches .au-back-btn shape. */
.biz-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #0a0a0a;
  border-radius: 999px;
  background: #ffffff;
  color: #0a0a0a;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.biz-back:hover {
  background: #0a0a0a;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.35);
}
.biz-back:hover .biz-back__icon {
  transform: translateX(-3px);
}
.biz-back:focus-visible {
  outline: 2px solid #0a0a0a;
  outline-offset: 4px;
}
.biz-back:active { transform: translateY(0); }
.biz-back__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── ExpandingCards (.ec) ────────────────────────────────────
   Osmo/shadcn ExpandingCards 예제를 React 없이 순수 CSS+JS 로 이식.
   - 데스크톱: 가로 grid, 활성 카드는 5fr / 나머지는 각 1fr
   - 모바일 : 세로 grid, 활성 5fr / 나머지 1fr
   - 활성 카드에만 이미지가 컬러 + 확대 없이 표시, 나머지는 grayscale
     +살짝 확대. 활성 카드에만 콘텐츠(title, desc, cta) 표시.
   - 비활성 카드는 세로로 회전된 spine 텍스트가 보임 (Osmo 원본과 동일).
   ============================================================ */
.ec {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  /* 활성 3fr / 비활성 각 1fr (총 3+4=7fr).
     이전 5fr/1fr(총 9fr) 대비 비활성 카드의 상대 폭이 3/7=43%
     → 지금은 1/7 ≈ 14% (이전은 1/9 ≈ 11%). 비활성이 살짝 더
     뚱뚱해지고 활성이 조금 좁아짐. 그래도 활성이 4배 넓음. */
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  /* 뷰포트를 최대한 채움 — layout 상단 padding(~110px) + 하단
     여유(~24px) 만 뺀 나머지. 카드가 화면 바닥 근처까지 내려감. */
  height: calc(100vh - 140px);
  min-height: 580px;
  max-height: 920px;
  transition: grid-template-columns 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
              grid-template-rows    500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* JS 가 data-active-index 를 세팅. CSS 로 각 인덱스별 컬럼 비율. */
.ec[data-active-index="0"] { grid-template-columns: 3fr 1fr 1fr 1fr 1fr; }
.ec[data-active-index="1"] { grid-template-columns: 1fr 3fr 1fr 1fr 1fr; }
.ec[data-active-index="2"] { grid-template-columns: 1fr 1fr 3fr 1fr 1fr; }
.ec[data-active-index="3"] { grid-template-columns: 1fr 1fr 1fr 3fr 1fr; }
.ec[data-active-index="4"] { grid-template-columns: 1fr 1fr 1fr 1fr 3fr; }

@media (max-width: 900px) {
  /* 모바일 — LX인터내셔널 스타일:
     - 아코디언 로직 완전히 비활성. 모든 카드가 항상 펼쳐진 상태.
     - 세로 스택, 각 카드가 개별 이미지 + 하단 오버레이 텍스트.
     - grid 대신 flex column 으로 갈아엎어 각 카드가 고정 높이(200px)
       를 갖도록 → 스크롤로 자연스럽게 아래로 흐름.
     - 활성/비활성 개념을 없애 항상 컬러 이미지 + 텍스트 표시. */
  .ec {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transition: none !important;
  }
  .ec__item {
    height: 200px;
    border-radius: 0;
    cursor: pointer;
    /* 활성 여부와 무관하게 항상 이 스타일. */
  }

  /* 이미지 — 데스크톱의 grayscale/scale/파노라마 슬라이싱 전부 무효화.
     모든 카드가 자기 개별 이미지를 컬러로 꽉 채워 보여줌. */
  .ec__img,
  .ec--panorama .ec__pano {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transform: none !important;
    filter: none !important;
  }

  /* 스크림 — 하단만 어둡게. LX 참조 스타일과 비슷하게 이미지 위에
     텍스트가 얹히도록 강한 하단 그라디언트. */
  .ec__scrim {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.35) 40%,
      rgba(0, 0, 0, 0.10) 70%,
      rgba(0, 0, 0, 0)   100%
    );
    opacity: 1;
  }

  /* 세로 spine 은 모바일에서 완전히 숨김. */
  .ec__spine { display: none !important; }

  /* 콘텐츠 — 활성 여부 무관하게 항상 표시. */
  .ec__content {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    gap: 6px;
  }
  .ec__body {
    padding: 20px 24px;
    padding-right: 64px;   /* 우측 화살표 아이콘 공간 확보 */
    justify-content: flex-end;
  }
  .ec__eyebrow {
    font-size: 12px;
    letter-spacing: 0.12em;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    align-self: flex-start;
  }
  .ec__title {
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-top: 4px;
  }
  /* 설명 텍스트(desc)와 기존 READ MORE cta 는 LX 스타일에서 없으므로 숨김.
     대신 우측 하단에 큰 화살표(→) 를 pseudo-element 로 표시. */
  .ec__desc { display: none !important; }
  .ec__cta  { display: none !important; }

  .ec__item::after {
    content: "→";
    position: absolute;
    right: 24px;
    bottom: 26px;
    z-index: 2;
    color: #ffffff;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
    opacity: 0.95;
  }
}

.ec__item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 14px;
  background: #14121a;
  min-width: 60px;
  min-height: 60px;
  outline: none;
  isolation: isolate;
}
.ec__item:focus-visible {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--crumb-current, #E30D2E);
}

/* 배경 이미지 — 비활성일 때는 grayscale + 약간 확대, 활성에서는
   원본 컬러 + scale(1). */
.ec__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.1);
  filter: grayscale(1);
  transition:
    transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter    400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 0;
  user-select: none;
}
.ec__item[data-active="true"] .ec__img {
  transform: scale(1);
  filter: grayscale(0);
}

.ec__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.05) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.ec__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* justify-content: flex-end 제거 — 하단 정렬 기준 서브픽셀 재계산으로
     텍스트 마지막 줄 튐 유발. .ec__content 의 margin-top: auto 로 대체. */
  padding: clamp(16px, 1.6vw, 24px);
  gap: 8px;
  pointer-events: none;
}

/* Spine — 비활성 카드에만 표시되는 세로 라벨. 활성 상태에선
   opacity 0 으로 사라짐. 데스크톱에서 카드가 좁으니 90도 회전. */
.ec__spine {
  position: absolute;
  left: clamp(14px, 1.2vw, 18px);
  bottom: clamp(14px, 1.2vw, 18px);
  transform-origin: left bottom;
  transform: rotate(-90deg) translate(0, 0);
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  /* 비활성 → 활성 전환: spine 즉시 사라짐 (확장 애니메이션과 겹침).
     활성 → 비활성 전환: 확장(500ms)이 끝난 뒤 spine 등장 (delay). */
  transition: opacity 260ms ease-out 500ms;
  pointer-events: none;
}
.ec__item[data-active="true"] .ec__spine {
  opacity: 0;
  transition: opacity 180ms ease-out 0ms;
}
@media (max-width: 900px) {
  /* 모바일: 세로 stack 이므로 spine 은 회전 없이 가로로. */
  .ec__spine {
    transform: none;
    left: clamp(14px, 3vw, 18px);
    bottom: auto;
    top: clamp(14px, 3vw, 18px);
  }
}

/* 활성 카드에만 표시되는 콘텐츠 그룹.
   확장 애니메이션(500ms)이 끝난 뒤에 텍스트가 페이드인 되도록
   delay 400ms. 반대로 비활성 전환 시엔 즉시 사라짐(delay 0).

   [애니메이션 종료 직전 마지막 줄 튐 해결 — Gemini 진단]
   - justify-content 하단 정렬 대신 margin-top: auto 로 하단 고정
     → Flex 하단 기준 서브픽셀 재계산 방지
   - -webkit-font-smoothing: antialiased 로 안티앨리어싱 방식 고정
     → GPU 레이어 해제(demotion) 시점 Grayscale ↔ Subpixel RGB 스위칭
       으로 인한 폰트 두께/위치 튐 방지
   - contain: layout paint 로 레이아웃 계산을 컨테이너 내부로 격리 */
.ec__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;                     /* 하단 고정 (flex-end 대체) */
  opacity: 0;
  /* rotate(0.001deg) — GPU 컴포지터 레이어가 트랜지션 종료 시점에
     해제되지 않도록 강제 유지. Blink 의 layer hand-off 로 인한 폰트
     reshaping 완전 차단. */
  transform: translate3d(0, 8px, 0) rotate(0.001deg);
  transition:
    opacity 260ms ease-out 0ms,
    transform 260ms ease-out 0ms;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  contain: layout paint;
}
.ec__item[data-active="true"] .ec__content {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0.001deg);
  transition:
    opacity 320ms ease-out 400ms,
    transform 320ms ease-out 400ms;
}

.ec__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.75);
  margin: 0;
}
.ec__title {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: #ffffff;
}
.ec__desc {
  font-size: 14px;
  /* Gemini 3차 진단: 3줄 wrap 문단에서만 마지막 줄이 튀는 원인 처방
     - line-height: 정수 픽셀(22px) 로 고정 → 라인 박스 누적 서브픽셀
       오차 방지 (기존 1.5 는 소수점 누적으로 마지막 줄이 1px shift)
     - max-width: ch 대신 정수 px 고정 → 애니메이션 중 폰트 메트릭
       변화로 3번째 줄 wrap 지점이 갱신되는 것 방지
     - text-rendering: geometricPrecision → Blink 의 optimizeLegibility
       텍스트 reshaping(커닝 재계산)을 트랜지션 종료 시점에 차단 */
  line-height: 22px;
  color: rgba(245, 242, 236, 0.85);
  margin: 0;
  max-width: 310px;
  text-wrap: wrap;
  font-optical-sizing: none;
  font-kerning: normal;
  text-rendering: geometricPrecision;
}
.ec__cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #ffffff;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.9;
  transition: gap 200ms ease, opacity 200ms ease;
}
.ec__item[data-active="true"]:hover .ec__cta {
  opacity: 1;
  gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .ec, .ec__img, .ec__content, .ec__spine {
    transition: none !important;
  }
}

@media (max-width: 560px) {
  .biz-title { font-size: clamp(40px, 12vw, 64px); }
}

/* ============================================================
   PANORAMA MODE — .ec--panorama
   ─────────────────────────────────────────────────────────────
   5개 패널이 하나의 파노라마(리우 구아나바라 만)의 좌→우 5-슬라이스를
   각각 표시. 접힌 상태에서 5개가 이어진 풍경 하나처럼 보이고, 하나가
   열리면 해당 슬라이스가 넓어지며 그 지역이 확대되는 느낌.

   ★ 모션과 시각 스타일은 원본 .ec 와 100% 동일하게 유지 ★
     - grid-template-columns 트랜지션 (500ms cubic-bezier), gap, radius
     - 비활성 이미지 = grayscale(1) + scale(1.1)
     - 활성   이미지 = grayscale(0) + scale(1)
     - scrim, spine, content 페이드 로직 동일
   여기선 파노라마 슬라이싱만 CSS 로 얹음:
     - 각 이미지는 자기 패널 폭의 500% 로 렌더 (5개가 이어지면 그리드
       전체 폭). object-fit: cover 로 좌우 여백 없이 슬라이스 채움.
     - slice i (0..4) 는 left: -i*100% 로 파노라마의 i/5..(i+1)/5 구간을
       패널에 노출.
   ============================================================ */
/* 각 이미지는 자기 패널 폭의 500% 로 렌더. slice 별 left 오프셋으로
   좌→우 5조각을 각 패널에 노출. 원본 .ec__img 의 transform/filter
   (grayscale + scale 1.1 확대, 활성 시 컬러 + scale 1) 는 그대로 상속. */
.ec--panorama {
  gap: 2px;
  /* 열림 모션을 더 부드럽게: 800ms + ease-out 계열 이징. */
  transition: grid-template-columns 800ms cubic-bezier(0.16, 1, 0.3, 1),
              grid-template-rows    800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ec--panorama .ec__item {
  border-radius: 0;
}
/* 닫힌 상태(-1) — 5개 패널 균등, 모두 흑백, 활성 없음.
   페이지 첫 진입 & 마우스가 그리드 밖에 있을 때 이 상태. */
.ec--panorama[data-active-index="-1"] {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
@media (max-width: 900px) {
  .ec--panorama[data-active-index="-1"] {
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  }
}
/* ============================================================
   PANORAMA 떨림 해결 (Gemini 진단 기반):
   ─────────────────────────────────────────────────────────────
   [원인]
   1) grid-template-columns 트랜지션은 매 프레임 각 열 폭을 서브픽셀
      계산 후 정수 픽셀로 반올림. 앞 컬럼들의 반올림 잔여 오차가
      마지막 컬럼에 덤핑되어 우측 끝 패널이 유독 심하게 떨림.
   2) 이미지 width: 500% + left: -N% 는 서브픽셀 오차가 5배 증폭 +
      매 프레임 CPU reflow 로 정수 픽셀 스냅 → 이산적 튐 발생.
   [해결]
   1) grid → flex 로 전환. flex 알고리즘은 반올림 오차를 전체 항목에
      균등 분산하므로 마지막 아이템에만 오차가 몰리지 않음.
   2) left: -N% → transform: translate3d(-N%, 0, 0). GPU 셰이더가
      서브픽셀 보간을 처리 → 이산적 튐 대신 부드러운 안티앨리어싱.
   3) contain: layout paint + will-change 힌트로 컴포지팅 격리.
   ============================================================ */
.ec--panorama {
  display: flex !important;
  gap: 2px;
  padding: 0;
  contain: layout paint;
  /* grid 트랜지션은 무의미 (flex 사용). CSS 변수 트랜지션도 제거. */
  transition: none !important;
}
.ec--panorama .ec__item {
  flex: 1 1 0;
  min-width: 0;                       /* flex overflow 방지 */
  height: 100%;
  transition: flex 800ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: flex-grow;
  transform: translateZ(0);           /* 각 패널도 GPU 레이어. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* 활성 패널만 flex: 3, 나머지는 flex: 1 (원래 3fr : 1fr 비율 그대로). */
.ec--panorama .ec__item[data-active="true"] {
  flex: 3 1 0;
}
/* 파노라마 이미지 — left 대신 translate3d 로 GPU 애니메이션. */
.ec--panorama .ec__img,
.ec--panorama .ec__pano {
  transition: filter 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ec--panorama .ec__pano {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 500%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* translate3d 의 % 는 요소 자기 자신 폭 기준. 이미지 폭이 500% 이므로
   1-슬라이스 이동 = 자기 폭의 20% = 부모(li) 폭의 100%. */
.ec--panorama .ec__pano[data-slice="0"] { transform: translate3d(  0%, 0, 0) !important; }
.ec--panorama .ec__pano[data-slice="1"] { transform: translate3d(-20%, 0, 0) !important; }
.ec--panorama .ec__pano[data-slice="2"] { transform: translate3d(-40%, 0, 0) !important; }
.ec--panorama .ec__pano[data-slice="3"] { transform: translate3d(-60%, 0, 0) !important; }
.ec--panorama .ec__pano[data-slice="4"] { transform: translate3d(-80%, 0, 0) !important; }

/* 모바일용 파노라마 슬라이싱은 제거 — 모바일에서는 파노라마 대신
   각 카드 개별 이미지(data-mobile-src)를 사용하도록 JS 가 src 를
   교체하고 ec__pano 클래스도 벗겨냄. 위쪽 (max-width:900px) 블록의
   레이아웃 규칙이 그대로 적용됨. */