CreatorLMS Editor

<style>
  /* === view 공통 (기존 상세 페이지 톤) === */
  .kv-list{ display:flex; flex-direction:column; gap:.55rem; }
  .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:4px; }
  .kv-actions{ display:inline-flex; gap:.4rem; flex-wrap:wrap; margin-left:.5rem; }

.table-mini thead th{ font-size:.85rem; }
  .table-mini td{ vertical-align:middle; }

.memo-item{
    padding:12px; border:1px solid rgba(0,0,0,.08);
    border-radius:.75rem; background:#fff;
  }
  .memo-meta{ color:#6b7280; font-size:.85rem; }

/* 상담 내용 1줄 말줄임 + 링크처럼 */
  .ellipsis-1{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:520px;
    margin:0 auto;
  }
  .consult-link{
    color:inherit;
    text-decoration:underline;
    cursor:pointer;
  }
  .consult-link:hover{ opacity:.8; }

/* === CSS-only Tabs === */
  .tabs{ margin-top:12px; }
  .tabs input[type="radio"]{ position:absolute; left:-9999px; }
  .tab-nav{
    display:flex; gap:6px; flex-wrap:wrap;
    border-bottom:1px solid rgba(0,0,0,.08);
    margin-bottom:12px;
  }
  .tab-nav label{
    cursor:pointer;
    padding:8px 12px;
    border:1px solid rgba(0,0,0,.08);
    border-bottom:none;
    border-radius:.75rem .75rem 0 0;
    background:#f8f9fa;
    color:#374151;
    font-weight:700;
    font-size:.95rem;
    user-select:none;
  }
  .tab-panels .tab-panel{ display:none; }

/* ✅ 탭을 5개로 축소 (tab1~tab5) */
  #tab1:checked ~ .tab-nav label[for="tab1"],
  #tab2:checked ~ .tab-nav label[for="tab2"],
  #tab3:checked ~ .tab-nav label[for="tab3"],
  #tab4:checked ~ .tab-nav label[for="tab4"],
  #tab5:checked ~ .tab-nav label[for="tab5"]{
    background:#fff;
    border-color:rgba(0,0,0,.08);
    color:#111827;
  }

#tab1:checked ~ .tab-panels #panel1,
  #tab2:checked ~ .tab-panels #panel2,
  #tab3:checked ~ .tab-panels #panel3,
  #tab4:checked ~ .tab-panels #panel4,
  #tab5:checked ~ .tab-panels #panel5{
    display:block;
  }

.dash-badges .badge { font-size:15px !important; }
</style>

<div class="d-flex align-items-center justify-content-between mb-2">
  <div>
    <h1 class="h4 mb-1"> 무료 계정 &gt; 상세 정보 (탭형)

</h1>
    <div class="text-muted">섹션형과 비교용 탭 UI 입니다. (JS 없이 동작)</div>
  </div>
  <div class="d-flex gap-2">
    <a class="btn btn-outline-secondary btn-sm" href="app.php?p=page/account/paid_account_list.html">목록으로</a>
  </div>
</div>

<div class="tab-panel" id="panel1">
      <div class="row g-3">
        
        <div class="col-12 col-xl-4">
          <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
              <div class="fw-semibold">계정 사용자 정보</div>
              <a class="btn btn-outline-primary btn-sm" href="#">정보수정</a>
            </div>
            <div class="card-body">
              <div class="kv-list">
              <div class="kv-row">
               <div class="kv-label">계정 ID(도메인)</div><div class="kv-sep"></div>
               <div class="kv-value">min_eng.creatorlms.com</div>
              </div>
		<div class="kv-row">
		<div class="kv-label">계정 타이틀</div><div class="kv-sep"></div>
		<div class="kv-value">김민수 영어학원 ABC 클래스</div>
		 </div>
                <div class="kv-row">
                  <div class="kv-label">사용자명</div><div class="kv-sep"></div>
                  <div class="kv-value">김민수</div>
                </div>
                <div class="kv-row">
                  <div class="kv-label">이메일</div><div class="kv-sep"></div>
                  <div class="kv-value">user01@example.com</div>
                </div>
                <div class="kv-row">
                  <div class="kv-label">전화번호</div><div class="kv-sep"></div>
                  <div class="kv-value">010-2301-1037</div>
                </div>
                <div class="kv-row">
                  <div class="kv-label">가입 채널</div><div class="kv-sep"></div>
                  <div class="kv-value">네이버 검색</div>
                </div>
              </div>
              <div class="form-text mt-2">* 값은 프로토타입용 임의 데이터입니다.</div>
            </div>
          </div>
        </div>

