body {
    height: 100vh;
    background: white;
}

main {
    display: table;
    width: 100%;
}

.side-gutter {
    width: 50px;
    display: table-cell;
}

.center-main-field {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.center-main-field .back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    margin: 20px 0 16px 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #666;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.center-main-field .back-button:hover {
    background: #f5f5f5;
    color: #333;
    border-color: #ccc;
}

.center-main-field .description {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 20px 0;
    margin-bottom: 24px;
}

.center-main-field .description h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.center-main-field .description p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.center-main-field .button {
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.center-main-field .button:hover {
    opacity: 0.9;
}

.center-main-field .button:active {
    transform: scale(0.98);
}

.center-main-field .chat-container {
    font-family: 'Roboto', sans-serif;
    border-radius: 0.5em;
    padding: 1.25em 1.25em;
    margin-left: 5%;
    max-width: 100vw;
    height: 80vh;
}

.center-main-field .chat-header {
    margin-bottom: 1em;
    color: #fff;
}

.center-main-field .chat-header h2 {
    font-size: 1.25em;
    font-weight: bold;
}

.center-main-field .chat-messages {
    height: 80%;
    overflow-y: scroll;
}

.center-main-field .chat-messages::-webkit-scrollbar {
    display: none;
}

.center-main-field .message {
    font-family: "IBM Plex Sans KR", sans-serif;
    padding: 0.625em;
    border-radius: 1em;
    margin-bottom: 0.625em;
    display: flex;
    flex-direction: column;
    color: #000000;
}

.center-main-field .message-sender {
    font-weight: bold;
    margin-bottom: 0.31em;
}


.center-main-field .message-text {
    font-family: "IBM Plex Sans KR", sans-serif;
    font-size: 1em;
    margin-bottom: 0.31em;
    word-wrap: break-word;
}

.center-main-field .message-timestamp {
    font-size: 0.75em;
    text-align: right;
}

.center-main-field .blue-bg {
    /*display: inline-block;*/
    /*background-color: #1c9bef;*/
}

.center-main-field .blue-bg .message-text {
    text-align: right;
}

.center-main-field .blue-bg .message-sender{
    text-align: right;
}

.center-main-field .gray-bg {
    /*display: inline-block;*/
    /*background-color: #bdbdbd;*/

}

.center-main-field .gray-bg .message-text {
    text-align: left;
}

.center-main-field .gray-bg .message-sender{
    text-align: left;
}

.center-main-field .gray-bg .message-timestamp {
    text-align: left;
}

.center-main-field .chat-input-form {
    margin-bottom: 100px;
    display: flex;
    align-items: center;
    margin-top: 2em;
    gap: 0.625em;
}

.center-main-field .chat-input {
    font-family: "IBM Plex Sans KR", sans-serif;
    padding: 0.625em;
    border: none;
    border-radius: 0.5em;
    background-color: #f5f5f5;
    color: #333;
    font-size: 1em;
    flex-grow: 1;
}

.center-main-field .send-button {
    background-color: #1c9bef;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
}

.message {
    position: relative;
    padding-left: 0px; /* 메시지 텍스트와 아이콘 사이에 공간 확보 */
}


.message-icon {
    left: -100%; /* 아이콘을 메시지 박스 왼쪽 외부로 이동 */
    width: 40px;         /* 이미지 크기 조정 */
    height: 40px;        /* 이미지 크기 조정 */
    border-radius: 50%;  /* 이미지를 원형으로 만듦 */
    object-fit: cover;   /* 이미지가 요소에 꽉 차도록 */
    float: left;         /* 왼쪽으로 정렬 */
    margin-right: 0px;  /* 오른쪽 여백 설정 */
}

/* 영화 카드 스타일 */
.movie-card {
    display: inline-block;
    width: 30%; /* 모든 카드의 너비를 동일하게 설정 */
    height: 580px; /* 카드 높이를 450px로 고정 */
    margin: 0.5em;
    padding: 1em;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
    background-color: #000; /* 카드 배경색을 검은색으로 설정 */
    color: #fff; /* 텍스트 색상을 흰색으로 설정 */
    vertical-align: top;
    overflow: hidden; /* 콘텐츠가 넘칠 경우 숨김 */
}

.movie-card img.movie-poster {
    width: 100%;
    height: 300px;
    object-fit: cover; /* 이미지 비율을 유지하며 영역에 맞게 조정 */
    border-radius: 8px;
    margin-bottom: 0.5em;
}

.movie-title {
    font-family: "IBM Plex Sans KR", sans-serif;
    font-size: 1.3em;
    text-align: center; /* 영화 제목 중앙 정렬 */
    font-weight: bold;
    color: #fff;
}
.movie-details {
    text-overflow: ellipsis; /* 텍스트가 길 경우 말줄임표(...) 처리 */
    overflow: hidden; /* 넘치는 텍스트 숨김 */
}

.movie-details p:nth-of-type(3) {
    /* 말줄임표 관련 속성 */
    display: -webkit-box; /* Flexbox 기반의 클램프 사용 */
    -webkit-line-clamp: 1; /* 최대 1줄까지만 표시 */
    -webkit-box-orient: vertical; /* 세로 방향으로 정렬 */
    overflow: hidden; /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis; /* 말줄임표(...) 추가 */
}


.movie-details p:nth-of-type(5) {
    /* 말줄임표 관련 속성 */
    display: -webkit-box; /* Flexbox 기반의 클램프 사용 */
    -webkit-line-clamp: 3; /* 최대 3줄까지만 표시 */
    -webkit-box-orient: vertical; /* 세로 방향으로 정렬 */
    overflow: hidden; /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis; /* 말줄임표(...) 추가 */
}

.movie-details p {
    font-family: "IBM Plex Sans KR", sans-serif;
    font-size: 0.9em;
    margin: 0.3em 0;
    color: #ccc; /* 텍스트 색상을 약간 회색으로 설정 */
    text-align: left; /* 나머지 텍스트 왼쪽 정렬 */

}


.movie-details a:hover {
    background-color: #1483c3;
}

/* 카드 컨테이너 스타일 */
.movie-results-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 카드 간 간격을 자동으로 조정 */
}

