:root { color-scheme: light; font-family: "BIZ UDMincho", "Yu Mincho", serif; color: #37302e; background: #f8f6f3; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.movies-page, .movie-detail, .movie-watch { max-width: 1400px; margin: auto; padding: 40px clamp(16px, 4vw, 56px) 80px; }
.movie-detail, .movie-watch { max-width: 1000px; }
.back-link { color: #756b65; font-size: .9rem; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
h1 { margin: 24px 0 32px; font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: .08em; overflow-wrap: anywhere; }
.movie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 20px; }
.movie-card { min-width: 0; }
.movie-card a { text-decoration: none; }
.thumbnail { position: relative; display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; border-radius: 12px; background: #eae5df; color: #756b65; }
.thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease, opacity .2s ease; }
.movie-card a:hover img { opacity: .86; transform: scale(1.02); }
.thumbnail time { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 4px; background: #000c; color: #fff; font-family: sans-serif; font-size: .78rem; }
.movie-card h2 { margin: 10px 2px 2px; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.published, .processing, .empty { color: #756b65; }
.published { margin: 2px; font-size: .85rem; }
.detail-thumbnail { display: block; width: 100%; max-width: 800px; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 24px; border-radius: 12px; background: #eae5df; }
.description { white-space: pre-wrap; line-height: 1.8; overflow-wrap: anywhere; }
.movie-meta { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; padding: 20px; border-radius: 12px; background: #fff; }
.movie-meta dt { color: #756b65; }.movie-meta dd { margin: 0; }
.play-button { display: inline-block; padding: 13px 22px; border-radius: 8px; background: #865a48; color: #fff; text-decoration: none; }.play-button:hover { background: #684437; }
.player { display: block; width: 100%; max-height: 75vh; background: #000; border-radius: 12px; }
.movie-card a:focus-visible, .play-button:focus-visible, .back-link:focus-visible { outline: 3px solid #865a48; outline-offset: 3px; }