/* ══════════════════════════════════════════════════════════════════════════
   홈 본문 밴드 (2026-08-19) — 가민 커넥트식 리듬
   한 밴드에 한 가지 이야기. 밝은 띠와 어두운 띠를 번갈아 쌓는다. 카드로 잘게 쪼개지 않는다.
   ⚠ 여기까지 두 번 갈아엎었다. 다시 넣지 말 것:
      · 좌우로 자동으로 흐르는 레일(마퀴) — 카드가 양끝에서 잘려 어수선하다
      · 카드마다 설명 두 줄 + 알록달록한 칩 — 화면이 두 배로 길어지고 산만하다
   ⚠ `__inner`/`ro-show` 등 .runneron_container 를 겸하는 요소는 padding-block 만 쓴다.
     padding 단축을 쓰면 컨테이너 좌우 패딩이 날아가 모바일에서 글자가 화면 밖으로 밀린다.
   홈에서만 로드한다(Views/Home/Index.cshtml @section Styles).
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 공통 밴드 ════════════════════════════════════════════════════════════ */
.ro-band { padding: 0; }                                  /* 전역 section padding 리셋 */
.ro-band__inner { padding-block: clamp(56px, 8vw, 112px); text-align: center; }
.ro-band__inner--tight { padding-block: clamp(44px, 6vw, 84px); }

