/* =====================================================================
   DragDocs 메인 v0.6 — 본문(상세) 섹션 스타일
   ===================================================================== */
/* 히어로(.stage, 일반 흐름) 아래에 이어짐 — 함께 스크롤 (헤더만 고정) */
.body { position: relative; z-index: 1; background: var(--white); }
.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; }
.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); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.grad-text {
  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.pdetail__head { max-width: 760px; }
.pdetail__title { 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) 0 0; max-width: 60ch; color: var(--text-paragraph); font-size: var(--fs-p1); line-height: 1.6; }
.pdetail__chips { margin: var(--sp-24) 0 0; display: flex; flex-wrap: wrap; 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); }
/* 도구형(뷰어·추출·변환) — 스펙 시트: 굵은 상단 괘선 + 행 단위 헤어라인, 항목은 2열 */
.spec-sheet { margin-top: var(--sp-48); border-top: 2px solid var(--ink); }
.spec-sheet__row {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-24);
  padding: 22px 0; border-bottom: 1px solid var(--border);
}
.spec-sheet dt { font-size: var(--fs-p2); font-weight: 700; color: var(--ink); }
.spec-sheet dd { margin: 0; min-width: 0; }
.spec-sheet .pdetail__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--sp-24); }
@media (max-width: 767px) {
  .spec-sheet__row { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; }
  .spec-sheet .pdetail__list { grid-template-columns: 1fr; }
}

/* 앱형(AI 에디터·오피스) — 주석 달린 스크린샷: 좌 고정 스크린샷 5 : 우 번호 블록 7 */
.annot { margin-top: var(--sp-48); display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-48); align-items: start; }
.annot--noshot { grid-template-columns: 1fr; }
.annot__shot { position: sticky; top: calc(var(--header-h) + var(--sp-24)); margin: 0; }
.annot__shot img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--white); }
.annot__list { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.annot__item { padding: var(--sp-24) 0; border-bottom: 1px solid var(--border); }
@media (max-width: 1024px) {
  .annot { grid-template-columns: 1fr; gap: var(--sp-24); }
  .annot__shot { position: static; }
}

.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);
}


/* 1.5) 제품 상세 → 공통 구간 전환 (플랫폼 핸드오프) --------------------- */
/* 제품별 콘텐츠(위)와 전 제품 공통 콘텐츠(아래)의 경계를 명확히 — 제품 강조색을 반영 */
.sec--handoff { background: var(--white); padding: clamp(48px, 7vw, 88px) 0 0; }
.handoff {
  max-width: 1248px; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start; 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 {
  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); }
/* 본문 섹션 헤드 좌측 기준선 통일: 콘텐츠 폭 1200px (= 1248px − 컨테이너 패딩 24px×2) */
.legacy-wrap { display: flex; flex-direction: column; align-items: flex-start; max-width: 1248px; }
.legacy__title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.36px; line-height: 1.25; text-wrap: balance; }
.legacy__lead { margin: var(--sp-16) 0 var(--sp-40); max-width: 64ch; color: var(--text-paragraph); font-size: var(--fs-p1); line-height: 1.6; }
/* WebAssembly 방식(왼쪽·강조) : 서버 기반 방식(오른쪽·톤다운) = 7 : 5 */
.legacy-card { width: 100%; display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-24); align-items: stretch; }
.legacy-panel {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-24);
  padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-card);
  background: var(--white); border: 1px solid var(--border);
}
.legacy-panel--wasm { background: color-mix(in srgb, var(--accent-blue) 4%, white); border: 2px solid var(--accent-blue); box-shadow: 0 2px 8px rgba(13, 18, 32, 0.06), 0 28px 60px -16px color-mix(in srgb, var(--accent-blue) 22%, transparent); }
.legacy-panel__badge {
  position: absolute; top: -14px; left: 32px; padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--accent-blue); color: var(--white); font-size: var(--fs-caption); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.legacy-panel--legacy .legacy-info h3 { color: var(--text-paragraph); }
.legacy-panel--legacy .arch-diagram { height: 300px; }
/* 세그먼트 토글 */
.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; flex-direction: column; gap: var(--sp-24); width: 100%; }
.legacy-info { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-16); }
.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: var(--fs-p2); line-height: 1.6; }
.legacy-panel--wasm .legacy-info p { font-size: var(--fs-p1); color: var(--text); }
.warn { display: flex; flex-direction: column; gap: var(--sp-16); }
.warn li { display: flex; align-items: center; gap: 12px; color: var(--danger); font-weight: 600; font-size: 16px; }
.warn__icon { width: 16px; height: 16px; flex: none; color: var(--danger); }
/* 다이어그램 카드 */
.arch-diagram {
  position: relative; min-width: 0; height: 340px;
  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: var(--surface-3); }
.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 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.pros li { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 500; font-size: 15px; }
.pros li.is-key { font-weight: 700; color: var(--ink); font-size: 16px; }
.pros__icon { width: 16px; height: 16px; flex: none; color: var(--accent-blue); }
.arch-status--ok { background: #e8f7ee; color: #16a34a; }
.arch-node__box--wasm { background: color-mix(in srgb, var(--accent-blue) 8%, white); border-color: color-mix(in srgb, var(--accent-blue) 25%, white); }
.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: color-mix(in srgb, var(--accent-blue) 8%, white); border: 1px solid color-mix(in srgb, var(--accent-blue) 25%, white);
  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: var(--accent-blue-deep); 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; min-width: 0; overflow-wrap: anywhere; }
