CreatorLMS Editor

<style>
  .kv-list{ display:flex; flex-direction:column; gap:.65rem; }
  .kv-row{ display:flex; align-items:flex-start; gap:12px; }
  .kv-label{ width:160px; font-weight:600; color:#374151; white-space:nowrap; padding-top:6px; }
  .kv-sep{ width:1px; background:rgba(0,0,0,.08); margin-top:4px; margin-bottom:4px; }
  .kv-value{ flex:1; min-width:0; padding-top:0; }
  .kv-value, .kv-value *{ text-align:left; }
  .help-muted{ color:#6b7280; font-size:.85rem; }

.readonly-like{
    background:#f8f9fa; border:1px solid rgba(0,0,0,.12);
    border-radius:.5rem; padding:.5rem .75rem; min-height:38px;
    display:flex; align-items:center;
  }
  .code-mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:.9rem;
  }
  .radio-row{ display:flex; flex-wrap:wrap; gap:.75rem 1.2rem; padding-top:4px; }
  .radio-row .form-check{ margin:0; }

/* 댓글(대화) */
  .chat-wrap{ display:flex; flex-direction:column; gap:10px; }
  .chat-item{
    border:1px solid rgba(0,0,0,.08);
    border-radius:.75rem;
    background:#fff;
    padding:12px;
  }
  .chat-head{
    display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
    margin-bottom:6px;
  }
  .chat-who{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .chat-body{ white-space:pre-wrap; line-height:1.5; }
  .chat-meta{ color:#6b7280; font-size:.85rem; }

@media (max-width: 576px){
    .kv-label{ width:120px; }
  }
</style>

<div class="d-flex align-items-center justify-content-between mb-2">
  <div>
    <h1 class="h4 mb-1">1:1 문의 상세

</h1>
    <div class="text-muted">문의 내용과 댓글 대화를 확인합니다.</div>
  </div>
</div>

<div class="kv-row">
            <div class="kv-label">작성자</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="readonly-like">
                <span class="fw-semibold me-2">김민수</span>
                <span class="text-muted mx-2">|</span>
                <span class="code-mono">minsu@example.com</span>
              </div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">처리여부</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="radio-row">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="st" id="st_wait" checked>
                  <label class="form-check-label" for="st_wait">대기</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="st" id="st_ing">
                  <label class="form-check-label" for="st_ing">처리중</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="st" id="st_done">
                  <label class="form-check-label" for="st_done">완료</label>
                </div>
              </div>
              <div class="help-muted mt-1">* 프로토타입: 저장은 동작하지 않습니다.</div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">문의 원문</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="readonly-like" style="align-items:flex-start;">
                <div style="white-space:pre-wrap; line-height:1.45;">
결제는 완료되었는데, 수강 페이지에서 접근 권한이 없다고 나옵니다.
어제(2/18) 저녁부터 계속 동일합니다.
확인 부탁드립니다.
                </div>
              </div>
            </div>
          </div>

</div>

<div class="d-flex justify-content-center gap-2 mb-3">
    <a class="btn btn-outline-secondary" href="app.php?p=page/site/qna_list.html">목록</a>
    <a class="btn btn-primary" href="app.php?p=page/site/qna_form.html">저장</a>
  </div>

<div class="mt-4">
          <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-2">
            <div class="fw-semibold">댓글</div>
            <div class="text-muted small">* 관리자와 작성자가 계속 이어서 작성하는 구조</div>
          </div>

<div class="chat-item">
              <div class="chat-head">
                <div class="chat-who">
                  <span class="badge text-bg-secondary">작성자</span>
                  <span class="fw-semibold">김민수</span>
                  <span class="code-mono text-muted">minsu@example.com</span>
                </div>
                <div class="chat-meta">2026-02-19 09:12</div>
              </div>
              <div class="chat-body">결제는 되었는데 권한이 계속 없다고 떠요.</div>
            </div>

<div class="chat-item">
              <div class="chat-head">
                <div class="chat-who">
                  <span class="badge text-bg-primary">관리자</span>
                  <span class="fw-semibold">운영자</span>
                </div>
                <div class="chat-meta">2026-02-19 09:20</div>
              </div>
              <div class="chat-body">확인 중입니다. 결제 로그와 권한 동기화 상태를 점검하겠습니다.</div>
            </div>

<div class="chat-item">
              <div class="chat-head">
                <div class="chat-who">
                  <span class="badge text-bg-secondary">작성자</span>
                  <span class="fw-semibold">김민수</span>
                </div>
                <div class="chat-meta">2026-02-19 09:28</div>
              </div>
              <div class="chat-body">네 감사합니다. 언제쯤 확인될까요?</div>
            </div>

</div>

<div class="card mt-3">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
              <div class="fw-semibold">댓글 작성</div>
              <div class="d-flex gap-2 align-items-center">
                <span class="text-muted small">작성자</span>
                <select class="form-select form-select-sm" style="width:140px;">
                  <option selected>관리자</option>
                  <option>작성자(샘플)</option>
                </select>
              </div>
            </div>
            <div class="card-body">
              <textarea class="form-control" rows="4" placeholder="댓글을 입력하세요"></textarea>
              <div class="d-flex justify-content-end gap-2 mt-2">
                <button class="btn btn-outline-secondary" type="button"
                        onclick="return pa(event,'프로토타입: 입력 내용을 지웁니다.');">초기화</button>
                <button class="btn btn-primary" type="button"
                        onclick="return pa(event,'프로토타입: 댓글을 등록합니다. (실제 저장/추가는 동작하지 않습니다)');">댓글 등록</button>
              </div>
              <div class="help-muted mt-2">* 실제 서비스에서는 등록 후 댓글이 목록 하단에 추가됩니다.</div>
            </div>
          </div>
        </div>

</div>
    </div>
  </div>
</div>

간단 소스 편집기