/* 예측마켓 경기 상세 댓글 입력폼 — 경기분석·뉴스툰의 SNS형 입력폼과 같은 모양(.rtc-pm 안에서만 적용).
   저장·답글·삭제·권한 처리는 기존 폼 그대로이고(마크업의 name·클래스 유지), 여기서는 보이는 모양만 바꾼다.
   사진·파일·서식 단추는 두지 않는다: 이 댓글은 Rhymix 에디터·업로더가 없는 순수 텍스트 구조다. */
/* 색은 뉴스툰 댓글과 같은 값이다(입력 카드 #0f1a2e · 보조면 #16233d · 선 #263556). 페이지 토큰(--rt-surface-*, --rt-border)은 청록 계열이라 쓰지 않는다. */
html:root .pd-md .rtc-pm { --rtc-bg: #0f1a2e; --rtc-bg2: #16233d; --rtc-line: #263556;
	--rtc-text: var(--rt-text, #f7f7fa); --rtc-text2: var(--rt-text-2, #aab1c7); --rtc-brand: #8b5cf6; --rtc-brand-hi: #a78bfa; }
html:root .pd-md .pd-md-cwrite-title { margin: 18px 0 12px; padding-top: 16px; border-top: 1px solid #263556; font-size: 15px; font-weight: 700; color: var(--rt-text); }
html:root .pd-md .pd-md-composer.rtc-pm { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 0; border: 0; border-radius: 0; background: none; }
html:root .pd-md .rtc-pm .rtc-avatar { 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); }
html:root .pd-md .rtc-pm .rtc-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
html:root .pd-md .rtc-pm .rtc-box, html:root .pd-md .rtc-pm .pd-md-rc-box.rtc-box { position: relative; display: block; min-width: 0; padding: 0; border: 1px solid var(--rtc-line); border-radius: 18px; background: var(--rtc-bg); }
html:root .pd-md .rtc-pm .rtc-box:focus-within { border-color: var(--rtc-brand); box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); }
html:root .pd-md .rtc-pm .pd-md-cinput { display: block; box-sizing: border-box; width: 100%; outline: 0; box-shadow: none; min-height: 116px; max-height: 240px; padding: 14px 16px 4px; border: 0; border-radius: 16px 16px 0 0; background: transparent; color: var(--rtc-text); font-size: 14.5px; line-height: 1.5; }
html:root .pd-md .rtc-pm .pd-md-cinput::placeholder { color: #7d869c; }
html:root .pd-md .rtc-pm .rtc-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 10px 10px 8px; }
html:root .pd-md .rtc-pm .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); cursor: pointer; transition: background-color .14s, color .14s; }
html:root .pd-md .rtc-pm .rtc-tool:hover, html:root .pd-md .rtc-pm .rtc-tool:focus-visible, html:root .pd-md .rtc-pm .rtc-tool[aria-expanded="true"] { background: rgba(139, 92, 246, .18); color: var(--rtc-brand-hi); outline: none; }
html:root .pd-md .rtc-pm .rtc-submit { display: flex; align-items: center; gap: 8px; margin-left: auto; align-self: auto; }
html:root .pd-md.pd-md-v2 .rtc-pm .pd-md-cpost:not(:disabled) { align-self: auto; height: 38px; min-width: 130px; padding: 0 20px; border: 0; border-radius: 8px; background-color: #8b5cf6; color: #101322; font-size: 14px; font-weight: 750; cursor: pointer; }
html:root .pd-md.pd-md-v2 .rtc-pm .pd-md-cpost:hover:not(:disabled) { background-color: #7c4def; color: #101322; }
html:root .pd-md .rtc-pm .pd-md-cbtn.js-reply-cancel, html:root .pd-md .rtc-pm .pd-md-cbtn.js-edit-cancel { height: 38px; 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; }
html:root .pd-md .rtc-pm .pd-md-cbtn.js-reply-cancel:hover, html:root .pd-md .rtc-pm .pd-md-cbtn.js-edit-cancel:hover { border-color: var(--rtc-brand); color: var(--rtc-text); }
html:root .pd-md .rtc-pm .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: var(--rtc-bg2); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
html:root .pd-md .rtc-pm .rtc-emoji[hidden] { display: none; }
html:root .pd-md .rtc-pm .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; }
html:root .pd-md .rtc-pm .rtc-emoji button:hover, html:root .pd-md .rtc-pm .rtc-emoji button:focus-visible { background: rgba(139, 92, 246, .22); outline: none; }
@media (max-width: 720px) {
	html:root .pd-md .pd-md-composer.rtc-pm { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
	html:root .pd-md .rtc-pm .rtc-avatar { width: 32px; height: 32px; }
	html:root .pd-md .rtc-pm .rtc-avatar svg { width: 18px; height: 18px; }
	html:root .pd-md .rtc-pm .rtc-box, html:root .pd-md .rtc-pm .pd-md-rc-box.rtc-box { border-radius: 14px; }
	html:root .pd-md .rtc-pm .pd-md-cinput { padding: 12px 12px 4px; }
	html:root .pd-md .rtc-pm .rtc-bar { padding: 4px 8px 8px 4px; }
}

/* ═══ 댓글 목록 — 뉴스툰·경기분석 댓글 줄과 같은 규격 ═══
   기준값은 실제로 렌더링된 댓글 줄의 계산값이다(줄 18px 0 · 아래 선 1px · 아바타 40px · 이름 14.5px/750 · 시간 12px · 본문 15px/1.65 ·
   액션 12.5px, 안쪽 4px 9px, 둥근 6px · 대댓글 들여쓰기 34px + ↳). 마크업·기능(좋아요·답글·삭제·신고·정렬·계층)은 그대로이고 모양만 맞춘다.
   액션: 왼쪽 추천·답글 / 오른쪽 삭제·신고(권한에 따라 있는 버튼만). */
html:root .pd-md #pd-comments { --pdc-line: #263556; --pdc-avatar-bg: #16233d; }
/* 바깥 카드는 그대로(테두리·모서리·안쪽 여백), 색만 뉴스툰 댓글 영역과 같게: 바닥은 페이지 배경 그대로, 선은 #263556 */
html:root .pd-md #pd-comments.pd-md-talk { background: transparent; border-color: var(--pdc-line); }
html:root .pd-md #pd-comments.pd-md-talk > .pd-md-panel-head { border-bottom-color: var(--pdc-line); }
html:root .pd-md #pd-comments .pd-md-panel-title { font-size: 15px; font-weight: 700; color: var(--rt-text); }
html:root .pd-md #pd-comments .pd-md-talk-count { margin-left: 4px; font-size: 15px; font-weight: 700; color: var(--rt-green-text, var(--md-accent)); }
html:root .pd-md #pd-comments .pd-md-thread { padding: 0; border: 0; }
html:root .pd-md #pd-comments .pd-md-clist > .pd-md-thread:last-child > .pd-md-c:nth-last-child(2),
html:root .pd-md #pd-comments .pd-md-clist > .pd-md-thread:last-child > .pd-md-creplies > .pd-md-c:last-child { border-bottom: 0; }

/* 한 줄: 아바타 | 이름·시간 / 본문 / 액션 */
html:root .pd-md #pd-comments .pd-md-c { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--pdc-line); }
html:root .pd-md #pd-comments .pd-md-c.is-reply { grid-template-columns: 40px minmax(0, 1fr); }
html:root .pd-md #pd-comments .pd-md-cbody { display: flex; flex-direction: column; gap: 6px; }
html:root .pd-md #pd-comments .pd-md-cavatar, html:root .pd-md #pd-comments .pd-md-cavatar.is-sm {
	width: 40px; height: 40px; overflow: hidden; border-radius: 50%; font-size: 0; color: transparent;
	background: var(--pdc-avatar-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab1c7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20c.8-3.6 3.6-5.4 7-5.4s6.2 1.8 7 5.4'/%3E%3C/svg%3E") center / 56% auto no-repeat; }
html:root .pd-md #pd-comments .pd-md-cavatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
html:root .pd-md #pd-comments .pd-md-chead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 20px; }
html:root .pd-md #pd-comments .pd-md-cname { font-size: 14.5px; font-weight: 750; color: var(--rt-text); }
html:root .pd-md #pd-comments a.pd-md-cname:hover { color: var(--rt-text); text-decoration: underline; }
html:root .pd-md #pd-comments .pd-md-ctime { margin-left: 0; font-size: 12px; font-weight: 400; color: #8791ad; white-space: nowrap; }
html:root .pd-md #pd-comments .pd-md-cstats { margin: 0; font-size: 11.5px; }
html:root .pd-md #pd-comments .pd-md-ctext { margin: 0; font-size: 15px; line-height: 1.65; color: var(--rt-text); overflow-wrap: anywhere; }
html:root .pd-md #pd-comments .pd-md-ctext.is-removed { color: #8791ad; font-style: italic; }
html:root .pd-md #pd-comments .pd-md-ctext a { color: var(--rt-green-text, var(--md-accent)); text-decoration: underline; }
html:root .pd-md #pd-comments .pd-md-creplyto { color: #8791ad; font-size: 12.5px; }

/* 액션 줄: 왼쪽 추천·답글, 오른쪽 삭제·신고 */
html:root .pd-md #pd-comments .pd-md-cacts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 4px; margin: 0 0 0 -9px; font-size: 12.5px; }
html:root .pd-md #pd-comments .pd-md-cact { margin: 0; }
html:root .pd-md #pd-comments .pd-md-cbtn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; color: var(--rt-text-2, #aab1c7); font-size: 12.5px; font-weight: 400; line-height: 1; }
html:root .pd-md #pd-comments .pd-md-cbtn:hover { background: var(--rt-surface-2); color: var(--rt-text); }
html:root .pd-md #pd-comments .pd-md-cbtn.is-static:hover { background: none; color: var(--rt-text-2, #aab1c7); }
html:root .pd-md #pd-comments .pd-md-cbtn.is-on { color: var(--rt-green-text, var(--md-accent)); }
html:root .pd-md #pd-comments .pd-md-cbtn.js-reply.is-active { background: var(--md-accent-tint, rgba(139, 92, 246, .16)); color: var(--rt-text); }
html:root .pd-md #pd-comments .pd-md-cbtn.js-report, html:root .pd-md #pd-comments .pd-md-cbtn.js-report:hover, html:root .pd-md #pd-comments .pd-md-cacts > .pd-md-cbtn.is-reported { color: var(--rt-danger, #f4577a); }
html:root .pd-md #pd-comments .pd-md-cbtn[data-confirm]:hover { background: var(--rt-danger-bg, var(--rt-surface-2)); color: var(--rt-danger, #f4577a); }
/* 오른쪽 묶음(수정 · 삭제 · 신고)의 시작: 있는 것 중 가장 앞의 버튼이 왼쪽 여백을 가져간다 */
html:root .pd-md #pd-comments .pd-md-cacts > .js-edit,
html:root .pd-md #pd-comments .pd-md-cacts > .pd-md-cact:has([data-confirm]),
html:root .pd-md #pd-comments .pd-md-cacts > .js-report,
html:root .pd-md #pd-comments .pd-md-cacts > .pd-md-cbtn.is-reported { margin-left: auto; }
html:root .pd-md #pd-comments .pd-md-cacts > .js-edit ~ .pd-md-cact:has([data-confirm]),
html:root .pd-md #pd-comments .pd-md-cacts > .js-edit ~ .js-report,
html:root .pd-md #pd-comments .pd-md-cacts > .js-edit ~ .pd-md-cbtn.is-reported,
html:root .pd-md #pd-comments .pd-md-cacts > .pd-md-cact:has([data-confirm]) ~ .js-report,
html:root .pd-md #pd-comments .pd-md-cacts > .pd-md-cact:has([data-confirm]) ~ .pd-md-cbtn.is-reported { margin-left: 0; }
html:root .pd-md #pd-comments .pd-md-cbtn.js-edit.is-active { background: var(--md-accent-tint, rgba(139, 92, 246, .16)); color: var(--rt-text); }
/* 인라인 수정 폼 */
html:root .pd-md #pd-comments .pd-md-ec { margin: 2px 0 0; }
html:root .pd-md #pd-comments .pd-md-ec[hidden] { display: none; }
html:root .pd-md #pd-comments .pd-md-ec .pd-md-cinput { min-height: 96px; }

/* 대댓글: 34px 들여쓰기 + ↳ (선·배경 없음) */
html:root .pd-md #pd-comments .pd-md-creplies { margin: 0 0 0 34px; padding: 0; border: 0; }
html:root .pd-md #pd-comments .pd-md-creplies > .pd-md-c { padding: 18px 0; }
html:root .pd-md #pd-comments .pd-md-c.is-reply::before { content: "\21B3"; position: absolute; left: -26px; top: 22px; width: 20px; color: #7f8bad; font-size: 18px; line-height: 1; text-align: right; pointer-events: none; }
html:root .pd-md #pd-comments .pd-md-cslot { margin: 12px 0 0 34px; padding-left: 0; border-left: 0; }

/* 댓글 액션 아이콘 — 14px · 선 1.5 · 글자와 5px 간격, 색은 글자색을 따른다 */
html:root .pd-md #pd-comments .pd-ico { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
html:root .pd-md #pd-comments .pd-md-cbtn.is-on .pd-ico { fill: currentColor; fill-opacity: .18; }

@media (max-width: 720px) {
	html:root .pd-md #pd-comments .pd-md-c, html:root .pd-md #pd-comments .pd-md-c.is-reply { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 14px 0; }
	html:root .pd-md #pd-comments .pd-md-creplies > .pd-md-c { padding: 14px 0; }
	html:root .pd-md #pd-comments .pd-md-cavatar, html:root .pd-md #pd-comments .pd-md-cavatar.is-sm { width: 34px; height: 34px; }
	html:root .pd-md #pd-comments .pd-md-creplies, html:root .pd-md #pd-comments .pd-md-cslot { margin-left: 22px; }
	html:root .pd-md #pd-comments .pd-md-c.is-reply::before { left: -19px; top: 18px; width: 16px; font-size: 16px; }
	html:root .pd-md #pd-comments .pd-md-ctext { font-size: 14.5px; }
	/* 좁은 화면: 오른쪽 묶음(수정·삭제·신고)은 다음 줄에서 오른쪽 정렬 */
	html:root .pd-md #pd-comments .pd-md-cacts:has(.js-edit, [data-confirm], .js-report)::after { content: ""; flex: 0 0 100%; height: 0; order: 1; }
	html:root .pd-md #pd-comments .pd-md-cacts > .js-edit, html:root .pd-md #pd-comments .pd-md-cacts > .pd-md-cact:has([data-confirm]),
	html:root .pd-md #pd-comments .pd-md-cacts > .js-report, html:root .pd-md #pd-comments .pd-md-cacts > .pd-md-cbtn.is-reported { order: 2; }
}

/* 삭제 확인 팝업 — 뉴스툰(.nt-del-*)과 같은 값 */
.pd-del-wrap { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 12, 24, .62); }
.pd-del-box { box-sizing: border-box; width: min(380px, 100%); padding: 26px 24px 22px; border: 1px solid #263556; border-radius: 16px; background: #0f1a2e; color: #f7f7fa; box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
.pd-del-msg { margin: 0 0 22px; font-size: 18px; font-weight: 700; line-height: 1.4; text-align: center; }
.pd-del-btns { display: flex; gap: 10px; justify-content: center; }
.pd-del-btns button { min-width: 96px; height: 44px; padding: 0 18px; border-radius: 10px; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; }
.pd-del-cancel { border: 1px solid #263556; background: #16233d; color: #f7f7fa; }
.pd-del-cancel:hover { border-color: #8b5cf6; }
.pd-del-ok { border: 1px solid #e5484d; background: #e5484d; color: #fff; }
.pd-del-ok:hover { background: #cf3a3f; border-color: #cf3a3f; }
.pd-del-btns button:focus-visible { outline: 2px solid #b49aff; outline-offset: 2px; }
@media (max-width: 420px) { .pd-del-box { padding: 22px 18px 18px; } .pd-del-btns button { flex: 1 1 0; min-width: 0; } }

/* 신고 모달 — 삭제 확인(pd-del-*)과 같은 상자에 사유 목록만 더한다 */
.pd-del-box.pd-rp-box { margin: 0; }
.pd-rp-box .pd-del-msg { margin-bottom: 8px; }
.pd-rp-hint { margin: 0 0 14px; text-align: center; font-size: 13.5px; color: #aab1c7; }
.pd-rp-reasons { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; }
.pd-rp-reasons label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid #263556; border-radius: 10px; background: #16233d; color: #f7f7fa; font-size: 15px; cursor: pointer; }
.pd-rp-reasons label:has(input:checked) { border-color: #e5484d; background: rgba(229, 72, 77, .12); }
.pd-rp-reasons input { width: 18px; height: 18px; margin: 0; accent-color: #e5484d; }
.pd-del-btns button:disabled { opacity: .6; cursor: default; }
.pd-del-wrap:has(.pd-rp-box) { overflow-y: auto; }
.pd-toast { position: fixed; left: 50%; bottom: 28px; z-index: 100001; max-width: calc(100vw - 32px); transform: translateX(-50%); padding: 11px 18px; border: 1px solid #263556; border-radius: 10px; background: #0f1a2e; color: #f7f7fa; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }