/* =========================================================
   common.css

   01. Reset
   02. Screen
   03. Shared Content Canvas
   04. Shared Section Layout
   05. Shared Typography
   06. Shared Footer

   07. About
   08. Work Principle
   09. Contents

   10. Responsive
   ========================================================= */


/* =========================================================
   01. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Malgun Gothic",
        Arial,
        sans-serif;

    color: #1d1d1f;
    background: #e9e9e9;

    word-break: keep-all;
}


img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
      02. SCREEN
      ========================================================= */

.screen {
    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        clamp(24px, 4vh, 48px) clamp(32px, 5vw, 80px);

    background: #e9e9e9;
}


/* =========================================================
      03. SHARED CANVAS
   
      cover.css에서 관리하는 cover와 별도로,
      일반 콘텐츠 페이지는 content-section 하나로 통일.
      ========================================================= */

.content-section {
    position: relative;

    width: min(90vw,
            calc(86vh * 16 / 9),
            1440px);

    aspect-ratio: 16 / 9;

    flex: 0 0 auto;

    margin: 0;

    overflow: hidden;

    background: #f3f0e9;

    box-shadow:
        0 18px 48px rgba(15, 23, 42, 0.10);
}


/* =========================================================
      04. SHARED SECTION LAYOUT
      ========================================================= */

.section-top,
.section-bottom {
    width: 100%;
    min-width: 0;
    min-height: 0;
}


.section-intro {
    min-width: 0;
}


.section-bottom {
    position: relative;
}


/* =========================================================
      05. SHARED TYPOGRAPHY
      ========================================================= */

