/* ============================================================
   DTS page — DTS-specific components.
   Reuses the capsule design system (.capsule-page .cap-* + tokens);
   this file only adds DTS-specific layouts, scoped to .dts-page.
   ============================================================ */

/* Hero: 2-col (copy left / DTS wordmark right). Inherits capsule's 1.1fr 1fr
   grid and its <=900px single-column stack. */
/* desktop only: 2-col hero. Below 900px inherit capsule's 1-col stack
   (without the min-width guard this overrode the mobile stack → squished logo). */
@media (min-width: 901px) { .dts-page .cap-hero__grid { grid-template-columns: 1.6fr 0.8fr; } }
.dts-page .cap-hero__copy { max-width: 900px; margin: 0; text-align: left; }
.dts-page .cap-hero__ctas { justify-content: flex-start; }
.dts-page .cap-lead strong { color: var(--cap-c-ink); font-weight: 600; }
.dts-page .cap-hero__media { display: flex; justify-content: center; align-items: center; }
.dts-page .dts-hero-logo { width: 100%; max-width: 300px; height: auto; opacity: 0.6; }
/* Hero has an extra flow lead between sub and CTAs — own the rhythm here so
   sub→lead→CTA spacing stays consistent (capsule hero has no lead). */
.dts-page .cap-hero__sub { margin-bottom: 14px; }
.dts-page .cap-hero .cap-lead { margin: 0 0 32px; }

/* Hero stat row (4 proof numbers) */
/* Card-less stat metrics (matches capsule .cap-metric): big number + caption, no box */
.dts-page .dts-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: 900px; margin: 40px auto 0;
}
.dts-page .dts-stat { background: transparent; padding: 0; text-align: center; }
/* values mirror capsule .cap-metric exactly (number 46/4vw, margin-bottom 6px,
   default line-height; caption 13px muted line-height 1.5) */
.dts-page .dts-stat__n { font-size: clamp(34px, 4vw, 46px); font-weight: 700; color: var(--c-accent-violet); letter-spacing: -0.02em; margin-bottom: 6px; }
.dts-page .dts-stat__l { font-size: 13px; color: var(--cap-c-muted); line-height: 1.5; }
.dts-page .dts-stat__d { font-size: 13px; color: var(--cap-c-muted); line-height: 1.5; }

/* Trust chips use the shared .cap-chip / .cap-chips component (capsule.css). */
.dts-page .dts-proof__foot .cap-chips { margin-top: 0; }
.dts-page .dts-proof__note { max-width: none; margin: 18px auto 0; text-align: center; font-size: 11px; line-height: 1.6; color: var(--cap-c-muted); font-weight: 500; }
.dts-page .dts-proof__cite { display: block; margin-bottom: 6px; font-size: 12px; color: var(--cap-c-ink); font-weight: 600; }
.dts-page .dts-proof__note em { font-style: italic; }
.dts-page .dts-proof__disc { display: block; }

/* Generic 3-col card grid (problems, signals, concepts).
   Trap-free naming: dts-cell / __kind / __name / __copy avoid the ibm-overrides
   !important substring traps ([class*="__card"|"-card"|"__tag"|"__title"|"__body"|
   "__label"]) — no !important needed. See DESIGN-SYSTEM.md trap #4. */
.dts-page .dts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dts-page .dts-cell {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--cap-c-line);
  border-radius: var(--cap-r-lg); padding: 24px 22px; box-shadow: var(--cap-sh-sm);
}
/* Eyebrow-style type label (matches uc labels / mode kickers across the page —
   no pill, so the card doesn't read as box-in-box). Both types share one quiet
   neutral tone; category is read from the text, the ✓ marker carries the signal.
   Bible v5.0 visual guard: violet + neutral only, no alert colors. */
.dts-page .dts-cell__kind {
  align-self: flex-start; font-family: var(--cap-f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-c-muted);
}
.dts-page .dts-cell__kind--restricted,
.dts-page .dts-cell__kind--unusable { color: var(--cap-c-muted); }
.dts-page .dts-cell__num { font-family: var(--cap-f-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-c-muted); }
.dts-page .dts-cell__name { font-size: 17px; font-weight: 700; color: var(--cap-c-ink); letter-spacing: -0.01em; line-height: 1.3; }
/* Five-signals self-check: violet ✓ circle marks each signal as a "does this apply?" item */
.dts-page #signals .dts-cell__name { position: relative; padding-left: 30px; }
.dts-page #signals .dts-cell__name::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cap-c-primary-soft); color: var(--c-accent-violet); font-size: 11px; font-weight: 700; line-height: 1; }
.dts-page .dts-cell__copy { font-size: 13.5px; line-height: 1.65; color: var(--cap-c-ink-soft); margin: 0; }
/* used by dts-mode (deployment) bullets — breathing room from the body paragraph */
.dts-page .dts-cell__points { font-size: 12.5px; line-height: 1.7; color: var(--cap-c-ink-soft); margin: 14px 0 0; padding-left: 0; list-style: none; }
.dts-page .dts-cell__points li { position: relative; padding-left: 20px; margin-bottom: 5px; }
.dts-page .dts-cell__points li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--c-accent-violet); font-size: 11px; font-weight: 700; }

