feat: 2x2 그리드 레이아웃 적용

templates/medication_guide_v2.html

@@ -68,11 +68,17 @@
             color: #666;
         }
         
+        /* 약품 카드 그리드 */
+        .drug-cards-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 3mm;
+        }
+        
         /* 약품 카드 공통 */
         .drug-card {
             border: 1px solid #E0E0E0;
-            border-radius: 3mm;
-            margin-bottom: 4mm;
+            border-radius: 2mm;
             overflow: hidden;
             page-break-inside: avoid;
         }
@@ -80,21 +86,21 @@
         .drug-card-header {
             background: linear-gradient(135deg, #1565C0, #42A5F5);
             color: white;
-            padding: 3mm;
+            padding: 2mm;
             display: flex;
             align-items: center;
-            gap: 3mm;
+            gap: 2mm;
         }
         
         .drug-icon {
-            width: 12mm;
-            height: 12mm;
+            width: 8mm;
+            height: 8mm;
             background: white;
-            border-radius: 2mm;
+            border-radius: 1.5mm;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 18pt;
+            font-size: 12pt;
         }
         
         .drug-title-area {
@@ -102,30 +108,32 @@
         }
         
         .drug-name {
-            font-size: 12pt;
+            font-size: 9pt;
             font-weight: 700;
         }
         
         .drug-subtitle {
-            font-size: 7pt;
+            font-size: 5pt;
             opacity: 0.9;
         }
         
         .drug-badges {
             display: flex;
-            gap: 1mm;
-            margin-top: 1mm;
+            gap: 0.5mm;
+            margin-top: 0.5mm;
+            flex-wrap: wrap;
         }
         
         .badge {
             background: rgba(255,255,255,0.2);
-            padding: 0.5mm 2mm;
-            border-radius: 1mm;
-            font-size: 6pt;
+            padding: 0.3mm 1mm;
+            border-radius: 0.5mm;
+            font-size: 5pt;
         }
         
         .drug-card-body {
-            padding: 3mm;
+            padding: 2mm;
+            font-size: 6pt;
         }
         
         /* 구충제 전용 - 커버리지 표 */
@@ -383,7 +391,8 @@
             </div>
         </div>
         
-        <!-- 약품 카드들 -->
+        <!-- 약품 카드들 (2x2 그리드) -->
+        <div class="drug-cards-grid">
         {% for drug in drugs %}
         <div class="drug-card">
             <div class="drug-card-header">
@@ -557,6 +566,7 @@
             </div>
         </div>
         {% endfor %}
+        </div>
         
         <!-- 푸터 -->
         <div class="footer">