.career-page .sub-center-tit {
    margin-bottom: 160px;
}
.info-section .sub-center-tit h3 {
    margin-bottom: 80px;
}
.sub-center-tit .policy-tit-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}
.sub-center-tit .policy-tit-box .badge {
    padding: 9px 39px;
    background-color: #6e0000;
    border-radius: 300px;
    color: #fff;
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.02em;
}
.sub-center-tit .policy-tit-box .txt {
    color: #141414;
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.02em;
}
.list-section {
    background-color: #f8f8f8;
    padding: 120px 0;
}
.list-section .sub-cat-tit {
    margin-bottom: 0;
}
.list-section .inner {
    display: flex;
    gap: 100px;
    align-items: center;
}
.list-section .list-item-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    flex-grow: 1;
}
.list-section .list-item-wrap li {
    padding: 40px;
    border: 1px solid #d5d5d5;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.list-section .list-item-wrap li .num {
    width: 55px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.025em;
    border-radius: 100px;
    background: #6e0000;
}
.list-section .list-item-wrap li p {
    color: #2c2c2c;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 300;
    line-height: 150%;
    letter-spacing: -0.02em;
}
.list-section .list-item-wrap li p b {
    font-weight: 600;
}

/* =========================================================
   info-wrap : 제조 과정 및 프로세스 (PC + Mobile flow chart)
   ========================================================= */
.flow-section {
    padding: 160px 0; /* 160px @1920 */
}
.flow-section .sub-center-tit {
    padding: 0;
    margin: 0;
}
.info-wrap {
    margin-top: 80px; /* 80px @1920 */
}

/* ---------- PC layout (>=769px) ---------- */
/* All sizes are based on a 1920px design width.
   Container uses min(vw, design-px) so it scales with the viewport
   and caps at the design size on very wide screens. All inner
   metrics use vw so they stay proportional to the container. */
.info-wrap .pc-info {
    position: relative;
    width: min(78.125vw, 1500px); /* 1500/1920 */
    aspect-ratio: 1500 / 496;
    margin: 0 auto;
}
.info-wrap .pc-info > .line,
.info-wrap .pc-info > .pc-node,
.info-wrap .pc-info > .pc-diamond,
.info-wrap .pc-info > .pc-badge,
.info-wrap .pc-info > .pc-icon {
    position: absolute;
}

/* connector lines (inline <svg>) */
.info-wrap .pc-info .line {
    display: block;
    overflow: visible;
}
.info-wrap .pc-info .line-pill {
    left: 0;
    top: 18.95%; /* 94/496 */
    width: 99.83%; /* 1497.5/1500 */
    height: 62.1%; /* 308/496 */
}
.info-wrap .pc-info .line-vline {
    left: 53.2%; /* 798/1500 */
    top: 19.35%; /* 96/496 */
    width: 0.13%; /* 2/1500 */
    height: 56.25%; /* 279/496 */
}

/* circle nodes (190x190) */
.info-wrap .pc-info .pc-node {
    width: 12.667%; /* 190/1500 */
    aspect-ratio: 1;
    border: 0.156vw solid #6e0000; /* 3px @1920 */
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #6e0000;
    line-height: 1.3;
    letter-spacing: -0.025em;
    box-sizing: border-box;
}
.info-wrap .pc-info .pc-node strong {
    font-size: 1.354vw; /* 26px @1920 */
    font-weight: 600;
    display: block;
}
.info-wrap .pc-info .pc-node em {
    font-size: 1.042vw; /* 20px @1920 */
    font-weight: 400;
    font-style: normal;
    display: block;
    margin-top: 0;
}
.info-wrap .pc-info .pc-node.is-fill {
    background: #6e0000;
    border-color: #6e0000;
    color: #fff;
}
.info-wrap .pc-info .pc-node--tl {
    left: 0;
    top: 0;
}
.info-wrap .pc-info .pc-node--bl {
    left: 3.733%;
    top: 61.69%;
} /* 56/1500, 306/496 */
.info-wrap .pc-info .pc-node--tr {
    left: 66%;
    top: 0;
} /* 990/1500 */
.info-wrap .pc-info .pc-node--br {
    left: 46.933%;
    top: 61.69%;
} /* 704/1500 */

