/* ==========================================================================
   NeuralWave — 인터랙티브 기술 데모 엔진 v3 (A/B/C 공용)
   call: 라이브 통화 트랜스크립트 콘솔 / mystic: 미스틱데이 앱 프레임
   boost: STT 엔지니어링 콘솔 / fizbuz: 칸반 발행 파이프라인
   ========================================================================== */

.nw-demo {
  --d-ink: #0A1830;
  --d-muted: #5D6B80;
  --d-faint: #93A0B4;
  --d-accent: #3D7BFF;
  --d-bg: #FFFFFF;
  --d-soft: #F1F4F9;
  --d-hair: rgba(10, 24, 48, 0.1);
  --d-ok: #2BC48A;
  --d-err: #E05252;
  --md-purple: #5B2FA0;
  /* 한글은 Pretendard로 폴백 — 시스템 고정폭(굴림 계열)으로 떨어지지 않게 */
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Pretendard Variable", Pretendard, monospace;
  width: 100%; max-width: 580px;
  font-size: 15.5px; color: var(--d-ink);
  position: relative;
}
.nw-demo .demo-cap {
  margin-top: 14px; font-size: 13.5px; color: var(--d-faint);
  text-align: center; line-height: 1.6;
}
.nw-demo.on-dark .demo-cap { color: rgba(234, 240, 250, 0.5); }

