@charset "utf-8";

.cont-tit {margin-right:7px;}
  
.youtube-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
	width: 100%;
    overflow: hidden;
	margin-bottom:40px;
}

.youtube-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube-sticky {
            position: relative; /* 기본 위치 */
            width: 100%;
           }
@media (max-width: 768px) {
            .youtube-sticky {
                position: -webkit-sticky; /* 사파리 호환 */
                position: sticky; /* 스크롤 시 고정 */
                top: 0; /* 고정 시작 위치 */
                background-color: white; /* 고정 시 배경색 */
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 고정 시 강조 */
				z-index: 999; 
            } 

			.youtube-video {
			 /* 부모의 패딩을 무시하도록 조정 */
				width: calc(100% + 40px); /* 좌우 패딩 값을 더한 너비 설정 (20px * 2) */
				margin-left: -20px; /* 부모 패딩만큼 왼쪽으로 이동 */
				margin-right: -20px; /* 부모 패딩만큼 오른쪽으로 이동 */
				padding-bottom: 61.5%; /* 16:9 비율 */
				}
        }

.highlight {
    color: #8a2f2f; /* 짙은 회색 */
    padding: 2px ;
	font-weight:900;
	margin-bottom:50px;
	border-left: 5px solid #8a2f2f;
	padding: 0 10px;
}


/* 전체 컨테이너 */
.movie-container {
    width: 100%; /* 부모 요소의 너비에 맞게 설정 */
    max-width: 768px; /* 최대 너비를 800px로 제한 */
    margin: 0 auto; /* 가운데 정렬 */
    line-height: 1.8;
    color: #333;
    box-sizing: border-box; /* 패딩과 테두리를 포함하여 크기 계산 */
}



/* 헤더: 영화 포스터 + 기본 정보 */
.movie-header {
    display: flex;
	padding-bottom: 40px;
	border-bottom:1px solid #ddd;
    margin-bottom: 40px;
    align-items: flex-start;
}


.word {word-break: break-word;       /* 단어 단위로 줄바꿈 */
  overflow-wrap: break-word;    /* 긴 단어 줄바꿈 */
  word-wrap: break-word;        /* 레거시 지원 */
  white-space: normal;          /* 기본 줄바꿈 */
	}
.conts-richx {
	display: grid;
    grid-template-columns: max-content auto;
    gap: 6px 16px;
    font-size: 1.2rem;
    line-height: 1.5;
	padding-right:20px;
	margin-top:10px;
	}
.conts-richx dt {color:#999;align-items: top; /*  정렬 */}
.text-bottom {
    display: flex;
	line-height: 1.2;
}
/* 영화 상세 정보 */
.details {
    flex: 1;
    text-align: left;
}

/* 제목 */
.movie-title {
    font-size: 1.8rem;
    font-weight: bold;
}


/* 상세 정보 리스트 */
.details ul {
    list-style: none;
    padding: 0 !important;
}

.details li {margin-bottom:10px;}
.details li > strong {color:#999;}

/* 평점 (별점) */
.rating .stars {
    display: inline-block;
    position: relative;
    width: 5em; /* 전체 별 크기 */
    height: 1em;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999999"><path d="M12 .587l3.668 7.513 8.332 1.151-6.064 5.934 1.497 8.257L12 18.857l-7.433 4.585 1.497-8.257-6.064-5.934 8.332-1.151z"/></svg>') repeat-x;
    background-size: 1em 1em; /* 별 하나 크기를 정확히 지정 */
	margin-top:2px;
}

.stars-filled {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233ad29f"><path d="M12 .587l3.668 7.513 8.332 1.151-6.064 5.934 1.497 8.257L12 18.857l-7.433 4.585 1.497-8.257-6.064-5.934 8.332-1.151z"/></svg>') repeat-x;
    background-size: 1em 1em; /* 별 하나 크기를 정확히 지정 */
}



.poster {text-align:center;}
/* 포스터 이미지 */
.poster img {width: 150px; height:auto;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);border-radius:8px;}


.search-link {text-decoration: none;color:#1a73e8; font-weight:bold;}

/* 반응형 */
@media (max-width: 768px) {
	.movie-container {
        padding: 0 10px; /* 작은 화면에서 좌우 여백 추가 */
		font-size:18px;
    }
    .header {
        flex-direction: column-reverse;
    }

    .poster img {
		width: 100%;
    }

}

#container_title {
    color: #444;
    font-size: 22px;
    display: block;
    padding-bottom: 15px;
}