main { display:flex; justify-content:center; padding:100px 0; }
main > .container { width:100%; max-width:1280px; }

main > .container > h1 { margin-top:60px; display:flex; justify-content:center; align-items:center; }
main > .container > h1 span { position:relative; font-size:40px; font-weight:500; }
main > .container > h1 span::after { content:""; position:absolute; right:10px; top:0; transform:translateX(100%) rotate( 20deg ); width:25px; height:25px; border:2px solid #FE8130; border-radius:5px; z-index:-1; }


#sub0207 { display:flex; flex-direction:column; }

#reservation-typeA { width:360px; height:650px; place-self:center; background: #fff; border-left:5px solid #e1e1e1; border-top:10px solid #e1e1e1; border-right:5px solid #e1e1e1; border-bottom:5px solid #e1e1e1; border-radius:15px; display:flex; flex-direction:column; overflow: hidden; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); }
#reservation-typeA .chatbot-header { display: flex; justify-content: space-between; padding: 10px; background:#f7f7f7; border-bottom: 1px solid #ddd; }
#reservation-typeA .title { font-size:18px; font-weight:bold; height:50px; display:flex; justify-content:center; align-items:center; }
#reservation-typeA .chatbot-content { flex:1; overflow:auto; overflow-y: auto; padding:14px; }

.chatbot-input-area { display: flex; padding: 10px; border-top: 1px solid #ddd; background: #fff; }
.chatbot-input { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 5px; }
.chatbot-send-btn { margin-left: 10px; padding: 8px 15px; background: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer;}
.chatbot-send-btn:hover { background: #0056b3; }

/* 공통 메시지 스타일 */
.message { display: flex; margin:10px 0; }

/* AI 챗봇 메시지 (왼쪽 정렬) */
.ai-message { justify-content: flex-start; max-width:90%; }
.ai-message .message-bubble { background: #e3f2fd; color: #000; border-radius: 10px 10px 10px 0; }

/* 사용자 메시지 (오른쪽 정렬) */
.user-message { justify-content: flex-end; }
.user-message .message-bubble { background: #007bff; color: #fff; border-radius: 10px 10px 0 10px;}

/* 메시지 말풍선 스타일 */
.message-bubble { padding:10px 15px; border-radius: 10px; font-size: 14px; word-wrap: break-word; max-width: 100%; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); }

.error-message { color: red; font-weight: bold; text-align: center; padding: 10px; border: 1px solid red; background-color: #ffeeee; border-radius: 5px; margin-top: 10px;}
.user-count { position:absolute; width:calc(100% - 28px); background:#d7fdd5; padding:5px; border-radius:5px; }

/* 공통 메시지 스타일 */
.message { display: flex; margin:10px 0; }

/* AI 챗봇 메시지 (왼쪽 정렬) */
.send-message { justify-content: flex-end;}
.send-message .message-bubble { background: #007bff; color: #fff; border-radius: 10px 10px 0 10px; }

/* 사용자 메시지 (오른쪽 정렬) */
.receive-message { justify-content: flex-start; max-width:90%;  }
.receive-message .message-bubble { background: #e3f2fd; color: #000; border-radius: 10px 10px 10px 0; }

/* 메시지 말풍선 스타일 */
.message-bubble { padding:10px 15px; border-radius: 10px; font-size: 14px; word-wrap: break-word; max-width: 100%; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); }

.ready-message {  }