diff --git a/public/css/base.css b/public/css/base.css
index 525e3a8..10812e6 100644
--- a/public/css/base.css
+++ b/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 로 이동(로드 순서상 마지막이어야 실제 적용됨). */
diff --git a/public/css/responsive.css b/public/css/responsive.css
new file mode 100644
index 0000000..fc6c385
--- /dev/null
+++ b/public/css/responsive.css
@@ -0,0 +1,59 @@
+/* 반응형(모바일) — 데스크톱 규칙을 덮어써야 하므로 반드시 다른 CSS 이후 마지막에 로드한다.
+ (_header.ejs 의 순서가 바뀌면 미디어쿼리가 무력화됨. 특히 헤더 검색창 재노출이 로드 순서에 의존.)
+ 데스크톱(>640px 등)은 아래 규칙이 적용되지 않아 기존과 완전히 동일하다. */
+
+/* ===================== 그리드 단계 축소 ===================== */
+/* (기존 base.css 에 있었으나 로드 순서 때문에 무력했던 규칙 — 여기로 옮겨 실제 작동) */
+@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; }
+}
+
+/* ===================== 모바일 레이아웃 · 터치 다듬기 ===================== */
+@media (max-width: 640px) {
+ /* 헤더: 고정 높이 해제 → 줄바꿈 허용. 검색창은 둘째 줄 전체 폭으로. */
+ .hdr-inner { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 16px; row-gap: 8px; }
+ .brand { flex: 1 1 auto; min-width: 0; }
+ .hdr-right { margin-left: auto; } /* 브랜드와 같은 첫 줄, 우측 정렬 유지 */
+ .hdr-search { display: flex; order: 10; flex-basis: 100%; max-width: none; } /* base 의 display:none 을 로드순서로 이김 → 둘째 줄 */
+
+ /* 터치 영역 ≥44px */
+ .icon-btn, .modal-close { width: 44px; height: 44px; }
+ .hdr-link, .usermenu-btn { min-height: 44px; }
+ .profile-bio-edit { width: 40px; height: 40px; } /* 배지형이라 44는 과함 */
+ .profile-avatar-edit { width: 36px; height: 36px; }
+ .filter-tab, .sort-tab, .vis-opt, .react-btn, .readme-btn,
+ .toggle-share-btn, .share-mini-btn, .new-proj-btn, .feed-star-btn,
+ .comment-link, .modal-action, .btn { min-height: 44px; }
+
+ /* 크롭 스테이지 정사각 유지(profile.js 의 clientWidth==clientHeight 가정 충족) */
+ .crop-stage { width: 100%; height: auto; aspect-ratio: 1 / 1; }
+
+ /* 입력창 16px — iOS 포커스 시 자동확대 방지 */
+ .hdr-search input, .share-input, .share-input.mono,
+ .comment-input, .profile-bio-form input { font-size: 16px; }
+
+ /* 좌우 여백 축소 (24px → 16px) */
+ .main { padding: 20px 16px 48px; }
+ .detail-wrap { padding: 20px 16px 48px; } /* project.ejs 단독 상세 */
+ .footer-inner { padding: 16px; }
+
+ /* 줄바꿈 / 프로필 히어로 세로 스택 */
+ .section-head, .feed-head, .feed-head-right { flex-wrap: wrap; }
+ .profile-hero { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
+ .profile-idline, .profile-metaline, .profile-bio-row, .profile-bio-form { justify-content: center; }
+
+ /* 모달 여백 축소 */
+ .modal-overlay { padding: 16px 12px; }
+ .modal-head { padding: 16px 16px 14px; }
+ .modal-body { padding: 14px 16px 4px; }
+ .modal-foot { padding: 12px 16px 18px; }
+ .modal-foot-actions{ padding: 12px 16px; }
+ .share-head, .share-body, .crop-body { padding: 16px; }
+ .crop-head { padding: 14px 16px; }
+}
diff --git a/views/_header.ejs b/views/_header.ejs
index 515ab7f..d7597d2 100644
--- a/views/_header.ejs
+++ b/views/_header.ejs
@@ -12,6 +12,8 @@
+
+