/* ===========================================================================
   어린이 성장교정 (/ortho) 전용 스타일
   공통(헤더/퀵메뉴/둘러보기/푸터/.mark/토큰)은 main.css 에 있다.
   =========================================================================== */

/* 인트로 ---------------------------------------------------------------------
   시안: 섹션 1180px. 인용문 2개가 배경 인물 사진 위에 좌표로 놓인다.
   ---------------------------------------------------------------------------- */
.ortho-intro {
    height: 1180px;
    padding-top: 153px;
    background: url('/static/images/ortho/intro-bg.webp') no-repeat center top / cover;
}

.ortho-intro .inner {
    position: relative;
    height: 100%;
}

.ortho-intro__head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ortho-intro__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-brown);
}

.ortho-intro__lead {
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: -0.9px;
    color: var(--c-body);
}

/* 인용문 ---------------------------------------------------------------------- */
.ortho-quote {
    position: absolute;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: -0.8px;
    color: #535353;
    white-space: nowrap;
}

.ortho-quote b {
    font-weight: 500;
    color: #000;
}

/* 따옴표는 인용문 전체가 아니라 문장(p) 에 붙는다.
   blockquote 기준이면 닫는 따옴표가 이름·직함(footer) 아래까지 내려간다.
   inline-block 이라 상자가 글 폭에 맞춰지므로 줄바꿈이 달라져도 따라온다. */
