/* ============================================================================
   home-hyobugo.css — 효부고 전용 메인 페이지
   Design System 06: Navy Gold

   ★ 히어로 설계 전제
   home-hero.webp는 네 모서리 배경이 모두 #10162f로 균일하다.
   히어로 섹션 배경을 같은 색(--hy-stage)으로 두면 이미지 사각형이 사라지고
   휴대폰만 떠 있는 것처럼 보인다. 그래서 히어로 배경에는 그래디언트를 넣지 않는다 —
   조금이라도 색이 어긋나면 이미지 테두리가 이음매로 드러난다.
   ============================================================================ */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-bg);
}

.hy-home {
    /* home-hero.webp의 배경색과 정확히 같은 값 — 바꾸면 이미지 이음매가 보인다 */
    --hy-stage: #10162f;
    --hy-hairline: rgba(26, 26, 46, 0.12);
    --hy-gold-line: rgba(226, 176, 74, 0.5);
    --hy-on-navy: rgba(255, 255, 255, 0.74);

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

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

.hy-shell {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.hy-home h1,
.hy-home h2,
.hy-home h3,
.hy-home p {
    margin-top: 0;
}

.hy-home h1,
.hy-home h2 {
    font-family: Georgia, "Noto Serif KR", "Nanum Myeongjo", Batang, serif;
}

.hy-home h2 {
    margin-bottom: 16px;
    color: var(--color-primary);
    font-size: clamp(29px, 3.6vw, 42px);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.035em;
}

.hy-kicker,
.hy-eyebrow {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.hy-kicker {
    color: var(--color-accent-text);
}

.hy-eyebrow {
    color: var(--color-accent);
}

/* ── 버튼 ────────────────────────────────────────────────────────────────── */

.hy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform 180ms ease, background-color 180ms ease,
                border-color 180ms ease, box-shadow 180ms ease;
}

.hy-btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

/* 골드 배경 위 글자는 네이비 (DS06 원칙 — 흰 글자는 대비 부족) */
.hy-btn--gold {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}

.hy-btn--gold:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-primary);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.hy-btn--navy {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.hy-btn--navy:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-nav);
}

/* 네이비 배경 전용 */
.hy-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.42);
    color: var(--color-white);
}

.hy-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.72);
    color: var(--color-white);
}

.hy-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.hy-text-link span {
    color: var(--color-accent-deep);
    transition: transform 180ms ease;
}