.nw-demo .shell {
  background: var(--d-bg);
  border: 1px solid var(--d-hair);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(10, 24, 48, 0.16), 0 2px 8px rgba(10, 24, 48, 0.05);
  overflow: hidden;
}
.nw-demo.on-dark .shell { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.1); }
.nw-demo .shead {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-bottom: 1px solid var(--d-hair);
  font-size: 13.5px; font-weight: 700; color: var(--d-muted);
  background: var(--d-bg);
}
.nw-demo .shead .live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--d-ok); flex: 0 0 auto;
  animation: nw-pulse 2.2s ease-out infinite;
}
@keyframes nw-pulse {
  0% { box-shadow: 0 0 0 0 rgba(43, 196, 138, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(43, 196, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 196, 138, 0); }
}
.nw-demo .shead .sim {
  margin-left: auto; font-size: 13px; font-weight: 800; color: var(--d-faint);
  border: 1px solid var(--d-hair); border-radius: 999px; padding: 3px 10px;
  letter-spacing: 0.04em; white-space: nowrap;
}
.nw-demo .cursor {
  display: inline-block; width: 2px; height: 1.05em; background: var(--d-accent);
  vertical-align: -0.15em; margin-left: 1px;
  animation: nw-blink 0.8s step-end infinite;
}
@keyframes nw-blink { 50% { opacity: 0; } }
.nw-demo svg.ic { display: block; width: 100%; height: 100%; }

/* 파형 */
.nw-demo .wave { display: flex; align-items: center; gap: 2.5px; height: 26px; }
.nw-demo .wave i {
  flex: 1; min-width: 2.5px; max-width: 4px; border-radius: 2px;
  background: currentColor; height: 16%;
  transition: height 90ms ease;
}

/* 세그먼트 토글 */
.nw-demo .seg {
  display: inline-flex; background: var(--d-soft);
  border-radius: 999px; padding: 4px; position: relative;
}
.nw-demo .seg button {
  position: relative; z-index: 1;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 800; color: var(--d-muted);
  padding: 8px 18px; border-radius: 999px;
  transition: color 300ms ease;
}
.nw-demo .seg button.on { color: #fff; }
.nw-demo .seg .knob {
  position: absolute; top: 4px; bottom: 4px; border-radius: 999px;
  background: var(--d-accent);
  box-shadow: 0 4px 14px rgba(61, 123, 255, 0.4);
  transition: left 380ms cubic-bezier(0.22, 1, 0.36, 1), width 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   1) AICC — 라이브 통화 트랜스크립트 콘솔
   ========================================================================== */
.dcall3 .sess {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--d-hair);
  font-size: 13px; color: var(--d-muted);
}
.dcall3 .sess .ph-ic {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(140deg, #3D7BFF, #2E5FD6);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  padding: 7px;
}
.dcall3 .sess .stx { font-weight: 700; }
.dcall3 .sess .stx b { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--d-ink); }
.dcall3 .sess .stages { margin-left: auto; display: inline-flex; gap: 5px; }
.dcall3 .sess .stages b {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  color: var(--d-faint); background: var(--d-soft);
  border-radius: 999px; padding: 4px 10px;
  transition: background 380ms ease, color 380ms ease, box-shadow 380ms ease;
}
.dcall3 .sess .stages b.on {
  background: var(--d-accent); color: #fff;
  box-shadow: 0 4px 14px rgba(61, 123, 255, 0.4);
}
.dcall3 .sess .stages b.done { background: rgba(61, 123, 255, 0.13); color: var(--d-accent); }

.dcall3 .tr { padding: 16px 18px 6px; min-height: 236px; display: flex; flex-direction: column; gap: 13px; }
.dcall3 .trow {
  display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start;
  opacity: 0; transform: translateY(10px);
  transition: opacity 450ms ease, transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dcall3 .trow.show { opacity: 1; transform: none; }
.dcall3 .trow .who .nm {
  display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.03em;
  color: var(--d-faint);
}
.dcall3 .trow.agent .who .nm { color: var(--d-accent); }
.dcall3 .trow .who .wave {
  width: 34px; height: 14px; margin-top: 5px; color: var(--d-accent);
  opacity: 0; transition: opacity 250ms;
}
.dcall3 .trow .who .wave.live { opacity: 1; }
.dcall3 .trow .say {
  font-size: 15.5px; line-height: 1.65; color: var(--d-ink);
  padding-bottom: 12px; border-bottom: 1px solid var(--d-hair);
}
.dcall3 .trow:last-child .say { border-bottom: 0; }
.dcall3 .trow.agent .say { color: var(--d-ink); }
.dcall3 .kw {
  color: var(--d-accent); font-weight: 800;
  background: rgba(61, 123, 255, 0.1); border-radius: 4px; padding: 0 3px;
}
.dcall3 .kchip {
  display: inline-block; margin-left: 7px;
  font-size: 12px; font-weight: 800; color: var(--d-accent);
  border: 1px solid rgba(61, 123, 255, 0.35); border-radius: 999px; padding: 1.5px 8px;
  vertical-align: 1.5px; white-space: nowrap;
  opacity: 0; transform: scale(0.7);
  transition: opacity 340ms ease, transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dcall3 .kchip.pop { opacity: 1; transform: none; }
.dcall3 .tsys {
  font-family: var(--mono); font-size: 12px; color: var(--d-faint);
  text-align: center; letter-spacing: 0.04em;
  opacity: 0; transition: opacity 400ms;
}
.dcall3 .tsys.show { opacity: 1; }
.dcall3 .cfoot {
  border-top: 1px solid var(--d-hair);
  padding: 10px 18px; font-size: 13px; color: var(--d-faint);
}

/* ==========================================================================
   bare 변형 (홈 전용) — '연출 데모 카드'가 아니라 실제 프로그램 화면처럼.
   원칙: ① 모든 데모는 고정 크기를 갖고 애니메이션은 그 안에서만 논다(주변 레이아웃 불변)
        ② 각진 면(6~10px)·플랫 서피스·모노스페이스 상태 표시 ③ 헤더·뱃지·캡션 없음
   ========================================================================== */
.nw-demo.bare .shell {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
/* 둥근 필 요소들 → 각진 컨트롤 */
.nw-demo.bare .seg, .nw-demo.bare .seg button, .nw-demo.bare .seg .knob { border-radius: 7px; }
.nw-demo.bare .seg .knob { box-shadow: none; }

/* call — 통화 콘솔: 타이머 모노, 트랜스크립트는 고정 높이 안에서 아래부터 차오른다 */
.nw-demo.bare .dcall3 .sess {
  padding-left: 0; padding-right: 0;
  font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.02em;
}
.nw-demo.bare .dcall3 .sess .ph-ic { border-radius: 7px; }
/* 통화 트랜스크립트: 채팅이 아니라 통화라서 위에서부터 한 줄씩 내려온다 */
.nw-demo.bare .dcall3 .tr {
  padding-left: 0; padding-right: 0;
  height: 276px; min-height: 0; overflow: hidden;
  justify-content: flex-start;
}
.nw-demo.bare .dcall3 .kw { border-radius: 3px; }

/* mystic — 앱 프레임: 고정 높이 창, 채팅은 하단 앵커 */
.nw-demo.bare .shell.demp2 { border: 1px solid var(--d-hair); border-radius: 10px; overflow: hidden; }
.nw-demo.bare .demp2 .app { height: 400px; min-height: 0; }
.nw-demo.bare .demp2 .chat { overflow: hidden; justify-content: flex-end; }
.nw-demo.bare .demp2 .msg .bb, .nw-demo.bare .demp2 .typing-b {
  border-radius: 8px; border-bottom-left-radius: 3px; box-shadow: none;
}
.nw-demo.bare .demp2 .msg.me .bb { border-radius: 8px; border-bottom-right-radius: 3px; }
.nw-demo.bare .demp2 .abar .in, .nw-demo.bare .demp2 .abar .snd { border-radius: 7px; }

/* boost — 라이트 콘솔: 창 프레임 + 출력 영역 고정 높이 */
.nw-demo.bare .shell.dbst2 { background: var(--d-bg); border: 1px solid var(--d-hair); border-radius: 10px; overflow: hidden; }
.nw-demo.bare .dbst2 .track, .nw-demo.bare .dbst2 .dict { border-radius: 6px; }
.nw-demo.bare .dbst2 .dict span.w { border-radius: 5px; }
.nw-demo.bare .dbst2 .tx { height: 5em; min-height: 0; overflow: hidden; }

/* 역량 쇼케이스(.visual.plain 내부)와 .boxed 지정 인스턴스의 call·fizbuz 데모는
   앱 프레임처럼 경계선 있는 창으로. (홈 인사 섹션의 call 데모는 경계선 없이 유지) */
.show-block .visual.plain .nw-demo.bare .shell.dcall3,
.show-block .visual.plain .nw-demo.bare .shell.dfz3,
.nw-demo.bare.boxed .shell.dcall3,
.nw-demo.bare.boxed .shell.dfz3 {
  background: var(--d-bg); border: 1px solid var(--d-hair); border-radius: 10px; overflow: hidden;
}
.show-block .visual.plain .nw-demo.bare .dcall3 .sess,
.show-block .visual.plain .nw-demo.bare .dcall3 .tr,
.nw-demo.bare.boxed .dcall3 .sess,
.nw-demo.bare.boxed .dcall3 .tr { padding-left: 18px; padding-right: 18px; }
.show-block .visual.plain .nw-demo.bare .dfz3 .srcline,
.nw-demo.bare.boxed .dfz3 .srcline { padding-left: 16px; padding-right: 16px; }
.show-block .visual.plain .nw-demo.bare .dfz3 .board,
.nw-demo.bare.boxed .dfz3 .board { padding-left: 14px; padding-right: 14px; }
.show-block .visual.plain .nw-demo.bare .dfz3 .bstamp,
.nw-demo.bare.boxed .dfz3 .bstamp { padding-left: 16px; padding-right: 16px; }

/* fizbuz — 칸반 보드: 컬럼 고정 높이, 카드 이동은 그 안에서만 */
.nw-demo.bare .dfz3 .srcline { padding-left: 0; padding-right: 0; }
.nw-demo.bare .dfz3 .srcline .ico-img { border-radius: 6px; }
.nw-demo.bare .dfz3 .board { padding-left: 0; padding-right: 0; min-height: 0; }
/* 4개 채널이 모두 발행되므로 카드 4장이 다 보여야 한다(푸터의 "4개 채널 발행 완료"와 일치) */
.nw-demo.bare .dfz3 .bcol { height: 312px; min-height: 0; overflow: hidden; border-radius: 6px; }
.nw-demo.bare .dfz3 .bcard { border-radius: 5px; box-shadow: none; }
.nw-demo.bare .dfz3 .bh .bn { border-radius: 4px; }
.nw-demo.bare .dfz3 .bstamp { font-family: var(--mono); font-size: 12.5px; padding-left: 0; padding-right: 0; }


/* ==========================================================================
   2) MysticDay — 실브랜드 앱 프레임
   ========================================================================== */
.demp2 .app { background: #FBF9FE; min-height: 348px; display: flex; flex-direction: column; }
.demp2 .ahead {
  background: #fff; padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(91, 47, 160, 0.08);
  display: flex; align-items: center; gap: 8px;
}
.demp2 .ahead .moon { width: 20px; height: 20px; color: var(--md-purple); }
.demp2 .ahead .ttl { font-size: 14.5px; font-weight: 800; color: var(--md-purple); letter-spacing: -0.01em; }
.demp2 .ahead a.ttl:hover { text-decoration: underline; text-underline-offset: 3px; }
.demp2 .ahead .ttl .ext { font-size: 13.5px; margin-left: 4px; opacity: 0.65; }
.demp2 .ahead .note {
  margin-left: auto; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--d-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demp2 .chat { flex: 1; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; }
.demp2 .msg { display: flex; gap: 8px; align-items: flex-end; }
.demp2 .msg .t { font-size: 12px; color: #B9AECB; flex: 0 0 auto; }
.demp2 .msg.me { flex-direction: row-reverse; }
.demp2 .msg .bb {
  max-width: 78%; padding: 10px 13px; font-size: 13.5px; line-height: 1.6;
  border-radius: 15px; background: #fff; color: #2A1E3E;
  border: 1px solid rgba(91, 47, 160, 0.08);
  box-shadow: 0 2px 8px rgba(91, 47, 160, 0.05);
  border-bottom-left-radius: 4px;
  white-space: pre-line;
}
.demp2 .msg.me .bb {
  background: var(--md-purple); color: #fff; border: 0;
  border-bottom-left-radius: 15px; border-bottom-right-radius: 4px;
}
.demp2 .msg .who {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(140deg, #7A4FC8, var(--md-purple));
  display: flex; align-items: center; justify-content: center;
}
.demp2 .msg .who svg { width: 13px; height: 13px; color: #fff; }
.demp2 .typing-b {
  display: inline-flex; gap: 4px; align-items: center;
  background: #fff; border: 1px solid rgba(91, 47, 160, 0.08);
  border-radius: 15px; border-bottom-left-radius: 4px;
  padding: 12px 14px; width: fit-content;
}
.demp2 .typing-b i {
  width: 5px; height: 5px; border-radius: 50%; background: #C9B8E8;
  animation: nw-blink2 1.1s ease-in-out infinite;
}
.demp2 .typing-b i:nth-child(2) { animation-delay: 0.16s; }
.demp2 .typing-b i:nth-child(3) { animation-delay: 0.32s; }
@keyframes nw-blink2 { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.demp2 .abar {
  background: #fff; border-top: 1px solid rgba(91, 47, 160, 0.08);
  padding: 9px 14px; display: flex; gap: 9px; align-items: center;
}
.demp2 .abar .in {
  flex: 1; min-width: 0; background: #F4F0FA; border-radius: 999px;
  font-size: 14px; color: #B9AECB; padding: 9px 15px;
  display: flex; align-items: center; overflow: hidden; min-height: 34px;
}
/* 입력창에 실제로 타이핑되는 동안은 본문 색으로 */
.demp2 .abar .in.is-typing { color: #2A1E3E; }
/* 실제 입력창처럼 뒤쪽(커서 쪽)이 보이도록 — 넘치면 앞이 잘린다 */
/* 입력 텍스트는 실제 입력창처럼 왼쪽부터 쌓인다. 넘치면 JS가 scrollLeft로 커서를 따라간다 */
.demp2 .abar .in .intxt { white-space: nowrap; flex: 0 0 auto; }
.demp2 .cursor { background: var(--md-purple); }
.demp2 .abar .snd {
  width: 30px; height: 30px; border-radius: 50%; background: var(--md-purple);
  display: flex; align-items: center; justify-content: center; color: #fff;
  padding: 8px;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms;
}
.demp2 .abar .snd.hot {
  transform: scale(1.14);
  box-shadow: 0 0 0 5px rgba(91, 47, 160, 0.16);
}
.demp2 .seg .knob { background: var(--md-purple); box-shadow: 0 4px 14px rgba(91, 47, 160, 0.35); }
.demp2 .abar .seg { flex: 0 0 auto; padding: 3px; }
.demp2 .abar .seg button { padding: 6px 11px; font-size: 13.5px; }
.demp2 .abar .in { white-space: nowrap; }

/* ==========================================================================
   3) 키워드 부스팅 — STT 엔지니어링 콘솔 (라이트)
   ========================================================================== */
.dbst2 .track {
  margin: 16px 16px 0; position: relative;
  background: var(--d-soft);
  border: 1px solid var(--d-hair);
  border-radius: 10px; padding: 12px 14px;
}
.dbst2 .track .wave { height: 30px; color: #9FB6DE; }
.dbst2 .track .wave i { transition: height 120ms ease, background 300ms; }
.dbst2 .track .wave i.hot { background: var(--d-accent); }
.dbst2 .track .head-line {
  position: absolute; top: 6px; bottom: 6px; width: 1.5px;
  background: var(--d-ink); opacity: 0.5; left: 14px; border-radius: 1px;
}
.dbst2 .out { padding: 14px 16px 4px; }
.dbst2 .lbl {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--d-faint); margin-bottom: 7px;
}
.dbst2 .tx { font-size: 15.5px; line-height: 1.65; color: var(--d-ink); min-height: 3.2em; }
.dbst2 .tx .interim { color: var(--d-faint); }
.dbst2 .tx .err {
  color: var(--d-err); font-weight: 800;
  text-decoration: underline wavy rgba(224, 82, 82, 0.55) 1.5px;
  text-underline-offset: 3px;
}
.dbst2 .tx .fix {
  color: var(--d-accent); font-weight: 800;
  background: rgba(61, 123, 255, 0.12); border-radius: 4px; padding: 0 4px;
}
.dbst2 .tx .swap { animation: nw-swap 460ms cubic-bezier(0.22, 1, 0.36, 1); display: inline-block; }
@keyframes nw-swap {
  0% { transform: translateY(6px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.dbst2 .dict {
  margin: 10px 16px 0; padding: 10px 12px;
  border: 1px dashed var(--d-hair); border-radius: 10px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  transition: border-color 400ms, background 400ms;
}
.dbst2.on .dict { border-color: rgba(61, 123, 255, 0.45); border-style: solid; background: rgba(61, 123, 255, 0.06); }
.dbst2 .dict .k {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--d-faint); margin-right: 3px; letter-spacing: 0.06em;
}
.dbst2 .dict span.w {
  font-size: 13.5px; font-weight: 700; color: var(--d-muted);
  background: rgba(10, 24, 48, 0.05); border-radius: 999px; padding: 3px 11px;
  transition: all 350ms;
}
.dbst2.on .dict span.w.hit {
  color: #fff; background: var(--d-accent);
  box-shadow: 0 0 16px rgba(61, 123, 255, 0.35);
}
.dbst2 .foot2 {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; margin-top: 12px;
  border-top: 1px solid var(--d-hair); flex-wrap: wrap;
}
/* 판정 문구는 아래 줄을 통째로 쓴다 — 컨트롤과 한 줄을 나눠 쓰면 글꼴이 커지는 순간 잘린다.
   높이는 한 줄로 고정해 상태가 바뀌어도 데모 크기는 변하지 않는다 */
.dbst2 .verdict {
  font-size: 14px; font-weight: 700; min-height: 1.3em;
  flex: 0 0 100%; order: 2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dbst2 .verdict.bad { color: var(--d-err); }
.dbst2 .verdict.good { color: #1F9E6E; }
.dbst2 .smeta {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--d-faint);
  margin-left: auto; order: 1;
}

/* ==========================================================================
   4) FizBuz — 칸반 발행 파이프라인
   ========================================================================== */
.dfz3 .srcline {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px; border-bottom: 1px solid var(--d-hair);
}
.dfz3 .srcline .ico-img { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto; object-fit: cover; }
.dfz3 .srcline .tt small .mk {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--d-faint); background: var(--d-soft);
  border-radius: 4px; padding: 1px 5px; margin: 0 3px 0 7px;
}
.dfz3 .srcline .tt small .mk:first-child { margin-left: 0; }
.dfz3 .srcline .jst {
  margin-left: auto; font-family: var(--mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--d-faint);
}
.dfz3 .srcline .jst.on { color: var(--d-accent); }
.dfz3 .srcline .jst.ok { color: var(--d-ok); }
.dfz3 .srcline .tt { font-size: 13.5px; font-weight: 800; color: var(--d-ink); }
.dfz3 .srcline .tt small { display: block; font-weight: 600; color: var(--d-faint); font-size: 13px; margin-top: 1px; }

.dfz3 .board {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  padding: 12px 14px 6px; min-height: 224px; align-items: start;
}
.dfz3 .bcol {
  background: var(--d-soft); border-radius: 12px;
  padding: 9px; min-height: 208px;
}
.dfz3 .bh {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 800; color: var(--d-muted);
  padding: 2px 4px 8px; letter-spacing: 0.02em;
}
.dfz3 .bh .bn {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  background: rgba(10, 24, 48, 0.07); color: var(--d-muted);
  border-radius: 999px; padding: 1px 7px;
}
.dfz3 .bl { display: flex; flex-direction: column; gap: 7px; }
.dfz3 .bcard {
  display: flex; align-items: center; gap: 8px;
  background: var(--d-bg); border: 1px solid var(--d-hair); border-radius: 10px;
  padding: 9px 10px;
  box-shadow: 0 2px 8px rgba(10, 24, 48, 0.05);
  position: relative; overflow: hidden;
  will-change: transform;
}
.dfz3 .bcard .dot { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto; }
.dfz3 .bcard.ig .dot { background: linear-gradient(140deg, #6D3FC0, #B33FA8); }
.dfz3 .bcard.th .dot { background: #0A1830; }
.dfz3 .bcard.blg .dot { background: #2BA05A; }
.dfz3 .bcard.sh .dot { background: #E05252; }
.dfz3 .bcard .bi { flex: 1; min-width: 0; }
.dfz3 .bcard .bi b { display: block; font-size: 14px; font-weight: 800; color: var(--d-ink); }
.dfz3 .bcard .bi small { display: block; font-size: 12px; color: var(--d-faint); margin-top: 1px; }
.dfz3 .bcard .st {
  font-size: 11px; font-weight: 800; white-space: nowrap; flex: 0 0 auto;
  color: var(--d-faint);
}
.dfz3 .bcard.making .st { color: var(--d-accent); }
.dfz3 .bcard.done .st { color: var(--d-ok); }
.dfz3 .bcard.done { border-color: rgba(43, 196, 138, 0.35); }
/* 생성 중 셔머 */
.dfz3 .bcard.making::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 25%, rgba(61, 123, 255, 0.12) 50%, transparent 75%);
  background-size: 220% 100%;
  animation: nw-shim 1.1s linear infinite;
}
@keyframes nw-shim { 0% { background-position: 130% 0; } 100% { background-position: -110% 0; } }
.dfz3 .bstamp {
  display: flex; justify-content: center; gap: 14px;
  padding: 10px 16px 13px; border-top: 1px solid var(--d-hair);
  font-size: 13px; color: var(--d-faint); font-variant-numeric: tabular-nums;
}
.dfz3 .bstamp b { color: var(--d-ok); font-weight: 800; }

/* ==========================================================================
   5) 뉴스와이어 — 수집 → 재가공 콘솔
   ========================================================================== */
.dwire { display: flex; flex-direction: column; }
.dwire .wcols { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 6px; align-items: stretch; }
.dwire .wk {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--d-faint); padding-bottom: 9px; border-bottom: 1px solid var(--d-hair); margin-bottom: 10px;
}
.dwire .wlist { height: 232px; overflow: hidden; display: flex; flex-direction: column; gap: 7px; }
.dwire .wi {
  border: 1px solid var(--d-hair); border-radius: 6px; padding: 10px 12px;
  font-size: 13.5px; line-height: 1.45; color: var(--d-ink); background: var(--d-bg);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 320ms ease, transform 320ms var(--nw-ease, cubic-bezier(0.22, 1, 0.36, 1)), border-color 300ms;
}
.dwire .wi.show { opacity: 1; transform: none; }
.dwire .wi small {
  display: block; margin-top: 4px; font-family: var(--mono);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--d-faint);
}
.dwire .wi.out { border-color: rgba(61, 123, 255, 0.4); background: rgba(61, 123, 255, 0.05); }
.dwire .wi.out small { color: var(--d-accent); }
.dwire .warr { display: flex; align-items: center; justify-content: center; color: var(--d-faint); font-size: 14.5px; }
.dwire .wfoot {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--d-hair);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em; color: var(--d-faint);
  display: flex; justify-content: space-between; gap: 10px;
}
.dwire .wfoot b { color: var(--d-ok); font-weight: 700; }

/* ==========================================================================
   6) 블로그 자동화 — 키워드 → 제목 → 초안
   ========================================================================== */
.dblog .bstep { padding: 14px 0; border-bottom: 1px solid var(--d-hair); }
.dblog .bstep:last-child { border-bottom: 0; }
.dblog .bk {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--d-faint); margin-bottom: 10px;
}
.dblog .kws { display: flex; flex-direction: column; gap: 6px; height: 88px; }
.dblog .kw {
  display: grid; grid-template-columns: 1fr 76px 44px; align-items: center; gap: 10px;
  font-size: 13px; color: var(--d-muted);
  opacity: 0; transition: opacity 300ms ease, color 300ms;
}
.dblog .kw.show { opacity: 1; }
.dblog .kw .bar { height: 5px; border-radius: 3px; background: var(--d-soft); overflow: hidden; }
.dblog .kw .bar i { display: block; height: 100%; width: 0; background: #C6D2E6; transition: width 700ms var(--nw-ease, cubic-bezier(0.22, 1, 0.36, 1)), background 300ms; }
.dblog .kw .v { font-family: var(--mono); font-size: 12.5px; color: var(--d-faint); text-align: right; }
.dblog .kw.pick { color: var(--d-ink); font-weight: 700; }
.dblog .kw.pick .bar i { background: var(--d-accent); }
.dblog .kw.pick .v { color: var(--d-accent); font-weight: 700; }
.dblog .btitle { font-size: 16px; font-weight: 700; line-height: 1.5; min-height: 2.9em; color: var(--d-ink); }
.dblog .bbar { height: 6px; border-radius: 3px; background: var(--d-soft); overflow: hidden; }
.dblog .bbar i { display: block; height: 100%; width: 0; background: var(--d-accent); }
.dblog .bmeta {
  margin-top: 10px; display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em; color: var(--d-faint);
}
.dblog .bmeta .st.done { color: var(--d-ok); font-weight: 700; }

/* ==========================================================================
   7) GEO 실험 — 생성형 검색 응답에서 인용 여부 판정
   ========================================================================== */
.dgeo .qline {
  display: flex; align-items: baseline; gap: 9px;
  padding-bottom: 12px; border-bottom: 1px solid var(--d-hair);
}
.dgeo .qk {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--d-faint); flex: 0 0 auto;
}
.dgeo .qt { font-size: 14.5px; font-weight: 700; color: var(--d-ink); line-height: 1.5; }
.dgeo .alabel {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--d-faint); margin: 14px 0 9px;
}
.dgeo .atx { font-size: 14.5px; line-height: 1.72; color: var(--d-ink); height: 6.9em; overflow: hidden; }
.dgeo .atx .cite {
  color: var(--d-accent); font-weight: 800;
  background: rgba(61, 123, 255, 0.1); border-radius: 4px; padding: 0 4px;
}
.dgeo .gfoot {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--d-hair);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em; color: var(--d-faint);
}
.dgeo .gv { font-weight: 700; }
.dgeo .gv.hit { color: var(--d-ok); }
.dgeo .gv.miss { color: var(--d-muted); }
.dgeo .gdots { margin-left: auto; display: inline-flex; gap: 5px; }
.dgeo .gdots i { width: 7px; height: 7px; border-radius: 2px; background: var(--d-soft); display: block; transition: background 300ms; }
.dgeo .gdots i.hit { background: var(--d-ok); }
.dgeo .gdots i.miss { background: #C6D2E6; }

/* ==========================================================================
   8~12) R&D 과제 데모 (근거: 각 과제 연구개발계획서·과업지시서)
   ========================================================================== */
.nw-demo .dk {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--d-faint);
}

/* 8) 구축 자동화 — 디딤돌 R&D */
.dbuild .inrow { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--d-hair); }
.dbuild .chip {
  font-size: 13.5px; font-weight: 700; color: var(--d-muted);
  border: 1px solid var(--d-hair); border-radius: 5px; padding: 5px 10px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 280ms ease, transform 280ms ease, border-color 300ms, color 300ms;
}
.dbuild .chip.show { opacity: 1; transform: none; }
.dbuild .chip.fed { border-color: var(--d-accent); color: var(--d-accent); }
.dbuild .steps { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; height: 156px; }
.dbuild .bs {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--d-faint); transition: color 300ms;
}
.dbuild .bs i {
  width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--d-hair);
  display: block; transition: background 300ms, border-color 300ms;
}
.dbuild .bs .t { font-family: var(--mono); font-size: 12px; opacity: 0; transition: opacity 250ms; }
.dbuild .bs.run { color: var(--d-ink); }
.dbuild .bs.run i { border-color: var(--d-accent); background: rgba(61,123,255,0.18); }
.dbuild .bs.ok { color: var(--d-ink); }
.dbuild .bs.ok i { border-color: var(--d-ok); background: var(--d-ok); }
.dbuild .bs.ok .t { opacity: 1; color: var(--d-ok); }
.dbuild .mets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 14px; border-top: 1px solid var(--d-hair); }
.dbuild .met b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.dbuild .met span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--d-faint); }

/* 9b) 응답 지연 레이스 — 비스트리밍 vs 스트리밍을 실시간으로 돌려 보여준다 */
.dturn .thead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; border-bottom: 1px solid var(--d-hair);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--d-faint);
}
.dturn .clk { font-size: 13.5px; font-weight: 700; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.dturn .tlane { padding: 14px 0; }
.dturn .tlane + .tlane { border-top: 1px solid var(--d-hair); }
.dturn .tk {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 14px; font-weight: 700; color: var(--d-ink); margin-bottom: 9px;
}
.dturn .tv { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--d-faint); font-variant-numeric: tabular-nums; }
.dturn .tlane.done .tv { color: var(--d-ok); }
.dturn .tbar { display: flex; gap: 3px; height: 26px; }
.dturn .sg {
  position: relative; overflow: hidden; border-radius: 4px; background: var(--d-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--d-faint); white-space: nowrap;
}
.dturn .sg i {
  position: absolute; inset: 0; width: 0; border-radius: 4px;
  background: #C6D2E6; transition: width 90ms linear;
}
.dturn .tlane.goal .sg i { background: rgba(61, 123, 255, 0.85); }
.dturn .sg span { position: relative; z-index: 1; }
.dturn .sg.run span, .dturn .sg.fin span { color: var(--d-ink); }
.dturn .tlane.goal .sg.fin span, .dturn .tlane.goal .sg.run span { color: #fff; }
.dturn .tfoot2 {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--d-hair);
  font-size: 13px; line-height: 1.55; color: var(--d-faint);
}
.dturn .tfoot2 b { color: var(--d-ink); font-weight: 700; }

/* 9c) 스트리밍 인식 내부 — 기법이 신호 위에서 무엇을 하는지 (Collabo 2단계 핵심기술 ①②)
   ① 고정 분할 → ② VAD 동적 오버랩 → ③ 키워드 인지 병합 3단계를 같은 화면에서 변형시킨다.
   규격: 헤더 / 단계 / 신호패널 92px / 전사 3칸 / 사전·후보 / 푸터 — 단계가 바뀌어도 높이 고정 */
.dmech .mh {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding-bottom: 9px; border-bottom: 1px solid var(--d-hair);
  font-size: 13px; font-weight: 700; color: var(--d-ink);
}
.dmech .mh small { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--d-faint); white-space: nowrap; }

.dmech .msteps { margin-top: 9px; display: flex; align-items: center; gap: 8px; }
.dmech .msteps .st {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--d-faint); border: 1px solid var(--d-hair); border-radius: 5px; padding: 4px 9px; white-space: nowrap;
  transition: color 300ms, border-color 300ms, background 300ms;
}
.dmech .msteps .st.past { color: var(--d-muted); }
.dmech .msteps .st.on { color: var(--d-accent); border-color: var(--d-accent); background: rgba(61, 123, 255, 0.07); }
.dmech .msteps i { flex: 1; height: 1px; background: var(--d-hair); }

