/* 서비스 소개 전용 (design/direction/services.md v0.2)
   회사 소개와 같은 부품을 our-firm.css에서 재사용: 히어로(.fhero · 흐르는 세로선) · 라인 모션(.eline, data-elines) · 머리 정렬(.value__head 1/7 · .value__sub 7/13).
   글래스 카드는 style.css 공통 레시피(.svc-glass). 섹션 색: ① 검정(영상) ② 흰 ③ 검정(영상+글래스) ④ 흰 ⑤ 검정 ⑥ 흰 ⑦ 검정(영상) */

.on-light {
  background: var(--white);
  color: var(--ink);
}
.on-light .value__sub {
  color: var(--muted);
}
.svc-scope section {
  scroll-margin-top: var(--hdr-h);
} /* 히어로 바로가기로 이동할 때 헤더 아래에서 섹션이 시작되게(서비스 탭은 9-29 제거) */

/* 태그(현행 전문 용어) — 작고 가는 테두리, 바탕색을 따라 흑/백 */
.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}
.svc-tags li {
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  color: color-mix(in srgb, currentColor 78%, transparent);
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ① Hero — 세 서비스 바로가기 */
.svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}
.svc-chips a {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  color: var(--white);
  font: 500 14px/1 var(--sans);
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.svc-chips a:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}
@media (min-width: 1280px) {
  .svc-chips {
    margin-top: 32px;
  }
  .svc-chips a {
    padding: 12px 18px;
    font-size: 15px;
  }
}

/* ② 무엇이 다른가 — 줄마다 영역 / 일반적인 방식(회색) / 브릿지코드(검정). 1280↑ 1/4 · 4/7 · 7/13(브릿지코드 열 = 위 서브 문구 선) */
.cmp__cols {
  display: none;
}
.cmp__list {
  margin-top: 32px;
  padding: 0;
  list-style: none;
}
.cmp__row {
  position: relative;
  padding-block: 24px;
}
.cmp__row:last-child {
  padding-bottom: 0;
}
.cmp__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 22px/1.3 var(--serif);
  letter-spacing: -0.01em;
}
.cmp__index {
  flex: 0 0 auto;
  padding-top: 0.45em;
  font: 400 13px/1 var(--sans);
  color: var(--muted);
}
.cmp__old {
  margin-top: 14px;
  font: 400 15px/1.6 var(--sans);
  color: rgb(10 10 10 / var(--inactive));
}
.cmp__new {
  margin-top: 10px;
  font: 500 16px/1.6 var(--sans);
}
.cmp__tag {
  display: block;
  margin-bottom: 2px;
  font: 600 11px/1.4 var(--sans);
  letter-spacing: 0.06em;
  color: var(--muted);
}
@media (min-width: 768px) {
  .cmp__cols,
  .cmp__row {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .cmp__cols {
    margin-top: 48px;
    padding-bottom: 14px;
    font: 600 12px/1 var(--sans);
    letter-spacing: 0.06em;
    color: var(--muted);
  }
  .cmp__cols span:first-child {
    grid-column: 3 / 5;
  }
  .cmp__cols span:last-child {
    grid-column: 5 / 9;
    color: var(--ink);
  }
  .cmp__list {
    margin-top: 0;
  }
  .cmp__row {
    align-items: start;
    padding-block: 32px;
  }
  .cmp__label {
    grid-column: 1 / 3;
  }
  .cmp__old {
    grid-column: 3 / 5;
    margin-top: 0;
  }
  .cmp__new {
    grid-column: 5 / 9;
    margin-top: 0;
  }
  .cmp__tag {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  } /* 열 제목이 보이는 폭 — 화면 낭독기용으로만 남김 */
}
@media (min-width: 1280px) {
  .cmp__cols,
  .cmp__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .cmp__cols {
    margin-top: 64px;
  }
  .cmp__cols span:first-child {
    grid-column: 4 / 7;
  }
  .cmp__cols span:last-child {
    grid-column: 7 / 13;
  }
  .cmp__row {
    padding-block: 40px;
  }
  .cmp__label {
    grid-column: 1 / 4;
    font-size: 26px;
  }
  .cmp__old {
    grid-column: 4 / 7;
    font-size: 16px;
  }
  .cmp__new {
    grid-column: 7 / 13;
    font-size: 18px;
    max-width: 34em;
  }
}

/* ③ 서비스 한눈에 — 거래 전(Finance) → 거래(M&A 자문), 아래 전 구간 층(M&A AX). 영상 위 글래스 카드 */
.flow {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.flow__bg {
  position: absolute;
  inset: 0;
}
.flow__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6) saturate(0.85);
}
.flow__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.88) 0%,
    rgba(10, 10, 10, 0.35) 38%,
    rgba(10, 10, 10, 0.45) 72%,
    rgba(10, 10, 10, 0.92) 100%
  );
}
.flow__inner {
  position: relative;
  z-index: 1;
}
.flow .value__sub {
  color: rgba(255, 255, 255, 0.72);
}
.flow__map {
  display: grid;
  row-gap: 20px;
  margin-top: 40px;
}
.flow__stage {
  position: relative;
  display: flex;
  flex-direction: column;
}
.flow__when {
  margin-bottom: 10px;
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
}
.flow__card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  color: var(--white);
  transition: transform 0.5s var(--expo);
}
.flow__card:hover {
  --glass-fill: rgba(30, 30, 30, 0.46);
}
.flow__name {
  font: 400 26px/1.25 var(--serif);
  letter-spacing: -0.01em;
}
.flow__lead {
  margin-top: 8px;
  font: 600 15px/1.4 var(--sans);
}
.flow__text {
  margin-top: 8px;
  font: 400 15px/1.65 var(--sans);
  color: rgba(255, 255, 255, 0.74);
}
.flow__go {
  margin-top: auto;
  padding-top: 22px;
  font: 500 14px/1 var(--sans);
}
.flow__go span {
  display: inline-block;
  transition: transform 0.4s var(--expo);
}
.flow__card:hover .flow__go span {
  transform: translateY(3px);
}
@media (min-width: 768px) {
  .flow__map {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: 28px;
    margin-top: 48px;
  }
  .flow__stage--pre {
    grid-column: 1 / 4;
  }
  .flow__stage--deal {
    grid-column: 4 / 9;
  }
  .flow__stage--base {
    grid-column: 1 / -1;
  }
  .flow__stage--deal::before {
    content: '';
    position: absolute;
    top: calc(50% + 11px);
    left: calc(var(--gap) * -1);
    width: var(--gap);
    height: 1px;
    background: rgba(255, 255, 255, 0.55);
  } /* 거래 전 → 거래 연결선 */
  .flow__card {
    padding: 28px;
  }
}
@media (min-width: 1280px) {
  .flow__map {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin-top: 64px;
  }
  .flow__stage--pre {
    grid-column: 1 / 5;
  }
  .flow__stage--deal {
    grid-column: 5 / 13;
  }
  .flow__card {
    padding: 36px;
  }
  .flow__name {
    font-size: 30px;
  }
  .flow__card--ax {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
  } /* 전 구간 층 — 이름·한 줄 / 설명·태그 */
  .flow__card--ax .flow__name,
  .flow__card--ax .flow__lead {
    grid-column: 1;
  }
  .flow__card--ax .flow__text,
  .flow__card--ax .svc-tags {
    grid-column: 2;
  }
  .flow__card--ax .flow__text {
    grid-row: 1;
    margin-top: 6px;
  }
  .flow__card--ax .svc-tags {
    grid-row: 2;
  }
  .flow__card--ax .flow__go {
    grid-column: 1;
    grid-row: 3;
  }
}

/* ④–⑥ 서비스 탭 — 헤더 아래 고정(.svc-scope 안에서만), 지금 보는 서비스에 밑줄 */
.svc-tabs {
  position: sticky;
  top: var(--hdr-h);
  z-index: 30;
  background: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.svc-tabs__inner {
  display: flex;
  align-items: stretch;
  gap: 24px;
  height: 52px;
  overflow-x: auto;
  scrollbar-width: none;
}
.svc-tabs__inner::-webkit-scrollbar {
  display: none;
}
.svc-tabs a {
  position: relative;
  display: flex;
  align-items: center;
  color: rgb(10 10 10 / var(--inactive));
  font: 500 15px/1 var(--sans);
  white-space: nowrap;
  transition: color 0.25s;
}
.svc-tabs a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--expo);
}
.svc-tabs a:hover,
.svc-tabs a[aria-current='true'] {
  color: var(--ink);
}
.svc-tabs a[aria-current='true']::after {
  transform: scaleX(1);
}
@media (min-width: 1280px) {
  .svc-tabs__inner {
    gap: 36px;
  }
}

/* ④ M&A 자문 — 좌 고정(헤드·서브·이런 고민이라면) / 우 5단계(라인 모션) / 아래 근거 */
.adv__inner {
  row-gap: 40px;
  align-items: start;
}
.adv .adv__sub {
  margin-top: 20px;
}
.adv__need-h {
  margin-top: 32px;
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.adv__needs {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}
.adv__needs li {
  position: relative;
  padding-left: 20px;
  font: 500 16px/1.5 var(--sans);
}
.adv__needs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 1px;
  background: currentColor;
}
.adv__steps {
  padding: 0;
  list-style: none;
}
.adv__step {
  position: relative;
  padding-block: 28px;
}
.adv__step:first-child {
  padding-top: 24px;
}
.adv__step:last-child {
  padding-bottom: 0;
}
.adv__title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 400 24px/1.3 var(--serif);
  letter-spacing: -0.01em;
}
.adv__index {
  flex: 0 0 auto;
  padding-top: 0.5em;
  font: 400 13px/1 var(--sans);
  color: var(--muted);
}
.adv__text {
  max-width: 36em;
  margin-top: 10px;
  font: 400 16px/1.7 var(--sans);
  color: #333;
}
.adv__proof {
  display: grid;
  row-gap: 24px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.adv__proof dt {
  font: 500 13px/1.4 var(--sans);
  color: var(--muted);
}
.adv__proof dd {
  margin-top: 8px;
  font: 400 32px/1.1 var(--serif);
  letter-spacing: -0.01em;
}
.adv__asof {
  margin-top: 16px;
  font: 400 12px/1 var(--sans);
  color: var(--muted);
}
@media (min-width: 768px) {
  .adv__aside {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(var(--hdr-h) + 84px);
  }
  .adv__steps {
    grid-column: 5 / 9;
  }
  .adv__proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
    margin-top: 72px;
  }
  .adv__asof {
    text-align: right;
  }
}
@media (min-width: 1280px) {
  .adv__aside {
    grid-column: 1 / 6;
  }
  .adv__steps {
    grid-column: 7 / 13;
  }
  .adv__step {
    padding-block: 36px;
  }
  .adv__title {
    font-size: 28px;
  }
  .adv__proof {
    margin-top: 96px;
  }
  .adv__proof dd {
    font-size: 44px;
  }
}

