/* =====================================================================
   DragDocs 메인 v0.6 — 본문(상세) 섹션 스타일
   ===================================================================== */
/* 히어로(고정 슬라이드) 아래에서 시작 → 스크롤 시 위를 덮으며 올라옴 (헤더는 안 덮음) */
.body { position: relative; z-index: 1; background: var(--white); margin-top: 100vh; margin-top: 100dvh; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-24); }

.sec { padding: clamp(56px, 8vw, 112px) 0; }
.sec__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -1px; line-height: 1.2; }
.sec__lead { margin-top: var(--sp-16); color: var(--text-paragraph); font-size: var(--fs-p1); max-width: 64ch; }
.eyebrow {
  color: var(--accent-blue); font-weight: 700; font-size: var(--fs-p3);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-12);
}
.link-more { display: inline-block; margin-top: var(--sp-16); color: var(--accent-blue); font-weight: 600; }
.link-more:hover { text-decoration: underline; }

/* 1) 제품별 상세 (메뉴마다 다른 콘텐츠 — main.js가 렌더) --------------------- */
.sec--pdetail { background: #f8fafc; --pd-accent: var(--accent-blue); }
.grad-text {
  background: linear-gradient(90deg, #011efa 0%, #a000ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.pdetail__head { text-align: center; max-width: 720px; margin: 0 auto; }
.pdetail__tag {
  display: inline-block; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pd-accent);
  background: color-mix(in srgb, var(--pd-accent) 10%, transparent);
  padding: 6px 14px; border-radius: var(--radius-pill);
}
.pdetail__title { margin-top: var(--sp-16); font-weight: 800; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -1.5px; color: var(--ink); }
.pdetail__lead { margin: var(--sp-16) auto 0; max-width: 60ch; color: var(--text-paragraph); font-size: var(--fs-p1); line-height: 1.6; }
.pdetail__chips { margin: var(--sp-32) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-12); }
.pdetail__chips li {
  display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-p3); font-weight: 600; color: var(--ink);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 9px 18px;
}
.pdetail__chips li::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--pd-accent); }
.pdetail__grid {
  margin-top: var(--sp-48);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-24);
}
.pdetail__card {
  position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: var(--sp-32); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pdetail__card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--pd-accent) 45%, var(--border));
}
.pdetail__num { font-size: var(--fs-caption); font-weight: 800; letter-spacing: 0.1em; color: var(--pd-accent); }
.pdetail__cardtitle { margin: var(--sp-8) 0 var(--sp-16); font-size: var(--fs-t2); font-weight: 800; color: var(--ink); letter-spacing: -0.3px; }
.pdetail__list { display: flex; flex-direction: column; gap: var(--sp-12); }
.pdetail__list li { position: relative; padding-left: 20px; font-size: var(--fs-p3); line-height: 1.55; color: var(--text-paragraph); overflow-wrap: anywhere; word-break: break-word; }
.pdetail__list li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--pd-accent) 38%, transparent); }
.pdetail__soon {
  margin: var(--sp-48) auto 0; max-width: 560px; text-align: center;
  background: var(--white); border: 1px dashed color-mix(in srgb, var(--pd-accent) 35%, var(--grey-91)); border-radius: var(--radius-xl);
  padding: var(--sp-56) var(--sp-24); color: var(--text-paragraph); font-size: var(--fs-p1);
}
@media (max-width: 640px) { .pdetail__grid { grid-template-columns: 1fr; } }

