/* ============================================================================
   crew-detail.css — 크루 상세 (웹 전용 화려한 버전)

   앱은 좁은 세로 화면이라 커버+스탯+탭이 위→아래로 쌓이지만,
   웹은 넓으니 커버를 크게 깔고 그 위에 로고·이름을 얹고(히어로),
   스탯은 카드 그리드, 메뉴는 큼직한 액션 그리드로 보여준다.
   색은 --ro-* 토큰만 → 다크 자동 대응. → [[public-theme-tokens]]
   ⚠ 클래스에 ad/ad- 접두사 금지 → [[css-avoid-ad-class]]
   ========================================================================== */

.cd { max-width: 1080px; margin: 0 auto; }
.cd__crumb { font-size: 13px; color: var(--ro-text-sub); margin-bottom: 12px; }
.cd__crumb a { color: var(--ro-primary-600); text-decoration: none; }
.cd__crumb a:hover { text-decoration: underline; }

/* ── 히어로 ── */
.cd__hero {
    position: relative; border-radius: var(--ro-radius-lg); overflow: hidden;
    margin-bottom: 18px; background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}
.cd__cover {
    position: relative; width: 100%; aspect-ratio: 5 / 2; min-height: 200px;
    background: linear-gradient(135deg, var(--ro-primary-500), var(--ro-accent-500, #7c5cff));
    overflow: hidden;
}
@media (min-width: 720px) { .cd__cover { aspect-ratio: 3 / 1; } }
.cd__cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* 커버 위 글자가 묻히지 않게 아래쪽을 어둡게 */
.cd__cover::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(6,9,14,.05) 0%, rgba(6,9,14,.20) 55%, rgba(6,9,14,.78) 100%);
}
/* 랭크 뱃지(있을 때만) — 앱의 "1위" 자리 */
.cd__rank {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: 999px;
    background: linear-gradient(135deg, #f6c945, #f0a020); color: #3a2600;
    font-size: 13px; font-weight: 900; letter-spacing: -0.01em;
    box-shadow: 0 4px 14px rgba(240, 160, 32, .45);
}
.cd__rank svg { width: 15px; height: 15px; }

/* 히어로 정보 밴드 — 커버 **아래**의 surface 위에 놓는다.
   ⚠ 예전엔 이름/메타를 커버 위에 흰 글자로 얹었는데, 내용이 커버 밖으로 흘러
     라이트 모드에서 **흰 배경 위 흰 글자**로 사라졌다(다크만 보면 못 잡는 버그).
     → 텍스트는 전부 테마 토큰(var(--ro-text) 등)으로. 로고만 커버에 걸쳐 히어로 느낌을 낸다. */
.cd__head {
    position: relative; z-index: 2; margin-top: -44px;
    padding: 0 22px 20px; display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
    background: var(--ro-surface);
}
.cd__logo {
    width: 92px; height: 92px; border-radius: 22px; flex-shrink: 0; overflow: hidden;
    background: var(--ro-surface); border: 3px solid var(--ro-surface);
    box-shadow: 0 8px 22px rgba(6,9,14,.28);
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 900; color: var(--ro-primary-600);
}
.cd__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd__head-b { flex: 1; min-width: 200px; padding-bottom: 2px; }
.cd__name {
    margin: 0 0 6px; font-size: clamp(22px, 3.4vw, 30px); font-weight: 900;
    letter-spacing: -0.02em; color: var(--ro-text);
}
.cd__sub {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    font-size: 13.5px; font-weight: 600; color: var(--ro-text-sub);
}
.cd__sub svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; opacity: .8; }
.cd__badges { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.cd__badge {
    display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: -0.01em;
    background: var(--ro-primary-500); color: #fff;
}
.cd__badge--soft {
    background: var(--ro-surface); color: var(--ro-text-sub);
    border: 1px solid var(--ro-border);
}

/* ── 스탯 그리드 ── */
.cd__stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px;
}
@media (min-width: 560px) { .cd__stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .cd__stats { grid-template-columns: repeat(6, 1fr); } }
.cd__stat {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 14px;
    background: var(--ro-surface); border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius-md);
}
.cd__stat-ic {
    width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    background: var(--ro-primary-50); color: var(--ro-primary-600); margin-bottom: 2px;
}
.cd__stat-ic svg { width: 16px; height: 16px; }
.cd__stat-l { font-size: 11.5px; font-weight: 700; color: var(--ro-text-muted); }
.cd__stat-v { font-size: 14.5px; font-weight: 800; color: var(--ro-text); letter-spacing: -0.01em;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 소개 ── */
.cd__about {
    background: var(--ro-surface); border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius-md); padding: 20px 22px; margin-bottom: 18px;
}
.cd__about h2 { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--ro-text); }
.cd__about p { margin: 0; white-space: pre-wrap; line-height: 1.7; color: var(--ro-text); font-size: 14px; }
.cd__about .cd__about-empty { color: var(--ro-text-sub); font-style: italic; }

