From e332e357b95f2f96fee7e06483f534c53ae8b2b2 Mon Sep 17 00:00:00 2001
From: gm <weimdo_@naver.com>
Date: Fri, 5 Jun 2026 17:25:41 +0900
Subject: [PATCH] =?UTF-8?q?ui:=20per=5Fline=20=EC=A0=84=EC=9A=A9=20UI=20?=
 =?UTF-8?q?=EB=B8=94=EB=A1=9D=20=EB=B6=84=EB=A6=AC=20(=EB=85=B8=EB=93=9C?=
 =?UTF-8?q?=20=EC=84=A4=EC=A0=95=20=EB=82=B4=20=EB=B3=84=EB=8F=84=20?=
 =?UTF-8?q?=EC=84=B9=EC=85=98)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/builder.html | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/ui/builder.html b/ui/builder.html
index 6d04039..5faebfd 100644
--- a/ui/builder.html
+++ b/ui/builder.html
@@ -245,6 +245,13 @@ input,textarea,button,select{font-family:inherit}
 .ftpl-role{font-size:9px;border-radius:3px;padding:1px 5px;font-weight:700;margin-left:2px;letter-spacing:.03em}
 .ftpl-role.collect{background:var(--accent-bg);color:var(--accent)}
 .ftpl-role.fixed{background:var(--surface-alt);color:var(--muted);border:1px solid var(--border)}
+/* per_line 전용 UI */
+.perline-block{display:flex;align-items:center;gap:7px;padding:5px 6px;background:var(--surface-alt);border:1px solid var(--border);border-radius:5px}
+.perline-lbl{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
+.perline-inp{width:72px;font-size:14px;font-weight:600;border:1.5px solid var(--border);border-radius:5px;padding:3px 7px;outline:none;background:var(--surface);text-align:center;color:var(--text)}
+.perline-inp:focus{border-color:var(--border-focus)}
+.perline-inp::placeholder{font-size:10px;font-weight:400;color:var(--muted)}
+.perline-unit{font-size:11px;color:var(--muted)}
 
 /* ── Tab 3: 구조 추출 ────────────────────────── */
 #panel-extractor{flex-direction:column}
@@ -894,7 +901,7 @@ function renderDetail(){
           ${availSet.length?`<select class="add-sel" onchange="addSetting('${node.id}',this.value);this.selectedIndex=0">
             <option value="">＋ 옵션 추가</option>${setOpts}</select>`:''}
         </div>
-        <div class="body-sec-body">${renderStructSettings(node)}${settingItems}</div>
+        <div class="body-sec-body">${renderStructSettings(node)}${renderPerLineSetting(node)}${settingItems}</div>
       </div>
     </div>`;
 }
@@ -967,7 +974,6 @@ function setPerLine(nid, val){
 function renderStructSettings(node){
   const nid=node.id, nl=node.nameNewline??true;
   const col=node.settings?.attributes?.collect==='true';
-  const pl=node.settings?.attributes?.per_line||'';
   return `
     <div class="struct-sep">
       <div class="sep-bar-row">
@@ -980,16 +986,19 @@ function renderStructSettings(node){
         <span class="sep-chip${!col?' on':''}" onclick="setCollect('${nid}',false)" title="값이 항상 고정 출력됩니다">🔒 고정</span>
         <span class="sep-chip${col?' on':''}"  onclick="setCollect('${nid}',true)"  title="합치기 시 값이 수집됩니다">📥 수집</span>
       </div>
-      <div class="sep-bar-row">
-        <span class="sep-bar-lbl">한 줄에</span>
-        <input type="number" min="1" max="99"
-          style="width:52px;font-size:12px;border:1px solid var(--border);border-radius:4px;padding:2px 5px;outline:none;background:var(--surface-alt);text-align:center"
-          value="${esc(pl)}" placeholder="∞"
-          oninput="setPerLine('${nid}',this.value)"
-          onfocus="this.style.borderColor='var(--border-focus)'"
-          onblur="this.style.borderColor='var(--border)'">
-        <span style="font-size:11px;color:var(--muted)">개씩</span>
-      </div>
+    </div>`;
+}
+
+function renderPerLineSetting(node){
+  const nid=node.id;
+  const pl=node.settings?.attributes?.per_line||'';
+  return `
+    <div class="perline-block">
+      <span class="perline-lbl">한 줄에</span>
+      <input class="perline-inp" type="number" min="1" max="999"
+        value="${esc(pl)}" placeholder="∞"
+        oninput="setPerLine('${nid}',this.value)">
+      <span class="perline-unit">개씩 출력</span>
     </div>`;
 }