diff --git a/src/app/components/BoardPanelClient.tsx b/src/app/components/BoardPanelClient.tsx
index f368624..ae1e60c 100644
--- a/src/app/components/BoardPanelClient.tsx
+++ b/src/app/components/BoardPanelClient.tsx
@@ -100,9 +100,9 @@ export function BoardPanelClient({
   if (isSpecialRank && selectedBoardData.specialRankUsers) {
     return (
       <div className="h-full min-h-0 flex flex-col">
-        <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[30px] items-start w-full mb-2">
+        <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[16px] 2xl:gap-[30px] items-start w-full mb-2">
           <div className="flex items-center gap-[8px] shrink-0">
-            <div className="text-[20px] leading-[20px] md:text-[30px] md:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div>
+            <div className="text-[20px] leading-[20px] md:text-[24px] md:leading-[24px] 2xl:text-[30px] 2xl:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div>
             <Link href={`/boards/${board.slug}`} aria-label={`${board.name} 게시판으로 이동`} className="shrink-0 group">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 19 19" fill="none" className="block group-hover:hidden">
                 <path d="M10.25 12.5L13.25 9.5M13.25 9.5L10.25 6.5M13.25 9.5L5.75 9.5M18.5 9.5C18.5 14.4706 14.4706 18.5 9.5 18.5C4.52944 18.5 0.5 14.4706 0.5 9.5C0.5 4.52944 4.52944 0.5 9.5 0.5C14.4706 0.5 18.5 4.52944 18.5 9.5Z" stroke="#8C8C8C" strokeLinecap="round" strokeLinejoin="round" />
@@ -112,12 +112,12 @@ export function BoardPanelClient({
               </svg>
             </Link>
           </div>
-          <div className="flex items-center gap-[6px] md:gap-[8px] flex-wrap w-full md:w-auto min-w-0 md:flex-1 md:overflow-x-auto md:flex-nowrap no-scrollbar">
+          <div className="flex items-center gap-[6px] md:gap-[6px] 2xl:gap-[8px] flex-wrap w-full md:w-auto min-w-0 md:flex-1 md:overflow-x-auto md:flex-nowrap no-scrollbar">
             {siblingBoards.map((sb) => (
               <button
                 key={sb.id}
                 onClick={() => setSelectedBoardId(sb.id)}
-                className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-[16px] md:py-[8px] md:text-[14px] md:rounded-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
+                className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-3.5 md:py-[6px] md:text-[13px] md:rounded-[12px] 2xl:px-[16px] 2xl:py-[8px] 2xl:text-[14px] 2xl:rounded-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
                   }`}
               >
                 {sb.name}
@@ -187,9 +187,9 @@ export function BoardPanelClient({
   if (isPreview && selectedBoardData.previewPosts) {
     return (
       <div className="h-full min-h-0 flex flex-col">
-        <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[30px] items-start w-full mb-2">
+        <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[16px] lg:gap-[30px] items-start w-full mb-2">
           <div className="flex items-center gap-[8px] shrink-0">
-            <div className="text-[20px] leading-[20px] md:text-[30px] md:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div>
+            <div className="text-[20px] leading-[20px] md:text-[24px] md:leading-[24px] lg:text-[30px] lg:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div>
             <Link href={`/boards/${board.slug}`} aria-label={`${board.name} 게시판으로 이동`} className="shrink-0 group">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 19 19" fill="none" className="block group-hover:hidden">
                 <path d="M10.25 12.5L13.25 9.5M13.25 9.5L10.25 6.5M13.25 9.5L5.75 9.5M18.5 9.5C18.5 14.4706 14.4706 18.5 9.5 18.5C4.52944 18.5 0.5 14.4706 0.5 9.5C0.5 4.52944 4.52944 0.5 9.5 0.5C14.4706 0.5 18.5 4.52944 18.5 9.5Z" stroke="#8C8C8C" strokeLinecap="round" strokeLinejoin="round" />
@@ -199,12 +199,12 @@ export function BoardPanelClient({
               </svg>
             </Link>
           </div>
-          <div className="flex items-center gap-[6px] md:gap-[8px] flex-wrap w-full md:w-auto min-w-0 md:flex-1 md:overflow-x-auto md:flex-nowrap no-scrollbar">
+          <div className="flex items-center gap-[6px] md:gap-[6px] lg:gap-[8px] flex-wrap w-full md:w-auto min-w-0 md:flex-1 md:overflow-x-auto md:flex-nowrap no-scrollbar">
             {siblingBoards.map((sb) => (
               <button
                 key={sb.id}
                 onClick={() => setSelectedBoardId(sb.id)}
-                className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-[16px] md:py-[8px] md:text-[14px] md:rounded-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
+                className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-3.5 md:py-[6px] md:text-[13px] md:rounded-[12px] lg:px-[16px] lg:py-[8px] lg:text-[14px] lg:rounded-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
                   }`}
               >
                 {sb.name}
@@ -274,9 +274,9 @@ export function BoardPanelClient({
   // 텍스트 메인 타입 또는 기본 타입 렌더링
   return (
     <div className="h-full min-h-0 flex flex-col">
-      <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[30px] items-start w-full mb-2">
+      <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[16px] 2xl:gap-[30px] items-start w-full mb-2">
         <div className="flex items-center gap-[8px] shrink-0">
-          <div className="text-[20px] leading-[20px] md:text-[30px] md:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div>
+          <div className="text-[20px] leading-[20px] md:text-[24px] md:leading-[24px] 2xl:text-[30px] 2xl:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div>
           <Link href={`/boards/${board.slug}`} aria-label={`${board.name} 게시판으로 이동`} className="shrink-0 group">
             {/* 기본 아이콘 */}
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 19 19" fill="none" className="block group-hover:hidden">
@@ -288,12 +288,12 @@ export function BoardPanelClient({
             </svg>
           </Link>
         </div>
-        <div className="flex items-center gap-[6px] md:gap-[8px] flex-wrap w-full md:w-auto min-w-0 md:flex-1 md:overflow-x-auto md:flex-nowrap no-scrollbar">
+        <div className="flex items-center gap-[6px] md:gap-[6px] 2xl:gap-[8px] flex-wrap w-full md:w-auto min-w-0 md:flex-1 md:overflow-x-auto md:flex-nowrap no-scrollbar">
           {siblingBoards.map((sb) => (
             <button
               key={sb.id}
               onClick={() => setSelectedBoardId(sb.id)}
-              className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-[16px] md:py-[8px] md:text-[14px] md:rounded-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
+              className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-3.5 md:py-[6px] md:text-[13px] md:rounded-[12px] 2xl:px-[16px] 2xl:py-[8px] 2xl:text-[14px] 2xl:rounded-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
                 }`}
             >
               {sb.name}