/* Basic Reset */
        body, div, input, button {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f2f3f7;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        /**
        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        /***/
        label, select, button {
            display: block;
            margin-bottom: 10px;
            width: 200px; /* 너비 설정 */
            height: 40px; /* 높이 설정 */
        }
        #date {
            width: 200px; /* 너비 설정 */
            height: 40px; /* 높이 설정 */
            border: 1px solid #ccc; /* 테두리 스타일 */
            border-radius: 5px; /* 테두리 둥글기 */
            background-color: #f8f8f8; /* 배경색 */
            font-size: 16px; /* 폰트 크기 */
            padding: 5px 10px; /* 내부 여백 (위아래, 좌우) */
            box-sizing: border-box; /* 패딩과 테두리를 너비와 높이에 포함 */
        }
        #hour {
            width: 200px; /* 너비 설정 */
            height: 40px; /* 높이 설정 */
            border: 1px solid #ccc; /* 테두리 스타일 */
            border-radius: 5px; /* 테두리 둥글기 */
            background-color: #f8f8f8; /* 배경색 */
            font-size: 16px; /* 폰트 크기 */
            padding: 5px 10px; /* 내부 여백 (위아래, 좌우) */
            box-sizing: border-box; /* 패딩과 테두리를 너비와 높이에 포함 */
        }
        input, select, button {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }

        /* Chat Container */
        #chatContainer {
            width: 400px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
            overflow: hidden;
        }
        /* Messages Area */
        #messageArea {
            height: 400px;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .message {
            padding: 10px;
            border-radius: 20px;
            color: #fff;
            max-width: 80%;
        }
        .user-message {
            background-color: #007bff;
            align-self: flex-end;
        }
        .response-message {
            background-color: #4caf50;
            align-self: flex-start;
        }
        /* Input Area */
        #inputArea {
            padding: 10px;
            background: #eceff1;
            display: flex;
        }
        #inputArea input {
            flex-grow: 1;
            border: none;
            padding: 10px;
            border-radius: 4px;
            margin-right: 10px;
        }
        #inputArea button {
            padding: 10px 20px;
            border: none;
            background-color: #007bff;
            color: white;
            border-radius: 4px;
            cursor: pointer;
        }
        #inputArea button:hover {
            background-color: #0056b3;
        }
        .intro-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .intro-container img {
            width: 25%;
            min-width: 300px;
        }
        #loader {
            font-size: 25px;
            text-align: center;
        }