custom CSS 추가 및 입력창 폰트 사이즈 조절

src/App.tsx

@@ -102,6 +102,9 @@ export const App = () => {
   });
   const [pomodoroSessionType, setPomodoroSessionType] = useState<"focus" | "break" | "longBreak">("focus");
   const [pomodoroIsRunning, setPomodoroIsRunning] = useState(false);
+  const [customCss, setCustomCss] = useState(() => {
+    return localStorage.getItem("textodon.customCss") || "";
+  });
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsAccountId, setSettingsAccountId] = useState<string | null>(null);
   const [reauthLoading, setReauthLoading] = useState(false);
@@ -448,7 +451,19 @@ export const App = () => {
     localStorage.setItem("textodon.pomodoro.longBreak", String(pomodoroLongBreak));
   }, [pomodoroLongBreak]);
 
-
+  useEffect(() => {
+    let styleTag = document.getElementById("textodon-custom-css");
+    if (customCss.trim()) {
+      if (!styleTag) {
+        styleTag = document.createElement("style");
+        styleTag.id = "textodon-custom-css";
+        document.head.appendChild(styleTag);
+      }
+      styleTag.textContent = customCss;
+    } else if (styleTag) {
+      styleTag.remove();
+    }
+  }, [customCss]);
 
   const closeMobileMenu = useCallback(() => {
     setMobileMenuOpen(false);
@@ -1392,6 +1407,11 @@ export const App = () => {
         onPomodoroFocusChange={setPomodoroFocus}
         onPomodoroBreakChange={setPomodoroBreak}
         onPomodoroLongBreakChange={setPomodoroLongBreak}
+        customCss={customCss}
+        onCustomCssApply={(value) => {
+          localStorage.setItem("textodon.customCss", value);
+          window.location.reload();
+        }}
       />
 
       {profileTargets.map((target, index) => (

src/ui/components/SettingsModal.tsx

@@ -1,3 +1,4 @@
+import React, { useState } from "react";
 import type { AccountsState } from "../state/AppContext";
 import type { ColorScheme, ThemeMode } from "../utils/theme";
 import { AccountSelector } from "./AccountSelector";
@@ -24,6 +25,8 @@ type SettingsModalProps = {
   onPomodoroFocusChange: (value: number) => void;
   onPomodoroBreakChange: (value: number) => void;
   onPomodoroLongBreakChange: (value: number) => void;
+  customCss: string;
+  onCustomCssApply: (value: string) => void;
 };
 
 export const SettingsModal = ({
@@ -47,8 +50,12 @@ export const SettingsModal = ({
   pomodoroLongBreak,
   onPomodoroFocusChange,
   onPomodoroBreakChange,
-  onPomodoroLongBreakChange
+  onPomodoroLongBreakChange,
+  customCss,
+  onCustomCssApply
 }: SettingsModalProps) => {
+  const [localCustomCss, setLocalCustomCss] = useState(customCss);
+
   if (!open) {
     return null;
   }
@@ -207,6 +214,28 @@ export const SettingsModal = ({
               모두 삭제
             </button>
           </div>
+          <div className="settings-item-divider" />
+          <details className="settings-custom-css">
+            <summary>
+              <strong>Custom CSS</strong>
+              <p>직접 CSS를 작성하여 스타일을 커스텀합니다.</p>
+            </summary>
+            <div className="settings-custom-css-content">
+              <textarea
+                value={localCustomCss}
+                onChange={(e) => setLocalCustomCss(e.target.value)}
+                placeholder="/* 여기에 CSS를 입력하세요 */"
+                rows={10}
+              />
+              <button
+                type="button"
+                className="settings-apply-button"
+                onClick={() => onCustomCssApply(localCustomCss)}
+              >
+                적용 (페이지 새로고침)
+              </button>
+            </div>
+          </details>
         </div>
       </div>
     </div>

src/ui/styles/components.css

@@ -352,6 +352,75 @@
   color: var(--color-action-danger-text);
 }
 
+.settings-item-divider {
+  height: 1px;
+  background: var(--color-settings-item-border);
+  margin: 16px 0;
+}
+
+.settings-custom-css {
+  border: 1px solid var(--color-settings-item-border);
+  border-radius: 12px;
+  overflow: hidden;
+  margin-top: 10px;
+}
+
+.settings-custom-css summary {
+  padding: 12px 16px;
+  cursor: pointer;
+  background: var(--color-input-bg);
+  user-select: none;
+  list-style: none;
+}
+
+.settings-custom-css summary::-webkit-details-marker {
+  display: none;
+}
+
+.settings-custom-css summary p {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--color-settings-item-text);
+}
+
+.settings-custom-css[open] summary {
+  border-bottom: 1px solid var(--color-settings-item-border);
+}
+
+.settings-custom-css-content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.settings-custom-css-content textarea {
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid var(--color-input-border);
+  background: var(--color-input-bg);
+  color: var(--color-input-text);
+  font-family: monospace;
+  font-size: 12px;
+  resize: vertical;
+}
+
+.settings-apply-button {
+  height: 40px;
+  background: var(--color-action-bg);
+  color: var(--color-action-text);
+  border-radius: 8px;
+  font-weight: 600;
+  transition: opacity 0.2s;
+  border: none;
+  cursor: pointer;
+}
+
+.settings-apply-button:hover {
+  opacity: 0.9;
+}
+
 .settings-item .account-add-wrapper {
   flex-shrink: 0;
 }
@@ -775,6 +844,7 @@
   border: none !important;
   border-radius: 0 !important;
   font-family: inherit;
+  font-size: 15px;
   resize: vertical !important;
   background: transparent !important;
   min-height: 80px;
@@ -856,6 +926,7 @@
   background: var(--color-input-bg);
   color: var(--color-input-text);
   font-family: inherit;
+  font-size: 15px;
 }
 
 .compose-actions {