feat: create shared css module

app/characters/page.tsx

@@ -2,6 +2,8 @@
 
 import { useState, useEffect, useMemo } from 'react';
 import { useInventoryStore } from '@/store/useInventoryStore';
+
+import shared from '../../styles/shared.module.css';
 import styles from '../../styles/Characters.module.css';
 
 type Character = {
@@ -65,28 +67,28 @@ export default function CharactersPage() {
     };
     const unlockedCount = store.unlockedCharacters.length;
 
-    return (<div className={styles.container}>
-        <header className={styles.header}>
-            <div className={styles.headerLeft}>
-                <h1 className={styles.title}>Characters</h1>
-                <p className={styles.subtitle}>{unlockedCount} of {characters.length} unlocked</p>
+    return (<div className={shared.container}>
+        <header className={shared.header}>
+            <div className={shared.headerLeft}>
+                <h1 className={shared.title}>Characters</h1>
+                <p className={shared.subtitle}>{unlockedCount} of {characters.length} unlocked</p>
             </div>
         </header>
 
-        <div className={styles.toolbar}>
+        <div className={shared.toolbar}>
             <input
-                className={styles.searchInput}
+                className={shared.searchInput}
                 type="text"
                 placeholder="Search by name..."
                 value={search}
                 onChange={e => setSearch(e.target.value)}
             />
 
-            <div className={styles.roleFilter}>
+            <div className={shared.roleFilter}>
                 {(['all', 'survivors', 'killers'] as RoleFilter[]).map(r => (
                     <button
                         key={r}
-                        className={`${styles.roleBtn} ${role === r ? styles.roleBtnActive : ''}`}
+                        className={`${shared.roleBtn} ${role === r ? shared.roleBtnActive : ''}`}
                         onClick={() => setRole(r)}
                     >
                         {r}
@@ -94,24 +96,24 @@ export default function CharactersPage() {
                 ))}
             </div>
 
-            <span className={styles.spacer} />
+            <span className={shared.spacer} />
 
-            <span className={styles.resultCount}>{filtered.length} shown</span>
+            <span className={shared.resultCount}>{filtered.length} shown</span>
 
-            <button className={styles.unlockAllBtn} onClick={handleUnlockAll}>
+            <button className={shared.unlockAllBtn} onClick={handleUnlockAll}>
                 Unlock shown
             </button>
 
-            <button className={styles.lockAllBtn} onClick={handleLockAll}>
+            <button className={shared.lockAllBtn} onClick={handleLockAll}>
                 Lock shown
             </button>
-            <button className={styles.clearBtn} onClick={handleClear}>
+            <button className={shared.clearBtn} onClick={handleClear}>
                 Clear all
             </button>
         </div>
 
         {filtered.length === 0 ? (
-            <div className={styles.empty}>No characters match</div>
+            <div className={shared.empty}>No characters match</div>
         ) : (
             <div className={styles.grid}>
                 {filtered.map(char => {
@@ -120,17 +122,17 @@ export default function CharactersPage() {
                     return (
                         <div
                             key={char.idx}
-                            className={`${styles.card} ${unlocked ? styles.cardUnlocked : ''}`}
+                            className={`${shared.card} ${unlocked ? shared.cardUnlocked : ''}`}
                             onClick={() => handleToggle(char.idx)}
                         >
                             <img
-                                className={styles.cardIcon}
+                                className={shared.cardIcon}
                                 src={getIconUrl(char.iconFilePath)}
                                 alt={char.name}
                                 loading="lazy"
                             />
-                            <span className={styles.cardName}>{char.name}</span>
-                            <span className={`${styles.rolePip} ${killer ? styles.rolePipKiller : ''}`}>
+                            <span className={shared.cardName}>{char.name}</span>
+                            <span className={`${shared.rolePip} ${killer ? shared.rolePipKiller : ''}`}>
                                 {killer ? 'Killer' : 'Survivor'}
                             </span>
                         </div>