/* --- 신호 패널 --- */
.dmech .sig {
  position: relative; height: 98px; margin-top: 10px;
  border: 1px solid var(--d-hair); border-radius: 7px; background: var(--d-soft);
  padding: 10px 12px 0;
}
.dmech .wf { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.dmech .wf i { flex: 1; border-radius: 1px; background: #B9C6DA; }
/* VAD 트랙 — 발화 구간만 진하게 */
.dmech .vad { display: flex; gap: 2px; height: 5px; margin-top: 6px; }
.dmech .vad i { flex: 1; border-radius: 1px; background: rgba(10, 24, 48, 0.07); transition: background 320ms; }
.dmech .vad i.on { background: #C6D2E6; }
.dmech.step1 .vad i.on, .dmech.step2 .vad i.on { background: var(--d-accent); }
/* 발화 음절을 시간축에 얹어, 경계가 낱말 한가운데를 지나는 게 보이게 한다 */
/* 음절 행과 윈도우 라벨(w1·w2) 행을 분리 — 같은 줄에 두면 라벨이 음절을 덮는다 */
.dmech .syl { position: relative; height: 20px; margin-top: 6px; }
.dmech .syl span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 13.5px; font-weight: 700; color: var(--d-muted); white-space: nowrap;
}
/* 청크 경계 */
.dmech .cut {
  position: absolute; top: 8px; bottom: 43px; width: 0;
  border-left: 1.5px dashed var(--d-err); transition: border-color 320ms;
}
.dmech.step2 .cut { border-color: rgba(10, 24, 48, 0.22); }
/* VAD 판정으로 확보되는 오버랩 — 경계에서 왼쪽으로 자란다 */
.dmech .ovl {
  position: absolute; top: 8px; bottom: 43px; width: 0;
  background: rgba(61, 123, 255, 0.14); border-left: 1px solid rgba(61, 123, 255, 0.5);
  transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dmech.step1 .ovl, .dmech.step2 .ovl { width: 13%; }
.dmech .ovtag {
  position: absolute; left: 44%; top: 2px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--d-accent);
  opacity: 0; transition: opacity 320ms; white-space: nowrap;
}
.dmech.step1 .ovtag, .dmech.step2 .ovtag { opacity: 1; }
.dmech .wtag {
  position: absolute; bottom: 3px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--d-faint);
}
.dmech .wtag.w1 { left: 14px; }
.dmech .wtag.w2 { left: 57%; transition: left 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.dmech.step1 .wtag.w2, .dmech.step2 .wtag.w2 { left: 44%; }

/* --- 이어 붙인 결과 한 줄 --- */
.dmech .tx {
  margin-top: 9px; height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--d-hair); border-radius: 6px; padding: 0 12px;
}
.dmech .tx .merged { font-size: 13.5px; font-weight: 700; color: var(--d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmech .tx u { text-decoration: none; background: rgba(224, 82, 82, 0.12); border-radius: 3px; padding: 1px 4px; }
.dmech .tx u.join {
  background: rgba(61, 123, 255, 0.13); color: var(--d-accent);
  animation: mc-join 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mc-join { from { letter-spacing: 0.45em; opacity: 0.45; } }
.dmech .tx .vd {
  text-decoration: none; flex: 0 0 auto;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--d-err);
  transition: color 320ms;
}
.dmech.step2 .tx .vd { color: var(--d-ok); }

/* --- 사전 조회와 바이어싱 결과 한 줄 --- */
.dmech .mbot {
  margin-top: 8px; height: 34px; display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--d-hair); padding-top: 10px;
}
.dmech .mbot small {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--d-faint);
  margin-right: 2px;
}
.dmech .dict { display: flex; align-items: center; gap: 4px; }
.dmech .dict .d {
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--d-faint);
  border: 1px solid var(--d-hair); border-radius: 4px; padding: 2px 6px;
  transition: color 300ms, border-color 300ms, background 300ms;
}
.dmech .dict .d.hit { color: var(--d-accent); border-color: var(--d-accent); background: rgba(61, 123, 255, 0.09); }
.dmech .cand { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.dmech .cand b { font-size: 13px; font-weight: 700; color: var(--d-muted); }
.dmech .cand s {
  text-decoration: none; font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  color: var(--d-faint); font-variant-numeric: tabular-nums;
}
.dmech .cand .ar, .dmech .cand .post { opacity: 0; transition: opacity 320ms; }
.dmech .cand .ar { font-style: normal; font-size: 11.5px; color: var(--d-faint); }
.dmech.step2 .cand .ar, .dmech.step2 .cand .post { opacity: 1; }
.dmech.step2 .cand .post { color: var(--d-accent); }
.dmech.step2 .cand .pre { text-decoration: line-through; opacity: 0.5; }
.dmech .nore {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--d-faint);
}

