fix(profile): 한줄 소개 편집을 ✓/✕ 아이콘 버튼으로 변경

텍스트 저장/취소 버튼이 줄바꿈되며 프로필 카드를 밀어버리던 문제 수정. input과 같은 줄에 24px check(저장)/x(취소) 아이콘 버튼 2개 배치. JS의 textContent 토글 제거(아이콘 지워지지 않도록 disabled만).

Co-Authored-By: Claude <noreply@anthropic.com>

public/css/components.css

@@ -171,10 +171,12 @@
 .profile-bio.is-empty { color: var(--fg3); font-style: italic; }
 .profile-bio-edit { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--fg3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
 .profile-bio-edit:hover { color: var(--fg); border-color: var(--fg3); }
-.profile-bio-form { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.profile-bio-save { color: var(--link); border-color: var(--link); }
+.profile-bio-save:hover { background: var(--link); color: #fff; border-color: var(--link); }
+.profile-bio-form { margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
 /* hidden 속성이 켜져 있으면 확실히 숨긴다 (display:flex 가 [hidden] 기본 규칙을 이겨 항상 보이던 버그 방지). */
 .profile-bio-form[hidden] { display: none; }
-.profile-bio-form input { flex: 1 1 240px; min-width: 0; padding: 6px 10px; font-size: 13.5px; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
+.profile-bio-form input { flex: 1 1 auto; min-width: 0; padding: 6px 10px; font-size: 13.5px; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
 .profile-bio-form input:focus { outline: none; border-color: var(--link); }
 
 /* ===================== 프로필 사진 크롭 모달 ===================== */

public/css/responsive.css

@@ -26,6 +26,7 @@
   .icon-btn, .modal-close { width: 44px; height: 44px; }
   .hdr-link, .usermenu-btn { min-height: 44px; }
   .profile-bio-edit    { width: 40px; height: 40px; }   /* 배지형이라 44는 과함 */
+  .profile-bio-form .profile-bio-edit { width: 32px; height: 32px; }  /* 폼 안 check/x 는 인풋과 한 줄 유지 */
   .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,

public/js/profile.js

@@ -28,7 +28,7 @@ function initBio() {
     e.preventDefault();
     const bio = input.value.trim().slice(0, 80);
     const saveBtn = $("#bioSave");
-    if (saveBtn) { saveBtn.disabled = true; saveBtn.textContent = "저장 중…"; }
+    if (saveBtn) saveBtn.disabled = true;
     try {
       const res = await fetch("/profile/bio", {
         method: "POST",
@@ -43,7 +43,7 @@ function initBio() {
     } catch (err) {
       toast("저장에 실패했어요");
     } finally {
-      if (saveBtn) { saveBtn.disabled = false; saveBtn.textContent = "저장"; }
+      if (saveBtn) saveBtn.disabled = false;
     }
   });
 }

views/profile.ejs

@@ -37,8 +37,8 @@
           <% if (isSelf) { %>
             <form class="profile-bio-form" id="bioForm" method="post" action="/profile/bio" hidden>
               <input type="text" name="bio" id="bioInput" maxlength="80" value="<%= profile.bio || "" %>" placeholder="한줄 소개 (최대 80자)" autocomplete="off" />
-              <button type="submit" class="btn btn-success" id="bioSave">저장</button>
+              <button type="submit" class="profile-bio-edit profile-bio-save" id="bioSave" title="저장" aria-label="한줄 소개 저장"><%- icon("check", { size: 14 }) %></button>
-              <button type="button" class="btn" id="bioCancel">취소</button>
+              <button type="button" class="profile-bio-edit" id="bioCancel" title="취소" aria-label="한줄 소개 편집 취소"><%- icon("x", { size: 14 }) %></button>
             </form>
           <% } %>
         <% } %>