/* 댓글 입력폼 간소화(SNS형) — 뉴스툰. form.rtc-form 안에서만 적용한다(기존 댓글 출력·다른 게시판 영향 없음).
   기존 newstoon.css 의 에디터 규칙(body.rt-newstoon #comment …)보다 뒤에 로드되고, 겹치는 속성은 !important 로 이긴다. */
.rtc-form { --rtc-bg: var(--c-bg, #0f1a2e); --rtc-bg2: var(--c-bg2, #16233d); --rtc-line: var(--c-line, #263556); --rtc-text: var(--c-text, #f7f7fa);
	--rtc-text2: var(--c-text2, #aab1c7); --rtc-brand: var(--c-brand, #956bff); --rtc-brand-hi: var(--c-brand-hi, #b49aff); }
.rtc-form.write_comment { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: start; }
.rtc-form.write_comment::after { display: none; }
.rtc-form > .nt-cm-write-title { grid-column: 1 / -1; }
.rtc-avatar { grid-column: 1; grid-row: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden;
	border-radius: 50%; background: var(--rtc-bg2); color: var(--rtc-text2); }
.rtc-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rtc-box { grid-column: 2; grid-row: 2; position: relative; min-width: 0; border: 1px solid var(--rtc-line); border-radius: 16px; background: var(--rtc-bg); }
.rtc-box:focus-within, .rtc-box.is-focus { border-color: var(--rtc-brand); box-shadow: 0 0 0 3px rgba(149, 107, 255, .18); }
.rtc-form > .write_author, .rtc-form > .write_captcha { grid-column: 2; margin: 2px 0 0; }

/* CKEditor: 툴바·경로줄 숨김, 테두리·배경은 카드가 맡는다 */
/* CKEditor 가 만들어지기 전에도 편집 영역 높이(96px)를 미리 잡아 둔다 — 안 그러면 하단 줄(이모지·등록)이 안내 문구 위로 올라와 겹쳐 보이다가 로딩 뒤에 내려간다(2026-10-23). */
.rtc-form .rx_ckeditor { min-height: 96px !important; }
.rtc-form .cke_chrome { border: 0 !important; border-radius: 16px 16px 0 0 !important; background: transparent !important; box-shadow: none !important; }
.rtc-form .cke_inner, .rtc-form .cke_contents { background: transparent !important; }
.rtc-form .cke_contents { height: var(--rtc-h, 96px) !important; }
.rtc-form .cke_top { display: none !important; }
.rtc-form.rtc-tools-on .cke_top { display: block !important; border-bottom: 1px solid var(--rtc-line) !important; }
.rtc-form .cke_bottom { display: none !important; }

/* 모바일 기본 편집기(simpleeditor) */
.rtc-form .rx_simpleeditor_wrapper { min-width: 0; }
.rtc-form .rx_simpleeditor img { max-width: 100%; height: auto; }
.rtc-form .rx_simpleeditor { min-height: 96px; padding: 14px 16px; border: 0 !important; border-radius: 16px 16px 0 0; background: transparent !important; color: var(--rtc-text) !important; font-size: 14.5px; line-height: 1.6; resize: none; }

/* 안내 문구(에디터 본문 위에 겹쳐 놓고 클릭은 통과) */
.rtc-ph { position: absolute; left: 16px; top: 14px; z-index: 1; color: #7d869c; font-size: 14.5px; line-height: 1.5; pointer-events: none; }
.rtc-ph[hidden] { display: none; }

/* 첨부: 선택창은 기존 업로더 입력을 단추로 연다. 안내·선택 단추는 숨기고, 진행 막대·파일 목록만 남긴다 */
.rtc-form .xefu-container { margin: 0; padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; }
.rtc-form .xefu-dropzone { margin: 0; padding: 0; border: 0 !important; background: transparent !important; min-height: 0; }
.rtc-form .xefu-act-selectfile { position: absolute !important; width: 1px; height: 1px; margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; }
.rtc-form .xefu-dropzone-message, .rtc-form .upload_info { display: none !important; }
.rtc-form .xefu-progress-status { margin: 0; padding: 6px 14px 0; color: var(--rtc-text2); font-size: 12.5px; }
.rtc-form .xefu-progressbar { margin: 4px 14px 6px; }
.rtc-form .xefu-controll { display: none; margin: 0; padding: 6px 14px 0; border: 0; color: var(--rtc-text2); font-size: 12.5px; }
.rtc-form.rtc-has-files .xefu-controll { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
/* 첨부 관리 줄: 원래 float 두 칸(개수 / 버튼)이라 높이가 0 으로 무너져 썸네일 목록과 겹쳤다 → 한 줄 flex 로 */
.rtc-form .xefu-controll > div { float: none !important; }
.rtc-form .xefu-controll .xefu-btn, .rtc-form .xefu-controll input.xefu-btn { height: 26px; padding: 0 10px; line-height: 24px; }
/* 썸네일 목록: 항상 떠 있던 세로 스크롤바 · 밑줄 · 60px 큼직한 칸을 줄인다(본문에 이미 들어간 이미지의 관리용 목록이다) */
.rtc-form .xefu-list-images { max-height: 100px; margin: 0; padding: 0; border: 0; overflow-x: hidden; overflow-y: auto; }
.rtc-form .xefu-list-images li { width: 44px; height: 44px; margin: 0 6px 6px 0; border: 1px solid var(--rtc-line); border-radius: 8px; overflow: hidden; }
.rtc-form .xefu-list-images input { top: 2px; left: 2px; width: 14px; height: 14px; margin: 0; }
.rtc-form .xefu-list { margin: 0; padding: 0 12px; }
.rtc-form .xefu-list ul { margin: 0; padding: 6px 0 0; }
.rtc-form .xefu-btn, .rtc-form .xefu-container input.xefu-btn { border: 1px solid var(--rtc-line); border-radius: 8px; background: var(--rtc-bg2); color: var(--rtc-text2); font-size: 12px; }

/* 하단 줄: 이모지·사진·파일·서식 / 우측 취소·등록 */
.rtc-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 10px 10px 8px; }
.rtc-tool { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--rtc-text2); font: 700 14px/1 inherit; cursor: pointer; transition: background-color .14s, color .14s; }
.rtc-tool[hidden] { display: none; }
/* 파일 첨부·서식(Aa) 버튼은 숨긴다(기능·마크업은 그대로 — 사진 버튼이 같은 업로더 입력을 쓴다) */
.rtc-tool[data-rtc="file"], .rtc-tool[data-rtc="tools"] { display: none !important; }
.rtc-tool:hover, .rtc-tool:focus-visible, .rtc-tool[aria-pressed="true"], .rtc-tool[aria-expanded="true"] { background: rgba(149, 107, 255, .18); color: var(--rtc-brand-hi); outline: none; }
.rtc-aa { width: auto; min-width: 36px; padding: 0 8px; border-radius: 18px; font-size: 13px; letter-spacing: -.02em; }
.rtc-submit { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.rtc-form .btn_insert { height: 36px !important; min-height: 36px; padding: 0 20px; border: 0; border-radius: 8px; background: #8b5cf6; color: #101322; font-size: 14px; font-weight: 750; cursor: pointer; transition: background-color .14s; }
.rtc-form .btn_insert:hover { background: #7c4def; }
.rtc-form .nt-cm-cancel, .rtc-form .rtc-cancel { display: none; height: 36px !important; min-height: 36px; margin: 0; padding: 0 14px; border: 1px solid var(--rtc-line); border-radius: 8px; background: transparent; color: var(--rtc-text2); font-size: 13.5px; font-weight: 650; cursor: pointer; }
.rtc-form.is-reply .nt-cm-cancel, .rtc-form .rtc-cancel { display: inline-flex; align-items: center; }
.rtc-form .nt-cm-cancel:hover, .rtc-form .rtc-cancel:hover { border-color: var(--rtc-brand); color: var(--rtc-text); }

/* 이모지 팝오버 */
.rtc-emoji { position: absolute; left: 6px; bottom: calc(100% - 4px); z-index: 20; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: min(310px, calc(100vw - 48px)); padding: 8px;
	border: 1px solid var(--rtc-line); border-radius: 12px; background: #141235; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.rtc-emoji[hidden] { display: none; }
.rtc-emoji button { width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }
.rtc-emoji button:hover, .rtc-emoji button:focus-visible { background: rgba(149, 107, 255, .22); outline: none; }

/* 모바일: 프로필 이미지를 줄이고 카드를 가득 쓴다 */
@media (max-width: 720px) {
	.rtc-form.write_comment { grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; }
	.rtc-avatar { width: 32px; height: 32px; }
	.rtc-avatar svg { width: 18px; height: 18px; }
	.rtc-box { border-radius: 14px; }
	.rtc-ph { left: 12px; font-size: 14px; }
	.rtc-bar { padding: 4px 8px 8px 4px; }
	.rtc-form .btn_insert { padding: 0 18px; }
}

/* 인라인 수정: 그 댓글 본문 자리에 같은 입력폼을 끼운다(아바타는 댓글 줄에 이미 있다) */
.nt-edit-host { grid-column: 2 / -1; grid-row: 2; min-width: 0; }
body.rt-newstoon #comment .nt-edit-host .rtc-form.write_comment { display: block; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.nt-edit-host .rtc-avatar { display: none; }

/* PC(768px~) 뉴스 댓글 작성 폼: 경기분석 댓글 폼과 같은 다크 인디고·퍼플. 포커스·등록 버튼은 단색 #7549eb, 글로우 없음. 모바일은 위의 기존 값 그대로. */
@media (min-width: 768px) {
	.rtc-box:focus-within, .rtc-box.is-focus { border-color: #7549eb; box-shadow: none; }
	.rtc-ph { color: #98a2bf; }
	body.rt-newstoon #comment .rtc-form .btn_insert { border-color: #7549eb; background: #7549eb; color: #fff; }
	body.rt-newstoon #comment .rtc-form .btn_insert:hover { border-color: #8157f2; background: #8157f2; color: #fff; }
	.rtc-form input[type="checkbox"] { accent-color: #7549eb; }
}


/* 경기분석 댓글 작성 상자와 같은 높이·같은 등록 단추 — 뉴스 쪽에만 남아 있던 두 가지를 걷어 낸다.
   1) newstoon.css 의 `#comment .xefu-container` 테두리·여백이 숨겨진 첨부 영역에 20px 를 더하고 있었다.
   2) 기본 스킨의 `.board .btn_insert`(130×38px · 2px 모서리)가 등록 단추를 경기분석 단추(.rtb-btn-primary: 36px · 8px 모서리)보다 크게 만들었다. */
body.rt-newstoon #comment .rtc-form .xefu-container { margin: 0 !important; padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; }
body.rt-newstoon #comment .rtc-form .btn_insert { box-sizing: border-box; width: auto; min-width: 0; height: 36px !important; min-height: 36px; padding: 0 20px; border: 0; border-radius: 8px; background: #7549eb; background-image: none; color: #fff; font-size: 14px; font-weight: 750; line-height: 1; }
body.rt-newstoon #comment .rtc-form .btn_insert:hover { background: #8157f2; }
@media (max-width: 767px) {
	body.rt-newstoon #comment .rtc-form .btn_insert { padding: 0 18px; }
}
body.rt-newstoon #comment .rtc-form .xefu-dropzone { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
body.rt-newstoon #comment .rtc-form .btn_insert { font-family: var(--rt-font-sans, inherit); }

/* 댓글 작성 폼 하단 '알림 · 비밀글' 체크박스는 보이지 않게 한다(2026-10-23). 사진 단추는 모든 댓글 폼에 보인다(승부예측은 별도 모듈 · 별도 규칙). */
body.rt-newstoon #comment .rtc-form .write_author > :is(input.iCheck, label[for^="notify_message"], label[for^="is_secret"]) { display: none !important; }
body.rt-newstoon #comment .rtc-form .write_author:not(:has(.item)) { display: none; }

/* 편집 영역은 다크 스타일이 들어간 뒤(.rt-ck-ready)에 보인다 — 그 전의 흰 바탕이 번쩍임의 원인. 안전장치: 2초 뒤에는 무조건 보인다. */
body.rt-newstoon #comment .rtc-box .cke_wysiwyg_frame { opacity: 0; animation: rt-ck-show 0s linear .6s forwards; }
body.rt-newstoon #comment .rtc-box.rt-ck-ready .cke_wysiwyg_frame { opacity: 1; animation: none; }
@keyframes rt-ck-show { to { opacity: 1; } }

/* 올리는 중 표시(rt-compose.js): 선택 직후부터 실제 진행 막대가 나올 때까지 */
.rtc-upstat { display: none; align-items: center; gap: 8px; padding: 8px 14px 0; color: var(--rtc-text2); font-size: 12.5px; }
.rtc-form.rtc-uploading .rtc-upstat { display: flex; }
.rtc-spin { box-sizing: border-box; flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid var(--rtc-line); border-top-color: var(--rtc-brand); border-radius: 50%; animation: rtc-spin .8s linear infinite; }
@keyframes rtc-spin { to { transform: rotate(360deg); } }
.rtc-up-bar { flex: 1 1 auto; max-width: 140px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--rtc-line); }
.rtc-up-bar i { display: block; width: 0; height: 100%; background: var(--rtc-brand); transition: width .2s linear; }
/* 기본 진행 막대·문구는 길이 0 으로 시작해 처음엔 보이지 않으므로, 위의 표시로 대신한다 */
.rtc-form .xefu-progress-status, .rtc-form .xefu-progressbar { display: none !important; }

/* simpleeditor(휴대폰) 댓글 편집창 높이: 스크립트(simpleeditor.js)가 박아 둔 100px 고정 대신 내용에 맞춰 늘어나고, 글만이면 150px · 이미지가 있으면(.rtc-has-img) 300px 까지, 넘으면 안쪽 스크롤. */
.rtc-form .rx_simpleeditor { box-sizing: border-box; height: auto !important; max-height: 500px; overflow-y: auto; }
@media (max-width: 767px) {
	.rtc-form .rx_simpleeditor { max-height: 150px; }
	.rtc-form.rtc-has-img .rx_simpleeditor { max-height: 300px; }
}