.section-eyebrow {
    margin: 0;

    color: #667180;

    font-size:
        clamp(11px, 0.78vw, 13px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.05em;
}


.section-title {
    margin: 0;

    color: #1d1d1f;

    font-weight: 600;

    line-height: 1.12;

    letter-spacing: -0.045em;

    word-break: keep-all;
}


.section-copy {
    margin: 0;

    color: #59616c;

    font-weight: 400;

    letter-spacing: -0.015em;

    word-break: keep-all;
}


.accent {
    color: #347bd6;
}


/* =========================================================
      06. COMMON FOOTER
      ========================================================= */

.has-page-footer {
    position: relative;
}


.page-footer {
    position: absolute;

    left:
        clamp(62px, 5.2vw, 88px);

    right:
        clamp(62px, 5.2vw, 88px);

    bottom:
        clamp(16px, 1.45vw, 22px);

    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top:
        clamp(9px, 0.75vw, 12px);

    border-top:
        1px solid #dedbd5;

    pointer-events: none;
}


.page-footer-name,
.page-footer-number {
    margin: 0;

    color: #6b7280;

    font-size:
        clamp(9px, 0.62vw, 11px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.015em;
}


.page-footer-number {
    text-align: right;
}


/* =========================================================
      07. ABOUT
      ========================================================= */

.content-section--about {
    display: grid;

    grid-template-rows:
        minmax(0, 63fr) minmax(0, 37fr);
}


/* ---------------------------------------------------------
      ABOUT TOP
      --------------------------------------------------------- */

.section-top--about {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 57fr) minmax(0, 43fr);

    padding:
        0 clamp(62px, 5.2vw, 88px);
}


.section-top--about::after {
    content: "";

    position: absolute;

    left:
        clamp(62px, 5.2vw, 88px);

    right:
        clamp(62px, 5.2vw, 88px);

    bottom: 0;

    height: 1px;

    background: #dedbd5;
}


/* ---------------------------------------------------------
      ABOUT INTRO
      --------------------------------------------------------- */

.section-intro--about {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(24px, 2.2vw, 36px) clamp(22px, 1.9vw, 32px) clamp(24px, 2.2vw, 36px) 0;
}


.section-intro--about .section-eyebrow {
    margin-bottom:
        clamp(20px, 1.7vw, 26px);
}


.section-title--about {
    width: 100%;
    max-width: 760px;

    font-size:
        clamp(44px, 3.45vw, 56px);
}


.section-copy--about {
    margin-top:
        clamp(30px, 2.6vw, 40px);

    width: 100%;
    max-width: 820px;

    color: #505863;

    font-size:
        clamp(17px, 1.28vw, 21px);

    line-height: 1.68;

    letter-spacing: -0.018em;
}


/* ---------------------------------------------------------
      ABOUT VISUAL
      --------------------------------------------------------- */

.about-visual {
    min-width: 0;
    min-height: 0;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding:
        clamp(6px, 0.6vw, 10px) 0 0 clamp(10px, 0.9vw, 16px);
}


.about-visual img {
    width: 118%;
    max-width: 650px;

    height: auto;
    max-height: 100%;

    object-fit: contain;

    transform:
        translateX(4%);

    margin: 0;
}


/* ---------------------------------------------------------
      ABOUT BOTTOM
      --------------------------------------------------------- */

.section-bottom--about {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding:
        clamp(30px, 2.5vw, 40px) clamp(62px, 5.2vw, 88px) clamp(24px, 2vw, 32px);
}


.about-capabilities {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    column-gap:
        clamp(48px, 4.5vw, 76px);
}


.capability {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


.capability h3 {
    margin:
        0 0 clamp(14px, 1.1vw, 18px);

    color: #347bd6;

    font-size:
        clamp(21px, 1.5vw, 25px);

    font-weight: 600;

    line-height: 1.25;

    letter-spacing: -0.02em;
}


.capability p {
    margin: 0;

    color: #555c65;

    font-size:
        clamp(15px, 1.08vw, 18px);

    font-weight: 400;

    line-height: 1.72;

    letter-spacing: -0.015em;
}


/* =========================================================
      08. WORK PRINCIPLE
      ========================================================= */

.content-section--principle {
    display: grid;

    grid-template-rows:
        minmax(0, 36fr) minmax(0, 64fr);
}


/* ---------------------------------------------------------
      PRINCIPLE TOP
      --------------------------------------------------------- */

.section-top--principle {
    display: flex;

    align-items: flex-end;

    padding:
        clamp(42px, 4vw, 64px) clamp(62px, 5.2vw, 88px) clamp(20px, 1.8vw, 28px);
}


.section-intro--principle {
    width: 100%;
}


.section-intro--principle .section-eyebrow {
    margin-bottom:
        clamp(18px, 1.4vw, 22px);
}


.section-title--principle {
    width: 100%;

    font-size:
        clamp(38px, 2.9vw, 48px);

    white-space: nowrap;
}


.section-copy--principle {
    margin-top:
        clamp(20px, 1.7vw, 26px);

    font-size:
        clamp(15px, 1.05vw, 18px);

    line-height: 1.65;
}


/* ---------------------------------------------------------
      PRINCIPLE BOTTOM
      --------------------------------------------------------- */

.section-bottom--principle {
    display: flex;

    align-items: flex-start;
    justify-content: center;

    padding:
        clamp(18px, 1.5vw, 24px) clamp(62px, 5.2vw, 88px) clamp(46px, 3.8vw, 62px);
}


/* ---------------------------------------------------------
      WORK FLOW
      --------------------------------------------------------- */

.work-flow {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);

    column-gap:
        clamp(14px, 1.45vw, 24px);

    align-items: center;
}


.work-flow-card {
    min-width: 0;

    min-height:
        clamp(310px, 27vw, 365px);

    display: flex;
    flex-direction: column;

    padding:
        clamp(24px, 2vw, 30px) clamp(17px, 1.35vw, 22px);

    border:
        1px solid #d9dde3;

    border-radius: 3px;

    background: #f3f0e9;

    text-align: left;
}


.work-flow-number {
    margin: 0;

    color: #8bbcf3;

    font-size:
        clamp(48px, 4vw, 64px);

    font-weight: 300;

    line-height: 0.95;

    letter-spacing: -0.045em;
}


.work-flow-action {
    margin:
        clamp(16px, 1.3vw, 20px) 0 0;

    color: #347bd6;

    font-size:
        clamp(11px, 0.78vw, 13px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.035em;
}


.work-flow-card h3 {
    margin:
        clamp(11px, 0.9vw, 14px) 0 0;

    color: #1d1d1f;

    font-size:
        clamp(23px, 1.72vw, 29px);

    font-weight: 600;

    line-height: 1.25;

    letter-spacing: -0.035em;
}


.work-flow-tags {
    margin:
        clamp(17px, 1.35vw, 21px) 0 0;

    padding-bottom:
        clamp(17px, 1.35vw, 21px);

    border-bottom:
        1px solid #e5e7eb;

    color: #69717c;

    font-size:
        clamp(11px, 0.78vw, 13px);

    font-weight: 400;

    line-height: 1.5;

    letter-spacing: -0.01em;
}


.work-flow-description {
    margin:
        clamp(18px, 1.5vw, 23px) 0 0;

    color: #4f5660;

    font-size:
        clamp(17px, 1.5vw, 19px);

    font-weight: 400;

    line-height: 1.68;

    letter-spacing: -0.015em;
}


.work-flow-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    color: #347bd6;

    font-size:
        clamp(24px, 1.9vw, 30px);

    font-weight: 300;

    line-height: 1;
}


/* =========================================================
      09. CONTENTS
      ========================================================= */

.content-section--contents {
    display: grid;

    grid-template-rows:
        auto minmax(0, 1fr);

    padding:
        clamp(54px, 4.6vw, 72px) clamp(62px, 5.2vw, 88px) clamp(60px, 5vw, 78px);
}


/* ---------------------------------------------------------
      CONTENTS TOP
      --------------------------------------------------------- */

.section-top--contents {
    width: 100%;

    margin-bottom:
        clamp(28px, 2.4vw, 38px);
}


.section-intro--contents .section-eyebrow {
    margin-bottom:
        clamp(16px, 1.3vw, 20px);
}


.section-title--contents {
    font-size:
        clamp(31px, 2.4vw, 39px);

    line-height: 1.25;

    letter-spacing: -0.04em;
}


/* ---------------------------------------------------------
      CONTENTS BOTTOM
      --------------------------------------------------------- */

.section-bottom--contents {
    min-height: 0;
}


/* ---------------------------------------------------------
      CONTENTS GRID
      --------------------------------------------------------- */

.contents-grid {
    width: 100%;
    height: 100%;
    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;
}


/* ---------------------------------------------------------
      CONTENTS COLUMN
      --------------------------------------------------------- */

.contents-column {
    min-width: 0;

    padding:
        0 clamp(22px, 1.8vw, 30px);
}


.contents-column:first-child {
    padding-left: 0;
}


.contents-column:last-child {
    padding-right: 0;
}


.contents-column+.contents-column {
    border-left:
        1px solid #e2e4e8;
}


/* ---------------------------------------------------------
      COLUMN HEADER
      --------------------------------------------------------- */

.contents-column-header {
    min-height:
        clamp(64px, 5.2vw, 80px);

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding-bottom:
        clamp(14px, 1.15vw, 18px);

    border-bottom:
        1px solid #78afea;
}


.contents-category {
    min-width: 0;

    display: flex;

    align-items: flex-start;

    gap:
        clamp(12px, 1vw, 16px);
}


.contents-category-number {
    flex: 0 0 auto;

    color: #8bbcf3;

    font-size:
        clamp(42px, 3.35vw, 54px);

    font-weight: 300;

    line-height: 0.9;

    letter-spacing: -0.05em;
}


.contents-category-info {
    min-width: 0;
}


.contents-category-info h3 {
    margin:
        1px 0 5px;

    color: #1d1d1f;

    font-size:
        clamp(15px, 1.05vw, 18px);

    font-weight: 700;

    line-height: 1.2;
}


.contents-category-info p {
    margin: 0;

    color: #707782;

    font-size:
        clamp(9px, 0.67vw, 11px);

    font-weight: 400;

    line-height: 1.35;

    white-space: nowrap;
}


.contents-project-count {
    flex: 0 0 auto;

    margin: 0;

    color: #347bd6;

    font-size:
        clamp(9px, 0.62vw, 11px);

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;
}


/* ---------------------------------------------------------
      PROJECT GROUP
      --------------------------------------------------------- */

.contents-project-list,
.contents-group {
    width: 100%;
}


.contents-group+.contents-group {
    margin-top:
        clamp(18px, 1.45vw, 24px);
}


.contents-group-label {
    margin:
        clamp(14px, 1.1vw, 18px) 0 0;

    padding-bottom:
        clamp(9px, 0.7vw, 12px);

    border-bottom:
        1px solid #78afea;

    color: #347bd6;

    font-size:
        clamp(9px, 0.66vw, 11px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.01em;
}


/* ---------------------------------------------------------
      PROJECT ROW
      --------------------------------------------------------- */

.contents-project {
    width: 100%;
    min-width: 0;

    display: grid;

    grid-template-columns:
        clamp(24px, 2vw, 34px) minmax(0, 1fr) 18px;

    align-items: center;

    column-gap:
        clamp(9px, 0.75vw, 12px);

    min-height:
        clamp(48px, 4vw, 60px);

    padding:
        clamp(9px, 0.72vw, 12px) 0;

    border-bottom:
        1px solid #e5e7eb;

    transition:
        transform 160ms ease;
}


.contents-project:hover {
    transform:
        translateX(3px);
}


.contents-project-number {
    color: #347bd6;

    font-size:
        clamp(13px, 0.95vw, 16px);

    font-weight: 500;

    line-height: 1;
}


.contents-project-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.contents-project-info strong {
    overflow: hidden;

    color: #1d1d1f;

    font-size:
        clamp(12px, 0.88vw, 15px);

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: -0.02em;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.contents-project-info span {
    overflow: hidden;

    color: #737a84;

    font-size:
        clamp(9px, 0.67vw, 11px);

    font-weight: 400;

    line-height: 1.35;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.contents-project-arrow {
    justify-self: end;

    color: #347bd6;

    font-size:
        clamp(17px, 1.25vw, 21px);

    font-weight: 300;

    line-height: 1;
}


/* =========================================================
      10. SMALLER DESKTOP
      ========================================================= */

@media (max-width: 1280px) {

    .content-section {
        width: min(92vw,
                calc(84vh * 16 / 9));
    }


    /* ABOUT */

    .section-top--about {
        grid-template-columns:
            minmax(0, 58fr) minmax(0, 42fr);
    }


    .section-title--about {
        font-size:
            clamp(38px, 3.35vw, 48px);
    }


    .section-copy--about {
        max-width: 740px;

        font-size:
            clamp(15px, 1.14vw, 18px);
    }


    .about-visual img {
        width: 116%;
        max-width: 570px;
    }


    .capability h3 {
        font-size:
            clamp(19px, 1.45vw, 23px);
    }


    .capability p {
        font-size:
            clamp(14px, 1.05vw, 17px);
    }


    /* PRINCIPLE */

    .section-title--principle {
        font-size:
            clamp(32px, 2.75vw, 41px);
    }


    .section-copy--principle {
        font-size:
            clamp(14px, 1vw, 16px);
    }


    .work-flow {
        column-gap: 12px;
    }


    .work-flow-card {
        min-height: 290px;

        padding:
            22px 16px;
    }


    .work-flow-number {
        font-size: 50px;
    }


    .work-flow-card h3 {
        font-size: 21px;
    }


    .work-flow-description {
        font-size:
            clamp(15px, 1.2vw, 17px);
    }


    /* CONTENTS */

    .content-section--contents {
        padding:
            46px 52px 58px;
    }


    .section-title--contents {
        font-size:
            clamp(27px, 2.25vw, 34px);
    }


    .contents-column {
        padding:
            0 18px;
    }


    .contents-column:first-child {
        padding-left: 0;
    }


    .contents-column:last-child {
        padding-right: 0;
    }


    /* FOOTER */

    .page-footer {
        left:
            clamp(48px, 4.5vw, 72px);

        right:
            clamp(48px, 4.5vw, 72px);
    }
}


/* =========================================================
      11. LOW HEIGHT
      ========================================================= */

@media (max-height: 760px) {

    .screen {
        padding-top: 24px;
        padding-bottom: 24px;
    }


    .content-section {
        width: min(90vw,
                calc(88vh * 16 / 9));
    }


    /* PRINCIPLE */

    .content-section--principle {
        grid-template-rows:
            minmax(0, 35fr) minmax(0, 65fr);
    }


    .section-top--principle {
        padding-top: 30px;
        padding-bottom: 14px;
    }


    .section-title--principle {
        font-size:
            clamp(30px, 2.6vw, 38px);
    }


    .section-copy--principle {
        margin-top: 15px;

        font-size:
            clamp(13px, 0.95vw, 15px);
    }


    .section-bottom--principle {
        padding-top: 8px;
        padding-bottom: 32px;
    }


    .work-flow-card {
        min-height: 265px;
    }


    .work-flow-description {
        margin-top: 14px;

        font-size:
            clamp(14px, 1.1vw, 16px);
    }


    /* CONTENTS */

    .content-section--contents {
        padding:
            38px 52px 52px;
    }


    .section-top--contents {
        margin-bottom: 20px;
    }


    .section-title--contents {
        font-size:
            clamp(25px, 2.15vw, 32px);
    }


    .contents-project {
        min-height: 43px;

        padding:
            7px 0;
    }


    /* FOOTER */

    .page-footer {
        bottom: 14px;

        padding-top: 8px;
    }
}


/* =========================================================
      12. TABLET
      ========================================================= */

@media (max-width: 900px) {

    .content-section {
        aspect-ratio: auto;
    }


    /* ABOUT */

    .content-section--about {
        grid-template-rows:
            auto auto;
    }


    .section-top--about {
        grid-template-columns:
            minmax(0, 60fr) minmax(0, 40fr);

        padding:
            32px 30px 0;
    }


    .section-title--about {
        font-size:
            clamp(28px, 4vw, 38px);
    }


    .section-copy--about {
        margin-top: 22px;

        font-size:
            clamp(13px, 1.8vw, 16px);
    }


    .section-bottom--about {
        padding:
            24px 30px 28px;
    }


    /* PRINCIPLE */

    .content-section--principle {
        grid-template-rows:
            auto auto;
    }


    .section-top--principle {
        padding:
            42px 30px 26px;
    }


    .section-title--principle {
        font-size:
            clamp(26px, 3.5vw, 34px);

        white-space: normal;
    }


    .section-bottom--principle {
        padding:
            18px 30px 42px;
    }


    .work-flow {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        column-gap: 14px;
    }


    .work-flow-arrow {
        display: none;
    }


    /* CONTENTS */

    .content-section--contents {
        padding:
            38px 30px 60px;
    }


    .contents-grid {
        grid-template-columns: 1fr;

        row-gap: 34px;
    }


    .contents-column {
        padding: 0;

        border-left: 0 !important;
    }


    /* FOOTER */

    .page-footer {
        left: 30px;
        right: 30px;
    }
}


/* =========================================================
      13. MOBILE
      ========================================================= */

@media (max-width: 640px) {

    .screen {
        padding: 16px;
    }


    .content-section {
        width: 96vw;

        box-shadow:
            0 10px 28px rgba(15, 23, 42, 0.10);
    }


    /* ABOUT */

    .section-top--about {
        grid-template-columns: 1fr;

        padding:
            26px 22px 0;
    }


    .section-intro--about {
        padding:
            0 0 24px;
    }


    .section-title--about {
        font-size:
            clamp(27px, 7vw, 36px);
    }


    .section-copy--about {
        margin-top: 20px;

        font-size: 14px;
    }


    .about-visual {
        padding:
            18px 0 0;
    }


    .about-visual img {
        width:
            min(88%, 390px);

        max-width: 390px;

        transform: none;
    }


    .section-bottom--about {
        padding:
            24px 22px 52px;
    }


    .about-capabilities {
        grid-template-columns: 1fr;

        row-gap: 28px;
    }


    /* PRINCIPLE */

    .section-top--principle {
        padding:
            34px 22px 24px;
    }


    .section-title--principle {
        font-size:
            clamp(25px, 6.5vw, 34px);

        white-space: normal;
    }


    .section-copy--principle {
        margin-top: 16px;

        font-size: 13px;
    }


    .section-bottom--principle {
        padding:
            10px 22px 58px;
    }


    .work-flow {
        grid-template-columns: 1fr;

        row-gap: 18px;
    }


    .work-flow-card {
        min-height: 0;

        padding:
            22px 20px;
    }


    .work-flow-arrow {
        display: none;
    }


    /* CONTENTS */

    .content-section--contents {
        padding:
            32px 22px 58px;
    }


    .section-title--contents {
        font-size:
            clamp(24px, 6.5vw, 32px);
    }


    .contents-grid {
        grid-template-columns: 1fr;

        row-gap: 32px;
    }


    .contents-column {
        padding: 0;

        border-left: 0 !important;
    }


    /* FOOTER */

    .page-footer {
        left: 22px;
        right: 22px;

        bottom: 14px;
    }


    .page-footer-name,
    .page-footer-number {
        font-size: 9px;
    }
}

/* =========================================================
   14. iTeach PROJECT
   slide-6 ~ slide-8

   - slide-6 : Project Overview
   - slide-7 : Feature Overview
   - slide-8 : Technical Decision

   기존 slide-1 ~ slide-5 스타일은 변경하지 않는다.
   ========================================================= */


/* =========================================================
   14-1. iTeach SHARED
   ========================================================= */

.content-section--iteach,
.content-section--iteach-feature,
.content-section--iteach-decision {
    display: grid;

    background: #f3f0e9;
}

.section-top--iteach,
.section-top--iteach-feature,
.section-top--iteach-decision {
    width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;
    align-items: flex-end;

    padding-left: clamp(62px, 5.2vw, 88px);
    padding-right: clamp(62px, 5.2vw, 88px);
}

.section-intro--iteach,
.section-intro--iteach-feature,
.section-intro--iteach-decision {
    width: 100%;
    min-width: 0;
}

.section-intro--iteach .section-eyebrow,
.section-intro--iteach-feature .section-eyebrow,
.section-intro--iteach-decision .section-eyebrow {
    margin-bottom: clamp(16px, 1.25vw, 20px);
}

.section-title--iteach,
.section-title--iteach-feature,
.section-title--iteach-decision {
    width: 100%;

    font-size: clamp(34px, 2.7vw, 44px);
    line-height: 1.14;
    letter-spacing: -0.045em;
}

.section-copy--iteach,
.section-copy--iteach-feature,
.section-copy--iteach-decision {
    margin-top: clamp(17px, 1.4vw, 22px);

    max-width: 980px;

    color: #59616c;

    font-size: clamp(14px, 1.02vw, 17px);
    line-height: 1.62;
}


/* =========================================================
   15. slide-6 · iTeach PROJECT OVERVIEW
   ========================================================= */

.content-section--iteach {
    grid-template-rows:
        minmax(0, 32fr) minmax(0, 68fr);
}


/* ---------------------------------------------------------
   slide-6 TOP
   --------------------------------------------------------- */

.section-top--iteach {
    padding-top: clamp(42px, 3.8vw, 60px);
    padding-bottom: clamp(18px, 1.5vw, 24px);
}

.section-title--iteach {
    max-width: 1050px;
}

.section-copy--iteach {
    max-width: 1040px;
}


/* ---------------------------------------------------------
   slide-6 BOTTOM

   LEFT  : service flow + metrics
   RIGHT : my role
   --------------------------------------------------------- */

.section-bottom--iteach {
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 2.15fr) minmax(250px, 0.85fr);

    grid-template-rows:
        auto auto;

    align-content: start;

    column-gap: clamp(24px, 2.2vw, 34px);
    row-gap: clamp(16px, 1.35vw, 22px);

    padding:
        clamp(24px, 2vw, 32px) clamp(62px, 5.2vw, 88px) clamp(64px, 5.2vw, 78px);
}


/* ---------------------------------------------------------
   slide-6 FLOW
   --------------------------------------------------------- */

.iteach-flow {
    grid-column: 1;
    grid-row: 1;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);

    align-items: center;

    column-gap: clamp(8px, 0.7vw, 12px);

    position: relative;

    min-height: clamp(116px, 9.5vw, 144px);

    padding:
        clamp(42px, 3.2vw, 50px) clamp(18px, 1.5vw, 24px) clamp(20px, 1.55vw, 24px);

    border: 1px solid #d4d8dd;
    border-radius: 4px;

    background: rgba(255, 255, 255, 0.22);
}

.iteach-flow::before {
    content: "SERVICE FLOW";

    position: absolute;
    top: clamp(15px, 1.15vw, 18px);
    left: clamp(18px, 1.5vw, 24px);

    color: #667180;

    font-size: clamp(9px, 0.68vw, 11px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.06em;
}

.iteach-flow-item {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: clamp(54px, 4.5vw, 68px);

    padding:
        10px clamp(9px, 0.8vw, 13px);

    border: 1px solid #a9c9eb;
    border-radius: 3px;

    background: #e7edf2;

    color: #25313d;

    font-size: clamp(14px, 1.05vw, 17px);
    font-weight: 600;

    line-height: 1.3;

    text-align: center;
}

.iteach-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #347bd6;

    font-size: clamp(20px, 1.5vw, 25px);
    font-weight: 300;

    line-height: 1;
}


/* ---------------------------------------------------------
   slide-6 METRICS
   --------------------------------------------------------- */

.iteach-metrics {
    grid-column: 1;
    grid-row: 2;

    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: clamp(14px, 1.2vw, 18px);
}

.iteach-metric {
    min-width: 0;
    min-height: clamp(104px, 8.2vw, 124px);

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(16px, 1.3vw, 20px) clamp(18px, 1.5vw, 24px);

    border-top: 2px solid #347bd6;
    border-bottom: 1px solid #d7d9db;

    background: rgba(255, 255, 255, 0.16);
}

.iteach-metric strong {
    display: block;

    color: #347bd6;

    font-size: clamp(38px, 3.1vw, 50px);
    font-weight: 500;

    line-height: 0.95;
    letter-spacing: -0.045em;
}

.iteach-metric span {
    display: block;

    margin-top: clamp(10px, 0.8vw, 13px);

    color: #59616c;

    font-size: clamp(12px, 0.9vw, 15px);
    font-weight: 500;

    line-height: 1.3;
}


/* ---------------------------------------------------------
   slide-6 MY ROLE
   --------------------------------------------------------- */

.iteach-role {
    grid-column: 2;
    grid-row: 1 / 3;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    padding:
        clamp(26px, 2.2vw, 34px) clamp(24px, 2vw, 30px);

    border-radius: 4px;

    background: #dce8f2;
}

.iteach-role-label {
    margin: 0;

    color: #347bd6;

    font-size: clamp(10px, 0.72vw, 12px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.05em;
}

.iteach-role h3 {
    margin:
        clamp(20px, 1.6vw, 26px) 0 0;

    color: #1d2732;

    font-size: clamp(24px, 1.8vw, 30px);
    font-weight: 600;

    line-height: 1.24;
    letter-spacing: -0.035em;
}

.iteach-role>p:last-child {
    margin:
        clamp(34px, 2.8vw, 44px) 0 0;

    color: #46525e;

    font-size: clamp(14px, 1.02vw, 17px);
    font-weight: 400;

    line-height: 1.9;
    letter-spacing: -0.015em;
}


/* =========================================================
   16. slide-7 · iTeach FEATURE
   ========================================================= */

.content-section--iteach-feature {
    grid-template-rows:
        minmax(0, 31fr) minmax(0, 69fr);
}


/* ---------------------------------------------------------
   slide-7 TOP
   --------------------------------------------------------- */

.section-top--iteach-feature {
    padding-top: clamp(38px, 3.5vw, 56px);
    padding-bottom: clamp(14px, 1.2vw, 20px);
}

.section-title--iteach-feature {
    max-width: 1100px;
}


/* ---------------------------------------------------------
   slide-7 BOTTOM
   --------------------------------------------------------- */

.section-bottom--iteach-feature {
    min-height: 0;

    display: flex;
    align-items: stretch;

    padding:
        clamp(10px, 0.8vw, 14px) clamp(62px, 5.2vw, 88px) clamp(64px, 5.2vw, 78px);
}

.iteach-feature-grid {
    width: 100%;
    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: clamp(18px, 1.6vw, 26px);
}


/* ---------------------------------------------------------
   slide-7 FEATURE CARD
   --------------------------------------------------------- */

.iteach-feature-card {
    position: relative;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    padding:
        clamp(23px, 1.9vw, 30px) clamp(21px, 1.7vw, 27px) clamp(20px, 1.7vw, 27px);

    border: 1px solid #d4d8dd;
    border-top: 3px solid #347bd6;
    border-radius: 4px;

    background: rgba(255, 255, 255, 0.18);
}

.iteach-feature-number {
    margin: 0;

    color: #9abde4;

    font-size: clamp(38px, 3vw, 48px);
    font-weight: 300;

    line-height: 0.9;
    letter-spacing: -0.045em;
}

.iteach-feature-category {
    margin:
        clamp(16px, 1.25vw, 20px) 0 0;

    color: #347bd6;

    font-size: clamp(10px, 0.72vw, 12px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.045em;
}

.iteach-feature-title {
    margin:
        clamp(10px, 0.8vw, 13px) 0 0;

    color: #1d2732;

    font-size: clamp(22px, 1.7vw, 28px);
    font-weight: 600;

    line-height: 1.25;
    letter-spacing: -0.035em;
}

.iteach-feature-list {
    margin:
        clamp(20px, 1.6vw, 25px) 0 0;

    padding: 0;

    list-style: none;
}

.iteach-feature-list li {
    position: relative;

    margin: 0;

    padding:
        clamp(7px, 0.55vw, 9px) 0 clamp(7px, 0.55vw, 9px) 17px;

    border-bottom: 1px solid rgba(105, 113, 124, 0.18);

    color: #4f5862;

    font-size: clamp(12px, 0.88vw, 15px);
    font-weight: 400;

    line-height: 1.35;
}

.iteach-feature-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #347bd6;

    transform: translateY(-50%);
}

.iteach-feature-result {
    margin:
        auto 0 0;

    padding-top: clamp(18px, 1.4vw, 22px);

    color: #25313d;

    font-size: clamp(13px, 0.95vw, 16px);
    font-weight: 600;

    line-height: 1.55;
    letter-spacing: -0.02em;
}

.iteach-feature-result::before {
    content: "RESULT";

    display: block;

    margin-bottom: 8px;

    color: #347bd6;

    font-size: 9px;
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.06em;
}


/* =========================================================
   17. slide-8 · iTeach TECHNICAL DECISION
   ========================================================= */

.content-section--iteach-decision {
    grid-template-rows:
        minmax(0, 31fr) minmax(0, 69fr);
}


/* ---------------------------------------------------------
   slide-8 TOP
   --------------------------------------------------------- */

.section-top--iteach-decision {
    padding-top: clamp(38px, 3.5vw, 56px);
    padding-bottom: clamp(14px, 1.15vw, 19px);
}

.section-title--iteach-decision {
    max-width: 1120px;
}


/* ---------------------------------------------------------
   slide-8 BOTTOM
   --------------------------------------------------------- */

.section-bottom--iteach-decision {
    min-height: 0;

    display: grid;

    grid-template-rows:
        minmax(0, 1fr) auto;

    row-gap: clamp(15px, 1.25vw, 20px);

    padding:
        clamp(8px, 0.65vw, 12px) clamp(62px, 5.2vw, 88px) clamp(62px, 5vw, 76px);
}

.iteach-decision-layout {
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 2.25fr) minmax(260px, 0.75fr);

    gap: clamp(22px, 1.8vw, 30px);
}


/* ---------------------------------------------------------
   slide-8 DECISION TABLE
   --------------------------------------------------------- */

.iteach-decision-table {
    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-rows:
        repeat(4, minmax(0, 1fr));

    border-top: 1px solid #bcc3ca;
}

.iteach-decision-row {
    min-width: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.88fr);

    align-items: stretch;

    border-bottom: 1px solid #d2d6da;
}

.iteach-decision-problem,
.iteach-decision-choice,
.iteach-decision-outcome {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(10px, 0.8vw, 13px) clamp(14px, 1.05vw, 17px);
}

.iteach-decision-problem {
    position: relative;

    padding-left: clamp(42px, 3.3vw, 52px);

    background: rgba(34, 46, 60, 0.035);
}

.iteach-decision-choice {
    border-left: 1px solid #d7dadd;

    background: #e4eaf0;
}

.iteach-decision-outcome {
    border-left: 1px solid #d7dadd;

    background: rgba(52, 123, 214, 0.07);
}

.iteach-decision-number {
    position: absolute;

    left: clamp(14px, 1.05vw, 17px);
    top: 50%;

    color: #8fb8e4;

    font-size: clamp(18px, 1.35vw, 22px);
    font-weight: 400;

    line-height: 1;

    transform: translateY(-50%);
}

.iteach-decision-problem strong {
    color: #26313c;

    font-size: clamp(13px, 0.98vw, 16px);
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: -0.02em;
}

.iteach-decision-label {
    margin: 0;

    color: #347bd6;

    font-size: clamp(9px, 0.62vw, 10px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.05em;
}

.iteach-decision-choice>p:last-child,
.iteach-decision-outcome>p:last-child {
    margin:
        clamp(6px, 0.48vw, 8px) 0 0;

    color: #3f4a55;

    font-size: clamp(12px, 0.88vw, 15px);
    font-weight: 500;

    line-height: 1.42;
    letter-spacing: -0.015em;
}


/* ---------------------------------------------------------
   slide-8 TAKEAWAY
   --------------------------------------------------------- */

.iteach-takeaway {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    padding:
        clamp(24px, 2vw, 31px) clamp(22px, 1.8vw, 28px);

    border-radius: 4px;

    background: #1c2a3b;
}

.iteach-takeaway-label {
    margin: 0;

    color: #79b8ef;

    font-size: clamp(9px, 0.66vw, 11px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.055em;
}

.iteach-takeaway-title {
    margin:
        clamp(22px, 1.8vw, 28px) 0 0;

    padding: 0;

    color: #f3f0e9;

    font-size: clamp(20px, 1.55vw, 25px);
    font-weight: 500;

    line-height: 1.52;
    letter-spacing: -0.035em;
}

.iteach-takeaway-title .accent {
    color: #75b9f2;
}

.iteach-takeaway-skills {
    margin-top: auto;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.iteach-takeaway-skills span {
    display: inline-flex;
    align-items: center;

    min-height: 26px;

    padding:
        5px 9px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;

    color: rgba(255, 255, 255, 0.76);

    font-size: clamp(9px, 0.65vw, 11px);
    font-weight: 400;

    line-height: 1;
}


/* ---------------------------------------------------------
   slide-8 CLOSING
   --------------------------------------------------------- */

.iteach-decision-closing {
    margin: 0;

    padding-top: clamp(12px, 0.9vw, 15px);

    border-top: 1px solid #d0d4d8;

    color: #59616c;

    font-size: clamp(11px, 0.82vw, 14px);
    font-weight: 400;

    line-height: 1.5;
    letter-spacing: -0.01em;
}


/* =========================================================
   18. iTeach RESPONSIVE · SMALLER DESKTOP
   ========================================================= */

@media (max-width: 1280px) {

    .section-title--iteach,
    .section-title--iteach-feature,
    .section-title--iteach-decision {
        font-size: clamp(30px, 2.55vw, 38px);
    }

    .section-copy--iteach,
    .section-copy--iteach-feature,
    .section-copy--iteach-decision {
        font-size: clamp(13px, 0.95vw, 15px);
    }

    .section-bottom--iteach {
        grid-template-columns:
            minmax(0, 2fr) minmax(225px, 0.82fr);

        column-gap: 22px;
    }

    .iteach-flow {
        padding: 16px;
    }

    .iteach-flow-item {
        font-size: 13px;
    }

    .iteach-metric strong {
        font-size: 38px;
    }

    .iteach-role h3 {
        font-size: 23px;
    }

    .iteach-role>p:last-child {
        font-size: 13px;
    }

    .iteach-feature-grid {
        gap: 16px;
    }

    .iteach-feature-card {
        padding:
            20px 18px;
    }

    .iteach-feature-title {
        font-size: 21px;
    }

    .iteach-feature-list li {
        font-size: 12px;
    }

    .iteach-feature-result {
        font-size: 12px;
    }

    .iteach-decision-layout {
        grid-template-columns:
            minmax(0, 2.1fr) minmax(225px, 0.78fr);

        gap: 20px;
    }

    .iteach-decision-problem strong,
    .iteach-decision-choice>p:last-child,
    .iteach-decision-outcome>p:last-child {
        font-size: 12px;
    }

    .iteach-takeaway-title {
        font-size: 19px;
    }
}


/* =========================================================
   19. iTeach RESPONSIVE · LOW HEIGHT
   ========================================================= */

@media (max-height: 760px) {

    .section-top--iteach,
    .section-top--iteach-feature,
    .section-top--iteach-decision {
        padding-top: 28px;
        padding-bottom: 10px;
    }

    .section-intro--iteach .section-eyebrow,
    .section-intro--iteach-feature .section-eyebrow,
    .section-intro--iteach-decision .section-eyebrow {
        margin-bottom: 11px;
    }

    .section-title--iteach,
    .section-title--iteach-feature,
    .section-title--iteach-decision {
        font-size: clamp(27px, 2.35vw, 34px);
    }

    .section-copy--iteach,
    .section-copy--iteach-feature,
    .section-copy--iteach-decision {
        margin-top: 11px;

        font-size: clamp(12px, 0.9vw, 14px);
    }

    .section-bottom--iteach,
    .section-bottom--iteach-feature,
    .section-bottom--iteach-decision {
        padding-bottom: 48px;
    }

    .section-bottom--iteach {
        row-gap: 12px;
        padding-top: 18px;
    }

    .iteach-flow {
        min-height: 96px;
        padding: 34px 14px 14px;
    }

    .iteach-flow-item {
        min-height: 44px;

        font-size: 12px;
    }

    .iteach-metric {
        min-height: 88px;
        padding: 12px 15px;
    }

    .iteach-metric strong {
        font-size: 32px;
    }

    .iteach-role {
        padding: 20px;
    }

    .iteach-role h3 {
        margin-top: 14px;

        font-size: 20px;
    }

    .iteach-role>p:last-child {
        font-size: 12px;
        line-height: 1.72;
    }

    .iteach-feature-card {
        padding: 17px;
    }

    .iteach-feature-number {
        font-size: 34px;
    }

    .iteach-feature-category {
        margin-top: 11px;
    }

    .iteach-feature-title {
        margin-top: 7px;

        font-size: 19px;
    }

    .iteach-feature-list {
        margin-top: 13px;
    }

    .iteach-feature-list li {
        padding-top: 5px;
        padding-bottom: 5px;

        font-size: 11px;
    }

    .iteach-feature-result {
        padding-top: 11px;

        font-size: 11px;
    }

    .section-bottom--iteach-decision {
        row-gap: 10px;
    }

    .iteach-decision-layout {
        gap: 16px;
    }

    .iteach-decision-problem,
    .iteach-decision-choice,
    .iteach-decision-outcome {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .iteach-takeaway {
        padding: 18px;
    }

    .iteach-takeaway-title {
        margin-top: 15px;

        font-size: 17px;
        line-height: 1.42;
    }

    .iteach-takeaway-skills span {
        min-height: 22px;

        padding: 4px 7px;

        font-size: 9px;
    }

    .iteach-decision-closing {
        padding-top: 8px;

        font-size: 11px;
    }
}


/* =========================================================
   20. iTeach RESPONSIVE · TABLET
   ========================================================= */

@media (max-width: 900px) {

    .content-section--iteach,
    .content-section--iteach-feature,
    .content-section--iteach-decision {
        grid-template-rows:
            auto auto;
    }

    .section-top--iteach,
    .section-top--iteach-feature,
    .section-top--iteach-decision {
        padding:
            38px 30px 22px;
    }

    .section-title--iteach,
    .section-title--iteach-feature,
    .section-title--iteach-decision {
        font-size: clamp(27px, 3.6vw, 34px);
    }

    .section-bottom--iteach {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;

        row-gap: 20px;

        padding:
            12px 30px 62px;
    }

    .iteach-flow,
    .iteach-metrics,
    .iteach-role {
        grid-column: 1;
    }

    .iteach-flow {
        grid-row: 1;
    }

    .iteach-metrics {
        grid-row: 2;
    }

    .iteach-role {
        grid-row: 3;
    }

    .iteach-role>p:last-child {
        margin-top: 22px;
    }

    .section-bottom--iteach-feature {
        padding:
            12px 30px 62px;
    }

    .iteach-feature-grid {
        grid-template-columns: 1fr;

        row-gap: 18px;
    }

    .iteach-feature-card {
        min-height: 0;
    }

    .section-bottom--iteach-decision {
        padding:
            10px 30px 62px;
    }

    .iteach-decision-layout {
        grid-template-columns: 1fr;

        row-gap: 20px;
    }

    .iteach-takeaway {
        min-height: 250px;
    }
}


/* =========================================================
   21. iTeach RESPONSIVE · MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .section-top--iteach,
    .section-top--iteach-feature,
    .section-top--iteach-decision {
        padding:
            32px 22px 20px;
    }

    .section-title--iteach,
    .section-title--iteach-feature,
    .section-title--iteach-decision {
        font-size: clamp(25px, 6.2vw, 32px);
    }

    .section-copy--iteach,
    .section-copy--iteach-feature,
    .section-copy--iteach-decision {
        font-size: 13px;
    }

    .section-bottom--iteach,
    .section-bottom--iteach-feature,
    .section-bottom--iteach-decision {
        padding-left: 22px;
        padding-right: 22px;
        padding-bottom: 58px;
    }

    .iteach-flow {
        grid-template-columns: 1fr;

        row-gap: 8px;
    }

    .iteach-flow-arrow {
        transform: rotate(90deg);
    }

    .iteach-metrics {
        grid-template-columns: 1fr;
    }

    .iteach-decision-row {
        grid-template-columns: 1fr;
    }

    .iteach-decision-problem,
    .iteach-decision-choice,
    .iteach-decision-outcome {
        border-left: 0;
        border-bottom: 1px solid rgba(120, 128, 138, 0.14);
    }

    .iteach-decision-outcome {
        border-bottom: 0;
    }
}


/* =========================================================
   22. CHAEUM119 SHARED
   slide-9 ~ slide-11
   ========================================================= */

.chaeum-section {
    display: grid;
    background: #f3f0e9;
}

.section-top--chaeum,
.section-top--chaeum-feature,
.section-top--chaeum-decision {
    width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;
    align-items: flex-end;

    padding-left: clamp(62px, 5.2vw, 88px);
    padding-right: clamp(62px, 5.2vw, 88px);
}

.section-intro--chaeum,
.section-intro--chaeum-feature,
.section-intro--chaeum-decision {
    width: 100%;
    min-width: 0;
}

.section-intro--chaeum .section-eyebrow,
.section-intro--chaeum-feature .section-eyebrow,
.section-intro--chaeum-decision .section-eyebrow {
    margin-bottom: clamp(15px, 1.2vw, 19px);
}

.section-title--chaeum,
.section-title--chaeum-feature,
.section-title--chaeum-decision {
    width: 100%;
    max-width: 1120px;

    font-size: clamp(32px, 2.55vw, 42px);
    line-height: 1.14;
    letter-spacing: -0.045em;
}

.section-copy--chaeum,
.section-copy--chaeum-feature,
.section-copy--chaeum-decision {
    margin-top: clamp(16px, 1.25vw, 20px);

    max-width: 1040px;

    color: #59616c;

    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.62;
}

.chaeum-block-label,
.chaeum-info-label,
.chaeum-role-label,
.chaeum-feature-action,
.chaeum-decision-label,
.chaeum-takeaway-label {
    margin: 0;

    color: #347bd6;

    font-size: clamp(10px, 0.72vw, 12px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.035em;
}


/* =========================================================
   23. slide-9 · CHAEUM119 PROJECT OVERVIEW
   Dashboard + Mockup
   ========================================================= */

.chaeum-section--overview {
    grid-template-rows:
        minmax(0, 31fr) minmax(0, 69fr);
}

.section-top--chaeum {
    padding-top: clamp(42px, 3.6vw, 58px);
    padding-bottom: clamp(20px, 1.65vw, 26px);
}

.section-bottom--chaeum {
    min-height: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1.14fr) minmax(0, 0.86fr);
    grid-template-rows:
        auto auto minmax(0, 1fr);
    grid-template-areas:
        "flow mockup"
        "info mockup"
        "role mockup";

    column-gap: clamp(24px, 2vw, 34px);
    row-gap: clamp(14px, 1.1vw, 18px);

    padding:
        clamp(12px, 1vw, 16px) clamp(62px, 5.2vw, 88px) clamp(54px, 4.4vw, 70px);
}

/* USER FLOW */

.chaeum-flow-wrap {
    grid-area: flow;

    min-width: 0;

    padding:
        clamp(18px, 1.45vw, 24px) clamp(18px, 1.45vw, 24px);

    border: 1px solid #d7d5cf;
    border-radius: 3px;

    background: rgba(255, 255, 255, 0.18);
}

.chaeum-flow-wrap .chaeum-block-label {
    margin-bottom: clamp(14px, 1.1vw, 18px);
}

.chaeum-flow {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);

    align-items: center;

    column-gap: clamp(7px, 0.58vw, 10px);
}

.chaeum-flow-item {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: clamp(48px, 4vw, 62px);

    padding: 8px 10px;

    border: 1px solid rgba(52, 123, 214, 0.45);
    border-radius: 3px;

    background: rgba(220, 234, 245, 0.42);

    color: #1f2933;

    font-size: clamp(12px, 0.88vw, 15px);
    font-weight: 600;
    line-height: 1.35;

    text-align: center;
}

.chaeum-flow-arrow {
    color: #347bd6;

    font-size: clamp(18px, 1.35vw, 23px);
    font-weight: 400;
    line-height: 1;
}

/* PROJECT INFO */

.chaeum-project-info {
    grid-area: info;

    min-width: 0;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid #347bd6;
    border-bottom: 1px solid #d7d5cf;
}

.chaeum-info-item {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(15px, 1.2vw, 19px) clamp(14px, 1.1vw, 18px);
}

.chaeum-info-item+.chaeum-info-item {
    border-left: 1px solid #dedbd5;
}

.chaeum-info-item strong {
    margin-top: clamp(9px, 0.7vw, 11px);

    color: #1d1d1f;

    font-size: clamp(19px, 1.5vw, 24px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.chaeum-info-item span {
    margin-top: 7px;

    color: #59616c;

    font-size: clamp(11px, 0.78vw, 13px);
    line-height: 1.45;
}

/* MY ROLE */

.chaeum-role {
    grid-area: role;

    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(150px, 0.62fr) minmax(0, 1.38fr);
    grid-template-rows: auto 1fr;

    column-gap: clamp(18px, 1.5vw, 24px);

    padding:
        clamp(16px, 1.25vw, 20px) clamp(18px, 1.45vw, 24px);

    border-left: 3px solid #347bd6;

    background: rgba(220, 234, 245, 0.46);
}

.chaeum-role-label {
    grid-column: 1;
    grid-row: 1;
}

.chaeum-role h3 {
    grid-column: 1;
    grid-row: 2;

    align-self: center;

    margin: 10px 0 0;

    color: #1d1d1f;

    font-size: clamp(20px, 1.55vw, 26px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

.chaeum-role-description {
    grid-column: 2;
    grid-row: 1 / span 2;

    align-self: center;

    margin: 0;

    color: #4f5965;

    font-size: clamp(12px, 0.88vw, 15px);
    line-height: 1.7;
}

/* MOCKUP */

.chaeum-mockup {
    grid-area: mockup;

    min-width: 0;
    min-height: 0;

    margin: 0;

    overflow: hidden;

    border-radius: 4px;

    background: #ddd9d2;

    box-shadow:
        0 12px 28px rgba(15, 25, 40, 0.12);
}

.chaeum-mockup img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   24. slide-10 · CHAEUM119 FEATURE FLOW
   Information → Trust → Conversion
   ========================================================= */

.chaeum-section--feature {
    grid-template-rows:
        minmax(0, 31fr) minmax(0, 69fr);
}

.section-top--chaeum-feature {
    padding-top: clamp(42px, 3.6vw, 58px);
    padding-bottom: clamp(18px, 1.45vw, 23px);
}

.section-bottom--chaeum-feature {
    min-height: 0;

    display: flex;
    align-items: flex-start;

    padding:
        clamp(14px, 1.1vw, 18px) clamp(62px, 5.2vw, 88px) clamp(58px, 4.8vw, 76px);
}

.chaeum-feature-grid {
    position: relative;

    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    column-gap: clamp(30px, 2.7vw, 44px);

    padding-top: clamp(24px, 1.9vw, 30px);
}

/* 상단 전환선 */
.chaeum-feature-grid::before {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    top: 0;

    height: 1px;

    background: linear-gradient(to right,
            rgba(52, 123, 214, 0.25),
            rgba(52, 123, 214, 0.95),
            rgba(52, 123, 214, 0.25));
}

.chaeum-feature-card {
    position: relative;

    min-width: 0;
    min-height: clamp(330px, 27vw, 390px);

    display: flex;
    flex-direction: column;

    padding:
        clamp(25px, 2vw, 32px) clamp(22px, 1.75vw, 28px);

    border: 1px solid #d7d5cf;
    border-radius: 3px;

    background: rgba(255, 255, 255, 0.16);
}

.chaeum-feature-card::before {
    content: "";

    position: absolute;

    top: calc(clamp(24px, 1.9vw, 30px) * -1 - 5px);
    left: 50%;

    width: 9px;
    height: 9px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #347bd6;
}

.chaeum-feature-head {
    padding-bottom: clamp(17px, 1.35vw, 21px);

    border-bottom: 1px solid #dedbd5;
}

.chaeum-feature-number {
    margin: 0;

    color: #8bbcf3;

    font-size: clamp(44px, 3.55vw, 58px);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.chaeum-feature-action {
    margin-top: clamp(13px, 1vw, 16px);
}

.chaeum-feature-head h3 {
    margin:
        clamp(10px, 0.8vw, 13px) 0 0;

    color: #1d1d1f;

    font-size: clamp(22px, 1.65vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.chaeum-feature-list {
    margin:
        clamp(20px, 1.55vw, 25px) 0 0;

    padding-left: 1.15em;

    color: #505964;

    font-size: clamp(13px, 0.95vw, 16px);
    line-height: 1.72;
}

.chaeum-feature-list li+li {
    margin-top: 3px;
}

.chaeum-feature-result {
    margin:
        auto 0 0;

    padding-top: clamp(17px, 1.35vw, 21px);

    border-top: 1px solid #dedbd5;

    color: #26384c;

    font-size: clamp(13px, 0.95vw, 16px);
    font-weight: 600;
    line-height: 1.55;
}

.chaeum-feature-card:nth-child(3) {
    border-color: rgba(52, 123, 214, 0.5);
    background: rgba(220, 234, 245, 0.38);
}


/* =========================================================
   25. slide-11 · CHAEUM119 DECISION MATRIX
   ========================================================= */

.chaeum-section--decision {
    grid-template-rows:
        minmax(0, 31fr) minmax(0, 69fr);
}

.section-top--chaeum-decision {
    padding-top: clamp(42px, 3.6vw, 58px);
    padding-bottom: clamp(18px, 1.45vw, 23px);
}

.section-bottom--chaeum-decision {
    min-height: 0;

    display: flex;
    flex-direction: column;

    padding:
        clamp(13px, 1vw, 17px) clamp(62px, 5.2vw, 88px) clamp(56px, 4.6vw, 72px);
}

.chaeum-decision-layout {
    width: 100%;
    min-height: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 2.2fr) minmax(270px, 0.8fr);

    column-gap: clamp(24px, 2vw, 34px);
}

/* MATRIX */

.chaeum-decision-table {
    min-width: 0;

    border-top: 1px solid #347bd6;
    border-bottom: 1px solid #d7d5cf;
}

.chaeum-decision-header,
.chaeum-decision-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
}

.chaeum-decision-header {
    min-height: clamp(34px, 2.65vw, 42px);

    align-items: center;

    color: #347bd6;

    font-size: clamp(9px, 0.67vw, 11px);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.chaeum-decision-header span,
.chaeum-decision-row>* {
    min-width: 0;

    padding-left: clamp(14px, 1.1vw, 18px);
    padding-right: clamp(14px, 1.1vw, 18px);
}

.chaeum-decision-header span:first-child,
.chaeum-decision-row>*:first-child {
    padding-left: 0;
}

.chaeum-decision-row {
    min-height: clamp(70px, 5.8vw, 90px);

    align-items: stretch;

    border-top: 1px solid #dedbd5;
}

.chaeum-decision-row>* {
    display: flex;
    align-items: center;

    color: #505964;

    font-size: clamp(12px, 0.87vw, 15px);
    line-height: 1.45;
}

.chaeum-problem {
    color: #1d1d1f !important;
    font-weight: 600;
}

.chaeum-choice {
    border-left: 1px solid #dedbd5;

    color: #285f9f !important;
    font-weight: 600;
}

.chaeum-outcome {
    border-left: 1px solid #dedbd5;

    background: rgba(220, 234, 245, 0.34);

    color: #394653 !important;
}

/* TAKEAWAY */

.chaeum-takeaway {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding:
        clamp(24px, 1.9vw, 30px) clamp(23px, 1.8vw, 29px);

    background: #0f1928;

    color: #ffffff;
}

.chaeum-takeaway-label {
    color: #66c4ec;
}

.chaeum-takeaway blockquote {
    margin:
        clamp(28px, 2.2vw, 36px) 0 0;

    color: #ffffff;

    font-size: clamp(20px, 1.6vw, 27px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.035em;
}

.chaeum-takeaway blockquote strong {
    color: #66c4ec;
    font-weight: 600;
}

.chaeum-takeaway-skills {
    margin:
        auto 0 0;

    color: #c4c9d1;

    font-size: clamp(11px, 0.78vw, 13px);
    line-height: 1.65;
}

.chaeum-closing {
    margin:
        clamp(18px, 1.45vw, 23px) 0 0;

    padding-top: clamp(13px, 1vw, 16px);

    border-top: 1px solid #d7d5cf;

    color: #414a55;

    font-size: clamp(13px, 0.95vw, 16px);
    font-weight: 600;
    line-height: 1.5;
}


/* =========================================================
   26. CHAEUM119 RESPONSIVE · SMALL DESKTOP
   ========================================================= */

@media (max-width: 1280px) {

    .section-title--chaeum,
    .section-title--chaeum-feature,
    .section-title--chaeum-decision {
        font-size: clamp(28px, 2.45vw, 36px);
    }

    .section-copy--chaeum,
    .section-copy--chaeum-feature,
    .section-copy--chaeum-decision {
        font-size: clamp(13px, 0.96vw, 15px);
    }

    .section-bottom--chaeum,
    .section-bottom--chaeum-feature,
    .section-bottom--chaeum-decision {
        padding-left: 52px;
        padding-right: 52px;
    }

    .chaeum-flow-item {
        font-size: 12px;
    }

    .chaeum-info-item strong {
        font-size: 18px;
    }

    .chaeum-role {
        grid-template-columns:
            minmax(130px, 0.58fr) minmax(0, 1.42fr);
    }

    .chaeum-role-description {
        font-size: 12px;
    }

    .chaeum-feature-card {
        min-height: 300px;
        padding: 22px 18px;
    }

    .chaeum-decision-row {
        min-height: 66px;
    }
}


/* =========================================================
   27. CHAEUM119 RESPONSIVE · LOW HEIGHT
   ========================================================= */

@media (max-height: 760px) {

    .chaeum-section--overview,
    .chaeum-section--feature,
    .chaeum-section--decision {
        grid-template-rows:
            minmax(0, 29fr) minmax(0, 71fr);
    }

    .section-top--chaeum,
    .section-top--chaeum-feature,
    .section-top--chaeum-decision {
        padding-top: 30px;
        padding-bottom: 14px;
    }

    .section-title--chaeum,
    .section-title--chaeum-feature,
    .section-title--chaeum-decision {
        font-size: clamp(27px, 2.35vw, 34px);
    }

    .section-copy--chaeum,
    .section-copy--chaeum-feature,
    .section-copy--chaeum-decision {
        margin-top: 11px;
        font-size: clamp(12px, 0.88vw, 14px);
    }

    .section-bottom--chaeum {
        row-gap: 10px;
        padding-top: 8px;
        padding-bottom: 46px;
    }

    .chaeum-flow-wrap {
        padding: 13px 15px;
    }

    .chaeum-flow-wrap .chaeum-block-label {
        margin-bottom: 10px;
    }

    .chaeum-flow-item {
        min-height: 42px;
    }

    .chaeum-info-item {
        padding: 11px 12px;
    }

    .chaeum-role {
        padding: 12px 15px;
    }

    .section-bottom--chaeum-feature,
    .section-bottom--chaeum-decision {
        padding-top: 7px;
        padding-bottom: 46px;
    }

    .chaeum-feature-grid {
        padding-top: 20px;
    }

    .chaeum-feature-card {
        min-height: 275px;
        padding: 18px 17px;
    }

    .chaeum-feature-number {
        font-size: 43px;
    }

    .chaeum-feature-list {
        margin-top: 14px;
        font-size: 12px;
        line-height: 1.58;
    }

    .chaeum-decision-row {
        min-height: 58px;
    }

    .chaeum-takeaway {
        padding: 20px 20px;
    }

    .chaeum-takeaway blockquote {
        margin-top: 20px;
        font-size: 19px;
    }

    .chaeum-closing {
        margin-top: 13px;
        padding-top: 10px;
        font-size: 12px;
    }
}


/* =========================================================
   28. CHAEUM119 RESPONSIVE · TABLET
   ========================================================= */

@media (max-width: 900px) {

    .chaeum-section--overview,
    .chaeum-section--feature,
    .chaeum-section--decision {
        grid-template-rows: auto auto;
    }

    .section-top--chaeum,
    .section-top--chaeum-feature,
    .section-top--chaeum-decision {
        padding: 42px 30px 24px;
    }

    .section-title--chaeum,
    .section-title--chaeum-feature,
    .section-title--chaeum-decision {
        font-size: clamp(27px, 3.6vw, 35px);
    }

    .section-bottom--chaeum,
    .section-bottom--chaeum-feature,
    .section-bottom--chaeum-decision {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 56px;
    }

    .section-bottom--chaeum {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "mockup"
            "flow"
            "info"
            "role";
    }

    .chaeum-mockup {
        min-height: 300px;
    }

    .chaeum-feature-grid {
        grid-template-columns: 1fr;
        row-gap: 18px;
        padding-top: 0;
    }

    .chaeum-feature-grid::before,
    .chaeum-feature-card::before {
        display: none;
    }

    .chaeum-feature-card {
        min-height: 0;
    }

    .chaeum-decision-layout {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    .chaeum-takeaway {
        min-height: 260px;
    }
}


/* =========================================================
   29. CHAEUM119 RESPONSIVE · MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .section-top--chaeum,
    .section-top--chaeum-feature,
    .section-top--chaeum-decision {
        padding: 32px 22px 20px;
    }

    .section-title--chaeum,
    .section-title--chaeum-feature,
    .section-title--chaeum-decision {
        font-size: clamp(24px, 6.1vw, 31px);
    }

    .section-copy--chaeum,
    .section-copy--chaeum-feature,
    .section-copy--chaeum-decision {
        font-size: 13px;
    }

    .section-bottom--chaeum,
    .section-bottom--chaeum-feature,
    .section-bottom--chaeum-decision {
        padding-left: 22px;
        padding-right: 22px;
        padding-bottom: 58px;
    }

    .chaeum-flow {
        grid-template-columns: 1fr;
        row-gap: 7px;
    }

    .chaeum-flow-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }

    .chaeum-project-info {
        grid-template-columns: 1fr;
    }

    .chaeum-info-item+.chaeum-info-item {
        border-left: 0;
        border-top: 1px solid #dedbd5;
    }

    .chaeum-role {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 12px;
    }

    .chaeum-role-label,
    .chaeum-role h3,
    .chaeum-role-description {
        grid-column: 1;
        grid-row: auto;
    }

    .chaeum-role h3 {
        margin-top: 0;
    }

    .chaeum-decision-header {
        display: none;
    }

    .chaeum-decision-row {
        grid-template-columns: 1fr;
    }

    .chaeum-decision-row>* {
        padding: 14px 0;
    }

    .chaeum-choice,
    .chaeum-outcome {
        border-left: 0;
        border-top: 1px solid #dedbd5;
    }
}


/* =========================================================
   25. AWESOME MOBILE UX · slide-12 ~ slide-14
   - slide-12 : Before / After comparison
   - slide-13 : Mobile UX flow
   - slide-14 : Decision matrix + takeaway
   - 이전 slide 스타일에는 영향 주지 않도록 slide id로 scope 고정
   ========================================================= */


/* =========================================================
   25-1. AWESOME SHARED
   ========================================================= */

#slide-12 .awesome-section,
#slide-13 .awesome-section,
#slide-14 .awesome-section {
    display: grid;
    background: #f3f0e9;
}

#slide-12 .section-top,
#slide-13 .section-top,
#slide-14 .section-top {
    width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;
    align-items: flex-end;

    padding-left: clamp(62px, 5.2vw, 88px);
    padding-right: clamp(62px, 5.2vw, 88px);
}

#slide-12 .section-intro,
#slide-13 .section-intro,
#slide-14 .section-intro {
    width: 100%;
    min-width: 0;
}

#slide-12 .section-eyebrow,
#slide-13 .section-eyebrow,
#slide-14 .section-eyebrow {
    margin-bottom: clamp(16px, 1.25vw, 20px);
}

#slide-12 .section-title,
#slide-13 .section-title,
#slide-14 .section-title {
    width: 100%;

    font-size: clamp(34px, 2.7vw, 44px);
    line-height: 1.14;
    letter-spacing: -0.045em;
}

#slide-12 .section-copy,
#slide-13 .section-copy,
#slide-14 .section-copy {
    margin-top: clamp(17px, 1.4vw, 22px);

    max-width: 1040px;

    color: #59616c;

    font-size: clamp(14px, 1.02vw, 17px);
    line-height: 1.62;
}


/* =========================================================
   26. slide-12 · BEFORE / AFTER OVERVIEW
   ========================================================= */

#slide-12 .awesome-section--overview {
    grid-template-rows:
        minmax(0, 34fr) minmax(0, 66fr);
}

#slide-12 .section-top--awesome {
    padding-top: clamp(42px, 3.8vw, 60px);
    padding-bottom: clamp(24px, 2vw, 32px);
}

#slide-12 .section-title--awesome {
    max-width: 1120px;
}

#slide-12 .section-copy--awesome {
    max-width: 1050px;
}

#slide-12 .section-bottom--awesome {
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(235px, 0.30fr);

    column-gap: clamp(24px, 2.4vw, 36px);

    align-items: stretch;

    padding:
        clamp(10px, 0.8vw, 14px) clamp(62px, 5.2vw, 88px) clamp(56px, 4.5vw, 70px);
}

#slide-12 .awesome-compare {
    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) clamp(28px, 2.2vw, 38px) minmax(0, 1fr);

    align-items: stretch;
}