.ortho-quote p {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/* 시안이 텍스트로 넣은 큰 따옴표. 장식이라 마크업이 아니라 의사요소로 둔다 */
.ortho-quote p::before,
.ortho-quote p::after {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 700;
    font-size: 5.75em;
    letter-spacing: -0.04em;
    color: #e5e5e5;
    pointer-events: none;
}

/* 여는 따옴표: 모든 줄이 같은 왼쪽에서 시작하므로 문단 왼쪽 바깥에 고정 */
.ortho-quote p::before {
    content: '\201C';
    position: absolute;
    left: -0.5em;
    top: -0.1em;
    line-height: 1;
}

/* 닫는 따옴표: 마지막 글자 뒤를 따라간다.
   문단 오른쪽 끝에 고정하면 마지막 줄이 짧은 인용문(센터장)에서만 멀찍이 떨어진다.
   line-height 0 이라 줄 높이는 건드리지 않는다.
   따옴표 잉크는 기준선 '위' 에 그려지므로(대문자 높이 근처) 아래로 크게 내려야
   마지막 줄 옆에 온다. 위치가 어긋나면 이 vertical-align 하나만 조절하면 된다. */
.ortho-quote p::after {
    content: '\201D';
    display: inline-block;
    margin-left: 0.04em;
    line-height: 0;
    vertical-align: -0.8em;
}

.ortho-quote footer {
    display: flex;
    flex-direction: column;
}

.ortho-quote__role {
    font-weight: 300;
    color: #959595;
}

.ortho-quote__name {
    font-size: 1.25em;
    font-weight: 500;
    color: #535353;
}

.ortho-quote__name b {
    font-weight: 700;
    color: #535353;
}

/* 시안 좌표: 원장 (575,399) 661폭 / 센터장 (830,653) 442폭.
   컨테이너(1170) · 콘텐츠 높이(1027) 대비 비율로 두면 폭이 줄어도 구도가 유지된다. */
.ortho-quote--doctor {
    left: 21.5%;
    top: 24.9%;
    width: 47.8%;
}

.ortho-quote--staff {
    left: 43.3%;
    top: 49.7%;
    width: 32.1%;
}

/* 교정 시스템 -----------------------------------------------------------------
   시안: 섹션 4644px, 타이틀 top 169 / 스텝 448 · 1951 · 3500
   ---------------------------------------------------------------------------- */
.ortho-sys {
    padding: 169px 0 194px;
    background: url('/static/images/ortho/sys-bg.webp') no-repeat center top / 100% auto;
}

.ortho-sys__head {
    position: relative;
    padding-bottom: 75px;
    border-bottom: 1px solid #d9d2cc;
}

.ortho-sys__title {
    font-size: 55px;
    font-weight: 700;
    line-height: 1.2;
    color: #313131;
}

.ortho-sys__title em {
    font-style: normal;
    color: var(--c-brown-mid);
}

/* 시안 좌표: deco (1219,152) / seal (1507.7, 613.7). 컨테이너(375~1545) 기준으로 환산 */
.ortho-sys__deco {
    position: absolute;
    right: -14px;
    top: -17px;
    width: 340px;
    height: auto;
}

/* STEP 01 기준. 헤드(제목 132 + padding 75 + border 1)와 step margin 75 를 뺀 값이라
   기존 위치(헤드 기준 445)와 화면상 같은 자리다.
   z-index 2 = 흰 패널(.ortho-item::before, 0)과 카드 내용(.ortho-item > *, 1) 위 */
.ortho-sys__seal {
    position: absolute;
    right: -80px;
    top: 162px;
    width: 163px;
    height: 163px;
    z-index: 2;
    animation: ortho-seal-spin 24s linear infinite;
}

@keyframes ortho-seal-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 모션 최소화를 켠 사용자에게는 돌리지 않는다 */
@media (prefers-reduced-motion: reduce) {
    .ortho-sys__seal {
        animation: none;
    }
}

.ortho-sys__seal text {
    font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
    font-size: 20px;
    font-weight: 500;
    fill: var(--c-brown);
}

/* 스텝 ------------------------------------------------------------------------ */
.ortho-step {
    position: relative;   /* STEP 01 의 원형 문구(.ortho-sys__seal) 기준점 */
    margin-top: 75px;
}

.ortho-step__head {
    display: flex;
    gap: 18px;
}

/* 시안은 60px 원 SVG(#553b26) + 숫자였다. 단색 원이라 CSS 로 그린다 */
.ortho-step__num {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #553b26;

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

    font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.9px;
    color: #fff;
}

.ortho-step__title {
    font-size: 33px;
    font-weight: 700;
    line-height: 1.2;
    color: #553b26;
}

/* 33px 제목용 형광펜 (공통 .mark 는 22px 본문 기준 19px) */
.mark--step {
    background: linear-gradient(to top, var(--c-cream) 21px, transparent 21px);
}

.ortho-step__desc {
    margin-top: 10px;
    font-size: 25px;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -1px;
    color: #535353;
}

/* 항목 카드 -------------------------------------------------------------------
   시안: 흰 패널(670)이 우측에서 나오고 사진(570)이 좌측에서 겹친다.
   패널은 카드 위 63px 부터 아래 끝까지.
   ---------------------------------------------------------------------------- */
.ortho-item {
    position: relative;
    margin-top: 80px;
    display: flex;
    align-items: flex-start;
    gap: 54px;
    padding-bottom: 62px;
}

.ortho-item::before {
    content: '';
    position: absolute;
    left: 499px;
    right: 0;
    top: 63px;
    bottom: 0;
    z-index: 0;
    background-color: #fff;
    border-radius: 30px;
}

.ortho-item > *,
.ortho-item__visual {
    position: relative;
    z-index: 1;
}

.ortho-item__photo {
    flex: 0 0 570px;
    width: 570px;
    height: auto;
    aspect-ratio: 570 / 360;
    object-fit: cover;
    border-radius: 30px;
}

/* 얼굴 근기능 훈련 카드에만 사진 아래 보조 이미지가 하나 더 붙는다 */
.ortho-item__visual {
    flex: 0 0 570px;
    width: 570px;
}

.ortho-item__sub {
    display: block;
    width: 474px;
    max-width: 100%;
    height: auto;
    margin: -28px 0 0 48px;
}

.ortho-item__copy {
    flex: 1;
    min-width: 0;
    padding-top: 127px;
}

.ortho-item__title {
    font-size: 33px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.7px;
    color: var(--c-brown-mid);
}

.ortho-item__desc {
    margin-top: 42px;
    font-size: 25px;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -1px;
    color: #535353;
}

.ortho-item__desc p + p {
    margin-top: 38px;
}

.ortho-item__desc b {
    font-weight: 500;
    letter-spacing: -0.6px;
    color: #000;
}

/* 효과 아이콘 4개 -------------------------------------------------------------- */
/* 시안: 스텝 기준 (587,792). 카드 우측 본문 열 아래에 붙고 카드 하단(850)보다 58 위로 올라온다 */
.ortho-effects {
    /* 카드(.ortho-item)가 position:relative 라 위치 지정 레이어에서 칠해진다.
       음수 마진으로 겹쳐 올린 이 목록도 같은 레이어로 올려야 카드에 가리지 않는다. */
    position: relative;
    z-index: 1;

    margin-top: -40px;
    padding-right: 87px;
    display: flex;
    justify-content: flex-end;
    gap: 24px;
}

.ortho-effects li {
    width: 106px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    text-align: center;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.9px;
    color: #535353;
}

.ortho-effects img {
    display: block;
    width: 105px;
    height: 105px;
}

/* 반응형 — 모바일 시안이 없어 PC 시안을 축소 해석한 값이다 --------------------- */
@media (max-width: 1230px) {
    /* PC 구도를 그대로 두고 컨테이너가 줄어드는 비율만큼 함께 축소한다.
       (100vw - 60px) 는 이 구간의 .inner 폭, 1170 은 시안 폭. */
    .ortho-intro {
        height: calc((100vw - 60px) * 1180 / 1170);
        padding-top: calc((100vw - 60px) * 153 / 1170);
    }

    .ortho-intro__title {
        font-size: calc((100vw - 60px) * 48 / 1170);
    }

    .ortho-intro__lead {
        font-size: calc((100vw - 60px) * 22 / 1170);
    }

    .ortho-intro__head {
        gap: calc((100vw - 60px) * 24 / 1170);
    }

    /* 하한을 두지 않는다. 하한에 걸리는 순간 글자만 커져 구도가 깨진다 */
    .ortho-quote {
        font-size: calc((100vw - 60px) * 20 / 1170);
    }

    .ortho-sys {
        padding: 90px 0 100px;
        background-size: cover;
    }

    .ortho-sys__title {
        font-size: 40px;
    }

    .ortho-sys__deco,
    .ortho-sys__seal {
        display: none;
    }

    .ortho-step__title {
        font-size: 26px;
    }

    .mark--step {
        background: linear-gradient(to top, var(--c-cream) 16px, transparent 16px);
    }

    .ortho-step__desc,
    .ortho-item__desc {
        font-size: 19px;
    }

    .ortho-item__title {
        font-size: 26px;
    }

    /* 패널 좌표를 비율로 (499 / 1169) */
    .ortho-item::before {
        left: 42.7%;
    }

    .ortho-item {
        gap: 40px;
    }

    .ortho-item__photo,
    .ortho-item__visual {
        flex: 0 1 460px;
        width: 460px;
    }

    .ortho-item__copy {
        padding-top: 100px;
    }
}

@media (max-width: 900px) {
    /* 사진과 글을 위아래로. 흰 패널은 카드 전체를 감싼다 */
    .ortho-item {
        flex-direction: column;
        gap: 0;
        padding-bottom: 0;
    }

    .ortho-item::before {
        left: 0;
        top: 180px;
    }

    .ortho-item__photo,
    .ortho-item__visual {
        flex: none;
        width: 100%;
    }

    .ortho-item__sub {
        width: 70%;
        margin-left: 8%;
    }

    .ortho-item__copy {
        padding: 30px 24px;
    }

    .ortho-effects {
        margin-top: -10px;
        padding-right: 0;
        justify-content: space-around;
    }
}

@media (max-width: 768px) {
    /* 이 구간은 PC 축소가 아니라 별도 모바일 시안(1170x1948)을 옮긴 것이다.
       --u 는 "모바일 시안의 1px". 모든 수치를 시안값 그대로 쓰고 화면 폭에 맞춰 함께 줄어든다. */
    .ortho-intro {
        --u: calc(100vw / 1170);

        height: calc(1948 * var(--u));
        padding: 0;
        background-image: url('/static/images/ortho/intro-bg-m.webp');
        background-size: 100% 100%;
    }

    .ortho-intro .inner {
        width: 100%;
        max-width: none;
        padding: 0;
        height: 100%;
    }

    .ortho-intro__head {
        position: absolute;
        left: calc(100 * var(--u));
        top: calc(113 * var(--u));
        width: calc(970 * var(--u));
        gap: calc(32 * var(--u));
    }

    /* 모바일 시안은 라벨 색이 PC(#b19580)와 다르다 */
    .ortho-intro__title {
        font-size: calc(85 * var(--u));
        color: var(--c-brown-mid);
    }

    .ortho-intro__title .mark--label {
        background: linear-gradient(to top,
            rgba(136, 104, 79, 0.2) calc(39 * var(--u)), transparent calc(39 * var(--u)));
    }

    .ortho-intro__lead {
        font-size: calc(38 * var(--u));
        line-height: 1.5;
        letter-spacing: calc(-0.04 * 38 * var(--u));
    }

    /* 두 인용문이 겹치지 않고 위아래로 놓인다 (센터장은 오른쪽으로 들여씀) */
    .ortho-quote {
        font-size: calc(30 * var(--u));
        line-height: 1.6;
        letter-spacing: calc(-0.04 * 30 * var(--u));
        width: auto;
    }

    .ortho-quote p::before,
    .ortho-quote p::after {
        font-size: 5.33em;
    }

    .ortho-quote--doctor {
        left: calc(171 * var(--u));
        top: calc(459 * var(--u));
    }

    .ortho-quote--staff {
        left: calc(480 * var(--u));
        top: calc(862 * var(--u));
    }

    .ortho-sys {
        padding: 60px 0 70px;
    }

    .ortho-sys__head {
        padding-bottom: 35px;
    }

    .ortho-sys__title {
        font-size: 26px;
    }

    .ortho-step {
        margin-top: 45px;
    }

    .ortho-step__head {
        gap: 12px;
    }

    .ortho-step__num {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .ortho-step__title {
        font-size: 20px;
    }

    .mark--step {
        background: linear-gradient(to top, var(--c-cream) 10px, transparent 10px);
    }

    .ortho-step__desc,
    .ortho-item__desc {
        font-size: 15px;
        letter-spacing: -0.5px;
    }

    .ortho-item {
        margin-top: 35px;
    }

    .ortho-item::before {
        top: 120px;
    }

    .ortho-item__title {
        font-size: 20px;
    }

    .ortho-item__desc {
        margin-top: 16px;
    }

    .ortho-item__desc p + p {
        margin-top: 22px;
    }

    /* PC 와 같이 4개를 한 줄로 두고 아이콘·간격만 줄인다 */
    .ortho-effects {
        gap: 0;
    }

    .ortho-effects li {
        width: auto;
        min-width: 0;
        font-size: 13px;
        letter-spacing: -0.5px;
    }

    .ortho-effects li {
        gap: 6px;
    }

    .ortho-effects img {
        width: 100%;
        max-width: 62px;
        height: auto;
        aspect-ratio: 1;
    }
}