feat: 홈 일별 캘린더·시세 갱신·게시판 카테고리·약관동의·계좌 마스킹

- 홈: 6월 예산 아래 일별 수입/지출 캘린더(마우스오버/탭 시 내역 목록)
- 투자: 시세 자동조회 버튼/진입 시 갱신, 보유종목 2줄 표기, 평가액 직접입력
- 게시판: 커뮤니티/짠테크 수다방/재테크 팁 분리, 사이드바 영역 구분선
- 회원가입: 이용약관·개인정보 수집 동의(필수 체크)
- 보안: 계좌번호 화면 마스킹(끝 4자리+눈 토글)
- 정기→고정지출, 내역/정기 라디오·sticky 저장, 태그 드래그 정렬
- fix: 모바일웹 새로고침 시 로그인 팝업(restore localStorage 우선)

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

src/views/account/AccountWalletView.vue

@@ -51,6 +51,23 @@ function syncRows() {
 }
 watch([wallets, activeType], syncRows, { immediate: true })
 
+// 탭 선택 — 투자 탭이면 전체 시세를 갱신해 계좌 평가액에 반영
+const refreshingInvest = ref(false)
+async function selectTab(key) {
+  activeType.value = key
+  if (key === 'INVEST' && wallets.value.some((w) => w.type === 'INVEST')) {
+    refreshingInvest.value = true
+    try {
+      await accountApi.refreshAllPrices()
+      await load()
+    } catch {
+      // 시세 갱신 실패는 조용히 무시(기존 값 유지)
+    } finally {
+      refreshingInvest.value = false
+    }
+  }
+}
+
 // ===== 드래그앤드랍 순서 변경 (SortableJS, 터치 지원) =====
 const listEl = ref(null)
 let sortable = null
