@charset "UTF-8";
/* ==========================================================================
   法務AI活用体験 デモ共通（デモ1 契約レビュー＆エスカレ判定／デモ2 法務依頼支援／デモ3 取引スキーム図の自動生成）
   左：汎用の社内AIチャット（12カラムの7）／右：解説パネル（5・sticky）
   1023px以下はパネルをチャットの下に置き「解説を見る」で開閉
   部品の組み立て：assets/js/demo/engine.js（共通）＋ demo01.js／demo02.js／demo03.js（固有。デモ3だけの見た目は pages/demo03.css）
   PHP の枠：_inc/demo.php
   色：責任分界の4区分は .lab-tier の濃淡＋区分名（GREEN bg-1／YELLOW bg-2／RED navy／BLACK ink）。
       評価（要修正／要確認／問題なし）は線のタグ、AIの見落としは bg-3＋赤の破線で、区分と混同させない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   タイトル帯（体験一覧へ／kicker／H1／リード／P03 共通の注記）
   -------------------------------------------------------------------------- */
.lab-demo-title {
  padding: 32px 0 64px;

  @media (max-width: 1023px) {
    padding: 24px 0 48px;
  }

  @media (max-width: 767px) {
    padding: 16px 0 32px;
  }

  & .lab-demo-title__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;

    @media (max-width: 767px) {
      gap: 16px;
    }
  }

  & .lab-demo-title__back {
    margin-bottom: 8px;

    @media (max-width: 767px) {
      margin-bottom: 0;
    }
  }

  & .lab-demo-title__heading {
    display: flex;
    flex-direction: column;
    gap: 24px;

    @media (max-width: 767px) {
      gap: 12px;
    }
  }

  & .lab-demo-title__lead {
    max-width: 40em;
  }

  & .lab-demo-title__notice {
    align-self: stretch;
  }
}

/* --------------------------------------------------------------------------
   デモ本体のレイアウト（7＋5）
   -------------------------------------------------------------------------- */
.lab-demo {
  padding-bottom: 128px;

  @media (max-width: 1023px) {
    padding-bottom: 96px;
  }

  @media (max-width: 767px) {
    padding-bottom: 64px;
  }

  & .lab-demo__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--lab-gutter);
    align-items: start;

    @media (max-width: 1023px) {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 32px;
    }

    @media (max-width: 767px) {
      row-gap: 24px;
    }
  }

  & .lab-demo__main {
    grid-column: 1 / span 7;
    min-width: 0;

    @media (max-width: 1023px) {
      grid-column: 1 / -1;
    }
  }

  /* 流れる演出：出番まで隠す（engine.js） */
  & [data-lab-step] {
    transition:
      opacity var(--lab-dur-slow) var(--lab-ease-out),
      transform var(--lab-dur-slow) var(--lab-ease-out);

    &.is-pending {
      display: none !important;
    }

    &.is-entering {
      opacity: 0;
      transform: translateY(8px);
      transition: none;
    }
  }

  & .is-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    background: currentColor;
    vertical-align: -.125em;
  }
}

.lab-demo-icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   チャット画面の枠（上部ラベル・再現の注記）
   -------------------------------------------------------------------------- */
.lab-demo-chat {
  border: 1px solid var(--lab-line);
  border-radius: var(--lab-radius-md);
  background: var(--lab-white);

  & .lab-demo-chat__bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 32px;
    border-bottom: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-md) var(--lab-radius-md) 0 0;
    background: var(--lab-bg-1);

    @media (max-width: 1023px) {
      padding: 16px 24px;
    }

    @media (max-width: 767px) {
      padding: 12px 16px;
    }
  }

  & .lab-demo-chat__label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-navy);
  }

  & .lab-demo-chat__mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    border-radius: var(--lab-radius-sm);
    background: var(--lab-navy);
    font-size: var(--lab-fs-label);
    line-height: 1;
    letter-spacing: .04em;
    color: var(--lab-white);
  }

  & .lab-demo-chat__repro {
    padding-left: 44px;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);

    @media (max-width: 767px) {
      padding-left: 0;
    }
  }

  & .lab-demo-chat__noscript {
    padding: 16px 32px;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    color: var(--lab-negative-red);
  }

  & .lab-demo-chat__log {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: 240px;
    padding: 32px;

    @media (max-width: 1023px) {
      padding: 32px 24px;
    }

    @media (max-width: 767px) {
      gap: 24px;
      min-height: 0;
      padding: 24px 16px;
    }
  }
}

/* 送信前の空状態 */
.lab-demo-empty {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px dashed var(--lab-line);
  border-radius: var(--lab-radius-md);

  @media (max-width: 767px) {
    padding: 24px 16px;
  }

  & .lab-demo-empty__title {
    font-size: var(--lab-fs-lead);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .02em;
    font-feature-settings: 'palt';

    @media (max-width: 767px) {
      font-size: var(--lab-fs-body);
    }
  }

  & .lab-demo-empty__steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: lab-demo-step;

    & > li {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      column-gap: 12px;
      align-items: start;
      font-size: var(--lab-fs-body);
      line-height: 1.85;
      color: var(--lab-ink-2);
      counter-increment: lab-demo-step;

      &::before {
        content: counter(lab-demo-step);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: 1px solid var(--lab-navy);
        border-radius: 50%;
        font-size: var(--lab-fs-small);
        font-weight: 700;
        line-height: 1;
        color: var(--lab-navy);
      }
    }
  }
}

/* --------------------------------------------------------------------------
   入力欄（添付チップ・条件チップ・依頼文・送信）
   -------------------------------------------------------------------------- */
.lab-demo-composer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 32px 32px;
  border-top: 1px solid var(--lab-line);

  @media (max-width: 1023px) {
    padding: 24px;
  }

  @media (max-width: 767px) {
    gap: 16px;
    padding: 16px;
  }
}

/* 入力欄の1行（ラベル＋中身）。幅が足りないとラベルが上に回る */
.lab-demo-field {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 16px;
  row-gap: 8px;

  & .lab-demo-field__label {
    flex: 0 0 136px;
    padding-top: 12px;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);

    @media (max-width: 767px) {
      flex-basis: 100%;
      padding-top: 0;
    }
  }

  & .lab-demo-field__body {
    flex: 1 1 360px;
    min-width: 0;
  }
}

/* 取引条件はラベルを上に置き、各条件のラベル列（136px）を添付ファイルの行と揃える */
.lab-demo-field--conds {
  flex-direction: column;

  & > .lab-demo-field__label {
    flex: none;
    padding-top: 0;
  }

  & > .lab-demo-field__body {
    flex: none;
    width: 100%;
  }
}

.lab-demo-conds {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lab-demo-cond {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 16px;
  row-gap: 4px;

  & .lab-demo-cond__label {
    flex: 0 0 136px;
    padding-top: 12px;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink);

    @media (max-width: 767px) {
      flex-basis: 100%;
      padding-top: 0;
    }
  }

  & .lab-demo-cond__options {
    flex: 1 1 280px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }
}

/* 条件チップ（2択のラジオ。role="radio"＋aria-checked） */
.lab-demo-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--lab-line);
  border-radius: var(--lab-radius-sm);
  background: var(--lab-white);
  font-size: var(--lab-fs-small);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--lab-ink-2);
  text-align: left;
  transition:
    border-color var(--lab-dur-fast) var(--lab-ease-out),
    color var(--lab-dur-fast) var(--lab-ease-out);

  &::before {
    content: '';
    flex: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--lab-ink-3);
    border-radius: 50%;
    background: var(--lab-white);
    transition: border var(--lab-dur-fast) var(--lab-ease-standard);
  }

  &:hover {
    border-color: var(--lab-primary);
    color: var(--lab-primary);
  }

  &[aria-checked="true"] {
    border-color: var(--lab-primary);
    color: var(--lab-primary);

    &::before {
      border: 5px solid var(--lab-primary);
    }

    &::after {
      content: '';
      position: absolute;
      inset: -1px;
      border: 2px solid var(--lab-primary);
      border-radius: var(--lab-radius-sm);
      pointer-events: none;
    }
  }

  &[aria-disabled="true"] {
    cursor: default;

    &:not([aria-checked="true"]) {
      border-color: var(--lab-line);
      color: var(--lab-ink-3);
    }
  }
}

