/* ─── 토큰 다리 ────────────────────────────────────────────────
   이 파일은 bogyeompark.github.io 에서 온 것이라 그 사이트의 토큰을 참조한다.
   여기서 우리 팔레트로 이어 준다 — 아래만 갈면 시연 전체의 색·글꼴이 바뀐다.

   :root 가 아니라 시연이 놓이는 칸에만 건다. :root 에 걸면 --ink 같은 이름이
   사이트 전역 값을 덮어써서, 데모 페이지의 본문 색이 다른 페이지와 달라진다. */
.demo_play {
  --sans: 'NanumSquare', 'Malgun Gothic', sans-serif;
  --serif: var(--sans);          /* 글꼴은 사이트와 같은 하나로 — serif 는 쓰지 않는다 */
  --ink: #14192a;                /* 제목 */
  --body: var(--ink-soft);       /* 본문 */
  --muted: var(--gray-ink);      /* 보조 */
  --line: var(--gray-line);
  --soft: var(--wash);           /* 옅은 판 */
  --paper: #fff;
  --warm: var(--navy-tint);      /* 원래 베이지였던 자리 — 남색 계열로 */
  --accent: var(--navy-ink);
  --accent-dark: var(--navy);
  --accent-pale: var(--navy-tint);
  --on-accent: #fff;
  --shadow: 0 10px 30px rgba(16, 26, 77, .10);
}

/* The self-disclosure chat demo. A messaging window is a form people already
   know how to read, so the only styling decisions here are the two that carry
   meaning: which side a message sits on, and which of the bot's messages are the
   disclosures. Those are marked, because the disclosures are the independent
   variable of the study and a visitor who cannot see them learns nothing. */
.sd-window {
  display: flex;
  flex-direction: column;
  max-width: 660px;
  height: min(60vh, 520px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
}
.sd-log { flex: 1; overflow-y: auto; padding: 20px 20px 8px; }
.sd-row { display: flex; margin-bottom: 12px; }
.sd-user { justify-content: flex-end; }
.sd-bubble {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 15px;
  background: var(--soft);
  color: var(--body);
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.sd-user .sd-bubble { background: var(--accent); color: var(--on-accent); }
/* The disclosures are what separates this condition from the control, so they
   are the one thing in the window that looks different from everything else. */
.sd-bot .sd-bubble.is-disclosure {
  border-left: 3px solid var(--warm);
  background: var(--warm);
  color: var(--ink);
}
.sd-list { margin: 10px 0 0; padding-left: 20px; }
.sd-list li { margin-bottom: 3px; }
.sd-typing { display: flex; gap: 4px; padding: 14px 15px; }
.sd-typing span {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--muted);
  animation: sd-blink 1.2s infinite;
}
.sd-typing span:nth-child(2) { animation-delay: .2s; }
.sd-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes sd-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sd-typing span { animation: none; opacity: .5; } }

.sd-form { display: flex; gap: 9px; padding: 13px 14px; border-top: 1px solid var(--line); background: var(--soft); }
.sd-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.9rem;
}
.sd-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sd-form button {
  padding: 10px 20px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.sd-form button:hover { background: var(--accent-dark); }

.sd-report { max-width: 660px; margin: 26px 0 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.sd-report-lead { margin: 0 0 18px; color: var(--body); font-size: 0.92rem; line-height: 1.6; }
.sd-report-group { margin-bottom: 16px; }
.sd-report-group h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 1rem; font-weight: 600; }
.sd-report-group ul { margin: 0; padding-left: 20px; color: var(--body); font-size: 0.88rem; line-height: 1.6; }
.sd-none { margin: 0; color: var(--muted); font-size: 0.86rem; }
.sd-report-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; line-height: 1.6; }
.sd-restart { margin-top: 16px; }