/*
 * 게시글 상세 모달 — 브랜드 액센트형 (2026-08-22, 사용자 확정 A-4 시안) — .bpm-*
 * 모달 헤더(차콜블루 accent)와 이어지는 옅은 브랜드 밴드 + 제목 좌측 액센트 바 +
 * 댓글 헤더 언더라인 탭 + 라운드 답글 버튼. 시안: sample/test2/a4_액센트형.html
 */

/* ── 헤더 밴드 ── */
.bpm-band { background: linear-gradient(180deg, var(--ord-band), var(--ord-panel)); padding: 22px 28px 18px; border-bottom: 1px solid var(--ord-line); }
.bpm-body { padding: 4px 28px 26px; }

.bpm-badges { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.bpm-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.bpm-badge--notice { background: var(--ord-head-bg); color: var(--ord-on-solid); }
.bpm-badge--secret { background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); }
.bpm-badge--reply { background: var(--ord-band); color: var(--ord-text-3); }
.bpm-badge--blind { background: var(--ord-tint-red-bg); color: var(--ord-tint-red-fg); }
.bpm-badge--partner { background: var(--ord-tint-cyan-bg); color: var(--ord-tint-cyan-fg); border: 1px solid var(--ord-tint-cyan-line); }

.bpm-title { font-size: 20px; font-weight: 800; color: var(--ord-text); line-height: 1.35; padding-left: 13px; border-left: 4px solid var(--ord-accent); margin: 0 0 14px; letter-spacing: -.2px; }
.bpm-title .bpm-reply-arrow { color: var(--ord-text-4); }

.bpm-meta { display: flex; align-items: center; gap: 11px; }
.bpm-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--ord-head-bg), var(--ord-solid-blue)); color: var(--ord-on-solid); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 6px rgba(62, 97, 135, .3); }
.bpm-who { flex: 1; min-width: 0; }
.bpm-name { font-size: 14px; font-weight: 700; color: var(--ord-text); }
.bpm-sub { font-size: 12px; color: var(--ord-text-4); margin-top: 2px; }
.bpm-views { font-size: 12px; font-weight: 600; color: var(--ord-accent); background: var(--ord-panel); border: 1px solid var(--ord-line-2); padding: 6px 13px; border-radius: 20px; white-space: nowrap; }
.bpm-views a { color: inherit; text-decoration: none; }
.bpm-views a:hover { text-decoration: underline; }

/* ── 본문 ── */
.bpm-content { padding: 22px 2px 26px; font-size: 14.5px; line-height: 1.8; color: var(--ord-text-2); min-height: 60px; }

/* html 형식 본문(ordars_rails_editor 저장분) 렌더 — 에디터 타이포그래피와 동일 규격 */
.bpm-content-html { min-height: 120px; margin-bottom: 20px; font-size: 14.5px; color: var(--ord-text-2); line-height: 1.75; word-break: break-word; }
.bpm-content-html p { margin: 0 0 .35em; }
.bpm-content-html h1, .bpm-content-html h2, .bpm-content-html h3 { margin: .6em 0 .35em; line-height: 1.35; color: var(--ord-text); }
.bpm-content-html ul, .bpm-content-html ol { padding-left: 1.5em; margin: .3em 0; }
.bpm-content-html blockquote { border-left: 3px solid var(--ord-accent); background: var(--ord-band); padding: 8px 14px; border-radius: 0 8px 8px 0; margin: .5em 0; color: var(--ord-text-2); }
.bpm-content-html code { background: var(--ord-band); border: 1px solid var(--ord-line); border-radius: 5px; padding: 1px 5px; font-size: .9em; }
.bpm-content-html pre { background: var(--ord-tooltip-bg); color: var(--ord-line); border-radius: 10px; padding: 12px 14px; margin: .5em 0; overflow-x: auto; }
.bpm-content-html pre code { background: none; border: none; color: inherit; }
.bpm-content-html hr { border: none; border-top: 2px solid var(--ord-line); margin: 14px 0; }
.bpm-content-html img { max-width: 100%; border-radius: 10px; }
.bpm-content-html a { color: var(--ord-accent); text-decoration: underline; }