/* ⑤ M&A AX — 역할 나누기(AX가 하는 일 · AX 트리 · 자문역이 하는 일) + 도구 3장(글래스) + 수치 */
.axs {
  background:
    radial-gradient(ellipse 70% 45% at 50% 78%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%), var(--ink);
  color: var(--white);
}
.axs .value__sub {
  color: rgba(255, 255, 255, 0.72);
}
.axs__roles {
  display: grid;
  row-gap: 32px;
  margin-top: 40px;
  align-items: center;
}
.axs__who {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-dark);
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.64);
}
.axs__col ul {
  padding: 0;
  list-style: none;
}
.axs__col li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font: 400 18px/1.4 var(--serif);
  letter-spacing: -0.01em;
}
.axs__tree {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  justify-self: center;
  overflow: hidden;
  background: var(--ink);
}
.axs__tree img,
.axs__tree canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.axs__tree img {
  object-fit: cover;
}
.axs__tools {
  display: grid;
  row-gap: 16px;
  margin-top: 56px;
  padding: 0;
  list-style: none;
}
.axs__tool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
}
.axs__tool-title {
  font: 400 24px/1.3 var(--serif);
  letter-spacing: -0.01em;
}
.axs__tool-text {
  margin-top: 10px;
  font: 400 15px/1.7 var(--sans);
  color: rgba(255, 255, 255, 0.74);
}
.axs__gain {
  align-self: stretch;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line-dark);
  font: 500 15px/1.5 var(--sans);
}
.axs__gain span {
  display: block;
  margin-bottom: 4px;
  font: 600 11px/1.4 var(--sans);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
}
.axs__link {
  margin-top: auto;
  padding-top: 18px;
  font: 500 14px/1 var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.axs__nums {
  display: grid;
  row-gap: 24px;
  margin-top: 48px;
}
.axs__nums dt {
  font: 500 13px/1.4 var(--sans);
  color: rgba(255, 255, 255, 0.64);
}
.axs__nums dd {
  margin-top: 6px;
  font: 400 40px/1.1 var(--serif);
  letter-spacing: -0.01em;
}
.axs__asof {
  align-self: end;
  font: 400 12px/1 var(--sans);
  color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 768px) {
  .axs__roles {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap);
    margin-top: 48px;
  }
  .axs__tree {
    grid-column: 2 / 8;
    grid-row: 1;
  }
  .axs__col--ax {
    grid-column: 1 / 5;
    grid-row: 2;
  }
  .axs__col--people {
    grid-column: 5 / 9;
    grid-row: 2;
  }
  .axs__tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .axs__tool {
    padding: 28px;
  }
  .axs__nums {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}
@media (min-width: 1280px) {
  .axs__roles {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin-top: 64px;
  }
  .axs__col--ax {
    grid-column: 1 / 5;
    grid-row: 1;
  }
  .axs__tree {
    grid-column: 5 / 9;
    grid-row: 1;
    max-width: none;
  }
  .axs__col--people {
    grid-column: 9 / 13;
    grid-row: 1;
  }
  .axs__col li {
    font-size: 20px;
  }
  .axs__tools {
    margin-top: 80px;
  }
  .axs__tool {
    min-height: 320px;
    padding: 36px;
  }
  .axs__tool-title {
    font-size: 28px;
  }
  .axs__nums dd {
    font-size: 48px;
  }
}

/* ⑥ Finance 자문 — 밸류업 6묶음, 칸 사이 1px 선(Hg 격자). 768–1279 2열 · 1280↑ 3열 */
.fin__grid {
  display: grid;
  margin-top: 40px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.fin__cell {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.fin__title {
  font: 400 22px/1.3 var(--serif);
  letter-spacing: -0.01em;
}
.fin__text {
  margin-top: 10px;
  font: 400 15px/1.7 var(--sans);
  color: #333;
}
@media (min-width: 768px) and (max-width: 1279px) {
  .fin__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 48px;
  }
  .fin__cell {
    padding: 32px;
    border-left: 1px solid var(--line);
  }
  .fin__cell:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .fin__cell:nth-child(even) {
    padding-right: 0;
  }
}
@media (min-width: 1280px) {
  .fin__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 64px;
  }
  .fin__cell {
    padding: 40px;
    border-left: 1px solid var(--line);
  }
  .fin__cell:nth-child(3n + 1) {
    border-left: 0;
    padding-left: 0;
  }
  .fin__cell:nth-child(3n) {
    padding-right: 0;
  }
  .fin__title {
    font-size: 26px;
  }
  .fin__text {
    font-size: 16px;
  }
}

/* ⑦ 문의 — 두 갈래 */
.cta__paths {
  display: grid;
  row-gap: 28px;
  justify-items: center;
  margin-top: 40px;
}
.cta__path p {
  font: 400 15px/1.5 var(--sans);
  color: rgba(255, 255, 255, 0.78);
}
.cta__path .btn {
  margin-top: 14px;
}
.cta__path .btn span {
  margin-left: 5px;
} /* 외부 링크 ↗ — 버튼(flex) 안에서 공백이 사라져 붙어 보이던 것 */
@media (min-width: 768px) {
  .cta__paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow__card,
  .flow__go span,
  .svc-tabs a::after {
    transition: none;
  }
}

/* ── ③ What We Do 비교안 (9-29) ─────────────────────────────────────────────────────────── */
/* 비교용 표시 — 확정 시 삭제 */
.wwda,
.wwdb {
  position: relative;
}
.wwdb {
  border-top: 1px dashed var(--line);
}
.cmp-tag {
  position: absolute;
  z-index: 40;
  top: 12px;
  right: var(--gutter);
  padding: 6px 10px;
  background: var(--ink);
  color: var(--white);
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.02em;
}

/* A안 — Hebbia featureScroller: 카드가 헤더 아래(+16px)에 고정되며 쌓인다. 카드마다 --i × 48px 아래로 비켜 앞 카드의 머리(번호·단계)가 남는다.
   카드 = 왼쪽 글(위 머리 · 아래 이름·설명·태그) + 오른쪽 사진(8px 안쪽). 흑백 팔레트: 밝은 회색 → 회색 → 검정(M&A AX) */
.wwda {
  padding-bottom: 0;
}
.deck {
  --peek: 44px;
  --n: 3;
  position: relative;
  margin-top: 40px;
  padding-bottom: calc((var(--n) - 1) * var(--peek) + 10svh);
}
.deck__card {
  position: sticky;
  top: calc(var(--hdr-h) + 12px);
  z-index: calc(var(--i) + 1);
  translate: 0 calc(var(--i) * var(--peek));
  display: grid;
  grid-template-rows: auto 1fr;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--card-bg);
  color: var(--card-fg);
}
.deck__card--1 {
  --card-bg: #efefef;
  --card-fg: var(--ink);
}
.deck__card--2 {
  --card-bg: #e2e2e2;
  --card-fg: var(--ink);
}
.deck__card--3 {
  --card-bg: #141414;
  --card-fg: var(--white);
}
.deck__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 14px 20px 28px;
}
.deck__eyebrow {
  font: 600 13px/16px var(--sans);
  letter-spacing: 0.06em;
}
.deck__name {
  font: 400 34px/1.15 var(--serif);
  letter-spacing: -0.015em;
}
.deck__lead {
  margin-top: 12px;
  font: 600 16px/1.4 var(--sans);
}
.deck__desc {
  max-width: 30em;
  margin-top: 6px;
  font: 400 15px/1.7 var(--sans);
  color: color-mix(in srgb, currentColor 72%, transparent);
}
.deck__go {
  display: inline-block;
  margin-top: 20px;
  font: 500 14px/1 var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.deck__visual {
  position: relative;
  order: -1;
  height: 200px;
  margin: 8px 8px 0;
  overflow: hidden;
  background: #cfcfcf;
}
.deck__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--expo);
}
.deck__card:hover .deck__visual img {
  transform: scale(1.03);
}
/* <768: 머리(번호·단계)를 맨 위에 두어 쌓였을 때 남는 띠가 사진이 아니라 머리가 되게 — 머리 → 사진 → 이름·설명 */
@media (max-width: 767px) {
  .deck__card {
    display: flex;
    flex-direction: column;
  }
  .deck__text {
    display: contents;
  }
  .deck__eyebrow {
    order: 0;
    padding: 13px 20px 13px;
  }
  .deck__visual {
    order: 1;
    margin: 0 8px;
  }
  .deck__lockup {
    order: 2;
    padding: 20px 20px 28px;
  }
}
@media (min-width: 768px) {
  .deck {
    --peek: 48px;
    margin-top: 56px;
  }
  .deck__card {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    height: clamp(460px, calc(100svh - var(--hdr-h) - 24px - (var(--n) - 1) * var(--peek) - 40px), 600px);
  }
  .deck__visual {
    order: 0;
    height: auto;
    margin: 8px 8px 8px 0;
  }
  .deck__text {
    padding: 16px 28px 36px;
  }
  .deck__name {
    font-size: clamp(40px, 3.6vw, 56px);
  }
  .deck__desc {
    font-size: 16px;
  }
}
@media (min-width: 1280px) {
  .deck {
    margin-top: 72px;
  }
}

/* B안 — Clear Street services: 패널(헤더 아래 고정, 높이 = 화면 − 헤더 − 64px)이 차례로 올라와 앞 패널을 덮는다 → 다음 패널 머리줄 64px이 늘 아래에 보여 넘길 게 있음을 알린다.
   패널 = 흰 머리줄(번호 1/3 · 이름 3/10 · 자세히 보기) + 전면 사진(어둡게) 위 설명(이름과 같은 선, 흰 글씨) */