/* 添付チップ（未添付：破線／添付後：ファイルチップ＋プレビュー） */
.lab-demo-attach {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border: 1px dashed var(--lab-primary);
  border-radius: var(--lab-radius-sm);
  background: var(--lab-white);
  font-size: var(--lab-fs-small);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--lab-primary);
  text-align: left;
  transition: border-color var(--lab-dur-fast) var(--lab-ease-out);

  &:hover {
    border-style: solid;
  }

  & .lab-demo-attach__name {
    overflow-wrap: anywhere;
  }

  & .lab-demo-attach__action {
    font-weight: 400;
  }
}

.lab-demo-attached {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;

  & .lab-demo-attached__preview {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-primary);
    text-decoration: underline;
    text-underline-offset: 6px;

    &:hover {
      text-decoration-thickness: 2px;
    }
  }
}

/* ファイルチップ（入力欄・ユーザーの発言） */
.lab-demo-file {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--lab-line);
  border-radius: var(--lab-radius-sm);
  background: var(--lab-white);
  font-size: var(--lab-fs-small);
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--lab-ink);
  text-align: left;

  & .lab-demo-icon {
    color: var(--lab-navy);
  }

  & .lab-demo-file__name {
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  & .lab-demo-file__meta {
    color: var(--lab-ink-3);
  }

  &.lab-demo-file--button {
    transition: border-color var(--lab-dur-fast) var(--lab-ease-out);

    &:hover {
      border-color: var(--lab-primary);
    }
  }
}

/* 依頼文（自動で文章化）と送信 */
.lab-demo-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 16px 24px;
  border: 1px solid var(--lab-ink-3);
  border-radius: var(--lab-radius-md);

  @media (max-width: 767px) {
    padding: 16px;
  }

  & .lab-demo-input__label {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-input__draft {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink);
  }

  & .lab-demo-input__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 16px;
    margin-top: 8px;
  }

  & .lab-demo-input__hint {
    flex: 1 1 200px;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);

    &:empty {
      display: none;
    }
  }

  & .lab-demo-input__send {
    min-width: 120px;

    &[aria-disabled="true"] {
      border-color: var(--lab-line);
      background: var(--lab-bg-1);
      color: var(--lab-ink-3);
      cursor: default;
    }
  }
}

/* --------------------------------------------------------------------------
   メッセージ
   -------------------------------------------------------------------------- */
.lab-demo-msg {
  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--lab-primary);
    outline-offset: 8px;
  }

  /* ユーザーの発言（右寄せ・bg-2 の吹き出し） */
  &.lab-demo-msg--user {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: 88%;

    @media (max-width: 767px) {
      max-width: 100%;
    }
  }

  & .lab-demo-msg__files {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  & .lab-demo-msg__bubble {
    padding: 16px 24px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-bg-2);
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink);

    @media (max-width: 767px) {
      padding: 12px 16px;
    }
  }

  /* AIの回答 */
  &.lab-demo-msg--ai {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  & .lab-demo-msg__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-height: 32px;
  }

  & .lab-demo-msg__avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lab-navy);
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--lab-white);
  }

  & .lab-demo-msg__name {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-msg__skip,
  & .lab-demo-msg__toggle {
    min-height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
    text-decoration: underline;
    text-underline-offset: 4px;

    &:hover {
      text-decoration-thickness: 2px;
    }
  }

  & .lab-demo-msg__toggle {
    flex: none;
    font-weight: 700;
    color: var(--lab-primary);
    text-underline-offset: 6px;
  }

  & .lab-demo-msg__body {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;

    @media (max-width: 767px) {
      gap: 24px;
    }
  }

  /* 折りたたんだ過去の回答 */
  & .lab-demo-msg__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 16px 12px 24px;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-md);

    @media (max-width: 767px) {
      padding: 12px 16px;
    }
  }

  & .lab-demo-msg__summary-main {
    flex: 1 1 320px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
  }

  & .lab-demo-msg__summary-label {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    color: var(--lab-ink-2);
  }

  & .lab-demo-msg__summary-text {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    color: var(--lab-ink);
  }

  &.is-collapsed .lab-demo-msg__body:not([hidden]) {
    padding-top: 8px;
  }
}

/* 考え中 */
.lab-demo-thinking {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--lab-fs-body);
  line-height: 1.85;
  letter-spacing: .04em;
  color: var(--lab-ink-2);

  & .lab-demo-thinking__dots {
    display: inline-flex;
    gap: 4px;

    & > span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--lab-navy);
      animation: lab-demo-dot 1200ms var(--lab-ease-standard) infinite;

      &:nth-child(2) {
        animation-delay: 160ms;
      }

      &:nth-child(3) {
        animation-delay: 320ms;
      }

      @media (prefers-reduced-motion: reduce) {
        animation: none;
      }
    }
  }
}

@keyframes lab-demo-dot {
  0%, 80%, 100% {
    opacity: .24;
  }

  40% {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   回答の共通部品（見出し・本文）
   -------------------------------------------------------------------------- */
.lab-demo-ans__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.lab-demo-ans__h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--lab-fs-small);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .08em;
  color: var(--lab-navy);

  &::before {
    content: '';
    flex: none;
    width: 4px;
    height: 16px;
    background: var(--lab-navy);
  }
}

.lab-demo-ans__text {
  font-size: var(--lab-fs-body);
  line-height: 1.85;
  letter-spacing: .04em;
}

/* 区分バッジに判断者名を添える（例：RED 法務が確認） */
.lab-demo-decider {
  gap: 8px;

  & .lab-demo-decider__name {
    font-size: var(--lab-fs-small);
    letter-spacing: .04em;
  }
}

/* 評価のタグ（線。区分の濃淡とは別の表現） */
.lab-demo-rating {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--lab-ink-2);
  border-radius: var(--lab-radius-sm);
  background: var(--lab-white);
  font-size: var(--lab-fs-small);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--lab-ink);

  &.lab-demo-rating--check {
    border-style: dashed;
  }

  &.lab-demo-rating--ok {
    border-color: var(--lab-line);
    font-weight: 400;
    color: var(--lab-ink-3);
  }
}

/*
 * 再実行で変わった箇所の印「変更」（デモ1・2共通の1部品）。
 * 白地＋青の線＋青の文字の札にする：塗り（紺＝RED の区分バッジ、青＝主CTA）と見分けるため。
 * 札自体が白地なので、淡色面（判定の根拠の条件一覧・成果物）の上でも青の小さい文字の規則を満たす。
 * --sm：条件一覧・成果物の行に添える小さい版（高さ24px・12px）
 */
.lab-demo-change {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 2px solid var(--lab-primary);
  border-radius: var(--lab-radius-sm);
  background: var(--lab-white);
  font-size: var(--lab-fs-small);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--lab-primary);

  & .lab-demo-change__from {
    font-weight: 400;
  }

  &.lab-demo-change--sm {
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    border-width: 1px;
    font-size: var(--lab-fs-label);
  }
}

/* --------------------------------------------------------------------------
   判定（区分バッジ＋判定の文面＋判断者の内訳）
   -------------------------------------------------------------------------- */
.lab-demo-verdict {
  gap: 24px;
  padding: 24px 32px 32px;
  border: 2px solid var(--lab-navy);
  border-radius: var(--lab-radius-md);

  @media (max-width: 767px) {
    gap: 16px;
    padding: 16px;
  }

  & .lab-demo-verdict__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: -8px;

    @media (max-width: 767px) {
      margin-top: 0;
    }
  }

  & .lab-demo-verdict__text {
    font-size: var(--lab-fs-h4);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    font-feature-settings: 'palt';

    @media (max-width: 767px) {
      font-size: var(--lab-fs-title);
    }
  }
}

