diff --git a/HANDOFF.md b/HANDOFF.md
index 40e8351..87a1a63 100644
--- a/HANDOFF.md
+++ b/HANDOFF.md
@@ -183,6 +183,8 @@
 - `CARRYOVER TASK` 선택 모달은 ESC로 닫힌다. 이월 배지의 시작일 안내는 오른쪽 패널 메시지 대신 배지 옆 팝업으로 표시한다.
 - 통계의 `BEST DAY`, `RECENT RECORDS` 기준 설명은 본문 문장 대신 물음표 가이드 팝업으로 제공한다.
 - 운영 링크 미리보기용 title/description/Open Graph/Twitter Card 메타 태그를 추가했다. 루트 PNG 요청이 앞단 프록시에서 403이 나는 환경을 피하기 위해 파비콘은 `/assets/favicon.png`, 링크 카드 이미지는 `/assets/og-image.png` 경로로 제공한다.
+- 모바일 focus 화면에서는 플래너 바깥 래핑 카드의 padding을 제거해 플래너 자체 여백만 남긴다.
+- 모바일 타임테이블은 일반 터치/스크롤 중에는 칠하지 않고, 약 420ms 롱터치가 성립된 뒤에만 드래그 편집을 시작한다.
 
 ## 갱신 규칙
 
diff --git a/TODO.md b/TODO.md
index 7d7ea06..5f9ce23 100644
--- a/TODO.md
+++ b/TODO.md
@@ -34,6 +34,7 @@
 - [x] 달력 상단은 좌우 화살표로 월 이동하는 구조가 더 적합하다.
 - [x] 연도 클릭 시 연도 선택 UI가 열려야 한다.
 - [x] 오늘 날짜로 즉시 돌아가는 버튼이 필요하다.
+- [x] 모바일에서 플래너 래핑 카드 여백을 줄이고 타임테이블은 롱터치 후 드래그로만 편집되게 한다.
 
 ## 3단계: 목표와 회고 기능
 