.hy-text-link:hover {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.hy-text-link:hover span {
    transform: translateX(4px);
}

/**
 * [헤더·로고] 2026-07-30 이 파일에서 전부 뺐다 — theme-hyobugo.css 로 옮겼다.
 *
 * 헤더와 로고는 공용 partial(header.php)에서 나오므로 **모든 페이지에 있다.**
 * 그런데 이 파일은 홈에서만 로드돼, 여기에 규칙을 두면 홈만 다르게 렌더된다.
 * 실측으로 확인된 차이: 헤더 높이 72 vs 76px · 하단 실선 vs 그림자 ·
 * 배경 알파 .96 vs .92 · 로고 글자색 네이비 vs #333.
 * 페이지를 옮길 때 헤더가 움찔하고 로고 색이 바뀌는 상태였다.
 *
 * ★ 규칙: 공용 partial 에서 나온 요소(.site-header/.site-nav/.site-logo/.site-footer/
 *   .btn-header-*)의 스타일은 **모든 페이지가 로드하는 파일**에만 쓴다.
 *   이 파일에는 홈에만 존재하는 마크업(.hy-*)만 남긴다.
 */

/**
 * [네비 색상] 2026-07-30 네비 색 오버라이드를 전부 제거했다.
 *
 * 이 파일은 홈에서만 로드된다. 여기서 네비 색을 덮으면 **홈만 다른 색**이 되는데,
 * 같은 헤더 partial 이라 화면만 보고는 원인을 짚기 어렵다(로고 세리프 폰트 때 겪은 그 함정).
 *
 * 실제로 두 번 당했다:
 *   ① .site-nav__secondary — 호버 색이 홈에서만 달랐다
 *   ② .site-nav__primary — 모바일에서 주 액션이 '채운 버튼'이 되면서, 여기 남아 있던
 *      color:--color-text-light 가 흰 글자를 덮어 홈에서만 회색으로 보였다
 *      ("데스크톱에서 안 보이니 색은 의미 없다"고 판단해 남겨 뒀던 게 틀렸다)
 *
 * 색은 theme-hyobugo.css 의 --home-* 매핑이 이미 처리한다. 공용 home.css 하나로 충분하다.
 */

/**
 * [헤더 CTA] 2026-07-30 이 파일에서 규칙을 뺐다 — theme-hyobugo.css 로 옮겼다.
 *
 * 이 파일은 **홈에서만** 로드되는데 여기서 .btn-header-cta 를 덮고 있어서
 * ① 호버 색 반전이 홈에서만 걸리고(다른 페이지는 진한 채움 그대로),
 * ② --ghost(부고장 관리)까지 같이 덮여 홈에서만 아웃라인이 사라졌다.
 * 둘 다 화면으로만 보면 원인을 짚기 어렵다.
 *
 * theme-hyobugo.css 는 모든 페이지가 로드하면서 효부고 전용이라, 사이트 전체에
 * 적용돼야 하는 색 결정은 그쪽이 맞는 자리다.
 */

/* ── 히어로 — 네이비 스테이지 위에 부고장 화면이 떠 있다 ─────────────────── */

.hy-hero {
    overflow: hidden;
    /* 그래디언트 금지 — 이미지 배경색과 완전히 같아야 경계가 사라진다 */
    background: var(--hy-stage);
    color: var(--color-white);
}

/* 오른쪽(사진) 칸을 넓게 잡는다 — 사진 배경이 섹션 배경과 같아 실제로 보이는 건
   휴대폰과 꽃뿐이라, 칸이 좁으면 사진 비중이 실제보다 더 작아 보인다.
   h1 은 마크업에 <br> 이 박혀 있어 왼쪽 칸이 좁아져도 줄바꿈이 흐트러지지 않는다. */
.hy-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(24px, 3.4vw, 56px);
    align-items: center;
    padding: clamp(40px, 5vw, 68px) 0 clamp(28px, 4vw, 48px);
}

/* theme-hyobugo.css의 h1~h6 규칙이 네이비를 직접 지정하므로 상속만으로는 흰색이 되지 않는다 */
.hy-hero h1 {
    margin-bottom: 22px;
    color: var(--color-white);
    font-size: clamp(34px, 4.6vw, 54px);
    font-weight: 700;
    line-height: 1.26;
    letter-spacing: -0.035em;
}

.hy-hero__lead {
    margin-bottom: 32px;
    color: var(--hy-on-navy);
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.78;
}

.hy-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hy-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.64);
    font-size: 14px;
}