#slide-12 .awesome-shot {
    position: relative;

    min-width: 0;
    min-height: 0;

    height: 100%;

    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 1px solid #d8d6d0;

    background: #ebe8e1;
}

#slide-12 .awesome-shot--after {
    border-color: rgba(52, 123, 214, 0.55);
}

#slide-12 .awesome-shot img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    background: #ebe8e1;
}

#slide-12 .awesome-shot-label {
    position: absolute;

    top: clamp(12px, 1vw, 16px);
    left: clamp(12px, 1vw, 16px);

    z-index: 2;

    margin: 0;

    padding: 6px 10px;

    background: rgba(243, 240, 233, 0.95);

    color: #53606d;

    font-size: clamp(9px, 0.66vw, 11px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.05em;
}

#slide-12 .awesome-shot--after .awesome-shot-label {
    background: #347bd6;
    color: #ffffff;
}

#slide-12 .awesome-compare-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #347bd6;

    font-size: clamp(22px, 1.8vw, 30px);
    font-weight: 300;

    line-height: 1;
}

#slide-12 .awesome-summary {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    padding:
        clamp(24px, 2vw, 32px) clamp(22px, 1.8vw, 28px);

    border-left: 3px solid #347bd6;

    background: #e5edf3;
}

#slide-12 .awesome-summary-label {
    margin: 0;

    color: #347bd6;

    font-size: clamp(9px, 0.68vw, 11px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.05em;
}

#slide-12 .awesome-summary h3 {
    margin: clamp(18px, 1.6vw, 24px) 0 0;

    color: #171a20;

    font-size: clamp(21px, 1.65vw, 27px);
    font-weight: 700;

    line-height: 1.32;
    letter-spacing: -0.04em;
}

#slide-12 .awesome-summary-list {
    margin: clamp(24px, 2.2vw, 32px) 0 0;
    padding: 0;

    list-style: none;
}

#slide-12 .awesome-summary-list li {
    position: relative;

    margin: 0;
    padding-left: 14px;

    color: #4d5864;

    font-size: clamp(12px, 0.9vw, 15px);
    font-weight: 400;

    line-height: 1.75;
}

#slide-12 .awesome-summary-list li::before {
    content: "";

    position: absolute;

    top: 0.78em;
    left: 0;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #347bd6;
}

#slide-12 .awesome-summary-result {
    margin: auto 0 0;

    padding-top: clamp(18px, 1.7vw, 24px);

    border-top: 1px solid rgba(52, 123, 214, 0.28);

    color: #283442;

    font-size: clamp(12px, 0.9vw, 15px);
    font-weight: 600;

    line-height: 1.7;
}


/* =========================================================
   27. slide-13 · MOBILE UX FLOW
   ========================================================= */

#slide-13 .awesome-section--feature {
    grid-template-rows:
        minmax(0, 34fr) minmax(0, 66fr);
}

#slide-13 .section-top--awesome-feature {
    padding-top: clamp(42px, 3.8vw, 60px);
    padding-bottom: clamp(22px, 1.8vw, 30px);
}

#slide-13 .section-bottom--awesome-feature {
    min-height: 0;

    display: flex;
    align-items: flex-start;

    padding:
        clamp(12px, 1vw, 16px) clamp(62px, 5.2vw, 88px) clamp(56px, 4.5vw, 70px);
}

#slide-13 .awesome-feature-grid {
    position: relative;

    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    column-gap: clamp(34px, 3.4vw, 54px);
}

#slide-13 .awesome-feature-grid::before {
    content: "";

    position: absolute;

    top: clamp(42px, 3.5vw, 54px);
    left: 4%;
    right: 4%;

    height: 1px;

    background: #b8d1ee;
}

#slide-13 .awesome-feature-card {
    position: relative;

    min-width: 0;

    padding:
        0 clamp(14px, 1.15vw, 18px) clamp(18px, 1.5vw, 24px);

    background: #f3f0e9;
}

#slide-13 .awesome-feature-number {
    position: relative;
    z-index: 2;

    width: fit-content;

    margin: 0;
    padding-right: 14px;

    background: #f3f0e9;

    color: #8bbcf1;

    font-size: clamp(44px, 3.8vw, 60px);
    font-weight: 300;

    line-height: 1;
    letter-spacing: -0.055em;
}

#slide-13 .awesome-feature-action {
    margin: clamp(16px, 1.4vw, 20px) 0 0;

    color: #347bd6;

    font-size: clamp(10px, 0.72vw, 12px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.025em;
}

#slide-13 .awesome-feature-card h3 {
    margin: clamp(10px, 0.9vw, 14px) 0 0;

    color: #171a20;

    font-size: clamp(22px, 1.75vw, 29px);
    font-weight: 700;

    line-height: 1.25;
    letter-spacing: -0.04em;
}

#slide-13 .awesome-feature-list {
    margin: clamp(20px, 1.7vw, 26px) 0 0;
    padding: clamp(18px, 1.5vw, 22px) 0 0;

    border-top: 1px solid #d8d6d0;

    list-style: none;
}

#slide-13 .awesome-feature-list li {
    position: relative;

    margin: 0;
    padding-left: 15px;

    color: #505a65;

    font-size: clamp(12px, 0.92vw, 15px);
    font-weight: 400;

    line-height: 1.72;
}

#slide-13 .awesome-feature-list li::before {
    content: "—";

    position: absolute;
    left: 0;

    color: #8a949e;
}

#slide-13 .awesome-feature-result {
    margin: clamp(20px, 1.8vw, 26px) 0 0;
    padding: clamp(16px, 1.4vw, 20px) 0 0;

    border-top: 2px solid #347bd6;

    color: #283442;

    font-size: clamp(14px, 1.02vw, 17px);
    font-weight: 500;

    line-height: 1.6;
}

#slide-13 .awesome-feature-card:not(:last-child)::after {
    content: "→";

    position: absolute;

    top: clamp(32px, 2.7vw, 42px);
    right: calc(clamp(34px, 3.4vw, 54px) * -0.68);

    z-index: 3;

    width: 32px;

    background: #f3f0e9;

    color: #347bd6;

    font-size: clamp(20px, 1.55vw, 26px);
    font-weight: 300;

    line-height: 1;
    text-align: center;
}


/* =========================================================
   28. slide-14 · DECISION MATRIX + TAKEAWAY
   ========================================================= */

#slide-14 .awesome-section--decision {
    grid-template-rows:
        minmax(0, 34fr) minmax(0, 66fr);
}

#slide-14 .section-top--awesome-decision {
    padding-top: clamp(42px, 3.8vw, 60px);
    padding-bottom: clamp(22px, 1.8vw, 30px);
}

#slide-14 .section-bottom--awesome-decision {
    min-height: 0;

    display: flex;
    flex-direction: column;

    padding:
        clamp(12px, 1vw, 16px) clamp(62px, 5.2vw, 88px) clamp(56px, 4.5vw, 70px);
}

#slide-14 .awesome-decision-layout {
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1.72fr) minmax(250px, 0.68fr);

    column-gap: clamp(28px, 2.8vw, 42px);

    align-items: stretch;
}

#slide-14 .awesome-decision-table {
    min-width: 0;

    border-top: 2px solid #347bd6;
}

#slide-14 .awesome-decision-header,
#slide-14 .awesome-decision-row {
    display: grid;

    grid-template-columns:
        1.15fr 1.15fr 0.9fr;

    column-gap: clamp(14px, 1.3vw, 20px);
}

#slide-14 .awesome-decision-header {
    padding:
        clamp(11px, 0.9vw, 14px) clamp(10px, 0.8vw, 14px);

    border-bottom: 1px solid #cfd4d8;

    color: #347bd6;

    font-size: clamp(9px, 0.68vw, 11px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.04em;
}

#slide-14 .awesome-decision-row {
    align-items: center;

    min-height: clamp(58px, 5.3vw, 72px);

    padding:
        clamp(11px, 0.95vw, 15px) clamp(10px, 0.8vw, 14px);

    border-bottom: 1px solid #d8d6d0;
}

#slide-14 .awesome-problem {
    color: #22272e;

    font-size: clamp(13px, 0.96vw, 16px);
    font-weight: 600;

    line-height: 1.48;
}

#slide-14 .awesome-choice {
    color: #4e5965;

    font-size: clamp(12px, 0.9vw, 15px);
    font-weight: 400;

    line-height: 1.48;
}

#slide-14 .awesome-choice::before {
    content: "→";

    margin-right: 8px;

    color: #347bd6;
}

#slide-14 .awesome-outcome {
    color: #347bd6;

    font-size: clamp(12px, 0.9vw, 15px);
    font-weight: 600;

    line-height: 1.48;
}

#slide-14 .awesome-takeaway {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding:
        clamp(24px, 2vw, 32px) clamp(22px, 1.8vw, 28px);

    border-left: 3px solid #347bd6;

    background: #e5edf3;
}

#slide-14 .awesome-takeaway-label {
    margin: 0;

    color: #347bd6;

    font-size: clamp(9px, 0.68vw, 11px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.05em;
}

#slide-14 .awesome-takeaway blockquote {
    margin: clamp(22px, 1.9vw, 28px) 0 0;

    color: #20262d;

    font-size: clamp(17px, 1.28vw, 21px);
    font-weight: 500;

    line-height: 1.55;
    letter-spacing: -0.035em;
}

#slide-14 .awesome-takeaway blockquote strong {
    color: #347bd6;
    font-weight: 700;
}

#slide-14 .awesome-takeaway-skills {
    margin: auto 0 0;

    padding-top: clamp(18px, 1.5vw, 22px);

    border-top: 1px solid rgba(52, 123, 214, 0.25);

    color: #52606d;

    font-size: clamp(11px, 0.82vw, 14px);
    font-weight: 400;

    line-height: 1.72;
}

#slide-14 .awesome-closing {
    margin: clamp(18px, 1.5vw, 22px) 0 0;
    padding: clamp(14px, 1.1vw, 18px) 0 0;

    border-top: 1px solid #d8d6d0;

    color: #56606b;

    font-size: clamp(12px, 0.9vw, 15px);
    font-weight: 400;

    line-height: 1.55;
}


/* =========================================================
   29. AWESOME · SMALLER DESKTOP
   ========================================================= */

@media (max-width: 1280px) {

    #slide-12 .section-title,
    #slide-13 .section-title,
    #slide-14 .section-title {
        font-size: clamp(30px, 2.55vw, 38px);
    }

    #slide-12 .section-copy,
    #slide-13 .section-copy,
    #slide-14 .section-copy {
        font-size: clamp(13px, 0.98vw, 15px);
    }

    #slide-12 .section-bottom--awesome,
    #slide-13 .section-bottom--awesome-feature,
    #slide-14 .section-bottom--awesome-decision {
        padding-left: 52px;
        padding-right: 52px;
        padding-bottom: 52px;
    }

    #slide-12 .section-top,
    #slide-13 .section-top,
    #slide-14 .section-top {
        padding-left: 52px;
        padding-right: 52px;
    }

    #slide-12 .section-bottom--awesome {
        grid-template-columns:
            minmax(0, 1fr) minmax(220px, 0.29fr);
    }
}


/* =========================================================
   30. AWESOME · LOW HEIGHT
   ========================================================= */

@media (max-height: 760px) {

    #slide-12 .awesome-section--overview,
    #slide-13 .awesome-section--feature,
    #slide-14 .awesome-section--decision {
        grid-template-rows:
            minmax(0, 32fr) minmax(0, 68fr);
    }

    #slide-12 .section-top,
    #slide-13 .section-top,
    #slide-14 .section-top {
        padding-top: 30px;
        padding-bottom: 16px;
    }

    #slide-12 .section-title,
    #slide-13 .section-title,
    #slide-14 .section-title {
        font-size: clamp(27px, 2.4vw, 35px);
    }

    #slide-12 .section-copy,
    #slide-13 .section-copy,
    #slide-14 .section-copy {
        margin-top: 14px;
        font-size: clamp(12px, 0.92vw, 14px);
    }

    #slide-12 .section-bottom--awesome,
    #slide-13 .section-bottom--awesome-feature,
    #slide-14 .section-bottom--awesome-decision {
        padding-top: 6px;
        padding-bottom: 42px;
    }

    #slide-12 .awesome-summary-list {
        margin-top: 16px;
    }

    #slide-12 .awesome-summary-list li {
        line-height: 1.55;
    }

    #slide-13 .awesome-feature-list {
        margin-top: 14px;
        padding-top: 14px;
    }

    #slide-13 .awesome-feature-list li {
        line-height: 1.52;
    }

    #slide-13 .awesome-feature-result {
        margin-top: 14px;
        padding-top: 12px;
    }

    #slide-14 .awesome-decision-row {
        min-height: 52px;
    }

    #slide-14 .awesome-takeaway blockquote {
        margin-top: 16px;
        font-size: clamp(15px, 1.15vw, 18px);
    }
}


/* =========================================================
   31. AWESOME · TABLET
   ========================================================= */

@media (max-width: 900px) {

    #slide-12 .awesome-section--overview,
    #slide-13 .awesome-section--feature,
    #slide-14 .awesome-section--decision {
        grid-template-rows: auto auto;
    }

    #slide-12 .section-top,
    #slide-13 .section-top,
    #slide-14 .section-top {
        padding: 42px 30px 26px;
    }

    #slide-12 .section-bottom--awesome,
    #slide-13 .section-bottom--awesome-feature,
    #slide-14 .section-bottom--awesome-decision {
        padding: 18px 30px 58px;
    }

    #slide-12 .section-bottom--awesome,
    #slide-14 .awesome-decision-layout {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    #slide-13 .awesome-feature-grid {
        grid-template-columns: 1fr;
        row-gap: 26px;
    }

    #slide-13 .awesome-feature-grid::before,
    #slide-13 .awesome-feature-card:not(:last-child)::after {
        display: none;
    }
}


/* =========================================================
   32. AWESOME · MOBILE
   ========================================================= */

@media (max-width: 640px) {

    #slide-12 .section-top,
    #slide-13 .section-top,
    #slide-14 .section-top {
        padding: 32px 22px 20px;
    }

    #slide-12 .section-title,
    #slide-13 .section-title,
    #slide-14 .section-title {
        font-size: clamp(24px, 6.1vw, 31px);
    }

    #slide-12 .section-copy,
    #slide-13 .section-copy,
    #slide-14 .section-copy {
        font-size: 13px;
    }

    #slide-12 .section-bottom--awesome,
    #slide-13 .section-bottom--awesome-feature,
    #slide-14 .section-bottom--awesome-decision {
        padding-left: 22px;
        padding-right: 22px;
        padding-bottom: 58px;
    }

    #slide-12 .awesome-compare {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    #slide-12 .awesome-compare-arrow {
        transform: rotate(90deg);
    }

    #slide-14 .awesome-decision-header {
        display: none;
    }

    #slide-14 .awesome-decision-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }
}


/* =========================================================
   33. AQUAWISE · SHARED
   slide-16 ~ slide-18

   Presentation Design
   - slide-16 : Before / After Overview
   - slide-17 : Redesign Strategy
   - slide-18 : Redesign Result

   IMPORTANT
   - slide-1 ~ slide-15 기존 스타일 변경 없음
   - AQUAWISE 스타일은 #slide-16 ~ #slide-18 내부로 제한
   ========================================================= */

#slide-16 .aquawise-section,
#slide-17 .aquawise-section,
#slide-18 .aquawise-section {
    position: relative;
    display: grid;
    background: #f3f0e9;
}

#slide-16 .section-top,
#slide-17 .section-top,
#slide-18 .section-top {
    width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;
    align-items: flex-end;

    padding-left: clamp(62px, 5.2vw, 88px);
    padding-right: clamp(62px, 5.2vw, 88px);
}

#slide-16 .section-intro,
#slide-17 .section-intro,
#slide-18 .section-intro {
    width: 100%;
    min-width: 0;
}

#slide-16 .section-eyebrow,
#slide-17 .section-eyebrow,
#slide-18 .section-eyebrow {
    margin: 0 0 clamp(15px, 1.25vw, 20px);

    color: #53606d;

    font-size: clamp(10px, 0.72vw, 12px);
    font-weight: 500;

    line-height: 1;
    letter-spacing: 0.035em;
}

#slide-16 .section-title,
#slide-17 .section-title,
#slide-18 .section-title {
    width: 100%;
    max-width: 1180px;

    margin: 0;

    color: #171a20;

    font-size: clamp(34px, 2.72vw, 45px);
    font-weight: 700;

    line-height: 1.14;
    letter-spacing: -0.045em;

    word-break: keep-all;
}

#slide-16 .section-title .accent,
#slide-17 .section-title .accent,
#slide-18 .section-title .accent {
    color: #347bd6;
}

#slide-16 .section-copy,
#slide-17 .section-copy,
#slide-18 .section-copy {
    max-width: 1040px;

    margin: clamp(17px, 1.4vw, 22px) 0 0;

    color: #59616c;

    font-size: clamp(14px, 1.02vw, 17px);
    font-weight: 400;

    line-height: 1.62;
    letter-spacing: -0.02em;

    word-break: keep-all;
}


/* =========================================================
   34. slide-16 · AQUAWISE PROJECT OVERVIEW
   BEFORE / AFTER + PROJECT SUMMARY
   ========================================================= */

#slide-16 .aquawise-section--overview {
    grid-template-rows:
        minmax(0, 32fr) minmax(0, 68fr);
}

#slide-16 .section-top--aquawise {
    padding-top: clamp(42px, 3.8vw, 60px);
    padding-bottom: clamp(20px, 1.7vw, 28px);
}

#slide-16 .section-bottom--aquawise {
    min-height: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 2.12fr) minmax(260px, 0.88fr);

    column-gap: clamp(28px, 2.5vw, 40px);

    align-items: stretch;

    padding:
        clamp(10px, 0.9vw, 14px) clamp(62px, 5.2vw, 88px) clamp(54px, 4.4vw, 70px);
}


/* ---------------------------------------------------------
   slide-16 · COVER COMPARE
   --------------------------------------------------------- */

#slide-16 .aquawise-cover-compare {
    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) clamp(28px, 2.4vw, 40px) minmax(0, 1fr);

    align-items: stretch;
}

#slide-16 .aquawise-cover {
    position: relative;

    min-width: 0;
    min-height: 0;

    margin: 0;

    display: grid;
    grid-template-rows:
        minmax(0, 1fr) auto;

    overflow: hidden;

    border: 1px solid #d8d6d0;

    background: rgba(255, 255, 255, 0.28);
}

#slide-16 .aquawise-cover--after {
    border-color: rgba(52, 123, 214, 0.52);
}

#slide-16 .aquawise-cover img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 0;

    object-fit: contain;
    object-position: center;

    background: #e9e6df;
}

#slide-16 .aquawise-cover-label {
    position: absolute;
    top: 12px;
    left: 12px;

    z-index: 2;

    padding: 6px 10px;

    background: rgba(243, 240, 233, 0.95);

    color: #56616d;

    font-size: clamp(9px, 0.65vw, 11px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.055em;
}

#slide-16 .aquawise-cover--after .aquawise-cover-label {
    background: #347bd6;
    color: #ffffff;
}

#slide-16 .aquawise-cover figcaption {
    min-height: clamp(72px, 6.2vw, 90px);

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 5px;

    padding:
        clamp(13px, 1.1vw, 17px) clamp(14px, 1.2vw, 18px);

    border-top: 1px solid #d8d6d0;

    background: #f3f0e9;
}

#slide-16 .aquawise-cover figcaption strong {
    color: #20262d;

    font-size: clamp(13px, 0.98vw, 16px);
    font-weight: 700;

    line-height: 1.25;
    letter-spacing: -0.02em;
}

#slide-16 .aquawise-cover figcaption span {
    color: #66707b;

    font-size: clamp(10px, 0.75vw, 12px);
    font-weight: 400;

    line-height: 1.45;
    letter-spacing: -0.015em;
}

#slide-16 .aquawise-cover-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #347bd6;

    font-size: clamp(22px, 1.8vw, 30px);
    font-weight: 300;

    line-height: 1;
}


/* ---------------------------------------------------------
   slide-16 · SUMMARY
   --------------------------------------------------------- */

#slide-16 .aquawise-summary {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    padding:
        clamp(24px, 2vw, 32px) clamp(22px, 1.8vw, 28px);

    border-left: 3px solid #347bd6;

    background: #e3ebf2;
}

#slide-16 .aquawise-summary-label {
    margin: 0;

    color: #347bd6;

    font-size: clamp(9px, 0.67vw, 11px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.055em;
}

#slide-16 .aquawise-summary h3 {
    margin: clamp(19px, 1.65vw, 26px) 0 0;

    color: #171a20;

    font-size: clamp(20px, 1.55vw, 26px);
    font-weight: 700;

    line-height: 1.34;
    letter-spacing: -0.04em;

    word-break: keep-all;
}

#slide-16 .aquawise-summary-copy {
    margin: clamp(18px, 1.5vw, 24px) 0 0;

    color: #52606d;

    font-size: clamp(11px, 0.82vw, 14px);
    font-weight: 400;

    line-height: 1.65;
    letter-spacing: -0.02em;

    word-break: keep-all;
}

#slide-16 .aquawise-summary-meta {
    margin-top: auto;

    display: grid;
    row-gap: clamp(14px, 1.2vw, 18px);

    padding-top: clamp(18px, 1.5vw, 24px);

    border-top: 1px solid rgba(52, 123, 214, 0.22);
}

#slide-16 .aquawise-meta-item strong {
    display: block;

    margin-bottom: 6px;

    color: #347bd6;

    font-size: clamp(9px, 0.65vw, 11px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.045em;
}

#slide-16 .aquawise-meta-item p {
    margin: 0;

    color: #4f5a66;

    font-size: clamp(10px, 0.76vw, 12px);
    font-weight: 400;

    line-height: 1.55;
    letter-spacing: -0.015em;
}


/* =========================================================
   35. slide-17 · AQUAWISE REDESIGN STRATEGY
   3 STRATEGIES + STORYLINE
   ========================================================= */

#slide-17 .aquawise-section--strategy {
    grid-template-rows:
        minmax(0, 31fr) minmax(0, 69fr);
}

#slide-17 .section-top--aquawise-strategy {
    padding-top: clamp(40px, 3.6vw, 58px);
    padding-bottom: clamp(18px, 1.5vw, 24px);
}

#slide-17 .section-bottom--aquawise-strategy {
    min-height: 0;

    display: grid;
    grid-template-rows:
        minmax(0, 1fr) auto;

    row-gap: clamp(18px, 1.5vw, 24px);

    padding:
        clamp(8px, 0.7vw, 12px) clamp(62px, 5.2vw, 88px) clamp(54px, 4.4vw, 70px);
}


/* ---------------------------------------------------------
   slide-17 · STRATEGY GRID
   --------------------------------------------------------- */

#slide-17 .aquawise-strategy-grid {
    min-height: 0;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    column-gap: clamp(18px, 1.8vw, 28px);
}

#slide-17 .aquawise-strategy-card {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    padding:
        clamp(20px, 1.7vw, 26px) clamp(18px, 1.5vw, 24px);

    border-top: 3px solid #347bd6;
    border-bottom: 1px solid #d7d5cf;

    background: rgba(255, 255, 255, 0.18);
}

#slide-17 .aquawise-strategy-number {
    margin: 0;

    color: #91bce8;

    font-size: clamp(38px, 3.25vw, 52px);
    font-weight: 300;

    line-height: 0.95;
    letter-spacing: -0.055em;
}

#slide-17 .aquawise-strategy-action {
    margin: clamp(13px, 1.1vw, 17px) 0 0;

    color: #347bd6;

    font-size: clamp(9px, 0.65vw, 11px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.035em;
}

#slide-17 .aquawise-strategy-card h3 {
    margin: clamp(10px, 0.9vw, 14px) 0 0;

    color: #171a20;

    font-size: clamp(20px, 1.55vw, 26px);
    font-weight: 700;

    line-height: 1.25;
    letter-spacing: -0.04em;
}


/* ---------------------------------------------------------
   slide-17 · SHIFT INFOGRAPHIC
   --------------------------------------------------------- */

#slide-17 .aquawise-strategy-shift {
    margin-top: clamp(17px, 1.4vw, 22px);

    display: grid;
    grid-template-columns:
        minmax(0, 0.8fr) auto minmax(0, 1.15fr);

    align-items: center;

    column-gap: 10px;

    min-height: clamp(66px, 5.8vw, 84px);

    padding:
        clamp(12px, 1vw, 16px) clamp(12px, 1vw, 16px);

    background: #e7e4dc;
}

#slide-17 .aquawise-strategy-shift>span:first-child {
    color: #737b84;

    font-size: clamp(10px, 0.76vw, 12px);
    font-weight: 500;

    line-height: 1.4;
}

#slide-17 .aquawise-shift-arrow {
    color: #347bd6;

    font-size: clamp(17px, 1.3vw, 21px);
    font-weight: 300;
}

#slide-17 .aquawise-strategy-shift strong {
    color: #223347;

    font-size: clamp(11px, 0.85vw, 14px);
    font-weight: 700;

    line-height: 1.4;
    letter-spacing: -0.02em;
}


/* ---------------------------------------------------------
   slide-17 · VISUAL KEYWORDS
   --------------------------------------------------------- */

#slide-17 .aquawise-visual-keywords {
    margin-top: clamp(17px, 1.4vw, 22px);

    min-height: clamp(66px, 5.8vw, 84px);

    display: flex;
    flex-wrap: wrap;
    align-content: center;

    gap: 7px;

    padding:
        clamp(12px, 1vw, 16px) clamp(12px, 1vw, 16px);

    background: #e7e4dc;
}

#slide-17 .aquawise-visual-keywords span {
    padding: 6px 8px;

    border: 1px solid rgba(52, 123, 214, 0.35);

    color: #315d91;

    font-size: clamp(8px, 0.58vw, 10px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.035em;
}


/* ---------------------------------------------------------
   slide-17 · STRATEGY COPY / RESULT
   --------------------------------------------------------- */

#slide-17 .aquawise-strategy-copy {
    margin: clamp(16px, 1.3vw, 20px) 0 0;

    color: #59636e;

    font-size: clamp(10px, 0.78vw, 13px);
    font-weight: 400;

    line-height: 1.58;
    letter-spacing: -0.018em;

    word-break: keep-all;
}

#slide-17 .aquawise-strategy-result {
    margin: auto 0 0;

    padding-top: clamp(14px, 1.2vw, 18px);

    border-top: 1px solid rgba(52, 123, 214, 0.28);

    color: #28384a;

    font-size: clamp(11px, 0.82vw, 14px);
    font-weight: 600;

    line-height: 1.5;
    letter-spacing: -0.025em;

    word-break: keep-all;
}


/* ---------------------------------------------------------
   slide-17 · STORYLINE
   --------------------------------------------------------- */

#slide-17 .aquawise-storyline {
    min-width: 0;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);

    align-items: center;

    column-gap: clamp(18px, 1.6vw, 24px);

    padding:
        clamp(13px, 1.1vw, 17px) clamp(18px, 1.5vw, 24px);

    background: #152236;
}

#slide-17 .aquawise-storyline-label {
    margin: 0;

    color: #6fc3ec;

    font-size: clamp(8px, 0.6vw, 10px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.05em;

    white-space: nowrap;
}

#slide-17 .aquawise-storyline-flow {
    min-width: 0;

    display: grid;
    grid-template-columns:
        auto auto auto auto minmax(0, 1.1fr) auto minmax(0, 1fr) auto auto;

    align-items: center;

    column-gap: clamp(8px, 0.8vw, 13px);
}

#slide-17 .aquawise-storyline-flow span {
    color: rgba(255, 255, 255, 0.86);

    font-size: clamp(8px, 0.62vw, 10px);
    font-weight: 600;

    line-height: 1.2;
    letter-spacing: 0.025em;

    text-align: center;
    white-space: nowrap;
}

#slide-17 .aquawise-storyline-flow span:nth-child(even) {
    color: #6fc3ec;

    font-size: clamp(13px, 1vw, 17px);
    font-weight: 300;
}


/* =========================================================
   36. slide-18 · AQUAWISE REDESIGN RESULT
   3 BEFORE / AFTER RESULTS + TAKEAWAY BAR
   ========================================================= */

#slide-18 .aquawise-section--result {
    grid-template-rows:
        minmax(0, 29fr) minmax(0, 71fr);
}

#slide-18 .section-top--aquawise-result {
    padding-top: clamp(38px, 3.3vw, 54px);
    padding-bottom: clamp(16px, 1.35vw, 22px);
}

#slide-18 .section-bottom--aquawise-result {
    min-height: 0;

    display: grid;
    grid-template-rows:
        minmax(0, 1fr) auto;

    row-gap: clamp(15px, 1.25vw, 20px);

    padding:
        clamp(7px, 0.6vw, 10px) clamp(62px, 5.2vw, 88px) clamp(54px, 4.4vw, 70px);
}


/* ---------------------------------------------------------
   slide-18 · RESULT GRID
   --------------------------------------------------------- */

#slide-18 .aquawise-result-grid {
    min-height: 0;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    column-gap: clamp(17px, 1.55vw, 24px);
}

#slide-18 .aquawise-result-card {
    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-rows:
        auto minmax(0, 1fr) auto;

    padding:
        clamp(15px, 1.25vw, 19px) clamp(14px, 1.2vw, 18px);

    border: 1px solid #d8d6d0;

    background: rgba(255, 255, 255, 0.18);
}

#slide-18 .aquawise-result-head {
    padding-bottom: clamp(10px, 0.85vw, 13px);

    border-bottom: 1px solid #dad8d2;
}

#slide-18 .aquawise-result-label {
    margin: 0;

    color: #347bd6;

    font-size: clamp(8px, 0.6vw, 10px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.05em;
}

