/*
  ======================================================
  FONT IMPORTS using @font-face
  ======================================================
*/

@font-face {
    font-family: 'Pretendard';
    font-weight: 700; /* Bold for QUAZAR logo text */
    font-style: normal;
    src: url('../public/fonts/Pretendard-Bold.woff2') format('woff2'),
         url('../public/fonts/Pretendard-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500; /* Medium for slogan text */
    font-style: normal;
    src: url('../public/fonts/Pretendard-Medium.woff2') format('woff2'),
         url('../public/fonts/Pretendard-Medium.woff') format('woff');
}


/*
  ======================================================
  BASE STYLES & APP WRAPPER SETUP
  ======================================================
*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', sans-serif; 
}

body {
    background-color: #f5f5f5; 
    display: flex;
    justify-content: center; /* CENTERS the #app-wrapper HORIZONTALLY */
    min-height: 100vh;
}

#app-wrapper { 
    width: 375px; 
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    display: flex;
    flex-direction: column;
}


/*
  ======================================================
  PART 1 STYLING (730px total height) - NEW BACKGROUND IMAGE
  ======================================================
*/

.part-1 {
    height: 730px; 
    border-bottom: none; 
    display: flex;
    flex-direction: column;
    padding: 0; 

    /* NEW: Apply back1.png as background for the entire 730px section */
    background-image: url('../public/img/section1back.png'); 
    background-repeat: no-repeat;
    background-size: 100% 100%; /* Stretches image to fit 375x730px exactly */
}

/* --- BLOCK 1A: Header/Logo (250px height) --- */
.part-1a-header {
    height: 250px;
    width: 100%;
    /* REMOVED: background-color: #ffffff; as it's now part of back1.png */
    display: flex; 
    flex-direction: column;
    justify-content: center; 
}

.app-header-content {
    width: 100%;
    padding: 0 0 30px 0; 
    text-align: center;
}

.logo-text {
    color: #0047AB; 
    font-weight: 700;
    font-size: 34px;
    line-height: 120%;
    letter-spacing: 0%;
    margin-bottom: 5px;
}

.slogan-text {
    color: #333;
    font-weight: 500;
    font-size: 12px;
    line-height: 140%;
    letter-spacing: 0%;
}


/* --- BLOCK 1B: Main Content/Image (480px height) --- */
.part-1b-content {
    height: 480px; 
    width: 100%;
    /* REMOVED: background-color and background-image here, now handled by .part-1 */
}

.auth-container {
    height: 100%; 
    width: 100%;
    /* REMOVED: All background styles here, now handled by .part-1 */
    background-image: none; 
    background-color: transparent; 
    
    position: relative; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px; 
    z-index: 1; 
}

.product-image {
    width: 262px; 
    height: 270px;
    margin-top: -10px; 
    margin-bottom: 90px; 
}

.result-card {
    background-color: white;
    padding: 15px 30px;
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    
    margin-bottom: 20px;
    transform: translateY(-110px); 
    position: relative;
    z-index: 10;
}

.robot-icon {
    width: 55px;
    height: 42px;
    margin-bottom: 0px; 
    margin-right: 0;
    border-radius: 0;
}

.result-text {
    font-size: 16px;
    font-weight: bold;
    color: #1a1a1a;
}

.instructions {
    text-align: center;
    transform: translateY(-110px); 
}

.instruction-text {
    font-size: 12px;
    color: #444;
    line-height: 1.5;
    margin-bottom: 25px;
}

.dot-indicators {
    display: flex;
    justify-content: center;
    gap: 8px; 
}

.dot {
    height: 6px;
    width: 6px;
    background-color: #ddd; 
    border-radius: 50%;
    display: inline-block;
}

.dot.active {
    width: 15px; 
    background-color: #0047AB; 
    border-radius: 3px; 
}


/*
  ======================================================
  STRUCTURAL SECTIONS (PART 2-7) - FIXED HEIGHTS
  (Updated Part 2 background only)
  ======================================================
*/

