/* ══════════════════════════════════════════════════════════════════════════
   홈 첫 화면 (2026-08-19) — 사진 히어로 + 히어로 아래 얇은 띠
   본문 밴드(작동 방법·앱 화면·설명서·기기·목록)는 css/home-bands.css 가 담당한다.
   ⚠ 히어로 안쪽은 사진 위라 항상 다크다. 테마 토큰(var(--ro-text) 등)을 쓰면
     라이트 모드에서 글자가 사라진다 → 히어로 내부 색은 전부 흰색 계열로 고정한다.
   ⚠ site.css 의 전역 `section { padding: 80px 0 }` 을 상속하므로 padding 을 직접 리셋한다.
   ⚠ .runneron_container 를 겸하는 요소에는 padding-block 만 쓴다(단축은 좌우 패딩을 날린다).
   홈에서만 로드한다(Views/Home/Index.cshtml @section Styles).
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1. 사진 히어로 ═══════════════════════════════════════════════════════ */
.ro-hero-photo {
    position: relative;
    isolation: isolate;
    padding: 0;                       /* 전역 section padding 리셋 */
    /* 첫 화면을 정확히 꽉 채운다 — 아래에 다음 밴드가 살짝 비쳐 보이면 안 된다.
       ⚠ 헤더(.ro-nav)는 position:sticky 라 자리를 차지한다 → 그 높이만큼만 빼면 딱 맞는다.
         높이는 헤더가 쓰는 토큰(--ro-hdr-h)을 그대로 재사용한다(헤더가 바뀌어도 따라간다).
       ⚠ 위에 다른 띠(공지·로그인 유도)를 켜면 그만큼 밀리므로, 아래 스크립트가 실제 위치를 재서
         --ro-hero-top 을 채워 준다. 스크립트가 없어도 헤더 높이만큼은 맞는다.
       ⚠ 100vh 가 아니라 100svh — 모바일 브라우저 주소창이 접혔다 펴져도 흔들리지 않는다. */
    min-height: calc(100svh - var(--ro-hero-top, var(--ro-hdr-h, 64px)));
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: #0b1220;              /* 사진 로드 전 배경 */
    color: #fff;
}

.ro-hero-photo__media { position: absolute; inset: 0; z-index: 0; display: block; }
.ro-hero-photo__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 38%;         /* 인물 상반신이 중앙에 오도록 */
    display: block;
}

/* 스크림 — 왼쪽(카피 영역)과 위·아래를 눌러 글자 대비를 확보 */
.ro-hero-photo__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5,9,16,.60) 0%, rgba(5,9,16,.20) 26%, rgba(5,9,16,.12) 52%, rgba(5,9,16,.70) 88%, rgba(5,9,16,.92) 100%),
        linear-gradient(100deg, rgba(5,9,16,.88) 0%, rgba(5,9,16,.62) 34%, rgba(5,9,16,.14) 64%, rgba(5,9,16,0) 88%);
}

.ro-hero-photo__inner { position: relative; z-index: 2; width: 100%; padding-block: 40px 96px; }
.ro-hero-photo__copy  { max-width: 620px; }

.ro-hero-photo__badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 15px 7px 12px;
    border-radius: 999px;
    background: rgba(8,12,20,.52);
    border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #fff;
}
.ro-hero-photo__badge-sub { font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.78); }
.ro-hero-photo__dot {
    width: 8px; height: 8px; border-radius: 50%; background: #a8e02f; flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(168,224,47,.6); animation: roHeroDot 2s infinite;
}
@keyframes roHeroDot {
    0%   { box-shadow: 0 0 0 0 rgba(168,224,47,.6); }
    70%  { box-shadow: 0 0 0 9px rgba(168,224,47,0); }
    100% { box-shadow: 0 0 0 0 rgba(168,224,47,0); }
}