#slide-18 .aquawise-result-head h3 {
    margin: 7px 0 0;

    color: #171a20;

    font-size: clamp(17px, 1.3vw, 22px);
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: -0.035em;
}


/* ---------------------------------------------------------
   slide-18 · MINI COMPARE
   --------------------------------------------------------- */

#slide-18 .aquawise-mini-compare {
    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) clamp(22px, 1.6vw, 28px) minmax(0, 1fr);

    align-items: center;

    padding:
        clamp(12px, 1vw, 16px) 0;
}

#slide-18 .aquawise-mini {
    position: relative;

    min-width: 0;

    margin: 0;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border: 1px solid #d2d0ca;

    background: #e7e4dd;
}

#slide-18 .aquawise-mini--after {
    border-color: rgba(52, 123, 214, 0.52);
}

#slide-18 .aquawise-mini img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}

#slide-18 .aquawise-mini-label {
    position: absolute;
    top: 7px;
    left: 7px;

    z-index: 2;

    padding: 4px 6px;

    background: rgba(243, 240, 233, 0.94);

    color: #626b74;

    font-size: clamp(7px, 0.5vw, 9px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.04em;
}

#slide-18 .aquawise-mini--after .aquawise-mini-label {
    background: #347bd6;
    color: #ffffff;
}

#slide-18 .aquawise-mini-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #347bd6;

    font-size: clamp(17px, 1.3vw, 22px);
    font-weight: 300;
}

#slide-18 .aquawise-result-copy {
    margin: 0;

    padding-top: clamp(11px, 0.9vw, 14px);

    border-top: 1px solid #dad8d2;

    color: #4f5b67;

    font-size: clamp(10px, 0.76vw, 12px);
    font-weight: 500;

    line-height: 1.48;
    letter-spacing: -0.02em;

    word-break: keep-all;
}


/* ---------------------------------------------------------
   slide-18 · TAKEAWAY BAR
   --------------------------------------------------------- */

#slide-18 .aquawise-takeaway-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    background: #152236;
}

#slide-18 .aquawise-takeaway-item {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;

    padding:
        clamp(12px, 1vw, 15px) clamp(16px, 1.3vw, 20px);
}

#slide-18 .aquawise-takeaway-item+.aquawise-takeaway-item {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

#slide-18 .aquawise-takeaway-item strong {
    color: #6fc3ec;

    font-size: clamp(8px, 0.6vw, 10px);
    font-weight: 700;

    line-height: 1;
    letter-spacing: 0.045em;
}

#slide-18 .aquawise-takeaway-item span {
    color: rgba(255, 255, 255, 0.78);

    font-size: clamp(9px, 0.68vw, 11px);
    font-weight: 400;

    line-height: 1.35;
    letter-spacing: -0.012em;

    word-break: keep-all;
}


/* =========================================================
   37. AQUAWISE · SMALLER DESKTOP
   ========================================================= */

@media (max-width: 1280px) {

    #slide-16 .section-title,
    #slide-17 .section-title,
    #slide-18 .section-title {
        font-size: clamp(31px, 2.55vw, 40px);
    }

    #slide-16 .section-copy,
    #slide-17 .section-copy,
    #slide-18 .section-copy {
        font-size: clamp(13px, 0.96vw, 15px);
    }

    #slide-16 .section-bottom--aquawise {
        grid-template-columns:
            minmax(0, 2fr) minmax(235px, 0.82fr);

        column-gap: 24px;
    }

    #slide-16 .aquawise-summary h3 {
        font-size: clamp(18px, 1.48vw, 23px);
    }

    #slide-17 .aquawise-strategy-grid {
        column-gap: 16px;
    }

    #slide-17 .aquawise-strategy-card {
        padding: 18px 16px;
    }

    #slide-18 .aquawise-result-grid {
        column-gap: 14px;
    }
}


/* =========================================================
   38. AQUAWISE · LOW HEIGHT
   ========================================================= */

@media (max-height: 760px) {

    #slide-16 .aquawise-section--overview {
        grid-template-rows:
            minmax(0, 30fr) minmax(0, 70fr);
    }

    #slide-17 .aquawise-section--strategy {
        grid-template-rows:
            minmax(0, 29fr) minmax(0, 71fr);
    }

    #slide-18 .aquawise-section--result {
        grid-template-rows:
            minmax(0, 27fr) minmax(0, 73fr);
    }

    #slide-16 .section-top,
    #slide-17 .section-top,
    #slide-18 .section-top {
        padding-top: 30px;
        padding-bottom: 14px;
    }

    #slide-16 .section-title,
    #slide-17 .section-title,
    #slide-18 .section-title {
        font-size: clamp(28px, 2.4vw, 36px);
    }

    #slide-16 .section-copy,
    #slide-17 .section-copy,
    #slide-18 .section-copy {
        margin-top: 13px;
        font-size: clamp(12px, 0.9vw, 14px);
    }

    #slide-16 .section-bottom--aquawise,
    #slide-17 .section-bottom--aquawise-strategy,
    #slide-18 .section-bottom--aquawise-result {
        padding-bottom: 48px;
    }

    #slide-17 .aquawise-strategy-number {
        font-size: 38px;
    }

    #slide-17 .aquawise-strategy-copy,
    #slide-17 .aquawise-strategy-result {
        font-size: 10px;
    }
}


/* =========================================================
   39. AQUAWISE · TABLET
   ========================================================= */

@media (max-width: 900px) {

    #slide-16 .aquawise-section,
    #slide-17 .aquawise-section,
    #slide-18 .aquawise-section {
        grid-template-rows: auto auto;
    }

    #slide-16 .section-top,
    #slide-17 .section-top,
    #slide-18 .section-top {
        padding:
            42px 30px 26px;
    }

    #slide-16 .section-bottom--aquawise,
    #slide-17 .section-bottom--aquawise-strategy,
    #slide-18 .section-bottom--aquawise-result {
        padding:
            18px 30px 58px;
    }

    #slide-16 .section-bottom--aquawise {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    #slide-17 .aquawise-strategy-grid,
    #slide-18 .aquawise-result-grid {
        grid-template-columns: 1fr;
        row-gap: 22px;
    }

    #slide-17 .aquawise-storyline {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    #slide-17 .aquawise-storyline-flow {
        overflow-x: auto;
    }

    #slide-18 .aquawise-takeaway-bar {
        grid-template-columns: 1fr;
    }

    #slide-18 .aquawise-takeaway-item+.aquawise-takeaway-item {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }
}


/* =========================================================
   40. AQUAWISE · MOBILE
   ========================================================= */

@media (max-width: 640px) {

    #slide-16 .section-top,
    #slide-17 .section-top,
    #slide-18 .section-top {
        padding:
            32px 22px 20px;
    }

    #slide-16 .section-title,
    #slide-17 .section-title,
    #slide-18 .section-title {
        font-size: clamp(24px, 6.1vw, 31px);
    }

    #slide-16 .section-copy,
    #slide-17 .section-copy,
    #slide-18 .section-copy {
        font-size: 13px;
    }

    #slide-16 .section-bottom--aquawise,
    #slide-17 .section-bottom--aquawise-strategy,
    #slide-18 .section-bottom--aquawise-result {
        padding-left: 22px;
        padding-right: 22px;
        padding-bottom: 58px;
    }

    #slide-16 .aquawise-cover-compare {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    #slide-16 .aquawise-cover-arrow {
        transform: rotate(90deg);
    }

    #slide-17 .aquawise-strategy-shift {
        grid-template-columns: 1fr;
        row-gap: 7px;
    }

    #slide-17 .aquawise-shift-arrow {
        transform: rotate(90deg);
        width: fit-content;
    }

    #slide-18 .aquawise-mini-compare {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    #slide-18 .aquawise-mini-arrow {
        transform: rotate(90deg);
    }
}

/* =========================================================
   41. AQUAWISE · RESULT DETAIL SPLIT
   slide-18 ~ slide-20

   - 18 COMPANY
   - 19 PROBLEM
   - 20 DIGITAL TRANSITION + PROJECT TAKEAWAY
   ========================================================= */

#slide-18 .aquawise-section,
#slide-19 .aquawise-section,
#slide-20 .aquawise-section {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 30fr) minmax(0, 70fr);
    background: #f3f0e9;
}

#slide-18 .section-top,
#slide-19 .section-top,
#slide-20 .section-top {
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    padding:
        clamp(38px, 3.3vw, 54px) clamp(62px, 5.2vw, 88px) clamp(16px, 1.35vw, 22px);
}

#slide-18 .section-intro,
#slide-19 .section-intro,
#slide-20 .section-intro {
    width: 100%;
    min-width: 0;
}

#slide-18 .section-eyebrow,
#slide-19 .section-eyebrow,
#slide-20 .section-eyebrow {
    margin: 0 0 clamp(14px, 1.15vw, 18px);
    color: #53606d;
    font-size: clamp(10px, 0.72vw, 12px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.035em;
}

#slide-18 .section-title,
#slide-19 .section-title,
#slide-20 .section-title {
    width: 100%;
    max-width: 1180px;
    margin: 0;
    color: #171a20;
    font-size: clamp(34px, 2.72vw, 45px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.045em;
    word-break: keep-all;
}

#slide-18 .section-title .accent,
#slide-19 .section-title .accent,
#slide-20 .section-title .accent,
#slide-18 .aquawise-detail-insight .accent,
#slide-19 .aquawise-detail-insight .accent,
#slide-20 .aquawise-detail-insight .accent {
    color: #347bd6;
}

#slide-18 .section-copy,
#slide-19 .section-copy,
#slide-20 .section-copy {
    max-width: 1080px;
    margin: clamp(16px, 1.3vw, 21px) 0 0;
    color: #59616c;
    font-size: clamp(13px, 0.98vw, 16px);
    font-weight: 400;
    line-height: 1.62;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

#slide-18 .section-bottom--aquawise-detail,
#slide-19 .section-bottom--aquawise-detail,
#slide-20 .section-bottom--aquawise-detail {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 2.35fr) minmax(250px, 0.9fr);
    column-gap: clamp(24px, 2vw, 34px);
    align-items: stretch;
    padding:
        clamp(9px, 0.75vw, 12px) clamp(62px, 5.2vw, 88px) clamp(56px, 4.6vw, 72px);
}

/* ---------------------------------------------------------
   LARGE BEFORE / AFTER
   --------------------------------------------------------- */

#slide-18 .aquawise-detail-compare,
#slide-19 .aquawise-detail-compare,
#slide-20 .aquawise-detail-compare {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(34px, 2.7vw, 46px) minmax(0, 1fr);
    align-items: center;
}

#slide-18 .aquawise-detail-shot,
#slide-19 .aquawise-detail-shot,
#slide-20 .aquawise-detail-shot {
    position: relative;
    min-width: 0;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(9px, 0.7vw, 12px);
}

#slide-18 .aquawise-detail-shot img,
#slide-19 .aquawise-detail-shot img,
#slide-20 .aquawise-detail-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
    border: 1px solid #d5d3cd;
    background: #e8e5de;
}

#slide-18 .aquawise-detail-shot--after img,
#slide-19 .aquawise-detail-shot--after img,
#slide-20 .aquawise-detail-shot--after img {
    border-color: rgba(52, 123, 214, 0.55);
    box-shadow: inset 0 -2px 0 #347bd6;
}

#slide-18 .aquawise-detail-label,
#slide-19 .aquawise-detail-label,
#slide-20 .aquawise-detail-label {
    position: absolute;
    top: clamp(9px, 0.65vw, 12px);
    left: clamp(9px, 0.65vw, 12px);
    z-index: 2;
    padding: 5px 8px;
    background: rgba(243, 240, 233, 0.96);
    color: #5d6670;
    font-size: clamp(8px, 0.58vw, 10px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.045em;
}

#slide-18 .aquawise-detail-shot--after .aquawise-detail-label,
#slide-19 .aquawise-detail-shot--after .aquawise-detail-label,
#slide-20 .aquawise-detail-shot--after .aquawise-detail-label {
    background: #347bd6;
    color: #ffffff;
}

#slide-18 .aquawise-detail-shot figcaption,
#slide-19 .aquawise-detail-shot figcaption,
#slide-20 .aquawise-detail-shot figcaption {
    margin: 0;
    color: #5f6872;
    font-size: clamp(9px, 0.68vw, 11px);
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}

#slide-18 .aquawise-detail-arrow,
#slide-19 .aquawise-detail-arrow,
#slide-20 .aquawise-detail-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #347bd6;
    font-size: clamp(24px, 1.8vw, 31px);
    font-weight: 300;
    line-height: 1;
}

/* ---------------------------------------------------------
   RIGHT INSIGHT PANEL
   --------------------------------------------------------- */

#slide-18 .aquawise-detail-insight,
#slide-19 .aquawise-detail-insight,
#slide-20 .aquawise-detail-insight {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding:
        clamp(24px, 2vw, 32px) clamp(22px, 1.8vw, 29px);
    border-left: 3px solid #347bd6;
    background: #e5edf3;
}

#slide-18 .aquawise-detail-kicker,
#slide-19 .aquawise-detail-kicker,
#slide-20 .aquawise-detail-kicker {
    margin: 0;
    color: #347bd6;
    font-size: clamp(8px, 0.62vw, 10px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

#slide-18 .aquawise-detail-insight h3,
#slide-19 .aquawise-detail-insight h3,
#slide-20 .aquawise-detail-insight h3 {
    margin: clamp(19px, 1.55vw, 25px) 0 0;
    color: #171a20;
    font-size: clamp(20px, 1.55vw, 26px);
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: -0.04em;
    word-break: keep-all;
}

#slide-18 .aquawise-detail-insight>p:last-child,
#slide-19 .aquawise-detail-insight>p:last-child,
#slide-20 .aquawise-detail-insight>p:last-child {
    margin: auto 0 0;
    padding-top: clamp(18px, 1.5vw, 24px);
    border-top: 1px solid rgba(52, 123, 214, 0.24);
    color: #505b66;
    font-size: clamp(11px, 0.82vw, 13px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/* slide 18 · process */
#slide-18 .aquawise-process {
    margin-top: clamp(24px, 2vw, 32px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

#slide-18 .aquawise-process span:nth-child(odd) {
    padding: 8px 10px;
    border: 1px solid #b8d0ea;
    background: rgba(255, 255, 255, 0.35);
    color: #253243;
    font-size: clamp(8px, 0.58vw, 10px);
    font-weight: 700;
    line-height: 1;
}

#slide-18 .aquawise-process span:nth-child(even) {
    color: #347bd6;
    font-size: 14px;
}

/* slide 19 · problem frame */
#slide-19 .aquawise-problem-grid {
    margin-top: clamp(23px, 1.9vw, 30px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#slide-19 .aquawise-problem-grid span {
    padding: clamp(10px, 0.8vw, 13px) 8px;
    border: 1px solid #bfd3e8;
    background: rgba(255, 255, 255, 0.34);
    color: #2f3d4d;
    font-size: clamp(9px, 0.68vw, 11px);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

/* slide 20 · story flow */
#slide-20 .aquawise-transition-flow {
    margin-top: clamp(22px, 1.8vw, 29px);
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 5px;
}

#slide-20 .aquawise-transition-flow span:nth-child(odd) {
    padding: 8px 5px;
    border: 1px solid #bfd3e8;
    background: rgba(255, 255, 255, 0.34);
    color: #253243;
    font-size: clamp(7px, 0.53vw, 9px);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

#slide-20 .aquawise-transition-flow span:nth-child(even) {
    color: #347bd6;
    font-size: 12px;
}

/* ---------------------------------------------------------
   slide-20 · PROJECT TAKEAWAY
   --------------------------------------------------------- */

#slide-20 .section-bottom--aquawise-detail {
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: clamp(14px, 1.1vw, 18px);
}

#slide-20 .aquawise-detail-compare {
    grid-column: 1;
    grid-row: 1;
}

#slide-20 .aquawise-detail-insight {
    grid-column: 2;
    grid-row: 1;
}

#slide-20 .aquawise-project-takeaway {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #152236;
}

#slide-20 .aquawise-project-takeaway>div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: clamp(11px, 0.9vw, 14px) clamp(15px, 1.2vw, 19px);
}

#slide-20 .aquawise-project-takeaway>div+div {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

#slide-20 .aquawise-project-takeaway strong {
    color: #6fc3ec;
    font-size: clamp(8px, 0.58vw, 10px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.045em;
}

#slide-20 .aquawise-project-takeaway span {
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(9px, 0.66vw, 11px);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.015em;
    word-break: keep-all;
}

/* =========================================================
   42. AQUAWISE DETAIL · RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {

    #slide-18 .section-title,
    #slide-19 .section-title,
    #slide-20 .section-title {
        font-size: clamp(31px, 2.5vw, 40px);
    }

    #slide-18 .section-bottom--aquawise-detail,
    #slide-19 .section-bottom--aquawise-detail,
    #slide-20 .section-bottom--aquawise-detail {
        grid-template-columns: minmax(0, 2.2fr) minmax(235px, 0.82fr);
        column-gap: 22px;
    }
}

@media (max-height: 760px) {

    #slide-18 .aquawise-section,
    #slide-19 .aquawise-section,
    #slide-20 .aquawise-section {
        grid-template-rows: minmax(0, 27fr) minmax(0, 73fr);
    }

    #slide-18 .section-top,
    #slide-19 .section-top,
    #slide-20 .section-top {
        padding-top: 30px;
        padding-bottom: 13px;
    }

    #slide-18 .section-title,
    #slide-19 .section-title,
    #slide-20 .section-title {
        font-size: clamp(28px, 2.35vw, 36px);
    }

    #slide-18 .section-copy,
    #slide-19 .section-copy,
    #slide-20 .section-copy {
        margin-top: 12px;
        font-size: clamp(12px, 0.88vw, 14px);
    }

    #slide-18 .section-bottom--aquawise-detail,
    #slide-19 .section-bottom--aquawise-detail,
    #slide-20 .section-bottom--aquawise-detail {
        padding-bottom: 48px;
    }
}

@media (max-width: 900px) {

    #slide-18 .aquawise-section,
    #slide-19 .aquawise-section,
    #slide-20 .aquawise-section {
        grid-template-rows: auto auto;
    }

    #slide-18 .section-top,
    #slide-19 .section-top,
    #slide-20 .section-top {
        padding: 42px 30px 26px;
    }

    #slide-18 .section-bottom--aquawise-detail,
    #slide-19 .section-bottom--aquawise-detail,
    #slide-20 .section-bottom--aquawise-detail {
        grid-template-columns: 1fr;
        row-gap: 24px;
        padding: 18px 30px 58px;
    }

    #slide-18 .aquawise-detail-insight,
    #slide-19 .aquawise-detail-insight,
    #slide-20 .aquawise-detail-insight {
        min-height: 230px;
    }

    #slide-20 .aquawise-detail-compare,
    #slide-20 .aquawise-detail-insight,
    #slide-20 .aquawise-project-takeaway {
        grid-column: 1;
        grid-row: auto;
    }

    #slide-20 .aquawise-project-takeaway {
        grid-template-columns: 1fr;
    }

    #slide-20 .aquawise-project-takeaway>div+div {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }
}

@media (max-width: 640px) {

    #slide-18 .section-top,
    #slide-19 .section-top,
    #slide-20 .section-top {
        padding: 32px 22px 20px;
    }

    #slide-18 .section-title,
    #slide-19 .section-title,
    #slide-20 .section-title {
        font-size: clamp(24px, 6vw, 31px);
    }

    #slide-18 .section-bottom--aquawise-detail,
    #slide-19 .section-bottom--aquawise-detail,
    #slide-20 .section-bottom--aquawise-detail {
        padding-left: 22px;
        padding-right: 22px;
        padding-bottom: 58px;
    }

    #slide-18 .aquawise-detail-compare,
    #slide-19 .aquawise-detail-compare,
    #slide-20 .aquawise-detail-compare {
        grid-template-columns: 1fr;
        row-gap: 13px;
    }

    #slide-18 .aquawise-detail-arrow,
    #slide-19 .aquawise-detail-arrow,
    #slide-20 .aquawise-detail-arrow {
        transform: rotate(90deg);
    }
}

/* =========================================================
   KISA · 5-SLIDE CASE STUDY
   slide-21 ~ slide-25
   ========================================================= */

#slide-21 .kisa-section,
#slide-22 .kisa-section,
#slide-23 .kisa-section,
#slide-24 .kisa-section,
#slide-25 .kisa-section {
    position: relative;
    background: #f3f0e9;
}

#slide-21 .section-eyebrow,
#slide-22 .section-eyebrow,
#slide-23 .section-eyebrow,
#slide-24 .section-eyebrow,
#slide-25 .section-eyebrow {
    margin: 0 0 clamp(14px, 1.5vh, 20px);
    color: #53606d;
    font-size: clamp(10px, 0.72vw, 12px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
}

#slide-21 .section-title,
#slide-22 .section-title,
#slide-23 .section-title,
#slide-24 .section-title,
#slide-25 .section-title {
    margin: 0;
    max-width: 1180px;
    color: #171a20;
    font-size: clamp(32px, 2.7vw, 44px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.045em;
    word-break: keep-all;
}

#slide-21 .section-title .accent,
#slide-22 .section-title .accent,
#slide-23 .section-title .accent,
#slide-24 .section-title .accent,
#slide-25 .section-title .accent,
#slide-23 .accent,
#slide-24 .accent,
#slide-25 .accent {
    color: #347bd6;
}

#slide-21 .section-copy,
#slide-22 .section-copy,
#slide-23 .section-copy,
#slide-24 .section-copy,
#slide-25 .section-copy {
    max-width: 1040px;
    margin: clamp(15px, 1.7vh, 22px) 0 0;
    color: #56606b;
    font-size: clamp(13px, 0.98vw, 16px);
    font-weight: 400;
    line-height: 1.62;
    letter-spacing: -0.025em;
    word-break: keep-all;
}

/* ---------- 21 · OVERVIEW ---------- */

#slide-21 .kisa-section--overview {
    display: grid;
    grid-template-rows: minmax(0, 32fr) minmax(0, 68fr);
}

#slide-21 .section-top--kisa {
    display: flex;
    align-items: flex-end;
    padding: clamp(44px, 5vh, 64px) clamp(62px, 5.2vw, 88px) clamp(22px, 2.5vh, 32px);
}

#slide-21 .section-bottom--kisa-overview {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 25%, 330px);
    gap: clamp(28px, 3vw, 46px);
    padding: clamp(8px, 1vh, 14px) clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}

#slide-21 .kisa-cover-compare {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(30px, 2.7vw, 42px) minmax(0, 1fr);
    align-items: stretch;
}

#slide-21 .kisa-cover-shot {
    position: relative;
    min-width: 0;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

#slide-21 .kisa-cover-shot img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    background: #e9e7e1;
    border: 1px solid #d6d4ce;
}

#slide-21 .kisa-cover-shot--after img {
    border-color: rgba(52, 123, 214, 0.55);
}

#slide-21 .kisa-cover-label,
#slide-23 .kisa-detail-label,
#slide-24 .kisa-detail-label,
#slide-25 .kisa-detail-label {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 9px;
    background: rgba(243, 240, 233, 0.95);
    color: #596673;
    font-size: clamp(9px, 0.65vw, 11px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

#slide-21 .kisa-cover-shot--after .kisa-cover-label,
#slide-23 .kisa-detail-shot--after .kisa-detail-label,
#slide-24 .kisa-detail-shot--after .kisa-detail-label,
#slide-25 .kisa-detail-shot--after .kisa-detail-label {
    background: #347bd6;
    color: #fff;
}

#slide-21 .kisa-cover-shot figcaption {
    padding-top: 12px;
    color: #626b75;
    font-size: clamp(10px, 0.76vw, 12px);
    line-height: 1.45;
}

#slide-21 .kisa-cover-shot figcaption strong {
    display: block;
    margin-bottom: 2px;
    color: #222830;
    font-size: clamp(11px, 0.82vw, 13px);
}

#slide-21 .kisa-cover-shot figcaption span {
    display: block;
}

#slide-21 .kisa-cover-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #347bd6;
    font-size: clamp(22px, 1.8vw, 30px);
    font-weight: 300;
}

#slide-21 .kisa-overview-summary {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.2vw, 34px);
    border-left: 3px solid #347bd6;
    background: #e6edf2;
}

#slide-21 .kisa-summary-label,
#slide-23 .kisa-detail-kicker,
#slide-24 .kisa-detail-kicker,
#slide-25 .kisa-detail-kicker {
    margin: 0;
    color: #347bd6;
    font-size: clamp(9px, 0.66vw, 11px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

#slide-21 .kisa-overview-summary h3 {
    margin: clamp(20px, 2.3vh, 28px) 0 0;
    color: #171a20;
    font-size: clamp(20px, 1.6vw, 27px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
}

#slide-21 .kisa-overview-summary>p:not(.kisa-summary-label) {
    margin: clamp(20px, 2.2vh, 28px) 0 0;
    color: #52606d;
    font-size: clamp(12px, 0.9vw, 15px);
    line-height: 1.7;
}

#slide-21 .kisa-core-direction {
    margin-top: auto;
    padding-top: clamp(18px, 2vh, 24px);
    border-top: 1px solid rgba(52, 123, 214, 0.25);
}

#slide-21 .kisa-core-direction small {
    display: block;
    margin-bottom: 9px;
    color: #65717d;
    font-size: clamp(9px, 0.62vw, 10px);
    font-weight: 700;
    letter-spacing: 0.05em;
}

#slide-21 .kisa-core-direction strong {
    display: block;
    color: #102437;
    font-size: clamp(21px, 1.8vw, 29px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

/* ---------- 22 · STRATEGY ---------- */

#slide-22 .kisa-section--strategy {
    display: grid;
    grid-template-rows: minmax(0, 32fr) minmax(0, 68fr);
}

#slide-22 .section-top--kisa-strategy {
    display: flex;
    align-items: flex-end;
    padding: clamp(44px, 5vh, 64px) clamp(62px, 5.2vw, 88px) clamp(22px, 2.5vh, 32px);
}

#slide-22 .section-bottom--kisa-strategy {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(20px, 2.2vh, 28px);
    padding: clamp(8px, 1vh, 14px) clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}

#slide-22 .kisa-strategy-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.6vw, 24px);
}

#slide-22 .kisa-strategy-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 1.8vw, 28px);
    border-top: 2px solid #347bd6;
    background: rgba(255, 255, 255, 0.28);
}

#slide-22 .kisa-strategy-number {
    margin: 0;
    color: #9ac4eb;
    font-size: clamp(38px, 3.5vw, 56px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.05em;
}

#slide-22 .kisa-strategy-action {
    margin: clamp(17px, 1.8vh, 22px) 0 0;
    color: #347bd6;
    font-size: clamp(9px, 0.66vw, 11px);
    font-weight: 700;
    letter-spacing: 0.035em;
}

#slide-22 .kisa-strategy-card h3 {
    margin: 9px 0 0;
    color: #1b2026;
    font-size: clamp(19px, 1.45vw, 24px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

#slide-22 .kisa-strategy-copy {
    margin: clamp(18px, 2vh, 24px) 0 0;
    padding-top: clamp(16px, 1.8vh, 22px);
    border-top: 1px solid #d7d5cf;
    color: #59636e;
    font-size: clamp(11px, 0.82vw, 14px);
    line-height: 1.65;
}

#slide-22 .kisa-strategy-result {
    margin: auto 0 0;
    padding-top: clamp(18px, 2vh, 24px);
    color: #26394c;
    font-size: clamp(10px, 0.74vw, 12px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

#slide-22 .kisa-reading-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: clamp(10px, 1vw, 16px);
    padding: clamp(14px, 1.6vh, 18px) clamp(18px, 1.5vw, 24px);
    background: #102437;
    color: #fff;
    font-size: clamp(10px, 0.72vw, 12px);
    font-weight: 700;
    letter-spacing: 0.035em;
    text-align: center;
}

#slide-22 .kisa-reading-flow span:nth-child(even) {
    color: #72bfe6;
}

/* ---------- 23~25 · LARGE BEFORE/AFTER ---------- */

#slide-23 .kisa-section--detail,
#slide-24 .kisa-section--detail,
#slide-25 .kisa-section--result {
    display: grid;
    grid-template-rows: minmax(0, 31fr) minmax(0, 69fr);
}

#slide-23 .section-top--kisa-detail,
#slide-24 .section-top--kisa-detail,
#slide-25 .section-top--kisa-result {
    display: flex;
    align-items: flex-end;
    padding: clamp(42px, 4.8vh, 62px) clamp(62px, 5.2vw, 88px) clamp(20px, 2.3vh, 30px);
}

#slide-23 .section-bottom--kisa-detail,
#slide-24 .section-bottom--kisa-detail {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.62fr);
    gap: clamp(28px, 3vw, 46px);
    padding: clamp(8px, 1vh, 14px) clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}

#slide-25 .section-bottom--kisa-result {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.62fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(18px, 2vh, 26px) clamp(28px, 3vw, 46px);
    padding: clamp(8px, 1vh, 14px) clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}

#slide-23 .kisa-detail-compare,
#slide-24 .kisa-detail-compare,
#slide-25 .kisa-detail-compare {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(30px, 2.7vw, 42px) minmax(0, 1fr);
    align-items: stretch;
}

#slide-23 .kisa-detail-shot,
#slide-24 .kisa-detail-shot,
#slide-25 .kisa-detail-shot {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

#slide-23 .kisa-detail-shot img,
#slide-24 .kisa-detail-shot img,
#slide-25 .kisa-detail-shot img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    background: #e9e7e1;
    border: 1px solid #d5d4cf;
}

#slide-23 .kisa-detail-shot--after img,
#slide-24 .kisa-detail-shot--after img,
#slide-25 .kisa-detail-shot--after img {
    border-color: rgba(52, 123, 214, .55);
}

#slide-23 .kisa-detail-shot figcaption,
#slide-24 .kisa-detail-shot figcaption,
#slide-25 .kisa-detail-shot figcaption {
    padding-top: 10px;
    color: #67717b;
    font-size: clamp(10px, 0.72vw, 12px);
    line-height: 1.4;
}

#slide-23 .kisa-detail-arrow,
#slide-24 .kisa-detail-arrow,
#slide-25 .kisa-detail-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #347bd6;
    font-size: clamp(22px, 1.8vw, 30px);
    font-weight: 300;
}

#slide-23 .kisa-detail-insight,
#slide-24 .kisa-detail-insight,
#slide-25 .kisa-detail-insight {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(23px, 2vw, 32px);
    border-left: 3px solid #347bd6;
    background: #e6edf2;
}

#slide-23 .kisa-detail-insight h3,
#slide-24 .kisa-detail-insight h3,
#slide-25 .kisa-detail-insight h3 {
    margin: clamp(18px, 2vh, 24px) 0 0;
    color: #1a2026;
    font-size: clamp(19px, 1.5vw, 25px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
}

