/* 4단계 토론 — 기사 아래 실시간 댓글 */
.dz { display: grid; gap: 16px; }
.dz__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dz__online { color: var(--state-success); }
.dz__sort { margin-left: auto; display: flex; gap: 2px; }
.dz__sort button { background: none; border: 0; padding: 6px 10px; font-size: var(--fs-ui); color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; }
.dz__sort button[aria-selected=true] { color: var(--text-primary); border-color: var(--brand-navy); font-weight: 700; }
.dz__closed, .dz__empty { padding: 20px; text-align: center; background: var(--bg-sunken); border-radius: var(--radius); color: var(--text-secondary); margin: 0; list-style: none; }
.dz__new { position: sticky; top: 12px; z-index: 5; justify-self: center; border: 0; border-radius: 999px; padding: 8px 18px; background: var(--brand-navy); color: var(--text-on-dark); font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgb(0 0 0 / .18); }
.dz__new[hidden] { display: none; }
.dz__list, .cm__replies { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dz__more { justify-self: center; }
.dz__avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-navy); color: var(--text-on-dark); display: grid; place-items: center; font-weight: 700; font-size: 14px; overflow: hidden; }
.dz__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* 쓰기 */
.cmp { display: grid; gap: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 14px; background: var(--bg-page); }
.cmp:focus-within { border-color: var(--brand-gold); box-shadow: 0 0 0 1px var(--brand-gold); }
.cmp--reply { margin: 8px 0 8px 44px; }
.cmp__me { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); }
.cmp__t { min-width: 30px; height: 30px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; font-weight: 700; }
.cmp__t:hover { border-color: var(--border-default); }
.cmp__sel { height: 30px; border: 1px solid var(--border-default); border-radius: 4px; background: var(--bg-paper); font-size: var(--fs-caption); }
.cmp__atts { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp__atts:empty { display: none; }
.cmp__att { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border: 1px solid var(--border-default); border-radius: var(--radius); font-size: var(--fs-caption); }
.cmp__att img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.cmp__att button { border: 0; background: none; cursor: pointer; color: var(--text-secondary); }
.cmp__bar { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp__a { border: 1px solid var(--border-default); background: none; border-radius: 999px; padding: 4px 12px; font-size: var(--fs-caption); cursor: pointer; }
.cmp__a:hover { border-color: var(--border-strong); }
.cmp__foot { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.cmp__share { margin-right: auto; display: inline-flex; gap: 6px; align-items: center; }

/* 입력 중 (흐릿한 댓글) */
.dz__typing { display: grid; gap: 8px; }
.dz__typing:empty { display: none; }
.ghost { padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius); opacity: .75; animation: ghost-in .3s ease-out; }
.ghost__who { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); }
.ghost__dots::after { content: "…"; animation: dots 1.2s steps(3, end) infinite; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
.ghost__text { margin: 8px 0 0; filter: blur(4px); user-select: none; color: var(--text-secondary); }
@keyframes ghost-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes dots { from { width: 0; } }

/* 댓글 */
.cm { border-top: 1px solid var(--border-default); }
.cm__replies { padding-left: 44px; }
.cm__replies .cm { border-top: 0; }
.cm__card { display: grid; gap: 8px; padding: 16px 0; }
.cm__replies .cm__card { padding: 10px 0; }
.cm.has-new > .cm__replies > .cm__more { color: var(--brand-gold); font-weight: 700; }
.cm__who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-ui); }
.cm__name { font-weight: 700; }
.cm__flag { font-size: 15px; }
.cm__angle { font-size: var(--fs-caption); padding: 1px 8px; border-radius: 4px; background: var(--brand-gold-soft); }
.cm__time { margin-left: auto; color: var(--text-tertiary); }
.cm__body { line-height: 1.75; overflow-wrap: anywhere; }
.cm__body p { margin: 0 0 6px; }
.cm__body blockquote { margin: 4px 0; padding-left: 12px; border-left: 3px solid var(--border-strong); color: var(--text-secondary); }
.cm__body a { color: var(--text-link); text-decoration: underline; }
.cm__body .mention { text-decoration: none; font-weight: 700; }
.cm__gone { margin: 0; color: var(--text-tertiary); font-size: var(--fs-body-s); }
.cm__held { padding: 10px 12px; border-radius: var(--radius); background: var(--state-warning-soft); display: grid; gap: 4px; justify-items: start; font-size: var(--fs-body-s); }
.cm__held p { margin: 0; }
.cm__att { display: flex; gap: 8px; flex-wrap: wrap; }
.cm__img { position: relative; margin: 0; max-width: 360px; border-radius: var(--radius); overflow: hidden; }
.cm__img img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.cm__img.is-blur img { filter: blur(24px); }
.cm__reveal { position: absolute; inset: 0; border: 0; background: rgb(0 0 0 / .35); color: #fff; font-weight: 700; cursor: pointer; }
.cm__voice { display: grid; gap: 4px; }
.cm__voice audio { height: 36px; }
.cm__tr:empty { display: none; }
.cm__tr { padding: 10px 12px; background: var(--bg-sunken); border-radius: var(--radius); display: grid; gap: 4px; }
.cm__actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.cm__vote, .cm__act, .cm__more { background: none; border: 0; padding: 4px 8px; border-radius: 999px; font-size: var(--fs-caption); color: var(--text-secondary); cursor: pointer; }
.cm__vote:hover, .cm__act:hover { background: var(--bg-sunken); color: var(--text-primary); }
.cm__vote[aria-pressed=true] { background: var(--brand-gold-soft); color: var(--text-primary); font-weight: 700; }
.cm__more { color: var(--text-link); font-weight: 500; padding-left: 0; margin: 4px 0 8px; }

/* 투표 */
.poll { display: grid; gap: 6px; max-width: 480px; padding: 12px; border: 1px solid var(--border-default); border-radius: var(--radius); }
.poll__q { font-size: var(--fs-body-s); }
.poll__opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: none; cursor: pointer; overflow: hidden; text-align: left; }
.poll__bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--bg-sunken); transition: width .4s; }
.poll__opt.is-mine { border-color: var(--brand-gold); }
.poll__opt.is-mine .poll__bar { background: var(--brand-gold-soft); }
.poll__text, .poll__pct { position: relative; font-size: var(--fs-ui); }
.poll__pct { font-weight: 700; }