.wwdb {
  padding-bottom: 0;
}
.panels {
  position: relative;
  margin-top: 40px;
}
.panel {
  --bar: 88px;
  position: sticky;
  top: var(--hdr-h);
  z-index: calc(var(--i) + 1);
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--hdr-h) - 56px);
  min-height: 520px;
  background: var(--ink);
}
.panel:last-child {
  height: calc(100svh - var(--hdr-h));
}
.panel__bar {
  flex: 0 0 var(--bar);
  background: var(--white);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.panel__bar-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  height: 100%;
}
.panel__index {
  font: 500 13px/1 var(--sans);
  color: var(--muted);
}
.panel__name {
  font: 400 28px/1.15 var(--serif);
  letter-spacing: -0.015em;
}
.panel__btn {
  justify-self: end;
}
.panel__media {
  position: relative;
  flex: 1;
  overflow: hidden;
  color: var(--white);
}
.panel__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.panel__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.32) 45%, rgba(10, 10, 10, 0.5) 100%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0) 60%);
} /* 설명 글씨가 사진 위에서 읽히게 — 위·왼쪽을 어둡게 */
.panel__copy {
  position: relative;
  z-index: 1;
  padding-top: 28px;
}
.panel__when {
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
}
.panel__lead {
  margin-top: 12px;
  font: 600 17px/1.4 var(--sans);
}
.panel__desc {
  max-width: 30em;
  margin-top: 8px;
  font: 400 16px/1.7 var(--sans);
  color: rgba(255, 255, 255, 0.84);
}
@media (max-width: 767px) {
  .panel__btn {
    display: none;
  }
  .panel__bar-in {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
@media (min-width: 768px) {
  .panels {
    margin-top: 56px;
  }
  .panel {
    --bar: 104px;
    height: calc(100svh - var(--hdr-h) - 64px);
  }
  .panel__bar-in {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .panel__index {
    grid-column: 1 / 2;
  }
  .panel__name {
    grid-column: 2 / 7;
    font-size: 38px;
  }
  .panel__btn {
    grid-column: 7 / 9;
  }
  .panel__copy {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap);
    padding-top: 36px;
  }
  .panel__copy > * {
    grid-column: 2 / 6;
  }
}
@media (min-width: 1280px) {
  .panels {
    margin-top: 72px;
  }
  .panel {
    --bar: 116px;
  }
  .panel__bar-in,
  .panel__copy {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .panel__index {
    grid-column: 1 / 3;
  }
  .panel__name {
    grid-column: 3 / 10;
    font-size: 46px;
  }
  .panel__btn {
    grid-column: 10 / 13;
  }
  .panel__copy > * {
    grid-column: 3 / 8;
  }
  .panel__lead {
    font-size: 18px;
  }
  .panel__desc {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .deck__card,
  .panel {
    position: relative;
    top: auto;
    translate: none;
  }
  .deck {
    padding-bottom: 0;
  }
}

/* ① Hero 이미지(9-29: 영상 대신) — 사람이 오른쪽에 있어 좁은 화면에서도 보이게 오른쪽 기준으로 자름 */
.svc-hero .fhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  filter: brightness(0.86);
} /* 9-29: 업체사진8 — 발표자 · 앉은 사람 얼굴이 잘리지 않게 위쪽 기준, 흰 배경 눈부심만 살짝 낮춤(색은 그대로) */
.svc-hero .fhero__media::after {
  background:
    linear-gradient(90deg, rgba(4, 6, 14, 0.6) 0%, rgba(4, 6, 14, 0.2) 40%, rgba(4, 6, 14, 0) 65%),
    linear-gradient(
      180deg,
      rgba(4, 6, 14, 0.62) 0%,
      rgba(4, 6, 14, 0.12) 26%,
      rgba(4, 6, 14, 0) 42%,
      rgba(4, 6, 14, 0.18) 62%,
      rgba(4, 6, 14, 0.8) 100%
    );
} /* 밝은 사진이라 위(메뉴 글자)와 왼쪽 아래(제목)를 더 누름 */
@media (max-width: 767px) {
  .svc-hero .fhero__media img {
    object-position: 38% 30%;
  }
} /* 좁은 화면 — 발표자와 앞사람 정장이 보이게 */

/* ── ④⑤ 서비스(9-29 3차) — Applied Intuition 제품 페이지 형식: 머리(제목 · 설명) + 가로 카드 줄(사진 위에 글) + 근거 수치.
   9-29 4차: 칸 사이 1px 격자선은 브릿지코드 톤에 없어 뺐다. 9-29 5차: 점 없이 화살표만 — 자동으로 흐르는 마키는 읽는 중에 카드가 움직여 불편하다는 의견으로 되돌림.
   넘기기: 화살표(한 장씩) · 트랙패드/손가락 가로 스크롤(스냅). 끝에 닿으면 그쪽 화살표 흐리게, 다 보이는 줄(넓은 화면의 M&A AX 3장)은 화살표를 숨기고 폭을 나눠 채운다.
   카드 = 단계 이름 · 고객이 얻는 도움(큰 세리프) · 브릿지코드의 방식 한 줄(유리 판) · 용어 태그 ── */
.svx {
  --edge: max(var(--gutter), calc((100% - 1608px) / 2));
  --cell-w: 84vw;
  padding-block: var(--sec-y);
} /* 10-08: 위아래 여백은 사이트 공통(64 · 80 · 88) */ /* --edge: .wrap 글 시작선과 같은 자리 */
.svx--dark {
  background: #050505;
  color: var(--white);
}
.svx__head {
  display: grid;
  row-gap: 20px;
  padding-bottom: 36px;
}
.svx__nav {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
} /* 머리 오른쪽 아래 — 제목 옆 설명은 9-29에 뺐다 */
.svx.is-static .svx__nav {
  display: none;
}
.svx__arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.svx__arrow svg {
  width: 30px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: translate 0.35s var(--expo);
}
.svx__arrow:disabled {
  opacity: var(--inactive);
  cursor: default;
}
.svx__arrow--prev:not(:disabled):hover svg {
  translate: -4px 0;
}
.svx__arrow--next:not(:disabled):hover svg {
  translate: 4px 0;
}
.svx__arrow:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.svx__track {
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 0 var(--edge);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
} /* 목록이 곧 가로 스크롤 띠(끝 여백까지 스크롤) */
.svx__track::-webkit-scrollbar {
  display: none;
}
.svx__track:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.svx__cell {
  flex: 1 0 var(--cell-w);
  scroll-snap-align: start;
}
.svx__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 470px;
  padding: 24px 20px 20px;
  overflow: hidden;
  isolation: isolate;
  background: #111;
  color: var(--white);
}
.svx__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
  transition:
    scale 1.4s var(--expo),
    filter 0.6s ease;
} /* 컬러 그대로(9-29 5차), 글이 읽히게 살짝만 어둡게 */
.svx__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.66) 0%,
    rgba(0, 0, 0, 0.2) 40%,
    rgba(0, 0, 0, 0) 58%,
    rgba(0, 0, 0, 0.3) 100%
  );
}
@media (hover: hover) {
  .svx__card:hover .svx__img {
    scale: 1.05;
    filter: brightness(0.9);
  }
}
.svx__img--video {
  filter: none;
}
.svx--dark .svx__panel {
  min-height: 0;
} /* M&A AX 설명은 한 줄(9-29) — 두 줄 기본 높이를 풀고 줄마다 가장 긴 판에 맞춤(services.js) */ /* M&A AX 카드 영상(9-29, candidates/ax-match · ax-vdr · ax-deallist) — 위·아래를 영상 안에서 어둡게 만들어 두어 따로 누르지 않음 */
@media (hover: hover) {
  .svx--dark .svx__card:hover .svx__img {
    scale: none;
    filter: none;
  }
} /* M&A AX 카드는 호버 효과 없음(9-29 사용자) */
.svx--dark .svx__card::before {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.32) 30%,
    rgba(0, 0, 0, 0) 44%,
    rgba(0, 0, 0, 0) 70%,
    rgba(0, 0, 0, 0.35) 100%
  );
} /* 제목 자리를 조금 더 눌러 영상과 글을 가른다 */
a.svx__card {
  color: var(--white);
} /* 카드 전체가 링크(딜리스트) — 호버 시 사진 확대가 누를 수 있다는 신호 */
a.svx__card:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -4px;
}
.svx__step {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font: 500 16px/1.3 var(--sans);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9);
} /* 9-29: 14 → 16/17/18px(사용자) — 좁으면 영문이 다음 줄로 */
.svx__index {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}
.svx__en {
  margin-left: auto;
  padding-left: 12px;
  font: 400 13px/1.3 var(--sans);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
} /* 영문 단계명(실무 용어) — 카드 오른쪽 위 */
.svx__asof {
  display: block;
  margin-top: 8px;
  font: 400 12px/1.4 var(--sans);
  color: rgba(255, 255, 255, 0.55);
} /* 바뀌는 수치의 기준일(대표님 9-17 규칙) — 설명 줄 아래 작게 */
.svx__title {
  margin-top: 16px;
  font: 400 26px/1.3 var(--serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
  word-break: keep-all;
}
.svx__panel {
  --glass-fill: rgba(10, 10, 10, 0.5);
  position: relative;
  margin-top: auto;
  padding: 18px 18px 20px;
  min-height: calc(15px * 1.6 * 2 + 38px);
} /* 높이는 줄마다 가장 긴 판에 맞춘다(services.js), 기본은 글 두 줄 */ /* 밝은 컬러 사진 위에서도 글이 읽히게 판을 조금 더 어둡게 */
.svx__how {
  margin: 0;
  font: 400 16px/1.6 var(--sans);
  color: rgba(255, 255, 255, 0.95);
  text-wrap: pretty;
  word-break: keep-all;
}
.svx__qa {
  margin: 0;
}
.svx__qa > div + div {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.svx__qa dt {
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}
.svx__qa dd {
  margin: 8px 0 0;
  font: 400 14px/1.62 var(--sans);
  color: rgba(255, 255, 255, 0.94);
  text-wrap: pretty;
}
.svx__link {
  display: inline-flex;
  gap: 6px;
  margin-top: 16px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  font: 500 14px/1 var(--sans);
  color: var(--white);
  transition: border-color 0.2s;
}
.svx__link:hover {
  border-color: var(--white);
}
.svx__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  padding-top: 44px;
}
.svx__proof {
  display: grid;
  gap: 20px;
  margin: 0;
}
.svx__proof dt {
  font: 500 13px/1.4 var(--sans);
  color: var(--muted);
}
.svx__proof dd {
  margin: 6px 0 0;
  font: 400 26px/1.2 var(--serif);
  letter-spacing: -0.02em;
}
.svx--dark .svx__proof dt,
.svx--dark .svx__asof {
  color: rgba(255, 255, 255, 0.6);
}
.svx__asof {
  font: 400 12px/1 var(--sans);
  color: var(--muted);
}
@media (min-width: 768px) {
  .svx {
    --cell-w: 46vw;
  }
  .svx__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
    padding-bottom: 44px;
  }
  .svx__intro {
    grid-column: 1 / 8;
  }
  .svx__side {
    grid-column: 8 / 13;
  }
  .svx__card {
    min-height: 540px;
    padding: 28px 24px 24px;
  }
  .svx__step {
    font-size: 17px;
  }
  .svx__en {
    font-size: 14px;
  }
  .svx__title {
    font-size: 30px;
  }
  .svx__proof {
    grid-auto-flow: column;
    column-gap: 56px;
  }
}
@media (min-width: 1280px) {
  .svx {
    --cell-w: clamp(340px, 25.5vw, 440px);
  }
  .svx__intro {
    grid-column: 1 / 7;
  }
  .svx__card {
    min-height: clamp(520px, 38vw, 600px);
  }
  .svx__step {
    font-size: 18px;
  }
  .svx__title {
    font-size: clamp(28px, 2.1vw, 32px);
  }
  .svx__proof dd {
    font-size: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .svx__img,
  .svx__arrow svg {
    transition: none;
  }
}

/* ── ④ M&A 자문 펼침형(9-29 사용자 선택 — 캐러셀 A안 대신, Optiver What we do 'Five ways' 방식) ──
   한 줄에 여섯 기둥, 한 칸만 넓게 열린다. 9-29 2차: 메인 What We Do 타일(.tile)과 같은 문법으로 —
   펼침은 메인 타일과 같은 expo 곡선(0.8초), 열린 칸의 글은 단계 이름 → 제목 → 유리 판 순으로 떠오르고, 유리 판 테두리에는 메인 타일의 도는 빛(.tile__glow),
   호버하면 판이 4px 떠오른다. 접힌 기둥의 흐르는 빛 모션은 9-29에 시도했다가 뺐다(사용자) — 올리는 순간 밝아지고 번호·이름이 뜨는 반응만.
   열린 칸의 글은 열린 폭으로 미리 고정(컨테이너 단위)해 펼쳐지는 동안 다시 흐르지 않는다. <768은 세로 아코디언 */
.sacc-sec {
  position: relative;
}
.sacc {
  --n: 6;
  --closed: 64px;
  --sacc-gap: 8px;
  --sacc-ease: var(--expo);
  display: flex;
  flex-direction: column;
  gap: var(--sacc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  container-type: inline-size;
}
.sacc__item {
  position: relative;
  height: var(--closed);
  overflow: hidden;
  isolation: isolate;
  background: #111;
  color: var(--white);
  transition: height 0.8s var(--sacc-ease);
}
.sacc__item.is-open {
  height: 460px;
}
.sacc__item:nth-child(2) {
  --i: 1;
}
.sacc__item:nth-child(3) {
  --i: 2;
}
.sacc__item:nth-child(4) {
  --i: 3;
}
.sacc__item:nth-child(5) {
  --i: 4;
}
.sacc__item:nth-child(6) {
  --i: 5;
}
.sacc__img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
  width: 100%;
  height: 460px;
  object-fit: cover;
  filter: brightness(0.4);
  transition: filter 0.8s ease;
  -webkit-user-drag: none;
} /* 10-02 사용자: 펼칠 때 확대 없이 — 사진은 '다 펼친 크기'로 고정해 두고 칸이 커지는 만큼 드러난다(세로 펼침 = 위에서 아래로) */
.sacc__item.is-open .sacc__img {
  filter: brightness(0.94) saturate(1.06);
} /* 10-02 사용자: 흑백에 가깝게 죽이지 말 것 — 펼친 칸은 사진 색을 거의 그대로(글자 자리는 아래 그라데이션이 맡음) */
.sacc__item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(8, 8, 8, 0.8); /* 접힌 면은 어둡게 — 사진은 희미한 결로만(9-29 사용자) */
  transition:
    background-color 0.6s ease,
    opacity 0.6s ease;
}
.sacc__item.is-open::before {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.12) 34%,
    rgba(10, 10, 10, 0.03) 55%,
    rgba(10, 10, 10, 0.58) 100%
  );
} /* 메인 타일처럼 아래를 눌러 유리 판을 띄운다 */
.sacc__tab {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 20px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.3s ease 0.3s;
}
.sacc__item.is-open .sacc__tab {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.sacc__tab:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -4px;
}
.sacc__no {
  font: 500 13px/1 var(--sans);
  color: rgba(255, 255, 255, 0.7);
  transition:
    color 0.3s ease,
    translate 0.5s var(--sacc-ease);
}
/* 단계명 — 글자 안에서 밝은 결이 흐른다(글자를 그라데이션으로 채움, 번짐 없음). 좁은 화면 가로 줄은 왼쪽 → 오른쪽, 기둥의 세로쓰기는 위 → 아래(9-29 사용자) */
@property --shine-lo {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.42;
}
.sacc__name {
  font: 500 18px/1.3 var(--sans);
  letter-spacing: -0.01em;
  color: var(--white);
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, var(--shine-lo)) 0%,
      rgba(255, 255, 255, var(--shine-lo)) 38%,
      #fff 50%,
      rgba(255, 255, 255, var(--shine-lo)) 62%,
      rgba(255, 255, 255, var(--shine-lo)) 100%
    )
    100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sacc-shine-x 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.4s);
  transition:
    --shine-lo 0.4s ease,
    translate 0.5s var(--sacc-ease);
}
@keyframes sacc-shine-x {
  0% {
    background-position: 100% 0;
  }
  60%,
  100% {
    background-position: 0% 0;
  }
}
@keyframes sacc-shine-y {
  0% {
    background-position: 0 100%;
  }
  60%,
  100% {
    background-position: 0 0%;
  }
}
/* 열린 칸의 글 — 단계 이름 → 제목 → 유리 판 순으로 떠오름 */
.sacc__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 20px 20px;
  visibility: hidden;
  transition: visibility 0s linear 0.25s;
}
.sacc__item.is-open .sacc__content {
  visibility: visible;
  transition: visibility 0s;
}
.sacc__content > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.2s ease,
    transform 0.25s ease;
}
.sacc__item.is-open .sacc__content > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease,
    transform 0.9s var(--sacc-ease);
}
.sacc__item.is-open .sacc__content > :nth-child(1) {
  transition-delay: 0.18s;
}
.sacc__item.is-open .sacc__content > :nth-child(2) {
  transition-delay: 0.26s;
}
.sacc__item.is-open .sacc__content > :nth-child(3) {
  transition-delay: 0.36s;
}
.sacc__content .svx__panel {
  min-height: 0;
  transition:
    opacity 0.6s ease,
    transform 0.9s var(--sacc-ease),
    translate 0.5s var(--sacc-ease);
} /* 열린 칸의 좌우 여백까지 채움(9-29 사용자) */
.sacc__content .tile__glow {
  opacity: 0.8;
}
@media (hover: hover) {
  .sacc__item.is-open:hover .svx__panel {
    translate: 0 -4px;
    --glass-fill: rgba(16, 16, 16, 0.4);
  } /* 메인 타일처럼 판이 뜬다 */
  .sacc__item.is-open:hover .tile__glow {
    opacity: 1;
  }
  .sacc__item:not(.is-open):hover::before {
    background-color: rgba(8, 8, 8, 0.66);
  } /* 접힌 칸: 올리는 순간 조금 밝아지고 글자 전체가 밝아짐(열리기 전 반응) */
  .sacc__item:not(.is-open):hover .sacc__no {
    color: var(--white);
  }
  .sacc__item:not(.is-open):hover .sacc__name {
    --shine-lo: 0.85;
  }
}
@media (min-width: 768px) {
  /* 가로 펼침 */
  .sacc {
    --closed: clamp(76px, 8vw, 124px);
    --sacc-gap: 12px;
    flex-direction: row;
    height: clamp(520px, 40vw, 600px);
  }
  .sacc__item,
  .sacc__item.is-open {
    height: auto;
    flex: 0 0 var(--closed);
    transition: flex-grow 0.8s var(--sacc-ease);
  }
  .sacc__item.is-open {
    flex-grow: 1;
  }
  .sacc__tab {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 28px 0;
    text-align: center;
  }
  .sacc__name {
    writing-mode: vertical-rl;
    font-size: 18px;
    letter-spacing: 0.04em; /* 세로쓰기 — 좁은 기둥에서도 이름이 끊기지 않게 */
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, var(--shine-lo)) 0%,
      rgba(255, 255, 255, var(--shine-lo)) 38%,
      #fff 50%,
      rgba(255, 255, 255, var(--shine-lo)) 62%,
      rgba(255, 255, 255, var(--shine-lo)) 100%
    );
    background-size: 100% 250%;
    background-position: 0 100%;
    animation-name: sacc-shine-y;
  }
  .sacc__content {
    right: auto;
    width: calc(100cqw - (var(--n) - 1) * (var(--closed) + var(--sacc-gap)));
    padding: 28px;
  } /* 열린 폭으로 고정 */
  .sacc__img {
    width: calc(100cqw - (var(--n) - 1) * (var(--closed) + var(--sacc-gap)));
    height: 100%;
  } /* 사진도 열린 폭으로 고정 — 칸이 넓어지면 왼쪽부터 커튼처럼 드러남(다시 맞춰 커지는 움직임 없음) */
  .sacc__content .svx__title {
    font-size: clamp(30px, 2.4vw, 38px);
  }
  @media (hover: hover) {
    .sacc__item:not(.is-open):hover .sacc__no,
    .sacc__item:not(.is-open):hover .sacc__name {
      translate: 0 -4px;
    }
  }
}
/* 매각 자문 · 인수 자문 전환 — 머리 오른쪽 아래, 글자 버튼 두 개(지금 보는 쪽은 진하게 + 밑줄, 나머지는 비활성 공통 톤) */
.sside {
  display: flex;
  gap: 28px;
  justify-content: flex-start;
}
.sside__btn {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 0 10px;
  border: 0;
  background: none;
  color: rgb(10 10 10 / var(--inactive));
  font: 500 18px/1.2 var(--sans);
  cursor: pointer;
  transition: color 0.3s ease;
}
.sside__btn span {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.sside__btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--expo);
}
.sside__btn[aria-selected='true'] {
  color: var(--ink);
}
.sside__btn[aria-selected='true']::after {
  transform: scaleX(1);
}
.sside__btn:hover {
  color: var(--ink);
}
.sside__btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
@media (min-width: 768px) {
  .sacc-sec .svx__side {
    display: flex;
    justify-content: flex-end;
  }
}
/* 노트북에서 섹션이 한 화면(100vh)을 넘지 않게(10-02 사용자) — 펼침 목록 높이를 화면 높이에 맞춰 줄인다. 섹션의 나머지 = 위 여백 112 + 머리(eyebrow · 제목 · 탭) 182 + 아래 여백 112 = 406px.
   높이가 820px 이하인 노트북(1280×720 · 1366×768 등)은 위 88 · 아래 64px로(나머지 334px). 펼침 목록은 380px 아래로는 줄이지 않는다(열린 칸 글 · 유리 판이 들어갈 최소) */
