/* =========================================================
   원팡 2026 — 라이믹스 기본 출력 맞춤
   본문(xe_content), 닉네임 팝업 메뉴, 기본 안내 상자처럼 라이믹스가 직접 그리는 것만 원팡 토큰으로 맞춘다.
   ========================================================= */
html, body { margin: 0; background: var(--op-bg); }
body { min-height: 100vh; font-family: var(--op-font); }

/* 글 본문: 에디터로 쓴 내용 */
.op-site .xe_content { font-family: var(--op-font); font-size: var(--op-t-base); line-height: 1.85; color: var(--op-text); word-break: keep-all; overflow-wrap: anywhere; }
.op-site .xe_content p { margin: 0 0 .9em; }
.op-site .xe_content p:last-child { margin-bottom: 0; }
.op-site .xe_content img, .op-site .xe_content video, .op-site .xe_content iframe { max-width: 100%; height: auto; border-radius: var(--op-r-md); }
.op-site .xe_content a { color: var(--op-brand-text); text-decoration: underline; text-underline-offset: 3px; }
.op-site .xe_content blockquote { margin: 1em 0; padding: 12px 16px; border-left: 3px solid var(--op-brand); border-radius: 0 var(--op-r-sm) var(--op-r-sm) 0; background: var(--op-surface-2); color: var(--op-text-2); }
.op-site .xe_content table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.op-site .xe_content th, .op-site .xe_content td { border: 1px solid var(--op-line); padding: 8px 10px; }
.op-site .xe_content pre, .op-site .xe_content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: var(--op-surface-2); border-radius: var(--op-r-xs); }
.op-site .xe_content pre { padding: 12px 14px; overflow-x: auto; }
.op-site .xe_content hr { border: 0; border-top: 1px solid var(--op-line); margin: 1.5em 0; }

/* 닉네임을 누르면 뜨는 라이믹스 회원 메뉴 */
#popup_menu_area { z-index: 2147482000 !important; }
#popup_menu_area ul { margin: 0; padding: 6px !important; list-style: none; min-width: 170px; border-radius: 14px !important; background: var(--op-surface, #fff) !important; border: 1px solid var(--op-line, #EEEAF1) !important; box-shadow: var(--op-shadow-2, 0 10px 30px -12px rgba(30,27,36,.18)) !important; font-family: var(--op-font); }
#popup_menu_area li { margin: 0; padding: 0; background: none !important; }
#popup_menu_area a { display: block; padding: 8px 10px !important; border-radius: 8px; font-size: 13px; color: var(--op-text-2, #57525F) !important; text-decoration: none; }
#popup_menu_area a:hover { background: var(--op-surface-2, #F8F6F9) !important; color: var(--op-text, #1E1B24) !important; }

/* 라이믹스 기본 안내 상자 */
.op-site .message { margin: 0 0 var(--op-s-4); padding: 14px 16px; border-radius: var(--op-r-md); border: 0; background: var(--op-sky-soft); color: var(--op-text-2); font-size: var(--op-t-sm); }
.op-site .message.error { background: var(--op-brand-soft); color: var(--op-brand-text); }
.op-site .message.update { background: var(--op-success-soft); color: var(--op-success); }
.op-site .message p { margin: 0; }

