/* ============================================================================
   features.css — 기능 소개(홈 요약) + 기능 가이드(/Features) + 매뉴얼 뷰어
   디자인 토큰(--ro-*) 기반 → 라이트/다크 자동 대응. 반응형(PC/태블릿/모바일).
   ============================================================================ */

/* ── 홈 요약 섹션 ───────────────────────────────────────────────────────── */
.ro-feat { padding: clamp(40px, 6vw, 72px) 0; }
.ro-feat__inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* 리워드 경제 배너 */
.ro-feat-econ {
    position: relative;
    border-radius: 20px;
    padding: clamp(22px, 4vw, 36px);
    margin-bottom: clamp(18px, 3vw, 26px);
    background: linear-gradient(135deg, var(--ro-primary-500, #16a34a), var(--ro-accent-500, #6366f1));
    color: #fff;
    overflow: hidden;
}
/* 은은한 장식 원 (다른 랜딩 사이트 스타일) */
.ro-feat-econ::after {
    content: ''; position: absolute; right: -60px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
    pointer-events: none; z-index: 0;
}
.ro-feat-econ > * { position: relative; z-index: 1; }

/* 배너 마스코트 (런닝구) — 우측 하단, 데스크탑만 */
.ro-feat-econ__mascot {
    position: absolute; right: 20px; bottom: -4px;
    display: block; width: 158px; z-index: 1;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
    pointer-events: none; user-select: none;
}
.ro-feat-econ__mascot img { display: block; width: 100%; height: auto; }
@media (min-width: 861px) { .ro-feat-econ { padding-right: 210px; } }
@media (max-width: 860px) { .ro-feat-econ__mascot { display: none; } }

/* 마스코트 다운로드 CTA 카드 (하단) */
.ro-feat-cta {
    margin-top: 26px;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    padding: clamp(20px, 3.5vw, 30px);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(99,102,241,.10));
    border: 1px solid var(--ro-border);
}
/* 다크모드: 어두운 톤 틴트 (위 rgba 가 라이트 토큰일 때 텍스트가 안 보이는 문제 방지) */
[data-theme="dark"] .ro-feat-cta {
    background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(99,102,241,.16));
    border-color: rgba(255,255,255,.08);
}
.ro-feat-cta__mascots { display: flex; align-items: flex-end; flex-shrink: 0; }
.ro-feat-cta__mascots picture { display: inline-block; line-height: 0; }
.ro-feat-cta__mascots picture + picture { margin-left: -22px; }
.ro-feat-cta__mascots img { display: block; width: 92px; height: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.14)); }
/* 런닝구+런피스가 함께 달리는 합성 한 장 — 둘 다 보이게 크게 */
.ro-feat-cta__mascots--duo img { width: 172px; }
.ro-feat-cta__body { flex: 1; min-width: 200px; }
.ro-feat-cta__title { font-size: clamp(17px, 2.6vw, 22px); font-weight: 900; letter-spacing: -.02em; color: var(--ro-text); margin: 0 0 6px; }
.ro-feat-cta__desc { font-size: 13.5px; color: var(--ro-text-sub); line-height: 1.6; margin: 0; }
.ro-feat-cta__btn {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 26px; border-radius: 12px; font-size: 15px; font-weight: 800; text-decoration: none;
    background: var(--ro-primary-600, #16a34a); color: #fff;
    box-shadow: 0 8px 20px rgba(22,163,74,.28); transition: transform 140ms;
}
.ro-feat-cta__btn:hover { transform: translateY(-2px); }
@media (max-width: 600px) {
    .ro-feat-cta { flex-direction: column; text-align: center; gap: 14px; }
    .ro-feat-cta__btn { width: 100%; justify-content: center; }
    .ro-feat-cta__mascots img { width: 80px; }
    .ro-feat-cta__mascots--duo img { width: 150px; }
}

/* ── 히어로 마스코트 다운로드 안내 (런닝구+런피스 말풍선) ── */
.ro-hero-mascot { display: flex; align-items: center; gap: 12px; margin-top: 18px; max-width: 460px; }
.ro-hero-mascot__chars { display: flex; align-items: flex-end; flex-shrink: 0; }
.ro-hero-mascot__chars picture { display: block; line-height: 0; width: 60px; }
.ro-hero-mascot__chars picture + picture { margin-left: -16px; }
/* 런닝구 빼꼼(cute) 단독 — 가로로 넓은 포즈라 살짝 크게 */
.ro-hero-mascot__chars--solo picture { width: 96px; }
.ro-hero-mascot__chars img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 9px rgba(0,0,0,.16)); }
.ro-hero-mascot__bubble {
    position: relative;
    background: var(--ro-surface); border: 1px solid var(--ro-border);
    border-radius: 14px; padding: 10px 14px;
    font-size: 13px; color: var(--ro-text); line-height: 1.55;
    box-shadow: 0 6px 18px rgba(0,0,0,.07);
}
.ro-hero-mascot__bubble strong { color: var(--ro-primary-700, #15803d); }
.ro-hero-mascot__bubble::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); border: 8px solid transparent; border-right-color: var(--ro-border); }
.ro-hero-mascot__bubble::after  { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-right-color: var(--ro-surface); }
@media (max-width: 520px) {
    .ro-hero-mascot__chars picture { width: 50px; }
    .ro-hero-mascot__chars--solo picture { width: 76px; }
    .ro-hero-mascot__bubble { font-size: 12px; padding: 9px 12px; }
}

