/* 콘텐츠 상세 모달(M-13) — 결과·리스트·캐스팅 기록 세 화면이 같은 조각
   (templates/partials/content_modal.html)을 띄우므로 규칙도 공용으로 둔다.
   결과 화면 안에만 있던 시절, 리스트와 캐스팅 기록에서 이 팝업이 뼈대 없이
   그려졌다. 함께 쓰는 사유 목록·칩·툴팁·이메일 마스킹 규칙도 여기로 옮겼다. */
.rv4-sp{flex:1;min-width:0}
/* 툴팁 — ⓘ 에 올리거나 포커스하면 완성 문장 설명이 뜬다 */
.rv4-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 16px;border:none;border-radius:50%;background:none;padding:0;font-size:12px;color:var(--text-muted);cursor:help;outline:none}
.rv4-tip:hover,.rv4-tip:focus{color:var(--text-2)}
.rv4-tipbox{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:80;width:250px;padding:10px 12px;border-radius:8px;background:var(--tooltip-bg);color:var(--bg);font-size:12px;font-weight:400;line-height:1.5;letter-spacing:-0.025em;text-align:left;white-space:normal;box-shadow:0 12px 30px var(--shadow-tip);pointer-events:none}
.rv4-tip:hover .rv4-tipbox,.rv4-tip:focus .rv4-tipbox{display:block}
.rv4-tip.is-left .rv4-tipbox{left:auto;right:-8px;transform:none}
.rv4-tip.is-start .rv4-tipbox{left:-8px;right:auto;transform:none}
/* 후보 상세(콘텐츠 모달) 우측 정보 패널의 ⓘ들(캐스티 점수·국가·반응)은 왼쪽 미디어
   영역에 바짝 붙어 있어, 가운데 정렬 툴팁(기본값)이 왼쪽으로 반쯤 새어나가 게시글
   영역과 겹치고 잘려 보였다(2026-08-26 기획 지적). 아이콘 왼쪽 기준으로 오른쪽으로만
   펼치도록 이 패널 안에서만 정렬을 바꾼다 */
.rv4-cm-side .rv4-tip .rv4-tipbox{left:-8px;right:auto;transform:none}
.rv4-chip{padding:2px 6px;border-radius:5px;font-size:10px;font-weight:500;white-space:nowrap}
.rv4-chip.is-high{background:var(--pri-tint);color:var(--pri-text)}
.rv4-chip.is-mid{background:var(--w-08);color:var(--text-3)}
.rv4-chip.is-low{background:none;border:1px solid var(--w-16);color:var(--danger)}
.rv4-reasons{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.rv4-reasons li{display:flex;gap:7px;font-size:12px;color:var(--text-2);line-height:1.45}
.rv4-reasons .rv4-ok{color:var(--pri);font-weight:500;flex:0 0 auto}
.rv4-reasons .rv4-no{color:var(--danger);font-weight:500;flex:0 0 auto}
/* 콘텐츠 상세 모달 — 좌 미디어 · 우 정보 2단 */
.modal.is-wide.rv4-cm-shell{max-width:1080px;padding:18px 0 0;overflow:hidden}
.rv4-cm-shell .modal-head{padding:0 22px;margin-bottom:10px}
.rv4-cm{display:flex;gap:0;max-height:calc(100vh - 170px)}
.rv4-cm-media{flex:0 0 46%;min-width:0;display:flex;flex-direction:column;background:var(--media-bg);overflow:hidden}
.rv4-cm-stage{position:relative;flex:1;min-height:340px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px}
.rv4-cm-stage .preview-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* 보관 기간이 지난 수집분 안내 — 빈 무대가 고장으로 읽히지 않게 한다 */
.rv4-cm-expired{max-width:26ch;margin:0;padding:0 20px;text-align:center;line-height:1.7}
/* 플랫폼 공식 임베드(D-669) — 뜨기 전엔 스피너, 뜨면 iframe onload가 스피너 자리를 지운다 */
/* 영상은 원래 비율대로 넣는다. 무대(.rv4-cm-stage)는 인스타 세로 게시물에 맞춘
   세로 상자(실측 496x747, 0.66)라, 16:9 롱폼을 그 안에 꽉 채우면 좌우가 잘린다
   (기획 2026-08-31). 유튜브는 16:9 상자를 무대 가운데에 놓고 위아래를 비운다. */
.rv4-cm-embed-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.rv4-cm-embed-wrap.is-landscape .rv4-cm-embed,
.rv4-cm-embed-wrap.is-landscape .rv4-cm-embed-load{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;max-height:100%}
.rv4-cm-embed{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--media-bg)}
.rv4-cm-embed-load{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-muted);font-size:13px;background:var(--media-bg)}
.rv4-cm-embed-load .spinner{width:26px;height:26px;margin:0}
.rv4-cm-medianav{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(to top,var(--ink-85),transparent)}
/* 임베드 위에는 겹쳐 놓지 않는다. 플랫폼 임베드는 아래쪽에 자기 문구(좋아요 수,
   더 보기)를 두는데 그 자리에 이동 막대를 얹으면 두 글자가 겹쳐 읽힌다. 사진
   미리보기에서는 종전대로 겹쳐 둔다 — 겹칠 글자가 없다. */
