From 8548135c0259b0e64441303bac0bd7a8967aa6f0 Mon Sep 17 00:00:00 2001
From: "[IKcoding-jp]" <[kensaku.ikeda04@gmail.com]>
Date: Mon, 3 Aug 2026 11:44:40 +0900
Subject: [PATCH 1/2] =?UTF-8?q?style:=20Tailwind=20v4=20=E3=81=AE=E6=AD=A3?=
 =?UTF-8?q?=E8=A6=8F=E8=A8=98=E6=B3=95=E3=81=B8=E3=82=AF=E3=83=A9=E3=82=B9?=
 =?UTF-8?q?=E5=90=8D=E3=82=92=E7=B5=B1=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

IDE の tailwindcss 拡張が示す suggestCanonicalClasses を全ファイルへ適用した。
生成される CSS は等価で、動作・見た目は変わらない。

- important の位置を v4 形式へ（!px-3 → px-3!）
- 任意値を標準スケールへ（min-h-[44px] → min-h-11・h-[2px] → h-0.5 など）
- v4 でのリネームに追従（flex-shrink-0 → shrink-0・bg-gradient-to-br → bg-linear-to-br）

検証: 変換前後でビルドし、生成 CSS の宣言集合が一致することを確認した。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WWxo2ZpLgqp8pd54g9qF1f
---
 .../components/AssignmentSettingsModal.tsx    |  6 ++---
 .../assignment-table/DesktopTableBody.tsx     |  6 ++---
 .../assignment-table/DesktopTableFooter.tsx   |  8 +++---
 .../assignment-table/DesktopTableHeader.tsx   |  6 ++---
 .../assignment-table/MobileListView.tsx       | 16 ++++++------
 .../modals/ContextMenuModal.tsx               |  2 +-
 .../modals/HeightSettingsModal.tsx            |  2 +-
 .../modals/MemberSelectionModal.tsx           |  4 +--
 .../modals/TeamActionModal.tsx                |  2 +-
 app/assignment/page.tsx                       |  6 ++---
 app/clock/page.tsx                            |  2 +-
 app/contact/page.tsx                          |  2 +-
 app/defect-beans/page.tsx                     |  6 ++---
 app/drip-guide/page.tsx                       |  2 +-
 app/error.tsx                                 |  2 +-
 app/inventory/page.tsx                        |  2 +-
 app/page.tsx                                  |  4 +--
 app/schedule/page.tsx                         | 24 ++++++++---------
 app/tasting/page.tsx                          |  2 +-
 components/DefectBeanCard.tsx                 | 26 +++++++++----------
 components/DefectBeanDetail.tsx               |  6 ++---
 components/Loading.tsx                        |  2 +-
 components/OCRRoastScheduleEditor.tsx         | 12 ++++-----
 components/RoastScheduleMemoDialog.tsx        |  2 +-
 components/RoastSchedulerTab.tsx              |  4 +--
 components/TastingSessionCardDesktop.tsx      | 14 +++++-----
 components/TastingSessionCardMobile.tsx       | 14 +++++-----
 components/TastingSessionCarousel.tsx         |  6 ++---
 components/TastingSessionFilterModal.test.tsx | 10 +++----
 components/TastingSessionFilterModal.tsx      | 10 +++----
 components/TastingSessionList.tsx             |  6 ++---
 components/Toast.tsx                          |  4 +--
 components/TodaySchedule.tsx                  |  6 ++---
 components/camera-capture/CameraCapture.tsx   |  2 +-
 components/camera-capture/CameraPreview.tsx   |  2 +-
 components/clock/ClockHeaderNav.tsx           |  2 +-
 components/clock/ClockSettingsModal.tsx       | 26 +++++++++----------
 components/clock/NextChimeStrip.tsx           |  2 +-
 components/clock/WorkChimeAlert.tsx           |  2 +-
 components/clock/WorkChimeScheduleModal.tsx   | 12 ++++-----
 components/date-picker/Calendar.tsx           |  2 +-
 components/date-picker/DatePickerModal.tsx    |  2 +-
 .../defect-bean-form/DefectBeanFormFields.tsx |  4 +--
 components/defect-beans/FilterMenu.tsx        |  2 +-
 components/drip-guide/RecipeList.tsx          |  4 +--
 components/drip-guide/Start46Dialog.tsx       |  4 +--
 components/drip-guide/StartHintDialog.tsx     |  4 +--
 components/drip-guide/StepEditor.tsx          |  2 +-
 .../dialogs/46/Dialog46DescriptionModal.tsx   |  2 +-
 .../drip-guide/dialogs/46/Dialog46Form.tsx    |  6 ++---
 .../dialogs/shared/RecipeStepTable.tsx        |  2 +-
 .../drip-guide/runner/CompletionScreen.tsx    |  4 +--
 .../drip-guide/runner/FooterControls.tsx      | 10 +++----
 components/home/ActionCard.tsx                |  2 +-
 components/inventory/InventoryItemModal.tsx   |  2 +-
 components/inventory/InventoryItemRow.tsx     |  4 +--
 components/ocr-confirm/OCRConfirmModal.tsx    | 20 +++++++-------
 .../OCRTimeLabelEditor.tsx                    |  7 +----
 .../ocr-time-label-editor/TimeLabelRow.tsx    | 16 ++++++------
 .../production-record/MonthMenuModal.tsx      |  2 +-
 .../production-record/MonthSettingsModal.tsx  |  4 +--
 .../ProductionRecordHeader.tsx                |  4 +--
 components/roast-scheduler/ScheduleCard.tsx   | 14 +++++-----
 components/schedule/EmptyScheduleState.tsx    |  2 +-
 components/settings/ThemeSelector.tsx         |  8 +++---
 components/today-schedule/TimeEditDialog.tsx  |  4 +--
 components/today-schedule/TimeInputRow.tsx    |  6 ++---
 components/ui/Button.tsx                      |  3 +--
 components/ui/FilterModal.tsx                 | 10 +++----
 components/ui/Input.tsx                       |  2 +-
 components/ui/NumberInput.tsx                 |  2 +-
 components/ui/Select.tsx                      |  2 +-
 72 files changed, 215 insertions(+), 221 deletions(-)

