/* 개편(mood-A v3) 운영본 — 원본 design/mockups/mood-A/v3/css/cases.css(고객 사례 원통, 메인). 차이 없음 — 시안을 고치면 여기도 같이 */
/* 고객 사례(Deal Done) 원통 넘김 — 메인 · (이전) 서비스 소개 공용. 10-15 사용자: 대표님 피드백 '딜던은 메인으로' — 서비스 소개에서 메인(What We Do 다음)으로 옮기며 services.css에서 떼어 냄.
   각 카드의 자리 · 투명도 계산은 js/cases.js */

/* ── ⑧ 고객 사례(10-01 · 3차) — M&A센터 사례 12건. 카드 = 센터 사례 글 사진 + 왼쪽 위 로고 칸(비공개는 유리 칸) + 아래 검정 유리 캡션(메인 왓위두 타일과 같은 .svc-glass).
   넘김은 Hebbia Max 'max-quotes__stage'(#max-drum-stage) 원통(사용자 'Hebbia처럼 완성도 있게'). 실측(1440): 카드 348×441 · 원근 2000px(767↓ 900px) ·
   카드는 원통 둘레 22°마다 8px 틈(겹치지 않음) · 옆 카드는 크기를 따로 줄이지 않고 원통을 따라 돌아 들어가며 투명도만 낮아진다.
   무대(.cf__stage)는 컨테이너(.wrap 안쪽) 폭으로 잘리고, 원통 양끝(바깥 카드의 바깥 모서리)이 컨테이너 양끝에 닿도록 카드 크기를 화면 폭에 맞춘다
   (사용자 10-01 '원통 무대가 컨테이너 양끝에 맞춰져야' — 1024↑ 두 칸 옆 카드 · 768–1023 한 칸 옆 카드 기준, 767↓는 가운데 카드 + 양옆이 컨테이너 끝에서 잘림).
   각 카드의 자리 · 투명도는 cases.js가 계산한다(움직일 때만 매 프레임). 처음엔 .is-pre로 숨겨 두었다가 화면에 들어오면 돌아 들어온다 ── */
