support */
.preview_card_image {
flex: 0 0 33%;
background-size: cover;
background-position: center;
min-height: 100px;
}
.preview_card_text_container {
flex: 1 1 auto;
padding: 12px 16px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.preview_card_title {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview_card_desc {
font-size: 0.92em;
color: #555;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.preview_card_host {
font-size: 0.8em;
color: #888;
}
@media (max-width: 600px) {
.preview_card_link {
flex-direction: column;
}
.preview_card_link > img,
.preview_card_image {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
min-height: 160px;
}
}
}
/* ─────────────────────────────────────────────────────────────────────────
media_embed_wrapper — preview legacy embed container
본문에 형태로
저장된 레거시 임베드의 반응형/간격 처리.
───────────────────────────────────────────────────────────────────────── */
.media_embed_wrapper {
display: block;
position: relative;
margin: 1em 0;
max-width: 100%;
img {
display: none;
}
iframe,
video {
position: absolute;
width: 100%;
height: 100%;
max-width: 100%;
border: 0;
}
}
/* ─────────────────────────────────────────────────────────────────────────
service-specific minimal sizing (외부 SDK 가 자체 스타일을 갖지만
SDK 가 아직 로드되지 않은 시점에도 폭이 넘치지 않게 최소 보정)
───────────────────────────────────────────────────────────────────────── */
.instagram-media,
.fb-post,
.fb-video,
.twitter-tweet {
max-width: 100% !important;
margin: 1em auto;
}
/* ─────────────────────────────────────────────────────────────────────────
oembed editor-only styles.
글쓰기/댓글 페이지 (CKEditor wysiwyg 영역) 한정으로만 적용된다.
글 보기 페이지에서는 셀렉터의 스코프(`.rhymix_content.cke_editable`,
`.cke_wysiwyg_div`) 가 매칭되지 않아 자연스럽게 비활성화되므로 출력
단계의 모양/상호작용 (재생, 스크롤 등) 에는 영향이 없다.
스코프는 두 가지 — CKEditor 4 가 두 가지 모드를 갖기 때문이다.
* iframe 모드 (대부분의 데스크탑 환경): wysiwyg 가 별도 iframe 의 body 다.
CKEditor 가 자동으로 body 에 `cke_editable` 을 붙이고, Rhymix CKEditor 의
`bodyClass: 'rhymix_content xe_content editable'` (modules/editor/tpl/js/
editor.app.js:22) 도 같은 body 에 추가된다 → `.rhymix_content.cke_editable`
단일 셀렉터로 매칭. 호스트 페이지의 `` 들은
editor.js:64 의 contentsCss push 로 iframe 문서에도 함께 로드되므로
이 파일이 그대로 적용된다.
* divarea 모드 (iOS 등): wysiwyg 가 호스트 페이지 안의 `
` 다. 이 모드에선 `bodyClass` 가
적용되지 않아 `.rhymix_content` 가 없으므로 (Rhymix 자체도 editor.js:94
에서 `\.rhymix_content\.editable` → `.cke_wysiwyg_div` 로 치환해 처리)
`.cke_wysiwyg_div` 셀렉터를 별도로 둔다.
호스트 페이지 외부 래퍼(`.rx_ckeditor`) 로 스코프를 잡으면 iframe 문서
안엔 그 조상이 존재하지 않아 셀렉터가 매칭되지 않는다.
타입 분기 (Controller 가 wrapper 의 data-oembed-type 으로 박는다):
- "social" — Instagram / Facebook / X 의 blockquote/div 임베드.
SDK 가 에디터 안에서 동작하지 않아 본문이 "View on …"
링크로만 보이므로, 작성자가 임베드인지 알 수 있게
라벨 박스로 시각화한다 (블록 프레임 + provider 라벨).
- "multimedia" — YouTube 같은 iframe 임베드. iframe 자체가 이미 시각적으로
임베드임을 분명히 보여주므로 별도 프레임/라벨 추가하지
않는다 (사용자 요청).
- "card" — provider 매칭 실패 시 OG 메타로 만든 미리보기 카드.
카드 마크업 자체에 이미지/제목/요약이 들어 있어 시각적
구분이 명확하므로 추가 프레임 없음.
모든 타입 공통:
- wrapper 에 contenteditable="false" 가 붙어 있어 (Controller 출력)
CKEditor 가 단일 위젯으로 다룬다 — wrapper 단위 선택/삭제/이동 가능.
- 그러나 iframe 은 별도 browsing context 라 contenteditable=false 가
적용되지 않으므로, pointer-events: none 으로 클릭/스크롤을 막아
wrapper 선택을 방해하지 않게 한다.
- 텍스트 드래그 선택도 막아 카드 단위 선택을 강제한다.
───────────────────────────────────────────────────────────────────────── */
.rhymix_content.cke_editable,
.cke_wysiwyg_div {
/* 모든 타입 공통 — 위젯 상호작용 보호 */
[editor_component="oembed"] {
user-select: none;
iframe,
.oembed-card {
pointer-events: none;
}
}
/* social 타입 — 블록 프레임 + provider 라벨 */
[editor_component="oembed"][data-oembed-type="social"] {
position: relative;
margin: 1em 0;
padding: 0;
border: 1px solid #d0d7de;
border-radius: 8px;
overflow: hidden;
background: #f6f8fa;
/* 본문 fallback (View on … 링크) 는 라벨로 충분하므로 가린다. */
& > blockquote {
display: none;
}
/* 상단 라벨.
라벨 텍스트는 attr(data-oembed-provider) 로 wrapper 의 provider 이름을
그대로 가져온다 — Instagram / X / Facebook 외 사용자가 추가한 3rd-party
provider 도 별도 CSS 추가 없이 즉시 라벨이 표시된다 (예: "Vimeo 임베드").
기본 셀렉터는 provider 속성이 없는 fallback (방어적), 그 아래의
`[data-oembed-provider]::before` 가 본 케이스를 덮어쓰고, 알려진
provider 별 셀렉터는 색/배경만 추가로 덮어쓴다. */
&::before {
content: "임베드";
text-align: center;
display: block;
padding: 1rem 1.25rem;
background: #e1e4e8;
color: #57606a;
line-height: 1.5rem;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.02em;
white-space:pre;
}
&[data-oembed-provider]::before {
content: attr(data-oembed-provider) " 임베드\A게시물 작성 후 표시됩니다";
}
/* 알려진 provider 의 브랜드 색상 — 텍스트는 위에서 attr() 로 채워진 채
유지되고 배경/글자색만 갈아끼운다. */
&[data-oembed-provider="Instagram"]::before {
background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
color: #fff;
}
&[data-oembed-provider="X"]::before {
background: #000;
color: #fff;
}
&[data-oembed-provider="Facebook"]::before {
background: #1877f2;
color: #fff;
}
}
}