diff --git a/src/App.vue b/src/App.vue
index c67cb12..0f52eae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2965,8 +2965,8 @@ onBeforeUnmount(() => {
           />
         </Transition>
 
-        <div class="scrollbar-hide print-target border border-white/60 bg-white/45 xl:h-full xl:min-h-0 xl:overflow-y-auto xl:pr-3" :class="isCompactMobile ? 'rounded-[24px] p-3' : 'rounded-[28px] p-4'">
-          <div v-if="isOverlayFocusSidebar" class="mb-4 flex justify-end">
+        <div class="scrollbar-hide print-target border border-white/60 bg-white/45 xl:h-full xl:min-h-0 xl:overflow-y-auto xl:pr-3" :class="isCompactMobile ? 'rounded-[24px] p-2' : 'rounded-[28px] p-4'">
+          <div v-if="isOverlayFocusSidebar" class="mb-3 flex justify-end px-2 sm:px-0">
             <button
               type="button"
               class="rounded-full border border-stone-200 bg-white px-4 py-2 text-[11px] font-bold tracking-[0.16em] text-stone-700 transition hover:border-stone-400 hover:text-ink"
diff --git a/src/components/PlannerPage.vue b/src/components/PlannerPage.vue
index b0ad4e2..073b160 100644
--- a/src/components/PlannerPage.vue
+++ b/src/components/PlannerPage.vue
@@ -70,9 +70,14 @@ const emit = defineEmits([
   'timetable-contextmenu',
 ])
 
+const LONG_PRESS_DELAY_MS = 420
+const TOUCH_MOVE_CANCEL_DISTANCE = 10
+
 let dragState = null
+let timetableTouchTimer = null
 let taskSelectionDrag = null
 const selectedTaskIndexes = ref(new Set())
+const pendingTimetableTouchIndex = ref(null)
 
 function shouldShowTaskPlaceholder(index) {
   return index === 0 && props.tasks.every((task) => !task.title.trim())
@@ -90,6 +95,37 @@ function buildTimedRange(baseTimetable, startIndex, endIndex, nextValue) {
   return nextTimetable
 }
 
+function clearTimetableTouchTimer() {
+  if (timetableTouchTimer) {
+    window.clearTimeout(timetableTouchTimer)
+    timetableTouchTimer = null
+  }
+}
+
+function beginTimetableDrag(index, shouldFill) {
+  dragState = {
+    startIndex: index,
+    baseTimetable: [...props.timetable],
+    nextValue: shouldFill,
+    isActive: true,
+    isTouchPending: false,
+  }
+
+  pendingTimetableTouchIndex.value = null
+  emit('update:timetable', buildTimedRange(dragState.baseTimetable, index, index, dragState.nextValue))
+}
+
+function getTimetableCellIndexAtPoint(clientX, clientY) {
+  const cell = document.elementFromPoint(clientX, clientY)?.closest('[data-timetable-index]')
+  const index = Number(cell?.dataset.timetableIndex)
+
+  return Number.isInteger(index) ? index : null
+}
+
+function getTimetableCellIndexFromPointer(event) {
+  return getTimetableCellIndexAtPoint(event.clientX, event.clientY)
+}
+
 function startTimetableDrag(index, event) {
   if (props.readonly) {
     return
@@ -101,17 +137,41 @@ function startTimetableDrag(index, event) {
 
   const shouldFill = event.button === 2 ? false : !props.timetable[index]
 
-  dragState = {
-    startIndex: index,
-    baseTimetable: [...props.timetable],
-    nextValue: shouldFill,
+  if (event.pointerType === 'touch') {
+    clearTimetableTouchTimer()
+    pendingTimetableTouchIndex.value = index
+    dragState = {
+      startIndex: index,
+      baseTimetable: [...props.timetable],
+      nextValue: shouldFill,
+      isActive: false,
+      isTouchPending: true,
+      touchStartX: event.clientX,
+      touchStartY: event.clientY,
+      pointerId: event.pointerId,
+    }
+
+    event.currentTarget?.setPointerCapture?.(event.pointerId)
+    timetableTouchTimer = window.setTimeout(() => {
+      if (!dragState?.isTouchPending || dragState.pointerId !== event.pointerId) {
+        return
+      }
+
+      dragState.isTouchPending = false
+      dragState.isActive = true
+      pendingTimetableTouchIndex.value = null
+      emit('update:timetable', buildTimedRange(dragState.baseTimetable, index, index, dragState.nextValue))
+    }, LONG_PRESS_DELAY_MS)
+
+    return
   }
 
-  emit('update:timetable', buildTimedRange(dragState.baseTimetable, index, index, dragState.nextValue))
+  event.preventDefault()
+  beginTimetableDrag(index, shouldFill)
 }
 
 function moveTimetableDrag(index) {
-  if (props.readonly || !dragState) {
+  if (props.readonly || !dragState?.isActive) {
     return
   }
 
@@ -121,7 +181,75 @@ function moveTimetableDrag(index) {
   )
 }
 
+function moveTimetableDragFromPointer(event) {
+  if (props.readonly || !dragState) {
+    return
+  }
+
+  if (dragState.isTouchPending) {
+    const movedX = Math.abs(event.clientX - dragState.touchStartX)
+    const movedY = Math.abs(event.clientY - dragState.touchStartY)
+
+    if (movedX > TOUCH_MOVE_CANCEL_DISTANCE || movedY > TOUCH_MOVE_CANCEL_DISTANCE) {
+      stopTimetableDrag()
+    }
+
+    return
+  }
+
+  if (!dragState.isActive) {
+    return
+  }
+
+  if (event.pointerType === 'touch') {
+    event.preventDefault()
+  }
+
+  const index = getTimetableCellIndexFromPointer(event)
+
+  if (index !== null) {
+    moveTimetableDrag(index)
+  }
+}
+
+function moveTimetableDragFromTouch(event) {
+  if (props.readonly || !dragState) {
+    return
+  }
+
+  const touch = event.touches[0]
+
+  if (!touch) {
+    return
+  }
+
+  if (dragState.isTouchPending) {
+    const movedX = Math.abs(touch.clientX - dragState.touchStartX)
+    const movedY = Math.abs(touch.clientY - dragState.touchStartY)
+
+    if (movedX > TOUCH_MOVE_CANCEL_DISTANCE || movedY > TOUCH_MOVE_CANCEL_DISTANCE) {
+      stopTimetableDrag()
+    }
+
+    return
+  }
+
+  if (!dragState.isActive) {
+    return
+  }
+
+  event.preventDefault()
+
+  const index = getTimetableCellIndexAtPoint(touch.clientX, touch.clientY)
+
+  if (index !== null) {
+    moveTimetableDrag(index)
+  }
+}
+
 function stopTimetableDrag() {
+  clearTimetableTouchTimer()
+  pendingTimetableTouchIndex.value = null
   dragState = null
 }
 
@@ -232,12 +360,22 @@ function clearSelectedTasks(event) {
   clearTaskSelection()
 }
 
+window.addEventListener('pointermove', moveTimetableDragFromPointer)
 window.addEventListener('pointerup', stopTimetableDrag)
+window.addEventListener('pointercancel', stopTimetableDrag)
+window.addEventListener('touchmove', moveTimetableDragFromTouch, { passive: false })
+window.addEventListener('touchend', stopTimetableDrag)
+window.addEventListener('touchcancel', stopTimetableDrag)
 window.addEventListener('pointermove', moveTaskSelectionFromPointer)
 window.addEventListener('pointerup', stopTaskSelection)
 window.addEventListener('keydown', clearSelectedTasks)
 onBeforeUnmount(() => {
+  window.removeEventListener('pointermove', moveTimetableDragFromPointer)
   window.removeEventListener('pointerup', stopTimetableDrag)
+  window.removeEventListener('pointercancel', stopTimetableDrag)
+  window.removeEventListener('touchmove', moveTimetableDragFromTouch)
+  window.removeEventListener('touchend', stopTimetableDrag)
+  window.removeEventListener('touchcancel', stopTimetableDrag)
   window.removeEventListener('pointermove', moveTaskSelectionFromPointer)
   window.removeEventListener('pointerup', stopTaskSelection)
   window.removeEventListener('keydown', clearSelectedTasks)
@@ -447,10 +585,14 @@ onBeforeUnmount(() => {
               <div
                 v-for="quarter in 6"
                 :key="quarter"
-                :class="props.timetable[index * 6 + quarter - 1] ? 'bg-stone-800/90' : 'bg-transparent'"
-                class="h-full cursor-crosshair border-r border-dashed border-line transition-colors last:border-r-0 touch-none select-none"
+                :data-timetable-index="index * 6 + quarter - 1"
+                :class="[
+                  props.timetable[index * 6 + quarter - 1] ? 'bg-stone-800/90' : 'bg-transparent',
+                  pendingTimetableTouchIndex === index * 6 + quarter - 1 ? 'ring-1 ring-inset ring-stone-500/70' : '',
+                ]"
+                class="h-full cursor-crosshair touch-pan-y select-none border-r border-dashed border-line transition-colors last:border-r-0"
                 @contextmenu.prevent
-                @pointerdown.prevent="startTimetableDrag(index * 6 + quarter - 1, $event)"
+                @pointerdown="startTimetableDrag(index * 6 + quarter - 1, $event)"
                 @pointerenter="moveTimetableDrag(index * 6 + quarter - 1)"
               />
             </div>