/* =========================================================
   RESET
========================================================= */

.aha-process,
.aha-process * {
    box-sizing: border-box;
}


/* =========================================================
   PROCESS
   DARK DEFAULT
========================================================= */

.aha-process {
    --ap-accent: var(--aha-primary);

    /* DARK */
    --ap-bg: #100b1d;
    --ap-text: #f7f5ff;
    --ap-muted: #aaa4b7;
    --ap-dim: #625b73;
    --ap-line: rgba(255,255,255,.12);
    --ap-point: #615a70;
    --ap-outline: rgba(255,255,255,.28);
    --ap-glow: rgba(124,103,255,.16);

    --ap-sticky-top: 74px;

    position: relative;
    width: 100%;

    background: var(--ap-bg);
    color: var(--ap-text);

    font-family:
        'Pretendard',
        'Noto Sans KR',
        Arial,
        sans-serif;

    transition:
        background-color .35s ease,
        color .35s ease;
}


/* =========================================================
   LIGHT THEME
========================================================= */

body.aha-light-theme .aha-process {
    --ap-bg: #ffffff;
    --ap-text: #111116;
    --ap-muted: #55555d;
    --ap-dim: #b9b9c3;
    --ap-line: #e7e7ed;
    --ap-point: #c9c9d2;
    --ap-outline: rgba(17,17,22,.28);
    --ap-glow: rgba(124,103,255,.10);
}


/* =========================================================
   STICKY TRACK
========================================================= */

.aha-process-track {
    position: relative;

    min-height:
        calc(100svh + 620px);

    background:
        var(--ap-bg);

    transition:
        background-color .35s ease;
}


.aha-process-sticky {
    position: sticky;

    top:
        var(--ap-sticky-top);

    width: 100%;

    min-height:
        calc(
            100svh -
            var(--ap-sticky-top)
        );

    display: flex;
    align-items: center;

    overflow: hidden;

    background:#fbfaff;

    transition:
        background-color .35s ease;
}


.aha-process-inner {
    width:
        min(
            1600px,
            calc(100% - 80px)
        );

    margin:
        0 auto;

    padding:
        48px 0 58px;
}


/* =========================================================
   HEAD
========================================================= */

.aha-process-head {
    display: block;

    max-width: 760px;

    padding-bottom: 68px;

    text-align: left;
}


.aha-process-title {
    margin: 0;

    color:
        var(--ap-text);

    font-family:
        'Pretendard',
        'Noto Sans KR',
        Arial,
        sans-serif;

    font-size:
        clamp(
            52px,
            5.2vw,
            76px
        );

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -.045em;

    transition:
        color .35s ease;
}


/* =========================================================
   PROCESS TITLE FILL
========================================================= */

.aha-process-title .outline {
    position: relative;

    display: inline-block;

    color: transparent;

    -webkit-text-stroke:
        1px var(--ap-outline);

    transition:
        -webkit-text-stroke-color .55s ease 1.72s;
}


.aha-process-title .outline::before {
    content:
        attr(data-text);

    position: absolute;

    left: 0;
    top: -.04em;
    right: -.16em;
    bottom: -.12em;

    z-index: 2;

    color:
        var(--ap-accent);

    -webkit-text-stroke: 0;

    white-space: nowrap;

    pointer-events: none;

    overflow: visible;

    clip-path:
        inset(
            108%
            -12%
            -10%
            -4%
        );

    will-change:
        clip-path;
}


.aha-process-head.is-in
.aha-process-title
.outline {
    -webkit-text-stroke-color:
        transparent;
}


.aha-process-head.is-in
.aha-process-title
.outline::before {
    animation:
        aha-process-title-fill
        1.55s
        .48s
        cubic-bezier(.22,.65,.2,1)
        forwards;
}


@keyframes aha-process-title-fill {

    0% {
        clip-path:
            inset(
                108%
                -12%
                -10%
                -4%
            );
    }

    100% {
        clip-path:
            inset(
                -10%
                -12%
                -10%
                -4%
            );
    }

}


/* =========================================================
   DESCRIPTION
========================================================= */

