/*
 * aio-body.css — Sections 3 (statement), 4 (process), 9 (faq)
 * Page: /ai-optimization/   BEM prefix: aio2-
 * Load order: after page-ai-optimization.css (which defines --aio-* tokens and .aio2-ph / .aio2-bleed)
 *
 * Rules:
 *   - Do NOT use background: var() — use background-color: var()
 *   - All other shorthands + var() are fine (border, margin, padding, etc.)
 *   - Every margin declaration is written in full (margin: 0 0 X) to cancel UA top-margin
 *   - border-radius uses var(--aio-radius) where design shows rounding (theme-wide radius = 0, so explicit)
 *   - Spacers from spec: statement Spacer-after = 147px, process Spacer-after = 344px
 */


/* =============================================================
   3. STATEMENT
   ============================================================= */

.aio2-statement {
    padding-bottom: 147px;
}

.aio2-statement__inner {
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aio2-statement__heading {
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 60px;
    line-height: 75px;
    letter-spacing: -1.2px;
    color: var(--on-dark-1);
    text-align: center;
    max-width: 793px;
    margin: 0 0 88px;
}

/* Image is full container width (1200px); spacer-88 above, spacer-104 below */
.aio2-statement__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    margin: 0 0 104px;
}

/* Paragraph: SemiBold large type, muted prefix per line via span.
   The copy carries authored <br>s, so the type has to stay small enough that
   each authored line fits on one rendered line — otherwise every line wraps
   twice and the sentence ends on an orphan ("됩니다." alone, reported
   2026-07-28). The old fixed 55px only fit a full 1200px container, which
   needs a ~1660px window; at 1440 it already spilled to 6 rendered lines.
   Fluid instead: the widest authored line measures 1364px at 55px, so the
   size tracks the container at ~55 x (container / 1364) and caps at 48px. */
.aio2-statement__para {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: clamp(26px, 3.5vw, 48px);
    line-height: 1.27;
    letter-spacing: -0.02em;
    color: var(--on-dark-1);
    text-align: left;
    width: 100%;
    max-width: var(--container);
    margin: 0;
}

/* vw is REAL px and ignores html{zoom:1.25}, while font-size resolves in design
   px — so above 1152px the same vw buys 1.25x more rendered type. Divide the
   coefficient by the zoom (3.5 / 1.25 = 2.8) to keep the ramp continuous across
   the boundary. See wiki/desktop-zoom.md. */
@media (min-width: 1152px) {
    .aio2-statement__para {
        font-size: clamp(26px, 2.8vw, 48px);
    }
}

.aio2-statement__muted {
    color: var(--aio-ink-muted);
}

/* Full-bleed deco (결_sub02_1 1, 1920×910) — .aio2-bleed provides the bleed escape;
   margin-top creates space below the paragraph before the decorative band */
/* .aio2-statement__deco removed — the 결_sub02_1 decoration is not part of this
   section (node 2001:3 sits at y=9100, below the FAQ). It now renders at the end of
   page-ai-seo.php as .aio2-deco-bottom, styled in page-ai-optimization.css. */


/* =============================================================
   4. PROCESS
   ============================================================= */

.aio2-process {
    padding-bottom: 344px;
}

.aio2-process__inner {
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Heading: left-aligned, 3 lines × 55px lh = 165px; spacer-51 below to grid */
.aio2-process__heading {
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 45px;
    line-height: 55px;
    letter-spacing: -0.9px;
    color: var(--on-dark-1);
    text-align: left;
    margin: 0 0 51px;
}

/*
 * Grid: 5 columns × 2 rows
 * column-gap = stride(270) − tile(120) = 150px
 * row-gap    = stride(160) − tile(120) = 40px
 */
/* Tiles are fluid: 5 equal columns fill the 1200px content width instead of
   sitting as 120px squares in 150px of dead gap. */
.aio2-process__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 32px;
    row-gap: 40px;
}

.aio2-process__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Tile: square, sized by the column — .aio2-ph fills with dark placeholder */
.aio2-process__tile {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--aio-radius);
    flex-shrink: 0;
    margin: 0 0 12px;
}

/* Label beneath tile: SemiBold 16px, centered, may wrap */
.aio2-process__label {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.32px;
    color: var(--on-dark-1);
    text-align: center;
    display: block;
    white-space: pre-line;
    margin: 0;
}


/* =============================================================
   9. FAQ (dark variant — static, not accordion-toggled)
   ============================================================= */

