/* multimodal.css — '이미지·음성의 비밀' 페이지 전용 스타일
   (패널·말풍선 팁·토큰 칩·벡터 표·버튼 등 공용 부품은 components.css를 그대로 사용) */

/* 세 패널을 비슷한 폭으로 */
.sim-stage.mm-stage {
  grid-template-columns: 1fr auto 1.05fr auto 1.1fr;
}

.mm-panel {
  gap: 0;
}

.mm-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ── 그림 ── */
.mm-canvas {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  align-self: center;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: #ffffff;
  animation: pop-in 0.35s ease backwards;
}

.mm-canvas-sm {
  max-width: 210px;
}

.mm-wave {
  max-width: 100%;
}

/* ── 아직 아무것도 없을 때 ── */
.mm-ghost {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 140px;
  padding: 24px 16px;
  border: 1.5px dashed var(--panel-border);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: 0.92rem;
}

.mm-note {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.mm-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* ── 말풍선: 내가 보낸 말 / 언어 모델의 답 ── */
.mm-bubble {
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.98rem;
  line-height: 1.5;
  animation: pop-in 0.3s ease backwards;
}

.mm-bubble-me {
  align-self: flex-end;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-deep);
  border-bottom-right-radius: 4px;
  font-weight: 600;
}

.mm-bubble-ai {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-bottom-left-radius: 4px;
  min-height: 2.6em;
}

/* ── 언어 모델이 받는 입력 묶음 ── */
.mm-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--track);
  border-radius: var(--radius-sm);
}

.mm-tokens {
  font-size: 0.98rem;
}

.mm-tokens .token {
  padding: 3px 10px;
}

/* 파일 자리 */
.mm-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  animation: pop-in 0.3s ease backwards;
}

.mm-slot-blocked {
  border: 1.5px dashed #fca5a5;   /* red-300 */
  background: #fef2f2;            /* red-50 */
  color: #b91c1c;                 /* red-700 */
}

.mm-slot-blocked .mm-slot-name {
  text-decoration: line-through;
  color: var(--text-dim);
}

.mm-slot-blocked .mm-slot-state {
  font-weight: 700;
}

.mm-slot-icon {
  font-size: 1.2rem;
}

.mm-slot-filled {
  border: 1px solid var(--accent-border);
  background: var(--panel);
  color: var(--accent-deep);
  font-weight: 600;
}

.mm-mini-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns, 8), 1fr);
  gap: 1px;
  width: 72px;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  overflow: hidden;
}

.mm-mini-grid span {
  display: block;
  aspect-ratio: 1;
}

.mm-vectors {
  margin-top: 0;
}

/* ── 받아쓰기 종이 · 주문서 ── */
.mm-paper {
  background: #fffbeb;            /* amber-50 */
  border: 1px solid #fde68a;      /* amber-200 */
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  animation: pop-in 0.3s ease backwards;
}

.mm-paper-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #92400e;                 /* amber-800 */
  margin-bottom: 4px;
}

.mm-paper-body {
  white-space: pre-wrap;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  min-height: 1.5em;
}

/* ── 사라진 것 / 달라진 것 목록 ── */
.mm-check {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}

.mm-check li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  animation: pop-in 0.3s ease backwards;
}

.mm-check li:nth-child(2) { animation-delay: 80ms; }
.mm-check li:nth-child(3) { animation-delay: 160ms; }
.mm-check li:nth-child(4) { animation-delay: 240ms; }
.mm-check li:nth-child(5) { animation-delay: 320ms; }

.mm-check-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
}

.mm-check .ok .mm-check-mark {
  background: #d1fae5;            /* emerald-100 */
  color: #047857;                 /* emerald-700 */
}

.mm-check .bad .mm-check-mark {
  background: #fee2e2;            /* red-100 */
  color: #b91c1c;                 /* red-700 */
}

/* '사라진 것' 목록은 글자에 줄을 긋는다 */
.mm-lost .bad span:last-child {
  text-decoration: line-through;
  color: var(--text-dim);
}

/* ── 두 갈래 (A 사진 / B 글) ── */
.mm-lane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  animation: pop-in 0.3s ease backwards;
}

.mm-lane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-dim);
}

.mm-lane-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--track);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}

.mm-lane-b .mm-lane-tag {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.mm-lane .mm-canvas {
  align-self: flex-start;
}

.mm-lane .mm-bubble {
  align-self: flex-start;
}

/* ── 조작부 ── */
.control-scenario select {
  max-width: 100%;
}

.mm-disclaimer {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
}

/* ── 네 가지 데모 카드 ── */
.mm-demos {
  margin-top: 72px;
}

.mm-demo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.mm-demo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  line-height: 1.5;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.mm-demo-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-2px);
}

.mm-demo-card strong {
  font-size: 1.05rem;
}

.mm-demo-card > span:last-child {
  font-size: 0.88rem;
  color: var(--text-dim);
}

.mm-demo-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 800;
  font-size: 0.9rem;
}

/* ── 그래서 어떻게 할까요? ── */
.mm-takeaway {
  margin-top: 72px;
}

.mm-takeaway-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mm-card {
  min-height: 0;
  gap: 12px;
}

.mm-card h3 {
  font-size: 1.1rem;
}

.mm-card ul {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--text-dim);
}

.mm-card li strong {
  color: var(--text);
}

/* ── 근거 문서 ── */
.mm-sources {
  margin-top: 18px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  background: var(--panel);
  font-size: 0.9rem;
  color: var(--text-dim);
}

.mm-sources summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
}

.mm-sources ul {
  margin-top: 12px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mm-sources .mm-note {
  margin-top: 12px;
}

/* ── 좁은 화면: 세 패널을 세로로 쌓기 (layout.css의 .sim-stage 규칙보다 우선순위가 높아 다시 지정) ── */
@media (max-width: 1024px) {
  .sim-stage.mm-stage {
    grid-template-columns: 1fr;
  }

  .mm-demo-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .mm-demo-grid,
  .mm-takeaway-grid {
    grid-template-columns: 1fr;
  }

  .mm-demos,
  .mm-takeaway {
    margin-top: 48px;
  }

  .mm-bubble {
    font-size: 0.92rem;
  }
}