/*
 * 예측 상세 '관련 자료'(영상·뉴스) 접이식 섹션 (2026-10-25)
 * - 색은 design-system.css 변수만 사용 → 다크모드 자동
 * - 본문 카드(stitch-card) 안쪽 끝까지 붙도록 카드 패딩(--rm-pad, JS가 실제 값으로 채움)만큼 음수 마진
 * - 템플릿: templates/includes/related_media.html / 동작: static/js/related-media.js
 */
.rm {
    --rm-pad: 1.5rem;
    --rm-radius: var(--radius-lg, 0.75rem);
    --rm-soft: var(--background-secondary, #f8f9fa);
    --rm-tint: rgba(127, 127, 127, 0.12);
    --rm-scrim: rgba(17, 24, 39, 0.55);
    margin: 1.25rem calc(-1 * var(--rm-pad)) calc(-1 * var(--rm-pad));
    border-top: 1px solid var(--border-color);
}

/* ── 닫힘 줄 ── */
.rm-toggle {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--rm-pad);
    cursor: pointer;
    border-radius: 0 0 var(--rm-radius) var(--rm-radius);
    transition: background-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.rm--mobile .rm-toggle { min-height: 48px; padding-block: 8px; }
.rm-toggle:hover { background: var(--rm-soft); }
.rm-toggle:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }
.rm.is-open .rm-toggle { border-radius: 0; }
.rm-ico { color: var(--primary-color); font-size: 20px; }
.rm-tt { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.rm-tt b { font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.rm-tt span { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-tt .rm-off { color: var(--warning-color); flex-shrink: 0; }
.rm-stack { display: flex; padding-left: 8px; }
.rm-stack:empty { display: none; }
.rm-stack img {
    width: 30px; height: 21px; object-fit: cover;
    border-radius: 5px; border: 2px solid var(--card-color);
    margin-left: -9px; display: block; background: var(--rm-tint);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.rm-chev { color: var(--text-tertiary); transition: transform 0.22s ease; }
.rm.is-open .rm-chev { transform: rotate(180deg); }

/* ── 펼침 패널 (높이 애니메이션) ── */
.rm-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; }
.rm.is-open .rm-panel { grid-template-rows: 1fr; }
.rm-inner { overflow: hidden; min-height: 0; }
.rm-body { padding: 4px var(--rm-pad) 20px; display: flex; flex-direction: column; gap: 18px; }
.rm--mobile .rm-body { padding-bottom: 16px; gap: 16px; }
.rm-label { font-size: 12px; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0.04em; margin: 0 0 8px; }

/* ── 플레이어 ── */
.rm-player { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 96px; }
.rm-screen { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; }
.rm-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rm-screen.is-vertical { aspect-ratio: auto; height: min(70vh, 560px); background: var(--rm-tint); display: flex; justify-content: center; }
.rm-screen.is-vertical .rm-9x16 { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; background: #000; border-radius: 10px; overflow: hidden; }
.rm-pbar { display: flex; align-items: center; gap: 10px; }
.rm-pbar strong { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ext { font-size: 12px; color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.rm-ext .material-symbols-outlined { font-size: 15px; }
.rm-ext:hover { color: var(--primary-color); }
.rm-x { all: unset; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: var(--text-secondary); }
.rm-x:hover { background: var(--rm-soft); }
.rm-x:focus-visible, .rm-card:focus-visible, .rm-more:focus-visible, .rm-n-link:focus-visible, .rm-del:focus-visible, .rm-add:focus-visible {
    outline: 2px solid var(--primary-color); outline-offset: 2px;
}

/* ── 영상 카드 ── */
.rm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rm--mobile .rm-grid {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--rm-pad)); padding-inline: var(--rm-pad); scroll-padding-inline: var(--rm-pad);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rm--mobile .rm-grid::-webkit-scrollbar { display: none; }
.rm--mobile .rm-card { flex: 0 0 72%; scroll-snap-align: start; }
.rm-card { position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.rm-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--rm-tint); max-width: 100%; }
.rm-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rm-play {
    position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border-radius: 50%; background: var(--rm-scrim); display: grid; place-items: center; color: #fff; transition: transform 0.15s;
}
.rm-play .material-symbols-outlined { font-size: 24px; font-variation-settings: "FILL" 1; }
.rm-card:hover .rm-play { transform: scale(1.08); }
.rm-badge { position: absolute; left: 6px; top: 6px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.6); border-radius: 4px; padding: 1px 6px; }
.rm-now { position: absolute; inset: 0; border-radius: 10px; box-shadow: inset 0 0 0 2px var(--primary-color); background: rgba(24, 119, 242, 0.18); display: flex; align-items: flex-end; padding: 6px; }
.rm-now span { font-size: 11px; font-weight: 700; color: #fff; background: var(--primary-color); border-radius: 4px; padding: 1px 6px; }
.rm-ct { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rm-ch { font-size: 12px; color: var(--text-tertiary); margin-top: -3px; }

/* ── 뉴스 ── */
.rm-news { display: flex; flex-direction: column; }
.rm-n { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border-color); }
.rm-n-link { flex: 1; min-width: 0; min-height: 64px; display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; border-radius: 8px; }
.rm-n:first-child { border-top: 0; padding-top: 2px; }
.rm-n-txt { flex: 1; min-width: 0; }
.rm-n-meta { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.rm-n-ttl { font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rm-n-link:hover .rm-n-ttl { color: var(--primary-color); }
.rm-n-img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: var(--rm-tint); }
.rm--mobile .rm-n-img { width: 64px; height: 64px; }
.rm-n-go { color: var(--text-tertiary); font-size: 16px; }
.rm-more { all: unset; box-sizing: border-box; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary-color); padding: 4px 0 0; }

/* ── 편집 (관리자·작성자) ── */
.rm-del {
    all: unset; box-sizing: border-box; cursor: pointer; position: absolute; right: 6px; top: 6px; z-index: 2;
    height: 26px; min-width: 26px; padding: 0 6px; border-radius: 13px;
    background: rgba(0, 0, 0, 0.6); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.rm-del .material-symbols-outlined { font-size: 16px; }
.rm-n .rm-del { position: static; background: var(--rm-tint); color: var(--text-secondary); flex: 0 0 auto; }
.rm--desktop .rm-card .rm-del { opacity: 0; transition: opacity 0.15s; }
.rm--desktop .rm-card:hover .rm-del, .rm--desktop .rm-card:focus-within .rm-del { opacity: 1; }
.rm .rm-del.is-armed { opacity: 1; background: var(--error-color); color: #fff; }
.rm-edit { border: 1.5px dashed var(--border-secondary); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.rm-edit-row { display: flex; gap: 8px; align-items: center; }
.rm-edit-kind { color: var(--text-tertiary); }
.rm-edit input {
    flex: 1; min-width: 0; font: inherit; font-size: 16px; /* 16px 미만이면 iOS가 확대함 */
    color: var(--text-primary); background: var(--input-bg, var(--rm-soft));
    border: 1px solid var(--border-color); border-radius: 8px; padding: 9px 10px; min-height: 44px;
}
.rm-edit input::placeholder { color: var(--text-tertiary); }
.rm-edit input:focus { outline: none; border-color: var(--primary-color); }
.rm-add {
    all: unset; box-sizing: border-box; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; background: var(--gradient-primary); color: #fff; font-size: 14px; font-weight: 600;
    border-radius: 8px; padding: 9px 14px; white-space: nowrap;
}
.rm-add[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.rm-edit small { font-size: 12px; color: var(--text-tertiary); }
.rm-edit small.is-error { color: var(--error-color); }

@media (prefers-reduced-motion: reduce) {
    .rm-panel, .rm-chev, .rm-play { transition: none; }
}

/* 모바일 전역 '글자 최소 16px'(mobile.css) 예외: 썸네일 위 작은 배지만 원래 크기 유지 */
.rm .rm-badge, .rm .rm-now span { font-size: 11px !important; line-height: 1.5; }
.rm--mobile .rm-del { height: 32px; min-width: 32px; border-radius: 16px; }