<div class="col-12 col-xl-8">
          <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
              <div class="fw-semibold">서비스 정보</div>
              <div class="d-flex gap-2 flex-wrap justify-content-end">
                <a class="btn btn-outline-secondary btn-sm" href="#">계정 유형 변경</a>
                <a class="btn btn-outline-secondary btn-sm" href="#">만료일  변경</a>
                <a class="btn btn-outline-secondary btn-sm" href="#">운영상태 변경</a>
                <a class="btn btn-outline-secondary btn-sm" href="#">도메인 세팅</a>
                <a class="btn btn-outline-secondary btn-sm" href="#">계정옵션 변경</a>
              </div>
            </div>
            <div class="card-body">
              <div class="kv-list">
                <div class="kv-row">
                  <div class="kv-label">계정 유형</div><div class="kv-sep"></div>
                  <div class="kv-value">
                    <span class="badge text-bg-light">테스트</span>
                  </div>
                </div>

<div class="kv-row">
                  <div class="kv-label">도메인</div><div class="kv-sep"></div>
                  <div class="kv-value">naver.com</div>
                </div>

<div class="kv-row">
                  <div class="kv-label">잔여 포인트</div><div class="kv-sep"></div>
                  <div class="kv-value">
                    <span class="fw-semibold">20,550</span> point
                  </div>
                </div>

<div class="kv-row">
                  <div class="kv-label">계정 옵션</div><div class="kv-sep"></div>
                  <div class="kv-value">
                    게시판 생성 기능 <span class="badge badge-soft">ON</span>
                    <br>
                    정산 기능 <span class="badge badge-soft">OFF</span>
                  </div>
                </div>
              </div>
              <div class="form-text mt-2">* 설명이 들어가는 부분입니다.</div>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="tab-panel" id="panel2">
      <div class="card">
        <div class="card-header text-center">
          <div class="fw-semibold">결제 내역</div>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 table-mini">
              <thead>
                <tr class="text-muted text-center">
                  <th style="width:70px;" class="text-center">번호</th>
                  <th style="width:160px;" class="text-center">결제시각</th>
                  <th style="width:140px;" class="text-center">결제액</th>
                  <th class="text-center">결제내역</th>
                </tr>
              </thead>
              <tbody class="text-center">
                <tr><td class="fw-semibold text-center">10</td><td class="text-center">2026-02-21 13:02</td><td class="text-center">₩55,000</td><td class="text-center">포인트 충전</td></tr>
                <tr><td class="fw-semibold text-center">9</td><td class="text-center">2026-02-20 13:02</td><td class="text-center">₩55,000</td><td class="text-center">포인트 충전</td></tr>
                <tr><td class="fw-semibold text-center">8</td><td class="text-center">2026-02-19 13:02</td><td class="text-center">₩55,000</td><td class="text-center">포인트 충전</td></tr>
                <tr><td class="fw-semibold text-center">7</td><td class="text-center">2026-02-18 13:02</td><td class="text-center">₩55,000</td><td class="text-center">포인트 충전</td></tr>
                <tr><td class="fw-semibold text-center">6</td><td class="text-center">2026-02-17 13:02</td><td class="text-center">₩55,000</td><td class="text-center">포인트 충전</td></tr>
                <tr><td class="fw-semibold text-center">5</td><td class="text-center">2026-02-16 13:02</td><td class="text-center">₩55,000</td><td class="text-center">포인트 충전</td></tr>
                <tr><td class="fw-semibold text-center">4</td><td class="text-center">2026-02-15 13:02</td><td class="text-center">₩55,000</td><td class="text-center">포인트 충전</td></tr>
                <tr><td class="fw-semibold text-center">3</td><td class="text-center">2026-02-14 13:02</td><td class="text-center">₩55,000</td><td class="text-center">포인트 충전</td></tr>
                <tr><td class="fw-semibold text-center">2</td><td class="text-center">2026-02-13 13:02</td><td class="text-center">₩55,000</td><td class="text-center">포인트 충전</td></tr>
                <tr><td class="fw-semibold text-center">1</td><td class="text-center">2026-02-12 13:02</td><td class="text-center">₩55,000</td><td class="text-center">포인트 충전</td></tr>
              </tbody>
            </table>
          </div>

