/* Global */
body {
    font-family: Arial;
    color: orange;
}

/* Reset */
body, p {
    margin: 0;
}

/* Layout */
.container {
    width: 960px;
    margin: 0 auto;
    max-width: 100%; /* 브라우저를 엄청 좁게 줄여도 문제 없도록 100% 설정 */
}

.header {
    /* 내부 컨텐츠는 상위 엘리먼트의 width 를 쓰되 배경은 전체를 쓰기 위해 마진과 패딩 적용 */
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
    padding-top: 100px;
}

.wood-background {
    background-image: url(images/header-bg.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    overflow-wrap: break-word;
}

.header-inner {
    display: flex;
    gap: 14px;
    overflow: hidden;
    padding: 54px;
    padding-bottom: 0;
    border: solid 30px orange;
    border-bottom: 0;
}

.header-left {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    padding: 6px 0 0 6px;
}

.header-left-title {
    text-decoration: underline;
    text-underline-offset: 9px;
    text-decoration-color: orange;
    text-decoration-thickness: 4px;
    margin-bottom: 36px;
}

.header-left-title > span {
    font-size: 32px;
    letter-spacing: 6px;
}

.header-left-title strong {
    font-size: 32px;
    font-weight: bold;
}

.header-left-contents {
    padding-bottom: 70px;
    line-height: 160%;
}

.header-right {
    flex-basis: 290px;
    min-width: 0;
    margin-bottom: -60px;
}

.contents {
    display: flex;
    flex-wrap: wrap;
    align-items: start; /* stretch 로 두면 카드의 이미지가 엄청 커질 때 다른 카드에 영향을 주기 때문에 start 로 설정 */
    gap: 30px;
    /* 내부 컨텐츠는 상위 엘리먼트의 width 를 쓰되 배경은 전체를 쓰기 위해 마진과 패딩 적용 */
    margin: 0 calc(50% - 50vw);
    padding: 30px calc(50vw - 50%);
    background-color: #ddd;
}

.contents .card {
    flex-grow: 1;
    flex-shrink: 0;
    /*
        NOTE
        최소 200px ~ 최대 300px 까지 맞춰서 자유롭게 늘어나고 줄어들면서 갯수가 넘치면 다음줄로 넘어감
        다만 마지막 줄의 카드의 경우, 앞의 줄과 너비가 달라지는 문제가 있는데, flex 로는 해결이 어렵고 grid 를 써여할 것 같음
    */
    flex-basis: 200px;
    overflow: hidden;
    max-width: 300px; /* 적당히 카드의 max-width 를 설정하여 container 의 width 가 커지거나 작아져도 반응형처럼 보이도록 설정 */
    background: white;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.contents .card:hover {
    transform: scale(1.1);
}

.contents .card-poster > img {
    aspect-ratio: 30/23;
    width: 100%;
    vertical-align: top;
}

.contents .card-title {
    display: flex;
    align-items: center;
    border-top: 4px solid orange;
}

.contents .card-title > span {
    flex-grow: 1;
    flex-basis: 0;
    padding-left: 10px;

    /* 말줄임표 덕분에 아래 내용이 필요없음. */
    /* min-width: 0; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contents .card-title > img {
    flex-basis: 50px;
}

.footer {
    margin: 0 calc(50% - 50vw); /* 내부 컨텐츠는 상위 엘리먼트의 width 를 쓰되 배경은 전체를 쓰기 위해 마진과 패딩 적용 */
    padding: 20px calc(50vw - 50%);
    background-color: white;
    border-top: 2px solid #AAAAAA;
    color: #AAAAAA;
    text-align: center;
    letter-spacing: 2.9px;
}