.hy-hero__facts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hy-hero__facts li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* 액자·그림자·라운드 없음 — 배경색이 같으므로 이미지가 그대로 공중에 뜬다 */
.hy-hero__visual {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

/* 원본이 800×600 이다 — 그 이상 늘리면 흐려지므로 max-width 는 원본 크기에서 멈춘다 */
.hy-hero__visual img {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
}

/* 빠른 이동 — 히어로 네이비 안에 이어 붙인 얇은 줄 */
.hy-hero__quick {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hy-hero__quick-grid {
    /* .hy-shell의 좌우 여백과 같은 값 — 그래야 아래 음수 마진이 화면 밖으로 넘치지 않는다 */
    --hy-cell-pad: 24px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* 칸 안쪽 여백은 넷 다 똑같이 두고, 그리드를 그만큼 바깥으로 당긴다.
       첫 칸 글자가 위 헤드라인과 같은 세로선에 놓이면서 칸별 여백은 어긋나지 않는다. */
    margin-inline: calc(-1 * var(--hy-cell-pad));
}

.hy-hero__quick-grid a {
    display: block;
    padding: 24px var(--hy-cell-pad) 26px;
    text-decoration: none;
    transition: background-color 160ms ease;
}

.hy-hero__quick-grid a + a {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.hy-hero__quick-grid a:hover {
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

.hy-hero__quick-grid span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.hy-hero__quick-grid strong {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--color-white);
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hy-hero__quick-grid i {
    color: var(--color-accent);
    font-style: normal;
    transition: transform 160ms ease;
}

.hy-hero__quick-grid a:hover i {
    transform: translateX(4px);
}

/* ── 공통 섹션 ───────────────────────────────────────────────────────────── */

.hy-section {
    padding: clamp(72px, 9vw, 112px) 0;
}

.hy-section--soft {
    background: var(--color-bg-light);
}

.hy-section__head {
    max-width: 600px;
    margin: 0 auto 56px;
    text-align: center;
}

.hy-section__head > p:last-child {
    color: var(--color-text-light);
    font-size: 16px;
    line-height: 1.7;
}

/* 위의 `.hy-home p { margin-top: 0 }`(특이도 0,1,1)를 이기려면 여기도 두 클래스가 필요하다 */
.hy-home .hy-section__cta {
    margin: 64px 0 0;
    text-align: center;
}

/* ── 좌: 제목 고정 / 우: 내용 (서비스 소개 · FAQ 공통 뼈대) ───────────────── */

.hy-split {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6.5fr);
    gap: clamp(36px, 6vw, 84px);
    align-items: start;
}

.hy-split__aside {
    position: sticky;
    top: 104px;
}

.hy-split__aside > p:not(.hy-kicker) {
    margin-bottom: 22px;
    color: var(--color-text-light);
    font-size: 16px;
    line-height: 1.72;
}

/* ── 서비스 소개 — 괘선으로 나뉜 가로줄 ──────────────────────────────────── */

.hy-rows__item {
    display: flex;
    gap: clamp(18px, 3vw, 34px);
    padding: 30px 0;
}

.hy-rows__item:first-child {
    padding-top: 0;
}

.hy-rows__item + .hy-rows__item {
    border-top: 1px solid var(--hy-hairline);
}

.hy-rows__no {
    flex: none;
    padding-top: 3px;
    font-family: Georgia, "Noto Serif KR", serif;
    color: var(--color-accent-deep);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.hy-rows__item h3 {
    margin-bottom: 10px;
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hy-rows__item p {
    margin-bottom: 0;
    color: var(--color-text-light);
    font-size: 15.5px;
    line-height: 1.76;
}

/* ── 이용 방법 — 골드 점선으로 이어진 가로 3단계 ─────────────────────────── */

.hy-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.hy-track li {
    position: relative;
    padding: 0 8px;
}

/* 단계를 잇는 골드 점선 — 마지막 항목 뒤에는 없다 */
.hy-track li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    left: calc(50% + 42px);
    right: calc(-50% + 42px);
    border-top: 1px dashed var(--hy-gold-line);
}

.hy-track__dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    background: var(--color-bg-light);
    font-family: Georgia, "Noto Serif KR", serif;
    color: var(--color-primary);
    font-size: 19px;
    font-weight: 700;
}

/* 단계가 도착할 때 한 번만 퍼지는 골드 여운 — 반복하지 않는다(부고 화면이다) */
.hy-track__dot::before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.hy-track h3 {
    margin-bottom: 10px;
    color: var(--color-primary);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hy-track p {
    max-width: 300px;
    margin: 0 auto;
    color: var(--color-text-light);
    font-size: 15px;
    line-height: 1.72;
}

/* ── 이용 방법 — 마우스 호버 ───────────────────────────────────────────────
   ★ 호버는 transform 이 아니라 translate/scale 개별 속성을 쓴다.
     등장 연출이 transform 을 쓰면서 transition-delay 를 최대 300ms 걸어 두기 때문에,
     호버까지 transform 으로 하면 마우스를 올릴 때마다 그 지연이 따라붙어 굼떠 보인다.
     속성을 나누면 지연은 등장에만 걸리고 호버는 즉시 반응한다. */

.hy-track li {
    transition: translate 260ms ease;
}

.hy-track li:hover {
    translate: 0 -6px;
}

.hy-track__dot {
    transition: scale 260ms ease, background-color 260ms ease,
                border-color 260ms ease, box-shadow 260ms ease;
}

.hy-track li:hover .hy-track__dot {
    scale: 1.09;
    background: var(--color-primary-soft);
    border-color: var(--color-accent-dark);
    box-shadow: 0 0 0 7px rgba(226, 176, 74, 0.14);
}

.hy-track h3 {
    transition: color 260ms ease;
}

.hy-track li:hover h3 {
    color: var(--color-accent-deep);
}

/* 호버한 단계에서 다음 단계로 이어지는 점선이 또렷해진다 */
.hy-track li:not(:last-child)::after {
    transition: border-color 260ms ease;
}

.hy-track li:hover:not(:last-child)::after {
    border-top-color: var(--color-accent);
}

/* ── 이용 방법 — 스크롤 등장 ───────────────────────────────────────────────
   .hy-anim 은 <main> 바로 뒤 인라인 스크립트가 첫 페인트 전에 붙인다.
   숨김 상태를 그 클래스에 매달아 둬야 (1) JS가 없으면 연출 없이 다 보이고,
   (2) 본문이 보였다 사라지는 깜빡임이 생기지 않는다.
   단계별 지연(--hy-track-delay)은 마크업에서 넘긴다 — 1→2→3 순서가 눈에 보이게.
   지연은 transition 단축 속성 안에서 항목별로 준다(transition-delay 를 따로 쓰면
   위 호버 전환까지 같이 지연된다). */

.hy-anim .hy-track > li {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 760ms ease var(--hy-track-delay, 0ms),
                transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--hy-track-delay, 0ms),
                translate 260ms ease;
}

.hy-anim .hy-track > li.is-visible {
    opacity: 1;
    transform: none;
}

/* 점선이 왼쪽에서 오른쪽으로 그어지며 다음 단계로 이어진다 */
.hy-anim .hy-track > li:not(:last-child)::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 820ms cubic-bezier(0.22, 0.61, 0.36, 1)
                calc(var(--hy-track-delay, 0ms) + 300ms),
                border-color 260ms ease;
}

.hy-anim .hy-track > li.is-visible:not(:last-child)::after {
    transform: scaleX(1);
}

/* 번호 원은 살짝 작게 시작해 제자리를 찾는다 — 튕김(overshoot)은 쓰지 않는다 */
.hy-anim .hy-track > li .hy-track__dot {
    transform: scale(0.8);
    transition: transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--hy-track-delay, 0ms),
                scale 260ms ease, background-color 260ms ease,
                border-color 260ms ease, box-shadow 260ms ease;
}

.hy-anim .hy-track > li.is-visible .hy-track__dot {
    transform: none;
}

.hy-anim .hy-track > li.is-visible .hy-track__dot::before {
    animation: hyTrackHalo 1500ms ease-out both;
    animation-delay: calc(var(--hy-track-delay, 0ms) + 220ms);
}

@keyframes hyTrackHalo {
    from { opacity: 0.55; transform: scale(1); }
    to   { opacity: 0;    transform: scale(1.8); }
}

/* ── 정보 보호 원칙 — 크림-골드 시그니처 카드 (DS06 패턴 D) ──────────────── */

.hy-care {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    padding: clamp(36px, 5vw, 60px);
    background: linear-gradient(135deg,
                var(--color-cream-start) 0%,
                var(--color-cream) 50%,
                var(--color-cream-end) 100%);
    border: 1px solid var(--color-cream-border);
    border-radius: 12px;
}

.hy-care__copy > p:not(.hy-kicker) {
    margin-bottom: 22px;
    color: var(--color-accent-text);
    font-size: 16px;
    line-height: 1.76;
}

.hy-care__facts {
    margin: 0;
}

.hy-care__facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
}

