diff --git a/lib/screens/features/sommelier_screen.dart b/lib/screens/features/sommelier_screen.dart
index e6be9c0..c7e9241 100644
--- a/lib/screens/features/sommelier_screen.dart
+++ b/lib/screens/features/sommelier_screen.dart
@@ -135,9 +135,7 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
                   _buildMBTIDiagnosisSection(context, userProfile, sakeList),
                   const SizedBox(height: 32),
 
-                  // さけのわ おすすめ
-                  _buildSectionHeader(context, 'さけのわ おすすめ', LucideIcons.trendingUp),
-                  const SizedBox(height: 8),
+                  // さけのわ おすすめ（各ウィジェットが独自ヘッダーを持つため親ヘッダーは不要）
                   const SakenowaNewRecommendationSection(displayCount: 5),
                   const SizedBox(height: 16),
                   const SakenowaRankingSection(displayCount: 10),
@@ -224,13 +222,13 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
               color: appColors.brandAccent.withValues(alpha: 0.05),
             ),
           ),
-          
+
           // Subtle Sake Emoji
           Positioned(
             left: 20,
             top: 20,
             child: Opacity(
-              opacity: 0.3, // Subtle
+              opacity: 0.3,
               child: const Text(
                 '🍶',
                 style: TextStyle(fontSize: 40),
@@ -239,7 +237,7 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
           ),
 
           Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 12.0), // Optimized for チラ見せ effect
+            padding: const EdgeInsets.all(24.0),
             child: Column(
               children: [
                 // 1. Header (Name & Rank) with unified help icon
@@ -353,11 +351,32 @@ class _SommelierScreenState extends ConsumerState<SommelierScreen> {
     // --- MBTI Diagnosis Logic ---
     Widget _buildMBTIDiagnosisSection(BuildContext context, UserProfile userProfile, List<SakeItem> sakeList) {
       final appColors = Theme.of(context).extension<AppColors>()!;
-  
-      return Card(
-        elevation: 2,
-        color: appColors.surfaceSubtle,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
+      final isDark = Theme.of(context).brightness == Brightness.dark;
+
+      return Container(
+        width: double.infinity,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(24),
+          border: isDark
+              ? null
+              : Border.all(color: appColors.divider.withValues(alpha: 0.5), width: 1),
+          gradient: LinearGradient(
+            begin: Alignment.topLeft,
+            end: Alignment.bottomRight,
+            colors: isDark
+                ? [const Color(0xFF2C2C2E), const Color(0xFF1C1C1E)]
+                : [appColors.surfaceSubtle, appColors.surfaceElevated],
+          ),
+          boxShadow: [
+            BoxShadow(
+              color: isDark
+                  ? Colors.black.withValues(alpha: 0.5)
+                  : Colors.black.withValues(alpha: 0.08),
+              blurRadius: 20,
+              offset: const Offset(0, 10),
+            ),
+          ],
+        ),
         child: Padding(
           padding: const EdgeInsets.all(24),
           child: Column(
diff --git a/web/download/style.css b/web/download/style.css
index bee50b6..4bde8cd 100644
--- a/web/download/style.css
+++ b/web/download/style.css
@@ -57,17 +57,17 @@ a {
 .container {
   max-width: 480px;
   margin: 0 auto;
-  padding: var(--space-lg) var(--space-md);
+  padding: var(--space-md);
   display: flex;
   flex-direction: column;
-  gap: var(--space-xl);
+  gap: var(--space-md);
   min-height: 100vh;
 }
 
 /* ===== Hero ===== */
 .hero {
   text-align: center;
-  padding-top: var(--space-xl);
+  padding-top: var(--space-sm);
 }
 
 .logo {
@@ -78,9 +78,9 @@ a {
 }
 
 .sake-icon {
-  width: 48px;
-  height: 48px;
-  color: var(--kohaku-gold);
+  font-size: 48px;
+  line-height: 1;
+  display: block;
 }
 
 .logo h1 {
@@ -97,55 +97,6 @@ a {
   letter-spacing: 0.1em;
 }
 
-/* ===== Preview ===== */
-.preview {
-  display: flex;
-  justify-content: center;
-}
-
-.phone-frame {
-  width: 200px;
-  height: 400px;
-  background: var(--sumi-black);
-  border-radius: 32px;
-  padding: 12px;
-  box-shadow: 
-    0 25px 50px -12px rgba(74, 59, 50, 0.25),
-    inset 0 0 0 2px rgba(255, 255, 255, 0.1);
-}
-
-.screen-placeholder {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, var(--gray-100) 0%, var(--washi-white) 100%);
-  border-radius: 24px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.grid-preview {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-  padding: 16px;
-  width: 100%;
-}
-
-.grid-item {
-  aspect-ratio: 1;
-  background: linear-gradient(145deg, var(--kohaku-gold), var(--kohaku-deep));
-  border-radius: 8px;
-  opacity: 0.6;
-}
-
-.grid-item:nth-child(2) { opacity: 0.4; }
-.grid-item:nth-child(3) { opacity: 0.8; }
-.grid-item:nth-child(4) { opacity: 0.5; }
-.grid-item:nth-child(5) { opacity: 0.7; }
-.grid-item:nth-child(6) { opacity: 0.3; }
-
 /* ===== Download ===== */
 .download {
   display: flex;
@@ -258,18 +209,6 @@ a {
   letter-spacing: 0.1em;
 }
 
-/* ===== Footer ===== */
-footer {
-  margin-top: auto;
-  text-align: center;
-  padding: var(--space-lg) 0;
-}
-
-footer p {
-  font-size: 0.75rem;
-  color: var(--gray-400);
-}
-
 /* ===== Dark Mode ===== */
 @media (prefers-color-scheme: dark) {
   :root {
@@ -281,14 +220,6 @@ footer p {
     --gray-600: #9E9A94;
   }
   
-  .phone-frame {
-    background: #2A2A2A;
-  }
-  
-  .screen-placeholder {
-    background: linear-gradient(135deg, #1E1E1E 0%, #2A2A2A 100%);
-  }
-  
   .version-card {
     background: #1E1E1E;
     border-color: #2A2A2A;
@@ -312,11 +243,6 @@ footer p {
 /* ===== Responsive ===== */
 @media (min-width: 768px) {
   .container {
-    padding: var(--space-xl);
-  }
-  
-  .phone-frame {
-    width: 240px;
-    height: 480px;
+    padding: var(--space-lg);
   }
 }