.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: var(--accent-blue); 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; }

@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; }
}
@media (max-width: 767px) {
  /* 320px: 좌우 24px 여백(다른 섹션과 동일) · 카드 패딩 축소 · 원 3개는 줄바꿈, 연결선 제거 */
  .fbento { width: calc(100% - 48px); gap: var(--sp-24); }
  .fcard { padding: 28px 22px; }
  .fcard__name { font-size: clamp(30px, 10vw, 38px); }
  .int-circles { flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
  .int-circles::before { display: none; }
  .int-circle { width: 108px; font-size: 13px; }
}

/* 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 { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-12); }
.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: var(--accent-blue); }
.eff-bar--purple { background: var(--accent-purple); }
.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: var(--accent-blue); 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: var(--accent-blue); font-weight: 700; font-size: 20px; }
.eff-sim__value { font-size: 36px; font-weight: 800; color: var(--accent-blue); 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; } }
@media (max-width: 767px) { .eff-wrap { width: calc(100% - 48px); gap: var(--sp-24); } .eff-charts, .eff-sim { gap: var(--sp-16); } .eff-sim__value { font-size: clamp(26px, 9vw, 36px); } }

/* 5) Bento (다크) (Figma) ---------------------------------------------- */
.sec--bento { background: var(--surface-dark); 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 { display: flex; flex-direction: column; align-items: flex-start; 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: color-mix(in srgb, var(--accent-purple) 20%, transparent); }
.dcard--blue { background: color-mix(in srgb, var(--accent-blue) 24%, transparent); }
.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 var(--accent-blue); 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: var(--accent-mint); letter-spacing: -0.3px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) { .dbento-row { flex-direction: column; } .dcard--narrow { flex: none; } .dcard { height: auto; min-height: 240px; } }
@media (max-width: 767px) { .dbento-wrap { width: calc(100% - 48px); } .dbento-grid, .dbento-row { gap: var(--sp-16); } .dcard__code { padding: 16px; } }

/* 6) 산업별 (탭) (Figma) ------------------------------------------------ */
.sec--industry { background: #f8fafc; }
.ind-wrap { width: min(1200px, calc(100% - 48px)); margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
/* 헤드는 1200px 기준선에, 탭·패널 본문은 기존 960px 폭 유지 */
.ind-tabs, .ind-panels { width: 100%; max-width: 960px; margin-inline: auto; }
.ind-head { display: flex; flex-direction: column; align-items: flex-start; 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: var(--accent-blue); }
.ind-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent-blue); }
.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: var(--accent-blue); }
.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;
}
.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(1200px, calc(100% - 48px)); margin: 0 auto; }
.uc-title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.36px; }
.uc-lead { margin-top: var(--sp-16); max-width: 64ch; color: var(--text-paragraph); font-size: 20px; line-height: 1.5; }
/* 캐러셀: 중앙 고정 흰 프레임(마스크)을 콘텐츠가 통과 — 카드 폭은 320px 화면에서 뷰포트에 맞춤 (main.js가 실제 폭을 읽음) */
.uc-carousel { position: relative; margin-top: 48px; overflow: hidden; padding: 30px 0 0; --uc-card-w: min(360px, 100vw); }
.uc-frame {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%); z-index: 0;
  width: var(--uc-card-w); 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); }
/* 도트 = 버튼(클릭/키보드 이동). 프레임 헤더는 pointer-events:none 이라 도트만 다시 켠다 · 히트 영역 16px, 표시는 6px */
.uc-dots { display: flex; gap: 2px; pointer-events: auto; }
.uc-dot { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 9999px; cursor: pointer; }
.uc-dot::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: rgba(0, 0, 0, 0.15); transition: background 0.3s ease; }
.uc-dot:hover::before { background: rgba(0, 0, 0, 0.35); }
.uc-dot.is-active::before { background: var(--accent-blue); }
.uc-track { position: relative; z-index: 1; display: flex; transition: transform 0.5s ease; will-change: transform; }
.uc-card {
  flex: 0 0 var(--uc-card-w); 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(1200px, calc(100% - 48px)); margin: 0 auto; }
.clients-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  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: border-color 0.2s ease, background 0.2s ease;
}
a.client-card:hover {
  background: #fff;
  border-color: color-mix(in srgb, var(--accent-blue) 40%, white);
}
.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% - 48px, 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: var(--surface-dark);
}
.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; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-12); margin-top: var(--sp-8); }
.cta__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 28px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff;
  font: inherit; font-size: var(--fs-p2); font-weight: 700; cursor: pointer; background: rgba(255, 255, 255, 0.1);
}
.cta__btn:hover { background: rgba(255, 255, 255, 0.18); }
.cta__btn--primary { background: #fff; color: var(--ink); border-color: #fff; }
.cta__btn--primary:hover { background: #f1f5f9; }

/* ==================================================== 반응형 (태블릿/모바일) */
@media (max-width: 900px) {
  /* 세로 정렬 — align-items:center 상속을 stretch 로 덮어 전체폭 사용,
     flex:1(flex-basis 0)로 인한 높이 붕괴 방지(flex:none), 노드 간격 축소로 좁은 화면 오버플로 방지 */
  .legacy-card { grid-template-columns: 1fr; }
  .arch-diagram { height: 260px; gap: var(--sp-16); }
  .pros { grid-template-columns: 1fr; }
  .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; }
}