@@ -128,6 +145,25 @@ function entryDate(v) {
 function won(n) {
   return (n ?? 0).toLocaleString('ko-KR')
 }
+
+// 계좌번호 마스킹: 끝 4자리만 노출(구분자 유지), 눈 버튼으로 전체 보기 토글
+const revealedAccts = ref(new Set())
+function maskAccount(num) {
+  if (!num) return ''
+  const digitCount = (num.match(/\d/g) || []).length
+  if (digitCount <= 4) return num
+  const keep = digitCount - 4
+  let seen = 0
+  return num.replace(/\d/g, (d) => {
+    seen += 1
+    return seen <= keep ? '*' : d
+  })
+}
+function toggleReveal(id) {
+  const s = new Set(revealedAccts.value)
+  s.has(id) ? s.delete(id) : s.add(id)
+  revealedAccts.value = s
+}
 function issuerLabel(t) {
   return t === 'BANK' ? '은행명' : t === 'CARD' ? '카드사' : t === 'INVEST' ? '증권사' : '대출기관'
 }
@@ -272,12 +308,13 @@ onBeforeUnmount(() => sortable?.destroy())
           :key="t.key"
           type="button"
           :class="{ active: activeType === t.key }"
-          @click="activeType = t.key"
+          @click="selectTab(t.key)"
         >{{ t.label }}</button>
       </div>
       <IconBtn class="tab-add" icon="plus" title="추가" variant="primary" @click="openCreate" />
     </div>
 
+    <p v-if="refreshingInvest" class="msg refresh-note">시세 갱신 중…</p>
     <p v-if="error" class="msg error">{{ error }}</p>
     <p v-if="loading" class="msg">불러오는 중...</p>
 
@@ -293,8 +330,16 @@ onBeforeUnmount(() => sortable?.destroy())
             </div>
             <span class="sub">
               {{ w.issuer }}
-              <template v-if="w.type === 'BANK' && w.accountNumber"> · {{ w.accountNumber }}</template>
-              <template v-if="w.type === 'INVEST'"> · 예수금 {{ won(w.deposit) }} · 주식 {{ won(w.stockValue) }}</template>
+              <template v-if="w.type === 'BANK' && w.accountNumber">
+                · {{ revealedAccts.has(w.id) ? w.accountNumber : maskAccount(w.accountNumber) }}
+                <button
+                  type="button" class="acct-eye"
+                  :title="revealedAccts.has(w.id) ? '가리기' : '전체 보기'"
+                  @click.stop="toggleReveal(w.id)"
+                >{{ revealedAccts.has(w.id) ? '🙈' : '👁' }}</button>
+              </template>
+              <template v-if="w.type === 'INVEST' && w.manualValuation"> · 평가액 직접입력</template>
+              <template v-else-if="w.type === 'INVEST'"> · 예수금 {{ won(w.deposit) }} · 주식 {{ won(w.stockValue) }}</template>
             </span>
           </div>
           <div class="balance-wrap">
@@ -314,7 +359,11 @@ onBeforeUnmount(() => sortable?.destroy())
 
         <!-- 드롭다운: 투자는 포트폴리오, 그 외는 계좌별 내역 -->
         <div v-if="expandedId === w.id" class="entry-drop">
-          <InvestPortfolio v-if="w.type === 'INVEST'" :wallet-id="w.id" @changed="load" />
+          <div v-if="w.type === 'INVEST' && w.manualValuation" class="manual-note">
+            <p>평가액을 <b>직접 입력</b>하는 계좌입니다. 종목을 관리하지 않고 입력한 현재 평가액({{ won(w.currentValue) }})을 사용합니다.</p>
+            <p class="manual-sub">평가액을 갱신하려면 위 <b>수정</b>에서 ‘현재 평가액’을 바꾸세요. 종목으로 자동계산하려면 평가액을 비우면 됩니다.</p>
+          </div>
+          <InvestPortfolio v-else-if="w.type === 'INVEST'" :wallet-id="w.id" @changed="load" />
           <template v-else>
           <p v-if="loadingEntries" class="drop-msg">불러오는 중...</p>
           <ul v-else-if="(entriesByWallet[w.id] || []).length" class="drop-list">
@@ -352,9 +401,15 @@ onBeforeUnmount(() => sortable?.destroy())
                 </select>
               </label>
               <label>{{ openingLabel(form.type) }}<input v-model.number="form.openingBalance" type="number" min="0" :disabled="submitting" /></label>
-              <p v-if="form.type === 'INVEST'" class="form-hint">
-                증권계좌 입금은 은행→투자 ‘이체’로 기록하세요. 계좌를 펼치면 <b>종목·매수/매도·현재가</b>를 관리할 수 있고, 평가금액·손익은 자동 계산됩니다.
-              </p>
+              <template v-if="form.type === 'INVEST'">
+                <label>현재 평가액 (직접 입력)
+                  <input v-model.number="form.currentValue" type="number" min="0" placeholder="(선택) 퇴직연금·연금처럼 종목 관리가 어려운 계좌" :disabled="submitting" />
+                </label>
+                <p class="form-hint">
+                  증권계좌 입금은 은행→투자 ‘이체’로 기록하세요. 계좌를 펼치면 <b>종목·매수/매도·현재가</b>를 관리할 수 있고, 평가금액·손익은 자동 계산됩니다.<br />
+                  <b>퇴직연금·연금</b>처럼 종목 단위 관리가 어려우면 위 <b>현재 평가액</b>만 주기적으로 갱신하세요. 입력하면 종목 자동계산 대신 이 값을 평가액으로 사용합니다.
+                </p>
+              </template>
               <label>기준일<input v-model="form.openingDate" type="date" :disabled="submitting" /></label>
 
               <p v-if="formError" class="msg error">{{ formError }}</p>
@@ -505,6 +560,22 @@ button.primary {
   opacity: 0.65;
   padding: 0.5rem 0;
 }
+.refresh-note {
+  font-size: 0.82rem;
+  opacity: 0.6;
+}
+.manual-note {
+  padding: 0.6rem 0.2rem;
+  font-size: 0.85rem;
+}
+.manual-note p {
+  margin: 0 0 0.3rem;
+}
+.manual-note .manual-sub {
+  opacity: 0.6;
+  font-size: 0.78rem;
+  margin: 0;
+}
 .drop-list {
   list-style: none;
 }
@@ -560,6 +631,18 @@ button.primary {
   font-size: 0.82rem;
   opacity: 0.7;
 }
+.acct-eye {
+  border: 0;
+  background: transparent;
+  padding: 0 0.15rem;
+  font-size: 0.78rem;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+}
+.acct-eye:hover {
+  opacity: 1;
+}
 .balance-wrap {
   text-align: right;
   white-space: nowrap;