.lab-demo-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--lab-line);

  @media (max-width: 767px) {
    padding-top: 16px;
  }

  & .lab-demo-breakdown__label {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  /*
   * 3つのボタンの中身（区分・判断者名・件数・前回◯件）を subgrid で行ごとにそろえる。
   * 1024〜1150px で判断者名の行数が違っても（「事業責任者が承認」だけ2行など）、件数と「前回◯件」の高さがずれない
   */
  & .lab-demo-breakdown__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    gap: 0 8px;

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
      gap: 8px;
    }
  }

  & .lab-demo-breakdown__btn {
    position: relative;
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    row-gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 16px;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-sm);
    background: var(--lab-white);
    text-align: left;
    transition: border-color var(--lab-dur-fast) var(--lab-ease-out);

    @media (max-width: 767px) {
      grid-row: auto;
      grid-template-rows: none;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 12px;
      row-gap: 4px;
      padding: 12px 16px;
    }

    &:hover {
      border-color: var(--lab-primary);
    }

    &[aria-pressed="true"] {
      border-color: var(--lab-primary);

      &::after {
        content: '';
        position: absolute;
        inset: -1px;
        border: 2px solid var(--lab-primary);
        border-radius: var(--lab-radius-sm);
        pointer-events: none;
      }
    }

    &[aria-disabled="true"] {
      cursor: default;

      &:hover {
        border-color: var(--lab-line);
      }

      & .lab-demo-breakdown__count,
      & .lab-demo-breakdown__count b {
        color: var(--lab-ink-3);
      }
    }
  }

  & .lab-demo-breakdown__name {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    color: var(--lab-ink);
  }

  & .lab-demo-breakdown__count {
    font-size: var(--lab-fs-small);
    line-height: 1.4;
    color: var(--lab-ink-2);

    & b {
      margin-right: 2px;
      font-size: var(--lab-fs-h4);
      font-weight: 700;
      line-height: 1.2;
      color: var(--lab-ink);
    }
  }

  & .lab-demo-breakdown__prev {
    font-size: var(--lab-fs-small);
    line-height: 1.5;
    color: var(--lab-ink-3);

    @media (max-width: 767px) {
      grid-column: 2 / -1;
    }
  }

  & .lab-demo-breakdown__hint {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }
}

/* 判定の根拠（理由＋今回の条件） */
.lab-demo-reason {
  & .lab-demo-reason__list {
    display: flex;
    flex-direction: column;
    gap: 8px;

    & > li {
      position: relative;
      padding-left: 20px;
      font-size: var(--lab-fs-body);
      line-height: 1.85;
      letter-spacing: .04em;

      &::before {
        content: '';
        position: absolute;
        top: .8em;
        left: 4px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--lab-navy);
      }
    }
  }

  & .lab-demo-reason__conds {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 24px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-bg-1);

    @media (max-width: 767px) {
      padding: 12px 16px;
    }
  }

  & .lab-demo-reason__cond {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    column-gap: 16px;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
    }

    & dt {
      font-weight: 700;
      color: var(--lab-ink-2);
    }

    & dd {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 8px;
      color: var(--lab-ink);
    }
  }
}

/* --------------------------------------------------------------------------
   条項ごとのレビュー（カード）
   -------------------------------------------------------------------------- */
.lab-demo-review {
  & .lab-demo-review__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 16px;
    min-height: 44px;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-review__reset {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-primary);
    text-decoration: underline;
    text-underline-offset: 6px;

    &:hover {
      text-decoration-thickness: 2px;
    }
  }

  & .lab-demo-review__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: -8px;
  }
}

.lab-demo-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--lab-line);
  border-radius: var(--lab-radius-md);
  background: var(--lab-white);

  @media (max-width: 767px) {
    padding: 16px;
  }

  &.is-changed {
    border-color: var(--lab-primary);
    outline: 1px solid var(--lab-primary);
  }

  & .lab-demo-card__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  & .lab-demo-card__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  & .lab-demo-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 12px;
    font-size: var(--lab-fs-lead);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    font-feature-settings: 'palt';

    @media (max-width: 767px) {
      font-size: var(--lab-fs-body);
    }
  }

  & .lab-demo-card__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  & .lab-demo-card__nodecider {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-sm);
    font-size: var(--lab-fs-small);
    line-height: 1;
    letter-spacing: .04em;
    color: var(--lab-ink-3);
  }

  & .lab-demo-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  & .lab-demo-card__row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
    }

    & dt {
      font-size: var(--lab-fs-small);
      font-weight: 700;
      line-height: 1.85;
      letter-spacing: .04em;
      color: var(--lab-ink-2);
    }

    & dd {
      font-size: var(--lab-fs-body);
      line-height: 1.85;
      letter-spacing: .04em;
    }

    /* 取引先向けコメント：見出しが長いため縦に積み、相手方に送る文面であることを左の線で示す */
    &.lab-demo-card__row--comment {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 4px;
      margin-top: 4px;

      & dd {
        padding-left: 16px;
        border-left: 2px solid var(--lab-line);
        color: var(--lab-ink-2);
      }
    }
  }

  & .lab-demo-card__note {
    padding: 12px 16px;
    border-radius: var(--lab-radius-sm);
    background: var(--lab-bg-1);
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 16px;
    padding-top: 8px;
    border-top: 1px solid var(--lab-line);
  }

  & .lab-demo-card__meta {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  /* 問題なし（判断者なし） */
  &.lab-demo-card--none {
    border-style: dashed;
  }
}

/* 契約書の該当箇所へ（テキストボタン） */
.lab-demo-jump {
  flex: none;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--lab-fs-small);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--lab-primary);
  text-decoration: underline;
  text-underline-offset: 6px;

  &:hover {
    text-decoration-thickness: 2px;
  }

  /* 淡色面の上は紺 */
  &.lab-demo-jump--navy {
    color: var(--lab-navy);
  }
}

/* 定型修正のまとめ（1枚に折りたたむ） */
.lab-demo-routine {
  & .lab-demo-routine__count {
    font-size: var(--lab-fs-body);
    color: var(--lab-navy);
  }

  & .lab-demo-routine__lead {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-routine__toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--lab-primary);
    border-radius: var(--lab-radius-sm);
    background: var(--lab-white);
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    color: var(--lab-primary);
    transition:
      background-color var(--lab-dur-fast) var(--lab-ease-out),
      color var(--lab-dur-fast) var(--lab-ease-out);

    /* ＋／−（開閉） */
    &::before {
      content: '';
      flex: none;
      width: 12px;
      height: 12px;
      background:
        linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
    }

    &[aria-expanded="true"]::before {
      background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
    }

    &:hover {
      background: var(--lab-primary);
      color: var(--lab-white);
    }
  }

  & .lab-demo-routine__list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--lab-line);
  }

  & .lab-demo-routine__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    border-bottom: 1px solid var(--lab-line);

    &:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    & .lab-demo-card__foot {
      padding-top: 0;
      border-top: 0;
    }
  }

  & .lab-demo-routine__item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
  }

  & .lab-demo-routine__item-title {
    font-size: var(--lab-fs-body);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .02em;
    font-feature-settings: 'palt';
  }
}

/* --------------------------------------------------------------------------
   AIの見落とし（トグル＋一覧。bg-3＋赤の破線）
   -------------------------------------------------------------------------- */
.lab-demo-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--lab-fs-body);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--lab-ink);
  text-align: left;

  & .lab-demo-switch__track {
    position: relative;
    flex: none;
    width: 48px;
    height: 28px;
    border-radius: var(--lab-radius-sm);
    background: var(--lab-ink-3);
    transition: background-color var(--lab-dur-fast) var(--lab-ease-standard);
  }

  & .lab-demo-switch__knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: var(--lab-radius-sm);
    background: var(--lab-white);
    transition: transform var(--lab-dur-fast) var(--lab-ease-standard);
  }

  & .lab-demo-switch__state {
    min-width: 2.5em;
    font-size: var(--lab-fs-label);
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--lab-ink-3);
  }

  &:hover .lab-demo-switch__label {
    color: var(--lab-primary);
  }

  &[aria-checked="true"] {
    & .lab-demo-switch__track {
      background: var(--lab-primary);
    }

    & .lab-demo-switch__knob {
      transform: translateX(20px);
    }

    & .lab-demo-switch__state {
      color: var(--lab-primary);
    }
  }

  &.lab-demo-switch--compact {
    font-size: var(--lab-fs-small);
  }
}