/* 13) 독자 페르소나 평가 루프 — 연구개발기반 설립지원사업 (AI 스토리 엔진)
   규격: 단계 표시 → 초고 상자(고정 74px) → 점수 4행(고정 101px) → 판정 푸터. 모두 고정 높이 */
.dpersona .pstep {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 11px; border-bottom: 1px solid var(--d-hair);
}
.dpersona .pstep span {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--d-faint); border: 1px solid var(--d-hair); border-radius: 5px;
  padding: 4px 9px; white-space: nowrap;
  transition: color 260ms, border-color 260ms, background 260ms;
}
.dpersona .pstep span.on { color: var(--d-accent); border-color: var(--d-accent); background: rgba(61, 123, 255, 0.07); }
.dpersona .pstep i { flex: 1; height: 1px; background: var(--d-hair); }

.dpersona .pdbox {
  margin-top: 12px; height: 74px; overflow: hidden;
  border: 1px solid var(--d-hair); border-radius: 8px; background: var(--d-soft); padding: 10px 13px;
}
.dpersona .pver {
  display: block; margin-bottom: 5px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--d-faint);
}
.dpersona .pdraft { font-size: 13.5px; line-height: 1.55; color: var(--d-ink); }

.dpersona .plabel {
  margin: 13px 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--d-muted);
}
.dpersona .plabel em {
  font-style: normal; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.03em; color: var(--d-faint); white-space: nowrap;
}
.dpersona .plist { display: flex; flex-direction: column; gap: 7px; height: 101px; }
.dpersona .prow {
  display: grid; grid-template-columns: 110px 1fr 30px 30px; align-items: center; gap: 9px; height: 20px;
  font-size: 13.5px; color: var(--d-muted);
  /* 평가 전에도 골격은 남겨 빈 공간이 생기지 않게 한다 */
  opacity: 0.34; transition: opacity 300ms ease;
}
.dpersona .prow.show { opacity: 1; }
.dpersona .prow .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpersona .prow .bar { position: relative; height: 7px; border-radius: 4px; background: var(--d-soft); }
.dpersona .prow .bar i {
  display: block; height: 100%; width: 0; border-radius: 4px; background: #C6D2E6;
  transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1), background 380ms;
}
.dpersona .prow.good .bar i { background: var(--d-accent); }
/* 채택 기준선 4.0 = 80% */
.dpersona .prow .bar .pass { position: absolute; top: -4px; bottom: -4px; left: 80%; width: 0; border-left: 1px dashed rgba(10, 24, 48, 0.3); }
.dpersona .prow .sc {
  font-family: var(--mono); font-size: 13.5px; font-weight: 700; text-align: right;
  color: var(--d-faint); font-variant-numeric: tabular-nums;
}
.dpersona .prow.good .sc { color: var(--d-accent); }
.dpersona .prow .dl { font-family: var(--mono); font-size: 12px; font-weight: 700; text-align: right; color: transparent; }
.dpersona .prow .dl.up { color: var(--d-ok); }
.dpersona .pfoot {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--d-hair);
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--d-faint);
}
.dpersona .pfoot .avg b { color: var(--d-ink); font-weight: 700; }
.dpersona .pfoot .act { font-weight: 700; white-space: nowrap; }
.dpersona .pfoot .act.rev { color: var(--d-err); }
.dpersona .pfoot .act.ok { color: var(--d-ok); }