.rv4-cm-stage{--cm-nav-h:62px}
.rv4-cm-embed-wrap{bottom:var(--cm-nav-h)}
.rv4-cm-embed-wrap ~ .rv4-cm-medianav{background:var(--media-bg)}
.rv4-cm-medianav .btn.icon{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--white-22);border-radius:8px;background:var(--white-12);color:var(--white)}
.rv4-cm-medianav .btn.icon:disabled{opacity:.4;background:var(--white-06)}
.rv4-cm-count{font-size:12px;color:var(--white-78)}
.rv4-cm-orig{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--white-28);border-radius:8px;background:var(--white-10);color:var(--white);font-size:12px;font-weight:500}
.rv4-cm-orig:hover{background:var(--white-20);color:var(--white)}
.rv4-cm-side{flex:1;min-width:0;display:flex;flex-direction:column;overflow-y:auto;padding:2px 22px 22px}
.rv4-cm-prof{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.rv4-cm-prof .avatar{width:52px;height:52px;flex:0 0 52px;font-size:18px}
.rv4-cm-prof-id{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.rv4-cm-handle{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:-0.025em;color:var(--text-1)}
.rv4-cm-handle svg{width:18px;height:18px}
.rv4-cm-sub{font-size:12px;color:var(--text-3)}
.rv4-cm-visit{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border:1px solid var(--w-16);border-radius:8px;font-size:12px;font-weight:500;color:var(--text-2)}
.rv4-cm-visit:hover{border-color:var(--w-34);color:var(--text-1)}
/* 후보 상세의 동작 버튼 줄 — 확정 디자인 03.Results 대로 프로필 아래 가로로 놓는다.
   계정 방문은 내용만큼, 리스트에 추가는 남은 폭을 채운다 */
.rv4-cm-acts{display:flex;gap:8px;margin-bottom:12px}
.rv4-cm-acts .rv4-cm-visit{flex:0 0 auto;padding:10px 14px;font-size:13px}
.rv4-cm-save{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border:1px solid transparent;border-radius:8px;background:var(--pri);color:var(--on-brand);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.rv4-cm-save:hover{background:var(--pri-hover)}
.rv4-cm-save.is-saved{background:var(--pri-tint);border-color:var(--pri-border);color:var(--pri-text);cursor:default}
.rv4-cm-rows{display:flex;flex-direction:column}
.rv4-cm-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--w-08)}
.rv4-cm-row .rv4-cm-key{flex:0 0 92px;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-muted)}
.rv4-cm-row .rv4-cm-val{min-width:0;font-size:13px;font-weight:500;color:var(--text-1);overflow-wrap:anywhere}
.rv4-copybtn{display:inline-flex;align-items:center;gap:7px;padding:0;border:none;background:none;color:var(--text-1);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.rv4-copybtn:hover{color:var(--pri-text)}
.rv4-copybtn svg{width:14px;height:14px;flex:0 0 14px;color:var(--text-muted)}
.rv4-cm-scorebox{margin-top:14px;padding:14px 16px;background:var(--panel);border-radius:10px;display:flex;flex-direction:column;gap:12px}
.rv4-cm-scoreline{display:flex;align-items:center;gap:12px}
.rv4-cm-scoreline .rv4-cm-key{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-muted)}
.rv4-cm-scorenum{display:inline-flex;align-items:baseline;gap:8px;font-size:22px;font-weight:600;color:var(--text-1);letter-spacing:-0.025em}
.rv4-cm-bar{flex:1;min-width:24px;height:4px;border-radius:2px;background:var(--w-08);overflow:hidden}
.rv4-cm-bar span{display:block;height:100%;background:var(--pri)}
.rv4-cm-reason{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--w-08)}
.rv4-cm-reason .rv4-cm-key{font-size:12px;color:var(--text-muted)}
/* overflow:hidden 을 걷었다 — 스크롤 조상이 되어 아래 지표의 sticky 를 무력화한다.
   모서리 클리핑은 지표 블록이 제 아래 모서리를 직접 둥글게 해서 대신한다 */