/* 글쓰기 에디터(CKEditor) — 원팡 입력칸 모양으로 */
.op-site .cke_chrome { border: 1px solid var(--op-line-strong) !important; border-radius: var(--op-r-md) !important; box-shadow: none !important; overflow: hidden; background: var(--op-surface) !important; }
.op-site .cke_chrome.cke_focus, .op-site .cke_chrome:focus-within { border-color: var(--op-brand) !important; box-shadow: var(--op-focus) !important; }
.op-site .cke_top { padding: 6px 8px !important; background: var(--op-surface-2) !important; border-bottom: 1px solid var(--op-line) !important; box-shadow: none !important; }
.op-site .cke_toolgroup { display: flex; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.op-site a.cke_button { box-sizing: border-box; width: 32px !important; height: 32px !important; padding: 7px !important; border: 0 !important; border-radius: var(--op-r-xs) !important; }
.op-site a.cke_button:hover, .op-site a.cke_button:focus { background: var(--op-surface-3) !important; box-shadow: none !important; }
.op-site a.cke_button.cke_button_on { background: var(--op-brand-soft) !important; }
.op-site .cke_toolbar_separator { width: 1px !important; height: 20px !important; margin: 6px 4px !important; background: var(--op-line-strong) !important; }
.op-site .cke_combo_button { height: 32px !important; border: 1px solid var(--op-line) !important; border-radius: var(--op-r-xs) !important; background: var(--op-surface) !important; box-shadow: none !important; }
.op-site .cke_combo_text { line-height: 30px !important; font-family: var(--op-font) !important; color: var(--op-text-2) !important; }
.op-site .cke_bottom { background: var(--op-surface-2) !important; border-top: 1px solid var(--op-line) !important; box-shadow: none !important; }
.op-site .cke_resizer { border-right-color: var(--op-text-3) !important; }
/* 도구 막대에 남긴 버튼은 모두 원팡 선 아이콘(마스크)으로 그려서 밝기·다크 모드를 글자색으로 따라간다 */
.op-site .cke_toolbox { display: flex; flex-wrap: wrap; align-items: center; }
.op-site .cke_toolbar { float: none !important; display: flex; align-items: center; margin: 0 !important; }
.op-site .cke_toolbar_start, .op-site .cke_toolbar_end, .op-site .cke_button__source_label, .op-site .cke_toolbox_collapser { display: none !important; }
.op-site .cke_toolbar + .cke_toolbar::before { content: ""; width: 1px; height: 18px; margin: 0 6px; background: var(--op-line-strong); }
.op-site .cke_toolgroup a.cke_button:last-child::after { content: none !important; }
@container site (max-width: 760px) {
  .op-site .cke_toolbox { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .op-site .cke_toolbox::-webkit-scrollbar { display: none; }
  .op-site .cke_toolbar { flex: none; }
}
.op-site .cke_button_icon { opacity: .75; }
.op-site :is(.cke_button__bold_icon, .cke_button__italic_icon, .cke_button__underline_icon, .cke_button__strike_icon, .cke_button__link_icon, .cke_button__unlink_icon, .cke_button__image_icon, .cke_button__bulletedlist_icon, .cke_button__numberedlist_icon, .cke_button__blockquote_icon, .cke_button__removeformat_icon, .cke_button__undo_icon, .cke_button__redo_icon, .cke_button__table_icon, .cke_button__textcolor_icon, .cke_button__justifyleft_icon, .cke_button__justifycenter_icon, .cke_button__justifyright_icon, .cke_button__horizontalrule_icon, .cke_button__maximize_icon, .cke_button__source_icon) {
  background: currentColor !important; color: var(--op-text-2); opacity: 1;
  -webkit-mask: var(--op-cke-icon) center / 18px no-repeat; mask: var(--op-cke-icon) center / 18px no-repeat;
}
.op-site a.cke_button_on :is(.cke_button__bold_icon, .cke_button__italic_icon, .cke_button__underline_icon, .cke_button__strike_icon, .cke_button__link_icon, .cke_button__unlink_icon, .cke_button__image_icon, .cke_button__bulletedlist_icon, .cke_button__numberedlist_icon, .cke_button__blockquote_icon, .cke_button__removeformat_icon, .cke_button__undo_icon, .cke_button__redo_icon, .cke_button__table_icon, .cke_button__textcolor_icon, .cke_button__justifyleft_icon, .cke_button__justifycenter_icon, .cke_button__justifyright_icon, .cke_button__horizontalrule_icon, .cke_button__maximize_icon, .cke_button__source_icon) { color: var(--op-brand-text); }
/* 에디터 구성요소(설문 등) 아이콘은 그림 파일이라 다크 모드에서만 뒤집는다 */
:root[data-theme="dark"] .op-site .cke_button_icon[style*="components/"] { filter: invert(.85); }
.op-site .cke_button__bold_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 5h6a3.5 3.5 0 0 1 0 7H7z'/%3E%3Cpath d='M7 12h7a3.5 3.5 0 0 1 0 7H7z'/%3E%3C/svg%3E"); }
.op-site .cke_button__italic_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M19 4h-9M14 20H5M15 4 9 20'/%3E%3C/svg%3E"); }
.op-site .cke_button__underline_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 4v6a6 6 0 0 0 12 0V4M4 20h16'/%3E%3C/svg%3E"); }
.op-site .cke_button__strike_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 4H9a3 3 0 0 0-2.8 4M14 12a4 4 0 0 1 0 8H6M4 12h16'/%3E%3C/svg%3E"); }
.op-site .cke_button__link_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
.op-site .cke_button__unlink_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18.8 13.6 20.5 12a5 5 0 0 0-7-7l-1.7 1.7M5.2 10.4 3.5 12a5 5 0 0 0 7 7l1.7-1.7M4 4l16 16'/%3E%3C/svg%3E"); }
.op-site .cke_button__image_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E"); }
.op-site .cke_button__bulletedlist_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
.op-site .cke_button__numberedlist_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 6h11M10 12h11M10 18h11M4 6h1v4M4 10h2M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'/%3E%3C/svg%3E"); }
.op-site .cke_button__blockquote_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 21c3 0 7-1 7-8V5H3v7h4c0 3-1 5-4 5zM14 21c3 0 7-1 7-8V5h-7v7h4c0 3-1 5-4 5z'/%3E%3C/svg%3E"); }
.op-site .cke_button__removeformat_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7V4h16v3M5 20h6M13 4 8 20M15 15l5 5M20 15l-5 5'/%3E%3C/svg%3E"); }
.op-site .cke_button__undo_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7v6h6'/%3E%3Cpath d='M21 17a9 9 0 0 0-15-6.7L3 13'/%3E%3C/svg%3E"); }
.op-site .cke_button__redo_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 7v6h-6'/%3E%3Cpath d='M3 17a9 9 0 0 1 15-6.7L21 13'/%3E%3C/svg%3E"); }
.op-site .cke_button__table_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18M15 3v18'/%3E%3C/svg%3E"); }
.op-site .cke_button__textcolor_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15 12 4l5 11M9 11h6'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E"); }
.op-site .cke_button__justifyleft_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M3 12h12M3 18h16'/%3E%3C/svg%3E"); }
.op-site .cke_button__justifycenter_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M6 12h12M4 18h16'/%3E%3C/svg%3E"); }
.op-site .cke_button__justifyright_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M9 12h12M5 18h16'/%3E%3C/svg%3E"); }
.op-site .cke_button__horizontalrule_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M6 6h.01M12 6h.01M18 6h.01M6 18h.01M12 18h.01M18 18h.01'/%3E%3C/svg%3E"); }
.op-site .cke_button__maximize_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"); }
.op-site .cke_button__source_icon { --op-cke-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6M8 6l-6 6 6 6'/%3E%3C/svg%3E"); }

/* 파일 올리기(라이믹스 첨부) — 원팡 파일 놓기 칸 모양 */
.op-site .xefu-container:not(.op-ed__upload) { margin-top: 8px; border: 1.5px dashed var(--op-line-strong) !important; border-radius: var(--op-r-md) !important; background: var(--op-surface-2) !important; font-family: var(--op-font); color: var(--op-text-2); }
.op-site .xefu-container:not(.op-ed__upload) .xefu-btn { border-radius: var(--op-r-pill) !important; border: 1px solid var(--op-line-strong) !important; background: var(--op-surface) !important; color: var(--op-text) !important; font-weight: var(--op-w-semibold); }
.op-site .xefu-container:not(.op-ed__upload) .xefu-dropzone { border: 0 !important; background: transparent !important; color: var(--op-text-3) !important; }

/* 회원 가입·정보 수정 항목(라이믹스가 만든 HTML) — 입력칸 모양은 op-components 의 .op-rxfield */
.op-rxfield .help-block, .op-rxfield .help-inline { margin: 6px 0 0; font-size: var(--op-t-xs); color: var(--op-text-3); }
.op-rxfield .checkValue { display: block; margin: 6px 0 0; font-size: var(--op-t-xs); color: var(--op-brand-text) !important; }
.op-rxfield .checkValue.is-ok { color: var(--op-success) !important; }
.op-rxfield input[type="file"] { font-size: var(--op-t-sm); color: var(--op-text-2); }
.op-rxfield input[type="file"]::file-selector-button { height: 36px; margin-right: 10px; padding: 0 14px; border-radius: var(--op-r-pill); border: 1px solid var(--op-line-strong); background: var(--op-surface); color: var(--op-text); font: inherit; font-weight: var(--op-w-semibold); cursor: pointer; }
.op-rxfield span[id$="tag"] { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.op-rxfield span[id$="tag"] img { max-width: 96px; max-height: 96px; border-radius: var(--op-r-md); }
.op-rxfield span[id$="tag"] button, .op-rxfield .btn { justify-self: start; height: 34px; padding: 0 12px; border-radius: var(--op-r-pill); border: 1px solid var(--op-line-strong); background: var(--op-surface); color: var(--op-text-2); font-size: var(--op-t-xs); font-weight: var(--op-w-semibold); cursor: pointer; }

/* 라이믹스 작은 창(common/tpl/popup_layout)은 관리자 CSS(.x …)를 함께 불러 입력칸을 덮는다 — 원팡 입력칸으로 되돌린다 */
.x.popup { padding: 0; background: var(--op-bg); }
.x.popup .op-site :is(.op-input, .op-select, .op-textarea) { width: 100%; height: 46px; margin: 0; padding: 0 14px; border: 1px solid var(--op-line-strong); border-radius: var(--op-r-md); box-shadow: none; background-color: var(--op-surface); color: var(--op-text); font-size: var(--op-t-md); line-height: normal; }
.x.popup .op-site .op-select { padding-right: 38px; }
.x.popup .op-site .op-textarea { height: auto; padding: 12px 14px; }
.x.popup .op-site :is(h1, h2, p, label) { margin: 0; color: inherit; }

/* 처리 중 표시 */
#rhymix_waiting { border-radius: var(--op-r-pill) !important; background: var(--op-text, #1E1B24) !important; color: var(--op-bg, #fff) !important; font-family: var(--op-font); }
#rhymix_alert { display: none !important; }

/* 인기 검색어 통계 모듈(keyword)의 검색어 자동완성: 원팡 고르기 목록과 같은 모양 */
html .acResults { padding: 6px; border: 1px solid var(--op-line); border-radius: var(--op-r-md); background: var(--op-surface); box-shadow: var(--op-shadow-3); font-family: var(--op-font); }
html .acResults ul li { padding: 9px 12px; border-radius: var(--op-r-sm); font: inherit; font-size: var(--op-t-sm); color: var(--op-text); }
html .acResults ul li.acSelect { background: var(--op-surface-2); color: var(--op-brand-text); }
html .acResults div { border-top-color: var(--op-line); background: var(--op-surface-2); color: var(--op-text-3); font-size: var(--op-t-xs); }