/* ==========================================================================
   랭킹크루 웹 리뉴얼 시안 — 공용 스타일 (design.css)

   목적: 러너온 수준의 러닝 포털로 웹을 리뉴얼하기 위한 정적 시안의 공용 기반.
         이후 모든 시안(크루 찾기·랭킹·코스·도구·로그인 후 셸)이 이 파일 하나를 공유한다.

   색의 출처: 앱 src/constants/theme.ts 의 dark 팔레트.
     웹 운영용 web/assets/css/tokens.css 는 다크 값이 prefers-color-scheme 안에만 있어
     라이트 OS 에서 뒤집힌다. 시안은 다크 고정이므로 값만 1:1 로 옮겨 쓴다.

   잉크 규칙 (guide/DESIGN_RENEWAL_STATUS.md §0)
     - 라임은 '배경'이다. 라임 위 글자·아이콘은 반드시 --on-primary.
     - 어두운 표면 위 라임 글자는 허용 (#C6FF34 on #282830 = 12.36:1).
     - 카드는 테두리를 쓰지 않는다. 테두리는 입력칸·아웃라인 버튼 같은 기능 요소에만.
   ========================================================================== */

:root {
  /* 표면 */
  --bg: #18181A;
  --bg-2: #202027;
  --surface: #282830;
  --surface-2: #30303A;
  --border: #373741;          /* 구분선 전용 (장식) */
  /* 입력칸·아웃라인 버튼 테두리 — 기능 요소라 WCAG 1.4.11 의 3:1 을 지켜야 한다.
     앱 값 #4C4C5B 는 입력 바탕(bg-2) 위 1.92:1 이라 올렸다 (bg-2 3.46 · 카드 3.13) */
  --border-heavy: #737380;

  /* 글자 */
  --text: #FFFFFF;
  --text-2: #A2A2AA;
  /* 3순위 글자. 앱 gray400(#6B6B77)·gray500(#8C8C96) 모두 카드 위 4.5:1 미달이라 교정
     (카드 5.24 · hover 4.68 · bg-2 5.81). --text-2 와 차이가 작으므로 크기·굵기로 위계를 준다 */
  --text-3: #9A9AA4;

  /* 브랜드 */
  --primary: #C6FF34;
  --primary-dark: #A8E024;
  --on-primary: #121020;
  --tint: rgba(198, 255, 52, 0.14);
  --tint-strong: rgba(198, 255, 52, 0.22);

  /*
   * 영역 색 — 막대·차트·활성 탭·제목 아이콘·선택된 알약·내 순위 강조가 따른다.
   * 기본은 브랜드 라임. [data-area="company"] 아래에서만 바이올렛으로 바뀐다 (아래 블록).
   * 본문(main) 안의 주요 버튼도 영역 색을 따른다 — 처음엔 버튼만 라임으로 남겼더니 바이올렛 머리 안에서
   * '기업 설정' 버튼 하나만 튀었다. 헤더·드로어(사이트 공용)의 버튼은 영역과 상관없이 라임.
   */
  --area: var(--primary);
  --area-tint: var(--tint);
  --area-tint-strong: var(--tint-strong);
  --on-area: var(--on-primary);

  /* 상태 */
  --danger-tint: rgba(229, 57, 53, 0.18);
  --danger-text: #FF7A75;
  --up: #3DDC6A;
  --down: #FF5A6E;

  /* 간격 · 반경 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  --container: 1200px;
  --gutter: 24px;
  --header-h: 68px;

  --font: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
          system-ui, 'Apple SD Gothic Neo', sans-serif;
}

/*
 * 기업 영역 — 크루(라임)와 한눈에 구분되도록 바이올렛.
 * 파랑은 쓰지 않는다: 경쟁사 러너온 브랜드색이 #4E8FFF 라 기업 캠페인 화면이 남의 서비스처럼 보인다.
 * 라임과 보색에 가까워 두 영역이 확실히 갈린다. 운영 웹의 '파란 셸 안에 라임 강조' 혼용을 되풀이하지 않도록
 * 영역 안의 강조는 전부 --area 로만 칠한다.
 *
 * 값: #A78BFA 는 틴트 배지 위 글자(인증·내 순위 숫자)가 4.12:1 로 4.5:1 미달이었다 → 한 단계 밝힌 #B09AFB
 *   카드 위 글자 6.17 · 틴트(.16) 위 글자 4.60 · 선택 알약 잉크 7.91 · 막대/트랙 5.51 · 틴트 위 흰 글자 8.89
 */
[data-area="company"] {
  --area: #B09AFB;
  --area-tint: rgba(176, 154, 251, 0.16);
  --area-tint-strong: rgba(176, 154, 251, 0.26);
  --on-area: #121020;
}
/* 본문 주요 버튼 — 잉크 #121020 / #B09AFB = 7.91:1 */
[data-area="company"] main .btn-primary { background: var(--area); color: var(--on-area); }
[data-area="company"] main .btn-primary:hover { background: #9F86F5; }

/* ── 기본 ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  word-break: keep-all;          /* 한국어 어절 단위 줄바꿈 */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--primary); color: var(--on-primary);
  padding: 8px 14px; border-radius: var(--radius-sm); font-weight: 700;
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: 96px; }
.section + .section { padding-top: 0; }
.lime { color: var(--primary); }
.muted { color: var(--text-2); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── 섹션 머리 ───────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary); font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 32px;
}
.section-head h2 { font-size: 32px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }
.section-head p { color: var(--text-2); margin-top: 8px; }
.more {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  color: var(--text-2); font-size: 15px; font-weight: 600;
}
.more:hover { color: var(--text); }

