:root {
     --primary-color: #ff6b9d;
     /* Pink from branding */
     --secondary-color: #7a46f2;
     /* Purple from branding */
     --text-dark: #111111;
     --text-gray: #666666;
     --bg-light: #f8f9fa;
     --white: #ffffff;
     --gold: #d4af37;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
     line-height: 1.6;
     /* Pure White Background (Final Master Version) */
     background: #ffffff;
     background-image: none;
     color: #111111;
     /* Stark Dark text */
     /* Revert to dark text for light background */
     padding-bottom: 80px;
     /* Space for sticky button */

     /* Fix: Prevent awkward single-character line breaks matching Korean typography */
     word-break: keep-all;
     overflow-x: hidden;
     /* Prevent horizontal scroll */
 }

 /* Header */
 .header {
     background: #f6ebfb;
     backdrop-filter: none;
     padding: 15px 20px;
     text-align: center;
     border-bottom: none;
     position: sticky;
     top: 0;
     z-index: 100;
 }

 /* Mobile Full Width Adjustments */
 @media (max-width: 768px) {

     /* 1. Container & Wrapper Padding/Width Reset */
     .container,
     .hero-section,
     .section,
     .hero-image-container,
     .event-card,
     .event-card.full,
     .highlight-box {
         width: 100% !important;
         max-width: none !important;
         /* Remove constraints */
         padding: 0 !important;
         margin: 0 !important;
         border: none !important;
         /* Remove borders that might affect width */
         background: transparent !important;
     }

     /* Ensure overflow is visible for breakout images */
     .hero-image-container,
     .event-card.full,
     .highlight-box {
         overflow: visible !important;
     }



     /* 2. Image Full Width & Natural Height (Maximize Size) */
     img,
     .hero-img,
     .full-width-img,
     .card-img,
     .main-banner img {
         width: 100% !important;
         max-width: 100% !important;
         height: auto !important;
         /* Force proportional height */
         max-height: none !important;
         border-radius: 0 !important;
         display: block;
         object-fit: contain;
         /* Ensure full image is visible */
         margin: 0 !important;
     }

     /* Ensure Main Banner specifically is not restricted */
     .main-banner img {
         height: auto !important;
     }

     /* 3. Text Typography & Padding Fixes */

     /* Main Title Adjustment */
     .main-title {
         font-size: 2.2rem;
         /* Reduce slightly from 3.5rem to fit mobile */
         padding: 0 20px;
         line-height: 1.2;
     }

     /* Date/Event Info Adjustment */
     .event-info {
         font-size: 1rem;
         /* Adjust to fit single line if possible */
         padding: 0 20px;
         white-space: nowrap;
         /* Try to keep on one line */
     }

     /* General Text Padding since container has 0 padding */
     .section-title,
     .section-desc,
     .sub-title,
     .hero-content p,
     .highlight-box h2,
     .highlight-box p,
     .container>h2,
     .consulting .container>div,
     .footer p {
         padding-left: 20px;
         padding-right: 20px;
     }

     /* Button Sizing */
     .cta-button {
         width: calc(100% - 40px);
         margin-left: 20px;
         margin-right: 20px;
         box-sizing: border-box;
     }

     .highlight-box {
         padding: 0;
     }

     /* Force Full Bleed for All Banner Images including Cards */
     .full-width-img,
     .card-img {
         width: 100vw !important;
         max-width: none !important;
         margin-left: calc(-50vw + 50%) !important;
         margin-right: calc(-50vw + 50%) !important;
         border-radius: 0 !important;
         height: auto !important;
         /* Allow natural height to prevent cropping */
         object-fit: contain !important;
         /* Ensure full image is visible */
     }

     /* Special Handling for Hero Image to Avoid Cropping */
     /* Special Handling for Hero Image: Revert to Standard Contained Width */
     .hero-img {
         width: 100% !important;
         max-width: 100% !important;
         margin: 0 auto !important;
         border-radius: 12px !important;
         height: auto !important;
         object-fit: contain !important;
     }

     /* Special Handling for Pre-reg Image: Revert to Standard Contained Width */
     .pre-reg .full-width-img {
         width: 100% !important;
         max-width: 100% !important;
         margin: 0 auto !important;
         border-radius: 12px !important;
         height: auto !important;
         object-fit: contain !important;
     }
 }

 .logo {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .header-logo-img {
     height: 100px;
     width: auto;
     object-fit: contain;
 }

 /* Hero Section */
 .hero-section {
     position: relative;
     background: transparent;
     color: var(--text-dark);
     text-align: center;
     overflow: hidden;
 }

 .hero-content {
     padding: 40px 20px;
     background: transparent;
 }

 .sub-title {
     font-size: 0.9rem;
     opacity: 0.9;
     margin-bottom: 10px;
     color: var(--text-gray);
 }

 .main-title {
     font-size: 3.5rem;
     /* Increased from 2.5rem */
     line-height: 1.2;
     font-weight: 900;
     /* Extra bold */
     margin-bottom: 20px;
     color: #4C1D95;
     /* Deep Violet */
     text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
     /* Strong 3D Drop Shadow */
 }

 .event-info {
     font-size: 1.1rem;
     /* Slightly larger for visibility */
     font-weight: 700;
     margin-top: 10px;
     color: var(--secondary-color);
     /* Dark Purple for good contrast on pink */
     text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
     /* White glow to separate from bg */
 }

 .hero-img {
     width: 100%;
     max-width: 600px;
     /* Significantly increased height as requested */
     height: 800px !important;
     object-fit: cover !important;
     display: block;
     margin: 0 auto;
 }

 /* Generic Sections */
 .section {
     padding: 40px 0;
     /* Removed side padding for full-width images */
     background: transparent;
     /* Transparent to show gradient */
     margin-bottom: 60px;
 }

 .section-title {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 15px;
     text-align: center;
     color: #4C1D95;
     /* Deep Violet for Premium Look */
     font-weight: 700;
     padding: 0 20px;
     /* Added padding here */
 }

 .section-desc {
     text-align: center;
     color: var(--text-gray);
     margin-bottom: 20px;
     padding: 0 20px;
     /* Added padding here */
 }

 .container {
     max-width: 600px;
     margin: 0 auto;
 }

 img {
     max-width: 100%;
     height: auto;
     border-radius: 12px;
 }

 .full-width-img {
     width: 100%;
     display: block;
 }

 .mt-2 {
     margin-top: 20px;
 }

 /* Pre-Reg Section */
 .pre-reg {
     background: transparent;
 }

 /* Significantly increase Pre-reg image height */
 .pre-reg .full-width-img {
     height: 800px !important;
     object-fit: cover !important;
 }

 .highlight-box {
     text-align: center;
 }

 .white-text {
     color: var(--white);
 }

 /* Buttons */
 .cta-button {
     display: inline-block;
     background: var(--white);
     color: var(--secondary-color);
     padding: 15px 30px;
     text-decoration: none;
     border-radius: 50px;
     font-weight: 700;
     font-size: 1.1rem;
     margin-top: 20px;
     transition: transform 0.2s;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 .cta-button:hover {
     transform: scale(1.05);
 }

 .primary {
     background: var(--white);
     color: var(--secondary-color);
 }

 /* Events */
 .event-card {
     background: rgba(255, 255, 255, 0.95);
     /* White cards for content readability */
     border-radius: 15px;
     padding: 20px;
     margin-bottom: 20px;
     text-align: center;
     border: none;
     color: var(--text-dark);
     /* Dark text inside cards */
 }

 .event-card.full {
     padding: 0;
     background: transparent;
     overflow: hidden;
 }

 .event-card.full img {
     border-radius: 15px;
     width: 100%;
     display: block;
 }

 .event-card h3 {
     margin-bottom: 10px;
     font-size: 1.3rem;
     color: var(--text-dark);
 }

 .highlight-border {
     border: 3px solid var(--primary-color);
 }

 .urgent-tag {
     background: var(--primary-color);
     color: var(--white);
     display: inline-block;
     padding: 5px 10px;
     border-radius: 4px;
     font-size: 0.8rem;
     font-weight: 700;
     margin-bottom: 15px;
 }

 .gold-bg {
     background: linear-gradient(135deg, #fff8e1 0%, #fff 100%);
     border: 2px solid var(--gold);
 }

 .gold-text {
     color: #bfa028;
     font-weight: 700;
 }

 /* Footer */
 .footer {
     text-align: center;
     padding: 30px;
     color: rgba(255, 255, 255, 0.6);
     font-size: 0.8rem;
 }

 /* Sticky CTA */
 .sticky-cta {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     display: flex;
     justify-content: center;
     z-index: 200;
 }

 .sticky-button {
     width: 100%;
     max-width: 600px;
     background: var(--white);
     color: var(--secondary-color);
     text-align: center;
     padding: 15px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: 700;
     font-size: 1.1rem;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
 }

 /* Credibility Card Alignment */
 .card {
     text-align: center;
     max-width: 100%;
     margin: 0 auto;
 }

 .card-text {
     text-align: center;
     margin-top: 15px;
     color: var(--text-dark);
 }

 .card-text h3 {
     font-size: 1.2rem;
     margin-bottom: 5px;
     line-height: 1.4;
 }

 .card-text p {
     font-size: 0.9rem;
     color: var(--text-gray);
 }

 /* Main Rolling Banner Styles */
 .main-banner {
     background-color: transparent;
     /* Default bg */
 }

 /* 
   Per user request: 
   - PC height: 260px fixed
   - Mobile height: 200px fixed
   - Object-fit: scale-down (centered)
*/
 .main-banner img {
     height: 260px;
     width: 100%;
     object-fit: contain;
     /* Using contain to ensure no crop as requested */
     object-position: center;
 }

 @media (max-width: 768px) {
     .main-banner img {
         height: 200px;
     }
 }

 /* =========================================
   CRITICAL MOBILE OVERRIDES (Add at the end)
   ========================================= */
 @media (max-width: 768px) {

     /* 1. Fix Image Cropping: Override global height constraints */
     /* 1. Special Fix for Hero Image: Full Bleed + No Crop */
     /* 1. Special Fix for Hero Image: ULTRA ROBUST Full Bleed */
     /* 1. Special Fix for Hero Image: SAFE MODE (CEO Request) */
     .hero-img {
         width: 100% !important;
         max-width: 100% !important;
         height: auto !important;
         object-fit: contain !important;
         margin: 0 auto !important;
         display: block !important;
         position: static !important;
         transform: none !important;

         height: auto !important;
         /* Scale height naturally */
         /* display: block is default, but ensuring it helps */
         display: block !important;
         border-radius: 0 !important;
         box-sizing: border-box !important;
     }

     /* 2. Other Banners: Force Full Bleed (100vw) as desired */
     .pre-reg .full-width-img,
     .main-banner img,
     .full-width-img,
     .card-img {
         height: auto !important;
         /* Force natural height */
         object-fit: cover !important;
         /* Ensure coverage */
         width: 100vw !important;
         /* Force Full Screen Width */
         max-width: none !important;
         margin-left: calc(-50vw + 50%) !important;
         /* Center and pull to edges */
         margin-right: calc(-50vw + 50%) !important;
         border-radius: 0 !important;
     }

     /* 2. Fix Section Spacing: Override the 'margin: 0' reset */
     .section,
     .hero-section,
     .pre-reg {
         margin-bottom: 60px !important;
         /* Enforce vertical spacing */
     }

     /* Ensure last section doesn't have too much space if needed */
     .footer {
         margin-top: 60px !important;
     }
 }

 /* =========================================
   FINAL CONTAINER RESET (User Request #10)
   ========================================= */
 @media (max-width: 768px) {

     /* Target the PARENTS of the Hero Image */
     .hero-section,
     .hero-image-container {
         width: 100% !important;
         max-width: none !important;
         padding: 0 !important;
         /* Kill padding */
         padding-left: 0 !important;
         padding-right: 0 !important;
         margin: 0 !important;
         /* Kill margin */
         margin-left: 0 !important;
         margin-right: 0 !important;
         border: none !important;
         background: transparent !important;
     }

     /* Ensure the Image itself acts right */
     .hero-img {
         width: 100% !important;
         /* Fill the freed container */
         height: auto !important;
         /* Natural height */
         object-fit: contain !important;
         margin: 0 !important;
         padding: 0 !important;
         display: block !important;
     }
 }