From 1f2d9ddc54e7ee387778671d372097c0e5442955 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 23 Apr 2026 13:39:16 +0900
Subject: [PATCH] =?UTF-8?q?v0.1.44=20-=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 HANDOFF.md                    |  1 +
 src/App.vue                   | 50 +++++++++++++++--------------------
 src/components/AuthDialog.vue | 24 ++++++++---------
 3 files changed, 35 insertions(+), 40 deletions(-)

diff --git a/HANDOFF.md b/HANDOFF.md
index be3602b..45c7baf 100644
--- a/HANDOFF.md
+++ b/HANDOFF.md
@@ -224,6 +224,7 @@
 - Docker Compose는 프론트엔드와 백엔드를 함께 올리는 기준으로 설계하되, NAS 환경에 맞는 볼륨과 재시작 정책도 함께 고려한다.
 - 플래너 본문 라벨은 더 이상 `bg-paper` 배경으로 선을 덮지 않는다. `라벨 + 오른쪽 선` 구조로 바꿔 화면과 인쇄에서 노란 배경이 튀지 않도록 정리했다.
 - 날짜에 적용되는 목표가 새로 생기면 D-DAY는 기본 표시된다. 사용자가 해당 날짜에서 직접 `D-DAY 사용`을 끈 경우에만 로컬 숨김 목록에 저장해 다시 숨긴다.
+- 비로그인 랜딩은 모바일에서 `카드 안 카드`처럼 보이지 않도록 기능 설명 카드를 얇은 리스트로 단순화했고, `LOGIN` / `SIGN UP` 버튼은 같은 너비와 높이로 맞췄다. 로그인/회원가입 모달도 하단 전환 영역을 별도 카드 대신 구분선 형태로 정리했다.
 
 ## 갱신 규칙
 