.lab-demo-miss-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--lab-line);

  & .lab-demo-miss-block__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  & .lab-demo-miss-block__lead {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-miss-block__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}

.lab-demo-miss {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px;
  border: 2px dashed var(--lab-negative-red);
  border-radius: var(--lab-radius-md);
  background: var(--lab-bg-3);

  @media (max-width: 767px) {
    padding: 16px;
  }

  & .lab-demo-miss__label {
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--lab-negative-red);
  }

  & .lab-demo-miss__title {
    margin-top: 4px;
    font-size: var(--lab-fs-lead);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;

    @media (max-width: 767px) {
      font-size: var(--lab-fs-body);
    }
  }

  & .lab-demo-miss__message {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-negative-red);
  }

  & .lab-demo-miss__text {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
  }

  & .lab-demo-miss__reason {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-miss__reason-label {
    font-weight: 700;
  }

  & .lab-demo-miss__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 24px;
  }
}

/* 関連記事（note・別タブ）。淡色面の上は紺 */
.lab-demo-note-link {
  &.lab-demo-note-link--navy {
    color: var(--lab-navy);
  }
}

/* --------------------------------------------------------------------------
   次のアクション（コピー・承認依頼文・法務への依頼文の導線）
   -------------------------------------------------------------------------- */
.lab-demo-next {
  & .lab-demo-next__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
  }

  & .lab-demo-next__doc {
    max-height: 480px;
    margin: 0;
    padding: 24px;
    overflow: auto;
    border-radius: var(--lab-radius-md);
    background: var(--lab-bg-1);
    font-family: inherit;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    @media (max-width: 767px) {
      max-height: 400px;
      padding: 16px;
    }
  }

  /* プレイブック外の指摘のコメントは、AIの文案であることを添える */
  & .lab-demo-next__note {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-next__details {
    border-top: 1px solid var(--lab-line);

    &[open] > .lab-demo-next__summary::before {
      background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
    }
  }

  & .lab-demo-next__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-primary);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      content: '';
      flex: none;
      width: 12px;
      height: 12px;
      background:
        linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
    }

    &:focus-visible {
      outline-offset: -2px;
    }
  }

  & .lab-demo-next__details > .lab-demo-next__doc {
    margin-bottom: 8px;
  }
}

/* 相談ボタン（各回答の末尾。主CTAと同格）＋関連記事 */
.lab-demo-consult {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  padding-top: 32px;
  border-top: 1px solid var(--lab-line);

  @media (max-width: 767px) {
    flex-direction: column;
    align-items: stretch;
    padding-top: 24px;
  }

  & .lab-demo-consult__btn {
    @media (max-width: 1023px) {
      white-space: normal;
    }
  }

  & .lab-demo-consult__note {
    @media (max-width: 767px) {
      align-self: flex-start;
    }
  }
}

/* 再実行の提案（回答の下） */
.lab-demo-suggest {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--lab-radius-md);
  background: var(--lab-bg-1);

  @media (max-width: 767px) {
    padding: 16px;
  }

  & .lab-demo-suggest__label {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-navy);
  }

  & .lab-demo-suggest__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  & .lab-demo-suggest__btn {
    white-space: normal;
    text-align: left;
  }
}

/* 前回との比較（engine.js の app.compare） */
.lab-demo-compare {
  & .lab-demo-compare__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
    }
  }

  & .lab-demo-compare__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 16px 24px 24px;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-md);

    @media (max-width: 767px) {
      padding: 16px;
    }

    &.is-after {
      border: 2px solid var(--lab-navy);
    }
  }

  & .lab-demo-compare__label {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .08em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-compare__title {
    font-size: var(--lab-fs-lead);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    font-feature-settings: 'palt';

    @media (max-width: 767px) {
      font-size: var(--lab-fs-body);
    }
  }

  & .lab-demo-compare__lines {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-compare__note {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
  }
}

/* --------------------------------------------------------------------------
   解説パネル（右・sticky／1023px以下はチャットの下で開閉）
   -------------------------------------------------------------------------- */
.lab-demo-panel {
  position: sticky;
  top: 24px;
  grid-column: 8 / span 5;
  min-width: 0;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--lab-radius-md);
  background: var(--lab-bg-1);

  @media (max-width: 1023px) {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
    overflow: visible;
    background: transparent;
  }

  & .lab-demo-panel__toggle {
    display: none;

    @media (max-width: 1023px) {
      display: inline-flex;
      width: 100%;
    }
  }

  /* デスクトップ（5カラムの sticky）は余白を詰め、中の白い面（いま見ている内容など）の行長を確保する */
  & .lab-demo-panel__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;

    @media (max-width: 1023px) {
      display: none;
      gap: 32px;
      margin-top: 16px;
      padding: 32px;
      border-radius: var(--lab-radius-md);
      background: var(--lab-bg-1);
    }

    @media (max-width: 767px) {
      gap: 24px;
      padding: 24px 16px;
    }
  }

  &.is-open .lab-demo-panel__body {
    @media (max-width: 1023px) {
      display: flex;
    }
  }

  & .lab-demo-panel__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  & .lab-demo-panel__title {
    font-size: var(--lab-fs-h4);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    font-feature-settings: 'palt';
    color: var(--lab-navy);

    @media (max-width: 767px) {
      font-size: var(--lab-fs-title);
    }
  }

  & .lab-demo-panel__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--lab-line);

    &.lab-demo-panel__section--now {
      padding-top: 0;
      border-top: 0;
    }
  }

  & .lab-demo-panel__h {
    font-size: var(--lab-fs-lead);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    font-feature-settings: 'palt';
    color: var(--lab-navy);
  }
}

/* いま見ている内容（白の面。差し替え時に短く光らせる） */
.lab-demo-now {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--lab-radius-md);
  background: var(--lab-white);

  @media (max-width: 1023px) {
    padding: 24px;
  }

  @media (max-width: 767px) {
    padding: 16px;
  }

  &.is-updated {
    animation: lab-demo-flash 960ms var(--lab-ease-out);

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

  & .lab-demo-now__step {
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--lab-primary);
  }

  & .lab-demo-now__title {
    font-size: var(--lab-fs-body);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
  }

  & .lab-demo-now__text {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink);
  }
}

@keyframes lab-demo-flash {
  from {
    background: var(--lab-bg-2);
  }

  to {
    background: var(--lab-white);
  }
}

/* 責任分界ルール（2表） */
.lab-demo-rules {
  display: flex;
  flex-direction: column;
  gap: 24px;

  & .lab-demo-rules__block {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  & .lab-demo-rules__h {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-navy);
  }

  & .lab-demo-rules__natures {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--lab-line);
  }

  & .lab-demo-rules__nature {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--lab-line);
  }

  & .lab-demo-rules__term {
    font-size: var(--lab-fs-body);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
  }

  & .lab-demo-rules__desc {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
  }

  & .lab-demo-rules__example {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-rules__example-label {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--lab-ink-3);
    border-radius: var(--lab-radius-sm);
    font-size: var(--lab-fs-label);
    line-height: 1;
  }

  /*
   * 判断者の表は白の面に載せる。パネルの面（bg-1）の上に置くと GREEN のバッジ（bg-1）だけ面が消え、
   * 4区分の濃淡（bg-1 → bg-2 → navy → ink）がそろわないため（コンポーネントシート 07 も白の面の上で示している）
   */
  & .lab-demo-rules__deciders {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-white);

    @media (max-width: 767px) {
      padding: 0 12px;
    }
  }

  & .lab-demo-rules__decider {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--lab-line);

    &:last-child {
      border-bottom: 0;
    }

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 8px;
    }

    & .lab-tier {
      justify-self: start;
    }
  }

  & .lab-demo-rules__decider-name {
    font-size: var(--lab-fs-body);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
  }

  & .lab-demo-rules__decider-cond {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink);
  }

  & .lab-demo-rules__decider-note {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-rules__notes {
    display: flex;
    flex-direction: column;
    gap: 8px;

    & > li {
      position: relative;
      padding-left: 16px;
      font-size: var(--lab-fs-small);
      line-height: 1.7;
      letter-spacing: .04em;
      color: var(--lab-ink-2);

      &::before {
        content: '';
        position: absolute;
        top: .75em;
        left: 2px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--lab-navy);
      }
    }
  }
}

