feat: PAAI 피드백 루프 시스템 구현 (1-2단계)

- paai_feedback.py: 피드백 API + SQLite 저장
- PMR 화면: 👎 클릭 시 코멘트 입력 모달
- 카테고리: 약물상호작용/적응증/용법용량/기타
- 피드백 규칙 자동 정제 (기본 버전)

docs/세로모니터_레이아웃_개선_계획.md

@@ -0,0 +1,170 @@
+# PMR 세로 모니터 레이아웃 개선 계획
+
+## 현재 상황
+
+### 환경
+- 모니터: 2.5K (2560x1440) 세로 모드 → 1440x2560
+- 문제: 환자목록과 처방전 내용이 **거의 절반씩** 차지
+- 환자목록은 그렇게 넓을 필요 없음
+
+### 현재 CSS 구조
+```css
+.main-content {
+    display: flex;
+    gap: 20px;
+}
+.patient-list {
+    width: 380px;  /* 고정 너비 */
+}
+.prescription-panel {
+    flex: 1;       /* 나머지 공간 */
+}
+```
+
+### 세로 모니터에서의 문제
+- 화면 너비: 1440px
+- 환자목록: 380px (26%)
+- 처방전: ~1040px (72%)
+- **실제로는 환자목록이 26%인데 "절반처럼" 느껴짐** → 세로가 길어서 상대적으로 넓어 보임
+
+---
+
+## 해결 방안 비교
+
+### 방안 1: 미디어쿼리 (aspect-ratio)
+```css
+/* 세로 모니터 감지 (높이 > 너비) */
+@media (orientation: portrait) {
+    .patient-list {
+        width: 280px;  /* 더 좁게 */
+    }
+}
+```
+
+**장점:**
+- 간단, 직관적
+- 기존 코드 영향 최소화
+
+**단점:**
+- 세로 모니터 전용 스타일 분기 필요
+
+---
+
+### 방안 2: CSS Container Queries
+```css
+.main-content {
+    container-type: inline-size;
+}
+@container (max-width: 1500px) {
+    .patient-list {
+        width: 280px;
+    }
+}
+```
+
+**장점:**
+- 모던한 접근
+- 컨테이너 기준으로 반응
+
+**단점:**
+- 브라우저 지원 확인 필요 (Chrome 105+)
+
+---
+
+### 방안 3: 환자목록 비율 기반 (추천 ⭐)
+```css
+.patient-list {
+    width: 280px;
+    min-width: 250px;
+    max-width: 380px;
+}
+```
+
+또는:
+```css
+.patient-list {
+    width: clamp(250px, 20vw, 380px);
+}
+```
+
+**장점:**
+- 미디어쿼리 없이 자동 조절
+- 모든 화면에서 적절한 비율 유지
+- **가장 단순함**
+
+**단점:**
+- 특정 breakpoint 세밀 조정 어려움
+
+---
+
+### 방안 4: 세로 모니터 전용 레이아웃
+```css
+@media (orientation: portrait) and (min-height: 1800px) {
+    .main-content {
+        flex-direction: column;
+    }
+    .patient-list {
+        width: 100%;
+        height: 200px;  /* 상단 고정 */
+    }
+}
+```
+
+**장점:**
+- 세로 모니터 최적화
+
+**단점:**
+- 레이아웃 완전 변경 → 복잡
+- UX 변화 큼
+
+---
+
+## 추천 방안: **방안 3 + 방안 1 조합**
+
+### 구현
+```css
+/* 기본: 비율 기반 너비 */
+.patient-list {
+    width: clamp(250px, 22vw, 380px);
+}
+
+/* 세로 모니터에서 더 좁게 */
+@media (orientation: portrait) {
+    .patient-list {
+        width: clamp(220px, 18vw, 300px);
+    }
+}
+```
+
+### 이유
+1. **clamp()**: 최소/최대 범위 내에서 자동 조절
+2. **portrait 미디어쿼리**: 세로 모니터 추가 최적화
+3. **코드 2줄 추가**로 해결 가능
+
+---
+
+## 작업 범위
+
+### 변경 파일
+- `pmr.html` - CSS 수정 (약 5줄)
+
+### 테스트
+- 가로 모니터 (기존 동작 유지)
+- 세로 모니터 (환자목록 좁아짐)
+- 반응형 resize
+
+---
+
+## 예상 결과
+
+| 모드 | 환자목록 너비 | 비율 |
+|------|--------------|------|
+| 가로 (1920px) | ~380px | 20% |
+| 가로 (1440px) | ~320px | 22% |
+| **세로 (1440px)** | **~260px** | **18%** |
+
+---
+
+## 승인 시 진행
+
+약사님 확인 후 바로 구현 가능합니다.