/* ============================================================================
   home-refine.css — 홈 화면 마감 레이어 (2026-08-06)

   "홈이 어색하다"는 피드백의 원인은 기능이 아니라 **밀도와 위계**였다.
   섹션이 14개인데 전부 같은 무게(흰 카드 + 얇은 회색 테두리 + 작은 글씨)라,
   훑어봐도 무엇이 중요한지 안 잡히고 전체가 평평하게 읽힌다.

   그래서 새 요소를 더하지 않고 **위계만** 세운다:
     1) 섹션 머리 — 키커를 알약 배지로, 제목을 크고 촘촘하게(브랜드 그린 강조)
     2) 카드 — 얇은 테두리 대신 낮고 넓은 그림자 + 호버 시 살짝 떠오름
     3) 숫자 — 홈에서 가장 큰 활자는 '기록'이어야 한다
     4) 여백 — 섹션 사이 리듬을 일정하게

   ⚠ 색은 전부 토큰. 이 파일은 site.css 뒤에 로드되어 홈에서만 덮어쓴다.
   ⚠ 액센트는 로고 그린(--ro-accent-*). 앱(#90c320)과 같은 계열이라
     웹·앱을 오갈 때 같은 브랜드로 읽힌다. [[public-theme-tokens]]
   ========================================================================== */

/* ── 1. 섹션 머리 ────────────────────────────────────────────────── */
.runneron_section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ro-accent-50);
    color: var(--ro-accent-700);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
/* 키커 앞 짧은 선 — 편집물 느낌을 준다 */
.runneron_section-kicker::before {
    content: "";
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.7;
}

.runneron_section-title {
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.035em;
    margin: 0 0 12px;
    color: var(--ro-text);
}
.runneron_section-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ro-text-sub);
    max-width: 62ch;
    margin-inline: auto;
}

/* site.css 에 html[data-theme="dark"] .runneron_section-kicker 가 3곳 있어 파란 틴트로 되돌린다.
   같은 형태의 선택자로 뒤에서 한 번 더 덮어 브랜드 그린을 유지한다(둘 다 고정색이라 대비 안전). */
html[data-theme="dark"] .runneron_section-kicker {
    background: rgba(111, 163, 12, 0.20);
    color: #A8D355;
}

/* ── 2. 카드 ──────────────────────────────────────────────────────
   회색 1px 테두리는 밝은 배경에서 거의 안 보이면서 화면만 지저분하게 만든다.
   테두리는 아주 옅게 남기고(고대비 모드 대비) 깊이는 그림자로 준다. */
.ro-race-card,
.runneron_guide-card,
.ro-why__c,
.ro-lounge-card,
.ro-feat__card {
    border-radius: 18px;
    /* ⚠ -soft 토큰은 이 페이지에서 다크 전환이 확인되지 않았다(실측). 확실한 --ro-border 를 쓴다. */
    border: 1px solid var(--ro-border);
    background: var(--ro-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 8px 24px -12px rgba(15, 23, 42, 0.10);
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.2s ease,
                border-color 0.2s ease;
}
.ro-race-card:hover,
.runneron_guide-card:hover,
.ro-lounge-card:hover,
.ro-feat__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05),
                0 20px 40px -16px rgba(15, 23, 42, 0.18);
    border-color: var(--ro-accent-200, var(--ro-border));
}
/* 다크에선 옅은 그림자가 검은 배경에 묻힌다 — 그림자를 깊게 준다.
   테두리는 --ro-border 가 테마별로 뒤집히므로(라이트=남색 8%, 다크=흰색 8%) 손대지 않는다. */
html[data-theme="dark"] .ro-race-card,
html[data-theme="dark"] .runneron_guide-card,
html[data-theme="dark"] .ro-why__c,
html[data-theme="dark"] .ro-lounge-card,
html[data-theme="dark"] .ro-feat__card {
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.75);
}

/* 대회 카드 — 썸네일이 카드 위쪽을 꽉 채우게(여백 낭비 제거) */
.ro-race-card { overflow: hidden; padding-top: 0; }
.ro-race-card > img {
    border-radius: 0 !important;
    margin: 0 0 12px !important;
    aspect-ratio: 1200 / 630;
}
/* D-day 는 썸네일 위에 얹어 카드 상단을 아낀다 */
.ro-race-card { position: relative; }
.ro-race-card__dday {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ── 3. 숫자 ──────────────────────────────────────────────────────
   홈에서 가장 큰 활자는 제목이 아니라 '달린 거리'여야 한다.
   숫자는 tabular-nums 로 자릿수가 흔들리지 않게. */
.runneron_hero-stat__num,
.ro-my__n,
.ch-sum__n {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    font-weight: 900;
}

/* ── 4. 리듬 ──────────────────────────────────────────────────────
   섹션 상하 여백이 제각각이라 스크롤할 때 덜컹거린다. 한 값으로 묶는다. */
.ro-why,
.ro-home-evt,
.runneron_community,
.ro-feat,
.runneron_guides,
.runneron_latest-notices {
    padding-block: clamp(48px, 6vw, 88px);
}

/* ── 5. 마스코트 겹침 ─────────────────────────────────────────────
   🐞 커뮤니티 섹션의 폰 목업 아래 캡션 위로 마스코트가 올라타
      "…상황에 따라 달라질 수 있습니다" 글자를 가렸다(2026-08-06 스크린샷).
      마스코트를 목업 밖 왼쪽 아래로 내리고, 캡션에 자리를 비워 준다. */
.runneron_community .runneron_phone-floating { z-index: 1; }
.runneron_community figcaption,
.runneron_community .runneron_phone-caption {
    position: relative;
    z-index: 2;
    padding-left: 64px;
}

/* ── 6. 좁은 화면 ────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .runneron_section-title { font-size: 22px; letter-spacing: -0.03em; }
    .runneron_section-desc { font-size: 14px; }
    .runneron_section-kicker { font-size: 10px; padding: 3px 10px; }
    /* 모바일에선 호버가 없다 — 뜨는 효과 대신 그림자만 얕게 */
    .ro-race-card:hover,
    .runneron_guide-card:hover,
    .ro-lounge-card:hover,
    .ro-feat__card:hover { transform: none; }
    .runneron_community figcaption,
    .runneron_community .runneron_phone-caption { padding-left: 0; }
}

/* 움직임을 줄여 달라고 설정한 사용자에게는 떠오르는 효과를 끈다 */
@media (prefers-reduced-motion: reduce) {
    .ro-race-card,
    .runneron_guide-card,
    .ro-why__c,
    .ro-lounge-card,
    .ro-feat__card { transition: none; }
    .ro-race-card:hover,
    .runneron_guide-card:hover,
    .ro-lounge-card:hover,
    .ro-feat__card:hover { transform: none; }
}