.ro-band--plain { background: var(--ro-bg, #fff); }
.ro-band--soft  { background: var(--ro-bg-soft, #f5f7fa); }
/* 어두운 띠 — 라이트/다크 어디서도 같은 색이어야 해서 토큰을 쓰지 않는다 */
.ro-band--dark  { background: #4a5058; color: #fff; }

.ro-band__title {
    margin: 0; font-size: clamp(28px, 3.8vw, 46px); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.25; word-break: keep-all; color: inherit;
}
.ro-band--plain .ro-band__title,
.ro-band--soft  .ro-band__title { color: var(--ro-text, #1a2233); }
.ro-band__title--sm { font-size: clamp(24px, 2.9vw, 34px); }

.ro-band__lede {
    margin: 14px auto 0; max-width: 52ch;
    font-size: clamp(14.5px, 1.5vw, 17px); line-height: 1.7; word-break: keep-all;
    color: rgba(255,255,255,.76);
}
.ro-band--plain .ro-band__lede,
.ro-band--soft  .ro-band__lede { color: var(--ro-text-sub, #64748b); }

.ro-band__cta {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: clamp(26px, 3.4vw, 40px);
    padding: 13px 30px; border-radius: 999px;
    border: 1.5px solid var(--ro-border, #dfe4ec);
    font-size: 14.5px; font-weight: 800; text-decoration: none;
    color: var(--ro-text, #1a2233); background: transparent;
    transition: border-color .15s, color .15s, background .15s;
}
.ro-band__cta:hover { border-color: #94c820; color: #6f9c12; }
.ro-band__cta--solid { margin-top: 0; border-color: transparent; background: #94c820; color: #0a1408; }
.ro-band__cta--solid:hover { background: #a8e02f; color: #0a1408; }

/* (구) 작동 방법 3단계 아이콘 — 매뉴얼 허브 버튼으로 대체돼 제거(2026-08-19) */

/* ══ 2) 글 + 앱 화면 (좌우 반전) ══════════════════════════════════════════ */
.ro-show {
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    gap: clamp(28px, 5vw, 80px);
    padding-block: clamp(52px, 7vw, 100px);
}
.ro-show--rev .ro-show__txt { order: 2; }
.ro-show--rev .ro-show__img { order: 1; }
.ro-show__txt h2 {
    margin: 0; font-size: clamp(26px, 3.4vw, 42px); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.28; color: var(--ro-text, #1a2233); word-break: keep-all;
}
.ro-show__txt p {
    margin: 18px 0 0; max-width: 46ch;
    font-size: clamp(14.5px, 1.45vw, 16.5px); line-height: 1.8;
    color: var(--ro-text-sub, #64748b); word-break: keep-all;
}
.ro-show__link {
    display: inline-block; margin-top: 20px;
    font-size: 14.5px; font-weight: 800; text-decoration: none; color: var(--ro-primary-600, #4e8fff);
}
.ro-show__link:hover { text-decoration: underline; }
.ro-show__img { display: flex; justify-content: center; }
.ro-show__img img {
    width: 100%; max-width: 300px; height: auto; display: block;
    border-radius: 26px; box-shadow: 0 30px 60px -30px rgba(15,23,42,.5);
}

/* ══ 3) "러너온은 이렇게 사용하세요" — 아이콘 + 핵심 단어 한 줄 캐러셀 ═════
   ⚠ 항목이 12개다. 격자로 깔면 밴드가 화면 하나를 통째로 먹는다 → 한 줄 이 규칙.
   ⚠ "카드가 잘려 보인다" 는 지적이 있었다. 원인은 뷰포트 폭이 카드 크기와 무관해
      마지막 칸이 늘 반쯤 걸쳐 있던 것 → 뷰포트를 본문 컨테이너 폭에 맞추고,
      좌우 끝은 마스크로 부드럽게 지운다(잘린 게 아니라 "더 있다" 로 읽히게).
   ⚠ 화살표는 뷰포트 바깥에 둔다. 스크롤은 뷰포트가 하고 JS 는 scrollBy 만 부른다. */
/* 배경 사진 — 강변 러닝(intro). 밴드 색 위에 아주 옅게만 깔아 분위기만 준다.
   ⚠ 사진이 진해지면 버튼 글자가 죽는다. 어두운 그라데이션을 위에 한 겹 더 덮어
     가운데(글자 자리)를 눌러 준다. 대비는 여기서 지켜진다.
   ⚠ background-attachment: fixed 는 iOS 에서 튀므로 쓰지 않는다.
   ⚠ 사진은 장식이라 CSS 배경으로 둔다(스크린리더·SEO 대상이 아니다). */
.ro-hub { position: relative; isolation: isolate; overflow: hidden; }
.ro-hub::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: image-set(
        url("/img/hero/intro-1200.webp") 1x,
        url("/img/hero/intro-1755.webp") 1.6x);
    background-image: url("/img/hero/intro-1200.webp");   /* image-set 미지원 폴백 */
    background-size: cover; background-position: center 42%;
    opacity: .42;   /* 은은하게 — 사람 실루엣이 알아볼 정도까지만 */
}
.ro-hub::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(115% 78% at 50% 46%, rgba(20,25,32,.74) 0%, rgba(20,25,32,.5) 46%, rgba(20,25,32,.3) 100%),
        linear-gradient(180deg, rgba(20,25,32,.7) 0%, rgba(20,25,32,.26) 28%, rgba(20,25,32,.26) 72%, rgba(20,25,32,.76) 100%);
}
.ro-hub > * { position: relative; z-index: 1; }
@media (max-width: 760px) {
    .ro-hub::before { background-image: url("/img/hero/intro-760.webp"); opacity: .32; }
}

.ro-hub .ro-band__inner--tight { padding-block: clamp(40px, 5vw, 64px) 0; }

.ro-hub__carousel {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.4vw, 18px);
    margin-top: clamp(16px, 2.2vw, 26px);   /* 트랙 자체 padding 만큼 뺐다 */
    /* 컨테이너(최대 1120px) + 화살표 자리만큼만 더 쓴다 */
    max-width: 1240px; margin-inline: auto;
    padding-inline: clamp(10px, 2.4vw, 20px);
}
.ro-hub__viewport {
    flex: 0 1 1120px; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* 양 끝을 부드럽게 지워 "잘렸다" 가 아니라 "이어진다" 로 보이게 */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.ro-hub__viewport::-webkit-scrollbar { display: none; }
.ro-hub__viewport:focus-visible { outline: 2px solid #a8e02f; outline-offset: 4px; border-radius: 18px; }
/* ⚠ 카드가 hover 에서 -4px 떠오른다. 뷰포트가 overflow-y:hidden 이라 여백이 없으면
   떠오른 윗부분이 잘린다 → 트랙 위아래에 미리 자리를 만들어 둔다. */
.ro-hub__track {
    display: flex; gap: 12px; list-style: none; margin: 0;
    padding: 10px 4px 14px; width: max-content;
}

/* ⚠ "눌러도 되는 건지 모르겠다" 는 지적 → 버튼처럼 보이게 손봤다.
   · 반투명 유리(배경 사진 위에서도 글자가 뜬다) + 또렷한 테두리
   · 카드를 키우고(누르기 쉽게), 아래에 화살표를 늘 보이게
   · 손을 올리면 초록 테두리 + 초록 그림자로 "여기 눌러" 를 분명히 */
.ro-hub__item {
    scroll-snap-align: start;
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px;
    width: 194px; min-height: 172px; padding: 20px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.26);
    background: rgba(14,18,24,.55);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: #fff; text-decoration: none; text-align: center;
    box-shadow: 0 10px 24px -18px rgba(0,0,0,.9);
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .18s ease;
}
/* ⚠ 여기 '›' 화살표를 넣었더니 "이건 뭐지?" 라는 반응이 왔다.
   기호 대신 한 줄 설명을 둔다 — 뭘 하는 곳인지 바로 읽힌다. */
.ro-hub__hint {
    font-size: 12px; line-height: 1.4; font-weight: 500;
    color: rgba(255,255,255,.62); word-break: keep-all;
    transition: color .16s ease;
}
.ro-hub__item:hover {
    transform: translateY(-4px); color: #fff;
    background: rgba(20,26,34,.72); border-color: rgba(168,224,47,.75);
    box-shadow: 0 18px 34px -20px rgba(168,224,47,.55);
}
.ro-hub__item:hover .ro-hub__hint { color: rgba(255,255,255,.86); }
.ro-hub__item:active { transform: translateY(-1px) scale(.985); }
.ro-hub__item:focus-visible { outline: 3px solid #a8e02f; outline-offset: 3px; }
.ro-hub__ico {
    width: 54px; height: 54px; border-radius: 17px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(168,224,47,.18); color: #a8e02f;
    transition: background .16s ease;
}
.ro-hub__item:hover .ro-hub__ico { background: rgba(168,224,47,.3); }
.ro-hub__ico svg { width: 27px; height: 27px; }
.ro-hub__label { font-size: 14.5px; font-weight: 700; line-height: 1.35; word-break: keep-all; }

.ro-hub__nav {
    flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.34);
    background: rgba(14,18,24,.55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #fff; cursor: pointer;
    transition: background .15s, border-color .15s, opacity .15s;
}
.ro-hub__nav:hover { background: rgba(255,255,255,.16); border-color: #a8e02f; color: #a8e02f; }
.ro-hub__nav[disabled] { opacity: .25; cursor: default; }
.ro-hub__nav[disabled]:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color: #fff; }

.ro-hub__foot { text-align: center; padding-block: 0 clamp(40px, 5vw, 68px); }
.ro-band__cta--onDark { border-color: rgba(255,255,255,.42); color: #fff; }
.ro-band__cta--onDark:hover { border-color: #a8e02f; color: #a8e02f; background: rgba(168,224,47,.08); }

@media (max-width: 640px) {
    .ro-hub__carousel { gap: 6px; padding-inline: 6px; }
    .ro-hub__nav { width: 36px; height: 36px; }
    .ro-hub__item { width: 152px; min-height: 156px; gap: 8px; padding: 16px 10px; }
    .ro-hub__hint { font-size: 11.5px; }
    .ro-hub__ico { width: 46px; height: 46px; border-radius: 15px; }
    .ro-hub__ico svg { width: 24px; height: 24px; }
    .ro-hub__label { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .ro-hub__viewport { scroll-behavior: auto; }
    .ro-hub__item, .ro-hub__nav { transition: none; }
}

/* ══ 4) 지원 기기 가로 띠 ═════════════════════════════════════════════════ */
.ro-devices { padding-block: clamp(44px, 6vw, 84px); }
.ro-devices__viewport {
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* ⚠ scroll-snap 을 쓰면 첫 카드가 패딩 박스로 스냅되며 왼쪽 여백을 먹는다 → 스냅 없이 자유 스크롤 */
    padding-inline: clamp(16px, 4vw, 20px);
}
.ro-devices__viewport::-webkit-scrollbar { display: none; }
/* ⚠ 카드가 오른쪽으로 쏠려 보였다. 원인은 컨테이너 기준 큰 좌우 패딩을 줘서
   목록이 화면 왼쪽 안쪽에서 시작하고 오른쪽으로 넘쳐 흘렀던 것.
   `margin-inline:auto` 는 남는 자리가 있을 때만 가운데로 모으고, 넘칠 때는 0 이 되어
   왼쪽부터 정상적으로 스크롤된다 — 두 경우 모두 자연스럽다. */
.ro-devices__list {
    display: flex; gap: 12px; list-style: none; margin: 0; padding: 0;
    width: max-content; margin-inline: auto;
}
.ro-device {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    width: 176px; min-height: 208px; padding: 14px 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--ro-border, #e6e9f0);
    background: var(--ro-surface, #fff);
    color: var(--ro-text, #1a2233); text-decoration: none;
    transition: transform .16s ease, border-color .16s ease;
}
.ro-device:hover { transform: translateY(-3px); border-color: #94c820; color: var(--ro-text, #1a2233); }
/* 기기 그림 — 우리가 직접 그린 실루엣이 기본. wwwroot/img/devices/{slug}.* 가 있으면 사진으로 대체된다.
   ⚠ 사진을 넣을 때는 배경이 투명하거나 흰색인 정사각 이미지를 권한다(칸 크기가 고정이다). */
.ro-device__art {
    width: 100%; height: 84px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(148,200,32,.10); color: #6f9c12;
}
.ro-device__art svg { width: 46px; height: 46px; }
.ro-device__art img { max-width: 100%; max-height: 76px; object-fit: contain; mix-blend-mode: multiply; }
.ro-device b { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.ro-device__tag {
    margin-top: auto;   /* 이름이 두 줄이어도 뱃지는 항상 바닥 */
    font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
    background: rgba(148,200,32,.16); color: #5d8a0d;
}
.ro-device__tag.is-app  { background: rgba(78,143,255,.14); color: #2f6fe0; }
.ro-device__tag.is-prep { background: rgba(100,116,139,.16); color: #64748b; }
.ro-device__tag.is-self { background: rgba(245,158,11,.16); color: #b45309; }

.ro-devices__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding-block: clamp(24px, 3vw, 36px) 0;
}
.ro-devices__foot h2 {
    margin: 0; font-size: clamp(22px, 2.7vw, 32px); font-weight: 800;
    letter-spacing: -.025em; color: var(--ro-text, #1a2233); word-break: keep-all;
}
.ro-devices__legal {
    margin: clamp(18px, 2.4vw, 28px) auto 0;
    font-size: 12px; line-height: 1.65; color: var(--ro-text-sub, #94a3b8);
    opacity: .85; word-break: keep-all;
}
.ro-devices__foot p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ro-text-sub, #64748b); word-break: keep-all; }

/* ══ 5) 기능 전체 목록 — 조용한 글자 링크. 장식 금지. ════════════════════ */
.ro-links { padding-block: clamp(40px, 5vw, 72px); }
.ro-links__h {
    margin: 0 0 clamp(20px, 2.6vw, 30px);
    font-size: clamp(18px, 2vw, 22px); font-weight: 800; letter-spacing: -.02em;
    color: var(--ro-text, #1a2233);
}
.ro-links__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.ro-links__col h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--ro-text-sub, #64748b); }
.ro-links__col ul { list-style: none; margin: 0; padding: 0; }
.ro-links__col li + li { margin-top: 7px; }
.ro-links__col a { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ro-text, #1a2233); }
.ro-links__col a:hover { color: #6f9c12; text-decoration: underline; }

/* ══ 다크 — 표면·테두리만 손본다(밴드 배경은 토큰이 알아서 바뀐다) ═══════ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ro-mbtn,
    :root:not([data-theme="light"]) .ro-device { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.10); }
    :root:not([data-theme="light"]) .ro-mbtn svg { color: #a8e02f; }
    :root:not([data-theme="light"]) .ro-device__art { background: rgba(168,224,47,.12); color: #a8e02f; }
    :root:not([data-theme="light"]) .ro-device__art img { mix-blend-mode: normal; }
    :root:not([data-theme="light"]) .ro-mbtn:hover,
    :root:not([data-theme="light"]) .ro-device:hover { border-color: #a8e02f; color: #a8e02f; }
    :root:not([data-theme="light"]) .ro-band__cta:hover,
    :root:not([data-theme="light"]) .ro-links__col a:hover { border-color: #a8e02f; color: #a8e02f; }
    :root:not([data-theme="light"]) .ro-band--dark { background: #262b32; }
    :root:not([data-theme="light"]) .ro-device__tag { background: rgba(168,224,47,.18); color: #a8e02f; }
    :root:not([data-theme="light"]) .ro-device__tag.is-app  { background: rgba(78,143,255,.22); color: #8ab4ff; }
    :root:not([data-theme="light"]) .ro-device__tag.is-prep { background: rgba(148,163,184,.20); color: #cbd5e1; }
    :root:not([data-theme="light"]) .ro-device__tag.is-self { background: rgba(245,158,11,.22); color: #fbbf24; }
}
:root[data-theme="dark"] .ro-mbtn,
:root[data-theme="dark"] .ro-device { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.10); }
:root[data-theme="dark"] .ro-mbtn svg { color: #a8e02f; }
:root[data-theme="dark"] .ro-device__art { background: rgba(168,224,47,.12); color: #a8e02f; }
:root[data-theme="dark"] .ro-device__art img { mix-blend-mode: normal; }
:root[data-theme="dark"] .ro-mbtn:hover,
:root[data-theme="dark"] .ro-device:hover { border-color: #a8e02f; color: #a8e02f; }
:root[data-theme="dark"] .ro-band__cta:hover,
:root[data-theme="dark"] .ro-links__col a:hover { border-color: #a8e02f; color: #a8e02f; }
:root[data-theme="dark"] .ro-band--dark { background: #262b32; }
:root[data-theme="dark"] .ro-device__tag { background: rgba(168,224,47,.18); color: #a8e02f; }
:root[data-theme="dark"] .ro-device__tag.is-app  { background: rgba(78,143,255,.22); color: #8ab4ff; }
:root[data-theme="dark"] .ro-device__tag.is-prep { background: rgba(148,163,184,.20); color: #cbd5e1; }
:root[data-theme="dark"] .ro-device__tag.is-self { background: rgba(245,158,11,.22); color: #fbbf24; }

/* ══ 반응형 ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .ro-show { grid-template-columns: 1fr; text-align: center; }
    .ro-show--rev .ro-show__txt,
    .ro-show--rev .ro-show__img { order: initial; }
    .ro-show__txt p { margin-inline: auto; }
    .ro-links__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ro-steps { grid-template-columns: 1fr; gap: 30px; }
    .ro-show__img img { max-width: 232px; }
    .ro-links__cols { grid-template-columns: 1fr; }
    .ro-devices__foot .ro-band__cta--solid { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ro-mbtn, .ro-device, .ro-band__cta { transition: none; }
}

/* ══ 화면에서만 감추기 ════════════════════════════════════════════════════
   "지우는 게 아니라 화면에서만 안 보이게" — 마크업은 그대로 렌더돼 HTML 소스에 남고
   검색엔진은 그 링크·텍스트를 읽는다. 켜려면 이 클래스만 떼면 된다.
   ⚠ 잘라내기(clip) 방식은 쓰지 않는다 — 보이지 않는데 Tab 으로 들어가지는 링크가 생겨
     키보드 사용자가 화면 밖을 헤매게 된다. display:none 이면 탭 순서에서도 함께 빠진다.
   ⚠ FAQ 의 검색 노출은 상단 FAQPage 구조화 데이터가 담당하므로 이 처리로 잃는 게 없다. */
.ro-seo-only { display: none !important; }

/* ══ 스크롤 등장 효과 ═════════════════════════════════════════════════════
   화면에 들어올 때 살짝 올라오며 나타난다. JS 가 .is-in 을 붙인다(홈 Scripts).
   ⚠ JS 가 실패하거나 꺼져 있어도 내용은 보여야 한다 → no-js 폴백을 둔다. */
.ro-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.ro-reveal.is-in { opacity: 1; transform: none; }
html.no-reveal .ro-reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
    .ro-reveal { opacity: 1; transform: none; transition: none; }
}

/* ══ 섹션 단위 스크롤 ═════════════════════════════════════════════════════
   한 밴드씩 자리를 잡으며 넘어가는 느낌을 준다.
   ⚠ `mandatory` 는 쓰지 않는다 — 밴드보다 화면이 짧으면 사용자가 중간을 못 보고 갇힌다.
     `proximity` 는 가까울 때만 살짝 붙여 주므로 자유 스크롤을 방해하지 않는다.
   ⚠ 이 규칙은 홈에서만 로드되는 파일에 있다. :has() 로 히어로가 있는 문서에만 건다.
   ⚠ 헤더가 상단에 떠 있으므로 scroll-padding-top 으로 그만큼 비켜 준다(제목이 헤더에 가리지 않게). */
html:has(.ro-hero-photo) {
    scroll-snap-type: y proximity;
    scroll-padding-top: 72px;
}
.ro-hero-photo,
.ro-band,
.ro-trust { scroll-snap-align: start; }

/* ⚠ 모바일·PC 가 같은 방식으로 동작해야 한다 → 화면 높이로 끄는 기준을 최소한으로만 둔다.
   560px 이하(가로로 눕힌 폰 등)에서는 한 밴드도 화면에 안 들어와 스냅이 방해만 된다. */
@media (max-height: 560px) {
    html:has(.ro-hero-photo) { scroll-snap-type: none; }
}
@media (prefers-reduced-motion: reduce) {
    html:has(.ro-hero-photo) { scroll-snap-type: none; }
}