<div class="tab-panel" id="panel3">
      <div class="card">
        <div class="card-header text-center">
          <div class="fw-semibold">포인트 사용 내역</div>
        </div>
        <div class="card-body">
          <div class="text-center mb-3">
            <div class="text-muted">잔여포인트</div>
            <div class="fw-semibold">20,550 point</div>
          </div>

<div class="tab-panel" id="panel4">
      <div class="card">
        <div class="card-header text-center">
          <div class="fw-semibold">1:1 상담 내역</div>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 table-mini">
              <thead>
                <tr class="text-muted text-center">
                  <th style="width:70px;" class="text-center">번호</th>
                  <th style="width:160px;" class="text-center">등록일</th>
                  <th style="width:140px;" class="text-center">답변여부</th>
                  <th class="text-center">내용</th>
                </tr>
              </thead>
              <tbody class="text-center">
                <tr>
                  <td class="fw-semibold text-center">10</td>
                  <td class="text-center">2026-02-20</td>
                  <td class="text-center"><span class="badge badge-soft">답변완료</span></td>
                  <td class="text-center">
                    <a class="consult-link ellipsis-1" href="#">
                      도메인 연결 관련해서 DNS 설정이 어려운데 가이드가 있을까요? (상세 내용은 레이어팝업 예정)
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="fw-semibold text-center">9</td>
                  <td class="text-center">2026-02-19</td>
                  <td class="text-center"><span class="badge text-bg-light">대기</span></td>
                  <td class="text-center">
                    <a class="consult-link ellipsis-1" href="#">
                      결제 영수증 발급 문의드립니다. 이메일로 받을 수 있는지 확인 부탁드립니다.
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="fw-semibold text-center">8</td>
                  <td class="text-center">2026-02-18</td>
                  <td class="text-center"><span class="badge badge-soft">답변완료</span></td>
                  <td class="text-center">
                    <a class="consult-link ellipsis-1" href="#">
                      게시판 스팸 방지 설정을 어디서 하면 될까요? 캡차나 금칙어 설정이 필요합니다.
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="fw-semibold text-center">7</td>
                  <td class="text-center">2026-02-17</td>
                  <td class="text-center"><span class="badge text-bg-light">대기</span></td>
                  <td class="text-center">
                    <a class="consult-link ellipsis-1" href="#">
                      포인트 차감 기준이 궁금합니다. 알림톡/문자/메일 단가표를 확인할 수 있을까요?
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="fw-semibold text-center">6</td>
                  <td class="text-center">2026-02-16</td>
                  <td class="text-center"><span class="badge badge-soft">답변완료</span></td>
                  <td class="text-center">
                    <a class="consult-link ellipsis-1" href="#">
                      만료일 연장 결제 후에도 만료일이 갱신되지 않은 것 같아요. 확인 부탁드립니다.
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="fw-semibold text-center">5</td>
                  <td class="text-center">2026-02-15</td>
                  <td class="text-center"><span class="badge badge-soft">답변완료</span></td>
                  <td class="text-center">
                    <a class="consult-link ellipsis-1" href="#">
                      관리자 메뉴에서 권한 설정이 가능한가요? 운영자 계정을 추가하고 싶습니다.
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="fw-semibold text-center">4</td>
                  <td class="text-center">2026-02-14</td>
                  <td class="text-center"><span class="badge text-bg-light">대기</span></td>
                  <td class="text-center">
                    <a class="consult-link ellipsis-1" href="#">
                      사이트 템플릿 변경 후 일부 페이지 레이아웃이 깨졌습니다. 복구 방법이 있을까요?
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="fw-semibold text-center">3</td>
                  <td class="text-center">2026-02-13</td>
                  <td class="text-center"><span class="badge badge-soft">답변완료</span></td>
                  <td class="text-center">
                    <a class="consult-link ellipsis-1" href="#">
                      상품 변경 로그는 어디서 확인하나요? 이전 변경 이력을 내려받고 싶습니다.
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="fw-semibold text-center">2</td>
                  <td class="text-center">2026-02-12</td>
                  <td class="text-center"><span class="badge text-bg-light">대기</span></td>
                  <td class="text-center">
                    <a class="consult-link ellipsis-1" href="#">
                      도메인 적용 버튼을 눌렀는데 적용이 안 됩니다. SSL 관련해서도 안내 부탁드립니다.
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="fw-semibold text-center">1</td>
                  <td class="text-center">2026-02-11</td>
                  <td class="text-center"><span class="badge badge-soft">답변완료</span></td>
                  <td class="text-center">
                    <a class="consult-link ellipsis-1" href="#">
                      회원 등급별 접근 제어가 가능한가요? 일부 콘텐츠를 유료회원만 보이게 하고 싶습니다.
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