.aha-process-desc {
    max-width: 620px;

    margin:
        30px 0 0;

    color:
        var(--ap-muted);

    font-size: 18px;

    font-weight: 500;

    line-height: 1.85;

    letter-spacing: -.022em;

    word-break: keep-all;

    transition:
        color .35s ease;
}


/* =========================================================
   STEPS
========================================================= */

.aha-process-steps {
    position: relative;

    display: grid;

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

    align-items: start;
}


/* =========================================================
   PROGRESS LINE
========================================================= */

.aha-process-line {
    position: absolute;

    z-index: 1;

    left: 10%;
    right: 10%;

    top: 44px;

    height: 1px;

    background:
        var(--ap-line);

    pointer-events: none;

    transition:
        background-color .35s ease;
}


.aha-process-line-fill {
    position: absolute;

    left: 0;
    top: -1px;

    width: 0;

    height: 3px;

    background:
        var(--ap-accent);

    will-change:
        width;

    transition:
        width .16s linear;
}


.aha-process-line-dot {
    position: absolute;

    top: 50%;
    right: -6px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background:
        var(--ap-accent);

    opacity: 0;

    transform:
        translateY(-50%);

    box-shadow:
        0 0 0 5px
        var(--ap-glow);

    transition:
        opacity .3s ease,
        box-shadow .35s ease;
}


.aha-process-line.is-on
.aha-process-line-dot {
    opacity: 1;
}


/* =========================================================
   STEP
========================================================= */

.aha-process-step {
    position: relative;

    min-width: 0;

    padding:
        0 clamp(
            10px,
            1.1vw,
            18px
        );

    text-align: center;
}


/* =========================================================
   ICON
========================================================= */

.aha-process-icon {
    position: relative;

    z-index: 2;

    display: grid;

    place-items: center;

    width: 88px;
    height: 88px;

    margin:
        0 auto 26px;

    color:
        var(--ap-dim);

    background:#fbfaff;

    transition:
        color .35s ease,
        background-color .35s ease,
        transform .45s
        cubic-bezier(.16,1,.3,1);
}


/* 모든 아이콘 동일 사이즈 */

.aha-process-icon svg {
    display: block;

    width: 60px;
    height: 60px;

    overflow: visible;
}


/* =========================================================
   ICON STYLE
========================================================= */

.aha-process-icon .icon-line {
    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.65;

    stroke-linecap: round;

    stroke-linejoin: round;

    vector-effect:
        non-scaling-stroke;
}


.aha-process-icon .icon-soft {
    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.3;

    stroke-linecap: round;

    stroke-linejoin: round;

    opacity: .42;

    vector-effect:
        non-scaling-stroke;
}


.aha-process-icon .icon-dot {
    fill:
        currentColor;

    stroke: none;
}


/* =========================================================
   STEP POINT
========================================================= */

.aha-process-point {
    position: absolute;

    z-index: 3;

    left: 50%;
    top: 44px;

    width: 9px;
    height: 9px;

    border:
        2px solid
        var(--ap-bg);

    border-radius: 50%;

    background:
        var(--ap-point);

    transform:
        translate(
            -50%,
            -50%
        );

    transition:
        background .3s ease,
        border-color .35s ease,
        transform .35s
        cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   ACTIVE
========================================================= */

.aha-process-step.is-active
.aha-process-icon {
    color:
        var(--ap-accent);

    transform:
        translateY(-3px)
        scale(1.035);
}


.aha-process-step.is-active
.aha-process-point {
    background:
        var(--ap-accent);

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.25);
}


/* =========================================================
   META
   번호 / 라벨
========================================================= */

.aha-process-meta {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-bottom: 14px;

    color:
        var(--ap-dim);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .14em;

    white-space: nowrap;

    transition:
        color .35s ease;
}


.aha-process-meta
span:first-child {
    display: block;

    width: 100%;

    font-size: 22px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -.04em;
}


.aha-process-step.is-active
.aha-process-meta {
    color:
        var(--ap-accent);
}


/* =========================================================
   TEXT
========================================================= */

.aha-process-step h3 {
    margin:
        0 0 12px;

    color:
        var(--ap-text);

    font-size: 26px;

    font-weight: 850;

    line-height: 1.25;

    letter-spacing: -.04em;

    transition:
        color .35s ease;
}


