From 0dcb8a45d056c082e341c930904d86033734ce8e Mon Sep 17 00:00:00 2001
From: soranjiro <yutayuta540@gmail.com>
Date: Tue, 25 Nov 2025 21:55:48 +0900
Subject: [PATCH 1/3] reafactor[theme-standard-autumn: folder and file

---
 .../standard-autumn/ItineraryView.svelte      |  658 +-------
 .../themes/standard-autumn/StepList.svelte    |   39 +-
 .../components/AddStepForm.svelte             |   99 ++
 .../components/BottomNav.svelte               |  162 ++
 .../standard-autumn/components/Dialog.svelte  |   31 +
 .../components/MemoDialog.svelte              |   53 +
 .../components/PasswordDialog.svelte          |   60 +
 .../components/SettingsMenu.svelte            |  144 ++
 .../components/ShareDialog.svelte             |   59 +
 .../components/WalicaOverlay.svelte           |   28 +
 .../components/icons/index.svelte             |   29 +
 .../src/lib/themes/standard-autumn/config.ts  |   27 +
 .../src/lib/themes/standard-autumn/index.ts   |   35 +-
 .../themes/standard-autumn/styles/base.css    |  131 ++
 .../standard-autumn/styles/carousel.css       |  259 ++++
 .../themes/standard-autumn/styles/dialog.css  |  183 +++
 .../themes/standard-autumn/styles/form.css    |  152 ++
 .../themes/standard-autumn/styles/header.css  |  230 +++
 .../themes/standard-autumn/styles/index.css   |    8 +
 .../lib/themes/standard-autumn/styles/nav.css |  247 +++
 .../standard-autumn/styles/timeline.css       |  244 +++
 .../standard-autumn/styles/variables.css      |   16 +
 .../src/lib/themes/standard-autumn/theme.css  | 1367 -----------------
 .../themes/standard-autumn/utils/markdown.ts  |   10 +
 24 files changed, 2266 insertions(+), 2005 deletions(-)
 create mode 100644 apps/web/src/lib/themes/standard-autumn/components/AddStepForm.svelte
 create mode 100644 apps/web/src/lib/themes/standard-autumn/components/BottomNav.svelte
 create mode 100644 apps/web/src/lib/themes/standard-autumn/components/Dialog.svelte
 create mode 100644 apps/web/src/lib/themes/standard-autumn/components/MemoDialog.svelte
 create mode 100644 apps/web/src/lib/themes/standard-autumn/components/PasswordDialog.svelte
 create mode 100644 apps/web/src/lib/themes/standard-autumn/components/SettingsMenu.svelte
 create mode 100644 apps/web/src/lib/themes/standard-autumn/components/ShareDialog.svelte
 create mode 100644 apps/web/src/lib/themes/standard-autumn/components/WalicaOverlay.svelte
 create mode 100644 apps/web/src/lib/themes/standard-autumn/components/icons/index.svelte
 create mode 100644 apps/web/src/lib/themes/standard-autumn/config.ts
 create mode 100644 apps/web/src/lib/themes/standard-autumn/styles/base.css
 create mode 100644 apps/web/src/lib/themes/standard-autumn/styles/carousel.css
 create mode 100644 apps/web/src/lib/themes/standard-autumn/styles/dialog.css
 create mode 100644 apps/web/src/lib/themes/standard-autumn/styles/form.css
 create mode 100644 apps/web/src/lib/themes/standard-autumn/styles/header.css
 create mode 100644 apps/web/src/lib/themes/standard-autumn/styles/index.css
 create mode 100644 apps/web/src/lib/themes/standard-autumn/styles/nav.css
 create mode 100644 apps/web/src/lib/themes/standard-autumn/styles/timeline.css
 create mode 100644 apps/web/src/lib/themes/standard-autumn/styles/variables.css
 delete mode 100644 apps/web/src/lib/themes/standard-autumn/theme.css
 create mode 100644 apps/web/src/lib/themes/standard-autumn/utils/markdown.ts

diff --git a/apps/web/src/lib/themes/standard-autumn/ItineraryView.svelte b/apps/web/src/lib/themes/standard-autumn/ItineraryView.svelte
index eadac18..ea1025e 100644
--- a/apps/web/src/lib/themes/standard-autumn/ItineraryView.svelte
+++ b/apps/web/src/lib/themes/standard-autumn/ItineraryView.svelte
@@ -1,13 +1,19 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import type { Itinerary, Step } from "@tabitabi/types";
   import { getAvailableThemes } from "$lib/themes";
   import { auth } from "$lib/auth";
   import { authApi } from "$lib/api/auth";
   import { onMount } from "svelte";
   import StepList from "./StepList.svelte";
-  import { marked } from "marked";
-  import "./theme.css";
+  import AddStepForm from "./components/AddStepForm.svelte";
+  import BottomNav from "./components/BottomNav.svelte";
+  import MemoDialog from "./components/MemoDialog.svelte";
+  import PasswordDialog from "./components/PasswordDialog.svelte";
+  import ShareDialog from "./components/ShareDialog.svelte";
+  import WalicaOverlay from "./components/WalicaOverlay.svelte";
+  import { LinkIcon } from "./components/icons/index.svelte";
+  import { renderMarkdown } from "./utils/markdown";
+  import "./styles/index.css";
 
   interface Props {
     itinerary: Itinerary;
@@ -61,19 +67,13 @@
   let hasEditPermission = $state(false);
   let showPasswordDialog = $state(false);
   let showMemoDialog = $state(false);
-  let editedMemo = $state(itinerary.memo || "");
-  let password = $state("");
   let isAuthenticating = $state(false);
 
-  let showThemeSelect = $state(false);
-  let showSettingsMenu = $state(false);
   let selectedThemeId = $state(itinerary.theme_id || "standard-autumn");
-
   let secretModeEnabled = $state(itinerary.secret_settings?.enabled ?? false);
   let secretModeOffset = $state(
     itinerary.secret_settings?.offset_minutes ?? 60,
   );
-
   let walicaUrl = $state(
     itinerary.walica_id ? `https://walica.jp/group/${itinerary.walica_id}` : "",
   );
@@ -90,18 +90,6 @@
   let newStepMinute = $state("00");
   let focusedDate = $state<string | null>(null);
 
-  $effect(() => {
-    newStep.time = `${newStepHour}:${newStepMinute}`;
-  });
-
-  function getFocusedDate(): string | null {
-    return focusedDate;
-  }
-
-  function setFocusedDate(date: string | null) {
-    focusedDate = date;
-  }
-
   function openAddStepForm() {
     isAddingStep = true;
     if (focusedDate) {
@@ -118,7 +106,6 @@
     }
     hasEditPermission = auth.hasEditPermission(itinerary.id);
 
-    // Auto-activate edit mode if no password and no token yet
     if (!hasEditPermission && !itinerary.password) {
       attemptEditModeActivation();
     }
@@ -126,7 +113,7 @@
     auth.updateAccessTime(itinerary.id, itinerary.title);
   });
 
-  async function handlePasswordAuth() {
+  async function handlePasswordAuth(password: string) {
     if (!password.trim()) {
       alert("パスワードを入力してください");
       return;
@@ -141,8 +128,6 @@
       auth.setToken(itinerary.id, itinerary.title, token);
       hasEditPermission = true;
       showPasswordDialog = false;
-      showSettingsMenu = false;
-      password = "";
     } catch (error) {
       alert("パスワードが正しくありません");
     } finally {
@@ -153,7 +138,6 @@
   function handleEditModeToggle() {
     if (hasEditPermission) {
       hasEditPermission = false;
-      showSettingsMenu = false;
     } else {
       attemptEditModeActivation();
     }
@@ -166,18 +150,15 @@
       const isValid = await authApi.verifyToken(itinerary.id);
       if (isValid) {
         hasEditPermission = true;
-        showSettingsMenu = false;
         return;
       }
     }
 
-    // パスワードが設定されていない場合は、空パスワードで認証してトークンを取得
     if (!itinerary.password) {
       try {
         const token = await authApi.authenticateWithPassword(itinerary.id, "");
         auth.setToken(itinerary.id, itinerary.title, token);
         hasEditPermission = true;
-        showSettingsMenu = false;
       } catch (e) {
         console.error("Failed to authenticate without password", e);
         alert("認証に失敗しました");
@@ -186,12 +167,11 @@
     }
 
     showPasswordDialog = true;
-    showSettingsMenu = false;
   }
 
-  async function handleMemoUpdate() {
+  async function handleMemoUpdate(memo: string) {
     if (onUpdateItinerary) {
-      await onUpdateItinerary({ memo: editedMemo.trim() });
+      await onUpdateItinerary({ memo });
     }
     showMemoDialog = false;
   }
@@ -278,57 +258,40 @@
     isAddingStep = false;
   }
 
-  async function handleThemeChange(e: Event) {
-    const target = e.target as HTMLSelectElement;
-    const themeId = target.value;
-
+  async function handleThemeChange(themeId: string) {
     if (themeId === itinerary.theme_id) {
-      showThemeSelect = false;
       return;
     }
-
     selectedThemeId = themeId;
-    showThemeSelect = false;
-
     if (onUpdateItinerary) {
       await onUpdateItinerary({ theme_id: themeId });
     }
   }
 
-  async function handleSecretModeUpdate() {
+  async function handleSecretModeUpdate(enabled: boolean, offset: number) {
+    secretModeEnabled = enabled;
+    secretModeOffset = offset;
     if (onUpdateItinerary) {
       await onUpdateItinerary({
         secret_settings: {
-          enabled: secretModeEnabled,
-          offset_minutes: secretModeOffset,
+          enabled,
+          offset_minutes: offset,
         },
       });
     }
   }
 
-  async function handleWalicaUpdate() {
-    // Basic validation for walica.jp domain
-    if (walicaUrl && !walicaUrl.startsWith("https://walica.jp/group/")) {
+  async function handleWalicaUpdate(url: string) {
+    if (url && !url.startsWith("https://walica.jp/group/")) {
       alert("WalicaのURLは https://walica.jp/group/ で始まる必要があります");
       return;
     }
-
-    const walicaId = walicaUrl ? walicaUrl.split("/group/")[1] : null;
-
+    walicaUrl = url;
+    const walicaId = url ? url.split("/group/")[1] : null;
     if (onUpdateItinerary) {
       await onUpdateItinerary({ walica_id: walicaId });
     }
   }
-
-  // Configure marked options
-  marked.setOptions({
-    breaks: true,
-    gfm: true,
-  });
-
-  function renderMarkdown(text: string): string {
-    return marked.parse(text, { async: false }) as string;
-  }
 </script>
 
 <div class="standard-autumn-theme">
@@ -341,23 +304,7 @@
         aria-label="共有リンクをコピー"
         title="リンクをコピー"
       >
-        <!-- Link Icon -->
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-          />
-          <path
-            d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-          />
-        </svg>
+        {@html LinkIcon}
       </button>
       {#if showCopyMessage}
         <div class="standard-autumn-copy-msg">コピーしました</div>
@@ -387,11 +334,8 @@
           <div
             class="standard-autumn-memo-display"
             onclick={(e) => {
-              // Don't open edit dialog if clicking a link
               if ((e.target as HTMLElement).closest("a")) return;
-
               if (hasEditPermission) {
-                editedMemo = itinerary.memo || "";
                 showMemoDialog = true;
               }
             }}
@@ -401,7 +345,6 @@
         {:else if hasEditPermission}
           <button
             onclick={() => {
-              editedMemo = "";
               showMemoDialog = true;
             }}
             class="standard-autumn-btn standard-autumn-btn-edit"
@@ -415,79 +358,13 @@
     {#if hasEditPermission}
       <div class="standard-autumn-add-step">
         {#if isAddingStep}
-          <form
-            class="standard-autumn-form"
-            onsubmit={(e) => {
-              e.preventDefault();
-              handleAddStep();
-            }}
-          >
-            <h3 class="standard-autumn-form-title">新しい予定を追加</h3>
-            <div class="standard-autumn-form-grid">
-              <input
-                type="text"
-                bind:value={newStep.title}
-                placeholder="予定のタイトル *"
-                class="standard-autumn-input"
-                required
-              />
-              <div class="standard-autumn-datetime">
-                <input
-                  type="date"
-                  bind:value={newStep.date}
-                  class="standard-autumn-input"
-                  required
-                />
-                <div class="standard-autumn-time-picker">
-                  <select
-                    bind:value={newStepHour}
-                    class="standard-autumn-select-time"
-                    required
-                  >
-                    {#each Array.from( { length: 24 }, (_, i) => String(i).padStart(2, "0"), ) as hour}
-                      <option value={hour}>{hour}</option>
-                    {/each}
-                  </select>
-                  <span class="standard-autumn-time-separator">:</span>
-                  <select
-                    bind:value={newStepMinute}
-                    class="standard-autumn-select-time"
-                    required
-                  >
-                    <option value="00">00</option>
-                    <option value="15">15</option>
-                    <option value="30">30</option>
-                    <option value="45">45</option>
-                  </select>
-                </div>
-              </div>
-              <input
-                type="text"
-                bind:value={newStep.location}
-                placeholder="場所 (任意)"
-                class="standard-autumn-input"
-              />
-              <textarea
-                bind:value={newStep.notes}
-                placeholder="メモ (任意)"
-                class="standard-autumn-textarea"
-                rows="3"
-              ></textarea>
-            </div>
-            <div class="standard-autumn-form-actions">
-              <button
-                type="submit"
-                class="standard-autumn-btn standard-autumn-btn-primary"
-                >追加する</button
-              >
-              <button
-                type="button"
-                onclick={cancelAddStep}
-                class="standard-autumn-btn standard-autumn-btn-secondary"
-                >キャンセル</button
-              >
-            </div>
-          </form>
+          <AddStepForm
+            bind:newStep
+            bind:newStepHour
+            bind:newStepMinute
+            onSubmit={handleAddStep}
+            onCancel={cancelAddStep}
+          />
         {:else}
           <button
             onclick={openAddStepForm}
@@ -506,440 +383,47 @@
       bind:focusedDate
     />
 
-    <nav class="standard-autumn-bottom-nav" aria-label="フッターメニュー">
-      <button
-        class="standard-autumn-bottom-btn"
-        title="ホーム"
-        aria-label="ホーム"
-        onclick={() => goto("/")}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-        </svg>
-        <span>Home</span>
-      </button>
-      <!-- <button
-        class="standard-autumn-bottom-btn"
-        title="カレンダー"
-        aria-label="カレンダー"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path
-            d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
-          />
-        </svg>
-        <span>Calendar</span>
-      </button> -->
-
-      {#if itinerary.walica_id}
-        <button
-          class="standard-autumn-bottom-btn"
-          title="Walica"
-          aria-label="Walica"
-          onclick={() => (showWalica = true)}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-          >
-            <path
-              d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"
-            />
-          </svg>
-          <span>Walica</span>
-        </button>
-      {/if}
-
-      <div class="standard-autumn-btn-wrapper">
-        <button
-          class="standard-autumn-bottom-btn"
-          title={hasEditPermission
-            ? "閲覧モードに切り替え"
-            : "編集モードに切り替え"}
-          aria-label={hasEditPermission
-            ? "閲覧モードに切り替え"
-            : "編集モードに切り替え"}
-          onclick={handleEditModeToggle}
-        >
-          {#if hasEditPermission}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path
-                d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
-              />
-            </svg>
-            <span>View</span>
-          {:else}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path
-                d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-              />
-            </svg>
-            <span>Edit</span>
-          {/if}
-        </button>
-      </div>
-      {#if hasEditPermission}
-        <div class="standard-autumn-btn-wrapper">
-          <button
-            class="standard-autumn-bottom-btn"
-            title="設定"
-            aria-label="設定"
-            onclick={() => {
-              showSettingsMenu = !showSettingsMenu;
-              showThemeSelect = false;
-            }}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path
-                d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"
-              />
-            </svg>
-            <span>Settings</span>
-          </button>
-          {#if showSettingsMenu}
-            <div class="standard-autumn-settings-menu">
-              <button
-                onclick={() => {
-                  showThemeSelect = true;
-                  showSettingsMenu = false;
-                }}
-                class="standard-autumn-settings-item"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  width="20"
-                  height="20"
-                >
-                  <path
-                    d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
-                  />
-                </svg>
-                テーマを変更
-              </button>
-
-              <div class="standard-autumn-settings-divider"></div>
-
-              <div class="standard-autumn-settings-group">
-                <label class="standard-autumn-settings-toggle">
-                  <span class="standard-autumn-settings-label-text">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      width="20"
-                      height="20"
-                    >
-                      <path
-                        d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
-                      />
-                    </svg>
-                    シークレットモード
-                  </span>
-                  <input
-                    type="checkbox"
-                    bind:checked={secretModeEnabled}
-                    onchange={handleSecretModeUpdate}
-                    class="standard-autumn-toggle-input"
-                  />
-                  <span class="standard-autumn-toggle-slider"></span>
-                </label>
-
-                {#if secretModeEnabled}
-                  <div class="standard-autumn-settings-subitem">
-                    <span class="standard-autumn-settings-sublabel"
-                      >表示開始:</span
-                    >
-                    <select
-                      bind:value={secretModeOffset}
-                      onchange={handleSecretModeUpdate}
-                      class="standard-autumn-settings-select"
-                    >
-                      <option value={0}>即時</option>
-                      <option value={15}>15分前</option>
-                      <option value={30}>30分前</option>
-                      <option value={60}>1時間前</option>
-                      <option value={120}>2時間前</option>
-                      <option value={180}>3時間前</option>
-                      <option value={300}>5時間前</option>
-                      <option value={720}>12時間前</option>
-                      <option value={1440}>24時間前</option>
-                    </select>
-                  </div>
-                {/if}
-              </div>
-
-              <div class="standard-autumn-settings-divider"></div>
-
-              <div class="standard-autumn-settings-group">
-                <label class="standard-autumn-settings-label">
-                  <span class="standard-autumn-settings-label-text">
-                    Walica URL
-                  </span>
-                  <input
-                    type="text"
-                    bind:value={walicaUrl}
-                    onblur={handleWalicaUpdate}
-                    placeholder="https://walica.jp/group/..."
-                    class="standard-autumn-input standard-autumn-settings-input"
-                  />
-                </label>
-              </div>
-            </div>
-          {/if}
-          {#if showThemeSelect}
-            <div class="standard-autumn-theme-select-popup">
-              <label
-                for="theme-select"
-                class="standard-autumn-theme-select-label">テーマを選択</label
-              >
-              <select
-                id="theme-select"
-                value={selectedThemeId}
-                onchange={handleThemeChange}
-                class="standard-autumn-theme-select-input"
-              >
-                {#each themes as theme}
-                  <option value={theme.id}>{theme.name}</option>
-                {/each}
-              </select>
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </nav>
+    <BottomNav
+      {hasEditPermission}
+      walicaId={itinerary.walica_id}
+      {themes}
+      {selectedThemeId}
+      {secretModeEnabled}
+      {secretModeOffset}
+      {walicaUrl}
+      onEditModeToggle={handleEditModeToggle}
+      onThemeChange={handleThemeChange}
+      onSecretModeChange={handleSecretModeUpdate}
+      onWalicaUpdate={handleWalicaUpdate}
+      onWalicaOpen={() => (showWalica = true)}
+    />
   </div>
 
-  {#if showMemoDialog}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="standard-autumn-dialog-overlay"
-      onclick={() => {
-        showMemoDialog = false;
-        editedMemo = "";
-      }}
-    >
-      <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div class="standard-autumn-dialog" onclick={(e) => e.stopPropagation()}>
-        <h3 class="standard-autumn-dialog-title">メモ</h3>
-        <textarea
-          bind:value={editedMemo}
-          placeholder="メモを入力..."
-          class="standard-autumn-textarea"
-          rows="6"
-          disabled={!hasEditPermission}
-        ></textarea>
-        <div class="standard-autumn-dialog-actions">
-          {#if hasEditPermission}
-            <button
-              onclick={handleMemoUpdate}
-              class="standard-autumn-btn standard-autumn-btn-primary"
-            >
-              保存
-            </button>
-          {/if}
-          <button
-            onclick={() => {
-              showMemoDialog = false;
-              editedMemo = "";
-            }}
-            class="standard-autumn-btn standard-autumn-btn-secondary"
-          >
-            閉じる
-          </button>
-        </div>
-      </div>
-    </div>
-  {/if}
-
-  {#if showPasswordDialog}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="standard-autumn-dialog-overlay"
-      onclick={() => {
-        showPasswordDialog = false;
-        password = "";
-      }}
-    >
-      <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div class="standard-autumn-dialog" onclick={(e) => e.stopPropagation()}>
-        <h3 class="standard-autumn-dialog-title">編集パスワード</h3>
-        <form
-          onsubmit={(e) => {
-            e.preventDefault();
-            handlePasswordAuth();
-          }}
-        >
-          <input
-            type="password"
-            bind:value={password}
-            placeholder="パスワードを入力"
-            class="standard-autumn-input"
-            disabled={isAuthenticating}
-          />
-          <div class="standard-autumn-dialog-actions">
-            <button
-              type="submit"
-              class="standard-autumn-btn standard-autumn-btn-primary"
-              disabled={isAuthenticating}
-            >
-              {isAuthenticating ? "認証中..." : "認証"}
-            </button>
-            <button
-              type="button"
-              onclick={() => {
-                showPasswordDialog = false;
-                password = "";
-              }}
-              class="standard-autumn-btn standard-autumn-btn-secondary"
-              disabled={isAuthenticating}
-            >
-              キャンセル
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  {/if}
-
-  {#if showWalica && itinerary.walica_id}
-    <div class="standard-autumn-walica-overlay">
-      <div class="standard-autumn-walica-header">
-        <button
-          onclick={() => (showWalica = false)}
-          class="standard-autumn-walica-close-btn"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            width="24"
-            height="24"
-          >
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-          閉じる
-        </button>
-        <span class="standard-autumn-walica-title">Walica</span>
-      </div>
-      <iframe
-        src={`https://walica.jp/group/${itinerary.walica_id}`}
-        title="Walica"
-        class="standard-autumn-walica-frame"
-      ></iframe>
-    </div>
-  {/if}
-
-  {#if showShareDialog}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="standard-autumn-dialog-overlay"
-      onclick={() => {
-        showShareDialog = false;
-      }}
-    >
-      <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div class="standard-autumn-dialog" onclick={(e) => e.stopPropagation()}>
-        <h3 class="standard-autumn-dialog-title">リンクを共有</h3>
-        <p class="standard-autumn-dialog-description">
-          どのリンクをコピーしますか?
-        </p>
-        <div class="standard-autumn-share-options">
-          <button
-            onclick={() => copyShareLink(false)}
-            class="standard-autumn-share-option"
-          >
-            <div class="standard-autumn-share-option-icon">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                width="24"
-                height="24"
-              >
-                <path
-                  d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
-                />
-              </svg>
-            </div>
-            <div class="standard-autumn-share-option-content">
-              <div class="standard-autumn-share-option-title">閲覧用リンク</div>
-              <div class="standard-autumn-share-option-desc">
-                閲覧のみ可能なリンクをコピー
-              </div>
-            </div>
-          </button>
-          {#if hasEditPermission}
-            <button
-              onclick={() => copyShareLink(true)}
-              class="standard-autumn-share-option"
-            >
-              <div class="standard-autumn-share-option-icon">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  width="24"
-                  height="24"
-                >
-                  <path
-                    d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                  />
-                </svg>
-              </div>
-              <div class="standard-autumn-share-option-content">
-                <div class="standard-autumn-share-option-title">
-                  編集用リンク
-                </div>
-                <div class="standard-autumn-share-option-desc">
-                  誰でも編集できるリンクをコピー
-                </div>
-              </div>
-            </button>
-          {/if}
-        </div>
-        <button
-          onclick={() => {
-            showShareDialog = false;
-          }}
-          class="standard-autumn-btn standard-autumn-btn-secondary standard-autumn-btn-full"
-        >
-          キャンセル
-        </button>
-      </div>
-    </div>
-  {/if}
+  <MemoDialog
+    show={showMemoDialog}
+    memo={itinerary.memo || ""}
+    {hasEditPermission}
+    onSave={handleMemoUpdate}
+    onClose={() => (showMemoDialog = false)}
+  />
+
+  <PasswordDialog
+    show={showPasswordDialog}
+    {isAuthenticating}
+    onAuth={handlePasswordAuth}
+    onClose={() => (showPasswordDialog = false)}
+  />
+
+  <WalicaOverlay
+    show={showWalica}
+    walicaId={itinerary.walica_id || ""}
+    onClose={() => (showWalica = false)}
+  />
+
+  <ShareDialog
+    show={showShareDialog}
+    {hasEditPermission}
+    onCopyLink={copyShareLink}
+    onClose={() => (showShareDialog = false)}
+  />
 </div>
diff --git a/apps/web/src/lib/themes/standard-autumn/StepList.svelte b/apps/web/src/lib/themes/standard-autumn/StepList.svelte
index bd75441..dc05875 100644
--- a/apps/web/src/lib/themes/standard-autumn/StepList.svelte
+++ b/apps/web/src/lib/themes/standard-autumn/StepList.svelte
@@ -1,6 +1,14 @@
 <script lang="ts">
   import type { Step } from "@tabitabi/types";
-  import { marked } from "marked";
+  import { renderMarkdown } from "./utils/markdown";
+  import {
+    EditIcon,
+    DeleteIcon,
+    LocationIcon,
+    LockIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+  } from "./components/icons/index.svelte";
 
   interface Props {
     steps: Step[];
@@ -32,7 +40,6 @@
   let editStepHour = $state("09");
   let editStepMinute = $state("00");
 
-  // Carousel management
   let activeIndex = $state(0);
   let trackEl = $state<HTMLDivElement | null>(null);
   let touchStartX = $state<number | null>(null);
@@ -44,7 +51,6 @@
     }
   });
 
-  // Initialize activeIndex to the closest date to today
   $effect(() => {
     const groups = groupedSteps();
     if (groups.length === 0) return;
@@ -66,7 +72,6 @@
     activeIndex = closestIndex;
   });
 
-  // Update focusedDate when activeIndex changes
   $effect(() => {
     const groups = groupedSteps();
     if (groups.length > 0 && groups[activeIndex]) {
@@ -74,7 +79,6 @@
     }
   });
 
-  // Group steps by date
   const groupedSteps = $derived(() => {
     const groups = new Map<string, Step[]>();
     for (const step of steps) {
@@ -96,33 +100,34 @@
     if (i >= total) return total - 1;
     return i;
   }
+
   function goTo(i: number) {
     activeIndex = clampIndex(i);
   }
+
   function next() {
     goTo(activeIndex + 1);
   }
+
   function prev() {
     goTo(activeIndex - 1);
   }
 
   function handleKey(e: KeyboardEvent) {
-    if (e.key === "ArrowRight") {
-      next();
-    }
-    if (e.key === "ArrowLeft") {
-      prev();
-    }
+    if (e.key === "ArrowRight") next();
+    if (e.key === "ArrowLeft") prev();
   }
 
   function onTouchStart(e: TouchEvent) {
     touchStartX = e.touches[0].clientX;
     touchDeltaX = 0;
   }
+
   function onTouchMove(e: TouchEvent) {
     if (touchStartX == null) return;
     touchDeltaX = e.touches[0].clientX - touchStartX;
   }
+
   function onTouchEnd() {
     if (touchStartX == null) return;
     if (touchDeltaX < -50) next();
@@ -131,7 +136,6 @@
     touchDeltaX = 0;
   }
 
-  // Navigate to card on click
   function handleCardClick(index: number) {
     if (index !== activeIndex) {
       goTo(index);
@@ -189,17 +193,6 @@
       await onDeleteStep(stepId);
     }
   }
-
-  // Configure marked for safe rendering
-  marked.setOptions({
-    breaks: true, // Convert line breaks to <br>
-    gfm: true, // Enable GitHub Flavored Markdown
-  });
-
-  // Function to render markdown safely
-  function renderMarkdown(text: string): string {
-    return marked.parse(text, { async: false }) as string;
-  }
 </script>
 
 {#if steps.length === 0}
diff --git a/apps/web/src/lib/themes/standard-autumn/components/AddStepForm.svelte b/apps/web/src/lib/themes/standard-autumn/components/AddStepForm.svelte
new file mode 100644
index 0000000..6db942f
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/components/AddStepForm.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+  interface Props {
+    newStep: {
+      title: string;
+      date: string;
+      time: string;
+      location: string;
+      notes: string;
+    };
+    newStepHour: string;
+    newStepMinute: string;
+    onSubmit: () => void;
+    onCancel: () => void;
+  }
+
+  let {
+    newStep = $bindable(),
+    newStepHour = $bindable(),
+    newStepMinute = $bindable(),
+    onSubmit,
+    onCancel,
+  }: Props = $props();
+
+  $effect(() => {
+    newStep.time = `${newStepHour}:${newStepMinute}`;
+  });
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    onSubmit();
+  }
+</script>
+
+<form class="standard-autumn-form" onsubmit={handleSubmit}>
+  <h3 class="standard-autumn-form-title">新しい予定を追加</h3>
+  <div class="standard-autumn-form-grid">
+    <input
+      type="text"
+      bind:value={newStep.title}
+      placeholder="予定のタイトル *"
+      class="standard-autumn-input"
+      required
+    />
+    <div class="standard-autumn-datetime">
+      <input
+        type="date"
+        bind:value={newStep.date}
+        class="standard-autumn-input"
+        required
+      />
+      <div class="standard-autumn-time-picker">
+        <select
+          bind:value={newStepHour}
+          class="standard-autumn-select-time"
+          required
+        >
+          {#each Array.from( { length: 24 }, (_, i) => String(i).padStart(2, "0"), ) as hour}
+            <option value={hour}>{hour}</option>
+          {/each}
+        </select>
+        <span class="standard-autumn-time-separator">:</span>
+        <select
+          bind:value={newStepMinute}
+          class="standard-autumn-select-time"
+          required
+        >
+          <option value="00">00</option>
+          <option value="15">15</option>
+          <option value="30">30</option>
+          <option value="45">45</option>
+        </select>
+      </div>
+    </div>
+    <input
+      type="text"
+      bind:value={newStep.location}
+      placeholder="場所 (任意)"
+      class="standard-autumn-input"
+    />
+    <textarea
+      bind:value={newStep.notes}
+      placeholder="メモ (任意)"
+      class="standard-autumn-textarea"
+      rows="3"
+    ></textarea>
+  </div>
+  <div class="standard-autumn-form-actions">
+    <button
+      type="submit"
+      class="standard-autumn-btn standard-autumn-btn-primary">追加する</button
+    >
+    <button
+      type="button"
+      onclick={onCancel}
+      class="standard-autumn-btn standard-autumn-btn-secondary"
+      >キャンセル</button
+    >
+  </div>
+</form>
diff --git a/apps/web/src/lib/themes/standard-autumn/components/BottomNav.svelte b/apps/web/src/lib/themes/standard-autumn/components/BottomNav.svelte
new file mode 100644
index 0000000..6931eb1
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/components/BottomNav.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import {
+    HomeIcon,
+    WalicaIcon,
+    ViewIcon,
+    EditIcon,
+    SettingsIcon,
+  } from "./icons/index.svelte";
+  import SettingsMenu from "./SettingsMenu.svelte";
+
+  interface ThemeOption {
+    id: string;
+    name: string;
+    description?: string;
+  }
+
+  interface Props {
+    hasEditPermission: boolean;
+    walicaId?: string | null;
+    themes: ThemeOption[];
+    selectedThemeId: string;
+    secretModeEnabled: boolean;
+    secretModeOffset: number;
+    walicaUrl: string;
+    onEditModeToggle: () => void;
+    onThemeChange: (themeId: string) => void;
+    onSecretModeChange: (enabled: boolean, offset: number) => void;
+    onWalicaUpdate: (url: string) => void;
+    onWalicaOpen: () => void;
+  }
+
+  let {
+    hasEditPermission,
+    walicaId,
+    themes,
+    selectedThemeId,
+    secretModeEnabled,
+    secretModeOffset,
+    walicaUrl,
+    onEditModeToggle,
+    onThemeChange,
+    onSecretModeChange,
+    onWalicaUpdate,
+    onWalicaOpen,
+  }: Props = $props();
+
+  let showSettingsMenu = $state(false);
+  let showThemeSelect = $state(false);
+
+  function handleSettingsClick() {
+    showSettingsMenu = !showSettingsMenu;
+    showThemeSelect = false;
+  }
+
+  function handleShowThemeSelect() {
+    showThemeSelect = true;
+    showSettingsMenu = false;
+  }
+
+  function handleThemeChange(themeId: string) {
+    showThemeSelect = false;
+    onThemeChange(themeId);
+  }
+
+  function handleEditModeToggle() {
+    showSettingsMenu = false;
+    onEditModeToggle();
+  }
+</script>
+
+<nav class="standard-autumn-bottom-nav" aria-label="フッターメニュー">
+  <button
+    class="standard-autumn-bottom-btn"
+    title="ホーム"
+    aria-label="ホーム"
+    onclick={() => goto("/")}
+  >
+    {@html HomeIcon}
+    <span>Home</span>
+  </button>
+
+  {#if walicaId}
+    <button
+      class="standard-autumn-bottom-btn"
+      title="Walica"
+      aria-label="Walica"
+      onclick={onWalicaOpen}
+    >
+      {@html WalicaIcon}
+      <span>Walica</span>
+    </button>
+  {/if}
+
+  <div class="standard-autumn-btn-wrapper">
+    <button
+      class="standard-autumn-bottom-btn"
+      title={hasEditPermission
+        ? "閲覧モードに切り替え"
+        : "編集モードに切り替え"}
+      aria-label={hasEditPermission
+        ? "閲覧モードに切り替え"
+        : "編集モードに切り替え"}
+      onclick={handleEditModeToggle}
+    >
+      {#if hasEditPermission}
+        {@html ViewIcon}
+        <span>View</span>
+      {:else}
+        {@html EditIcon}
+        <span>Edit</span>
+      {/if}
+    </button>
+  </div>
+
+  {#if hasEditPermission}
+    <div class="standard-autumn-btn-wrapper">
+      <button
+        class="standard-autumn-bottom-btn"
+        title="設定"
+        aria-label="設定"
+        onclick={handleSettingsClick}
+      >
+        {@html SettingsIcon}
+        <span>Settings</span>
+      </button>
+      {#if showSettingsMenu}
+        <SettingsMenu
+          {themes}
+          {selectedThemeId}
+          {secretModeEnabled}
+          {secretModeOffset}
+          {walicaUrl}
+          {showThemeSelect}
+          onThemeChange={handleThemeChange}
+          {onSecretModeChange}
+          {onWalicaUpdate}
+          onShowThemeSelect={handleShowThemeSelect}
+          onClose={() => (showSettingsMenu = false)}
+        />
+      {/if}
+      {#if showThemeSelect}
+        <div class="standard-autumn-theme-select-popup">
+          <label for="theme-select" class="standard-autumn-theme-select-label"
+            >テーマを選択</label
+          >
+          <select
+            id="theme-select"
+            value={selectedThemeId}
+            onchange={(e) =>
+              handleThemeChange((e.target as HTMLSelectElement).value)}
+            class="standard-autumn-theme-select-input"
+          >
+            {#each themes as theme}
+              <option value={theme.id}>{theme.name}</option>
+            {/each}
+          </select>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</nav>
diff --git a/apps/web/src/lib/themes/standard-autumn/components/Dialog.svelte b/apps/web/src/lib/themes/standard-autumn/components/Dialog.svelte
new file mode 100644
index 0000000..df56576
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/components/Dialog.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  interface Props {
+    show: boolean;
+    title: string;
+    onClose: () => void;
+    children?: import("svelte").Snippet;
+    actions?: import("svelte").Snippet;
+  }
+
+  let { show, title, onClose, children, actions }: Props = $props();
+</script>
+
+{#if show}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="standard-autumn-dialog-overlay" onclick={onClose}>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="standard-autumn-dialog" onclick={(e) => e.stopPropagation()}>
+      <h3 class="standard-autumn-dialog-title">{title}</h3>
+      {#if children}
+        {@render children()}
+      {/if}
+      {#if actions}
+        <div class="standard-autumn-dialog-actions">
+          {@render actions()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
diff --git a/apps/web/src/lib/themes/standard-autumn/components/MemoDialog.svelte b/apps/web/src/lib/themes/standard-autumn/components/MemoDialog.svelte
new file mode 100644
index 0000000..ee90b56
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/components/MemoDialog.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import Dialog from "./Dialog.svelte";
+  import { renderMarkdown } from "../utils/markdown";
+
+  interface Props {
+    show: boolean;
+    memo: string;
+    hasEditPermission: boolean;
+    onSave: (memo: string) => void;
+    onClose: () => void;
+  }
+
+  let { show, memo, hasEditPermission, onSave, onClose }: Props = $props();
+
+  let editedMemo = $state(memo);
+
+  $effect(() => {
+    editedMemo = memo;
+  });
+
+  function handleSave() {
+    onSave(editedMemo.trim());
+  }
+</script>
+
+<Dialog {show} title="メモ" {onClose}>
+  {#snippet children()}
+    <textarea
+      bind:value={editedMemo}
+      placeholder="メモを入力..."
+      class="standard-autumn-textarea"
+      rows="6"
+      disabled={!hasEditPermission}
+    ></textarea>
+  {/snippet}
+
+  {#snippet actions()}
+    {#if hasEditPermission}
+      <button
+        onclick={handleSave}
+        class="standard-autumn-btn standard-autumn-btn-primary"
+      >
+        保存
+      </button>
+    {/if}
+    <button
+      onclick={onClose}
+      class="standard-autumn-btn standard-autumn-btn-secondary"
+    >
+      閉じる
+    </button>
+  {/snippet}
+</Dialog>
diff --git a/apps/web/src/lib/themes/standard-autumn/components/PasswordDialog.svelte b/apps/web/src/lib/themes/standard-autumn/components/PasswordDialog.svelte
new file mode 100644
index 0000000..3f1fb01
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/components/PasswordDialog.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import Dialog from "./Dialog.svelte";
+
+  interface Props {
+    show: boolean;
+    isAuthenticating: boolean;
+    onAuth: (password: string) => void;
+    onClose: () => void;
+  }
+
+  let { show, isAuthenticating, onAuth, onClose }: Props = $props();
+
+  let password = $state("");
+
+  function handleSubmit() {
+    onAuth(password);
+    password = "";
+  }
+
+  function handleClose() {
+    password = "";
+    onClose();
+  }
+</script>
+
+<Dialog {show} title="編集パスワード" onClose={handleClose}>
+  {#snippet children()}
+    <form
+      onsubmit={(e) => {
+        e.preventDefault();
+        handleSubmit();
+      }}
+    >
+      <input
+        type="password"
+        bind:value={password}
+        placeholder="パスワードを入力"
+        class="standard-autumn-input"
+        disabled={isAuthenticating}
+      />
+      <div class="standard-autumn-dialog-actions">
+        <button
+          type="submit"
+          class="standard-autumn-btn standard-autumn-btn-primary"
+          disabled={isAuthenticating}
+        >
+          {isAuthenticating ? "認証中..." : "認証"}
+        </button>
+        <button
+          type="button"
+          onclick={handleClose}
+          class="standard-autumn-btn standard-autumn-btn-secondary"
+          disabled={isAuthenticating}
+        >
+          キャンセル
+        </button>
+      </div>
+    </form>
+  {/snippet}
+</Dialog>
diff --git a/apps/web/src/lib/themes/standard-autumn/components/SettingsMenu.svelte b/apps/web/src/lib/themes/standard-autumn/components/SettingsMenu.svelte
new file mode 100644
index 0000000..2fabbb5
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/components/SettingsMenu.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { PaletteIcon, SecretIcon } from "./icons/index.svelte";
+
+  interface ThemeOption {
+    id: string;
+    name: string;
+    description?: string;
+  }
+
+  interface Props {
+    themes: ThemeOption[];
+    selectedThemeId: string;
+    secretModeEnabled: boolean;
+    secretModeOffset: number;
+    walicaUrl: string;
+    showThemeSelect: boolean;
+    onThemeChange: (themeId: string) => void;
+    onSecretModeChange: (enabled: boolean, offset: number) => void;
+    onWalicaUpdate: (url: string) => void;
+    onShowThemeSelect: () => void;
+    onClose: () => void;
+  }
+
+  let {
+    themes,
+    selectedThemeId,
+    secretModeEnabled,
+    secretModeOffset,
+    walicaUrl,
+    showThemeSelect,
+    onThemeChange,
+    onSecretModeChange,
+    onWalicaUpdate,
+    onShowThemeSelect,
+    onClose,
+  }: Props = $props();
+
+  let localSecretEnabled = $state(secretModeEnabled);
+  let localSecretOffset = $state(secretModeOffset);
+  let localWalicaUrl = $state(walicaUrl);
+
+  $effect(() => {
+    localSecretEnabled = secretModeEnabled;
+    localSecretOffset = secretModeOffset;
+    localWalicaUrl = walicaUrl;
+  });
+
+  function handleSecretToggle() {
+    localSecretEnabled = !localSecretEnabled;
+    onSecretModeChange(localSecretEnabled, localSecretOffset);
+  }
+
+  function handleSecretOffsetChange() {
+    onSecretModeChange(localSecretEnabled, localSecretOffset);
+  }
+
+  function handleWalicaBlur() {
+    onWalicaUpdate(localWalicaUrl);
+  }
+
+  function handleThemeSelect(e: Event) {
+    const target = e.target as HTMLSelectElement;
+    onThemeChange(target.value);
+  }
+</script>
+
+<div class="standard-autumn-settings-menu">
+  <button onclick={onShowThemeSelect} class="standard-autumn-settings-item">
+    {@html PaletteIcon}
+    テーマを変更
+  </button>
+
+  <div class="standard-autumn-settings-divider"></div>
+
+  <div class="standard-autumn-settings-group">
+    <label class="standard-autumn-settings-toggle">
+      <span class="standard-autumn-settings-label-text">
+        {@html SecretIcon}
+        シークレットモード
+      </span>
+      <input
+        type="checkbox"
+        bind:checked={localSecretEnabled}
+        onchange={handleSecretToggle}
+        class="standard-autumn-toggle-input"
+      />
+      <span class="standard-autumn-toggle-slider"></span>
+    </label>
+
+    {#if localSecretEnabled}
+      <div class="standard-autumn-settings-subitem">
+        <span class="standard-autumn-settings-sublabel">表示開始:</span>
+        <select
+          bind:value={localSecretOffset}
+          onchange={handleSecretOffsetChange}
+          class="standard-autumn-settings-select"
+        >
+          <option value={0}>即時</option>
+          <option value={15}>15分前</option>
+          <option value={30}>30分前</option>
+          <option value={60}>1時間前</option>
+          <option value={120}>2時間前</option>
+          <option value={180}>3時間前</option>
+          <option value={300}>5時間前</option>
+          <option value={720}>12時間前</option>
+          <option value={1440}>24時間前</option>
+        </select>
+      </div>
+    {/if}
+  </div>
+
+  <div class="standard-autumn-settings-divider"></div>
+
+  <div class="standard-autumn-settings-group">
+    <label class="standard-autumn-settings-label">
+      <span class="standard-autumn-settings-label-text"> Walica URL </span>
+      <input
+        type="text"
+        bind:value={localWalicaUrl}
+        onblur={handleWalicaBlur}
+        placeholder="https://walica.jp/group/..."
+        class="standard-autumn-input standard-autumn-settings-input"
+      />
+    </label>
+  </div>
+</div>
+
+{#if showThemeSelect}
+  <div class="standard-autumn-theme-select-popup">
+    <label for="theme-select" class="standard-autumn-theme-select-label"
+      >テーマを選択</label
+    >
+    <select
+      id="theme-select"
+      value={selectedThemeId}
+      onchange={handleThemeSelect}
+      class="standard-autumn-theme-select-input"
+    >
+      {#each themes as theme}
+        <option value={theme.id}>{theme.name}</option>
+      {/each}
+    </select>
+  </div>
+{/if}
diff --git a/apps/web/src/lib/themes/standard-autumn/components/ShareDialog.svelte b/apps/web/src/lib/themes/standard-autumn/components/ShareDialog.svelte
new file mode 100644
index 0000000..ec1b86a
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/components/ShareDialog.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import Dialog from "./Dialog.svelte";
+  import { ViewIcon, EditIcon } from "./icons/index.svelte";
+
+  interface Props {
+    show: boolean;
+    hasEditPermission: boolean;
+    onCopyLink: (includeToken: boolean) => void;
+    onClose: () => void;
+  }
+
+  let { show, hasEditPermission, onCopyLink, onClose }: Props = $props();
+</script>
+
+<Dialog {show} title="リンクを共有" {onClose}>
+  {#snippet children()}
+    <p class="standard-autumn-dialog-description">
+      どのリンクをコピーしますか?
+    </p>
+    <div class="standard-autumn-share-options">
+      <button
+        onclick={() => onCopyLink(false)}
+        class="standard-autumn-share-option"
+      >
+        <div class="standard-autumn-share-option-icon">
+          {@html ViewIcon}
+        </div>
+        <div class="standard-autumn-share-option-content">
+          <div class="standard-autumn-share-option-title">閲覧用リンク</div>
+          <div class="standard-autumn-share-option-desc">
+            閲覧のみ可能なリンクをコピー
+          </div>
+        </div>
+      </button>
+      {#if hasEditPermission}
+        <button
+          onclick={() => onCopyLink(true)}
+          class="standard-autumn-share-option"
+        >
+          <div class="standard-autumn-share-option-icon">
+            {@html EditIcon}
+          </div>
+          <div class="standard-autumn-share-option-content">
+            <div class="standard-autumn-share-option-title">編集用リンク</div>
+            <div class="standard-autumn-share-option-desc">
+              誰でも編集できるリンクをコピー
+            </div>
+          </div>
+        </button>
+      {/if}
+    </div>
+    <button
+      onclick={onClose}
+      class="standard-autumn-btn standard-autumn-btn-secondary standard-autumn-btn-full"
+    >
+      キャンセル
+    </button>
+  {/snippet}
+</Dialog>
diff --git a/apps/web/src/lib/themes/standard-autumn/components/WalicaOverlay.svelte b/apps/web/src/lib/themes/standard-autumn/components/WalicaOverlay.svelte
new file mode 100644
index 0000000..d033b8d
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/components/WalicaOverlay.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { CloseIcon } from "./icons/index.svelte";
+
+  interface Props {
+    show: boolean;
+    walicaId: string;
+    onClose: () => void;
+  }
+
+  let { show, walicaId, onClose }: Props = $props();
+</script>
+
+{#if show && walicaId}
+  <div class="standard-autumn-walica-overlay">
+    <div class="standard-autumn-walica-header">
+      <button onclick={onClose} class="standard-autumn-walica-close-btn">
+        {@html CloseIcon}
+        閉じる
+      </button>
+      <span class="standard-autumn-walica-title">Walica</span>
+    </div>
+    <iframe
+      src={`https://walica.jp/group/${walicaId}`}
+      title="Walica"
+      class="standard-autumn-walica-frame"
+    ></iframe>
+  </div>
+{/if}
diff --git a/apps/web/src/lib/themes/standard-autumn/components/icons/index.svelte b/apps/web/src/lib/themes/standard-autumn/components/icons/index.svelte
new file mode 100644
index 0000000..997ad06
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/components/icons/index.svelte
@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  export const LinkIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`;
+
+  export const HomeIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>`;
+
+  export const WalicaIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>`;
+
+  export const ViewIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>`;
+
+  export const EditIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>`;
+
+  export const SettingsIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>`;
+
+  export const PaletteIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>`;
+
+  export const SecretIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>`;
+
+  export const DeleteIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>`;
+
+  export const LocationIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>`;
+
+  export const LockIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>`;
+
+  export const CloseIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
+
+  export const ChevronLeftIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>`;
+
+  export const ChevronRightIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>`;
+</script>
diff --git a/apps/web/src/lib/themes/standard-autumn/config.ts b/apps/web/src/lib/themes/standard-autumn/config.ts
new file mode 100644
index 0000000..3cd1d46
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/config.ts
@@ -0,0 +1,27 @@
+import type { ThemeConfig } from "@tabitabi/types";
+
+export const autumnTheme: ThemeConfig = {
+  id: "fall",
+  name: "オータム",
+  version: "1.0.0",
+  description: "秋",
+  author: "Tabitabi Team",
+  features: {
+    steps: { enabled: true, required: true },
+    memo: { enabled: true },
+    checklist: { enabled: false },
+    budget: { enabled: false },
+    map: { enabled: false },
+  },
+  ui: {
+    layout: "single",
+    colorScheme: "light",
+    customColors: {
+      primary: "#a93529",
+      secondary: "#e6b422",
+      background: "#fcf9f2",
+      text: "#4a3b32",
+      accent: "#d4762c",
+    },
+  },
+};
diff --git a/apps/web/src/lib/themes/standard-autumn/index.ts b/apps/web/src/lib/themes/standard-autumn/index.ts
index d33071f..797b7e0 100644
--- a/apps/web/src/lib/themes/standard-autumn/index.ts
+++ b/apps/web/src/lib/themes/standard-autumn/index.ts
@@ -1,35 +1,14 @@
-import type { Theme } from '@tabitabi/types';
-import ItineraryView from './ItineraryView.svelte';
-import StepList from './StepList.svelte';
+import type { Theme } from "@tabitabi/types";
+import { autumnTheme } from "./config";
+import ItineraryView from "./ItineraryView.svelte";
+import StepList from "./StepList.svelte";
 
 const fallTheme: Theme = {
-  id: 'fall',
-  name: 'オータム',
-  version: '1.0.0',
-  description: '秋',
-  author: 'Tabitabi Team',
-  features: {
-    steps: { enabled: true, required: true },
-    memo: { enabled: true },
-    checklist: { enabled: false },
-    budget: { enabled: false },
-    map: { enabled: false }
-  },
-  ui: {
-    layout: 'single',
-    colorScheme: 'light',
-    customColors: {
-      primary: '#a93529',
-      secondary: '#e6b422',
-      background: '#fcf9f2',
-      text: '#4a3b32',
-      accent: '#d4762c'
-    }
-  },
+  ...autumnTheme,
   components: {
     ItineraryView,
-    StepList
-  }
+    StepList,
+  },
 };
 
 export default fallTheme;
diff --git a/apps/web/src/lib/themes/standard-autumn/styles/base.css b/apps/web/src/lib/themes/standard-autumn/styles/base.css
new file mode 100644
index 0000000..ad62217
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/styles/base.css
@@ -0,0 +1,131 @@
+body {
+  overflow-x: hidden;
+  background-color: var(--standard-autumn-bg);
+}
+
+.standard-autumn-theme {
+  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Times New Roman", serif;
+  min-height: 100vh;
+  background-color: var(--standard-autumn-bg);
+  background-image:
+    url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23a93529' fill-opacity='0.04' d='M30 30 L33 45 L43 38 L38 50 L53 53 L38 56 L43 68 L33 61 L30 76 L27 61 L17 68 L22 56 L7 53 L22 50 L17 38 L27 45 Z M130 80 L133 95 L143 88 L138 100 L153 103 L138 106 L143 118 L133 111 L130 126 L127 111 L117 118 L122 106 L107 103 L122 100 L117 88 L127 95 Z M80 150 L83 165 L93 158 L88 170 L103 173 L88 176 L93 188 L83 181 L80 196 L77 181 L67 188 L72 176 L57 173 L72 170 L67 158 L77 165 Z'/%3E%3C/svg%3E"),
+    radial-gradient(circle at 5% 5%, rgba(230, 180, 34, 0.08) 0%, transparent 40%),
+    radial-gradient(circle at 95% 95%, rgba(169, 53, 41, 0.08) 0%, transparent 40%),
+    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a93529' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  color: var(--standard-autumn-text);
+  -webkit-font-smoothing: antialiased;
+  position: relative;
+  overflow: hidden;
+}
+
+.standard-autumn-theme::before,
+.standard-autumn-theme::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.standard-autumn-theme::before {
+  top: 10%;
+  right: 5%;
+  width: 120px;
+  height: 120px;
+  opacity: 0.12;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23a93529' d='M50 10 L55 35 L70 25 L60 45 L85 50 L60 55 L70 75 L55 65 L50 90 L45 65 L30 75 L40 55 L15 50 L40 45 L30 25 L45 35 Z'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  transform: rotate(15deg);
+  animation: float 6s ease-in-out infinite;
+}
+
+.standard-autumn-theme::after {
+  bottom: 15%;
+  left: 8%;
+  width: 100px;
+  height: 100px;
+  opacity: 0.10;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23d4762c' d='M50 10 L55 35 L70 25 L60 45 L85 50 L60 55 L70 75 L55 65 L50 90 L45 65 L30 75 L40 55 L15 50 L40 45 L30 25 L45 35 Z'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  transform: rotate(-20deg);
+  animation: float 8s ease-in-out infinite;
+}
+
+@keyframes float {
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(15deg);
+  }
+
+  50% {
+    transform: translateY(-10px) rotate(15deg);
+  }
+}
+
+.standard-autumn-container {
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+.standard-autumn-container::before {
+  content: "";
+  position: absolute;
+  top: 80px;
+  right: 30px;
+  width: 80px;
+  height: 80px;
+  opacity: 0.15;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e6b422' d='M50 10 L55 35 L70 25 L60 45 L85 50 L60 55 L70 75 L55 65 L50 90 L45 65 L30 75 L40 55 L15 50 L40 45 L30 25 L45 35 Z'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  transform: rotate(-45deg);
+  pointer-events: none;
+  z-index: 0;
+  animation: gentleFloat 5s ease-in-out infinite;
+}
+
+.standard-autumn-container::after {
+  content: "";
+  position: absolute;
+  bottom: 180px;
+  right: 40px;
+  width: 70px;
+  height: 70px;
+  opacity: 0.12;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle fill='%238b4513' cx='50' cy='60' r='35'/%3E%3Cpath fill='%23d2691e' d='M45 35 Q50 25 55 35 L50 50 Z'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  transform: rotate(20deg);
+  pointer-events: none;
+  z-index: 0;
+  animation: gentleFloat 7s ease-in-out infinite;
+}
+
+@keyframes gentleFloat {
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(-45deg);
+  }
+
+  50% {
+    transform: translateY(-8px) rotate(-45deg);
+  }
+}
+
+.standard-autumn-empty {
+  text-align: center;
+  padding: 4rem 2rem;
+  color: var(--standard-autumn-text-light);
+  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
+  font-size: 1.1rem;
+  font-style: italic;
+}
diff --git a/apps/web/src/lib/themes/standard-autumn/styles/carousel.css b/apps/web/src/lib/themes/standard-autumn/styles/carousel.css
new file mode 100644
index 0000000..a6014ae
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/styles/carousel.css
@@ -0,0 +1,259 @@
+.standard-autumn-carousel-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 140px;
+  width: 100%;
+  position: relative;
+  overflow: visible;
+}
+
+.standard-autumn-carousel-wrapper::before {
+  content: "";
+  position: absolute;
+  left: 10px;
+  top: 40%;
+  width: 60px;
+  height: 60px;
+  opacity: 0.10;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse fill='%238b4513' cx='50' cy='65' rx='30' ry='35'/%3E%3Cpath fill='%23d2691e' d='M50 30 L55 45 L45 45 Z'/%3E%3Ccircle fill='%238b4513' cx='50' cy='28' r='3'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  transform: rotate(-15deg);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.standard-autumn-carousel-wrapper::after {
+  content: "";
+  position: absolute;
+  right: 15px;
+  top: 60%;
+  width: 70px;
+  height: 70px;
+  opacity: 0.08;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23a93529' d='M30 40 L33 55 L43 48 L38 60 L53 63 L38 66 L43 78 L33 71 L30 86 L27 71 L17 78 L22 66 L7 63 L22 60 L17 48 L27 55 Z'/%3E%3Cpath fill='%23d4762c' d='M60 15 L62 26 L69 21 L66 30 L77 32 L66 34 L69 43 L62 38 L60 49 L58 38 L51 43 L54 34 L43 32 L54 30 L51 21 L58 26 Z'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  transform: rotate(25deg);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.standard-autumn-carousel {
+  width: 100%;
+  overflow: visible;
+  padding: 1rem 0;
+}
+
+.standard-autumn-carousel-track {
+  display: flex;
+  width: auto;
+  transition: margin-left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
+  margin-left: calc(50vw - 42.5vw - (var(--active, 0) * (85vw + 24px)));
+  gap: 24px;
+  padding: 0;
+  will-change: margin-left;
+  align-items: flex-start;
+}
+
+.standard-autumn-carousel-card {
+  flex: 0 0 85vw;
+  width: 85vw;
+  max-width: 420px;
+  min-width: 280px;
+  box-sizing: border-box;
+  opacity: 0.5;
+  transform: scale(0.9) translateY(15px);
+  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  border-radius: 24px;
+  background: var(--standard-autumn-card-bg);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  position: relative;
+}
+
+.standard-autumn-carousel-card::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: linear-gradient(90deg, var(--standard-autumn-primary), var(--standard-autumn-secondary));
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.standard-autumn-carousel-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 20px;
+  width: 40px;
+  height: 60px;
+  background: linear-gradient(135deg, var(--standard-autumn-primary) 0%, var(--standard-autumn-accent) 100%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
+  z-index: 10;
+  box-shadow: 0 4px 8px rgba(169, 53, 41, 0.3);
+}
+
+.standard-autumn-carousel-card[aria-hidden="false"] {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  z-index: 2;
+  cursor: default;
+  box-shadow: var(--standard-autumn-shadow);
+  border-color: #fff;
+}
+
+.standard-autumn-carousel-card[aria-hidden="false"]::after {
+  opacity: 1;
+}
+
+.standard-autumn-carousel-card[aria-hidden="false"]::before {
+  opacity: 0.9;
+}
+
+.standard-autumn-card {
+  background: transparent;
+  padding: 0;
+  border: none;
+  box-shadow: none;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+}
+
+.standard-autumn-card-header {
+  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
+  font-size: 1.8rem;
+  color: var(--standard-autumn-text);
+  font-weight: 600;
+  padding: 2.5rem 1.5rem 1.5rem;
+  text-align: center;
+  background: linear-gradient(to bottom, #fffcf5 0%, rgba(255, 255, 255, 0) 100%);
+  letter-spacing: 0.05em;
+  border-bottom: 1px dashed var(--standard-autumn-line-color);
+}
+
+.standard-autumn-card-body {
+  position: relative;
+  padding: 2rem 1.5rem;
+}
+
+.standard-autumn-carousel-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 0.5rem 0;
+}
+
+.standard-autumn-carousel-controls-top {
+  margin-bottom: 0.5rem;
+}
+
+.standard-autumn-carousel-controls-bottom {
+  margin-top: 1rem;
+}
+
+.standard-autumn-carousel-btn {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--standard-autumn-border);
+  color: var(--standard-autumn-primary);
+  cursor: pointer;
+  padding: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  box-shadow: var(--standard-autumn-shadow-sm);
+}
+
+.standard-autumn-carousel-btn svg {
+  width: 24px;
+  height: 24px;
+}
+
+.standard-autumn-carousel-btn:hover:not(:disabled) {
+  background: var(--standard-autumn-primary);
+  color: white;
+  transform: scale(1.1);
+  box-shadow: 0 6px 16px rgba(169, 53, 41, 0.3);
+  border-color: var(--standard-autumn-primary);
+}
+
+.standard-autumn-carousel-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+  border-color: #eee;
+  color: #ccc;
+  box-shadow: none;
+}
+
+.standard-autumn-page-dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.standard-autumn-page-dots button {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #dccbba;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.standard-autumn-page-dots button:hover {
+  background: #a93529;
+  opacity: 0.5;
+}
+
+.standard-autumn-page-dots button.active {
+  background: var(--standard-autumn-primary);
+  width: 24px;
+  border-radius: 10px;
+}
+
+@media (min-width: 830px) {
+  .standard-autumn-carousel-track {
+    margin-left: calc(50vw - 32.5vw - (var(--active, 0) * (65vw + 24px)));
+  }
+
+  .standard-autumn-carousel-card {
+    flex: 0 0 65vw;
+    width: 65vw;
+  }
+}
+
+@media (max-width: 480px) {
+  .standard-autumn-carousel-card {
+    flex: 0 0 88vw;
+    width: 88vw;
+  }
+
+  .standard-autumn-carousel-track {
+    margin-left: calc(50vw - 44vw - (var(--active, 0) * (88vw + 16px)));
+    gap: 16px;
+  }
+
+  .standard-autumn-card-header {
+    font-size: 1.5rem;
+  }
+}
diff --git a/apps/web/src/lib/themes/standard-autumn/styles/dialog.css b/apps/web/src/lib/themes/standard-autumn/styles/dialog.css
new file mode 100644
index 0000000..cf389db
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/styles/dialog.css
@@ -0,0 +1,183 @@
+.standard-autumn-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(74, 59, 50, 0.4);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.standard-autumn-dialog {
+  background: #fff;
+  border-radius: 24px;
+  padding: 2.5rem;
+  max-width: 360px;
+  width: 90%;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  animation: dialogSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+@keyframes dialogSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.standard-autumn-dialog-title {
+  margin: 0 0 1.5rem 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: var(--standard-autumn-text);
+  text-align: center;
+  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
+}
+
+.standard-autumn-dialog-description {
+  margin: 0 0 1.5rem 0;
+  color: var(--standard-autumn-text-light);
+  font-size: 0.95rem;
+  line-height: 1.6;
+  text-align: center;
+}
+
+.standard-autumn-dialog-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+.standard-autumn-share-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.standard-autumn-share-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem;
+  border: 2px solid var(--standard-autumn-border);
+  border-radius: 12px;
+  background: #fff;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: left;
+  width: 100%;
+}
+
+.standard-autumn-share-option:hover {
+  border-color: var(--standard-autumn-primary);
+  background: #fffcf9;
+}
+
+.standard-autumn-share-option-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--standard-autumn-primary);
+  background: rgba(169, 53, 41, 0.1);
+  padding: 8px;
+  border-radius: 50%;
+}
+
+.standard-autumn-share-option-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.standard-autumn-share-option-content {
+  flex: 1;
+}
+
+.standard-autumn-share-option-title {
+  font-weight: 600;
+  color: var(--standard-autumn-text);
+  margin-bottom: 0.25rem;
+}
+
+.standard-autumn-share-option-desc {
+  font-size: 0.85rem;
+  color: var(--standard-autumn-text-light);
+  line-height: 1.4;
+}
+
+.standard-autumn-walica-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #fff;
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+.standard-autumn-walica-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background: var(--standard-autumn-bg);
+  border-bottom: 1px solid var(--standard-autumn-border);
+  box-shadow: var(--standard-autumn-shadow-sm);
+}
+
+.standard-autumn-walica-close-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--standard-autumn-primary);
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 8px;
+  transition: background 0.2s;
+}
+
+.standard-autumn-walica-close-btn:hover {
+  background: rgba(169, 53, 41, 0.1);
+}
+
+.standard-autumn-walica-title {
+  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: var(--standard-autumn-text);
+}
+
+.standard-autumn-walica-frame {
+  flex: 1;
+  width: 100%;
+  border: none;
+  background: #fff;
+}
diff --git a/apps/web/src/lib/themes/standard-autumn/styles/form.css b/apps/web/src/lib/themes/standard-autumn/styles/form.css
new file mode 100644
index 0000000..a2ceeef
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/styles/form.css
@@ -0,0 +1,152 @@
+.standard-autumn-input,
+.standard-autumn-textarea,
+.standard-autumn-select-time {
+  width: 100%;
+  padding: 0.8rem;
+  border: 1px solid var(--standard-autumn-border);
+  border-radius: 12px;
+  margin-bottom: 0.8rem;
+  font-family: inherit;
+  background: #fff;
+  font-size: 1rem;
+  transition: all 0.2s;
+  color: var(--standard-autumn-text);
+}
+
+.standard-autumn-input:focus,
+.standard-autumn-textarea:focus,
+.standard-autumn-select-time:focus {
+  outline: none;
+  border-color: var(--standard-autumn-primary);
+  box-shadow: 0 0 0 3px rgba(169, 53, 41, 0.1);
+  background: #fffcf9;
+}
+
+.standard-autumn-form {
+  background-color: #fff;
+  border-radius: 20px;
+  padding: 1.5rem;
+  margin: 1rem;
+  box-shadow: var(--standard-autumn-shadow);
+  border: 1px solid var(--standard-autumn-border);
+}
+
+.standard-autumn-form-title {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  font-size: 1.2rem;
+  color: var(--standard-autumn-text);
+  text-align: center;
+  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
+  font-weight: 600;
+}
+
+.standard-autumn-form-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.standard-autumn-datetime {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.standard-autumn-time-picker {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.standard-autumn-time-separator {
+  font-weight: 600;
+  color: var(--standard-autumn-text);
+}
+
+.standard-autumn-form-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.standard-autumn-btn {
+  padding: 0.8rem 1.5rem;
+  border-radius: 50px;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.95rem;
+  transition: all 0.2s;
+  letter-spacing: 0.02em;
+}
+
+.standard-autumn-btn-primary {
+  background: linear-gradient(135deg, var(--standard-autumn-primary), var(--standard-autumn-accent));
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(169, 53, 41, 0.3);
+}
+
+.standard-autumn-btn-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(169, 53, 41, 0.4);
+}
+
+.standard-autumn-btn-secondary {
+  background: #fff;
+  color: var(--standard-autumn-text);
+  border: 1px solid var(--standard-autumn-border);
+}
+
+.standard-autumn-btn-secondary:hover {
+  background: var(--standard-autumn-bg);
+  border-color: var(--standard-autumn-primary);
+  color: var(--standard-autumn-primary);
+}
+
+.standard-autumn-btn-edit {
+  background: rgba(255, 255, 255, 0.8);
+  color: var(--standard-autumn-text-light);
+  border: 1px dashed var(--standard-autumn-border);
+  padding: 0.6rem 1.2rem;
+  font-size: 0.9rem;
+}
+
+.standard-autumn-btn-edit:hover {
+  background: #fff;
+  border-color: var(--standard-autumn-primary);
+  color: var(--standard-autumn-primary);
+}
+
+.standard-autumn-btn-full {
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+.standard-autumn-add-step {
+  padding: 1rem;
+  text-align: center;
+}
+
+.standard-autumn-btn-add {
+  background: #fff;
+  color: var(--standard-autumn-primary);
+  border: 2px solid var(--standard-autumn-primary);
+  padding: 0.8rem 2.5rem;
+  border-radius: 50px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: var(--standard-autumn-shadow-sm);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.standard-autumn-btn-add:hover {
+  background: var(--standard-autumn-primary);
+  color: #fff;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(169, 53, 41, 0.25);
+}
diff --git a/apps/web/src/lib/themes/standard-autumn/styles/header.css b/apps/web/src/lib/themes/standard-autumn/styles/header.css
new file mode 100644
index 0000000..22d841f
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/styles/header.css
@@ -0,0 +1,230 @@
+.standard-autumn-header {
+  text-align: center;
+  padding: 3.5rem 1.5rem 1.5rem;
+  position: relative;
+}
+
+.standard-autumn-header::before {
+  content: "";
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 60px;
+  height: 60px;
+  opacity: 0.10;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse fill='%236ba3d4' cx='50' cy='70' rx='40' ry='25'/%3E%3Cpath fill='%236ba3d4' d='M30 60 Q32 45 34 60 M45 55 Q47 40 49 55 M60 58 Q62 43 64 58' stroke='%236ba3d4' stroke-width='2' fill='none'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.standard-autumn-header::after {
+  content: "";
+  position: absolute;
+  top: 15px;
+  right: 10%;
+  width: 50px;
+  height: 50px;
+  opacity: 0.12;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e6b422' d='M50 90 L50 60 Q50 40 35 35 Q25 30 20 20 Q25 35 35 38 Q45 40 50 40 Q55 40 65 38 Q75 35 80 20 Q75 30 65 35 Q50 40 50 60 Z'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  transform: rotate(10deg);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.standard-autumn-title-button {
+  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
+  font-size: 2.2rem;
+  font-weight: 600;
+  color: var(--standard-autumn-text);
+  background: none;
+  border: none;
+  padding: 0.5rem 1rem;
+  margin: 0;
+  cursor: pointer;
+  line-height: 1.3;
+  letter-spacing: 0.08em;
+  position: relative;
+  transition: opacity 0.2s;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.standard-autumn-title-button:hover {
+  opacity: 0.7;
+}
+
+.standard-autumn-title-input {
+  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
+  font-size: 2.2rem;
+  font-weight: 600;
+  text-align: center;
+  width: 100%;
+  border: none;
+  border-bottom: 2px solid var(--standard-autumn-primary);
+  background: transparent;
+  color: var(--standard-autumn-text);
+  padding: 0.25rem;
+  outline: none;
+}
+
+.standard-autumn-controls {
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.standard-autumn-memo-display {
+  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
+  font-size: 0.95rem;
+  color: var(--standard-autumn-text-light);
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid var(--standard-autumn-border);
+  border-radius: 12px;
+  padding: 1.2rem 1.5rem;
+  line-height: 1.8;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  max-width: 90%;
+  width: 100%;
+  margin: 0 auto;
+  backdrop-filter: blur(4px);
+  white-space: normal;
+  word-break: break-word;
+  position: relative;
+  text-align: left;
+}
+
+.standard-autumn-memo-display p {
+  margin: 0 0 0.5em 0;
+}
+
+.standard-autumn-memo-display p:last-child {
+  margin-bottom: 0;
+}
+
+.standard-autumn-memo-display a {
+  color: var(--standard-autumn-primary);
+  text-decoration: underline;
+  font-weight: 600;
+  position: relative;
+  z-index: 5;
+  transition: color 0.2s;
+}
+
+.standard-autumn-memo-display a:hover {
+  color: var(--standard-autumn-accent);
+}
+
+.standard-autumn-memo-display ul,
+.standard-autumn-memo-display ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+.standard-autumn-memo-display ul {
+  list-style-type: disc;
+}
+
+.standard-autumn-memo-display ol {
+  list-style-type: decimal;
+}
+
+.standard-autumn-memo-display li {
+  margin: 0.25em 0;
+}
+
+.standard-autumn-memo-display::before {
+  content: '"';
+  position: absolute;
+  top: -10px;
+  left: 10px;
+  font-size: 3rem;
+  color: var(--standard-autumn-secondary);
+  opacity: 0.3;
+  font-family: serif;
+}
+
+.standard-autumn-memo-display:hover {
+  background: rgba(255, 255, 255, 0.9);
+  transform: translateY(-2px);
+  box-shadow: var(--standard-autumn-shadow-sm);
+  border-color: var(--standard-autumn-secondary);
+}
+
+.standard-autumn-share-icon {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  color: var(--standard-autumn-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+
+.standard-autumn-share-icon:hover {
+  background: #fff;
+  border-color: var(--standard-autumn-primary-light);
+  transform: rotate(15deg);
+  box-shadow: var(--standard-autumn-shadow-sm);
+}
+
+.standard-autumn-share-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.standard-autumn-copy-msg {
+  position: absolute;
+  top: 1.5rem;
+  right: 4rem;
+  font-size: 0.8rem;
+  color: #fff;
+  background: var(--standard-autumn-primary);
+  padding: 6px 16px;
+  border-radius: 20px;
+  pointer-events: none;
+  animation: fadeOut 2s forwards;
+  box-shadow: 0 4px 12px rgba(169, 53, 41, 0.2);
+  font-weight: 600;
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+
+  10% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  80% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .standard-autumn-header {
+    padding: 2.5rem 1rem 1rem;
+  }
+
+  .standard-autumn-title-button,
+  .standard-autumn-title-input {
+    font-size: 1.8rem;
+  }
+}
diff --git a/apps/web/src/lib/themes/standard-autumn/styles/index.css b/apps/web/src/lib/themes/standard-autumn/styles/index.css
new file mode 100644
index 0000000..9889649
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/styles/index.css
@@ -0,0 +1,8 @@
+@import './variables.css';
+@import './base.css';
+@import './header.css';
+@import './carousel.css';
+@import './timeline.css';
+@import './form.css';
+@import './nav.css';
+@import './dialog.css';
diff --git a/apps/web/src/lib/themes/standard-autumn/styles/nav.css b/apps/web/src/lib/themes/standard-autumn/styles/nav.css
new file mode 100644
index 0000000..e8c005c
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/styles/nav.css
@@ -0,0 +1,247 @@
+.standard-autumn-bottom-nav {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 68px;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+  border-radius: 34px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  z-index: 100;
+  padding: 0 32px;
+  min-width: 280px;
+}
+
+.standard-autumn-bottom-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--standard-autumn-text-light);
+  gap: 4px;
+  transition: all 0.2s;
+}
+
+.standard-autumn-bottom-btn:hover,
+.standard-autumn-bottom-btn:active {
+  color: var(--standard-autumn-primary);
+  transform: translateY(-2px);
+}
+
+.standard-autumn-bottom-btn svg {
+  width: 24px;
+  height: 24px;
+}
+
+.standard-autumn-bottom-btn span {
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.standard-autumn-btn-wrapper {
+  position: relative;
+}
+
+.standard-autumn-settings-menu {
+  position: absolute;
+  bottom: 80px;
+  right: 0;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  z-index: 200;
+  min-width: 220px;
+  overflow: hidden;
+  padding: 0.5rem;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.standard-autumn-settings-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+  padding: 1rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background 0.2s;
+  font-size: 0.95rem;
+  color: var(--standard-autumn-text);
+  border-radius: 12px;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.standard-autumn-settings-item:hover {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.standard-autumn-settings-divider {
+  height: 1px;
+  background: var(--standard-autumn-line-color);
+  margin: 0.5rem 0;
+  opacity: 0.5;
+}
+
+.standard-autumn-settings-group {
+  padding: 0.5rem 0;
+}
+
+.standard-autumn-settings-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 8px;
+  transition: background 0.2s;
+}
+
+.standard-autumn-settings-toggle:hover {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.standard-autumn-settings-label-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.95rem;
+  color: var(--standard-autumn-text);
+  font-weight: 500;
+}
+
+.standard-autumn-toggle-input {
+  display: none;
+}
+
+.standard-autumn-toggle-slider {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  background-color: #e0e0e0;
+  border-radius: 22px;
+  transition: background-color 0.3s;
+}
+
+.standard-autumn-toggle-slider::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.3s;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.standard-autumn-toggle-input:checked+.standard-autumn-toggle-slider {
+  background-color: var(--standard-autumn-primary);
+}
+
+.standard-autumn-toggle-input:checked+.standard-autumn-toggle-slider::before {
+  transform: translateX(18px);
+}
+
+.standard-autumn-settings-subitem {
+  padding: 0.5rem 1rem 0.5rem 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  animation: slideDown 0.2s ease-out;
+}
+
+.standard-autumn-settings-sublabel {
+  font-size: 0.85rem;
+  color: var(--standard-autumn-text-light);
+}
+
+.standard-autumn-settings-select {
+  padding: 0.3rem 0.5rem;
+  border-radius: 6px;
+  border: 1px solid var(--standard-autumn-border);
+  font-size: 0.85rem;
+  color: var(--standard-autumn-text);
+  background: #fff;
+  cursor: pointer;
+}
+
+.standard-autumn-settings-label {
+  display: block;
+  padding: 0.5rem 1rem;
+}
+
+.standard-autumn-settings-input {
+  margin-top: 0.5rem;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.standard-autumn-theme-select-popup {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #fff;
+  border: 1px solid var(--standard-autumn-border);
+  border-radius: 16px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  padding: 1rem;
+  z-index: 200;
+  min-width: 200px;
+  max-width: calc(100vw - 2rem);
+  margin-bottom: 1rem;
+}
+
+.standard-autumn-theme-select-label {
+  font-size: 0.9rem;
+  color: var(--standard-autumn-text-light);
+  margin-bottom: 0.5rem;
+  display: block;
+  font-weight: 600;
+}
+
+.standard-autumn-theme-select-input {
+  width: 100%;
+  font-size: 1rem;
+  padding: 0.5rem;
+  border-radius: 8px;
+  border: 1px solid var(--standard-autumn-border);
+  background: #fff;
+  color: var(--standard-autumn-text);
+  font-family: inherit;
+}
+
+@media (max-width: 480px) {
+  .standard-autumn-bottom-nav {
+    bottom: 20px;
+    height: 64px;
+    padding: 0 24px;
+    gap: 24px;
+  }
+}
diff --git a/apps/web/src/lib/themes/standard-autumn/styles/timeline.css b/apps/web/src/lib/themes/standard-autumn/styles/timeline.css
new file mode 100644
index 0000000..8f2c8b9
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/styles/timeline.css
@@ -0,0 +1,244 @@
+.standard-autumn-timeline-item {
+  display: flex;
+  position: relative;
+  margin-bottom: 2.5rem;
+  min-height: 60px;
+}
+
+.standard-autumn-timeline-line {
+  position: absolute;
+  left: 48px;
+  top: 16px;
+  bottom: -45px;
+  width: 1px;
+  background: var(--standard-autumn-line-color);
+  z-index: 0;
+}
+
+.standard-autumn-timeline-item:last-child .standard-autumn-timeline-line {
+  display: none;
+}
+
+.standard-autumn-step-time {
+  width: 48px;
+  text-align: right;
+  font-size: 0.95rem;
+  color: var(--standard-autumn-primary);
+  font-weight: 700;
+  padding-right: 14px;
+  flex-shrink: 0;
+  padding-top: 0;
+  font-family: "Inter", sans-serif;
+  letter-spacing: 0.02em;
+}
+
+.standard-autumn-step-dot {
+  width: 14px;
+  height: 14px;
+  background: var(--standard-autumn-primary);
+  border-radius: 0 50% 0 50%;
+  transform: rotate(-45deg);
+  flex-shrink: 0;
+  margin-top: 4px;
+  z-index: 1;
+  position: relative;
+  box-shadow: 0 2px 5px rgba(169, 53, 41, 0.3);
+  transition: transform 0.3s;
+}
+
+.standard-autumn-timeline-item:hover .standard-autumn-step-dot {
+  transform: rotate(-45deg) scale(1.2);
+}
+
+.standard-autumn-step-content {
+  flex: 1;
+  padding: 1.25rem;
+  background: #fffcf9;
+  border-radius: 4px;
+  margin-left: 1.5rem;
+  box-shadow: none;
+  border: 1px solid var(--standard-autumn-border);
+  border-left: 4px solid var(--standard-autumn-primary);
+  position: relative;
+}
+
+.standard-autumn-step-location {
+  font-size: 0.85rem;
+  color: var(--standard-autumn-text-light);
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+}
+
+.standard-autumn-icon-location {
+  width: 14px;
+  height: 14px;
+  color: var(--standard-autumn-accent);
+}
+
+.standard-autumn-step-title {
+  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: var(--standard-autumn-text);
+  margin: 0 0 0.5rem 0;
+  line-height: 1.4;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.standard-autumn-step-notes {
+  font-size: 0.95rem;
+  color: var(--standard-autumn-text-light);
+  line-height: 1.7;
+  background: rgba(230, 180, 34, 0.05);
+  padding: 1rem;
+  border-radius: 4px;
+  margin-top: 0.75rem;
+  border: 1px dashed var(--standard-autumn-line-color);
+}
+
+.standard-autumn-step-notes p {
+  margin: 0 0 0.75em 0;
+}
+
+.standard-autumn-step-notes p:last-child {
+  margin-bottom: 0;
+}
+
+.standard-autumn-step-notes a {
+  color: var(--standard-autumn-primary);
+  text-decoration: underline;
+  font-weight: 600;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.standard-autumn-step-notes a:hover {
+  color: var(--standard-autumn-accent);
+  text-decoration: none;
+}
+
+.standard-autumn-step-notes ul,
+.standard-autumn-step-notes ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+.standard-autumn-step-notes ul {
+  list-style-type: disc;
+}
+
+.standard-autumn-step-notes ol {
+  list-style-type: decimal;
+}
+
+.standard-autumn-step-notes li {
+  margin: 0.25em 0;
+  display: list-item;
+}
+
+.standard-autumn-step-notes strong {
+  font-weight: 700;
+  color: var(--standard-autumn-text);
+}
+
+.standard-autumn-step-notes em {
+  font-style: italic;
+}
+
+.standard-autumn-step-notes code {
+  background: rgba(0, 0, 0, 0.05);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 0.9em;
+}
+
+.standard-autumn-step-notes pre {
+  background: rgba(0, 0, 0, 0.05);
+  padding: 0.75em;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 0.5em 0;
+}
+
+.standard-autumn-step-notes pre code {
+  background: none;
+  padding: 0;
+}
+
+.standard-autumn-step-actions {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.standard-autumn-btn-icon {
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 0.5rem;
+  color: var(--standard-autumn-text-light);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.standard-autumn-btn-icon:hover {
+  background: #fff;
+  color: var(--standard-autumn-primary);
+  border-color: var(--standard-autumn-border);
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.standard-autumn-btn-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.standard-autumn-step-editing {
+  background: #fff;
+  padding: 1.5rem;
+  border-radius: 16px;
+  border: 2px solid var(--standard-autumn-primary);
+  margin-left: 1rem;
+  flex: 1;
+  box-shadow: var(--standard-autumn-shadow);
+}
+
+.standard-autumn-step-hidden {
+  opacity: 0.8;
+}
+
+.standard-autumn-secret-text {
+  font-style: italic;
+  color: var(--standard-autumn-text-light);
+}
+
+.standard-autumn-lock-icon {
+  margin-left: 0.5rem;
+  color: var(--standard-autumn-text-light);
+}
+
+.standard-autumn-secret-blur {
+  margin-top: 0.5rem;
+}
+
+.standard-autumn-secret-line {
+  height: 8px;
+  background: linear-gradient(90deg, var(--standard-autumn-line-color) 0%, transparent 100%);
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+}
+
+.standard-autumn-secret-line.short {
+  width: 60%;
+}
diff --git a/apps/web/src/lib/themes/standard-autumn/styles/variables.css b/apps/web/src/lib/themes/standard-autumn/styles/variables.css
new file mode 100644
index 0000000..ee00eb3
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/styles/variables.css
@@ -0,0 +1,16 @@
+:root {
+  --standard-autumn-bg: #fcf9f2;
+  --standard-autumn-primary: #a93529;
+  --standard-autumn-primary-light: #c75b4e;
+  --standard-autumn-secondary: #e6b422;
+  --standard-autumn-accent: #d4762c;
+  --standard-autumn-text: #4a3b32;
+  --standard-autumn-text-light: #786b60;
+  --standard-autumn-card-bg: #ffffff;
+  --standard-autumn-header-bg: transparent;
+  --standard-autumn-border: #e8e0d5;
+  --standard-autumn-line-color: #dccbba;
+  --standard-autumn-dot-bg: #a93529;
+  --standard-autumn-shadow: 0 12px 36px -8px rgba(74, 59, 50, 0.12);
+  --standard-autumn-shadow-sm: 0 4px 12px -2px rgba(74, 59, 50, 0.08);
+}
diff --git a/apps/web/src/lib/themes/standard-autumn/theme.css b/apps/web/src/lib/themes/standard-autumn/theme.css
deleted file mode 100644
index b9128b1..0000000
--- a/apps/web/src/lib/themes/standard-autumn/theme.css
+++ /dev/null
@@ -1,1367 +0,0 @@
-/* Fall Theme - "Kyoto Autumn" Style */
-:root {
-  --standard-autumn-bg: #fcf9f2; /* Washi paper off-white */
-  --standard-autumn-primary: #a93529; /* Momiji (Maple) Red */
-  --standard-autumn-primary-light: #c75b4e;
-  --standard-autumn-secondary: #e6b422; /* Icho (Ginkgo) Gold */
-  --standard-autumn-accent: #d4762c; /* Kaki (Persimmon) Orange */
-  --standard-autumn-text: #4a3b32; /* Dark Brown (Chestnut) */
-  --standard-autumn-text-light: #786b60;
-  --standard-autumn-card-bg: #ffffff;
-  --standard-autumn-header-bg: transparent;
-  --standard-autumn-border: #e8e0d5;
-  --standard-autumn-line-color: #dccbba;
-  --standard-autumn-dot-bg: #a93529;
-  --standard-autumn-shadow: 0 12px 36px -8px rgba(74, 59, 50, 0.12);
-  --standard-autumn-shadow-sm: 0 4px 12px -2px rgba(74, 59, 50, 0.08);
-}
-
-body {
-  overflow-x: hidden;
-  background-color: var(--standard-autumn-bg);
-}
-
-.standard-autumn-theme {
-  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Times New Roman", serif;
-  min-height: 100vh;
-  background-color: var(--standard-autumn-bg);
-  /* Subtle texture and gradient with autumn leaf pattern */
-  background-image:
-    url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23a93529' fill-opacity='0.04' d='M30 30 L33 45 L43 38 L38 50 L53 53 L38 56 L43 68 L33 61 L30 76 L27 61 L17 68 L22 56 L7 53 L22 50 L17 38 L27 45 Z M130 80 L133 95 L143 88 L138 100 L153 103 L138 106 L143 118 L133 111 L130 126 L127 111 L117 118 L122 106 L107 103 L122 100 L117 88 L127 95 Z M80 150 L83 165 L93 158 L88 170 L103 173 L88 176 L93 188 L83 181 L80 196 L77 181 L67 188 L72 176 L57 173 L72 170 L67 158 L77 165 Z'/%3E%3C/svg%3E"),
-    radial-gradient(circle at 5% 5%, rgba(230, 180, 34, 0.08) 0%, transparent 40%),
-    radial-gradient(circle at 95% 95%, rgba(169, 53, 41, 0.08) 0%, transparent 40%),
-    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a93529' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-  color: var(--standard-autumn-text);
-  -webkit-font-smoothing: antialiased;
-  position: relative;
-  overflow: hidden;
-}
-
-/* Autumn bookmark decorations - lightweight SVG icons */
-.standard-autumn-theme::before,
-.standard-autumn-theme::after {
-  content: "";
-  position: absolute;
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Maple leaves scattered decoration - top right */
-.standard-autumn-theme::before {
-  top: 10%;
-  right: 5%;
-  width: 120px;
-  height: 120px;
-  opacity: 0.12;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23a93529' d='M50 10 L55 35 L70 25 L60 45 L85 50 L60 55 L70 75 L55 65 L50 90 L45 65 L30 75 L40 55 L15 50 L40 45 L30 25 L45 35 Z'/%3E%3C/svg%3E");
-  background-size: contain;
-  background-repeat: no-repeat;
-  transform: rotate(15deg);
-  animation: float 6s ease-in-out infinite;
-}
-
-/* Additional autumn motifs - bottom left */
-.standard-autumn-theme::after {
-  bottom: 15%;
-  left: 8%;
-  width: 100px;
-  height: 100px;
-  opacity: 0.10;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23d4762c' d='M50 10 L55 35 L70 25 L60 45 L85 50 L60 55 L70 75 L55 65 L50 90 L45 65 L30 75 L40 55 L15 50 L40 45 L30 25 L45 35 Z'/%3E%3C/svg%3E");
-  background-size: contain;
-  background-repeat: no-repeat;
-  transform: rotate(-20deg);
-  animation: float 8s ease-in-out infinite;
-}
-
-@keyframes float {
-  0%, 100% { transform: translateY(0) rotate(15deg); }
-  50% { transform: translateY(-10px) rotate(15deg); }
-}
-
-.standard-autumn-container {
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 0;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  overflow: hidden;
-}
-
-/* Decorative autumn elements - scattered around the page */
-/* Top right - smaller maple leaf */
-.standard-autumn-container::before {
-  content: "";
-  position: absolute;
-  top: 80px;
-  right: 30px;
-  width: 80px;
-  height: 80px;
-  opacity: 0.15;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e6b422' d='M50 10 L55 35 L70 25 L60 45 L85 50 L60 55 L70 75 L55 65 L50 90 L45 65 L30 75 L40 55 L15 50 L40 45 L30 25 L45 35 Z'/%3E%3C/svg%3E");
-  background-size: contain;
-  background-repeat: no-repeat;
-  transform: rotate(-45deg);
-  pointer-events: none;
-  z-index: 0;
-  animation: gentleFloat 5s ease-in-out infinite;
-}
-
-/* Bottom right - chestnut */
-.standard-autumn-container::after {
-  content: "";
-  position: absolute;
-  bottom: 180px;
-  right: 40px;
-  width: 70px;
-  height: 70px;
-  opacity: 0.12;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle fill='%238b4513' cx='50' cy='60' r='35'/%3E%3Cpath fill='%23d2691e' d='M45 35 Q50 25 55 35 L50 50 Z'/%3E%3C/svg%3E");
-  background-size: contain;
-  background-repeat: no-repeat;
-  transform: rotate(20deg);
-  pointer-events: none;
-  z-index: 0;
-  animation: gentleFloat 7s ease-in-out infinite;
-}
-
-@keyframes gentleFloat {
-  0%, 100% { transform: translateY(0) rotate(-45deg); }
-  50% { transform: translateY(-8px) rotate(-45deg); }
-}
-
-/* Header */
-.standard-autumn-header {
-  text-align: center;
-  padding: 3.5rem 1.5rem 1.5rem;
-  position: relative;
-}
-
-/* Header decorations - hot spring symbol */
-.standard-autumn-header::before {
-  content: "";
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  width: 60px;
-  height: 60px;
-  opacity: 0.10;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse fill='%236ba3d4' cx='50' cy='70' rx='40' ry='25'/%3E%3Cpath fill='%236ba3d4' d='M30 60 Q32 45 34 60 M45 55 Q47 40 49 55 M60 58 Q62 43 64 58' stroke='%236ba3d4' stroke-width='2' fill='none'/%3E%3C/svg%3E");
-  background-size: contain;
-  background-repeat: no-repeat;
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Header decorations - ginkgo leaf */
-.standard-autumn-header::after {
-  content: "";
-  position: absolute;
-  top: 15px;
-  right: 10%;
-  width: 50px;
-  height: 50px;
-  opacity: 0.12;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e6b422' d='M50 90 L50 60 Q50 40 35 35 Q25 30 20 20 Q25 35 35 38 Q45 40 50 40 Q55 40 65 38 Q75 35 80 20 Q75 30 65 35 Q50 40 50 60 Z'/%3E%3C/svg%3E");
-  background-size: contain;
-  background-repeat: no-repeat;
-  transform: rotate(10deg);
-  pointer-events: none;
-  z-index: 0;
-}
-
-.standard-autumn-title-button {
-  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
-  font-size: 2.2rem;
-  font-weight: 600;
-  color: var(--standard-autumn-text);
-  background: none;
-  border: none;
-  padding: 0.5rem 1rem;
-  margin: 0;
-  cursor: pointer;
-  line-height: 1.3;
-  letter-spacing: 0.08em;
-  position: relative;
-  transition: opacity 0.2s;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-
-.standard-autumn-title-button:hover {
-  opacity: 0.7;
-}
-
-.standard-autumn-title-input {
-  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
-  font-size: 2.2rem;
-  font-weight: 600;
-  text-align: center;
-  width: 100%;
-  border: none;
-  border-bottom: 2px solid var(--standard-autumn-primary);
-  background: transparent;
-  color: var(--standard-autumn-text);
-  padding: 0.25rem;
-  outline: none;
-}
-
-.standard-autumn-controls {
-  margin-top: 1.5rem;
-  display: flex;
-  justify-content: center;
-}
-
-.standard-autumn-memo-display {
-  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
-  font-size: 0.95rem;
-  color: var(--standard-autumn-text-light);
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px solid var(--standard-autumn-border);
-  border-radius: 12px;
-  padding: 1.2rem 1.5rem;
-  line-height: 1.8;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  max-width: 90%;
-  width: 100%;
-  margin: 0 auto;
-  backdrop-filter: blur(4px);
-  white-space: normal;
-  word-break: break-word;
-  position: relative;
-  text-align: left;
-}
-
-.standard-autumn-memo-display p {
-  margin: 0 0 0.5em 0;
-}
-
-.standard-autumn-memo-display p:last-child {
-  margin-bottom: 0;
-}
-
-.standard-autumn-memo-display a {
-  color: var(--standard-autumn-primary);
-  text-decoration: underline;
-  font-weight: 600;
-  position: relative;
-  z-index: 5;
-  transition: color 0.2s;
-}
-
-.standard-autumn-memo-display a:hover {
-  color: var(--standard-autumn-accent);
-}
-
-.standard-autumn-memo-display ul,
-.standard-autumn-memo-display ol {
-  margin: 0.5em 0;
-  padding-left: 1.5em;
-}
-
-.standard-autumn-memo-display ul {
-  list-style-type: disc;
-}
-
-.standard-autumn-memo-display ol {
-  list-style-type: decimal;
-}
-
-.standard-autumn-memo-display li {
-  margin: 0.25em 0;
-}
-
-.standard-autumn-memo-display::before {
-  content: '"';
-  position: absolute;
-  top: -10px;
-  left: 10px;
-  font-size: 3rem;
-  color: var(--standard-autumn-secondary);
-  opacity: 0.3;
-  font-family: serif;
-}
-
-.standard-autumn-memo-display:hover {
-  background: rgba(255, 255, 255, 0.9);
-  transform: translateY(-2px);
-  box-shadow: var(--standard-autumn-shadow-sm);
-  border-color: var(--standard-autumn-secondary);
-}
-
-.standard-autumn-share-icon {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  background: rgba(255, 255, 255, 0.6);
-  border-radius: 50%;
-  width: 44px;
-  height: 44px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  color: var(--standard-autumn-primary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s;
-}
-
-.standard-autumn-share-icon:hover {
-  background: #fff;
-  border-color: var(--standard-autumn-primary-light);
-  transform: rotate(15deg);
-  box-shadow: var(--standard-autumn-shadow-sm);
-}
-
-.standard-autumn-share-icon svg {
-  width: 24px;
-  height: 24px;
-}
-
-.standard-autumn-copy-msg {
-  position: absolute;
-  top: 1.5rem;
-  right: 4rem;
-  font-size: 0.8rem;
-  color: #fff;
-  background: var(--standard-autumn-primary);
-  padding: 6px 16px;
-  border-radius: 20px;
-  pointer-events: none;
-  animation: fadeOut 2s forwards;
-  box-shadow: 0 4px 12px rgba(169, 53, 41, 0.2);
-  font-weight: 600;
-}
-
-@keyframes fadeOut {
-  0% { opacity: 0; transform: translateY(5px); }
-  10% { opacity: 1; transform: translateY(0); }
-  80% { opacity: 1; }
-  100% { opacity: 0; }
-}
-
-/* Carousel */
-.standard-autumn-carousel-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 140px;
-  width: 100%;
-  position: relative;
-  overflow: visible;
-}
-
-/* Carousel decorations - left side acorn */
-.standard-autumn-carousel-wrapper::before {
-  content: "";
-  position: absolute;
-  left: 10px;
-  top: 40%;
-  width: 60px;
-  height: 60px;
-  opacity: 0.10;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse fill='%238b4513' cx='50' cy='65' rx='30' ry='35'/%3E%3Cpath fill='%23d2691e' d='M50 30 L55 45 L45 45 Z'/%3E%3Ccircle fill='%238b4513' cx='50' cy='28' r='3'/%3E%3C/svg%3E");
-  background-size: contain;
-  background-repeat: no-repeat;
-  transform: rotate(-15deg);
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Carousel decorations - right side maple leaves cluster */
-.standard-autumn-carousel-wrapper::after {
-  content: "";
-  position: absolute;
-  right: 15px;
-  top: 60%;
-  width: 70px;
-  height: 70px;
-  opacity: 0.08;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23a93529' d='M30 40 L33 55 L43 48 L38 60 L53 63 L38 66 L43 78 L33 71 L30 86 L27 71 L17 78 L22 66 L7 63 L22 60 L17 48 L27 55 Z'/%3E%3Cpath fill='%23d4762c' d='M60 15 L62 26 L69 21 L66 30 L77 32 L66 34 L69 43 L62 38 L60 49 L58 38 L51 43 L54 34 L43 32 L54 30 L51 21 L58 26 Z'/%3E%3C/svg%3E");
-  background-size: contain;
-  background-repeat: no-repeat;
-  transform: rotate(25deg);
-  pointer-events: none;
-  z-index: 0;
-}
-
-.standard-autumn-carousel {
-  width: 100%;
-  overflow: visible;
-  padding: 1rem 0;
-}
-
-.standard-autumn-carousel-track {
-  display: flex;
-  width: auto;
-  transition: margin-left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
-  margin-left: calc(50vw - 42.5vw - (var(--active, 0) * (85vw + 24px)));
-  gap: 24px;
-  padding: 0;
-  will-change: margin-left;
-  align-items: flex-start;
-}
-
-.standard-autumn-carousel-card {
-  flex: 0 0 85vw;
-  width: 85vw;
-  max-width: 420px;
-  min-width: 280px;
-  box-sizing: border-box;
-  opacity: 0.5;
-  transform: scale(0.9) translateY(15px);
-  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  height: auto;
-  border-radius: 24px;
-  background: var(--standard-autumn-card-bg);
-  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
-  overflow: hidden;
-  border: 1px solid rgba(255,255,255,0.8);
-  position: relative;
-}
-
-.standard-autumn-carousel-card::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 6px;
-  background: linear-gradient(90deg, var(--standard-autumn-primary), var(--standard-autumn-secondary));
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-/* Bookmark ribbon decoration */
-.standard-autumn-carousel-card::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 20px;
-  width: 40px;
-  height: 60px;
-  background: linear-gradient(135deg, var(--standard-autumn-primary) 0%, var(--standard-autumn-accent) 100%);
-  opacity: 0;
-  transition: opacity 0.3s;
-  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
-  z-index: 10;
-  box-shadow: 0 4px 8px rgba(169, 53, 41, 0.3);
-}
-
-.standard-autumn-carousel-card[aria-hidden="false"] {
-  opacity: 1;
-  transform: scale(1) translateY(0);
-  z-index: 2;
-  cursor: default;
-  box-shadow: var(--standard-autumn-shadow);
-  border-color: #fff;
-}
-
-.standard-autumn-carousel-card[aria-hidden="false"]::after {
-  opacity: 1;
-}
-
-.standard-autumn-carousel-card[aria-hidden="false"]::before {
-  opacity: 0.9;
-}
-
-.standard-autumn-card {
-  background: transparent;
-  padding: 0;
-  border: none;
-  box-shadow: none;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: auto;
-}
-
-.standard-autumn-card-header {
-  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
-  font-size: 1.8rem;
-  color: var(--standard-autumn-text);
-  font-weight: 600;
-  padding: 2.5rem 1.5rem 1.5rem;
-  text-align: center;
-  background: linear-gradient(to bottom, #fffcf5 0%, rgba(255,255,255,0) 100%);
-  letter-spacing: 0.05em;
-  border-bottom: 1px dashed var(--standard-autumn-line-color);
-}
-
-.standard-autumn-card-body {
-  position: relative;
-  padding: 2rem 1.5rem;
-}
-
-/* Timeline */
-.standard-autumn-timeline-item {
-  display: flex;
-  position: relative;
-  margin-bottom: 2.5rem;
-  min-height: 60px;
-}
-
-.standard-autumn-timeline-line {
-  position: absolute;
-  left: 48px;
-  top: 16px;
-  bottom: -45px;
-  width: 1px;
-  background: var(--standard-autumn-line-color);
-  z-index: 0;
-}
-
-.standard-autumn-timeline-item:last-child .standard-autumn-timeline-line {
-  display: none;
-}
-
-.standard-autumn-step-time {
-  width: 48px;
-  text-align: right;
-  font-size: 0.95rem;
-  color: var(--standard-autumn-primary);
-  font-weight: 700;
-  padding-right: 14px;
-  flex-shrink: 0;
-  padding-top: 0;
-  font-family: "Inter", sans-serif;
-  letter-spacing: 0.02em;
-}
-
-.standard-autumn-step-dot {
-  width: 14px;
-  height: 14px;
-  background: var(--standard-autumn-primary);
-  border-radius: 0 50% 0 50%; /* Leaf shape */
-  transform: rotate(-45deg);
-  flex-shrink: 0;
-  margin-top: 4px;
-  z-index: 1;
-  position: relative;
-  box-shadow: 0 2px 5px rgba(169, 53, 41, 0.3);
-  transition: transform 0.3s;
-}
-
-.standard-autumn-timeline-item:hover .standard-autumn-step-dot {
-  transform: rotate(-45deg) scale(1.2);
-}
-
-.standard-autumn-step-content {
-  flex: 1;
-  padding: 1.25rem;
-  background: #fffcf9; /* Slightly warm white */
-  border-radius: 4px; /* More traditional, less rounded */
-  margin-left: 1.5rem;
-  box-shadow: none;
-  border: 1px solid var(--standard-autumn-border);
-  border-left: 4px solid var(--standard-autumn-primary); /* Accent border on left */
-  position: relative;
-}
-
-/* Removed hover transform animation as requested */
-/* .standard-autumn-step-content:hover { ... } */
-
-.standard-autumn-step-location {
-  font-size: 0.85rem;
-  color: var(--standard-autumn-text-light);
-  margin-bottom: 0.5rem;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-weight: 500;
-}
-
-.standard-autumn-icon-location {
-  width: 14px;
-  height: 14px;
-  color: var(--standard-autumn-accent);
-}
-
-.standard-autumn-step-title {
-  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
-  font-size: 1.15rem;
-  font-weight: 600;
-  color: var(--standard-autumn-text);
-  margin: 0 0 0.5rem 0;
-  line-height: 1.4;
-  display: flex;
-  justify-content: space-between; /* Ensure title and actions are spaced */
-  align-items: flex-start;
-}
-
-.standard-autumn-step-notes {
-  font-size: 0.95rem;
-  color: var(--standard-autumn-text-light);
-  line-height: 1.7;
-  background: rgba(230, 180, 34, 0.05); /* Very light gold bg */
-  padding: 1rem;
-  border-radius: 4px;
-  margin-top: 0.75rem;
-  border: 1px dashed var(--standard-autumn-line-color);
-}
-
-/* Markdown content styles within notes */
-.standard-autumn-step-notes p {
-  margin: 0 0 0.75em 0;
-}
-
-.standard-autumn-step-notes p:last-child {
-  margin-bottom: 0;
-}
-
-.standard-autumn-step-notes a {
-  color: var(--standard-autumn-primary);
-  text-decoration: underline;
-  font-weight: 600;
-  transition: all 0.2s;
-  cursor: pointer;
-}
-
-.standard-autumn-step-notes a:hover {
-  color: var(--standard-autumn-accent);
-  text-decoration: none;
-}
-
-.standard-autumn-step-notes ul,
-.standard-autumn-step-notes ol {
-  margin: 0.5em 0;
-  padding-left: 1.5em;
-}
-
-.standard-autumn-step-notes ul {
-  list-style-type: disc;
-}
-
-.standard-autumn-step-notes ol {
-  list-style-type: decimal;
-}
-
-.standard-autumn-step-notes li {
-  margin: 0.25em 0;
-  display: list-item;
-}
-
-.standard-autumn-step-notes strong {
-  font-weight: 700;
-  color: var(--standard-autumn-text);
-}
-
-.standard-autumn-step-notes em {
-  font-style: italic;
-}
-
-.standard-autumn-step-notes code {
-  background: rgba(0, 0, 0, 0.05);
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
-  font-size: 0.9em;
-}
-
-.standard-autumn-step-notes pre {
-  background: rgba(0, 0, 0, 0.05);
-  padding: 0.75em;
-  border-radius: 4px;
-  overflow-x: auto;
-  margin: 0.5em 0;
-}
-
-.standard-autumn-step-notes pre code {
-  background: none;
-  padding: 0;
-}
-
-
-/* Form Elements */
-.standard-autumn-input,
-.standard-autumn-textarea,
-.standard-autumn-select-time {
-  width: 100%;
-  padding: 0.8rem;
-  border: 1px solid var(--standard-autumn-border);
-  border-radius: 12px;
-  margin-bottom: 0.8rem;
-  font-family: inherit;
-  background: #fff;
-  font-size: 1rem;
-  transition: all 0.2s;
-  color: var(--standard-autumn-text);
-}
-
-.standard-autumn-input:focus,
-.standard-autumn-textarea:focus,
-.standard-autumn-select-time:focus {
-  outline: none;
-  border-color: var(--standard-autumn-primary);
-  box-shadow: 0 0 0 3px rgba(169, 53, 41, 0.1);
-  background: #fffcf9;
-}
-
-.standard-autumn-form {
-  background-color: #fff;
-  border-radius: 20px;
-  padding: 1.5rem;
-  margin: 1rem;
-  box-shadow: var(--standard-autumn-shadow);
-  border: 1px solid var(--standard-autumn-border);
-}
-
-.standard-autumn-form-title {
-  margin-top: 0;
-  margin-bottom: 1.5rem;
-  font-size: 1.2rem;
-  color: var(--standard-autumn-text);
-  text-align: center;
-  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
-  font-weight: 600;
-}
-
-.standard-autumn-btn {
-  padding: 0.8rem 1.5rem;
-  border-radius: 50px;
-  border: none;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 0.95rem;
-  transition: all 0.2s;
-  letter-spacing: 0.02em;
-}
-
-.standard-autumn-btn-primary {
-  background: linear-gradient(135deg, var(--standard-autumn-primary), var(--standard-autumn-accent));
-  color: #fff;
-  box-shadow: 0 4px 12px rgba(169, 53, 41, 0.3);
-}
-
-.standard-autumn-btn-primary:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 6px 16px rgba(169, 53, 41, 0.4);
-}
-
-.standard-autumn-btn-secondary {
-  background: #fff;
-  color: var(--standard-autumn-text);
-  border: 1px solid var(--standard-autumn-border);
-}
-
-.standard-autumn-btn-secondary:hover {
-  background: var(--standard-autumn-bg);
-  border-color: var(--standard-autumn-primary);
-  color: var(--standard-autumn-primary);
-}
-
-/* Bottom Navigation - Floating Glass */
-.standard-autumn-bottom-nav {
-  position: fixed;
-  bottom: 24px;
-  left: 50%;
-  transform: translateX(-50%);
-  height: 68px;
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 32px;
-  border-radius: 34px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.6);
-  z-index: 100;
-  padding: 0 32px;
-  min-width: 280px;
-}
-
-.standard-autumn-bottom-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: var(--standard-autumn-text-light);
-  gap: 4px;
-  transition: all 0.2s;
-}
-
-.standard-autumn-bottom-btn:hover,
-.standard-autumn-bottom-btn:active {
-  color: var(--standard-autumn-primary);
-  transform: translateY(-2px);
-}
-
-.standard-autumn-bottom-btn svg {
-  width: 24px;
-  height: 24px;
-}
-
-.standard-autumn-bottom-btn span {
-  font-size: 0.65rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-}
-
-/* Add Step Button */
-.standard-autumn-add-step {
-  padding: 1rem;
-  text-align: center;
-}
-
-.standard-autumn-btn-add {
-  background: #fff;
-  color: var(--standard-autumn-primary);
-  border: 2px solid var(--standard-autumn-primary);
-  padding: 0.8rem 2.5rem;
-  border-radius: 50px;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  box-shadow: var(--standard-autumn-shadow-sm);
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.standard-autumn-btn-add:hover {
-  background: var(--standard-autumn-primary);
-  color: #fff;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(169, 53, 41, 0.25);
-}
-
-/* Dialogs */
-.standard-autumn-dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(74, 59, 50, 0.4);
-  backdrop-filter: blur(8px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.standard-autumn-dialog {
-  background: #fff;
-  border-radius: 24px;
-  padding: 2.5rem;
-  max-width: 360px;
-  width: 90%;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
-  animation: dialogSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-  border: 1px solid rgba(255,255,255,0.5);
-}
-
-@keyframes dialogSlideUp {
-  from { opacity: 0; transform: translateY(20px) scale(0.95); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-.standard-autumn-dialog-title {
-  margin: 0 0 1.5rem 0;
-  font-size: 1.4rem;
-  font-weight: 600;
-  color: var(--standard-autumn-text);
-  text-align: center;
-  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
-}
-
-/* Settings Menu */
-.standard-autumn-settings-menu {
-  position: absolute;
-  bottom: 80px;
-  right: 0;
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-  z-index: 200;
-  min-width: 220px;
-  overflow: hidden;
-  padding: 0.5rem;
-  border: 1px solid rgba(0,0,0,0.05);
-}
-
-.standard-autumn-settings-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  width: 100%;
-  padding: 1rem;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: background 0.2s;
-  font-size: 0.95rem;
-  color: var(--standard-autumn-text);
-  border-radius: 12px;
-  font-family: inherit;
-  font-weight: 500;
-}
-
-.standard-autumn-settings-item:hover {
-  background: rgba(0, 0, 0, 0.03);
-}
-
-/* Settings Menu Additions */
-.standard-autumn-settings-divider {
-  height: 1px;
-  background: var(--standard-autumn-line-color);
-  margin: 0.5rem 0;
-  opacity: 0.5;
-}
-
-.standard-autumn-settings-group {
-  padding: 0.5rem 0;
-}
-
-.standard-autumn-settings-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  cursor: pointer;
-  user-select: none;
-  border-radius: 8px;
-  transition: background 0.2s;
-}
-
-.standard-autumn-settings-toggle:hover {
-  background: rgba(0, 0, 0, 0.03);
-}
-
-.standard-autumn-settings-label-text {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.95rem;
-  color: var(--standard-autumn-text);
-  font-weight: 500;
-}
-
-.standard-autumn-toggle-input {
-  display: none;
-}
-
-.standard-autumn-toggle-slider {
-  position: relative;
-  width: 40px;
-  height: 22px;
-  background-color: #e0e0e0;
-  border-radius: 22px;
-  transition: background-color 0.3s;
-}
-
-.standard-autumn-toggle-slider::before {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  background-color: white;
-  border-radius: 50%;
-  transition: transform 0.3s;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-}
-
-.standard-autumn-toggle-input:checked + .standard-autumn-toggle-slider {
-  background-color: var(--standard-autumn-primary);
-}
-
-.standard-autumn-toggle-input:checked + .standard-autumn-toggle-slider::before {
-  transform: translateX(18px);
-}
-
-.standard-autumn-settings-subitem {
-  padding: 0.5rem 1rem 0.5rem 2.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  animation: slideDown 0.2s ease-out;
-}
-
-.standard-autumn-settings-sublabel {
-  font-size: 0.85rem;
-  color: var(--standard-autumn-text-light);
-}
-
-.standard-autumn-settings-select {
-  padding: 0.3rem 0.5rem;
-  border-radius: 6px;
-  border: 1px solid var(--standard-autumn-border);
-  font-size: 0.85rem;
-  color: var(--standard-autumn-text);
-  background: #fff;
-  cursor: pointer;
-}
-
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-5px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-/* Carousel Controls */
-.standard-autumn-carousel-controls {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1.5rem;
-  padding: 0.5rem 0;
-}
-
-.standard-autumn-carousel-controls-top {
-  margin-bottom: 0.5rem;
-}
-
-.standard-autumn-carousel-controls-bottom {
-  margin-top: 1rem;
-}
-
-.standard-autumn-carousel-btn {
-  background: rgba(255, 255, 255, 0.9);
-  border: 1px solid var(--standard-autumn-border);
-  color: var(--standard-autumn-primary);
-  cursor: pointer;
-  padding: 0;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  box-shadow: var(--standard-autumn-shadow-sm);
-}
-
-.standard-autumn-carousel-btn svg {
-  width: 24px;
-  height: 24px;
-}
-
-.standard-autumn-carousel-btn:hover:not(:disabled) {
-  background: var(--standard-autumn-primary);
-  color: white;
-  transform: scale(1.1);
-  box-shadow: 0 6px 16px rgba(169, 53, 41, 0.3);
-  border-color: var(--standard-autumn-primary);
-}
-
-.standard-autumn-carousel-btn:disabled {
-  opacity: 0.3;
-  cursor: default;
-  border-color: #eee;
-  color: #ccc;
-  box-shadow: none;
-}
-
-.standard-autumn-page-dots {
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-}
-
-.standard-autumn-page-dots button {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #dccbba;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.standard-autumn-page-dots button:hover {
-  background: #a93529;
-  opacity: 0.5;
-}
-
-.standard-autumn-page-dots button.active {
-  background: var(--standard-autumn-primary);
-  width: 24px;
-  border-radius: 10px;
-}
-
-.standard-autumn-empty {
-  text-align: center;
-  padding: 4rem 2rem;
-  color: var(--standard-autumn-text-light);
-  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
-  font-size: 1.1rem;
-  font-style: italic;
-}
-
-.standard-autumn-step-actions {
-  margin-left: auto;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.standard-autumn-btn-icon {
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid transparent;
-  border-radius: 50%;
-  cursor: pointer;
-  padding: 0.5rem;
-  color: var(--standard-autumn-text-light);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.standard-autumn-btn-icon:hover {
-  background: #fff;
-  color: var(--standard-autumn-primary);
-  border-color: var(--standard-autumn-border);
-  transform: scale(1.1);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-}
-
-.standard-autumn-btn-icon svg {
-  width: 18px;
-  height: 18px;
-}
-
-.standard-autumn-step-editing {
-  background: #fff;
-  padding: 1.5rem;
-  border-radius: 16px;
-  border: 2px solid var(--standard-autumn-primary);
-  margin-left: 1rem;
-  flex: 1;
-  box-shadow: var(--standard-autumn-shadow);
-}
-
-.standard-autumn-btn-wrapper {
-  position: relative;
-}
-
-.standard-autumn-theme-select-popup {
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background: #fff;
-  border: 1px solid var(--standard-autumn-border);
-  border-radius: 16px;
-  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
-  padding: 1rem;
-  z-index: 200;
-  min-width: 200px;
-  max-width: calc(100vw - 2rem);
-  margin-bottom: 1rem;
-}
-
-.standard-autumn-theme-select-label {
-  font-size: 0.9rem;
-  color: var(--standard-autumn-text-light);
-  margin-bottom: 0.5rem;
-  display: block;
-  font-weight: 600;
-}
-
-.standard-autumn-theme-select-input {
-  width: 100%;
-  font-size: 1rem;
-  padding: 0.5rem;
-  border-radius: 8px;
-  border: 1px solid var(--standard-autumn-border);
-  background: #fff;
-  color: var(--standard-autumn-text);
-  font-family: inherit;
-}
-
-.standard-autumn-btn-full {
-  width: 100%;
-  margin-top: 0.5rem;
-}
-
-.standard-autumn-share-options {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-
-.standard-autumn-share-option {
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-  padding: 1rem;
-  border: 2px solid var(--standard-autumn-border);
-  border-radius: 12px;
-  background: #fff;
-  cursor: pointer;
-  transition: all 0.2s;
-  text-align: left;
-  width: 100%;
-}
-
-.standard-autumn-share-option:hover {
-  border-color: var(--standard-autumn-primary);
-  background: #fffcf9;
-}
-
-.standard-autumn-share-option-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--standard-autumn-primary);
-  background: rgba(169, 53, 41, 0.1);
-  padding: 8px;
-  border-radius: 50%;
-}
-
-.standard-autumn-share-option-icon svg {
-  width: 24px;
-  height: 24px;
-}
-
-.standard-autumn-share-option-content {
-  flex: 1;
-}
-
-.standard-autumn-share-option-title {
-  font-weight: 600;
-  color: var(--standard-autumn-text);
-  margin-bottom: 0.25rem;
-}
-
-.standard-autumn-share-option-desc {
-  font-size: 0.85rem;
-  color: var(--standard-autumn-text-light);
-  line-height: 1.4;
-}
-
-.standard-autumn-dialog-actions {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
-}
-
-.standard-autumn-dialog-description {
-  margin: 0 0 1.5rem 0;
-  color: var(--standard-autumn-text-light);
-  font-size: 0.95rem;
-  line-height: 1.6;
-  text-align: center;
-}
-
-/* Responsive */
-@media (min-width: 830px) {
-  .standard-autumn-carousel-track {
-    margin-left: calc(50vw - 32.5vw - (var(--active, 0) * (65vw + 24px)));
-  }
-  .standard-autumn-carousel-card {
-    flex: 0 0 65vw;
-    width: 65vw;
-  }
-}
-
-@media (max-width: 480px) {
-  .standard-autumn-header {
-    padding: 2.5rem 1rem 1rem;
-  }
-
-  .standard-autumn-title-button,
-  .standard-autumn-title-input {
-    font-size: 1.8rem;
-  }
-
-  .standard-autumn-carousel-card {
-    flex: 0 0 88vw;
-    width: 88vw;
-  }
-
-  .standard-autumn-carousel-track {
-    margin-left: calc(50vw - 44vw - (var(--active, 0) * (88vw + 16px)));
-    gap: 16px;
-  }
-
-  .standard-autumn-bottom-nav {
-    bottom: 20px;
-    height: 64px;
-    padding: 0 24px;
-    gap: 24px;
-  }
-
-  .standard-autumn-card-header {
-    font-size: 1.5rem;
-  }
-}
-
-/* Walica Overlay */
-.standard-autumn-walica-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: #fff;
-  z-index: 2000;
-  display: flex;
-  flex-direction: column;
-  animation: slideUp 0.3s ease-out;
-}
-
-@keyframes slideUp {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
-
-.standard-autumn-walica-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  background: var(--standard-autumn-bg);
-  border-bottom: 1px solid var(--standard-autumn-border);
-  box-shadow: var(--standard-autumn-shadow-sm);
-}
-
-.standard-autumn-walica-close-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--standard-autumn-primary);
-  cursor: pointer;
-  padding: 0.5rem;
-  border-radius: 8px;
-  transition: background 0.2s;
-}
-
-.standard-autumn-walica-close-btn:hover {
-  background: rgba(169, 53, 41, 0.1);
-}
-
-.standard-autumn-walica-title {
-  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
-  font-weight: 600;
-  font-size: 1.1rem;
-  color: var(--standard-autumn-text);
-}
-
-.standard-autumn-walica-frame {
-  flex: 1;
-  width: 100%;
-  border: none;
-  background: #fff;
-}
diff --git a/apps/web/src/lib/themes/standard-autumn/utils/markdown.ts b/apps/web/src/lib/themes/standard-autumn/utils/markdown.ts
new file mode 100644
index 0000000..66bd72c
--- /dev/null
+++ b/apps/web/src/lib/themes/standard-autumn/utils/markdown.ts
@@ -0,0 +1,10 @@
+import { marked } from "marked";
+
+marked.setOptions({
+  breaks: true,
+  gfm: true,
+});
+
+export function renderMarkdown(text: string): string {
+  return marked.parse(text, { async: false }) as string;
+}

From ff444ee99bcd3c8fe9dd09d66da7af4e095434a1 Mon Sep 17 00:00:00 2001
From: soranjiro <yutayuta540@gmail.com>
Date: Tue, 25 Nov 2025 21:57:14 +0900
Subject: [PATCH 2/3] fix(dialog): reduce padding in dialog header for improved
 layout

---
 apps/web/src/lib/themes/standard-autumn/styles/dialog.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/lib/themes/standard-autumn/styles/dialog.css b/apps/web/src/lib/themes/standard-autumn/styles/dialog.css
index cf389db..0a62a8b 100644
--- a/apps/web/src/lib/themes/standard-autumn/styles/dialog.css
+++ b/apps/web/src/lib/themes/standard-autumn/styles/dialog.css
@@ -143,7 +143,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem;
+  padding: 0.5rem;
   background: var(--standard-autumn-bg);
   border-bottom: 1px solid var(--standard-autumn-border);
   box-shadow: var(--standard-autumn-shadow-sm);

From f7dfa93a32bfbd0f9eca9087194d7b53e19b8f6d Mon Sep 17 00:00:00 2001
From: soranjiro <yutayuta540@gmail.com>
Date: Tue, 25 Nov 2025 22:05:43 +0900
Subject: [PATCH 3/3] fix(settings-menu): toggle secret mode state in
 handleSecretToggle function

---
 .../lib/themes/standard-autumn/components/SettingsMenu.svelte    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/src/lib/themes/standard-autumn/components/SettingsMenu.svelte b/apps/web/src/lib/themes/standard-autumn/components/SettingsMenu.svelte
index 2fabbb5..739748b 100644
--- a/apps/web/src/lib/themes/standard-autumn/components/SettingsMenu.svelte
+++ b/apps/web/src/lib/themes/standard-autumn/components/SettingsMenu.svelte
@@ -46,7 +46,6 @@
   });
 
   function handleSecretToggle() {
-    localSecretEnabled = !localSecretEnabled;
     onSecretModeChange(localSecretEnabled, localSecretOffset);
   }