.ro-hero-photo__title {
    margin: 20px 0 0;
    font-size: clamp(34px, 5vw, 66px);
    font-weight: 900; line-height: 1.13; letter-spacing: -.03em;
    color: #fff; word-break: keep-all;
    text-shadow: 0 2px 28px rgba(0,0,0,.55);
}
.ro-hero-photo__accent { color: #a8e02f; }

.ro-hero-photo__lede {
    margin: 16px 0 0; max-width: 500px;
    font-size: clamp(15px, 1.35vw, 18px); line-height: 1.62;
    color: rgba(255,255,255,.88); word-break: keep-all;
    text-shadow: 0 1px 14px rgba(0,0,0,.5);
}

/* 히어로 CTA 버튼 — 지금은 showHeroCtaButtons 스위치로 꺼 뒀지만 켜면 바로 쓰이는 스타일 */
.ro-hero-photo__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ro-hero-photo__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 30px; border-radius: 999px; border: 1.5px solid transparent;
    font-family: inherit; font-size: 15px; font-weight: 800;
    text-decoration: none; cursor: pointer;
    transition: transform .14s ease, box-shadow .18s ease, background .18s ease;
}
.ro-hero-photo__btn--primary { background: #94c820; color: #0a1408; box-shadow: 0 14px 30px -12px rgba(148,200,32,.75); }
.ro-hero-photo__btn--primary:hover { background: #a8e02f; color: #0a1408; }
.ro-hero-photo__btn--ghost {
    background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.46);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ro-hero-photo__btn--ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.ro-hero-photo__btn:hover  { transform: translateY(-2px); }
.ro-hero-photo__btn:active { transform: translateY(0) scale(.985); }

/* 스토어 버튼 — 기본형(#111827 단색)은 사진 위에서 묻힌다 → 유리질로 띄운다 */
.ro-hero-photo__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ro-hero-photo__stores .runneron_store-btn {
    background: rgba(9,13,21,.58);
    border-color: rgba(255,255,255,.32);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ro-hero-photo__stores .runneron_store-btn:hover { background: rgba(9,13,21,.82); }

/* 스토어 평점 — 스토어 배지 바로 아래 한 줄. 사진 위라 색은 흰색 고정. */
.ro-hero-photo__rating {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.84);
    text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.ro-hero-photo__rating strong { font-weight: 800; color: #fff; }
.ro-hero-photo__stars { color: #fbbf24; font-size: 15px; letter-spacing: 1.5px; }

/* 스크롤 유도 — 가운데 아래 */
.ro-hero-photo__scroll {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3;
    display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: 0; cursor: pointer; padding: 6px 10px;
    font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
    color: rgba(255,255,255,.86); text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.ro-hero-photo__scroll:hover { color: #fff; }
.ro-hero-photo__scroll svg { animation: roHeroChevron 2.2s ease-in-out infinite; }
@keyframes roHeroChevron {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

/* ══ 2. 히어로 아래 얇은 띠 (다가오는 대회) ══════════════════════════════ */
.ro-trust { padding: 0; border-bottom: 1px solid var(--ro-border, #e6e9f0); background: transparent; }
.ro-trust__inner {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 14px clamp(18px, 3.4vw, 44px);
    padding-block: 14px;   /* ⚠ .runneron_container 겸용 — 단축 padding 금지 */
}
.ro-trust__stats { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; }
.ro-trust__stat  { display: flex; flex-direction: column; gap: 1px; }
/* ⚠ .runneron_stat-num 은 site.css 에서 시그니처 그라데이션 글자(-webkit-text-fill-color:transparent)다.
   색은 건드리지 않고(건드려도 fill-color 에 진다) 크기·여백만 띠에 맞춘다. */
.ro-trust__stat .runneron_stat-num {
    font-size: clamp(19px, 2vw, 27px); font-weight: 900; line-height: 1.2;
    letter-spacing: -.02em; margin-bottom: 0; font-variant-numeric: tabular-nums;
}
.ro-trust__stat-label { font-size: 12px; font-weight: 600; color: var(--ro-text-sub, #64748b); }
@media (min-width: 1180px) { .ro-trust__stats ~ .ro-trust__race { margin-left: auto; } }

/* 대회 pill 회전
   ⚠ 예전엔 나가는 pill 과 들어오는 pill 이 동시에 반투명이라 서로 다른 대회 이름이
     겹쳐 보였다(유령 글자). 나가는 쪽을 먼저 지우고, 들어오는 쪽은 그 뒤에 띄운다. */
.ro-hero-race-rot { display: grid; justify-items: start; }
.ro-hero-race-rot > .ro-hero-race-pill--rot {
    grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.ro-hero-race-rot > .ro-hero-race-pill--rot.is-on {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .3s ease .2s, transform .3s ease .2s, visibility 0s;
}
.ro-trust .ro-hero-race-pill { margin-top: 0; }

/* 위치 카드는 스크립트가 켜기 전까지 display:none 이다 → 컨테이너에 margin 을 주면
   아무것도 안 보이는데 빈 틈만 생긴다. 여백은 '보이는 자식'에게 준다. */
.ro-hero-geo > a { margin-top: 16px; }

/* ══ 3. 반응형 ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .ro-hero-photo { min-height: calc(100svh - var(--ro-hero-top, var(--ro-hdr-h, 64px))); }
    .ro-hero-photo__media img { object-position: 50% 30%; }
    .ro-hero-photo__inner { padding-block: 28px 84px; }
    .ro-hero-photo__title { font-size: clamp(30px, 8.4vw, 42px); }
    .ro-hero-photo__ctas { gap: 8px; }
    .ro-hero-photo__ctas .ro-hero-photo__btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
    .ro-hero-photo__stores .runneron_store-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
    /* '출시' 배지가 화면 밖으로 삐져나가지 않게 안쪽으로 */
    .ro-hero-photo__stores .runneron_store-badge { right: 4px; }
    .ro-hero-photo__rating { font-size: 12.5px; }
    .ro-trust__inner { gap: 12px 20px; padding-block: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .ro-hero-photo__dot,
    .ro-hero-photo__scroll svg { animation: none; }
    .ro-hero-photo__btn { transition: none; }
    .ro-hero-race-rot > .ro-hero-race-pill--rot { transition: none; }
}