/* 検証で分かったこと */
.lab-demo-learned {
  display: flex;
  flex-direction: column;
  gap: 12px;

  & > li {
    position: relative;
    padding-left: 20px;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;

    &::before {
      content: '';
      position: absolute;
      top: .8em;
      left: 4px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--lab-navy);
    }
  }
}

/* --------------------------------------------------------------------------
   添付プレビュー（<dialog>。右からのシート／767px以下は全画面）
   -------------------------------------------------------------------------- */
.lab-demo-preview {
  width: min(760px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--lab-radius-md) 0 0 var(--lab-radius-md);
  background: var(--lab-white);
  color: var(--lab-ink);
  overflow: hidden;

  @media (max-width: 767px) {
    width: 100%;
    border-radius: 0;
  }

  &::backdrop {
    background: rgba(34, 34, 34, .48);
  }

  &[open] {
    display: flex;
  }

  & .lab-demo-preview__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
  }

  & .lab-demo-preview__head {
    position: relative;
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding: 16px 72px 16px 32px;
    border-bottom: 1px solid var(--lab-line);

    @media (max-width: 767px) {
      padding: 12px 56px 12px 16px;
    }
  }

  & .lab-demo-preview__titles {
    flex: 1 1 280px;
    min-width: 0;
  }

  & .lab-demo-preview__kicker {
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--lab-primary);
  }

  & .lab-demo-preview__title {
    font-size: var(--lab-fs-lead);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    overflow-wrap: anywhere;

    @media (max-width: 767px) {
      font-size: var(--lab-fs-body);
    }
  }

  & .lab-demo-preview__meta {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-3);

    &:empty {
      display: none;
    }
  }

  & .lab-demo-preview__tools {
    display: flex;
    align-items: center;
    gap: 16px;

    /* 中身がない、または全部 hidden（デモ1の見落としトグルは最初の回答まで出さない）なら詰める */
    &:empty,
    &:not(:has(> :not([hidden]))) {
      display: none;
    }
  }

  & .lab-demo-preview__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--lab-radius-sm);
    background: transparent;
    transition: background-color var(--lab-dur-fast) var(--lab-ease-out);

    @media (max-width: 767px) {
      top: 8px;
      right: 8px;
    }

    &:hover {
      background: var(--lab-bg-1);
    }

    &:focus-visible {
      outline-offset: -2px;
    }
  }

  & .lab-demo-preview__close-icon {
    position: relative;
    width: 20px;
    height: 20px;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 20px;
      height: 2px;
      background: var(--lab-ink);
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }
  }

  & .lab-demo-preview__tabs {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 32px;
    border-bottom: 1px solid var(--lab-line);

    @media (max-width: 767px) {
      padding: 8px 16px;
    }
  }

  & .lab-demo-preview__tab {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-sm);
    background: var(--lab-white);
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.5;
    color: var(--lab-ink-2);

    &[aria-selected="true"] {
      border-color: var(--lab-primary);
      color: var(--lab-primary);
    }
  }

  /* sr-only（position:absolute）が dialog 側にはみ出してスクロールさせないよう、本文を包含ブロックにする */
  & .lab-demo-preview__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 32px 48px 64px;
    overflow-y: auto;
    overscroll-behavior: contain;

    @media (max-width: 767px) {
      padding: 24px 16px 48px;
    }
  }
}

/* プレビューの本文（契約書） */
.lab-demo-doc {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: var(--lab-fs-body);
  line-height: 1.85;
  letter-spacing: .04em;
  color: var(--lab-ink);

  & .lab-demo-doc__title {
    font-size: var(--lab-fs-h4);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .16em;
    text-align: center;

    @media (max-width: 767px) {
      font-size: var(--lab-fs-title);
    }
  }

  & .lab-demo-doc__article {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 -8px;
    padding: 4px 8px;
    border-radius: var(--lab-radius-sm);
    scroll-margin: 32px;

    &:focus {
      outline: none;
    }
  }

  & .lab-demo-doc__heading {
    font-size: var(--lab-fs-body);
    font-weight: 700;
    line-height: 1.85;
  }

  & .lab-demo-doc__paras {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  & .lab-demo-doc__para {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 8px;
    margin: 0 -8px;
    padding: 4px 8px;
    border-radius: var(--lab-radius-sm);
    scroll-margin: 32px;

    &.lab-demo-doc__para--single {
      grid-template-columns: minmax(0, 1fr);
    }

    &:focus {
      outline: none;
    }
  }

  & .lab-demo-doc__no {
    color: var(--lab-ink-2);
  }

  & .lab-demo-doc__items {
    display: flex;
    flex-direction: column;
    margin-top: 4px;

    & > li {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
    }
  }

  & .lab-demo-doc__item-no {
    color: var(--lab-ink-2);
  }

  & .lab-demo-doc__closing {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
  }

  /* カードから開いた該当箇所（bg-2＋紺の線）と、AIの見落とし（破線＋bg-3。両方付いたら見落としを優先） */
  & .is-target,
  & .is-target:focus {
    background: var(--lab-bg-2);
    outline: 2px solid var(--lab-navy);
    outline-offset: 0;
  }

  & .is-marked,
  & .is-marked:focus {
    background: var(--lab-bg-3);
    outline: 2px dashed var(--lab-negative-red);
    outline-offset: 0;
  }

  & .lab-demo-doc__mark-label {
    grid-column: 1 / -1;
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--lab-negative-red);
  }

  & .lab-demo-doc__miss {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 8px;
    padding: 16px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-bg-3);
  }

  & .lab-demo-doc__miss-label {
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--lab-negative-red);
  }

  & .lab-demo-doc__miss-message {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    color: var(--lab-negative-red);
  }

  & .lab-demo-doc__miss-text {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
  }

  & .lab-demo-doc__miss-reason {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    color: var(--lab-ink-2);
  }
}

/* --------------------------------------------------------------------------
   他のデモへ
   -------------------------------------------------------------------------- */
.lab-demo-more {
  padding: 96px 0;
  background: var(--lab-bg-1);

  @media (max-width: 1023px) {
    padding: 64px 0;
  }

  @media (max-width: 767px) {
    padding: 48px 0;
  }

  & .lab-demo-more__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;

    @media (max-width: 767px) {
      gap: 12px;
      margin-bottom: 24px;
    }
  }

  & .lab-demo-more__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--lab-gutter);
    row-gap: 24px;
    align-items: end;

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 16px;
    }
  }

  & .lab-demo-more__card {
    grid-column: span 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    padding: 32px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-white);

    @media (max-width: 1023px) {
      grid-column: span 8;
    }

    @media (max-width: 767px) {
      grid-column: auto;
      gap: 12px;
      padding: 24px;
    }
  }

  & .lab-demo-more__title {
    font-size: var(--lab-fs-h4);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    font-feature-settings: 'palt';

    @media (max-width: 767px) {
      font-size: var(--lab-fs-title);
    }
  }

  & .lab-demo-more__text {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-more__btn {
    margin-top: 8px;
  }

  & .lab-demo-more__aside {
    grid-column: span 6;

    @media (max-width: 1023px) {
      grid-column: span 4;
    }

    @media (max-width: 767px) {
      grid-column: auto;
    }
  }
}

/* ==========================================================================
   デモ2「法務依頼支援」（demo02.js）
   読み取りの要約／返答ボタンの質問／振り分け先／成果物（依頼文・承認依頼文・チェックリスト）
   解説パネル：依頼情報チェックリスト・依頼の振り分け表・Before／After・AIの聞き漏らし
   提案書のプレビュー
   ========================================================================== */

