/* 도입부 실제 화면 미리보기
   말풍선·지문 규칙은 prototype/app.css 의 .msgs / .m-sit / .m-char / .m-user / .bub 를 옮겨 담은 것이다.
   실제 화면 스타일이 바뀌면 여기도 같이 맞춘다. 스튜디오 전역에 영향이 가지 않도록 .sp-screen 아래로만 적용한다. */

/* 3단계만 2단으로 — 왼쪽 편집, 오른쪽 미리보기. 좁은 화면에서는 아래로 내려간다. */
@media (min-width: 1280px) {
  .panel[data-step="3"] {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 820px) minmax(300px, 1fr);
    column-gap: 20px;
    align-items: start;
  }
  .panel[data-step="3"] > *:not(#introEditor):not(#introPreview) { grid-column: 1 / -1; }
  .panel[data-step="3"] > #introEditor { grid-column: 1; }
  .panel[data-step="3"] > #introPreview { grid-column: 2; position: sticky; top: 70px; }
}
@media (max-width: 1279px) { .studio-preview { margin-top: 18px; } }

.studio-preview[hidden] { display: none !important; }
.studio-preview .sp-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.studio-preview .sp-head b { font-size: 13px; }
.studio-preview .sp-sub { font-size: 11.5px; color: var(--tx3); }
.studio-preview .sp-note { font-size: 11.5px; color: var(--tx3); line-height: 1.6; margin-top: 8px; }

/* 기기 틀 — 실제 이용자 화면 폭(390px)을 유지하되 열 폭에 맞춰 줄인다 */
.studio-preview .sp-phone {
  width: 100%; max-width: 390px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #0F0E17;
}
.studio-preview .sp-screen { display: flex; flex-direction: column; max-height: min(620px, 62vh); }
.studio-preview .sp-topbar {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #F5F3FA; flex: none;
}
.studio-preview .sp-back { color: #8C879C; }
.studio-preview .sp-name { font-weight: 700; }
.studio-preview .sp-inputrow {
  flex: none; padding: 9px 12px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12.5px; color: #5E5A6C;
}
.studio-preview .sp-empty { padding: 26px 14px; text-align: center; color: #5E5A6C; font-size: 12.5px; }

/* ── 여기부터 실제 화면 규칙 사본 ── */
.studio-preview .msgs {
  flex: 1; overflow-y: auto; padding: 14px 14px 10px;
  display: flex; flex-direction: column; gap: 10px; scrollbar-width: none;
}
.studio-preview .msgs::-webkit-scrollbar { display: none; }
.studio-preview .msgs > * { flex: 0 0 auto; }
.studio-preview .m-img { margin: 0 -14px; position: relative; }
.studio-preview .m-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 16%; display: block; }
.studio-preview .m-sit {
  font-size: 14.5px; color: #DCD7E8; text-align: left; padding: 0 2px; margin: 2px 0;
  line-height: 1.7; text-wrap: pretty; max-width: 92%;
}
.studio-preview .m-char { display: flex; gap: 8px; align-items: flex-start; max-width: 88%; }
.studio-preview .m-char .av {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; background: #3A3552;
}
.studio-preview .m-char .av img { width: 100%; height: 100%; object-fit: cover; }
.studio-preview .m-char .who { font-size: 11.5px; color: #8C879C; margin-bottom: 3px; }
.studio-preview .bub {
  padding: 10px 13px; border-radius: 4px 16px 16px 16px; background: #24212F;
  font-size: 14.5px; line-height: 1.55; color: #F5F3FA;
}
.studio-preview .m-user { align-self: flex-end; max-width: 80%; }
.studio-preview .m-user .bub { background: #7B5CFF; border-radius: 16px 4px 16px 16px; color: #fff; }
.studio-preview .m-status {
  border-radius: 14px; border: 1px solid rgba(123,92,255,.3);
  background: linear-gradient(180deg, rgba(123,92,255,.1), rgba(123,92,255,.03));
  padding: 10px 12px; font-size: 12.5px; color: #BDB8CC; display: flex; flex-direction: column; gap: 5px;
}
.studio-preview .m-status .r { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.studio-preview .m-status .r span { white-space: nowrap; }
/* 추천 답장 카드 — prototype/app.css 의 .sugcard 와 같은 모양 */
.studio-preview .sp-sugs { display: grid; gap: 6px; }
.studio-preview .sugcard {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center;
  background: #1A1826; border: 1px solid rgba(123,92,255,.34); border-radius: 14px;
  text-align: left; cursor: default; padding: 0; overflow: hidden;
}
.studio-preview .sugcard .pen {
  display: grid; place-items: center; align-self: stretch; font-size: 12px; color: #5E5A6C;
  border-right: 1px solid rgba(255,255,255,.08);
}
.studio-preview .sugcard .tx { padding: 8px 11px; min-width: 0; }
.studio-preview .sugcard .say { font-size: 13px; font-weight: 700; color: #F5F3FA; line-height: 1.5; }

/* 입력한 값 안의 자리표시자·빠진 이미지는 눈에 띄게 */
/* 치환될 자리라는 것만 알아보면 된다 — 글자 사이가 벌어지지 않게 여백을 되돌린다 */
.studio-preview .sp-token {
  color: #9C85FF; background: rgba(123,92,255,.14); border-radius: 4px;
  padding: 0 2px; margin: 0 -1px;
}
.studio-preview .m-img .sp-imgnote {
  position: absolute; left: 14px; top: 10px; font-size: 11px; color: #BDB8CC;
  background: rgba(15,14,23,.72); border-radius: 999px; padding: 2px 8px;
}
.studio-preview .m-img.sp-missing {
  min-height: 120px; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #17151F, #17151F 8px, #1D1A26 8px, #1D1A26 16px);
}
.studio-preview .m-img.sp-missing img { display: none; }
.studio-preview .m-img.sp-missing .sp-imgnote { position: static; }