v0.5.1: Ohli24 레이아웃 표준화 및 Anilife 폴백 체인 개선

static/css/anilife.css

@@ -6,3 +6,26 @@
     --notify-warning-bg: rgba(120, 53, 15, 0.95);
     --notify-danger-bg: rgba(127, 29, 29, 0.95);
 }
+
+/* Common Layout Wrapper - Responsive */
+.anilife-common-wrapper {
+    max-width: 100%;
+    margin: 0 auto;
+    width: 100%;
+    transition: opacity 0.5s ease-out;
+}
+
+/* Desktop: 1400px max-width */
+@media (min-width: 992px) {
+    .anilife-common-wrapper {
+        max-width: 1400px;
+    }
+}
+
+.anilife-common-wrapper.content-cloak {
+    opacity: 0;
+}
+
+.anilife-common-wrapper.visible {
+    opacity: 1;
+}

static/css/linkkf.css

@@ -35,3 +35,19 @@ ul.nav.nav-pills .nav-link.active {
     background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
     box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
 }
+
+/* Common Layout Wrapper */
+.linkkf-common-wrapper {
+    max-width: 1400px;
+    margin: 0 auto;
+    width: 100%;
+    transition: opacity 0.5s ease-out;
+}
+
+.linkkf-common-wrapper.content-cloak {
+    opacity: 0;
+}
+
+.linkkf-common-wrapper.visible {
+    opacity: 1;
+}

static/css/mobile_custom.css

@@ -49,22 +49,44 @@
         overflow-x: hidden !important;
     }
     
-    /* Global Navigation Pills Fix */
+    /* Global Navigation Pills Fix & Premium Styling */
     ul.nav.nav-pills.bg-light {
-        margin-top: 50px !important;
-        margin-bottom: 10px !important;
-        width: 100% !important;
-        display: flex !important;
-        flex-wrap: wrap !important;
-        justify-content: center !important;
-        border-radius: 10px !important;
-        padding: 4px !important;
-        gap: 2px !important;
+        background-color: rgba(30, 41, 59, 0.6) !important;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 50rem !important; /* Pill shape container */
+        padding: 6px !important;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
+        display: inline-flex !important; /* Fit content */
+        flex-wrap: wrap; /* allow wrap on small screens */
+        justify-content: center;
+        width: auto !important; /* Prevent full width */
+        margin-bottom: 20px;
+        margin-top: 50px !important; /* Mobile spacing */
     }
-    
+
+    ul.nav.nav-pills .nav-item {
+        margin: 0 2px;
+    }
+
     ul.nav.nav-pills .nav-link {
-        padding: 5px 12px !important;
-        font-size: 13px !important;
+        border-radius: 50rem !important;
+        padding: 8px 20px !important;
+        color: #94a3b8 !important; /* Muted text */
+        font-weight: 600;
+        transition: all 0.3s ease;
+    }
+
+    ul.nav.nav-pills .nav-link:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+        color: #fff !important;
+        transform: translateY(-1px);
+    }
+
+    ul.nav.nav-pills .nav-link.active {
+        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+        color: #fff !important;
+        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
     }
     
     /* Layout Expansion on Mobile */

static/css/ohli24.css

@@ -21,6 +21,21 @@ body {
     color: #f1f5f9; 
     background-image: linear-gradient(135deg, #1f2937, #111827, #0f172a) !important;
     background-attachment: fixed !important;
+    font-family: 'NamumSquareNeo', system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif;
+}
+
+/* Glass Card Container */
+.glass-card {
+    background: rgba(30, 41, 59, 0.7) !important;
+    backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-radius: 16px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
+}
+
+.glass-card:hover {
+    border-color: rgba(96, 165, 250, 0.5) !important;
 }
 
 /* General Layout Fixes */
@@ -30,6 +45,59 @@ body {
     max-width: 100%;
 }
 
+.ohli24-common-wrapper {
+    max-width: 1400px;
+    margin: 0 auto;
+    width: 100%;
+    transition: opacity 0.5s ease-out;
+}
+
+.ohli24-common-wrapper.content-cloak {
+    opacity: 0;
+}
+
+.ohli24-common-wrapper.visible {
+    opacity: 1;
+}
+
+/* Common Header Styles */
+.ohli24-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.ohli24-header-left {
+    display: flex;
+    align-items: center;
+}
+
+.ohli24-icon-box {
+    width: 48px;
+    height: 48px;
+    background: rgba(59, 130, 246, 0.1);
+    border-radius: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    margin-right: 1rem;
+}
+
+.ohli24-header-title {
+    margin-bottom: 0;
+    color: white;
+    font-weight: 700;
+}
+
+.ohli24-header-subtitle {
+    font-size: 0.875rem;
+    color: #94a3b8;
+}
+
 /* Nav Pills Customization */
 ul.nav.nav-pills.bg-light {
     background-color: rgba(30, 41, 59, 0.6) !important;