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>

public/css/base.css

@@ -56,14 +56,4 @@ svg { display: block; }
 @keyframes aidev-fade { from{opacity:0} to{opacity:1} }
 @keyframes aidev-toast { 0%{transform:translateX(-50%) translateY(12px);opacity:0} 12%{transform:translateX(-50%) translateY(0);opacity:1} 88%{transform:translateX(-50%) translateY(0);opacity:1} 100%{transform:translateX(-50%) translateY(8px);opacity:0} }
 
-/* 반응형 */
-@media (max-width: 900px) {
-  .tools-grid { grid-template-columns: repeat(2, 1fr); }
-  .myproj-grid { grid-template-columns: repeat(2, 1fr); }
-  .feed-grid { grid-template-columns: 1fr; }
-  .brand-sub { display: none; }
-}
-@media (max-width: 560px) {
-  .tools-grid, .myproj-grid { grid-template-columns: 1fr; }
-  .hdr-search { display: none; }
-}
+/* 반응형 규칙은 public/css/responsive.css 로 이동(로드 순서상 마지막이어야 실제 적용됨). */