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

.radio-row{ display:flex; flex-wrap:wrap; gap:.75rem 1.2rem; padding-top:4px; }
  .radio-row .form-check{ margin:0; }

/* 수정불가 텍스트 표현 */
  .plain-text{
    padding-top:6px;
    color:#111827;
    line-height:1.35;
    white-space:normal;
  }
  .plain-text .muted{ color:#6b7280; }
  .plain-text .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
  .plain-text .tag{
    display:inline-block; padding:.15rem .45rem; border-radius:999px;
    background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.08);
    margin-right:.35rem; margin-bottom:.2rem;
  }

.help-muted{ 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">상품 상세

</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="radio-row">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="sell_status" id="sell_on" checked>
                  <label class="form-check-label" for="sell_on">판매 중</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="sell_status" id="sell_off">
                  <label class="form-check-label" for="sell_off">판매 종료</label>
                </div>
              </div>
              <div class="help-muted mt-2">판매 종료 시 브랜드 사이트 구매 리스트에 노출되지 않습니다.</div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">상품명</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="plain-text">C-Growth (제휴 이벤트)</div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">월 결제액</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="plain-text">
                <span class="mono">₩ 29,000</span>
                <span class="muted mx-2">/</span>
                <span class="mono">$ 19</span>
              </div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">년 결제시 할인율</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="plain-text">
                <span class="mono">15%</span>
                <span class="muted mx-2">·</span>
                <span class="muted">총액</span>
                <span class="muted mx-1">(원/달러)</span>
                <span class="mono">₩ 295,800</span>
                <span class="muted mx-2">/</span>
                <span class="mono">$ 194</span>
              </div>
             </div>
          </div>

<div class="kv-row">
            <div class="kv-label">환불시 일 비용</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="plain-text">
                <span class="mono">₩ 1,100</span>
                <span class="muted mx-2">/</span>
                <span class="mono">$ 0.75</span>
              </div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">수수료(%)</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="plain-text"><span class="mono">7%</span></div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">상품수 제한</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="plain-text">제한 <span class="muted">(최대 <span class="mono">50</span>개)</span></div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">용량(GB)</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="plain-text">무제한</div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">회원수</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="plain-text">제한 <span class="muted">(최대 <span class="mono">1,000</span>명)</span></div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">수강제한</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="plain-text">무제한</div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">관리자제한</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="plain-text">제한 <span class="muted">(최대 <span class="mono">5</span>명)</span></div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">구독 옵션</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="plain-text">
                <span class="tag">1개월</span>
                <span class="tag">3개월</span>
                <span class="tag">1년</span>
              </div>
            </div>
          </div>

</div>

간단 소스 편집기