/* ── 버튼 ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: var(--radius-md);
  font-size: 16px; font-weight: 700; white-space: nowrap;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 17px; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { border: 1px solid var(--border-heavy); color: var(--text); font-weight: 600; }
.btn-outline:hover { border-color: var(--text-2); }
.btn-ghost { color: var(--text-2); font-weight: 600; }
.btn-ghost:hover { color: var(--text); }

/* 스토어 버튼 — 공식 배지 이미지가 없어 다크 필 버튼으로 그린다 */
.store-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 20px 0 16px; border-radius: var(--radius-md);
  background: #0E0E10; border: 1px solid var(--border-heavy);
  transition: border-color .15s;
}
.store-btn:hover { border-color: var(--text-2); }
.store-btn i { font-size: 26px; }
.store-btn small { display: block; font-size: 11px; color: var(--text-2); line-height: 1.2; }
.store-btn strong { display: block; font-size: 16px; line-height: 1.25; }

/* ── 헤더 · 메가메뉴 ─────────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  transition: background-color .2s, border-color .2s;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(24, 24, 26, 0.92);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.header-inner { display: flex; align-items: center; height: 100%; gap: 32px; }
.brand img { height: 20px; width: auto; }

.gnb { display: flex; align-items: center; gap: 4px; flex: 1; }
.gnb-item { position: relative; }
.gnb-btn {
  display: inline-flex; align-items: center; gap: 2px;
  height: 40px; padding: 0 14px; border-radius: var(--radius-sm);
  font-size: 16px; font-weight: 600; color: var(--text-2);
}
.gnb-btn i { font-size: 18px; transition: transform .15s; }
.gnb-item.is-open .gnb-btn,
.gnb-btn:hover { color: var(--text); background: var(--surface); }
.gnb-item.is-open .gnb-btn i { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 460px; padding: 10px;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.gnb-item.is-open .mega { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 1025px) {
  .gnb-item:hover .mega { opacity: 1; visibility: visible; transform: none; }
  .gnb-item:hover .gnb-btn { color: var(--text); background: var(--surface); }
}
.mega-link {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border-radius: var(--radius-md);
}
.mega-link:hover { background: var(--surface-2); }
.mega-link i {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--tint); color: var(--primary); font-size: 18px;
}
.mega-link strong { display: block; font-size: 15px; font-weight: 700; }
.mega-link small { display: block; font-size: 13px; color: var(--text-2); line-height: 1.4; }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* 로그인 상태 — '로그인' 자리에 아바타 + 닉네임 (마이페이지·크루·회사 페이지 공용) */
.user-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px 0 4px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; color: var(--text-2);
}
.user-btn:hover, .user-btn[aria-current="page"] { background: var(--surface); color: var(--text); }
.avatar {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--primary); color: var(--on-primary);
  font-size: 14px; font-weight: 800;
}
.menu-toggle {
  display: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
  place-items: center; font-size: 24px;
}

/* 모바일 드로어 */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(360px, 88vw); overflow-y: auto;
  background: var(--bg-2); padding: 16px 20px 32px;
  transform: translateX(100%); transition: transform .25s ease;
}
body.drawer-open { overflow: hidden; }
body.drawer-open .drawer { transform: none; }
body.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-bottom: 8px; }
.drawer-group { padding-block: 12px; border-top: 1px solid var(--border); }
.drawer-group h3 { font-size: 13px; color: var(--text-3); font-weight: 600; margin-bottom: 6px; }
.drawer-group a {
  display: flex; align-items: center; gap: 10px;
  height: 44px; font-size: 16px; font-weight: 600;
}
.drawer-group a i { color: var(--primary); font-size: 18px; }
.drawer-actions { display: grid; gap: 8px; margin-top: 16px; }

/*
 * hidden 속성을 항상 이기게 한다.
 * 브라우저 기본값(display:none)은 작성자 CSS 의 display 보다 약해서, .empty{display:grid}·
 * .mcard{display:flex} 처럼 display 를 지정한 요소는 hidden 을 붙여도 그대로 보였다
 * (시안 렌더링에서 결과가 11개인데 빈 상태가 함께 뜨고, 필터로 숨긴 카드가 남았다).
 */
[hidden] { display: none !important; }

/* ── 카드 · 그리드 ───────────────────────────────────────────────────── */
/*
 * display 는 .card 에서 한 번만 준다. 예전에 a.card{display:block} 을 따로 뒀더니
 * 명시도(0,1,1)가 .mcard{display:flex}(0,1,0)를 이겨 마라톤 카드의 날짜 블록이
 * 옆이 아니라 위로 쌓였다. 같은 명시도로 두면 뒤에 선언된 레이아웃 클래스가 이긴다.
 */
