/* ── 현재 / 종료 ─────────────────────────────────────────────────────── */
.state-tabs { display: flex; gap: .3rem; }
.state-tab {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .7rem;
    border: 1px solid #e9ebec;
    border-radius: .3rem;
    background: #fff;
    color: #495057;
    font-size: .8125rem;
    cursor: pointer;
}
.state-tab:hover { border-color: #405189; color: #405189; }
.state-tab.is-on { background: #405189; border-color: #405189; color: #fff; font-weight: 600; }
.state-tab em { font-style: normal; opacity: .65; font-size: .75rem; }

/* ── 회차 — 왼쪽에 날짜 기둥, 오른쪽에 내용 ─────────────────────────── */
.ep-list { display: flex; flex-direction: column; }
.ep {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid #eff2f7;
}
.ep:first-child { border-top: 0; padding-top: .25rem; }

.ep-date {
    position: sticky;
    top: 5rem;
    align-self: start;
    text-align: right;
    line-height: 1.2;
}
.ep-date b { display: block; font-size: 1.05rem; color: #405189; }
.ep-date span { font-size: .8rem; color: #878a99; }
.ep-date.is-unknown b { color: #878a99; }

.ep-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.ep-code { font-size: .75rem; color: #878a99; }
.ep-title { font-weight: 600; word-break: keep-all; }

/* 구획 — 제목이 왼쪽, 내용이 오른쪽 */
.ep-sections {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: .15rem .7rem;
    margin: 0 0 .6rem;
    font-size: .8125rem;
}
.ep-sections dt { font-weight: 500; color: #878a99; word-break: keep-all; }
.ep-sections dd { margin: 0; color: #495057; word-break: keep-all; }

/* 배너 이미지 */
.ep-imgs { margin-top: .5rem; }
.ep-imgs-label { font-size: .75rem; color: #878a99; margin-bottom: .25rem; }
.ep-imgs-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .4rem;
}
.ep-imgs-row img {
    width: 100%;
    height: auto;
    border-radius: .3rem;
    border: 1px solid #eff2f7;
    display: block;
}

@media (max-width: 640px) {
    .ep { grid-template-columns: 1fr; gap: .35rem; }
    .ep-date { position: static; text-align: left; }
    .ep-date b, .ep-date span { display: inline; margin-right: .35rem; }
    .ep-sections { grid-template-columns: 1fr; }
    .ep-sections dt { margin-top: .35rem; }
}