.movie-results-container .movie-card {
    flex-grow: 1;
    flex-basis: 30%; /* 플렉스 컨테이너에서 각 카드의 기본 너비 */
}

.ott-links {
    margin-top: 0.7em;
    display: flex; /* Flexbox 활성화 */
    flex-wrap: wrap; /* 공간 부족 시 여러 줄로 배치 */
    gap: 0.5em; /* 로고 간의 간격 */
    justify-content: center; /* 로고를 왼쪽 정렬 (필요 시 center) */
    align-items: center; /* 로고를 세로로 중앙 정렬 */
    padding: 0; /* 불필요한 패딩 제거 */
    margin: 0; /* 불필요한 마진 제거 */
}

.ott-link {
    flex-basis: 40px; /* 각 로고의 기본 크기를 50px로 설정 */
    flex-grow: 0; /* 여유 공간을 차지하지 않음 */
    flex-shrink: 0; /* 컨테이너가 줄어들어도 크기를 축소하지 않음 */
    text-align: center; /* 로고를 가운데 정렬 */
}


.ott-logo {
    width: 10px;         /* 이미지 크기 조정 */
    height: 10px;        /* 이미지 크기 조정 */
    border-radius: 50%;  /* 이미지를 원형으로 만듦 */
    object-fit: cover;   /* 이미지가 요소에 꽉 차도록 */
    cursor: pointer; /* 클릭 가능한 아이콘으로 보이게 */
    transition: transform 0.3s ease; /* 마우스 오버 애니메이션 */
}

.ott-logo:hover {
    transform: scale(1.1); /* 마우스 오버 시 확대 */
}