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

/* ── 헤더 밴드 ── */
.bpm-band { background: linear-gradient(180deg, #f3f7fb, #fff); padding: 22px 28px 18px; border-bottom: 1px solid #e2e8f0; }
.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: #3e6187; color: #fff; }
.bpm-badge--secret { background: #fef3c7; color: #92400e; }
.bpm-badge--reply { background: #f1f5f9; color: #64748b; }
.bpm-badge--blind { background: #fee2e2; color: #b91c1c; }
.bpm-badge--partner { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }

.bpm-title { font-size: 20px; font-weight: 800; color: #0f172a; line-height: 1.35; padding-left: 13px; border-left: 4px solid #3e6187; margin: 0 0 14px; letter-spacing: -.2px; }
.bpm-title .bpm-reply-arrow { color: #94a3b8; }

.bpm-meta { display: flex; align-items: center; gap: 11px; }
.bpm-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #3e6187, #5b82ab); color: #fff; 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: #1e293b; }
.bpm-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.bpm-views { font-size: 12px; font-weight: 600; color: #3e6187; background: #fff; border: 1px solid #c4d3e2; 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: #334155; min-height: 60px; }

/* html 형식 본문(ordars_rails_editor 저장분) 렌더 — 에디터 타이포그래피와 동일 규격 */
.bpm-content-html { min-height: 120px; margin-bottom: 20px; font-size: 14.5px; color: #334155; 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: #0f172a; }
.bpm-content-html ul, .bpm-content-html ol { padding-left: 1.5em; margin: .3em 0; }
.bpm-content-html blockquote { border-left: 3px solid #3e6187; background: #f3f7fb; padding: 8px 14px; border-radius: 0 8px 8px 0; margin: .5em 0; color: #475569; }
.bpm-content-html code { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 5px; padding: 1px 5px; font-size: .9em; }
.bpm-content-html pre { background: #0f172a; color: #e2e8f0; 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 #dbe6f0; margin: 14px 0; }
.bpm-content-html img { max-width: 100%; border-radius: 10px; }
.bpm-content-html a { color: #3e6187; text-decoration: underline; }

/* ── 첨부 ── */
.bpm-atts { border: 1px solid #dbe6f0; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.bpm-atts-hd { font-size: 12px; font-weight: 700; color: #3e6187; background: #f3f7fb; padding: 10px 16px; border-bottom: 1px solid #dbe6f0; }
.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 #eef4f9; }
.bpm-att:hover { background: #f8fbfd; }
.bpm-att-icon { width: 44px; height: 44px; border-radius: 9px; background: #eef4f9; 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: #1e293b; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpm-att-fs { font-size: 11.5px; color: #94a3b8; margin-top: 3px; }
.bpm-att-dl { flex-shrink: 0; font-size: 12px; color: #3e6187; border: 1.5px solid #3e6187; background: #fff; padding: 6px 15px; border-radius: 8px; text-decoration: none; font-weight: 700; transition: background .12s, color .12s; }
.bpm-att-dl:hover { background: #3e6187; color: #fff; }
.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 #f3f7fb; 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 #e2e8f0; background: #fff; color: #475569; cursor: pointer; font-weight: 500; transition: background .12s; }
.bpm-btn:hover { background: #f8fafc; }
.bpm-btn--danger { color: #dc2626; border-color: #fecaca; }
.bpm-btn--danger:hover { background: #fef2f2; }
.bpm-btn--primary { background: #3e6187; border-color: #3e6187; color: #fff; font-weight: 700; padding: 9px 22px; border-radius: 22px; box-shadow: 0 2px 8px rgba(62, 97, 135, .25); }
.bpm-btn--primary:hover { background: #355475; }
.bpm-locked-note { font-size: 12px; color: #9ca3af; 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: #0f172a; padding-bottom: 9px; border-bottom: 3px solid #3e6187; margin: 0 0 4px; }
.bpm-chead-n { background: #3e6187; color: #fff; 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 #f1f5f9; }
.bpm-cava { width: 33px; height: 33px; border-radius: 50%; flex-shrink: 0; background: #eef4f9; color: #3e6187; 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: #1e293b; }
.bpm-ct { font-size: 11px; color: #94a3b8; margin-left: 7px; font-weight: 400; }
.bpm-ccompany { font-size: 10px; background: #ecfeff; color: #0e7490; padding: 1px 6px; border-radius: 8px; margin-left: 6px; }
.bpm-cx { font-size: 13.5px; color: #334155; 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 #e5e7eb; border-radius: 6px; font-size: 11px; background: #fff; color: #9ca3af; cursor: pointer; }
.bpm-cdel:hover { color: #dc2626; border-color: #fecaca; }
.bpm-cempty { text-align: center; font-size: 13px; color: #cbd5e1; 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 #c4d3e2; border-radius: 12px; padding: 12px 15px; font-size: 13.5px; font-family: inherit; resize: none; color: #1e293b; background: #fcfdfe; box-sizing: border-box; }
.bpm-cinput textarea:focus { outline: none; border-color: #3e6187; box-shadow: 0 0 0 3px #3e618722; background: #fff; }
.bpm-cinput button { background: #3e6187; color: #fff; 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: #355475; }
.bpm-anon { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; margin-top: 7px; cursor: pointer; }

/* ── 작성·답글·수정 폼 모달 (2026-08-22 같은 컨셉 확장) ── */
.bpm-form { padding: 20px 24px 24px; }
.bpm-fctx { background: linear-gradient(180deg, #f3f7fb, #fff); border: 1px solid #dbe6f0; border-left: 4px solid #3e6187; border-radius: 10px; padding: 11px 15px; font-size: 13px; color: #3e6187; font-weight: 600; margin-bottom: 18px; line-height: 1.5; }
.bpm-fctx b { color: #1e293b; font-weight: 600; }
.bpm-fwarn { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 11px 14px; font-size: 12.5px; color: #92400e; line-height: 1.5; margin-bottom: 18px; }
.bpm-fgroup { margin-bottom: 16px; }
.bpm-flabel { display: block; font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 7px; }
.bpm-flabel .bpm-freq { color: #dc2626; }
.bpm-flabel .bpm-fhint { font-size: 11px; color: #94a3b8; font-weight: 400; }
.bpm-finput { width: 100%; padding: 11px 14px; border: 1.5px solid #c4d3e2; border-radius: 10px; font-size: 14px; font-family: inherit; color: #1e293b; background: #fcfdfe; 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: #3e6187; box-shadow: 0 0 0 3px #3e618722; background: #fff; border-radius: 10px; }
.bpm-finput[readonly], .bpm-finput[disabled] { background: #f1f5f9; color: #64748b; cursor: not-allowed; }
.bpm-fopts { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; padding: 12px 14px; background: #f8fafc; border: 1px solid #eef2f6; border-radius: 10px; }
.bpm-fopt { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #334155; cursor: pointer; font-weight: 500; }
.bpm-fatts { border: 1px solid #dbe6f0; border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.bpm-fatts-hd { font-size: 12px; font-weight: 700; color: #3e6187; background: #f3f7fb; padding: 10px 15px; border-bottom: 1px solid #dbe6f0; }
.bpm-fatts-hd .bpm-fhint { font-weight: 400; color: #7e97ae; 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: #3e6187; border: 1.5px solid #3e6187; background: #fff; padding: 7px 15px; border-radius: 8px; cursor: pointer; transition: background .12s, color .12s; }
.bpm-fbtn-outline:hover { background: #3e6187; color: #fff; }

@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; }
}