CreatorLMS Editor

--w-money:180px;   /* ₩ / $ */
    --w-percent:180px; /* % 입력 */
    --w-count:220px;   /* 기본제공/무료체험/SSL 등 */
    --w-mid:260px;     /* GB/회원수 등 */
    --w-panel:320px;   /* 제한 패널 */
    --w-msgpanel:980px;
    --w-readonly:220px;
    --w-select:180px;
  }

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

.inline-actions{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
  .radio-row{ display:flex; flex-wrap:wrap; gap:.75rem 1.2rem; padding-top:4px; }
  .radio-row .form-check{ margin:0; }

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

.panel{
    border:1px solid rgba(0,0,0,.08);
    border-radius:.75rem;
    background:#fff;
    padding:12px;
    margin-top:10px;
  }
  .help-muted{ color:#6b7280; font-size:.85rem; }
  .help-danger{ color:#dc3545; font-size:.9rem; font-weight:600; }

/* ✅ 공통 입력/그룹 폭 유틸 */
  .inp-name{ max-width:var(--w-name); }
  .ig-money{ max-width:var(--w-money); }
  .ig-percent{ max-width:var(--w-percent); }
  .ig-count{ max-width:var(--w-count); }
  .ig-mid{ max-width:var(--w-mid); }
  .panel-limit{ max-width:var(--w-panel); }
  .panel-msg{ max-width:var(--w-msgpanel); }
  .ro-w{ min-width:var(--w-readonly); }
  .sel-sm{ max-width:var(--w-select); }

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

function onlyInt(el){
    // 숫자만 남기기
    var v = (el.value || '').replace(/[^\d]/g, '');
    el.value = v;
    return v;
  }

function toInt(v){
    v = (v || '').toString().replace(/[^\d]/g,'');
    if(!v) return 0;
    return parseInt(v, 10) || 0;
  }

function fmtKRW(n){
    return '₩ ' + (n||0).toLocaleString('ko-KR');
  }
  function fmtUSD(n){
    return '$ ' + (n||0).toLocaleString('en-US');
  }

function recalcYearTotal(){
    var mKrw = toInt(document.getElementById('month_krw').value);
    var mUsd = toInt(document.getElementById('month_usd').value);
    var disc = toInt(document.getElementById('year_disc').value);
    if(disc > 100) disc = 100;

var yKrw = Math.floor(mKrw * 12 * (1 - disc/100));
    var yUsd = Math.floor(mUsd * 12 * (1 - disc/100));

document.getElementById('year_total_krw').textContent = fmtKRW(yKrw);
    document.getElementById('year_total_usd').textContent = fmtUSD(yUsd);
  }

function toggleLimit(radioName, panelId){
    var els = document.querySelectorAll('input[name="'+radioName+'"]');
    var on = false;
    for(var i=0;i<els.length;i++){
      if(els[i].checked && els[i].value === 'limit') on = true;
    }
    document.getElementById(panelId).style.display = on ? 'block' : 'none';
  }

function bindAll(){
    var intInputs = document.querySelectorAll('[data-only-int="1"]');
    for(var i=0;i<intInputs.length;i++){
      intInputs[i].addEventListener('input', function(){
        onlyInt(this);
        recalcYearTotal();
      });
    }

// 라디오 토글
    var map = [
      {name:'limit_product_count', panel:'panel_product_count'},
      {name:'limit_storage', panel:'panel_storage'},
      {name:'limit_members', panel:'panel_members'},
      {name:'limit_courses', panel:'panel_courses'},
      {name:'limit_admins', panel:'panel_admins'}
    ];
    for(var j=0;j<map.length;j++){
      (function(m){
        var radios = document.querySelectorAll('input[name="'+m.name+'"]');
        for(var k=0;k<radios.length;k++){
          radios[k].addEventListener('change', function(){ toggleLimit(m.name, m.panel); });
        }
      })(map[j]);
    }

// 초기 상태
    recalcYearTotal();
    toggleLimit('limit_product_count', 'panel_product_count');
    toggleLimit('limit_storage', 'panel_storage');
    toggleLimit('limit_members', 'panel_members');
    toggleLimit('limit_courses', 'panel_courses');
    toggleLimit('limit_admins', 'panel_admins');
  }

document.addEventListener('DOMContentLoaded', bindAll);
</script>

<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>
          </div>

<div class="kv-row">
            <div class="kv-label">상품명</div><div class="kv-sep"></div>
            <div class="kv-value">
              <input type="text" class="form-control inp-name" placeholder="예) C-Start / C-Basic / C-Growth / C-Advance / Enterprise" maxlength="40">
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">월 결제액</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="inline-actions">
                <div class="input-group ig-money">
                  <span class="input-group-text">₩</span>
                  <input id="month_krw" type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" placeholder="원화">
                </div>
                <div class="input-group ig-money">
                  <span class="input-group-text">$</span>
                  <input id="month_usd" type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" placeholder="달러">
                </div>
              </div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">년 결제시 할인율</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="inline-actions">
                <div class="input-group ig-percent">
                  <input id="year_disc" type="text" class="form-control" inputmode="numeric" maxlength="3" data-only-int="1" placeholder="할인율">
                  <span class="input-group-text">%</span>
                </div>

<div class="kv-row">
            <div class="kv-label">환불시 일 비용</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="inline-actions">
                <div class="input-group ig-money">
                  <span class="input-group-text">₩</span>
                  <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" placeholder="원화">
                </div>
                <div class="input-group ig-money">
                  <span class="input-group-text">$</span>
                  <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" placeholder="달러">
                </div>
              </div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">플랫폼 수수료(%)</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="input-group ig-percent">
                <input type="text" class="form-control" inputmode="numeric" maxlength="2" data-only-int="1" placeholder="0~99">
                <span class="input-group-text">%</span>
              </div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">PG 수수료(%)</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="input-group ig-percent">
                <input type="text" class="form-control" inputmode="numeric" maxlength="2" data-only-int="1" placeholder="0~99" value="0">
                <span class="input-group-text">%</span>
              </div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">무료체험</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="input-group ig-count">
                <input type="text" class="form-control" inputmode="numeric" maxlength="2" data-only-int="1" value="0">
                <span class="input-group-text">일</span>
              </div>
              <div class="help-muted mt-2">0으로 세팅하면 무료 체험은 미제공합니다.</div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">도메인 SSL 무료제공</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="input-group ig-count">
                <input type="text" class="form-control" inputmode="numeric" maxlength="1" data-only-int="1" value="0">
                <span class="input-group-text">개</span>
              </div>
              <div class="help-muted mt-2">0으로 세팅하면 도메인 SSL은 미제공합니다.</div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">웹사이트 수</div><div class="kv-sep"></div>
            <div class="kv-value">
              <select class="form-select sel-sm">
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
              </select>
            </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="limit_product_count" id="pc_unlimit" value="unlimit" >
                  <label class="form-check-label" for="pc_unlimit">무제한</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="limit_product_count" id="pc_limit" value="limit">
                  <label class="form-check-label" for="pc_limit">제한</label>
                </div>
              </div>
              <div id="panel_product_count" class="panel panel-limit" style="display:none;">
                <div class="inline-actions">
                  <input type="text" class="form-control" inputmode="numeric" maxlength="6" data-only-int="1" placeholder="최대 상품수">
                </div>
              </div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">용량(GB)</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="limit_storage" id="stg_unlimit" value="unlimit" >
                  <label class="form-check-label" for="stg_unlimit">무제한</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="limit_storage" id="stg_limit" value="limit">
                  <label class="form-check-label" for="stg_limit">제한</label>
                </div>
              </div>
              <div id="panel_storage" class="panel panel-limit" style="display:none;">
                <div class="input-group ig-mid">
                  <input type="text" class="form-control" inputmode="numeric" maxlength="5" data-only-int="1" placeholder="용량">
                  <span class="input-group-text">GB</span>
                </div>
              </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="limit_members" id="mb_unlimit" value="unlimit">
                  <label class="form-check-label" for="mb_unlimit">무제한</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="limit_members" id="mb_limit" value="limit">
                  <label class="form-check-label" for="mb_limit">제한</label>
                </div>
              </div>
              <div id="panel_members" class="panel panel-limit" style="display:none;">
                <div class="input-group ig-mid">
                  <input type="text" class="form-control" inputmode="numeric" maxlength="4" data-only-int="1" placeholder="회원수">
                  <span class="input-group-text">명</span>
                </div>
              </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="limit_courses" id="cs_unlimit" value="unlimit" >
                  <label class="form-check-label" for="cs_unlimit">무제한</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="limit_courses" id="cs_limit" value="limit">
                  <label class="form-check-label" for="cs_limit">제한</label>
                </div>
              </div>
              <div id="panel_courses" class="panel panel-limit" style="display:none;">
                <input type="text" class="form-control" inputmode="numeric" maxlength="4" data-only-int="1" placeholder="수강 제한 수">
              </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="limit_admins" id="ad_unlimit" value="unlimit" >
                  <label class="form-check-label" for="ad_unlimit">무제한</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="limit_admins" id="ad_limit" value="limit">
                  <label class="form-check-label" for="ad_limit">제한</label>
                </div>
              </div>
              <div id="panel_admins" class="panel panel-limit" style="display:none;">
                <input type="text" class="form-control" inputmode="numeric" maxlength="3" data-only-int="1" placeholder="관리자 제한 수">
              </div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">AI 기능</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="panel panel-msg" style="margin-top:0;">
                <div class="kv-list" style="gap:.55rem;">

<div class="kv-row" style="gap:10px;">
                    <div class="kv-label" style="width:120px;">AI 튜터</div><div class="kv-sep"></div>
                    <div class="kv-value">
                      <div class="inline-actions">
                        <div class="input-group ig-count">
                          <span class="input-group-text">기본제공</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="3" data-only-int="1" value="0">
                          <span class="input-group-text">개</span>
                        </div>
                        <div> 추가사용 포인트 : </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">₩</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트(원)">
                        </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">$</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트($)">
                        </div>
                      </div>
                    </div>
                  </div>

<div class="kv-row" style="gap:10px;">
                    <div class="kv-label" style="width:120px;">AI 학습리포트</div><div class="kv-sep"></div>
                    <div class="kv-value">
                      <div class="inline-actions">
                        <div class="input-group ig-count">
                          <span class="input-group-text">기본제공</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="3" data-only-int="1" value="0">
                          <span class="input-group-text">개</span>
                        </div>
                        <div> 추가사용 포인트 : </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">₩</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트(원)">
                        </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">$</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트($)">
                        </div>
                      </div>
                    </div>
                  </div>

<div class="kv-row" style="gap:10px;">
                    <div class="kv-label" style="width:120px;">AI 영상 자막 추출</div><div class="kv-sep"></div>
                    <div class="kv-value">
                      <div class="inline-actions">
                        <div class="input-group ig-count">
                          <span class="input-group-text">기본제공</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="3" data-only-int="1" value="0">
                          <span class="input-group-text">개</span>
                        </div>
                        <div> 추가사용 포인트 : </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">₩</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트(원)">
                        </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">$</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트($)">
                        </div>
                      </div>
                    </div>
                  </div>

<div class="kv-row" style="gap:10px;">
                    <div class="kv-label" style="width:120px;">영상자막 자동번역</div><div class="kv-sep"></div>
                    <div class="kv-value">
                      <div class="inline-actions">
                        <div class="input-group ig-count">
                          <span class="input-group-text">기본제공</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="3" data-only-int="1" value="0">
                          <span class="input-group-text">개</span>
                        </div>
                        <div> 추가사용 포인트 : </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">₩</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트(원)">
                        </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">$</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트($)">
                        </div>
                      </div>
                    </div>
                  </div>

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

<div class="kv-row">
            <div class="kv-label">메시지</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="panel panel-msg" style="margin-top:0;">
                <div class="kv-list" style="gap:.55rem;">

<div class="kv-row" style="gap:10px;">
                    <div class="kv-label" style="width:120px;">이메일</div><div class="kv-sep"></div>
                    <div class="kv-value">
                      <div class="inline-actions">
                        <div class="input-group ig-count">
                          <span class="input-group-text">기본제공</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="3" data-only-int="1" value="0">
                          <span class="input-group-text">개</span>
                        </div>
                        <div> 추가사용 포인트 : </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">₩</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트(원)">
                        </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">$</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트($)">
                        </div>
                      </div>
                    </div>
                  </div>

<div class="kv-row" style="gap:10px;">
                    <div class="kv-label" style="width:120px;">SMS</div><div class="kv-sep"></div>
                    <div class="kv-value">
                      <div class="inline-actions">
                        <div class="input-group ig-count">
                          <span class="input-group-text">기본제공</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="3" data-only-int="1" value="0">
                          <span class="input-group-text">개</span>
                        </div>
                        <div> 추가사용 포인트 : </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">₩</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트(원)">
                        </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">$</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트($)">
                        </div>
                      </div>
                    </div>
                  </div>

<div class="kv-row" style="gap:10px;">
                    <div class="kv-label" style="width:120px;">LMS</div><div class="kv-sep"></div>
                    <div class="kv-value">
                      <div class="inline-actions">
                        <div class="input-group ig-count">
                          <span class="input-group-text">기본제공</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="3" data-only-int="1" value="0">
                          <span class="input-group-text">개</span>
                        </div>
                        <div> 추가사용 포인트 : </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">₩</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트(원)">
                        </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">$</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트($)">
                        </div>
                      </div>
                    </div>
                  </div>

<div class="kv-row" style="gap:10px;">
                    <div class="kv-label" style="width:120px;">알림톡</div><div class="kv-sep"></div>
                    <div class="kv-value">
                      <div class="inline-actions">
                        <div class="input-group ig-count">
                          <span class="input-group-text">기본제공</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="3" data-only-int="1" value="0">
                          <span class="input-group-text">개</span>
                        </div>
                        <div> 추가사용 포인트 : </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">₩</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트(원)">
                        </div>
                        <div class="input-group ig-money">
                          <span class="input-group-text">$</span>
                          <input type="text" class="form-control" inputmode="numeric" maxlength="12" data-only-int="1" value="0" placeholder="포인트($)">
                        </div>
                      </div>
                    </div>
                  </div>

</div>
              </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="checkbox" id="sub_1m" checked>
                  <label class="form-check-label" for="sub_1m">1개월</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="sub_3m">
                  <label class="form-check-label" for="sub_3m">3개월</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="sub_6m">
                  <label class="form-check-label" for="sub_6m">6개월</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="sub_1y">
                  <label class="form-check-label" for="sub_1y">1년</label>
                </div>
              </div>
              <div class="help-muted mt-2">* 설명문구 </div>
            </div>
          </div>

</div>

<div class="border-top pt-3 mt-3 d-flex justify-content-center gap-2">
          <a class="btn btn-outline-secondary" href="app.php?p=page/product/product_list.html">상품 목록</a>
          <a class="btn btn-primary" href="#" onclick="return pa(event,'이 버튼은 상품 등록(저장) 처리 후 목록/상세로 이동합니다.');">저장(등록)</a>
        </div>
        <div class="form-text mt-2">* “저장(등록)”은 프로토타입 동작으로 안내 메시지만 표시합니다.</div>
      </div>
    </div>
  </div>
</div>

간단 소스 편집기