/* デモ1から来たときの一言（空状態） */
.lab-demo-empty {
  & .lab-demo-empty__from {
    padding: 12px 16px;
    border-radius: var(--lab-radius-sm);
    background: var(--lab-bg-2);
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink);
  }
}

/* ヒアリング中など、自由入力を受け付けないときの入力欄 */
.lab-demo-input {
  & .lab-demo-input__draft.is-placeholder {
    color: var(--lab-ink-3);
  }
}

/* --------------------------------------------------------------------------
   読み取りの要約（読み取れたこと／確認させてください）
   -------------------------------------------------------------------------- */
.lab-demo-msg--summary {
  & .lab-demo-msg__body {
    gap: 24px;
  }
}

.lab-demo-read {
  gap: 12px;

  & .lab-demo-read__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  & .lab-demo-read__item {
    position: relative;
    padding-left: 20px;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;

    &::before {
      content: '';
      position: absolute;
      top: .8em;
      left: 4px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--lab-navy);
    }
  }

  & .lab-demo-read__label {
    font-weight: 700;
  }

  & .lab-demo-read__note {
    display: block;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    color: var(--lab-ink-2);
  }

  /* 確認させてください：中抜きの印で「まだ分からない」ことを示す */
  &.lab-demo-read--ask .lab-demo-read__item::before {
    border: 1px solid var(--lab-navy);
    background: var(--lab-white);
  }
}

/* --------------------------------------------------------------------------
   質問（なぜ聞くのか・資料で見る・返答ボタン）
   -------------------------------------------------------------------------- */
.lab-demo-msg--question {
  & .lab-demo-msg__body {
    gap: 12px;
  }
}

.lab-demo-q__text {
  font-size: var(--lab-fs-lead);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;

  @media (max-width: 767px) {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
  }
}

.lab-demo-q__why {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  font-size: var(--lab-fs-body);
  line-height: 1.85;
  letter-spacing: .04em;
  color: var(--lab-ink-2);

  @media (max-width: 767px) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  & .lab-demo-q__why-label {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    height: 24px;
    margin-top: 4px;
    padding: 0 8px;
    border: 1px solid var(--lab-navy);
    border-radius: var(--lab-radius-sm);
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--lab-navy);
    white-space: nowrap;
  }
}

.lab-demo-q__doc {
  display: flex;
  margin-top: -8px;
}

.lab-demo-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;

  @media (max-width: 767px) {
    flex-direction: column;
  }

  & .lab-demo-reply {
    @media (max-width: 767px) {
      justify-content: flex-start;
      text-align: left;
    }
  }
}

/* 2回目以降の区切り */
.lab-demo-divider {
  display: grid;
  grid-template-columns: minmax(16px, 1fr) auto minmax(16px, 1fr);
  align-items: center;
  column-gap: 16px;
  font-size: var(--lab-fs-small);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--lab-ink-2);
  text-align: center;

  &::before,
  &::after {
    content: '';
    height: 1px;
    background: var(--lab-line);
  }
}

/* --------------------------------------------------------------------------
   振り分け先（判定の中。今回の振り分けに枠と「今回」）
   -------------------------------------------------------------------------- */
.lab-demo-route {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--lab-line);

  @media (max-width: 767px) {
    padding-top: 16px;
  }

  & .lab-demo-route__label {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-route__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  & .lab-demo-route__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-sm);

    @media (max-width: 767px) {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 12px;
      padding: 12px 16px;
    }

    &.is-current {
      border-color: var(--lab-primary);

      &::after {
        content: '';
        position: absolute;
        inset: -1px;
        border: 2px solid var(--lab-primary);
        border-radius: var(--lab-radius-sm);
        pointer-events: none;
      }
    }
  }

  & .lab-demo-route__name {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .is-current .lab-demo-route__name {
    color: var(--lab-ink);
  }

  & .lab-demo-route__now {
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--lab-primary);
  }
}

/* 判定の理由（「わからない」の一言・契約書で見る・判定に使っていない答えの注記） */
.lab-demo-reason {
  & .lab-demo-reason__unknown {
    padding: 12px 16px;
    border-left: 4px solid var(--lab-navy);
    background: var(--lab-bg-2);
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
  }

  & .lab-demo-reason__doc {
    display: block;
  }

  & .lab-demo-answers__note {
    font-size: var(--lab-fs-label);
    line-height: 1.4;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }
}

/* --------------------------------------------------------------------------
   成果物（法務依頼文・承認依頼文・事業部で確認すべき点）
   -------------------------------------------------------------------------- */
.lab-demo-out {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px 32px;
  border-radius: var(--lab-radius-md);
  background: var(--lab-bg-1);

  @media (max-width: 767px) {
    padding: 16px;
  }

  & .lab-demo-out__title,
  & .lab-demo-out__intro {
    font-size: var(--lab-fs-body);
    font-weight: 700;
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink);
  }

  & .lab-demo-out__notes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border-left: 4px solid var(--lab-navy);
    border-radius: 0 var(--lab-radius-sm) var(--lab-radius-sm) 0;
    background: var(--lab-white);
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;

    &.is-changed {
      outline: 2px solid var(--lab-primary);
    }
  }

  & .lab-demo-out__rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  & .lab-demo-out__row {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    column-gap: 16px;
    margin: 0 -8px;
    padding: 4px 8px;
    border-radius: var(--lab-radius-sm);

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
    }

    &.lab-demo-out__row--note {
      grid-template-columns: minmax(0, 1fr);
    }

    &.is-changed {
      background: var(--lab-white);
      outline: 2px solid var(--lab-primary);
      outline-offset: -2px;
    }
  }

  & .lab-demo-out__label {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 8px;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink-2);

    @media (max-width: 767px) {
      line-height: 1.7;
    }
  }

  & .lab-demo-out__value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink);
    overflow-wrap: anywhere;
  }

  & .lab-demo-out__bullets {
    display: flex;
    flex-direction: column;

    & > li {
      position: relative;
      padding-left: 16px;

      &::before {
        content: '';
        position: absolute;
        top: .8em;
        left: 2px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--lab-navy);
      }
    }
  }

}

/* GREEN：事業部で確認すべき点（□ のチェックリスト） */
.lab-demo-todo {
  display: flex;
  flex-direction: column;
  gap: 8px;

  & .lab-demo-todo__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0 -8px;
    padding: 4px 8px 4px 40px;
    border-radius: var(--lab-radius-sm);
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;

    &::before {
      content: '';
      position: absolute;
      top: 8px;
      left: 8px;
      width: 20px;
      height: 20px;
      border: 2px solid var(--lab-navy);
      border-radius: var(--lab-radius-sm);
      background: var(--lab-white);
    }

    &.is-changed {
      background: var(--lab-white);
      outline: 2px solid var(--lab-primary);
      outline-offset: -2px;
    }
  }
}

.lab-demo-out__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

/* 1023px以下：解説パネルが下にあるため、Before／After への近道を出す */
.lab-demo-panel-link {
  display: none;

  @media (max-width: 1023px) {
    display: flex;
    margin-top: -16px;
  }
}

/* --------------------------------------------------------------------------
   解説パネル：法務が判断に必要とする情報（チェックリスト）
   見出しの直後（常に見えている位置）に置き、「いま見ている内容」はその下に罫線で区切る
   -------------------------------------------------------------------------- */
.lab-demo-panel {
  & .lab-demo-panel__section.lab-demo-panel__section--checklist {
    gap: 12px;
    padding-top: 0;
    border-top: 0;
  }

  & .lab-demo-panel__section--checklist + .lab-demo-panel__section--now {
    padding-top: 24px;
    border-top: 1px solid var(--lab-line);
  }
}

.lab-demo-checklist__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.lab-demo-checklist__count {
  margin-left: auto;
  font-size: var(--lab-fs-small);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--lab-navy);
}

