.films-page { --films-line: #555; --films-muted: #aaa; --films-soft: #c7c7c7; }
.films-intro { max-width: 510px; }
.films-list { max-width: 760px; }
.film-entry { display: grid; grid-template-columns: minmax(132px, 178px) minmax(0, 1fr); gap: clamp(22px, 4vw, 42px); padding: 28px 0 32px; border-top: 1px solid var(--films-line); }
.film-entry:last-child { border-bottom: 1px solid var(--films-line); }
.film-poster { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #222; }
.film-entry-detail { min-width: 0; }
.film-entry h2 { margin: 0; color: #eee; font-family: "PT Serif", "Noto Serif TC", Georgia, serif; font-size: clamp(1.75rem, 3.5vw, 2.65rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.08; }
.film-original-title { display: block; margin-top: 7px; color: var(--films-muted); font-family: inherit; font-size: .42em; font-weight: 400; letter-spacing: 0; line-height: 1.25; }
.film-metadata { margin: 12px 0 0; color: var(--films-muted); font-size: .74rem; font-weight: 700; letter-spacing: .09em; line-height: 1.5; }
.film-note { max-width: 570px; margin: 22px 0 0; color: var(--films-soft); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.75; }
.film-note.is-collapsed { overflow: hidden; }
.film-translation-note { margin: 8px 0 0; color: #777; font-size: .68rem; font-style: italic; line-height: 1.4; }
.film-note-toggle { display: block; margin: 10px 0 0; padding: 0; color: #aaa; background: transparent; border: 0; font: inherit; font-size: .76rem; letter-spacing: .06em; line-height: 1.25; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.film-note-toggle:focus-visible { color: #fff; }
.films-empty, .films-error { margin: 0; padding: 24px 0; color: var(--films-muted); border-top: 1px solid var(--films-line); font-family: "PT Serif", "Noto Serif TC", Georgia, serif; font-size: 1.08rem; font-style: italic; }
.films-attribution { max-width: 760px; margin: 18px 0 0; color: #777; font-size: .68rem; line-height: 1.5; }
.films-back { display: inline-block; margin-top: 48px; color: #bbb; font-size: .82rem; letter-spacing: .06em; text-decoration: none; }
.films-back:focus-visible { color: #fff; }
@media (max-width: 600px) { .film-entry { grid-template-columns: minmax(0, 156px) 1fr; gap: 20px; padding: 22px 0 26px; } .film-entry h2 { font-size: clamp(1.55rem, 8vw, 2rem); } .film-note { margin-top: 18px; } }
@media (max-width: 390px) { .film-entry { grid-template-columns: 1fr; } .film-poster { width: min(48vw, 180px); } .film-entry-detail { padding-top: 0; } }