diff --git a/index.html b/index.html
index e907f4b..cd7ea29 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,6 @@
     />
     <meta name="twitter:image" content="/og-image.png" />
     <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>10 Minute Planner</title>
   </head>
   <body class="bg-stone-100">
diff --git a/public/favicon.png b/public/favicon.png
index 81e2412..4899e3c 100644
Binary files a/public/favicon.png and b/public/favicon.png differ
diff --git a/public/favicon.svg b/public/favicon.svg
deleted file mode 100644
index ec53be1..0000000
--- a/public/favicon.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="10 Minute Planner">
-  <rect width="64" height="64" rx="14" fill="#f5f2eb"/>
-  <rect x="15" y="9" width="34" height="46" rx="3" fill="#fffaf1" stroke="#3f3a34" stroke-width="2"/>
-  <path d="M22 20h20M22 29h20M22 38h20" stroke="#8c7b6a" stroke-width="2" stroke-linecap="round"/>
-  <path d="M18 9v46" stroke="#c74b3f" stroke-width="3" stroke-linecap="round"/>
-  <text x="32" y="51" fill="#3f3a34" font-family="Arial, sans-serif" font-size="13" font-weight="700" text-anchor="middle">10</text>
-</svg>
diff --git a/public/og-image.png b/public/og-image.png
index cfe0c25..e21f57d 100644
Binary files a/public/og-image.png and b/public/og-image.png differ
diff --git a/src/components/GuideTooltip.vue b/src/components/GuideTooltip.vue
index e7c51e3..4c34af3 100644
--- a/src/components/GuideTooltip.vue
+++ b/src/components/GuideTooltip.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onBeforeUnmount, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
 
 const props = defineProps({
   title: {
@@ -28,18 +28,52 @@ const emit = defineEmits(['dismiss'])
 
 const open = ref(false)
 const rootRef = ref(null)
+const buttonRef = ref(null)
+const popupStyle = ref({})
 const isCompactButtonLabel = computed(() => String(props.buttonLabel || '').trim().length <= 1)
 
 function close() {
   open.value = false
 }
 
-function toggle() {
+function updatePopupPosition() {
+  if (!open.value || !buttonRef.value || typeof window === 'undefined') {
+    return
+  }
+
+  const rect = buttonRef.value.getBoundingClientRect()
+  const viewportWidth = window.innerWidth
+  const preferredWidth = Math.min(256, Math.max(196, viewportWidth - 24))
+  const horizontalPadding = 12
+  let left = rect.left
+
+  if (left + preferredWidth > viewportWidth - horizontalPadding) {
+    left = viewportWidth - preferredWidth - horizontalPadding
+  }
+
+  if (left < horizontalPadding) {
+    left = horizontalPadding
+  }
+
+  popupStyle.value = {
+    left: `${left}px`,
+    top: `${rect.bottom + 8}px`,
+    width: `${preferredWidth}px`,
+    maxWidth: `calc(100vw - ${horizontalPadding * 2}px)`,
+  }
+}
+
+async function toggle() {
   if (!props.visible) {
     return
   }
 
   open.value = !open.value
+
+  if (open.value) {
+    await nextTick()
+    updatePopupPosition()
+  }
 }
 
 function closeFromOutside(event) {
@@ -57,10 +91,14 @@ function dismiss() {
 
 if (typeof window !== 'undefined') {
   window.addEventListener('pointerdown', closeFromOutside)
+  window.addEventListener('resize', updatePopupPosition)
+  window.addEventListener('scroll', updatePopupPosition, true)
 }
 
 onBeforeUnmount(() => {
   window.removeEventListener('pointerdown', closeFromOutside)
+  window.removeEventListener('resize', updatePopupPosition)
+  window.removeEventListener('scroll', updatePopupPosition, true)
 })
 </script>
 
@@ -68,9 +106,10 @@ onBeforeUnmount(() => {
   <span
     v-if="visible"
     ref="rootRef"
-    class="relative inline-flex"
+    class="relative inline-flex print:hidden"
   >
     <button
+      ref="buttonRef"
       type="button"
       class="inline-flex shrink-0 items-center justify-center whitespace-nowrap border border-stone-300 bg-white text-[10px] font-bold text-stone-500 transition hover:border-stone-500 hover:text-stone-900 focus-visible:ring-2 focus-visible:ring-stone-900 focus-visible:ring-offset-2"
       :class="isCompactButtonLabel ? 'h-5 w-5 rounded-full' : 'min-h-[22px] rounded-full px-2 py-1 leading-none'"
@@ -81,21 +120,24 @@ onBeforeUnmount(() => {
       {{ buttonLabel }}
     </button>
 
-    <span
-      v-if="open"
-      class="absolute right-0 top-7 z-50 w-[min(16rem,calc(100vw-2rem))] rounded-2xl border border-stone-200 bg-white p-4 text-left shadow-[0_18px_50px_rgba(28,25,23,0.16)] sm:left-0 sm:right-auto sm:w-64"
-      @pointerdown.stop
-    >
-      <span class="block text-[10px] font-bold uppercase tracking-[0.2em] text-stone-500">{{ title }}</span>
-      <span class="mt-2 block text-[11px] font-semibold leading-5 tracking-[0.04em] text-stone-700">{{ description }}</span>
-      <button
-        v-if="dismissible"
-        type="button"
-        class="mt-3 rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-500 hover:text-stone-900"
-        @click="dismiss"
+    <Teleport to="body">
+      <span
+        v-if="open"
+        class="fixed z-[120] rounded-2xl border border-stone-200 bg-white p-4 text-left shadow-[0_18px_50px_rgba(28,25,23,0.16)] print:hidden"
+        :style="popupStyle"
+        @pointerdown.stop
       >
-        더 이상 보지 않기
-      </button>
-    </span>
+        <span class="block text-[10px] font-bold uppercase tracking-[0.2em] text-stone-500">{{ title }}</span>
+        <span class="mt-2 block break-words text-[11px] font-semibold leading-5 tracking-[0.04em] text-stone-700">{{ description }}</span>
+        <button
+          v-if="dismissible"
+          type="button"
+          class="mt-3 rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-500 hover:text-stone-900"
+          @click="dismiss"
+        >
+          더 이상 보지 않기
+        </button>
+      </span>
+    </Teleport>
   </span>
 </template>
diff --git a/src/components/PlannerPage.vue b/src/components/PlannerPage.vue
index 864c619..b0ad4e2 100644
--- a/src/components/PlannerPage.vue
+++ b/src/components/PlannerPage.vue
@@ -306,7 +306,7 @@ onBeforeUnmount(() => {
     </div>
 
     <div class="planner-sheet__body flex flex-col gap-5 py-[10px] lg:flex-row lg:gap-4">
-      <div class="planner-sheet__lists flex w-full flex-1 flex-col gap-[21px] lg:w-[394px]">
+      <div class="planner-sheet__lists flex w-full flex-1 flex-col gap-[26px] print:gap-[21px] lg:w-[394px]">
         <section>
           <div class="flex items-center gap-2 text-muted">
             <span class="shrink-0">TASKS</span>
@@ -413,16 +413,16 @@ onBeforeUnmount(() => {
         <div v-if="!props.readonly" class="flex items-center gap-2 text-muted">
           <button
             type="button"
-            class="group flex flex-1 items-center gap-2 rounded-full px-1 py-1 text-left transition hover:bg-stone-100/80"
+            class="shrink-0 text-left transition hover:text-ink"
             @click="emit('timetable-action')"
             @contextmenu.prevent="emit('timetable-contextmenu', $event)"
           >
-            <span class="shrink-0 transition-colors group-hover:text-ink">TIME TABLE</span>
-            <span class="h-px flex-1 bg-ink"></span>
+            <span class="shrink-0">TIME TABLE</span>
           </button>
+          <span class="h-px flex-1 bg-ink"></span>
           <GuideTooltip
             title="Time Table"
-            description="왼쪽 클릭으로 현재 날짜 타임테이블을 복사하고, 오른쪽 클릭 메뉴에서 현재 날짜에 붙여넣을 수 있습니다."
+            description="먼저 원하는 날짜의 TIME TABLE 제목을 클릭해 타임테이블을 저장하세요. 그다음 붙여넣을 날짜로 이동해서 TIME TABLE 제목을 마우스 오른쪽 클릭하면 손쉽게 같은 내용을 붙여넣을 수 있습니다."
             :dismissible="false"
           />
         </div>
