/* ============================================================
   chatbook.css — OrangeRefine 캐릭터챗북
   메인 컬러: #BF8C80
   ============================================================ */

.cb-page { max-width: 880px; }

/* ── 갤러리 ───────────────────────────── */
.cb-gallery { display: flex; flex-direction: column; gap: 28px; }
.cb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.cb-loading {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  color: #bbb;
  font-size: 13px;
}
.cb-card {
  background: #fff;
  border: 1px solid #F2F2F2;
  border-radius: 14px;
  padding: 18px 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.cb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(204, 148, 134, 0.12);
  border-color: #BF8C80;
}
.cb-card-emoji {
  font-family: 'Noto Serif KR', serif;
  font-size: 40px;
  line-height: 1;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin: 0 auto;
  background: #BF8C80;
}
.cb-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #0D0D0D;
  margin-top: 4px;
}
.cb-card-origin {
  font-size: 11px;
  color: #9c8f8a;
  line-height: 1.5;
  min-height: 33px;
}
.cb-card-bio {
  font-size: 12px;
  color: #6e6763;
  line-height: 1.55;
  min-height: 54px;
}
.cb-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.cb-card-tag {
  font-size: 10px;
  color: #BF8C80;
  background: #F2F2F2;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
}

/* ── 이어서 대화하기 ───────────────────── */
.cb-recent-wrap { margin-top: 8px; }
.cb-recent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cb-recent-item {
  background: #fff;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color .15s ease;
}
.cb-recent-item:hover { border-color: #BF8C80; }
.cb-recent-emoji {
  font-family: 'Noto Serif KR', serif;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #BF8C80;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cb-recent-meta { flex: 1; min-width: 0; }
.cb-recent-name { font-size: 13px; font-weight: 700; color: #0D0D0D; }
.cb-recent-sub { font-size: 11px; color: #999; margin-top: 2px; }
.cb-recent-count { font-size: 11px; color: #BF8C80; font-weight: 700; }

/* ── 채팅 패널 ─────────────────────────── */
.cb-chat {
  background: #fff;
  border: 1px solid #F2F2F2;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 520px;
}
.cb-chat-topbar {
  padding: 12px 16px;
  border-bottom: 1px solid #F2F2F2;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFF9F4;
}
.cb-back-btn {
  background: #fff;
  border: 1px solid #e8d8ce;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.cb-back-btn:hover { border-color: #BF8C80; color: #BF8C80; }
.cb-chat-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cb-chat-emoji {
  font-family: 'Noto Serif KR', serif;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #BF8C80;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.cb-chat-name { font-size: 15px; font-weight: 700; color: #0D0D0D; }
.cb-chat-origin { font-size: 11px; color: #9c8f8a; margin-top: 1px; }
.cb-new-btn {
  background: #fff;
  border: 1px solid #e8d8ce;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.cb-new-btn:hover { border-color: #BF8C80; color: #BF8C80; }

/* ── 메시지 영역 ───────────────────────── */
.cb-messages {
  flex: 1;
  padding: 20px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #FFFDFB;
}
.cb-msg {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.cb-msg-user {
  align-self: flex-end;
  background: #BF8C80;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.cb-msg-assistant {
  align-self: flex-start;
  background: #fff;
  color: #0D0D0D;
  border: 1px solid #F2F2F2;
  border-bottom-left-radius: 4px;
}
.cb-msg-pending {
  align-self: flex-start;
  color: #999;
  font-style: italic;
  font-size: 13px;
  padding: 8px 14px;
}

/* ── 입력 폼 ──────────────────────────── */
.cb-form {
  border-top: 1px solid #F2F2F2;
  padding: 12px 16px 14px;
  background: #fff;
}
.cb-input {
  width: 100%;
  border: 1px solid #e8d8ce;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  background: #FFFDFB;
}
.cb-input:focus {
  outline: none;
  border-color: #BF8C80;
  background: #fff;
}
.cb-form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 10px;
}
.cb-cost-note { font-size: 11px; color: #9c8f8a; }
.cb-send-btn {
  background: #BF8C80;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s ease;
}
.cb-send-btn:hover { opacity: 0.92; }
.cb-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 하단 면책 ─────────────────────────── */
.cb-disclaimer {
  margin-top: 18px;
  padding: 14px 16px;
  background: #FFF6F1;
  border: 1px solid #F2F2F2;
  border-radius: 10px;
  font-size: 12px;
  color: #8a7a73;
  line-height: 1.75;
}
.cb-disclaimer b { color: #BF8C80; }

/* ── 모바일 ──────────────────────────── */
@media (max-width: 640px) {
  .cb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cb-card { padding: 14px 10px; }
  .cb-card-emoji { width: 52px; height: 52px; font-size: 30px; }
  .cb-card-name { font-size: 14px; }
  .cb-card-origin { font-size: 10px; min-height: 30px; }
  .cb-card-bio { font-size: 11px; min-height: 48px; }
  .cb-chat { min-height: 460px; }
  .cb-chat-emoji { width: 34px; height: 34px; font-size: 16px; }
  .cb-chat-name { font-size: 14px; }
  .cb-msg { max-width: 86%; font-size: 13.5px; }
}

/* ── 내가 만든 캐릭터 + 생성 모달 ───────────────────────────── */
.cb-my-wrap { margin-bottom: 32px; }
.cb-base-wrap { margin-top: 24px; }
.cb-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.cb-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #2D2013;
}
.cb-section-count {
  font-weight: 400;
  color: #9B8A7A;
  font-size: 13px;
}
.cb-create-btn {
  background: #BF8C80;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.cb-create-btn:hover { background: #A87567; }
.cb-my-empty {
  border: 1px dashed #D9B7B0;
  background: #FFFAF6;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: #9B8A7A;
}
.cb-card { position: relative; }
.cb-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(211, 47, 47, 0.85);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  z-index: 2;
}
.cb-card:hover .cb-card-delete { opacity: 1; }
.cb-card-delete:hover { background: #D32F2F; }

/* 모달 */
.cb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.cb-modal-content {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
  padding: 24px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.cb-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #2D2013;
  margin: 0 0 6px;
}
.cb-modal-desc {
  font-size: 12px;
  color: #6B5744;
  line-height: 1.6;
  margin: 0 0 16px;
}
.cb-form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #2D2013;
  margin: 12px 0 4px;
}
.cb-form-hint {
  font-weight: 400;
  color: #9B8A7A;
}
.cb-form-input,
.cb-form-textarea {
  width: 100%;
  border: 1px solid #D9B7B0;
  border-radius: 10px;
  background: #FFFAF6;
  padding: 10px 12px;
  font-size: 13px;
  color: #2D2013;
  font-family: inherit;
  box-sizing: border-box;
}
.cb-form-input:focus,
.cb-form-textarea:focus {
  outline: none;
  border-color: #BF8C80;
}
.cb-form-textarea { resize: vertical; min-height: 100px; }
.cb-form-counter {
  text-align: right;
  font-size: 10px;
  color: #9B8A7A;
  margin-top: 4px;
}
.cb-form-error {
  background: #FFEAEA;
  border: 1px solid #F0B4B4;
  color: #B71C1C;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  margin-top: 10px;
  line-height: 1.5;
}
.cb-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.cb-modal-btn {
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.cb-modal-btn-cancel {
  background: #fff;
  color: #2D2013;
  border-color: #D9B7B0;
}
.cb-modal-btn-cancel:hover { border-color: #BF8C80; }
.cb-modal-btn-primary {
  background: #BF8C80;
  color: #fff;
}
.cb-modal-btn-primary:hover { background: #A87567; }
.cb-modal-btn-primary:disabled { background: #D9C6BF; cursor: not-allowed; }