refactor #558: collapse secondary UI guidance

src/main/resources/templates/permissions.html

@@ -6,7 +6,11 @@
 <main class="container py-4">
   <div class="page-title">
     <h1>권한 관리</h1>
-    <p>VPD policy function이 참조할 사용자, 역할, 행 규칙, 컬럼 원문 허용 규칙을 저장합니다.</p>
+    <p class="context-summary">역할이 어떤 객체의 어느 행과 컬럼을 볼 수 있는지 정의합니다.</p>
+    <details class="explanation-details">
+      <summary>권한 규칙과 VPD의 관계 보기</summary>
+      <p>VPD policy function이 참조할 사용자, 역할, 행 규칙, 컬럼 원문 허용 규칙을 저장합니다. 이 화면에서 만든 규칙이 기본 Filter의 동적 입력이 됩니다.</p>
+    </details>
   </div>
 
   <section th:replace="~{fragments/layout :: architectureStrip('permission')}"></section>
@@ -66,7 +70,10 @@
                              data-group-users=${#strings.listJoin(groupUsersByRole[role.roleId()], '|')}"></option>
           </select>
         </label>
-        <p class="wizard-hint">선택한 역할의 표시 보호 등급 상한(참고)도 preview에 반영됩니다. 행을 볼 수 있는 권한과는 별개입니다.</p>
+        <details class="explanation-details">
+          <summary>역할 선택 기준 보기</summary>
+          <p class="wizard-hint">선택한 역할의 표시 보호 등급 상한(참고)도 preview에 반영됩니다. 행을 볼 수 있는 권한과는 별개입니다.</p>
+        </details>
         <div class="effective-preview">
           <div class="field-block-title">선택 역할 영향도</div>
           <dl>
@@ -105,7 +112,10 @@
             </optgroup>
           </select>
         </label>
-        <p class="wizard-hint">DB 스키마 객체를 선택하면 저장 시 보호 객체가 자동 등록됩니다.</p>
+        <details class="explanation-details">
+          <summary>객체 선택 기준 보기</summary>
+          <p class="wizard-hint">DB 스키마 객체를 선택하면 저장 시 보호 객체가 자동 등록됩니다.</p>
+        </details>
         <div class="effective-preview">
           <div class="field-block-title">선택 객체 컬럼 (표시 보호 참고)</div>
           <dl>
@@ -155,7 +165,10 @@
               <button class="btn btn-outline-secondary" type="button" data-rule-add>추가</button>
             </div>
           </div>
-          <p class="wizard-hint">특정 기술 태그는 기본적으로 <code>TECH_TAG</code> 컬럼을 봅니다. 같은 ALLOW 권한에 태그를 여러 개 추가하면 “태그 A 또는 태그 B”로 조회되고, DENY 태그는 허용 결과에서 제외됩니다. 객체에 TECH_TAG가 없으면 실제 태그 컬럼을 직접 지정하세요.</p>
+          <details class="explanation-details">
+            <summary>행 규칙과 기술 태그 OR 조건 보기</summary>
+            <p class="wizard-hint">특정 기술 태그는 기본적으로 <code>TECH_TAG</code> 컬럼을 봅니다. 같은 ALLOW 권한에 태그를 여러 개 추가하면 “태그 A 또는 태그 B”로 조회되고, DENY 태그는 허용 결과에서 제외됩니다. 객체에 TECH_TAG가 없으면 실제 태그 컬럼을 직접 지정하세요.</p>
+          </details>
         </div>
       </div>
 
@@ -178,7 +191,10 @@
           <input class="form-control" name="visibleColumns" placeholder="예: CONTENTS, SOURCE_URI">
           <span class="selected-column-list" data-selected-visible-columns aria-live="polite"></span>
         </label>
-        <p class="wizard-hint">쉼표로 여러 컬럼을 등록하거나 위 버튼을 여러 번 누르세요. 등록하지 않은 민감 컬럼은 기본 표시 보호를 유지합니다. 행을 볼 수 있는지는 이 목록이 아니라 권한 규칙과 VPD가 결정합니다.</p>
+        <details class="explanation-details">
+          <summary>원문 표시 허용 컬럼 안내 보기</summary>
+          <p class="wizard-hint">쉼표로 여러 컬럼을 등록하거나 위 버튼을 여러 번 누르세요. 등록하지 않은 민감 컬럼은 기본 표시 보호를 유지합니다. 행을 볼 수 있는지는 이 목록이 아니라 권한 규칙과 VPD가 결정합니다.</p>
+        </details>
       </div>
 
       <div class="wizard-panel" data-wizard-step="5">