.card { display: block; background: var(--surface); border-radius: var(--radius); padding: 20px; }
a.card { transition: background-color .15s, transform .15s; }
a.card:hover { background: var(--surface-2); transform: translateY(-2px); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ── 배지 · 태그 · 칩 ────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.badge-lime { background: var(--primary); color: var(--on-primary); }
.badge-tint { background: var(--area-tint); color: var(--area); }
.badge-area { background: var(--area); color: var(--on-area); }
.badge-muted { background: var(--surface-2); color: var(--text-2); }
.badge-danger { background: var(--danger-tint); color: var(--danger-text); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border-radius: 6px; background: var(--bg-2); color: var(--text-2);
  font-size: 12px; font-weight: 600;
}

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-row.is-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chip-row.is-scroll::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid transparent;
  color: var(--text-2); font-size: 14px; font-weight: 600;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover { color: var(--text); }
.chip small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.chip.is-active { background: var(--tint); border-color: var(--primary); color: var(--primary); }
.chip.is-active small { color: var(--primary); }

/* ── 알약 탭 (앱 SegmentedTabs 와 같은 규격) ────────────────────────── */
.seg {
  display: inline-flex; gap: 2px; padding: 5px;
  background: var(--surface); border-radius: 24px; max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  /* 높이가 38 로 고정이라 줄바꿈되면 글자가 알약 밖으로 삐져나온다 (390px 계산기 '직접 입력') */
  white-space: nowrap;
  flex-shrink: 0; height: 38px; padding: 0 18px; border-radius: 19px;
  font-size: 15px; font-weight: 600; color: var(--text-2);
  transition: background-color .15s, color .15s;
}
.seg button:hover { color: var(--text); }
.seg button[aria-selected="true"] { background: var(--area); color: var(--on-area); }
.seg-sm button { height: 32px; padding: 0 14px; font-size: 14px; }

/* ── 입력 ────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 8px; }
/* label 도 같은 모양 — 인증 화면은 스크린리더 연결을 위해 span 대신 label[for] 를 쓴다 */
.field > span, .field > label { font-size: 14px; font-weight: 600; color: var(--text-2); }
.input, .select {
  width: 100%; height: 48px; padding: 0 14px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border-heavy); border-radius: var(--radius-md);
  font: inherit; font-size: 16px;
}
.input:focus, .select:focus { outline: none; border-color: var(--primary); }
.select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23A2A2AA'%3E%3Cpath d='M12 16l-6-6h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* ── 랭킹 행 ─────────────────────────────────────────────────────────── */
.rank-list { display: grid; gap: 4px; padding: 0; list-style: none; }
.rank-row {
  display: grid; grid-template-columns: 28px 40px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: var(--radius-md);
}
.rank-row:hover { background: var(--surface-2); }
.rank-no { font-size: 17px; font-weight: 800; text-align: center; color: var(--text-2); }
.rank-row.is-top .rank-no { color: var(--area); }
.crew-logo {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
  color: var(--on-primary);
}
.rank-name strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; }
.rank-name small { display: block; font-size: 13px; color: var(--text-2); }
.rank-score { text-align: right; }
.rank-score strong { display: block; font-size: 15px; font-weight: 700; }
.rank-score small { font-size: 12px; font-weight: 700; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--text-3); }

/* ── 마라톤 카드 (메인·마라톤 페이지 공용) ──────────────────────────── */
.mcard { display: flex; gap: 16px; }
.mcard-date {
  flex-shrink: 0; width: 64px; padding: 10px 0; align-self: flex-start;
  border-radius: var(--radius-md); background: var(--bg-2); text-align: center;
}
.mcard-date .m { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); }
.mcard-date .d { display: block; font-size: 26px; font-weight: 800; line-height: 1.15; }
.mcard-date .w { display: block; font-size: 12px; color: var(--text-3); }
.mcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mcard-top { display: flex; gap: 6px; flex-wrap: wrap; }
.mcard h3 { font-size: 17px; font-weight: 700; line-height: 1.4; }
.meta { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text-2); }
.meta i { font-size: 15px; }
.mcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
}
.status { font-size: 13px; font-weight: 700; }
.status-open { color: var(--primary); }
.status-soon { color: var(--danger-text); }
.status-ready, .status-closed { color: var(--text-2); }
.bookmark {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: var(--text-2); font-size: 18px;
}
.bookmark:hover { background: var(--surface-2); color: var(--primary); }

/* ── 빈 상태 ─────────────────────────────────────────────────────────── */
.empty {
  display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: 56px 24px; background: var(--surface); border-radius: var(--radius);
}
.empty i { font-size: 40px; color: var(--text-3); }
.empty strong { font-size: 18px; }
.empty p { color: var(--text-2); font-size: 15px; }
.empty .btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 8px; max-width: 880px; }
.faq-item { background: var(--surface); border-radius: var(--radius); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { font-size: 22px; color: var(--text-2); transition: transform .2s; }
.faq-item[open] summary i { transform: rotate(45deg); color: var(--primary); }
.faq-a { padding: 0 24px 22px; color: var(--text-2); font-size: 15px; line-height: 1.75; }

/*
 * FAQ 2단 배치 — 왼쪽 제목·고객센터, 오른쪽 질문 목록.
 * 목록만 max-width 880 으로 두었더니 넓은 화면에서 오른쪽이 비고, 제목 줄 끝의
 * '고객센터' 링크만 멀리 떨어져 보였다. 빈 자리를 고객센터 안내로 채운다.
 *
 * 영역 이름으로 배치해 DOM 순서(제목 → 고객센터 → 목록)와 무관하게
 * 좁은 화면에서는 제목 → 목록 → 고객센터 순으로 쌓는다.
 */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  grid-template-areas: "head list" "support list";
  grid-template-rows: auto 1fr;
  column-gap: 56px; row-gap: 24px;
}
.faq-layout .faq { grid-area: list; max-width: none; }
.faq-head { grid-area: head; }
.faq-head h2 { font-size: 32px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }
.faq-head p { color: var(--text-2); margin-top: 12px; }
.support-card {
  grid-area: support; align-self: start;
  display: grid; gap: 10px; padding: 24px;
  background: var(--surface); border-radius: var(--radius);
}
.support-card > i {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--tint); color: var(--primary); font-size: 22px;
}
.support-card strong { font-size: 17px; }
.support-card p { color: var(--text-2); font-size: 14px; }
.support-card .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/*
 * 사진 배경형 — 오른쪽 질문 목록 끝까지 늘려 두 단의 아랫선을 맞춘다.
 * 질문을 펼치면 목록이 길어지고 카드도 함께 늘어난다 (그리드 행이 1fr).
 *
 * 이미지: assets/img/support-runner.webp (PNG 1.3MB → WebP 25KB, PNG 는 WebP 미지원 브라우저 폴백)
 *   1024×1536 · 배경 #151518 · 캐릭터가 이미지 위쪽 4~57% (아래 43% 는 비어 있음)
 *
 * - 캐릭터가 위쪽에 있으므로 위를 기준으로 붙인다 (center top).
 *   예전 center 30% 는 넘치는 높이의 30% 를 위에서 잘라 머리와 글로우가 잘렸다.
 * - 카드 바탕은 이미지 배경색과 같게 두어 이미지 가장자리 이음새를 없애고,
 *   아래쪽은 --surface 로 물들여 오른쪽 질문 카드와 같은 색·같은 아랫선으로 끝낸다.
 *   (페이지 바탕색으로 덮었더니 카드 아래가 페이지에 묻혀 카드 모양이 사라졌다)
 * - 캐릭터가 이미 '문의' 상황을 보여주므로 아이콘 타일은 뺀다.
 */