/* ── 다가오는 마라톤 D-day 위젯 ── */
.ro-race-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px)  { .ro-race-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ro-race-grid { grid-template-columns: repeat(4, 1fr); } }
.ro-race-card {
    position: relative;
    padding: 20px 18px;
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: 16px;
    transition: transform 180ms, box-shadow 180ms, border-color 180ms;
}
.ro-race-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.08); border-color: var(--ro-primary-300, rgba(34,197,94,.4)); }
.ro-race-card__dday {
    display: inline-block;
    padding: 4px 12px; border-radius: 999px;
    background: var(--ro-primary-600, #16a34a); color: #fff;
    font-size: 12px; font-weight: 900; letter-spacing: .02em;
    margin-bottom: 12px;
}
.ro-race-card__date { font-size: 13px; font-weight: 700; color: var(--ro-text-sub); margin-bottom: 6px; }
.ro-race-card__date span { margin-left: 4px; font-weight: 600; }
.ro-race-card__name { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--ro-text); margin: 0 0 8px; line-height: 1.35; }
.ro-race-card__loc { font-size: 12.5px; color: var(--ro-text-sub); margin-bottom: 8px; }
.ro-race-card__dist { font-size: 11.5px; font-weight: 700; color: var(--ro-primary-700, #15803d); background: var(--ro-primary-50, rgba(34,197,94,.08)); border-radius: 8px; padding: 5px 10px; display: inline-block; }

/* ── 홈 기존 섹션에 마스코트 곁들이기 ── */
/* 크루 섹션 폰 목업 옆 런피스 */
#runneron_section-community .runneron_mockup-visual { position: relative; }
.ro-home-mascot-peace {
    position: absolute; left: -8px; bottom: -6px;
    display: block; width: 122px; z-index: 2; pointer-events: none; user-select: none;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.16));
}
.ro-home-mascot-peace img { display: block; width: 100%; height: auto; }
@media (max-width: 980px) { .ro-home-mascot-peace { width: 96px; left: 0; bottom: 0; } }
@media (max-width: 520px) { .ro-home-mascot-peace { width: 74px; } }
.ro-feat-econ__kicker { font-size: 12px; font-weight: 800; letter-spacing: .12em; opacity: .9; text-transform: uppercase; }
.ro-feat-econ__title { font-size: clamp(20px, 3.4vw, 28px); font-weight: 900; letter-spacing: -.02em; margin: 8px 0 8px; line-height: 1.3; }
.ro-feat-econ__desc { font-size: clamp(13px, 1.8vw, 15px); line-height: 1.7; opacity: .95; margin: 0 0 18px; max-width: 760px; }
.ro-feat-econ__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ro-feat-econ__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 800;
    text-decoration: none; transition: transform 140ms, box-shadow 140ms;
}
.ro-feat-econ__btn--primary { background: #fff; color: var(--ro-primary-700, #15803d); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.ro-feat-econ__btn--primary:hover { transform: translateY(-2px); }
.ro-feat-econ__btn--ghost { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.ro-feat-econ__btn--ghost:hover { background: rgba(255,255,255,.26); }

/* 퀵스타트 4단계 흐름 */
.ro-feat-steps { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 clamp(18px, 3vw, 26px); }
@media (min-width: 720px) { .ro-feat-steps { grid-template-columns: repeat(4, 1fr); } }
.ro-feat-step { position: relative; padding: 18px 16px; background: var(--ro-surface); border: 1px solid var(--ro-border); border-radius: 14px; }
.ro-feat-step__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ro-primary-600, #16a34a); color: #fff; font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.ro-feat-step__t { font-size: 14.5px; font-weight: 800; color: var(--ro-text); margin: 0 0 4px; letter-spacing: -.02em; }
.ro-feat-step__d { font-size: 12.5px; color: var(--ro-text-sub); line-height: 1.6; margin: 0; }
@media (min-width: 720px) {
    .ro-feat-step:not(:last-child)::after { content: '→'; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); color: var(--ro-text-muted, #9ca3af); font-size: 16px; z-index: 1; }
}

/* 카드 그리드 — 모바일 1열 / 태블릿 2열 / PC 3열 (bento: 와이드 카드 허용) */
.ro-feat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px)  { .ro-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ro-feat-grid { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; } }

/* 피처(와이드) 카드 — 데스크탑에서 2열 차지 */
.ro-feat-card--wide { grid-column: span 1; }
@media (min-width: 640px)  { .ro-feat-card--wide { grid-column: span 2; } }
@media (min-width: 1000px) { .ro-feat-card--wide { grid-column: span 2; } }
.ro-feat-card--wide .ro-feat-card__icon { background: var(--ro-primary-600, #16a34a); color: #fff; }

/* 브랜드 칩 (워치 피처 카드 안) */
.ro-feat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ro-feat-chip { font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--ro-bg); border: 1px solid var(--ro-border); color: var(--ro-text-sub); }
.ro-feat-chip--auto { border-color: var(--ro-primary-300, rgba(34,197,94,.4)); color: var(--ro-primary-700, #15803d); background: var(--ro-primary-50, rgba(34,197,94,.08)); }
.ro-feat-chip--prep { opacity: .75; }

.ro-feat-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 22px 20px 20px;
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--ro-text);
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms, border-color 180ms;
}
.ro-feat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
    border-color: var(--ro-primary-300, rgba(34,197,94,.4));
}
.ro-feat-card__icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ro-primary-50, rgba(34,197,94,.1));
    color: var(--ro-primary-600, #16a34a);
    margin-bottom: 4px;
}
.ro-feat-card__icon svg { width: 24px; height: 24px; }
.ro-feat-card__title { font-size: 16px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.ro-feat-card__desc { font-size: 13px; color: var(--ro-text-sub); line-height: 1.65; margin: 0; flex: 1; }
.ro-feat-card__more { font-size: 12.5px; font-weight: 700; color: var(--ro-primary-600, #16a34a); margin-top: 6px; }

/* ── 상세 페이지 (/Features) ────────────────────────────────────────────── */
.feat-doc { max-width: 980px; margin: 0 auto; padding: 0 20px clamp(60px, 10vw, 100px); }
.feat-doc__crumb { font-size: 12px; color: var(--ro-text-sub); margin: 20px 0 8px; }
.feat-doc__crumb a { color: var(--ro-primary-600, #16a34a); text-decoration: none; }
.feat-doc__h1 { font-size: clamp(26px, 5vw, 38px); font-weight: 900; letter-spacing: -.03em; margin: 0 0 10px; color: var(--ro-text); }
.feat-doc__lead { font-size: clamp(14px, 2vw, 16px); color: var(--ro-text-sub); line-height: 1.7; margin: 0 0 28px; max-width: 740px; }

/* 섹션 블록 */
.feat-block { padding: clamp(22px, 4vw, 30px); border: 1px solid var(--ro-border); border-radius: 18px; background: var(--ro-surface); margin-bottom: 18px; scroll-margin-top: 88px; }
.feat-block__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.feat-block__icon { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--ro-primary-50, rgba(34,197,94,.1)); color: var(--ro-primary-600, #16a34a); flex-shrink: 0; }
.feat-block__icon svg { width: 22px; height: 22px; }
.feat-block__title { font-size: clamp(17px, 2.4vw, 20px); font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--ro-text); }
.feat-block__body { font-size: 14px; line-height: 1.75; color: var(--ro-text); }
.feat-block__body p { margin: 0 0 10px; color: var(--ro-text-sub); }
.feat-block__body ul { margin: 8px 0; padding-left: 20px; }
.feat-block__body li { margin-bottom: 5px; color: var(--ro-text); }
.feat-block__body b { font-weight: 700; }

/* 인라인 CTA(앱 다운로드 등) */
.feat-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 800; text-decoration: none; background: var(--ro-primary-600, #16a34a); color: #fff; }
.feat-cta:hover { background: var(--ro-primary-700, #15803d); }
.feat-cta--ghost { background: transparent; color: var(--ro-text); border: 1px solid var(--ro-border); }

/* 목차 칩 */
.feat-toc { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; }
.feat-toc a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    background: var(--ro-bg); border: 1px solid var(--ro-border); color: var(--ro-text-sub); text-decoration: none;
}
.feat-toc a:hover { color: var(--ro-text); border-color: var(--ro-text-sub); }

/* ── 워치 연결 — 브랜드 칩 + 패널 ───────────────────────────────────────── */
.feat-watch__tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; -webkit-overflow-scrolling: touch; }
.feat-watch__tab {
    flex: 0 0 auto;
    padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
    background: var(--ro-surface); border: 1.5px solid var(--ro-border); color: var(--ro-text-sub);
    cursor: pointer; white-space: nowrap; transition: all 140ms;
}
.feat-watch__tab:hover { color: var(--ro-text); }
.feat-watch__tab.is-active { background: var(--ro-text); color: var(--ro-surface); border-color: var(--ro-text); }
@media (min-width: 720px) { .feat-watch__tabs { flex-wrap: wrap; overflow: visible; } }

.feat-watch__panel { display: none; }
.feat-watch__panel.is-active { display: block; animation: featFade .25s ease-out; }
@keyframes featFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.feat-watch__name { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; margin: 0 0 12px; color: var(--ro-text); flex-wrap: wrap; }
.feat-watch__badge { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.feat-watch__badge--auto { background: rgba(34,197,94,.14); color: var(--ro-primary-700, #15803d); }
.feat-watch__badge--prep { background: rgba(234,179,8,.16); color: #b45309; }
.feat-watch__badge--self { background: rgba(99,102,241,.14); color: var(--ro-accent-700, #4338ca); }

.feat-watch__steps { counter-reset: s; list-style: none; margin: 0 0 14px; padding: 0; }
.feat-watch__steps li {
    position: relative; counter-increment: s;
    padding: 9px 0 9px 38px; font-size: 14px; line-height: 1.6; color: var(--ro-text);
    border-bottom: 1px dashed var(--ro-border);
}
.feat-watch__steps li:last-child { border-bottom: 0; }
.feat-watch__steps li::before {
    content: counter(s); position: absolute; left: 0; top: 8px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--ro-primary-600, #16a34a); color: #fff;
    font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.feat-watch__note { font-size: 12.5px; color: var(--ro-text-sub); background: var(--ro-bg); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; line-height: 1.6; }
.feat-watch__doc {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 800; text-decoration: none;
    background: var(--ro-primary-50, rgba(34,197,94,.1)); color: var(--ro-primary-700, #15803d);
    border: 1.5px solid var(--ro-primary-200, rgba(34,197,94,.3));
}
.feat-watch__doc:hover { background: var(--ro-primary-100, rgba(34,197,94,.16)); }
.feat-watch__doc svg { width: 18px; height: 18px; }

/* 기능 블록 하단 가이드 버튼 줄 */
.feat-guide-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* 실제 PDF 가 준비된 가이드(배터리 등) — 채워진 강조 버튼 */
.feat-watch__doc--ready {
    background: var(--ro-primary-600, #16a34a); color: #fff;
    border-color: var(--ro-primary-600, #16a34a);
}
.feat-watch__doc--ready:hover { background: var(--ro-primary-700, #15803d); }

/* ── 매뉴얼 뷰어 (/Features/Manual/{slug}) ──────────────────────────────── */
.feat-manual { max-width: 1040px; margin: 0 auto; padding: 16px 16px 60px; }
.feat-manual__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.feat-manual__title { font-size: 18px; font-weight: 800; color: var(--ro-text); margin: 0; }
.feat-manual__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.feat-manual__btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; border: 1px solid var(--ro-border); background: var(--ro-surface); color: var(--ro-text); cursor: pointer; }
.feat-manual__btn--primary { background: var(--ro-primary-600, #16a34a); color: #fff; border-color: var(--ro-primary-600, #16a34a); }
.feat-manual__frame { width: 100%; height: 80vh; border: 1px solid var(--ro-border); border-radius: 14px; background: var(--ro-bg); }
@media (max-width: 640px) { .feat-manual__frame { height: 70vh; } }

/* 임시 샘플(준비중) 안내 배너 */
.feat-manual__notice {
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(234,179,8,0.10);
    border: 1px solid rgba(234,179,8,0.28);
    color: #92400e;
    font-size: 13px; line-height: 1.6;
}
.feat-manual__notice strong { color: #b45309; }
[data-theme="dark"] .feat-manual__notice { background: rgba(234,179,8,0.12); border-color: rgba(234,179,8,0.30); color: #fcd34d; }
[data-theme="dark"] .feat-manual__notice strong { color: #fde68a; }

/* 준비중 폴백 */
.feat-manual__empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--ro-border); border-radius: 16px; background: var(--ro-surface); }
.feat-manual__empty-ic { font-size: 44px; margin-bottom: 12px; }
.feat-manual__empty h2 { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: var(--ro-text); }
.feat-manual__empty p { font-size: 14px; color: var(--ro-text-sub); line-height: 1.7; margin: 0 0 18px; }