/* 9) 응답 지연 실측 — Collabo 2단계 (근거: 2단계 발표자료 슬라이드 14~15) */
.dstream .slane { padding: 13px 0; }
.dstream .slane + .slane { border-top: 1px solid var(--d-hair); }
.dstream .lk {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 14px; font-weight: 700; color: var(--d-ink); margin-bottom: 9px;
}
.dstream .lk small { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: var(--d-faint); }
.dstream .track2 { position: relative; height: 14px; border-radius: 7px; background: var(--d-soft); overflow: hidden; }
.dstream .track2 i { display: block; height: 100%; width: 0; border-radius: 7px; background: #C6D2E6; transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.dstream .slane.goal .track2 i { background: var(--d-accent); }
.dstream .lv {
  margin-top: 7px; font-family: var(--mono); font-size: 13.5px; font-weight: 700;
  color: var(--d-muted); font-variant-numeric: tabular-nums;
}
.dstream .slane.goal .lv { color: var(--d-accent); }
/* 만족도 임계선 (2초) */
.dstream .scale { position: relative; height: 22px; margin-top: 4px; }
.dstream .thresh {
  position: absolute; top: -186px; bottom: 0; width: 1px;
  border-left: 1px dashed var(--d-err);
}
.dstream .thresh span {
  position: absolute; bottom: 0; left: 6px; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--d-err);
}
.dstream .sfoot {
  margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--d-hair);
  font-size: 13px; line-height: 1.5; color: var(--d-faint);
}
.dstream .sfoot b { color: var(--d-ink); font-weight: 700; }