#slide-23 .kisa-detail-insight>p:not(.kisa-detail-kicker),
#slide-24 .kisa-detail-insight>p:not(.kisa-detail-kicker),
#slide-25 .kisa-detail-insight>p:not(.kisa-detail-kicker) {
    margin: clamp(20px, 2.2vh, 28px) 0 0;
    color: #56616d;
    font-size: clamp(11px, 0.84vw, 14px);
    line-height: 1.68;
}

#slide-23 .kisa-gap-flow,
#slide-24 .kisa-stage-flow {
    display: grid;
    align-items: center;
    gap: 6px;
    margin-top: clamp(20px, 2.2vh, 28px);
    padding: 12px 10px;
    background: #102437;
    color: #fff;
    font-size: clamp(8px, 0.58vw, 10px);
    font-weight: 700;
    text-align: center;
}

#slide-23 .kisa-gap-flow {
    grid-template-columns: 1fr auto 1fr auto 1fr;
}

#slide-24 .kisa-stage-flow {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
}

#slide-23 .kisa-gap-flow span:nth-child(even),
#slide-24 .kisa-stage-flow span:nth-child(even) {
    color: #72bfe6;
}

#slide-23 .kisa-detail-outcome,
#slide-24 .kisa-detail-outcome,
#slide-25 .kisa-detail-outcome {
    margin-top: auto;
    padding-top: clamp(17px, 1.8vh, 22px);
    border-top: 1px solid rgba(52, 123, 214, .25);
    color: #26394c;
    font-size: clamp(12px, 0.9vw, 15px);
    font-weight: 700;
    line-height: 1.45;
}

#slide-25 .kisa-project-takeaway {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 2px solid #347bd6;
    background: rgba(255, 255, 255, .25);
}

#slide-25 .kisa-project-takeaway>div {
    min-width: 0;
    padding: clamp(14px, 1.5vh, 18px) clamp(16px, 1.25vw, 20px);
    border-right: 1px solid #d5d4cf;
}

#slide-25 .kisa-project-takeaway>div:last-child {
    border-right: 0;
}

#slide-25 .kisa-project-takeaway strong {
    display: block;
    color: #347bd6;
    font-size: clamp(9px, 0.65vw, 11px);
    font-weight: 700;
    letter-spacing: 0.035em;
}

#slide-25 .kisa-project-takeaway span {
    display: block;
    margin-top: 6px;
    color: #525d68;
    font-size: clamp(10px, 0.72vw, 12px);
    line-height: 1.5;
}

@media (max-width: 1100px) {
    #slide-22 .kisa-strategy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #slide-21 .section-bottom--kisa-overview,
    #slide-23 .section-bottom--kisa-detail,
    #slide-24 .section-bottom--kisa-detail,
    #slide-25 .section-bottom--kisa-result {
        column-gap: 24px;
    }
}

@media (max-width: 768px) {

    #slide-21 .kisa-section--overview,
    #slide-22 .kisa-section--strategy,
    #slide-23 .kisa-section--detail,
    #slide-24 .kisa-section--detail,
    #slide-25 .kisa-section--result {
        display: block;
        height: auto;
        min-height: 100vh;
    }

    #slide-21 .section-top--kisa,
    #slide-22 .section-top--kisa-strategy,
    #slide-23 .section-top--kisa-detail,
    #slide-24 .section-top--kisa-detail,
    #slide-25 .section-top--kisa-result {
        padding: 42px 28px 24px;
    }

    #slide-21 .section-bottom--kisa-overview,
    #slide-22 .section-bottom--kisa-strategy,
    #slide-23 .section-bottom--kisa-detail,
    #slide-24 .section-bottom--kisa-detail,
    #slide-25 .section-bottom--kisa-result {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 10px 28px 72px;
    }

    #slide-21 .kisa-cover-compare,
    #slide-23 .kisa-detail-compare,
    #slide-24 .kisa-detail-compare,
    #slide-25 .kisa-detail-compare {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    #slide-21 .kisa-cover-arrow,
    #slide-23 .kisa-detail-arrow,
    #slide-24 .kisa-detail-arrow,
    #slide-25 .kisa-detail-arrow {
        transform: rotate(90deg);
    }

    #slide-22 .kisa-strategy-grid {
        grid-template-columns: 1fr;
    }

    #slide-22 .kisa-reading-flow {
        grid-template-columns: 1fr;
    }

    #slide-22 .kisa-reading-flow span:nth-child(even) {
        transform: rotate(90deg);
    }

    #slide-25 .kisa-project-takeaway {
        grid-template-columns: 1fr;
    }

    #slide-25 .kisa-project-takeaway>div {
        border-right: 0;
        border-bottom: 1px solid #d5d4cf;
    }

    #slide-25 .kisa-project-takeaway>div:last-child {
        border-bottom: 0;
    }
}


/* =========================================================
   NOVENTIX · INDEPENDENT 5-SLIDE CASE STUDY
   slide-26 ~ slide-30

   Concept
   - Future Tech × Premium B2B
   - Warm Paper × Graphite × Portfolio Blue
   - 각 페이지의 역할에 따라 레이아웃을 다르게 구성
   - KISA layout에 의존하지 않음
   ========================================================= */


/* =========================================================
   01. NOVENTIX TOKENS / SHARED
   ========================================================= */

/*
   Portfolio color rule
   - 전체 포트폴리오의 Warm Paper / Blue Accent를 유지한다.
   - NOVENTIX의 개성은 색이 아니라 비대칭 비교, 2×2 matrix,
     timeline, graphite finale 같은 layout variation으로 만든다.
*/


#slide-26,
#slide-27,
#slide-28,
#slide-29,
#slide-30 {
    --nv-ivory: #f3f0e9;
    --nv-paper: #e9e7e1;
    --nv-charcoal: #1d1d1f;
    --nv-charcoal-2: #2f343a;
    --nv-copy: #59616c;
    --nv-muted: #737a84;
    --nv-line: #d8d6d0;
    --nv-accent: #347bd6;
    --nv-accent-deep: #315d91;
    --nv-accent-soft: #dce8f4;
    --nv-panel: #e7ebef;
}

#slide-26 .noventix-section,
#slide-27 .noventix-section,
#slide-28 .noventix-section,
#slide-29 .noventix-section,
#slide-30 .noventix-section {
    position: relative;
    display: grid;
    background: var(--nv-ivory);
}

#slide-26 .section-eyebrow,
#slide-27 .section-eyebrow,
#slide-28 .section-eyebrow,
#slide-29 .section-eyebrow,
#slide-30 .section-eyebrow {
    margin: 0 0 clamp(13px, 1.35vh, 18px);
    color: #53606d;
    font-size: clamp(10px, 0.7vw, 12px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.045em;
}

#slide-26 .section-title,
#slide-27 .section-title,
#slide-28 .section-title,
#slide-29 .section-title,
#slide-30 .section-title {
    width: 100%;
    max-width: 1160px;
    margin: 0;
    color: var(--nv-charcoal);
    font-size: clamp(31px, 2.55vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.045em;
    word-break: keep-all;
}

#slide-26 .section-title .accent,
#slide-27 .section-title .accent,
#slide-28 .section-title .accent,
#slide-29 .section-title .accent,
#slide-30 .section-title .accent,
#slide-26 .accent,
#slide-27 .accent,
#slide-28 .accent,
#slide-29 .accent,
#slide-30 .accent {
    color: var(--nv-accent-deep);
}

#slide-26 .section-copy,
#slide-27 .section-copy,
#slide-28 .section-copy,
#slide-29 .section-copy,
#slide-30 .section-copy {
    max-width: 1020px;
    margin: clamp(15px, 1.6vh, 21px) 0 0;
    color: var(--nv-copy);
    font-size: clamp(13px, 0.96vw, 16px);
    font-weight: 400;
    line-height: 1.62;
    letter-spacing: -0.02em;
}


/* =========================================================
   02. slide-26 · OVERVIEW
   Editorial Cover Split
   ========================================================= */

#slide-26 .noventix-section--overview {
    grid-template-rows: minmax(0, 31fr) minmax(0, 69fr);
}

#slide-26 .section-top--noventix {
    display: flex;
    align-items: flex-end;
    padding:
        clamp(42px, 4.7vh, 60px) clamp(62px, 5.2vw, 88px) clamp(20px, 2.2vh, 28px);
}

#slide-26 .section-title--noventix {
    max-width: 1100px;
}

#slide-26 .section-bottom--noventix-overview {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(260px, 0.72fr);
    gap: clamp(28px, 3vw, 46px);
    padding:
        clamp(8px, 1vh, 14px) clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}

#slide-26 .noventix-cover-compare {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns:
        minmax(0, 0.82fr) clamp(28px, 2.5vw, 38px) minmax(0, 1.18fr);
    align-items: stretch;
}

#slide-26 .noventix-cover-shot {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

#slide-26 .noventix-cover-shot img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    background: #e9e7e1;
    border: 1px solid var(--nv-line);
}

#slide-26 .noventix-cover-shot--after img {
    border-color: rgba(52, 123, 214, 0.52);
    box-shadow: 0 12px 28px rgba(26, 31, 22, 0.09);
}

#slide-26 .noventix-cover-label,
#slide-28 .noventix-detail-label,
#slide-29 .noventix-detail-label,
#slide-30 .noventix-detail-label {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 9px;
    background: rgba(243, 241, 238, 0.95);
    color: #596673;
    font-size: clamp(9px, 0.64vw, 11px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

#slide-26 .noventix-cover-shot--after .noventix-cover-label,
#slide-28 .noventix-detail-shot--after .noventix-detail-label,
#slide-29 .noventix-detail-shot--after .noventix-detail-label,
#slide-30 .noventix-detail-shot--after .noventix-detail-label {
    background: var(--nv-charcoal);
    color: var(--nv-accent);
}

#slide-26 .noventix-cover-shot figcaption {
    padding-top: 11px;
    color: #626b75;
    font-size: clamp(10px, 0.74vw, 12px);
    line-height: 1.45;
}

#slide-26 .noventix-cover-shot figcaption strong {
    display: block;
    margin-bottom: 2px;
    color: var(--nv-charcoal);
    font-size: clamp(11px, 0.8vw, 13px);
}

#slide-26 .noventix-cover-shot figcaption span {
    display: block;
}

#slide-26 .noventix-cover-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nv-accent-deep);
    font-size: clamp(22px, 1.75vw, 29px);
    font-weight: 300;
}

#slide-26 .noventix-overview-summary {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.15vw, 34px);
    border-top: 3px solid var(--nv-accent);
    background: var(--nv-panel);
    color: var(--nv-charcoal);
}

#slide-26 .noventix-summary-label {
    margin: 0;
    color: var(--nv-accent);
    font-size: clamp(9px, 0.65vw, 11px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.055em;
}

#slide-26 .noventix-overview-summary h3 {
    margin: clamp(20px, 2.2vh, 28px) 0 0;
    color: var(--nv-charcoal);
    font-size: clamp(20px, 1.55vw, 26px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
}

#slide-26 .noventix-overview-summary>p:not(.noventix-summary-label) {
    margin: clamp(18px, 2vh, 25px) 0 0;
    color: var(--nv-copy);
    font-size: clamp(11px, 0.86vw, 14px);
    line-height: 1.72;
}

#slide-26 .noventix-core-direction {
    margin-top: auto;
    padding-top: clamp(18px, 2vh, 24px);
    border-top: 1px solid rgba(52, 123, 214, 0.25);
}

#slide-26 .noventix-core-direction small {
    display: block;
    margin-bottom: 9px;
    color: #9aa3ad;
    font-size: clamp(9px, 0.61vw, 10px);
    font-weight: 700;
    letter-spacing: 0.05em;
}

#slide-26 .noventix-core-direction strong {
    display: block;
    color: var(--nv-accent);
    font-size: clamp(22px, 1.8vw, 29px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.045em;
}


/* =========================================================
   03. slide-27 · REDESIGN STRATEGY
   2 × 2 Design Matrix
   ========================================================= */

#slide-27 .noventix-section--strategy {
    grid-template-rows: minmax(0, 30fr) minmax(0, 70fr);
}

#slide-27 .section-top--noventix-strategy {
    display: flex;
    align-items: flex-end;
    padding:
        clamp(42px, 4.6vh, 60px) clamp(62px, 5.2vw, 88px) clamp(18px, 2vh, 26px);
}

#slide-27 .section-bottom--noventix-strategy {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(17px, 1.8vh, 23px);
    padding:
        clamp(7px, 0.9vh, 12px) clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}

#slide-27 .noventix-strategy-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--nv-charcoal);
    border-left: 1px solid var(--nv-line);
}

#slide-27 .noventix-strategy-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(56px, 5vw, 78px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: clamp(16px, 1.5vw, 23px);
    padding: clamp(17px, 1.55vw, 24px);
    border-right: 1px solid var(--nv-line);
    border-bottom: 1px solid var(--nv-line);
    background: rgba(255, 255, 255, 0.18);
}

#slide-27 .noventix-strategy-card:nth-child(2),
#slide-27 .noventix-strategy-card:nth-child(3) {
    background: rgba(232, 233, 223, 0.56);
}

#slide-27 .noventix-strategy-number {
    grid-column: 1;
    grid-row: 1 / 5;
    margin: 0;
    color: #9abde4;
    font-size: clamp(38px, 3.35vw, 54px);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

#slide-27 .noventix-strategy-action {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: var(--nv-accent-deep);
    font-size: clamp(9px, 0.64vw, 11px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.045em;
}

#slide-27 .noventix-strategy-card h3 {
    grid-column: 2;
    grid-row: 2;
    margin: 8px 0 0;
    color: var(--nv-charcoal);
    font-size: clamp(18px, 1.38vw, 23px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

#slide-27 .noventix-strategy-copy {
    grid-column: 2;
    grid-row: 3;
    margin: clamp(13px, 1.4vh, 18px) 0 0;
    padding-top: clamp(12px, 1.3vh, 17px);
    border-top: 1px solid var(--nv-line);
    color: var(--nv-copy);
    font-size: clamp(10px, 0.78vw, 13px);
    line-height: 1.62;
}

#slide-27 .noventix-strategy-result {
    grid-column: 2;
    grid-row: 4;
    margin: 0;
    padding-top: clamp(12px, 1.3vh, 17px);
    color: #28384a;
    font-size: clamp(9px, 0.68vw, 11px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

#slide-27 .noventix-reading-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: clamp(9px, 0.9vw, 14px);
    padding:
        clamp(13px, 1.45vh, 17px) clamp(18px, 1.5vw, 24px);
    background: #26384c;
    color: #f7f7f5;
    font-size: clamp(9px, 0.7vw, 12px);
    font-weight: 700;
    letter-spacing: 0.035em;
    text-align: center;
}

#slide-27 .noventix-reading-flow span:nth-child(even) {
    color: var(--nv-accent);
}


/* =========================================================
   04. slide-28 · COMPANY OVERVIEW
   Asymmetric KPI Compare
   ========================================================= */

#slide-28 .noventix-section--detail {
    grid-template-rows: minmax(0, 30fr) minmax(0, 70fr);
}

#slide-28 .section-top--noventix-detail,
#slide-29 .section-top--noventix-detail,
#slide-30 .section-top--noventix-result {
    display: flex;
    align-items: flex-end;
    padding:
        clamp(40px, 4.5vh, 58px) clamp(62px, 5.2vw, 88px) clamp(18px, 2.1vh, 27px);
}

#slide-28 .section-bottom--noventix-detail {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.82fr) minmax(255px, 0.58fr);
    gap: clamp(25px, 2.6vw, 40px);
    padding:
        clamp(7px, 0.9vh, 12px) clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}

#slide-28 .noventix-detail-compare {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns:
        minmax(0, 0.76fr) clamp(28px, 2.4vw, 38px) minmax(0, 1.24fr);
    align-items: stretch;
}

#slide-28 .noventix-detail-shot,
#slide-29 .noventix-detail-shot,
#slide-30 .noventix-detail-shot {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

#slide-28 .noventix-detail-shot img,
#slide-29 .noventix-detail-shot img,
#slide-30 .noventix-detail-shot img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    background: #e9e7e1;
    border: 1px solid var(--nv-line);
}

#slide-28 .noventix-detail-shot--after img,
#slide-29 .noventix-detail-shot--after img,
#slide-30 .noventix-detail-shot--after img {
    border-color: rgba(116, 137, 30, 0.55);
}

#slide-28 .noventix-detail-shot figcaption,
#slide-29 .noventix-detail-shot figcaption,
#slide-30 .noventix-detail-shot figcaption {
    padding-top: 9px;
    color: #67717b;
    font-size: clamp(9px, 0.7vw, 12px);
    line-height: 1.4;
}

#slide-28 .noventix-detail-arrow,
#slide-29 .noventix-detail-arrow,
#slide-30 .noventix-detail-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nv-accent-deep);
    font-size: clamp(21px, 1.7vw, 28px);
    font-weight: 300;
}

#slide-28 .noventix-detail-insight {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 1.9vw, 30px);
    border-top: 3px solid var(--nv-accent);
    background: var(--nv-panel);
}

#slide-28 .noventix-detail-kicker,
#slide-29 .noventix-detail-kicker,
#slide-30 .noventix-detail-kicker {
    margin: 0;
    color: var(--nv-accent-deep);
    font-size: clamp(9px, 0.64vw, 11px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

#slide-28 .noventix-detail-insight h3,
#slide-29 .noventix-detail-insight h3,
#slide-30 .noventix-detail-insight h3 {
    margin: clamp(17px, 1.8vh, 23px) 0 0;
    color: var(--nv-charcoal);
    font-size: clamp(18px, 1.42vw, 24px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
}

#slide-28 .noventix-detail-insight>p:not(.noventix-detail-kicker),
#slide-29 .noventix-detail-insight>p:not(.noventix-detail-kicker),
#slide-30 .noventix-detail-insight>p:not(.noventix-detail-kicker) {
    margin: clamp(17px, 1.9vh, 24px) 0 0;
    color: var(--nv-copy);
    font-size: clamp(10px, 0.8vw, 13px);
    line-height: 1.68;
}

#slide-28 .noventix-data-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    margin-top: clamp(18px, 2vh, 25px);
    padding: 12px 10px;
    background: #26384c;
    color: #f7f7f5;
    font-size: clamp(8px, 0.57vw, 10px);
    font-weight: 700;
    text-align: center;
}

#slide-28 .noventix-data-flow span:nth-child(even) {
    color: var(--nv-accent);
}

#slide-28 .noventix-detail-outcome,
#slide-29 .noventix-detail-outcome,
#slide-30 .noventix-detail-outcome {
    margin-top: auto;
    padding-top: clamp(16px, 1.7vh, 21px);
    border-top: 1px solid rgba(52, 123, 214, 0.24);
    color: #28384a;
    font-size: clamp(11px, 0.86vw, 14px);
    font-weight: 700;
    line-height: 1.45;
}


/* =========================================================
   05. slide-29 · COMPANY HISTORY
   Timeline / Graphite Insight
   ========================================================= */

#slide-29 .noventix-section--detail {
    grid-template-rows: minmax(0, 30fr) minmax(0, 70fr);
}

#slide-29 .section-bottom--noventix-detail {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(310px, 0.78fr);
    gap: clamp(26px, 2.8vw, 42px);
    padding:
        clamp(7px, 0.9vh, 12px) clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}

#slide-29 .noventix-detail-compare {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) clamp(26px, 2.2vw, 34px) minmax(0, 1fr);
    align-items: stretch;
}

#slide-29 .noventix-detail-insight {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.1vw, 34px);
    background: var(--nv-panel);
}

#slide-29 .noventix-detail-kicker {
    color: var(--nv-accent);
}

#slide-29 .noventix-detail-insight h3 {
    color: var(--nv-charcoal);
}

#slide-29 .noventix-detail-insight h3 .accent {
    color: var(--nv-accent);
}

#slide-29 .noventix-detail-insight>p:not(.noventix-detail-kicker) {
    color: var(--nv-copy);
}

#slide-29 .noventix-stage-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: clamp(20px, 2.2vh, 28px);
    padding-top: 24px;
    color: var(--nv-charcoal);
    font-size: clamp(9px, 0.66vw, 11px);
    font-weight: 700;
    text-align: center;
}

#slide-29 .noventix-stage-flow::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: rgba(52, 123, 214, 0.45);
}

#slide-29 .noventix-stage-flow span:nth-child(even) {
    display: none;
}

#slide-29 .noventix-stage-flow span:nth-child(odd) {
    position: relative;
}

#slide-29 .noventix-stage-flow span:nth-child(odd)::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    width: 7px;
    height: 7px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--nv-accent);
    box-shadow: 0 0 0 4px rgba(52, 123, 214, 0.10);
}

#slide-29 .noventix-detail-outcome {
    border-top-color: rgba(184, 217, 67, 0.24);
    color: var(--nv-accent);
}


/* =========================================================
   06. slide-30 · BUSINESS MODEL / RESULT
   Graphite Finale
   ========================================================= */

#slide-30 .noventix-section--result {
    grid-template-rows: minmax(0, 29fr) minmax(0, 71fr);
    background: var(--nv-ivory);
}

#slide-30 .section-top--noventix-result {
    position: relative;
}

#slide-30 .section-top--noventix-result::after {
    content: "";
    position: absolute;
    left: clamp(62px, 5.2vw, 88px);
    right: clamp(62px, 5.2vw, 88px);
    bottom: 0;
    height: 1px;
    background: rgba(52, 123, 214, 0.22);
}

#slide-30 .section-eyebrow {
    color: #53606d;
}

#slide-30 .section-title {
    color: var(--nv-charcoal);
}

#slide-30 .section-title .accent,
#slide-30 .accent {
    color: var(--nv-accent);
}

#slide-30 .section-copy {
    color: var(--nv-copy);
}

#slide-30 .section-bottom--noventix-result {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.58fr) minmax(285px, 0.64fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap:
        clamp(16px, 1.8vh, 23px) clamp(26px, 2.8vw, 42px);
    padding:
        clamp(8px, 1vh, 13px) clamp(62px, 5.2vw, 88px) clamp(54px, 5.6vh, 70px);
}

#slide-30 .noventix-detail-compare {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr) clamp(27px, 2.3vw, 36px) minmax(0, 1.08fr);
    align-items: stretch;
}

#slide-30 .noventix-detail-shot img {
    background: var(--nv-paper);
    border-color: rgba(255, 255, 255, 0.12);
}

#slide-30 .noventix-detail-shot--after img {
    border-color: rgba(52, 123, 214, 0.48);
}

#slide-30 .noventix-detail-shot figcaption {
    color: var(--nv-muted);
}

#slide-30 .noventix-detail-arrow {
    color: var(--nv-accent);
}

#slide-30 .noventix-detail-insight {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 1.9vw, 30px);
    border-top: 3px solid var(--nv-accent);
    background: var(--nv-panel);
}

#slide-30 .noventix-detail-kicker {
    color: var(--nv-accent);
}

#slide-30 .noventix-detail-insight h3 {
    color: var(--nv-charcoal);
}

#slide-30 .noventix-detail-insight h3 .accent {
    color: var(--nv-accent);
}

#slide-30 .noventix-detail-insight>p:not(.noventix-detail-kicker) {
    color: var(--nv-copy);
}

#slide-30 .noventix-business-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.15fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    margin-top: clamp(18px, 2vh, 25px);
    padding: 12px 9px;
    border: 1px solid rgba(52, 123, 214, 0.18);
    color: var(--nv-charcoal);
    font-size: clamp(7px, 0.53vw, 9px);
    font-weight: 700;
    text-align: center;
}

#slide-30 .noventix-business-flow span:nth-child(even) {
    color: var(--nv-accent);
}

#slide-30 .noventix-detail-outcome {
    border-top-color: rgba(52, 123, 214, 0.22);
    color: var(--nv-accent);
}

#slide-30 .noventix-project-takeaway {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(52, 123, 214, 0.48);
    border-bottom: 1px solid var(--nv-line);
}

#slide-30 .noventix-project-takeaway>div {
    min-width: 0;
    padding:
        clamp(13px, 1.4vh, 17px) clamp(16px, 1.25vw, 20px);
    border-right: 1px solid var(--nv-line);
}

#slide-30 .noventix-project-takeaway>div:last-child {
    border-right: 0;
}

#slide-30 .noventix-project-takeaway strong {
    display: block;
    color: var(--nv-accent);
    font-size: clamp(9px, 0.63vw, 11px);
    font-weight: 700;
    letter-spacing: 0.04em;
}

#slide-30 .noventix-project-takeaway span {
    display: block;
    margin-top: 6px;
    color: var(--nv-copy);
    font-size: clamp(9px, 0.7vw, 12px);
    line-height: 1.48;
}


/* =========================================================
   07. NOVENTIX · SMALLER DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

    #slide-26 .section-bottom--noventix-overview,
    #slide-28 .section-bottom--noventix-detail,
    #slide-29 .section-bottom--noventix-detail,
    #slide-30 .section-bottom--noventix-result {
        column-gap: 24px;
    }

    #slide-27 .noventix-strategy-card {
        grid-template-columns: 50px minmax(0, 1fr);
        padding: 17px;
    }

    #slide-30 .noventix-business-flow {
        font-size: 8px;
    }
}


/* =========================================================
   08. NOVENTIX · LOW HEIGHT
   ========================================================= */

@media (max-height: 760px) and (min-width: 769px) {

    #slide-26 .noventix-section--overview,
    #slide-27 .noventix-section--strategy,
    #slide-28 .noventix-section--detail,
    #slide-29 .noventix-section--detail,
    #slide-30 .noventix-section--result {
        grid-template-rows: minmax(0, 28fr) minmax(0, 72fr);
    }

    #slide-26 .section-top--noventix,
    #slide-27 .section-top--noventix-strategy,
    #slide-28 .section-top--noventix-detail,
    #slide-29 .section-top--noventix-detail,
    #slide-30 .section-top--noventix-result {
        padding-top: 30px;
        padding-bottom: 14px;
    }

    #slide-26 .section-title,
    #slide-27 .section-title,
    #slide-28 .section-title,
    #slide-29 .section-title,
    #slide-30 .section-title {
        font-size: clamp(27px, 2.3vw, 35px);
    }

    #slide-26 .section-copy,
    #slide-27 .section-copy,
    #slide-28 .section-copy,
    #slide-29 .section-copy,
    #slide-30 .section-copy {
        margin-top: 11px;
        font-size: clamp(11px, 0.84vw, 14px);
    }

    #slide-27 .noventix-strategy-card {
        padding: 14px 16px;
    }

    #slide-27 .noventix-strategy-number {
        font-size: 40px;
    }

    #slide-28 .noventix-detail-insight,
    #slide-29 .noventix-detail-insight,
    #slide-30 .noventix-detail-insight {
        padding: 19px;
    }
}


/* =========================================================
   09. NOVENTIX · TABLET
   ========================================================= */

@media (max-width: 900px) {

    #slide-26 .noventix-section--overview,
    #slide-27 .noventix-section--strategy,
    #slide-28 .noventix-section--detail,
    #slide-29 .noventix-section--detail,
    #slide-30 .noventix-section--result {
        display: block;
        height: auto;
        min-height: 100vh;
    }

    #slide-26 .section-top--noventix,
    #slide-27 .section-top--noventix-strategy,
    #slide-28 .section-top--noventix-detail,
    #slide-29 .section-top--noventix-detail,
    #slide-30 .section-top--noventix-result {
        padding: 42px 30px 24px;
    }

    #slide-26 .section-title,
    #slide-27 .section-title,
    #slide-28 .section-title,
    #slide-29 .section-title,
    #slide-30 .section-title {
        font-size: clamp(27px, 3.7vw, 35px);
    }

    #slide-26 .section-bottom--noventix-overview,
    #slide-28 .section-bottom--noventix-detail,
    #slide-29 .section-bottom--noventix-detail,
    #slide-30 .section-bottom--noventix-result {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 24px;
        padding: 10px 30px 62px;
    }

    #slide-26 .noventix-cover-compare,
    #slide-28 .noventix-detail-compare,
    #slide-29 .noventix-detail-compare,
    #slide-30 .noventix-detail-compare {
        min-height: 420px;
    }

    #slide-27 .section-bottom--noventix-strategy {
        padding: 10px 30px 62px;
    }

    #slide-27 .noventix-strategy-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    #slide-27 .noventix-strategy-card {
        min-height: 180px;
    }

    #slide-30 .noventix-project-takeaway {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #slide-30 .noventix-project-takeaway>div:nth-child(2) {
        border-right: 0;
    }

    #slide-30 .noventix-project-takeaway>div:nth-child(-n+2) {
        border-bottom: 1px solid var(--nv-line);
    }
}


/* =========================================================
   10. NOVENTIX · MOBILE
   ========================================================= */

@media (max-width: 640px) {

    #slide-26 .section-top--noventix,
    #slide-27 .section-top--noventix-strategy,
    #slide-28 .section-top--noventix-detail,
    #slide-29 .section-top--noventix-detail,
    #slide-30 .section-top--noventix-result {
        padding: 32px 22px 20px;
    }

    #slide-26 .section-title,
    #slide-27 .section-title,
    #slide-28 .section-title,
    #slide-29 .section-title,
    #slide-30 .section-title {
        font-size: clamp(24px, 6.2vw, 31px);
    }

    #slide-26 .section-copy,
    #slide-27 .section-copy,
    #slide-28 .section-copy,
    #slide-29 .section-copy,
    #slide-30 .section-copy {
        font-size: 13px;
    }

    #slide-26 .section-bottom--noventix-overview,
    #slide-27 .section-bottom--noventix-strategy,
    #slide-28 .section-bottom--noventix-detail,
    #slide-29 .section-bottom--noventix-detail,
    #slide-30 .section-bottom--noventix-result {
        padding-left: 22px;
        padding-right: 22px;
        padding-bottom: 58px;
    }

    #slide-26 .noventix-cover-compare,
    #slide-28 .noventix-detail-compare,
    #slide-29 .noventix-detail-compare,
    #slide-30 .noventix-detail-compare {
        grid-template-columns: 1fr;
        min-height: 0;
        row-gap: 16px;
    }

    #slide-26 .noventix-cover-arrow,
    #slide-28 .noventix-detail-arrow,
    #slide-29 .noventix-detail-arrow,
    #slide-30 .noventix-detail-arrow {
        transform: rotate(90deg);
        min-height: 30px;
    }

    #slide-26 .noventix-cover-shot img,
    #slide-28 .noventix-detail-shot img,
    #slide-29 .noventix-detail-shot img,
    #slide-30 .noventix-detail-shot img {
        min-height: 220px;
    }

    #slide-27 .noventix-strategy-card {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    #slide-27 .noventix-reading-flow {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    #slide-27 .noventix-reading-flow span:nth-child(even) {
        transform: rotate(90deg);
    }

    #slide-29 .noventix-stage-flow {
        grid-template-columns: 1fr;
        row-gap: 18px;
        padding-top: 0;
        text-align: left;
    }

    #slide-29 .noventix-stage-flow::before {
        top: 4px;
        bottom: 4px;
        left: 4px;
        right: auto;
        width: 1px;
        height: auto;
    }

    #slide-29 .noventix-stage-flow span:nth-child(odd) {
        padding-left: 20px;
    }

    #slide-29 .noventix-stage-flow span:nth-child(odd)::before {
        top: 50%;
        left: 4px;
        transform: translate(-50%, -50%);
    }

    #slide-30 .noventix-business-flow {
        grid-template-columns: 1fr;
        row-gap: 7px;
    }

    #slide-30 .noventix-business-flow span:nth-child(even) {
        transform: rotate(90deg);
    }

    #slide-30 .noventix-project-takeaway {
        grid-template-columns: 1fr;
    }

    #slide-30 .noventix-project-takeaway>div {
        border-right: 0;
        border-bottom: 1px solid var(--nv-line);
    }

    #slide-30 .noventix-project-takeaway>div:last-child {
        border-bottom: 0;
    }
}

