/* 좌측 히어로 + 우측 모바일 폭 컬럼 레이아웃 (공용).
 *
 * /contact 단계형 상담 폼과 /auth/* 로그인·회원가입이 같이 쓴다.
 * 히어로 마크업은 templates/components/_split_hero.html 이 단일 원본이다.
 *
 * PC(>=1024px): [좌 히어로 라운드 카드 | 우 480px 컬럼], 초광폭에서 늘어지지 않게 상한.
 * 모바일:        히어로 숨김. 필요하면 .sh-hero-mini 박스를 본문 안에 넣어 대신한다.
 *
 * 주의: 이 파일을 고치면 쓰는 쪽 템플릿의 ?v= 토큰을 전부 올릴 것
  *       (main.py 의 ASSET_VERSION — 템플릿에서 {{ asset_version }}).
 */

:root {
    --sh-col: 480px;          /* PC 에서 우측 컬럼이 갖는 고정 폭 — 모바일 뷰포트 기준 */
    --sh-navy: #1a1a2e;
    --sh-accent: #00aaff;
    --sh-line: #e2e8f0;
}

.sh-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.sh-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sh-hero { display: none; }

/* 히어로 내부 -------------------------------------------------------------- */

.sh-hero__poster,
.sh-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sh-hero__video { opacity: 0; transition: opacity 0.6s ease; }
.sh-hero__video.is-ready { opacity: 1; }

/* 영상 위 글자 대비 확보 — 아래쪽을 더 어둡게 깔아 타이틀이 항상 읽히게 한다 */
.sh-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 15, 30, 0.35) 0%, rgba(10, 15, 30, 0.62) 100%),
        rgba(10, 15, 30, 0.18);
}

.sh-hero__body {
    position: relative;
    z-index: 1;
    max-width: 460px;
    padding: 40px;
    text-align: center;
    color: #fff;
}

.sh-hero__logo { width: 148px; margin-bottom: 28px; opacity: 0.95; }

.sh-hero__eyebrow {
    font-size: 0.82rem;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 14px;
}

.sh-hero__title {
    font-size: 2.15rem;
    line-height: 1.38;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.32);
}

.sh-hero__accent { color: var(--sh-accent); }

.sh-hero__desc {
    font-size: 0.94rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
}

/* 모바일 전용 미니 히어로 (본문 안에 넣어 쓴다) ------------------------------- */

.sh-hero-mini {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    margin-top: 28px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--sh-navy);
}

.sh-hero-mini__title {
    position: relative;
    z-index: 1;
    padding: 0 20px;
    font-size: 1.22rem;
    line-height: 1.45;
    letter-spacing: -0.025em;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* PC ---------------------------------------------------------------------- */
/* 히어로는 컬럼(480px)을 빼고도 충분히 남을 때만 띄운다 */

@media (min-width: 1024px) {
    /* 초광폭 모니터에서 가로로 늘어지지 않게 가운데 정렬 + 상한 */
    .sh-shell {
        max-width: 1320px;
        margin: 0 auto;
        gap: 32px;
        padding: 0 32px;
        transition: gap 0.38s ease;
    }

    .sh-hero {
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 28px;
        flex: 1 1 0%;
        min-width: 0;
        height: calc(100vh - 56px);
        margin: 28px 0;
        border-radius: 24px;
        overflow: hidden;
        background: var(--sh-navy);
        transition: opacity 0.3s ease, flex-grow 0.38s ease;
    }

    .sh-col {
        flex: 0 0 var(--sh-col);
        width: var(--sh-col);
        max-width: var(--sh-col);
        background: #fff;
        transition: margin 0.38s ease;
    }

    /* 진행이 시작되면(예: 상담 폼이 인트로를 벗어나면) 히어로를 접고 본문을 가운데로.
       flex-grow 를 0 으로 접으면서 opacity 도 같이 빼 자연스럽게 넘어간다. */
    .sh-shell.is-started { gap: 0; }

    .sh-shell.is-started .sh-hero {
        flex-grow: 0;
        opacity: 0;
        pointer-events: none;
    }

    .sh-shell.is-started .sh-col { margin: 0 auto; }

    /* PC 에서는 좌측 히어로가 같은 역할을 하므로 미니 박스는 감춘다 */
    .sh-hero-mini { display: none; }

    /* 히어로를 좁게 + 낮게 — 본문(로그인·회원가입 폼)이 주인공인 화면용.
       히어로 폭·높이를 캡하고 둘을 가운데로 모아 여백이 한쪽에 몰리지 않게 한다. */
    .sh-shell--hero-sm {
        --sh-col: 560px;          /* 본문을 기본(480)보다 넓게 */
        max-width: 1120px;
        justify-content: center;
    }

    /* 높이 70vh, 위아래 15vh 씩 남겨 화면 세로 가운데에 놓는다.
       sticky top 도 15vh 라 스크롤 중에도 같은 위치를 유지한다. */
    .sh-shell--hero-sm .sh-hero {
        max-width: 420px;
        height: 70vh;
        margin: 15vh 0;
        top: 15vh;
        align-self: flex-start;
    }

    .sh-shell--hero-sm .sh-hero__body {
        max-width: 100%;
        padding: 32px 28px;
    }

    .sh-shell--hero-sm .sh-hero__logo { width: 128px; margin-bottom: 22px; }
    .sh-shell--hero-sm .sh-hero__title { font-size: 1.7rem; }
    .sh-shell--hero-sm .sh-hero__desc { font-size: 0.88rem; }
}

@media (min-width: 1500px) {
    .sh-hero__title { font-size: 2.5rem; }
    .sh-hero__body { max-width: 520px; }

    /* 좁은 히어로는 초광폭에서도 커지지 않는다 */
    .sh-shell--hero-sm .sh-hero__title { font-size: 1.8rem; }
    .sh-shell--hero-sm .sh-hero__body { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .sh-shell,
    .sh-hero,
    .sh-col,
    .sh-hero__video { transition-duration: 0.01ms !important; }
}