/* ==========================================================================
   메인(양육비 추심 상세페이지) — 1200px 시안을 코드로 옮긴 것.
   calc(N * var(--u)) 의 N 은 시안(PSD)의 픽셀 값이다.
   ========================================================================== */

/* 서명용 손글씨 — 나눔손글씨 펜(OFL)에서 서명에 쓰는 글자만 뽑은 파일 (tools/renewal/build_fonts.sh) */
@font-face {
    font-family: 'MP Signature';
    src: url('../fonts/signature.woff2') format('woff2');
    font-display: swap;
}

.hp { overflow-x: clip; }
/* 시안의 자간 -40 = 글자 크기의 -0.04em. em 은 선언된 요소의 글자 크기로 계산되어 상속되므로 요소마다 다시 지정한다. */
.hp, .hp * { letter-spacing: -0.04em; }
.hp section { position: relative; }

/* ---------- 공통 조각 ---------- */
.hp-accent { color: var(--orange); }
.hp-mark { display: inline-block; padding: .04em .2em .08em; background: var(--orange); color: #fff; line-height: 1.2; }
.hp-pc { display: inline; }

.hp-eyebrow {
    margin: 0 0 clamp(8px, calc(22 * var(--u)), 22px);
    font-size: clamp(11px, calc(18.3 * var(--u)), 18.3px); font-weight: 300; letter-spacing: .2em; line-height: 1.2;
    text-transform: uppercase; color: rgba(21, 21, 21, .7);
}
.hp-eyebrow--center { text-align: center; }
.hp-eyebrow--light { color: rgba(255, 255, 255, .8); }

.hp-h2 {
    font-size: clamp(27px, calc(80.9 * var(--u)), 80.9px); font-weight: 700; line-height: 1.29; color: var(--ink);
}
.hp-h2__lead { display: block; font-size: clamp(19px, calc(55 * var(--u)), 55px); font-weight: 300; line-height: 1.45; }
.hp-h2--center { text-align: center; }
.hp-h2--light { color: #fff; }

.hp-bubble {
    position: relative; display: inline-block; margin: 0 0 clamp(16px, calc(34 * var(--u)), 34px);
    padding: .34em 1.2em .38em; border-radius: 4px; font-weight: 600; line-height: 1.3;
    font-size: clamp(15px, calc(31 * var(--u)), 31px);
}
.hp-bubble::after {
    content: ''; position: absolute; left: 50%; top: calc(100% - 1px); transform: translateX(-50%);
    border: .42em solid transparent; border-top-color: inherit; border-bottom: 0; border-top-width: .5em;
}
.hp-bubble--light { background: #fbf8ef; color: var(--ink); border-color: #fbf8ef; }
.hp-bubble--dark { background: #1c1c1c; color: #fff; border-color: #1c1c1c; }


[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   1. 히어로
   ========================================================================== */
/* 시안(1200 x 1188) 좌표를 그대로 쓴다. 1200px 보다 넓은 화면에서는 시안 크기 그대로 가운데에 놓는다. */
.hp-hero {
    /* 휴대폰에서는 시안의 가운데 720px 를 화면 폭에 맞춰 보여 준다 (글자와 버튼이 너무 작아지지 않게). 900px 부터는 시안 비율 그대로. */
    --hu: max(var(--u), min(calc(100vw / 720), .75px));
    position: relative; height: calc(1188 * var(--hu)); overflow: hidden; isolation: isolate; background: #151515; color: #fff; text-align: center; }
/* 배경 영상: 시안 1.gif 와 같은 구도 — 높이를 히어로에 맞추고(1920x1080 → 2112x1188), 영상 가로 59.9% 지점을
   화면 가운데에, 위로 30px 올려서 #151515 위에 50% 로 깐다. */
.hp-hero__bg { position: absolute; z-index: -1; top: calc(-30 / 1188 * 100%); left: 50%; height: 100%; aspect-ratio: 16 / 9; transform: translateX(-59.9%); opacity: .5; }
.hp-hero__bg video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1695px) {
    /* 영상보다 화면이 넓어지면 끝을 배경색으로 자연스럽게 흐린다 */
    .hp-hero__bg { -webkit-mask-image: linear-gradient(90deg, transparent, #000 200px, #000 calc(100% - 200px), transparent); mask-image: linear-gradient(90deg, transparent, #000 200px, #000 calc(100% - 200px), transparent); }
}
.hp-hero__stage { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(1200 * var(--hu)); margin-left: calc(-600 * var(--hu)); }
@media (max-width: 767px) {
    /* 좁은 화면: 엄마 얼굴이 보이도록 영상을 조금 오른쪽으로 */
    .hp-hero__bg { transform: translateX(-52%); }
}

.hp-hero__tag {
    position: absolute; left: 50%; top: calc(189 * var(--hu)); width: calc(190 * var(--hu)); height: calc(52 * var(--hu)); margin: 0 0 0 calc(-95 * var(--hu));
    display: flex; align-items: center; justify-content: center; border-radius: calc(3 * var(--hu)); background: #fcf9f0;
    color: #151515; font-size: calc(27.96 * var(--hu)); font-weight: 700; line-height: 1;
}
.hp-hero__tag::after {
    content: ''; position: absolute; left: 50%; top: 100%; margin-left: calc(-8.5 * var(--hu));
    border-style: solid; border-width: calc(9 * var(--hu)) calc(8.5 * var(--hu)) 0; border-color: #fcf9f0 transparent transparent;
}
.hp-hero__title { position: absolute; left: 0; right: 0; top: calc(280.5 * var(--hu)); margin: 0; font-size: calc(62.08 * var(--hu)); font-weight: 700; line-height: 1; }
.hp-hero__line { display: block; }
.hp-hero__mark { display: flex; align-items: center; justify-content: center; width: calc(278 * var(--hu)); height: calc(78 * var(--hu)); margin: calc(18.4 * var(--hu)) auto 0; background: var(--orange); }
.hp-hero__cta {
    position: absolute; left: 50%; top: calc(495 * var(--hu)); width: calc(424 * var(--hu)); height: calc(90 * var(--hu)); margin-left: calc(-212 * var(--hu));
    display: flex; align-items: center; justify-content: center; border-radius: calc(20 * var(--hu)); background: #fff;
    color: #151515 !important; font-size: calc(28.98 * var(--hu)); font-weight: 600; line-height: 1; text-decoration: none;
    transition: transform .18s, box-shadow .18s;
}
.hp-hero__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .25); }

/* 입금내역 카드: 356 x 522, 반지름 2144 인 원 위에 6.7° 간격. 가운데 카드가 맨 앞 (움직임은 home.js) */
.hp-wheel { position: absolute; left: 0; right: 0; top: calc(704 * var(--hu)); bottom: 0; }
.hp-wheel__ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hp-wheel__card {
    position: absolute; left: 50%; top: 0; width: calc(356 * var(--hu)); height: calc(522 * var(--hu)); margin-left: calc(-178 * var(--hu));
    transform-origin: 50% 0; border-radius: calc(23 * var(--hu)) calc(23 * var(--hu)) 0 0; overflow: hidden; background: #fff;
    box-shadow: 0 0 calc(26 * var(--hu)) rgba(0, 0, 0, .22); backface-visibility: hidden;
}
.hp-wheel__card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* 스크립트가 켜지기 전: 가운데 카드와 양옆 두 장씩만 시안 자리에 둔다 */
.hp-wheel:not(.is-live) .hp-wheel__card { visibility: hidden; }
.hp-wheel:not(.is-live) .hp-wheel__card:nth-child(1) { visibility: visible; z-index: 5; }
.hp-wheel:not(.is-live) .hp-wheel__card:nth-child(2) { visibility: visible; z-index: 4; transform: translate(calc(251 * var(--hu)), calc(14.6 * var(--hu))) rotate(6.7deg); }
.hp-wheel:not(.is-live) .hp-wheel__card:nth-child(3) { visibility: visible; z-index: 3; transform: translate(calc(497 * var(--hu)), calc(58.3 * var(--hu))) rotate(13.4deg); }
.hp-wheel:not(.is-live) .hp-wheel__card:nth-last-child(1) { visibility: visible; z-index: 4; transform: translate(calc(-251 * var(--hu)), calc(14.6 * var(--hu))) rotate(-6.7deg); }
.hp-wheel:not(.is-live) .hp-wheel__card:nth-last-child(2) { visibility: visible; z-index: 3; transform: translate(calc(-497 * var(--hu)), calc(58.3 * var(--hu))) rotate(-13.4deg); }

/* ==========================================================================
   2. 의뢰인 후기 (두 줄 마키)
   ========================================================================== */
/* 시안 2번(1200 x 1902): 제목 / 위 줄 카드 574px(왼쪽으로) / 아래 줄 476px(오른쪽으로), 초당 60px */
.hp-rev { background: var(--cream); padding: calc(222.1 * var(--u)) 0 calc(230 * var(--u)); }
.hp-rev__title { margin: 0; padding: 0 16px; text-align: center; color: var(--ink); line-height: 1; }
.hp-rev__lead { display: block; font-size: calc(54.83 * var(--u)); font-weight: 300; }
.hp-rev__line { display: block; margin-top: calc(26.1 * var(--u)); padding-right: calc(13 * var(--u)); font-size: calc(80.94 * var(--u)); font-weight: 700; line-height: calc(96 / 80.94); }
.hp-rev__mark { display: inline-block; height: calc(96 * var(--u)); padding: calc(7.5 * var(--u)) calc(13.6 * var(--u)) 0; background: var(--orange); color: #fff; line-height: 1; vertical-align: top; }

.hp-marquee { overflow: hidden; }
.hp-marquee--top { margin-top: calc(154 * var(--u)); }
.hp-marquee--bottom { margin-top: calc(69 * var(--u)); }
.hp-marquee__track {
    display: flex; gap: calc(43 * var(--u)); width: max-content; margin: 0; padding: 0; list-style: none;
    animation: hp-marquee var(--marquee-s, 60s) linear infinite; will-change: transform;
}
.hp-marquee--reverse .hp-marquee__track { animation-direction: reverse; }
.hp-marquee:hover .hp-marquee__track, .hp-marquee:focus-within .hp-marquee__track, .hp-marquee.is-paused .hp-marquee__track { animation-play-state: paused; }
.hp-marquee:not(.is-ready) .hp-marquee__track { animation: none; }
.hp-marquee:not(.is-ready) { overflow-x: auto; }
.hp-marquee li { flex: 0 0 auto; }
.hp-marquee a { display: block; cursor: zoom-in; }
.hp-marquee img { display: block; object-fit: cover; object-position: top; }
.hp-marquee--top img { height: calc(574 * var(--u)); width: auto; }
.hp-marquee--bottom img { height: calc(476 * var(--u)); width: calc(381 * var(--u)); object-position: 50% 100%; }
@keyframes hp-marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   3. WHY WE FIGHT
   ========================================================================== */
.hp-why { background: #fff; }
.hp-why__top { max-width: 1200px; margin: 0 auto; padding: clamp(56px, calc(127 * var(--u)), 127px) 0 0; }
.hp-why__head { position: relative; margin-left: calc(62 * var(--u)); padding: calc(6 * var(--u)) 0 calc(12 * var(--u)) calc(47 * var(--u)); }
.hp-why__head::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(3px, calc(6 * var(--u)), 6px); background: rgba(21, 21, 21, .8); }
.hp-why__title { font-size: clamp(27px, calc(65.2 * var(--u)), 65.2px); font-weight: 600; line-height: 1.31; }
.hp-why__title > span { display: block; }
.hp-why__lead { font-size: clamp(20px, calc(47 * var(--u)), 47px); font-weight: 300; line-height: 1.5; }

.hp-why__body { display: grid; grid-template-columns: calc(590 * var(--u)) 1fr; align-items: start; margin-top: calc(-28 * var(--u)); }
.hp-why__text { padding: calc(140 * var(--u)) 0 0 calc(64 * var(--u)); font-size: clamp(15px, calc(26.1 * var(--u)), 26.1px); line-height: 1.6; color: rgba(21, 21, 21, .7); }
.hp-why__text p { margin: 0 0 clamp(18px, calc(42 * var(--u)), 42px); }
.hp-why__text strong { font-weight: 600; }
.hp-why__text .hp-why__quote { margin: clamp(22px, calc(64 * var(--u)), 64px) 0 clamp(6px, calc(18 * var(--u)), 18px); font-size: clamp(17px, calc(30 * var(--u)), 30px); font-weight: 600; line-height: 1.36; color: rgba(21, 21, 21, .82); }
.hp-why__text .hp-why__after { font-weight: 300; }

.hp-why__photo { position: relative; z-index: 0; }
.hp-why__photo::before {
    content: ''; position: absolute; z-index: -1; left: calc(23 * var(--u)); right: calc(-1 * max(0px, (100vw - 1200px) / 2));
    top: calc(124 * var(--u)); height: calc(494 * var(--u)); background: #0a0a0a; border-radius: calc(40 * var(--u)) 0 0 calc(40 * var(--u));
}
.hp-why__photo img { width: calc(591 * var(--u)); height: auto; }

.hp-why__dark {
    position: relative; z-index: 1; overflow: hidden; margin-top: calc(-84 * var(--u));
    padding: calc(254 * var(--u)) 20px clamp(64px, calc(150 * var(--u)), 150px);
    background: linear-gradient(to bottom, transparent calc(606 * var(--u)), #1a1a1a calc(606 * var(--u)));
    color: #fff; text-align: center;
}
/* 시안의 큰 타원(2107 x 1213) — 위쪽 호만 보인다 */
.hp-why__dark::before {
    content: ''; position: absolute; left: 50%; top: 0; width: 175.6vw; height: calc(1213 * var(--u));
    transform: translateX(-50%); border-radius: 50%; background: linear-gradient(#2c2c2c 20.5%, #151515 75.8%);
}
.hp-why__dark-inner { position: relative; max-width: 1000px; margin: 0 auto; }
.hp-why__promise { font-size: clamp(21px, calc(47 * var(--u)), 47px); font-weight: 600; line-height: 1.36; }
.hp-underline { display: table; margin: 0 auto; color: var(--orange); border-bottom: clamp(3px, calc(7 * var(--u)), 7px) solid var(--orange); padding-bottom: .06em; }
.hp-why__dark p { margin: clamp(22px, calc(62 * var(--u)), 62px) 0 0; font-size: clamp(15px, calc(30 * var(--u)), 30px); font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.hp-why__dark .hp-sign {
    margin-top: clamp(26px, calc(46 * var(--u)), 46px); text-align: right; padding-right: calc(40 * var(--u));
    font-family: 'MP Signature', 'Nanum Pen Script', cursive; font-size: clamp(24px, calc(50 * var(--u)), 50px); font-weight: 400; line-height: 1.15; color: #fff; letter-spacing: 0;
}

/* 768px 이상: 시안 3번(1200 x 2016) 좌표에 그대로 놓는다. (top 값은 글자 윗선이 시안과 같도록 줄 상자 기준으로 맞춘 값) */
@media (min-width: 768px) {
    .hp-why { --x0: calc(50% - 600 * var(--u)); height: calc(2016 * var(--u)); }
    .hp-why__top { position: static; max-width: none; padding: 0; }
    .hp-why__head { position: static; margin: 0; padding: 0; }
    .hp-why__head::before { left: calc(var(--x0) + 62 * var(--u)); top: calc(127 * var(--u)); bottom: auto; width: calc(6 * var(--u)); height: calc(267 * var(--u)); }
    .hp-why .hp-eyebrow { position: absolute; left: calc(var(--x0) + 109 * var(--u)); top: calc(130.5 * var(--u)); margin: 0; font-size: calc(18.28 * var(--u)); line-height: 1; letter-spacing: .272em; }
    .hp-why__title { position: static; }
    .hp-why__title > span:not(.mp-sr) { position: absolute; left: calc(var(--x0) + 109 * var(--u)); white-space: nowrap; line-height: 1; }
    .hp-why__title .hp-why__lead { top: calc(186.7 * var(--u)); font-size: calc(47 * var(--u)); }
    .hp-why__title .hp-accent { top: calc(247.1 * var(--u)); font-size: calc(65.28 * var(--u)); }
    .hp-why__title > span:last-child { top: calc(332.1 * var(--u)); font-size: calc(65.28 * var(--u)); }

    .hp-why__body { display: block; margin: 0; }
    .hp-why__text { position: static; padding: 0; font-size: calc(26.11 * var(--u)); line-height: calc(41.78 / 26.11); }
    .hp-why__text p { position: absolute; left: calc(var(--x0) + 64 * var(--u)); margin: 0; white-space: nowrap; }
    .hp-why__text p:nth-child(1) { top: calc(500.5 * var(--u)); }
    .hp-why__text p:nth-child(2) { top: calc(626.6 * var(--u)); }
    .hp-why__text .hp-why__quote { top: calc(762.2 * var(--u)); margin: 0; font-size: calc(30 * var(--u)); line-height: calc(40 / 30); }
    .hp-why__text .hp-why__after { top: calc(848.3 * var(--u)); }
    .hp-why__photo { position: absolute; left: calc(var(--x0) + 590 * var(--u)); top: calc(367 * var(--u)); width: calc(591 * var(--u)); z-index: 0; }
    .hp-why__photo::before { left: calc(23 * var(--u)); right: -100vw; top: calc(126 * var(--u)); height: calc(490 * var(--u)); }
    .hp-why__photo img { width: 100%; }

    .hp-why__dark { position: absolute; left: 0; right: 0; top: calc(1081 * var(--u)); bottom: 0; margin: 0; padding: 0; background: none; }
    .hp-why__dark-inner { position: static; max-width: none; }
    .hp-why__promise { position: absolute; left: 0; right: 0; top: calc(243.7 * var(--u)); font-size: calc(47 * var(--u)); line-height: calc(64 / 47); }
    .hp-why__promise .hp-underline { position: relative; left: calc(-5 * var(--u)); display: table; margin: 0 auto; border: 0; padding: 0; }
    .hp-why__promise .hp-underline::after { content: ''; position: absolute; left: 0; right: 0; top: calc(62.3 * var(--u)); height: calc(7 * var(--u)); background: var(--orange); }
    .hp-why__dark p { position: absolute; left: 0; right: 0; margin: 0; font-size: calc(30 * var(--u)); line-height: calc(46 / 30); }
    .hp-why__dark p:nth-of-type(1) { top: calc(427 * var(--u)); }
    .hp-why__dark p:nth-of-type(2) { top: calc(565 * var(--u)); }
    /* 시안의 서명 글꼴(산돌 공펜)은 쓸 수 없어 나눔손글씨 펜을 가로 84% 로 줄여 같은 폭에 맞춘다 */
    .hp-why__dark .hp-sign { left: auto; right: calc(var(--x0) + 125 * var(--u)); top: calc(673 * var(--u)); margin: 0; padding: 0; font-size: calc(50 * var(--u)); line-height: calc(59 / 50); transform: scaleX(.84); transform-origin: 100% 0; }
}

/* ==========================================================================
   4-1. ALL in 1 (사옥 + 사무실)
   ========================================================================== */
.hp-all { overflow: hidden; background: #7eb9f2; text-align: center; padding: calc(128 * var(--u)) 0 clamp(48px, calc(118 * var(--u)), 118px); }
.hp-all__sky { position: absolute; left: 50%; top: 0; width: max(calc(1520 * var(--u)), 127vw); transform: translateX(-50%); }
.hp-all__sky img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(#000 52%, transparent 63%); mask-image: linear-gradient(#000 52%, transparent 63%); }
.hp-all__head { position: relative; z-index: 1; padding: 0 16px; }
.hp-all .hp-bubble { font-size: clamp(16px, calc(39.2 * var(--u)), 39.2px); margin-bottom: clamp(14px, calc(34 * var(--u)), 34px); }
.hp-all__title { font-size: clamp(25px, calc(65.3 * var(--u)), 65.3px); font-weight: 300; line-height: 1.3; }
.hp-all__title > span { display: block; }
.hp-all__title strong { font-weight: 600; }
.hp-all__title > span:last-child { font-weight: 600; }
.hp-all__big {
    position: relative; z-index: 1; margin: calc(812 * var(--u)) 0 0;
    font-size: clamp(54px, calc(156.7 * var(--u)), 156.7px); font-weight: 900; line-height: .76; letter-spacing: 0; color: rgba(255, 255, 255, .92);
    -webkit-mask-image: linear-gradient(#000 25%, transparent 108%); mask-image: linear-gradient(#000 25%, transparent 108%);
}
.hp-all__offices {
    position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u));
    width: calc(1020 * var(--u)); margin: calc(33 * var(--u)) auto 0;
}
.hp-office { margin: 0; }
.hp-office figcaption {
    display: flex; align-items: center; justify-content: center; min-height: clamp(36px, calc(53 * var(--u)), 53px); margin-bottom: clamp(3px, calc(4 * var(--u)), 4px);
    background: #fff; font-size: clamp(15px, calc(26.1 * var(--u)), 26.1px); font-weight: 600; color: var(--ink);
}
.hp-office__grid { display: grid; grid-template-columns: 1fr 1fr; }
.hp-office__grid img { width: 100%; height: auto; aspect-ratio: 252 / 203; object-fit: cover; }

/* 768px 이상: 시안 4_1(1200 x 1931) 좌표 */
@media (min-width: 768px) {
    .hp-all { --x0: calc(50% - 600 * var(--u)); height: calc(1931 * var(--u)); padding: 0; }
    .hp-all__sky { left: calc(var(--x0) - 124 * var(--u)); top: calc(-2 * var(--u)); width: calc(1520 * var(--u)); transform: none; }
    .hp-all__head { position: static; padding: 0; }
    .hp-all .hp-bubble {
        position: absolute; left: calc(var(--x0) + 403 * var(--u)); top: calc(128 * var(--u)); width: calc(396 * var(--u)); height: calc(76 * var(--u));
        display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border-radius: calc(3 * var(--u));
        font-size: calc(39.17 * var(--u)); font-weight: 600; line-height: 1;
    }
    .hp-all .hp-bubble::after { border-width: calc(17 * var(--u)) calc(9.55 * var(--u)) 0; top: 100%; }
    .hp-all__title { position: absolute; left: 0; right: 0; top: calc(224.26 * var(--u)); font-size: calc(65.28 * var(--u)); line-height: calc(85 / 65.28); white-space: nowrap; }
    .hp-all__title .hp-mark { display: inline-block; height: calc(78 * var(--u)); padding: calc(2.4 * var(--u)) calc(13.8 * var(--u)) 0; margin-right: calc(-1.7 * var(--u)); line-height: calc(73 / 65.28); vertical-align: top; margin-top: calc(2.74 * var(--u)); }
    .hp-all__big { position: absolute; left: 0; right: 0; top: calc(1186.7 * var(--u)); margin: 0; padding-left: calc(10 * var(--u)); font-size: calc(156.68 * var(--u)); line-height: 1; letter-spacing: 0; -webkit-mask-image: linear-gradient(#000 37.2%, transparent 73.6%); mask-image: linear-gradient(#000 37.2%, transparent 73.6%); }
    .hp-all__offices { position: absolute; left: calc(var(--x0) + 88 * var(--u)); top: calc(1354 * var(--u)); width: calc(1023 * var(--u)); margin: 0; gap: calc(17 * var(--u)); }
    .hp-office figcaption { min-height: 0; height: calc(53 * var(--u)); margin: 0 0 calc(3 * var(--u)); font-size: calc(26.11 * var(--u)); line-height: 1; }
    .hp-office__grid { margin-left: calc(1 * var(--u)); width: calc(502 * var(--u)); }
    .hp-office__grid img { aspect-ratio: 251 / 200; }
}
@media (min-width: 1201px) {
    /* 사진보다 화면이 넓으면 사진 양옆을 하늘색 배경으로 흐린다 */
    .hp-all__sky img {
        -webkit-mask-image: linear-gradient(#000 52%, transparent 63%), linear-gradient(90deg, transparent, #000 160px, #000 calc(100% - 160px), transparent);
        -webkit-mask-composite: source-in; mask-image: linear-gradient(#000 52%, transparent 63%), linear-gradient(90deg, transparent, #000 160px, #000 calc(100% - 160px), transparent);
        mask-composite: intersect;
    }
}

/* ==========================================================================
   4-2. 국가에서도 인정받은 실력 / 현직 변호사도 의뢰합니다
   ========================================================================== */
.hp-proof { background: #fff; overflow: hidden; }
.hp-proof__head { padding: calc(134 * var(--u)) 16px 0; text-align: center; }
.hp-proof__title { font-size: clamp(30px, calc(88.7 * var(--u)), 88.7px); font-weight: 700; line-height: 1.1; color: #000; }
.hp-proof__body { position: relative; width: min(100%, 1200px); height: calc(886 * var(--u)); margin: calc(103 * var(--u)) auto 0; }
.hp-proof__people { position: absolute; left: calc(-93 * var(--u)); bottom: 0; width: calc(785 * var(--u)); }
.hp-proof__people img { width: 100%; height: auto; }
/* 사진 원본이 왼쪽에서 잘려 있다. 1200px 보다 넓은 화면에서는 잘린 면이 보이지 않게 흐린다. */
@media (min-width: 1201px) {
    .hp-proof__people img { -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 16%); mask-image: linear-gradient(90deg, transparent 2%, #000 16%); }
}
.hp-certs {
    position: absolute; left: calc(591 * var(--u)); top: 0; width: calc(542 * var(--u)); margin: 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: calc(53 * var(--u)) calc(24 * var(--u));
}
.hp-cert a {
    display: flex; flex-direction: column; height: calc(391 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) 0;
    background: #fff; box-shadow: 0 calc(4 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .13); text-decoration: none; cursor: zoom-in;
}
.hp-cert__img { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.hp-cert__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.hp-cert__label { flex: 0 0 auto; padding: calc(10 * var(--u)) 0 calc(14 * var(--u)); text-align: center; font-size: clamp(12px, calc(22 * var(--u)), 22px); font-weight: 500; color: #656565; line-height: 1.3; }

.hp-peer { background: var(--cream); }
.hp-peer__inner {
    display: grid; grid-template-columns: 1fr calc(584 * var(--u)); align-items: start; gap: calc(40 * var(--u));
    width: min(100%, 1200px); margin: 0 auto; padding: calc(191 * var(--u)) calc(47 * var(--u)) calc(98 * var(--u)) calc(62 * var(--u));
}
.hp-peer__text { display: flex; flex-direction: column; min-height: calc(700 * var(--u)); padding-top: calc(18 * var(--u)); }
.hp-peer__text h3 { font-size: clamp(27px, calc(65.2 * var(--u)), 65.2px); font-weight: 700; line-height: 1.44; color: #000; }
.hp-peer__text h3 > span { display: block; }
.hp-peer__lead { font-size: clamp(18px, calc(41.7 * var(--u)), 41.7px); font-weight: 500; line-height: 1.6; }
.hp-peer__arrow { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: auto; color: var(--ink); }
.hp-peer__arrow i { flex: 0 0 calc(317 * var(--u)); height: max(2px, calc(4 * var(--u))); background: #cac7c0; }
.hp-peer__arrow svg { flex: 0 0 auto; width: calc(64 * var(--u)); height: calc(43 * var(--u)); }
.hp-phone {
    margin: 0; width: 100%; aspect-ratio: 584 / 799; overflow: hidden; background: #fff;
    border-radius: calc(28 * var(--u)); box-shadow: 0 0 calc(27 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .08);
}
/* 시안처럼 대화 맨 위(상단 78px 은 휴대폰 상태 표시줄이라 잘라 낸다)부터 고정해서 보여 준다 */
.hp-phone img { width: calc(581 / 584 * 100%); height: auto; margin: calc(-78 / 584 * 100%) 0 0 calc(2 / 584 * 100%); }

/* 768px 이상: 시안 4_2.gif 마지막 장면(1200 x 2408) 좌표. 이 GIF 는 PSD 와 머리글·상장 배치가 조금 다르다 — 고객이 받은 GIF 를 따른다. */
@media (min-width: 768px) {
    .hp-proof { --x0: calc(50% - 600 * var(--u)); height: calc(2408 * var(--u)); }
    .hp-proof__head { position: static; padding: 0; }
    .hp-proof .hp-bubble {
        position: absolute; left: calc(var(--x0) + 274 * var(--u)); top: calc(164 * var(--u)); width: calc(652 * var(--u)); height: calc(63 * var(--u));
        display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 calc(7 * var(--u)) 0 0; border-radius: 0; background: #151515; border-color: #151515;
        font-size: calc(31.33 * var(--u)); font-weight: 500; line-height: 1;
    }
    .hp-proof .hp-bubble::after { top: 100%; border-width: calc(16 * var(--u)) calc(9 * var(--u)) 0; }
    .hp-proof__title { position: absolute; left: 0; right: 0; top: calc(273 * var(--u)); font-size: calc(88.78 * var(--u)); line-height: 1; white-space: nowrap; }
    .hp-proof__body { position: static; width: auto; height: auto; margin: 0; }
    .hp-proof__people { position: absolute; left: calc(var(--x0) - 94 * var(--u)); top: calc(501 * var(--u)); bottom: auto; width: calc(785 * var(--u)); }
    .hp-certs { position: static; width: auto; display: block; }
    .hp-cert { position: absolute; width: calc(248 * var(--u)); height: calc(380 * var(--u)); }
    .hp-cert:nth-child(1) { left: calc(var(--x0) + 596 * var(--u)); top: calc(456 * var(--u)); --img-x: 2; --img-y: 0; --img-w: 243; --label-y: 333.7; }
    .hp-cert:nth-child(2) { left: calc(var(--x0) + 878 * var(--u)); top: calc(456 * var(--u)); --img-x: 8; --img-y: 8; --img-w: 233; --label-y: 333.7; }
    .hp-cert:nth-child(3) { left: calc(var(--x0) + 596 * var(--u)); top: calc(870 * var(--u)); --img-x: 9; --img-y: 7; --img-w: 231; --label-y: 327.7; }
    .hp-cert:nth-child(4) { left: calc(var(--x0) + 878 * var(--u)); top: calc(870 * var(--u)); --img-x: 14; --img-y: 29; --img-w: 224; --label-y: 327.7; }
    .hp-cert a { position: absolute; inset: 0; display: block; height: auto; padding: 0; box-shadow: 0 0 calc(6 * var(--u)) rgba(0, 0, 0, .2); }
    .hp-cert__img { position: absolute; left: calc(var(--img-x) * var(--u)); top: calc(var(--img-y) * var(--u)); width: calc(var(--img-w) * var(--u)); display: block; }
    .hp-cert__img img { width: 100%; height: auto; max-width: none; max-height: none; }
    .hp-cert__label { position: absolute; left: 0; right: 0; top: calc(var(--label-y) * var(--u)); padding: 0; font-size: calc(22 * var(--u)); line-height: 1; color: #656565; white-space: nowrap; }

    .hp-peer { position: absolute; left: 0; right: 0; top: calc(1322 * var(--u)); bottom: 0; }
    .hp-peer__inner { display: block; position: static; width: auto; padding: 0; }
    .hp-peer__text { position: static; display: block; min-height: 0; padding: 0; }
    .hp-peer__text h3 { position: static; margin: 0; }
    .hp-peer__text h3 > span { position: absolute; left: calc(var(--x0) + 61 * var(--u)); line-height: 1; white-space: nowrap; }
    .hp-peer__text .hp-peer__lead { top: calc((1525.5 - 1322) * var(--u)); font-size: calc(41.78 * var(--u)); font-weight: 500; }
    .hp-peer__text h3 > span:nth-child(2) { top: calc((1590 - 1322) * var(--u)); left: calc(var(--x0) + 63 * var(--u)); font-size: calc(65.28 * var(--u)); font-weight: 700; }
    .hp-peer__text h3 > span:nth-child(2) .hp-mark { display: inline-block; width: calc(299 * var(--u)); height: calc(80 * var(--u)); padding: calc(9.3 * var(--u)) 0 0 calc(9.5 * var(--u)); line-height: 1; vertical-align: top; text-align: left; margin-right: calc(1.5 * var(--u)); }
    .hp-peer__text h3 > span:nth-child(2) { line-height: calc(80 / 65.28); }
    .hp-peer__text h3 > span:nth-child(3) { top: calc((1691.3 - 1322) * var(--u)); font-size: calc(65.28 * var(--u)); font-weight: 700; }
    .hp-peer__arrow { position: absolute; left: calc(var(--x0) + 60 * var(--u)); top: calc((2192.5 - 1322) * var(--u)); margin: 0; gap: 0; height: calc(43 * var(--u)); }
    .hp-peer__arrow i { flex: 0 0 calc(317 * var(--u)); height: calc(4 * var(--u)); margin-right: calc(10 * var(--u)); }

    .hp-phone { position: absolute; left: calc(var(--x0) + 558 * var(--u)); top: calc((1511 - 1322) * var(--u)); width: calc(584 * var(--u)); }
}

/* 상장 카드: 시안처럼 위 줄, 아래 줄 순서로 작게 시작해 튀어나온다 */
.hp-cert[data-reveal] { transform: scale(.55); transition: opacity .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--d, 0ms); }
.hp-cert[data-reveal].is-in { transform: none; }

/* ==========================================================================
   5. Pay After Recovery
   ========================================================================== */
.hp-fee { background: #131313; }
.hp-fee__top { background: #131313 url('../images/support/home/dark-grain-2.webp') center top / cover no-repeat; }
.hp-fee__inner { width: min(100%, 1200px); margin: 0 auto; padding: calc(223 * var(--u)) 0 calc(128 * var(--u)); }
.hp-fee .hp-eyebrow { color: rgba(255, 255, 255, .6); letter-spacing: .1em; margin-bottom: clamp(10px, calc(44 * var(--u)), 44px); }
.hp-fee .hp-h2 { font-size: clamp(30px, calc(78.3 * var(--u)), 78.3px); line-height: 1.22; padding: 0 16px; }
.hp-fee__answer { display: flex; align-items: center; gap: calc(53 * var(--u)); margin: calc(190 * var(--u)) 0 0 calc(141 * var(--u)); }
.hp-fee__answer i { flex: 0 0 calc(568 * var(--u)); height: max(1px, calc(3 * var(--u))); background: rgba(255, 255, 255, .75); }
.hp-fee__answer p { font-size: clamp(18px, calc(41.7 * var(--u)), 41.7px); font-weight: 300; line-height: 1.5; color: #fff; }
.hp-fee__answer strong { font-weight: 600; }
.hp-fee__clip { position: relative; height: clamp(250px, 44.5vw, 640px); overflow: hidden; background: #15171a; }
.hp-fee__clip video { width: 100%; height: 100%; object-fit: cover; }
.hp-fee__clip::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .51); }
.hp-fee__terms {
    position: absolute; z-index: 1; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 16px; text-align: center;
    font-size: clamp(17px, calc(41.7 * var(--u)), 41.7px); font-weight: 600; line-height: 1.5; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.hp-fee__terms[data-reveal] { transform: translateY(calc(-50% + 26px)); }
.hp-fee__terms[data-reveal].is-in { transform: translateY(-50%); }
.hp-fee__terms em { font-style: normal; color: #ff3b30; }

/* 768px 이상: 시안 5.gif(1200 x 1486) 좌표 — 위 860px 은 어두운 판, 아래 626px 은 영상 */
@media (min-width: 768px) {
    .hp-fee { --x0: calc(50% - 600 * var(--u)); height: calc(1486 * var(--u)); }
    .hp-fee__top { position: absolute; left: 0; right: 0; top: 0; height: calc(860 * var(--u)); overflow: hidden; background: #131313; }
    /* 시안의 질감 이미지(1299 x 866)를 같은 자리에 둔다. 1200px 보다 넓은 화면에서는 양옆이 #131313 으로 이어진다. */
    .hp-fee__top::before {
        content: ''; position: absolute; left: calc(50% - 679 * var(--u)); top: calc(-7 * var(--u)); width: calc(1299 * var(--u)); height: calc(866 * var(--u));
        background: url('../images/support/home/dark-grain-2.webp') 0 0 / 100% 100% no-repeat;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
    .hp-fee__top > * { position: relative; }
    .hp-fee__inner { position: static; width: auto; padding: 0; }
    .hp-fee__inner > div { position: static; }
    .hp-fee .hp-eyebrow { position: absolute; left: 0; right: 0; top: calc(219.5 * var(--u)); margin: 0; font-size: calc(18 * var(--u)); line-height: 1; letter-spacing: .1em; color: rgba(255, 255, 255, .72); }
    .hp-fee .hp-h2 { position: static; padding: 0; font-size: calc(78.33 * var(--u)); }
    .hp-fee .hp-h2 > * { position: absolute; left: 0; right: 0; line-height: 1; }
    .hp-fee .hp-h2__lead { top: calc(276 * var(--u)); font-size: calc(56 * var(--u)); font-weight: 300; }
    .hp-fee__q { top: calc(351.6 * var(--u)); font-weight: 700; }
    .hp-fee__answer { position: static; display: block; margin: 0; }
    .hp-fee__answer i { position: absolute; left: calc(var(--x0) + 141 * var(--u)); top: calc(649 * var(--u)); width: calc(569 * var(--u)); height: calc(2 * var(--u)); background: rgba(255, 255, 255, .47); }
    .hp-fee__answer p { position: absolute; left: calc(var(--x0) + 762 * var(--u)); top: calc(617.6 * var(--u)); margin: 0; font-size: calc(41.78 * var(--u)); line-height: calc(62.67 / 41.78); white-space: nowrap; }
    .hp-fee__clip { position: absolute; left: 0; right: 0; top: calc(860 * var(--u)); height: calc(626 * var(--u)); }
    .hp-fee__terms { top: 50%; font-size: calc(41.78 * var(--u)); line-height: calc(62.67 / 41.78); text-shadow: none; padding: 0; }
}

/* ==========================================================================
   6. Court Fees
   ========================================================================== */
.hp-court { background: var(--cream); padding: calc(223 * var(--u)) 0 clamp(56px, calc(200 * var(--u)), 200px); }
.hp-court__inner { width: min(100%, 1200px); margin: 0 auto; padding: 0 calc(100 * var(--u)); }
.hp-court .hp-eyebrow { letter-spacing: .1em; color: rgba(21, 21, 21, .6); margin-bottom: clamp(10px, calc(40 * var(--u)), 40px); }
.hp-court .hp-h2 { font-size: clamp(29px, calc(77.9 * var(--u)), 77.9px); font-weight: 600; line-height: 1.26; }
.hp-court__card {
    position: relative; display: grid; grid-template-columns: 548fr 456fr; min-height: calc(275 * var(--u)); margin-top: calc(97 * var(--u));
    border-radius: clamp(12px, calc(18 * var(--u)), 18px); overflow: hidden; background: #fff; box-shadow: 0 6px 34px rgba(90, 70, 20, .09);
}
.hp-court__what { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(40 * var(--u)) calc(16 * var(--u)); text-align: center; }
.hp-court__what p { font-size: clamp(16px, calc(30 * var(--u)), 30px); line-height: 1.53; }
.hp-court__what .hp-court__zero {
    display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 .3em; margin-top: calc(14 * var(--u)); padding: .4em .7em .44em;
    background: var(--orange); color: #fff; font-size: clamp(13px, calc(20.5 * var(--u)), 20.5px); font-weight: 600; line-height: 1.35; letter-spacing: -0.05em;
}
.hp-court__zero svg { flex: 0 0 auto; width: 1.05em; height: 1.05em; }
.hp-court__zero span { white-space: nowrap; }
.hp-court__arrow {
    position: absolute; left: calc(548 / 1004 * 100%); top: 50%; z-index: 1; transform: translate(-50%, -50%);
    width: clamp(34px, calc(52 * var(--u)), 52px); height: clamp(34px, calc(52 * var(--u)), 52px); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding-bottom: .12em;
    background: var(--orange); color: #fff; font-size: clamp(20px, calc(34 * var(--u)), 34px); font-weight: 300; line-height: 1; letter-spacing: 0;
}
.hp-court__range { display: flex; align-items: center; justify-content: center; padding: calc(30 * var(--u)); background: #000; color: #fff; font-size: clamp(19px, calc(36 * var(--u)), 36px); font-weight: 600; text-align: center; }
.hp-court__l2, .hp-court__l3 { display: block; }
.hp-court__notes { margin: calc(64 * var(--u)) 0 0; padding: 0; list-style: none; text-align: center; font-size: clamp(13px, calc(24 * var(--u)), 24px); line-height: 1.85; letter-spacing: -0.03em; }

/* 768px 이상: 시안 6.jpg(1200 x 1244) 좌표 */
@media (min-width: 768px) {
    .hp-court { --x0: calc(50% - 600 * var(--u)); height: calc(1244 * var(--u)); padding: 0; }
    .hp-court__inner { position: static; width: auto; padding: 0; }
    .hp-court__inner > div:first-child { position: static; }
    .hp-court .hp-eyebrow { position: absolute; left: calc(var(--x0) + 100 * var(--u)); top: calc(220.5 * var(--u)); margin: 0; font-size: calc(18 * var(--u)); line-height: 1; letter-spacing: .1em; color: rgba(21, 21, 21, .47); }
    .hp-court .hp-h2 { position: static; font-size: calc(78 * var(--u)); }
    .hp-court .hp-h2 > span { position: absolute; left: calc(var(--x0) + 100 * var(--u)); line-height: 1; white-space: nowrap; }
    .hp-court .hp-h2__lead { top: calc(277 * var(--u)); font-size: calc(56 * var(--u)); font-weight: 300; }
    .hp-court__l2 { top: calc(352.4 * var(--u)); font-weight: 600; }
    .hp-court__l3 { top: calc(450.4 * var(--u)); font-weight: 600; }
    .hp-court__card {
        position: absolute; left: calc(var(--x0) + 99 * var(--u)); top: calc(621 * var(--u)); width: calc(1004 * var(--u)); height: calc(275 * var(--u)); min-height: 0; margin: 0;
        grid-template-columns: 518fr 486fr; border-radius: calc(12 * var(--u)); box-shadow: 0 0 calc(20 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, .08);
    }
    .hp-court__what { position: relative; display: block; padding: 0; }
    .hp-court__what p:first-child { position: absolute; left: calc(146 * var(--u)); width: calc(240 * var(--u)); top: calc(64 * var(--u)); margin: 0; font-size: calc(30 * var(--u)); line-height: calc(46 / 30); text-align: center; white-space: nowrap; }
    .hp-court__what .hp-court__zero {
        position: absolute; left: calc(46 * var(--u)); top: calc(165 * var(--u)); width: calc(436 * var(--u)); height: calc(46 * var(--u)); margin: 0; padding: 0;
        justify-content: center; gap: 0 calc(5 * var(--u)); flex-wrap: nowrap; font-size: calc(21.5 * var(--u)); line-height: 1;
    }
    .hp-court__zero svg { width: calc(25 * var(--u)); height: calc(25 * var(--u)); }
    .hp-court__arrow { left: calc(518 / 1004 * 100%); top: calc(111 * var(--u)); transform: translateX(-50%); width: calc(52 * var(--u)); height: calc(53 * var(--u)); padding: 0; font-size: 0; }
    .hp-court__arrow svg { width: 100%; height: 100%; display: block; }
    .hp-court__range { padding: 0; font-size: calc(36 * var(--u)); line-height: 1; }
    .hp-court__notes { position: absolute; left: 0; right: 0; top: calc(950.4 * var(--u)); margin: 0; font-size: calc(24 * var(--u)); line-height: calc(46 / 24); }
}

/* ==========================================================================
   7. Quick Process
   ========================================================================== */
.hp-period { background: #151515; padding: calc(179 * var(--u)) 0 clamp(56px, calc(149 * var(--u)), 149px); text-align: center; }
.hp-period__inner { width: min(100%, 1200px); margin: 0 auto; }
.hp-period .hp-eyebrow { margin-bottom: clamp(12px, calc(40 * var(--u)), 40px); }
.hp-period__clip {
    position: relative; width: calc(1092 * var(--u)); aspect-ratio: 1092 / 451; margin: calc(91 * var(--u)) auto 0;
    border-radius: clamp(12px, calc(22 * var(--u)), 22px); overflow: hidden; background: #2a2f31;
}
.hp-period__clip video { width: 100%; height: 100%; object-fit: cover; }
.hp-period__clip::after { content: ''; position: absolute; inset: 0; background: rgba(16, 18, 19, .48); }
.hp-period__answer {
    position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; gap: .9em; flex-wrap: wrap;
    font-size: clamp(18px, calc(41.7 * var(--u)), 41.7px); font-weight: 300; color: #fff;
}
.hp-period__answer .hp-mark { font-size: clamp(32px, calc(70.9 * var(--u)), 70.9px); font-weight: 600; line-height: 1.12; padding: .04em .22em .08em; }

/* 768px 이상: 시안 7.gif(1200 x 1000) 좌표. 영상 판은 GIF 기준 (60, 402) 1080 x 448 */
.hp-period__answer .hp-mark[data-pop] { transform: scale(.6); opacity: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .55s, opacity .25s ease .55s; }
.hp-period__clip.is-in .hp-mark[data-pop] { transform: none; opacity: 1; }
@media (min-width: 768px) {
    .hp-period { --x0: calc(50% - 600 * var(--u)); height: calc(1000 * var(--u)); padding: 0; }
    .hp-period__inner { position: static; width: auto; }
    .hp-period__inner > div:first-child { position: static; }
    .hp-period .hp-eyebrow { position: absolute; left: 0; right: 0; top: calc(176.5 * var(--u)); margin: 0; font-size: calc(18.28 * var(--u)); line-height: 1; letter-spacing: .2em; color: rgba(255, 255, 255, .8); }
    .hp-period .hp-h2 { position: absolute; left: 0; right: 0; top: calc(233.4 * var(--u)); font-size: calc(80.94 * var(--u)); font-weight: 700; line-height: 1; }
    .hp-period__clip { position: absolute; left: calc(var(--x0) + 60 * var(--u)); top: calc(402 * var(--u)); width: calc(1080 * var(--u)); height: calc(448 * var(--u)); margin: 0; aspect-ratio: auto; border-radius: calc(22 * var(--u)); background: #272727; }
    .hp-period__clip video { object-position: 50% 52%; opacity: .45; }
    .hp-period__clip::after { content: none; }
    .hp-period__answer { inset: auto; left: 0; top: 0; right: 0; bottom: 0; display: block; font-size: calc(41.78 * var(--u)); }
    .hp-period__answer > span { position: absolute; left: calc((389 - 60) * var(--u)); top: calc((613 - 402) * var(--u)); line-height: 1; font-weight: 300; }
    .hp-period__answer .hp-mark {
        position: absolute; left: calc((639 - 60) * var(--u)); top: calc((586 - 402) * var(--u)); width: calc(177 * var(--u)); height: calc(83 * var(--u));
        padding: calc(6.8 * var(--u)) 0 0 calc(10.5 * var(--u)); font-size: calc(71 * var(--u)); font-weight: 600; line-height: 1; text-align: left;
    }
}

/* ==========================================================================
   8. All in One Solution
   ========================================================================== */
.hp-steps { background: var(--cream); padding: calc(218 * var(--u)) 0 clamp(56px, calc(164 * var(--u)), 164px); }
.hp-steps__inner { width: min(100%, 1200px); margin: 0 auto; }
.hp-steps .hp-eyebrow { color: #5f5f5f; margin-bottom: clamp(10px, calc(28 * var(--u)), 28px); }
.hp-steps__answer { margin-top: calc(34 * var(--u)); text-align: center; font-size: clamp(19px, calc(38 * var(--u)), 38px); font-weight: 400; }
.hp-steps__answer .hp-mark { padding: .3em .68em .34em; }
.hp-steps__list { width: calc(1080 * var(--u)); margin: calc(116 * var(--u)) auto 0; padding: 0; list-style: none; }
.hp-step {
    position: relative; padding: calc(94 * var(--u)) calc(26 * var(--u)) calc(62 * var(--u));
    background: #fff; border-radius: clamp(14px, calc(24 * var(--u)), 24px); box-shadow: 0 8px 44px rgba(90, 70, 20, .07);
}
.hp-step + .hp-step { margin-top: calc(92 * var(--u)); }
.hp-step__no {
    position: absolute; left: calc(31 * var(--u)); top: calc(-25 * var(--u)); display: inline-flex; align-items: center; justify-content: center;
    min-width: clamp(84px, calc(180 * var(--u)), 180px); height: clamp(30px, calc(53 * var(--u)), 53px); padding: 0 1em; border-radius: 999px;
    background: #151515; color: #fff; font-size: clamp(13px, calc(24 * var(--u)), 24px); font-weight: 700; letter-spacing: 0;
}
.hp-step h3 { margin: 0 0 calc(40 * var(--u)) calc(27 * var(--u)); font-size: clamp(18px, calc(36.5 * var(--u)), 36.5px); font-weight: 600; line-height: 1.36; }
.hp-step__clip { aspect-ratio: 1028 / 548; border-radius: clamp(8px, calc(14 * var(--u)), 14px); overflow: hidden; background: #e9e4d8; }
.hp-step__clip video { width: 100%; height: 100%; object-fit: cover; }

/* 768px 이상: 시안 8.gif(1200 x 2372) 좌표. (PSD 와 달리 GIF 에는 실제 영상과 '맡기기만 하세요.' 표시가 들어 있다) */
@media (min-width: 768px) {
    .hp-steps { --x0: calc(50% - 600 * var(--u)); height: calc(2372 * var(--u)); padding: 0; }
    .hp-steps__inner { position: static; width: auto; }
    .hp-steps__head { position: static; }
    .hp-steps .hp-eyebrow { position: absolute; left: 0; right: 0; top: calc(208.5 * var(--u)); margin: 0; font-size: calc(18.28 * var(--u)); line-height: 1; letter-spacing: .2em; color: #5f5f5f; }
    .hp-steps .hp-h2 { position: absolute; left: 0; right: 0; top: calc(265.4 * var(--u)); font-size: calc(80.94 * var(--u)); font-weight: 700; line-height: 1; }
    .hp-steps__answer { position: absolute; left: 0; right: 0; top: calc(376 * var(--u)); margin: 0; font-size: calc(40 * var(--u)); line-height: 1; }
    .hp-steps__answer .hp-mark { display: inline-flex; align-items: center; justify-content: center; width: calc(315 * var(--u)); height: calc(66 * var(--u)); padding: 0; font-weight: 400; line-height: 1; }
    .hp-steps__list { position: static; width: auto; margin: 0; }
    .hp-step {
        position: absolute; left: calc(var(--x0) + 60 * var(--u)); width: calc(1080 * var(--u)); height: calc(780 * var(--u)); padding: 0;
        border-radius: calc(18 * var(--u)); box-shadow: 0 0 calc(20 * var(--u)) rgba(0, 0, 0, .05);
    }
    .hp-step:nth-child(1) { top: calc(558 * var(--u)); }
    .hp-step:nth-child(2) { top: calc(1429 * var(--u)); }
    .hp-step + .hp-step { margin: 0; }
    .hp-step__no { left: calc(31 * var(--u)); top: calc(-25 * var(--u)); min-width: 0; width: calc(180 * var(--u)); height: calc(54 * var(--u)); padding: 0; font-size: calc(26 * var(--u)); font-weight: 600; }
    .hp-step h3 { position: absolute; left: calc(53 * var(--u)); top: calc(77 * var(--u)); margin: 0; font-size: calc(36.56 * var(--u)); font-weight: 600; line-height: 1; white-space: nowrap; }
    .hp-step__clip { position: absolute; left: calc(26 * var(--u)); top: calc(169 * var(--u)); width: calc(1028 * var(--u)); height: calc(548 * var(--u)); aspect-ratio: auto; border-radius: calc(10 * var(--u)); }
}

/* ==========================================================================
   9. 아이에게 조금만 기다리라고 하세요.
   ========================================================================== */
.hp-final { background: var(--cream); overflow: hidden; padding: calc(375 * var(--u)) 0 clamp(48px, calc(120 * var(--u)), 120px); text-align: center; }
.hp-final__bg { position: absolute; left: 50%; top: calc(-133 * var(--u)); width: max(calc(1414 * var(--u)), 118vw); transform: translateX(-50%); }
.hp-final__bg img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.hp-final__inner { position: relative; width: min(100%, 1200px); margin: 0 auto; }
.hp-final .hp-h2 { font-size: clamp(27px, calc(78.3 * var(--u)), 78.3px); line-height: 1.24; color: #131313; padding: 0 12px; }
.hp-letter { width: calc(733 * var(--u)); margin: calc(98 * var(--u)) auto 0; background: #fff; box-shadow: 0 10px 44px rgba(60, 45, 10, .1); }
.hp-letter img { width: 100%; height: auto; }
.hp-chevrons { display: block; width: clamp(28px, calc(43 * var(--u)), 43px); margin: calc(90 * var(--u)) auto calc(92 * var(--u)); }
.hp-chevrons svg { display: block; width: 100%; height: auto; }
.hp-final__cta {
    display: flex; align-items: center; justify-content: center; width: calc(906 * var(--u)); min-height: clamp(64px, calc(140 * var(--u)), 140px); margin: 0 auto;
    border-radius: clamp(14px, calc(22 * var(--u)), 22px); background: var(--orange); color: #fff !important;
    font-size: clamp(20px, calc(46 * var(--u)), 46px); font-weight: 600; text-decoration: none; transition: background-color .18s, transform .18s;
}
.hp-final__cta:hover { background: var(--orange-dark); transform: translateY(-2px); }

/* 768px 이상: 시안 9.jpg(1200 x 2183) 좌표 */
@media (min-width: 768px) {
    .hp-final { --x0: calc(50% - 600 * var(--u)); height: calc(2183 * var(--u)); padding: 0; }
    .hp-final__bg { left: calc(var(--x0) - 106 * var(--u)); top: calc(-133 * var(--u)); width: calc(1414 * var(--u)); transform: none; }
    @media (min-width: 1201px) {
        .hp-final__bg img { -webkit-mask-image: linear-gradient(#000 70%, transparent), linear-gradient(90deg, transparent, #000 140px, #000 calc(100% - 140px), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(#000 70%, transparent), linear-gradient(90deg, transparent, #000 140px, #000 calc(100% - 140px), transparent); mask-composite: intersect; }
    }
    .hp-final__inner { position: static; width: auto; }
    .hp-final .hp-h2 { position: static; padding: 0; font-size: calc(78.33 * var(--u)); }
    .hp-final .hp-h2__lead { position: absolute; left: 0; right: 0; top: calc(370 * var(--u)); font-size: calc(56 * var(--u)); font-weight: 300; line-height: 1; }
    .hp-final__l2 { position: absolute; left: 0; right: 0; top: calc(445.6 * var(--u)); font-weight: 700; line-height: 1; }
    .hp-letter { position: absolute; left: calc(var(--x0) + 234 * var(--u)); top: calc(619 * var(--u)); width: calc(733 * var(--u)); margin: 0; box-shadow: calc(5.7 * var(--u)) calc(7 * var(--u)) calc(32 * var(--u)) rgba(0, 0, 0, .05); }
    .hp-chevrons { position: absolute; left: calc(var(--x0) + 579 * var(--u)); top: calc(1724 * var(--u)); width: calc(43 * var(--u)); margin: 0; }
    .hp-final__cta { position: absolute; left: calc(var(--x0) + 148 * var(--u)); top: calc(1878 * var(--u)); width: calc(906 * var(--u)); height: calc(140 * var(--u)); min-height: 0; margin: 0; border-radius: calc(18 * var(--u)); font-size: calc(46 * var(--u)); line-height: 1; }
}

/* ==========================================================================
   모바일: 시안은 한 장짜리 세로 이미지였다. 글자가 읽히도록 2단 구성을 1단으로 푼다.
   ========================================================================== */
@media (max-width: 767px) {
    .hp-pc { display: none; }

    /* 후기: 휴대폰에서는 카드를 키워 손가락으로 누르기 쉽게 (누르면 원본이 크게 열린다) */
    .hp-rev { padding: 64px 0 56px; }
    .hp-rev__lead { font-size: 20px; }
    .hp-rev__line { margin-top: 8px; padding-right: 3px; font-size: 27px; line-height: 36px; }
    .hp-rev__mark { height: 36px; padding: 4px 6px 0; }
    .hp-marquee--top { margin-top: 34px; }
    .hp-marquee--bottom { margin-top: 14px; }
    .hp-marquee__track { gap: 10px; }
    .hp-marquee--top img { height: 300px; }
    .hp-marquee--bottom img { height: 250px; width: 200px; }


    .hp-why__head { margin-left: 20px; padding: 2px 16px 4px 16px; }
    .hp-why__body { display: block; margin-top: 0; }
    .hp-why__text { padding: 34px 20px 0; }
    .hp-why__photo { width: 86%; margin: 18px 0 0 auto; }
    .hp-why__photo::before { left: 5%; right: 0; top: 16%; height: 62%; border-radius: 22px 0 0 22px; }
    .hp-why__photo img { width: 100%; }
    .hp-why__dark { margin-top: -30px; padding-top: 84px; }
    .hp-why__dark .hp-sign { padding-right: 0; }

    .hp-all { padding-top: 56px; }
    .hp-all__sky { width: 168vw; }
    .hp-all__big { margin-top: 96vw; }
    .hp-all__offices { grid-template-columns: 1fr; gap: 18px; width: calc(100% - 40px); margin-top: 20px; }

    .hp-proof__head { padding-top: 60px; }
    .hp-proof__body { height: auto; margin-top: 34px; }
    .hp-certs { position: static; width: auto; margin: 0 20px; gap: 14px 12px; }
    .hp-cert a { height: auto; padding: 6px 6px 0; box-shadow: 0 3px 16px rgba(0, 0, 0, .13); }
    .hp-cert__img { aspect-ratio: 250 / 300; flex: 0 0 auto; }
    .hp-cert__label { padding: 8px 0 10px; }
    .hp-proof__people { position: static; width: 84%; margin: 30px auto 0; }

    .hp-peer__inner { display: block; padding: 52px 20px 56px; }
    .hp-peer__text { min-height: 0; padding-top: 0; }
    .hp-peer__arrow { margin-top: 18px; gap: 8px; }
    .hp-peer__arrow i { flex: 0 0 38%; }
    .hp-phone { max-width: 400px; margin: 28px auto 0; border-radius: 22px; }

    .hp-fee__inner { padding: 72px 0 56px; }
    .hp-fee__answer { margin: 44px 20px 0; gap: 16px; }
    .hp-fee__answer i { flex: 1 1 0; }

    .hp-court { padding-top: 72px; }
    .hp-court__inner { padding: 0 20px; }
    .hp-court__card { grid-template-columns: 1fr; margin-top: 30px; }
    .hp-court__what { padding: 26px 16px 34px; }
    .hp-court__what .hp-court__zero { margin-top: 12px; }
    .hp-court__arrow { left: 50%; top: auto; bottom: 68px; transform: translate(-50%, 50%) rotate(90deg); }
    .hp-court__range { min-height: 68px; padding: 26px 16px 18px; }
    .hp-court__notes { margin-top: 24px; text-align: left; }

    .hp-period { padding-top: 72px; }
    .hp-period__clip { width: calc(100% - 40px); aspect-ratio: 16 / 10; margin-top: 30px; }
    .hp-period__answer { flex-direction: column; gap: 10px; }

    .hp-steps { padding-top: 72px; }
    .hp-steps__answer { margin-top: 14px; }
    .hp-steps__list { width: calc(100% - 32px); margin-top: 46px; }
    .hp-step { padding: 34px 12px 14px; }
    .hp-step + .hp-step { margin-top: 36px; }
    .hp-step__no { left: 14px; top: -15px; }
    .hp-step h3 { margin: 0 0 14px 6px; }

    .hp-final { padding-top: 38vw; }
    .hp-final__bg { top: -6vw; width: 150vw; }
    .hp-letter { width: calc(100% - 40px); margin-top: 34px; }
    .hp-chevrons { margin: 40px auto 34px; }
    .hp-final__cta { width: calc(100% - 40px); }
}

@media (prefers-reduced-motion: reduce) {
    .hp-marquee__track { animation: none !important; }
    .hp-marquee { overflow-x: auto; }
    [data-reveal], .hp-cert[data-reveal], .hp-period__answer .hp-mark[data-pop] { opacity: 1; transform: none; transition: none; }
}