/* =========================================================
   IR + STORY IP PITCH DECK
   slide-31 ~ slide-38

   Portfolio UI:
   Warm Paper × Portfolio Blue × Graphite
   ========================================================= */


/* =========================================================
   01. SHARED TOKENS
   ========================================================= */

#slide-31,
#slide-32,
#slide-33,
#slide-34,
#slide-35,
#slide-36,
#slide-37,
#slide-38 {
    --pitch-paper: #f3f0e9;
    --pitch-paper-2: #e9e7e1;

    --pitch-ink: #171a20;
    --pitch-copy: #59616c;
    --pitch-muted: #737a84;

    --pitch-line: #d8d6d0;

    --pitch-blue: #347bd6;
    --pitch-blue-deep: #315d91;
    --pitch-blue-soft: #dce8f4;

    --pitch-panel: #e7ebef;
}


/* =========================================================
      02. SHARED CANVAS
      ========================================================= */

#slide-31 .content-section,
#slide-32 .content-section,
#slide-33 .content-section,
#slide-34 .content-section,
#slide-35 .content-section,
#slide-36 .content-section,
#slide-37 .content-section,
#slide-38 .content-section {
    position: relative;

    display: grid;

    background:
        var(--pitch-paper);
}


/* =========================================================
      03. SHARED TYPOGRAPHY
      ========================================================= */

#slide-31 .section-eyebrow,
#slide-32 .section-eyebrow,
#slide-33 .section-eyebrow,
#slide-34 .section-eyebrow,
#slide-35 .section-eyebrow,
#slide-36 .section-eyebrow,
#slide-37 .section-eyebrow,
#slide-38 .section-eyebrow {
    margin:
        0 0 clamp(13px, 1.4vh, 18px);

    color:
        #53606d;

    font-size:
        clamp(10px, 0.72vw, 12px);

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        0.035em;
}


#slide-31 .section-title,
#slide-32 .section-title,
#slide-33 .section-title,
#slide-34 .section-title,
#slide-35 .section-title,
#slide-36 .section-title,
#slide-37 .section-title,
#slide-38 .section-title {
    width:
        100%;

    max-width:
        1180px;

    margin:
        0;

    color:
        var(--pitch-ink);

    font-size:
        clamp(31px, 2.55vw, 42px);

    font-weight:
        700;

    line-height:
        1.15;

    letter-spacing:
        -0.045em;

    word-break:
        keep-all;
}


#slide-31 .accent,
#slide-32 .accent,
#slide-33 .accent,
#slide-34 .accent,
#slide-35 .accent,
#slide-36 .accent,
#slide-37 .accent,
#slide-38 .accent {
    color:
        var(--pitch-blue);
}


#slide-31 .section-copy,
#slide-32 .section-copy,
#slide-33 .section-copy,
#slide-34 .section-copy,
#slide-35 .section-copy,
#slide-36 .section-copy,
#slide-37 .section-copy,
#slide-38 .section-copy {
    max-width:
        1040px;

    margin:
        clamp(14px, 1.55vh, 20px) 0 0;

    color:
        var(--pitch-copy);

    font-size:
        clamp(13px, 0.94vw, 16px);

    font-weight:
        400;

    line-height:
        1.62;

    letter-spacing:
        -0.02em;

    word-break:
        keep-all;
}


/* =========================================================
      04. SHARED TOP
      ========================================================= */

#slide-31 .section-top--ir,
#slide-32 .section-top--pitch-detail,
#slide-33 .section-top--pitch-detail,
#slide-34 .section-top--pitch-result,
#slide-35 .section-top--ip,
#slide-36 .section-top--ip-detail,
#slide-37 .section-top--ip-detail,
#slide-38 .section-top--pitch-result {
    display:
        flex;

    align-items:
        flex-end;

    padding:
        clamp(40px, 4.6vh, 59px) clamp(62px, 5.2vw, 88px) clamp(17px, 2vh, 26px);
}


/* =========================================================
      05. SHARED LABEL
      ========================================================= */

#slide-31 .pitch-shot-label,
#slide-32 .pitch-shot-label,
#slide-33 .pitch-shot-label,
#slide-34 .pitch-shot-label,
#slide-35 .pitch-shot-label,
#slide-36 .pitch-shot-label,
#slide-37 .pitch-shot-label,
#slide-38 .pitch-shot-label {
    position:
        absolute;

    top:
        12px;

    left:
        12px;

    z-index:
        4;

    padding:
        6px 9px;

    background:
        rgba(243, 240, 233, 0.95);

    color:
        #596673;

    font-size:
        clamp(9px, 0.64vw, 11px);

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.05em;
}


#slide-31 .pitch-shot-label--focus,
#slide-32 .pitch-shot-label--focus,
#slide-33 .pitch-shot-label--focus,
#slide-34 .pitch-shot-label--focus,
#slide-35 .pitch-shot-label--focus,
#slide-36 .pitch-shot-label--focus,
#slide-37 .pitch-shot-label--focus,
#slide-38 .pitch-shot-label--focus {
    background:
        var(--pitch-blue);

    color:
        #fff;
}


/* =========================================================
      06. SHARED PANEL
      ========================================================= */

.pitch-panel-kicker {
    margin:
        0;

    color:
        var(--pitch-blue);

    font-size:
        clamp(9px, 0.64vw, 11px);

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.05em;
}


/* =========================================================
      slide-31 · IR OVERVIEW
      ========================================================= */

#slide-31 .ir-section--overview {
    grid-template-rows:
        minmax(0, 30fr) minmax(0, 70fr);
}


#slide-31 .section-bottom--ir-overview {
    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.58fr) minmax(280px, 0.68fr);

    grid-template-rows:
        minmax(0, 1fr) auto;

    gap:
        clamp(17px, 1.9vh, 23px) clamp(28px, 3vw, 46px);

    padding:
        clamp(7px, 0.9vh, 12px) clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


#slide-31 .ir-overview-cover {
    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    margin:
        0;

    display:
        grid;

    grid-template-rows:
        minmax(0, 1fr) auto;
}


#slide-31 .ir-overview-cover img {
    width:
        100%;

    height:
        100%;

    min-height:
        0;

    object-fit:
        contain;

    background:
        var(--pitch-paper-2);

    border:
        1px solid var(--pitch-line);
}


#slide-31 .ir-overview-cover figcaption,
#slide-35 .ip-overview-cover figcaption {
    padding-top:
        10px;

    color:
        #626b75;

    font-size:
        clamp(10px, 0.73vw, 12px);

    line-height:
        1.45;
}


#slide-31 .ir-overview-cover figcaption strong,
#slide-35 .ip-overview-cover figcaption strong {
    display:
        block;

    margin-bottom:
        2px;

    color:
        #222830;

    font-size:
        clamp(11px, 0.8vw, 13px);
}


#slide-31 .ir-overview-cover figcaption span,
#slide-35 .ip-overview-cover figcaption span {
    display:
        block;
}


#slide-31 .ir-overview-summary {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        clamp(22px, 1.9vw, 30px);

    border-top:
        3px solid var(--pitch-blue);

    background:
        var(--pitch-panel);
}


#slide-31 .ir-overview-summary h3,
#slide-35 .ip-overview-summary h3 {
    margin:
        clamp(17px, 1.8vh, 23px) 0 0;

    color:
        var(--pitch-ink);

    font-size:
        clamp(19px, 1.46vw, 24px);

    font-weight:
        700;

    line-height:
        1.35;

    letter-spacing:
        -0.04em;
}


#slide-31 .ir-overview-summary>p:not(.pitch-panel-kicker),
#slide-35 .ip-overview-summary>p:not(.pitch-panel-kicker) {
    margin:
        clamp(17px, 1.85vh, 24px) 0 0;

    color:
        var(--pitch-copy);

    font-size:
        clamp(11px, 0.82vw, 14px);

    line-height:
        1.68;
}


#slide-31 .ir-overview-flow {
    display:
        grid;

    grid-template-columns:
        1fr auto 1fr auto 1.2fr auto 1fr auto 1fr auto 1fr;

    align-items:
        center;

    gap:
        4px;

    margin-top:
        clamp(18px, 2vh, 25px);

    padding:
        11px 8px;

    background:
        #26384c;

    color:
        #fff;

    font-size:
        clamp(7px, 0.51vw, 9px);

    font-weight:
        700;

    text-align:
        center;
}


#slide-31 .ir-overview-flow i {
    color:
        #8bbcf3;

    font-style:
        normal;
}


#slide-31 .ir-overview-stats {
    margin-top:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid rgba(52, 123, 214, 0.24);
}


#slide-31 .ir-overview-stats>div {
    padding-top:
        clamp(14px, 1.55vh, 19px);
}


#slide-31 .ir-overview-stats strong {
    display:
        block;

    color:
        #26384c;

    font-size:
        clamp(18px, 1.45vw, 24px);

    font-weight:
        700;
}


#slide-31 .ir-overview-stats span {
    display:
        block;

    margin-top:
        3px;

    color:
        #6c7580;

    font-size:
        clamp(8px, 0.56vw, 10px);

    font-weight:
        700;

    letter-spacing:
        0.04em;
}


#slide-31 .ir-page-map {
    grid-column:
        1 / -1;

    display:
        grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    border-top:
        1px solid var(--pitch-line);
}


#slide-31 .ir-page-map>div {
    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

    padding:
        clamp(11px, 1.15vh, 15px) clamp(11px, 0.9vw, 15px);

    border-right:
        1px solid var(--pitch-line);
}


#slide-31 .ir-page-map>div:last-child {
    border-right:
        0;
}


#slide-31 .ir-page-map strong {
    color:
        #9abde4;

    font-size:
        clamp(16px, 1.18vw, 20px);

    font-weight:
        400;
}


#slide-31 .ir-page-map span {
    color:
        #27313b;

    font-size:
        clamp(9px, 0.67vw, 11px);

    font-weight:
        700;
}


/* =========================================================
      slide-32 / slide-33 · IR LARGE PAIR
      ========================================================= */

#slide-32 .pitch-detail-section,
#slide-33 .pitch-detail-section {
    grid-template-rows:
        minmax(0, 28fr) minmax(0, 72fr);
}


#slide-32 .section-bottom--pitch-detail,
#slide-33 .section-bottom--pitch-detail {
    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.78fr) minmax(260px, 0.56fr);

    gap:
        clamp(26px, 2.8vw, 42px);

    padding:
        3px clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


#slide-32 .pitch-large-pair,
#slide-33 .pitch-large-pair {
    min-width:
        0;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) clamp(30px, 2.6vw, 41px) minmax(0, 1fr);

    align-items:
        stretch;
}


#slide-32 .pitch-large-shot,
#slide-33 .pitch-large-shot {
    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    margin:
        0;

    display:
        grid;

    grid-template-rows:
        minmax(0, 1fr) auto;
}


#slide-32 .pitch-large-shot img,
#slide-33 .pitch-large-shot img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        0;

    object-fit:
        contain;

    background:
        var(--pitch-paper-2);

    border:
        1px solid var(--pitch-line);
}


#slide-32 .pitch-large-shot--focus img,
#slide-33 .pitch-large-shot--focus img {
    border-color:
        rgba(52, 123, 214, 0.52);
}


#slide-32 .pitch-large-shot figcaption,
#slide-33 .pitch-large-shot figcaption,
#slide-34 .ir-closing-pair figcaption,
#slide-38 .ip-closing-pair figcaption {
    padding-top:
        9px;

    color:
        #67717b;

    font-size:
        clamp(9px, 0.66vw, 11px);

    line-height:
        1.4;
}


.pitch-pair-arrow {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--pitch-blue);

    font-size:
        clamp(22px, 1.75vw, 29px);

    font-weight:
        300;
}


#slide-32 .pitch-detail-note,
#slide-33 .pitch-detail-note {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        clamp(22px, 1.9vw, 30px);

    border-top:
        3px solid var(--pitch-blue);

    background:
        var(--pitch-panel);
}


#slide-32 .pitch-detail-note h3,
#slide-33 .pitch-detail-note h3,
#slide-37 .ip-editorial-note h3 {
    margin:
        clamp(17px, 1.8vh, 23px) 0 0;

    color:
        var(--pitch-ink);

    font-size:
        clamp(19px, 1.46vw, 24px);

    font-weight:
        700;

    line-height:
        1.35;

    letter-spacing:
        -0.04em;
}


#slide-32 .pitch-detail-note>p:not(.pitch-panel-kicker),
#slide-33 .pitch-detail-note>p:not(.pitch-panel-kicker) {
    margin:
        clamp(17px, 1.9vh, 24px) 0 0;

    color:
        var(--pitch-copy);

    font-size:
        clamp(11px, 0.82vw, 14px);

    line-height:
        1.68;
}


.pitch-mini-flow {
    display:
        grid;

    grid-template-columns:
        1fr auto 1.2fr auto 1fr;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        clamp(18px, 2vh, 25px);

    padding:
        11px 8px;

    background:
        #26384c;

    color:
        #fff;

    font-size:
        clamp(8px, 0.56vw, 10px);

    font-weight:
        700;

    text-align:
        center;
}


.pitch-mini-flow i {
    color:
        #8bbcf3;

    font-style:
        normal;
}


.pitch-detail-result {
    margin-top:
        auto;

    padding-top:
        clamp(15px, 1.65vh, 20px);

    border-top:
        1px solid rgba(52, 123, 214, 0.24);

    color:
        #28384a;

    font-size:
        clamp(11px, 0.84vw, 14px);

    font-weight:
        700;

    line-height:
        1.45;
}


/* =========================================================
      slide-34 · IR TEAM / ASK
      ========================================================= */

#slide-34 .ir-system-section {
    grid-template-rows:
        minmax(0, 28fr) minmax(0, 72fr);
}


#slide-34 .section-bottom--ir-system {
    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.65fr) minmax(270px, 0.6fr);

    grid-template-rows:
        minmax(0, 1fr) auto;

    gap:
        clamp(16px, 1.75vh, 22px) clamp(27px, 2.8vw, 43px);

    padding:
        3px clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


#slide-34 .ir-closing-pair {
    min-width:
        0;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) clamp(30px, 2.6vw, 41px) minmax(0, 1fr);
}


#slide-34 .ir-closing-pair figure,
#slide-38 .ip-closing-pair figure {
    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    margin:
        0;

    display:
        grid;

    grid-template-rows:
        minmax(0, 1fr) auto;
}


#slide-34 .ir-closing-pair img,
#slide-38 .ip-closing-pair img {
    width:
        100%;

    height:
        100%;

    min-height:
        0;

    object-fit:
        contain;

    background:
        var(--pitch-paper-2);

    border:
        1px solid var(--pitch-line);
}


#slide-34 .ir-system-panel {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        clamp(21px, 1.85vw, 29px);

    border-top:
        3px solid var(--pitch-blue);

    background:
        var(--pitch-panel);
}


#slide-34 .ir-system-panel h3,
#slide-38 .ip-closing-system h3 {
    margin:
        clamp(17px, 1.8vh, 23px) 0 0;

    color:
        var(--pitch-ink);

    font-size:
        clamp(19px, 1.45vw, 24px);

    font-weight:
        700;

    line-height:
        1.35;

    letter-spacing:
        -0.04em;
}


#slide-34 .ir-system-items {
    margin-top:
        clamp(17px, 1.9vh, 24px);

    border-top:
        1px solid rgba(52, 123, 214, 0.22);
}


#slide-34 .ir-system-items>div {
    padding:
        clamp(11px, 1.15vh, 15px) 0;

    border-bottom:
        1px solid var(--pitch-line);
}


#slide-34 .ir-system-items strong {
    display:
        block;

    color:
        var(--pitch-blue);

    font-size:
        clamp(9px, 0.64vw, 11px);

    letter-spacing:
        0.04em;
}


#slide-34 .ir-system-items span {
    display:
        block;

    margin-top:
        4px;

    color:
        #606a75;

    font-size:
        clamp(9px, 0.68vw, 11px);

    line-height:
        1.45;
}


/* =========================================================
      SHARED TAKEAWAY
      ========================================================= */

.pitch-project-takeaway {
    grid-column:
        1 / -1;

    display:
        grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    align-items:
        center;

    gap:
        clamp(18px, 1.7vw, 26px);

    padding:
        clamp(13px, 1.4vh, 17px) clamp(18px, 1.5vw, 24px);

    border-top:
        1px solid var(--pitch-blue);

    background:
        rgba(255, 255, 255, 0.18);
}


.pitch-project-takeaway strong {
    color:
        var(--pitch-blue);

    font-size:
        clamp(9px, 0.64vw, 11px);

    letter-spacing:
        0.045em;
}


.pitch-project-takeaway p {
    margin:
        0;

    color:
        #4f5964;

    font-size:
        clamp(10px, 0.76vw, 13px);

    line-height:
        1.55;
}


/* =========================================================
      slide-35 · STORY IP OVERVIEW
      ========================================================= */

#slide-35 .ip-section--overview {
    grid-template-rows:
        minmax(0, 30fr) minmax(0, 70fr);
}


#slide-35 .section-bottom--ip-overview {
    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.4fr) minmax(300px, 0.8fr);

    grid-template-rows:
        minmax(0, 1fr) auto;

    gap:
        clamp(17px, 1.9vh, 23px) clamp(32px, 3.2vw, 50px);

    padding:
        clamp(7px, 0.9vh, 12px) clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


#slide-35 .ip-overview-cover {
    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    margin:
        0;

    display:
        grid;

    grid-template-rows:
        minmax(0, 1fr) auto;
}


#slide-35 .ip-overview-cover img {
    width:
        100%;

    height:
        100%;

    min-height:
        0;

    object-fit:
        contain;

    background:
        var(--pitch-paper-2);

    border:
        1px solid var(--pitch-line);
}


#slide-35 .ip-overview-summary {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        clamp(8px, 0.7vw, 11px) 0 clamp(5px, 0.5vw, 8px) clamp(8px, 0.7vw, 11px);

    border-left:
        1px solid var(--pitch-line);
}


#slide-35 .ip-overview-summary>* {
    margin-left:
        clamp(22px, 2vw, 30px);
}


#slide-35 .ip-overview-flow {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        clamp(21px, 2.3vh, 29px);

    padding-top:
        clamp(17px, 1.9vh, 23px);

    border-top:
        1px solid var(--pitch-line);

    color:
        #26384c;

    font-size:
        clamp(8px, 0.57vw, 10px);

    font-weight:
        700;
}


#slide-35 .ip-overview-flow i {
    color:
        var(--pitch-blue);

    font-style:
        normal;
}


#slide-35 .ip-overview-principle {
    margin-top:
        auto;

    padding-top:
        clamp(17px, 1.9vh, 23px);

    border-top:
        1px solid rgba(52, 123, 214, 0.22);
}


#slide-35 .ip-overview-principle small {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #69727d;

    font-size:
        clamp(8px, 0.58vw, 10px);

    font-weight:
        700;

    letter-spacing:
        0.05em;
}


#slide-35 .ip-overview-principle strong {
    display:
        block;

    color:
        #26384c;

    font-size:
        clamp(21px, 1.7vw, 28px);

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.045em;
}


#slide-35 .ip-page-map {
    grid-column:
        1 / -1;

    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    border-top:
        1px solid var(--pitch-line);
}


#slide-35 .ip-page-map>div {
    display:
        flex;

    align-items:
        baseline;

    gap:
        9px;

    padding:
        clamp(11px, 1.15vh, 15px) clamp(12px, 1vw, 16px);

    border-right:
        1px solid var(--pitch-line);
}


#slide-35 .ip-page-map>div:last-child {
    border-right:
        0;
}


#slide-35 .ip-page-map strong {
    color:
        #9abde4;

    font-size:
        clamp(17px, 1.25vw, 21px);

    font-weight:
        400;
}


#slide-35 .ip-page-map span {
    color:
        #27313b;

    font-size:
        clamp(10px, 0.72vw, 12px);

    font-weight:
        700;
}


/* =========================================================
      slide-36 / slide-37 · SINGLE LARGE WORK
      ========================================================= */

#slide-36 .ip-editorial-section,
#slide-37 .ip-editorial-section {
    grid-template-rows:
        minmax(0, 28fr) minmax(0, 72fr);
}


#slide-36 .section-bottom--ip-single,
#slide-37 .section-bottom--ip-single {
    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.72fr) minmax(270px, 0.58fr);

    gap:
        clamp(29px, 3vw, 47px);

    padding:
        3px clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


#slide-36 .ip-single-shot,
#slide-37 .ip-single-shot {
    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    margin:
        0;

    display:
        grid;

    grid-template-rows:
        minmax(0, 1fr) auto;
}


#slide-36 .ip-single-shot img,
#slide-37 .ip-single-shot img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        0;

    object-fit:
        contain;

    background:
        var(--pitch-paper-2);

    border:
        1px solid var(--pitch-line);
}


#slide-36 .ip-single-shot figcaption,
#slide-37 .ip-single-shot figcaption {
    padding-top:
        9px;

    color:
        #67717b;

    font-size:
        clamp(9px, 0.67vw, 11px);

    line-height:
        1.4;
}


#slide-36 .ip-editorial-note,
#slide-37 .ip-editorial-note {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        clamp(22px, 1.9vw, 30px);

    border-top:
        3px solid var(--pitch-blue);

    background:
        rgba(255, 255, 255, 0.18);
}


#slide-36 .ip-editorial-note blockquote {
    margin:
        clamp(22px, 2.4vh, 30px) 0 0;

    color:
        #26384c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(21px, 1.75vw, 29px);

    font-weight:
        700;

    line-height:
        1.35;

    letter-spacing:
        -0.035em;
}


#slide-36 .ip-editorial-note>p:not(.pitch-panel-kicker),
#slide-37 .ip-editorial-note>p:not(.pitch-panel-kicker) {
    margin:
        clamp(18px, 2vh, 25px) 0 0;

    color:
        var(--pitch-copy);

    font-size:
        clamp(11px, 0.83vw, 14px);

    line-height:
        1.72;
}


/* =========================================================
      slide-38 · ARC / MARKET
      ========================================================= */

#slide-38 .ip-closing-section {
    grid-template-rows:
        minmax(0, 28fr) minmax(0, 72fr);
}


#slide-38 .section-bottom--ip-closing {
    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.58fr) minmax(280px, 0.63fr);

    grid-template-rows:
        minmax(0, 1fr) auto;

    gap:
        clamp(16px, 1.75vh, 22px) clamp(28px, 3vw, 45px);

    padding:
        3px clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


#slide-38 .ip-closing-pair {
    min-width:
        0;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) clamp(29px, 2.5vw, 39px) minmax(0, 1fr);
}


#slide-38 .ip-closing-system {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        clamp(21px, 1.85vw, 29px);

    border-top:
        3px solid var(--pitch-blue);

    background:
        var(--pitch-panel);
}


#slide-38 .ip-system-list {
    margin-top:
        clamp(17px, 1.9vh, 24px);

    border-top:
        1px solid rgba(52, 123, 214, 0.22);
}


#slide-38 .ip-system-list>div {
    display:
        grid;

    grid-template-columns:
        28px minmax(0, 1fr);

    align-items:
        center;

    gap:
        11px;

    padding:
        clamp(10px, 1.1vh, 14px) 0;

    border-bottom:
        1px solid var(--pitch-line);
}


#slide-38 .ip-system-list p {
    margin:
        0;
}


#slide-38 .ip-system-list strong {
    display:
        block;

    color:
        #29343f;

    font-size:
        clamp(9px, 0.64vw, 11px);

    letter-spacing:
        0.025em;
}


#slide-38 .ip-system-list small {
    display:
        block;

    margin-top:
        2px;

    color:
        #6b7480;

    font-size:
        clamp(8px, 0.56vw, 10px);
}


#slide-38 .ip-system-swatch {
    width:
        24px;

    height:
        24px;

    border:
        1px solid rgba(0, 0, 0, 0.08);
}


#slide-38 .ip-system-swatch--burgundy {
    background:
        #6f263d;
}


#slide-38 .ip-system-swatch--pink {
    background:
        #c99ca8;
}


#slide-38 .ip-system-swatch--ivory {
    background:
        #efe8dc;
}


#slide-38 .ip-type-token {
    width:
        24px;

    height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #26384c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        13px;

    font-weight:
        700;
}


/* =========================================================
      LOW HEIGHT
      ========================================================= */

@media (max-height: 760px) and (min-width: 901px) {

    #slide-31 .ir-section--overview,
    #slide-32 .pitch-detail-section,
    #slide-33 .pitch-detail-section,
    #slide-34 .ir-system-section,
    #slide-35 .ip-section--overview,
    #slide-36 .ip-editorial-section,
    #slide-37 .ip-editorial-section,
    #slide-38 .ip-closing-section {
        grid-template-rows:
            minmax(0, 26fr) minmax(0, 74fr);
    }


    #slide-31 .section-top--ir,
    #slide-32 .section-top--pitch-detail,
    #slide-33 .section-top--pitch-detail,
    #slide-34 .section-top--pitch-result,
    #slide-35 .section-top--ip,
    #slide-36 .section-top--ip-detail,
    #slide-37 .section-top--ip-detail,
    #slide-38 .section-top--pitch-result {
        padding-top:
            30px;

        padding-bottom:
            13px;
    }


    #slide-31 .section-title,
    #slide-32 .section-title,
    #slide-33 .section-title,
    #slide-34 .section-title,
    #slide-35 .section-title,
    #slide-36 .section-title,
    #slide-37 .section-title,
    #slide-38 .section-title {
        font-size:
            clamp(27px, 2.25vw, 34px);
    }


    #slide-31 .section-copy,
    #slide-32 .section-copy,
    #slide-33 .section-copy,
    #slide-34 .section-copy,
    #slide-35 .section-copy,
    #slide-36 .section-copy,
    #slide-37 .section-copy,
    #slide-38 .section-copy {
        margin-top:
            10px;

        font-size:
            clamp(11px, 0.82vw, 14px);
    }
}


/* =========================================================
      TABLET
      ========================================================= */

@media (max-width: 900px) {

    #slide-31 .content-section,
    #slide-32 .content-section,
    #slide-33 .content-section,
    #slide-34 .content-section,
    #slide-35 .content-section,
    #slide-36 .content-section,
    #slide-37 .content-section,
    #slide-38 .content-section {
        display:
            block;

        height:
            auto;

        min-height:
            100vh;
    }


    #slide-31 .section-top--ir,
    #slide-32 .section-top--pitch-detail,
    #slide-33 .section-top--pitch-detail,
    #slide-34 .section-top--pitch-result,
    #slide-35 .section-top--ip,
    #slide-36 .section-top--ip-detail,
    #slide-37 .section-top--ip-detail,
    #slide-38 .section-top--pitch-result {
        padding:
            42px 30px 24px;
    }


    #slide-31 .section-bottom--ir-overview,
    #slide-32 .section-bottom--pitch-detail,
    #slide-33 .section-bottom--pitch-detail,
    #slide-34 .section-bottom--ir-system,
    #slide-35 .section-bottom--ip-overview,
    #slide-36 .section-bottom--ip-single,
    #slide-37 .section-bottom--ip-single,
    #slide-38 .section-bottom--ip-closing {
        grid-template-columns:
            1fr;

        grid-template-rows:
            auto;

        row-gap:
            24px;

        padding:
            10px 30px 62px;
    }


    #slide-31 .ir-page-map,
    #slide-35 .ip-page-map,
    .pitch-project-takeaway {
        grid-column:
            1;
    }


    #slide-32 .pitch-large-pair,
    #slide-33 .pitch-large-pair,
    #slide-34 .ir-closing-pair,
    #slide-38 .ip-closing-pair {
        min-height:
            420px;
    }
}


/* =========================================================
      MOBILE
      ========================================================= */

@media (max-width: 640px) {

    #slide-31 .section-top--ir,
    #slide-32 .section-top--pitch-detail,
    #slide-33 .section-top--pitch-detail,
    #slide-34 .section-top--pitch-result,
    #slide-35 .section-top--ip,
    #slide-36 .section-top--ip-detail,
    #slide-37 .section-top--ip-detail,
    #slide-38 .section-top--pitch-result {
        padding:
            32px 22px 20px;
    }


    #slide-31 .section-title,
    #slide-32 .section-title,
    #slide-33 .section-title,
    #slide-34 .section-title,
    #slide-35 .section-title,
    #slide-36 .section-title,
    #slide-37 .section-title,
    #slide-38 .section-title {
        font-size:
            clamp(24px, 6.2vw, 31px);
    }


    #slide-31 .section-bottom--ir-overview,
    #slide-32 .section-bottom--pitch-detail,
    #slide-33 .section-bottom--pitch-detail,
    #slide-34 .section-bottom--ir-system,
    #slide-35 .section-bottom--ip-overview,
    #slide-36 .section-bottom--ip-single,
    #slide-37 .section-bottom--ip-single,
    #slide-38 .section-bottom--ip-closing {
        padding-left:
            22px;

        padding-right:
            22px;

        padding-bottom:
            58px;
    }


    #slide-32 .pitch-large-pair,
    #slide-33 .pitch-large-pair,
    #slide-34 .ir-closing-pair,
    #slide-38 .ip-closing-pair {
        grid-template-columns:
            1fr;

        min-height:
            0;

        row-gap:
            16px;
    }


    .pitch-pair-arrow {
        min-height:
            30px;

        transform:
            rotate(90deg);
    }


    #slide-31 .ir-page-map,
    #slide-35 .ip-page-map {
        grid-template-columns:
            1fr;
    }


    #slide-31 .ir-page-map>div,
    #slide-35 .ip-page-map>div {
        border-right:
            0;

        border-bottom:
            1px solid var(--pitch-line);
    }


    #slide-31 .ir-overview-flow {
        grid-template-columns:
            1fr;

        gap:
            8px;
    }


    #slide-31 .ir-overview-flow i {
        transform:
            rotate(90deg);
    }


    #slide-31 .ir-overview-stats {
        grid-template-columns:
            1fr;
    }


    .pitch-project-takeaway {
        grid-template-columns:
            1fr;

        gap:
            8px;
    }
}

/* =========================================================
   SUMMER BODY PROJECT
   B2C SEASON PROMOTION
   slide-40 ~ slide-43

   Portfolio UI:
   Warm Paper × Portfolio Blue × Graphite
   ========================================================= */