@media (min-width: 1024px) {
  .sacc-sec .sacc {
    height: min(clamp(520px, 40vw, 600px), max(380px, calc(100vh - 358px)));
    height: min(clamp(520px, 40vw, 600px), max(380px, calc(100svh - 358px)));
  } /* 10-08: 섹션 여백 112 → 88(공통)이라 406 → 358 */
}
@media (min-width: 1024px) and (max-height: 820px) {
  .sacc-sec {
    padding-block: 88px 64px;
  } /* 위는 고정 메뉴(72px) 아래 16px 틈 */
  .sacc-sec .sacc {
    height: min(clamp(520px, 40vw, 600px), max(380px, calc(100vh - 334px)));
    height: min(clamp(520px, 40vw, 600px), max(380px, calc(100svh - 334px)));
  }
}
.sacc[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .sacc__item,
  .sacc__img,
  .sacc__item::before,
  .sacc__tab,
  .sacc__content,
  .sacc__content > *,
  .sacc__no,
  .sacc__name {
    transition: none !important;
  }
  .sacc__name {
    animation: none;
    --shine-lo: 0.9;
  }
}

/* ── ⑤ M&A AX ① 사람의 전문성 + AX(9-30) — Harvey Solutions 'QuoteCarouselSection' 형식: 한 장씩 가로로 넘어가는 넓은 슬라이드
   (왼쪽 미디어 · 오른쪽 큰 세리프 문장 + 출처 줄) + 아래 진행 막대(8초에 차면 다음 장). 사진은 실제 자문역(업체사진7을 5:4로 — 사람과 화이트보드의
   평가 지표가 함께 들어가게), 두 번째 장은 회사 소개 첫 화면의 두 링(상자용 cqw 배치). 흑백 · 모서리 0. 막대 = 2px 트랙 + 흰 채움(scaleX 0 → 1) ── */