diff --git a/src/App.vue b/src/App.vue
index dfe571a..5a04b14 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2011,51 +2011,45 @@ onBeforeUnmount(() => {
       <div class="min-w-0 space-y-6" :class="isAuthenticated ? 'xl:h-full xl:overflow-hidden' : 'w-full'">
       <section
         v-if="!isAuthenticated"
-        class="scrollbar-hide print-hidden mx-auto w-full max-w-4xl rounded-[28px] border border-white/60 bg-white/65 p-6 shadow-[0_24px_80px_rgba(28,25,23,0.08)] sm:p-8"
+        class="scrollbar-hide print-hidden mx-auto w-full max-w-3xl rounded-[30px] border border-white/70 bg-white/72 px-5 py-7 shadow-[0_24px_80px_rgba(28,25,23,0.08)] sm:px-8 sm:py-9"
       >
-        <div class="mx-auto flex max-w-3xl flex-col gap-6 text-center">
-          <div class="space-y-3">
+        <div class="mx-auto flex max-w-2xl flex-col gap-6 text-center">
+          <div>
             <p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">회원 전용 플래너</p>
-            <h2 class="text-3xl font-semibold tracking-[-0.05em] text-stone-900 sm:text-4xl">
+            <h2 class="mt-3 text-3xl font-semibold tracking-[-0.05em] text-stone-900 sm:text-4xl">
               10 Minute Planner
             </h2>
-            <p class="mx-auto max-w-2xl text-sm leading-7 text-stone-600 sm:text-base">
-              로그인 후 나만의 10분 플래너를 작성하고,<br>날짜별 기록과 통계를 안전하게 이어가세요.
+            <p class="mx-auto mt-3 max-w-xl text-sm leading-7 text-stone-600 sm:text-base">
+              로그인하면 날짜별 플래너, 통계, 목표를 내 계정 기준으로 이어서 사용할 수 있습니다.
             </p>
           </div>
 
-          <div class="grid gap-4 rounded-[28px] border border-stone-200 bg-[#fbf7f0] p-5 text-left">
-            <article class="rounded-2xl border border-stone-200 bg-white px-4 py-5">
-              <p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">ACCOUNT</p>
-              <p class="mt-3 text-sm font-semibold leading-6 text-stone-800">
-                회원가입 후 사용자별 플래너와 통계를 분리해서 관리합니다.
-              </p>
-            </article>
-            <article class="rounded-2xl border border-stone-200 bg-white px-4 py-5">
-              <p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">CLOUD SAVE</p>
-              <p class="mt-3 text-sm font-semibold leading-6 text-stone-800">
-                작성 내용은 날짜별로 서버에 저장되고, 다른 기기에서도 이어볼 수 있습니다.
-              </p>
-            </article>
-            <article class="rounded-2xl border border-stone-200 bg-white px-4 py-5">
-              <p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">PRINT & STATS</p>
-              <p class="mt-3 text-sm font-semibold leading-6 text-stone-800">
-                로그인 기반 데이터로 통계와 출력 흐름을 안정적으로 맞춰갑니다.
-              </p>
-            </article>
+          <div class="mx-auto grid w-full max-w-xl gap-0 border-y border-stone-200 text-left">
+            <p class="flex items-center justify-between gap-4 border-b border-stone-200 py-3 text-sm font-semibold text-stone-700">
+              <span>날짜별 기록 저장</span>
+              <span class="text-[10px] font-bold tracking-[0.18em] text-stone-400">SAVE</span>
+            </p>
+            <p class="flex items-center justify-between gap-4 border-b border-stone-200 py-3 text-sm font-semibold text-stone-700">
+              <span>통계와 목표 관리</span>
+              <span class="text-[10px] font-bold tracking-[0.18em] text-stone-400">STATS</span>
+            </p>
+            <p class="flex items-center justify-between gap-4 py-3 text-sm font-semibold text-stone-700">
+              <span>출력용 다이어리 유지</span>
+              <span class="text-[10px] font-bold tracking-[0.18em] text-stone-400">PRINT</span>
+            </p>
           </div>
 
-          <div class="flex flex-col items-center justify-center gap-3 sm:flex-row">
+          <div class="grid w-full gap-3 sm:mx-auto sm:max-w-md sm:grid-cols-2">
             <button
               type="button"
-              class="rounded-full border border-stone-300 bg-white px-6 py-3 text-xs font-bold tracking-[0.18em] text-stone-700 transition hover:border-stone-500 hover:text-stone-900"
+              class="h-12 w-full rounded-full border border-stone-300 bg-white px-6 text-xs font-bold tracking-[0.18em] text-stone-700 transition hover:border-stone-500 hover:text-stone-900"
               @click="openAuthDialog('login')"
             >
               LOGIN
             </button>
             <button
               type="button"
-              class="rounded-full bg-stone-900 px-6 py-3 text-xs font-bold tracking-[0.18em] text-white transition hover:bg-stone-700"
+              class="h-12 w-full rounded-full border border-stone-900 bg-stone-900 px-6 text-xs font-bold tracking-[0.18em] text-white transition hover:bg-stone-700"
               @click="openAuthDialog('signup')"
             >
               SIGN UP
diff --git a/src/components/AuthDialog.vue b/src/components/AuthDialog.vue
index ba85596..9145469 100644
--- a/src/components/AuthDialog.vue
+++ b/src/components/AuthDialog.vue
@@ -40,17 +40,17 @@ function updateField(field, event) {
 <template>
   <div
     v-if="open"
-    class="fixed inset-0 z-50 flex items-center justify-center bg-stone-900/45 px-4 py-8 backdrop-blur-sm"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-stone-900/45 px-4 py-6 backdrop-blur-sm"
   >
-    <div class="w-full max-w-md rounded-[28px] border border-white/60 bg-[#f6f1e8] p-6 shadow-2xl sm:p-7">
+    <div class="w-full max-w-[420px] rounded-[26px] border border-white/70 bg-[#f7f2ea] p-5 shadow-[0_24px_80px_rgba(28,25,23,0.2)] sm:p-6">
       <div class="flex items-start justify-between gap-4">
-        <div class="space-y-2">
-          <p class="text-[11px] font-bold uppercase tracking-[0.24em] text-stone-500">계정 시작</p>
-          <h2 class="text-2xl font-semibold tracking-[-0.04em] text-stone-900">
+        <div>
+          <p class="text-[10px] font-bold uppercase tracking-[0.24em] text-stone-500">10 Minute Planner</p>
+          <h2 class="mt-2 text-2xl font-semibold tracking-[-0.04em] text-stone-900">
             {{ mode === 'login' ? '로그인' : '회원가입' }}
           </h2>
-          <p class="text-sm leading-6 text-stone-600">
-            {{ mode === 'login' ? '작성하던 플래너를 이어서 기록하세요.' : '나만의 플래너와 통계를 안전하게 보관할 계정을 만듭니다.' }}
+          <p class="mt-2 text-sm leading-6 text-stone-600">
+            {{ mode === 'login' ? '내 플래너를 이어서 열어요.' : '기록을 저장할 계정을 만들어요.' }}
           </p>
         </div>
         <button
@@ -68,7 +68,7 @@ function updateField(field, event) {
           <input
             :value="form.nickname"
             type="text"
-            class="w-full rounded-2xl border border-stone-300 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
+            class="w-full rounded-2xl border border-stone-300 bg-white/90 px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
             placeholder="닉네임을 입력해 주세요."
             @input="updateField('nickname', $event)"
           />
@@ -81,7 +81,7 @@ function updateField(field, event) {
           <input
             :value="form.email"
             :type="mode === 'login' ? 'text' : 'email'"
-            class="w-full rounded-2xl border border-stone-300 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
+            class="w-full rounded-2xl border border-stone-300 bg-white/90 px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
             :placeholder="mode === 'login' ? '이메일 또는 아이디를 입력해 주세요.' : 'you@example.com'"
             @input="updateField('email', $event)"
           />
@@ -92,7 +92,7 @@ function updateField(field, event) {
           <input
             :value="form.password"
             type="password"
-            class="w-full rounded-2xl border border-stone-300 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
+            class="w-full rounded-2xl border border-stone-300 bg-white/90 px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
             placeholder="8자 이상 입력해 주세요."
             @input="updateField('password', $event)"
           />
@@ -114,13 +114,13 @@ function updateField(field, event) {
         </button>
       </form>
 
-      <div class="mt-5 flex items-center justify-between gap-3 rounded-2xl border border-stone-300 bg-white/70 px-4 py-3">
+      <div class="mt-5 flex items-center justify-center gap-2 border-t border-stone-300/70 pt-4">
         <p class="text-sm font-semibold text-stone-600">
           {{ mode === 'login' ? '아직 계정이 없나요?' : '이미 계정이 있나요?' }}
         </p>
         <button
           type="button"
-          class="text-xs font-bold tracking-[0.16em] text-stone-900 underline underline-offset-4"
+          class="text-xs font-bold tracking-[0.14em] text-stone-900 underline underline-offset-4"
           @click="emit('switch-mode', mode === 'login' ? 'signup' : 'login')"
         >
           {{ mode === 'login' ? '회원가입' : '로그인' }}