diff --git a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx
index 97d8173..6dbd61d 100644
--- a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx
+++ b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardRow.tsx
@@ -54,7 +54,7 @@ export default function InvitedDashboardRow({
   return (
     <>
       {/* 데스크톱/태블릿 테이블 레이아웃 */}
-      <div className="mobile:hidden grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32">
+      <div className="mobile-wide:hidden grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32">
         {/* 대시보드 이름 */}
         <span className="Text-black text-16">
           {invitation.dashboard.title || '제목 없음'}
@@ -70,14 +70,14 @@ export default function InvitedDashboardRow({
           <button
             onClick={handleAccept}
             disabled={isProcessing}
-            className="BG-blue tablet:w-72 tablet:h-30 tablet:text-12 flex h-32 w-70 items-center justify-center rounded-8 text-14 font-medium text-white transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
+            className="BG-blue tablet-wide:w-72 tablet-wide:h-30 tablet-wide:text-12 flex h-32 w-70 items-center justify-center rounded-8 text-14 font-medium text-white transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {isProcessing ? '처리 중' : '수락'}
           </button>
           <button
             onClick={handleReject}
             disabled={isProcessing}
-            className="BG-white Border-blue Text-blue tablet:w-72 tablet:h-30 tablet:text-12 flex h-32 w-70 items-center justify-center rounded-8 border text-14 font-medium transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+            className="BG-white Border-blue Text-blue tablet-wide:w-72 tablet-wide:h-30 tablet-wide:text-12 flex h-32 w-70 items-center justify-center rounded-8 border text-14 font-medium transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {isProcessing ? '처리 중' : '거절'}
           </button>
@@ -85,7 +85,7 @@ export default function InvitedDashboardRow({
       </div>
 
       {/* 모바일 카드 레이아웃 */}
-      <div className="mobile:block mb-12 hidden rounded-8 p-16">
+      <div className="mobile-wide:block mb-12 hidden rounded-8 p-16">
         {/* 이름 */}
         <div className="mb-8 flex items-center gap-8">
           <span className="Text-gray-light text-14 font-medium">이름</span>
diff --git a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx
index 1638477..ba64f97 100644
--- a/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx
+++ b/src/app/mydashboard/components/InvitedDashboardTable/InvitedDashboardTable.tsx
@@ -50,10 +50,10 @@ export default function InvitedDashboardTable() {
     return (
       <div className="space-y-24">
         {/* 검색창 스켈레톤 */}
-        <div className="mobile:h-36 h-40 animate-pulse rounded-8 bg-gray-200" />
+        <div className="mobile-wide:h-36 h-40 animate-pulse rounded-8 bg-gray-200" />
 
         {/* 테이블 헤더 */}
-        <div className="mobile:hidden grid grid-cols-3 items-center gap-20 pl-36 pr-32">
+        <div className="mobile-wide:hidden grid grid-cols-3 items-center gap-20 pl-36 pr-32">
           <span className="text-16 font-medium text-gray-400">이름</span>
           <span className="text-center text-16 font-medium text-gray-400">
             초대자
@@ -67,7 +67,7 @@ export default function InvitedDashboardTable() {
         {Array.from({ length: 3 }).map((_, index) => (
           <div
             key={index}
-            className="mobile:rounded-8 mobile:bg-gray-50 mobile:p-16 mobile:mb-12 grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32"
+            className="mobile-wide:rounded-8 mobile-wide:bg-gray-50 mobile-wide:p-16 mobile-wide:mb-12 grid grid-cols-3 items-center gap-20 border-b border-gray-100 py-20 pl-36 pr-32"
           >
             <div className="h-20 animate-pulse rounded-4 bg-gray-200" />
             <div className="h-20 animate-pulse rounded-4 bg-gray-200" />
@@ -82,10 +82,10 @@ export default function InvitedDashboardTable() {
   if (isError) {
     return (
       <div className="flex flex-col items-center justify-center py-60">
-        <p className="mobile:text-12 text-16 font-medium text-red-500">
+        <p className="mobile-wide:text-12 text-16 font-medium text-red-500">
           초대받은 대시보드를 불러오는 중 오류가 발생했습니다.
         </p>
-        <p className="mobile:text-10 mt-8 text-14 text-gray-500">
+        <p className="mobile-wide:text-10 mt-8 text-14 text-gray-500">
           {error?.message || '다시 시도해주세요.'}
         </p>
       </div>
@@ -96,7 +96,7 @@ export default function InvitedDashboardTable() {
   if (allInvitations.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center py-60">
-        <div className="mobile:size-60 relative mb-24 h-100 w-100">
+        <div className="mobile-wide:size-60 relative mb-24 h-100 w-100">
           <Image
             src="/images/unsubscribe.svg"
             alt="초대받은 대시보드 없음"
@@ -104,7 +104,7 @@ export default function InvitedDashboardTable() {
             className="object-contain"
           />
         </div>
-        <p className="Text-gray-light mobile:text-12 text-16 font-medium">
+        <p className="Text-gray-light mobile-wide:text-12 text-16 font-medium">
           아직 초대받은 대시보드가 없어요.
         </p>
       </div>
@@ -118,7 +118,7 @@ export default function InvitedDashboardTable() {
       <SearchInput value={searchQuery} onChange={setSearchQuery} />
 
       {/* 테이블 헤더 - 모바일에서 숨김 */}
-      <div className="mobile:hidden grid grid-cols-3 items-center gap-20 pl-36 pr-32">
+      <div className="mobile-wide:hidden grid grid-cols-3 items-center gap-20 pl-36 pr-32">
         <span className="Text-gray-light text-16 font-normal">이름</span>
         <span className="Text-gray-light text-center text-16 font-normal">
           초대자
@@ -129,11 +129,11 @@ export default function InvitedDashboardTable() {
       </div>
 
       {/* 테이블 바디 */}
-      <div className="mobile:space-y-0">
+      <div className="mobile-wide:space-y-0">
         {searchQuery.trim() && filteredInvitations.length === 0 ? (
           // 검색 결과 없음
           <div className="flex flex-col items-center justify-center py-60">
-            <p className="Text-gray-light mobile:text-12 text-16 font-medium">
+            <p className="Text-gray-light mobile-wide:text-12 text-16 font-medium">
               `{searchQuery}`에 대한 검색 결과가 없습니다.
             </p>
           </div>
@@ -155,7 +155,7 @@ export default function InvitedDashboardTable() {
       {/* 더 이상 데이터가 없을 때 */}
       {!hasNextPage && allInvitations.length > 0 && (
         <div className="py-20 text-center">
-          <p className="Text-gray-light mobile:text-10 text-14 font-normal">
+          <p className="Text-gray-light mobile-wide:text-10 text-14 font-normal">
             모든 초대를 확인했습니다.
           </p>
         </div>
diff --git a/src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx b/src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx
index 57027dc..e9ab2b6 100644
--- a/src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx
+++ b/src/app/mydashboard/components/InvitedDashboardTable/SearchInput.tsx
@@ -14,13 +14,13 @@ export default function SearchInput({
   placeholder = '검색',
 }: SearchInputProps) {
   return (
-    <div className="mobile:h-36 relative h-40 w-full">
+    <div className="mobile-wide:h-36 relative h-40 w-full">
       <input
         type="text"
         placeholder={placeholder}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="Border-btn mobile:h-36 mobile:text-14 mobile:placeholder:text-14 h-40 w-full rounded-8 border pl-40 pr-12 text-14 placeholder-gray-400 focus:border-blue-500 focus:outline-none"
+        className="Border-btn mobile-wide:h-36 mobile-wide:text-14 mobile-wide:placeholder:text-14 h-40 w-full rounded-8 border pl-40 pr-12 text-14 placeholder-gray-400 focus:border-blue-500 focus:outline-none"
       />
       <div className="absolute left-16 top-1/2 -translate-y-1/2 transform">
         <Image
diff --git a/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx b/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx
index ed1e7cc..ef37620 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/AddDashboardCard.tsx
@@ -14,7 +14,7 @@ export default function AddDashboardCard() {
   return (
     <button
       onClick={handleClick}
-      className="BG-white Border-btn BG-Input-hovered tablet:w-247 tablet:h-68 mobile:w-260 mobile:h-58 group flex h-70 w-332 items-center justify-center gap-12 rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
+      className="BG-white Border-btn BG-Input-hovered tablet-wide:w-247 tablet-wide:h-68 mobile-wide:w-260 mobile-wide:h-58 group flex h-70 w-332 items-center justify-center gap-12 rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
     >
       <span className="Text-black text-16 font-medium">새로운 대시보드</span>
 
diff --git a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
index 30b3012..90aba75 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardCard.tsx
@@ -19,7 +19,7 @@ export default function MyDashboardCard({ dashboard }: MyDashboardCardProps) {
   return (
     <div
       onClick={handleClick}
-      className="BG-white Border-btn BG-Input-hovered tablet:w-247 tablet:h-68 mobile:w-260 mobile:h-58 group h-70 w-332 cursor-pointer rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
+      className="BG-white Border-btn BG-Input-hovered tablet-wide:w-247 tablet-wide:h-68 mobile-wide:w-260 mobile-wide:h-58 group h-70 w-332 cursor-pointer rounded-8 border p-20 transition-all duration-200 hover:border-gray-300"
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-12">
@@ -30,7 +30,7 @@ export default function MyDashboardCard({ dashboard }: MyDashboardCardProps) {
           />
 
           {/* 대시보드 제목 */}
-          <h3 className="Text-black tablet:max-w-140 mobile:max-w-160 mobile:text-14 max-w-200 truncate text-16 font-medium">
+          <h3 className="Text-black tablet-wide:max-w-140 mobile-wide:max-w-160 mobile-wide:text-14 max-w-200 truncate text-16 font-medium">
             {dashboard.title}
           </h3>
 
diff --git a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx
index d6c9ad0..a0ce5b3 100644
--- a/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx
+++ b/src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx
@@ -22,7 +22,7 @@ export default function MyDashboardGrid() {
   if (isLoading) {
     return (
       <section className="mb-40">
-        <div className="tablet:grid tablet:grid-cols-2 tablet:gap-12 tablet:max-w-[520px] mobile:flex mobile:flex-col mobile:gap-12 mobile:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
+        <div className="tablet-wide:grid tablet-wide:grid-cols-2 tablet-wide:gap-12 tablet-wide:max-w-[520px] mobile-wide:flex mobile-wide:flex-col mobile-wide:gap-12 mobile-wide:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
           {/* 새 대시보드 추가 버튼은 항상 표시 */}
           <AddDashboardCard />
 
@@ -30,7 +30,7 @@ export default function MyDashboardGrid() {
           {Array.from({ length: 5 }).map((_, index) => (
             <div
               key={index}
-              className="tablet:h-68 tablet:w-247 mobile:h-58 mobile:w-260 h-70 w-332 animate-pulse rounded-8 bg-gray-200"
+              className="tablet-wide:h-68 tablet-wide:w-247 mobile-wide:h-58 mobile-wide:w-260 h-70 w-332 animate-pulse rounded-8 bg-gray-200"
             />
           ))}
         </div>
@@ -61,7 +61,7 @@ export default function MyDashboardGrid() {
 
   return (
     <section className="mb-40">
-      <div className="tablet:grid tablet:grid-cols-2 tablet:gap-12 tablet:max-w-[520px] mobile:flex mobile:flex-col mobile:gap-12 mobile:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
+      <div className="tablet-wide:grid tablet-wide:grid-cols-2 tablet-wide:gap-12 tablet-wide:max-w-[520px] mobile-wide:flex mobile-wide:flex-col mobile-wide:gap-12 mobile-wide:max-w-[260px] flex max-w-[1020px] flex-wrap gap-12">
         {/* 새 대시보드 추가 카드는 항상 첫 번째 고정 */}
         <AddDashboardCard />
 
@@ -76,7 +76,7 @@ export default function MyDashboardGrid() {
 
       {/* 페이지네이션 */}
       {totalPages > 1 && (
-        <div className="tablet:max-w-[520px] mobile:max-w-[260px] mt-24 flex max-w-[1020px] items-center justify-end gap-12">
+        <div className="tablet-wide:max-w-[520px] mobile-wide:max-w-[260px] mt-24 flex max-w-[1020px] items-center justify-end gap-12">
           <span className="Text-black text-14 font-normal">
             {currentPage} 페이지 중 {totalPages}
           </span>
diff --git a/src/app/mydashboard/page.tsx b/src/app/mydashboard/page.tsx
index 03b3776..7dec0c9 100644
--- a/src/app/mydashboard/page.tsx
+++ b/src/app/mydashboard/page.tsx
@@ -13,17 +13,17 @@ export default function MyDashboardPage() {
       <Sidebar />
 
       {/* 메인 */}
-      <div className="BG-gray ml-300 flex-1 mobile:ml-67 tablet:ml-160">
+      <div className="BG-gray mobile-wide:ml-67 tablet-wide:ml-160 ml-300 flex-1">
         {/* 헤더 */}
         <Header />
 
         {/* 페이지 콘텐츠 */}
-        <main className="p-40 mobile:p-16 tablet:p-24">
+        <main className="mobile-wide:p-16 tablet-wide:p-24 p-40">
           <MyDashboardGrid />
 
           {/* 초대받은 대시보드 섹션 */}
-          <section className="BG-white w-1022 rounded-16 p-40 pb-120 pt-24 mobile:w-260 mobile:p-16 tablet:w-504 tablet:p-24">
-            <h2 className="Text-black mb-64 text-24 font-bold mobile:text-20 tablet:text-20">
+          <section className="BG-white mobile-wide:w-260 mobile-wide:p-16 tablet-wide:w-504 tablet-wide:p-24 w-1022 rounded-16 p-40 pb-120 pt-24">
+            <h2 className="Text-black mobile-wide:text-20 tablet-wide:text-20 mb-64 text-24 font-bold">
               초대받은 대시보드
             </h2>
 
diff --git a/src/app/shared/components/common/sidebar/DashboardItem.tsx b/src/app/shared/components/common/sidebar/DashboardItem.tsx
index 641c548..5bdfada 100644
--- a/src/app/shared/components/common/sidebar/DashboardItem.tsx
+++ b/src/app/shared/components/common/sidebar/DashboardItem.tsx
@@ -18,22 +18,24 @@ export default function DashboardItem({
       type="button"
       aria-current={isActive ? 'page' : undefined}
       onClick={handleClick}
-      className={`Text-black BG-Input-hovered flex w-full items-center gap-12 rounded-6 px-12 py-8 text-left text-18 transition-colors mobile:justify-center mobile:px-4 mobile:py-6 tablet:gap-8 tablet:px-8 tablet:py-6 tablet:text-16 ${
+      className={`Text-black BG-Input-hovered mobile-wide:justify-center mobile-wide:px-4 mobile-wide:py-6 tablet-wide:gap-8 tablet-wide:px-8 tablet-wide:py-6 tablet-wide:text-16 flex w-full items-center gap-12 rounded-6 px-12 py-8 text-left text-18 transition-colors ${
         isActive ? 'BG-currentDashboard font-medium' : ''
       }`}
     >
       {/* 컬러 도트 */}
       <div
-        className="size-8 flex-shrink-0 rounded-full mobile:size-12 tablet:size-6"
+        className="mobile-wide:size-12 tablet-wide:size-6 size-8 flex-shrink-0 rounded-full"
         style={{ backgroundColor: dashboard.color }}
       />
 
       {/* 대시보드 제목 */}
-      <span className="flex-1 truncate mobile:hidden">{dashboard.title}</span>
+      <span className="mobile-wide:hidden flex-1 truncate">
+        {dashboard.title}
+      </span>
 
       {/* 내가 만든 대시보드에 왕관 아이콘 */}
       {dashboard.createdByMe && (
-        <div className="relative h-12 w-14 flex-shrink-0 mobile:hidden tablet:h-10 tablet:w-12">
+        <div className="mobile-wide:hidden tablet-wide:h-10 tablet-wide:w-12 relative h-12 w-14 flex-shrink-0">
           <Image
             src="/images/crown.png"
             alt="내가 만든 대시보드"
diff --git a/src/app/shared/components/common/sidebar/Sidebar.tsx b/src/app/shared/components/common/sidebar/Sidebar.tsx
index 33d8acb..af8e1d1 100644
--- a/src/app/shared/components/common/sidebar/Sidebar.tsx
+++ b/src/app/shared/components/common/sidebar/Sidebar.tsx
@@ -52,17 +52,17 @@ export default function Sidebar(): JSX.Element {
     error instanceof Error ? error.message : '대시보드 목록 불러오기 실패'
 
   return (
-    <aside className="BG-white Border-section fixed left-0 top-0 z-50 flex h-full w-300 flex-col mobile:w-67 tablet:w-160">
+    <aside className="BG-white Border-section mobile-wide:w-67 tablet-wide:w-160 fixed left-0 top-0 z-50 flex h-full w-300 flex-col">
       {/* 로고 섹션 */}
-      <div className="flex h-70 flex-shrink-0 items-center px-20 mobile:justify-center mobile:px-8 tablet:px-12">
+      <div className="mobile-wide:justify-center mobile-wide:px-8 tablet-wide:px-12 flex h-70 flex-shrink-0 items-center px-20">
         <Link href="/mydashboard" className="flex items-center gap-8">
-          <div className="relative h-35 w-150 mobile:size-24 tablet:h-30 tablet:w-120">
+          <div className="mobile-wide:size-24 tablet-wide:h-30 tablet-wide:w-120 relative h-35 w-150">
             {/* 데스크톱 & 태블릿: 전체 로고 */}
             <Image
               src="/images/logo-light2.svg"
               alt="Coplan logo"
               fill
-              className="object-contain mobile:hidden"
+              className="mobile-wide:hidden object-contain"
               priority
             />
             {/* 모바일: 아이콘만 */}
@@ -70,7 +70,7 @@ export default function Sidebar(): JSX.Element {
               src="/images/logo-icon-light.svg"
               alt="Coplan"
               fill
-              className="hidden object-contain mobile:block"
+              className="mobile-wide:block hidden object-contain"
               priority
             />
           </div>
@@ -78,36 +78,36 @@ export default function Sidebar(): JSX.Element {
       </div>
 
       {/* 대시보드 섹션 */}
-      <div className="flex min-h-0 flex-1 flex-col px-20 py-24 mobile:px-8 mobile:py-12 tablet:px-12 tablet:py-16">
+      <div className="mobile-wide:px-8 mobile-wide:py-12 tablet-wide:px-12 tablet-wide:py-16 flex min-h-0 flex-1 flex-col px-20 py-24">
         {/* 헤더 */}
-        <div className="mb-24 flex flex-shrink-0 items-center justify-between mobile:hidden tablet:mb-16">
-          <h2 className="Text-gray text-12 font-semibold tablet:text-10">
+        <div className="mobile-wide:hidden tablet-wide:mb-16 mb-24 flex flex-shrink-0 items-center justify-between">
+          <h2 className="Text-gray tablet-wide:text-10 text-12 font-semibold">
             Dash Boards
           </h2>
           <CreateDashboardButton onClick={() => openModal('createDashboard')} />
         </div>
 
         {/* 모바일 전용 + 버튼 */}
-        <div className="mb-12 hidden flex-shrink-0 justify-center mobile:flex">
+        <div className="mobile-wide:flex mb-12 hidden flex-shrink-0 justify-center">
           <CreateDashboardButton onClick={() => openModal('createDashboard')} />
         </div>
 
         {/* 스크롤 가능한 대시보드 목록 컨테이너 */}
         <div
           ref={containerRef}
-          className="flex-1 space-y-8 overflow-y-auto mobile:space-y-4 tablet:space-y-6"
+          className="mobile-wide:space-y-4 tablet-wide:space-y-6 flex-1 space-y-8 overflow-y-auto"
           style={{ minHeight: '200px' }}
         >
           {isLoading ? (
-            <div className="flex items-center justify-center py-20 mobile:py-8 tablet:py-12">
-              <div className="Text-gray text-14 mobile:hidden tablet:text-12">
+            <div className="mobile-wide:py-8 tablet-wide:py-12 flex items-center justify-center py-20">
+              <div className="Text-gray mobile-wide:hidden tablet-wide:text-12 text-14">
                 로딩중...
               </div>
               {/* 모바일: 로딩 스피너만 */}
-              <div className="hidden size-16 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500 mobile:block" />
+              <div className="mobile-wide:block hidden size-16 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500" />
             </div>
           ) : error ? (
-            <div className="flex items-center justify-center py-20 mobile:py-8 tablet:py-12">
+            <div className="mobile-wide:py-8 tablet-wide:py-12 flex items-center justify-center py-20">
               <div className="Text-red text-14">{errorMessage}</div>
             </div>
           ) : allDashboards.length > 0 ? (
@@ -124,16 +124,16 @@ export default function Sidebar(): JSX.Element {
 
               {/* 추가 로딩 중일 때 스켈레톤 */}
               {isFetchingNextPage && (
-                <div className="space-y-8 mobile:space-y-4 tablet:space-y-6">
+                <div className="mobile-wide:space-y-4 tablet-wide:space-y-6 space-y-8">
                   {Array.from({ length: 3 }).map((_, index) => (
                     <div
                       key={`skeleton-${index}`}
-                      className="flex items-center gap-12 rounded-6 p-12 mobile:justify-center mobile:gap-0 mobile:p-4 tablet:gap-8 tablet:p-8"
+                      className="mobile-wide:justify-center mobile-wide:gap-0 mobile-wide:p-4 tablet-wide:gap-8 tablet-wide:p-8 flex items-center gap-12 rounded-6 p-12"
                     >
                       {/* 색상 원 스켈레톤 */}
-                      <div className="size-8 animate-pulse rounded-full bg-gray-200 mobile:size-12 tablet:size-6" />
+                      <div className="mobile-wide:size-12 tablet-wide:size-6 size-8 animate-pulse rounded-full bg-gray-200" />
                       {/* 제목 스켈레톤 - 모바일에서 숨김 */}
-                      <div className="h-16 flex-1 animate-pulse rounded-4 bg-gray-200 mobile:hidden tablet:h-14" />
+                      <div className="mobile-wide:hidden tablet-wide:h-14 h-16 flex-1 animate-pulse rounded-4 bg-gray-200" />
                     </div>
                   ))}
                 </div>
@@ -141,12 +141,14 @@ export default function Sidebar(): JSX.Element {
 
               {/* 더 이상 데이터가 없을 때 */}
               {!hasNextPage && allDashboards.length > 0 && (
-                <div className="py-12 text-center mobile:py-4 tablet:py-8">
-                  <p className="Text-gray text-12 mobile:hidden tablet:text-10">
+                <div className="mobile-wide:py-4 tablet-wide:py-8 py-12 text-center">
+                  <p className="Text-gray mobile-wide:hidden tablet-wide:text-10 text-12">
                     모든 대시보드를 확인했습니다.
                   </p>
                   {/* 모바일: 완료 아이콘만 */}
-                  <div className="Text-gray hidden text-12 mobile:block">✓</div>
+                  <div className="Text-gray mobile-wide:block hidden text-12">
+                    ✓
+                  </div>
                 </div>
               )}
             </>