/*
 * 메인(index.php) 전용 스타일 — design.css 뒤에 싣는다.
 * 원본: web/design/main.html 의 <style>. 시안을 고치면 이 파일도 같이 옮길 것.
 */
    /* ── 메인 전용 ─────────────────────────────────────────────────── */
    /*
     * ── 히어로: 한강 야간 크루 사진 (assets/img/hero-crew, 1916×821) ──────
     * 사진은 오른쪽 절반에 사람, 왼쪽은 어두운 강이다. 사진 박스(화면 폭, 최대 1920px)를 화면 가운데에 맞추면
     * 사람이 시작하는 사진 50% 선이 늘 화면 중앙에 와서 글자 바로 옆에 크루가 선다.
     * 오른쪽에 붙이면 1920px 초과 화면에서 글자와 사람 사이가 벌어진다 (2560px 에서 약 360px).
     * 1920 초과 화면은 히어로를 가득 채운다(cover) — 상자로 두면 양옆이 비어 사진이 떠 보인다.
     * 가운데 기준 cover 라 사람 시작선(사진 50%)은 그대로 화면 중앙이다.
     * 왼쪽 도시 불빛은 휘도가 최대 0.97 → 흰 제목이 4.5:1 을 넘으려면 0.86 이상 덮어야 한다.
     * 글자가 놓이는 사진 폭 0~44% 구간을 0.92 이상으로 덮고, 62% 부터는 사진을 그대로 보인다.
     */
    /* isolation: 내부 z-index(사진·페이드·글자)를 히어로 안에 가둔다 — 없으면 바닥 페이드가 겹쳐 올린 랭킹 띠를 덮는다 */
    .hero { position: relative; isolation: isolate; padding: calc(var(--header-h) + 88px) 0 168px; overflow: hidden; }
    .hero-media {
      position: absolute; left: 50%; top: 50%; translate: -50% -50%;
      width: min(100%, 1920px); aspect-ratio: 1916 / 821;
      background: var(--bg) url("img/hero-crew.jpg") center / cover no-repeat;
      background-image: image-set(url("img/hero-crew.webp") type("image/webp"), url("img/hero-crew.jpg") type("image/jpeg"));
      pointer-events: none;
    }
    .hero-media::after {
      content: ''; position: absolute; inset: -1px;
      background:
        linear-gradient(90deg, var(--bg) 0%, rgba(24,24,26,.92) 44%, rgba(24,24,26,0) 62%),
        linear-gradient(180deg, var(--bg) 0%, rgba(24,24,26,0) 16%, rgba(24,24,26,0) 72%, var(--bg) 100%);
    }
    @media (min-width: 1921px) {
      /*
       * 와이드: 사진이 히어로 전체를 덮는다. 폭 기준으로 커지며 위아래가 잘리므로
       * 머리(사진 높이 13%~)가 헤더 밑에 걸리지 않게 위쪽 5% 지점에 맞추고, 위 페이드는 8% 로 줄인다.
       * 아래 페이드는 .hero::after 가 맡는다.
       */
      .hero-media { inset: 0; width: auto; aspect-ratio: auto; translate: none; background-position: 50% 5%; }
      .hero-media::after {
        background:
          linear-gradient(90deg, var(--bg) 0%, rgba(24,24,26,.92) 46%, rgba(24,24,26,0) 62%),
          linear-gradient(180deg, var(--bg) 0%, rgba(24,24,26,0) 8%);
      }
    }
    /*
     * 넓은 화면(사진 높이 821 > 히어로 높이)에서는 사진 아랫부분이 히어로 경계에서 overflow 로 잘려
     * 다리 위에 가로선이 생긴다. 사진 박스 기준 페이드로는 못 덮으므로 히어로 바닥에 페이드를 한 겹 더 깐다.
     * 높이 160px — 통계 줄(히어로 바닥에서 168px 위)에는 닿지 않는다.
     */
    .hero::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 1;
      background: linear-gradient(180deg, rgba(24,24,26,0), var(--bg));
      pointer-events: none;
    }
    .hero .container { position: relative; z-index: 2; }
    .hero h1 { font-size: 56px; line-height: 1.18; font-weight: 800; letter-spacing: -0.035em; }
    /* 1025~1280px 에서 본문이 사진 44% 선을 넘어 사람 위로 가지 않게 폭을 화면에 묶는다 */
    .hero-lead { font-size: 18px; color: var(--text-2); margin: 20px 0 32px; max-width: min(520px, 40vw); }
    .hero-stats { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 40px; }
    .hero-stats strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
    .hero-stats small { font-size: 13px; color: var(--text-2); }

    /* ── 이번 주 크루 랭킹: 히어로 사진 아래쪽에 겹쳐 올린 띠 ──────────── */
    .rank-strip { position: relative; z-index: 1; margin-top: -120px; }
    .rank-card { padding: 24px; border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
    .rank-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
    .rank-card-head h2 { font-size: 18px; font-weight: 800; }
    .rank-note { margin-left: auto; font-size: 13px; }
    @media (min-width: 1025px) {
      /* 데스크톱: 5위까지 가로 5칸 — 순위 / 로고·이름 / 거리·변동 */
      .rank-strip .rank-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
      .rank-strip .rank-row {
        grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "no no" "logo name" "score score";
        gap: 12px; padding: 16px; background: var(--bg-2);
      }
      .rank-strip .rank-row:hover { background: var(--surface-2); }
      .rank-strip .rank-no { grid-area: no; text-align: left; font-size: 22px; line-height: 1; }
      .rank-strip .crew-logo { grid-area: logo; }
      .rank-strip .rank-name { grid-area: name; min-width: 0; }
      .rank-strip .rank-name strong, .rank-strip .rank-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .rank-strip .rank-score {
        grid-area: score; display: flex; align-items: baseline; justify-content: space-between;
        padding-top: 12px; border-top: 1px solid var(--border);
      }
      .rank-strip .rank-score strong { font-size: 17px; }
    }
    @media (min-width: 641px) and (max-width: 1024px) {
      /* 태블릿: 1~3위 왼쪽, 4~5위 오른쪽 (세로 순서로 읽힌다) */
      .rank-strip .rank-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 24px; }
    }
    @media (max-width: 640px) {
      .rank-note { order: 3; width: 100%; margin-left: 0; }
      .rank-card-head .more { margin-left: auto; }
    }
    /* 크루가 아직 적어도 위젯이 비어 보이지 않게 — 초대 행이 마지막 자리를 채운다 */
    .rank-invite {
      display: flex; align-items: center; gap: 12px; margin-top: 8px;
      padding: 12px; border-radius: var(--radius-md); background: var(--tint);
    }
    .rank-invite i { font-size: 22px; color: var(--primary); }
    .rank-invite p { flex: 1; font-size: 14px; font-weight: 600; }
    .rank-invite a { font-size: 14px; font-weight: 700; color: var(--primary); white-space: nowrap; }

    .tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .tile { display: flex; flex-direction: column; gap: 10px; min-height: 176px; }
    .tile-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--primary); font-size: 22px; }
    .tile h3 { font-size: 17px; font-weight: 700; }
    .tile p { font-size: 14px; color: var(--text-2); line-height: 1.5; }
    .tile .go { margin-top: auto; color: var(--text-3); font-size: 20px; }
    a.tile:hover .go { color: var(--primary); }

    .course-map {
      position: relative; height: 150px; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px;
      background-color: var(--bg-2);
      background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .course-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .course-map .badge { position: absolute; left: 12px; top: 12px; }
    .course-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
    .course-card .tags { margin-top: 12px; }

    /*
     * ── 코스 경로 모션: 카드 묶음이 화면에 들어오면 출발점 → 경로 → 도착점 순으로 그려진다 (한 번만)
     * 카드마다 0.15s 씩 늦게 시작. 키프레임 vm-draw · vm-pop 은 ⑥ 기록 검증 모션과 같이 쓴다.
     * JS 가 없거나 '동작 줄이기' 설정이면 .motion-ready 가 붙지 않아 경로가 처음부터 다 그려져 있다.
     */
    .course-map .cm-start, .course-map .cm-end { transform-box: fill-box; transform-origin: center; }
    [data-draw-on-view] > :nth-child(2) { --d: .15s; }
    [data-draw-on-view] > :nth-child(3) { --d: .3s; }
    [data-draw-on-view].motion-ready .cm-route { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
    [data-draw-on-view].motion-ready .cm-start,
    [data-draw-on-view].motion-ready .cm-end { transform: scale(0); opacity: 0; }
    [data-draw-on-view].motion-ready.is-play .cm-start { animation: vm-pop .35s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s) forwards; }
    [data-draw-on-view].motion-ready.is-play .cm-route { animation: vm-draw 1.4s cubic-bezier(.4, 0, .2, 1) calc(var(--d, 0s) + .15s) forwards; }
    [data-draw-on-view].motion-ready.is-play .cm-end { animation: vm-pop .35s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0s) + 1.5s) forwards; }

    .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .calc-form, .calc-result { padding: 28px; border-radius: var(--radius-lg); }
    .calc-form h3, .calc-result h3 { font-size: 16px; font-weight: 700; color: var(--text-2); margin-bottom: 16px; }
    .calc-form .field + .field { margin-top: 20px; }
    .time-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .time-inputs label { position: relative; }
    .time-inputs .input { padding-right: 36px; text-align: right; }
    .time-inputs em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 14px; color: var(--text-3); }
    .calc-big { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
    .calc-big small { display: block; font-size: 13px; color: var(--text-2); }
    .calc-big strong { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
    .calc-big .unit { font-size: 16px; color: var(--text-2); font-weight: 600; margin-left: 2px; }
    .pred { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; }
    .pred div { background: var(--bg-2); border-radius: var(--radius-md); padding: 12px; }
    .pred small { display: block; font-size: 12px; color: var(--text-2); }
    .pred strong { font-size: 17px; font-weight: 700; }
    .calc-result .btn { margin-top: 20px; }

    /*
     * 칸 간격은 계산기(.calc-grid)와 같은 16px — 간격이 다르면 오른쪽 카드 폭이 달라져(592 vs 576) 위아래 카드 왼쪽 선이 어긋난다.
     * 글자와 카드 사이 여백(48px)은 글자 칸 안쪽 여백으로 준다.
     */
    .trust-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 48px; align-items: center; }
    .trust-grid > div:first-child { padding-right: 32px; }
    .trust-grid h2 { font-size: 36px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }
    .trust-grid > div > p { color: var(--text-2); margin: 16px 0 24px; font-size: 17px; }
    .check-list { display: grid; gap: 14px; }
    .check-list li { display: flex; gap: 12px; }
    .check-list i { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-size: 16px; }
    .check-list strong { display: block; font-size: 16px; }
    .check-list span { font-size: 14px; color: var(--text-2); }
    .verify { padding: 24px; border-radius: var(--radius-lg); display: grid; gap: 8px; }
    .verify-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .verify-head strong { font-size: 16px; }
    .verify-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px; background: var(--bg-2); border-radius: var(--radius-md); }
    .verify-row > i { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); font-size: 20px; }
    .verify-row strong { display: block; font-size: 15px; }
    .verify-row small { font-size: 13px; color: var(--text-2); }

    /*
     * ── 기록 검증 모션 ─────────────────────────────────────────────────
     * 경로가 그려지고 → 이동수단 구간(빨강)이 드러나고 → 그 구간이 잘려 나가며 거리가 18.6 → 6.2km 로 보정된다.
     * 둘째 행("이동수단 구간 12.4km 제외")과 같은 기록이다. 화면에 들어올 때 한 번만 재생 (design.js [data-verify-motion]).
     * 아래 기본 규칙이 '최종 상태'다 — JS 가 없거나 '동작 줄이기' 설정이면 .motion-ready 가 붙지 않아 처음부터 이렇게 보인다.
     * 타임라인: 경로A 0~1.1s · 이동구간 1.1~1.9s · 경로C 1.9~2.9s · 도착점 2.9s · 보정(is-corrected) 3.3s
     */
    .verify-map {
      margin-bottom: 8px; padding: 12px 12px 4px; border-radius: var(--radius-md);
      background-color: var(--bg-2);
      background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .vm-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
    .vm-dist { display: grid; line-height: 1.25; }
    .vm-dist small { font-size: 12px; color: var(--text-2); }
    .vm-dist strong { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .vm-final { color: var(--primary); transition: color .4s; }
    .vm-raw { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); transition: opacity .4s; }
    .vm-tags { display: grid; justify-items: end; }
    .vm-tag {
      grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
      border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; transition: opacity .4s;
    }
    .vm-tag-ride { background: var(--danger-tint); color: var(--danger-text); opacity: 0; }
    .vm-tag-off { background: var(--surface-2); color: var(--text-2); }
    .verify-map svg { display: block; width: 100%; height: auto; }
    .vm-line { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
    .vm-run { stroke: var(--primary); }
    .vm-ride { stroke: var(--down); opacity: 0; transition: opacity .4s; }
    .vm-off { stroke: var(--text-3); stroke-width: 3; stroke-dasharray: 2 9; opacity: .9; transition: opacity .4s; }
    .vm-finish { transform-box: fill-box; transform-origin: center; }

    /* 재생 전 상태 */
    /* 간격을 경로 길이(1)보다 길게 — '1 1' 이면 다음 대시가 경로 끝에서 길이 0 으로 시작해 둥근 끝(round cap)이 점으로 찍힌다 */
    .verify.motion-ready .vm-draw { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
    .verify.motion-ready .vm-ride { opacity: 1; }
    .verify.motion-ready .vm-off,
    .verify.motion-ready .vm-tag-off,
    .verify.motion-ready .vm-raw { opacity: 0; }
    .verify.motion-ready .vm-final { color: var(--text); }
    /* scale(0) 만으로는 테두리(stroke)가 점으로 남아 보여 투명도도 함께 숨긴다 */
    .verify.motion-ready .vm-finish { transform: scale(0); opacity: 0; }
    .verify.motion-ready .verify-row { opacity: 0; translate: 0 8px; transition: opacity .5s, translate .5s; }

    /* 재생 */
    .verify.motion-ready.is-play .verify-row { opacity: 1; translate: 0 0; }
    .verify.motion-ready.is-play .verify-row:nth-child(4) { transition-delay: .12s; }
    .verify.motion-ready.is-play .verify-row:nth-child(5) { transition-delay: .24s; }
    .verify.motion-ready.is-play .vm-a { animation: vm-draw 1.1s cubic-bezier(.4, 0, .2, 1) forwards; }
    .verify.motion-ready.is-play .vm-b { animation: vm-draw .8s linear 1.1s forwards; }
    .verify.motion-ready.is-play .vm-c { animation: vm-draw 1s cubic-bezier(.4, 0, .2, 1) 1.9s forwards; }
    .verify.motion-ready.is-play .vm-tag-ride { opacity: 1; transition-delay: 1.2s; }
    .verify.motion-ready.is-play .vm-finish { animation: vm-pop .35s cubic-bezier(.3, 1.6, .5, 1) 2.9s forwards; }

    /* 보정 — is-play 와 함께 붙으므로 한 단계 더 구체적으로 쓴다 */
    .verify.motion-ready.is-play.is-corrected .vm-ride,
    .verify.motion-ready.is-play.is-corrected .vm-tag-ride { opacity: 0; transition-delay: 0s; }
    .verify.motion-ready.is-play.is-corrected .vm-off { opacity: .9; }
    .verify.motion-ready.is-play.is-corrected .vm-tag-off,
    .verify.motion-ready.is-play.is-corrected .vm-raw { opacity: 1; }
    .verify.motion-ready.is-play.is-corrected .vm-final { color: var(--primary); }
    .verify.motion-ready.is-play.is-corrected .vm-link { animation: vm-flash 1.4s ease .2s; }
    .verify.motion-ready.is-play.is-corrected .vm-link .badge { animation: vm-bump .45s ease .3s; }

    @keyframes vm-draw { to { stroke-dashoffset: 0; } }
    @keyframes vm-pop { to { transform: scale(1); opacity: 1; } }
    @keyframes vm-flash { 0%, 100% { background: var(--bg-2); } 30% { background: var(--tint); } }
    @keyframes vm-bump { 0%, 100% { scale: 1; } 40% { scale: 1.15; } }

    .promo { padding: 32px; border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 16px; }
    .promo h3 { font-size: 26px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; }
    .promo > p { color: var(--text-2); }
    .promo ul { display: grid; gap: 10px; }
    .promo li { display: flex; gap: 8px; font-size: 15px; }
    .promo li i { color: var(--primary); font-size: 18px; }
    .promo-visual { background: var(--bg-2); border-radius: var(--radius); padding: 20px; }
    .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .kpis div { background: var(--surface); border-radius: var(--radius-md); padding: 12px; }
    .kpis small { display: block; font-size: 12px; color: var(--text-2); }
    .kpis strong { font-size: 20px; font-weight: 800; }
    .bars { display: flex; align-items: flex-end; gap: 12px; height: 120px; }
    .bars div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
    .bars span { width: 100%; border-radius: 8px 8px 4px 4px; background: var(--border-heavy); }
    .bars div:last-child span { background: var(--primary); }
    .bars small { font-size: 12px; color: var(--text-2); }
    .bars em { font-style: normal; font-size: 13px; font-weight: 700; }
    .promo .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

    .cta-band {
      position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); padding: 56px;
      display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
      background: var(--surface);
    }
    /*
     * ── CTA 배경 모션 ──────────────────────────────────────────────────
     * 오른쪽 위 라임 빛이 천천히 떠다닌다.
     * 화면에 보이는 동안만 돈다 (design.js [data-loop-on-view] → .is-live). '동작 줄이기'면 정지된 장식으로 남는다.
     */
    .cta-band::before {
      content: ''; position: absolute; z-index: -1; width: 720px; height: 720px; right: -240px; top: -266px;
      background: radial-gradient(closest-side, rgba(198,255,52,.18), transparent);
      pointer-events: none;
    }
    .cta-band.is-live::before { animation: cta-glow 12s ease-in-out infinite alternate; }
    @keyframes cta-glow { from { translate: 0 0; } to { translate: -120px 60px; } }
    @media (max-width: 1024px) {
      /*
       * 한 줄로 쌓이면 글자가 위, 폰이 아래 300px — 빛 번짐도 아래 폰 자리로 내린다.
       * 빛이 오른쪽 위에 있으면 떠다니다 본문 뒤로 들어와 대비가 4.5:1 아래로 떨어진다 (768px 에서 4.02:1).
       */
      .cta-band::before { top: auto; bottom: -420px; }
    }
    @media (max-width: 768px) {
      /* 폰이 숨는 폭에서는 띠 전체가 글자 칸이라 빛을 움직이지 않는 구석 장식으로 둔다 */
      .cta-band.is-live::before { animation: none; }
    }
    .cta-band h2 { font-size: 40px; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; }
    .cta-band p { color: var(--text-2); margin: 16px 0 28px; font-size: 17px; }
    /* 두 폰을 나란히 두고 높이만 엇갈린다 (겹치면 홈 화면 카드가 가려진다) */
    /* 자식이 모두 absolute 라 auto 마진만 주면 폭이 0 으로 줄어든다 → width 100% 필수 */
    .phones { position: relative; width: 100%; height: 360px; max-width: 440px; margin-left: auto; }
    .phones .phone { position: absolute; width: 210px; }
    .phones .phone:first-child { left: 0; top: 24px; }
    .phones .phone:last-child { right: 0; top: -16px; }

    /* 그리드 칸이 내용의 최소 폭에 끌려 화면 밖으로 밀리지 않게 한다 */
    .calc-grid > *, .trust-grid > *, .cta-band > * { min-width: 0; }

    @media (max-width: 480px) {
      /* 거리 탭 5개가 한 줄에 들어오도록 칸을 균등하게 나눈다 (390px 에서 '직접 입력' 이 잘렸다) */
      .calc-form .seg { display: flex; width: 100%; }
      .calc-form .seg button { flex: 1; min-width: 0; padding: 0 4px; font-size: 13px; }
    }

    @media (max-width: 1024px) {
      .calc-grid, .trust-grid, .cta-band { grid-template-columns: 1fr; }
      .trust-grid > div:first-child { padding-right: 0; }
      /*
       * 태블릿(769~1024)도 PC 처럼 글자 왼쪽 · 크루 오른쪽.
       * 사진 박스를 폭에 맞추면 높이가 330~440px 로 작아져 사람이 작게 보이므로 히어로를 가득 채운다(cover).
       * 가운데 기준이라 사람 시작선(사진 50%)은 화면 중앙 그대로 — 글자 묶음은 화면 44% 안에 둔다.
       */
      .hero { padding: calc(var(--header-h) + 64px) 0 152px; }
      .hero-media { inset: 0; width: auto; aspect-ratio: auto; translate: none; background-position: 50% 5%; }
      .hero-media::after {
        background:
          linear-gradient(90deg, var(--bg) 0%, rgba(24,24,26,.92) 46%, rgba(24,24,26,0) 64%),
          linear-gradient(180deg, var(--bg) 0%, rgba(24,24,26,0) 10%);
      }
      .hero-copy { max-width: 44vw; }
      .hero-lead { font-size: 16px; max-width: none; }
      .hero-stats { gap: 20px; }
      .hero-stats strong { font-size: 22px; }
      .rank-strip { margin-top: -96px; }
      .hero h1 { font-size: 40px; }
      /*
       * 타일 5개를 3열에 두면 둘째 줄에 빈칸이 생긴다.
       * 6칸 격자로 잡고 윗줄 3개는 2칸씩, 아랫줄 2개는 3칸씩 차지해 두 줄을 꽉 채운다.
       */
      .tiles { grid-template-columns: repeat(6, 1fr); }
      .tile { grid-column: span 2; }
      .tile:nth-child(n+4) { grid-column: span 3; }
      /* 한 줄로 쌓이면 폰을 가운데 세우고 아랫부분은 띠 밖으로 잘라 올라오는 느낌을 준다 */
      .cta-band { padding-bottom: 0; }
      .phones { height: 300px; margin-inline: auto; }
    }
    @media (max-width: 768px) {
      .hero-lead { font-size: 16px; }
      .hero-stats { gap: 20px; }
      .hero-stats strong { font-size: 22px; }
      /* 2열에서는 마지막 타일이 혼자 남으므로 한 줄을 통째로 쓴다 */
      .tiles { grid-template-columns: repeat(2, 1fr); }
      .tile, .tile:nth-child(n+4) { grid-column: auto; }
      .tile:last-child { grid-column: 1 / -1; }
      .tile { min-height: 0; }
      .rank-card { padding: 20px 16px; }
      .calc-big strong { font-size: 36px; }
      .pred { grid-template-columns: repeat(2, 1fr); }
      .trust-grid h2, .cta-band h2 { font-size: 28px; }
      .promo { padding: 24px; }
      .promo h3 { font-size: 22px; }
      .cta-band { padding: 32px 20px; }
      .phones { display: none; }
    }
    @media (max-width: 743px) {
      /*
       * 모바일(744 미만): 사진을 위에 두고 글자는 그 아래로 내린다.
       * 744(아이패드 미니 세로) · 768 · 820(아이패드 세로)은 태블릿(PC형) 배치를 쓴다.
       * 폭 840px 미만은 사진을 오른쪽 기준으로 잘라 크루 쪽만 보인다.
       * 제목이 시작하는 사진 높이 55% 지점부터 0.9 이상으로 덮는다.
       */
      .hero { padding-top: calc(var(--header-h) + 200px); padding-bottom: 112px; }
      .hero-media { inset: auto; right: 0; top: var(--header-h); width: max(100%, 840px); aspect-ratio: 1916 / 821; background-position: center; }
      .hero-media::after {
        background: linear-gradient(180deg, rgba(24,24,26,.5) 0%, rgba(24,24,26,0) 18%, rgba(24,24,26,0) 34%, rgba(24,24,26,.92) 52%, var(--bg) 70%);
      }
      .hero-copy { max-width: none; }
      .hero-lead { max-width: 520px; }
      .rank-strip { margin-top: -80px; }
      .hero h1 { font-size: 34px; }
    }

/* ── PHP 이관 추가분 ─────────────────────────────────────────────── */
/* 로그인 회원 히어로: 스토어 버튼 대신 내 기록 · 내 크루 */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* 크루 로고 이미지는 이니셜 위에 덮는다 — 이미지가 깨지면(onerror 로 제거) 이니셜이 남는다 */
.rank-strip .crew-logo { position: relative; overflow: hidden; }
.rank-strip .crew-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rank-empty { padding: 16px 4px; color: var(--text-2); font-size: 15px; }
/* 경로 좌표가 없는 코스 */
.course-map .cm-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 36px; color: var(--text-3); }
.region-chips { margin-top: 20px; }
.region-chips .chip small { margin-left: 4px; color: var(--text-3); font-size: 12px; }
/* 운영 콘솔 · 참여율 그림은 화면 예시다 — 실제 수치로 오해하지 않게 표시 */
.promo-visual { position: relative; }
.promo-tag { position: absolute; right: 10px; top: 8px; font-size: 11px; font-weight: 600; color: var(--text-3); }

/* ═══════════════ 앱 설치 안내 (app.php, 2026-09-18) ═══════════════
 * 머리글 없는 단독 페이지($page_bare) — .hero 의 위 여백은 머리글 높이를 전제로 해서, 여기서는 화면 세로 가운데에 둔다.
 * 파일 끝에 두어 위쪽 반응형 .hero 규칙보다 뒤에 온다 (같은 우선순위면 뒤가 이긴다). */
.hero.app-install { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 56px 0; }
.hero.app-install .hero-media { top: 0; }
.app-install-brand { display: inline-block; margin-bottom: 28px; }
.app-install-brand img { width: 180px; height: auto; }
#app-install-note { margin-top: 16px; font-size: 15px; }
.app-install-web { margin-top: 12px; padding-left: 0; color: var(--text-2); }
.app-install-web:hover { color: var(--text); }
.app-install-web i { margin-left: 4px; }