/* brand.smaxh.com/matches — 매치 탭(지금 열린 매치 · 소셜매치 · 티어매치). Brand tokens from styles.css.
   Purple only on the app buttons; selected chips are black (앱 화면 원칙). Phone first; 960px and up is the desktop layout. */

.mt-h2{font-weight:800;font-size:22px;line-height:1.35;letter-spacing:-.03em}
.mt-h2--lg{font-size:26px}
.mt-note{font-size:14px;line-height:20px;color:var(--mute)}
.mt-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-eyebrow{display:inline-block;font-size:14px;line-height:20px;font-weight:700;letter-spacing:-.01em;padding:4px 12px;border-radius:999px;background:var(--tile);color:var(--ink);margin-bottom:16px}

/* ---------- list hero (검색 착지, like the lesson · court tabs): crew photo + H1 + one line, the cards right below.
   Phone: the photo cut wide so all three people show, the copy under it. Desktop: the photo across the page, copy on the wall at left. */
.mt-hero{position:relative;isolation:isolate}
.mt-hero__ph{display:block;aspect-ratio:1080/692;overflow:hidden;background:var(--tile)}
.mt-hero__ph img{display:block;width:100%;height:100%;object-fit:cover}
.mt-hero__in{padding-top:20px;padding-bottom:4px}
.mt-hero__h1{font-weight:800;font-size:28px;line-height:1.3;letter-spacing:-.035em}
.mt-hero__sub{font-size:16px;line-height:1.55;color:var(--sub);margin-top:6px}

/* ---------- now: area chips + v2 match cards */
.mt-now{padding:28px 0 56px}
.mt-now__hd{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.mt-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px var(--g) 4px;margin:0 calc(-1 * var(--g));-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 24px),transparent 100%)}
.mt-chips::-webkit-scrollbar{display:none}
.mt-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;border:1px solid #DDDDDD;border-radius:999px;background:#fff;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.mt-chip span{font-weight:500;color:var(--mute);font-variant-numeric:tabular-nums}
.mt-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mt-chip[aria-pressed="true"] span{color:rgba(255,255,255,.72)}
@media (hover:hover){.mt-chip:hover{border-color:var(--ink)}}