.support-card.has-photo {
  position: relative; overflow: hidden;
  align-self: stretch; align-content: end; min-height: 300px;
  background: #151518 url("img/support-runner.png") center top / cover no-repeat;
  background-image: image-set(url("img/support-runner.webp") type("image/webp"), url("img/support-runner.png") type("image/png"));
}
.support-card.has-photo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(40, 40, 48, 1) 0%, rgba(40, 40, 48, 1) 44%, rgba(40, 40, 48, 0) 74%);
}
.support-card.has-photo > * { position: relative; }
.support-card.has-photo > i { display: none; }

@media (max-width: 1024px) {
  .faq-layout { grid-template-columns: 1fr; grid-template-areas: "head" "list" "support"; grid-template-rows: auto; }
}
/*
 * 태블릿에서 카드가 한 줄 전체 폭이 되면 가로로 넓어져, 폭 기준 cover 로는 머리만 보인다.
 * 높이 기준으로 키워 오른쪽에 두고, 글자는 왼쪽에서 읽히도록 가로 그라데이션으로 바꾼다.
 */
@media (min-width: 641px) and (max-width: 1024px) {
  .support-card.has-photo { min-height: 320px; background-size: auto 170%; background-position: 88% 0; }
  .support-card.has-photo::before {
    background: linear-gradient(to right,
      rgba(40, 40, 48, 0.98) 0%, rgba(40, 40, 48, 0.94) 45%, rgba(40, 40, 48, 0) 75%);
  }
}
@media (max-width: 768px) {
  .faq-head h2 { font-size: 24px; }
}

/*
 * ── 폰 목업 ────────────────────────────────────────────────────────────
 * 스토어 스크린샷을 통째로 쓰면 이미지 속 폰 프레임까지 같이 줄어 화면이 작고 흐려진다.
 * 화면 부분만 잘라 둔 이미지(img/app-*.jpg, 882×1536)에 프레임은 CSS 로 그린다.
 * 회전(transform: rotate)은 작은 글자를 뭉개므로 쓰지 않는다.
 */
.phone {
  padding: 8px; border-radius: 36px;
  background: #0E0E10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.5);
}
.phone img { display: block; width: 100%; aspect-ratio: 882 / 1536; object-fit: cover; object-position: 50% 0; border-radius: 28px; }

/* ── 푸터 ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--border); padding-block: 56px 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer-brand p { color: var(--text-2); font-size: 14px; margin-top: 14px; max-width: 280px; }
.footer-col h4 { font-size: 14px; color: var(--text); margin-bottom: 14px; }
.footer-col a { display: block; font-size: 14px; color: var(--text-2); padding-block: 5px; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-3);
}
.footer-bottom nav { display: flex; gap: 16px; }
.footer-bottom nav a { color: var(--text-2); }
.footer-bottom nav a strong { color: var(--text); }

/* ── 반응형 ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .gnb, .header-actions .link-login { display: none; }
  /* 닉네임만 숨긴다 — 'span' 전체를 숨겼더니 아바타(span)까지 사라져 빈 알약만 남았다 */
  .user-btn .user-name { display: none; }
  .user-btn { padding: 0 4px; }
  .menu-toggle { display: grid; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  :root { --gutter: 16px; --header-h: 60px; }
  body { font-size: 15px; }
  .section { padding-block: 64px; }
  .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 24px; }
  .section-head h2 { font-size: 24px; }
  .header-actions .btn { display: none; }
  .faq-item summary { padding: 18px; font-size: 16px; }
  .faq-a { padding: 0 18px 18px; }
}
/*
 * 카드 그리드는 폰에서만 1열로 접는다.
 * 768 경계에 함께 두었더니 태블릿 세로(768px)에서 카드가 화면 가득 늘어났다
 * (마라톤 카드 한 장이 700px 폭, 코스 지도는 과하게 커짐). 641~1024 는 2열.
 */
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
/*
 * 미리보기용 3칸 그리드(메인의 '다가오는 마라톤'·'추천 코스')는 태블릿 2열에서
 * 세 번째가 혼자 한 줄을 차지한다. '전체 보기' 링크가 따로 있으므로 두 장만 보여준다.
 * 목록 페이지(마라톤 일정)의 그리드에는 붙이지 않는다 — 거기선 빠지면 안 된다.
 */