/* diamond decision (시연 제품이 필요한가?) */
.info-wrap .pc-info .pc-diamond {
    left: 39.8%; /* 597/1500 */
    top: 2.02%; /* 10/496 */
    width: 11.2%; /* 168/1500 */
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-wrap .pc-info .pc-diamond__inner {
    width: 70.71%; /* 118.794/168 */
    aspect-ratio: 1;
    transform: rotate(-45deg);
    border: 0.104vw solid #6e0000; /* 2px */
    border-radius: 1.042vw; /* 20px */
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-wrap .pc-info .pc-diamond__inner span {
    transform: rotate(45deg);
    color: #6e0000;
    text-align: center;
    font-size: 1.042vw; /* 20px */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

/* YES / NO badge */
.info-wrap .pc-info .pc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.521vw 1.042vw; /* 10 20 */
    border-radius: 99vw;
    color: #fff;
    background: #6e0000;
    font-size: 0.938vw; /* 18px */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.025em;
    white-space: nowrap;
    box-sizing: border-box;
}
.info-wrap .pc-info .pc-badge--yes {
    left: 55.53%; /* 833/1500 */
    top: 14.52%; /* 72/496 */
}
.info-wrap .pc-info .pc-badge--no {
    left: 51.07%; /* 766/1500 */
    top: 40.32%; /* 200/496 */
    background: #fff;
    color: #6e0000;
    border: 0.052vw solid #6e0000; /* 1px */
}

/* icon items: image on top, dot, label */
.info-wrap .pc-info .pc-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}
.info-wrap .pc-info .pc-icon .ic {
    width: 2.813vw; /* 54px @1920 */
    height: 2.813vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-wrap .pc-info .pc-icon .ic img {
    max-width: 100%;
    max-height: 100%;
}
.info-wrap .pc-info .pc-icon .dot {
    width: 0.729vw; /* 14px */
    height: 0.729vw;
    border-radius: 50%;
    background: #fff;
    border: 0.156vw solid #6e0000; /* 3px */
    margin-top: 0.208vw; /* 4px */
    box-sizing: border-box;
}
.info-wrap .pc-info .pc-icon p {
    margin-top: 0.417vw; /* 8px */
    color: #222;
    text-align: center;
    font-size: 0.938vw; /* 18px */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

/* icon center-X (using translateX(-50%)) */
/* Top row (between TL circle and diamond) — top:29/496=5.85% */
.info-wrap .pc-info .pc-icon--p1 {
    left: 18%;
    top: 5.85%;
} /* 제작 가능 여부 논의 — 270 */
.info-wrap .pc-info .pc-icon--p2 {
    left: 26%;
    top: 5.85%;
} /* 제품설계 — 390 */
.info-wrap .pc-info .pc-icon--p3 {
    left: 34%;
    top: 5.85%;
} /* 서류준비 — 510 */

/* Right top icon (시연 제품 제작) — between TR circle and right curve */
.info-wrap .pc-info .pc-icon--p4 {
    left: 84.8%;
    top: 5.85%;
} /* 1272 */

/* Bottom row right of 제작 진행 (제품 개선, 고객 피드백 수령) — top:335/496=67.54% */
.info-wrap .pc-info .pc-icon--p5 {
    left: 68.6%;
    top: 67.54%;
} /* 제품 개선 — 1029 */
.info-wrap .pc-info .pc-icon--p6 {
    left: 79.67%;
    top: 67.54%;
} /* 고객 피드백 — 1195 */

/* Bottom row left of 제작 진행 (제품 배송 및 시술 진행, 제품 제작) */
.info-wrap .pc-info .pc-icon--p7 {
    left: 25.13%;
    top: 67.54%;
} /* 제품 배송 — 377 */
.info-wrap .pc-info .pc-icon--p8 {
    left: 36.2%;
    top: 67.54%;
} /* 제품 제작 — 543 */

/* lock vw-based metrics at design size for very wide viewports */
@media (min-width: 1920px) {
    .flow-section {
        padding: 160px 0;
    }
    .info-wrap {
        margin-top: 80px;
    }
    .info-wrap .pc-info .pc-node {
        border-width: 3px;
    }
    .info-wrap .pc-info .pc-node strong {
        font-size: 26px;
    }
    .info-wrap .pc-info .pc-node em {
        font-size: 20px;
    }
    .info-wrap .pc-info .pc-diamond__inner {
        border-width: 2px;
        border-radius: 20px;
    }
    .info-wrap .pc-info .pc-diamond__inner span {
        font-size: 20px;
    }
    .info-wrap .pc-info .pc-badge {
        padding: 10px 20px;
        font-size: 18px;
    }
    .info-wrap .pc-info .pc-badge--no {
        border-width: 1px;
    }
    .info-wrap .pc-info .pc-icon .ic {
        width: 54px;
        height: 54px;
    }
    .info-wrap .pc-info .pc-icon .dot {
        width: 14px;
        height: 14px;
        border-width: 3px;
        margin-top: 4px;
    }
    .info-wrap .pc-info .pc-icon p {
        margin-top: 8px;
        font-size: 18px;
    }
}

/* ---------- Mobile layout ---------- */
.info-wrap .m-info {
    display: none;
}

/* ---------- Mobile breakpoint (<=768px) ---------- */
@media (max-width: 768px) {
    .career-page .sub-center-tit {
        margin-bottom: 60px;
    }
    .info-section .sub-center-tit h3 {
        margin-bottom: 35px;
    }
    .sub-center-tit .policy-tit-box {
        flex-direction: column;
        gap: 12px;
    }
    .sub-center-tit .policy-tit-box .txt {
        font-size: 14px;
    }
    .list-section .sub-cat-tit {
        text-align: center;
    }
    .list-section {
        padding: 60px 0;
    }
    .list-section .inner {
        flex-direction: column;
        gap: 60px;
    }
    .list-section .list-item-wrap {
        grid-template-columns: 1fr;
        width: 100%;
    }
    .list-section .list-item-wrap li {
        padding: 25px;
        gap: 10px;
    }
    .list-section .list-item-wrap li .num {
        font-size: 15px;
        width: 45px;
        height: 30px;
    }
    .flow-section {
        padding: 80px 0;
    }
    .info-wrap {
        margin-top: 60px;
    }
    .info-wrap .pc-info {
        display: none;
    }
    .info-wrap .m-info {
        display: block;
        position: relative;
        width: 100%; /* 318.36/375 */
        height: 268.89vw; /* 1008.33/375 */
        margin: 0 auto;
    }
    .info-wrap .m-info > * {
        position: absolute;
        box-sizing: border-box;
    }

    /* all rails are drawn in a single inline <svg>, sized to fill the m-info box.
       SVG uses non-scaling-stroke so line thickness stays consistent. */
    .info-wrap .m-info .m-lines {
        display: block;
        overflow: visible;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    /* circles (124.4 x 124.4) */
    .info-wrap .m-info .m-node {
        width: 33.17vw; /* 124.40/375 */
        aspect-ratio: 1;
        border-radius: 50%;
        border: 0.524vw solid #6e0000; /* 1.964px */
        background: #fff;
        color: #6e0000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.3;
        letter-spacing: -0.025em;
    }
    .info-wrap .m-info .m-node strong {
        font-size: 4.267vw; /* 16px */
        font-weight: 600;
        display: block;
    }
    .info-wrap .m-info .m-node em {
        font-size: 4.267vw;
        font-weight: 400;
        font-style: normal;
        display: block;
        margin-top: 1.067vw; /* 4px */
    }
    .info-wrap .m-info .m-node.is-fill {
        background: #6e0000;
        border-color: #6e0000;
        color: #fff;
    }
    .info-wrap .m-info .m-node--top {
        left: 0.63%;
        top: 0;
    } /* 2 / 0 */
    .info-wrap .m-info .m-node--mid-left {
        left: 0.63%;
        top: 56.56%;
    } /* 570.3/1008.33 */
    .info-wrap .m-info .m-node--mid-right {
        left: 60.92%;
        top: 41.17%;
    } /* 193.95/318.36, 415.12/1008.33 */
    .info-wrap .m-info .m-node--bot-right {
        left: 60.92%;
        top: 87.66%;
    } /* 883.93/1008.33 */

    /* diamond */
    .info-wrap .m-info .m-diamond {
        left: 0;
        top: 37.34%; /* 376.55/1008.33 */
        width: 33.89vw; /* 127.10/375 */
        height: 33.89vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .info-wrap .m-info .m-diamond__inner {
        width: 70.71%; /* 89.87/127.10 */
        height: 70.71%;
        transform: rotate(-45deg);
        border: 0.349vw solid #6e0000; /* 1.31px */
        border-radius: 3.49vw; /* 13.095px */
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .info-wrap .m-info .m-diamond__inner span {
        transform: rotate(45deg);
        color: #6e0000;
        text-align: center;
        font-size: 4.267vw;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.025em;
        white-space: nowrap;
    }

    /* YES / NO badges */
    .info-wrap .m-info .m-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1.746vw 3.492vw; /* 6.548 13.095 */
        border-radius: 99vw;
        font-weight: 600;
        font-size: 3.143vw; /* 11.786px */
        letter-spacing: -0.025em;
        line-height: 1.3;
        white-space: nowrap;
    }
    .info-wrap .m-info .m-badge--yes {
        background: #6e0000;
        color: #fff;
        left: 12.55%; /* 39.98/318.36 */
        top: 51.17%; /* 515.95/1008.33 */
    }
    .info-wrap .m-info .m-badge--no {
        background: #fff;
        color: #6e0000;
        border: 0.175vw solid #6e0000; /* 0.655px */
        left: 36.93%; /* 117.57/318.36 */
        top: 45.94%; /* 463.24/1008.33 */
    }

    /* icon groups (vertical stacks) */
    .info-wrap .m-info .m-icons {
        display: flex;
        flex-direction: column;
    }
    .info-wrap .m-info .m-icon {
        display: flex;
        align-items: center;
        gap: 2.095vw; /* 7.857px */
    }
    .info-wrap .m-info .m-icon .ic {
        width: 9.429vw; /* 35.357px */
        height: 9.429vw;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .info-wrap .m-info .m-icon .ic img {
        max-width: 100%;
        max-height: 100%;
    }
    .info-wrap .m-info .m-icon .dot {
        width: 2.444vw; /* 9.167px */
        height: 2.444vw;
        flex-shrink: 0;
        border-radius: 50%;
        background: #fff;
        border: 0.524vw solid #6e0000;
        box-sizing: border-box;
    }
    .info-wrap .m-info .m-icon p {
        color: #222;
        font-size: 14px; /* 16px */
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.025em;
    }

    /* top icons (제작 가능 여부 논의 / 제품설계 / 서류준비) */
    .info-wrap .m-info .m-icons--top {
        left: 5.85%; /* 16.4/318.36 */
        top: 14.94%; /* 150.6/1008.33 */
        gap: 5.238vw; /* 19.643px */
    }

    /* right column icons (제품 제작 / 제품 배송)
       — left edge calculated so the dot lands on the right rail (x=256.15)
         dot center = container_left + icon(35.357) + gap(7.857) + dot_radius(4.583) ≈ 47.80
         container_left = 256.15 − 47.80 = 208.35 → 208.35/318.358 = 65.45% */
    .info-wrap .m-info .m-icons--right {
        left: 66.25%;
        top: 61.09%; /* 616/1008.33 */
        gap: 4.016vw; /* 15.06px */
    }

    /* bottom left column (5 icons) */
    .info-wrap .m-info .m-icons--bot {
        left: 5.75%;
        top: 70.41%; /* 710/1008.33 */
        gap: 1.746vw; /* 6.548px */
    }
}