/* 10) 툴콜 확장성 — 딥테크 시제품 (근거: 결과보고서 — config 교체만으로 도메인 전환)
   규격: 좌우 2열 대조(갈아끼우는 것 / 그대로인 것), 두 열 모두 5행 × 26px 고정 = 150px */
.dtools .dom {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 12px; border-bottom: 1px solid var(--d-hair);
}
.dtools .dom .dlab {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--d-faint); margin-right: 2px;
}
.dtools .dom .db {
  font-size: 13px; font-weight: 700; color: var(--d-faint);
  border: 1px solid var(--d-hair); border-radius: 6px; padding: 5px 11px;
  transition: background 260ms ease, border-color 260ms ease, color 260ms ease;
}
.dtools .dom .db.on { background: var(--d-accent); border-color: var(--d-accent); color: #fff; }

.dtools .tcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 13px; }
.dtools .ch {
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--d-ink);
}
.dtools .ch em {
  font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--d-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dtools .clist { display: flex; flex-direction: column; gap: 5px; height: 150px; }
.dtools .cl {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px;
  border: 1px solid var(--d-hair); border-radius: 5px; padding: 0 9px; height: 26px;
  font-family: var(--mono); font-size: 13px; color: var(--d-ink);
  transition: border-color 280ms, background 280ms;
}
.dtools .cl > span { color: var(--d-faint); white-space: nowrap; }
.dtools .cl > b { font-weight: 700; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtools .cl.fix { background: var(--d-soft); border-color: transparent; }
.dtools .cl.fix > b { color: var(--d-muted); }
.dtools .cl.flip { animation: tl-flip 640ms ease; }
@keyframes tl-flip {
  0% { background: rgba(61, 123, 255, 0.16); border-color: var(--d-accent); }
  100% { background: transparent; border-color: var(--d-hair); }
}
.dtools .cl.tool > span { color: var(--d-ink); }
.dtools .cl.tool > b {
  color: var(--d-faint); font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 12.5px;
}
.dtools .cl.tool.hit { border-color: var(--d-accent); background: rgba(61, 123, 255, 0.06); }
.dtools .cf {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--d-hair);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--d-faint);
  transition: color 280ms;
}
.dtools .cf i { width: 6px; height: 6px; border-radius: 50%; background: #C6D2E6; flex: 0 0 auto; transition: background 280ms; }
.dtools .cf.ok { color: var(--d-ok); }
.dtools .cf.ok i { background: var(--d-ok); }
.dtools .cf.beat { color: var(--d-accent); }
.dtools .cf.beat i { background: var(--d-accent); animation: tl-beat 760ms ease; }
@keyframes tl-beat { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.9); } }