.page-part {
    width: 100%;
    text-align: center; /* Default centering for h2 in other sections */
}

/* Base style for h2 for separation in sections 2-7 */
.page-part h2 {
    padding: 20px 0;
}

.part-2 {
    height: 1600px;
    background-color: #f2f2f2;
    border-bottom: 5px solid #ccc;
    
    /* Section 2 Background Image */
      background-image: url('../public/img/backsection3.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto; 
    background-position: center top; 
    
    /* Resetting default centering for text content of this section */
    text-align: left; 
    padding: 0; /* Content padding is handled by .section-2-content */
}

/*
  ======================================================
  STRUCTURAL SECTIONS (PART 2-7) - FIXED HEIGHTS
  ======================================================
*/
/* ... other structural styles ... */

.part-2 {
    height: 1600px;
    background-color: #f2f2f2;
    border-bottom: 5px solid #ccc;
    
    /* Section 2 Background Image */
    background-image: url('../public/img/section2back.png');
    background-repeat: no-repeat;
    
    /* FIX: This ensures the image covers the entire 1600px height,
       and the width scales freely (auto) to maintain the aspect ratio. */
    background-size: auto 100%; 
    background-position: center top; 
    
    /* Resetting default centering for text content */
    text-align: left; 
    padding: 0;
}


/*
  ======================================================
  SECTION 2 CONTENT STYLING
  ======================================================
*/
/* ... all other Section 2 content styles remain the same ... */

.section-2-content {
    padding: 40px 30px; 
    width: 100%;
    background-color: transparent; 
}

/* NEW: Flex Row Container for QUAZAR and Company Profile Label */
.quazar-profile-row {
    display: flex;
    justify-content: space-between; /* Pushes QUAZAR to the left, profile to the right */
    align-items: center; /* Vertically centers the texts */
    width: 100%;
    margin-bottom: 20px; /* Space before the first paragraph */
}

/* QUAZAR Headline Styling (Left Side) */
.section-2-headline-row {
    padding: 0; 
    color: #000;
    
    font-family: Pretendard, sans-serif;
    font-weight: 700;
    font-size: 26px; 
    line-height: 140%;
    letter-spacing: -0.25%;
    text-transform: uppercase;
}

/* Company Profile Label Styling (Right Side) */
.company-profile-label-row {
    font-family: Pretendard, sans-serif;
    font-weight: 500; /* Medium weight */
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.25%;
    color: #999; /* Gray color */
}

/* General Paragraph Styling */
.section-2-paragraph {
    margin-bottom: 20px;
    color: #000;
    font-family: Pretendard, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.25%;
}
.staff-profile-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding: 40px 30px; 
    margin-top: 30px;
}

.ceo-image {
    width: 240px;
    height: 300px;
    margin-bottom: 20px;
    margin-right: 65px;
}

.profile-details {
    width: 100%;
    max-width: 300px; 
    text-align: left; 
}

.ceo-name {
    font-family: Pretendard, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 140%;
    letter-spacing: -0.25%;
    color: #000;
    margin-bottom: 15px;
}

.profile-item-title {
    font-family: Pretendard, sans-serif;
    font-weight: 700; 
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.25%;
    color: #000;
    margin-top: 15px;
}

.profile-item-detail {
    font-family: Pretendard, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.25%;
    color: #555; 
    margin-bottom: 5px;
}

.team-photo-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding: 30px 24px; 
    margin-top: 20px;
}

.team-headline {
    /* Slight bold look */
    font-family: Pretendard, sans-serif;
    font-weight: 700; 
    font-size: 14px; 
    color: #000;
    text-align: center;
    margin-bottom: 20px;
    margin-right: 37px;
}

.team-image {
    /* Set to exact Figma dimensions */
    width: 327px; 
    height: 184px;
    margin-bottom: 40px; /* Slight space below the image */
    
    border-radius: 5px; 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Subtle shadow for visual lift */
}

/*
  ======================================================
  PART 3: STRUCTURAL SETUP (1287px)
  ======================================================
*/

