/**
 * TicketBNK — Hero 영역 통일
 * - 컨테이너: 가운데 정렬, 본문은 왼쪽 정렬
 * - simple: 텍스트형 Hero (고객지원·서브페이지)
 * - split: 텍스트 + 비주얼 2열 (홈·About·파트너·솔루션)
 */

:root {
    --hero-width: min(1200px, 100% - 2.5rem);
    --hero-width-wide: min(1400px, 100% - 2.5rem);
    --hero-copy-max: 42rem;
    --hero-min-simple: min(56vh, 460px);
    --hero-min-split: min(78vh, 680px);
    --hero-eyebrow-color: #93c5fd;
    --hero-padding-y: calc(var(--header-h) + 2.5rem);
}

/* 공통 셸 */
.hero-sales,
.about-hero,
.dealers-hero,
.kiosk-hero,
.notice-hero,
.dl-hero,
.remote-hero,
.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-align: left;
}

/* 컨테이너 — 가운데 배치, 내용은 좌측 정렬 */
.hero-sales > .container,
.about-hero > .about-container,
.dealers-hero > .dealers-container,
.kiosk-hero > .container,
.notice-hero > .notice-container,
.dl-hero > .dl-container,
.remote-hero > .remote-container,
.page-hero > .container {
    position: relative;
    z-index: 1;
    width: var(--hero-width);
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
    color: #fff;
    text-align: left;
}

/* 2열 Hero — 넓은 컨테이너 */
.hero-sales > .container,
.dealers-hero > .dealers-container,
.kiosk-hero > .container {
    width: var(--hero-width-wide);
    max-width: 1400px;
}

/* 텍스트형 Hero — 카피 블록만 최대 너비 제한 (컨테이너는 전체 폭 유지) */
.about-hero-copy,
.hero-copy,
.remote-hero-copy {
    max-width: var(--hero-copy-max);
    text-align: left;
}

.page-hero > .container {
    display: block;
}

.page-hero > .container > .hero-copy,
.page-hero > .container > * {
    max-width: var(--hero-copy-max);
}

/* 높이 통일 */
.hero-sales,
.dealers-hero,
.kiosk-hero {
    min-height: var(--hero-min-split);
    padding: var(--hero-padding-y) 0 3.5rem;
}

.about-hero {
    min-height: var(--hero-min-split);
    padding: var(--hero-padding-y) 0 3.5rem;
}

.notice-hero,
.dl-hero,
.remote-hero,
.page-hero {
    min-height: var(--hero-min-simple);
    padding: var(--hero-padding-y) 0 3rem;
}

/* Eyebrow 통일 */
.hero-sales .hero-platform,
.about-hero-eyebrow,
.dealers-hero-eyebrow,
.kiosk-hero-eyebrow,
.notice-hero-eyebrow,
.dl-hero-eyebrow,
.remote-hero-eyebrow,
.page-hero .eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hero-eyebrow-color);
}

/* Breadcrumb */
.about-hero .breadcrumb,
.dealers-hero .breadcrumb,
.kiosk-hero .breadcrumb,
.notice-hero .breadcrumb,
.dl-hero .breadcrumb,
.remote-hero .breadcrumb,
.page-hero .breadcrumb {
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 1rem;
    font-size: 0.88rem;
    text-align: left;
}

.about-hero .breadcrumb a,
.dealers-hero .breadcrumb a,
.kiosk-hero .breadcrumb a,
.notice-hero .breadcrumb a,
.dl-hero .breadcrumb a,
.remote-hero .breadcrumb a,
.page-hero .breadcrumb a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

/* 제목·리드 */
.about-hero h1,
.dealers-hero h1,
.kiosk-hero h1,
.notice-hero h1,
.dl-hero h1,
.remote-hero h1,
.page-hero h1,
.hero-sales h1 {
    text-align: left;
    letter-spacing: -0.03em;
}

.about-hero-lead,
.dealers-hero-lead,
.kiosk-hero-lead,
.notice-hero-lead,
.dl-hero-lead,
.remote-hero-lead,
.page-hero .sub,
.hero-sales .hero-sub {
    text-align: left;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
}

/* CTA 버튼 그룹 */
.about-hero-actions,
.dealers-hero-actions,
.kiosk-hero-actions,
.hero-sales .hero-actions,
.remote-hero-actions.remote-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: flex-start;
}

.about-hero-actions .btn-outline,
.dealers-hero-actions .btn-outline,
.kiosk-hero-actions .btn-outline,
.hero-sales .btn-outline {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

/* 2열 그리드 유지 */
.dealers-hero .dealers-container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.5rem;
    align-items: center;
    text-align: left;
}

.kiosk-hero .container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.5rem;
    align-items: center;
    text-align: left;
}

.hero-sales .container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2.5rem;
    align-items: center;
    text-align: left;
}

.dealers-hero-copy,
.kiosk-hero-copy,
.hero-sales-copy {
    text-align: left;
    max-width: none;
}

@media (max-width: 900px) {
    .dealers-hero .dealers-container,
    .kiosk-hero .container,
    .hero-sales .container {
        grid-template-columns: 1fr;
        width: var(--hero-width);
        max-width: 1200px;
    }
}