/* ============================================================
   AI 프롬프트 연습장 — 채팅·칩·조립기 스타일
   (페이지 뼈대는 ../mission/mission.css 재사용, 테마: 티얼)
   ============================================================ */

/* 티얼 테마 배지 */
.m-no { background: #F0FDFA !important; color: #0D9488 !important; border: 1px solid #99F6E4 !important; }

/* ── 가짜 AI 채팅 ── */
.pr-chat {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.07);
}
.pr-head { padding: 12px 18px; border-bottom: 1px solid #F3F4F6; font-weight: 800; font-size: .95rem; color: #0D9488; }
.pr-head .sub { font-weight: 500; font-size: .78rem; color: #9CA3AF; margin-left: 6px; }
.pr-log { min-height: 180px; max-height: 420px; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.pr-bub { max-width: 92%; padding: 12px 16px; border-radius: 16px; line-height: 1.7; font-size: .95rem; word-break: break-word; animation: prIn .25s ease; }
@keyframes prIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pr-bub.me { align-self: flex-end; background: #0D9488; color: #fff; border-bottom-right-radius: 4px; }
.pr-bub.ai { align-self: flex-start; background: #F3F4F6; color: #1F2937; border-bottom-left-radius: 4px; }
.pr-bub.ai.thinking { color: #9CA3AF; }
.pr-bub.ai table { border-collapse: collapse; margin: 6px 0; font-size: .88rem; }
.pr-bub.ai th, .pr-bub.ai td { border: 1px solid #D1D5DB; padding: 5px 10px; text-align: left; }
.pr-bub.ai th { background: #E5E7EB; }
.pr-bub.ai ul { margin: 4px 0 4px 18px; }
.tdots i { animation: blinkDot 1.2s infinite; font-style: normal; }
.tdots i:nth-child(2) { animation-delay: .2s; }
.tdots i:nth-child(3) { animation-delay: .4s; }
@keyframes blinkDot { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

.pr-input-bar { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #F3F4F6; align-items: center; }
.pr-input-bar input {
  flex: 1; font-family: inherit; font-size: 1rem; padding: 12px 16px;
  border: 2px solid #E5E7EB; border-radius: 24px; min-width: 0;
}
.pr-input-bar input:focus { outline: none; border-color: #0D9488; }
.pr-input-bar .pr-send {
  border: none; background: #0D9488; color: #fff; width: 44px; height: 44px;
  border-radius: 50%; font-size: 1.05rem; cursor: pointer; flex-shrink: 0;
}
.pr-input-bar .pr-send:hover { background: #0F766E; }

/* ── 프롬프트 조립기 ── */
.builder {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,.07); margin-bottom: 16px;
}
.builder .b-label { font-size: .78rem; font-weight: 800; color: #94A3B8; letter-spacing: .06em; margin-bottom: 8px; }
.prompt-preview {
  background: #F0FDFA; border: 2px dashed #5EEAD4; border-radius: 12px;
  padding: 14px 16px; font-size: 1.02rem; font-weight: 700; line-height: 1.7; word-break: keep-all; color: #134E4A;
}
.prompt-preview .add { color: #0D9488; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.chip {
  border: 2px solid #E5E7EB; background: #fff; color: #374151;
  font-family: inherit; font-size: .92rem; font-weight: 700;
  padding: 10px 16px; border-radius: 24px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color: #99F6E4; }
.chip.on { border-color: #0D9488; background: #F0FDFA; color: #0F766E; }
.chip.on::before { content: '✓ '; }
.chip.used { border-color: #A7F3D0; background: #F0FDF4; color: #059669; }
.chip.used::before { content: '✓ '; }

.b-send { text-align: center; margin-top: 6px; }

/* ── 비교 카드 ── */
.vs-note { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
@media (max-width: 560px) { .vs-note { grid-template-columns: 1fr; } }
.vs-note .vn { border-radius: 14px; padding: 16px; font-size: .9rem; line-height: 1.7; word-break: keep-all; }
.vs-note .vn.bad2 { background: #FEF2F2; border: 2px solid #FECACA; }
.vs-note .vn.good2 { background: #F0FDF4; border: 2px solid #BBF7D0; }
.vs-note .vn .vt { font-weight: 900; margin-bottom: 6px; }

/* ── 체크리스트(최종) ── */
.self-check { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.self-check label {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid #E5E7EB;
  border-radius: 12px; padding: 13px 16px; font-weight: 700; font-size: .95rem; cursor: pointer; word-break: keep-all;
}
.self-check input { width: 20px; height: 20px; accent-color: #0D9488; flex-shrink: 0; }
.self-check label:has(input:checked) { border-color: #5EEAD4; background: #F0FDFA; }

.final-area {
  width: 100%; font-family: inherit; font-size: 1.05rem; line-height: 1.8;
  padding: 16px; border: 2px solid #E5E7EB; border-radius: 14px; min-height: 110px; resize: vertical;
}
.final-area:focus { outline: none; border-color: #0D9488; }

/* 디놀릿 CTA */
.dino-cta {
  display: block; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, #F0FDFA, #EFF6FF); border: 2px solid #99F6E4;
  border-radius: 16px; padding: 20px 22px; margin: 18px 0; transition: border-color .15s, box-shadow .15s;
}
.dino-cta:hover { border-color: #0D9488; box-shadow: 0 8px 24px rgba(13, 148, 136, .12); }
.dino-cta .dc-label { font-size: .74rem; font-weight: 800; color: #0D9488; letter-spacing: .06em; }
.dino-cta .dc-title { font-size: 1.1rem; font-weight: 900; margin: 4px 0 6px; word-break: keep-all; }
.dino-cta .dc-desc { font-size: .88rem; color: #6B7280; line-height: 1.6; word-break: keep-all; }
.dino-cta .dc-go { display: inline-block; margin-top: 10px; font-size: .9rem; font-weight: 800; color: #0D9488; }