<div class="tab-panel" id="panel5">
      <div class="card">
        <div class="card-header text-center">
          <div class="fw-semibold">관리자 메모</div>
        </div>
        <div class="card-body">
          <div class="d-flex flex-column gap-2 mb-3">
            <div class="memo-item">
              <div class="d-flex align-items-start justify-content-between gap-2">
                <div>
                  <div class="fw-semibold">결제 확인 완료 및 도메인 연결 안내 발송</div>
                  <div class="memo-meta">2026-02-21 14:10 · 관리자 홍길동</div>
                </div>
                <div class="d-flex gap-2 flex-shrink-0">
                  <a class="btn btn-outline-secondary btn-sm" href="#">수정</a>
                  <a class="btn btn-outline-danger btn-sm" href="#">삭제</a>
                </div>
              </div>
            </div>

<div class="memo-item">
              <div class="d-flex align-items-start justify-content-between gap-2">
                <div>
                  <div class="fw-semibold">상품 변경 문의 접수 (Starter → Growth 검토)</div>
                  <div class="memo-meta">2026-02-12 10:05 · 관리자 오세훈</div>
                </div>
                <div class="d-flex gap-2 flex-shrink-0">
                  <a class="btn btn-outline-secondary btn-sm" href="#">수정</a>
                  <a class="btn btn-outline-danger btn-sm" href="#">삭제</a>
                </div>
              </div>
            </div>

<nav class="mt-3 d-flex justify-content-center" aria-label="pagination">
            <ul class="pagination pagination-sm mb-0">
              <li class="page-item disabled"><a class="page-link" href="#">이전</a></li>
              <li class="page-item active"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item"><a class="page-link" href="#">4</a></li>
              <li class="page-item"><a class="page-link" href="#">5</a></li>
              <li class="page-item"><a class="page-link" href="#">6</a></li>
              <li class="page-item"><a class="page-link" href="#">7</a></li>
              <li class="page-item"><a class="page-link" href="#">8</a></li>
              <li class="page-item"><a class="page-link" href="#">9</a></li>
              <li class="page-item"><a class="page-link" href="#">10</a></li>
              <li class="page-item"><a class="page-link" href="#">다음</a></li>
            </ul>
          </nav>

<div class="border-top pt-3 mt-3">
            <div class="mb-2 fw-semibold">메모 추가</div>
            <textarea class="form-control" rows="3" placeholder="관리자 메모를 입력하세요 (작성자/일시는 저장 시 자동)"></textarea>
            <div class="d-flex justify-content-end mt-2">
              <button class="btn btn-primary" type="button">등록</button>
            </div>
            <div class="form-text">* 프로토타입: 실제 저장 동작은 없습니다.</div>
          </div>
        </div>
      </div>
    </div>

</div>
</div>

간단 소스 편집기