.cs-sec {
  overflow: hidden;
  padding-block: var(--sec-y);
  background: var(--ink);
  color: var(--white);
} /* 10-01 사용자: 검정 섹션 — 옆 카드가 투명도로 물러나면 어둠 속으로 들어가 보인다(Hebbia 어두운 판과 같은 느낌) */
.cs-sec .eyebrow {
  color: rgba(255, 255, 255, 0.7);
} /* 문의 섹션(.cta)과 같은 밝기 */
.cs__head {
  padding-bottom: 32px;
  text-align: center;
}
.cs__sub {
  max-width: 560px;
  margin: 20px auto 0;
  font: 400 15px/1.6 var(--sans);
  color: rgba(255, 255, 255, 0.72);
  text-wrap: balance;
} /* 서브 타이틀 = 동의 안내(10-01 사용자) — 쉼표 뒤에서 두 줄('동의하지 / 않은'처럼 끊기지 않게) */
.cf {
  --cf-w: clamp(240px, 64vw, 360px);
  --cf-h: clamp(340px, 94vw, 456px);
  position: relative;
} /* 768↑에선 cases.js가 원통 양끝이 컨테이너 양끝에 닿는 카드 크기로 바꾼다(사용자 10-01) */
.cf__stage {
  position: relative;
  width: min(100% - var(--gutter) * 2, 1608px);
  height: calc(var(--cf-h) + 48px);
  margin-inline: auto;
  overflow: hidden;
  perspective: 900px;
  perspective-origin: 50% 50%;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.9s ease;
}
.cf.is-pre .cf__stage {
  opacity: 0;
}
.cf__stage.is-drag,
.cf__stage.is-drag * {
  cursor: grabbing !important;
}
.cf__stage:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}
.cf__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
} /* 화면엔 안 보이고 읽기 프로그램에만 — 넘길 때 "3 / 12, 사례 제목" */
.cf__drum {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
} /* 원통 — 반지름만큼 뒤로(translateZ(−R), cases.js) */
.cf__item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cf-w);
  height: var(--cf-h);
  margin: calc(var(--cf-h) / -2) 0 0 calc(var(--cf-w) / -2);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.cs__card {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #111;
  color: var(--white);
  -webkit-user-drag: none;
}
.cs__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.4s var(--expo);
  -webkit-user-drag: none;
}
.cs__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(72% 36% at 100% 0, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0)),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.3) 12%,
      rgba(0, 0, 0, 0) 28%,
      rgba(0, 0, 0, 0) 44%,
      rgba(0, 0, 0, 0.45) 100%
    );
} /* 위 Dim(10-01 사용자: 배지 그림자 대신 카드 위쪽을 어둡게) — 크롬 배지 글자가 밝고 복잡한 사진(냉·온 모듈 공장 등)에서도 읽히게 오른쪽 위를 조금 더 누른다(10-02) / 아래는 캡션 자리를 살짝 눌러 사진과 가른다 */
.cs__who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 22px;
} /* 캡션 첫 줄 = 누구(로고) · 무엇(자문 유형) — 10-01 사용자: 로고는 아래 박스 안, 월계관만 위에 */
.cs__logo {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--white);
  font: 700 calc(15px * max(var(--cf-k, 1), 0.82))/1 var(--sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
} /* 로고 모양 그대로(흰색, 상자 없음) — 로고 파일이 없는 곳은 이름 글자 */
.cs__logo img {
  display: block;
  width: auto;
  height: calc(var(--lh, 16px) * 1.04 * max(var(--cf-k, 1), 0.8));
  filter: invert(1);
} /* 공개 기업 로고(10-01, 공식 사이트 · 사용자 제공 그림에서) — 검정 한 색, 면적이 비슷해 보이게 로고마다 --lh, 카드가 작아지면 함께 줄인다(--cf-k = 카드 폭 ÷ 374, cases.js) */
.cs__badge {
  position: absolute;
  right: calc(16px * var(--cf-k, 1));
  top: calc(16px * var(--cf-k, 1));
  display: grid;
  place-items: center;
  width: calc(96px * max(var(--cf-k, 1), 0.86));
  aspect-ratio: 1;
  pointer-events: none;
} /* 'Deal Done' 원형 월계관(10-02 사용자: 정원형 · 찌그러지지 않게 · 'by Bridgecode'는 뺌 → '크롬 아이콘처럼 고급스럽게'). 월계관은 2D 흰색 — 10-02 사용자 '적어도 이 정도 퀄리티'로 실제 사이트 성과 이미지(contact-awards.png)의 월계관을 그대로 떼어 글자만 지우고 4배 확대(deal-done-laurel.png, 768px). 이전 크롬 PNG · 직접 그린 SVG는 파일만 둠. 정사각 틀이라 늘어나지 않는다 */
.cs__badge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cs__badge-t {
  position: relative;
  top: -5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -0.06em;
  font: 600 calc(16px * max(var(--cf-k, 1), 0.86))/1.02 var(--serif);
  letter-spacing: 0.01em;
} /* 10-02 사용자: 배지 조금 크게 — 84 → 96px, 글자 15 → 16px. 글자는 위로 5%(배지 높이 기준) — 월계관 아래 X자 꼬리 때문에 고리 가운데가 틀 가운데보다 위라 거기에 맞춤(사용자: 더 위로 가야 가운데 느낌) */
.cs__badge-t > span {
  color: var(--white);
} /* 10-02 사용자: 크롬 대신 2D 흰색 — 글자도 흰색 한 가지 */ /* 'Deal / Done' 두 줄 — 줄마다 크롬 글자(위는 밝고 가운데 지평선처럼 한 번 어두워졌다 다시 밝아진다) */
.cs__logo--anon {
  gap: 5px;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
  font-size: calc(13px * max(var(--cf-k, 1), 0.82));
} /* 비공개 — 자물쇠 + 글자, 상자 없이 */
.cs__logo--anon svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}
.cs__cap {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 16px 16px 14px;
}
.cs__type {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0;
  font: 600 14px/1 var(--sans);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
}
.cs__go {
  font-size: 13px;
  opacity: 0;
  translate: -4px 4px;
  transition:
    opacity 0.3s,
    translate 0.45s var(--expo);
}
.cs__cap .tile__glow {
  opacity: 0;
  animation-play-state: paused;
  transition: opacity 0.6s ease;
} /* 테두리를 도는 빛(메인 서비스 카드 .tile__glow — 10-01 사용자) — 가운데 카드 정보 박스에만 */
.cf__item.is-center .cs__cap .tile__glow {
  opacity: 0.85;
  animation-play-state: running;
}
.cs__title {
  margin-top: 12px;
  overflow: hidden;
  font: 400 17px/1.42 var(--serif);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
} /* 제목은 한 줄, 넘치면 …(10-01 사용자) — 전체 제목은 센터 글에서 */
@media (max-width: 767px) {
  .cs__title {
    font-size: 15px;
  }
} /* 휴대폰 카드는 좁아 한 줄에 조금 더 담기게 */
.cs__meta {
  display: grid;
  row-gap: 5px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font: 400 14px/1.4 var(--sans);
} /* 10-02 사용자: 짝수로 조금 크게 — 유형 11 → 12, 업종 · 매출액 12 → 14px */
.cs__meta div {
  display: grid;
  grid-template-columns: 60px 1fr;
  column-gap: 8px;
} /* 14px '매출규모'(10-15 사용자: 매출액 → 매출규모)가 들어가는 이름 칸 — 영문 'Industry' · 'Revenue'도 들어감 */
@media (max-width: 767px) {
  .cs__meta {
    font-size: 12px;
  }
  .cs__meta div {
    grid-template-columns: 52px 1fr;
  }
} /* 휴대폰 카드는 폭이 좁아 12px(짝수) 유지 — 이름 칸 '매출규모' 12px */
.cs__meta dt {
  color: rgba(255, 255, 255, 0.5);
}
.cs__meta dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}
.cf__item:not(.is-center) .cs__card {
  cursor: pointer;
} /* 옆 카드는 누르면 가운데로 */
@media (hover: hover) {
  .cf__item.is-center .cs__card:hover .cs__img {
    scale: 1.05;
  }
  .cf__item.is-center .cs__card:hover .cs__go {
    opacity: 1;
    translate: 0 0;
  }
  .cf__item.is-center .cs__card:hover .cs__cap {
    --glass-fill: rgba(16, 16, 16, 0.42);
  }
}
.cs__card:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.cs__cta {
  display: flex;
  justify-content: center;
  margin-top: 16px;
} /* 화살표 · 번호 줄 자리 — 원통 바로 아래 가운데 버튼(10-01 사용자) */
.cs-sec .btn {
  --btn-ink: var(--white);
  --btn-paper: var(--ink);
}
.cs__cta .btn span {
  margin-left: 5px;
} /* 외부 링크 ↗ — 문의 섹션 버튼(.cta__path .btn span)과 같은 간격 */ /* 검정 바탕 버튼: 호버 때 흰 판이 채워지고 글자는 검정(.cta .btn과 같음) */
@media (prefers-reduced-motion: reduce) {
  .cs__img,
  .cs__go,
  .cf__stage {
    transition: none;
  }
}
@media (min-width: 768px) {
  .cs__head {
    padding-bottom: 48px;
  }
  .cf__stage {
    perspective: 2000px;
  }
  .cs__sub {
    font-size: 16px;
  }
  @media (min-width: 1280px) {
    .cs__sub {
      max-width: 640px;
      font-size: 18px;
    }
  } /* 10-02 같은 위계(섹션 서브 문구) — 18px */
  .cs__cta {
    margin-top: 24px;
  }
}
@media (min-width: 1280px) {
  .cs__title {
    font-size: 18px;
  }
}

/* 영문(10-15 서비스 소개 영문 CSS에서 옮김 — 고객 사례가 메인으로 와서 home.en이 services-en.css를 읽지 않음)
   캡션 첫 줄(로고 · 자문 유형): 'Cross-border Acquisition'처럼 긴 영문 유형이 좁은 카드에서 로고 칸을 밀지 않게 — 로고는 줄지 않고, 유형이 줄어 필요하면 두 줄(오른쪽 맞춤) */
html[lang='en'] .cs__logo,
html[lang='en'] .cs__logo--anon svg {
  flex-shrink: 0;
}
html[lang='en'] .cs__type {
  flex-shrink: 1;
  min-width: 0;
  justify-content: flex-end;
  text-align: right;
  line-height: 1.2;
}