feat: 문서 구조 변경 및 tech-visual 스킬 추가

docs/n+1liner/final/assets/tech-log-studio/in-memory-paging.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="290" viewBox="0 0 700 290" role="img" aria-labelledby="diagram-title diagram-description">
+<title id="diagram-title">컬렉션 fetch join에 페이징을 걸면 자르는 곳이 DB에서 메모리로 옮겨진다</title>
+<desc id="diagram-description">위쪽은 컬렉션 fetch join에 페이징을 건 경로다. 발행 SQL에 Limit 노드가 없어 조인 결과 전체가 애플리케이션으로 넘어오고, Hibernate가 메모리에서 부모 페이지만 남기고 나머지를 버린다. 아래쪽은 엔티티만 페이징한 경로다. Limit 노드가 붙어 DB가 페이지만 돌려주므로 애플리케이션은 버릴 것을 받지 않는다. 두 경로의 반환 건수는 같지만 위쪽은 부모 전체를 하이드레이트한다.</desc>
+<defs>
+  <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+    <path d="M 0 0 L 10 5 L 0 10 z" />
+  </marker>
+  <pattern id="hatch" width="7" height="7" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
+    <line x1="0" y1="0" x2="0" y2="7" stroke="#9ca3af" stroke-width="3" />
+  </pattern>
+  <style>
+    :root { color-scheme: light; }
+    text { font-family: Inter, Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; fill: #111827; }
+    .canvas { fill: #ffffff; }
+    .group-box { fill: #ffffff; stroke: #9ca3af; stroke-width: 1.4; stroke-dasharray: 7 5; }
+    .group-label-bg { fill: #ffffff; }
+    .group-label { font-size: 13px; font-weight: 650; fill: #374151; }
+    .edge { fill: none; stroke: #374151; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; marker-end: url(#arrow); }
+    .edge.dashed { stroke-dasharray: 7 5; }
+    .edge.primary { stroke: #2563eb; stroke-width: 2.2; }
+    .edge.muted { stroke: #9ca3af; }
+    .node { fill: #ffffff; stroke: #4b5563; stroke-width: 1.7; }
+    .node.primary { stroke: #2563eb; stroke-width: 2.4; }
+    .node.muted { stroke: #9ca3af; fill: #f9fafb; }
+    .node.marked { stroke: #4b5563; stroke-width: 2.4; stroke-dasharray: 5 4; }
+    .label { font-size: 14px; font-weight: 650; text-anchor: middle; }
+    .fill-kept { fill: #2563eb; stroke: none; }
+    .fill-drop { fill: url(#hatch); stroke: #9ca3af; stroke-width: 1; }
+    .fill-none { fill: #ffffff; stroke: #d1d5db; stroke-width: 1; }
+  </style>
+</defs>
+<rect class="canvas" width="700" height="290" />
+<rect class="group-box" x="30" y="50" width="640" height="96" rx="9" />
+<rect class="group-label-bg" x="44" y="41" width="166.0" height="18" />
+<text class="group-label" x="50" y="54">컬렉션 fetch join + 페이징</text>
+<rect class="node " x="55" y="74" width="165" height="56" rx="7" />
+<text class="label" x="137.5" y="107.0">조인 결과 전량</text>
+<rect class="node primary" x="275" y="74" width="165" height="56" rx="7" />
+<text class="label" x="357.5" y="107.0">메모리에서 자름</text>
+<rect class="node " x="495" y="74" width="150" height="56" rx="7" />
+<text class="label" x="570.0" y="107.0">페이지</text>
+<polyline class="edge " points="220,102 275,102" />
+<polyline class="edge " points="440,102 495,102" />
+<rect class="group-box" x="30" y="186" width="640" height="96" rx="9" />
+<rect class="group-label-bg" x="44" y="177" width="74.8" height="18" />
+<text class="group-label" x="50" y="190">엔티티만 페이징</text>
+<rect class="node primary" x="55" y="210" width="165" height="56" rx="7" />
+<text class="label" x="137.5" y="243.0">정렬 + Limit</text>
+<rect class="node primary" x="275" y="210" width="165" height="56" rx="7" />
+<text class="label" x="357.5" y="243.0">DB가 자름</text>
+<rect class="node " x="495" y="210" width="150" height="56" rx="7" />
+<text class="label" x="570.0" y="243.0">페이지</text>
+<polyline class="edge primary" points="220,238 275,238" />
+<polyline class="edge primary" points="440,238 495,238" />
+</svg>