/* THREE PROBLEMS panel — mirrors the home ai-models__barrier component
   (unified bordered box + border-left dividers + violet line icon, no numbers).
   Scoped clone like the company page; FIVE SIGNALS keeps dts-grid/dts-cell. */
/* 3 separate cards (no outer panel) — consistent with the rest of the DTS page */
.dts-page .dts-barriers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dts-page .dts-barrier { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--cap-c-line); border-radius: var(--cap-r-lg); padding: 28px 24px; }
.dts-page .dts-barrier__icon { color: var(--c-accent-violet); margin-bottom: 4px; }
.dts-page .dts-barrier__icon svg { width: 30px; height: 30px; display: block; }
.dts-page .dts-barrier__icon svg [stroke="black"],
.dts-page .dts-barrier__icon svg [stroke="#000"],
.dts-page .dts-barrier__icon svg [stroke="#000000"] { stroke: var(--c-accent-violet) !important; }
.dts-page .dts-barrier__icon svg [fill="black"]:not([stroke]),
.dts-page .dts-barrier__icon svg [fill="#000"]:not([stroke]),
.dts-page .dts-barrier__icon svg [fill="#000000"]:not([stroke]) { fill: var(--c-accent-violet) !important; }
/* font-size/line-height !important to beat the global h3 trap (h3 { font-size:28px !important }),
   exactly as the home .ai-models__barrier-title does. */
.dts-page .dts-barrier__name { font-size: 18px !important; font-weight: 600 !important; color: var(--c-text-dark); letter-spacing: -0.2px !important; line-height: 1.3 !important; margin: 0; }
.dts-page .dts-barrier__desc { font-size: 14px; line-height: 1.5; color: var(--c-text-muted); margin: 0; }
.dts-page .dts-barrier__desc strong { color: var(--cap-c-ink); }
.dts-page .dts-barrier__points { font-size: 12.5px; line-height: 1.7; color: var(--cap-c-ink-soft); margin: 6px 0 0; padding-left: 0; list-style: none; }
.dts-page .dts-barrier__points li { position: relative; padding-left: 20px; }
.dts-page .dts-barrier__points li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--c-accent-violet); font-size: 11px; font-weight: 700; }
@media (max-width: 860px) {
  .dts-page .dts-barriers { grid-template-columns: 1fr; }
}

/* Differential-privacy explainer: 2-col + numbered steps */
.dts-page .dts-dp { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; margin-top: 8px; }
.dts-page .cap-sec__sub strong { color: var(--cap-c-ink); font-weight: 600; }
.dts-page .dts-dp__col { display: flex; flex-direction: column; gap: 16px; }
/* 왼쪽 정의 카드가 늘어나 경계 콜아웃이 오른쪽 카드 바닥선에 맞도록 */
.dts-page .dts-dp__col > .dts-dp__frame { flex: 1; }
.dts-page .dts-dp__frame { background: #fff; border: 1px solid var(--cap-c-line); border-radius: var(--cap-r-lg); padding: 24px; }
/* h3 — lock size/weight against the global h3 {28px !important} trap */
.dts-page .dts-dp__h { font-size: 16px !important; font-weight: 700 !important; color: var(--cap-c-ink); line-height: 1.3 !important; margin: 0 0 18px; }
.dts-page .dts-dp__p { font-size: 14px; line-height: 1.65; color: var(--cap-c-ink-soft); margin: 0 0 12px; }
.dts-page .dts-dp__p:last-of-type { margin-bottom: 0; }
/* Callout = design-system .callout (violet-soft card, full thin border, radius lg).
   No left-bar accent (not a DS pattern). */
.dts-page .dts-note {
  margin-top: 18px; padding: 18px 20px; background: var(--cap-c-primary-soft);
  border: 1px solid rgba(138,119,224,0.22); border-radius: var(--cap-r-lg);
}
.dts-page .dts-note__k { font-family: var(--cap-f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent-violet); margin-bottom: 6px; }
.dts-page .dts-note__t { font-size: 13.5px; line-height: 1.7; color: var(--cap-c-ink-soft); margin: 0; }
.dts-page .dts-steps { display: flex; flex-direction: column; }
.dts-page .dts-step { display: flex; gap: 14px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--cap-c-line); }
.dts-page .dts-step:first-child { padding-top: 0; border-top: 0; }
.dts-page .dts-step:last-child { padding-bottom: 0; }
/* Plain mono number (DS standard), not a circular badge. baseline-aligned to title. */
.dts-page .dts-step__n { flex: 0 0 22px; font-family: var(--cap-f-mono); font-size: 12px; font-weight: 600; color: var(--c-accent-violet); line-height: 1.4; }
.dts-page .dts-step__t { font-size: 14px; font-weight: 600; color: var(--cap-c-ink); line-height: 1.4; margin-bottom: 3px; }
.dts-page .dts-step__b { font-size: 13px; line-height: 1.6; color: var(--cap-c-ink-soft); margin: 0; }