.hy-care__facts > div + div {
    border-top: 1px solid var(--color-cream-border);
}

.hy-care__facts dt {
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 800;
}

.hy-care__facts dd {
    margin: 0;
    color: var(--color-accent-text);
    font-size: 14.5px;
    text-align: right;
}

/* ── 서비스 기본 정보 — 네이비 밴드, 골드 세리프 숫자 ─────────────────────── */

.hy-facts {
    padding: clamp(54px, 7vw, 80px) 0;
    background: var(--color-primary);
}

.hy-facts__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    text-align: center;
}

.hy-facts__grid > div {
    padding: 6px 16px;
}

.hy-facts__grid > div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.hy-facts__grid strong {
    display: block;
    margin-bottom: 8px;
    font-family: Georgia, "Noto Serif KR", serif;
    color: var(--color-accent);
    font-size: clamp(29px, 3.8vw, 42px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* 한글 낱말 값은 같은 크기에서 숫자보다 무거워 보여 한 단계 줄인다 */
.hy-facts__grid strong.is-word {
    font-size: clamp(25px, 3.1vw, 35px);
}

/* 단위(원·일·곳)는 수치보다 작게 — 숫자가 주인공이다 */
.hy-facts__grid strong em {
    font-size: 0.5em;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
}

/* 0부터 세어 올리는 값 — 자릿수가 바뀌어도 단위가 밀리지 않게 고정폭 숫자를 쓴다 */
.hy-facts__grid strong .js-count {
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.hy-facts__grid span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* ── 자주 묻는 질문 ──────────────────────────────────────────────────────── */

.hy-faq details {
    border-top: 1px solid var(--hy-hairline);
}

.hy-faq details:last-child {
    border-bottom: 1px solid var(--hy-hairline);
}

.hy-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 2px;
    color: var(--color-primary);
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
    transition: color 160ms ease;
}

.hy-faq summary::-webkit-details-marker {
    display: none;
}

.hy-faq summary::after {
    content: "+";
    flex: none;
    font-family: Georgia, serif;
    color: var(--color-accent-deep);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    transition: transform 180ms ease;
}

.hy-faq details[open] summary::after {
    transform: rotate(45deg);
}

.hy-faq summary:hover {
    color: var(--color-primary-dark);
}

.hy-faq details > p {
    margin: 0;
    padding: 0 2px 24px;
    color: var(--color-text-light);
    font-size: 15.5px;
    line-height: 1.76;
}

/* ── 마무리 — 히어로와 같은 네이비로 페이지를 닫는다 ─────────────────────── */

.hy-final {
    padding: clamp(72px, 9vw, 108px) 0;
    background: var(--color-primary);
    color: var(--color-white);
}

.hy-final__inner {
    max-width: 640px;
    text-align: center;
}

.hy-final h2 {
    margin-bottom: 16px;
    color: var(--color-white);
}

.hy-final__inner > p:not(.hy-eyebrow) {
    margin-bottom: 32px;
    color: var(--hy-on-navy);
    font-size: 16px;
    line-height: 1.72;
}

.hy-final__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* ── 반응형 ──────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    /* minmax(0,…)이 없으면 이미지의 max-width가 열을 밀어내 가로 스크롤이 생긴다 */
    .hy-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        text-align: center;
        padding-top: clamp(36px, 6vw, 56px);
    }

    .hy-hero__actions,
    .hy-hero__facts {
        justify-content: center;
    }

    .hy-hero__visual {
        justify-content: center;
        order: -1;
    }

    .hy-hero__visual img {
        max-width: 560px;
    }

    .hy-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .hy-split__aside {
        position: static;
    }
}