/* 結果の後に1行へ畳む／開く（淡色面の上のため紺） */
.lab-demo-checklist__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--lab-fs-small);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--lab-navy);
  text-decoration: underline;
  text-underline-offset: 6px;

  &:hover {
    text-decoration-thickness: 2px;
  }

  &[hidden] {
    display: none;
  }
}

.lab-demo-checklist__body {
  display: flex;
  flex-direction: column;
  gap: 12px;

  &[hidden] {
    display: none;
  }
}

.lab-demo-checklist__lead {
  font-size: var(--lab-fs-small);
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--lab-ink-2);
}

.lab-demo-checklist {
  display: flex;
  flex-direction: column;
  padding: 4px 16px;
  border-radius: var(--lab-radius-md);
  background: var(--lab-white);

  @media (max-width: 767px) {
    padding: 4px 12px;
  }
}

/* 行は詰めて組む（要確認・未確認は1行、読み取り済み・回答済みは値を添えて2行）。sticky のパネルで解説の場所を残すため */
.lab-demo-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  margin: 0 -8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--lab-line);
  border-radius: var(--lab-radius-sm);

  &:last-child {
    border-bottom: 0;
  }

  /* 状態が変わった瞬間の短いハイライト（reduced-motion では付けない） */
  &.is-flash {
    animation: lab-demo-flash 960ms var(--lab-ease-out);

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

  & .lab-demo-check__icon {
    position: relative;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 1px solid var(--lab-ink-3);
    border-radius: 50%;
    background: var(--lab-white);
  }

  & .lab-demo-check__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  & .lab-demo-check__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 12px;
  }

  & .lab-demo-check__label {
    font-size: var(--lab-fs-body);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
  }

  & .lab-demo-check__state {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-3);
  }

  & .lab-demo-check__value {
    font-size: var(--lab-fs-small);
    line-height: 1.5;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
    overflow-wrap: anywhere;

    &:empty {
      display: none;
    }
  }

  /* 要確認：破線の丸 */
  &[data-state="ask"] {
    & .lab-demo-check__icon {
      border: 2px dashed var(--lab-navy);
    }

    & .lab-demo-check__state {
      font-weight: 700;
      color: var(--lab-ink);
    }
  }

  /* 読み取り済み（資料から）：線の丸＋チェック／回答済み（質問で）：塗りの丸＋白のチェック */
  &[data-state="read"],
  &[data-state="answered"] {
    & .lab-demo-check__icon {
      border: 2px solid var(--lab-navy);

      &::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 5px;
        width: 6px;
        height: 10px;
        border-right: 2px solid var(--lab-navy);
        border-bottom: 2px solid var(--lab-navy);
        transform: rotate(45deg);
      }
    }

    & .lab-demo-check__state {
      font-weight: 700;
      color: var(--lab-navy);
    }
  }

  &[data-state="answered"] .lab-demo-check__icon {
    background: var(--lab-navy);

    &::after {
      border-color: var(--lab-white);
    }
  }
}

/* --------------------------------------------------------------------------
   解説パネル：依頼の振り分け表（今回の結果に枠）・条項ごとのルール（開閉）
   -------------------------------------------------------------------------- */
.lab-demo-vtable {
  & .lab-demo-vtable__lead {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
  }

  & .lab-demo-rules__decider.is-current {
    margin: 0 -12px;
    padding: 12px;
    border-bottom-color: transparent;
    border-radius: var(--lab-radius-sm);
    background: var(--lab-white);
    outline: 2px solid var(--lab-navy);
    outline-offset: -2px;

    @media (max-width: 767px) {
      margin: 0 -8px;
      padding: 12px 8px;
    }
  }

  & .lab-demo-vtable__flag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin-left: 8px;
    padding: 0 8px;
    border: 1px solid var(--lab-navy);
    border-radius: var(--lab-radius-sm);
    font-size: var(--lab-fs-label);
    line-height: 1;
    letter-spacing: .04em;
    color: var(--lab-navy);
    vertical-align: 2px;
  }
}

.lab-demo-rules-more {
  border-top: 1px solid var(--lab-line);

  & .lab-demo-rules-more__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 0;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-navy);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      content: '';
      flex: none;
      width: 12px;
      height: 12px;
      background:
        linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
    }

    &:hover {
      text-decoration: underline;
      text-underline-offset: 6px;
    }

    &:focus-visible {
      outline-offset: -2px;
    }
  }

  &[open] > .lab-demo-rules-more__summary::before {
    background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
  }

  & .lab-demo-rules-more__body {
    padding: 8px 0 4px;
  }
}

/* --------------------------------------------------------------------------
   解説パネル：Before／After（RED の結果）
   -------------------------------------------------------------------------- */
.lab-demo-ba {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--lab-line);

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--lab-primary);
    outline-offset: 4px;
  }

  & .lab-demo-ba__title {
    font-size: var(--lab-fs-body);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-navy);
  }

  /* パネルの幅では2列だと細切れになるため、項目ごとに Before・After を縦に積む */
  & .lab-demo-ba__rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  & .lab-demo-ba__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  & .lab-demo-ba__label {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-ba__cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 8px 12px 12px;
    border-radius: var(--lab-radius-sm);
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink);
    overflow-wrap: anywhere;

    /* 従来＝bg-3＋赤／AX後＝bg-2＋紺（コンポーネントシート 05 のマーカー） */
    &.lab-demo-ba__cell--before {
      background: var(--lab-bg-3);

      & .lab-demo-ba__tag {
        color: var(--lab-negative-red);
      }
    }

    &.lab-demo-ba__cell--after {
      background: var(--lab-bg-2);

      & .lab-demo-ba__tag {
        color: var(--lab-navy);
      }
    }
  }

  & .lab-demo-ba__tag {
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
  }

  /* After の本文：この回で作った法務依頼文そのもの（長いため高さを抑えて中でスクロール） */
  & .lab-demo-ba__doc {
    align-self: stretch;
    max-height: 320px;
    margin: 0;
    padding: 12px 16px;
    overflow: auto;
    border-radius: var(--lab-radius-sm);
    background: var(--lab-white);
    font-family: inherit;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    &:focus-visible {
      outline-offset: -2px;
    }
  }

  & .lab-demo-ba__note {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    color: var(--lab-ink-2);
  }
}

/* --------------------------------------------------------------------------
   解説パネル：検証で分かったこと（AIの聞き漏らしを見る。開閉）
   -------------------------------------------------------------------------- */
.lab-demo-misses__lead {
  font-size: var(--lab-fs-body);
  line-height: 1.85;
  letter-spacing: .04em;
}

.lab-demo-misses__toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--lab-navy);
  border-radius: var(--lab-radius-sm);
  background: var(--lab-white);
  font-size: var(--lab-fs-small);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--lab-navy);
  text-align: left;
  transition:
    background-color var(--lab-dur-fast) var(--lab-ease-out),
    color var(--lab-dur-fast) var(--lab-ease-out);

  /* ＋／−（開閉） */
  &::before {
    content: '';
    flex: none;
    width: 12px;
    height: 12px;
    background:
      linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
      linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
  }

  &[aria-expanded="true"]::before {
    background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
  }

  &:hover {
    background: var(--lab-navy);
    color: var(--lab-white);
  }
}

.lab-demo-misses {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;

  /* 淡色面（パネル）の上の小さい文字は紺。赤は bg-3 のカードの中だけ */
  & .lab-demo-misses__message {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-navy);
  }

  & .lab-demo-misses__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
  }

  & .lab-demo-miss {
    padding: 12px 16px;
  }

  & .lab-demo-misses__closing {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
  }
}

/* --------------------------------------------------------------------------
   提案書のプレビュー（proposal-demo02.json。契約書と同じ .lab-demo-doc の文字組み）
   -------------------------------------------------------------------------- */