/* Comparison table */
.dts-page .dts-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--cap-c-line); border-radius: var(--cap-r-xl); box-shadow: 0 1px 2px rgba(28,28,28,0.04), 0 10px 30px rgba(28,28,28,0.05); }
.dts-page .dts-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.dts-page .dts-table th, .dts-page .dts-table td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--cap-c-line-soft); vertical-align: top; }
.dts-page .dts-table thead th { font-family: var(--cap-f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cap-c-muted); font-weight: 600; background: var(--cap-c-bg-soft); border-bottom: 1px solid var(--cap-c-line); }
.dts-page .dts-table tbody tr:last-child td { border-bottom: 0; }
.dts-page .dts-table th.dts-hl, .dts-page .dts-table td.dts-hl { background: var(--cap-c-primary-soft); color: var(--cap-c-ink); }
.dts-page .dts-table thead th.dts-hl { color: var(--c-accent-violet); background: #ece6fb; }
.dts-page .dts-table .dts-row-label { font-weight: 600; color: var(--cap-c-ink); }
.dts-page .dts-y { color: var(--c-accent-violet); font-weight: 700; margin-right: 6px; }
.dts-page .dts-n { color: var(--cap-c-muted); margin-right: 6px; }

/* Integration modes */
/* Deployment: row1 = Mode A | Mode B (2-col), row2 = 4 industry cards */
.dts-page .dts-int { display: flex; flex-direction: column; }
.dts-page .dts-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.dts-page .dts-mode { background: #fff; border: 1px solid var(--cap-c-line); border-radius: var(--cap-r-lg); padding: 24px 22px; }
/* Mode B(연동형)가 강조 — 보라 테두리+톤+그림자 */
.dts-page .dts-mode--key { border: 1.5px solid var(--c-accent-violet); background: linear-gradient(180deg, var(--cap-c-primary-soft) 0%, #fff 60%); box-shadow: var(--cap-sh-sm); }
.dts-page .dts-mode__k { font-family: var(--cap-f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cap-c-muted); margin: 0 0 10px; }
.dts-page .dts-mode--key .dts-mode__k { color: var(--c-accent-violet); }
/* h3 — lock against global h3 {28px !important} trap */
.dts-page .dts-modes .dts-mode__t { font-size: 17px !important; font-weight: 700 !important; color: var(--cap-c-ink); line-height: 1.3 !important; letter-spacing: -0.2px !important; margin: 0 0 12px; }
.dts-page .dts-mode__b { font-size: 13px; line-height: 1.65; color: var(--cap-c-ink-soft); margin: 0; }
/* 사례 묶음 캡션 — 가벼운 mono 라벨로 '실제 배포' 프레이밍 */
.dts-page .dts-uc__cap { font-family: var(--cap-f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-c-muted); text-align: center; margin: 24px 0; }
.dts-page .dts-uc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
/* 하단 사례 = 카드 제거, 세로선 구분만 (가장 낮은 위계) */
.dts-page .dts-uc__item { background: transparent; border: 0; border-left: 1px solid var(--cap-c-line); padding: 2px 24px; }
.dts-page .dts-uc__item:first-child { border-left: 0; padding-left: 0; }
.dts-page .dts-uc__item .dts-uc__kind { font-family: var(--cap-f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent-violet); margin: 0 0 10px; }
.dts-page .dts-uc__item .dts-uc__t { font-size: 13.5px; font-weight: 700; color: var(--cap-c-ink); margin: 0 0 9px; line-height: 1.45; letter-spacing: -0.1px; }
.dts-page .dts-uc__item .dts-uc__copy { font-size: 12.5px; line-height: 1.65; color: var(--cap-c-ink-soft); margin: 0; }

@media (max-width: 980px) {
  .dts-page .dts-uc { grid-template-columns: repeat(2, 1fr); }  /* 2x2 */
  .dts-page .dts-uc__item:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .dts-page .dts-uc__item:nth-child(n+3) { border-top: 1px solid var(--cap-c-line); padding-top: 22px; margin-top: 6px; }
}
@media (max-width: 900px) {
  .dts-page .dts-stats { grid-template-columns: repeat(2, 1fr); }
  .dts-page .dts-grid { grid-template-columns: 1fr; }
  .dts-page .dts-dp { grid-template-columns: 1fr; gap: 24px; }
  .dts-page .dts-modes { grid-template-columns: 1fr; }  /* 모드 세로 스택 */
}
@media (max-width: 560px) {
  .dts-page .dts-uc { grid-template-columns: 1fr; }
  .dts-page .dts-uc__item { border-left: 0; padding: 22px 0 0; border-top: 1px solid var(--cap-c-line); margin-top: 0; }
  .dts-page .dts-uc__item:first-child { border-top: 0; padding-top: 0; }
}