.axq {
  background: #050505;
  color: var(--white);
  padding-block: 72px;
}
.axq__head {
  padding-bottom: 32px;
}
.axq__viewport {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.axq__viewport.is-drag {
  cursor: grabbing;
}
.axq__viewport:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}
.axq__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
} /* 참고 사이트(Embla)처럼 가로로 밀림 · expo 곡선 */
.axq__track.is-drag {
  transition: none;
}
.axq__slide {
  flex: 0 0 100%;
  display: grid;
  row-gap: 28px;
  align-content: start;
}
.axq__media {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #0b0b0b;
}
.axq__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
.axq__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 24px;
}
.axq__quote {
  font: 400 22px/1.5 var(--serif);
  letter-spacing: -0.01em;
  word-break: keep-all;
  text-wrap: pretty;
}
.axq__meta {
  display: grid;
  row-gap: 4px;
}
.axq__meta strong {
  font: 500 17px/1.3 var(--sans);
}
.axq__meta span {
  font: 400 14px/1.4 var(--sans);
  color: rgba(255, 255, 255, 0.6);
}
.axq__bars {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.axq__bar {
  position: relative;
  flex: 1 1 0;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.axq__bar::before,
.axq__fill {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
}
.axq__bar::before {
  background: rgba(255, 255, 255, 0.2);
  transition: background-color 0.25s;
}
.axq__fill {
  display: block;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
}
.axq__bar.is-done .axq__fill {
  transform: scaleX(1);
}
.axq__bar.is-on .axq__fill {
  animation: axq-fill 8s linear forwards;
}
.axq__body[data-paused] .axq__bar.is-on .axq__fill {
  animation-play-state: paused;
} /* 마우스 · 포커스 · 화면 밖 · 탭 숨김이면 멈춤(services.js) */
@keyframes axq-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.axq__bar:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
@media (hover: hover) {
  .axq__bar:hover::before {
    background: rgba(255, 255, 255, 0.42);
  }
}
/* 두 링 — 회사 소개 Our Firm 상자용(.whatweare__rings)과 같은 cqw 배치를 5:4 상자에 맞춤. 보이는 장 · 화면 안일 때만 돈다(.is-on, services.js) */
.axq__rings {
  container-type: inline-size;
  background: #050505;
  -webkit-mask-image: radial-gradient(ellipse 58% 64% at 50% 46%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 64% at 50% 46%, #000 62%, transparent 100%);
} /* X 빛줄기가 상자 가장자리에서 잘리지 않고 사라지게 */
.axq__rings .appr__stage {
  --rad: 21cqw;
  --sep: 0.58;
  --mx: 50%;
  --ay: 46%;
}
.axq__rings .appr__name {
  font-size: 3cqw;
}
.axq__rings .appr__plus {
  width: 6.4cqw;
  height: 6.4cqw;
}
.axq__rings .appr__plus span::before {
  width: 2.4cqw;
}
.axq__rings .appr__plus span::after {
  height: 2.4cqw;
}
.axq__rings .appr__impact {
  top: calc(var(--ly) + 7.6cqw);
  font-size: 3.1cqw;
}
.axq__rings:not(.is-on) .appr__stage,
.axq__rings:not(.is-on) .appr__stage *,
.axq__rings:not(.is-on) .appr__ring::before,
.axq__rings:not(.is-on) .appr__ring::after,
.axq__rings:not(.is-on) .appr__beam::after {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .axq__track {
    transition: none;
  }
  .axq__bar.is-on .axq__fill {
    animation: none;
    transform: scaleX(1);
  }
}
@media (min-width: 768px) {
  .axq {
    padding-block: 96px;
  }
  .axq__head {
    padding-bottom: 44px;
  }
  .axq__quote {
    font-size: 26px;
    line-height: 1.45;
  }
}
@media (min-width: 1024px) {
  .axq__slide {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
  }
  .axq__media {
    grid-column: 1 / 7;
  }
  .axq__copy {
    grid-column: 8 / 13;
    row-gap: 32px;
  }
  .axq__bars {
    gap: 16px;
    margin-top: 36px;
  }
}
@media (min-width: 1280px) {
  .axq {
    padding-block: 120px;
  }
  .axq__quote {
    font-size: 32px;
    line-height: 1.4;
  } /* 참고 사이트 인용 32px */
  .axq__meta strong {
    font-size: 20px;
  }
  .axq__meta span {
    font-size: 16px;
  }
}

/* ── ⑥ M&A AX ② 서비스(9-30) — Hebbia Product 'featureScroller' 형식: 스크롤하면 판이 한 장씩 올라와 쌓이고(sticky), 앞 판은 위쪽 이름 띠만 남는다.
   9-30 사용자: 흰 바탕으로 — 판은 밝은 유리(연회색 반투명 · 흐림 24px · 1px 테두리 · 윗면 빛), 판마다 명도를 조금씩 달리함. 아래 옛 설명(어두운 유리 · 도심 배경)은 그 전 상태.
   판 = 브릿지코드 유리 레시피(.svc-glass, style.css)를 짙게(뒤 판 글이 비쳐 어지럽지 않게 채움 0.66 · 흐림 24px). 유리가 보이도록 뒤에 도심 사진을 어둡게 깔고
   섹션을 따라 머물게 했다(sticky 배경). 오른쪽 창 = AX 영상(9-29, 450×560 세로). 좁은 화면(1023px 이하)은 쌓지 않고 차례로 ── */
.axf {
  --label-h: 52px;
  position: relative;
  isolation: isolate;
  padding-block: 72px;
} /* 9-30: 흰 바탕(.on-light) */
.axf__head {
  padding-bottom: 32px;
}
@media (max-width: 767px) {
  .axf__head .h2 br {
    display: inline;
  }
} /* 의도한 두 줄 유지('자문을 돕는 / 세 가지 AX 서비스') — 공통 규칙은 좁은 화면에서 h2 줄바꿈을 숨겨 '세 / 가지'로 갈렸다 */
.axf__stack {
  display: grid;
  row-gap: 20px;
}
.axf__slot {
  display: contents;
} /* 좁은 화면: 판이 곧 목록 칸 */
.axf__card {
  --tint: 236, 236, 236;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 0 20px 24px;
  color: var(--ink);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 46%, rgba(10, 10, 10, 0.02) 100%),
    rgba(var(--tint), 0.94); /* 밝은 유리 — 좌상단 빛 → 우하단 살짝 그늘 */
  box-shadow:
    inset 0 0 0 1px rgba(10, 10, 10, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 -10px 30px -22px rgba(10, 10, 10, 0.28); /* 1px 테두리 · 윗면 빛 · 쌓일 때 앞 판 위쪽에 옅은 그늘 */
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.axf__slot:nth-child(2) .axf__card {
  --tint: 241, 241, 241;
} /* 앞으로 올수록 조금 밝게 — 쌓인 띠가 층으로 읽힌다 */
.axf__slot:nth-child(3) .axf__card {
  --tint: 246, 246, 246;
} /* 뒤 도심이 서리 낀 유리로 비치게 — 겹친 판의 글은 28px 흐림으로 뭉개져 읽히지 않는다 */
.axf__label {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  height: var(--label-h);
  margin: 0;
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.72);
}
.axf__label span {
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(10, 10, 10, 0.4);
}
.axf__body {
  display: grid;
  row-gap: 24px;
}
.axf__visual {
  position: relative;
  order: -1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #050505;
} /* 좁은 화면: 창이 먼저(영상 위 · 아래 어둡게 둔 자리는 잘려도 됨) */
.axf__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
} /* 유리 판 안의 창 테두리 */
.axf__visual video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.axf__text {
  display: grid;
  row-gap: 12px;
  align-content: end;
}
.axf__title {
  font: 400 28px/1.2 var(--serif);
  letter-spacing: -0.01em;
}
.axf__role {
  margin-top: 4px;
  font: 500 16px/1.5 var(--sans);
  word-break: keep-all;
}
.axf__desc {
  font: 400 15px/1.7 var(--sans);
  color: var(--muted);
  word-break: keep-all;
}
.axf__gain {
  display: grid;
  row-gap: 4px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  font: 500 15px/1.5 var(--sans);
  word-break: keep-all;
}
.axf__gain span {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.axf__link {
  justify-self: start;
  margin-top: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.4);
  font: 500 15px/1.4 var(--sans);
  color: var(--ink);
  transition: border-color 0.25s;
}
.axf__link:hover {
  border-color: var(--ink);
}
.axf__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
@media (min-width: 768px) {
  .axf {
    padding-block: 96px;
  }
  .axf__head {
    padding-bottom: 44px;
  }
  .axf__card {
    padding: 0 32px 32px;
  }
  .axf__title {
    font-size: 34px;
  }
}
@media (min-width: 1024px) {
  /* 쌓기 — 판마다 이름 띠 높이만큼 아래에 붙는다: 헤더 + 24 + i × 띠
     sticky는 부모 안에서만 머물러, 한 부모에 두면 끝에서 모두 같은 선에 걸려 한 장으로 겹친다 → 판마다 구간(.axf__slot)을 한 칸에 겹쳐 두고
     구간 끝을 i × 띠만큼 어긋나게(위 여백 = 앞 판들 자리, 아래 ::after = 남은 판 자리 + i × 띠) — 끝에서도 띠를 둔 채 함께 빠져나간다 */
  .axf__stack {
    --h: min(600px, calc(100vh - var(--hdr-h) - 48px - 2 * var(--label-h)));
    --g: 32px;
    row-gap: 0;
  }
  .axf__slot {
    display: block;
    grid-area: 1 / 1;
    align-self: start;
    pointer-events: none;
    padding-top: calc(var(--i) * (var(--h) + var(--g)));
  } /* start — 한 칸에 늘어나면(stretch) 구간 끝이 다시 같아진다 */
  .axf__slot::after {
    content: '';
    display: block;
    height: calc((2 - var(--i)) * (var(--h) + var(--g)) + var(--i) * var(--label-h) + 160px);
  } /* + 160px: 세 장이 다 쌓인 모습에 잠깐 머묾 */
  .axf__card {
    pointer-events: auto;
    position: sticky;
    top: calc(var(--hdr-h) + 24px + var(--i) * var(--label-h));
    height: var(--h);
  }
  .axf__body {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .axf__text {
    grid-column: 1 / 6;
    align-self: end;
  }
  .axf__visual {
    order: 0;
    grid-column: 7 / 13;
    justify-self: end;
    height: 100%;
    aspect-ratio: 450 / 560;
  }
}
@media (min-width: 1280px) {
  .axf {
    padding-block: 120px;
  }
  .axf {
    --label-h: 56px;
  }
  .axf__card {
    padding: 0 40px 40px;
  }
  .axf__title {
    font-size: 40px;
  }
  .axf__role {
    font-size: 18px;
  }
  .axf__desc {
    font-size: 16px;
  }
}

/* ── ⑤ M&A AX ① 사람의 전문성 + AX(9-30 2차) — 메인페이지 Careers 부품(.feat, style.css · main.js [data-feat])을 그대로 쓰고 버튼만 없다.
   여기서만 정하는 것: 사진 위치(얼굴과 화이트보드 지표가 선 위에 오게) · 두 링을 선 위 빈자리에 배치 · X 빛줄기는 선 아래 글 자리로 내려가지 않게 · 안 보이는 장의 링은 멈춤 ── */
.axfeat__photo img {
  object-position: 50% 0;
} /* 원본 사진의 머리 위 여백이 작아 위 기준 — 얼굴과 화이트보드 지표(EV/EBITDA · PBR · PER)가 선 위에 온다 */
.axfeat__rings {
  background: #050505;
}
/* 9-30 사용자: 두 링을 섹션 전체 배경으로 — 섹션 높이를 거의 채우게 키우고(반지름 ≈ 섹션 높이의 37%), X 빛줄기도 섹션 전체로.
   9-30 2차 사용자: 링 가운데는 섹션 가운데(50%) — Business Impact는 선 아래 제목과 패널 사이 빈자리에 온다(폭마다 겹침 없음 확인).
   아래 어둡게 누르는 층은 이 장만 옅게(링이 글 뒤에서도 보이되 글은 읽히게) */
.axfeat__rings::after {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0) 0%,
    rgba(10, 10, 10, 0) 48%,
    rgba(10, 10, 10, 0.42) 72%,
    rgba(10, 10, 10, 0.82) 100%
  );
}
.axfeat__rings .appr__stage {
  --rad: 84px;
  --sep: 0.58;
  --mx: 50%;
  --ay: 50%;
} /* 좁은 화면: 위 220px 이미지 띠를 채움 */
.axfeat__rings .appr__name {
  font-size: 13px;
}
.axfeat__rings .appr__plus {
  width: 26px;
  height: 26px;
}
.axfeat__rings .appr__plus span::before {
  width: 10px;
}
.axfeat__rings .appr__plus span::after {
  height: 10px;
}
.axfeat__rings .appr__impact {
  top: calc(var(--ly) + 30px);
  font-size: 13px;
}
.axfeat__rings:not(.is-active) .appr__stage,
.axfeat__rings:not(.is-active) .appr__stage *,
.axfeat__rings:not(.is-active) .appr__ring::before,
.axfeat__rings:not(.is-active) .appr__ring::after,
.axfeat__rings:not(.is-active) .appr__beam::after {
  animation-play-state: paused;
}
@media (min-width: 768px) {
  /* 섹션 560px — 링 가운데 280px(섹션 가운데), 링 80–480px */
  .axfeat__rings .appr__stage {
    --rad: 200px;
    --ay: 50%;
  } /* 9-30 사용자: 섹션 가운데 */
  .axfeat__rings::after {
    background: linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.22) 0%,
      rgba(10, 10, 10, 0.3) 46%,
      rgba(10, 10, 10, 0.52) 58%,
      rgba(10, 10, 10, 0.7) 78%,
      rgba(10, 10, 10, 0.86) 100%
    );
  } /* 10-02 사용자: 에셋이 반짝여 글이 묻힌다 → 에셋 위 Dim. 링 전체를 한 번 누르고(위 22%) 글이 놓이는 선 아래를 더 진하게(58% 52% → 바닥 86%). 좁은 화면은 글이 이미지 밖(아래 검정 바닥)이라 그대로 */
  .axfeat__rings .appr__name {
    font-size: 18px;
  }
  .axfeat__rings .appr__plus {
    width: 36px;
    height: 36px;
  }
  .axfeat__rings .appr__plus span::before {
    width: 13px;
  }
  .axfeat__rings .appr__plus span::after {
    height: 13px;
  }
  .axfeat__rings .appr__impact {
    top: calc(var(--ly) + 46px);
    font-size: 17px;
  }
}
@media (min-width: 1280px) {
  /* 섹션 640px — 링 가운데 320px, 링 80–560px */
  .axfeat__rings .appr__stage {
    --rad: 240px;
  }
  .axfeat__rings .appr__name {
    font-size: 22px;
  }
  .axfeat__rings .appr__plus {
    width: 44px;
    height: 44px;
  }
  .axfeat__rings .appr__plus span::before {
    width: 16px;
  }
  .axfeat__rings .appr__plus span::after {
    height: 16px;
  }
  .axfeat__rings .appr__impact {
    top: calc(var(--ly) + 54px);
    font-size: 20px;
  }
}