.aio2-faq__inner {
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Title block: left-aligned within the full width; gap-52px between title and list */
.aio2-faq__title-block {
    width: 100%;
    text-align: left;
    margin: 0 0 52px;
}

.aio2-faq__title {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -1px;
    color: var(--on-dark-1);
    margin: 0 0 11px;
}

.aio2-faq__subtitle {
    font-family: var(--f-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.36px;
    color: var(--on-dark-1);
    margin: 0;
}

/* List: flex column, gap-30px between items */
.aio2-faq__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Item card: bordered, rounded, padded per spec (pl-41 pr-59 py-42) */
.aio2-faq__item {
    border: 1px solid var(--aio-line-faq);
    border-radius: var(--aio-radius);
    padding-top: 42px;
    padding-right: 59px;
    padding-bottom: 42px;
    padding-left: 41px;
}

/* Q text: SemiBold 24px, design blue */
.aio2-faq__q {
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: -0.48px;
    color: var(--aio-blue);
    margin: 0 0 20px;
}

/* A text: Regular 18px, white, max-width 1100px */
.aio2-faq__a {
    font-family: var(--f-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: -0.36px;
    color: var(--on-dark-1);
    max-width: 1100px;
    margin: 0;
}


/* Authored line breaks in the statement heading. The desktop break sits after
   "내리는"; the 375 mobile frame (740:282) breaks one phrase earlier, after
   "소비자가", and lets the rest wrap naturally into two lines. Each break is
   tagged so the other viewport can switch it off — hiding a <br> with
   display:none is well supported and leaves the surrounding space intact. */
.aio2-statement__br--m { display: none; }


/* =============================================================
   MOBILE  — max-width 768px
   Values read from the Figma 375 mobile frame (node 740:2).
   Content column is 335px inside 20px gutters, matching --gutter's
   20px floor, so every width below lands on the design grid.
   ============================================================= */

@media (max-width: 768px) {

    /* --- statement --- */

    /* 59px from the paragraph's last line to the process heading (740:281 ends
       y=13603, process starts y=13662). */
    .aio2-statement {
        padding-bottom: 60px;
    }

    /* 740:282 — 30/40 Medium, centred, break after "소비자가". */
    .aio2-statement__heading {
        font-size: 30px;
        line-height: 40px;
        letter-spacing: -0.6px;
        max-width: none;
        margin: 0 0 90px;
    }

    .aio2-statement__br--m { display: inline; }
    .aio2-statement__br--d { display: none; }

    /* 740:9 — the clip runs edge to edge on mobile (374.88 wide on a 375 frame)
       at ~16:9, not inset in the gutter like desktop. Negative inline margins
       escape .aio2-statement__inner's padding; the earlier 4:3 centre-crop was a
       guess made before the mobile frame existed. */
    .aio2-statement__img {
        width: calc(100% + var(--gutter) * 2);
        max-width: none;
        margin: 0 calc(var(--gutter) * -1) 50px;
        aspect-ratio: 16 / 9;
        height: auto;
        object-fit: cover;
        object-position: center;
    }

    /* 740:281 — same 30/40 as the heading, but SemiBold and left-aligned.
       Two authored paragraphs here, not the desktop's three: the mobile frame
       runs "현재의 변화에…" straight through to "…경쟁력이 됩니다." and lets it
       wrap, which is why the middle <br> carries the --d class. Keeping it gave
       a 7th line against the design's 6.
       Sized 28/38 rather than the frame's literal 30/40: our Pretendard renders
       a touch wider than Figma's, so 30px still pushed the copy to a 7th line
       holding only "됩니다." — the same trailing orphan the desktop size was made
       fluid to avoid. 28px restores the design's 6 lines. */
    .aio2-statement__para {
        font-size: 28px;
        line-height: 38px;
        letter-spacing: -0.56px;
    }

    /* At 30px in a 335px column both blocks break mid-word without this —
       "넥스트 레/벨을" was splitting across lines. Korean has no hyphenation to
       fall back on, so the break has to land on a word boundary. */
    .aio2-statement__heading,
    .aio2-statement__para {
        word-break: keep-all;
    }

    /* --- process --- */

    /* 740:248 ends y=14793, the Diagnosis stage starts y=14910. */
    .aio2-process {
        padding-bottom: 117px;
    }

    /* 740:280 — 24/28 Medium over three authored lines. */
    .aio2-process__heading {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.48px;
        margin: 0 0 27px;
    }

    /* 740:249 — two fixed 120px tiles, 60px apart, centred in the 335 column
       (stride 180, row stride 212). Fluid 1fr columns would stretch the tiles
       past the design's square and break the 120px label wrap. */
    .aio2-process__grid {
        grid-template-columns: repeat(2, 120px);
        justify-content: center;
        column-gap: 60px;
        row-gap: 40px;
    }

    /* --- faq --- */

    /* 740:18 — the title stack is centred on mobile (frame centre 18666.6
       matches the block's), unlike the left-aligned desktop treatment. */
    .aio2-faq__title-block {
        text-align: center;
        margin: 0 0 39px;
    }

    .aio2-faq__title {
        font-size: 30px;
        line-height: 40px;
        letter-spacing: -0.6px;
        margin: 0 0 4px;
    }

    .aio2-faq__subtitle {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.28px;
    }

    .aio2-faq__list {
        gap: 20px;
    }

    .aio2-faq__item {
        padding-top: 30px;
        padding-right: 20px;
        padding-bottom: 30px;
        padding-left: 20px;
    }

    .aio2-faq__q {
        font-size: 20px;
        line-height: 25px;
        letter-spacing: -0.4px;
        margin: 0 0 15px;
    }

    .aio2-faq__a {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.28px;
    }
}