From 856fb354cf85bbce63de2f36a089a88604817c86 Mon Sep 17 00:00:00 2001
From: dsyoon <dosangyoon@gmail.com>
Date: Sat, 3 Jan 2026 17:02:32 +0900
Subject: [PATCH] Improve mobile spacing and CTA typography

---
 css/ncue.css | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)

diff --git a/css/ncue.css b/css/ncue.css
index cbbc5ce..efa2b11 100644
--- a/css/ncue.css
+++ b/css/ncue.css
@@ -139,6 +139,27 @@ h1,h2,h3,h4{
   color: #0b1220;
 }
 
+/* Mobile typography defaults: avoid awkward KR line breaks and restore breathing room */
+@media (max-width: 767px){
+  h1,h2,h3,h4,h5,h6{
+    word-break: keep-all;
+    overflow-wrap: normal;
+    hyphens: none;
+  }
+  p, li{
+    /* Desktop can be bolder; mobile needs slightly lighter weight for readability */
+    font-weight: 600;
+  }
+  .container{
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .row,.row-fluid,
+  .row .row,.row-fluid .row-fluid{
+    margin-bottom: 18px !important;
+  }
+}
+
 /* Featured / slider: add cinematic overlay for better text contrast */
 #featured{
   position: relative;
@@ -210,6 +231,9 @@ section.callaction{
   border: 1px solid rgba(15,23,42,0.06);
   overflow: hidden;
 }
+.big-cta .cta-text{
+  padding: 22px 22px 18px;
+}
 .big-cta:before{
   content:"";
   position:absolute;
@@ -240,6 +264,47 @@ section.callaction.callaction-home .row{
   margin-bottom: 0 !important;
 }
 
+/* Home CTA: mobile-friendly spacing, typography, and button layout */
+@media (max-width: 767px){
+  section.callaction.callaction-home{
+    padding-top: 16px;
+    padding-bottom: 10px;
+  }
+  section.callaction.callaction-home .big-cta{
+    margin-top: 8px;
+    padding-bottom: 14px;
+  }
+  section.callaction.callaction-home .big-cta .cta-text{
+    padding: 18px 16px 14px;
+  }
+  section.callaction.callaction-home .big-cta .cta-text h2{
+    margin: 0 0 10px;
+    font-size: 28px;
+    line-height: 1.18;
+    letter-spacing: -0.8px;
+    text-align: center;
+  }
+  section.callaction.callaction-home .big-cta .cta-text p{
+    margin: 10px 0 0;
+    line-height: 1.7;
+    text-align: left;
+    color: rgba(15, 23, 42, 0.86);
+  }
+  section.callaction.callaction-home .big-cta .cta-text p:last-of-type{
+    margin-top: 14px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+  }
+  section.callaction.callaction-home .big-cta .cta-text p:last-of-type .btn{
+    flex: 1 1 140px;
+    max-width: 220px;
+    padding: 12px 14px;
+    font-weight: 900;
+  }
+}
+
 /* Cards / boxes */
 .box{
   border-radius: var(--ncue-radius);
@@ -272,6 +337,31 @@ section.callaction.callaction-home .row{
   box-shadow: var(--ncue-shadow);
 }
 
+@media (max-width: 767px){
+  /* Mobile cards: a bit more padding + clearer tap targets */
+  #content{
+    padding: 28px 0 24px;
+  }
+  .box .box-gray{
+    padding: 18px 16px 16px !important;
+  }
+  .box .box-gray h4{
+    margin-bottom: 12px;
+    line-height: 1.25;
+    text-align: center;
+  }
+  .box .icon{
+    margin-bottom: 10px;
+  }
+  .box-bottom{
+    padding: 14px 0 !important;
+  }
+  .box-bottom a{
+    display: inline-block;
+    padding: 6px 10px;
+  }
+}
+
 /* Pricing cards */
 .pricing-box-alt{
   border-radius: var(--ncue-radius);