/* 영상과 포스터가 동일한 자리를 사용합니다. 조작부는 영상 밖에 둡니다. */
.letter-introduction { margin-top: 24px; font-family: var(--serif); font-size: .9375rem; line-height: 2; letter-spacing: -.005em; text-wrap: balance; }
.letter-introduction > span { display: block; }
.letter-player { width: 100%; max-width: 360px; margin: 30px auto 0; }
.letter-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; background: var(--paper); overflow: hidden; }
.letter-frame video, .letter-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: var(--paper); }
.letter-frame img { pointer-events: none; }
.letter-frame { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.letter-panel { display: grid; align-items: center; min-height: 7.5rem; padding-top: 12px; }
.letter-start, .letter-controls { width: 100%; min-width: 0; }
.letter-hint { margin-top: 10px; color: var(--olive); font-size: .75rem; line-height: 1.8; }
.letter-control-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.letter-control { min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 2px; color: var(--olive); background: transparent; font-size: .8125rem; font-weight: 500; line-height: 1.6; }
.letter-control:hover { background: #eceee6; }
.letter-time { font-size: .75rem; color: var(--olive); font-variant-numeric: tabular-nums; white-space: nowrap; }
#letter-seek { display: block; width: 100%; min-height: 44px; margin: 4px 0 0; accent-color: var(--olive); cursor: pointer; }
#letter-seek:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.letter-status { min-height: 1.8em; font-size: .75rem; color: var(--olive); line-height: 1.8; }
.film-letter [hidden] { display: none; }