/* 문장 카드 버튼 */
.quote-fab { position: absolute; z-index: 30; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--brand-navy); color: var(--text-on-dark); font-weight: 700; font-size: var(--fs-caption); box-shadow: 0 6px 18px rgb(0 0 0 / .25); cursor: pointer; }
.quote-fab[hidden] { display: none; }

@media (max-width: 767px) {
  .cm__replies { padding-left: 16px; }
  .cmp--reply { margin-left: 0; }
  .dz__sort { margin-left: 0; }
}
.dz__support { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--brand-gold); border-radius: var(--radius); background: var(--brand-gold-soft); }
.dz__support:hover { text-decoration: none; filter: brightness(.98); }

/* ───────── 댓글 꾸미기 (static/js/editor.js · 서버 허용 class와 같아요) ───────── */
:root {
  --cc-gray: #6b6b6b; --cc-red: #c62828; --cc-orange: #d9631a; --cc-gold: #a47a1c; --cc-green: #2e7d32;
  --cc-teal: #00838f; --cc-blue: #1e64c8; --cc-navy: #1f2a36; --cc-purple: #7b3fb5; --cc-pink: #d6337a; --cc-hl: #fff1a8;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cc-gray: #a6a6a6; --cc-red: #ff6b6b; --cc-orange: #ff9d57; --cc-gold: #e0b84f; --cc-green: #6fcf7a; --cc-teal: #4fd1d9; --cc-blue: #6ea8ff; --cc-navy: #9fb6d6; --cc-purple: #c39bff; --cc-pink: #ff7fb3; --cc-hl: #5c4d0a; } }
:root[data-theme="dark"] { --cc-gray: #a6a6a6; --cc-red: #ff6b6b; --cc-orange: #ff9d57; --cc-gold: #e0b84f; --cc-green: #6fcf7a; --cc-teal: #4fd1d9; --cc-blue: #6ea8ff; --cc-navy: #9fb6d6; --cc-purple: #c39bff; --cc-pink: #ff7fb3; --cc-hl: #5c4d0a; }

.c-gray { --cc: var(--cc-gray); } .c-red { --cc: var(--cc-red); } .c-orange { --cc: var(--cc-orange); } .c-gold { --cc: var(--cc-gold); } .c-green { --cc: var(--cc-green); }
.c-teal { --cc: var(--cc-teal); } .c-blue { --cc: var(--cc-blue); } .c-navy { --cc: var(--cc-navy); } .c-purple { --cc: var(--cc-purple); } .c-pink { --cc: var(--cc-pink); } .c-base { --cc: var(--text-primary); }
:is(.cm__body, .rte__ed) [class*="c-"] { color: var(--cc); }
:is(.cm__body, .rte__ed) .fs-s { font-size: 13px; } :is(.cm__body, .rte__ed) .fs-m { font-size: 16px; } :is(.cm__body, .rte__ed) .fs-l { font-size: 20px; line-height: 1.5; } :is(.cm__body, .rte__ed) .fs-xl { font-size: 26px; line-height: 1.35; font-weight: 700; }
.ff-serif { font-family: var(--font-serif); } .ff-round { font-family: "Gowun Dodum", var(--font-sans); } .ff-hand { font-family: "Nanum Pen Script", cursive; font-size: 1.3em; }
.ff-bold { font-family: "Black Han Sans", var(--font-sans); letter-spacing: .01em; } .ff-mono { font-family: "Nanum Gothic Coding", ui-monospace, monospace; } .ff-base { font-family: var(--font-sans); }
:is(.cm__body, .rte__ed) .hl { background: linear-gradient(transparent 45%, var(--cc-hl) 45%); padding: 0 1px; } :is(.cm__body, .rte__ed) .hl-none { background: none; }
:is(.cm__body, .rte__ed) .al-center { text-align: center; } :is(.cm__body, .rte__ed) .al-right { text-align: right; }

/* 편집기 */
.rte { display: grid; gap: 0; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-page); overflow: hidden; }
.rte__row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px 8px; border-bottom: 1px solid var(--border-default); background: var(--bg-page); }
.rte__row--more { display: grid; gap: 8px; padding: 10px 12px; }
.rte__line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rte__lab { flex: none; width: 2.6em; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.rte__fonts, .rte__colors { min-width: 0; }
.rte__row[hidden] { display: none; }
.rte__sep { width: 1px; height: 20px; background: var(--border-default); margin: 0 6px; flex: none; }
.rte__b { min-width: 32px; height: 32px; padding: 0 6px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text-primary); cursor: pointer; font: inherit; font-size: 15px; line-height: 1; }
.rte__b:hover { background: var(--bg-sunken); }
.rte__b[aria-pressed="true"], .rte__b[aria-checked="true"] { background: var(--brand-navy); color: var(--text-on-dark); }
.rte__b:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 1px; }
.rte__b.is-b { font-weight: 800; } .rte__b.is-i { font-style: italic; font-family: var(--font-serif); } .rte__b.is-u { text-decoration: underline; } .rte__b.is-s { text-decoration: line-through; }
.rte__hl { background: linear-gradient(transparent 45%, var(--cc-hl) 45%); padding: 0 2px; font-weight: 700; }
.rte__b[aria-pressed="true"] .rte__hl { background: linear-gradient(transparent 45%, #c9a227 45%); }
.rte__seg { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border-default); border-radius: 7px; padding: 1px; }
.rte__size { min-width: 34px; font-weight: 700; border-radius: 5px; }
.rte__fonts { display: flex; gap: 6px; flex-wrap: wrap; }
.rte__font { height: 30px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: 999px; font-size: 14px; }
.rte__font.ff-hand { font-size: 18px; }
.rte__font[aria-checked="true"] { border-color: var(--brand-navy); }
.rte__colors { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rte__dot { min-width: 0; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--cc, var(--text-primary)); border: 2px solid var(--bg-page); box-shadow: 0 0 0 1px var(--border-default); }
.rte__dot.c-base { background: conic-gradient(var(--text-primary) 0 50%, var(--bg-page) 0); }
.rte__dot:hover { background: var(--cc, var(--text-primary)); transform: scale(1.1); }
.rte__dot.c-base:hover { background: conic-gradient(var(--text-primary) 0 50%, var(--bg-page) 0); }
.rte__dot[aria-checked="true"] { background: var(--cc, var(--text-primary)); box-shadow: 0 0 0 2px var(--brand-gold); }
.rte__dot.c-base[aria-checked="true"] { background: conic-gradient(var(--text-primary) 0 50%, var(--bg-page) 0); }
.rte__more { font-size: 13px; font-weight: 700; padding: 0 10px; border: 1px solid var(--border-default); }
.rte__ed { min-height: 96px; max-height: 420px; overflow-y: auto; padding: 12px 14px; outline: none; background: var(--bg-page); font-size: 16px; line-height: 1.75; }
.rte--compact .rte__ed { min-height: 56px; }
.rte__ed p { margin: 0 0 4px; }
.rte__ed.is-empty::before { content: attr(data-placeholder); position: absolute; color: var(--text-tertiary); pointer-events: none; }
.rte__ed { position: relative; }
.cmp:focus-within .rte { border-color: var(--border-strong); }
.cmp--edit { margin: 8px 0; }
@media (max-width: 600px) {
  .rte__row { padding: 4px 6px; } .rte__b { min-width: 30px; height: 30px; } .rte__sep { margin: 0 3px; }
  .rte__dot { width: 28px; height: 28px; }
}

.rte__ed blockquote { margin: 4px 0; padding-left: 12px; border-left: 3px solid var(--border-strong); color: var(--text-secondary); }
.rte__ed a { color: var(--text-link); text-decoration: underline; }
.rte__ed { overflow-wrap: anywhere; }

/* 댓글 속 유튜브: 썸네일 → 누르면 재생 */
.cm__yt { position: relative; width: 100%; max-width: 480px; aspect-ratio: 16 / 9; margin: 6px 0 4px; border-radius: 8px; overflow: hidden; background: #000; }
.cm__yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cm__yt-btn { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #000 center / cover no-repeat; }
.cm__yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 12px; background: rgb(255 0 0 / .9); }
.cm__yt-play::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.cm__yt-btn:hover .cm__yt-play { background: #f00; }
.cm__body a { word-break: break-all; }

/* 음성 댓글 플레이어 — 크기는 --vp-s (재생 버튼 지름) 하나로 정해요. 사이트 설정 48에서 5단계 */
.vp { --s: var(--vp-s, 28px); display: inline-flex; align-items: center; gap: calc(var(--s) * .3); width: 100%; max-width: calc(var(--s) * 10); padding: calc(var(--s) * .15) calc(var(--s) * .45) calc(var(--s) * .15) calc(var(--s) * .15); border: 1px solid var(--border-default); border-radius: 999px; background: var(--bg-page); }
.vp__btn { flex: none; width: var(--s); height: var(--s); border-radius: 50%; border: 0; background: var(--brand-navy); cursor: pointer; position: relative; padding: 0; }
.vp__btn::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: calc(var(--s) * .18) 0 calc(var(--s) * .18) calc(var(--s) * .28); border-color: transparent transparent transparent var(--text-on-dark); }
.vp.is-playing .vp__btn::before { transform: translate(-50%, -50%); width: calc(var(--s) * .32); height: calc(var(--s) * .36); border: 0; background: linear-gradient(90deg, var(--text-on-dark) 0 36%, transparent 36% 64%, var(--text-on-dark) 64%); }
.vp__mic { flex: none; font-size: calc(var(--s) * .45); }
.vp__bar { flex: 1; height: max(3px, calc(var(--s) * .15)); border-radius: 99px; background: var(--bg-sunken); position: relative; cursor: pointer; }
.vp__bar::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; } /* 누르기 쉽게 터치 영역만 넓혀요 */
.vp__bar:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; }
.vp__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: var(--brand-gold); transition: width .1s linear; }
.vp__time { flex: none; font-size: max(11px, calc(var(--s) * .32)); color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 5.2em; text-align: right; }
.vp.is-error .vp__btn { background: var(--border-strong); cursor: default; }