/* ── 메뉴 그리드 (앱 탭을 웹에선 큼직한 액션 카드로) ── */
.cd__menu-h { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--ro-text); }
.cd__menu {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px;
}
@media (min-width: 620px) { .cd__menu { grid-template-columns: repeat(3, 1fr); } }
.cd__mi {
    display: flex; align-items: center; gap: 12px; padding: 15px 16px;
    background: var(--ro-surface); border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius-md); text-decoration: none; color: var(--ro-text);
    transition: transform .1s, box-shadow .15s, border-color .15s;
}
.cd__mi:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.10); border-color: var(--ro-primary-200); }
.cd__mi-ic {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
    background: var(--ro-primary-50); color: var(--ro-primary-600);
}
.cd__mi-ic svg { width: 20px; height: 20px; }
.cd__mi-b { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cd__mi-t { font-size: 14px; font-weight: 800; color: var(--ro-text); }
.cd__mi-d { font-size: 11.5px; color: var(--ro-text-sub); }
/* 잠금(비크루원) — 링크가 아니라 안내 */
.cd__mi--lock { cursor: default; opacity: .72; }
.cd__mi--lock:hover { transform: none; box-shadow: none; border-color: var(--ro-border); }
.cd__mi--lock .cd__mi-ic { background: var(--ro-surface-2, rgba(127,127,127,.12)); color: var(--ro-text-muted); }
/* 강조 액션(문의·그룹런)은 살짝 다른 톤 */
.cd__mi--accent .cd__mi-ic { background: var(--ro-accent-50, var(--ro-primary-50)); color: var(--ro-accent-600, var(--ro-primary-600)); }

/* ── 가입 영역 ── */
.cd__join {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 18px 22px; margin-bottom: 8px;
    background: linear-gradient(135deg, var(--ro-primary-50), var(--ro-accent-50, var(--ro-primary-50)));
    border: 1px solid var(--ro-primary-200); border-radius: var(--ro-radius-lg);
}
.cd__join-t { flex: 1; min-width: 180px; }
.cd__join-t b { display: block; font-size: 15px; font-weight: 800; color: var(--ro-text); }
.cd__join-t span { font-size: 12.5px; color: var(--ro-text-sub); }
.cd__btn {
    appearance: none; border: 0; cursor: pointer; padding: 11px 26px; border-radius: 999px;
    background: var(--ro-primary-500); color: #fff; font-size: 14px; font-weight: 800;
    transition: filter .15s, transform .08s; text-decoration: none; display: inline-block;
}
.cd__btn:hover { filter: brightness(1.06); }
.cd__btn:active { transform: translateY(1px); }
.cd__btn[disabled] { opacity: .6; cursor: default; }
.cd__btn--ghost { background: transparent; color: var(--ro-primary-600); border: 1.5px solid var(--ro-primary-500); }
.cd__state {
    display: inline-block; padding: 10px 20px; border-radius: 999px;
    background: var(--ro-surface); color: var(--ro-text-sub);
    border: 1px solid var(--ro-border); font-size: 13.5px; font-weight: 800;
}
.cd__state--ok { color: var(--ro-primary-600); border-color: var(--ro-primary-500); }
.cd__join-msg { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--ro-text-sub); }
.cd__join-msg[hidden] { display: none; }
.cd__join-hint { font-size: 12.5px; font-weight: 800; color: var(--ro-primary-600); text-decoration: none; }