/* 10b) 3-Layer 에이전트 (미사용 — 아키텍처 도해로 대체) */
.dagent .lay {
  border: 1px solid var(--d-hair); border-radius: 8px; padding: 13px 14px; margin-bottom: 8px;
  transition: border-color 300ms, background 300ms, transform 300ms;
}
.dagent .lay.on { border-color: var(--d-accent); background: rgba(61,123,255,0.05); transform: translateX(4px); }
.dagent .lay .lk { display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--d-faint); }
.dagent .lay.on .lk { color: var(--d-accent); }
.dagent .lay .ld { display: block; margin-top: 5px; font-size: 13px; color: var(--d-ink); }
.dagent .lay .sub { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.dagent .lay .sub span {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  border: 1px solid var(--d-hair); border-radius: 4px; padding: 3px 7px; color: var(--d-faint);
  transition: all 250ms;
}
.dagent .lay .sub span.hit { border-color: var(--d-accent); color: #fff; background: var(--d-accent); }
.dagent .atrace {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--d-hair);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--d-muted);
  height: 2.6em; line-height: 1.3;
}

/* 11) 독서부담지수 RBI — 문체부 출판콘텐츠 과제(에온드에온 공동)
   규격: 상단 헤드 / 좌(뷰어 150px 고정) · 우(게이지) / 정책 2셀 / 근거 푸터.
        구간이 바뀌어도 바깥 높이는 고정 — 뷰어 안에서만 변한다 */
.drbi .rhead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding-bottom: 11px; border-bottom: 1px solid var(--d-hair);
  font-size: 13.5px; font-weight: 700; color: var(--d-ink);
}
.drbi .rhead b { font-family: var(--mono); font-weight: 800; }
.drbi .rhead small { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--d-faint); white-space: nowrap; }

.drbi .rcols { display: grid; grid-template-columns: 1.18fr 1fr; gap: 15px; margin-top: 13px; align-items: start; }