@media (max-width: 860px) {
    .hy-hero__quick-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .hy-hero__quick-grid a {
        padding: 20px var(--hy-cell-pad);
    }

    .hy-hero__quick-grid a + a {
        border-left: 0;
    }

    .hy-hero__quick-grid a:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hy-hero__quick-grid a:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hy-track {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    /* 세로로 쌓이면 가로 점선은 의미가 없다 */
    .hy-track li:not(:last-child)::after {
        display: none;
    }

    .hy-care {
        grid-template-columns: minmax(0, 1fr);
    }

    .hy-facts__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px 0;
    }

    .hy-facts__grid > div:nth-child(3) {
        border-left: 0;
    }
}

@media (max-width: 640px) {
    .hy-shell {
        width: calc(100% - 36px);
    }

    .hy-hero__grid {
        padding-bottom: 24px;
    }

    .hy-hero__actions .hy-btn,
    .hy-final__actions .hy-btn {
        width: 100%;
    }

    .hy-hero__quick-grid {
        /* 이 폭에서는 .hy-shell 좌우 여백이 18px이므로 당기는 값도 함께 줄인다 */
        --hy-cell-pad: 18px;

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

    .hy-hero__quick-grid a:nth-child(even) {
        border-left: 0;
    }

    .hy-hero__quick-grid a + a {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hy-rows__item {
        flex-direction: column;
        gap: 10px;
    }

    .hy-facts__grid > div + div {
        border-left: 0;
    }

    .hy-facts__grid > div:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }

}

/* ── 스크롤 등장 — 섹션이 한 덩어리씩 올라온다 ─────────────────────────────
   ★ 숨김 상태는 구조 선택자로만 건다(.hy-reveal 같은 '나중에 붙는 클래스'에 걸지 않는다).
     .hy-anim 은 <main> 바로 뒤 인라인 스크립트가 아래 섹션들이 파싱되기 전에 붙이므로,
     섹션은 처음 그려질 때부터 숨어 있다 — 보였다 사라지는 깜빡임이 없다.
     JS가 늦게 하는 일은 '.is-in 을 붙여 보여주는 것'과 --hy-i(순번) 지정뿐이다.

   히어로는 첫 화면이라 대상에서 제외한다 — 숨겼다 띄우면 첫 인상이 깜빡이고
   LCP(가장 큰 요소가 그려지는 시점)만 늦어진다. */

.hy-anim > section:not(.hy-hero) > .hy-shell {
    opacity: 0;
    transform: translateY(36px) scale(0.985);
    transition: opacity 800ms ease,
                transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hy-anim > section.is-in > .hy-shell {
    opacity: 1;
    transform: none;
}

/* 섹션 안의 반복 항목은 한 박자 늦게 차례로 들어온다 — '한 섹션씩 로딩되는' 느낌 */
.hy-anim > section:not(.hy-hero) :is(
    .hy-rows__item,
    .hy-care__facts > div,
    .hy-facts__grid > div,
    .hy-faq > details
) {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 660ms ease,
                transform 660ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--hy-i, 0) * 110ms + 200ms);
}

.hy-anim > section.is-in :is(
    .hy-rows__item,
    .hy-care__facts > div,
    .hy-facts__grid > div,
    .hy-faq > details
) {
    opacity: 1;
    transform: none;
}

/* 움직임을 줄여 달라고 한 사용자에게는 결과 화면만 보여준다 */
@media (prefers-reduced-motion: reduce) {
    .hy-anim > section:not(.hy-hero) > .hy-shell,
    .hy-anim > section:not(.hy-hero) :is(
        .hy-rows__item,
        .hy-care__facts > div,
        .hy-facts__grid > div,
        .hy-faq > details
    ),
    .hy-anim .hy-track > li,
    .hy-anim .hy-track > li .hy-track__dot,
    .hy-anim .hy-track > li:not(:last-child)::after {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hy-track li:hover,
    .hy-track li:hover .hy-track__dot {
        translate: none;
        scale: none;
    }

    .hy-anim .hy-track > li.is-visible .hy-track__dot::before {
        animation: none;
    }
}