/* 프로필 사진 밑 띠 */
.dz__face { flex: none; display: inline-flex; flex-direction: column; align-items: center; width: 40px; }
.dz__face .dz__avatar { width: 36px; height: 36px; }
.dz__belt { display: block; width: 40px; margin-top: -3px; position: relative; z-index: 1; }
.cm__who { align-items: flex-start; }
.cm__who > :not(.dz__face) { margin-top: 8px; }
.cmp__me { align-items: center; }

/* 공유 링크로 들어온 댓글 */
.dz__shared { margin: 8px 0 20px; padding: 4px 16px 0; border: 1px solid var(--border-strong); border-top: 3px solid var(--brand-gold); background: var(--bg-page); }
.dz__shared-label { margin: 10px 0 0; font-size: 12px; font-weight: 700; color: var(--brand-gold); letter-spacing: .02em; }
.dz__shared .cm:first-child { border-top: 0; }
.cm.is-target { animation: cm-target 2.4s ease-out; box-shadow: inset 3px 0 0 var(--brand-gold); }
@keyframes cm-target { 0%, 30% { background: var(--brand-gold-soft); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .cm.is-target { animation: none; } }
/* 쓰는 중에도 올린 사진 · AI 이미지를 댓글에 붙을 크기 그대로 미리 보여 줘요 */
.cmp__att--img { position: relative; padding: 0; border: 0; display: block; }
.cmp__att--img .cm__img { max-width: 360px; }
.cmp__att--img .cm__img figcaption { padding: 6px 8px; background: var(--bg-subtle, rgba(0,0,0,.04)); }
.cmp__att--img .cmp__x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; display: grid; place-items: center; }
.cmp__att--img .cmp__x:hover { background: rgba(0,0,0,.8); }
.cmp__att--img { width: min(360px, 100%); }
.cmp__att--img .cm__img { width: 100%; }
.cmp__att.cmp__att--img img { width: 100%; height: auto; max-height: 360px; border-radius: 0; }