.mt-list{display:grid;gap:20px;margin-top:20px;list-style:none}
.mt-list>li{min-width:0}
.mt-list>li[hidden]{display:none}
/* 홈 개편(v2) 'Card · 매치' type=리스트: 사진 131×121(13:12 의 90%) · 둥근 16 · 오른쪽 글 다섯 줄 */
.mt-card{display:grid;grid-template-columns:131px minmax(0,1fr);gap:14px;align-items:center;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mt-card__ph{display:block;width:131px;aspect-ratio:13/12;border-radius:16px;overflow:hidden;background:var(--tile);transition:transform .15s var(--ease)}
.mt-card__ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mt-card:active .mt-card__ph,.mt-card.is-going .mt-card__ph{transform:scale(.97)}
.mt-card.is-going{opacity:.72;transition:opacity .12s}
.mt-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.mt-card__top{display:block;font-size:14px;line-height:20px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.mt-card__fee{margin-top:2px;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.mt-card__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;line-height:22px;font-weight:600;letter-spacing:-.02em}
.mt-card__where{font-size:14px;line-height:20px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-card__game{display:flex;align-items:flex-start;gap:5px;font-size:14px;line-height:20px;color:var(--mute)}
.mt-card__game svg{flex:none;margin-top:4px}
.mt-empty{margin-top:20px;padding:20px;border-radius:16px;background:var(--tile);font-size:15px;line-height:1.5;color:var(--sub);text-align:center}
.mt-now__cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:28px}
.mt-now__cta .btn{width:auto}
.mt-now__cta .mt-note{text-align:center}

/* ---------- two kinds of match: one line each, before the list (what you get, then where/when) */
.mt-kinds{padding:0 0 56px}
.mt-kinds__t{font-size:17px;line-height:24px;font-weight:700}
.mt-kinds__list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;list-style:none}
.mt-kind{position:relative;display:flex;flex-direction:column;gap:4px;min-height:100%;padding:18px 40px 20px 18px;border-radius:16px;background:var(--tile);color:inherit;text-decoration:none;transition:transform .15s var(--ease)}
.mt-kind:active{transform:scale(.98)}
.mt-kind__go{position:absolute;right:16px;top:18px;font-size:17px;line-height:24px;font-weight:700}
.mt-kind__name{font-size:17px;line-height:24px;font-weight:700}
.mt-kind__d{font-size:14px;line-height:20px;color:var(--sub)}
@media (hover:hover){.mt-kind:hover{background:#eaeaea}}

/* ---------- how to join */
/* 단계 카드 틀(.mt-step · 결과 줄 · 결제 완료)은 styles.css — 레슨 · 코트 상세도 같이 쓴다. 여기는 매치만의 조각(검색 · 칩 · 확정 · 채팅) */
/* 판 안 조각 — 앱 표면처럼 흰 바탕 + 옅은 그림자 */
.mt-sa__search,.mt-sa__bubble{background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.07)}
.mt-sa__search{display:flex;align-items:center;gap:10px;width:100%;max-width:300px;height:52px;padding:0 18px;border-radius:999px;font-size:16px;line-height:22px;font-weight:600;color:#222226}
.mt-sa__search svg{flex:none}
.mt-sa__chips{display:flex;gap:8px;max-width:100%}
.mt-sa__chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;line-height:20px;font-weight:600;white-space:nowrap}
.mt-sa__chip.is-on{background:#222226;border-color:#222226;color:#fff}
.mt-sa__ok{display:flex;align-items:center;gap:12px}
.mt-sa__faces{display:flex}
.mt-sa__faces img{width:40px;height:40px;margin-left:-10px;border:2px solid var(--tile);border-radius:50%;object-fit:cover;background:#fff}
.mt-sa__faces img:first-child{margin-left:0}
.mt-sa__tag{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:8px;background:#222226;color:#fff;font-size:14px;line-height:20px;font-weight:700}
.mt-sa__bubble{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:10px 16px 10px 12px;border-radius:18px 18px 18px 6px;font-size:15px;line-height:22px;font-weight:500;color:#222226}
.mt-sa__bubble svg{flex:none;width:22px;height:22px}

/* ---------- FAQ */
.mt-faq__list{margin-top:12px;border-top:1px solid var(--line)}
.mt-q{border-bottom:1px solid var(--line)}
.mt-q summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:16px 0;font-size:16px;line-height:1.5;font-weight:600;cursor:pointer;list-style:none}
.mt-q summary::-webkit-details-marker{display:none}
.mt-q summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.mt-q[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.mt-q p{padding:0 0 18px;font-size:15px;line-height:1.65;color:var(--sub)}

/* ---------- end */
.mt-end__h2{font-weight:800;font-size:28px;line-height:1.3;letter-spacing:-.035em}
.mt-end .hero__cta{margin-top:24px}

/* ---------- social / tier pages */
.mt-thero{padding:20px 0 40px}
.mt-thero__h1{font-weight:800;font-size:32px;line-height:1.28;letter-spacing:-.035em}
.mt-thero__sub{font-size:17px;line-height:1.6;color:var(--sub);margin-top:12px;max-width:520px}
.mt-thero .hero__cta{margin-top:20px}
.mt-thero__art{margin:28px auto 0;max-width:340px}
.mt-thero__art img{width:100%;height:auto}
.mt-wl__cards img{width:100%;height:auto}
.mt-block__copy .lead{margin-top:12px}
.mt-wl__box{position:relative;margin-top:20px}
.mt-wl__box>.mt-tag{position:absolute;left:0;top:-2px;z-index:1}
.mt-wl__cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:34px;list-style:none}
.mt-ladder__list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 8px;margin-top:20px;list-style:none}
.mt-ladder__list li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.mt-ladder__list img{width:64px;height:64px}
.mt-ladder__list span{font-size:14px;line-height:20px;font-weight:600;white-space:nowrap}
.mt-now--type{padding-top:var(--sec)}
.mt-other__link{display:flex;flex-direction:column;gap:2px;padding:20px;border-radius:20px;background:var(--tile);color:inherit;text-decoration:none}
.mt-other__link b{font-size:18px;line-height:26px;font-weight:700;letter-spacing:-.02em}

/* ---------- desktop */
@media (min-width:960px){
  .mt-h2{font-size:28px}
  .mt-h2--lg{font-size:36px;line-height:1.3}
  /* 사진 칸 높이: 레슨 · 코트와 같은 식(대표 2026-11-10 '매치 사이즈에 다 맞춰줘')을 쓰되, 이 사진(1800×764 · 2.36:1)에서 세 사람이 다 보이는 비율
     안으로만 — 칸 가로 : 세로가 2.9 넘으면(넓은 화면) 위아래가 잘려 발 · 라켓이 빠지고, 2.36 밑이면(1024 같은 좁은 창) 오른쪽 남자 등이 잘린다.
     그래서 높이 = 폭 ÷ 2.9 ~ 폭 ÷ 2.36 사이(디자인 리드 점검 2026-11-12: 1280×720 · 1920×1080 발 · 라켓 잘림, 1024 오른쪽 남자 등 23% 잘림).
     위아래 자리(78%) = 원본에서 오른쪽 남자 머리 위(y 128)부터 왼쪽 라켓 아래(y 718)까지가 들어가는 자리.
     --mt-s = 사진 배율(cover) · --mt-x = 글 시작 · --mt-a = 글 시작 → 왼쪽 남자 어깨(원본 x 670)에서 24px 앞까지(제목 · 글 덩어리 폭의 끝) */
  .mt-hero{--mt-h:clamp(calc(100vw / 2.9),clamp(440px,calc(100vh - 300px),560px),calc(100vw / 2.36));--mt-s:max(100vw / 1800,var(--mt-h) / 764);--mt-x:max(var(--g),min(50vw - 600px,18.75vw));--mt-a:calc(var(--mt-s) * 670 * var(--mt-zoom,1) - var(--mt-x) - 24px);display:flex;align-items:center;min-height:var(--mt-h);color:#fff;overflow:hidden}
  .mt-hero__ph{position:absolute;inset:0;aspect-ratio:auto;z-index:-1}
  .mt-hero__ph img{object-position:100% 78%}
  .mt-hero__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,17,17,.72) 0%,rgba(17,17,17,.5) 26%,rgba(17,17,17,.12) 40%,rgba(17,17,17,0) 52%)}
  .mt-hero__in{width:100%;padding-top:48px;padding-bottom:48px}
  /* 1920보다 넓은 화면: 글 칸이 가운데 1200 칸을 따라가면(2560이면 x 680) 폭에 비례해 커지는 사진 속 사람에 닿는다 → 글 시작을 1920과 같은 비율(18.75vw)로. 1920까지는 그대로 */
  @media (min-width:1921px){.mt-hero__in{max-width:none;padding-left:18.75vw}}
  /* 글 덩어리는 사진의 같은 줄(원본 y 365 — 예전 40% 자리에서 글 가운데가 놓이던 줄, 왼쪽 남자 목 · 어깨)에 맞춰 둔다. 사진을 78%로 올려 발 · 라켓을 살리면
     칸 가운데에 둔 글이 사람의 어깨 · 팔 높이로 내려가 제목 끝이 사람에 붙었다(긴 언어는 겹침). 이동 = 0.78h − 764·0.78s + 365s − h/2 */
  .mt-hero__copy{max-width:min(420px,var(--mt-a));text-shadow:0 1px 18px rgba(0,0,0,.3);transform:translateY(calc(.28 * var(--mt-h) - 230.92 * var(--mt-s)))}
  /* 제목은 44px, 다만 가장 긴 줄이 --mt-a를 넘으면 그만큼만 작게 — 긴 언어(fr · ru · ms …)가 1024 · 1920에서 사람에 겹쳤다
     (디자인 리드 2026-11-12 '글이 긴 언어는 겹칠 수 있음'). --mt-em = 그 언어 제목의 가장 긴 줄 ÷ 글자 크기(아래 언어별) */
  .mt-hero__h1{font-size:min(44px,calc(var(--mt-a) / var(--mt-em,9.6)));line-height:1.22}
  .mt-hero__sub{font-size:18px;color:rgba(255,255,255,.92);margin-top:14px}
  /* 본문 줄 끝 → 왼쪽 남자 소매(원본 x 655) 32px 넘게(1024 · 1920에서 6–8px까지 붙었음 — 디자인 리드 2026-11-12). 들어가지 않으면 두 줄로(text-wrap:balance) */
  .mt-hero__sub{max-width:max(240px,calc(var(--mt-s) * 655 - var(--mt-x) - 32px))}
  .mt-now{padding:40px 0 88px}
  .mt-chips{flex-wrap:wrap;overflow:visible;padding:0;margin:0;-webkit-mask-image:none;mask-image:none;gap:8px 6px}
  .mt-chip{height:44px;padding:0 14px;font-size:14px}
  .mt-list{grid-template-columns:1fr 1fr;gap:28px 48px;margin-top:28px}
  .mt-card{grid-template-columns:200px minmax(0,1fr);gap:20px}
  .mt-card__ph{width:200px}
  .mt-card__t{font-size:17px}
  .mt-now__cta{flex-direction:row;align-items:center;gap:16px}
  .mt-now__cta .btn{width:auto}
  .mt-kinds{padding-bottom:88px}
  .mt-kinds .wrap>*{max-width:820px}
  .mt-kinds__t{font-size:19px;line-height:28px}
  .mt-kinds__list{grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
  .mt-kind{flex-direction:row;align-items:center;gap:14px;min-height:80px;padding:16px 28px}
  .mt-kind__name{font-size:19px;line-height:26px}
  .mt-kind__d{font-size:16px;line-height:22px}
  .mt-kind__go{position:static;margin-left:auto;font-size:20px}
  .mt-sa__search{max-width:320px;height:56px;font-size:17px}
  .mt-sa__chip{height:40px;padding:0 16px;font-size:15px}
  .mt-sa__faces img{width:48px;height:48px;margin-left:-12px}
  .mt-sa__tag{height:36px;font-size:15px}
  .mt-sa__bubble{font-size:16px;line-height:24px;padding:12px 18px 12px 14px}
  .mt-faq__list{max-width:820px}
  .mt-end__h2{font-size:44px;line-height:1.2}
  .mt-thero{display:flex;align-items:center;min-height:clamp(520px,calc(100vh - 200px),680px);padding:40px 0 56px}
  .mt-thero>.wrap{width:100%}
  /* 소셜 · 티어 페이지도 머리글 · 목록 페이지와 같은 폭(1200). 글 칸을 5, 그림 칸을 7로 — 글 끝과 그림 사이가 비지 않게(화면 폭 15% 안). */
  .mt-thero__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
  .mt-thero--tier .mt-thero__in{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .mt-thero__art{display:flex;justify-content:center;align-items:center;padding:32px;border-radius:28px;background:var(--tile)}
  .mt-thero__art .mt-app{width:100%;margin:0}
  .mt-thero__h1{font-size:48px;line-height:1.2}
  .mt-thero__sub{font-size:19px}
  .mt-thero__art{margin:0;max-width:none}

  .mt-thero .hero__cta{margin-top:32px}
  .mt-wl__box{margin-top:0}
  .mt-ladder__list{gap:24px 12px}
  .mt-ladder__list img{width:72px;height:72px}
  .mt-ladder__list span{font-size:15px}
  .mt-other__link{flex-direction:row;align-items:center;gap:16px;padding:24px 28px;max-width:560px}
}
@media (hover:hover) and (min-width:960px){.mt-card:hover .mt-card__ph img{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.mt-card__ph,.mt-card__ph img{transition:none}}
/* ---------- 카드 → 상세: 누른 카드 사진이 그대로 커져 상세 사진이 된다(대표 2026-11-10 '이거 너무 빠르게 떠 · 좀 더 자연스러웠으면 · 지금 되게 급하게 뜨는 느낌' —
   목록은 화면 전환을 안 받아 상세가 회색 칸으로 뜬 뒤 큰 사진이 툭 들어왔다). 이름은 누른 카드에만(app.js is-going) — 다른 카드 · 근처 코트는 따라 날지 않는다.
   상세 → 목록 · 다른 상세로 갈 땐 상세 사진에 짝이 없어 제자리에서 흐려진다. 뒤로 · 앞으로는 전환 없이(layouts/brand.njk). */
@view-transition{navigation:auto}
.mt-card.is-going .mt-card__ph{view-transition-name:var(--vt,none);view-transition-class:mc-ph}
.mc-gal .ls-gal{view-transition-class:mc-ph}
.mc-gal .ls-gal img{background-size:cover;background-position:center} /* 큰 사진 전엔 목록 사진(c<id>.webp)이 바탕 */
::view-transition-group(*.mc-ph){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,.8,.24,1)}
::view-transition-old(*.mc-ph),::view-transition-new(*.mc-ph){animation-duration:.45s;animation-timing-function:ease-out}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- 앱 화면 조각 (HTML · 피그마 '소셜매치 랜딩' · '티어매치 랜딩' 원본 모양, 글자 14px+) */
.mt-app{display:block;background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.08);padding:24px 20px;color:#222226;text-align:left}
.mt-rv__h{display:flex;align-items:center;gap:8px;font-size:17px;line-height:24px;font-weight:600}
.mt-rv__h~.mt-rv__h{margin-top:24px}
.mt-ico{flex:none;width:24px;height:24px}
.mt-kw{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;list-style:none}
.mt-kw li,.mt-kw>span{padding:7px 14px;border:1.5px solid #e9e9eb;border-radius:999px;font-size:14px;line-height:20px;color:#767676;background:#fff;white-space:nowrap}
.mt-kw li.on{border-color:#222226;color:#222226;font-weight:600}
.mt-wl__cards .mt-app{height:100%}
@media (min-width:960px){
  .mt-app{padding:28px 28px}
  .mt-wl>.wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:center}
  .mt-wl__box{display:flex;flex-direction:column;align-items:center;padding:32px;border-radius:28px;background:#fff}
  .mt-wl__box>.mt-tag{position:static;align-self:flex-start;margin-bottom:16px}
  .mt-wl .mt-wl__cards{grid-template-columns:repeat(2,minmax(0,240px));margin:0;padding:0}
}
.mt-tag{display:inline-block;padding:2px 10px;border-radius:999px;background:#f0f0f2;color:var(--sub);font-size:14px;line-height:20px;font-weight:600}
/* 티어매치 첫 화면: 8가지 티어 */
.mt-ld__t{font-size:16px;line-height:24px;font-weight:700;text-align:center}
.mt-ld .mt-ladder__list{gap:16px 4px}
.mt-ld .mt-ladder__list img{width:56px;height:56px}
@media (min-width:960px){
  .mt-wl__cards{gap:20px}
  .mt-ld .mt-ladder__list img{width:72px;height:72px}
  .mt-end .wrap{text-align:center}
  .mt-end .lead{margin-inline:auto}
  .mt-end .hero__cta{justify-content:center}
}

/* ---------- 지도(목록 페이지): 동네별 매치 수 동그라미. 폰 = 지도 가로 꽉 → 동네 칩 → 카드, 데스크톱 = 카드 왼쪽 · 지도 오른쪽(붙어 있음) */
.mt-now--map{padding-top:48px}
.mt-now--map .mt-now__hd{margin-bottom:16px}
.mt-now__map{margin:0 calc(-1 * var(--g));overflow:hidden}
/* 폰: 지도를 화면보다 18% 넓게 깔아 서울을 크게(가장자리 김포 · 부평 · 광주는 잘림 → 그 동그라미는 숨김), 작은 동네(10개 미만)도 숨김 — 칩 줄에 있다 */
.mt-map{position:relative;width:118%;margin-left:-9%;aspect-ratio:1000/862;background:#fafafa}
.mt-map .mt-pin--edge{display:none}
.mt-map__bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mt-pin{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;height:32px;padding:0 12px;border:0;border-radius:999px;background:#fff;color:#222226;box-shadow:0 1px 4px rgba(0,0,0,.18),0 0 0 1px rgba(34,34,38,.06);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .15s ease}
.mt-pin::before{content:"";position:absolute;inset:-7px}
.mt-pin--dot:not([aria-pressed="true"]),.mt-pin.is-dot:not([aria-pressed="true"]){width:18px;height:11px;padding:0;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28),0 0 0 1px rgba(34,34,38,.08)}
.mt-pin--dot:not([aria-pressed="true"]) .mt-pin__t,.mt-pin.is-dot:not([aria-pressed="true"]) .mt-pin__t{display:none}
.mt-pin--dot::before,.mt-pin.is-dot::before{inset:auto;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.mt-pin[aria-pressed="true"]{background:#222226;color:#fff;z-index:3}
.mt-pin:focus-visible,.mt-map__all:focus-visible{outline:2px solid #222226;outline-offset:2px}
/* 겹쳐서 점이 된 알약(matches.js declutter)은 숨긴다 — 이름 없는 흰 점이 뭔지 · 눌러도 되는지 모름(검토 2026-11-09 → 대표 '바꾸고 다시 채점').
   display가 아니라 visibility라 정리 계산(offsetParent)은 그대로 돌고, 폭이 넓어지면 다시 알약으로 보인다. */
.mt-map .mt-pin.is-dot:not([aria-pressed="true"]){visibility:hidden}
.mt-map__all{position:absolute;left:calc(7.63% + var(--g));top:14px;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;border:0;border-radius:999px;background:#fff;color:#222226;box-shadow:0 1px 3px rgba(0,0,0,.16),0 0 0 1px rgba(34,34,38,.06);font-size:15px;font-weight:600;cursor:pointer;z-index:4}
.mt-map__all b{font-family:var(--num);font-weight:800}
.mt-map__all[aria-pressed="true"]{background:#222226;color:#fff}
.mt-map__src{padding:8px var(--g) 0;font-size:14px;line-height:20px;color:var(--mute);text-align:right}
.mt-now--map .mt-chips{margin-top:16px}
@media (hover:hover){.mt-pin:hover{z-index:4;box-shadow:0 2px 8px rgba(0,0,0,.24),0 0 0 1px rgba(34,34,38,.12)}}
@media (min-width:960px){
  .mt-now--map{padding-top:72px}
  .mt-now--map .mt-now__hd{margin-bottom:28px}
  .mt-now--map .mt-now__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
  .mt-now__map{order:2;margin:0;position:sticky;top:88px}
  .mt-now__side{order:1}
  .mt-now__map{overflow:visible}
  .mt-map{width:100%;margin-left:0;border-radius:20px;overflow:hidden}
  .mt-map .mt-pin--edge{display:inline-flex}
  .mt-pin{height:34px;padding:0 14px;font-size:15px}
  .mt-map__all{left:16px;top:16px}
  .mt-map__src{padding:10px 0 0}
  .mt-now--map .mt-chips{display:none}
  .mt-now--map .mt-list{grid-template-columns:1fr;gap:20px;margin-top:0}
  .mt-now--map .mt-card{grid-template-columns:168px minmax(0,1fr);gap:20px}
  .mt-now--map .mt-card__ph{width:168px}
}
/* 폰 첫 화면 = 히어로 바로 아래 매치 카드(검색 착지 — 첫 카드가 390×664에 걸친다. 대표 2026-11-09 '매치 페이지 첫 화면에 카드 올리기').
   순서만 바꾼다: 카드 → 앱 받기 → 지도 → 호스트 얼굴 · 숫자. 지도는 카드를 거르는 것이라 카드 곁에(데스크톱의 카드 · 지도 나란히와 같은 묶음 —
   검토 2026-11-09 '지도가 카드에서 600px 떨어짐'), 얼굴 · 숫자는 그 뒤 '누가 기다리나'. 데스크톱(960+)은 그대로.
   DOM은 그대로(얼굴 · 지도 · 카드)라 지도 알약을 누르면 matches.js가 바뀐 카드로 올려 준다. */
@media (max-width:959px){
  .mt-now--map{display:flex;flex-direction:column;padding-top:16px}
  .mt-now--map>.mt-now__in{display:contents}
  .mt-now--map .mt-now__side{order:1;padding:0 var(--g)}
  .mt-now--map .mt-now__map{order:2;margin:40px 0 0}
  .mt-now--map>.mt-spread{order:3;margin-top:40px}
  .mt-now--map .mt-list{margin-top:0}
}
/* 데스크톱도 결과 먼저: 히어로 → 카드 왼쪽 · 지도 오른쪽 → 얼굴 · 숫자(검토 2026-11-09 2판 '데스크톱 첫 화면에 카드가 없다' → 대표 '바꾸고 다시 채점').
   첫 카드 줄이 1440×900 첫 화면에 걸친다. 얼굴 장면 구성(얼굴 · 숫자 · 움직임)은 그대로 */
@media (min-width:960px){
  .mt-now--map{display:flex;flex-direction:column;padding-top:40px}
  .mt-now--map>.mt-now__in{order:1}
  .mt-now--map>.mt-spread{order:2;margin:88px auto 0}
}
/* ---------- 한국어 밖(여행자 착지) 4판 — 대표 2026-11-09 '여행객 후킹 · 한국어 빼고 다 그렇게 · 개선해줘' */
/* 폰 첫 화면 = 크루 사진 위에 제목(검색 착지 '제목 → 바로 카드' — 사진이 제목 앞 블록으로 따로 있지 않게). 데스크톱은 원래 사진 위 글 */
@media (max-width:959px){
  html:not(:lang(ko)) .mt-hero__ph{position:relative}
  html:not(:lang(ko)) .mt-hero__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,0) 34%,rgba(17,17,17,.66) 100%)}
  html:not(:lang(ko)) .mt-hero__in{position:absolute;left:0;right:0;bottom:0;padding-top:0;padding-bottom:16px;color:#fff}
  html:not(:lang(ko)) .mt-hero__copy{text-shadow:0 1px 14px rgba(0,0,0,.35)}
}
/* 폰: 이 페이지(한국어 밖 목록)는 탭 줄을 숨긴다 — 광고 착지 첫 화면에서 다른 길로 새는 출구 7개(검토 2026-11-09 4판 두 명). 로고 · 언어는 그대로, 데스크톱 탭은 그대로 */
@media (max-width:959px){
  html:not(:lang(ko)) body.p-matches{--hd2:0px}
  html:not(:lang(ko)) body.p-matches .hd__nav{display:none}
}
/* 상세로 가는 카드(한국어 밖)는 가격 줄 끝에 › — 누르면 코트 상세가 열린다는 표시(검토 2026-11-09 7판 둘 '누르면 뭐가 나오는지 표시가 없다'). 글 칸 폭은 그대로 */
html:not(:lang(ko)) .mt-card[href*="/matches/"] .mt-card__fee::after{content:"\00a0\00a0\203A";font-size:18px;line-height:1;color:var(--mute)} /* 줄바꿈 없는 공백으로 앞 낱말에 붙여 '›'만 떨어지지 않게 */
/* 좁은 폰(360 이하, 한국어 밖): 카드 사진 131 → 104px(13:12 그대로) — 글 칸 127 → 154px라 긴 언어(de · ru · ms)의 카드 줄이 덜 꺾인다(검토 2026-11-09 6 · 7판) */
@media (max-width:360px){
  html:not(:lang(ko)) .mt-now--map .mt-card{grid-template-columns:104px minmax(0,1fr);gap:12px}
  html:not(:lang(ko)) .mt-now--map .mt-card__ph{width:104px}
}
/* 카드 사진 위 동네 배지(한국어 밖, 지도 알약과 같은 이름 — 7판). 글 칸 줄 수는 그대로 */
.mt-card__ph{position:relative}
/* 상(매치가 가장 많이 열린 10곳, 대표 2026-11-10): 카드 사진에는 아무것도 얹지 않고(사진 131 · 168 · 120px — 알약이 사진을 가림) 글 첫 줄에 금색 월계수.
   코트 탭 작은 카드(.ct-fav)와 같은 모양 */
.mt-card__fav{display:flex;align-items:center;gap:3px;font-size:14px;line-height:20px;font-weight:500;color:var(--ink)}
.mt-card__fav .mc-laurel{width:11px;height:21px}

/* 카드 제목 · 참가비는 마지막 낱말만 떨어지지 않게(Daechi Yusuji Tennis / Courts · Ab 1,32 € pro / Person) */
.mt-card__t,.mt-card__fee{text-wrap:balance}
/* 데스크톱: 버튼 아래에 안심 한 줄(옆에 두면 'Non- / Korean'으로 끊김) */
@media (min-width:960px){.mt-now--map .mt-now__cta{flex-direction:column;align-items:flex-start;gap:10px}}
/* 폰: 버튼 · 안심 줄과 지도 사이를 띄워 버튼 화면엔 버튼 하나만(검토 2026-11-09 5판 '지도 전체 알약이 둘째 버튼처럼') */
@media (max-width:959px){html:not(:lang(ko)) .mt-now--map .mt-now__map{margin-top:64px}}
/* 데스크톱 첫 화면 사진: 오른쪽 아래 구석의 코트 라인 · 분홍 바깥 코트가 흰 쐐기처럼 걸려(검토 5판) 당겨 구석을 화면 밖으로.
   4% → 2.5% · 기준 40% → 70%(2026-11-12): 4%면 오른쪽 남자 등이 모든 폭에서 10–25px 잘렸다(디자인 리드 '사람 잘림 0'). 2.5%면 사람 · 라켓 잘림 0,
   구석 선은 1280 · 1920 · 2560에서 안 보이고 1024 · 1440에서 조금 보인다(한국어 판과 같은 선) */
@media (min-width:960px){html:not(:lang(ko)) .mt-hero__ph img{transform:scale(1.025);transform-origin:0 70%}}
/* 첫 화면 제목의 가장 긴 줄 ÷ 글자 크기(웹 44px로 잰 폭 × 1.02 — 2026-11-12). 제목 글을 바꾸면 다시 잰다(테스트가 13개 언어 모두 있는지 본다) */
html:not(:lang(ko)) .mt-hero{--mt-zoom:1.025}
html:lang(ko) .mt-hero{--mt-em:6.77}
html:lang(en) .mt-hero{--mt-em:7.16}
html:lang(ja) .mt-hero{--mt-em:8.28}
html:lang(zh-Hant) .mt-hero,html:lang(zh-Hans) .mt-hero{--mt-em:5.91}
html:lang(vi) .mt-hero{--mt-em:7.7}
html:lang(id) .mt-hero{--mt-em:8.14}
html:lang(ms) .mt-hero{--mt-em:8.9}
html:lang(th) .mt-hero{--mt-em:5.93}
html:lang(ru) .mt-hero{--mt-em:9.55}
html:lang(es) .mt-hero{--mt-em:8.09}
html:lang(fr) .mt-hero{--mt-em:9.5}
html:lang(de) .mt-hero{--mt-em:7.74}
/* 좁은 폰(400 이하): 사진 위 제목이 세 줄이 되는 언어(de · ru · es …)도 얼굴을 덜 가리게 */
@media (max-width:400px){html:not(:lang(ko)) .mt-hero__h1{font-size:25px;line-height:1.24}}
/* 버튼 바로 아래 여행자 안심 한 줄(영어 앱 · 외국 번호와 카드) */
.mt-now__trust{font-size:14px;line-height:20px;color:var(--sub);text-wrap:balance}
/* 호스트 장면: 숫자 하나가 주인공('30,000+ hosts') + 한 줄 */
.mt-hosts{padding-top:24px}
.mt-spread--one .mt-spread__h{gap:8px}
.mt-one{font-size:22px;line-height:30px;font-weight:700;color:var(--sub);text-wrap:balance}
.mt-one b{font:800 44px/52px var(--num);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
@media (min-width:960px){
  .mt-hosts{padding-top:48px}
  .mt-one{font-size:26px;line-height:36px}
  .mt-one b{font-size:60px;line-height:68px}
}
/* 두 가지 매치가 회색 '서울 로컬' 띠(한국어는 목록) 바로 뒤에 올 때 위 여백 */
.mt-local+.mt-kinds,.mt-now+.mt-kinds{padding-top:48px}
@media (min-width:960px){.mt-local+.mt-kinds,.mt-now+.mt-kinds{padding-top:72px}}

/* ---------- 매치 카드: 티어 배지(티어매치 카드의 참가 티어 앞) */
.mt-card__badges{display:inline-flex;flex:none;gap:2px;margin-top:1px}
.mt-card__badges img{display:block;width:18px;height:18px}

/* ---------- 소셜: 첫 화면 사진 · 리뷰 · 서울과 뉴욕 */
.mt-thero__art--photo{max-width:none;margin:28px calc(-1 * var(--g)) 0;aspect-ratio:1200/1108;overflow:hidden}
.mt-thero__art--photo img{display:block;width:100%;height:100%;object-fit:cover}
.mt-rvs__art{margin-top:24px}
.mt-rvs__art .mt-app{max-width:440px}
/* 목록에 보이는 아이템 사진은 13:12 = 테니스 코트 반 면 비율(대표 2026-11-09). 포스터 · 키 비주얼(아래 '대회')은 자르지 않음 */
.mt-cities__list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;list-style:none}
.mt-city{display:flex;flex-direction:column;gap:12px}
.mt-city__ph{display:block;aspect-ratio:13/12;border-radius:16px;overflow:hidden;background:var(--tile)}
.mt-city__ph img{display:block;width:100%;height:100%;object-fit:cover}
.mt-city__body{display:flex;flex-direction:column;gap:2px}
.mt-city__name{font-size:15px;line-height:22px;font-weight:600;color:var(--sub)}
.mt-city__n{font:800 24px/32px var(--num);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- 티어: 서울 · 뉴욕의 티어 무대(검정 띠, nycopen 페이지처럼 그림이 먼저) */
.mt-stage__list{display:grid;gap:28px;margin-top:24px;list-style:none}
.mt-stage__item{display:flex;flex-direction:column;gap:16px}
.mt-stage__ph{display:block;aspect-ratio:25/16;border-radius:16px;overflow:hidden;background:#fff}
.mt-stage__ph img{display:block;width:100%;height:100%;object-fit:cover}
.mt-stage__body{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.mt-stage__tag{display:inline-block;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:14px;line-height:20px;font-weight:600}
.mt-stage__t{margin-top:8px;font-size:22px;line-height:30px;font-weight:800;letter-spacing:-.03em;color:#fff}
.mt-stage__d{font-size:16px;line-height:24px;color:rgba(255,255,255,.82)}
.mt-stage__facts{margin-top:4px;font-size:15px;line-height:22px;font-weight:600;color:#fff}
.mt-stage__link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;color:#fff;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
@media (min-width:960px){
  /* 앱 조각은 흰 카드 하나로(회색 틀 · 흰 패널 두 겹 ✕ — 검토 R7) */
  .mt-thero--tier .mt-thero__art{padding:0;background:none;border-radius:0}
  .mt-thero__art--photo{margin:0;padding:0;border-radius:24px;background:none}
  .mt-wl__box{justify-self:start;padding:0;max-width:520px;background:none}
  .mt-rvs__art{margin:0}
  .mt-rvs__art .mt-app{max-width:520px}
  /* 데스크톱 한 화면: 글 왼쪽 · 두 도시 오른쪽(사진이 화면 높이를 넘지 않게) */
  .mt-cities>.wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:center}
  .mt-cities .mt-now__hd{margin:0}
  .mt-cities__list{gap:24px;margin-top:0}
  .mt-city__ph{border-radius:20px}
  .mt-city__name{font-size:17px;line-height:24px}
  .mt-city__n{font-size:32px;line-height:40px}
  .mt-stage__list{grid-template-columns:1fr 1fr;gap:32px;margin-top:40px}
  .mt-stage__ph{border-radius:20px}
  .mt-stage__t{font-size:26px;line-height:34px}
}
.mt-card__gt>span{white-space:nowrap}
.mt-card__gt>.mt-card__range{white-space:normal}
.mt-card__fee{white-space:normal}
.mt-now__cta .btn{white-space:normal;text-align:center;height:auto;min-height:48px;padding-top:12px;padding-bottom:12px;text-wrap:balance}
/* 카드 아래 '곧 열리는 매치 N개 전체 보기'(2026-11-10): 동네를 고르면 matches.js가 글을 바꿔 BudouX <wbr>이 없다 — keep-all이면 한 덩어리라
   일본어는 구 단위(auto-phrase, 모르는 브라우저는 글자 단위), 중국어는 글자 단위로 줄을 바꾼다(320px에서도 두 줄 안, 가로 넘침 없음) */
:is(:lang(ja),:lang(zh-Hant),:lang(zh-Hans)) .mt-now__cta .mt-all{word-break:normal}
:lang(ja) .mt-now__cta .mt-all{word-break:auto-phrase}
/* 마지막 단어만 떨어지는 줄 0(검토 R7: 'a tier.' · 'accepts' · 'played') — 제목 · 한 줄 설명은 줄 길이를 고르게 */
.mt-h2,.mt-thero__h1,.mt-thero__sub,.mt-hero__sub,.mt-block__copy .lead,.mt-rvs .lead,.mt-stage__d,.mt-stage__facts,.mt-note,.mt-kind__d{text-wrap:balance}
/* ---------- 한국어 밖 언어: 서울 로컬과 치고 한국 문화를 경험. 큰 글씨 = 뜻(새 사람 · 매일 · 한강), 작은 한 줄 = 근거 숫자(2026-11-09 4판) */
/* 블록 사진 하나(한강 · 롯데월드타워 맑은 오전, 2026-11-10) — 폰 3:2, 데스크톱은 넓게 자르되 타워 꼭대기가 남게 위쪽을 덜 자른다 */
.mt-local__ph{margin:0 0 24px}
.mt-local__ph img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 40%;border-radius:var(--r)}
@media (min-width:960px){.mt-local__ph{margin-bottom:40px}.mt-local__ph img{aspect-ratio:12/5}}
.mt-local__hd .lead{margin-top:12px}
.mt-local__list{display:grid;gap:12px;margin-top:24px;list-style:none}
.mt-local__list li{display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:20px;background:#fff}
.mt-local__list b{font-size:22px;line-height:30px;font-weight:700;letter-spacing:-.03em;text-wrap:balance} /* 800은 한 화면 주인공 하나(H2)만 — 6판 */
.mt-local__list span{font-size:16px;line-height:24px;color:var(--sub);text-wrap:balance}
@media (min-width:960px){
  /* 제목 한 줄('Live a bit of Seoul') 아래 세 칸을 페이지 폭으로 — 왼쪽 제목 칸 옆 좁은 세 칸(243px)에선 칸마다 4줄로 꺾였다(검토 2026-11-09 7판) */
  .mt-local__list{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
  .mt-local__list li{padding:28px 24px}
  .mt-local__list b{font-size:26px;line-height:34px}
}
/* ---------- 목록: 호스트 얼굴이 제목 둘레에 흩어진 장면(에어비앤비 호스팅 페이지처럼). 폰 = 위 · 아래 띠, 데스크톱 = 양옆 */
.mt-spread{position:relative;height:500px;display:flex;align-items:center;justify-content:center;text-align:center}
.mt-spread__copy{position:relative;z-index:1;max-width:340px}
.mt-spread__sub{margin-top:12px;font-size:14px;line-height:20px;color:var(--mute)}
/* 숫자 셋(주어) → 한 줄(서술). 폰은 숫자 · 이름을 한 줄씩 쌓고, 데스크톱은 셋 나란히. 굵게는 숫자만. */
.mt-spread__h{display:flex;flex-direction:column;align-items:center;gap:14px}
.mt-stats{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:10px;row-gap:2px}
.mt-stat{display:contents}
.mt-stat b{font-size:34px;line-height:42px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right}
.mt-stat span{text-align:left}
.mt-stat span{font-size:17px;line-height:24px;font-weight:600;color:var(--sub)}
.mt-spread__line{font-size:22px;line-height:30px;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.mt-spread__faces{position:absolute;inset:0}
.mt-spread__f{position:absolute;border-radius:50%;object-fit:cover;background:var(--tile);border:3px solid #fff;box-shadow:0 6px 20px rgba(0,0,0,.14);transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* 화면에 들어올 때 얼굴이 하나씩 퍼진다(js-anim이 켜졌을 때만 — 스크립트가 없으면 처음부터 보임) */
.js-anim .mt-spread:not(.in) .mt-spread__f{opacity:0;transform:translateY(12px) scale(.9)}
.mt-spread__f--1{left:4%;top:2%;width:84px;height:84px;transition-delay:.05s;--fx:3px;--fy:9px;--fd:6.2s;--fdel:-1.4s;--d:9px}
.mt-spread__f--3{right:5%;top:3%;width:96px;height:96px;transition-delay:.19s;--fx:-4px;--fy:10px;--fd:7.1s;--fdel:-3.2s;--d:12px}
.mt-spread__f--4{left:8%;bottom:4%;width:76px;height:76px;transition-delay:.26s;--fx:4px;--fy:-7px;--fd:5.4s;--fdel:-2.2s;--d:6px}
.mt-spread__f--5{right:6%;bottom:1%;width:92px;height:92px;transition-delay:.12s;--fx:-3px;--fy:-9px;--fd:6.7s;--fdel:-.6s;--d:11px}
.mt-spread__f--6{left:calc(50% - 36px);top:3%;width:72px;height:72px;transition-delay:.4s;--fx:-3px;--fy:8px;--fd:6.6s;--fdel:-2.7s;--d:7px}
.mt-spread__f--7{left:calc(50% - 38px);bottom:7%;width:76px;height:76px;transition-delay:.33s;--fx:2px;--fy:-8px;--fd:5.9s;--fdel:-4s;--d:8px}
@media (min-width:960px){
  .mt-spread{height:540px;margin-bottom:32px}
  .mt-spread__copy{max-width:880px}
  .mt-spread__sub{font-size:15px;line-height:22px;margin-top:16px}
  .mt-spread__h{gap:24px}
  .mt-stats{display:flex;flex-direction:row;gap:48px}
  .mt-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
  .mt-stat b,.mt-stat span{text-align:center}
  .mt-stat b{font-size:52px;line-height:60px}
  .mt-stat span{font-size:18px;line-height:26px}
  .mt-spread__line{font-size:32px;line-height:42px}
  .mt-spread__line br{display:none}
  .mt-spread__f--1{left:2%;top:0;width:116px;height:116px}
  .mt-spread__f--3{right:2%;top:0;width:128px;height:128px}
  .mt-spread__f--4{left:7%;bottom:4%;width:80px;height:80px}
  .mt-spread__f--5{right:6%;bottom:2%;width:116px;height:116px}
  .mt-spread__f--6{left:29%;top:3%;width:84px;height:84px}
  .mt-spread__f--7{right:30%;bottom:1%;width:88px;height:88px}
}
/* 넓은 화면: 얼굴을 글 쪽으로 당겨 한 덩어리로(1360 아래에선 숫자에 붙으므로 가장자리 그대로 — 1280에서 10px까지 붙던 것, 2026-11-08) */
@media (min-width:1360px){
  .mt-spread__f--1{left:9%;top:6%;width:132px;height:132px}
  .mt-spread__f--3{right:8%;top:2%;width:144px;height:144px}
  .mt-spread__f--4{left:17%;bottom:6%;width:80px;height:80px}
  .mt-spread__f--5{right:15%;bottom:3%;width:124px;height:124px}
}
/* 둥둥: 얼굴마다 다른 박자로 떠다닌다(대표 2026-11-08 '호스트들이 둥둥 떠다닌다던가'). 들어오는 효과(transform)와 겹치지 않게
   떠다니기는 translate 속성, 데스크톱 포인터 시차는 transform(--mx · --my × 얼굴마다 깊이 --d, matches.js). 움직임 줄이기면 전부 끔. */
@keyframes mt-float{0%,100%{translate:0 0}50%{translate:calc(var(--fx,0px) * var(--amp,1)) calc(var(--fy,-8px) * var(--amp,1))}}
@media (max-width:400px){.mt-spread{--amp:.6}}
.js-anim .mt-spread.in .mt-spread__f{animation:mt-float var(--fd,6s) ease-in-out var(--fdel,0s) infinite;transform:translate3d(calc(var(--mx,0) * var(--d,8px)),calc(var(--my,0) * var(--d,8px)),0)}
/* 들어온 뒤(is-live, matches.js가 붙임)엔 전환을 끈다 — 포인터 시차는 스크립트가 매 프레임 옮김. 전환을 남기면 마우스가 움직일 때마다
   얼굴별 지연(.05–.4초)이 다시 시작돼 멈췄다 튐(대표 2026-11-09 '끊기면서 움직이냐'). */
.js-anim .mt-spread.is-live .mt-spread__f{transition:none}
@media (prefers-reduced-motion:reduce){.mt-spread__f,.js-anim .mt-spread.in .mt-spread__f{transition:none;opacity:1;transform:none;animation:none}}

/* ja · zh: 구절 사이 <wbr>(빌드 BudouX)로만 줄을 바꾸되, 한 구절이 칸보다 길면 어디서든 넘겨 가로 넘침 0(좁은 폰 · 버튼 · 카드) */
:is(html:lang(ja),html:lang(zh-Hant),html:lang(zh-Hans)) main{overflow-wrap:anywhere}

/* ---------- 코트 상세 (/matches/<id>) — 에어비앤비 숙소 상세처럼. 틀은 레슨 · 코트 상세(lessons.css ls-d)와 같고, 이 페이지만의 조각은 mc-.
   월계수 상(알약 · 배지)은 코트 탭과 같이 쓰려고 styles.css로 옮김(2026-11-09). 움직임: 구력 막대는 왼쪽에서 자라고, 시간대 막대는 아래에서 솟는다.
   움직임 줄이기 설정이면 js-anim이 없어 처음부터 다 보인다(app.js · motion.js). */
.mc-gal{position:relative}
.mc-hook{font-size:16px;line-height:24px;margin-top:6px}
.mc .ls-d__area b{color:var(--ink);font-weight:700}
.mc-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;padding:18px 8px;border-radius:16px;background:var(--tile);list-style:none;text-align:center}
.mc-facts li{display:flex;flex-direction:column;gap:2px;min-width:0}
.mc-facts b{font:700 18px/24px var(--num)}
.mc-facts span{font-size:14px;line-height:20px;color:var(--mute)}
.mc-trust{margin-top:12px;font-size:14px;line-height:20px;color:var(--sub)}
/* 코트 탭에서도 예약할 수 있는 코트 → 코트 탭 상세(대표 2026-11-09): '가는 길' 끝, 위 길찾기와 같은 링크(lessons.css .ls-link--arrow) */
.mc-bookp{margin-top:8px}
.mc-book{text-wrap:balance}
.mc .ls-h3{margin-bottom:4px}
.mc-sub{font-size:14px;line-height:20px;color:var(--mute);margin-bottom:20px}
.mc-how .ls-h3,.mc-loc .ls-h3,.mc-near .ls-h3{margin-bottom:0}
/* 구력 막대: 이름 · 막대 · % (가장 많은 칸 = 검정 · 굵게) */
.mc-years{display:grid;gap:12px;list-style:none}
.mc-years li{display:grid;grid-template-columns:minmax(56px,auto) minmax(0,1fr) 44px;align-items:center;column-gap:12px;font-size:15px;line-height:22px}
.mc-years i{display:block;height:8px;border-radius:4px;background:#eeeef0;overflow:hidden}
.mc-years i b{display:block;height:100%;border-radius:4px;background:#c6c5c9;transform-origin:left center}
.mc-years em{font-style:normal;text-align:right;font-family:var(--num);font-size:14px;color:var(--sub)}
.mc-years .is-top{font-weight:700}
.mc-years .is-top i b{background:var(--ink)}
.mc-years .is-top em{color:var(--ink);font-weight:700}
.mc-tip{display:flex;align-items:center;justify-content:space-between;gap:12px;text-wrap:pretty;margin-top:20px;padding:14px 16px;border-radius:16px;background:var(--tile);font-size:15px;line-height:22px;color:var(--sub)}
.mc-tip b{flex:none;color:var(--ink);white-space:nowrap}
.mc-tip span{min-width:0}
:lang(ja) .mc-tip span,:lang(ja) .mc .ls-d__t,:lang(ja) .mc .ls-loc__n{word-break:auto-phrase}
/* 시간대: 16칸(6–21시), 같은 눈금 */
.mc-time{display:grid;gap:28px}
.mc-chart{margin:0}
.mc-chart__t{font-size:15px;line-height:22px;font-weight:700;margin-bottom:14px}
.mc-bars{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:6px;align-items:end;height:72px}
.mc-bars i{display:block;border-radius:3px;background:#c6c5c9;transform-origin:center bottom}
.mc-bars i.is-top{background:var(--ink)}
/* 축: 6시(첫 칸 왼쪽) · 12시(7번째 칸 가운데) · 18시(13번째 칸 가운데) · 21시(마지막 칸 오른쪽) */
.mc-axis{position:relative;height:20px;margin-top:6px;font-size:14px;line-height:20px;color:var(--mute);white-space:nowrap}
.mc-axis span{position:absolute;top:0}
.mc-axis span:nth-child(1){left:0}
.mc-axis span:nth-child(2){left:40.6%;transform:translateX(-50%)}
.mc-axis span:nth-child(3){left:78.1%;transform:translateX(-50%)}
.mc-axis span:nth-child(4){right:0}
/* 리뷰 카드 높이 맞춤 · 근처 코트 카드(상세 칸 안에서는 작은 사진) */
.mc-rv{margin-top:4px}
.mc-near .mt-list{margin-top:20px}
/* 움직임 */
.js-anim .mc-years i b{transform:scaleX(0);transition:transform .9s var(--ease);transition-delay:calc(var(--i,0) * 70ms + .2s)}
.js-anim .in .mc-years i b{transform:none}
.js-anim .mc-bars i{transform:scaleY(0);transition:transform .7s var(--ease);transition-delay:calc(var(--i,0) * 35ms + .2s)}
.js-anim .in .mc-bars i{transform:none}
@media (min-width:960px){
  .mc-hook{font-size:17px;line-height:26px}
  .mc-time{grid-template-columns:1fr 1fr;gap:40px}
  .mc-near .mt-list{grid-template-columns:1fr 1fr;gap:24px 28px}
  .mc-near .mt-card{grid-template-columns:120px minmax(0,1fr);gap:16px}
  .mc-near .mt-card__ph{width:120px}
}


/* 코트 상세 폰 아래 바(다른 언어): 가격은 단어 중간에서 끊지 않고 두 줄까지, 버튼이 줄어든다 (320폭 'From ₩2,500/pers|on' 막기) */
@media (max-width:959px){
  html:not(:lang(ko)) .mc-dock{gap:12px}
  html:not(:lang(ko)) .mc-dock .ls-dock__price{min-width:auto}
  html:not(:lang(ko)) .mc-dock .ls-dock__price b{font-size:16px;line-height:21px;overflow-wrap:normal}
  html:not(:lang(ko)) .mc-dock .ls-dock__btn{padding:0 20px}
}
/* 코트 상세 폰: 아래 바(76px + 안전 영역)가 푸터 끝 줄을 덮지 않게 — 레슨 · 코트 상세와 같은 여백 (2026-11-09) */
@media (max-width:959px){.p-matches_court .ft{padding-bottom:calc(32px + 76px + env(safe-area-inset-bottom))}} /* 데스크톱은 기본 푸터 여백(40px) 그대로 */

/* 신청 그림 1단계 검색창: 앱 이름이 긴 코트(동부도로사업소 (테니스마스터 학여울점))는 한 줄에서 말줄임 — 짧은 이름은 그대로 (2026-11-09 모든 코트) */
.mt-sa__search span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ---------- 전체 보기(/matches/all, 2026-11-09 대표 '그냥 전체 보기 해서 다 보이고'): 코트 탭 전체(.ct-browse)와 같은 틀 —
   뒤로 → H1 · 한 줄 → 시·도 바로 가기 칩(폰 767px 이하는 이름만 줄바꿈 · 768–959px은 옆으로 넘김) → 시·도 제목 → 동네 제목 + 매치 카드(폰 한 줄 · 600+ 두 줄 · 1200+ 세 줄, 작은 사진).
   동네 자리(#seoul-gangnam-gu)는 html scroll-padding-top이 머리 아래로 맞춘다. */
.ma{padding:16px 0 64px}
.ma__h1{margin-top:8px;font-size:26px;line-height:34px;font-weight:800;letter-spacing:-.03em}
.ma__lead{margin-top:6px;font-size:15px;line-height:22px;color:var(--sub)}
.ma-jump ul{display:flex;gap:8px;list-style:none;margin:20px calc(-1 * var(--g)) 0;padding:0 var(--g);overflow-x:auto;scrollbar-width:none}
.ma-jump ul::-webkit-scrollbar{display:none}
.ma-jump a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.ma-jump a span{font-weight:500;color:var(--mute);font-variant-numeric:tabular-nums}
.ma-city{margin-top:40px}
.ma-city__t{font-size:22px;line-height:30px;font-weight:800;letter-spacing:-.03em}
.ma-gu{margin-top:24px}
.ma-gu__t{font-size:18px;line-height:26px;font-weight:700;letter-spacing:-.02em}
.ma-city__t span,.ma-gu__t span{margin-left:4px;font-size:15px;font-weight:500;color:var(--mute);font-variant-numeric:tabular-nums}
.ma-list{margin-top:12px}
/* 동네 바로 가기(2026-11-10 대표 '응, 여기서 해줘'): 시·도 제목 아래 그 시·도 동네 칩 — 줄바꿈해 다 보이는 목차(옆으로 넘기지 않음).
   .ma-jump · 코트 탭 .ct-chips와 같은 알약(흰 바탕 · 회색 테두리, 보라는 행동 버튼에만), 누르는 칸 44px · 칩 안 글은 한 줄, 숫자 = 그 동네 곧 열리는 매치(회색). */
.ma-gus ul{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;margin:8px 0 0;padding:0} /* 줄 사이 6px: 폰 첫 화면에 서울 칩 줄이 되도록 많이 들게 */
.ma-gus a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.ma-gus a span{font-weight:500;color:var(--mute);font-variant-numeric:tabular-nums}
@media (hover:hover){.ma-gus a:hover{border-color:var(--ink)}}
/* 칩 줄 맨 앞 회색 안내 한 줄(2026-11-10 고침 — 칩 숫자가 코트 수인지 매치 수인지 몰라서): 14px · --mute(흰 바탕 4.5:1), 좁은 폰에선 두 줄로 꺾여도 된다 */
.ma-gus__hint{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--mute)}
/* 폰(767px 이하) 시·도 칩(2026-11-10 고침): 숫자 묶음은 숨기고(바로 아래 시·도 제목에 같은 숫자) 이름만 줄바꿈해 7개가 한 번에 — 옆으로 넘기지 않는다.
   숫자를 숨기니 화면 읽기도 이름만(display:none). 늘어난 한 줄만큼 칩 줄 → 첫 시·도 제목 사이 40 → 24px. 768px 이상은 그대로. */
@media (max-width:767px){
  .ma-jump ul{flex-wrap:wrap;gap:6px 8px;margin:20px 0 0;padding:0;overflow:visible}
  .ma-jump a span{display:none}
  .ma-jump + .ma-city{margin-top:24px}
}
@media (min-width:600px){
  .ma-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px}
  .ma-list .mt-card{grid-template-columns:120px minmax(0,1fr);gap:16px}
  .ma-list .mt-card__ph{width:120px}
}
@media (min-width:960px){
  .ma{padding:24px 0 96px}
  .ma__h1{font-size:34px;line-height:44px}
  .ma-jump ul{flex-wrap:wrap;margin:24px 0 0;padding:0;overflow:visible}
  .ma-city{margin-top:56px}
  .ma-city__t{font-size:26px;line-height:34px}
  .ma-gus__hint{margin-top:6px}
  .ma-gus ul{margin-top:12px}
  .ma-gu{margin-top:32px}
  .ma-list{margin-top:16px}
  .ma-jump a:hover{border-color:var(--ink)}
}
@media (min-width:1200px){.ma-list{grid-template-columns:repeat(3,minmax(0,1fr))}}




/* 티어매치 첫 화면 = 승급 한 장면 (matches.njk tierCard) — 대표 2026-11-12 '비기너 3에서 sp 올라서 루키 1 되는 모션 · 티어가 바뀌면서 색 변하는 것까지 · 직관적으로'.
   위에서부터 원인 → 결과: WIN → ▲ 35 SP → (TIER UP) 배지 → 이름 → 이 단계 SP 막대. 배지 = 고정 크기 13:12(폰 112×103 · 데스크톱 136×126), 앱 배지 비율 · 색.
   끝 장면(= 움직임 없음): 루키 1 주황 · TIER UP · 15 / 100 SP. 모션(카드가 60% 보이면 app.js가 .go):
   0.1s WIN → 0.35s ▲ 35 SP → 0.5–1.1s 막대 · 숫자 80 → 100(검정) → 100에서 0.45초 멈춤(막대가 숨 쉼) → 1.55s 배지가 튀며 빨강 → 주황, 슬래시 셋 → 하나,
   주황 선 터짐, 이름 비기너 3 → 루키 1, TIER UP → 1.95s(승급과 떼어) 막대 0 → 15 주황. 검토 2판: 막대 색을 세 번 바꾸지 않음 · 원인(+35)을 결과 위에. */
@property --mt-sp{syntax:"<integer>";inherits:false;initial-value:15}
.mt-thero__art--win{max-width:360px}
.mt-tc{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:400px;margin:0 auto;padding:24px 20px 24px}
.mt-tc__tag{position:absolute;left:16px;top:16px}
.mt-tc__t{font:italic 900 34px/1 var(--num);letter-spacing:-.5px;color:#222226}
.mt-tc__slot{display:flex;align-items:center;justify-content:center;gap:8px;min-height:26px;margin-top:10px}
.mt-tc__d{font:700 16px/26px var(--num);color:#1fa765}
.mt-tc__art{position:relative;width:112px;height:103px;margin:18px 0 16px}
.mt-tc__badge{display:block;width:100%;height:100%;overflow:visible}
.mt-tc__badge :is(.mt-tc__s,.mt-tc__fill){transform-box:view-box;transform-origin:130px 120px}
.mt-tc__burst{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;pointer-events:none}
.mt-tc__s--from{opacity:0}
.mt-tc__up{padding:4px 10px;border-radius:99px;background:#222226;color:#fff;font:800 14px/18px var(--num);letter-spacing:.06em;white-space:nowrap}
.mt-tc__name{display:grid;justify-items:center}
.mt-tc__name>b{grid-area:1/1;font-size:20px;line-height:28px;font-weight:700;color:var(--ink);white-space:nowrap}
.mt-tc__from{opacity:0}
.mt-tc__sp{display:flex;align-items:center;gap:10px;width:100%;max-width:240px;margin-top:10px}
.mt-tc__bar{position:relative;flex:1;height:8px;border-radius:99px;background:#ececef;overflow:hidden}
.mt-tc__bar i{position:absolute;inset:0 auto 0 0;width:15%;border-radius:inherit;background:#FF831E}
.mt-tc__num{font:600 14px/20px var(--num);color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.mt-tc__n{color:var(--ink)}
@media (min-width:960px){
  .mt-thero__art--win{max-width:none;width:100%}
  .mt-thero__art--win .mt-tc{max-width:460px}
  .mt-tc{width:100%;padding:32px 28px 28px}
  .mt-tc__t{font-size:40px}
  .mt-tc__d{font-size:17px}
  .mt-tc__art{width:136px;height:126px;margin:22px 0 18px}
  .mt-tc__name>b{font-size:22px;line-height:30px}
  .mt-tc__sp{max-width:280px}
  .mt-tc__num{font-size:15px}
}
.js-anim .mt-tc .mt-tc__n{font-size:0;--mt-sp:15;counter-reset:sp var(--mt-sp)}
.js-anim .mt-tc .mt-tc__n::before{content:counter(sp);font-size:14px}
@media (min-width:960px){.js-anim .mt-tc .mt-tc__n::before{font-size:15px}}
/* 시작 전 = 출발 장면: 비기너 3 · 80 SP · 빨강 */
.js-anim .mt-tc:not(.go) :is(.mt-tc__t,.mt-tc__d,.mt-tc__s--to,.mt-tc__to,.mt-tc__up){opacity:0}
.js-anim .mt-tc:not(.go) :is(.mt-tc__s--from,.mt-tc__from){opacity:1}
.js-anim .mt-tc:not(.go) .mt-tc__fill{fill:#FE3A3A}
.js-anim .mt-tc:not(.go) .mt-tc__bar i{width:80%;background:#FE3A3A}
.js-anim .mt-tc:not(.go) .mt-tc__n{--mt-sp:80}
.js-anim .mt-tc.go .mt-tc__t{animation:mtTcWin .45s cubic-bezier(.2,.9,.3,1.25) .1s both}
.js-anim .mt-tc.go .mt-tc__d{animation:mtTcUp .35s cubic-bezier(.2,.9,.3,1.3) .35s both}
.js-anim .mt-tc.go .mt-tc__bar i{animation:mtTcBar 2s linear .5s both}
.js-anim .mt-tc.go .mt-tc__n{animation:mtTcNum 2s linear .5s both}
.js-anim .mt-tc.go .mt-tc__badge{animation:mtTcPop .55s cubic-bezier(.3,1.5,.5,1) 1.55s both}
.js-anim .mt-tc.go .mt-tc__fill{animation:mtTcFill .3s ease 1.57s both}
.js-anim .mt-tc.go .mt-tc__s--from{animation:mtTcOut .22s ease-in 1.55s both}
.js-anim .mt-tc.go .mt-tc__s--to{animation:mtTcIn .4s cubic-bezier(.2,.9,.3,1.3) 1.65s both}
.js-anim .mt-tc.go .mt-tc__burst{animation:mtTcBurst .7s cubic-bezier(.1,.7,.2,1) 1.57s both}
.js-anim .mt-tc.go .mt-tc__from{animation:mtTcOutUp .15s ease-in 1.55s both}
.js-anim .mt-tc.go .mt-tc__to{animation:mtTcUp .25s ease-out 1.66s both}
.js-anim .mt-tc.go .mt-tc__up{animation:mtTcTag .35s cubic-bezier(.2,.9,.3,1.3) 1.6s both}
@keyframes mtTcWin{from{opacity:0;transform:scale(1.6)}70%{opacity:1;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes mtTcUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mtTcFade{from{opacity:1}to{opacity:0}}
@keyframes mtTcOutUp{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
@keyframes mtTcTag{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:none}}
/* 2s: 막대 = 지금 티어 색(검토 3판). 0–30% 80→100(가속, 빨강) · 30–52% 100에서 멈춤 · 53%(1.55s, 배지가 튀는 순간) 0 주황 → 85% 15 (검토 4판 '색 교체 · 리셋을 배지와 같은 프레임에') */
@keyframes mtTcBar{0%{width:80%;background:#FE3A3A;animation-timing-function:cubic-bezier(.5,0,.8,.6)}30%{width:100%;background:#FE3A3A}67%{width:100%;background:#FE3A3A;animation-timing-function:steps(1,end)}68%{width:0;background:#FF831E;animation-timing-function:cubic-bezier(.2,.7,.3,1)}95%,100%{width:15%;background:#FF831E}}
@keyframes mtTcNum{0%{--mt-sp:80;animation-timing-function:cubic-bezier(.5,0,.8,.6)}30%{--mt-sp:100}67%{--mt-sp:100;animation-timing-function:steps(1,end)}68%{--mt-sp:0;animation-timing-function:cubic-bezier(.2,.7,.3,1)}95%,100%{--mt-sp:15}}
@keyframes mtTcPop{0%{transform:none}40%{transform:scale(1.16)}100%{transform:none}}
@keyframes mtTcFill{from{fill:#FE3A3A}to{fill:#FF831E}}
@keyframes mtTcOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.6)}}
@keyframes mtTcIn{from{opacity:0;transform:scale(1.7)}to{opacity:1;transform:none}}
@keyframes mtTcBurst{0%{opacity:0;transform:scale(.8)}1%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.2)}}

/* 8가지 티어 계단 (matches.njk stairs) — 아래 비기너 → 위 마스터, '여기서 시작'은 비기너. 폰 = 아래에서 위로 쌓으며 한 칸씩 오른쪽으로, 데스크톱 = 왼쪽 → 오른쪽으로 오름 */
.mt-stw{padding:20px 16px;border-radius:20px;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.06)}
.mt-st{display:flex;flex-direction:column-reverse;gap:8px;margin:0;padding:0;list-style:none}
.mt-st__i{display:flex;align-items:center;gap:12px;margin-left:calc(var(--i) * 14px)}
.mt-st__i img{width:40px;height:40px;flex:none}
.mt-st__n{font-size:16px;line-height:22px;font-weight:600;white-space:nowrap}
@media (min-width:960px){
  .mt-st{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:4px;padding:0}
  .mt-st__i{flex-direction:column;gap:8px;margin:0;padding-bottom:calc(var(--i) * 16px);position:relative}
  .mt-st__i img{width:48px;height:48px}
  .mt-st__n{font-size:15px}
}
.mt-now__when{margin-top:8px;font-size:16px;line-height:24px;font-weight:600;color:var(--ink);word-break:keep-all}
@media (min-width:960px){.mt-now__when{font-size:17px}}
.mt-lv__c{margin-top:16px;padding-top:14px;border-top:1px solid #ececef;text-align:center;font:700 16px/22px var(--num);color:var(--ink)}
.mt-thero__store{margin-top:10px;font-size:14px;line-height:20px;color:var(--mute)}
@media (min-width:960px){
  .mt-stw{padding:32px 28px 28px}
      .mt-wl--tier>.wrap{align-items:start}
    }
/* 비기너 칸 = 단계 배지 1 · 2 · 3 (검토 6판) */
.mt-st__lv{display:flex;gap:4px;flex:none}
.mt-st__lv svg{width:40px;height:37px}
.mt-st__lvn{font-weight:600;color:var(--mute)}
@media (min-width:960px){
  .mt-st__i--lv .mt-st__lv{gap:3px}
  .mt-st__i--lv .mt-st__lv svg{width:48px;height:44px}
  .mt-st__i--lv .mt-st__n{white-space:nowrap}
}
.mt-st__i--lv .mt-st__n{white-space:normal;line-height:20px}
@media (max-width:959px){
  .mt-wl--tier .mt-wl__one{margin-top:24px}
  .mt-st__i--lv .mt-st__lvn{display:block}
}
@media (max-width:374px){.mt-st__lv svg{width:34px;height:31px}}