@media (min-width: 641px) and (max-width: 1024px) {
  .grid-3.is-preview > :nth-child(3) { display: none; }
}
@media (max-width: 480px) {
  /*
   * 랭킹 행 — 390px 에서 '서울 영등포구 · 42명' 이 두 줄로 꺾였다.
   * 순위·로고·간격을 줄여 한 줄을 확보하고, 그래도 넘치면 말줄임한다.
   * (크루 수를 보여줘야 해서 말줄임은 마지막 수단)
   */
  .rank-row { grid-template-columns: 20px 36px minmax(0, 1fr) auto; gap: 8px; padding: 10px 4px; }
  .crew-logo { width: 36px; height: 36px; font-size: 14px; }
  .rank-score strong { font-size: 14px; }
  .rank-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /*
   * minmax(0, 1fr) — 그냥 1fr 이면 칸의 최소 폭이 내용(줄바꿈 안 되는 'Google Play에서')에 묶여
   * 두 버튼 합이 화면보다 넓어졌고, 그 폭이 부모 그리드 열까지 밀어 히어로 전체가
   * 오른쪽으로 넘쳤다 (390px 실측: 소개 문장·스토어 버튼·랭킹 카드 오른쪽이 잘림).
   */
  .store-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-btn { min-width: 0; padding: 0 12px; }
  .store-btn strong { font-size: 14px; }
  .footer-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
   인증 — 로그인 · 회원가입 · 비밀번호 찾기

   운영(web/login.php · signup.php)은 공개 사이트 셸 안의 카드 한 장이었다.
   시안은 공용 헤더 + 가운데 카드. 한강 크루 사진을 화면 전체에 깔고 카드 뒤를 짙게 덮는다.
   (처음엔 왼쪽 폼 + 오른쪽 사진 2단이었다 — 화면이 반으로 갈려 폼이 한쪽에 쏠리고,
    로고 한 줄짜리 헤더라 다른 리뉴얼 페이지와 따로 놀았으며, 긴 회원가입에선 사진이 세로로 늘어나 인물이 잘렸다)
   체크박스·라디오는 공용에 없어 여기서 처음 정의한다.
   ========================================================================== */
.auth-page {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: grid; justify-items: center; align-content: center; gap: 20px;
  padding: calc(var(--header-h) + 48px) var(--gutter) 56px;
}
/* 사진은 배경 장식 — 카드(불투명)가 글자를 모두 받치므로 대비는 카드 바탕 기준 */
.auth-bg { position: absolute; inset: 0; z-index: -1; background: var(--bg) url("img/hero-crew.webp") 65% 30% / cover no-repeat; }
.auth-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 50% 50%, rgba(24,24,26,.92) 0%, rgba(24,24,26,.8) 55%, rgba(24,24,26,.55) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(24,24,26,0) 22%, rgba(24,24,26,0) 75%, var(--bg) 100%);
}

.auth-card {
  width: 100%; max-width: 440px; padding: 40px 36px; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.auth-card .eyebrow { margin-bottom: 10px; }
.auth-card h1 { font-size: 30px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }
.auth-card .lead { margin-top: 10px; color: var(--text-2); font-size: 15px; }
.auth-form { display: grid; gap: 18px; margin-top: 28px; }
.auth-form .btn { width: 100%; }
.auth-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); }
.auth-links a:hover { color: var(--text); }
.auth-foot { margin-top: 24px; text-align: center; font-size: 14px; color: var(--text-2); }
.auth-foot a { color: var(--text); font-weight: 700; }
/* 카드 밖(사진 배경 위) — 사진이 비치는 자리라 --text-3 대신 --text-2 */
.auth-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 13px; color: var(--text-2); }
.auth-legal a:hover { color: var(--text); }

/* 입력 보조 */
.field-row { display: flex; gap: 8px; }
.field-row .input { flex: 1; min-width: 0; }
.field-row .btn { flex-shrink: 0; width: auto; }
.field-hint { font-size: 13px; color: var(--text-3); }
.field-error { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--danger-text); }
.field-error i { font-size: 15px; }
.input.is-error { border-color: var(--danger-text); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 48px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: var(--text-2); font-size: 18px;
}
.pw-toggle:hover { color: var(--text); background: var(--surface-2); }

/* 안내 줄 — 운영은 toastr 로만 알려 줘서 무엇이 잘못됐는지 화면에 남지 않았다 */
.form-msg { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.55; }
.form-msg i { flex-shrink: 0; font-size: 18px; }
.form-msg-error { background: var(--danger-tint); color: var(--danger-text); }
.form-msg-info { background: var(--bg-2); color: var(--text-2); }
.form-msg-ok { background: var(--tint); color: var(--primary); }

/* 체크박스 · 라디오 */
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--text-2); cursor: pointer; }
.check input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 0;
  width: 20px; height: 20px; border: 1px solid var(--border-heavy); border-radius: 6px;
  background: var(--bg-2); display: grid; place-items: center; cursor: pointer;
}
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background-color: var(--primary); border-color: var(--primary); }
.check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23121020'%3E%3Cpath d='M9.6 16.6 4.8 11.8l1.4-1.4 3.4 3.4 8-8 1.4 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 16px;
}
.check input[type="radio"]:checked::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--on-primary); }
.check a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.check-all { padding: 14px; border-radius: var(--radius-md); background: var(--bg-2); font-size: 15px; font-weight: 700; color: var(--text); }
.terms-list { display: grid; gap: 12px; margin: 12px 0 0 4px; }
.terms-list .muted { margin-left: auto; font-size: 13px; }