/* ── ⑥ M&A AX ② 서비스(9-30 4차) — 한 자리에서 펼치는 판. 사용자: 'M&A 자문보다 비중이 커 보일 필요는 없다' → 스크롤로 쌓던 판(.axf, 1440 높이 2,558px)을
   자문(982px)보다 낮게. 겉모습은 그대로(흰 바탕 위 밝은 유리 판이 층층이 · 번호와 이름 띠), 띠를 누르면 그 판이 열리고 나머지는 띠만 남는다(늘 한 장은 열림).
   펼침은 회사 소개 아코디언(.facc)과 같은 0fr → 1fr. 자동으로 넘기지 않음 ── */
.axc {
  --bar-h: 52px;
  padding-block: 72px;
} /* 위아래 여백은 M&A 자문(.svx)과 같은 72 / 96 / 112 */
.axc__head {
  padding-bottom: 32px;
}
@media (max-width: 767px) {
  .axc__head .h2 br {
    display: inline;
  }
} /* 의도한 두 줄 유지('자문을 돕는 / 세 가지 AX 서비스') */
.axc__stack {
  display: grid;
}
.axc__card {
  --glass-fill: rgba(10, 10, 10, 0.97);
  position: relative;
  padding: 0 20px;
  color: var(--white);
} /* 9-30 사용자: 검정 판 — 사이트 유리 레시피(.svc-glass: 사선 명암 · 1px 그라데이션 테두리 · 좌상단 L자 빛)를 흰 바탕에서도 검정으로 읽히게 짙게 */
.axc__card + .axc__card {
  margin-top: 0;
} /* 틈을 두면 흰 줄(칸 사이 선)처럼 보인다 — 층은 검정 명도 차이 + 판마다 윗면 빛 테두리(.svc-glass ::after)로 */
.axc__card:nth-child(2) {
  --glass-fill: rgba(17, 17, 17, 0.97);
} /* 아래로 갈수록 검정을 조금 밝게 — 층층이 */
.axc__card:nth-child(3) {
  --glass-fill: rgba(24, 24, 24, 0.97);
}
.axc__h {
  margin: 0;
  font: inherit;
}
.axc__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--bar-h);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s;
}
.axc__card:not(.is-open) .axc__bar {
  color: rgb(255 255 255 / var(--inactive));
}
@media (hover: hover) {
  .axc__card:not(.is-open) .axc__bar:hover {
    color: var(--white);
  }
}
.axc__bar:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -2px;
}
.axc__no {
  flex: 0 0 auto;
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.04em;
  opacity: 0.6;
}
.axc__name {
  font: 600 16px/1.3 var(--sans);
  white-space: nowrap;
}
.axc__en {
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
@media (max-width: 767px) {
  .axc__en {
    display: none;
  }
} /* 좁은 화면은 한글 이름만 — 영문까지 두면 띠가 두 줄로 접힌다 */
.axc__sign {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-left: auto;
} /* 회사 소개 아코디언(.facc__sign)과 같은 + / − */
.axc__sign::before,
.axc__sign::after {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 1px;
  background: currentColor;
  transition: transform 0.6s var(--expo);
}
.axc__sign::after {
  transform: rotate(90deg);
}
.axc__card.is-open .axc__sign::after {
  transform: rotate(0deg);
}
.axc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s var(--expo);
}
.axc__card.is-open .axc__panel {
  grid-template-rows: 1fr;
}
.axc__body {
  position: relative;
  display: grid;
  row-gap: 20px;
  min-height: 0;
  padding-bottom: 20px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.axc__card.is-open .axc__body {
  opacity: 1;
  transition: opacity 0.6s ease 0.15s;
}
/* 영상 — 창(테두리 · 바탕)이 아니라 판 배경에 스며든 모양(9-30 사용자): 가장자리를 판 색으로 흐리고(마스크) 화면 겹침(screen)으로 영상의 검정은 비치고
   빛나는 선 · 글만 판 위에 얹힌다. 영상은 판보다 크게 두어 위 · 아래 눌러 둔 자리는 잘리고 가운데 내용이 크게. 좁은 화면: 글 아래 판 폭 가득 */
.axc__visual {
  position: relative;
  margin-inline: -20px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  pointer-events: none;
}
/* 흐림(마스크)과 화면 겹침은 영상 자체에 — 감싼 칸에 마스크를 걸면 칸이 따로 합성돼 screen이 판과 섞이지 않고 영상 바탕이 네모로 남는다.
   --band-t/b: 칸에 보이는 영상 세로 구간(영상 높이가 칸보다 커서 위 · 아래는 잘림) 안에서 위 · 아래를 흐림, --fade-l/r: 좌우 흐림 */
.axc__visual video {
  --fade-l: 14%;
  --fade-r: 86%;
  --band-t: 17%;
  --band-b: 83%;
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: 150%;
  aspect-ratio: 450 / 560;
  translate: -50% -50%;
  object-fit: cover;
  mix-blend-mode: screen;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 var(--fade-r), transparent 100%),
    linear-gradient(
      180deg,
      transparent var(--band-t),
      #000 calc(var(--band-t) + 11%),
      #000 calc(var(--band-b) - 11%),
      transparent var(--band-b)
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 var(--fade-r), transparent 100%),
    linear-gradient(
      180deg,
      transparent var(--band-t),
      #000 calc(var(--band-t) + 11%),
      #000 calc(var(--band-b) - 11%),
      transparent var(--band-b)
    );
  mask-composite: intersect;
}
.axc__visual--sq video {
  aspect-ratio: 1 / 1;
}
.axc__text {
  display: grid;
  row-gap: 12px;
  align-content: end;
}
.axc__title {
  font: 400 24px/1.3 var(--serif);
  letter-spacing: -0.01em;
  word-break: keep-all;
}
.axc__desc {
  font: 400 15px/1.7 var(--sans);
  color: rgba(255, 255, 255, 0.7);
  word-break: keep-all;
}
.axc__gain {
  display: grid;
  row-gap: 4px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font: 500 15px/1.5 var(--sans);
  word-break: keep-all;
}
.axc__gain span {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}
.axc__link {
  justify-self: start;
  margin-top: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  font: 500 15px/1.4 var(--sans);
  color: var(--white);
  transition: border-color 0.25s;
}
.axc__link:hover {
  border-color: var(--white);
}
.axc__link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .axc__panel,
  .axc__body,
  .axc__sign::before,
  .axc__sign::after {
    transition: none;
  }
}
@media (min-width: 768px) {
  /* 열린 판: 왼쪽 글(아래 맞춤) · 오른쪽 세로 창 — 태블릿부터 나란히(창이 전체 폭이면 자문보다 커진다) */
  .axc {
    padding-block: 96px;
  }
  .axc__head {
    padding-bottom: 44px;
  }
  .axc__card {
    padding: 0 32px;
  }
  .axc__name {
    font-size: 17px;
  }
  .axc__title {
    font-size: 28px;
  }
  .axc__head .h2 br {
    display: none;
  } /* 넓은 화면은 제목 한 줄 — 섹션 높이를 자문보다 낮게 */
  .axc__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
    padding-bottom: 24px;
  }
  .axc__text {
    grid-column: 1 / 7;
    position: relative;
    z-index: 1;
    min-height: 280px;
  } /* 열린 판 높이 — 오른쪽 배경 영상 자리. 최소 높이는 글 칸에(접히는 .axc__body에 주면 접힌 판도 펼쳐진다) */
  .axc__visual {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -32px;
    width: 62%;
    margin: 0;
    aspect-ratio: auto;
  } /* 판 오른쪽 끝까지(판 안쪽 여백만큼 밖으로) */
  .axc__visual video {
    --fade-l: 30%;
    --fade-r: 90%;
    --band-t: 20%;
    --band-b: 80%;
    left: auto;
    right: 4%;
    translate: 0 -50%;
    height: 165%;
  } /* 세로 영상: 칸의 165% → 보이는 구간 20–80% */
  .axc__visual--sq video {
    --band-t: 17%;
    --band-b: 83%;
    height: 150%;
  } /* 정사각(방사형): 150% → 17–83% */
}
@media (min-width: 1280px) {
  .axc {
    --bar-h: 56px;
    padding-block: 112px;
  }
  .axc__card {
    padding: 0 40px;
  }
  .axc__title {
    font-size: 34px;
  }
  .axc__desc {
    font-size: 16px;
  }
  .axc__body {
    padding-bottom: 28px;
  }
  .axc__text {
    grid-column: 1 / 7;
    min-height: 320px;
  }
  .axc__visual {
    right: -40px;
    width: 58%;
  }
}

/* ── ⑥ AX 서비스 에셋 — 실제 화면 조각(9-30). 사용자: VDR · 딜리스트 영상이 'AI 슬롭 느낌' → 기술 · 워크플로우를 모션으로 잘 정리한 사례를 참고:
   Cohere About '2025–Present' 카드(작은 화면 카드 세 장이 어긋나 떠 있고 커서가 차례로 Run을 누르면 버튼 색이 바뀐다 — 벡터라 글자가 또렷) ·
   Harvey Vault(실제 화면 조각 + 구체적인 파일명 · 날짜). 흐린 도심 · 유리 타일 · 훑는 빛 대신 또렷한 카드 3 + 커서 + 상태 변화 하나씩, 흑백 · 모서리 0.
   기준 크기 430 × 292(--axv-s로 축소). 한 바퀴 9초 — 모든 요소가 같은 길이라 커서 · 버튼 · 기록이 어긋나지 않는다. .is-run일 때만 돈다(services.js — 보이는 판 · 화면 안).
   커서는 가로(.axv__cur) · 세로(.axv__cur-y)를 다른 곡선으로 움직여 직선이 아닌 호를 그린다 ── */
