feat(responsive): 모바일 대응 — 데스크톱 유지, 반응형 CSS 마지막 로드로 분리

문제: 기존 반응형 @media 가 base.css(2번째 로드)에 있어, 뒤에 로드되는
components/layout 규칙에 덮여 사실상 무력했음(폰에서 그리드가 안 접힘).

- public/css/responsive.css 신설, _header 에서 맨 마지막에 <link>
  → 미디어쿼리가 데스크톱 규칙을 !important 없이 정상 override
- base.css 의 죽은 반응형 블록 제거(responsive.css 로 이관)
- @media 640: 헤더 flex-wrap(검색창 둘째 줄 전체폭·숨김 해제),
  탭 영역 44px, 크롭 스테이지 aspect-ratio 정사각, 입력 16px(iOS 확대 방지),
  좌우 여백/모달 여백 축소, 프로필 히어로 세로 스택
- 데스크톱(>640)은 규칙 미적용 → 기존과 픽셀 동일

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

views/_header.ejs

@@ -12,6 +12,8 @@
   <link rel="stylesheet" href="/public/css/layout.css" />
   <link rel="stylesheet" href="/public/css/components.css" />
   <link rel="stylesheet" href="/public/css/modal.css" />
+  <!-- 반응형(모바일) — 데스크톱 규칙을 덮어써야 하므로 반드시 맨 마지막에 로드. 순서 바꾸지 말 것. -->
+  <link rel="stylesheet" href="/public/css/responsive.css" />
   <script>
     // FOUC 방지: 저장된 테마를 페인트 전에 documentElement 에 적용
     (function () {