CreatorLMS Editor

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

.help-muted{ color:#6b7280; font-size:.85rem; }

.dual-input{ display:flex; gap:10px; flex-wrap:wrap; max-width:980px; }
  .dual-input .form-control{ min-width:260px; flex:1; }
  .dual-stack{ display:flex; flex-direction:column; gap:10px; max-width:980px; }

@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">페이지 추가
      <button type="button" class="btn btn-link btn-sm p-0 ms-2 align-baseline"
              onclick="openPageHelp(this)"
              data-title="페이지 추가">❓</button>
    </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="dual-input">
                <input type="text" class="form-control" placeholder="한글 페이지명 (예: 요금제)" maxlength="40">
                <input type="text" class="form-control" placeholder="영문 페이지명 (예: Pricing)" maxlength="40">
              </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="radio-row">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="is_visible" id="vis_y" checked>
                  <label class="form-check-label" for="vis_y">노출</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="is_visible" id="vis_n">
                  <label class="form-check-label" for="vis_n">비노출</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">
              <input type="text" class="form-control"
                     placeholder="예: pricing-plan"
                     maxlength="16"
                     style="max-width:420px;"
                     inputmode="latin">
              <div class="help-muted mt-1">
                * 필수. 소문자/숫자/하이픈(-)만, 공백 금지, 최대 16자, 중복 불가(가정).
              </div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">내용</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="dual-stack">
                <textarea class="form-control" rows="8" placeholder="한글 내용" style="max-width:980px;"></textarea>
                <textarea class="form-control" rows="8" placeholder="영문 내용" style="max-width:980px;"></textarea>
              </div>
              <div class="help-muted mt-1">* 한글/영문 내용을 각각 입력합니다.</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/site/page_list.html">목록</a>
          <a class="btn btn-primary" href="#"
             onclick="return pa(event,'프로토타입: 페이지를 등록합니다. (실제 저장은 동작하지 않습니다)','app.php?p=page/site/page_list.html');">등록</a>
        </div>
        <div class="form-text mt-2">* “등록” 클릭 시 실제 서비스에서는 저장 후 목록으로 이동합니다.</div>

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

간단 소스 편집기