.rv4-cm-postbox{margin:14px 0 0;border:1px solid var(--w-12);border-radius:10px}
.rv4-cm-posthead{display:flex;flex-direction:column;gap:8px;padding:14px 16px 12px}
.rv4-cm-posttitle{margin:0;font-size:14px;font-weight:600;line-height:1.45;letter-spacing:-0.025em;overflow-wrap:anywhere}
.rv4-cm-postmeta{margin:0;font-size:11px;color:var(--text-muted)}
/* 본문은 6줄까지 — 유튜브 설명이 아주 길 수 있다 (2026-08-26 기획). 넘치면 「더보기」로 편다.
   버튼은 기본으로 숨기고, 실제로 잘렸을 때만 JS 가 켠다 */
.rv4-cm-postbody{display:flex;flex-direction:column;gap:4px}
.rv4-cm-postbody-text{margin:0;font-size:12px;color:var(--text-2);line-height:1.6;white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
/* 「더보기」로 편 본문은 제 안에서 스크롤한다 (2026-08-27 기획) — 캡션이 아주 긴
   게시물은 펴는 순간 아래 지표(조회수·좋아요·댓글·반응)를 화면 밖으로 밀어냈다.
   높이를 묶어 두면 본문을 다 읽으면서도 지표가 늘 같은 자리에 남는다 */
.rv4-cm-postbody.is-open .rv4-cm-postbody-text{-webkit-line-clamp:none;max-height:260px;overflow-y:auto;overscroll-behavior:contain}
.rv4-cm-postbody-more{align-self:flex-start;padding:0;border:none;background:none;font:inherit;font-size:11px;font-weight:500;color:var(--text-muted);cursor:pointer;display:none}
.rv4-cm-postbody.has-overflow .rv4-cm-postbody-more{display:block}
.rv4-cm-postbody-more:hover{color:var(--text-2)}
/* 지표는 옆 패널 바닥에 붙어 따라온다 (2026-08-27 기획) — 캡션이 길면 조회수·좋아요·
   댓글·반응이 화면 밖으로 밀려나 「더보기」를 누르는 순간 사라졌다. 붙여 두면
   본문을 어디까지 읽든 지표가 늘 같은 자리에 보인다 */
.rv4-cm-stats{display:flex;flex-direction:column;padding:8px 16px 12px;background:var(--panel);position:sticky;bottom:0;border-radius:0 0 9px 9px}
.rv4-cm-stat{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--w-08)}
.rv4-cm-stat .rv4-cm-key{flex:0 0 92px;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-muted)}
.rv4-cm-stat .rv4-cm-num{margin-left:auto;font-size:13px;font-weight:500;color:var(--text-1)}
/* 이메일 — 기본은 마스킹이고 「전체 보기」를 누른 항목만 원문으로 펼친다(정본 7절) */
.memail-wrap{display:inline-flex;align-items:center;gap:6px;min-width:0}
.mail-btn{flex:0 0 auto;padding:1px 7px;border:1px solid var(--w-12);border-radius:999px;background:none;font:inherit;font-size:11px;color:var(--text-3);cursor:pointer;white-space:nowrap}
.mail-btn:hover{border-color:var(--w-24);color:var(--text-1)}
.rv4-cm-row .memail-wrap{flex:1;min-width:0}
.rv4-cm-row .memail-wrap .rv4-cm-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 상세 팝업 보강 — 프로필 사진 · 썸네일 레일 · 외부 링크 · 확신도 · 자동 분석 고지 */
.rv4-cm-avatar{width:52px;height:52px;flex:0 0 52px;border-radius:50%;object-fit:cover;background:var(--panel)}
.rv4-cm-acts{display:flex;gap:8px;margin-bottom:12px}
.rv4-cm-rail{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding:12px 14px;background:var(--media-bg-2);border-top:1px solid var(--white-08)}
.rv4-cm-rail button{position:relative;flex:0 0 58px;height:58px;padding:0;border:2px solid transparent;border-radius:8px;background:var(--panel);cursor:pointer;overflow:hidden;opacity:.62}
.rv4-cm-rail button:hover{opacity:1}
.rv4-cm-rail button.is-on{border-color:var(--pri);opacity:1}
.rv4-cm-rail img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 유튜브 썸네일은 16:9 라 정사각 칸에서는 좌우가 잘린다 — 무대의 영상(.is-landscape)과
   같은 비율로 눕힌다(기획 2026-08-31) */
.rv4-cm-rail.is-yt button{flex:0 0 100px;height:56px}
.rv4-cm-row.is-top{align-items:flex-start}
.rv4-cm-links{display:flex;flex-direction:column;gap:5px;min-width:0}
.rv4-cm-links a{font-size:13px;font-weight:500;color:var(--text-1);overflow-wrap:anywhere}
.rv4-cm-links a:hover{color:var(--pri-text)}
.rv4-cm-conf{margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--text-3);white-space:nowrap}
.rv4-cm-notice{margin:12px 0 2px;font-size:11px;color:var(--text-muted);line-height:1.45}
@media (max-width: 1100px){.rv4-cm{flex-direction:column;max-height:none}.rv4-cm-media{flex:0 0 auto}}