/* Shared public subpage heroes. Domain styles own only the content below them. */
.public-hero {
    --hero-title-size: clamp(2rem, 4vw, 3.5rem);
    --hero-description-width: 45rem;
    margin-top: var(--space-8);
    border: var(--border-width) solid var(--color-brand-light);
    border-radius: var(--radius-card);
    background: var(--color-brand-soft);
    padding: clamp(var(--space-6), 5vw, var(--space-12));
}
.public-hero h1 { margin-top: var(--space-3); font-size: var(--hero-title-size); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tight); line-height: var(--line-height-tight); }
.public-hero__description { max-width: var(--hero-description-width); margin-top: var(--space-5); color: var(--color-text-secondary); line-height: var(--line-height-loose); }
.public-hero .public-hero__actions { margin-top: var(--space-6); }
.public-hero__actions > .text-link { display: inline-flex; min-height: var(--control-height); align-items: center; gap: var(--space-2); color: inherit; font-size: var(--font-size-sm); }

/* 사진 히어로 높이의 원본은 이 토큰 하나다. 모든 공개 서브페이지가 같은 값을 쓰고 화면별·구간별로 덮어쓰지 않는다.
   가장 긴 히어로(여행 메인)가 들어가는 값으로 잡아 내용 길이로 높이가 갈리지 않게 한다. 바다 배경(common.css .ocean-backdrop--light)도 읽어 수면광을 히어로 바로 아래에서 시작한다. */
:root { --hero-height: clamp(30rem, 16.5rem + 25vw, 39rem); }
.public-hero--image {
    --hero-padding-top: calc(var(--space-24) + var(--space-4));
    --hero-padding-bottom: clamp(var(--space-12), 6vw, var(--space-20));
    --hero-title-size: clamp(2.25rem, 4.5vw, 4.25rem);
    --hero-description-width: 42rem;
    position: relative;
    min-height: var(--hero-height);
    overflow: hidden;
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: var(--color-brand);
    padding: 0;
    color: var(--color-surface);
}
.public-hero--image::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgb(0 25 35 / .42), transparent 32%, rgb(0 25 35 / .78)); content: ''; pointer-events: none; }
.public-hero--image > .generated-image { position: absolute; inset: 0; height: 100%; }
.public-hero--image > .generated-image > img { height: 100%; object-fit: cover; object-position: center; }
.public-hero--image > .generated-image > .generated-image__label { z-index: 3; }
.public-hero--image > .public-hero__content { position: relative; z-index: 2; display: flex; min-height: inherit; width: min(100%, var(--container-lg)); flex-direction: column; justify-content: flex-end; margin-inline: auto; padding: var(--hero-padding-top) var(--gutter) var(--hero-padding-bottom); }
.public-hero__crumb { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; align-self: flex-start; max-width: 100%; margin-bottom: var(--space-6); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-text) 35%, transparent); padding: var(--space-1) var(--space-4); color: var(--color-surface); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.public-hero__crumb a { color: inherit; text-decoration: none; }
/* 사진 없는 히어로(이미지 파일이 없을 때): 본문 줄과 같은 폭·여백의 물빛 상자로 둔다. */
.public-hero:not(.public-hero--image) { width: min(100% - 2 * var(--gutter), var(--container-lg) - 2 * var(--gutter)); margin-inline: auto; }
/* 사진 없는 히어로의 위치 줄: 물빛 상자 위라 어두운 알약 대신 본문 줄의 옅은 글자로 둔다. */
.public-hero:not(.public-hero--image) .public-hero__crumb { width: fit-content; background: none; padding: 0; color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.public-hero:not(.public-hero--image) .public-hero__crumb [aria-current="page"] { color: var(--color-text); }
.public-hero--image .section-eyebrow-caps { color: rgb(255 255 255 / .85); }
.public-hero--image h1 { font-weight: var(--font-weight-regular); }
.public-hero--image .public-hero__description { margin-top: var(--space-4); color: inherit; font-size: clamp(var(--font-size-base), 1.3vw, var(--font-size-lg)); line-height: var(--line-height-body); }
.public-hero__regions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); list-style: none; font-size: var(--font-size-sm); }
.public-hero__regions li + li::before { margin-right: var(--space-3); content: '·'; }

@media (max-width: 47.999rem) {
    .public-hero--image { --hero-padding-top: var(--space-24); --hero-padding-bottom: var(--space-10); }
}
@media (max-width: 39.999rem) {
    .public-hero--image { --hero-padding-bottom: var(--space-8); --hero-title-size: clamp(2rem, 8vw, 2.75rem); }
}