/* 소셜 로그인 */
.divider-or { display: flex; align-items: center; gap: 12px; margin: 24px 0; font-size: 13px; color: var(--text-3); }
.divider-or::before, .divider-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.sns-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
/* 카드(surface) 위에 올라가므로 한 단계 어두운 bg-2 — surface 로 두면 버튼 윤곽이 사라진다 */
.sns-btn { display: grid; place-items: center; height: 52px; border-radius: var(--radius-md); background: var(--bg-2); transition: background-color .15s; }
.sns-btn:hover { background: var(--surface-2); }
.sns-btn img { width: 26px; height: 26px; }

/* 단계 표시 (비밀번호 찾기) */
/* ol 이라 기본 번호(1. 2.)가 원 아래 따로 찍혔다 — 목록 표시를 끈다 (공용 리셋은 ul 만 한다) */
.wizard { display: flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.wizard-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.wizard-step b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 700; }
.wizard-step.is-on { color: var(--text); }
.wizard-step.is-on b { background: var(--primary); color: var(--on-primary); }
.wizard-line { flex: 1; height: 1px; background: var(--border); }

@media (max-width: 480px) {
  /* 세로 가운데 정렬이면 긴 화면에서 카드 위에 빈 사진 영역이 크게 남는다 → 위부터 붙인다 */
  .auth-page { align-content: start; padding-top: calc(var(--header-h) + 24px); padding-bottom: 40px; }
  .auth-card { padding: 28px 20px; }
  .auth-card h1 { font-size: 26px; }
  .sns-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   로그인 후 공용 — 마이페이지(mypage) · 크루 홈(crew) · 회사 홈(company)

   운영 웹은 셋 다 좌측 사이드바 셸이었고 사이드바 색만 초록(크루)·파랑(회사)으로 달랐다.
   시안은 공개 사이트와 같은 헤더 + 페이지 머리 + 가로 탭으로 통일한다.
   영역 구분은 색이 아니라 머리(프로필 / 크루 로고 / 회사 로고)로 한다 —
   회사 크루도 /crew/ 경로라 초록으로 나오던 불일치가 함께 사라진다.
   ========================================================================== */
.page-head { padding: calc(var(--header-h) + 40px) 0 0; }
.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--text-3); margin-bottom: 16px; }
.crumb a:hover { color: var(--text); }

.bar { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.bar i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--area); }
.bar-lg { height: 10px; }

/* 페이지 탭 — 운영 사이드바 메뉴를 가로로. 스크롤해도 헤더 아래 붙는다 */
.acc-tabs {
  position: sticky; top: var(--header-h); z-index: 40; margin-top: 28px;
  background: rgba(24, 24, 26, 0.94); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.acc-tabs .container { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.acc-tabs .container::-webkit-scrollbar { display: none; }
.acc-tab {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 52px; padding: 0 14px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 15px; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.acc-tab i { font-size: 17px; }
.acc-tab:hover { color: var(--text); }
.acc-tab[aria-current="page"] { color: var(--text); border-bottom-color: var(--area); }
.acc-tab[aria-current="page"] i { color: var(--area); }
.acc-tab .count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--danger-tint); color: var(--danger-text);
  font-size: 12px; font-weight: 700;
}
.acc-tab-sep { flex-shrink: 0; align-self: center; width: 1px; height: 20px; margin: 0 6px; background: var(--border); }

/* 크루·회사 머리 — 로고 + 이름 + 칩 + 소개 + 동작 */
.space { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.space-logo {
  flex-shrink: 0; width: 80px; height: 80px; border-radius: 24px;
  display: grid; place-items: center; font-size: 32px; font-weight: 800; color: var(--on-primary);
}
.space-main { flex: 1; min-width: 0; }
.space h1 { font-size: 32px; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; }
.space-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.space-desc { max-width: 640px; margin-top: 8px; font-size: 15px; color: var(--text-2); }
.space-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/*
 * 운영진·관리자 화면 ↔ 구성원 화면 미리보기.
 * 운영에는 크루원 화면(?view=member)이 있었지만 들어가는 링크가 없어 URL 을 직접 쳐야 했다.
 * body[data-role] 하나로 운영 전용(.only-admin)·구성원 전용(.only-member) 요소를 켜고 끈다 (design.js).
 */
.role-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 20px; padding: 8px 8px 8px 16px; border-radius: var(--radius-md);
  background: var(--surface); font-size: 14px; color: var(--text-2);
}
.role-bar b { color: var(--text); }
body[data-role="member"] .only-admin { display: none !important; }
body:not([data-role="member"]) .only-member { display: none !important; }

/* 열을 minmax(0,1fr) 로 고정 — 기본 auto 열은 자식 내용 폭에 끌려 늘어나 390px 에서 본문이 448px 로 넘쳤다 (마이페이지 시안 확인 막대) */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 32px 96px; }
.label { font-size: 14px; font-weight: 600; color: var(--text-2); }

/* ── 이번 주 요약 카드 (왼쪽 숫자·목표, 오른쪽 차트/순위) ── */
.week { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; padding: 28px; border-radius: var(--radius-lg); }
.week-num { margin-top: 4px; font-size: 48px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.week-num small { margin-left: 4px; font-size: 18px; font-weight: 600; color: var(--text-2); }
.goal-row { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 8px; font-size: 13px; color: var(--text-2); }
.goal-row b { color: var(--text); }
.week-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.mini-stat { padding: 14px; border-radius: var(--radius-md); background: var(--bg-2); }
.mini-stat small { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-2); }
.mini-stat small i { color: var(--area); }
.mini-stat strong { display: block; margin: 2px 0 8px; font-size: 20px; font-weight: 800; }
.mini-stat strong span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.mini-stat p { font-size: 12px; color: var(--text-3); }