/* =========================================================
   01. TOKENS
   ========================================================= */

#slide-40,
#slide-41,
#slide-42,
#slide-43 {
    --sb-paper: #f3f0e9;
    --sb-paper-2: #e9e7e1;

    --sb-ink: #171a20;
    --sb-copy: #59616c;
    --sb-muted: #737a84;

    --sb-line: #d8d6d0;

    --sb-blue: #347bd6;
    --sb-blue-deep: #315d91;
    --sb-blue-soft: #dce8f4;

    --sb-panel: #e7ebef;
}


/* =========================================================
   02. SHARED
   ========================================================= */

#slide-40 .sb-section,
#slide-41 .sb-section,
#slide-42 .sb-section,
#slide-43 .sb-section {
    position: relative;

    display: grid;

    background: var(--sb-paper);
}


#slide-40 .section-eyebrow,
#slide-41 .section-eyebrow,
#slide-42 .section-eyebrow,
#slide-43 .section-eyebrow {
    margin:
        0 0 clamp(13px, 1.4vh, 18px);

    color: #53606d;

    font-size:
        clamp(10px, 0.72vw, 12px);

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.035em;
}


#slide-40 .section-title,
#slide-41 .section-title,
#slide-42 .section-title,
#slide-43 .section-title {
    width: 100%;
    max-width: 1180px;

    margin: 0;

    color: var(--sb-ink);

    font-size:
        clamp(31px, 2.55vw, 42px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -0.045em;

    word-break: keep-all;
}


#slide-40 .accent,
#slide-41 .accent,
#slide-42 .accent,
#slide-43 .accent {
    color: var(--sb-blue);
}


#slide-40 .section-copy,
#slide-41 .section-copy,
#slide-42 .section-copy,
#slide-43 .section-copy {
    max-width: 1040px;

    margin:
        clamp(14px, 1.55vh, 20px) 0 0;

    color: var(--sb-copy);

    font-size:
        clamp(13px, 0.94vw, 16px);

    line-height: 1.62;

    letter-spacing: -0.02em;

    word-break: keep-all;
}


#slide-40 .section-top--sb,
#slide-41 .section-top--sb-gallery,
#slide-42 .section-top--sb-gallery,
#slide-43 .section-top--sb-result {
    display: flex;
    align-items: flex-end;

    padding:
        clamp(40px, 4.6vh, 59px) clamp(62px, 5.2vw, 88px) clamp(17px, 2vh, 26px);
}


/* =========================================================
   SHARED LABEL / KICKER
   ========================================================= */

#slide-40 .sb-shot-label {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 3;

    padding: 6px 9px;

    background:
        rgba(243, 240, 233, 0.95);

    color: #596673;

    font-size:
        clamp(9px, 0.64vw, 11px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.05em;
}


.sb-panel-kicker {
    margin: 0;

    color: var(--sb-blue);

    font-size:
        clamp(9px, 0.64vw, 11px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.05em;
}


/* =========================================================
   03. slide-40 · OVERVIEW
   ========================================================= */

#slide-40 .sb-section--overview {
    grid-template-rows:
        minmax(0, 30fr) minmax(0, 70fr);
}


#slide-40 .section-bottom--sb-overview {
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1.48fr) minmax(290px, 0.72fr);

    grid-template-rows:
        minmax(0, 1fr) auto;

    gap:
        clamp(17px, 1.9vh, 23px) clamp(30px, 3.1vw, 48px);

    padding:
        clamp(7px, 0.9vh, 12px) clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


#slide-40 .sb-overview-hero {
    position: relative;

    min-width: 0;
    min-height: 0;

    margin: 0;

    display: grid;

    grid-template-rows:
        minmax(0, 1fr) auto;
}


#slide-40 .sb-overview-hero img {
    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: contain;

    background: var(--sb-paper-2);

    border:
        1px solid var(--sb-line);
}


#slide-40 .sb-overview-hero figcaption {
    padding-top: 10px;

    color: #626b75;

    font-size:
        clamp(10px, 0.73vw, 12px);

    line-height: 1.45;
}


#slide-40 .sb-overview-hero figcaption strong {
    display: block;

    margin-bottom: 2px;

    color: #222830;

    font-size:
        clamp(11px, 0.8vw, 13px);
}


#slide-40 .sb-overview-hero figcaption span {
    display: block;
}


#slide-40 .sb-overview-summary {
    min-width: 0;

    display: flex;

    flex-direction: column;

    padding:
        clamp(22px, 1.9vw, 30px);

    border-top:
        3px solid var(--sb-blue);

    background:
        var(--sb-panel);
}


#slide-40 .sb-overview-summary h3,
#slide-43 .sb-original-system h3 {
    margin:
        clamp(17px, 1.8vh, 23px) 0 0;

    color: var(--sb-ink);

    font-size:
        clamp(19px, 1.46vw, 24px);

    font-weight: 700;

    line-height: 1.35;

    letter-spacing: -0.04em;
}


#slide-40 .sb-overview-summary>p:not(.sb-panel-kicker) {
    margin:
        clamp(17px, 1.85vh, 24px) 0 0;

    color: var(--sb-copy);

    font-size:
        clamp(11px, 0.82vw, 14px);

    line-height: 1.68;
}


#slide-40 .sb-overview-flow {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1.1fr auto 1fr auto 1.25fr auto 1fr;

    align-items: center;

    gap: 4px;

    margin-top:
        clamp(18px, 2vh, 25px);

    padding:
        11px 8px;

    background: #26384c;

    color: #fff;

    font-size:
        clamp(7px, 0.5vw, 9px);

    font-weight: 700;

    text-align: center;
}


#slide-40 .sb-overview-flow i {
    color: #8bbcf3;

    font-style: normal;
}


#slide-40 .sb-overview-goals {
    margin-top: auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid rgba(52, 123, 214, 0.24);
}


#slide-40 .sb-overview-goals>div {
    padding:
        clamp(14px, 1.55vh, 19px) clamp(5px, 0.45vw, 8px) 0 0;
}


#slide-40 .sb-overview-goals strong {
    color: #9abde4;

    font-size:
        clamp(17px, 1.25vw, 21px);

    font-weight: 400;
}


#slide-40 .sb-overview-goals span {
    display: block;

    margin-top: 4px;

    color: #27313b;

    font-size:
        clamp(9px, 0.67vw, 11px);

    font-weight: 700;
}


#slide-40 .sb-overview-goals small {
    display: block;

    margin-top: 3px;

    color: #6d7580;

    font-size:
        clamp(8px, 0.56vw, 10px);

    line-height: 1.4;
}


#slide-40 .sb-page-map {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    border-top:
        1px solid var(--sb-line);
}


#slide-40 .sb-page-map>div {
    display: flex;

    align-items: baseline;

    gap: 8px;

    padding:
        clamp(11px, 1.15vh, 15px) clamp(11px, 0.9vw, 15px);

    border-right:
        1px solid var(--sb-line);
}


#slide-40 .sb-page-map>div:last-child {
    border-right: 0;
}


#slide-40 .sb-page-map strong {
    color: #9abde4;

    font-size:
        clamp(16px, 1.18vw, 20px);

    font-weight: 400;
}


#slide-40 .sb-page-map span {
    color: #27313b;

    font-size:
        clamp(9px, 0.67vw, 11px);

    font-weight: 700;
}


/* =========================================================
   04. slide-41 / slide-42 · CARD GALLERY
   ========================================================= */

#slide-41 .sb-section--gallery,
#slide-42 .sb-section--gallery {
    grid-template-rows:
        minmax(0, 27fr) minmax(0, 73fr);
}


#slide-41 .section-bottom--sb-gallery,
#slide-42 .section-bottom--sb-gallery {
    min-height: 0;

    display: grid;

    grid-template-rows:
        minmax(0, 1fr) auto;

    gap:
        clamp(12px, 1.35vh, 17px);

    padding:
        3px clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


/* 핵심:
   카드뉴스 이미지를 크게 보여주기 위해
   설명 카드보다 실제 이미지 면적을 우선한다. */

#slide-41 .sb-card-gallery,
#slide-42 .sb-card-gallery {
    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(18px, 1.8vw, 28px);
}


#slide-41 .sb-campaign-card,
#slide-42 .sb-campaign-card {
    min-width: 0;
    min-height: 0;

    margin: 0;

    display: grid;

    grid-template-rows:
        auto minmax(0, 1fr) auto;

    padding-top:
        clamp(11px, 1.2vh, 15px);

    border-top:
        2px solid var(--sb-blue);
}


#slide-41 .sb-card-number,
#slide-42 .sb-card-number {
    display: flex;

    align-items: baseline;

    gap: 10px;

    padding-bottom:
        clamp(9px, 1vh, 13px);
}


#slide-41 .sb-card-number strong,
#slide-42 .sb-card-number strong {
    color: #9abde4;

    font-size:
        clamp(24px, 2vw, 32px);

    font-weight: 300;

    line-height: 1;

    letter-spacing: -0.045em;
}


#slide-41 .sb-card-number span,
#slide-42 .sb-card-number span {
    color: var(--sb-blue);

    font-size:
        clamp(9px, 0.64vw, 11px);

    font-weight: 700;

    letter-spacing: 0.045em;
}


#slide-41 .sb-card-image,
#slide-42 .sb-card-image {
    min-height: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        var(--sb-paper-2);

    border:
        1px solid var(--sb-line);
}


#slide-41 .sb-card-image img,
#slide-42 .sb-card-image img {
    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: contain;
}


#slide-41 .sb-campaign-card figcaption,
#slide-42 .sb-campaign-card figcaption {
    padding-top:
        clamp(10px, 1.1vh, 14px);
}


#slide-41 .sb-campaign-card figcaption strong,
#slide-42 .sb-campaign-card figcaption strong {
    display: block;

    color: #26313c;

    font-size:
        clamp(10px, 0.75vw, 12px);

    font-weight: 700;
}


#slide-41 .sb-campaign-card figcaption span,
#slide-42 .sb-campaign-card figcaption span {
    display: block;

    margin-top: 4px;

    color: #626b75;

    font-size:
        clamp(9px, 0.65vw, 11px);

    line-height: 1.45;
}


#slide-41 .sb-gallery-flow,
#slide-42 .sb-gallery-flow {
    display: grid;

    grid-template-columns:
        auto 1fr auto 1fr auto 1fr minmax(230px, 0.9fr);

    align-items: center;

    gap:
        clamp(8px, 0.8vw, 12px);

    min-height: 36px;

    padding:
        clamp(10px, 1.1vh, 13px) clamp(16px, 1.4vw, 22px);

    background: #26384c;

    color: #fff;
}


#slide-41 .sb-gallery-flow strong,
#slide-42 .sb-gallery-flow strong {
    color: #8bbcf3;

    font-size:
        clamp(9px, 0.64vw, 11px);

    letter-spacing: 0.04em;
}


#slide-41 .sb-gallery-flow span,
#slide-42 .sb-gallery-flow span {
    font-size:
        clamp(9px, 0.65vw, 11px);

    font-weight: 700;

    text-align: center;
}


#slide-41 .sb-gallery-flow i,
#slide-42 .sb-gallery-flow i {
    color: #8bbcf3;

    font-style: normal;
}


#slide-41 .sb-gallery-flow small,
#slide-42 .sb-gallery-flow small {
    padding-left:
        clamp(12px, 1vw, 16px);

    border-left:
        1px solid rgba(255, 255, 255, 0.2);

    color: #c7cdd4;

    font-size:
        clamp(8px, 0.58vw, 10px);

    line-height: 1.4;
}


/* =========================================================
   05. slide-43 · SYSTEM / RESULT
   ========================================================= */

#slide-43 .sb-section--result {
    grid-template-rows:
        minmax(0, 29fr) minmax(0, 71fr);
}


#slide-43 .section-bottom--sb-result {
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1.62fr) minmax(275px, 0.62fr);

    grid-template-rows:
        minmax(0, 1fr) auto;

    gap:
        clamp(16px, 1.8vh, 23px) clamp(28px, 3vw, 44px);

    padding:
        3px clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


#slide-43 .sb-decision-table {
    min-width: 0;

    display: grid;

    grid-template-rows:
        auto repeat(4, minmax(0, 1fr));

    border-top:
        2px solid var(--sb-blue);
}


#slide-43 .sb-decision-row {
    min-width: 0;

    display: grid;

    grid-template-columns:
        1.02fr 1.28fr 1fr;

    border-bottom:
        1px solid var(--sb-line);
}


#slide-43 .sb-decision-row>div {
    min-width: 0;

    display: flex;

    align-items: center;

    padding:
        clamp(10px, 1.1vh, 14px) clamp(11px, 0.9vw, 15px);

    border-right:
        1px solid var(--sb-line);

    color: #545e69;

    font-size:
        clamp(9px, 0.69vw, 12px);

    line-height: 1.48;
}


#slide-43 .sb-decision-row>div:last-child {
    border-right: 0;
}


#slide-43 .sb-decision-row--head>div {
    color: var(--sb-blue);

    font-size:
        clamp(8px, 0.58vw, 10px);

    font-weight: 700;

    letter-spacing: 0.045em;
}


#slide-43 .sb-original-system {
    min-width: 0;

    display: flex;

    flex-direction: column;

    padding:
        clamp(21px, 1.85vw, 29px);

    border-top:
        3px solid var(--sb-blue);

    background:
        var(--sb-panel);
}


#slide-43 .sb-system-list {
    margin-top:
        clamp(17px, 1.9vh, 24px);

    border-top:
        1px solid rgba(52, 123, 214, 0.22);
}


#slide-43 .sb-system-list>div {
    display: grid;

    grid-template-columns:
        30px minmax(0, 1fr);

    align-items: center;

    gap: 11px;

    padding:
        clamp(9px, 1vh, 13px) 0;

    border-bottom:
        1px solid var(--sb-line);
}


#slide-43 .sb-system-list p {
    margin: 0;
}


#slide-43 .sb-system-list strong {
    display: block;

    color: #29343f;

    font-size:
        clamp(9px, 0.64vw, 11px);

    letter-spacing: 0.025em;
}


#slide-43 .sb-system-list small {
    display: block;

    margin-top: 2px;

    color: #6b7480;

    font-size:
        clamp(8px, 0.56vw, 10px);
}


#slide-43 .sb-swatch {
    width: 24px;
    height: 24px;

    border:
        1px solid rgba(0, 0, 0, 0.08);
}


/* 실제 프로젝트 컬러는
   포트폴리오 UI가 아니라 시스템 설명에서만 노출 */

#slide-43 .sb-swatch--beige {
    background: #efe9e3;
}


#slide-43 .sb-swatch--gray {
    background: #4e4c47;
}


#slide-43 .sb-swatch--olive {
    background: #3e412f;
}


#slide-43 .sb-swatch--lime {
    background: #c9c95a;
}


#slide-43 .sb-type-token {
    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #26384c;

    font-family:
        Georgia,
        "Batang",
        serif;

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   PROJECT TAKEAWAY
   ========================================================= */

#slide-43 .sb-project-takeaway {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(18px, 1.7vw, 26px);

    padding:
        clamp(13px, 1.4vh, 17px) clamp(18px, 1.5vw, 24px);

    border-top:
        1px solid var(--sb-blue);

    background:
        rgba(255, 255, 255, 0.18);
}


#slide-43 .sb-project-takeaway strong {
    color: var(--sb-blue);

    font-size:
        clamp(9px, 0.64vw, 11px);

    letter-spacing: 0.045em;
}


#slide-43 .sb-project-takeaway p {
    margin: 0;

    color: #4f5964;

    font-size:
        clamp(10px, 0.76vw, 13px);

    line-height: 1.55;
}


/* =========================================================
   LOW HEIGHT
   ========================================================= */

@media (max-height: 760px) and (min-width: 901px) {

    #slide-40 .sb-section--overview,
    #slide-41 .sb-section--gallery,
    #slide-42 .sb-section--gallery,
    #slide-43 .sb-section--result {
        grid-template-rows:
            minmax(0, 26fr) minmax(0, 74fr);
    }


    #slide-40 .section-top--sb,
    #slide-41 .section-top--sb-gallery,
    #slide-42 .section-top--sb-gallery,
    #slide-43 .section-top--sb-result {
        padding-top: 30px;
        padding-bottom: 13px;
    }


    #slide-40 .section-title,
    #slide-41 .section-title,
    #slide-42 .section-title,
    #slide-43 .section-title {
        font-size:
            clamp(27px, 2.25vw, 34px);
    }


    #slide-40 .section-copy,
    #slide-41 .section-copy,
    #slide-42 .section-copy,
    #slide-43 .section-copy {
        margin-top: 10px;

        font-size:
            clamp(11px, 0.82vw, 14px);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    #slide-40 .sb-section,
    #slide-41 .sb-section,
    #slide-42 .sb-section,
    #slide-43 .sb-section {
        display: block;

        height: auto;

        min-height: 100vh;
    }


    #slide-40 .section-top--sb,
    #slide-41 .section-top--sb-gallery,
    #slide-42 .section-top--sb-gallery,
    #slide-43 .section-top--sb-result {
        padding:
            42px 30px 24px;
    }


    #slide-40 .section-bottom--sb-overview,
    #slide-43 .section-bottom--sb-result {
        grid-template-columns: 1fr;
        grid-template-rows: auto;

        row-gap: 24px;

        padding:
            10px 30px 62px;
    }


    #slide-41 .section-bottom--sb-gallery,
    #slide-42 .section-bottom--sb-gallery {
        padding:
            10px 30px 62px;
    }


    #slide-41 .sb-card-gallery,
    #slide-42 .sb-card-gallery {
        grid-template-columns: 1fr;

        row-gap: 28px;
    }


    #slide-41 .sb-card-image,
    #slide-42 .sb-card-image {
        min-height: 520px;
    }


    #slide-40 .sb-page-map,
    #slide-43 .sb-project-takeaway {
        grid-column: 1;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    #slide-40 .section-top--sb,
    #slide-41 .section-top--sb-gallery,
    #slide-42 .section-top--sb-gallery,
    #slide-43 .section-top--sb-result {
        padding:
            32px 22px 20px;
    }


    #slide-40 .section-title,
    #slide-41 .section-title,
    #slide-42 .section-title,
    #slide-43 .section-title {
        font-size:
            clamp(24px, 6.2vw, 31px);
    }


    #slide-40 .section-bottom--sb-overview,
    #slide-41 .section-bottom--sb-gallery,
    #slide-42 .section-bottom--sb-gallery,
    #slide-43 .section-bottom--sb-result {
        padding-left: 22px;
        padding-right: 22px;
        padding-bottom: 58px;
    }


    #slide-40 .sb-page-map {
        grid-template-columns: 1fr;
    }


    #slide-40 .sb-page-map>div {
        border-right: 0;

        border-bottom:
            1px solid var(--sb-line);
    }


    #slide-40 .sb-overview-flow {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    #slide-40 .sb-overview-flow i {
        transform: rotate(90deg);
    }


    #slide-40 .sb-overview-goals {
        grid-template-columns: 1fr;
    }


    #slide-41 .sb-gallery-flow,
    #slide-42 .sb-gallery-flow {
        grid-template-columns: 1fr;

        gap: 8px;

        text-align: center;
    }


    #slide-41 .sb-gallery-flow i,
    #slide-42 .sb-gallery-flow i {
        transform: rotate(90deg);
    }


    #slide-41 .sb-gallery-flow small,
    #slide-42 .sb-gallery-flow small {
        padding:
            10px 0 0;

        border-left: 0;

        border-top:
            1px solid rgba(255, 255, 255, 0.2);
    }


    #slide-43 .sb-decision-row {
        grid-template-columns: 1fr;
    }


    #slide-43 .sb-decision-row>div {
        border-right: 0;

        border-bottom:
            1px solid var(--sb-line);
    }


    #slide-43 .sb-project-takeaway {
        grid-template-columns: 1fr;

        gap: 8px;
    }
}

/* =========================================================
   PET SUMMER WALK CHECKLIST
   AI CONTENT / ART DIRECTION
   slide-44 ~ slide-48
   ========================================================= */


/* =========================================================
   01. TOKENS
   ========================================================= */

#slide-44,
#slide-45,
#slide-46,
#slide-47,
#slide-48 {
    --pet-paper: #f3f0e9;
    --pet-paper-2: #e9e7e1;

    --pet-ink: #171a20;
    --pet-copy: #59616c;
    --pet-muted: #737a84;

    --pet-line: #d8d6d0;

    --pet-blue: #347bd6;
    --pet-blue-deep: #315d91;
    --pet-blue-soft: #dce8f4;

    --pet-panel: #e7ebef;
}


/* =========================================================
      02. SHARED
      ========================================================= */

#slide-44 .pet-section,
#slide-45 .pet-section,
#slide-46 .pet-section,
#slide-47 .pet-section,
#slide-48 .pet-section {
    position: relative;

    display: grid;

    background: var(--pet-paper);
}


#slide-44 .section-eyebrow,
#slide-45 .section-eyebrow,
#slide-46 .section-eyebrow,
#slide-47 .section-eyebrow,
#slide-48 .section-eyebrow {
    margin:
        0 0 clamp(13px, 1.4vh, 18px);

    color: #53606d;

    font-size:
        clamp(10px, 0.72vw, 12px);

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.035em;
}


#slide-44 .section-title,
#slide-45 .section-title,
#slide-46 .section-title,
#slide-47 .section-title,
#slide-48 .section-title {
    width: 100%;
    max-width: 1180px;

    margin: 0;

    color: var(--pet-ink);

    font-size:
        clamp(31px, 2.55vw, 42px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -0.045em;

    word-break: keep-all;
}


#slide-44 .accent,
#slide-45 .accent,
#slide-46 .accent,
#slide-47 .accent,
#slide-48 .accent {
    color: var(--pet-blue);
}


#slide-44 .section-copy,
#slide-45 .section-copy,
#slide-46 .section-copy,
#slide-47 .section-copy,
#slide-48 .section-copy {
    max-width: 1040px;

    margin:
        clamp(14px, 1.55vh, 20px) 0 0;

    color: var(--pet-copy);

    font-size:
        clamp(13px, 0.94vw, 16px);

    line-height: 1.62;

    letter-spacing: -0.02em;

    word-break: keep-all;
}


#slide-44 .section-top--pet,
#slide-45 .section-top--pet-gallery,
#slide-46 .section-top--pet-gallery,
#slide-47 .section-top--pet-save,
#slide-48 .section-top--pet-result {
    display: flex;

    align-items: flex-end;

    padding:
        clamp(40px, 4.6vh, 59px) clamp(62px, 5.2vw, 88px) clamp(17px, 2vh, 26px);
}


/* =========================================================
      SHARED LABEL
      ========================================================= */

#slide-44 .pet-shot-label,
#slide-47 .pet-shot-label {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 3;

    padding: 6px 9px;

    background:
        rgba(243, 240, 233, 0.95);

    color: #596673;

    font-size:
        clamp(9px, 0.64vw, 11px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.05em;
}


.pet-panel-kicker {
    margin: 0;

    color: var(--pet-blue);

    font-size:
        clamp(9px, 0.64vw, 11px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.05em;
}


/* =========================================================
      03. slide-44 · OVERVIEW
      ========================================================= */

#slide-44 .pet-section--overview {
    grid-template-rows:
        minmax(0, 30fr) minmax(0, 70fr);
}


#slide-44 .section-bottom--pet-overview {
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1.42fr) minmax(300px, 0.78fr);

    grid-template-rows:
        minmax(0, 1fr) auto;

    gap:
        clamp(17px, 1.9vh, 23px) clamp(30px, 3vw, 48px);

    padding:
        clamp(7px, 0.9vh, 12px) clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


#slide-44 .pet-overview-hero {
    position: relative;

    min-width: 0;
    min-height: 0;

    margin: 0;

    display: grid;

    grid-template-rows:
        minmax(0, 1fr) auto;
}


#slide-44 .pet-overview-hero img {
    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: contain;

    background: var(--pet-paper-2);

    border:
        1px solid var(--pet-line);
}


#slide-44 .pet-overview-hero figcaption,
#slide-47 .pet-save-shot figcaption {
    padding-top: 10px;

    color: #626b75;

    font-size:
        clamp(10px, 0.73vw, 12px);

    line-height: 1.45;
}


#slide-44 .pet-overview-hero figcaption strong,
#slide-47 .pet-save-shot figcaption strong {
    display: block;

    margin-bottom: 2px;

    color: #222830;

    font-size:
        clamp(11px, 0.8vw, 13px);
}


#slide-44 .pet-overview-hero figcaption span,
#slide-47 .pet-save-shot figcaption span {
    display: block;
}


#slide-44 .pet-overview-summary {
    min-width: 0;

    display: flex;

    flex-direction: column;

    padding:
        clamp(22px, 1.9vw, 30px);

    border-top:
        3px solid var(--pet-blue);

    background:
        var(--pet-panel);
}


#slide-44 .pet-overview-summary h3,
#slide-47 .pet-save-summary h3,
#slide-48 .pet-ai-process h3 {
    margin:
        clamp(17px, 1.8vh, 23px) 0 0;

    color: var(--pet-ink);

    font-size:
        clamp(19px, 1.46vw, 24px);

    font-weight: 700;

    line-height: 1.35;

    letter-spacing: -0.04em;
}


#slide-44 .pet-overview-summary>p:not(.pet-panel-kicker) {
    margin:
        clamp(17px, 1.85vh, 24px) 0 0;

    color: var(--pet-copy);

    font-size:
        clamp(11px, 0.82vw, 14px);

    line-height: 1.68;
}


#slide-44 .pet-overview-role {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    margin-top:
        clamp(18px, 2vh, 25px);

    border-top:
        1px solid var(--pet-line);
}


#slide-44 .pet-overview-role>div {
    padding:
        clamp(12px, 1.3vh, 16px) clamp(9px, 0.75vw, 12px) clamp(12px, 1.3vh, 16px) 0;

    border-bottom:
        1px solid var(--pet-line);
}


#slide-44 .pet-overview-role>div:nth-child(odd) {
    border-right:
        1px solid var(--pet-line);
}


#slide-44 .pet-overview-role>div:nth-child(even) {
    padding-left:
        clamp(10px, 0.8vw, 13px);
}


#slide-44 .pet-overview-role strong {
    display: block;

    color: var(--pet-blue);

    font-size:
        clamp(9px, 0.64vw, 11px);

    letter-spacing: 0.04em;
}


#slide-44 .pet-overview-role span {
    display: block;

    margin-top: 4px;

    color: #606a75;

    font-size:
        clamp(9px, 0.66vw, 11px);

    line-height: 1.4;
}


#slide-44 .pet-prompt-direction {
    margin-top: auto;

    padding-top:
        clamp(14px, 1.5vh, 19px);

    border-top:
        1px solid rgba(52, 123, 214, 0.22);
}


#slide-44 .pet-prompt-direction small {
    display: block;

    color: #69727d;

    font-size:
        clamp(8px, 0.57vw, 10px);

    font-weight: 700;

    letter-spacing: 0.05em;
}


#slide-44 .pet-prompt-direction p {
    margin: 7px 0 0;

    color: #26384c;

    font-size:
        clamp(9px, 0.7vw, 12px);

    font-weight: 700;

    line-height: 1.55;
}


#slide-44 .pet-page-map {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    border-top:
        1px solid var(--pet-line);
}


#slide-44 .pet-page-map>div {
    display: flex;

    align-items: baseline;

    gap: 7px;

    padding:
        clamp(10px, 1.1vh, 14px) clamp(9px, 0.75vw, 13px);

    border-right:
        1px solid var(--pet-line);
}


#slide-44 .pet-page-map>div:last-child {
    border-right: 0;
}


#slide-44 .pet-page-map strong {
    color: #9abde4;

    font-size:
        clamp(15px, 1.12vw, 19px);

    font-weight: 400;
}


#slide-44 .pet-page-map span {
    color: #27313b;

    font-size:
        clamp(8px, 0.6vw, 10px);

    font-weight: 700;
}


/* =========================================================
      04. slide-45 / 46 · CARD GALLERY
      ========================================================= */

#slide-45 .pet-section--gallery,
#slide-46 .pet-section--gallery {
    grid-template-rows:
        minmax(0, 27fr) minmax(0, 73fr);
}


#slide-45 .section-bottom--pet-gallery,
#slide-46 .section-bottom--pet-gallery {
    min-height: 0;

    display: grid;

    grid-template-rows:
        minmax(0, 1fr) auto;

    gap:
        clamp(12px, 1.35vh, 17px);

    padding:
        3px clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


#slide-45 .pet-card-gallery,
#slide-46 .pet-card-gallery {
    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(18px, 1.8vw, 28px);
}


#slide-45 .pet-content-card,
#slide-46 .pet-content-card {
    min-width: 0;
    min-height: 0;

    margin: 0;

    display: grid;

    grid-template-rows:
        auto minmax(0, 1fr) auto;

    padding-top:
        clamp(11px, 1.2vh, 15px);

    border-top:
        2px solid var(--pet-blue);
}


#slide-45 .pet-card-head,
#slide-46 .pet-card-head {
    display: flex;

    align-items: baseline;

    gap: 10px;

    padding-bottom:
        clamp(9px, 1vh, 13px);
}


#slide-45 .pet-card-head strong,
#slide-46 .pet-card-head strong {
    color: #9abde4;

    font-size:
        clamp(24px, 2vw, 32px);

    font-weight: 300;

    line-height: 1;

    letter-spacing: -0.045em;
}


#slide-45 .pet-card-head span,
#slide-46 .pet-card-head span {
    color: var(--pet-blue);

    font-size:
        clamp(9px, 0.64vw, 11px);

    font-weight: 700;

    letter-spacing: 0.045em;
}


#slide-45 .pet-card-image,
#slide-46 .pet-card-image {
    min-height: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        var(--pet-paper-2);

    border:
        1px solid var(--pet-line);
}


#slide-45 .pet-card-image img,
#slide-46 .pet-card-image img {
    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: contain;
}


#slide-45 .pet-content-card figcaption,
#slide-46 .pet-content-card figcaption {
    padding-top:
        clamp(10px, 1.1vh, 14px);
}


#slide-45 .pet-content-card figcaption strong,
#slide-46 .pet-content-card figcaption strong {
    display: block;

    color: #26313c;

    font-size:
        clamp(10px, 0.75vw, 12px);

    font-weight: 700;
}


#slide-45 .pet-content-card figcaption span,
#slide-46 .pet-content-card figcaption span {
    display: block;

    margin-top: 4px;

    color: #626b75;

    font-size:
        clamp(9px, 0.65vw, 11px);

    line-height: 1.45;
}


#slide-45 .pet-gallery-flow,
#slide-46 .pet-gallery-flow {
    display: grid;

    grid-template-columns:
        auto 1fr auto 1fr auto 1fr minmax(250px, 0.9fr);

    align-items: center;

    gap:
        clamp(8px, 0.8vw, 12px);

    padding:
        clamp(10px, 1.1vh, 13px) clamp(16px, 1.4vw, 22px);

    background: #26384c;

    color: #fff;
}