/* 1.5) 제품 상세 → 공통 구간 전환 (플랫폼 핸드오프) --------------------- */
/* 제품별 콘텐츠(위)와 전 제품 공통 콘텐츠(아래)의 경계를 명확히 — 제품 강조색을 반영 */
.sec--handoff { background: var(--white); padding: clamp(48px, 7vw, 88px) 0 0; }
.handoff {
  max-width: 920px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-16);
}
.handoff__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-p3); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pd-accent, var(--accent-blue));
  transition: color 0.4s ease;
}
.handoff__eyebrow::before, .handoff__eyebrow::after {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.45;
}
.handoff__title {
  font-size: clamp(22px, 2.6vw, 31px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.25; color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 768px) {
  .handoff__title { white-space: nowrap; }
}
.handoff__lead { color: var(--text-paragraph); font-size: var(--fs-p1); line-height: 1.6; max-width: 64ch; }
.handoff__lead b { color: var(--pd-accent, var(--accent-blue)); font-weight: 700; transition: color 0.4s ease; }
.handoff__rule {
  margin-top: var(--sp-24); width: 1px; height: 52px;
  background: linear-gradient(var(--pd-accent, var(--accent-blue)), transparent);
  opacity: 0.5; transition: background 0.4s ease;
}

/* 2) Legacy 비교 (Figma) ------------------------------------------------ */
.sec--legacy { background: var(--white); }
.legacy-wrap { display: flex; flex-direction: column; align-items: center; max-width: 1200px; }
.eyebrow--purple { color: var(--pd-accent, #a000ff); transition: color 0.4s ease; }
.legacy__title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.36px; text-align: center; margin-bottom: var(--sp-40); }
.legacy-card {
  width: 100%; background: var(--grey-98); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px); box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: var(--sp-40); align-items: center;
}
/* 세그먼트 토글 */
.seg-toggle { display: inline-flex; background: #fff; border: 1px solid var(--border); border-radius: 9999px; padding: 6px; box-shadow: var(--shadow-soft); }
.seg-toggle__item { padding: 10px 32px; border-radius: 9999px; font-weight: 600; font-size: 16px; color: var(--text-paragraph); transition: background 0.2s ease, color 0.2s ease; }
.seg-toggle__item.is-active { background: #d3deeb; color: var(--ink); box-shadow: 0 1px 2px rgba(13, 18, 32, 0.08); }
/* 좌우 그리드 */
.legacy-grid { display: flex; gap: var(--sp-40); align-items: center; width: 100%; }
.legacy-info { flex: 1; min-width: 0; padding-right: var(--sp-24); display: flex; flex-direction: column; gap: 31px; }
.legacy-info h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.32px; color: var(--ink); }
.legacy-info h3 span { color: var(--text-paragraph); font-weight: 500; }
.legacy-info p { color: var(--text-paragraph); font-size: 20px; line-height: 1.5; }
.warn { display: flex; flex-direction: column; gap: var(--sp-16); }
.warn li { display: flex; align-items: center; gap: 12px; color: #eb5252; font-weight: 600; font-size: 16px; }
.warn__icon { width: 16px; height: 16px; flex: none; color: #eb5252; }
/* 다이어그램 카드 */
.arch-diagram {
  position: relative; flex: 1; min-width: 0; height: 400px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center; gap: 40px;
}
.arch-status {
  position: absolute; top: 24px; right: 26px;
  background: #f3f4f6; color: #6b6b6e; border-radius: 9999px;
  padding: 6px 16px; font-size: 11px; font-weight: 700; letter-spacing: -0.28px; text-transform: uppercase;
}
.arch-node { display: flex; flex-direction: column; align-items: center; }
.arch-node__box {
  width: 80px; height: 80px; border-radius: 16px; display: grid; place-items: center;
  border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(13, 18, 32, 0.05);
}
.arch-node--client .arch-node__box { background: #f8fafc; }
.arch-node--server .arch-node__box { background: #f3f4f6; }
.arch-node__box svg { width: 48px; height: 48px; color: #94a3b8; }
.arch-node span { margin-top: 12px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #c8d1da; }
.arch-dots { display: flex; gap: 10px; }
.arch-dots i { width: 8px; height: 8px; border-radius: 9999px; background: #c8d1da; }
/* 패널 전환 */
.legacy-grid[hidden] { display: none; }
/* DragDocs Wasm 패널 */
.pros { display: flex; flex-direction: column; gap: var(--sp-16); }
.pros li { display: flex; align-items: center; gap: 12px; color: #16a34a; font-weight: 600; font-size: 16px; }
.pros__icon { width: 16px; height: 16px; flex: none; color: #16a34a; }
.arch-status--ok { background: #e8f7ee; color: #16a34a; }
.arch-node__box--wasm { background: #eef6ff; border-color: #bfdbfe; }
.arch-node__box--wasm svg { color: var(--accent-blue); }
.arch-badge {
  margin-top: 10px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--accent-blue); background: #eef6ff; border: 1px solid #bfdbfe;
  border-radius: 9999px; padding: 3px 10px;
}
.arch-dots--ok i { background: #86efac; }
.arch-node--off { opacity: 0.45; }
.arch-node__box--off svg { color: #cbd5e1; }

/* 3) 핵심 피처 Bento (Figma) ------------------------------------------- */
.sec--features { background: var(--white); }
.fbento { width: min(1720px, calc(100% - 80px)); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-40); }
.fbento-row { display: flex; gap: var(--sp-40); height: clamp(440px, 30vw, 520px); }
.fbento-row--3 > * { flex: 1 1 0; min-width: 0; }
.fbento-row--imgleft .fcard--img-tall { flex: 0 0 38%; }
.fbento-row--imgleft .fcard--integration { flex: 1 1 0; min-width: 0; }
.fbento-row--imgright .fcard--dark { flex: 0 0 38%; }
.fbento-row--imgright .fcard--img { flex: 1 1 0; min-width: 0; }

.fcard {
  position: relative; border-radius: var(--radius-card); overflow: visible;
  padding: clamp(36px, 4vw, 64px) clamp(28px, 3.2vw, 56px);
  display: flex; flex-direction: column; gap: var(--sp-24);
}
.fcard--cyan { background: #d4f6ff; }
.fcard--blue { background: #1410d4; color: #fff; }
.fcard--ltblue { background: #c1e0ff; }
.fcard--dark { background: rgba(0, 0, 0, 0.8); color: #fff; }
.fcard--img { padding: 0; overflow: hidden; }
.fcard--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcard__name { font-size: clamp(38px, 4.4vw, 60px); font-weight: 800; letter-spacing: -0.6px; line-height: 1; }
.fcard__body { display: flex; flex-direction: column; gap: var(--sp-16); }
.fcard__title { font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.26px; }
.fcard__list { display: flex; flex-direction: column; gap: 4px; list-style: disc; padding-left: 30px; color: var(--text-paragraph); font-size: clamp(15px, 1.35vw, 20px); line-height: 1.5; }
.fcard--blue .fcard__list, .fcard--dark .fcard__list { color: rgba(255, 255, 255, 0.6); }
/* Integration 원 3개 */
.int-circles { position: relative; display: flex; gap: clamp(12px, 3vw, 64px); align-items: center; justify-content: center; margin-top: auto; padding-top: var(--sp-24); }
.int-circles::before { content: ""; position: absolute; top: 60%; left: 6%; right: 6%; height: 1px; background: #fff; }
.int-circle {
  position: relative; width: clamp(120px, 12vw, 200px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; border: 14px solid rgba(255, 255, 255, 0.4); background-clip: padding-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: #011efa; font-weight: 700; font-size: clamp(13px, 1.2vw, 20px); line-height: 1.25; padding: 6px;
}
.int-circle em { font-style: normal; font-weight: 400; font-size: 0.8em; }
/* 떠다니는 3D 아이콘 */
.fcard__float { position: absolute; pointer-events: none; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.16)); z-index: 2; height: auto; }
.fcard__float--speed { width: clamp(56px, 5vw, 76px); top: 26px; right: 36px; }
.fcard__float--security { width: clamp(110px, 10vw, 158px); top: -28px; right: 28px; transform: rotate(-8deg); }
.fcard__float--ai { width: clamp(120px, 11vw, 175px); bottom: -12px; right: -8px; }

@media (max-width: 900px) {
  .fbento-row { flex-direction: column; height: auto; }
  /* 세로 정렬 시 flex-basis(:0/%)로 카드 높이가 붕괴되는 것 방지 — 각 카드가 자기 높이를 쓰도록 리셋
     (per-row 셀렉터와 특이도를 맞춰야 desktop flex 규칙을 덮어쓸 수 있음) */
  .fbento-row--3 > *,
  .fbento-row--imgleft .fcard--img-tall,
  .fbento-row--imgleft .fcard--integration,
  .fbento-row--imgright .fcard--dark,
  .fbento-row--imgright .fcard--img { flex: none; }
  .fcard--img { height: 260px; }
}

/* 4) 효율성 (Figma) ----------------------------------------------------- */
.sec--efficiency { background: #f8fafc; }
.eff-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-40); }
.eff-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.eyebrow--blue { color: #011efa; }
.eff-title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.36px; }
.eff-lead { color: var(--text-paragraph); font-size: 20px; }
.eff-charts { display: flex; gap: var(--sp-40); }
.eff-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: clamp(28px, 3vw, 40px);
  box-shadow: var(--shadow-soft);
}
.eff-charts .eff-card { flex: 1; min-width: 0; }
.eff-card__title { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; color: var(--ink); }
.eff-bar { width: 6px; height: 24px; border-radius: 9999px; flex: none; }
.eff-bar--blue { background: #011efa; }
.eff-bar--purple { background: #a000ff; }
.eff-chart { margin-top: var(--sp-32); height: 300px; }
.eff-chart img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 시뮬레이터 */
.eff-sim { display: flex; gap: var(--sp-40); align-items: stretch; }
.eff-sim__panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-24); justify-content: center; }
.eff-sim__savings {
  flex: 0 0 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.eff-sim__label { font-size: 12px; font-weight: 800; color: #c8d1da; letter-spacing: 2.4px; text-transform: uppercase; text-align: center; }
.eff-slider { width: 100%; accent-color: #011efa; height: 6px; }
.eff-sim__marks { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-paragraph); }
.eff-sim__current { color: #011efa; font-weight: 700; font-size: 20px; }
.eff-sim__value { font-size: 36px; font-weight: 800; color: #011efa; letter-spacing: -0.36px; }
@media (max-width: 900px) { .eff-charts, .eff-sim { flex-direction: column; } .eff-sim__savings { flex: none; } .eff-chart { height: auto; aspect-ratio: 506 / 300; } }

/* 5) Bento (다크) (Figma) ---------------------------------------------- */
.sec--bento { background: #101625; color: #fff; }
.dbento-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(40px, 6vw, 80px); }
.dbento-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.dbento-title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.36px; color: #fff; }
.dbento-lead { color: #c8d1da; font-size: 20px; }
.dbento-grid { display: flex; flex-direction: column; gap: var(--sp-40); }
.dbento-row { display: flex; gap: var(--sp-40); }
.dcard {
  position: relative; overflow: hidden; height: 280px;
  border: 1px solid rgba(51, 65, 85, 0.5); border-radius: var(--radius-card); padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 20px;
}
.dcard--wide { flex: 1; min-width: 0; }
.dcard--narrow { flex: 0 0 380px; }
.dcard--gradient { background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%); }
.dcard--purple { background: rgba(160, 0, 255, 0.2); }
.dcard--blue { background: rgba(1, 30, 250, 0.24); }
.dcard--center { align-items: center; justify-content: center; text-align: center; gap: var(--sp-16); }
.dcard__title { font-size: 26px; font-weight: 700; letter-spacing: -0.26px; color: #fff; }
.dcard__desc { color: #c8d1da; font-size: 20px; line-height: 1.5; }
.dcard--center .dcard__desc { font-size: 16px; }
.dcard__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.dcard__tags span {
  background: #000; border: 1px solid #011efa; border-radius: 9999px; padding: 9px 17px;
  font-size: 12px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: #c8d1da;
}
.dcard__icon { color: #e2e8f0; }
.dcard__icon svg { width: 48px; height: 48px; display: block; }
.dcard__code {
  margin-top: auto; width: 100%; background: #000; border-radius: 16px; padding: 25px; overflow-x: auto;
}
.dcard__code code { font-family: var(--font-mono); font-size: 13.9px; color: #34d399; letter-spacing: -0.3px; white-space: pre; }
.dcard__glow { position: absolute; width: 256px; height: 256px; border-radius: 9999px; filter: blur(40px); opacity: 0.1; pointer-events: none; }
.dcard__glow--purple { background: #a000ff; top: -80px; right: -80px; }
.dcard__glow--blue { background: #011efa; bottom: -80px; left: -80px; }
@media (max-width: 900px) { .dbento-row { flex-direction: column; } .dcard--narrow { flex: none; } .dcard { height: auto; min-height: 240px; } }

/* 6) 산업별 (탭) (Figma) ------------------------------------------------ */
.sec--industry { background: #f8fafc; }
.ind-wrap { width: min(960px, calc(100% - 48px)); margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.ind-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.ind-title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.36px; color: var(--ink); }
.ind-tabs { display: flex; justify-content: center; gap: 32px; border-bottom: 1px solid var(--border); }
.ind-tab { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 16px; font-size: 16px; font-weight: 600; color: var(--text-paragraph); position: relative; }
.ind-tab svg { width: 16px; height: 16px; }
.ind-tab.is-active { color: #011efa; }
.ind-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #011efa; }
.ind-panel { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); text-align: center; }
.ind-panel[hidden] { display: none; }
.ind-panel__title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.32px; color: var(--ink); }
.ind-panel__lead { color: var(--text-paragraph); font-size: 20px; line-height: 1.5; max-width: 640px; }
.ind-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-24); padding-top: var(--sp-16); }
.ind-checks li { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 16px; }
.ind-checks li svg { width: 16px; height: 16px; flex: none; color: #011efa; }
.ind-subs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); width: 100%; margin-top: var(--sp-24); }
.ind-sub {
  background: var(--grey-98); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ind-sub:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: color-mix(in srgb, var(--accent-blue) 30%, var(--border)); }
.ind-sub__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: #eef2f9; color: #475569; }
.ind-sub__icon svg { width: 26px; height: 26px; }
.ind-sub strong { font-size: 18px; font-weight: 700; color: var(--ink); }
.ind-sub__desc { font-size: 14px; color: var(--text-paragraph); line-height: 1.6; }

/* 7) 활용 방안 (캐러셀) (Figma) ---------------------------------------- */
.sec--usecase { background: #fff; overflow: hidden; padding-bottom: 0; }
.uc-head { width: min(1000px, calc(100% - 48px)); margin: 0 auto; text-align: center; }
.uc-title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.36px; }
.uc-lead { margin-top: var(--sp-16); color: var(--text-paragraph); font-size: 20px; line-height: 1.5; }
/* 캐러셀: 중앙 고정 흰 프레임(마스크)을 콘텐츠가 통과 */
.uc-carousel { position: relative; margin-top: 48px; overflow: hidden; padding: 30px 0 0; }
.uc-frame {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%); z-index: 0;
  width: 360px; height: 480px; background: #fff; border-radius: 0;
  box-shadow: var(--shadow-card);
}
.uc-frame__head {
  position: absolute; top: 66px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none;
}
.uc-logo { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-brand); font-weight: 700; font-size: 20px; color: var(--ink); }
.uc-logo img { height: 0.9em; width: auto; margin: 0 1px; transform: translateY(1px); }
.uc-dots { display: flex; gap: 6px; }
.uc-dots i { width: 6px; height: 6px; border-radius: 9999px; background: rgba(0, 0, 0, 0.15); transition: background 0.3s ease; }
.uc-dots i.is-active { background: #0500ff; }
.uc-track { position: relative; z-index: 1; display: flex; transition: transform 0.5s ease; will-change: transform; }
.uc-card {
  flex: 0 0 360px; height: 480px; padding: 130px 30px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  opacity: 0.4; transition: opacity 0.4s ease; text-align: center;
}
.uc-card.is-active { opacity: 1; }
/* 제목 1줄 고정(폰트 축소) → 카드마다 이미지 위치 동일 */
.uc-card__title { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; letter-spacing: -0.4px; color: var(--ink); white-space: nowrap; }
.uc-card__art { height: 180px; width: 100%; display: grid; place-items: center; }
.uc-card__art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.uc-card__desc { color: var(--text-paragraph); font-size: 16px; line-height: 1.5; }

/* 8) Reference clients -------------------------------------------------- */
.sec--clients { background: #fff; }
.clients-wrap { width: min(1100px, calc(100% - 48px)); margin: 0 auto; }
.clients-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
}
.clients-title {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.36px;
  color: var(--ink);
}
.clients-lead {
  margin-top: var(--sp-16);
  max-width: 72ch;
  color: var(--text-paragraph);
  font-size: 20px;
  line-height: 1.5;
}
.clients-grid {
  margin-top: clamp(36px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.client-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(96px, 8vw, 128px);
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
a.client-card:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: #9dc4ff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}
.client-card img {
  display: block;
  width: 100%;
  max-width: 200px;
  max-height: 56px;
  object-fit: contain;
}

@media (max-width: 1100px) {
  .clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .clients-wrap { width: min(100% - 40px, 640px); }
  .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .client-card { min-height: 92px; padding: 18px 16px; }
  .client-card img { max-height: 48px; }
}
@media (max-width: 480px) {
  .clients-grid { grid-template-columns: 1fr; }
}

/* 9) CTA (Figma) ------------------------------------------------------- */
.cta {
  height: 360px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 clamp(20px, 5vw, 100px); color: #fff;
  background: linear-gradient(90deg, #5100d4 0%, #1410d4 22%, #03fdff 100%);
}
.cta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.cta__symbol { width: 120px; height: auto; margin: -36px 0 -28px; }
.cta__title { font-size: clamp(28px, 3.6vw, 36px); font-weight: 800; letter-spacing: -0.36px; }
.cta__desc { font-size: 20px; }

/* 10) Footer (Figma) --------------------------------------------------- */
.footer { background: #292929; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 32px clamp(20px, 5vw, 100px); display: flex; flex-direction: column; gap: 8px; }
.footer__row { display: flex; align-items: center; gap: var(--sp-16); }
.footer__logo { flex: 1; }
.footer__logo img { height: 14px; width: auto; display: block; }
.footer__div { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.2); }
.footer__link { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: #fff; font-size: 14px; font-weight: 600; }
.footer__link svg { width: 20px; height: 20px; }
.footer__link:hover { opacity: 0.8; }
.footer__copy { font-size: 12px; color: rgba(255, 255, 255, 0.6); }

/* ==================================================== 반응형 (태블릿/모바일) */
@media (max-width: 900px) {
  /* 세로 정렬 — align-items:center 상속을 stretch 로 덮어 전체폭 사용,
     flex:1(flex-basis 0)로 인한 높이 붕괴 방지(flex:none), 노드 간격 축소로 좁은 화면 오버플로 방지 */
  .legacy-grid { flex-direction: column; align-items: stretch; }
  .legacy-info { flex: none; padding-right: 0; }
  .arch-diagram { flex: none; height: 300px; gap: var(--sp-16); }
  .ind-subs { grid-template-columns: 1fr; }
  .stats { gap: var(--sp-16); }
}
@media (max-width: 767px) {
  .sec { padding: 56px 0; }
  .stats { flex-direction: column; }
  .stat--mid { border: none; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; padding: var(--sp-16) 0; }
  .footer__row { flex-wrap: wrap; }
}