.wk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.wk-head small { font-size: 13px; color: var(--text-3); }
.wk-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; height: 220px; margin: 0; padding: 0; list-style: none; }
.wk-chart.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wk-col { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; text-align: center; }
.wk-val { font-size: 12px; font-weight: 600; color: var(--text-2); }
.wk-track { display: flex; align-items: flex-end; border-radius: 8px; background: var(--bg-2); overflow: hidden; }
.wk-track i { display: block; width: 100%; height: var(--h); border-radius: 8px; background: var(--area); }
.wk-day { font-size: 13px; font-weight: 600; color: var(--text-3); }
.wk-col.is-today .wk-day { color: var(--area); }
.wk-col.is-today .wk-track { box-shadow: inset 0 0 0 1px var(--area); }
.wk-col.is-future .wk-track { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }

/* ── KPI ── */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi small { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.kpi small i { font-size: 16px; color: var(--area); }
.kpi strong { display: block; margin-top: 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.kpi strong span { margin-left: 2px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.kpi p { font-size: 13px; color: var(--text-3); }

/* ── 본문 2단 · 패널 ── */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
/* 단 안의 카드도 내용 폭에 끌려 늘어나지 않게 — .dash · .dash-grid 와 같은 이유 */
.col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.panel { padding: 24px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; }
.panel-head h2 i { font-size: 20px; color: var(--area); }
.panel-head p { font-size: 13px; color: var(--text-2); }
.panel-head .more { font-size: 14px; }
.panel-foot { margin-top: 12px; font-size: 13px; color: var(--text-3); }
/* 열을 정하지 않으면 암시적 열이 min-content 로 잡혀, 띄어쓰기 없는 긴 이름이 카드를 화면 밖으로 밀어낸다 (.dash·.col 과 같은 보호) */
.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.go { font-size: 18px; color: var(--text-3); }

/* 날짜 블록 (러닝 기록·다가오는 대회) */
.run-date { padding: 6px 0; border-radius: 10px; background: var(--bg-2); text-align: center; line-height: 1.2; }
.run-date b { display: block; font-size: 18px; }
.run-date small { font-size: 11px; color: var(--text-2); }

/* 진행 중 미니대회 행 */
.contest { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius-md); background: var(--bg-2); }
a.contest:hover { background: var(--surface-2); }
.ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--area-tint); color: var(--area); font-size: 22px; }
.contest h3 { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contest small { display: block; font-size: 13px; color: var(--text-2); }
.contest .bar { margin-top: 8px; }
.contest-rank { text-align: right; line-height: 1.3; }
.contest-rank strong { display: block; font-size: 20px; font-weight: 800; color: var(--area); }
.contest-rank small { font-size: 12px; color: var(--text-2); }

/* 다가오는 대회 행 — 운영 기업 홈·크루 홈에서 눌리지 않던 행 */
.event { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px; border-radius: var(--radius-md); }
.event:hover { background: var(--surface-2); }
.event-main { min-width: 0; }
.event-main strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-main small { display: block; font-size: 13px; color: var(--text-2); }
.event-d { text-align: right; line-height: 1.3; }
.event-d strong { display: block; font-size: 15px; color: var(--area); }
.event-d small { font-size: 12px; color: var(--text-3); }

/* 크루·회사 카드 (마이페이지 내 크루·내 기업) */
/* 그리드 칸(.list) 안에서 줄어들 수 있어야 한다 — 기본 min-width:auto 면 안쪽 긴 글자만큼 칸 밖으로 밀린다 */
.crew { display: block; min-width: 0; padding: 14px; border-radius: var(--radius-md); background: var(--bg-2); transition: background-color .15s; }
a.crew:hover { background: var(--surface-2); }
.crew-top { display: flex; align-items: center; gap: 12px; }
.crew-name { flex: 1; min-width: 0; }
/* flex 자식은 기본 min-width:auto 라 긴 이름이 줄어들지 않는다 — 안쪽 span 의 말줄임이 먹으려면 여기도 0 이어야 한다 */
.crew-name strong { display: flex; align-items: center; gap: 6px; font-size: 15px; min-width: 0; }
.crew-name strong span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* .tag 기본 바탕(bg-2)이 크루 카드 바탕과 같아 글자만 떠 보였다 */
.crew-name strong .tag { flex-shrink: 0; overflow: visible; background: var(--surface-2); }
.crew-name small { display: block; font-size: 13px; color: var(--text-2); }
.crew-notice {
  display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2);
}
/* 공지 제목은 한 줄로 줄인다. 한국어는 word-break:keep-all 로 어절 단위로만 끊겨,
   제목이 길면 최소 폭이 그대로 카드 폭이 되어 오른쪽 단(380px) 밖으로 밀려 잘렸다 (2026-09-16) */
.crew-notice span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-notice time { flex-shrink: 0; margin-left: auto; }
.crew-notice i { flex-shrink: 0; color: var(--area); }
.crew-notice span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-notice time { flex-shrink: 0; color: var(--text-3); }
.logo-co { background: var(--area-tint-strong); color: var(--area); font-size: 20px; }
.space-logo.logo-co { font-size: 36px; }

/* 러너 행 (팔로잉) */
.runner { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-md); }
.runner:hover { background: var(--surface-2); }
.runner .avatar { width: 36px; height: 36px; }
.runner div { flex: 1; min-width: 0; }
.runner strong { display: block; font-size: 15px; }
.runner small { font-size: 13px; color: var(--text-2); }

/* 순위 — 내 행 강조 (운영 크루장 홈 랭킹에는 내 행·메달이 없었다) */
.rank-row.is-me { background: var(--area-tint); }
.rank-row.is-me:hover { background: var(--area-tint-strong); }
.rank-row.is-me .rank-no { color: var(--area); }
.rank-gap { padding: 2px 0; text-align: center; font-size: 13px; color: var(--text-3); }

