Improve mobile responsiveness across the site

- Header: Hide notifications/auth on mobile, add to mobile menu, make hamburger more visible
- FilmStripSlider: Responsive image sizes (200-500px based on viewport)
- Home page: Smaller text, buttons, and spacing on mobile
- Car detail: Responsive image height, text sizes, and padding

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/app/cars/[id]/page.tsx

@@ -336,14 +336,14 @@ export default function CarDetailPage() {
   const lockedImagesCount = (showAllImages || checkingAccess || isBannerCar === null) ? 0 : Math.max(0, STANDARD_PHOTO_COUNT - displayImages.length);
 
   return (
-    <div className="bg-gray-50 min-h-screen py-8">
-      <div className="container mx-auto px-4">
+    <div className="bg-gray-50 min-h-screen py-4 sm:py-8">
+      <div className="container mx-auto px-3 sm:px-4">
         {/* Back Button */}
         <button
           onClick={() => router.back()}
-          className="mb-6 text-primary-600 hover:text-primary-700 flex items-center"
+          className="mb-4 sm:mb-6 text-primary-600 hover:text-primary-700 flex items-center text-sm sm:text-base"
         >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg className="w-4 h-4 sm:w-5 sm:h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
           </svg>
           {t.back}
@@ -385,11 +385,11 @@ export default function CarDetailPage() {
           </div>
         )}
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-8">
           {/* Images */}
           <div>
             {/* Main Image */}
-            <div className="bg-gray-200 rounded-lg overflow-hidden h-96 mb-4 relative">
+            <div className="bg-gray-200 rounded-lg overflow-hidden h-56 sm:h-80 lg:h-96 mb-3 sm:mb-4 relative">
               {displayImages.length > 0 ? (
                 <img
                   src={getImageUrl(displayImages[selectedImage]?.url)}
@@ -414,7 +414,7 @@ export default function CarDetailPage() {
               {/* Soldout overlay */}
               {car.soldout && (
                 <div className="absolute inset-0 flex items-center justify-center bg-black/40">
-                  <span className="bg-red-600 text-white px-6 py-3 rounded-lg font-bold text-2xl transform -rotate-12 shadow-lg">
+                  <span className="bg-red-600 text-white px-4 py-2 sm:px-6 sm:py-3 rounded-lg font-bold text-lg sm:text-2xl transform -rotate-12 shadow-lg">
                     {language === 'ko' ? '판매완료' : 'SOLD OUT'}
                   </span>
                 </div>
@@ -536,12 +536,12 @@ export default function CarDetailPage() {
 
           {/* Details */}
           <div>
-            <div className="flex items-center gap-3 mb-2">
-              <h1 className="text-3xl font-bold text-gray-800">
+            <div className="flex flex-wrap items-center gap-2 sm:gap-3 mb-2">
+              <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-800">
                 {translate(car.car_name) || `${translate(car.maker?.name) || ''} ${translate(car.model?.name) || ''}`.trim() || '-'}
               </h1>
               {car.soldout && (
-                <span className="px-3 py-1 bg-red-600 text-white text-sm font-bold rounded-full">
+                <span className="px-2 py-0.5 sm:px-3 sm:py-1 bg-red-600 text-white text-xs sm:text-sm font-bold rounded-full">
                   {language === 'ko' ? '판매완료' : 'SOLD OUT'}
                 </span>
               )}
@@ -550,22 +550,22 @@ export default function CarDetailPage() {
             {(() => {
               const price = formatPrice(car.final_price_krw || car.price_krw);
               return (
-                <div className="mb-6">
-                  <p className="text-3xl font-bold text-primary-600">
+                <div className="mb-4 sm:mb-6">
+                  <p className="text-2xl sm:text-3xl font-bold text-primary-600">
                     {price.usdt !== '-' ? price.usdt : t.contactForPrice}
                   </p>
                   {/* Show local currency for all languages */}
                   {price.local !== '-' && (
-                    <p className="text-lg text-gray-500">({price.local})</p>
+                    <p className="text-base sm:text-lg text-gray-500">({price.local})</p>
                   )}
                 </div>
               );
             })()}
 
             {/* Specs Grid */}
-            <div className="bg-white rounded-lg shadow p-6 mb-6">
-              <h2 className="text-lg font-semibold mb-4">{t.specifications}</h2>
-              <div className="grid grid-cols-2 gap-4">
+            <div className="bg-white rounded-lg shadow p-4 sm:p-6 mb-4 sm:mb-6">
+              <h2 className="text-base sm:text-lg font-semibold mb-3 sm:mb-4">{t.specifications}</h2>
+              <div className="grid grid-cols-2 gap-3 sm:gap-4 text-sm sm:text-base">
                 <div>
                   <span className="text-gray-500">{t.year}</span>
                   <p className="font-medium">{car.year || '-'}{car.month ? ` / ${car.month}` : ''}</p>
@@ -602,8 +602,8 @@ export default function CarDetailPage() {
             </div>
 
             {/* Status - Only show full details if purchased */}
-            <div className="bg-white rounded-lg shadow p-6 mb-6">
-              <h2 className="text-lg font-semibold mb-4">{t.vehicleStatus}</h2>
+            <div className="bg-white rounded-lg shadow p-4 sm:p-6 mb-4 sm:mb-6">
+              <h2 className="text-base sm:text-lg font-semibold mb-3 sm:mb-4">{t.vehicleStatus}</h2>
               {hasAccess ? (
                 <div className="grid grid-cols-2 gap-4">
                   <div>
@@ -637,9 +637,9 @@ export default function CarDetailPage() {
 
             {/* Performance Check Section */}
             {performanceCheck?.found && (
-              <div className="bg-white rounded-lg shadow p-6 mb-6">
-                <h2 className="text-lg font-semibold mb-4 flex items-center">
-                  <svg className="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div className="bg-white rounded-lg shadow p-4 sm:p-6 mb-4 sm:mb-6">
+                <h2 className="text-base sm:text-lg font-semibold mb-3 sm:mb-4 flex items-center">
+                  <svg className="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                   </svg>
                   {t.performanceCheck || 'Performance Check Report'}

frontend/src/app/page.tsx

@@ -33,11 +33,11 @@ export default function Home() {
     <div>
       {/* Hero Section with Film Strip Slider */}
       <section className="bg-gradient-to-r from-primary-700 to-primary-900 text-white">
-        <div className="container mx-auto px-4 pt-12 pb-4 text-center">
-          <h1 className="text-4xl md:text-5xl font-bold mb-4">
+        <div className="container mx-auto px-4 pt-6 sm:pt-12 pb-2 sm:pb-4 text-center">
+          <h1 className="text-2xl sm:text-4xl md:text-5xl font-bold mb-2 sm:mb-4">
             {t.premiumKoreanUsedCars}
           </h1>
-          <p className="text-xl md:text-2xl text-primary-100 mb-6">
+          <p className="text-base sm:text-xl md:text-2xl text-primary-100 mb-4 sm:mb-6">
             {t.qualityVehiclesExported}
           </p>
         </div>
@@ -45,10 +45,10 @@ export default function Home() {
         {/* Film Strip Slider */}
         <FilmStripSlider banners={banners} settings={bannerSettings} />
 
-        <div className="container mx-auto px-4 py-8 text-center">
+        <div className="container mx-auto px-4 py-4 sm:py-8 text-center">
           <Link
             href="/vehicle-request"
-            className="inline-block bg-yellow-500 text-white font-semibold px-8 py-3 rounded-lg hover:bg-yellow-600 transition shadow-lg"
+            className="inline-block bg-yellow-500 text-white font-semibold px-6 py-2.5 sm:px-8 sm:py-3 rounded-lg hover:bg-yellow-600 transition shadow-lg text-sm sm:text-base"
           >
             {t.requestVehicle}
           </Link>
@@ -56,58 +56,58 @@ export default function Home() {
       </section>
 
       {/* Features */}
-      <section className="py-16 bg-gray-50">
+      <section className="py-10 sm:py-16 bg-gray-50">
         <div className="container mx-auto px-4">
-          <h2 className="text-3xl font-bold text-center mb-12">{t.whyChooseUs}</h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div className="text-center p-6">
-              <div className="w-16 h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-4">
-                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <h2 className="text-2xl sm:text-3xl font-bold text-center mb-8 sm:mb-12">{t.whyChooseUs}</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
+            <div className="text-center p-4 sm:p-6">
+              <div className="w-12 h-12 sm:w-16 sm:h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
+                <svg className="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               </div>
-              <h3 className="text-xl font-semibold mb-2">{t.qualityAssured}</h3>
-              <p className="text-gray-600">{t.qualityAssuredDesc}</p>
+              <h3 className="text-lg sm:text-xl font-semibold mb-2">{t.qualityAssured}</h3>
+              <p className="text-gray-600 text-sm sm:text-base">{t.qualityAssuredDesc}</p>
             </div>
-            <div className="text-center p-6">
-              <div className="w-16 h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-4">
-                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div className="text-center p-4 sm:p-6">
+              <div className="w-12 h-12 sm:w-16 sm:h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
+                <svg className="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               </div>
-              <h3 className="text-xl font-semibold mb-2">{t.bestPrices}</h3>
-              <p className="text-gray-600">{t.bestPricesDesc}</p>
+              <h3 className="text-lg sm:text-xl font-semibold mb-2">{t.bestPrices}</h3>
+              <p className="text-gray-600 text-sm sm:text-base">{t.bestPricesDesc}</p>
             </div>
-            <div className="text-center p-6">
-              <div className="w-16 h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-4">
-                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div className="text-center p-4 sm:p-6">
+              <div className="w-12 h-12 sm:w-16 sm:h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
+                <svg className="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                 </svg>
               </div>
-              <h3 className="text-xl font-semibold mb-2">{t.fullSupport}</h3>
-              <p className="text-gray-600">{t.fullSupportDesc}</p>
+              <h3 className="text-lg sm:text-xl font-semibold mb-2">{t.fullSupport}</h3>
+              <p className="text-gray-600 text-sm sm:text-base">{t.fullSupportDesc}</p>
             </div>
           </div>
         </div>
       </section>
 
       {/* CTA */}
-      <section className="bg-primary-700 text-white py-16">
+      <section className="bg-primary-700 text-white py-10 sm:py-16">
         <div className="container mx-auto px-4 text-center">
-          <h2 className="text-3xl font-bold mb-4">{t.readyToFindYourCar}</h2>
-          <p className="text-primary-100 mb-8 max-w-2xl mx-auto">
+          <h2 className="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4">{t.readyToFindYourCar}</h2>
+          <p className="text-primary-100 mb-6 sm:mb-8 max-w-2xl mx-auto text-sm sm:text-base">
             {t.browseOurCollection}
           </p>
-          <div className="flex justify-center space-x-4">
+          <div className="flex flex-col sm:flex-row justify-center gap-3 sm:space-x-4">
             <Link
               href="/cars"
-              className="bg-white text-primary-700 font-semibold px-6 py-3 rounded-lg hover:bg-primary-100 transition"
+              className="bg-white text-primary-700 font-semibold px-5 py-2.5 sm:px-6 sm:py-3 rounded-lg hover:bg-primary-100 transition text-sm sm:text-base"
             >
               {t.browseCars}
             </Link>
             <Link
               href="/contact"
-              className="border-2 border-white text-white font-semibold px-6 py-3 rounded-lg hover:bg-white hover:text-primary-700 transition"
+              className="border-2 border-white text-white font-semibold px-5 py-2.5 sm:px-6 sm:py-3 rounded-lg hover:bg-white hover:text-primary-700 transition text-sm sm:text-base"
             >
               {t.contactUs}
             </Link>

frontend/src/components/FilmStripSlider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
 import { motion, useAnimationControls } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -22,6 +22,39 @@ const defaultSettings: HeroBannerSettings = {
   auto_play: true,
 };
 
+// 반응형 이미지 크기 계산
+const useResponsiveImageSize = (baseWidth: number, baseHeight: number) => {
+  const [dimensions, setDimensions] = useState({ width: baseWidth, height: baseHeight });
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      const screenWidth = window.innerWidth;
+      if (screenWidth < 480) {
+        // Extra small mobile
+        setDimensions({ width: 200, height: 130 });
+      } else if (screenWidth < 640) {
+        // Mobile
+        setDimensions({ width: 260, height: 170 });
+      } else if (screenWidth < 768) {
+        // Tablet
+        setDimensions({ width: 320, height: 200 });
+      } else if (screenWidth < 1024) {
+        // Small desktop
+        setDimensions({ width: 400, height: 250 });
+      } else {
+        // Large desktop
+        setDimensions({ width: baseWidth, height: baseHeight });
+      }
+    };
+
+    updateDimensions();
+    window.addEventListener('resize', updateDimensions);
+    return () => window.removeEventListener('resize', updateDimensions);
+  }, [baseWidth, baseHeight]);
+
+  return dimensions;
+};
+
 // 샘플 배너 데이터 (API 데이터가 없을 때 사용)
 const sampleBanners: HeroBanner[] = [
   {
@@ -104,9 +137,12 @@ export default function FilmStripSlider({ banners, settings }: FilmStripSliderPr
   const currentXRef = useRef(0);
   const animationStartTimeRef = useRef(0);
 
-  const imageWidth = effectiveSettings.image_width;
-  const imageHeight = effectiveSettings.image_height;
-  const gap = 16; // gap between images
+  // 반응형 이미지 크기 사용
+  const { width: imageWidth, height: imageHeight } = useResponsiveImageSize(
+    effectiveSettings.image_width,
+    effectiveSettings.image_height
+  );
+  const gap = 12; // gap between images (smaller on mobile)
   const singleSetWidth = (imageWidth + gap) * effectiveBanners.length;
   const totalDuration = effectiveBanners.length * (effectiveSettings.slide_interval / 1000);
 
@@ -250,11 +286,11 @@ export default function FilmStripSlider({ banners, settings }: FilmStripSliderPr
   };
 
   return (
-    <div className="relative w-full overflow-hidden bg-gradient-to-b from-gray-900 to-gray-800 py-8">
-      {/* Film strip effect - top perforation */}
-      <div className="absolute top-0 left-0 right-0 h-4 bg-gray-900 flex items-center justify-around">
+    <div className="relative w-full overflow-hidden bg-gradient-to-b from-gray-900 to-gray-800 py-4 sm:py-8">
+      {/* Film strip effect - top perforation (hidden on very small screens) */}
+      <div className="absolute top-0 left-0 right-0 h-3 sm:h-4 bg-gray-900 hidden sm:flex items-center justify-around">
         {Array.from({ length: 30 }).map((_, i) => (
-          <div key={i} className="w-3 h-2 bg-gray-700 rounded-sm" />
+          <div key={i} className="w-2 sm:w-3 h-1.5 sm:h-2 bg-gray-700 rounded-sm" />
         ))}
       </div>
 
@@ -262,14 +298,16 @@ export default function FilmStripSlider({ banners, settings }: FilmStripSliderPr
       <div
         ref={containerRef}
         className="relative overflow-hidden mx-auto"
-        style={{ height: imageHeight + 40 }}
+        style={{ height: imageHeight + 20 }}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        onTouchStart={handleMouseEnter}
+        onTouchEnd={handleMouseLeave}
       >
         <motion.div
-          className="flex gap-4 absolute"
+          className="flex absolute"
           animate={controls}
-          style={{ paddingLeft: gap }}
+          style={{ paddingLeft: gap, gap: gap }}
         >
           {duplicatedBanners.map((banner, index) => (
             <BannerCard
@@ -282,35 +320,35 @@ export default function FilmStripSlider({ banners, settings }: FilmStripSliderPr
         </motion.div>
       </div>
 
-      {/* Film strip effect - bottom perforation */}
-      <div className="absolute bottom-0 left-0 right-0 h-4 bg-gray-900 flex items-center justify-around">
+      {/* Film strip effect - bottom perforation (hidden on very small screens) */}
+      <div className="absolute bottom-0 left-0 right-0 h-3 sm:h-4 bg-gray-900 hidden sm:flex items-center justify-around">
         {Array.from({ length: 30 }).map((_, i) => (
-          <div key={i} className="w-3 h-2 bg-gray-700 rounded-sm" />
+          <div key={i} className="w-2 sm:w-3 h-1.5 sm:h-2 bg-gray-700 rounded-sm" />
         ))}
       </div>
 
       {/* Gradient overlays for fade effect at edges */}
-      <div className="absolute top-4 bottom-4 left-0 w-24 bg-gradient-to-r from-gray-900 to-transparent pointer-events-none z-10" />
-      <div className="absolute top-4 bottom-4 right-0 w-24 bg-gradient-to-l from-gray-900 to-transparent pointer-events-none z-10" />
+      <div className="absolute top-0 sm:top-4 bottom-0 sm:bottom-4 left-0 w-8 sm:w-24 bg-gradient-to-r from-gray-900 to-transparent pointer-events-none z-10" />
+      <div className="absolute top-0 sm:top-4 bottom-0 sm:bottom-4 right-0 w-8 sm:w-24 bg-gradient-to-l from-gray-900 to-transparent pointer-events-none z-10" />
 
-      {/* Navigation Arrows */}
+      {/* Navigation Arrows - smaller on mobile */}
       <button
         type="button"
         onClick={handlePrev}
-        className="absolute left-4 top-1/2 -translate-y-1/2 z-20 bg-white/20 hover:bg-white/40 text-white rounded-full p-3 backdrop-blur-sm transition-all duration-200 hover:scale-110"
+        className="absolute left-1 sm:left-4 top-1/2 -translate-y-1/2 z-20 bg-white/20 hover:bg-white/40 text-white rounded-full p-1.5 sm:p-3 backdrop-blur-sm transition-all duration-200 hover:scale-110"
         aria-label="Previous"
       >
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
         </svg>
       </button>
       <button
         type="button"
         onClick={handleNext}
-        className="absolute right-4 top-1/2 -translate-y-1/2 z-20 bg-white/20 hover:bg-white/40 text-white rounded-full p-3 backdrop-blur-sm transition-all duration-200 hover:scale-110"
+        className="absolute right-1 sm:right-4 top-1/2 -translate-y-1/2 z-20 bg-white/20 hover:bg-white/40 text-white rounded-full p-1.5 sm:p-3 backdrop-blur-sm transition-all duration-200 hover:scale-110"
         aria-label="Next"
       >
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
         </svg>
       </button>

frontend/src/components/Header.tsx

@@ -217,10 +217,10 @@ export default function Header() {
           </nav>
 
           {/* Right side: Notifications + Language + Auth */}
-          <div className="flex items-center space-x-4">
-            {/* Notification Bell */}
+          <div className="flex items-center space-x-2 sm:space-x-4">
+            {/* Notification Bell - hidden on very small screens */}
             {user && (
-              <div className="relative" ref={notificationRef}>
+              <div className="relative hidden sm:block" ref={notificationRef}>
                 <button
                   onClick={handleNotificationClick}
                   className="relative p-2 hover:bg-primary-600 rounded-full transition"
@@ -322,21 +322,23 @@ export default function Header() {
               </div>
             )}
 
-            {/* Language Selector */}
-            <LanguageSelector />
+            {/* Language Selector - compact on mobile */}
+            <div className="hidden sm:block">
+              <LanguageSelector />
+            </div>
 
-            {/* Auth */}
+            {/* Auth - hidden on mobile, shown in mobile menu */}
             {user ? (
               <>
                 <Link
                   href="/profile"
-                  className="text-sm hidden sm:inline hover:text-primary-200 transition cursor-pointer"
+                  className="text-sm hidden lg:inline hover:text-primary-200 transition cursor-pointer"
                 >
                   Hello, {user.name || user.email}
                 </Link>
                 <button
                   onClick={logout}
-                  className="bg-primary-600 hover:bg-primary-500 px-4 py-2 rounded transition"
+                  className="hidden sm:block bg-primary-600 hover:bg-primary-500 px-3 py-1.5 sm:px-4 sm:py-2 rounded transition text-sm sm:text-base"
                 >
                   {t.logout}
                 </button>
@@ -345,25 +347,26 @@ export default function Header() {
               <>
                 <Link
                   href="/login"
-                  className="hover:text-primary-200 transition hidden sm:inline"
+                  className="hover:text-primary-200 transition hidden lg:inline"
                 >
                   {t.login}
                 </Link>
                 <Link
                   href="/register"
-                  className="bg-white text-primary-700 hover:bg-primary-100 px-4 py-2 rounded transition"
+                  className="hidden sm:block bg-white text-primary-700 hover:bg-primary-100 px-3 py-1.5 sm:px-4 sm:py-2 rounded transition text-sm sm:text-base"
                 >
                   {t.register}
                 </Link>
               </>
             )}
 
-            {/* Mobile menu button */}
+            {/* Mobile menu button - always visible on mobile */}
             <button
-              className="md:hidden p-2 hover:bg-primary-600 rounded"
+              className="md:hidden p-2 hover:bg-primary-600 rounded-lg bg-primary-600/50"
               onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              aria-label="Menu"
             >
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 {mobileMenuOpen ? (
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                 ) : (
@@ -377,19 +380,82 @@ export default function Header() {
         {/* Mobile Navigation */}
         {mobileMenuOpen && (
           <nav className="md:hidden py-4 border-t border-primary-600">
+            {/* Navigation Links */}
             {navItems.map((item) => {
               const isActive = item.group ? activeGroup === item.group : pathname === item.href;
               return (
                 <Link
                   key={item.href}
                   href={item.href}
-                  className={`block py-2 hover:text-primary-200 transition ${isActive ? 'text-white font-semibold' : ''}`}
+                  className={`block py-3 hover:text-primary-200 transition ${isActive ? 'text-white font-semibold' : ''}`}
                   onClick={() => setMobileMenuOpen(false)}
                 >
                   {getLabel(item.label)}
                 </Link>
               );
             })}
+
+            {/* Divider */}
+            <div className="border-t border-primary-600 my-3"></div>
+
+            {/* Language Selector in mobile menu */}
+            <div className="py-2 sm:hidden">
+              <span className="text-primary-200 text-sm mb-2 block">Language</span>
+              <LanguageSelector />
+            </div>
+
+            {/* Auth section in mobile menu */}
+            <div className="py-2 sm:hidden">
+              {user ? (
+                <div className="space-y-2">
+                  <Link
+                    href="/profile"
+                    className="block py-2 hover:text-primary-200 transition"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    👤 {user.name || user.email}
+                  </Link>
+                  <Link
+                    href="/notifications"
+                    className="block py-2 hover:text-primary-200 transition"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    🔔 {t.notifications || 'Notifications'}
+                    {unreadCount > 0 && (
+                      <span className="ml-2 bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">
+                        {unreadCount}
+                      </span>
+                    )}
+                  </Link>
+                  <button
+                    onClick={() => {
+                      logout();
+                      setMobileMenuOpen(false);
+                    }}
+                    className="w-full text-left py-2 hover:text-primary-200 transition text-red-300"
+                  >
+                    {t.logout}
+                  </button>
+                </div>
+              ) : (
+                <div className="flex gap-3">
+                  <Link
+                    href="/login"
+                    className="flex-1 text-center py-2 border border-white rounded hover:bg-white hover:text-primary-700 transition"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    {t.login}
+                  </Link>
+                  <Link
+                    href="/register"
+                    className="flex-1 text-center py-2 bg-white text-primary-700 rounded hover:bg-primary-100 transition"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    {t.register}
+                  </Link>
+                </div>
+              )}
+            </div>
           </nav>
         )}
       </div>