/* --- 좌: 실제로 바뀌는 전자책 뷰어 --- */
.drbi .page {
  height: 158px; overflow: hidden;
  border: 1px solid var(--d-hair); border-radius: 7px; padding: 13px 14px;
  background: #fff; transition: background 420ms ease;
}
.drbi .page p {
  font-size: 13.5px; line-height: 1.78; color: var(--d-ink); overflow: hidden;
  transition: font-size 420ms ease, line-height 420ms ease, opacity 420ms ease,
              max-height 420ms ease, margin-top 420ms ease;
  max-height: 6em;
}
.drbi .page p + p { margin-top: 8px; }
/* 40~59 약한 부담 — 행간·여백 미세 조정 */
.drbi .page.lv1 p { line-height: 2.0; }
/* 60~79 중간 부담 — 글자 크기가 아니라 '한 화면 문장 수'를 줄인다 */
.drbi .page.lv2 p { line-height: 2.0; }
.drbi .page.lv2 p:nth-child(3) { opacity: 0; max-height: 0; margin-top: 0; }
/* 80~100 높은 부담 — 집중모드, 화면 정보량 대폭 축소 */
.drbi .page.lv3 { background: #FAF7F1; }
.drbi .page.lv3 p { line-height: 2.2; }
.drbi .page.lv3 p:nth-child(1) { opacity: 0.22; }
.drbi .page.lv3 p:nth-child(3) { opacity: 0; max-height: 0; margin-top: 0; }

.drbi .pmeta {
  margin-top: 9px; display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 22px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--d-faint);
}
.drbi .pmeta .card {
  border: 1px solid var(--d-hair); border-radius: 4px; padding: 3px 7px; white-space: nowrap;
  opacity: 0; transition: opacity 360ms ease, color 360ms, border-color 360ms;
}
.drbi.lv1 .pmeta .card, .drbi.lv2 .pmeta .card, .drbi.lv3 .pmeta .card {
  opacity: 1; color: var(--d-accent); border-color: rgba(61, 123, 255, 0.4);
}
/* RBD를 움직인 실제 행동 신호 */
.drbi .sig {
  margin-top: 7px; display: flex; align-items: center; gap: 6px; height: 16px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--d-muted);
}
.drbi .sig i { width: 5px; height: 5px; border-radius: 50%; background: #C6D2E6; flex: 0 0 auto; transition: background 360ms; }
.drbi.lv2 .sig, .drbi.lv3 .sig { color: var(--d-err); }
.drbi.lv2 .sig i, .drbi.lv3 .sig i { background: var(--d-err); }

/* --- 우: 지수 게이지 --- */
.drbi .rnum {
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em; color: var(--d-ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.drbi .rnum small {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--d-faint); margin-left: 6px;
}
.drbi .rband {
  margin-top: 9px; display: inline-block;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--d-muted); border: 1px solid var(--d-hair); border-radius: 5px; padding: 4px 9px;
  transition: color 360ms, border-color 360ms, background 360ms;
}
.drbi.lv2 .rband, .drbi.lv3 .rband { color: var(--d-accent); border-color: var(--d-accent); background: rgba(61, 123, 255, 0.07); }
.drbi .subs { margin-top: 15px; display: flex; flex-direction: column; gap: 9px; }
.drbi .sub { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 8px; }
.drbi .sub span { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--d-ink); }
.drbi .sub i.bar { height: 5px; border-radius: 3px; background: var(--d-soft); display: block; overflow: hidden; }
.drbi .sub i.bar em { display: block; height: 100%; width: 0; background: var(--d-accent); transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1); }
.drbi .sub u {
  grid-column: 2; text-decoration: none; margin-top: -2px;
  font-size: 12px; color: var(--d-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- 구간별 정책 (계획서 RBI 구간표) --- */
.drbi .rpol { margin-top: 14px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
.drbi .pl {
  border: 1px solid var(--d-hair); border-radius: 6px; padding: 8px 11px; height: 50px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  transition: border-color 360ms, background 360ms;
}
.drbi .pl small {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--d-faint);
}
.drbi .pl span { font-size: 13.5px; font-weight: 700; color: var(--d-ink); line-height: 1.35; }
.drbi.lv2 .pl, .drbi.lv3 .pl { border-color: rgba(61, 123, 255, 0.4); background: rgba(61, 123, 255, 0.045); }

.drbi .rfoot {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--d-hair);
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--d-faint);
}
.drbi .rfoot b { color: var(--d-ink); font-weight: 700; }

/* 12) 생성 코드 검증 — Agentic AICC 자체 연구 */
.dverify .code {
  margin: 0; height: 208px; overflow: hidden;
  font-family: var(--mono); font-size: 14px; line-height: 1.75; color: var(--d-muted);
  border: 1px solid var(--d-hair); border-radius: 8px; padding: 13px 14px; background: var(--d-soft);
}
.dverify .code .ln { display: block; white-space: pre; transition: background 300ms, color 300ms; padding: 0 4px; border-radius: 3px; }
.dverify .code .ln.scan { background: rgba(61,123,255,0.12); color: var(--d-ink); }
.dverify .code .ln.bad { background: rgba(224,82,82,0.12); color: var(--d-err); }
.dverify .code .kw { color: #8250DF; }
.dverify .code .st { color: #1F7A4D; }
.dverify .vfoot {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--d-hair);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--d-faint);
}
.dverify .vfoot .tag {
  border: 1px solid rgba(224,82,82,0.4); color: var(--d-err); border-radius: 4px; padding: 3px 8px;
  opacity: 0; transform: scale(0.85); transition: opacity 280ms, transform 280ms;
}
.dverify .vfoot .tag.show { opacity: 1; transform: none; }
.dverify .vfoot .vv { margin-left: auto; font-weight: 700; }
.dverify .vfoot .vv.done { color: var(--d-ok); }

/* --- 벤토 타일 내 데모 임베드 --------------------------------------------- */
.tile-big .nw-demo { max-width: none; height: 100%; display: flex; flex-direction: column; }
.tile-big .nw-demo .shell { border: 0; box-shadow: none; border-radius: 0; flex: 1; display: flex; flex-direction: column; }
.tile-big .nw-demo .shell .tr { flex: 1; }
.tile-big .nw-demo .demo-cap { display: none; }

/* --- 반응형 ------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .dfz3 .board { grid-template-columns: 1fr; min-height: 0; }
  .dfz3 .bcol { min-height: 0; }
  .dcall3 .sess .stages { display: none; }
  .nw-demo.bare .dfz3 .bcol { height: 190px; }
  .nw-demo.bare .dcall3 .tr { height: 240px; }
}

/* --- reduced motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .nw-demo * { animation: none !important; transition: none !important; }
  .dcall3 .trow, .dcall3 .tsys, .dcall3 .kchip { opacity: 1 !important; transform: none !important; }
}