diff --git a/app/assignment/components/AssignmentSettingsModal.tsx b/app/assignment/components/AssignmentSettingsModal.tsx
index b5a5e440..03a9a014 100644
--- a/app/assignment/components/AssignmentSettingsModal.tsx
+++ b/app/assignment/components/AssignmentSettingsModal.tsx
@@ -196,7 +196,7 @@ export function AssignmentSettingsModal({
                     options={memberOptions}
                     placeholder="選択..."
                     disabled={isLoading}
-                    className="!text-sm !py-2"
+                    className="text-sm! py-2!"
                   />
                   <Select
                     label="メンバー2"
@@ -205,7 +205,7 @@ export function AssignmentSettingsModal({
                     options={memberOptions}
                     placeholder="選択..."
                     disabled={isLoading}
-                    className="!text-sm !py-2"
+                    className="text-sm! py-2!"
                   />
                 </div>
 
@@ -247,7 +247,7 @@ export function AssignmentSettingsModal({
                           size="sm"
                           onClick={() => handleDelete(exclusion.id)}
                           disabled={isLoading}
-                          className="!p-1.5 !min-h-0 !text-red-500 hover:!text-red-700 hover:!bg-red-50"
+                          className="!p-1.5 min-h-0! !text-red-500 hover:!text-red-700 hover:!bg-red-50"
                           aria-label="削除"
                         >
                           <HiTrash className="w-4 h-4" />
diff --git a/app/assignment/components/assignment-table/DesktopTableBody.tsx b/app/assignment/components/assignment-table/DesktopTableBody.tsx
index 580750af..ef954c62 100644
--- a/app/assignment/components/assignment-table/DesktopTableBody.tsx
+++ b/app/assignment/components/assignment-table/DesktopTableBody.tsx
@@ -116,10 +116,10 @@ export const DesktopTableBody: React.FC<DesktopTableBodyProps> = ({
                     onTouchMove={handleCellTouchMove}
                     onClick={() => handleCellClick(team.id, label.id)}
                     className={`
-                                                !min-h-0 w-full py-2 md:py-3 px-1 !rounded-lg text-sm md:text-base !font-bold text-center transition-all truncate select-none
+                                                min-h-0! w-full py-2 md:py-3 px-1 rounded-lg! text-sm md:text-base !font-bold text-center transition-all truncate select-none
                                                 ${member && isSelected ? 'shadow-md scale-105' : ''} ${
-                                                  !member && isSelected ? '!bg-surface !border-spot' : ''
-                                                } ${!member && !isSelected ? '!text-ink-muted !bg-ground !border-dashed !border-edge-strong hover:!bg-ground/80 !shadow-none' : ''}
+                                                  !member && isSelected ? 'bg-surface! !border-spot' : ''
+                                                } ${!member && !isSelected ? '!text-ink-muted !bg-ground !border-dashed border-edge-strong! hover:!bg-ground/80 !shadow-none' : ''}
                                             `}
                   >
                     {member ? member.name : '未割当'}
diff --git a/app/assignment/components/assignment-table/DesktopTableFooter.tsx b/app/assignment/components/assignment-table/DesktopTableFooter.tsx
index 7815753e..a4bb8360 100644
--- a/app/assignment/components/assignment-table/DesktopTableFooter.tsx
+++ b/app/assignment/components/assignment-table/DesktopTableFooter.tsx
@@ -49,7 +49,7 @@ export const DesktopTableFooter: React.FC<DesktopTableFooterProps> = ({
               if (e.key === 'Enter') handleAddTaskLabel();
             }}
             placeholder={`${headerLabels.left}を入力`}
-            className="!p-2 !text-sm !min-h-0 !text-center"
+            className="!p-2 text-sm! min-h-0! !text-center"
           />
         </div>
       ) : (
@@ -66,7 +66,7 @@ export const DesktopTableFooter: React.FC<DesktopTableFooterProps> = ({
             size="sm"
             onClick={handleAddTaskLabel}
             disabled={!newLeftLabel.trim()}
-            className="!rounded-full !px-4 shadow-md active:scale-95"
+            className="rounded-full! px-4! shadow-md active:scale-95"
           >
             <MdAdd size={18} />
             <span className="font-medium text-sm">担当を追加</span>
@@ -77,7 +77,7 @@ export const DesktopTableFooter: React.FC<DesktopTableFooterProps> = ({
           size="sm"
           onClick={onShuffle}
           disabled={isShuffleDisabled}
-          className="!rounded-full !px-4 shadow-md active:scale-95"
+          className="rounded-full! px-4! shadow-md active:scale-95"
         >
           <PiShuffleBold className="w-5 h-5" />
           <span className="font-medium text-sm">シャッフル</span>
@@ -93,7 +93,7 @@ export const DesktopTableFooter: React.FC<DesktopTableFooterProps> = ({
               if (e.key === 'Enter') handleAddTaskLabel();
             }}
             placeholder={`${headerLabels.right}を入力`}
-            className="!min-w-0 !p-2 !text-center !text-sm !min-h-0 w-full"
+            className="min-w-0! !p-2 !text-center text-sm! min-h-0! w-full"
           />
         </div>
       ) : (
diff --git a/app/assignment/components/assignment-table/DesktopTableHeader.tsx b/app/assignment/components/assignment-table/DesktopTableHeader.tsx
index b14253b9..d7c843ae 100644
--- a/app/assignment/components/assignment-table/DesktopTableHeader.tsx
+++ b/app/assignment/components/assignment-table/DesktopTableHeader.tsx
@@ -71,7 +71,7 @@ export const DesktopTableHeader: React.FC<DesktopTableHeaderProps> = ({
           if (e.key === 'Escape') setIsAddingTeam(false);
         }}
         variant="dark"
-        className="!min-h-[30px] !w-20 !border-none !px-1 !py-1 !text-sm"
+        className="!min-h-[30px] !w-20 !border-none !px-1 py-1! text-sm!"
       />
       <IconButton variant="primary" size="sm" onClick={handleAddTeam} title="班を追加">
         <MdAdd size={18} />
@@ -142,7 +142,7 @@ export const DesktopTableHeader: React.FC<DesktopTableHeaderProps> = ({
             variant="outline"
             size="sm"
             onClick={() => setIsAddingTeam(true)}
-            className="!min-h-[34px] !text-sm md:!text-base !gap-1 !bg-transparent"
+            className="!min-h-[34px] text-sm! md:!text-base gap-1! !bg-transparent"
           >
             <MdAdd className="md:w-5 md:h-5" /> 最初の班を追加
           </Button>
@@ -170,7 +170,7 @@ export const DesktopTableHeader: React.FC<DesktopTableHeaderProps> = ({
                 onKeyDown={(e) => e.key === 'Enter' && handleUpdateTeam(team.id)}
                 onBlur={() => handleUpdateTeam(team.id)}
                 variant="light"
-                className="!text-sm md:!text-base"
+                className="text-sm! md:!text-base"
               />
             ) : (
               <div
diff --git a/app/assignment/components/assignment-table/MobileListView.tsx b/app/assignment/components/assignment-table/MobileListView.tsx
index cbbb8afd..153cf5d8 100644
--- a/app/assignment/components/assignment-table/MobileListView.tsx
+++ b/app/assignment/components/assignment-table/MobileListView.tsx
@@ -68,20 +68,20 @@ export const MobileListView: React.FC<MobileListViewProps> = ({
                     value={editLeftLabel}
                     onChange={(e) => setEditLeftLabel(e.target.value)}
                     placeholder={headerLabels.left}
-                    className="!p-2 !text-lg !font-bold !min-h-0"
+                    className="!p-2 !text-lg !font-bold min-h-0!"
                   />
                   <div className="flex gap-2">
                     <Input
                       value={editRightLabel}
                       onChange={(e) => setEditRightLabel(e.target.value)}
                       placeholder={headerLabels.right}
-                      className="flex-1 !p-2 !text-sm !min-h-0"
+                      className="flex-1 !p-2 text-sm! min-h-0!"
                     />
                     <Button
                       variant="success"
                       size="sm"
                       onClick={() => saveLabel(label.id)}
-                      className="!p-2 !min-h-0 shrink-0"
+                      className="!p-2 min-h-0! shrink-0"
                     >
                       <MdCheck size={20} />
                     </Button>
@@ -89,7 +89,7 @@ export const MobileListView: React.FC<MobileListViewProps> = ({
                       variant="danger"
                       size="sm"
                       onClick={() => handleDeleteTaskLabel(label.id)}
-                      className="!p-2 !min-h-0 shrink-0"
+                      className="!p-2 min-h-0! shrink-0"
                     >
                       <MdDelete size={20} />
                     </Button>
@@ -144,15 +144,15 @@ export const MobileListView: React.FC<MobileListViewProps> = ({
                         onTouchEnd={handleCellTouchEnd}
                         onTouchMove={handleCellTouchMove}
                         onClick={() => handleCellClick(team.id, label.id)}
-                        className={`!min-h-0 !rounded-md !px-2 !py-3 !shadow-none truncate select-none ${
+                        className={`min-h-0! rounded-md! !px-2 py-3! !shadow-none truncate select-none ${
                           member && isSelected
                             ? '!border-spot !bg-spot !text-on-spot ring-2 ring-spot/20'
                             : member
-                              ? '!border-edge !bg-surface hover:!bg-spot-surface'
+                              ? 'border-edge! bg-surface! hover:!bg-spot-surface'
                               : ''
                         } ${
-                          !member && isSelected ? '!bg-surface !border-spot' : ''
-                        } ${!member && !isSelected ? '!border-dashed !border-edge-strong !bg-surface !text-ink-muted' : ''}`}
+                          !member && isSelected ? 'bg-surface! !border-spot' : ''
+                        } ${!member && !isSelected ? '!border-dashed border-edge-strong! bg-surface! !text-ink-muted' : ''}`}
                       >
                         {member ? member.name : '未割当'}
                       </Button>
diff --git a/app/assignment/components/assignment-table/modals/ContextMenuModal.tsx b/app/assignment/components/assignment-table/modals/ContextMenuModal.tsx
index fc78f351..af69fae9 100644
--- a/app/assignment/components/assignment-table/modals/ContextMenuModal.tsx
+++ b/app/assignment/components/assignment-table/modals/ContextMenuModal.tsx
@@ -67,7 +67,7 @@ export function ContextMenuModal({ data, state, setMemberMenu, callbacks }: Cont
                           setCurrent(null);
                         }
                       }}
-                      className="!py-2"
+                      className="py-2!"
                     />
                   </div>
                   <IconButton
diff --git a/app/assignment/components/assignment-table/modals/HeightSettingsModal.tsx b/app/assignment/components/assignment-table/modals/HeightSettingsModal.tsx
index c22aa5c7..8fbeff45 100644
--- a/app/assignment/components/assignment-table/modals/HeightSettingsModal.tsx
+++ b/app/assignment/components/assignment-table/modals/HeightSettingsModal.tsx
@@ -130,7 +130,7 @@ function HeightSettingsModalContent({
               setHeightConfig(null);
             }
           }}
-          className="!flex !items-center !justify-center !gap-1"
+          className="flex! items-center! !justify-center gap-1!"
         >
           <MdDelete size={18} />
           削除
diff --git a/app/assignment/components/assignment-table/modals/MemberSelectionModal.tsx b/app/assignment/components/assignment-table/modals/MemberSelectionModal.tsx
index e5527155..dc01bd84 100644
--- a/app/assignment/components/assignment-table/modals/MemberSelectionModal.tsx
+++ b/app/assignment/components/assignment-table/modals/MemberSelectionModal.tsx
@@ -45,7 +45,7 @@ export function MemberSelectionModal({ data, state, callbacks }: MemberSelection
                         handleAddMember(current.taskLabelId, current.teamId);
                       }
                     }}
-                    className="!py-2 !text-sm"
+                    className="py-2! text-sm!"
                     autoFocus
                   />
                 </div>
@@ -71,7 +71,7 @@ export function MemberSelectionModal({ data, state, callbacks }: MemberSelection
                       callbacks.onUpdateMember(createEmptyAssignment(current.teamId, current.taskLabelId), member.id);
                       setCurrent(null);
                     }}
-                    className="flex-1 !justify-start !text-left !text-ink hover:!bg-ground"
+                    className="flex-1 !justify-start text-left! !text-ink hover:bg-ground!"
                   >
                     {member.name}
                   </Button>
diff --git a/app/assignment/components/assignment-table/modals/TeamActionModal.tsx b/app/assignment/components/assignment-table/modals/TeamActionModal.tsx
index a4f22783..e93ae669 100644
--- a/app/assignment/components/assignment-table/modals/TeamActionModal.tsx
+++ b/app/assignment/components/assignment-table/modals/TeamActionModal.tsx
@@ -151,7 +151,7 @@ function TeamActionModalContent({
           size="sm"
           fullWidth
           onClick={handleDeleteTeamFromModal}
-          className="!flex !items-center !justify-center !gap-1"
+          className="flex! items-center! !justify-center gap-1!"
         >
           <MdDelete size={18} />
           削除
diff --git a/app/assignment/page.tsx b/app/assignment/page.tsx
index 8785e1a8..8650938b 100644
--- a/app/assignment/page.tsx
+++ b/app/assignment/page.tsx
@@ -73,7 +73,7 @@ export default function AssignmentPage() {
             variant="outline"
             size="sm"
             onClick={() => setIsSettingsModalOpen(true)}
-            className="!rounded-full !px-3 !py-2 shadow-md !bg-surface !text-ink-sub hover:!bg-ground !border !border-edge-strong"
+            className="rounded-full! px-3! py-2! shadow-md bg-surface! text-ink-sub! hover:bg-ground! border! border-edge-strong!"
             title="詳細設定"
           >
             <HiCog className="w-5 h-5" />
@@ -114,8 +114,8 @@ export default function AssignmentPage() {
           variant={data.manager ? 'outline' : 'primary'}
           size="md"
           onClick={() => setIsManagerDialogOpen(true)}
-          className={`!flex !items-center !gap-2 !px-4 !py-3 !rounded-lg shadow-lg ${
-            data.manager ? '!bg-surface hover:!bg-ground !border-edge' : ''
+          className={`flex! items-center! gap-2! px-4! py-3! rounded-lg! shadow-lg ${
+            data.manager ? 'bg-surface! hover:bg-ground! border-edge!' : ''
           }`}
         >
           {data.manager ? (
diff --git a/app/clock/page.tsx b/app/clock/page.tsx
index a2dfba73..54ee8278 100644
--- a/app/clock/page.tsx
+++ b/app/clock/page.tsx
@@ -258,7 +258,7 @@ export default function ClockPage() {
                 variant="primary"
                 size="sm"
                 onClick={enableAudio}
-                className="col-span-2 mt-1 w-full !min-h-11 !px-4 sm:col-span-1 sm:mt-0 sm:w-auto"
+                className="col-span-2 mt-1 w-full !min-h-11 px-4! sm:col-span-1 sm:mt-0 sm:w-auto"
                 style={{
                   backgroundColor: colors.accent,
                   color: '#FFFFFF',
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index e5496045..65d95ca7 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -121,7 +121,7 @@ export default function ContactPage() {
             {/* エラーメッセージ */}
             {status === 'error' && errorMessage && (
               <div className="mb-6 p-4 bg-danger-subtle border border-danger rounded-lg flex items-start gap-3">
-                <HiExclamationCircle className="h-5 w-5 text-danger flex-shrink-0 mt-0.5" />
+                <HiExclamationCircle className="h-5 w-5 text-danger shrink-0 mt-0.5" />
                 <div>
                   <p className="text-danger font-medium">エラーが発生しました</p>
                   <p className="text-danger text-sm mt-1">{errorMessage}</p>
diff --git a/app/defect-beans/page.tsx b/app/defect-beans/page.tsx
index 01ce03f6..cc30a79a 100644
--- a/app/defect-beans/page.tsx
+++ b/app/defect-beans/page.tsx
@@ -190,7 +190,7 @@ export default function DefectBeansPage() {
                 size="sm"
                 onClick={toggleCompareMode}
                 title={compareMode ? '選択モード' : '比較モード'}
-                className="!px-3 !py-2 gap-1.5"
+                className="px-3! py-2! gap-1.5"
               >
                 <MdCompareArrows className="h-5 w-5" />
                 <span className="text-xs sm:text-sm">{compareMode ? '選択モード' : '比較'}</span>
@@ -201,7 +201,7 @@ export default function DefectBeansPage() {
                   size="sm"
                   onClick={handleShowCompare}
                   title="比較を表示"
-                  className="!px-3 !py-2 gap-1.5"
+                  className="px-3! py-2! gap-1.5"
                 >
                   比較 ({selectedIds.size})
                 </Button>
@@ -212,7 +212,7 @@ export default function DefectBeansPage() {
                   size="sm"
                   onClick={() => setShowAddForm(true)}
                   title="欠点豆を追加"
-                  className="!px-3 !py-2 gap-1.5"
+                  className="px-3! py-2! gap-1.5"
                 >
                   <HiPlus className="h-5 w-5" />
                   <span className="text-xs sm:text-sm">追加</span>
diff --git a/app/drip-guide/page.tsx b/app/drip-guide/page.tsx
index 1bbedcfc..a8426407 100644
--- a/app/drip-guide/page.tsx
+++ b/app/drip-guide/page.tsx
@@ -21,7 +21,7 @@ export default function DripGuidePage() {
         right={
           <Link
             href="/drip-guide/new"
-            className="inline-flex items-center gap-2 bg-btn-primary hover:bg-btn-primary-hover text-btn-primary-text px-4 py-2 rounded-lg font-semibold transition-colors shadow-sm min-h-[44px]"
+            className="inline-flex items-center gap-2 bg-btn-primary hover:bg-btn-primary-hover text-btn-primary-text px-4 py-2 rounded-lg font-semibold transition-colors shadow-sm min-h-11"
           >
             <HiPlus size={20} />
             <span className="hidden sm:inline">新規レシピ</span>
diff --git a/app/error.tsx b/app/error.tsx
index c5ee7928..478c1ff0 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -16,7 +16,7 @@ export default function Error({ reset }: { error: Error & { digest?: string }; r
         </Button>
         <Link
           href="/"
-          className="min-h-[44px] px-5 rounded-xl border border-edge text-ink text-[15px] font-semibold flex items-center"
+          className="min-h-11 px-5 rounded-xl border border-edge text-ink text-[15px] font-semibold flex items-center"
         >
           ホームへ
         </Link>
diff --git a/app/inventory/page.tsx b/app/inventory/page.tsx
index 7075fccb..b789dfe3 100644
--- a/app/inventory/page.tsx
+++ b/app/inventory/page.tsx
@@ -131,7 +131,7 @@ export default function InventoryPage() {
                 setEditing(null);
                 setModalOpen(true);
               }}
-              className="!min-h-0 shrink-0 gap-1.5 !rounded-[10px] !px-4 !py-2 !text-sm"
+              className="min-h-0! shrink-0 gap-1.5 !rounded-[10px] px-4! py-2! text-sm!"
             >
               <MdAdd className="h-4 w-4" aria-hidden="true" />
               品目を追加
diff --git a/app/page.tsx b/app/page.tsx
index a33e9664..19faee10 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -194,7 +194,7 @@ export default function HomePage(_props: HomePageProps = {}) {
   return (
     <div
       className={`h-dvh flex flex-col overflow-hidden animate-home-page relative transition-colors duration-1000 bg-page text-ink ${
-        isChristmasMode ? 'bg-[radial-gradient(circle_at_center,_#0a2f1a_0%,_#051a0e_100%)]' : ''
+        isChristmasMode ? 'bg-[radial-gradient(circle_at_center,#0a2f1a_0%,#051a0e_100%)]' : ''
       }`}
     >
       {isChristmasMode && <Snowfall />}
@@ -212,7 +212,7 @@ export default function HomePage(_props: HomePageProps = {}) {
 
       {/* メインコンテンツ */}
       <main className="relative z-10 mx-auto w-full max-w-6xl px-4 pt-2 pb-2 sm:px-6 sm:pt-3 sm:pb-3 flex-1 min-h-0">
-        <div className="flex h-full flex-col gap-2 md:grid md:h-auto md:grid-cols-4 md:gap-4 md:[grid-auto-rows:1fr]">
+        <div className="flex h-full flex-col gap-2 md:grid md:h-auto md:grid-cols-4 md:gap-4 md:auto-rows-[1fr]">
           {visibleActions.map(({ key, title, label, description, href, icon: DefaultIcon, badge }, index) => {
             const Icon = isChristmasMode ? CHRISTMAS_ICONS[key] || DefaultIcon : DefaultIcon;
 
diff --git a/app/schedule/page.tsx b/app/schedule/page.tsx
index 2dff4fe6..d2f2f9d1 100644
--- a/app/schedule/page.tsx
+++ b/app/schedule/page.tsx
@@ -67,7 +67,7 @@ export default function SchedulePage() {
             size="sm"
             onClick={moveToPreviousDay}
             aria-label="前日"
-            className="active:scale-90 transition-transform !min-h-0 !min-w-0 !h-8 !w-8 !p-1"
+            className="active:scale-90 transition-transform min-h-0! min-w-0! !h-8 !w-8 p-1!"
           >
             <HiChevronLeft className="h-4 w-4" />
           </IconButton>
@@ -76,7 +76,7 @@ export default function SchedulePage() {
             size="sm"
             onClick={() => setIsDatePickerOpen(true)}
             aria-label="日付を選択"
-            className="!min-h-0 !px-2 !py-1"
+            className="min-h-0! !px-2 py-1!"
           >
             <span className="text-[15px] font-bold tracking-tight font-sans whitespace-nowrap leading-tight text-ink">
               {formatDateString(selectedDate)}
@@ -88,7 +88,7 @@ export default function SchedulePage() {
             onClick={moveToNextDay}
             disabled={isMaxDate}
             aria-label="翌日"
-            className="active:scale-90 transition-transform !min-h-0 !min-w-0 !h-8 !w-8 !p-1"
+            className="active:scale-90 transition-transform min-h-0! min-w-0! !h-8 !w-8 p-1!"
           >
             <HiChevronRight className="h-4 w-4" />
           </IconButton>
@@ -96,7 +96,7 @@ export default function SchedulePage() {
       </div>
       <div className="w-full flex-1 flex flex-col min-h-0 lg:max-w-7xl lg:mx-auto">
         {/* 日付ナビゲーション */}
-        <div className="mb-2 flex-shrink-0 flex justify-center">
+        <div className="mb-2 shrink-0 flex justify-center">
           {/* スマホレイアウト：FloatingNav右に統合済み */}
           {/* タブレット・デスクトップレイアウト：横並び */}
           <div className="hidden sm:flex flex-row items-center gap-3 md:gap-4 px-5 py-2 md:px-6 md:py-2.5 rounded-2xl shadow-lg bg-surface border border-edge">
@@ -117,7 +117,7 @@ export default function SchedulePage() {
                 aria-label="日付を選択"
                 className="gap-2 md:gap-2.5"
               >
-                <HiCalendar className="h-5 w-5 md:h-6 md:w-6 flex-shrink-0 text-spot" />
+                <HiCalendar className="h-5 w-5 md:h-6 md:w-6 shrink-0 text-spot" />
                 <span className="text-base md:text-lg font-bold tracking-tight font-sans whitespace-nowrap leading-tight text-ink">
                   {formatDateString(selectedDate)}
                 </span>
@@ -133,16 +133,16 @@ export default function SchedulePage() {
                 <HiChevronRight className="h-5 w-5 md:h-6 md:w-6" />
               </IconButton>
             </div>
-            <div className="flex-shrink-0 h-7 md:h-8 flex items-center">
+            <div className="shrink-0 h-7 md:h-8 flex items-center">
               <div className="w-px h-full bg-edge"></div>
             </div>
             <div className="flex items-center gap-2 md:gap-2.5">
-              <HiClock className="h-5 w-5 md:h-6 md:w-6 flex-shrink-0 text-spot" />
+              <HiClock className="h-5 w-5 md:h-6 md:w-6 shrink-0 text-spot" />
               <span className="text-base md:text-lg font-bold tracking-tight font-sans whitespace-nowrap leading-tight text-ink">
                 {formatTime(currentTime)}
               </span>
             </div>
-            <div className="flex-shrink-0 h-7 md:h-8 flex items-center">
+            <div className="shrink-0 h-7 md:h-8 flex items-center">
               <div className="w-px h-full bg-edge"></div>
             </div>
             <IconButton variant="ghost" size="md" onClick={() => setIsOCROpen(true)} aria-label="画像から読み取り">
@@ -154,10 +154,10 @@ export default function SchedulePage() {
         {/* タブナビゲーション（スマホ版：画面下部に固定） */}
         <div className="lg:hidden fixed bottom-0 left-0 right-0 z-20 px-4 pb-4">
           <div className="flex items-end gap-3 justify-center">
-            <TabsList className="flex-1 !rounded-2xl shadow-xl !p-1 sm:!p-1.5 !bg-surface border border-edge">
+            <TabsList className="flex-1 rounded-2xl! shadow-xl p-1! sm:!p-1.5 bg-surface! border border-edge">
               <TabsTrigger
                 value="today"
-                className="py-3.5 sm:py-4 text-xs sm:text-sm font-semibold !rounded-xl aria-selected:!bg-spot aria-selected:!text-on-spot aria-selected:!shadow-md"
+                className="py-3.5 sm:py-4 text-xs sm:text-sm font-semibold rounded-xl! aria-selected:!bg-spot aria-selected:!text-on-spot aria-selected:!shadow-md"
               >
                 本日のスケジュール
               </TabsTrigger>
@@ -166,14 +166,14 @@ export default function SchedulePage() {
                 variant="primary"
                 size="md"
                 onClick={() => setIsOCROpen(true)}
-                className="relative z-20 -my-3 mx-1 flex-shrink-0 !w-12 !h-12 !rounded-full shadow-lg !bg-spot !text-on-spot active:scale-95 transition-transform ring-4 ring-surface"
+                className="relative z-20 -my-3 mx-1 shrink-0 !w-12 !h-12 rounded-full! shadow-lg !bg-spot !text-on-spot active:scale-95 transition-transform ring-4 ring-surface"
                 aria-label="画像から読み取り"
               >
                 <HiCamera className="h-5 w-5" />
               </IconButton>
               <TabsTrigger
                 value="roast"
-                className="py-3.5 sm:py-4 text-xs sm:text-sm font-semibold !rounded-xl aria-selected:!bg-spot aria-selected:!text-on-spot aria-selected:!shadow-md"
+                className="py-3.5 sm:py-4 text-xs sm:text-sm font-semibold rounded-xl! aria-selected:!bg-spot aria-selected:!text-on-spot aria-selected:!shadow-md"
               >
                 ローストスケジュール
               </TabsTrigger>
diff --git a/app/tasting/page.tsx b/app/tasting/page.tsx
index 17aced77..c8e96f80 100644
--- a/app/tasting/page.tsx
+++ b/app/tasting/page.tsx
@@ -267,7 +267,7 @@ function TastingPageContent() {
                   size="sm"
                   onClick={() => router.push('/tasting/sessions/new')}
                   aria-label="新規セッション作成"
-                  className="!px-3 !py-2 gap-1.5 shadow-md"
+                  className="px-3! py-2! gap-1.5 shadow-md"
                 >
                   <HiPlus size={20} />
                   <span className="text-xs sm:text-sm whitespace-nowrap">セッションを作成</span>
diff --git a/components/DefectBeanCard.tsx b/components/DefectBeanCard.tsx
index 2014e147..eb6e958c 100644
--- a/components/DefectBeanCard.tsx
+++ b/components/DefectBeanCard.tsx
@@ -61,7 +61,7 @@ export function DefectBeanCard({
       >
         {/* 画像 */}
         <div
-          className="relative w-full aspect-square cursor-pointer flex-shrink-0 p-2.5 bg-gradient-to-br from-stone-50 via-amber-50/30 to-stone-100"
+          className="relative w-full aspect-square cursor-pointer shrink-0 p-2.5 bg-linear-to-br from-stone-50 via-amber-50/30 to-stone-100"
           onClick={(e) => {
             e.stopPropagation(); // カードクリックを防ぐ
             setShowImageModal(true);
@@ -72,7 +72,7 @@ export function DefectBeanCard({
           {/* 内側の細い枠（上品なゴールド、光沢感） */}
           <div className="absolute inset-2 border-[1.5px] border-amber-500/70 rounded-lg shadow-[inset_0_1px_2px_rgba(255,255,255,0.3),inset_0_-1px_2px_rgba(0,0,0,0.1)]"></div>
           {/* 画像コンテナ */}
-          <div className="absolute inset-[10px] bg-surface-alt rounded-lg overflow-hidden shadow-inner">
+          <div className="absolute inset-2.5 bg-surface-alt rounded-lg overflow-hidden shadow-inner">
             <Image
               src={defectBean.imageUrl}
               alt={defectBean.name}
@@ -96,7 +96,7 @@ export function DefectBeanCard({
         {/* 情報 */}
         <div className="p-2 flex flex-col flex-1 min-h-0">
           {/* 名称 */}
-          <div className="flex-shrink-0">
+          <div className="shrink-0">
             <div className="flex items-start justify-between gap-2">
               <h3 className="text-sm font-semibold text-ink mb-1">{defectBean.name}</h3>
             </div>
@@ -106,21 +106,21 @@ export function DefectBeanCard({
           <div className="space-y-1.5 flex-1 min-h-0">
             <div>
               <h4 className="text-xs font-semibold text-ink-sub mb-0.5">特徴</h4>
-              <p className="text-xs text-ink-sub whitespace-pre-wrap line-clamp-3 min-h-[2.5rem]">
+              <p className="text-xs text-ink-sub whitespace-pre-wrap line-clamp-3 min-h-10">
                 {defectBean.characteristics || <span className="text-ink-muted">未入力</span>}
               </p>
             </div>
 
             <div>
               <h4 className="text-xs font-semibold text-ink-sub mb-0.5">味への影響</h4>
-              <p className="text-xs text-ink-sub whitespace-pre-wrap line-clamp-3 min-h-[2.5rem]">
+              <p className="text-xs text-ink-sub whitespace-pre-wrap line-clamp-3 min-h-10">
                 {defectBean.tasteImpact || <span className="text-ink-muted">未入力</span>}
               </p>
             </div>
 
             <div>
               <h4 className="text-xs font-semibold text-ink-sub mb-0.5">省く理由</h4>
-              <p className="text-xs text-ink-sub whitespace-pre-wrap line-clamp-3 min-h-[2.5rem]">
+              <p className="text-xs text-ink-sub whitespace-pre-wrap line-clamp-3 min-h-10">
                 {defectBean.removalReason || <span className="text-ink-muted">未入力</span>}
               </p>
             </div>
@@ -129,29 +129,29 @@ export function DefectBeanCard({
           {/* 設定切り替え */}
           {onToggleSetting && (
             <div
-              className="flex gap-1.5 pt-1.5 border-t border-edge mt-auto flex-shrink-0"
+              className="flex gap-1.5 pt-1.5 border-t border-edge mt-auto shrink-0"
               onClick={(e) => e.stopPropagation()}
             >
               <Button
                 variant="danger"
                 size="sm"
                 onClick={() => handleToggleSetting(true)}
-                className={`flex-1 !px-1.5 sm:!px-2 !py-1.5 !text-[10px] sm:!text-xs !min-h-[36px] gap-0.5 sm:gap-1 whitespace-nowrap ${
-                  shouldRemove === true ? '' : '!bg-gray-200 !text-gray-700 hover:!bg-gray-300'
+                className={`flex-1 px-1.5! sm:px-2! py-1.5! text-[10px]! sm:text-xs! min-h-9! gap-0.5 sm:gap-1 whitespace-nowrap ${
+                  shouldRemove === true ? '' : 'bg-gray-200! text-gray-700! hover:bg-gray-300!'
                 }`}
               >
-                <HiXCircle className="h-3 w-3 sm:h-4 sm:w-4 flex-shrink-0" />
+                <HiXCircle className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
                 <span>省く</span>
               </Button>
               <Button
                 variant="success"
                 size="sm"
                 onClick={() => handleToggleSetting(false)}
-                className={`flex-1 !px-1.5 sm:!px-2 !py-1.5 !text-[10px] sm:!text-xs !min-h-[36px] gap-0.5 sm:gap-1 whitespace-nowrap ${
-                  shouldRemove === false ? '' : '!bg-gray-200 !text-gray-700 hover:!bg-gray-300'
+                className={`flex-1 px-1.5! sm:px-2! py-1.5! text-[10px]! sm:text-xs! min-h-9! gap-0.5 sm:gap-1 whitespace-nowrap ${
+                  shouldRemove === false ? '' : 'bg-gray-200! text-gray-700! hover:bg-gray-300!'
                 }`}
               >
-                <HiCheck className="h-3 w-3 sm:h-4 sm:w-4 flex-shrink-0" />
+                <HiCheck className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
                 <span>省かない</span>
               </Button>
             </div>
diff --git a/components/DefectBeanDetail.tsx b/components/DefectBeanDetail.tsx
index b6d63ed5..a1823124 100644
--- a/components/DefectBeanDetail.tsx
+++ b/components/DefectBeanDetail.tsx
@@ -52,8 +52,8 @@ export function DefectBeanDetail({
 
         {/* 画像（拡大表示可能） */}
         <div
-          className={`relative w-full mx-auto aspect-square cursor-pointer p-2.5 bg-gradient-to-br from-stone-50 via-amber-50/30 to-stone-100 ${
-            isCompareMode ? 'max-w-[280px] sm:max-w-[320px]' : 'max-w-xs'
+          className={`relative w-full mx-auto aspect-square cursor-pointer p-2.5 bg-linear-to-br from-stone-50 via-amber-50/30 to-stone-100 ${
+            isCompareMode ? 'max-w-70 sm:max-w-[320px]' : 'max-w-xs'
           }`}
           onClick={() => setShowImageModal(true)}
         >
@@ -62,7 +62,7 @@ export function DefectBeanDetail({
           {/* 内側の細い枠（上品なゴールド、光沢感） */}
           <div className="absolute inset-2 border-[1.5px] border-amber-500/70 rounded-lg shadow-[inset_0_1px_2px_rgba(255,255,255,0.3),inset_0_-1px_2px_rgba(0,0,0,0.1)]"></div>
           {/* 画像コンテナ */}
-          <div className="absolute inset-[10px] bg-gray-100 rounded-lg overflow-hidden shadow-inner">
+          <div className="absolute inset-2.5 bg-gray-100 rounded-lg overflow-hidden shadow-inner">
             <Image
               src={defectBean.imageUrl}
               alt={defectBean.name}
diff --git a/components/Loading.tsx b/components/Loading.tsx
index 0a4b40c4..21d22722 100644
--- a/components/Loading.tsx
+++ b/components/Loading.tsx
@@ -59,7 +59,7 @@ export function Loading({ message = '読み込み中...', fullScreen = true }: L
       <div className="text-center">
         <div className="flex justify-center mb-4">
           {isLoading || !animationData ? (
-            <div className="w-[200px] h-[200px] flex items-center justify-center">
+            <div className="w-50 h-50 flex items-center justify-center">
               <div className="text-ink-muted">読み込み中...</div>
             </div>
           ) : (
diff --git a/components/OCRRoastScheduleEditor.tsx b/components/OCRRoastScheduleEditor.tsx
index c5c80da1..ffc3b0e8 100644
--- a/components/OCRRoastScheduleEditor.tsx
+++ b/components/OCRRoastScheduleEditor.tsx
@@ -130,27 +130,27 @@ export function OCRRoastScheduleEditor({
                     </div>
                     <div className="flex flex-wrap gap-1.5">
                       {schedule.beanName && (
-                        <Badge size="sm" variant="secondary" className="!text-[10px]">
+                        <Badge size="sm" variant="secondary" className="text-[10px]!">
                           豆: {schedule.beanName}
                         </Badge>
                       )}
                       {schedule.beanName2 && schedule.blendRatio && (
-                        <Badge size="sm" variant="secondary" className="!text-[10px]">
+                        <Badge size="sm" variant="secondary" className="text-[10px]!">
                           副豆 {schedule.beanName2}（{schedule.blendRatio}）
                         </Badge>
                       )}
                       {schedule.weight && (
-                        <Badge size="sm" variant="secondary" className="!text-[10px]">
+                        <Badge size="sm" variant="secondary" className="text-[10px]!">
                           {schedule.weight}g
                         </Badge>
                       )}
                       {schedule.roastLevel && (
-                        <Badge size="sm" variant="coffee" className="!text-[10px]">
+                        <Badge size="sm" variant="coffee" className="text-[10px]!">
                           {schedule.roastLevel}
                         </Badge>
                       )}
                       {schedule.bagCount && (
-                        <Badge size="sm" variant="secondary" className="!text-[10px]">
+                        <Badge size="sm" variant="secondary" className="text-[10px]!">
                           {schedule.bagCount}袋
                         </Badge>
                       )}
@@ -199,7 +199,7 @@ export function OCRRoastScheduleEditor({
           })
         )}
 
-        <Button onClick={handleAdd} variant="primary" size="sm" className="w-full !px-3 !py-2 !min-h-[36px] !text-sm">
+        <Button onClick={handleAdd} variant="primary" size="sm" className="w-full px-3! py-2! min-h-9! text-sm!">
           <HiPlus className="h-5 w-5" />
           <span>ローストスケジュールを追加</span>
         </Button>
diff --git a/components/RoastScheduleMemoDialog.tsx b/components/RoastScheduleMemoDialog.tsx
index 0b2362f5..eb193c79 100644
--- a/components/RoastScheduleMemoDialog.tsx
+++ b/components/RoastScheduleMemoDialog.tsx
@@ -163,7 +163,7 @@ function RoastScheduleMemoDialogInner({
   };
 
   return (
-    <div className="fixed inset-0 bg-black/20 flex items-center justify-center z-[100] p-4" onClick={onCancel}>
+    <div className="fixed inset-0 bg-black/20 flex items-center justify-center z-100 p-4" onClick={onCancel}>
       <div
         className="rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto border-2 bg-overlay border-edge-strong"
         onClick={(e) => e.stopPropagation()}
diff --git a/components/RoastSchedulerTab.tsx b/components/RoastSchedulerTab.tsx
index b4c30acc..d9153a05 100644
--- a/components/RoastSchedulerTab.tsx
+++ b/components/RoastSchedulerTab.tsx
@@ -302,7 +302,7 @@ export function RoastSchedulerTab({
           size="sm"
           onClick={handleAdd}
           aria-label="スケジュールを追加"
-          className="!min-h-0 !py-1.5 !px-3 !text-sm !gap-1"
+          className="min-h-0! py-1.5! px-3! text-sm! gap-1!"
         >
           <HiPlus className="h-3.5 w-3.5" />
           <span>追加</span>
@@ -343,7 +343,7 @@ export function RoastSchedulerTab({
                 size="sm"
                 onClick={handleAdd}
                 aria-label="スケジュールを追加"
-                className="!min-h-0 !py-1.5 !px-3 !text-sm !gap-1"
+                className="min-h-0! py-1.5! px-3! text-sm! gap-1!"
               >
                 <HiPlus className="h-3.5 w-3.5" />
                 <span>追加</span>
diff --git a/components/TastingSessionCardDesktop.tsx b/components/TastingSessionCardDesktop.tsx
index 25997c2e..0fbe68b7 100644
--- a/components/TastingSessionCardDesktop.tsx
+++ b/components/TastingSessionCardDesktop.tsx
@@ -53,7 +53,7 @@ export function TastingSessionCardDesktop({
             <div className="h-full flex flex-col">
               {/* ヘッダー */}
               <div
-                className={`px-8 pt-6 pb-5 border-b border-dashed ${cardBorderClass} flex items-center justify-between flex-shrink-0`}
+                className={`px-8 pt-6 pb-5 border-b border-dashed ${cardBorderClass} flex items-center justify-between shrink-0`}
               >
                 <div className="flex items-center gap-6 flex-1 min-w-0">
                   <div>
@@ -96,7 +96,7 @@ export function TastingSessionCardDesktop({
                 {/* 感想 (左) */}
                 <div className={`flex-1 p-6 border-r border-dashed ${cardBorderClass} relative min-w-0`}>
                   <div className="relative z-10 flex flex-col h-full">
-                    <div className="flex items-center justify-between mb-4 flex-shrink-0">
+                    <div className="flex items-center justify-between mb-4 shrink-0">
                       <div className={`flex items-center gap-2 ${textPrimaryClass}`}>
                         <Quotes size={20} weight="fill" />
                         <h4 className="text-base font-bold">感想</h4>
@@ -138,7 +138,7 @@ export function TastingSessionCardDesktop({
                 </div>
 
                 {/* チャート (右) */}
-                <div className="w-80 flex-shrink-0 p-6 flex flex-col justify-center relative overflow-hidden">
+                <div className="w-80 shrink-0 p-6 flex flex-col justify-center relative overflow-hidden">
                   {recordCount > 0 ? (
                     <div className="space-y-5 w-full relative z-10">
                       {[
@@ -177,7 +177,7 @@ export function TastingSessionCardDesktop({
               </div>
 
               {/* AI分析レポート (下) */}
-              <div className="px-5 py-3 relative flex-shrink-0">
+              <div className="px-5 py-3 relative shrink-0">
                 <div className="relative z-10">
                   {!hasAnalysis && !isAnalyzing && recordCount === 0 && (
                     <div className="flex items-center justify-center py-1">
@@ -201,7 +201,7 @@ export function TastingSessionCardDesktop({
                         e.stopPropagation();
                         setIsAiModalOpen(true);
                       }}
-                      className="w-full !justify-between !px-4 !py-3 !rounded-lg !shadow-sm hover:!shadow-card"
+                      className="w-full !justify-between px-4! py-3! rounded-lg! !shadow-sm hover:!shadow-card"
                     >
                       <div className="flex items-center gap-2">
                         <Notepad size={18} weight="fill" className={iconAccentClass} />
@@ -219,7 +219,7 @@ export function TastingSessionCardDesktop({
 
               {/* フッター */}
               <div
-                className={`px-8 py-2.5 bg-surface border-t ${borderSectionClass} flex justify-between items-center flex-shrink-0`}
+                className={`px-8 py-2.5 bg-surface border-t ${borderSectionClass} flex justify-between items-center shrink-0`}
               >
                 <div className={`flex items-center gap-1.5 text-xs ${textMutedClass}`}>
                   <CalendarBlank size={14} weight="fill" />
@@ -238,7 +238,7 @@ export function TastingSessionCardDesktop({
 
       <AnimatePresence>
         {isAiModalOpen && (
-          <div className="fixed inset-0 z-[100] flex items-center justify-center px-4">
+          <div className="fixed inset-0 z-100 flex items-center justify-center px-4">
             <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
diff --git a/components/TastingSessionCardMobile.tsx b/components/TastingSessionCardMobile.tsx
index e2a6bfe7..00967e9e 100644
--- a/components/TastingSessionCardMobile.tsx
+++ b/components/TastingSessionCardMobile.tsx
@@ -38,13 +38,13 @@ export function TastingSessionCardMobile({
 
   return (
     <>
-      <div className="flex-shrink-0 w-[calc(100vw-2rem)] h-full snap-center" style={{ scrollSnapStop: 'always' }}>
+      <div className="shrink-0 w-[calc(100vw-2rem)] h-full snap-center" style={{ scrollSnapStop: 'always' }}>
         <Link href={`/tasting?sessionId=${session.id}`} className="block h-full">
           <Card variant="hoverable" className="p-0 flex flex-col h-full overflow-hidden shadow-lg">
             <div className="relative z-10 flex flex-col h-full">
               <div className="flex flex-col h-full">
                 {/* ヘッダー（タイトル） */}
-                <div className={`flex-shrink-0 p-5 pb-4 border-b border-dashed ${cardBorderClass}`}>
+                <div className={`shrink-0 p-5 pb-4 border-b border-dashed ${cardBorderClass}`}>
                   <div className="flex items-center gap-3">
                     <div className="flex-1 min-w-0">
                       <h3
@@ -103,7 +103,7 @@ export function TastingSessionCardMobile({
 
                   {/* 横バーチャート（スコア表示） */}
                   {recordCount > 0 && (
-                    <div className={`flex-shrink-0 border-t border-dashed ${cardBorderClass} pt-2 mt-2`}>
+                    <div className={`shrink-0 border-t border-dashed ${cardBorderClass} pt-2 mt-2`}>
                       <div className="space-y-1.5">
                         {[
                           { label: '苦味', value: averageScores.bitterness, color: '#3e2723' },
@@ -113,7 +113,7 @@ export function TastingSessionCardMobile({
                           { label: '香り', value: averageScores.aroma, color: '#00897b' },
                         ].map((item) => (
                           <div key={item.label} className="flex items-center gap-2">
-                            <span className={`text-[12px] font-bold ${textSecondaryClass} w-11 flex-shrink-0`}>
+                            <span className={`text-[12px] font-bold ${textSecondaryClass} w-11 shrink-0`}>
                               {item.label}
                             </span>
                             <div className={`flex-1 h-1.5 ${bgMutedClass} rounded overflow-hidden`}>
@@ -135,7 +135,7 @@ export function TastingSessionCardMobile({
                   )}
 
                   {/* AI分析ボタン */}
-                  <div className={`flex-shrink-0 border-t border-dashed ${cardBorderClass} pt-2 mt-2`}>
+                  <div className={`shrink-0 border-t border-dashed ${cardBorderClass} pt-2 mt-2`}>
                     {!hasAnalysis && !isAnalyzing && recordCount === 0 && (
                       <p className={`text-center text-xs ${textSecondaryClass} italic py-2`}>
                         記録が追加されるとAI分析が開始されます
@@ -158,7 +158,7 @@ export function TastingSessionCardMobile({
                           setAiModalSession(session);
                         }}
                         fullWidth
-                        className="justify-between !px-3 !py-2.5"
+                        className="justify-between px-3! !py-2.5"
                       >
                         <div className="flex items-center gap-2">
                           <Notepad size={18} weight="fill" className={iconAccentClass} />
@@ -178,7 +178,7 @@ export function TastingSessionCardMobile({
       {/* AI分析モーダル */}
       <AnimatePresence>
         {aiModalSession && (
-          <div className="fixed inset-0 z-[100] flex items-end justify-center">
+          <div className="fixed inset-0 z-100 flex items-end justify-center">
             <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
diff --git a/components/TastingSessionCarousel.tsx b/components/TastingSessionCarousel.tsx
index 80b7c4e2..b1c40ae9 100644
--- a/components/TastingSessionCarousel.tsx
+++ b/components/TastingSessionCarousel.tsx
@@ -149,7 +149,7 @@ export function TastingSessionCarousel({
           {sessionData.map(({ session, recordCount, averageScores, comments }) => (
             <div
               key={session.id}
-              className="flex-shrink-0 w-full h-full snap-center flex justify-center"
+              className="shrink-0 w-full h-full snap-center flex justify-center"
               style={{ scrollSnapStop: 'always' }}
             >
               <div className="w-full max-w-5xl h-full">
@@ -168,7 +168,7 @@ export function TastingSessionCarousel({
           ))}
         </div>
 
-        <div className="flex-shrink-0 flex justify-center gap-1.5 py-2">
+        <div className="shrink-0 flex justify-center gap-1.5 py-2">
           {sessionData.map((_, index) => (
             <div
               key={index}
@@ -207,7 +207,7 @@ export function TastingSessionCarousel({
         </div>
 
         {/* ページインジケーター */}
-        <div className="flex-shrink-0 flex justify-center gap-1.5 py-2">
+        <div className="shrink-0 flex justify-center gap-1.5 py-2">
           {sessionData.map((_, index) => (
             <div
               key={index}
diff --git a/components/TastingSessionFilterModal.test.tsx b/components/TastingSessionFilterModal.test.tsx
index d1604958..c57cfa69 100644
--- a/components/TastingSessionFilterModal.test.tsx
+++ b/components/TastingSessionFilterModal.test.tsx
@@ -76,8 +76,8 @@ describe('TastingSessionFilterModal', () => {
         screen.getByRole('button', { name: '深煎り' }),
       ].forEach((chip) => {
         expect(chip).toHaveClass('!min-h-[40px]');
-        expect(chip).toHaveClass('!rounded-lg');
-        expect(chip).toHaveClass('!py-2');
+        expect(chip).toHaveClass('rounded-lg!');
+        expect(chip).toHaveClass('py-2!');
       });
 
       [
@@ -85,7 +85,7 @@ describe('TastingSessionFilterModal', () => {
         screen.getByRole('button', { name: '古い順' }),
         screen.getByRole('button', { name: '名前順' }),
       ].forEach((row) => {
-        expect(row).toHaveClass('!rounded-lg');
+        expect(row).toHaveClass('rounded-lg!');
         expect(row).toHaveClass('!justify-start');
       });
     });
@@ -148,8 +148,8 @@ describe('TastingSessionFilterModal', () => {
 
       inputs.forEach((input) => {
         expect(input).toHaveClass('!min-h-[40px]');
-        expect(input).toHaveClass('!rounded-lg');
-        expect(input).toHaveClass('!text-sm');
+        expect(input).toHaveClass('rounded-lg!');
+        expect(input).toHaveClass('text-sm!');
       });
     });
   });
diff --git a/components/TastingSessionFilterModal.tsx b/components/TastingSessionFilterModal.tsx
index 986da832..3f6e6ee3 100644
--- a/components/TastingSessionFilterModal.tsx
+++ b/components/TastingSessionFilterModal.tsx
@@ -13,7 +13,7 @@ import {
 
 type SortOption = 'newest' | 'oldest' | 'beanName';
 
-const inputControlClassName = '!min-h-[40px] !rounded-lg !py-2 !text-sm';
+const inputControlClassName = '!min-h-[40px] rounded-lg! py-2! text-sm!';
 interface TastingSessionFilterModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -120,7 +120,7 @@ export function TastingSessionFilterModal({
             size="sm"
             type="button"
             onClick={handleReset}
-            className="!min-h-0 !px-0 !py-0 !rounded-none !text-xs !font-semibold !text-spot underline underline-offset-2 hover:!text-spot-hover"
+            className="min-h-0! !px-0 !py-0 !rounded-none !text-xs !font-semibold !text-spot underline underline-offset-2 hover:!text-spot-hover"
           >
             リセット
           </Button>
@@ -128,10 +128,10 @@ export function TastingSessionFilterModal({
       }
       footer={
         <>
-          <Button variant="surface" onClick={onClose} className="flex-1 !min-h-[44px] !rounded-lg !text-sm">
+          <Button variant="surface" onClick={onClose} className="flex-1 !min-h-[44px] rounded-lg! text-sm!">
             キャンセル
           </Button>
-          <Button variant="primary" onClick={handleApply} className="flex-1 !min-h-[44px] !rounded-lg !text-sm">
+          <Button variant="primary" onClick={handleApply} className="flex-1 !min-h-[44px] rounded-lg! text-sm!">
             適用
           </Button>
         </>
@@ -195,7 +195,7 @@ export function TastingSessionFilterModal({
               type="button"
               aria-pressed={tempSelectedRoastLevels.includes(level)}
               onClick={() => handleRoastLevelToggle(level)}
-              className="!min-h-[40px] !px-1.5 !text-[12px] whitespace-nowrap"
+              className="!min-h-[40px] px-1.5! !text-[12px] whitespace-nowrap"
             >
               {level}
             </FilterOptionButton>
diff --git a/components/TastingSessionList.tsx b/components/TastingSessionList.tsx
index ba0b794a..d38e0ef4 100644
--- a/components/TastingSessionList.tsx
+++ b/components/TastingSessionList.tsx
@@ -313,7 +313,7 @@ export function TastingSessionList({
       badge={activeFilterCount}
       title="フィルター"
       aria-label="フィルター"
-      className="!px-3 !py-2 gap-1.5"
+      className="px-3! py-2! gap-1.5"
     >
       <Faders size={20} weight={activeFilterCount > 0 ? 'fill' : 'bold'} />
       <span className="text-xs sm:text-sm whitespace-nowrap">フィルター</span>
@@ -327,14 +327,14 @@ export function TastingSessionList({
           variant="surface"
           size="sm"
           onClick={() => setIsEmptyPreview((current) => !current)}
-          className="!px-3 !py-2 gap-1.5"
+          className="px-3! py-2! gap-1.5"
         >
           <span className="text-xs sm:text-sm whitespace-nowrap">
             {isEmptyPreview ? '元の表示に戻す' : '空表示を確認'}
           </span>
         </Button>
       )}
-      <Button variant="surface" size="sm" onClick={handleAddSampleData} className="!px-3 !py-2 gap-1.5">
+      <Button variant="surface" size="sm" onClick={handleAddSampleData} className="px-3! py-2! gap-1.5">
         <span className="text-xs sm:text-sm whitespace-nowrap">テストデータを追加</span>
       </Button>
     </div>
diff --git a/components/Toast.tsx b/components/Toast.tsx
index dfa7e46f..9cd4c4c0 100644
--- a/components/Toast.tsx
+++ b/components/Toast.tsx
@@ -79,13 +79,13 @@ function ToastItem({ toast, onClose }: { toast: ToastType; onClose: () => void }
       className={`w-full sm:w-auto sm:min-w-[300px] sm:max-w-[420px] rounded-lg border border-edge border-l-4 bg-surface shadow-card px-4 py-3 flex items-start gap-3 pointer-events-auto animate-in slide-in-from-bottom-2 sm:slide-in-from-right-4 fade-in duration-200 ${styles.border}`}
       role="alert"
     >
-      <div className={`flex-shrink-0 mt-0.5 ${styles.icon}`}>{getIcon()}</div>
+      <div className={`shrink-0 mt-0.5 ${styles.icon}`}>{getIcon()}</div>
       <div className="flex-1 text-sm font-medium leading-relaxed text-ink">{toast.message}</div>
       <IconButton
         onClick={onClose}
         variant="ghost"
         size="sm"
-        className="flex-shrink-0 text-ink-muted hover:text-ink !min-h-0 !min-w-0 !p-0"
+        className="shrink-0 text-ink-muted hover:text-ink min-h-0! min-w-0! !p-0"
         aria-label="閉じる"
       >
         <IoClose className="w-4 h-4" />
diff --git a/components/TodaySchedule.tsx b/components/TodaySchedule.tsx
index 8525689a..a30cd411 100644
--- a/components/TodaySchedule.tsx
+++ b/components/TodaySchedule.tsx
@@ -126,7 +126,7 @@ function TodayScheduleInner({ data, onUpdate, selectedDate, currentSchedule, onC
           onHourChange={handleHourInputChange}
           onMinuteChange={handleMinuteInputChange}
           onAdd={addTimeLabel}
-          wrapperClassName="flex items-center gap-1.5 md:gap-2 flex-shrink-0"
+          wrapperClassName="flex items-center gap-1.5 md:gap-2 shrink-0"
         />
       </div>
 
@@ -145,7 +145,7 @@ function TodayScheduleInner({ data, onUpdate, selectedDate, currentSchedule, onC
                 {/* 時間表示 */}
                 <div
                   onClick={() => handleEditGroup(group.time)}
-                  className="flex-shrink-0 w-16 md:w-18 text-center px-2 py-1 rounded-lg text-sm md:text-base font-semibold cursor-pointer transition-colors tabular-nums shadow-sm bg-surface text-ink border border-edge group-hover:border-header-bg/40 group-hover:text-header-bg"
+                  className="shrink-0 w-16 md:w-18 text-center px-2 py-1 rounded-lg text-sm md:text-base font-semibold cursor-pointer transition-colors tabular-nums shadow-sm bg-surface text-ink border border-edge group-hover:border-header-bg/40 group-hover:text-header-bg"
                 >
                   {group.time || '--:--'}
                 </div>
@@ -183,7 +183,7 @@ function TodayScheduleInner({ data, onUpdate, selectedDate, currentSchedule, onC
 
                       {label.assignee && (
                         <div className="flex items-center gap-1.5 mt-1 ml-1">
-                          <HiUser className="h-3.5 w-3.5 flex-shrink-0 text-ink-muted" />
+                          <HiUser className="h-3.5 w-3.5 shrink-0 text-ink-muted" />
                           <span className="text-sm px-2 py-0.5 rounded-full text-ink-muted bg-ground">
                             {label.assignee}
                           </span>
diff --git a/components/camera-capture/CameraCapture.tsx b/components/camera-capture/CameraCapture.tsx
index f8b5d78c..b1640425 100644
--- a/components/camera-capture/CameraCapture.tsx
+++ b/components/camera-capture/CameraCapture.tsx
@@ -73,7 +73,7 @@ export function CameraCapture({ onCapture, onCancel }: CameraCaptureProps) {
             onClick={capturePhoto}
             disabled={!canCapture}
             rounded
-            className={`w-20 h-20 bg-white border-4 border-gray-300 min-h-[80px] min-w-[80px] ${
+            className={`w-20 h-20 bg-white border-4 border-gray-300 min-h-20 min-w-20 ${
               canCapture ? 'hover:bg-gray-100' : ''
             }`}
             aria-label="撮影"
diff --git a/components/camera-capture/CameraPreview.tsx b/components/camera-capture/CameraPreview.tsx
index 850db44e..c4aa976c 100644
--- a/components/camera-capture/CameraPreview.tsx
+++ b/components/camera-capture/CameraPreview.tsx
@@ -83,7 +83,7 @@ export function CameraPreview({
 
             {/* 中央の縦長エリア */}
             <div className="absolute inset-0 flex items-center justify-center">
-              <div ref={guideRef} className="relative w-[70%] max-w-md aspect-[3/4]">
+              <div ref={guideRef} className="relative w-[70%] max-w-md aspect-3/4">
                 {/* 縦長の枠線 */}
                 <div className="absolute inset-0 border-2 border-white rounded-lg shadow-lg z-10">
                   {/* 角のマーカー */}
diff --git a/components/clock/ClockHeaderNav.tsx b/components/clock/ClockHeaderNav.tsx
index bf385ed9..a858b82b 100644
--- a/components/clock/ClockHeaderNav.tsx
+++ b/components/clock/ClockHeaderNav.tsx
@@ -20,7 +20,7 @@ interface ClockHeaderNavProps {
  */
 export function ClockHeaderNav({ colors, onOpenChimeSchedule, onOpenSettings }: ClockHeaderNavProps) {
   // 規約 local/no-raw-button に従い Button を使用。色はテーマ追従のためインラインstyleで上書き。
-  const pillClassName = 'gap-2 !rounded-full !px-3.5 active:scale-95';
+  const pillClassName = 'gap-2 rounded-full! px-3.5! active:scale-95';
   const pillStyle = { backgroundColor: colors.uiBg, color: colors.uiText };
 
   return (
diff --git a/components/clock/ClockSettingsModal.tsx b/components/clock/ClockSettingsModal.tsx
index afc1d132..a55e5f8d 100644
--- a/components/clock/ClockSettingsModal.tsx
+++ b/components/clock/ClockSettingsModal.tsx
@@ -77,7 +77,7 @@ export function ClockSettingsModal({
                     onClick={() => onUpdate({ theme: key })}
                     variant="ghost"
                     size="sm"
-                    className="flex flex-col items-center gap-1.5 min-w-[52px] !p-1 !min-h-0 !min-w-0 h-auto"
+                    className="flex flex-col items-center gap-1.5 min-w-13 p-1! min-h-0! min-w-0! h-auto"
                     aria-label={`テーマ: ${theme.label}`}
                   >
                     <div
@@ -120,7 +120,7 @@ export function ClockSettingsModal({
                     onClick={() => onUpdate({ fontKey: key })}
                     variant="ghost"
                     size="sm"
-                    className="flex items-center justify-between px-4 py-3 !rounded-xl text-left !min-h-0 w-full !font-normal"
+                    className="flex items-center justify-between px-4 py-3 rounded-xl! text-left min-h-0! w-full font-normal!"
                     style={{
                       backgroundColor: isSelected ? `${themeColors.accent}18` : themeColors.uiBg,
                       borderWidth: '1.5px',
@@ -198,19 +198,19 @@ export function ClockSettingsModal({
           <section>
             <SectionLabel color={themeColors.uiText}>表示オプション</SectionLabel>
             <div className="mt-2 space-y-1">
-              <div className="flex items-center justify-between py-3 px-1 min-h-[44px]">
+              <div className="flex items-center justify-between py-3 px-1 min-h-11">
                 <span className="text-sm font-medium" style={{ color: themeColors.text }}>
                   24時間表示
                 </span>
                 <Switch checked={settings.use24Hour} onChange={(e) => onUpdate({ use24Hour: e.target.checked })} />
               </div>
-              <div className="flex items-center justify-between py-3 px-1 min-h-[44px]">
+              <div className="flex items-center justify-between py-3 px-1 min-h-11">
                 <span className="text-sm font-medium" style={{ color: themeColors.text }}>
                   秒を表示
                 </span>
                 <Switch checked={settings.showSeconds} onChange={(e) => onUpdate({ showSeconds: e.target.checked })} />
               </div>
-              <div className="flex items-center justify-between py-3 px-1 min-h-[44px]">
+              <div className="flex items-center justify-between py-3 px-1 min-h-11">
                 <span className="text-sm font-medium" style={{ color: themeColors.text }}>
                   日付を表示
                 </span>
@@ -223,7 +223,7 @@ export function ClockSettingsModal({
           <section>
             <SectionLabel color={themeColors.uiText}>作業チャイム</SectionLabel>
             <div className="mt-2 space-y-1">
-              <div className="flex items-center justify-between py-3 px-1 min-h-[44px]">
+              <div className="flex items-center justify-between py-3 px-1 min-h-11">
                 <div>
                   <span className="text-sm font-medium block" style={{ color: themeColors.text }}>
                     作業チャイム
@@ -240,7 +240,7 @@ export function ClockSettingsModal({
 
               {workChimeSettings.enabled && (
                 <>
-                  <div className="flex items-center justify-between py-3 px-1 min-h-[44px]">
+                  <div className="flex items-center justify-between py-3 px-1 min-h-11">
                     <span className="text-sm font-medium" style={{ color: themeColors.text }}>
                       音を鳴らす
                     </span>
@@ -254,7 +254,7 @@ export function ClockSettingsModal({
                   </div>
 
                   {workChimeSettings.soundEnabled && (
-                    <div className="flex items-center justify-between gap-3 py-3 px-1 min-h-[44px]">
+                    <div className="flex items-center justify-between gap-3 py-3 px-1 min-h-11">
                       <div>
                         <span className="text-sm font-medium block" style={{ color: themeColors.text }}>
                           チャイム音
@@ -274,7 +274,7 @@ export function ClockSettingsModal({
                           variant="primary"
                           size="sm"
                           onClick={onEnableWorkChimeAudio}
-                          className="!px-3"
+                          className="px-3!"
                           style={{
                             backgroundColor: themeColors.accent,
                             color: themeColors.bg,
@@ -305,7 +305,7 @@ export function ClockSettingsModal({
                         size="sm"
                         onClick={() => onTestWorkChime('break')}
                         aria-label="休憩開始をテスト"
-                        className="w-full !px-3"
+                        className="w-full px-3!"
                       >
                         休憩開始
                       </Button>
@@ -315,7 +315,7 @@ export function ClockSettingsModal({
                         size="sm"
                         onClick={() => onTestWorkChime('work-start')}
                         aria-label="作業開始をテスト"
-                        className="w-full !px-3"
+                        className="w-full px-3!"
                       >
                         作業開始
                       </Button>
@@ -325,14 +325,14 @@ export function ClockSettingsModal({
                         size="sm"
                         onClick={() => onTestWorkChime('cleanup-start')}
                         aria-label="掃除開始をテスト"
-                        className="w-full !px-3"
+                        className="w-full px-3!"
                       >
                         掃除開始
                       </Button>
                     </div>
                   </div>
 
-                  <div className="flex items-center justify-between py-3 px-1 min-h-[44px]">
+                  <div className="flex items-center justify-between py-3 px-1 min-h-11">
                     <div>
                       <span className="text-sm font-medium block" style={{ color: themeColors.text }}>
                         音声アナウンス（未実装）
diff --git a/components/clock/NextChimeStrip.tsx b/components/clock/NextChimeStrip.tsx
index bd2b0402..6364a5eb 100644
--- a/components/clock/NextChimeStrip.tsx
+++ b/components/clock/NextChimeStrip.tsx
@@ -14,7 +14,7 @@ export function NextChimeStrip({ currentPeriod, nextChime, colors }: NextChimeSt
 
   return (
     <div
-      className="absolute left-1/2 bottom-5 sm:bottom-8 z-10 flex min-h-[54px] w-[calc(100%-2rem)] max-w-3xl -translate-x-1/2 flex-col items-center justify-center gap-1 rounded-2xl border px-4 py-2 text-center sm:flex-row sm:gap-6 sm:rounded-full sm:px-6"
+      className="absolute left-1/2 bottom-5 sm:bottom-8 z-10 flex min-h-13.5 w-[calc(100%-2rem)] max-w-3xl -translate-x-1/2 flex-col items-center justify-center gap-1 rounded-2xl border px-4 py-2 text-center sm:flex-row sm:gap-6 sm:rounded-full sm:px-6"
       style={{
         backgroundColor: colors.bg,
         borderColor: colors.uiBg,
diff --git a/components/clock/WorkChimeAlert.tsx b/components/clock/WorkChimeAlert.tsx
index 47f931fe..bed5dfa4 100644
--- a/components/clock/WorkChimeAlert.tsx
+++ b/components/clock/WorkChimeAlert.tsx
@@ -23,7 +23,7 @@ export function WorkChimeAlert({ chime, colors, onClose }: WorkChimeAlertProps)
       style={{ backgroundColor: `${colors.bg}b8` }}
     >
       <div
-        className="relative flex min-h-[290px] w-full max-w-4xl flex-col items-center justify-center overflow-hidden rounded-lg border border-t-[8px] px-8 py-12 text-center shadow-[0_16px_38px_rgba(33,23,20,0.10)] sm:min-h-[330px] sm:px-14"
+        className="relative flex min-h-72.5 w-full max-w-4xl flex-col items-center justify-center overflow-hidden rounded-lg border border-t-8 px-8 py-12 text-center shadow-[0_16px_38px_rgba(33,23,20,0.10)] sm:min-h-82.5 sm:px-14"
         style={{
           backgroundColor: colors.bg,
           borderColor: colors.uiBg,
diff --git a/components/clock/WorkChimeScheduleModal.tsx b/components/clock/WorkChimeScheduleModal.tsx
index fad1b818..ad7e8431 100644
--- a/components/clock/WorkChimeScheduleModal.tsx
+++ b/components/clock/WorkChimeScheduleModal.tsx
@@ -125,7 +125,7 @@ export function WorkChimeScheduleModal({ show, settings, onUpdate, onClose }: Wo
                   variant="ghost"
                   size="sm"
                   onClick={() => updatePeriod(period.id, { kind: 'work' })}
-                  className="!min-h-[36px] !rounded-md !border !px-4 transition-colors"
+                  className="min-h-9! rounded-md! border! px-4! transition-colors"
                   style={getKindButtonStyle('work', period.kind)}
                 >
                   作業
@@ -135,7 +135,7 @@ export function WorkChimeScheduleModal({ show, settings, onUpdate, onClose }: Wo
                   variant="ghost"
                   size="sm"
                   onClick={() => updatePeriod(period.id, { kind: 'break' })}
-                  className="!min-h-[36px] !rounded-md !border !px-4 transition-colors"
+                  className="min-h-9! rounded-md! border! px-4! transition-colors"
                   style={getKindButtonStyle('break', period.kind)}
                 >
                   休憩
@@ -145,7 +145,7 @@ export function WorkChimeScheduleModal({ show, settings, onUpdate, onClose }: Wo
                   variant="ghost"
                   size="sm"
                   onClick={() => updatePeriod(period.id, { kind: 'cleanup' })}
-                  className="!min-h-[36px] !rounded-md !border !px-4 transition-colors"
+                  className="min-h-9! rounded-md! border! px-4! transition-colors"
                   style={getKindButtonStyle('cleanup', period.kind)}
                 >
                   掃除
@@ -170,7 +170,7 @@ export function WorkChimeScheduleModal({ show, settings, onUpdate, onClose }: Wo
                 type="time"
                 value={period.start}
                 onChange={(e) => updatePeriod(period.id, { start: e.target.value })}
-                className="!px-3 !py-2 !text-base"
+                className="px-3! py-2! text-base!"
               />
               <span className="pb-3 text-sm font-bold text-ink-muted">-</span>
               <Input
@@ -178,7 +178,7 @@ export function WorkChimeScheduleModal({ show, settings, onUpdate, onClose }: Wo
                 type="time"
                 value={period.end}
                 onChange={(e) => updatePeriod(period.id, { end: e.target.value })}
-                className="!px-3 !py-2 !text-base"
+                className="px-3! py-2! text-base!"
               />
             </div>
           </div>
@@ -186,7 +186,7 @@ export function WorkChimeScheduleModal({ show, settings, onUpdate, onClose }: Wo
       </div>
 
       <div className="shrink-0 border-t border-edge bg-overlay px-4 py-4">
-        <Button type="button" variant="secondary" fullWidth onClick={addPeriod} className="!min-h-[48px]">
+        <Button type="button" variant="secondary" fullWidth onClick={addPeriod} className="min-h-12!">
           <MdAdd className="mr-1.5 h-5 w-5" />
           時間帯を追加
         </Button>
diff --git a/components/date-picker/Calendar.tsx b/components/date-picker/Calendar.tsx
index 283e3116..e4914e17 100644
--- a/components/date-picker/Calendar.tsx
+++ b/components/date-picker/Calendar.tsx
@@ -79,7 +79,7 @@ export function Calendar({
                   onClick={() => onDateClick(day.dateString)}
                   disabled={!isSelectable}
                   className={`
-                    min-h-[44px] rounded-md text-sm md:text-base transition-colors
+                    min-h-11 rounded-md text-sm md:text-base transition-colors
                     ${
                       isSelected
                         ? 'bg-amber-600 text-white font-semibold'
diff --git a/components/date-picker/DatePickerModal.tsx b/components/date-picker/DatePickerModal.tsx
index 7429df93..4ae72856 100644
--- a/components/date-picker/DatePickerModal.tsx
+++ b/components/date-picker/DatePickerModal.tsx
@@ -58,7 +58,7 @@ export function DatePickerModal({ selectedDate, onSelect, onCancel, isWeekend, g
                 <Button
                   variant="ghost"
                   onClick={handleYearMonthClick}
-                  className="!min-h-0 !px-2 !py-1 !text-xl md:!text-2xl !font-semibold text-gray-800 hover:text-amber-600 hover:bg-gray-50"
+                  className="min-h-0! !px-2 py-1! !text-xl md:!text-2xl !font-semibold text-gray-800 hover:text-amber-600 hover:bg-gray-50"
                   aria-label="年月を選択"
                 >
                   {currentMonth.year}年{monthNames[currentMonth.month]}
diff --git a/components/defect-bean-form/DefectBeanFormFields.tsx b/components/defect-bean-form/DefectBeanFormFields.tsx
index b6fdaffb..94e4c5e9 100644
--- a/components/defect-bean-form/DefectBeanFormFields.tsx
+++ b/components/defect-bean-form/DefectBeanFormFields.tsx
@@ -81,13 +81,13 @@ export function DefectBeanFormFields({
             <Button
               variant="ghost"
               onClick={onShowCamera}
-              className="!w-full !px-4 !py-12 !border-2 !border-dashed !rounded-lg flex-col !min-h-[200px] !border-edge-strong hover:!border-spot hover:!bg-ground"
+              className="!w-full px-4! !py-12 !border-2 !border-dashed rounded-lg! flex-col !min-h-[200px] border-edge-strong! hover:!border-spot hover:bg-ground!"
             >
               <HiCamera className="h-12 w-12 text-ink-muted" />
               <span className="font-medium text-ink-sub">カメラで撮影</span>
             </Button>
             <div className="text-center text-sm text-ink-muted">または</div>
-            <label className="block w-full px-4 py-3 border-2 rounded-lg transition-colors cursor-pointer text-center min-h-[44px] flex items-center justify-center border-edge-strong hover:border-spot hover:bg-ground text-ink-sub">
+            <label className="block w-full px-4 py-3 border-2 rounded-lg transition-colors cursor-pointer text-center min-h-11 flex items-center justify-center border-edge-strong hover:border-spot hover:bg-ground text-ink-sub">
               <span className="font-medium">ファイルを選択</span>
               <input type="file" accept="image/*" onChange={onFileSelect} className="hidden" />
             </label>
diff --git a/components/defect-beans/FilterMenu.tsx b/components/defect-beans/FilterMenu.tsx
index e60d7d1a..a94f40b4 100644
--- a/components/defect-beans/FilterMenu.tsx
+++ b/components/defect-beans/FilterMenu.tsx
@@ -76,7 +76,7 @@ export function FilterMenu({
         size="sm"
         onClick={() => setShowModal(true)}
         title="フィルター"
-        className="!px-3 !py-2 gap-1.5"
+        className="px-3! py-2! gap-1.5"
       >
         <MdFilterList className="h-5 w-5" />
         <span className="text-xs sm:text-sm">フィルター</span>
diff --git a/components/drip-guide/RecipeList.tsx b/components/drip-guide/RecipeList.tsx
index 910677c5..4cce5367 100644
--- a/components/drip-guide/RecipeList.tsx
+++ b/components/drip-guide/RecipeList.tsx
@@ -176,7 +176,7 @@ export const RecipeList: React.FC<RecipeListProps> = ({ recipes, onDelete }) =>
                     value: String(serving),
                     label: `${serving}人前`,
                   }))}
-                  className="!text-sm !font-medium !py-2 !px-3 cursor-pointer"
+                  className="text-sm! !font-medium py-2! px-3! cursor-pointer"
                   aria-label="人前を選択"
                 />
               </div>
@@ -185,7 +185,7 @@ export const RecipeList: React.FC<RecipeListProps> = ({ recipes, onDelete }) =>
                 variant="primary"
                 fullWidth
                 onClick={() => handleOpenStart(recipe.id)}
-                className={clsx('mt-auto gap-2 !rounded-lg active:scale-[0.98] touch-manipulation')}
+                className={clsx('mt-auto gap-2 rounded-lg! active:scale-[0.98] touch-manipulation')}
               >
                 <Play size={20} weight="fill" />
                 ガイド開始
diff --git a/components/drip-guide/Start46Dialog.tsx b/components/drip-guide/Start46Dialog.tsx
index 2d7bafdd..78b9bc14 100644
--- a/components/drip-guide/Start46Dialog.tsx
+++ b/components/drip-guide/Start46Dialog.tsx
@@ -113,14 +113,14 @@ export const Start46Dialog: React.FC<Start46DialogProps> = ({ isOpen, onClose, i
                 <Button
                   variant="ghost"
                   onClick={onClose}
-                  className="!rounded-2xl border border-edge !px-5 !text-sm !font-semibold !text-ink-sub hover:bg-ground"
+                  className="rounded-2xl! border border-edge !px-5 text-sm! !font-semibold text-ink-sub! hover:bg-ground"
                 >
                   閉じる
                 </Button>
                 <Button
                   variant="primary"
                   onClick={handleStartGuide}
-                  className="gap-2 !rounded-2xl !px-7 !text-sm active:scale-[0.99] touch-manipulation"
+                  className="gap-2 rounded-2xl! !px-7 text-sm! active:scale-[0.99] touch-manipulation"
                 >
                   ガイド開始
                   <ArrowRight size={16} weight="bold" />
diff --git a/components/drip-guide/StartHintDialog.tsx b/components/drip-guide/StartHintDialog.tsx
index 8c236406..9069f7e2 100644
--- a/components/drip-guide/StartHintDialog.tsx
+++ b/components/drip-guide/StartHintDialog.tsx
@@ -134,14 +134,14 @@ export const StartHintDialog: React.FC<StartHintDialogProps> = ({
                 <Button
                   variant="ghost"
                   onClick={onClose}
-                  className="!rounded-2xl border border-edge !px-5 !text-sm !font-semibold !text-ink-sub hover:bg-ground"
+                  className="rounded-2xl! border border-edge !px-5 text-sm! !font-semibold text-ink-sub! hover:bg-ground"
                 >
                   閉じる
                 </Button>
                 <Button
                   variant="primary"
                   onClick={onStart}
-                  className="flex-1 gap-2 !rounded-2xl !text-[15px] active:scale-[0.99] touch-manipulation"
+                  className="flex-1 gap-2 rounded-2xl! !text-[15px] active:scale-[0.99] touch-manipulation"
                 >
                   ガイド開始
                   <ArrowRight size={16} weight="bold" />
diff --git a/components/drip-guide/StepEditor.tsx b/components/drip-guide/StepEditor.tsx
index ceca08f7..318350bb 100644
--- a/components/drip-guide/StepEditor.tsx
+++ b/components/drip-guide/StepEditor.tsx
@@ -139,7 +139,7 @@ export const StepEditor: React.FC<StepEditorProps> = ({ steps, onChange, isManua
         fullWidth
         onClick={addStep}
         type="button"
-        className="!border-2 !border-dashed !border-edge gap-2"
+        className="!border-2 !border-dashed border-edge! gap-2"
       >
         <Plus size={20} />
         ステップを追加
diff --git a/components/drip-guide/dialogs/46/Dialog46DescriptionModal.tsx b/components/drip-guide/dialogs/46/Dialog46DescriptionModal.tsx
index f1fab325..2b9e86a2 100644
--- a/components/drip-guide/dialogs/46/Dialog46DescriptionModal.tsx
+++ b/components/drip-guide/dialogs/46/Dialog46DescriptionModal.tsx
@@ -57,7 +57,7 @@ export const Dialog46DescriptionModal: React.FC<Dialog46DescriptionModalProps> =
               <div className="flex-1 overflow-y-auto px-6 py-6 space-y-6">
                 {RECIPE46_DESCRIPTION_SECTIONS.map((section, idx) => (
                   <div key={idx} className="flex gap-4">
-                    <div className="flex-shrink-0 w-10 h-10 text-spot flex items-center justify-center">
+                    <div className="shrink-0 w-10 h-10 text-spot flex items-center justify-center">
                       {section.icon === 'target' && <Drop size={20} weight="bold" />}
                       {section.icon === 'rule' && <Coffee size={20} weight="bold" />}
                       {section.icon === 'timer' && <Timer size={20} weight="bold" />}
diff --git a/components/drip-guide/dialogs/46/Dialog46Form.tsx b/components/drip-guide/dialogs/46/Dialog46Form.tsx
index 0e60151c..a2ec3fcd 100644
--- a/components/drip-guide/dialogs/46/Dialog46Form.tsx
+++ b/components/drip-guide/dialogs/46/Dialog46Form.tsx
@@ -37,7 +37,7 @@ function SegmentGroup<T extends string>({ options, labels, value, onChange }: Se
             aria-pressed={selected}
             onClick={() => onChange(option)}
             className={`!min-h-[44px] flex-1 whitespace-nowrap !rounded-[11px] !px-1 !py-2.5 !text-[13px] transition-colors touch-manipulation ${
-              selected ? '!bg-spot !font-bold !text-on-spot' : '!font-semibold !text-ink-sub hover:!bg-ground'
+              selected ? '!bg-spot !font-bold !text-on-spot' : '!font-semibold text-ink-sub! hover:bg-ground!'
             }`}
           >
             {labels[option]}
@@ -64,7 +64,7 @@ export const Dialog46Form: React.FC<Dialog46FormProps> = ({
         type="button"
         variant="ghost"
         onClick={onDescriptionClick}
-        className="!min-h-0 flex w-full items-center gap-2.5 !justify-start !rounded-2xl border border-edge !px-4 !py-3.5 !text-left transition-colors hover:bg-ground touch-manipulation"
+        className="min-h-0! flex w-full items-center gap-2.5 !justify-start rounded-2xl! border border-edge px-4! !py-3.5 text-left! transition-colors hover:bg-ground touch-manipulation"
       >
         <BookOpen size={18} className="shrink-0 text-spot" />
         <span className="flex-1 text-sm font-bold text-ink">4:6メソッドのポイント（必読）</span>
@@ -84,7 +84,7 @@ export const Dialog46Form: React.FC<Dialog46FormProps> = ({
             value: String(s),
             label: `${s}人前 (${s * 10}g / ${s * 150}g)`,
           }))}
-          className="!rounded-2xl !border !py-3 !text-sm !font-bold cursor-pointer"
+          className="rounded-2xl! border! py-3! text-sm! !font-bold cursor-pointer"
           aria-label="人前を選択"
         />
       </div>
diff --git a/components/drip-guide/dialogs/shared/RecipeStepTable.tsx b/components/drip-guide/dialogs/shared/RecipeStepTable.tsx
index ef7df8b9..29b8f23b 100644
--- a/components/drip-guide/dialogs/shared/RecipeStepTable.tsx
+++ b/components/drip-guide/dialogs/shared/RecipeStepTable.tsx
@@ -53,7 +53,7 @@ export const RecipeStepTable: React.FC<RecipeStepTableProps> = ({
                       size="sm"
                       type="button"
                       onClick={() => onStepDetailClick(step.id, step.title)}
-                      className="!min-h-0 !px-1 !py-0.5 !text-xs underline !text-spot hover:!text-spot-hover"
+                      className="min-h-0! !px-1 !py-0.5 !text-xs underline !text-spot hover:!text-spot-hover"
                     >
                       詳細
                     </Button>
diff --git a/components/drip-guide/runner/CompletionScreen.tsx b/components/drip-guide/runner/CompletionScreen.tsx
index 5ae5523d..e2962885 100644
--- a/components/drip-guide/runner/CompletionScreen.tsx
+++ b/components/drip-guide/runner/CompletionScreen.tsx
@@ -60,11 +60,11 @@ export const CompletionScreen: React.FC<CompletionScreenProps> = ({ onReset }) =
       <p className="text-ink-sub mb-8">お疲れ様でした。美味しいコーヒーを楽しみましょう。</p>
 
       <div className="flex gap-4">
-        <Button variant="outline" onClick={onReset} className="!rounded-full">
+        <Button variant="outline" onClick={onReset} className="rounded-full!">
           もう一度淹れる
         </Button>
         <Link href="/drip-guide">
-          <Button variant="primary" className="!rounded-full">
+          <Button variant="primary" className="rounded-full!">
             一覧に戻る
           </Button>
         </Link>
diff --git a/components/drip-guide/runner/FooterControls.tsx b/components/drip-guide/runner/FooterControls.tsx
index ce855b7c..19db5fe5 100644
--- a/components/drip-guide/runner/FooterControls.tsx
+++ b/components/drip-guide/runner/FooterControls.tsx
@@ -39,7 +39,7 @@ export const FooterControls: React.FC<FooterControlsProps> = ({
           <IconButton
             variant="ghost"
             onClick={onResetTimer}
-            className="!p-2 flex-col gap-1 text-ink-muted hover:text-ink-sub active:scale-95 min-h-[44px] min-w-[44px]"
+            className="!p-2 flex-col gap-1 text-ink-muted hover:text-ink-sub active:scale-95 min-h-11 min-w-[44px]"
             aria-label="リセット"
           >
             <div className="p-3 rounded-full bg-ground">
@@ -53,7 +53,7 @@ export const FooterControls: React.FC<FooterControlsProps> = ({
             onClick={onGoToPrevStep}
             disabled={manualStepIndex === 0}
             className={clsx(
-              '!p-2 flex-col gap-1 active:scale-95 min-h-[44px] min-w-[44px]',
+              '!p-2 flex-col gap-1 active:scale-95 min-h-11 min-w-[44px]',
               manualStepIndex === 0 ? 'text-ink-muted/50' : 'text-ink-muted hover:text-ink-sub'
             )}
             aria-label="前へ"
@@ -85,7 +85,7 @@ export const FooterControls: React.FC<FooterControlsProps> = ({
             <IconButton
               variant="ghost"
               onClick={onComplete}
-              className="!p-2 flex-col gap-1 text-success hover:text-success/80 active:scale-95 min-h-[44px] min-w-[44px]"
+              className="!p-2 flex-col gap-1 text-success hover:text-success/80 active:scale-95 min-h-11 min-w-[44px]"
               aria-label="完了"
             >
               <div className="p-3 rounded-full bg-success-subtle">
@@ -97,7 +97,7 @@ export const FooterControls: React.FC<FooterControlsProps> = ({
             <IconButton
               variant="ghost"
               onClick={onGoToNextStep}
-              className="!p-2 flex-col gap-1 text-ink-muted hover:text-ink-sub active:scale-95 min-h-[44px] min-w-[44px]"
+              className="!p-2 flex-col gap-1 text-ink-muted hover:text-ink-sub active:scale-95 min-h-11 min-w-[44px]"
               aria-label="次へ"
             >
               <div className="p-3 rounded-full bg-ground">
@@ -109,7 +109,7 @@ export const FooterControls: React.FC<FooterControlsProps> = ({
 
           <Link
             href="/drip-guide"
-            className="flex flex-col items-center gap-1 text-ink-muted hover:text-ink-sub transition-colors p-2 active:scale-95 min-h-[44px] min-w-[44px]"
+            className="flex flex-col items-center gap-1 text-ink-muted hover:text-ink-sub transition-colors p-2 active:scale-95 min-h-11 min-w-[44px]"
           >
             <div className="p-3 rounded-full bg-ground">
               <X size={24} />
diff --git a/components/home/ActionCard.tsx b/components/home/ActionCard.tsx
index 358f57b8..e47868cd 100644
--- a/components/home/ActionCard.tsx
+++ b/components/home/ActionCard.tsx
@@ -28,7 +28,7 @@ export function ActionCard({ title, label, description, href, icon: Icon, badge,
     <Button
       variant="ghost"
       onClick={() => router.push(href)}
-      className="group relative flex max-h-[112px] w-full flex-1 flex-row !items-center !justify-start gap-3 !rounded-xl border border-edge-strong bg-surface px-3 py-2 text-left text-ink shadow-card transition-all hover:bg-ground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 animate-home-card !min-h-[56px] md:max-h-none md:!min-h-0 md:flex-none md:flex-col md:!justify-center md:gap-3 md:!rounded-2xl md:p-5 md:text-center md:shadow-2xl md:hover:-translate-y-2 md:hover:bg-surface md:hover:shadow-[0_16px_40px_rgba(0,0,0,0.08)]"
+      className="group relative flex max-h-[112px] w-full flex-1 flex-row items-center! !justify-start gap-3 rounded-xl! border border-edge-strong bg-surface px-3 py-2 text-left text-ink shadow-card transition-all hover:bg-ground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 animate-home-card !min-h-[56px] md:max-h-none md:!min-h-0 md:flex-none md:flex-col md:!justify-center md:gap-3 md:!rounded-2xl md:p-5 md:text-center md:shadow-2xl md:hover:-translate-y-2 md:hover:bg-surface md:hover:shadow-[0_16px_40px_rgba(0,0,0,0.08)]"
       style={cardStyle}
       aria-label={title}
     >
diff --git a/components/inventory/InventoryItemModal.tsx b/components/inventory/InventoryItemModal.tsx
index d7c720ad..7a9f33c9 100644
--- a/components/inventory/InventoryItemModal.tsx
+++ b/components/inventory/InventoryItemModal.tsx
@@ -7,7 +7,7 @@ import type { InventoryItem, InventoryItemInput, InventoryStatus } from '@/types
 
 // 共通 Input は text-lg・厚いpaddingで大きいため、在庫まわりの
 // コンパクト基調(13〜14px・控えめpadding)に合わせて className で上書きする。
-const FIELD_CLASS = '!min-h-0 !rounded-[10px] !border !px-3 !py-2 !text-sm';
+const FIELD_CLASS = 'min-h-0! !rounded-[10px] border! px-3! py-2! text-sm!';
 
 interface InventoryItemModalProps {
   /** モーダルの表示/非表示 */
diff --git a/components/inventory/InventoryItemRow.tsx b/components/inventory/InventoryItemRow.tsx
index c5ff6b1b..f0c5ade6 100644
--- a/components/inventory/InventoryItemRow.tsx
+++ b/components/inventory/InventoryItemRow.tsx
@@ -57,7 +57,7 @@ export function InventoryItemRow({ item, onEdit, onDelete, onStatusChange }: Inv
             variant="ghost"
             aria-label={`${item.name}を編集`}
             onClick={() => onEdit(item)}
-            className="!min-h-0 !min-w-0 h-8 w-8 !p-0"
+            className="min-h-0! min-w-0! h-8 w-8 !p-0"
           >
             <FiEdit2 className="h-4 w-4" />
           </IconButton>
@@ -65,7 +65,7 @@ export function InventoryItemRow({ item, onEdit, onDelete, onStatusChange }: Inv
             variant="danger"
             aria-label={`${item.name}を削除`}
             onClick={() => onDelete(item)}
-            className="!min-h-0 !min-w-0 h-8 w-8 !p-0"
+            className="min-h-0! min-w-0! h-8 w-8 !p-0"
           >
             <FiTrash2 className="h-4 w-4" />
           </IconButton>
diff --git a/components/ocr-confirm/OCRConfirmModal.tsx b/components/ocr-confirm/OCRConfirmModal.tsx
index cb449bca..086e352a 100644
--- a/components/ocr-confirm/OCRConfirmModal.tsx
+++ b/components/ocr-confirm/OCRConfirmModal.tsx
@@ -141,7 +141,7 @@ export function OCRConfirmModal({
     >
       <div className="flex flex-col h-full">
         {/* ヘッダー */}
-        <div className="flex items-center justify-between gap-3 px-4 py-3 border-b flex-shrink-0 border-edge bg-overlay">
+        <div className="flex items-center justify-between gap-3 px-4 py-3 border-b shrink-0 border-edge bg-overlay">
           <div className="flex min-w-0 items-center gap-2">
             <h2 className="text-base font-bold tracking-tight text-ink">読み取り結果の確認</h2>
             <span className="text-[11px] text-ink-sub">
@@ -154,21 +154,21 @@ export function OCRConfirmModal({
             onClick={onCancel}
             rounded
             aria-label="閉じる"
-            className="!rounded-full"
+            className="rounded-full!"
           >
             <HiX className="h-4 w-4 sm:h-5 sm:w-5" />
           </IconButton>
         </div>
 
         {hasExistingData && (
-          <div className="flex items-center justify-end gap-2 px-4 py-2 border-b flex-shrink-0 border-edge bg-ground/40">
+          <div className="flex items-center justify-end gap-2 px-4 py-2 border-b shrink-0 border-edge bg-ground/40">
             <span className="text-[11px] font-semibold text-ink-sub">保存方法</span>
             <div className="flex rounded-lg bg-overlay p-0.5 border border-edge">
               <Button
                 variant={mode === 'replace' ? 'primary' : 'ghost'}
                 size="sm"
                 onClick={() => setMode('replace')}
-                className="!min-h-[28px] !px-3 !text-xs"
+                className="!min-h-[28px] px-3! !text-xs"
               >
                 置き換え
               </Button>
@@ -176,7 +176,7 @@ export function OCRConfirmModal({
                 variant={mode === 'add' ? 'primary' : 'ghost'}
                 size="sm"
                 onClick={() => setMode('add')}
-                className="!min-h-[28px] !px-3 !text-xs"
+                className="!min-h-[28px] px-3! !text-xs"
               >
                 追加
               </Button>
@@ -193,14 +193,14 @@ export function OCRConfirmModal({
               onValueChange={(value) => setActiveTab(value as TabType)}
               className="flex flex-col flex-1 min-h-0"
             >
-              <div className="border-b border-edge flex-shrink-0">
+              <div className="border-b border-edge shrink-0">
                 <TabsList className="mt-2 grid grid-cols-2">
-                  <TabsTrigger value="timeLabels" className="text-xs !gap-1.5 !px-2 !py-1.5 !min-h-0">
+                  <TabsTrigger value="timeLabels" className="text-xs !gap-1.5 !px-2 py-1.5! min-h-0!">
                     <HiClock className="h-4 w-4" />
                     <span>本日の予定</span>
                     <span className="rounded-full px-2 py-0.5 text-xs bg-ground text-ink">{timeLabels.length}</span>
                   </TabsTrigger>
-                  <TabsTrigger value="roastSchedules" className="text-xs !gap-1.5 !px-2 !py-1.5 !min-h-0">
+                  <TabsTrigger value="roastSchedules" className="text-xs !gap-1.5 !px-2 py-1.5! min-h-0!">
                     <HiFire className="h-4 w-4" />
                     <span>ロースト</span>
                     <span className="rounded-full px-2 py-0.5 text-xs bg-ground text-ink">{roastSchedules.length}</span>
@@ -269,13 +269,13 @@ export function OCRConfirmModal({
         </div>
 
         {/* フッター */}
-        <div className="flex items-center justify-between px-4 py-3 border-t gap-2 flex-shrink-0 border-edge bg-overlay">
+        <div className="flex items-center justify-between px-4 py-3 border-t gap-2 shrink-0 border-edge bg-overlay">
           <Button
             variant="secondary"
             size="sm"
             onClick={onRetry}
             aria-label="再解析"
-            className="!border-edge !bg-ground !text-ink-sub hover:!bg-surface hover:!text-ink"
+            className="border-edge! !bg-ground text-ink-sub! hover:!bg-surface hover:!text-ink"
           >
             <HiRefresh className="h-4 w-4" />
             再解析
diff --git a/components/ocr-time-label-editor/OCRTimeLabelEditor.tsx b/components/ocr-time-label-editor/OCRTimeLabelEditor.tsx
index d9bc816d..1b8ef1d3 100644
--- a/components/ocr-time-label-editor/OCRTimeLabelEditor.tsx
+++ b/components/ocr-time-label-editor/OCRTimeLabelEditor.tsx
@@ -34,12 +34,7 @@ export function OCRTimeLabelEditor({ timeLabels, onUpdate, onDelete }: OCRTimeLa
       )}
 
       {/* 追加ボタン */}
-      <Button
-        onClick={editor.handleAdd}
-        variant="primary"
-        size="sm"
-        className="w-full !px-3 !py-2 !min-h-[36px] !text-sm"
-      >
+      <Button onClick={editor.handleAdd} variant="primary" size="sm" className="w-full px-3! py-2! min-h-9! text-sm!">
         <HiPlus className="h-5 w-5" />
         <span>スケジュールを追加</span>
       </Button>
diff --git a/components/ocr-time-label-editor/TimeLabelRow.tsx b/components/ocr-time-label-editor/TimeLabelRow.tsx
index 220c80ab..37434ed4 100644
--- a/components/ocr-time-label-editor/TimeLabelRow.tsx
+++ b/components/ocr-time-label-editor/TimeLabelRow.tsx
@@ -61,7 +61,7 @@ export function TimeLabelRow({ label, isEditing, editor, onDelete }: TimeLabelRo
                 max={23}
                 required
                 placeholder="時"
-                className="w-16 text-center !text-sm"
+                className="w-16 text-center text-sm!"
               />
               <span className="text-ink-sub">:</span>
               <NumberInput
@@ -75,7 +75,7 @@ export function TimeLabelRow({ label, isEditing, editor, onDelete }: TimeLabelRo
                 min={0}
                 max={59}
                 placeholder="分"
-                className="w-16 text-center !text-sm"
+                className="w-16 text-center text-sm!"
               />
             </div>
           </div>
@@ -132,7 +132,7 @@ export function TimeLabelRow({ label, isEditing, editor, onDelete }: TimeLabelRo
                 min={0}
                 max={23}
                 placeholder="時"
-                className="w-16 text-center !text-sm"
+                className="w-16 text-center text-sm!"
               />
               <span className="text-ink-sub">:</span>
               <NumberInput
@@ -146,7 +146,7 @@ export function TimeLabelRow({ label, isEditing, editor, onDelete }: TimeLabelRo
                 min={0}
                 max={59}
                 placeholder="分"
-                className="w-16 text-center !text-sm"
+                className="w-16 text-center text-sm!"
               />
               <span className="text-sm text-ink-muted">まで</span>
               {editingContinuesUntil.hour && (
@@ -179,13 +179,13 @@ export function TimeLabelRow({ label, isEditing, editor, onDelete }: TimeLabelRo
                       value={subTask.content}
                       onChange={(e) => handleUpdateSubTask(subTask.id, { content: e.target.value })}
                       placeholder="タスク内容"
-                      className="!py-1.5 !text-sm"
+                      className="py-1.5! text-sm!"
                     />
                     <Input
                       value={subTask.assignee || ''}
                       onChange={(e) => handleUpdateSubTask(subTask.id, { assignee: e.target.value || undefined })}
                       placeholder="担当者（任意）"
-                      className="!py-1 !text-xs"
+                      className="py-1! !text-xs"
                     />
                   </div>
                   <IconButton
@@ -242,7 +242,7 @@ export function TimeLabelRow({ label, isEditing, editor, onDelete }: TimeLabelRo
 
             <div className="ml-[86px] flex flex-wrap items-center gap-1.5">
               {label.assignee && (
-                <Badge size="sm" variant="secondary" className="!text-[10px]">
+                <Badge size="sm" variant="secondary" className="text-[10px]!">
                   <span className="inline-flex items-center gap-1">
                     <HiUser className="h-3 w-3" />
                     {label.assignee}
@@ -250,7 +250,7 @@ export function TimeLabelRow({ label, isEditing, editor, onDelete }: TimeLabelRo
                 </Badge>
               )}
               {label.memo && (
-                <Badge size="sm" variant="secondary" className="!text-[10px]">
+                <Badge size="sm" variant="secondary" className="text-[10px]!">
                   メモあり
                 </Badge>
               )}
diff --git a/components/production-record/MonthMenuModal.tsx b/components/production-record/MonthMenuModal.tsx
index c956a119..9f83300c 100644
--- a/components/production-record/MonthMenuModal.tsx
+++ b/components/production-record/MonthMenuModal.tsx
@@ -75,7 +75,7 @@ export function MonthMenuModal({
               label="対象月"
               value={newMonthInput}
               onChange={(event) => onChangeNewMonth(event.target.value || getCurrentProductionMonth())}
-              className="flex-1 !min-h-[42px] !py-2 !text-base"
+              className="flex-1 !min-h-[42px] py-2! text-base!"
             />
             <Button
               type="button"
diff --git a/components/production-record/MonthSettingsModal.tsx b/components/production-record/MonthSettingsModal.tsx
index 68fc0928..28264855 100644
--- a/components/production-record/MonthSettingsModal.tsx
+++ b/components/production-record/MonthSettingsModal.tsx
@@ -195,7 +195,7 @@ export function MonthSettingsModal({
                 const requiredKg = (greenBeanTotalGram * (ratio / 100)) / 1000;
                 // セルいっぱいの枠なし入力。フォーカスは枠ではなく塗り＋内側リングで示す。
                 const cellInput =
-                  'min-h-[44px] w-full bg-transparent px-3 py-2 text-base text-ink placeholder:text-ink-muted focus:bg-field focus:outline-none focus:ring-2 focus:ring-inset focus:ring-spot-subtle';
+                  'min-h-11 w-full bg-transparent px-3 py-2 text-base text-ink placeholder:text-ink-muted focus:bg-field focus:outline-none focus:ring-2 focus:ring-inset focus:ring-spot-subtle';
                 return (
                   <div key={item.id} className="grid grid-cols-[1fr_92px_104px_44px] divide-x divide-edge">
                     {/* 豆名 */}
@@ -223,7 +223,7 @@ export function MonthSettingsModal({
                     </div>
                     {/* 必要量：派生表示（読み取り専用）。0のときは薄色で静かに */}
                     <div
-                      className={`flex min-h-[44px] items-center px-3 py-2 text-sm font-bold tabular-nums ${
+                      className={`flex min-h-11 items-center px-3 py-2 text-sm font-bold tabular-nums ${
                         requiredKg > 0 ? 'text-ink' : 'text-ink-muted'
                       }`}
                     >
diff --git a/components/production-record/ProductionRecordHeader.tsx b/components/production-record/ProductionRecordHeader.tsx
index 202d072a..05814028 100644
--- a/components/production-record/ProductionRecordHeader.tsx
+++ b/components/production-record/ProductionRecordHeader.tsx
@@ -48,7 +48,7 @@ export function ProductionRecordHeader({
             options={monthOptions}
             value={selectedMonth}
             onChange={(event) => onSelectMonth(event.target.value)}
-            className="sm:w-[160px] !min-h-[42px] !py-2 !text-base"
+            className="sm:w-[160px] !min-h-[42px] py-2! text-base!"
           />
         )}
         <Button
@@ -56,7 +56,7 @@ export function ProductionRecordHeader({
           size="sm"
           variant="secondary"
           onClick={onOpenMonthMenu}
-          className="!min-h-[42px] whitespace-nowrap !py-2 !text-base"
+          className="!min-h-[42px] whitespace-nowrap py-2! text-base!"
         >
           <MdSettings className="h-5 w-5" />
           月の設定
diff --git a/components/roast-scheduler/ScheduleCard.tsx b/components/roast-scheduler/ScheduleCard.tsx
index 1151e98c..41cf92d9 100644
--- a/components/roast-scheduler/ScheduleCard.tsx
+++ b/components/roast-scheduler/ScheduleCard.tsx
@@ -39,10 +39,10 @@ export function ScheduleCard({
 
   // アイコンの取得
   const getIcon = () => {
-    if (isRoasterOn) return <HiFire className="text-xl md:text-xl flex-shrink-0 text-orange-500" />;
-    if (isRoast) return <PiCoffeeBeanFill className="text-xl md:text-xl flex-shrink-0 text-amber-700" />;
-    if (isAfterPurge) return <FaSnowflake className="text-xl md:text-xl flex-shrink-0 text-blue-500" />;
-    if (isChaffCleaning) return <FaBroom className="text-xl md:text-xl flex-shrink-0 text-gray-600" />;
+    if (isRoasterOn) return <HiFire className="text-xl md:text-xl shrink-0 text-orange-500" />;
+    if (isRoast) return <PiCoffeeBeanFill className="text-xl md:text-xl shrink-0 text-amber-700" />;
+    if (isAfterPurge) return <FaSnowflake className="text-xl md:text-xl shrink-0 text-blue-500" />;
+    if (isChaffCleaning) return <FaBroom className="text-xl md:text-xl shrink-0 text-gray-600" />;
     return null;
   };
 
@@ -182,13 +182,13 @@ export function ScheduleCard({
     >
       <div className="flex items-center gap-3">
         {/* 左側：時間バッジまたはアイコン */}
-        <div className="flex items-center gap-2 flex-shrink-0">
+        <div className="flex items-center gap-2 shrink-0">
           {schedule.time ? (
-            <div className="flex-shrink-0 w-16 md:w-18 text-center px-2 py-1 rounded-lg text-sm md:text-base font-semibold tabular-nums shadow-sm bg-surface text-ink border border-edge">
+            <div className="shrink-0 w-16 md:w-18 text-center px-2 py-1 rounded-lg text-sm md:text-base font-semibold tabular-nums shadow-sm bg-surface text-ink border border-edge">
               {schedule.time}
             </div>
           ) : (
-            <div className="flex-shrink-0 w-16 md:w-18"></div>
+            <div className="shrink-0 w-16 md:w-18"></div>
           )}
           {getIcon()}
         </div>
diff --git a/components/schedule/EmptyScheduleState.tsx b/components/schedule/EmptyScheduleState.tsx
index df31bae9..9d983a90 100644
--- a/components/schedule/EmptyScheduleState.tsx
+++ b/components/schedule/EmptyScheduleState.tsx
@@ -62,7 +62,7 @@ export function EmptyScheduleState({
             </Button>
           )}
           {onAdd && (
-            <Button variant="ghost" size="sm" onClick={onAdd} className="gap-1.5 !text-ink hover:!bg-ground">
+            <Button variant="ghost" size="sm" onClick={onAdd} className="gap-1.5 !text-ink hover:bg-ground!">
               <HiPlus className="w-3.5 h-3.5" />
               {addLabel}
             </Button>
diff --git a/components/settings/ThemeSelector.tsx b/components/settings/ThemeSelector.tsx
index f313e781..4ddfffda 100644
--- a/components/settings/ThemeSelector.tsx
+++ b/components/settings/ThemeSelector.tsx
@@ -23,12 +23,12 @@ function ThemePreviewCard({
       onClick={onSelect}
       aria-pressed={isSelected}
       className={`
-        relative w-full !rounded-2xl !min-h-0 !font-normal
-        !text-left bg-surface
+        relative w-full rounded-2xl! min-h-0! font-normal!
+        text-left! bg-surface
         flex flex-col items-center
-        !pt-5 !px-3.5 !pb-4
+        pt-5! px-3.5! pb-4!
         transition-all duration-200 ease-out
-        ${isSelected ? '!border-[2px] border-spot' : '!border-[1.5px] border-edge-subtle hover:border-edge'}
+        ${isSelected ? 'border-2! border-spot' : 'border-[1.5px]! border-edge-subtle hover:border-edge'}
       `}
       style={isSelected ? { boxShadow: '0 0 0 3px rgba(217,119,6,0.12)' } : undefined}
     >
diff --git a/components/today-schedule/TimeEditDialog.tsx b/components/today-schedule/TimeEditDialog.tsx
index 6fb8736c..3f16c351 100644
--- a/components/today-schedule/TimeEditDialog.tsx
+++ b/components/today-schedule/TimeEditDialog.tsx
@@ -32,7 +32,7 @@ export function TimeEditDialog({
   };
 
   return (
-    <div className="fixed inset-0 bg-black/20 flex items-center justify-center z-[100] p-4" onClick={onCancel}>
+    <div className="fixed inset-0 bg-black/20 flex items-center justify-center z-100 p-4" onClick={onCancel}>
       <div
         className="bg-white rounded-lg shadow-xl max-w-md w-full border-2 border-gray-300"
         onClick={(e) => e.stopPropagation()}
@@ -111,7 +111,7 @@ export function TimeEditDialog({
                         variant="danger"
                         size="sm"
                         onClick={() => onDeleteLabel(label.id)}
-                        className="!min-h-[36px]"
+                        className="min-h-9!"
                       >
                         削除
                       </Button>
diff --git a/components/today-schedule/TimeInputRow.tsx b/components/today-schedule/TimeInputRow.tsx
index 4390fcc1..fecc3f3e 100644
--- a/components/today-schedule/TimeInputRow.tsx
+++ b/components/today-schedule/TimeInputRow.tsx
@@ -32,7 +32,7 @@ export function TimeInputRow({
           max={23}
           placeholder="時"
           error={addError ? ' ' : undefined}
-          className="w-12 md:w-14 !px-1.5 !py-1 !text-base !min-h-0"
+          className="w-12 md:w-14 px-1.5! py-1! text-base! min-h-0!"
         />
         <span className="text-base text-ink-sub">:</span>
         <NumberInput
@@ -41,7 +41,7 @@ export function TimeInputRow({
           min={0}
           max={59}
           placeholder="分"
-          className="w-12 md:w-14 !px-1.5 !py-1 !text-base !min-h-0"
+          className="w-12 md:w-14 px-1.5! py-1! text-base! min-h-0!"
         />
       </div>
       <Button
@@ -49,7 +49,7 @@ export function TimeInputRow({
         size="sm"
         onClick={onAdd}
         aria-label="時間ラベルを追加"
-        className="!min-h-0 !py-1.5 !px-3 !text-sm !gap-1"
+        className="min-h-0! py-1.5! px-3! text-sm! gap-1!"
       >
         <HiPlus className="h-3.5 w-3.5" />
         <span>追加</span>
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index aa2f1f10..524e7c52 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -87,8 +87,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     ref
   ) => {
     // ベーススタイル
-    const baseStyles =
-      'inline-flex items-center justify-center font-semibold rounded-lg transition-colors min-h-[44px]';
+    const baseStyles = 'inline-flex items-center justify-center font-semibold rounded-lg transition-colors min-h-11';
 
     // サイズスタイル
     const sizeStyles = {
diff --git a/components/ui/FilterModal.tsx b/components/ui/FilterModal.tsx
index f0fc2a36..d64af6d7 100644
--- a/components/ui/FilterModal.tsx
+++ b/components/ui/FilterModal.tsx
@@ -78,7 +78,7 @@ export function FilterSearchInput({
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
-        className={`pl-10 !py-2 !text-sm !min-h-[40px] ${className}`}
+        className={`pl-10 py-2! text-sm! !min-h-[40px] ${className}`}
         {...props}
       />
     </div>
@@ -94,7 +94,7 @@ export function FilterOptionButton({ selected = false, className = '', children,
     <Button
       variant={selected ? 'ghost' : 'surface'}
       size="sm"
-      className={`flex-1 !rounded-lg !px-3 !py-2 gap-1.5 justify-center ${
+      className={`flex-1 rounded-lg! px-3! py-2! gap-1.5 justify-center ${
         selected ? '!bg-spot !text-on-spot !border-spot' : ''
       } ${className}`}
       {...props}
@@ -120,10 +120,10 @@ export function FilterSortOption({
     <Button
       variant="ghost"
       size="sm"
-      className={`!min-h-0 w-full !justify-start !px-3 !py-2 !text-sm !rounded-lg gap-2 [-webkit-tap-highlight-color:transparent] ${
+      className={`min-h-0! w-full !justify-start px-3! py-2! text-sm! rounded-lg! gap-2 [-webkit-tap-highlight-color:transparent] ${
         selected
-          ? '!bg-spot-surface !text-spot !font-bold !border !border-spot/30 shadow-sm active:!bg-spot-surface'
-          : '!border !border-transparent !text-ink-sub hover:!bg-ground active:!bg-ground'
+          ? '!bg-spot-surface !text-spot !font-bold border! !border-spot/30 shadow-sm active:!bg-spot-surface'
+          : 'border! !border-transparent text-ink-sub! hover:bg-ground! active:!bg-ground'
       } ${className}`}
       {...props}
     >
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
index 20ab780f..2eac62f9 100644
--- a/components/ui/Input.tsx
+++ b/components/ui/Input.tsx
@@ -46,7 +46,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     const inputType = isPasswordField && showPassword ? 'text' : type;
 
     // 入力部品の統一寸法（Select / NumberInput と揃える）。py-3・影なしのフラット。
-    const baseStyles = 'w-full rounded-lg border-2 px-4 py-3 text-lg transition-all duration-200 min-h-[44px]';
+    const baseStyles = 'w-full rounded-lg border-2 px-4 py-3 text-lg transition-all duration-200 min-h-11';
 
     const themeStyles =
       'bg-field border-edge text-ink placeholder:text-ink-muted hover:border-edge-strong focus:border-spot focus:bg-field focus:outline-none focus:ring-2 focus:ring-spot-subtle';
diff --git a/components/ui/NumberInput.tsx b/components/ui/NumberInput.tsx
index 57d7676e..3dd623a4 100644
--- a/components/ui/NumberInput.tsx
+++ b/components/ui/NumberInput.tsx
@@ -53,7 +53,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
 
     const alignStyles = align === 'left' ? 'text-left' : align === 'right' ? 'text-right' : 'text-center';
     // 入力部品の統一寸法（Input / Select と揃える）。py-3・影なしのフラット。
-    const baseStyles = `rounded-lg border-2 px-4 py-3 text-lg transition-all duration-200 min-h-[44px] ${alignStyles}`;
+    const baseStyles = `rounded-lg border-2 px-4 py-3 text-lg transition-all duration-200 min-h-11 ${alignStyles}`;
 
     const themeStyles =
       'bg-field border-edge text-ink placeholder:text-ink-muted hover:border-edge-strong focus:border-spot focus:bg-field focus:outline-none focus:ring-2 focus:ring-spot-subtle';
diff --git a/components/ui/Select.tsx b/components/ui/Select.tsx
index e4b824e5..a9839dde 100644
--- a/components/ui/Select.tsx
+++ b/components/ui/Select.tsx
@@ -61,7 +61,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
     const selectId = id || generatedId;
 
     const baseStyles =
-      'w-full rounded-lg border-2 px-4 py-3 text-lg transition-all duration-200 min-h-[44px] appearance-none bg-no-repeat bg-right pr-10';
+      'w-full rounded-lg border-2 px-4 py-3 text-lg transition-all duration-200 min-h-11 appearance-none bg-no-repeat bg-right pr-10';
 
     const themeStyles =
       'border-edge text-ink bg-field hover:border-edge-strong focus:border-spot focus:outline-none focus:ring-2 focus:ring-spot-subtle';

From 931836d9d0c8502d14cbad95080452325199cb9d Mon Sep 17 00:00:00 2001
From: "[IKcoding-jp]" <[kensaku.ikeda04@gmail.com]>
Date: Mon, 3 Aug 2026 11:51:22 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E3=83=96=E3=83=A9=E3=83=B3=E3=83=89?=
 =?UTF-8?q?=E8=A1=A8=E8=A8=98=E3=81=AE=E6=9B=B8=E4=BD=93=E6=8C=87=E5=AE=9A?=
 =?UTF-8?q?=E3=81=8C=E5=8A=B9=E3=81=84=E3=81=A6=E3=81=84=E3=81=AA=E3=81=84?=
 =?UTF-8?q?=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3=E3=81=97=20font-b?=
 =?UTF-8?q?rand=20=E3=81=AB=E7=B5=B1=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

font-weight として解釈される書き方で書体を指定していたため、ロゴ・スプラッシュ・
ログイン/新規登録の見出しはいずれも指定が無効で、body のセリフ体が表示されていた。
画面ごとに指定書体もばらついていたため、Inter に一本化する。

- app/globals.css: @theme に --font-brand を定義してユーティリティ化
- スプラッシュ5パターン・ログイン・新規登録・ホームヘッダーを font-brand に統一
- DESIGN.md: 「6.4 フォントファミリー」を追加し、指定方法と統一の理由を明記

あわせて、過去の計画・作業ログ（docs/・.superpowers/）に残る古いクラス名を
Tailwind が拾って未使用CSSを生成していたため、@source not で走査対象から除外した。

検証: ビルドして font-family として出力されること、旧クラスが生成されないことを確認。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WWxo2ZpLgqp8pd54g9qF1f
---
 DESIGN.md                      | 530 ++++++++++++++++++---------------
 app/globals.css                |  10 +
 app/login/page.tsx             |   2 +-
 app/signup/page.tsx            |   2 +-
 components/home/HomeHeader.tsx |   4 +-
 components/splash/patterns.tsx |  20 +-
 6 files changed, 311 insertions(+), 257 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 1951e09d..a6fe2095 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -40,14 +40,14 @@ RoastPlus の主軸は「現場オペレーション重視」です。明るく
 
 優先順位は次の順に固定します。
 
-| 優先 | 原則 | 内容 |
-|------|------|------|
-| 1 | 現場で迷わない | 画面を開いた瞬間に、今の状態と次の操作が分かる。 |
-| 2 | ページごとの型を揃える | 同じ目的の画面は、ヘッダー、余白、最大幅、主要アクション位置、空状態を揃える。 |
-| 3 | iPadで押しやすい | 現場iPad、タブレット、補助端末でのPWA利用を前提にし、44px以上のタッチ領域を確保する。 |
-| 4 | 情報が一目で読める | 時間、担当、状態、次アクションは本文より強く見せる。 |
-| 5 | コーヒーらしさは控えめに効かせる | コーヒーらしい色や演出は、業務理解を邪魔しない範囲で使う。 |
-| 6 | 毎日使って疲れない | 強いアニメーション、過度なグラデーション、重い装飾は限定する。 |
+| 優先 | 原則                             | 内容                                                                                  |
+| ---- | -------------------------------- | ------------------------------------------------------------------------------------- |
+| 1    | 現場で迷わない                   | 画面を開いた瞬間に、今の状態と次の操作が分かる。                                      |
+| 2    | ページごとの型を揃える           | 同じ目的の画面は、ヘッダー、余白、最大幅、主要アクション位置、空状態を揃える。        |
+| 3    | iPadで押しやすい                 | 現場iPad、タブレット、補助端末でのPWA利用を前提にし、44px以上のタッチ領域を確保する。 |
+| 4    | 情報が一目で読める               | 時間、担当、状態、次アクションは本文より強く見せる。                                  |
+| 5    | コーヒーらしさは控えめに効かせる | コーヒーらしい色や演出は、業務理解を邪魔しない範囲で使う。                            |
+| 6    | 毎日使って疲れない               | 強いアニメーション、過度なグラデーション、重い装飾は限定する。                        |
 
 ---
 
@@ -55,14 +55,14 @@ RoastPlus の主軸は「現場オペレーション重視」です。明るく
 
 RoastPlus のページは、見た目ではなく「ユーザーが何をする画面か」で分類します。新しい画面を作るときは、まずこの6タイプのどれに当たるかを決めます。
 
-| タイプ | 主な用途 | 対象ページ例 | 推奨レイアウト | ヘッダー | 最大幅 | 主要アクション位置 | 使う共通UI | 避けること |
-|--------|----------|--------------|----------------|----------|--------|--------------------|------------|------------|
-| ホーム / ハブ | 機能選択 | ホーム | 2列中心の機能カード | ブランドヘッダー | `max-w-6xl` | カード全体を入口にする | `Card`, `ActionCard` | カード内説明を増やしすぎる |
-| 一覧 / 管理 | 探す、追加、編集 | 担当表、スケジュール、欠点豆、生産記録、試飲一覧 | iPadではカード、広い画面はテーブルやグリッド | `FloatingNav` + タイトル | `max-w-4xl` から `max-w-7xl` | 上部右側、または下部固定 | `Card`, `Button`, `Tabs`, `EmptyState` | 検索、絞り込み、追加を離れた場所に置く |
-| フォーム / 編集 | 入力して保存 | レシピ作成、試飲作成、設定入力、お問い合わせ | 縦積みフォーム | `FloatingNav` + タイトル | `max-w-2xl` または `max-w-lg` | 下部、右下、固定フッターのいずれか | `Input`, `Textarea`, `Select`, `Button`, `Card` | 危険操作を保存ボタンの近くに置く |
-| 集中操作 / 実行 | 作業中に状態と次操作を見る | ドリップガイド、時計 | 固定または準固定画面 | 最小ナビ、固定ヘッダー | 画面全体 | 下部操作、中央に主要状態 | `Button`, `IconButton`, `ProgressBar` | 説明文やカードを増やしすぎる |
-| 詳細 / 参照 | 読む、判断材料を見る | 欠点豆詳細、開発秘話、規約、履歴詳細 | 読み物レイアウト | `FloatingNav` + タイトル | `max-w-3xl` 前後 | 必要な場合のみ本文末尾 | `Card`, `Badge`, `Accordion` | 操作ボタンを主役にする |
-| モーダル / 確認 | 短い判断、設定、確認 | 削除確認、フィルター、OCR確認、詳細設定 | 中央ダイアログ、またはモバイル下寄せ | モーダル内タイトル | `max-w-sm` から `max-w-md` | 下部にキャンセル、実行 | `Modal`, `Dialog`, `Button` | 長い内容や複雑な設定を詰め込む |
+| タイプ          | 主な用途                   | 対象ページ例                                     | 推奨レイアウト                               | ヘッダー                 | 最大幅                        | 主要アクション位置                 | 使う共通UI                                      | 避けること                             |
+| --------------- | -------------------------- | ------------------------------------------------ | -------------------------------------------- | ------------------------ | ----------------------------- | ---------------------------------- | ----------------------------------------------- | -------------------------------------- |
+| ホーム / ハブ   | 機能選択                   | ホーム                                           | 2列中心の機能カード                          | ブランドヘッダー         | `max-w-6xl`                   | カード全体を入口にする             | `Card`, `ActionCard`                            | カード内説明を増やしすぎる             |
+| 一覧 / 管理     | 探す、追加、編集           | 担当表、スケジュール、欠点豆、生産記録、試飲一覧 | iPadではカード、広い画面はテーブルやグリッド | `FloatingNav` + タイトル | `max-w-4xl` から `max-w-7xl`  | 上部右側、または下部固定           | `Card`, `Button`, `Tabs`, `EmptyState`          | 検索、絞り込み、追加を離れた場所に置く |
+| フォーム / 編集 | 入力して保存               | レシピ作成、試飲作成、設定入力、お問い合わせ     | 縦積みフォーム                               | `FloatingNav` + タイトル | `max-w-2xl` または `max-w-lg` | 下部、右下、固定フッターのいずれか | `Input`, `Textarea`, `Select`, `Button`, `Card` | 危険操作を保存ボタンの近くに置く       |
+| 集中操作 / 実行 | 作業中に状態と次操作を見る | ドリップガイド、時計                             | 固定または準固定画面                         | 最小ナビ、固定ヘッダー   | 画面全体                      | 下部操作、中央に主要状態           | `Button`, `IconButton`, `ProgressBar`           | 説明文やカードを増やしすぎる           |
+| 詳細 / 参照     | 読む、判断材料を見る       | 欠点豆詳細、開発秘話、規約、履歴詳細             | 読み物レイアウト                             | `FloatingNav` + タイトル | `max-w-3xl` 前後              | 必要な場合のみ本文末尾             | `Card`, `Badge`, `Accordion`                    | 操作ボタンを主役にする                 |
+| モーダル / 確認 | 短い判断、設定、確認       | 削除確認、フィルター、OCR確認、詳細設定          | 中央ダイアログ、またはモバイル下寄せ         | モーダル内タイトル       | `max-w-sm` から `max-w-md`    | 下部にキャンセル、実行             | `Modal`, `Dialog`, `Button`                     | 長い内容や複雑な設定を詰め込む         |
 
 ---
 
@@ -117,83 +117,83 @@ RoastPlus では、色を直接指定せず、意味を持つセマンティッ
 
 ### 5.2 テーマ概要
 
-| 項目 | 内容 |
-|------|------|
-| テーマ数 | 7テーマ（`default`, `christmas`, `dark-roast`, `light-roast`, `matcha`, `caramel`, `dark`） |
-| テーマ切替方法 | `<html data-theme="christmas">` でCSS変数が自動切替 |
-| カラー方針 | セマンティックトークン必須。ハードコードカラーは禁止 |
-| スタイリング | Tailwind CSS v4 + CSS変数 |
+| 項目           | 内容                                                                                        |
+| -------------- | ------------------------------------------------------------------------------------------- |
+| テーマ数       | 7テーマ（`default`, `christmas`, `dark-roast`, `light-roast`, `matcha`, `caramel`, `dark`） |
+| テーマ切替方法 | `<html data-theme="christmas">` でCSS変数が自動切替                                         |
+| カラー方針     | セマンティックトークン必須。ハードコードカラーは禁止                                        |
+| スタイリング   | Tailwind CSS v4 + CSS変数                                                                   |
 
 ### 5.3 背景色
 
-| Tailwindクラス | CSS変数 | default値 | 用途 |
-|--------------|---------|-----------|------|
-| `bg-page` | `--page` | `#F7F7F5` | ページ全体背景 |
-| `bg-surface` | `--surface` | `#FFFFFF` | カード・セクション背景 |
-| `bg-overlay` | `--overlay` | `#FFFFFF` | モーダル・ダイアログ。不透明必須 |
-| `bg-ground` | `--ground` | `#F5F5F5` | テーブルヘッダー・セクション背景 |
-| `bg-field` | `--field` | `#FFFFFF` | 入力フィールド背景 |
-| `bg-spot` | `--spot` | `#E48003` | アクセント背景 |
-| `bg-spot-subtle` | `--spot-subtle` | `#f0f0f0` | アクセント薄背景 |
-| `bg-spot-surface` | `--spot-surface` | `#f7f7f7` | アクセント極薄背景 |
-| `bg-btn-primary` | `--btn-primary` | `#E48003` | プライマリボタン背景 |
-| `bg-btn-primary-hover` | `--btn-primary-hover` | `#C56604` | プライマリボタンホバー |
-| `bg-header-bg` | `--header-bg` | `#261a14` | ヘッダー背景 |
+| Tailwindクラス         | CSS変数               | default値 | 用途                             |
+| ---------------------- | --------------------- | --------- | -------------------------------- |
+| `bg-page`              | `--page`              | `#F7F7F5` | ページ全体背景                   |
+| `bg-surface`           | `--surface`           | `#FFFFFF` | カード・セクション背景           |
+| `bg-overlay`           | `--overlay`           | `#FFFFFF` | モーダル・ダイアログ。不透明必須 |
+| `bg-ground`            | `--ground`            | `#F5F5F5` | テーブルヘッダー・セクション背景 |
+| `bg-field`             | `--field`             | `#FFFFFF` | 入力フィールド背景               |
+| `bg-spot`              | `--spot`              | `#E48003` | アクセント背景                   |
+| `bg-spot-subtle`       | `--spot-subtle`       | `#f0f0f0` | アクセント薄背景                 |
+| `bg-spot-surface`      | `--spot-surface`      | `#f7f7f7` | アクセント極薄背景               |
+| `bg-btn-primary`       | `--btn-primary`       | `#E48003` | プライマリボタン背景             |
+| `bg-btn-primary-hover` | `--btn-primary-hover` | `#C56604` | プライマリボタンホバー           |
+| `bg-header-bg`         | `--header-bg`         | `#261a14` | ヘッダー背景                     |
 
 ### 5.4 テキスト色
 
-| Tailwindクラス | CSS変数 | default値 | 用途 |
-|--------------|---------|-----------|------|
-| `text-ink` | `--ink` | `#1f2937` | メインテキスト |
-| `text-ink-sub` | `--ink-sub` | `#4b5563` | 補助テキスト・説明文 |
-| `text-ink-muted` | `--ink-muted` | `#9ca3af` | プレースホルダー・薄いテキスト |
-| `text-spot` | `--spot` | `#E48003` | アクセントテキスト |
-| `text-spot-hover` | `--spot-hover` | `#C56604` | アクセントホバー |
-| `text-header-text` | `--header-text` | `#FFFFFF` | ヘッダーテキスト |
-| `text-header-accent` | `--header-accent` | `#EF8A00` | ヘッダーアクセント |
-| `text-danger` | `--danger` | `#dc2626` | エラー・削除 |
-| `text-success` | `--success` | `#16a34a` | 成功 |
-| `text-warning` | `--warning` | `#eab308` | 警告 |
-| `text-info` | `--info` | `#00b8d4` | 情報 |
-| `text-error` | `--error` | `#ef4444` | エラーテキスト |
+| Tailwindクラス       | CSS変数           | default値 | 用途                           |
+| -------------------- | ----------------- | --------- | ------------------------------ |
+| `text-ink`           | `--ink`           | `#1f2937` | メインテキスト                 |
+| `text-ink-sub`       | `--ink-sub`       | `#4b5563` | 補助テキスト・説明文           |
+| `text-ink-muted`     | `--ink-muted`     | `#9ca3af` | プレースホルダー・薄いテキスト |
+| `text-spot`          | `--spot`          | `#E48003` | アクセントテキスト             |
+| `text-spot-hover`    | `--spot-hover`    | `#C56604` | アクセントホバー               |
+| `text-header-text`   | `--header-text`   | `#FFFFFF` | ヘッダーテキスト               |
+| `text-header-accent` | `--header-accent` | `#EF8A00` | ヘッダーアクセント             |
+| `text-danger`        | `--danger`        | `#dc2626` | エラー・削除                   |
+| `text-success`       | `--success`       | `#16a34a` | 成功                           |
+| `text-warning`       | `--warning`       | `#eab308` | 警告                           |
+| `text-info`          | `--info`          | `#00b8d4` | 情報                           |
+| `text-error`         | `--error`         | `#ef4444` | エラーテキスト                 |
 
 ### 5.5 ボーダー色
 
-| Tailwindクラス | CSS変数 | default値 | 用途 |
-|--------------|---------|-----------|------|
-| `border-edge` | `--edge` | `#e5e7eb` | 通常ボーダー |
+| Tailwindクラス       | CSS変数         | default値 | 用途                 |
+| -------------------- | --------------- | --------- | -------------------- |
+| `border-edge`        | `--edge`        | `#e5e7eb` | 通常ボーダー         |
 | `border-edge-strong` | `--edge-strong` | `#d1d5db` | 強調ボーダー・ホバー |
-| `border-edge-subtle` | `--edge-subtle` | `#f3f4f6` | 薄いボーダー |
-| `border-error` | `--error` | `#ef4444` | エラーボーダー |
+| `border-edge-subtle` | `--edge-subtle` | `#f3f4f6` | 薄いボーダー         |
+| `border-error`       | `--error`       | `#ef4444` | エラーボーダー       |
 
 ### 5.6 ステータス薄背景
 
-| Tailwindクラス | default値 | 用途 |
-|--------------|-----------|------|
-| `bg-danger-subtle` | `#fee2e2` | エラー薄背景 |
-| `bg-success-subtle` | `#dcfce7` | 成功薄背景 |
-| `bg-warning-subtle` | `#fef9c3` | 警告薄背景 |
+| Tailwindクラス      | default値 | 用途         |
+| ------------------- | --------- | ------------ |
+| `bg-danger-subtle`  | `#fee2e2` | エラー薄背景 |
+| `bg-success-subtle` | `#dcfce7` | 成功薄背景   |
+| `bg-warning-subtle` | `#fef9c3` | 警告薄背景   |
 
 ### 5.7 シャドウ
 
-| クラス | 用途 |
-|--------|------|
-| `shadow-card` | カード通常シャドウ |
+| クラス              | 用途                 |
+| ------------------- | -------------------- |
+| `shadow-card`       | カード通常シャドウ   |
 | `shadow-card-hover` | カードホバーシャドウ |
-| `shadow-card-glow` | 薄いシャドウ |
+| `shadow-card-glow`  | 薄いシャドウ         |
 
 ### 5.8 ブランド固定色
 
 ブランド固定色は、通常画面では乱用しません。ロゴ、ホーム、テーマプレビュー、コーヒーらしい強調に限定します。
 
-| Tailwindクラス | 値 | 用途 |
-|--------------|-----|------|
+| Tailwindクラス                | 値        | 用途             |
+| ----------------------------- | --------- | ---------------- |
 | `text-primary` / `bg-primary` | `#EF8A00` | ブランドオレンジ |
-| `bg-primary-dark` | `#D67A00` | ダークオレンジ |
-| `text-primary-light` | `#FF9A1A` | ライトオレンジ |
-| `bg-dark` | `#211714` | ダークブラウン |
-| `bg-dark-light` | `#3A2F2B` | ライトブラウン |
-| `text-gold` | `#FFC107` | ゴールド |
+| `bg-primary-dark`             | `#D67A00` | ダークオレンジ   |
+| `text-primary-light`          | `#FF9A1A` | ライトオレンジ   |
+| `bg-dark`                     | `#211714` | ダークブラウン   |
+| `bg-dark-light`               | `#3A2F2B` | ライトブラウン   |
+| `text-gold`                   | `#FFC107` | ゴールド         |
 
 ### 5.9 カードヘッダーグラデーション
 
@@ -213,54 +213,82 @@ RoastPlus では、色を直接指定せず、意味を持つセマンティッ
 
 ### 6.1 用途別の基本形
 
-| 用途 | 推奨クラス | 使う場所 |
-|------|------------|----------|
-| ページタイトル | `text-xl sm:text-2xl font-bold text-ink` | 通常ページのタイトル |
-| セクション見出し | `text-lg font-semibold text-ink` | カード内やフォーム区切り |
-| 本文 | `text-base text-ink` | 説明、本文 |
-| 補助文 | `text-sm text-ink-sub` | 説明、注記 |
-| ラベル | `text-xs font-medium text-ink-muted` | バッジ、補足情報 |
-| 大きな数値 | `text-3xl` から `text-4xl font-bold` | タイマー、進捗数値 |
+| 用途             | 推奨クラス                               | 使う場所                 |
+| ---------------- | ---------------------------------------- | ------------------------ |
+| ページタイトル   | `text-xl sm:text-2xl font-bold text-ink` | 通常ページのタイトル     |
+| セクション見出し | `text-lg font-semibold text-ink`         | カード内やフォーム区切り |
+| 本文             | `text-base text-ink`                     | 説明、本文               |
+| 補助文           | `text-sm text-ink-sub`                   | 説明、注記               |
+| ラベル           | `text-xs font-medium text-ink-muted`     | バッジ、補足情報         |
+| 大きな数値       | `text-3xl` から `text-4xl font-bold`     | タイマー、進捗数値       |
 
 ### 6.2 フォントサイズ
 
-| クラス | px換算 | 主な用途 |
-|--------|--------|---------|
-| `text-xs` | 12px | バッジ・ラベル・補足情報 |
-| `text-sm` | 14px | 補助テキスト・フォームラベル |
-| `text-base` | 16px | 本文 |
-| `text-lg` | 18px | セクション見出し |
-| `text-xl` | 20px | ページタイトル（モバイル） |
-| `text-2xl` | 24px | ページタイトル（デスクトップ） |
-| `text-3xl` | 30px | 大きな数値 |
-| `text-4xl` | 36px | タイマーなどのヒーロー数値 |
+| クラス      | px換算 | 主な用途                       |
+| ----------- | ------ | ------------------------------ |
+| `text-xs`   | 12px   | バッジ・ラベル・補足情報       |
+| `text-sm`   | 14px   | 補助テキスト・フォームラベル   |
+| `text-base` | 16px   | 本文                           |
+| `text-lg`   | 18px   | セクション見出し               |
+| `text-xl`   | 20px   | ページタイトル（モバイル）     |
+| `text-2xl`  | 24px   | ページタイトル（デスクトップ） |
+| `text-3xl`  | 30px   | 大きな数値                     |
+| `text-4xl`  | 36px   | タイマーなどのヒーロー数値     |
 
 ### 6.3 フォントウェイト
 
-| クラス | 用途 |
-|--------|------|
-| `font-bold` | 見出し・強調 |
+| クラス          | 用途                     |
+| --------------- | ------------------------ |
+| `font-bold`     | 見出し・強調             |
 | `font-semibold` | サブ見出し・ボタンラベル |
-| `font-medium` | ラベル・タブ |
-| `font-normal` | 本文 |
+| `font-medium`   | ラベル・タブ             |
+| `font-normal`   | 本文                     |
 
-### 6.4 典型パターン
+### 6.4 フォントファミリー
 
-```tsx
-{/* ページタイトル */}
-<h1 className="text-xl sm:text-2xl font-bold text-ink">タイトル</h1>
+| クラス       | フォント | 用途                                                                  |
+| ------------ | -------- | --------------------------------------------------------------------- |
+| （既定）     | serif    | 本文。`<body>` の `font-serif` が効く                                 |
+| `font-sans`  | Inter 系 | サンセリフにしたい箇所                                                |
+| `font-brand` | Inter    | ブランド表記（ホームのロゴ・スプラッシュ・ログイン/新規登録の見出し） |
+| `font-num`   | Outfit   | 数値表示                                                              |
+| `font-mono`  | 等幅     | コード・ID                                                            |
+
+ブランド表記は画面ごとに書体を変えず、`font-brand` に揃える。ロゴとタイトルで書体が違うと、同じアプリの画面に見えなくなる。
+
+書体を指定するときは、必ず上記のユーティリティクラスを使う。`font-` に CSS 変数を任意値として直接渡す書き方（角括弧・丸括弧のどちらの形でも）は、Tailwind v4 では **font-weight として解釈されて効かない**。font-family として扱わせるには `family-name:` の型ヒントが必要になる。
 
-{/* セクション見出し */}
-<h2 className="text-lg font-semibold text-ink">セクション名</h2>
+新しい書体を足すときは、クラス側で指定せず `app/globals.css` の `@theme` に `--font-*` を定義してユーティリティ化する。
 
-{/* 説明文 */}
-<p className="text-sm text-ink-sub">補足説明</p>
+> なお Tailwind v4 は Markdown を含むプロジェクト内のファイルを走査してクラス名を拾うため、**このドキュメントや CSS のコメントに使っていないクラス名を書くと、未使用のCSSが生成される**。説明のために書くときは実在しない形に崩す。過去の計画・作業ログ（`docs/`・`.superpowers/`）は `app/globals.css` の `@source not` で除外済み。
 
-{/* 数値表示 */}
-<span className="text-4xl font-bold text-ink">00:00</span>
+### 6.5 典型パターン
 
-{/* バッジ・ラベル */}
-<span className="text-xs font-medium text-ink-muted">ラベル</span>
+```tsx
+{
+  /* ページタイトル */
+}
+<h1 className="text-xl sm:text-2xl font-bold text-ink">タイトル</h1>;
+
+{
+  /* セクション見出し */
+}
+<h2 className="text-lg font-semibold text-ink">セクション名</h2>;
+
+{
+  /* 説明文 */
+}
+<p className="text-sm text-ink-sub">補足説明</p>;
+
+{
+  /* 数値表示 */
+}
+<span className="text-4xl font-bold text-ink">00:00</span>;
+
+{
+  /* バッジ・ラベル */
+}
+<span className="text-xs font-medium text-ink-muted">ラベル</span>;
 ```
 
 ---
@@ -271,58 +299,58 @@ RoastPlus では、色を直接指定せず、意味を持つセマンティッ
 
 ### 7.1 基本スケール
 
-| 用途 | 推奨 |
-|------|------|
-| モバイル横余白 | `px-4` |
-| タブレット横余白 | `sm:px-6` |
-| 標準ページ | `max-w-4xl` |
-| フォーム | `max-w-2xl` または `max-w-lg` |
-| 詳細読み物 | `max-w-3xl` |
-| ホーム、広い一覧 | `max-w-6xl` から `max-w-7xl` |
-| カード内余白 | `p-4` から `p-6` |
-| セクション間 | `space-y-6` |
-| カード角丸 | `rounded-2xl` |
-| ボタン、入力 | `rounded-lg` |
+| 用途             | 推奨                          |
+| ---------------- | ----------------------------- |
+| モバイル横余白   | `px-4`                        |
+| タブレット横余白 | `sm:px-6`                     |
+| 標準ページ       | `max-w-4xl`                   |
+| フォーム         | `max-w-2xl` または `max-w-lg` |
+| 詳細読み物       | `max-w-3xl`                   |
+| ホーム、広い一覧 | `max-w-6xl` から `max-w-7xl`  |
+| カード内余白     | `p-4` から `p-6`              |
+| セクション間     | `space-y-6`                   |
+| カード角丸       | `rounded-2xl`                 |
+| ボタン、入力     | `rounded-lg`                  |
 
 ### 7.2 垂直スペーシング
 
-| クラス | px | 用途 |
-|--------|----|------|
-| `space-y-2` | 8px | 密なリスト |
-| `space-y-4` | 16px | フォーム要素間 |
+| クラス      | px   | 用途                 |
+| ----------- | ---- | -------------------- |
+| `space-y-2` | 8px  | 密なリスト           |
+| `space-y-4` | 16px | フォーム要素間       |
 | `space-y-6` | 24px | セクション内グループ |
-| `space-y-8` | 32px | 主要セクション間 |
+| `space-y-8` | 32px | 主要セクション間     |
 
 ### 7.3 グリッド・フレックスギャップ
 
-| クラス | px | 用途 |
-|--------|----|------|
-| `gap-2` | 8px | アイコン+テキスト |
-| `gap-3` | 12px | モバイルグリッド |
+| クラス  | px   | 用途                 |
+| ------- | ---- | -------------------- |
+| `gap-2` | 8px  | アイコン+テキスト    |
+| `gap-3` | 12px | モバイルグリッド     |
 | `gap-4` | 16px | デスクトップグリッド |
-| `gap-6` | 24px | 大きなグリッド |
+| `gap-6` | 24px | 大きなグリッド       |
 
 ### 7.4 コンテナ余白
 
-| クラス | 値 | 用途 |
-|--------|----|------|
-| `px-4` | 16px | モバイル横余白 |
-| `sm:px-6` | 24px | タブレット横余白 |
-| `lg:px-8` | 32px | デスクトップ横余白 |
-| `py-4` | 16px | モバイル縦余白 |
-| `py-6` | 24px | タブレット縦余白 |
-| `p-4` | 16px | カード内余白 |
-| `p-6` | 24px | フォームカード内余白 |
+| クラス    | 値   | 用途                 |
+| --------- | ---- | -------------------- |
+| `px-4`    | 16px | モバイル横余白       |
+| `sm:px-6` | 24px | タブレット横余白     |
+| `lg:px-8` | 32px | デスクトップ横余白   |
+| `py-4`    | 16px | モバイル縦余白       |
+| `py-6`    | 24px | タブレット縦余白     |
+| `p-4`     | 16px | カード内余白         |
+| `p-6`     | 24px | フォームカード内余白 |
 
 ### 7.5 角丸
 
-| クラス | px | 主な用途 |
-|--------|----|---------|
-| `rounded-lg` | 8px | ボタン・入力・小要素 |
-| `rounded-xl` | 12px | バッジ・中要素 |
-| `rounded-2xl` | 16px | カード・モーダル |
-| `rounded-3xl` | 24px | 大きな特殊要素 |
-| `rounded-full` | 50% | アイコンボタン・アバター・ピル型バッジ |
+| クラス         | px   | 主な用途                               |
+| -------------- | ---- | -------------------------------------- |
+| `rounded-lg`   | 8px  | ボタン・入力・小要素                   |
+| `rounded-xl`   | 12px | バッジ・中要素                         |
+| `rounded-2xl`  | 16px | カード・モーダル                       |
+| `rounded-3xl`  | 24px | 大きな特殊要素                         |
+| `rounded-full` | 50%  | アイコンボタン・アバター・ピル型バッジ |
 
 ---
 
@@ -339,20 +367,20 @@ RoastPlus では、色を直接指定せず、意味を持つセマンティッ
 
 ### 8.2 使い分け
 
-| コンポーネント | 主な用途 | 注意 |
-|----------------|----------|------|
-| `Button` | 主要、補助、危険操作 | 主操作は1画面1つを目立たせる |
-| `IconButton` | 戻る、設定、閉じるなどの小操作 | 44px以上のタッチ領域を確保する |
-| `FloatingNav` | 通常ページの戻る導線 | ホームと集中画面では例外あり |
-| `Card` | 情報のまとまり | カードの入れ子は禁止 |
-| `Input`, `Textarea`, `Select` | フォーム入力 | ラベルと補足文を近くに置く |
-| `Checkbox`, `Switch` | ON/OFFや複数選択 | 生のinputを直接使わない |
-| セグメントコントロール | 3択以内の状態切替（「十分・残少・欠品」など） | `Tabs` との違い：ページコンテンツの切替ではなく値の状態変更に使う。`StatusToggle` パターン参照 |
-| `Modal` | 任意コンテンツのモーダル | `bg-overlay` 必須 |
-| `Dialog` | 確認ダイアログ | 削除は `danger` |
-| `Tabs` | 同階層の表示切替 | ページ遷移の代替にしすぎない |
-| `Accordion` | 補足情報の開閉 | 主要情報を隠しすぎない |
-| `EmptyState` | 空状態 | 次アクションを出す |
+| コンポーネント                | 主な用途                                      | 注意                                                                                           |
+| ----------------------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| `Button`                      | 主要、補助、危険操作                          | 主操作は1画面1つを目立たせる                                                                   |
+| `IconButton`                  | 戻る、設定、閉じるなどの小操作                | 44px以上のタッチ領域を確保する                                                                 |
+| `FloatingNav`                 | 通常ページの戻る導線                          | ホームと集中画面では例外あり                                                                   |
+| `Card`                        | 情報のまとまり                                | カードの入れ子は禁止                                                                           |
+| `Input`, `Textarea`, `Select` | フォーム入力                                  | ラベルと補足文を近くに置く                                                                     |
+| `Checkbox`, `Switch`          | ON/OFFや複数選択                              | 生のinputを直接使わない                                                                        |
+| セグメントコントロール        | 3択以内の状態切替（「十分・残少・欠品」など） | `Tabs` との違い：ページコンテンツの切替ではなく値の状態変更に使う。`StatusToggle` パターン参照 |
+| `Modal`                       | 任意コンテンツのモーダル                      | `bg-overlay` 必須                                                                              |
+| `Dialog`                      | 確認ダイアログ                                | 削除は `danger`                                                                                |
+| `Tabs`                        | 同階層の表示切替                              | ページ遷移の代替にしすぎない                                                                   |
+| `Accordion`                   | 補足情報の開閉                                | 主要情報を隠しすぎない                                                                         |
+| `EmptyState`                  | 空状態                                        | 次アクションを出す                                                                             |
 
 ### 8.3 import例
 
@@ -389,18 +417,18 @@ import {
 
 ### 8.4 Button
 
-| variant | 用途 |
-|---------|------|
-| `primary` | 主要アクション |
-| `secondary` | 副次アクション |
-| `danger` | 削除・危険操作 |
-| `success` | 完了・承認 |
-| `warning` | 注意喚起 |
-| `info` | 情報系アクション |
-| `outline` | 軽量アクション |
-| `ghost` | ナビゲーション、控えめな操作 |
-| `coffee` | ブランド強調 |
-| `surface` | フィルター・補助 |
+| variant     | 用途                         |
+| ----------- | ---------------------------- |
+| `primary`   | 主要アクション               |
+| `secondary` | 副次アクション               |
+| `danger`    | 削除・危険操作               |
+| `success`   | 完了・承認                   |
+| `warning`   | 注意喚起                     |
+| `info`      | 情報系アクション             |
+| `outline`   | 軽量アクション               |
+| `ghost`     | ナビゲーション、控えめな操作 |
+| `coffee`    | ブランド強調                 |
+| `surface`   | フィルター・補助             |
 
 ```tsx
 <Button variant="primary" size="md">保存</Button>
@@ -410,14 +438,14 @@ import {
 
 ### 8.5 Card
 
-| variant | 用途 |
-|---------|------|
-| `default` | 汎用カード |
-| `hoverable` | クリッカブルカード |
-| `action` | ホームグリッドカード |
-| `coffee` | ブランド強調カード |
-| `table` | テーブル外枠 |
-| `guide` | ガイド表示、空状態 |
+| variant     | 用途                 |
+| ----------- | -------------------- |
+| `default`   | 汎用カード           |
+| `hoverable` | クリッカブルカード   |
+| `action`    | ホームグリッドカード |
+| `coffee`    | ブランド強調カード   |
+| `table`     | テーブル外枠         |
+| `guide`     | ガイド表示、空状態   |
 
 ### 8.6 Modal / Dialog
 
@@ -494,7 +522,9 @@ import {
         <Input label="名前" />
         <div className="flex gap-4 justify-end">
           <Button variant="secondary">キャンセル</Button>
-          <Button variant="primary" type="submit">保存</Button>
+          <Button variant="primary" type="submit">
+            保存
+          </Button>
         </div>
       </form>
     </Card>
@@ -509,7 +539,9 @@ import {
 ```tsx
 <div className="grid grid-cols-2 gap-3 md:grid-cols-4 md:gap-4">
   {items.map((item) => (
-    <Card key={item.id} variant="action">...</Card>
+    <Card key={item.id} variant="action">
+      ...
+    </Card>
   ))}
 </div>
 ```
@@ -517,22 +549,30 @@ import {
 ### 9.5 ヘッダーパターン
 
 ```tsx
-{/* 通常ページ */}
+{
+  /* 通常ページ */
+}
 <div className="flex items-center gap-4">
   <BackLink href="/" variant="icon-only" />
   <h1 className="text-xl sm:text-2xl font-bold text-ink">タイトル</h1>
-</div>
+</div>;
 
-{/* スティッキー */}
+{
+  /* スティッキー */
+}
 <header className="sticky top-0 z-30 flex-shrink-0 bg-surface border-b border-edge px-4 py-3">
   <div className="flex items-center justify-between">
     <BackLink href="/" variant="icon-only" />
     <h1 className="text-xl font-bold text-ink">タイトル</h1>
-    <Button variant="primary" size="sm">追加</Button>
+    <Button variant="primary" size="sm">
+      追加
+    </Button>
   </div>
-</header>
+</header>;
 
-{/* 眉毛ラベル（eyebrow）付きタイトル — 機能名をアイコン+大文字英語で上段に添える */}
+{
+  /* 眉毛ラベル（eyebrow）付きタイトル — 機能名をアイコン+大文字英語で上段に添える */
+}
 <header>
   <div className="mb-1.5 flex items-center gap-1.5 text-[11px] font-bold tracking-[0.14em] text-ink-muted">
     <PageIcon className="h-[15px] w-[15px]" />
@@ -543,11 +583,15 @@ import {
       <h1 className="text-[22px] font-bold tracking-[0.01em] text-ink sm:text-[26px]">ページタイトル</h1>
       <p className="mt-1 text-[13.5px] text-ink-sub">一行説明</p>
     </div>
-    <Button variant="primary" className="shrink-0">主要アクション</Button>
+    <Button variant="primary" className="shrink-0">
+      主要アクション
+    </Button>
   </div>
-</header>
+</header>;
 
-{/* セクション見出し + カウントバッジ — 件数を色変化（0件=グレー / 1件以上=赤）で示す */}
+{
+  /* セクション見出し + カウントバッジ — 件数を色変化（0件=グレー / 1件以上=赤）で示す */
+}
 <div className="flex items-center gap-2">
   <h2 className="text-[15px] font-bold text-ink">セクション名</h2>
   <span
@@ -557,16 +601,18 @@ import {
   >
     {count}
   </span>
-</div>
+</div>;
 
-{/* ホーム */}
+{
+  /* ホーム */
+}
 <header className="relative z-50 shadow-lg bg-header-bg">
   <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
     <span className="text-2xl font-bold text-header-text">
       Roast<span className="text-header-accent">Plus</span>
     </span>
   </div>
-</header>
+</header>;
 ```
 
 ### 9.6 テーブルリスト
@@ -574,7 +620,9 @@ import {
 一覧データを行で表示する際の基本形。モバイルで横スクロールが発生するHTMLテーブルの代わりに使う。`Card variant="table"` で外枠を作り、`divide-y divide-edge-subtle` で行を区切る。
 
 ```tsx
-{/* 通常リスト */}
+{
+  /* 通常リスト */
+}
 <Card variant="table">
   <div className="divide-y divide-edge-subtle">
     {items.map((item) => (
@@ -585,26 +633,28 @@ import {
           <div className="mt-0.5 text-[11.5px] text-ink-muted">補足情報</div>
         </div>
         {/* 右: 操作系（shrink-0 で縮まない） */}
-        <div className="flex shrink-0 items-center gap-0.5">
-          {/* IconButton など */}
-        </div>
+        <div className="flex shrink-0 items-center gap-0.5">{/* IconButton など */}</div>
       </div>
     ))}
   </div>
-</Card>
+</Card>;
 
-{/* ローディング中 */}
+{
+  /* ローディング中 */
+}
 <Card variant="table">
   <div className="p-4 text-sm text-ink-sub">読み込み中...</div>
-</Card>
+</Card>;
 
-{/* 空状態（簡易メッセージ） */}
+{
+  /* 空状態（簡易メッセージ） */
+}
 <Card variant="table">
   <div className="flex items-center gap-2.5 p-4 text-sm text-ink-sub">
     <FiCheckCircle className="h-[18px] w-[18px] shrink-0 text-success" aria-hidden="true" />
     対象がありません。
   </div>
-</Card>
+</Card>;
 ```
 
 行内に `order-3 w-full sm:order-none sm:w-auto` を使うと、モバイルでは最下段に折り返し、タブレット以上では通常位置に戻るレスポンシブ配置ができる。
@@ -616,12 +666,10 @@ import {
 3択以内の状態を切り替えるUI。`Tabs` がページ内コンテンツの切替に使うのに対し、こちらは「値の状態変更」に使う（例: 在庫の「十分 / 残少 / 欠品」）。
 
 ```tsx
-{/* セグメントコントロール外枠 */}
-<div
-  className="inline-flex gap-0.5 rounded-[10px] border border-edge bg-ground p-0.5"
-  role="group"
-  aria-label="状態"
->
+{
+  /* セグメントコントロール外枠 */
+}
+<div className="inline-flex gap-0.5 rounded-[10px] border border-edge bg-ground p-0.5" role="group" aria-label="状態">
   {options.map((opt) => {
     const selected = opt.value === value;
     return (
@@ -635,12 +683,15 @@ import {
           selected ? `${opt.activeClass} shadow-sm` : 'bg-transparent text-ink-muted hover:text-ink-sub'
         }`}
       >
-        <span className={`h-[7px] w-[7px] shrink-0 rounded-full bg-current ${selected ? 'opacity-100' : 'opacity-50'}`} aria-hidden="true" />
+        <span
+          className={`h-[7px] w-[7px] shrink-0 rounded-full bg-current ${selected ? 'opacity-100' : 'opacity-50'}`}
+          aria-hidden="true"
+        />
         {opt.label}
       </button>
     );
   })}
-</div>
+</div>;
 ```
 
 選択中ボタンの `activeClass` はセマンティック色（`bg-success-subtle text-success`、`bg-danger-subtle text-danger` など）を使い、未選択はすべてグレーに統一する。
@@ -664,42 +715,38 @@ lg      : 1024px  大型デスクトップ
 
 アニメーションは、状態変化を理解しやすくするために使います。装飾だけの強い動きは避けます。
 
-| 用途 | 方針 |
-|------|------|
-| ホーム | カードの順次出現は使用可 |
-| 集中操作画面 | タイマー、進捗、完了状態の演出は使用可 |
-| 一覧、フォーム | 控えめな hover / focus / loading を優先 |
-| モーダル | 短い fade / scale / slide に留める |
-| エラー、成功 | Toast やインラインメッセージで次の行動を示す |
+| 用途           | 方針                                         |
+| -------------- | -------------------------------------------- |
+| ホーム         | カードの順次出現は使用可                     |
+| 集中操作画面   | タイマー、進捗、完了状態の演出は使用可       |
+| 一覧、フォーム | 控えめな hover / focus / loading を優先      |
+| モーダル       | 短い fade / scale / slide に留める           |
+| エラー、成功   | Toast やインラインメッセージで次の行動を示す |
 
 `prefers-reduced-motion` を尊重し、動きを減らす設定のユーザーには不要なアニメーションを見せません。
 
 ### 10.1 カスタムCSSアニメーション
 
-| クラス | 効果 | 用途 |
-|--------|------|------|
-| `animate-pulse-scale` | 2秒ループ、scale 1→1.05→1 | Newラベル |
-| `animate-home-page` | 左スライド + フェードイン | ホームページ入場 |
-| `animate-home-card` | 下スライド + フェードイン | グリッドカード順次出現 |
-| `new-label-gradient` | グラデーション流動 | ラベル装飾 |
+| クラス                | 効果                      | 用途                   |
+| --------------------- | ------------------------- | ---------------------- |
+| `animate-pulse-scale` | 2秒ループ、scale 1→1.05→1 | Newラベル              |
+| `animate-home-page`   | 左スライド + フェードイン | ホームページ入場       |
+| `animate-home-card`   | 下スライド + フェードイン | グリッドカード順次出現 |
+| `new-label-gradient`  | グラデーション流動        | ラベル装飾             |
 
 ### 10.2 Tailwindトランジション
 
-| 用途 | クラス | 時間 |
-|------|--------|------|
-| ホバー色変化 | `transition-colors duration-200` | 200ms |
-| モーダル開閉 | `transition-all duration-300` | 300ms |
-| カードリフト | `hover:-translate-y-2 hover:shadow-card-hover transition-all duration-300` | 300ms |
-| テーマ変更 | `transition-colors duration-1000` | 1000ms |
+| 用途         | クラス                                                                     | 時間   |
+| ------------ | -------------------------------------------------------------------------- | ------ |
+| ホバー色変化 | `transition-colors duration-200`                                           | 200ms  |
+| モーダル開閉 | `transition-all duration-300`                                              | 300ms  |
+| カードリフト | `hover:-translate-y-2 hover:shadow-card-hover transition-all duration-300` | 300ms  |
+| テーマ変更   | `transition-colors duration-1000`                                          | 1000ms |
 
 ### 10.3 Framer Motion
 
 ```tsx
-<motion.div
-  initial={{ opacity: 0, y: 20 }}
-  animate={{ opacity: 1, y: 0 }}
-  transition={{ duration: 0.3 }}
->
+<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
   ...
 </motion.div>
 ```
@@ -790,13 +837,12 @@ UIを作る、または直す前に確認します。
 
 ## 13. 参照先
 
-| ドキュメント / ファイル | 内容 |
-|-------------------------|------|
-| `docs/steering/PRODUCT.md` | プロダクトの目的、ユーザー、コアバリュー |
-| `docs/steering/FEATURES.md` | 機能仕様、UI実装ルール、共通禁止事項 |
-| `docs/steering/TECH_SPEC.md` | 技術制約、テーマシステム、ADR |
-| `docs/steering/REPOSITORY.md` | ディレクトリ構成、依存方向 |
-| `docs/steering/GUIDELINES.md` | 実装、テスト、Git運用 |
-| `app/globals.css` | CSS変数、テーマ定義、カスタムアニメーション |
-| `/dev/design-lab` | 開発者向けデザイン確認ページ |
-
+| ドキュメント / ファイル       | 内容                                        |
+| ----------------------------- | ------------------------------------------- |
+| `docs/steering/PRODUCT.md`    | プロダクトの目的、ユーザー、コアバリュー    |
+| `docs/steering/FEATURES.md`   | 機能仕様、UI実装ルール、共通禁止事項        |
+| `docs/steering/TECH_SPEC.md`  | 技術制約、テーマシステム、ADR               |
+| `docs/steering/REPOSITORY.md` | ディレクトリ構成、依存方向                  |
+| `docs/steering/GUIDELINES.md` | 実装、テスト、Git運用                       |
+| `app/globals.css`             | CSS変数、テーマ定義、カスタムアニメーション |
+| `/dev/design-lab`             | 開発者向けデザイン確認ページ                |
diff --git a/app/globals.css b/app/globals.css
index f07db0e1..a7ec5259 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,5 +1,10 @@
 @import 'tailwindcss';
 
+/* 過去の仕様・計画・作業ログはクラス名の検出対象から外す。
+   古いクラス名を拾って未使用CSSが生成されるのを防ぐ */
+@source not '../docs';
+@source not '../.superpowers';
+
 :root {
   --background: #fdf8f0;
   --foreground: #171717;
@@ -480,6 +485,11 @@
   --font-mono: var(--font-geist-mono);
   --font-nunito: var(--font-nunito);
   --font-num: var(--font-outfit);
+  /* ブランド表記（ロゴ・スプラッシュ・ログイン/新規登録の見出し）用。
+     書体をクラス側の任意値で直接指定すると Tailwind v4 では font-weight として
+     解釈され効かないため、ここでユーティリティ化する
+     （コメント内にクラス名を書くと Tailwind が拾ってしまうので書かない） */
+  --font-brand: var(--font-inter);
 }
 
 /* stylelint-enable at-rule-no-unknown */
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 62d9504b..914aaf26 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -92,7 +92,7 @@ function LoginForm() {
     <div className="flex min-h-screen items-center justify-center bg-page px-4">
       <div className="w-full max-w-md rounded-lg bg-surface p-8 shadow-md border border-edge">
         <div className="mb-8 flex flex-col items-center rounded-xl bg-[#3a261d] py-6 shadow-inner">
-          <h1 className="text-4xl font-bold tracking-tight text-header-text font-[var(--font-playfair)]">
+          <h1 className="text-4xl font-bold tracking-tight text-header-text font-brand">
             Roast<span className="text-header-accent">Plus</span>
           </h1>
         </div>
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
index 376eb34b..63594283 100644
--- a/app/signup/page.tsx
+++ b/app/signup/page.tsx
@@ -57,7 +57,7 @@ function SignupForm() {
     <div className="flex min-h-screen items-center justify-center bg-page px-4">
       <div className="w-full max-w-md rounded-lg bg-surface p-8 shadow-md border border-edge">
         <div className="mb-8 flex flex-col items-center rounded-xl bg-[#3a261d] py-6 shadow-inner">
-          <h1 className="text-4xl font-bold tracking-tight text-header-text font-[var(--font-playfair)]">
+          <h1 className="text-4xl font-bold tracking-tight text-header-text font-brand">
             Roast<span className="text-header-accent">Plus</span>
           </h1>
         </div>
diff --git a/components/home/HomeHeader.tsx b/components/home/HomeHeader.tsx
index 794d007b..3714ced6 100644
--- a/components/home/HomeHeader.tsx
+++ b/components/home/HomeHeader.tsx
@@ -5,7 +5,7 @@ import { HiClock } from 'react-icons/hi';
 import { useChristmasMode } from '@/hooks/useChristmasMode';
 import { Button } from '@/components/ui';
 
-const LOGO_TEXT_BASE = 'text-2xl md:text-3xl font-[var(--font-inter)] font-extrabold tracking-[-0.04em] leading-none';
+const LOGO_TEXT_BASE = 'text-2xl md:text-3xl font-brand font-extrabold tracking-[-0.04em] leading-none';
 
 export function HomeHeader() {
   const router = useRouter();
@@ -53,7 +53,7 @@ export function HomeHeader() {
             size="sm"
             onClick={() => router.push('/clock')}
             aria-label="デジタル時計を表示"
-            className="gap-2 !rounded-xl !border-header-accent !text-header-accent hover:!bg-header-btn-hover active:scale-95 focus:outline-none focus:ring-2 focus:ring-header-accent/50 focus:ring-offset-2"
+            className="gap-2 rounded-xl! !border-header-accent !text-header-accent hover:!bg-header-btn-hover active:scale-95 focus:outline-none focus:ring-2 focus:ring-header-accent/50 focus:ring-offset-2"
           >
             <HiClock className="h-5 w-5" aria-hidden="true" />
             時計
diff --git a/components/splash/patterns.tsx b/components/splash/patterns.tsx
index 4b2b206a..fdb338a8 100644
--- a/components/splash/patterns.tsx
+++ b/components/splash/patterns.tsx
@@ -21,7 +21,7 @@ function PatternFadeUp({ phase, compact }: PatternProps) {
   return (
     <div className="flex flex-col items-center">
       <h1
-        className={`${textSize(compact)} font-bold tracking-[0.04em] leading-none font-[var(--font-playfair)] transition-all duration-700 ease-out ${
+        className={`${textSize(compact)} font-bold tracking-[0.04em] leading-none font-brand transition-all duration-700 ease-out ${
           phase >= 1 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-3'
         }`}
       >
@@ -30,7 +30,7 @@ function PatternFadeUp({ phase, compact }: PatternProps) {
       </h1>
       <div className={`${spacing(compact)} flex justify-center`}>
         <div
-          className={`h-[2px] rounded-full transition-all duration-700 ease-out ${
+          className={`h-0.5 rounded-full transition-all duration-700 ease-out ${
             phase >= 2 ? `${lineWidth(compact)} opacity-100` : 'w-0 opacity-0'
           }`}
           style={{
@@ -56,7 +56,7 @@ function PatternScaleBreathe({ phase, compact }: PatternProps) {
   return (
     <div className="flex flex-col items-center">
       <h1
-        className={`${textSize(compact)} font-bold tracking-[0.04em] leading-none font-[var(--font-playfair)] transition-all duration-800 ease-out ${
+        className={`${textSize(compact)} font-bold tracking-[0.04em] leading-none font-brand transition-all duration-800 ease-out ${
           phase >= 1 ? 'opacity-100 scale-100' : 'opacity-0 scale-75'
         } ${phase >= 2 ? 'animate-[breathe_2s_ease-in-out_infinite]' : ''}`}
       >
@@ -92,7 +92,7 @@ function PatternLetterStagger({ phase, compact }: PatternProps) {
 
   return (
     <div className="flex flex-col items-center">
-      <h1 className={`${textSize(compact)} font-bold tracking-[0.04em] leading-none font-[var(--font-playfair)] flex`}>
+      <h1 className={`${textSize(compact)} font-bold tracking-[0.04em] leading-none font-brand flex`}>
         {letters.map((letter, i) => (
           <span
             key={i}
@@ -111,7 +111,7 @@ function PatternLetterStagger({ phase, compact }: PatternProps) {
       </h1>
       <div className={`${spacing(compact)} flex justify-center`}>
         <div
-          className={`h-[2px] rounded-full transition-all duration-700 ease-out ${
+          className={`h-0.5 rounded-full transition-all duration-700 ease-out ${
             phase >= 2 ? `${lineWidth(compact)} opacity-100` : 'w-0 opacity-0'
           }`}
           style={{
@@ -137,9 +137,7 @@ function PatternLetterStagger({ phase, compact }: PatternProps) {
 function PatternSlideReveal({ phase, compact }: PatternProps) {
   return (
     <div className="flex flex-col items-center">
-      <h1
-        className={`${textSize(compact)} font-bold tracking-[0.04em] leading-none font-[var(--font-playfair)] flex overflow-hidden`}
-      >
+      <h1 className={`${textSize(compact)} font-bold tracking-[0.04em] leading-none font-brand flex overflow-hidden`}>
         <span
           className={`text-white transition-all duration-700 ease-out ${
             phase >= 1 ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-8'
@@ -158,7 +156,7 @@ function PatternSlideReveal({ phase, compact }: PatternProps) {
       </h1>
       <div className={`${spacing(compact)} flex justify-center`}>
         <div
-          className={`h-[2px] rounded-full transition-all duration-700 ease-out ${
+          className={`h-0.5 rounded-full transition-all duration-700 ease-out ${
             phase >= 2 ? `${lineWidth(compact)} opacity-100` : 'w-0 opacity-0'
           }`}
           style={{
@@ -184,7 +182,7 @@ function PatternGlowPulse({ phase, compact }: PatternProps) {
   return (
     <div className="flex flex-col items-center">
       <h1
-        className={`${textSize(compact)} font-bold tracking-[0.04em] leading-none font-[var(--font-playfair)] transition-all duration-800 ease-out ${
+        className={`${textSize(compact)} font-bold tracking-[0.04em] leading-none font-brand transition-all duration-800 ease-out ${
           phase >= 1 ? 'opacity-100' : 'opacity-0'
         }`}
         style={{
@@ -214,7 +212,7 @@ function PatternGlowPulse({ phase, compact }: PatternProps) {
       </h1>
       <div className={`${spacing(compact)} flex justify-center`}>
         <div
-          className={`h-[2px] rounded-full transition-all duration-700 ease-out ${
+          className={`h-0.5 rounded-full transition-all duration-700 ease-out ${
             phase >= 2 ? `${lineWidth(compact)} opacity-100` : 'w-0 opacity-0'
           }`}
           style={{