.axv {
  --axv-s: 0.74;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 430px;
  height: 292px;
  translate: -50% -50%;
  scale: var(--axv-s);
  text-align: left;
}
.axv__card {
  position: absolute;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
  width: 330px;
  padding: 14px;
  background: #121212;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 22px 44px -14px rgba(0, 0, 0, 0.85);
}
.axv__card--a {
  left: 0;
  top: 0;
}
.axv__card--b {
  left: 100px;
  top: 100px;
}
.axv__card--c {
  left: 36px;
  top: 200px;
}
.axv__ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font: 600 9px/1 var(--sans);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.axv__main {
  min-width: 0;
}
.axv__t {
  margin: 0;
  overflow: hidden;
  font: 600 14px/1.25 var(--sans);
  letter-spacing: -0.005em;
  color: var(--white);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.axv__s {
  margin: 4px 0 0;
  font: 500 10px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.axv__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  font: 600 12px/1 var(--sans);
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.axv__btn i,
.axv__chip i,
.axv__log i {
  font-style: normal;
}
.axv__btn i {
  font-size: 11px;
}
.axv__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 19px;
  margin: 0;
}
.axv__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  font: 500 10.5px/1 var(--sans);
  color: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}
.axv__chip--ok {
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}
.axv__log {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  font: 500 10.5px/1 var(--sans);
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  opacity: 0;
  translate: 0 4px;
}
.axv__lock {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}
.axv__card--locked .axv__t {
  color: rgba(255, 255, 255, 0.72);
}
.axv__card--locked .axv__btn {
  color: rgba(255, 255, 255, 0.55);
  background-color: rgba(255, 255, 255, 0.05);
}
.axv__cur {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  translate: 400px 0;
}
.axv__cur-y {
  display: block;
  translate: 0 286px;
}
.axv__cur svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: var(--white);
  stroke: #0a0a0a;
  stroke-width: 1;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  transform-origin: 2px 2px;
}
/* 움직임 — 커서: 쉼 → A 버튼 → B 버튼 → C 버튼 → 쉼. 누르면 버튼이 흰색으로(딜리스트 · VDR A · B), VDR C는 잠겨 있어 흔들리고 '권한 필요'가 밝아진다 */
.axv.is-run .axv__cur {
  animation: axv-cx 9s var(--axv-delay, 0s) infinite;
}
.axv.is-run .axv__cur-y {
  animation: axv-cy 9s var(--axv-delay, 0s) infinite;
}
.axv.is-run .axv__cur svg {
  animation: axv-click 9s var(--axv-delay, 0s) infinite;
}
.axv.is-run .axv__card--a {
  animation: axv-hover-a 9s var(--axv-delay, 0s) infinite;
}
.axv.is-run .axv__card--b {
  animation: axv-hover-b 9s var(--axv-delay, 0s) infinite;
}
.axv.is-run .axv__card--c {
  animation: axv-hover-c 9s var(--axv-delay, 0s) infinite;
}
.axv.is-run .axv__card--a .axv__btn {
  animation: axv-press-a 9s var(--axv-delay, 0s) infinite;
}
.axv.is-run .axv__card--b .axv__btn {
  animation: axv-press-b 9s var(--axv-delay, 0s) infinite;
}
.axv.is-run .axv__card--c .axv__btn {
  animation: axv-press-c 9s var(--axv-delay, 0s) infinite;
}
.axv.is-run .axv__card--locked .axv__btn {
  animation: axv-deny 9s var(--axv-delay, 0s) infinite;
}
.axv.is-run .axv__card--locked .axv__chip {
  animation: axv-need 9s var(--axv-delay, 0s) infinite;
}
.axv.is-run .axv__card--a .axv__log {
  animation: axv-log-a 9s var(--axv-delay, 0s) infinite;
}
.axv.is-run .axv__card--b .axv__log {
  animation: axv-log-b 9s var(--axv-delay, 0s) infinite;
}
.axv--deal {
  --axv-delay: -4.5s;
} /* 두 화면 조각이 나란히 보일 때 커서가 똑같이 움직이지 않게 반 바퀴 어긋나게 */
@keyframes axv-cx {
  0%,
  6% {
    translate: 400px 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
  }
  15%,
  28% {
    translate: 293px 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
  }
  37%,
  50% {
    translate: 393px 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
  }
  59%,
  72% {
    translate: 329px 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
  }
  82%,
  100% {
    translate: 400px 0;
  }
}
@keyframes axv-cy {
  0%,
  6% {
    translate: 0 286px;
    animation-timing-function: cubic-bezier(0.25, 0, 0.1, 1);
  }
  15%,
  28% {
    translate: 0 33px;
    animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1);
  }
  37%,
  50% {
    translate: 0 133px;
    animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1);
  }
  59%,
  72% {
    translate: 0 233px;
    animation-timing-function: cubic-bezier(0.25, 0, 0.1, 1);
  }
  82%,
  100% {
    translate: 0 286px;
  }
}
@keyframes axv-click {
  0%,
  14.8% {
    scale: 1;
  }
  15.8% {
    scale: 0.8;
  }
  17.4%,
  36.8% {
    scale: 1;
  }
  37.8% {
    scale: 0.8;
  }
  39.4%,
  58.8% {
    scale: 1;
  }
  59.8% {
    scale: 0.8;
  }
  61.4%,
  100% {
    scale: 1;
  }
}
@keyframes axv-hover-a {
  0%,
  12% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 44px -14px rgba(0, 0, 0, 0.85);
  }
  15%,
  28% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 44px -14px rgba(0, 0, 0, 0.85);
  }
  32%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 44px -14px rgba(0, 0, 0, 0.85);
  }
}
@keyframes axv-hover-b {
  0%,
  34% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 44px -14px rgba(0, 0, 0, 0.85);
  }
  37%,
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 44px -14px rgba(0, 0, 0, 0.85);
  }
  54%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 44px -14px rgba(0, 0, 0, 0.85);
  }
}
@keyframes axv-hover-c {
  0%,
  56% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 44px -14px rgba(0, 0, 0, 0.85);
  }
  59%,
  72% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 44px -14px rgba(0, 0, 0, 0.85);
  }
  76%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 44px -14px rgba(0, 0, 0, 0.85);
  }
}
@keyframes axv-press-a {
  0%,
  15.6% {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  16.4%,
  90% {
    background-color: #fff;
    color: #0a0a0a;
  }
  95%,
  100% {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
}
@keyframes axv-press-b {
  0%,
  37.6% {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  38.4%,
  90% {
    background-color: #fff;
    color: #0a0a0a;
  }
  95%,
  100% {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
}
@keyframes axv-press-c {
  0%,
  59.6% {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  60.4%,
  90% {
    background-color: #fff;
    color: #0a0a0a;
  }
  95%,
  100% {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
}
@keyframes axv-deny {
  0%,
  59.8% {
    translate: 0 0;
  }
  60.8% {
    translate: -3px 0;
  }
  62% {
    translate: 3px 0;
  }
  63.2% {
    translate: -2px 0;
  }
  64.4%,
  100% {
    translate: 0 0;
  }
}
@keyframes axv-need {
  0%,
  60% {
    color: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }
  62.5%,
  86% {
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  }
  93%,
  100% {
    color: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }
}
@keyframes axv-log-a {
  0%,
  18% {
    opacity: 0;
    translate: 0 4px;
  }
  22%,
  90% {
    opacity: 1;
    translate: 0 0;
  }
  95%,
  100% {
    opacity: 0;
    translate: 0 0;
  }
}
@keyframes axv-log-b {
  0%,
  40% {
    opacity: 0;
    translate: 0 4px;
  }
  44%,
  90% {
    opacity: 1;
    translate: 0 0;
  }
  95%,
  100% {
    opacity: 0;
    translate: 0 0;
  }
}
/* ── 딜리스트 화면 조각(10-02) — 사용자: VDR 조각과 너무 비슷하다(같은 카드 3장) → 실제 딜리스트 화면의 '느낌'만 살려 다시.
   빌린 것: 위 탭(추천 · 신규 · 전체 안건) + 큐레이션 칩 · 코드명 · 지역 · 업종 줄 · 세리프 두 줄 제목 · 매출/영업이익 3개년 막대(올해만 밝게) · 희망 매각금액 · '티저 열람'.
   바꾼 것: 검정 화면 · 모서리 0 · 칸 사이 선 없음(간격만) · 붉은 강조 대신 흰색 · 안건 · 수치 · 날짜는 모두 가상(실제 딜리스트는 외부 반출 금지 자료).
   움직임(9초, VDR과 반 바퀴 어긋남): 막대가 차오르고 → 커서가 '티저 열람'을 누르면 버튼이 흰색, 위에 '✓ 열람함'이 뜬다 → 다시 처음으로 ── */
.axv--deal {
  --axd-bx: 56px;
  --axd-by: 252px;
} /* 커서가 누르는 '티저 열람' 자리(기준 크기 좌표). 다음 안건 머리는 카드 아래 유리 판 뒤로 비친다 */
.axd__top {
  position: absolute;
  left: 0;
  top: 0;
  width: 430px;
}
.axd__tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font: 400 14px/1 var(--serif);
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
}
.axd__tabs .is-on {
  position: relative;
  color: var(--white);
}
.axd__tabs .is-on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 1.5px;
  background: var(--white);
}
.axd__conf {
  margin-left: auto;
  padding: 4px 6px;
  font: 600 8.5px/1 var(--sans);
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}
.axd__chips {
  display: flex;
  gap: 6px;
  margin: 19px 0 0;
}
.axd__chips span {
  padding: 5px 9px;
  font: 500 10.5px/1 var(--sans);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}
.axd__chips .is-on {
  color: #0a0a0a;
  background: var(--white);
  box-shadow: none;
}
.axd__card {
  position: absolute;
  left: 0;
  top: 62px;
  width: 430px;
  padding: 14px 18px;
  background: #121212;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 22px 44px -14px rgba(0, 0, 0, 0.85);
}
.axd__card--next {
  top: 290px;
  height: 58px;
  overflow: hidden;
  z-index: -1;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 10%, transparent 85%);
} /* 목록이 이어진다는 표시 — 다음 안건 머리만 보이고 흐려진다 */
.axd__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 19px;
  margin: 0;
  font: 500 10.5px/1 var(--sans);
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.axd__meta b {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.axd__seen {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
  padding: 4px 7px;
  font: 500 10px/1 var(--sans);
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  opacity: 0;
  translate: 0 3px;
}
.axd__seen i,
.axd__open i {
  font-style: normal;
}
.axd__new {
  margin-left: auto;
  padding: 4px 6px;
  font: 700 8.5px/1 var(--sans);
  letter-spacing: 0.06em;
  color: #0a0a0a;
  background: rgba(255, 255, 255, 0.85);
}
.axd__title {
  margin: 10px 0 0;
  font: 400 17px/1.42 var(--serif);
  letter-spacing: -0.01em;
  color: var(--white);
  word-break: keep-all;
}
.axd__card--next .axd__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.axd__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  column-gap: 18px;
  margin-top: 14px;
}
.axd__stat p {
  margin: 0;
}
.axd__kv {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.axd__kv span,
.axd__k {
  font: 500 10px/1 var(--sans);
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.axd__kv b {
  font: 600 14px/1 var(--sans);
  letter-spacing: -0.005em;
  color: var(--white);
}
.axd__stat .axd__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 24px;
  margin-top: 10px;
}
.axd__bars i {
  width: 10px;
  height: calc(var(--h) * 100%);
  background: rgba(255, 255, 255, 0.22);
  transform-origin: 50% 100%;
}
.axd__bars i:last-child {
  background: var(--white);
} /* 올해만 밝게(실제 화면의 붉은 강조 자리) */
.axd__stat .axd__yr {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}
.axd__yr span {
  width: 10px;
  font: 500 7.5px/1 var(--sans);
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
.axd__stat .axd__ask {
  margin-top: 8px;
  font: 600 22px/1 var(--sans);
  letter-spacing: -0.01em;
  color: var(--white);
}
.axd__stat .axd__note {
  margin-top: 7px;
  font: 500 9.5px/1.2 var(--sans);
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.axd__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 13px 0 0;
}
.axd__open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  font: 600 11.5px/1 var(--sans);
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.1);
}
.axd__date {
  font: 500 10px/1 var(--sans);
  color: rgba(255, 255, 255, 0.45);
}
.axv--deal.is-run .axd__bars i {
  animation: axd-bar 9s var(--axv-delay, 0s) infinite;
}
.axv--deal.is-run .axd__stat + .axd__stat .axd__bars i {
  animation-delay: calc(var(--axv-delay, 0s) + 0.12s);
}
.axv--deal.is-run .axv__cur {
  animation-name: axd-cx;
}
.axv--deal.is-run .axv__cur-y {
  animation-name: axd-cy;
}
.axv--deal.is-run .axv__cur svg {
  animation-name: axd-click;
}
.axv--deal.is-run .axd__card:not(.axd__card--next) {
  animation: axd-hover 9s var(--axv-delay, 0s) infinite;
}
.axv--deal.is-run .axd__open {
  animation: axd-open 9s var(--axv-delay, 0s) infinite;
}
.axv--deal.is-run .axd__seen {
  animation: axd-seen 9s var(--axv-delay, 0s) infinite;
}
@keyframes axd-bar {
  0%,
  3% {
    scale: 1 0.06;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  14%,
  92% {
    scale: 1 1;
  }
  98%,
  100% {
    scale: 1 0.06;
  }
}
@keyframes axd-cx {
  0%,
  18% {
    translate: 400px 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
  }
  30%,
  74% {
    translate: var(--axd-bx, 52px) 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
  }
  86%,
  100% {
    translate: 400px 0;
  }
}
@keyframes axd-cy {
  0%,
  18% {
    translate: 0 286px;
    animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1);
  }
  30%,
  74% {
    translate: 0 var(--axd-by, 250px);
    animation-timing-function: cubic-bezier(0.25, 0, 0.1, 1);
  }
  86%,
  100% {
    translate: 0 286px;
  }
}
@keyframes axd-click {
  0%,
  31% {
    scale: 1;
  }
  32% {
    scale: 0.8;
  }
  33.6%,
  100% {
    scale: 1;
  }
}
@keyframes axd-hover {
  0%,
  25% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 44px -14px rgba(0, 0, 0, 0.85);
  }
  29%,
  78% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 44px -14px rgba(0, 0, 0, 0.85);
  }
  84%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 44px -14px rgba(0, 0, 0, 0.85);
  }
}
@keyframes axd-open {
  0%,
  31.8% {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  32.6%,
  90% {
    background-color: #fff;
    color: #0a0a0a;
  }
  95%,
  100% {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
}
@keyframes axd-seen {
  0%,
  33% {
    opacity: 0;
    translate: 0 3px;
  }
  37%,
  90% {
    opacity: 1;
    translate: 0 0;
  }
  95%,
  100% {
    opacity: 0;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* 멈춘 화면 — 두 자료가 열려 기록이 남은 상태 */
  .axv *,
  .axv {
    animation: none !important;
  }
  .axv__cur {
    display: none;
  }
  .axv__log {
    opacity: 1;
    translate: 0 0;
  }
  .axv__card--a .axv__btn,
  .axv__card--b .axv__btn {
    background-color: #fff;
    color: #0a0a0a;
  }
  .axd__seen {
    opacity: 1;
    translate: 0 0;
  } /* 딜리스트: 티저를 연 상태 */
  .axd__open {
    background-color: #fff;
    color: #0a0a0a;
  }
}
@media (min-width: 768px) {
  /* 넓은 화면: 판 오른쪽에 붙여(왼쪽 글과 겹치지 않게 크기를 맞춤) */
  .axc__visual--ui .axv {
    --axv-s: 0.72;
    left: auto;
    right: 48px;
    translate: 0 -50%;
    transform-origin: right center;
  }
}
@media (min-width: 1024px) {
  .axc__visual--ui .axv {
    --axv-s: 0.86;
  }
}
@media (min-width: 1280px) {
  .axc__visual--ui .axv {
    --axv-s: 1;
    right: 72px;
  }
}

/* ── ⑥ M&A AX ② 서비스(10-01) — Hebbia Investment Banking 'How bankers use Hebbia'(multicard) 형식: 가운데 정렬 제목 + 카드 3장 한 줄.
   카드 = 왼쪽 위 선 아이콘 · 아래 제목과 두 줄 설명(참고 그대로). 참고에선 비어 있는 카드 가운데에 기존 에셋을 배경처럼(방사형 그래프 영상 · 화면 조각).
   카드는 9-30 결정대로 흰 바탕 위 검정(사이트 유리 레시피 .svc-glass를 짙게). 좁은 화면(1023↓)은 옆으로 넘기는 한 줄 — 다음 카드가 살짝 보이고 손가락 · 트랙패드로 넘긴다
   (세로로 쌓으면 자문 섹션보다 커진다) ── */
.axm {
  padding-block: var(--sec-y);
}
.axm__head {
  padding-bottom: 32px;
  text-align: center;
}
/* 10-02 헤드라인 두 줄('자문의 품질과 속도, / AX로 새 기준을 세웁니다', 사용자) — 좁은 화면은 공통 규칙대로 줄바꿈을 숨기고 자연스럽게 흐른다 */
.axm__grid {
  display: flex;
  gap: 12px;
  margin-block: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.axm__grid::-webkit-scrollbar {
  display: none;
}
.axm__cell {
  flex: 0 0 86%;
  scroll-snap-align: start;
}
.axm__card {
  --axm-text-h: 112px;
  --glass-fill: rgba(10, 10, 10, 0.97);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 360px;
  overflow: hidden;
  color: var(--white);
} /* 10-06 사용자: 모바일 카드 높이 줄임(420 → 360) — 줄어든 만큼 에셋 위 빈 곳만 줄고, 에셋 아래 끝 ~ 유리 판 사이는 그대로(--axm-y · 영상 top을 함께 내림) */
a.axm__card {
  color: var(--white);
}
a.axm__card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.axm__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
} /* 에셋 자리 = 카드 전체(10-02 사용자: 에셋이 위에 몰려 답답하다 → 가운데~아래로). 에셋 아랫부분(다음 안건 · 그림자 · 영상 선)은 정보 판 유리 뒤로 비쳐 글래스가 드러나고, 커서가 누르는 버튼은 유리 위에 남도록 화면 폭마다 --axm-y로 맞춘다 */
.axm__media--video video {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  object-fit: cover;
  mix-blend-mode: screen; /* 영상의 검정은 비치고 선 · 글만 — 위 · 아래는 카드 색으로 흐림(영상 자체에 마스크) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 60%, transparent 92%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 60%, transparent 92%);
}
.axm__media .axv {
  --axv-s: 0.62;
  --axm-y: 44%;
  top: var(--axm-y, 52%);
}
.axm__media .axv--vdr {
  margin-top: -14px;
} /* VDR은 맨 아래 잠긴 자료 카드(눌리면 흔들림 · '권한 필요'가 밝아짐)가 유리 판에 닿지 않게 조금 위로 */
.axm__text {
  --glass-fill: rgba(255, 255, 255, 0.045);
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: calc(var(--axm-text-h) - 24px);
  padding: 16px 18px;
} /* 정보 판(10-02 사용자) — 고객 사례 캡션 · M&A 자문 펼침 판과 같은 유리(.svc-glass), 검정 카드 위라 채움만 살짝 밝게. 높이를 맞춰 세 카드의 제목 선이 같다 */
.axm__text .tile__glow {
  opacity: 0;
  transition: opacity 0.45s;
} /* 테두리를 도는 빛 — 세 장이 한꺼번에 돌면 어지러워 마우스를 올린 카드만 */
@media (hover: hover) {
  .axm__card:hover .axm__text .tile__glow {
    opacity: 0.9;
  }
}
.axm__title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 500 18px/1.3 var(--sans);
}
.axm__go {
  font-size: 0.85em;
  opacity: 0.6;
  transition:
    opacity 0.25s,
    translate 0.35s var(--expo);
}
@media (hover: hover) {
  a.axm__card:hover .axm__go {
    opacity: 1;
    translate: 2px -2px;
  }
}
.axm__desc {
  margin-top: 8px;
  font: 400 14px/1.6 var(--sans);
  color: rgba(255, 255, 255, 0.62);
  word-break: keep-all;
}
@media (min-width: 768px) {
  .axm__head {
    padding-bottom: 44px;
  }
  .axm__cell {
    flex-basis: 56%;
  }
  .axm__card {
    height: 440px;
  }
  .axm__media .axv {
    --axv-s: 0.8;
  }
  .axm__card {
    --axm-text-h: 120px;
  } /* 판 높이 = 제목 + 한 줄 설명(10-02 사용자: 설명은 한 줄 양) — 세 카드의 제목 선이 같다 */
  .axm__media .axv {
    --axm-y: 50%;
  }
  .axm__media--video video {
    top: 50%;
  }
  .axm__text {
    left: 14px;
    right: 14px;
    bottom: 14px;
    height: calc(var(--axm-text-h) - 28px);
    padding: 18px 20px;
  }
  .axm__title {
    font-size: 19px;
  }
}
@media (min-width: 1024px) {
  /* 한 줄 3장 */
  .axm__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    overflow: visible;
  }
  .axm__card {
    --axm-text-h: 120px;
  }
  .axm__card {
    height: 400px;
  }
  .axm__media .axv {
    --axv-s: 0.64;
  }
}
@media (min-width: 1280px) {
  .axm__card {
    height: 440px;
    --axm-text-h: 124px;
  }
  .axm__media .axv {
    --axv-s: 0.8;
    --axm-y: 47%;
  }
  .axm__title {
    font-size: 20px;
  }
  .axm__desc {
    font-size: 16px;
  } /* 10-02 같은 위계(카드 안 설명) — 메인 What We Do 타일 설명과 같은 16px */
}
@media (min-width: 1440px) {
  .axm__media .axv {
    --axv-s: 0.84;
  }
} /* 카드 폭 448 — 커서가 누르는 버튼 아래 끝이 유리 위로 15px 남는 크기 */

/* ── ⑧ 고객 사례(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↓는 가운데 카드 + 양옆이 컨테이너 끝에서 잘림).
   각 카드의 자리 · 투명도는 services.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↑에선 services.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), services.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, services.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: 48px 1fr;
  column-gap: 8px;
} /* 14px '매출액'이 들어가는 이름 칸 */
@media (max-width: 767px) {
  .cs__meta {
    font-size: 12px;
  }
  .cs__meta div {
    grid-template-columns: 40px 1fr;
  }
} /* 휴대폰 카드는 폭이 좁아 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;
  }
}