.part-3 {
    height: 1287px;
    background-color: #f2f2f2;
    border-bottom: 5px solid #ccc;
    
    /* Section 3 Background Image */
    background-image: url('../public/img/backsection3.jpg');
    background-repeat: no-repeat;
    /* FIX: Image covers full height, width scales freely */
    background-size: auto 100%; 
    background-position: center top; 
    
    /* Text content settings */
    text-align: left; 
    padding: 0;
}


/*
  ======================================================
  PART 3: CONTENT STYLING
  ======================================================
*/

.section-3-content {
    /* Padding matches the text margins shown in the Figma screenshot (approx 30px) */
    padding: 30px 30px; 
    width: 100%;
}

/* Empty Placeholder for Top Graphic/Image */
.section-3-graphic-placeholder {
    /* Reserving a space at the top, similar to the image in Section 2, plus margin */
    height: 50px; 
    width: 100%;
    margin-bottom: 20px;
    /* Optional: temporary visible boundary */
    /* border: 1px dashed #0047AB; */
}

.section-3-label {
    /* Styles for "Market Challenges" text */
    font-family: Pretendard, sans-serif;
    font-weight: 400; 
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.25%;
    color: #333; 
    margin-bottom: 10px;
}

/* MAIN HEADLINE: MARKET PROBLEM */
.section-3-main-headline {
    /* Overrides general h2 padding and applies specific styles */
    padding: 0; 
    margin-bottom: 40px;
    color: #000;
    
    font-family: Pretendard, sans-serif;
    font-weight: 700;
    font-size: 34px; /* Larger size to match screenshot */
    line-height: 120%;
    letter-spacing: 0%;
    text-transform: uppercase;
}

/* Sub-Titles (h3) */
.section-3-title {
    font-family: Pretendard, sans-serif;
    font-weight: 700; /* Bolder part */
    font-size: 18px;
    line-height: 140%;
    letter-spacing: -0.25%;
    color: #000;
    margin-top: 25px;
    margin-bottom: 15px;
}

/* General Paragraph Styling */
.section-3-paragraph {
    margin-bottom: 25px;
    color: #000;
    
    font-family: Pretendard, sans-serif;
    font-weight: 400; /* Ordinary text part */
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.25%;
}

.section-3-images {
    width: 100%;
    display: flex;
    flex-direction: column; /* Stacks images vertically */
    align-items: center; /* Centers images horizontally */
    padding: 20px 0; /* Vertical spacing */
    margin-top: 20px;
}