/* 크루 피드 — 크루장·크루원 화면에서 반응·응원 방식이 달랐던 것을 하나로 */
.feed-item { padding: 14px 0; border-top: 1px solid var(--border); }
.feed-item:first-child { padding-top: 0; border-top: 0; }
.feed-top { display: flex; align-items: center; gap: 10px; }
.feed-top .avatar { width: 36px; height: 36px; }
.feed-top div { flex: 1; min-width: 0; }
.feed-top strong { display: block; font-size: 15px; }
.feed-top small { display: block; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0 46px; }
.feed-stats span { padding: 8px 10px; border-radius: 10px; background: var(--bg-2); }
.feed-stats small { display: block; font-size: 12px; color: var(--text-2); }
.feed-stats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.feed-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 46px; }
.react {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px;
  border-radius: var(--radius-pill); background: var(--bg-2); color: var(--text-2);
  font-size: 13px; font-weight: 600; transition: background-color .15s, color .15s;
}
.react i { font-size: 15px; }
.react:hover { color: var(--text); }
.react[aria-pressed="true"] { background: var(--area-tint); color: var(--area); }

/* 글 행 (크루 공지·게시판) */
.post { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 10px; border-radius: var(--radius-md); }
.post:hover { background: var(--surface-2); }
.post strong { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; }
.post strong .badge { flex-shrink: 0; }
.post-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post small { grid-column: 1; font-size: 13px; color: var(--text-2); }
.post .go { grid-column: 2; grid-row: 1 / 3; }

/* 사람 칩 (운영진·크루원·미참여자) */
.people { display: flex; flex-wrap: wrap; gap: 8px; }
.person {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  height: 40px; padding: 0 14px 0 4px; border-radius: var(--radius-pill);
  background: var(--bg-2); font-size: 14px; font-weight: 600;
}
a.person:hover { background: var(--surface-2); }
.person .avatar { width: 32px; height: 32px; font-size: 13px; }
.person small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.person.is-more { padding: 0 14px; color: var(--text-2); }

/* 운영 할 일 (가입 신청 · 미참여) */
.todo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.req { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.req:first-child { border-top: 0; padding-top: 0; }
.req .avatar { width: 40px; height: 40px; }
.req div:not(.btns) { flex: 1; min-width: 0; }
.req strong { display: block; font-size: 15px; }
.req small { display: block; font-size: 13px; color: var(--text-2); }
.req .btns { display: flex; gap: 6px; }

/* 가로 막대 행 (크루별 활동) */
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 10px; border-radius: var(--radius-md); }
.hbar:hover { background: var(--surface-2); }
.hbar strong { min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar b { font-variant-numeric: tabular-nums; }
.hbar .bar, .hbar small { grid-column: 1 / -1; }
.hbar small { font-size: 12px; color: var(--text-3); }

/* 위험 동작 (탈퇴) */
.danger-zone {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--border);
  font-size: 14px; color: var(--text-2);
}
.danger-zone strong { display: block; font-size: 15px; color: var(--text); }
.btn-danger { border: 1px solid var(--danger-text); color: var(--danger-text); font-weight: 600; }
.btn-danger:hover { background: var(--danger-tint); }

.acc-foot { display: flex; justify-content: flex-end; gap: 16px; font-size: 13px; color: var(--text-3); }
.acc-foot a:hover { color: var(--text); }

@media (max-width: 1024px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .week { grid-template-columns: 1fr; gap: 28px; }
}
/* 한 줄로 쌓인 태블릿에서 오른쪽 단 카드를 2열로 — 순위·대회 카드가 화면 폭 가득 늘어나지 않게 */
@media (min-width: 641px) and (max-width: 1024px) {
  .col-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 768px) {
  .page-head { padding-top: calc(var(--header-h) + 28px); }
  .space-logo { width: 60px; height: 60px; border-radius: 18px; font-size: 24px; }
  .space-logo.logo-co { font-size: 28px; }
  .space h1 { font-size: 26px; }
  .space-actions { width: 100%; }
  .space-actions .btn { flex: 1; }
  .week { padding: 20px; }
  .week-num { font-size: 40px; }
  .wk-chart { height: 180px; gap: 6px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi strong { font-size: 22px; }
  .panel { padding: 20px; }
  .todo { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .week-sub { gap: 8px; }
  .mini-stat { padding: 12px; }
  .feed-stats, .feed-acts { margin-left: 0; }
  .role-bar { padding: 12px; }
  .role-bar .seg { display: flex; width: 100%; }
  .role-bar .seg button { flex: 1; }
  .req { flex-wrap: wrap; }
  .req .btns { width: 100%; }
  .req .btns .btn { flex: 1; }
}

/* ==========================================================================
   모달 — 네이티브 <dialog> + showModal()
   포커스 가두기·ESC·배경 비활성을 브라우저가 맡는다. 열려 있는 동안 페이지 스크롤을 막는다.
   ========================================================================== */
.modal {
  width: min(420px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; margin: auto;
  border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); overflow: auto;
}
.modal::backdrop { background: rgba(0, 0, 0, 0.62); }
.modal[open] { animation: modal-in .2s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
html:has(.modal[open]) { overflow: hidden; }
.modal-body { display: grid; gap: 16px; padding: 28px 24px 24px; text-align: center; }
.modal-body .form-msg { text-align: left; }
.modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.modal-actions.is-single { grid-template-columns: minmax(0, 1fr); }
.modal-actions .btn { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .modal[open] { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}