#slide-45 .pet-gallery-flow strong,
#slide-46 .pet-gallery-flow strong {
    color: #8bbcf3;

    font-size:
        clamp(9px, 0.64vw, 11px);

    letter-spacing: 0.04em;
}


#slide-45 .pet-gallery-flow span,
#slide-46 .pet-gallery-flow span {
    font-size:
        clamp(9px, 0.64vw, 11px);

    font-weight: 700;

    text-align: center;
}


#slide-45 .pet-gallery-flow i,
#slide-46 .pet-gallery-flow i {
    color: #8bbcf3;

    font-style: normal;
}


#slide-45 .pet-gallery-flow small,
#slide-46 .pet-gallery-flow small {
    padding-left:
        clamp(12px, 1vw, 16px);

    border-left:
        1px solid rgba(255, 255, 255, .2);

    color: #c7cdd4;

    font-size:
        clamp(8px, 0.57vw, 10px);

    line-height: 1.4;
}


/* =========================================================
      05. slide-47 · SAVE
      ========================================================= */

#slide-47 .pet-section--save {
    grid-template-rows:
        minmax(0, 28fr) minmax(0, 72fr);
}


#slide-47 .section-bottom--pet-save {
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr) minmax(320px, 0.85fr);

    gap:
        clamp(31px, 3.3vw, 51px);

    padding:
        3px clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


#slide-47 .pet-save-shot {
    position: relative;

    min-width: 0;
    min-height: 0;

    margin: 0;

    display: grid;

    grid-template-rows:
        minmax(0, 1fr) auto;
}


#slide-47 .pet-save-shot img {
    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: contain;

    background:
        var(--pet-paper-2);

    border:
        1px solid var(--pet-line);
}


#slide-47 .pet-save-summary {
    min-width: 0;

    display: flex;

    flex-direction: column;

    padding:
        clamp(21px, 1.85vw, 29px);

    border-top:
        3px solid var(--pet-blue);

    background:
        var(--pet-panel);
}


#slide-47 .pet-content-flow {
    margin-top:
        clamp(18px, 2vh, 25px);

    border-top:
        1px solid var(--pet-line);
}


#slide-47 .pet-content-flow>div {
    display: grid;

    grid-template-columns:
        34px minmax(90px, 0.58fr) minmax(0, 1fr);

    align-items: center;

    gap: 10px;

    padding:
        clamp(10px, 1.1vh, 14px) 0;

    border-bottom:
        1px solid var(--pet-line);
}


#slide-47 .pet-content-flow strong {
    color: #9abde4;

    font-size:
        clamp(16px, 1.15vw, 19px);

    font-weight: 400;
}


#slide-47 .pet-content-flow span {
    color: #26384c;

    font-size:
        clamp(9px, 0.65vw, 11px);

    font-weight: 700;
}


#slide-47 .pet-content-flow p {
    margin: 0;

    color: #626b75;

    font-size:
        clamp(9px, 0.64vw, 11px);

    line-height: 1.45;
}


#slide-47 .pet-save-flow {
    margin-top: auto;

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 5px;

    padding: 11px 9px;

    background: #26384c;

    color: #fff;

    font-size:
        clamp(8px, 0.57vw, 10px);

    font-weight: 700;

    text-align: center;
}


#slide-47 .pet-save-flow i {
    color: #8bbcf3;

    font-style: normal;
}


/* =========================================================
      06. slide-48 · AI ART DIRECTION
      ========================================================= */

#slide-48 .pet-section--result {
    grid-template-rows:
        minmax(0, 29fr) minmax(0, 71fr);
}


#slide-48 .section-bottom--pet-result {
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1.62fr) minmax(285px, 0.62fr);

    grid-template-rows:
        minmax(0, 1fr) auto;

    gap:
        clamp(16px, 1.8vh, 23px) clamp(28px, 3vw, 44px);

    padding:
        3px clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}


#slide-48 .pet-revision-table {
    min-width: 0;

    display: grid;

    grid-template-rows:
        auto repeat(4, minmax(0, 1fr));

    border-top:
        2px solid var(--pet-blue);
}


#slide-48 .pet-revision-head,
#slide-48 .pet-revision-row {
    min-width: 0;

    display: grid;

    grid-template-columns:
        1fr 1.35fr 1fr;

    border-bottom:
        1px solid var(--pet-line);
}


#slide-48 .pet-revision-head>span,
#slide-48 .pet-revision-row>div {
    min-width: 0;

    display: flex;

    align-items: center;

    padding:
        clamp(9px, 1.05vh, 13px) clamp(10px, 0.85vw, 14px);

    border-right:
        1px solid var(--pet-line);
}


#slide-48 .pet-revision-head>span:last-child,
#slide-48 .pet-revision-row>div:last-child {
    border-right: 0;
}


#slide-48 .pet-revision-head>span {
    color: var(--pet-blue);

    font-size:
        clamp(8px, 0.58vw, 10px);

    font-weight: 700;

    letter-spacing: 0.045em;
}


#slide-48 .pet-revision-row>div {
    color: #545e69;

    font-size:
        clamp(9px, 0.67vw, 11px);

    line-height: 1.48;
}


#slide-48 .pet-ai-process {
    min-width: 0;

    display: flex;

    flex-direction: column;

    padding:
        clamp(21px, 1.85vw, 29px);

    border-top:
        3px solid var(--pet-blue);

    background:
        var(--pet-panel);
}


#slide-48 .pet-process-list {
    margin-top:
        clamp(18px, 2vh, 25px);

    border-top:
        1px solid rgba(52, 123, 214, .22);
}


#slide-48 .pet-process-list>div {
    display: grid;

    grid-template-columns:
        36px minmax(0, 1fr);

    gap: 10px;

    align-items: start;

    padding:
        clamp(11px, 1.15vh, 15px) 0;

    border-bottom:
        1px solid var(--pet-line);
}


#slide-48 .pet-process-list>div>strong {
    color: #9abde4;

    font-size:
        clamp(16px, 1.15vw, 19px);

    font-weight: 400;
}


#slide-48 .pet-process-list p {
    margin: 0;
}


#slide-48 .pet-process-list b {
    display: block;

    color: #26384c;

    font-size:
        clamp(9px, 0.66vw, 11px);

    letter-spacing: 0.03em;
}


#slide-48 .pet-process-list span {
    display: block;

    margin-top: 4px;

    color: #626b75;

    font-size:
        clamp(9px, 0.63vw, 11px);

    line-height: 1.42;
}


/* =========================================================
      TAKEAWAY
      ========================================================= */

#slide-48 .pet-project-takeaway {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(18px, 1.7vw, 26px);

    padding:
        clamp(13px, 1.4vh, 17px) clamp(18px, 1.5vw, 24px);

    border-top:
        1px solid var(--pet-blue);

    background:
        rgba(255, 255, 255, .18);
}


#slide-48 .pet-project-takeaway strong {
    color: var(--pet-blue);

    font-size:
        clamp(9px, 0.64vw, 11px);

    letter-spacing: 0.045em;
}


#slide-48 .pet-project-takeaway p {
    margin: 0;

    color: #4f5964;

    font-size:
        clamp(10px, 0.75vw, 12px);

    line-height: 1.55;
}


/* =========================================================
      LOW HEIGHT
      ========================================================= */

@media (max-height: 760px) and (min-width: 901px) {

    #slide-44 .pet-section--overview,
    #slide-45 .pet-section--gallery,
    #slide-46 .pet-section--gallery,
    #slide-47 .pet-section--save,
    #slide-48 .pet-section--result {
        grid-template-rows:
            minmax(0, 26fr) minmax(0, 74fr);
    }


    #slide-44 .section-top--pet,
    #slide-45 .section-top--pet-gallery,
    #slide-46 .section-top--pet-gallery,
    #slide-47 .section-top--pet-save,
    #slide-48 .section-top--pet-result {
        padding-top: 30px;
        padding-bottom: 13px;
    }


    #slide-44 .section-title,
    #slide-45 .section-title,
    #slide-46 .section-title,
    #slide-47 .section-title,
    #slide-48 .section-title {
        font-size:
            clamp(27px, 2.25vw, 34px);
    }
}


/* =========================================================
      TABLET
      ========================================================= */

@media (max-width: 900px) {

    #slide-44 .pet-section,
    #slide-45 .pet-section,
    #slide-46 .pet-section,
    #slide-47 .pet-section,
    #slide-48 .pet-section {
        display: block;

        height: auto;

        min-height: 100vh;
    }


    #slide-44 .section-top--pet,
    #slide-45 .section-top--pet-gallery,
    #slide-46 .section-top--pet-gallery,
    #slide-47 .section-top--pet-save,
    #slide-48 .section-top--pet-result {
        padding:
            42px 30px 24px;
    }


    #slide-44 .section-bottom--pet-overview,
    #slide-47 .section-bottom--pet-save,
    #slide-48 .section-bottom--pet-result {
        grid-template-columns: 1fr;

        grid-template-rows: auto;

        row-gap: 24px;

        padding:
            10px 30px 62px;
    }


    #slide-45 .section-bottom--pet-gallery,
    #slide-46 .section-bottom--pet-gallery {
        padding:
            10px 30px 62px;
    }


    #slide-45 .pet-card-gallery,
    #slide-46 .pet-card-gallery {
        grid-template-columns: 1fr;

        row-gap: 28px;
    }


    #slide-45 .pet-card-image,
    #slide-46 .pet-card-image {
        min-height: 520px;
    }


    #slide-44 .pet-page-map,
    #slide-48 .pet-project-takeaway {
        grid-column: 1;
    }
}


/* =========================================================
      MOBILE
      ========================================================= */

@media (max-width: 640px) {

    #slide-44 .section-top--pet,
    #slide-45 .section-top--pet-gallery,
    #slide-46 .section-top--pet-gallery,
    #slide-47 .section-top--pet-save,
    #slide-48 .section-top--pet-result {
        padding:
            32px 22px 20px;
    }


    #slide-44 .section-title,
    #slide-45 .section-title,
    #slide-46 .section-title,
    #slide-47 .section-title,
    #slide-48 .section-title {
        font-size:
            clamp(24px, 6.2vw, 31px);
    }


    #slide-44 .section-bottom--pet-overview,
    #slide-45 .section-bottom--pet-gallery,
    #slide-46 .section-bottom--pet-gallery,
    #slide-47 .section-bottom--pet-save,
    #slide-48 .section-bottom--pet-result {
        padding-left: 22px;
        padding-right: 22px;
        padding-bottom: 58px;
    }


    #slide-44 .pet-page-map {
        grid-template-columns: 1fr;
    }


    #slide-44 .pet-page-map>div {
        border-right: 0;

        border-bottom:
            1px solid var(--pet-line);
    }


    #slide-45 .pet-gallery-flow,
    #slide-46 .pet-gallery-flow {
        grid-template-columns: 1fr;

        gap: 8px;

        text-align: center;
    }


    #slide-45 .pet-gallery-flow i,
    #slide-46 .pet-gallery-flow i {
        transform: rotate(90deg);
    }


    #slide-45 .pet-gallery-flow small,
    #slide-46 .pet-gallery-flow small {
        padding: 10px 0 0;

        border-left: 0;

        border-top:
            1px solid rgba(255, 255, 255, .2);
    }


    #slide-47 .pet-content-flow>div {
        grid-template-columns:
            32px 1fr;

        row-gap: 4px;
    }


    #slide-47 .pet-content-flow p {
        grid-column: 2;
    }


    #slide-47 .pet-save-flow {
        grid-template-columns: 1fr;

        row-gap: 7px;
    }


    #slide-47 .pet-save-flow i {
        transform: rotate(90deg);
    }


    #slide-48 .pet-revision-head {
        display: none;
    }


    #slide-48 .pet-revision-row {
        grid-template-columns: 1fr;
    }


    #slide-48 .pet-revision-row>div {
        border-right: 0;

        border-bottom:
            1px solid var(--pet-line);
    }


    #slide-48 .pet-project-takeaway {
        grid-template-columns: 1fr;

        gap: 8px;
    }
}

/* =========================================================
   AI WORKFLOW GUIDE
   INFORMATION CARD NEWS · slide-49 ~ slide-53
   ========================================================= */

/* =========================================================
   01. TOKENS / SHARED
   ========================================================= */

#slide-49,
#slide-50,
#slide-51,
#slide-52,
#slide-53 {
    --aiw-paper: #f3f0e9;
    --aiw-paper-2: #e9e7e1;
    --aiw-ink: #171a20;
    --aiw-copy: #59616c;
    --aiw-muted: #737a84;
    --aiw-line: #d8d6d0;
    --aiw-blue: #347bd6;
    --aiw-blue-soft: #dce8f4;
    --aiw-panel: #e7ebef;
}

#slide-49 .aiw-section,
#slide-50 .aiw-section,
#slide-51 .aiw-section,
#slide-52 .aiw-section,
#slide-53 .aiw-section {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 27fr) minmax(0, 73fr);
    background: var(--aiw-paper);
}

#slide-49 .section-eyebrow,
#slide-50 .section-eyebrow,
#slide-51 .section-eyebrow,
#slide-52 .section-eyebrow,
#slide-53 .section-eyebrow {
    margin: 0 0 clamp(13px, 1.4vh, 18px);
    color: #53606d;
    font-size: clamp(10px, 0.72vw, 12px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.035em;
}

#slide-49 .section-title,
#slide-50 .section-title,
#slide-51 .section-title,
#slide-52 .section-title,
#slide-53 .section-title {
    width: 100%;
    max-width: 1180px;
    margin: 0;
    color: var(--aiw-ink);
    font-size: clamp(31px, 2.55vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.045em;
    word-break: keep-all;
}

#slide-49 .accent,
#slide-50 .accent,
#slide-51 .accent,
#slide-52 .accent,
#slide-53 .accent {
    color: var(--aiw-blue);
}

#slide-49 .section-top--aiw,
#slide-50 .section-top--aiw,
#slide-51 .section-top--aiw,
#slide-52 .section-top--aiw,
#slide-53 .section-top--aiw {
    display: flex;
    align-items: flex-end;
    padding: clamp(40px, 4.6vh, 59px) clamp(62px, 5.2vw, 88px) clamp(17px, 2vh, 26px);
}

#slide-49 .section-intro--aiw,
#slide-50 .section-intro--aiw,
#slide-51 .section-intro--aiw,
#slide-52 .section-intro--aiw,
#slide-53 .section-intro--aiw {
    width: 100%;
    min-width: 0;
}

#slide-49 .section-bottom--aiw-overview,
#slide-50 .section-bottom--aiw-gallery,
#slide-51 .section-bottom--aiw-gallery,
#slide-52 .section-bottom--aiw-result,
#slide-53 .section-bottom--aiw-system {
    min-width: 0;
    min-height: 0;
    padding: 3px clamp(62px, 5.2vw, 88px) clamp(58px, 6vh, 76px);
}

.aiw-kicker {
    margin: 0;
    color: var(--aiw-blue);
    font-size: clamp(9px, 0.64vw, 11px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

/* =========================================================
   02. OVERVIEW · slide-49
   ========================================================= */

#slide-49 .section-bottom--aiw-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.78fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(17px, 1.9vh, 23px) clamp(30px, 3vw, 48px);
}

.aiw-overview {
    display: contents;
}

.aiw-hero {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.aiw-hero img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    background: var(--aiw-paper-2);
    border: 1px solid var(--aiw-line);
}

.aiw-shot-label {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    padding: 6px 9px;
    background: rgba(243, 240, 233, 0.95);
    color: #596673;
    font-size: clamp(9px, 0.64vw, 11px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

.aiw-hero figcaption {
    padding-top: 10px;
    color: #626b75;
    font-size: clamp(10px, 0.73vw, 12px);
    line-height: 1.45;
}

.aiw-hero figcaption strong {
    display: block;
    margin-bottom: 2px;
    color: #222830;
    font-size: clamp(11px, 0.8vw, 13px);
}

.aiw-hero figcaption span {
    display: block;
}

.aiw-summary {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 1.9vw, 30px);
    border-top: 3px solid var(--aiw-blue);
    background: var(--aiw-panel);
}

.aiw-summary h3,
.aiw-process h3,
.aiw-system-summary h3 {
    margin: clamp(17px, 1.8vh, 23px) 0 0;
    color: var(--aiw-ink);
    font-size: clamp(19px, 1.46vw, 24px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
}

.aiw-summary h3 span,
.aiw-process h3 span,
.aiw-system-summary h3 span {
    color: var(--aiw-blue);
}

.aiw-summary > p:not(.aiw-kicker) {
    margin: clamp(17px, 1.85vh, 24px) 0 0;
    color: var(--aiw-copy);
    font-size: clamp(11px, 0.82vw, 14px);
    line-height: 1.68;
}

.aiw-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(18px, 2vh, 25px);
    border-top: 1px solid var(--aiw-line);
}

.aiw-role-grid > div {
    padding: clamp(11px, 1.2vh, 15px) clamp(10px, 0.8vw, 13px) clamp(11px, 1.2vh, 15px) 0;
    border-bottom: 1px solid var(--aiw-line);
}

.aiw-role-grid > div:nth-child(odd) {
    border-right: 1px solid var(--aiw-line);
}

.aiw-role-grid > div:nth-child(even) {
    padding-left: clamp(10px, 0.8vw, 13px);
}

.aiw-role-grid strong {
    display: block;
    color: var(--aiw-blue);
    font-size: clamp(9px, 0.64vw, 11px);
    letter-spacing: 0.035em;
}

.aiw-role-grid span {
    display: block;
    margin-top: 4px;
    color: #606a75;
    font-size: clamp(9px, 0.65vw, 11px);
    line-height: 1.45;
}

.aiw-page-map {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid var(--aiw-line);
}

.aiw-page-map > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: clamp(10px, 1.05vh, 14px) clamp(9px, 0.75vw, 13px);
    border-right: 1px solid var(--aiw-line);
}

.aiw-page-map > div:last-child {
    border-right: 0;
}

.aiw-page-map strong {
    color: #9abde4;
    font-size: clamp(15px, 1.12vw, 19px);
    font-weight: 400;
}

.aiw-page-map span {
    color: #27313b;
    font-size: clamp(8px, 0.6vw, 10px);
    font-weight: 700;
}

/* =========================================================
   03. CARD GALLERY · slide-50 / slide-51
   ========================================================= */

#slide-50 .section-bottom--aiw-gallery,
#slide-51 .section-bottom--aiw-gallery {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(12px, 1.35vh, 17px);
}

.aiw-gallery {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 1.8vw, 28px);
}

.aiw-card {
    min-width: 0;
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding-top: clamp(11px, 1.2vh, 15px);
    border-top: 2px solid var(--aiw-blue);
}

.aiw-card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: clamp(9px, 1vh, 13px);
}

.aiw-card-head strong {
    color: #9abde4;
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.045em;
}

.aiw-card-head span {
    color: var(--aiw-blue);
    font-size: clamp(9px, 0.64vw, 11px);
    font-weight: 700;
    letter-spacing: 0.045em;
}

.aiw-card-image {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--aiw-paper-2);
    border: 1px solid var(--aiw-line);
}

.aiw-card-image img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.aiw-card figcaption {
    padding-top: clamp(10px, 1.1vh, 14px);
}

.aiw-card figcaption strong {
    display: block;
    color: #26313c;
    font-size: clamp(10px, 0.75vw, 12px);
    font-weight: 700;
}

.aiw-card figcaption span {
    display: block;
    margin-top: 4px;
    color: #626b75;
    font-size: clamp(9px, 0.65vw, 11px);
    line-height: 1.45;
}

.aiw-gallery-flow {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr minmax(250px, 0.9fr);
    align-items: center;
    gap: clamp(8px, 0.8vw, 12px);
    padding: clamp(10px, 1.1vh, 13px) clamp(16px, 1.4vw, 22px);
    background: #26384c;
    color: #fff;
}

.aiw-gallery-flow strong {
    color: #8bbcf3;
    font-size: clamp(9px, 0.64vw, 11px);
    letter-spacing: 0.04em;
}

.aiw-gallery-flow span {
    font-size: clamp(9px, 0.64vw, 11px);
    font-weight: 700;
    text-align: center;
}

.aiw-gallery-flow i {
    color: #8bbcf3;
    font-style: normal;
}

.aiw-gallery-flow small {
    padding-left: clamp(12px, 1vw, 16px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    color: #c7cdd4;
    font-size: clamp(8px, 0.57vw, 10px);
    line-height: 1.4;
}

.aiw-workflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--aiw-blue);
    border-bottom: 1px solid var(--aiw-line);
}

.aiw-workflow > div {
    min-width: 0;
    padding: clamp(12px, 1.3vh, 16px) clamp(14px, 1.15vw, 18px);
    border-right: 1px solid var(--aiw-line);
}

.aiw-workflow > div:last-child {
    border-right: 0;
}

.aiw-workflow strong {
    color: #9abde4;
    font-size: clamp(17px, 1.25vw, 21px);
    font-weight: 400;
}

.aiw-workflow span {
    display: block;
    margin-top: 5px;
    color: var(--aiw-blue);
    font-size: clamp(9px, 0.65vw, 11px);
    font-weight: 700;
    letter-spacing: 0.035em;
}

.aiw-workflow p {
    margin: 5px 0 0;
    color: #626b75;
    font-size: clamp(9px, 0.64vw, 11px);
    line-height: 1.45;
}

/* =========================================================
   04. AI ART DIRECTION / PROCESS · slide-52
   ========================================================= */

#slide-52 .section-bottom--aiw-result {
    display: flex;
    flex-direction: column;
}

.aiw-decision-layout {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(285px, 0.62fr);
    gap: clamp(28px, 3vw, 44px);
}

.aiw-decision-table {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto repeat(4, minmax(0, 1fr));
    border-top: 2px solid var(--aiw-blue);
}

.aiw-decision-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    border-bottom: 1px solid var(--aiw-line);
}

.aiw-decision-row > div {
    min-width: 0;
    display: flex;
    align-items: center;
    padding: clamp(9px, 1vh, 13px) clamp(11px, 0.9vw, 15px);
    border-right: 1px solid var(--aiw-line);
    color: #545e69;
    font-size: clamp(9px, 0.68vw, 12px);
    line-height: 1.48;
}

.aiw-decision-row > div:last-child {
    border-right: 0;
}

.aiw-decision-row--head > div {
    color: var(--aiw-blue);
    font-size: clamp(8px, 0.58vw, 10px);
    font-weight: 700;
    letter-spacing: 0.045em;
}

.aiw-process {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(21px, 1.85vw, 29px);
    border-top: 3px solid var(--aiw-blue);
    background: var(--aiw-panel);
}

.aiw-process-list {
    margin-top: clamp(18px, 2vh, 25px);
    border-top: 1px solid rgba(52, 123, 214, 0.22);
}

.aiw-process-list > div {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: clamp(9px, 1vh, 13px) 0;
    border-bottom: 1px solid var(--aiw-line);
}

.aiw-process-list > div > strong {
    color: #9abde4;
    font-size: clamp(16px, 1.12vw, 19px);
    font-weight: 400;
}

.aiw-process-list p {
    margin: 0;
}

.aiw-process-list b {
    display: block;
    color: #26384c;
    font-size: clamp(9px, 0.65vw, 11px);
    letter-spacing: 0.03em;
}

.aiw-process-list span {
    display: block;
    margin-top: 3px;
    color: #626b75;
    font-size: clamp(8px, 0.61vw, 10px);
    line-height: 1.4;
}

.aiw-process-principle {
    margin-top: auto;
    padding-top: clamp(12px, 1.25vh, 16px);
    border-top: 1px solid rgba(52, 123, 214, 0.22);
}

.aiw-process-principle small {
    display: block;
    color: #69727d;
    font-size: clamp(8px, 0.56vw, 10px);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.aiw-process-principle strong {
    display: block;
    margin-top: 6px;
    color: #26384c;
    font-size: clamp(10px, 0.74vw, 12px);
    letter-spacing: 0.01em;
}

.aiw-process-principle p {
    margin: 5px 0 0;
    color: #626b75;
    font-size: clamp(8px, 0.58vw, 10px);
    line-height: 1.42;
}

/* =========================================================
   05. DESIGN SYSTEM / RESULT · slide-53
   ========================================================= */

#slide-53 .section-bottom--aiw-system {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: clamp(10px, 1.1vh, 14px);
}

.aiw-system-layout {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.54fr) minmax(290px, 0.66fr);
    gap: clamp(28px, 3vw, 44px);
}

.aiw-system-preview {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.6vw, 24px);
}

.aiw-system-preview figure {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: var(--aiw-paper-2);
    border: 1px solid var(--aiw-line);
}

.aiw-system-preview figure > span {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 5px 8px;
    background: rgba(243, 240, 233, 0.94);
    color: #53606d;
    font-size: clamp(8px, 0.56vw, 10px);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.aiw-system-preview img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.aiw-system-summary {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 1.8vw, 28px);
    border-top: 3px solid var(--aiw-blue);
    background: var(--aiw-panel);
}

.aiw-system-summary > p:not(.aiw-kicker) {
    margin: clamp(15px, 1.6vh, 20px) 0 0;
    color: var(--aiw-copy);
    font-size: clamp(10px, 0.75vw, 12px);
    line-height: 1.6;
}

.aiw-system-colors {
    margin-top: auto;
    padding-top: clamp(11px, 1.15vh, 15px);
    border-top: 1px solid rgba(52, 123, 214, 0.22);
}

.aiw-system-token {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 4px 0;
}

.aiw-system-token > p {
    margin: 0;
}

.aiw-system-token strong {
    display: block;
    color: #29343f;
    font-size: clamp(8px, 0.6vw, 10px);
}

.aiw-system-token small {
    display: block;
    margin-top: 1px;
    color: #6b7480;
    font-size: clamp(7px, 0.52vw, 9px);
}

.aiw-swatch {
    width: 19px;
    height: 19px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.aiw-swatch--ivory { background: #efe9df; }
.aiw-swatch--blue { background: #2456d6; }
.aiw-swatch--lavender { background: #d9d7f2; }
.aiw-swatch--charcoal { background: #34363b; }

.aiw-hierarchy {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--aiw-blue);
    border-bottom: 1px solid var(--aiw-line);
}

.aiw-hierarchy > div {
    min-width: 0;
    padding: clamp(9px, 0.95vh, 12px) clamp(13px, 1.05vw, 17px);
    border-right: 1px solid var(--aiw-line);
}

.aiw-hierarchy > div:last-child {
    border-right: 0;
}

.aiw-hierarchy strong {
    color: #9abde4;
    font-size: clamp(15px, 1.05vw, 18px);
    font-weight: 400;
}

.aiw-hierarchy span {
    display: block;
    margin-top: 3px;
    color: var(--aiw-blue);
    font-size: clamp(8px, 0.6vw, 10px);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.aiw-hierarchy p {
    margin: 3px 0 0;
    color: #626b75;
    font-size: clamp(8px, 0.58vw, 10px);
    line-height: 1.35;
}

.aiw-takeaway {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(18px, 1.7vw, 26px);
    padding: clamp(9px, 1vh, 12px) clamp(18px, 1.5vw, 24px);
    border-top: 1px solid var(--aiw-blue);
    background: rgba(255, 255, 255, 0.18);
}

.aiw-takeaway strong {
    color: var(--aiw-blue);
    font-size: clamp(9px, 0.64vw, 11px);
    letter-spacing: 0.045em;
    white-space: nowrap;
}

.aiw-takeaway p {
    margin: 0;
    color: #4f5964;
    font-size: clamp(9px, 0.68vw, 11px);
    line-height: 1.45;
}

/* =========================================================
   06. LOW HEIGHT
   ========================================================= */

@media (max-height: 760px) and (min-width: 901px) {
    #slide-49 .aiw-section,
    #slide-50 .aiw-section,
    #slide-51 .aiw-section,
    #slide-52 .aiw-section,
    #slide-53 .aiw-section {
        grid-template-rows: minmax(0, 25fr) minmax(0, 75fr);
    }

    #slide-49 .section-top--aiw,
    #slide-50 .section-top--aiw,
    #slide-51 .section-top--aiw,
    #slide-52 .section-top--aiw,
    #slide-53 .section-top--aiw {
        padding-top: 30px;
        padding-bottom: 13px;
    }

    #slide-49 .section-title,
    #slide-50 .section-title,
    #slide-51 .section-title,
    #slide-52 .section-title,
    #slide-53 .section-title {
        font-size: clamp(27px, 2.25vw, 34px);
    }

    .aiw-summary,
    .aiw-process,
    .aiw-system-summary {
        padding: 19px;
    }

    .aiw-role-grid,
    .aiw-process-list {
        margin-top: 14px;
    }

    .aiw-process-list > div {
        padding: 8px 0;
    }
}

/* =========================================================
   07. TABLET
   ========================================================= */

@media (max-width: 900px) {
    #slide-49 .aiw-section,
    #slide-50 .aiw-section,
    #slide-51 .aiw-section,
    #slide-52 .aiw-section,
    #slide-53 .aiw-section {
        grid-template-rows: auto auto;
    }

    #slide-49 .section-bottom--aiw-overview,
    .aiw-decision-layout,
    .aiw-system-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 24px;
    }

    .aiw-overview {
        display: contents;
    }

    .aiw-page-map {
        grid-column: 1;
        grid-template-columns: repeat(3, 1fr);
    }

    .aiw-gallery {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }

    .aiw-card-image {
        min-height: 520px;
    }

    .aiw-workflow,
    .aiw-hierarchy {
        grid-template-columns: repeat(2, 1fr);
    }

    .aiw-system-preview {
        min-height: 520px;
    }
}

/* =========================================================
   08. MOBILE
   ========================================================= */

@media (max-width: 640px) {
    .aiw-role-grid {
        grid-template-columns: 1fr;
    }

    .aiw-role-grid > div:nth-child(odd) {
        border-right: 0;
    }

    .aiw-role-grid > div:nth-child(even) {
        padding-left: 0;
    }

    .aiw-page-map {
        grid-template-columns: 1fr;
    }

    .aiw-page-map > div {
        border-right: 0;
        border-bottom: 1px solid var(--aiw-line);
    }

    .aiw-gallery-flow {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: center;
    }

    .aiw-gallery-flow i {
        transform: rotate(90deg);
    }

    .aiw-gallery-flow small {
        padding: 10px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .aiw-workflow,
    .aiw-hierarchy {
        grid-template-columns: 1fr;
    }

    .aiw-workflow > div,
    .aiw-hierarchy > div {
        border-right: 0;
        border-bottom: 1px solid var(--aiw-line);
    }

    .aiw-decision-row {
        grid-template-columns: 1fr;
    }

    .aiw-decision-row > div {
        border-right: 0;
        border-bottom: 1px solid var(--aiw-line);
    }

    .aiw-system-preview {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .aiw-system-preview figure {
        min-height: 420px;
    }

    .aiw-takeaway {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}