.auth-image {
    /* Set to specified shared dimensions */
    width: 327px;
    height: 200px;
    margin-bottom: 20px; /* Space between the two images */
    
    border-radius: 5px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

/*
  ======================================================
  PART 4: STRUCTURAL SETUP (1390px)
  ======================================================
*/

.part-4 {
    height: 1390px;
    background-color: #FFFFFF; /* Overall background is white */
    border-bottom: 5px solid #ccc;
    
    /* Ensure internal content is centered for the top header */
    text-align: center; 
    padding: 0;
}


/*
  ======================================================
  PART 4: CONTENT STYLING
  ======================================================
*/

.section-4-header {
    /* Top padding to space out the content */
    padding: 40px 30px 20px 30px; 
    width: 100%;
}

.section-4-label {
    /* Technology Solution - SemiBold 12px */
    font-family: Pretendard, sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 12px;
    line-height: 140%;
    letter-spacing: -0.25%;
    color: #555; /* Slightly muted color */
    margin-bottom: 5px;
}

.section-4-main-headline {
    /* Tech Offer - Bold 26px */
    padding: 0; 
    color: #000;
    
    font-family: Pretendard, sans-serif;
    font-weight: 700; /* Bold */
    font-size: 26px;
    line-height: 140%;
    letter-spacing: -0.25%;
    text-transform: none; /* Keep capitalization as seen in image */
    margin-bottom: 30px;
}

.section-4-image-block {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 24px;
}

.phone-background-display {
    /* Set dimensions for the div */
    width: 327px;
    height: 519px;
    margin-bottom: 30px; /* Space below the div */
    
    /* Apply phone.png as a background image */
    background-image: url('../public/img/phone.png');
    background-size: contain; /* Ensures the whole image is visible, scales down if needed */
    background-repeat: no-repeat;
    background-position: center center; /* Centers the image within the div */
}

.section-4-text-area-placeholder {
    /* Area reserved for text content below the image */
    width: 100%;
    min-height: 50px; /* Small default height */
    padding: 20px 30px;
    text-align: left;
}

.section-4-subheading {
    /* Pretendard 700 (Bold) for subheadings */
    font-family: Pretendard, sans-serif;
    font-weight: 700; 
    font-size: 18px; /* Slightly larger than body text */
    line-height: 140%;
    color: #000;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* General Paragraph Styling */
.section-4-paragraph {
    /* Pretendard 400 (Regular) for body text */
    font-family: Pretendard, sans-serif;
    font-weight: 400; 
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.25%;
    color: #000;
    margin-bottom: 20px;
}


/*
  ======================================================
  PART 5: STRUCTURAL SETUP (1641px)
  ======================================================
*/

.part-5 {
    height: 1410px;
    background-color: #FFFFFF; /* Overall background is white */
    border-bottom: 5px solid #ccc;
    
    /* Ensure internal content is centered for the top header */
    text-align: center; 
    padding: 0;
}


/*
  ======================================================
  PART 5: CONTENT STYLING
  (Reusing Section 4 styles)
  ======================================================
*/

.section-5-header {
    padding: 40px 30px 20px 30px; 
    width: 100%;
}

.section-5-label {
    /* Technology Solution - SemiBold 12px */
    font-family: Pretendard, sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 12px;
    line-height: 140%;
    letter-spacing: -0.25%;
    color: #555; /* Slightly muted color */
    margin-bottom: 5px;
}

.section-5-main-headline {
    /* Tech Offer - Bold 26px */
    padding: 0; 
    color: #000;
    
    font-family: Pretendard, sans-serif;
    font-weight: 700; /* Bold */
    font-size: 26px;
    line-height: 140%;
    letter-spacing: -0.25%;
    margin-bottom: 30px;
}

.section-5-image-block {
    width: 100%;
    /* Horizontal centering */
    display: flex;
    justify-content: center;
    padding: 0 24px;
}

.phone-background-display-2 {
    /* Set dimensions for the div, reusing the 327x519 size */
    width: 327px;
    height: 519px;
    margin-bottom: 30px; /* Space below the div */
    
    /* Apply phone2.png as a background image */
    background-image: url('../public/img/phone2.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center center; 
}

.section-5-text-area-placeholder {
    /* Area reserved for text content below the image */
    width: 100%;
    min-height: 50px; 
    padding: 20px 30px;
    text-align: left;
}

.section-5-subheading {
    /* Pretendard 700 (Bold) for subheadings, reusing size from S4 */
    font-family: Pretendard, sans-serif;
    font-weight: 700; 
    font-size: 18px; 
    line-height: 140%;
    color: #000;
    margin-top: 30px;
    margin-bottom: 15px; /* Slightly reduced margin for closer pairing with body text */
}

/* General Paragraph Styling */
.section-5-paragraph {
    /* Pretendard 400 (Regular) for body text */
    font-family: Pretendard, sans-serif;
    font-weight: 400; 
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.25%;
    color: #000;
    margin-bottom: 20px;
}




/*
  ======================================================
  PART 6: STRUCTURAL SETUP (989px)
  ======================================================
*/

.part-6 {
    height: 989px;
    background-color: #f2f2f2;
    border-bottom: 5px solid #ccc;
    
    /* Section 6 Background Image */
    background-image: url('../public/img/section6.jpg');
    background-repeat: no-repeat;
    /* FIX: Image covers full height, width scales freely */
    background-size: auto 100%; 
    background-position: center top; 
    
    text-align: center; 
    padding: 0;
}

.section-6-content-wrapper {
    padding: 40px 30px;
}

.section-6-headline {
    /* Reusing general headline styles */
    font-family: Pretendard, sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #000;
    margin-bottom: 20px;
}

.section-6-text {
    font-family: Pretendard, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #333;
}


/*
  ======================================================
  PART 7: STRUCTURAL SETUP (1378px)
  ======================================================
*/

.part-7 {
    /* FIX: Setting fixed height and specific background color */
    height: 1478px;
    background-color: #F2F3F6; 
    border-bottom: 5px solid #ccc;
    
    text-align: center; 
    padding: 0;
}


/*
  ======================================================
  PART 7: CONTENT STYLING (Top Header)
  ======================================================
*/

.section-7-header-wrapper {
    /* Top padding to space out the content from the top edge */
    padding: 80px 30px 40px 30px; 
    width: 100%;
}

.section-7-label {
    /* Reusing SemiBold 14px style for label text */
    font-family: Pretendard, sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.25%;
    color: #333; 
    margin-bottom: 20px;
}

.section-7-main-headline {
    /* Applying Bold style for the main two-line headline */
    padding: 0; 
    color: #000;
    
    font-family: Pretendard, sans-serif;
    font-weight: 700; /* Bold */
    font-size: 30px; /* Large size for emphasis */
    line-height: 120%;
    letter-spacing: -0.25%;
    text-transform: none; 
}

.section-7-header-wrapper {
    /* Top padding to space out the content from the top edge */
    padding: 80px 30px 40px 30px; 
    width: 100%;
}



.brand-logo-7 {
    /* Set to exact dimensions */
    width: 143px; 
    height: 157px;
    
    /* Center the image within the 375px wrapper */
    display: block; 
    margin: 0 auto 50px auto; /* 50px margin below the image */
}

.vision-images-block {
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack images vertically */
    align-items: center;   /* Center images horizontally */
    padding: 20px 0;       /* Vertical spacing for the block */
}

.vision-image-1 {
    width: 281px;
    height: 410px;
    margin-bottom: 30px; /* Space between the two vision images */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    border-radius: 5px; /* Optional: to match visual style */
}

.vision-image-2 {
    width: 320px;
    height: 450px;
    margin-bottom: 50px; /* Space below the second vision image */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 5px; /* Optional: to match visual style */
}


/*
  ======================================================
  PART 8: STRUCTURAL SETUP (1123px)
  ======================================================
*/

.part-8 {
    height: 1223px; /* Adjusted height for current design */
    background-color: #f2f2f2;
    border-bottom: 5px solid #ccc;
    
    /* Background image is not shown in the new screenshot, but we'll keep the full height cover */
    background-image: url('../public/img/back8.jpg');
    background-repeat: no-repeat;
    background-size: auto 100%; 
    background-position: center top; 
    
    text-align: center; 
    padding: 0;
}


/*
  ======================================================
  PART 8: CONTENT STYLING (Icon and Gradient Headline)
  ======================================================
*/

.section-8-header-wrapper {
    /* Adjusted padding to center the content block */
    padding: 80px 30px 40px 30px; 
    width: 100%;
}

.sparkle-icon {
    /* Assuming a small size for the icon */
    width: 30px;
    height: 30px;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.section-8-main-headline {
    /* Main Headline with Gradient Text */
    padding: 0; 
    
    /* 1. Define the Gradient Background */
    background: linear-gradient(
        to right,
        #FF3CAC 0%, /* Pink/Red start */
        #FF6F61 50%, /* Orange/Red middle */
        #2F00FF 100% /* Purple end */
    );
    
    /* 2. Clip the Background to the Text Shape (Crucial for gradient text) */
    -webkit-background-clip: text; /* For Chrome/Safari */
    background-clip: text;
    
    /* 3. Make Text Transparent so Background Shows Through */
    color: transparent;
    
    /* Font Specs (SemiBold 24px) */
    font-family: Pretendard, sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 21px;
    line-height: 140%;
    letter-spacing: -0.6%;
    text-transform: none;
    
    /* Set container size based on screenshot visual (318px wide) */
    width: 318px; 
    margin: 0 auto; 
}

.anomaly-images-block {
    width: 100%;
    /* Stacks and centers the images horizontally */
    display: flex;
    flex-direction: column; 
    align-items: center;   
    padding: 30px 20px; /* Spacing around the entire block */
}

.anomaly-image-1 {
    /* Set to exact dimensions */
    width: 270px;
    height: 193px;
    margin-bottom: 25px; 
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.anomaly-image-2 {
    /* Set to exact dimensions */
    width: 269px;
    height: 211px;
    margin-bottom: 25px; 
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.anomaly-image-3 {
    /* Set to exact dimensions (Phone) */
    width: 233px;
    height: 410px;
    margin-bottom: 25px; 
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.section-8-spacer-placeholder {
    /* Ensures there is dedicated space/height remaining below the phone */
    height: 100px; 
    width: 100%;
}

/*
  ======================================================
  FONT IMPORTS using @font-face
  ======================================================
*/

@font-face {
    font-family: 'Pretendard';
    font-weight: 700; /* Bold */
    font-style: normal;
    src: url('../public/fonts/Pretendard-Bold.woff2') format('woff2'),
         url('../public/fonts/Pretendard-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500; /* Medium */
    font-style: normal;
    src: url('../public/fonts/Pretendard-Medium.woff2') format('woff2'),
         url('../public/fonts/Pretendard-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400; /* Regular */
    font-style: normal;
    src: url('../public/fonts/Pretendard-Regular.woff2') format('woff2'),
         url('../public/fonts/Pretendard-Regular.woff') format('woff');
}


/*
  ======================================================
  BASE STYLES & APP WRAPPER SETUP
  ======================================================
*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', sans-serif; 
}

body {
    background-color: #f5f5f5; 
    display: flex;
    justify-content: center; /* CENTERS the #app-wrapper HORIZONTALLY */
    min-height: 100vh;
}

#app-wrapper { 
    width: 375px; 
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    display: flex;
    flex-direction: column;
}


/*
  ======================================================
  PART 9: STRUCTURAL SETUP (1250px)
  ======================================================
*/

.part-9 {
    height: 1250px;
    background-color: #f2f2f2; 
    border-bottom: 5px solid #ccc;
    
    display: flex;
    flex-direction: column; /* Stack blocks vertically */
    padding: 0;
}


/*
  ======================================================
  BLOCK 9A: Top Text Area (White BG)
  ======================================================
*/

.part-9a-text-area {
    min-height: 550px; 
    height: auto;
    background-color: #FFFFFF; /* White background */
    padding: 30px;
    text-align: left;
}

.part-9a-main-headline {
    font-family: Pretendard, sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #000;
    margin-bottom: 35px;
    margin-top: 40px;
}

.part-9a-sub-headline {
    font-family: Pretendard, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #333;
    margin-bottom: 30px;
}

.part-9a-paragraph {
    font-family: Pretendard, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #000;
    margin-bottom: 20px;
}


/*
  ======================================================
  BLOCK 9B: Bottom Image Area (Custom BG and Image)
  ======================================================
*/

.part-9b-image-area {
    /* Set remaining height */
    height: 700px; 
    width: 100%;
    
    /* Subtle Background Image */
    background-image: url('../public/img/section9back.jpg');
    background-repeat: no-repeat;
    /* FIX: 'cover' ensures the image fills both width and height without distortion */
    background-size: cover; 
    background-position: center center; 

    /* Flexbox to center the large image inside */
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-9-group-image {
    width: 327px;
    height: 700px; 
    display: block;
    margin-top: -32px;
    margin-bottom: 60px;
}

/*
  ======================================================
  PART 10: STRUCTURAL SETUP (785px)
  ======================================================
*/

.part-10 {
    height: 785px;
    background-color: #212121; /* Dark background */
    border-bottom: none; /* Last section, no border needed */
    
    display: flex;
    flex-direction: column; 
    justify-content: space-between; /* Pushes content wrapper to top and copyright to bottom */
    padding: 0;
}

.section-10-content-wrapper {
    width: 100%;
    /* Use a generous top padding and horizontal padding */
    padding: 60px 30px 40px 30px; 
    text-align: center;
    flex-grow: 1; /* Allows this block to take up most of the space */
}


/*
  ======================================================
  PART 10: TEXT AND HEADLINE STYLING
  ======================================================
*/

.section-10-label {
    /* Contact Point */
    font-family: Pretendard, sans-serif;
    font-weight: 400; 
    font-size: 14px;
    color: #9e9e9e; /* Light gray text */
    margin-bottom: 5px;
}

.section-10-main-headline {
    /* Mode of Collaboration */
    padding: 0; 
    color: #FFFFFF;
    
    font-family: Pretendard, sans-serif;
    font-weight: 700; 
    font-size: 26px;
    line-height: 140%;
    margin-bottom: 50px;
}

.collaboration-mode-group {
    margin-bottom: 30px;
}

.collaboration-mode-title {
    /* Bolder Text */
    font-family: Pretendard, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #FFFFFF;
    margin-bottom: 5px;
}

.collaboration-mode-detail {
    /* Sub Text */
    font-family: Pretendard, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #9e9e9e;
}


/*
  ======================================================
  PART 10: BUTTON STYLING
  ======================================================
*/

.demo-button {
    width: 90%;
    max-width: 320px;
    padding: 15px 30px;
    margin-top: 50px;
    margin-bottom: 60px;
    
    background-color: #FFFFFF;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    
    font-family: Pretendard, sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}


/*
  ======================================================
  PART 10: CONTACT LINKS & FOOTER
  ======================================================
*/

.contact-points-block {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    text-align: left;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.contact-icon {
    font-size: 18px;
    color: #FFFFFF;
    margin-right: 15px;
    width: 20px; /* Ensures alignment */
    text-align: center;
}

.contact-link {
    font-family: Pretendard, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none; /* Remove underline */
}

.copyright-footer {
    width: 100%;
    padding: 15px 0;
    text-align: center;
    background-color: #1a1a1a; /* Slightly darker band at the bottom */
    font-family: Pretendard, sans-serif;
    font-size: 10px;
    color: #777;
}

/*
  ======================================================
  PART 11: STRUCTURAL SETUP (Video Section - Auto Height)
  ======================================================
*/

.part-11 {
    /* Auto height ensures the section wraps perfectly around the video */
    height: auto; 
    background-color: #FFFFFF; /* Clean white background */
    border-bottom: none; 
    
    text-align: center; 
    padding: 0;
}

.video-container-wrapper {
    width: 100%;
    padding: 40px 30px;
}

.section-11-headline {
    font-family: Pretendard, sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #000;
    margin-bottom: 30px;
    padding: 0;
}

.video-embed {
    /* Centers the video iframe horizontally */
    display: flex;
    justify-content: center;
    width: 100%;
}

.video-embed iframe {
    /* Set dimensions suitable for the 375px mobile view (327px width is ideal) */
    width: 327px;
    height: 184px; /* Standard 16:9 aspect ratio height for 327px width */
    border: 1px solid #ccc;
    border-radius: 5px;
}

/*
  ======================================================
  FINAL STRUCTURAL HEIGHT ADJUSTMENT
  ======================================================
*/

/* Reset the final structural part (Part 7 in the original plan) to be Part 11 */

.part-7 {
    /* This section (which was originally the auto-height placeholder) 
       is now effectively Part 11, so we remove its padding/border from the template */
    height: auto; 
    padding-bottom: 0; 
    border-bottom: none;
    background-color: #FFFFFF;
}
/* NOTE: We now have sections 1 through 10 with fixed heights, and this final section (11) as auto height.
   You must update the CSS class for the section 7 placeholder at the end of the file to the new .part-11 to match. 
   Alternatively, you can just append the new .part-11 rules.
*/