/*
 * 크루장 운영 도구 소개(crew-leader.php) 전용 스타일 — design.css 뒤에 싣는다.
 * 원본: web/design/crew-leader.html 의 <style>. 시안을 고치면 이 파일도 같이 옮길 것.
 */
    /* 히어로 — 사진 대신 운영 화면을 HTML 로 줄여 보여준다 */
    .lp-hero {
      position: relative; isolation: isolate; overflow: hidden;
      padding: calc(var(--header-h) + 64px) 0 88px;
    }
    /* 오른쪽 위 라임 빛 — 글자 칸(왼쪽)에는 닿지 않게 미리보기 뒤에만 둔다 */
    .lp-hero::before {
      content: ''; position: absolute; z-index: -1; width: 760px; height: 760px; right: -220px; top: -180px;
      background: radial-gradient(closest-side, rgba(198,255,52,.13), transparent);
      pointer-events: none;
    }
    .lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 56px; align-items: center; }
    .lp-hero h1 { font-size: 48px; line-height: 1.22; font-weight: 800; letter-spacing: -0.035em; }
    .lp-lead { margin: 20px 0 32px; max-width: 540px; font-size: 18px; color: var(--text-2); }
    .lp-btns { display: flex; flex-wrap: wrap; gap: 10px; }
    .lp-points { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: 14px; color: var(--text-2); }
    .lp-points span { display: inline-flex; align-items: center; gap: 6px; }
    .lp-points i { color: var(--primary); font-size: 16px; }

    /* 운영 화면 예시 카드 — 눌리는 것처럼 보이지 않게 버튼은 span 으로 그린다 */
    .preview { padding: 24px; border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(0,0,0,.45); display: grid; gap: 14px; }
    .preview-top { display: flex; align-items: center; gap: 12px; }
    .preview-top .space-logo { width: 44px; height: 44px; border-radius: 14px; font-size: 18px; }
    .preview-top div { flex: 1; min-width: 0; }
    .preview-top strong { display: block; font-size: 16px; }
    .preview-top small { display: block; font-size: 13px; color: var(--text-2); }
    .pv-block { padding: 16px; border-radius: var(--radius-md); background: var(--bg-2); }
    .pv-block h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; font-weight: 800; }
    .pv-block h2 i { font-size: 18px; color: var(--area); }
    .pv-block .req { border-top-color: var(--border); }
    .pv-block .person { background: var(--surface); }
    .pv-block .avatar { color: var(--on-primary); }

    /* 기능 카드 — 아이콘 · 제목 · 사실 2~3줄 · 가능한 곳 배지 */
    .feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .feat { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
    .feat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .feat h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
    .feat ul { display: grid; gap: 10px; }
    .feat li { display: flex; gap: 8px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
    .feat li i { flex-shrink: 0; margin-top: 2px; font-size: 17px; color: var(--primary); }
    .feat li b { color: var(--text); font-weight: 700; }
    .feat .tags { margin-top: auto; }
    .feat .tag { background: var(--bg-2); }

    /* PC · 앱 비교표 — 좁은 화면에서는 표만 가로로 스크롤한다 (본문은 넘치지 않는다) */
    /* min-width:0 · max-width:100% — 없으면 부모 격자 칸이 표 최소 폭(560px)에 끌려 390px 에서 페이지 전체가 485px 로 넘쳤다 */
    /* position:relative — 없으면 표 안의 절대 위치 요소(sr-only 캡션 등)가 스크롤 상자의 잘림을 벗어나 문서 폭을 늘린다 */
    .cmp-wrap { position: relative; overflow-x: auto; min-width: 0; max-width: 100%; border-radius: var(--radius); background: var(--surface); }
    .cmp { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
    .cmp th, .cmp td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--border); }
    .cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 0; }
    .cmp thead th { font-size: 14px; font-weight: 700; color: var(--text-2); background: var(--surface-2); }
    .cmp thead th i { margin-right: 4px; vertical-align: -2px; }
    .cmp tbody th { font-weight: 600; }
    .cmp tbody th small { display: block; font-size: 13px; font-weight: 500; color: var(--text-3); }
    .cmp td { width: 22%; white-space: nowrap; }
    .cmp .yes { color: var(--primary); font-size: 20px; vertical-align: -3px; }
    .cmp .no { color: var(--text-3); font-size: 20px; vertical-align: -3px; }
    .cmp-note { margin-top: 12px; font-size: 13px; color: var(--text-3); }

    /* 3단계 시작하기 */
    .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
    .step { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; }
    .step-no {
      width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
      background: var(--primary); color: var(--on-primary); font-size: 16px; font-weight: 800;
    }
    .step h3 { font-size: 19px; font-weight: 800; }
    .step p { font-size: 15px; color: var(--text-2); }
    .step .meta { margin-top: auto; padding-top: 8px; font-size: 13px; }

    /* CTA 띠 — main ⑨ 와 같은 모양 */
    .cta-band {
      position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); padding: 56px;
      display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center;
      background: var(--surface);
    }
    .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; } }
    .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; }
    .cta-band .lp-btns { margin-top: 12px; }
    .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; }

    @media (max-width: 1024px) {
      .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
      .lp-hero::before { top: auto; bottom: -360px; }
      .preview { max-width: 560px; }
      .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .cta-band { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
      .cta-band::before { top: auto; bottom: -420px; }
      .phones { height: 300px; margin-inline: auto; }
    }
    @media (max-width: 768px) {
      .lp-hero { padding: calc(var(--header-h) + 36px) 0 56px; }
      .lp-hero h1 { font-size: 32px; }
      .lp-lead { font-size: 16px; }
      .steps { grid-template-columns: minmax(0, 1fr); }
      .cta-band { padding: 32px 20px; }
      .cta-band h2 { font-size: 28px; }
      .cta-band.is-live::before { animation: none; }
      .phones { display: none; }
    }
    @media (max-width: 640px) {
      .feat-grid { grid-template-columns: minmax(0, 1fr); }
      .feat { padding: 20px; }
      .preview { padding: 16px; }
      .pv-block { padding: 14px 12px; }
      .cmp th, .cmp td { padding: 12px 14px; }
    }
    @media (max-width: 480px) {
      .lp-btns .btn { flex: 1 1 100%; }
    }

/* ── PHP 이관 추가분 ─────────────────────────────────────────────── */
/* 크루원 활동 예시 — 요약 줄과 사람 칩 사이 간격 */
.pv-block .goal-row + .people { margin-top: 10px; }
.preview { margin: 0; }