/* ── 첨부 ── */
.bpm-atts { border: 1px solid var(--ord-line); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.bpm-atts-hd { font-size: 12px; font-weight: 700; color: var(--ord-accent); background: var(--ord-band); padding: 10px 16px; border-bottom: 1px solid var(--ord-line); }
.bpm-att { display: flex; align-items: center; gap: 13px; padding: 11px 16px; transition: background .12s; }
.bpm-att + .bpm-att, .bpm-att + .bap-media-row + .bpm-att { border-top: 1px solid var(--ord-line-soft); }
.bpm-att:hover { background: var(--ord-surface-2); }
.bpm-att-icon { width: 44px; height: 44px; border-radius: 9px; background: var(--ord-accent-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bpm-att-info { flex: 1; min-width: 0; }
.bpm-att-fn { font-size: 13.5px; color: var(--ord-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpm-att-fs { font-size: 11.5px; color: var(--ord-text-4); margin-top: 3px; }
.bpm-att-dl { flex-shrink: 0; font-size: 12px; color: var(--ord-accent); border: 1.5px solid var(--ord-accent); background: var(--ord-panel); padding: 6px 15px; border-radius: 8px; text-decoration: none; font-weight: 700; transition: background .12s, color .12s; }
.bpm-att-dl:hover { background: var(--ord-head-bg); color: var(--ord-on-solid); }
.bpm-atts .bap-media-row { margin: 2px 16px 10px 105px; }

/* ── 액션 바 ── */
.bpm-actions { display: flex; align-items: center; gap: 8px; padding: 2px 0 18px; border-bottom: 2px solid var(--ord-line-soft); flex-wrap: wrap; }
.bpm-actions-right { margin-left: auto; display: flex; gap: 8px; }
.bpm-btn { font-size: 13px; padding: 8px 17px; border-radius: 9px; border: 1px solid var(--ord-line); background: var(--ord-panel); color: var(--ord-text-2); cursor: pointer; font-weight: 500; transition: background .12s; }
.bpm-btn:hover { background: var(--ord-surface-2); }
.bpm-btn--danger { color: var(--ord-tint-red-fg); border-color: var(--ord-tint-red-line); }
.bpm-btn--danger:hover { background: var(--ord-tint-red-bg); }
.bpm-btn--primary { background: var(--ord-head-bg); border-color: var(--ord-head-bg); color: var(--ord-on-solid); font-weight: 700; padding: 9px 22px; border-radius: 22px; box-shadow: 0 2px 8px rgba(62, 97, 135, .25); }
.bpm-btn--primary:hover { background: var(--ord-accent-strong); }
.bpm-locked-note { font-size: 12px; color: var(--ord-text-4); display: inline-flex; align-items: center; gap: 5px; }

/* ── 댓글 ── */
.bpm-cwrap { padding-top: 18px; }
.bpm-chead { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 800; color: var(--ord-text); padding-bottom: 9px; border-bottom: 3px solid var(--ord-accent); margin: 0 0 4px; }
.bpm-chead-n { background: var(--ord-head-bg); color: var(--ord-on-solid); font-size: 11px; padding: 1px 8px; border-radius: 10px; }
.bpm-cmt { display: flex; gap: 11px; padding: 14px 0; }
.bpm-cmt + .bpm-cmt { border-top: 1px solid var(--ord-line-soft); }
.bpm-cava { width: 33px; height: 33px; border-radius: 50%; flex-shrink: 0; background: var(--ord-accent-soft); color: var(--ord-accent); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; }
.bpm-cbody { flex: 1; min-width: 0; }
.bpm-cn { font-size: 13px; font-weight: 700; color: var(--ord-text); }
.bpm-ct { font-size: 11px; color: var(--ord-text-4); margin-left: 7px; font-weight: 400; }
.bpm-ccompany { font-size: 10px; background: var(--ord-tint-cyan-bg); color: var(--ord-tint-cyan-fg); padding: 1px 6px; border-radius: 8px; margin-left: 6px; }
.bpm-cx { font-size: 13.5px; color: var(--ord-text-2); margin-top: 4px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.bpm-cdel { flex-shrink: 0; align-self: flex-start; padding: 2px 8px; border: 1px solid var(--ord-line); border-radius: 6px; font-size: 11px; background: var(--ord-panel); color: var(--ord-text-4); cursor: pointer; }
.bpm-cdel:hover { color: var(--ord-tint-red-fg); border-color: var(--ord-tint-red-line); }
.bpm-cempty { text-align: center; font-size: 13px; color: var(--ord-line-2); padding: 20px 0; margin: 0; }

.bpm-cinput { display: flex; gap: 9px; margin-top: 12px; align-items: flex-start; }
.bpm-cinput textarea { flex: 1; border: 1.5px solid var(--ord-line-2); border-radius: 12px; padding: 12px 15px; font-size: 13.5px; font-family: inherit; resize: none; color: var(--ord-text); background: var(--ord-surface); box-sizing: border-box; }
.bpm-cinput textarea:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ord-accent) 13%, transparent); background: var(--ord-panel); }
.bpm-cinput button { background: var(--ord-head-bg); color: var(--ord-on-solid); border: none; border-radius: 12px; padding: 12px 24px; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bpm-cinput button:hover { background: var(--ord-accent-strong); }
.bpm-anon { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ord-text-3); margin-top: 7px; cursor: pointer; }

/* ── 작성·답글·수정 폼 모달 (2026-08-22 같은 컨셉 확장) ── */
.bpm-form { padding: 20px 24px 24px; }
.bpm-fctx { background: linear-gradient(180deg, var(--ord-band), var(--ord-panel)); border: 1px solid var(--ord-line); border-left: 4px solid var(--ord-accent); border-radius: 10px; padding: 11px 15px; font-size: 13px; color: var(--ord-accent); font-weight: 600; margin-bottom: 18px; line-height: 1.5; }
.bpm-fctx b { color: var(--ord-text); font-weight: 600; }
.bpm-fwarn { background: var(--ord-tint-amber-bg); border: 1px solid var(--ord-tint-amber-line); border-radius: 10px; padding: 11px 14px; font-size: 12.5px; color: var(--ord-tint-amber-fg); line-height: 1.5; margin-bottom: 18px; }
.bpm-fgroup { margin-bottom: 16px; }
.bpm-flabel { display: block; font-size: 13px; font-weight: 700; color: var(--ord-text-2); margin-bottom: 7px; }
.bpm-flabel .bpm-freq { color: var(--ord-tint-red-fg); }
.bpm-flabel .bpm-fhint { font-size: 11px; color: var(--ord-text-4); font-weight: 400; }
.bpm-finput { width: 100%; padding: 11px 14px; border: 1.5px solid var(--ord-line-2); border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--ord-text); background: var(--ord-surface); box-sizing: border-box; }
textarea.bpm-finput { resize: vertical; line-height: 1.65; }
/* ⚠gem `.rmm-modal :focus-visible`(0,2,0)이 box-shadow: var(--rmm-ring)+radius 6px 를 얹어
   포커스 시 «바깥 라인이 하나 더» 생긴다(8/22 실사고 — 텍스트 입력은 마우스 클릭에도 :focus-visible 매칭).
   .bpm-form 스코프로 특이성(0,3,0)을 올려 이기고, :focus-visible 도 명시해 같은 상태를 덮는다. */
.bpm-form .bpm-finput:focus,
.bpm-form .bpm-finput:focus-visible { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ord-accent) 13%, transparent); background: var(--ord-panel); border-radius: 10px; }
.bpm-finput[readonly], .bpm-finput[disabled] { background: var(--ord-band); color: var(--ord-text-3); cursor: not-allowed; }
.bpm-fopts { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; padding: 12px 14px; background: var(--ord-surface-2); border: 1px solid var(--ord-line-soft); border-radius: 10px; }
.bpm-fopt { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ord-text-2); cursor: pointer; font-weight: 500; }
.bpm-fatts { border: 1px solid var(--ord-line); border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.bpm-fatts-hd { font-size: 12px; font-weight: 700; color: var(--ord-accent); background: var(--ord-band); padding: 10px 15px; border-bottom: 1px solid var(--ord-line); }
.bpm-fatts-hd .bpm-fhint { font-weight: 400; color: var(--ord-tint-blue-fg); font-size: 11px; }
.bpm-fatts-body { padding: 12px 14px; }
.bpm-fbtn-outline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ord-accent); border: 1.5px solid var(--ord-accent); background: var(--ord-panel); padding: 7px 15px; border-radius: 8px; cursor: pointer; transition: background .12s, color .12s; }
.bpm-fbtn-outline:hover { background: var(--ord-head-bg); color: var(--ord-on-solid); }

@media (max-width: 640px) {
  .bpm-band { padding: 16px 16px 14px; }
  .bpm-body { padding: 4px 16px 20px; }
  .bpm-title { font-size: 18px; }
  .bpm-atts .bap-media-row { margin-left: 16px; }
  .bpm-form { padding: 16px; }
}