.lab-demo-proposal {
  & .lab-demo-proposal__notice {
    padding: 8px 16px;
    border-radius: var(--lab-radius-sm);
    background: var(--lab-bg-1);
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    color: var(--lab-ink-2);
  }

  & .lab-demo-proposal__cover {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--lab-line);
  }

  & .lab-demo-proposal__from {
    text-align: right;
  }

  & .lab-demo-proposal__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  & .lab-demo-proposal__items {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  & .lab-demo-proposal__item {
    margin: 0 -8px;
    padding: 4px 8px;
    border-radius: var(--lab-radius-sm);
    scroll-margin: 32px;

    &:focus {
      outline: none;
    }
  }

  & .lab-demo-proposal__item-name {
    font-weight: 700;
  }

  & .lab-demo-proposal__plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
    }
  }

  & .lab-demo-proposal__plan {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 16px 24px;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-md);

    @media (max-width: 767px) {
      padding: 16px;
    }
  }

  & .lab-demo-proposal__plan-name {
    font-weight: 700;
  }

  & .lab-demo-proposal__plan-price {
    font-size: var(--lab-fs-title);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
  }

  & .lab-demo-proposal__phases {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--lab-line);

    & > li {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr);
      column-gap: 16px;
      padding: 8px 0;
      border-bottom: 1px solid var(--lab-line);

      @media (max-width: 767px) {
        grid-template-columns: 96px minmax(0, 1fr);
      }
    }
  }

  & .lab-demo-proposal__period {
    color: var(--lab-ink-2);
  }

  & .lab-demo-proposal__rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--lab-line);
  }

  & .lab-demo-proposal__row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--lab-line);

    @media (max-width: 767px) {
      grid-template-columns: 96px minmax(0, 1fr);
    }

    & dt {
      font-weight: 700;
      color: var(--lab-ink-2);
    }
  }

  & .lab-demo-proposal__note {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    color: var(--lab-ink-2);
  }
}

/* ==========================================================================
   図（engine.js の app.diagram）・タブ（E.ui.tabs）・回答の見出しの札（app.chat.assistant の tag）
   デモ3「取引スキーム図の自動生成」で使う共通部品（デモ1・2には出てこない）
   ========================================================================== */

/* 回答の見出しに添える札（「［仮］想定出力」など）。区分バッジ・「変更」の札と見分けるため、灰色の線だけにする */
.lab-demo-msg {
  & .lab-demo-msg__tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin-left: 8px;
    padding: 0 8px;
    border: 1px solid var(--lab-ink-3);
    border-radius: var(--lab-radius-sm);
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
    vertical-align: 1px;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   タブ（WAI-ARIA tabs。選択中は青の下線2px）
   -------------------------------------------------------------------------- */
.lab-demo-tabs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;

  & .lab-demo-tabs__list {
    display: flex;
    border-bottom: 1px solid var(--lab-line);
  }

  & .lab-demo-tabs__tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    min-height: 56px;
    margin-bottom: -1px;
    padding: 8px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: var(--lab-fs-small);
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
    text-align: left;
    transition:
      color var(--lab-dur-fast) var(--lab-ease-out),
      border-color var(--lab-dur-fast) var(--lab-ease-out);

    @media (max-width: 767px) {
      padding: 8px 12px;
    }

    &:hover {
      color: var(--lab-primary);
    }

    &[aria-selected="true"] {
      border-bottom-color: var(--lab-primary);
      color: var(--lab-primary);
    }

    &:focus-visible {
      outline-offset: -2px;
    }
  }

  & .lab-demo-tabs__panel {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   図の枠（拡大・縮小／枠内の横スクロール／文章の代替／コード表示／読み込み失敗時の代替）
   -------------------------------------------------------------------------- */
.lab-demo-diagram {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;

  & .lab-demo-diagram__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
  }

  & .lab-demo-diagram__title {
    flex: 1 1 240px;
    min-width: 0;
    font-size: var(--lab-fs-body);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink);
  }

  & .lab-demo-diagram__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 16px;
    margin-left: auto;

    @media (max-width: 767px) {
      justify-content: flex-start;
      margin-left: 0;
    }
  }

  & .lab-demo-diagram__tools-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  & .lab-demo-diagram__zoom-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  & .lab-demo-diagram__zoom,
  & .lab-demo-diagram__fit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-sm);
    background: var(--lab-white);
    font-size: var(--lab-fs-title);
    font-weight: 700;
    line-height: 1;
    color: var(--lab-ink-2);
    transition:
      border-color var(--lab-dur-fast) var(--lab-ease-out),
      color var(--lab-dur-fast) var(--lab-ease-out);

    &:hover {
      border-color: var(--lab-primary);
      color: var(--lab-primary);
    }

    &[aria-disabled="true"] {
      border-color: var(--lab-line);
      color: var(--lab-line);
      cursor: default;
    }
  }

  /* 全体を表示（すでに全体が見えているときは −・＋ の端と同じく aria-disabled の見た目） */
  & .lab-demo-diagram__fit {
    margin-left: 4px;
    padding: 0 12px;
    font-size: var(--lab-fs-small);
    letter-spacing: .04em;
  }

  & .lab-demo-diagram__level {
    min-width: 48px;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    color: var(--lab-ink-2);
    text-align: center;
  }

  /* 枠の中だけスクロール（横長の図）。高さは図に合わせ、縦はページでスクロールする */
  & .lab-demo-diagram__viewport {
    position: relative;
    min-width: 0;
    overflow: auto;
    overscroll-behavior-x: contain;
    padding: 16px;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-md);
    background: var(--lab-white);

    &:focus-visible {
      outline-offset: 2px;
    }
  }

  & .lab-demo-diagram__canvas {
    width: max-content;
    min-width: 100%;

    & svg {
      display: block;
      max-width: none;
      margin-inline: auto;
    }
  }

  & .lab-demo-diagram__status {
    padding: 48px 0;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-3);
    text-align: center;
  }

  & .lab-demo-diagram__hint {
    font-size: var(--lab-fs-label);
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--lab-ink-3);
  }

  & .lab-demo-diagram__fallback {
    padding: 16px 24px;
    border-left: 4px solid var(--lab-navy);
    border-radius: 0 var(--lab-radius-sm) var(--lab-radius-sm) 0;
    background: var(--lab-bg-1);
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink);

    @media (max-width: 767px) {
      padding: 12px 16px;
    }
  }

  /* 書き換えで変わった矢印を一瞬強調（engine.js の fig.flash。reduced-motion では付けない） */
  & .edgePaths path.is-flash {
    animation: lab-demo-diagram-flash 1600ms var(--lab-ease-out);
  }

  & .edgeLabel.is-flash .labelBkg,
  & .edgeLabel.is-flash span.edgeLabel {
    animation: lab-demo-diagram-flash-label 1600ms var(--lab-ease-out);
  }

  /* 文章の代替・コード（開閉） */
  & .lab-demo-diagram__extras {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--lab-line);
  }

  & .lab-demo-diagram__more {
    border-bottom: 1px solid var(--lab-line);

    &[open] > .lab-demo-diagram__summary::before {
      background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
    }
  }

  & .lab-demo-diagram__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-primary);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      content: '';
      flex: none;
      width: 12px;
      height: 12px;
      background:
        linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
    }

    &:hover {
      text-decoration: underline;
      text-underline-offset: 6px;
    }

    &:focus-visible {
      outline-offset: -2px;
    }
  }

  & .lab-demo-diagram__alt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 16px;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink);
  }

  & .lab-demo-diagram__code-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 16px;
  }

  & .lab-demo-diagram__code-note {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo-diagram__code {
    max-height: 400px;
    margin: 0;
    padding: 16px;
    overflow: auto;
    border-radius: var(--lab-radius-md);
    background: var(--lab-bg-1);
    font-family: inherit;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .02em;
    color: var(--lab-ink);
    white-space: pre;
    tab-size: 2;

    &:focus-visible {
      outline-offset: -2px;
    }

    & code {
      font-family: inherit;
    }
  }

  & .lab-demo-diagram__code-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
  }
}

@keyframes lab-demo-diagram-flash {
  0%,
  40% {
    stroke: var(--lab-primary);
    stroke-width: 6px;
  }
}

@keyframes lab-demo-diagram-flash-label {
  0%,
  40% {
    background-color: var(--lab-bg-2);
  }
}