.aha-process-step p {
    max-width: 250px;

    margin:
        0 auto;

    color:
        var(--ap-muted);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.8;

    letter-spacing: -.018em;

    word-break: keep-all;

    transition:
        color .35s ease;
}


/* =========================================================
   HOVER
========================================================= */

@media
(hover:hover)
and
(pointer:fine) {

    .aha-process-step:hover
    .aha-process-icon,

    .aha-process-step:hover
    .aha-process-meta {
        color:
            var(--ap-accent);
    }


    .aha-process-step:hover
    .aha-process-icon {
        transform:
            translateY(-3px)
            scale(1.035);
    }

}


/* =========================================================
   SHORT VIEWPORT
   낮은 화면에서 sticky 내부 잘림 방지
========================================================= */

@media
(min-width:701px)
and
(max-height:820px) {

    .aha-process-inner {
        padding:
            28px 0 34px;
    }


    .aha-process-head {
        padding-bottom:
            44px;
    }


    .aha-process-title {
        font-size:
            clamp(
                40px,
                4.2vw,
                58px
            );
    }


    .aha-process-desc {
        margin-top: 20px;

        font-size: 16px;

        line-height: 1.78;
    }


    .aha-process-icon {
        width: 72px;
        height: 72px;

        margin-bottom: 20px;
    }


    .aha-process-icon svg {
        width: 50px;
        height: 50px;
    }


    .aha-process-line,
    .aha-process-point {
        top: 36px;
    }


    .aha-process-meta {
        margin-bottom: 12px;

        font-size: 10px;
    }


    .aha-process-meta
    span:first-child {
        font-size: 19px;
    }


    .aha-process-step h3 {
        margin-bottom: 10px;

        font-size: 22px;
    }


    .aha-process-step p {
        max-width: 235px;

        font-size: 15px;

        line-height: 1.75;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media
(max-width:1100px)
and
(min-width:701px) {

    .aha-process-inner {
        width:
            min(
                1600px,
                calc(100% - 56px)
            );
    }


    .aha-process-head {
        padding-bottom:
            52px;
    }


    .aha-process-title {
        font-size:
            clamp(
                46px,
                5.6vw,
                64px
            );
    }


    .aha-process-desc {
        max-width: 560px;

        margin-top: 24px;

        font-size: 16px;

        line-height: 1.8;
    }


    .aha-process-icon {
        width: 76px;
        height: 76px;

        margin-bottom:
            22px;
    }


    .aha-process-icon svg {
        width: 52px;
        height: 52px;
    }


    .aha-process-line,
    .aha-process-point {
        top: 38px;
    }


    .aha-process-meta {
        gap: 7px;

        margin-bottom: 12px;

        font-size: 10px;

        letter-spacing:
            .1em;
    }


    .aha-process-meta
    span:first-child {
        font-size:
            19px;
    }


    .aha-process-step h3 {
        margin-bottom: 10px;

        font-size:
            22px;
    }


    .aha-process-step p {
        max-width:
            200px;

        font-size:
            14px;

        line-height: 1.72;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media
(max-width:700px) {

    .aha-process-track {
        min-height: 0;
    }


    .aha-process-sticky {
        position: relative;

        top: auto;

        min-height: 0;

        display: block;

        overflow: visible;
    }


    .aha-process-inner {
        width:
            calc(100% - 32px);

        margin:
            0 auto;

        padding:
            76px 0;
    }


    .aha-process-head {
        max-width: none;

        padding-bottom:
            50px;

        text-align: left;
    }


    .aha-process-title {
        font-size:
            11.8vw;

        line-height:
            .98;

        letter-spacing:
            -.045em;
    }


    .aha-process-desc {
        max-width: none;

        margin-top:
            22px;

        font-size:
            14.5px;

        line-height:
            1.8;
    }


    /* STEPS */

    .aha-process-steps {
        display: block;

        padding-left:
            66px;
    }


    /* LINE
       top / height 는 JS 가 아이콘 중심 기준으로 재계산 */

    .aha-process-line {
        left: 25px;
        right: auto;

        top: 20px;
        bottom: auto;

        width: 1px;
        height: auto;
    }


    .aha-process-line-fill {
        left: -1px;
        top: 0;

        width: 3px;
        height: 0;

        will-change: height;

        transition:
            height .16s linear;
    }


    .aha-process-line-dot {
        top: auto;
        right: auto;

        left: 50%;
        bottom: -5px;

        transform:
            translateX(-50%);
    }


    /* STEP */

    .aha-process-step {
        min-height:
            186px;

        padding:
            0 0 42px;

        text-align: left;
    }


    .aha-process-step:last-of-type {
        min-height: 0;

        padding-bottom: 0;
    }


    /* ICON */

    .aha-process-icon {
        position: absolute;

        left: -66px;
        top: -5px;

        width: 50px;
        height: 50px;

        margin: 0;
    }


    .aha-process-icon svg {
        width: 38px;
        height: 38px;
    }


    .aha-process-point {
        display: none;
    }


    /* TEXT */

    .aha-process-meta {
        align-items:
            flex-start;

        justify-content:
            flex-start;

        gap: 6px;

        margin-bottom:
            9px;

        font-size: 10px;

        letter-spacing:
            .12em;
    }


    .aha-process-meta
    span:first-child {
        font-size:
            19px;
    }


    .aha-process-step h3 {
        margin-bottom:
            9px;

        font-size:
            20px;
    }


    .aha-process-step p {
        max-width:
            330px;

        margin: 0;

        font-size:
            14.5px;

        line-height:
            1.78;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media
(prefers-reduced-motion:reduce) {

    .aha-process-track {
        min-height:
            0 !important;
    }


    .aha-process-sticky {
        position:
            relative !important;

        top:
            auto !important;

        min-height:
            0 !important;
    }


    .aha-process-line-fill {
        transition:
            none !important;
    }


    .aha-process-title
    .outline {
        -webkit-text-stroke-color:
            transparent !important;
    }


    .aha-process-title
    .outline::before {
        clip-path:
            inset(
                -10%
                -12%
                -10%
                -4%
            ) !important;

        animation:
            none !important;
    }

}



/* =========================================================
   AHA WEB — FINAL TYPOGRAPHY OVERRIDE / PROCESS
========================================================= */

.aha-process,
.aha-process *{
  font-family:"Pretendard Variable","Pretendard","Noto Sans KR",Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.aha-process-title{
  font-size:clamp(48px,4.8vw,78px) !important;
  font-weight:800 !important;
  line-height:.92 !important;
  letter-spacing:-.015em !important;
}

.aha-process-desc{
  font-size:16px !important;
  font-weight:500 !important;
  line-height:1.75 !important;
  letter-spacing:-.025em !important;
}

.aha-process-meta{
  font-size:10px !important;
  font-weight:700 !important;
}

.aha-process-meta span:first-child{
  font-size:20px !important;
  font-weight:800 !important;
}

.aha-process-step h3{
  font-size:22px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  letter-spacing:-.03em !important;
}

.aha-process-step p{
  font-size:18px !important;
  font-weight:500 !important;
  line-height:1.7 !important;
  letter-spacing:-.02em !important;
}

/* MOBILE TYPOGRAPHY는 768px부터 동일 */
@media (max-width:768px){
  .aha-process-title{
    font-size:clamp(40px,10.8vw,48px) !important;
    font-weight:800 !important;
    line-height:.94 !important;
    letter-spacing:-.02em !important;
  }

  .aha-process-desc{
    font-size:15px !important;
    font-weight:500 !important;
    line-height:1.7 !important;
    letter-spacing:-.025em !important;
  }

  .aha-process-meta{
    font-size:9px !important;
    font-weight:700 !important;
    letter-spacing:.10em !important;
  }

  .aha-process-meta span:first-child{
    font-size:18px !important;
    font-weight:800 !important;
  }

  .aha-process-step h3{
    font-size:18px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
  }

  .aha-process-step p{
    font-size:15px !important;
    font-weight:500 !important;
    line-height:1.68 !important;
    letter-spacing:-.02em !important;
  }
}