/* Deuce 공용 스타일 — 7개 페이지(index/courts/profile/privacy/people/meetups/tourneys)에서
   두 곳 이상 중복되던 리셋·토큰·헤더·버튼·카드·폼·칩·토스트를 여기로 모았다 (2026-09-06).
   클래스 정의가 페이지마다 미묘하게 다를 때는 profile.html 것을 기준으로 삼고,
   각 페이지는 자신의 <style> 에 잔차(차이나는 부분)만 남긴다. */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* [design-001 2026-09-28 사용자 확정, 노랑+흰색(design-002)을 대체] 세이지 코트 초록 4단계 + 라임 공.
     흰 바탕 유지, **검정 면 없음**(어두운 면은 --court-900 이 맡는다).
     역할: 900 = 헤더·히어로·주 버튼 면 / 600 = 활성·아이콘·큰 제목(작은 글씨 금지) /
           300 = 상태 배지 면(진한 글씨) / 50 = 옅은 배경·진한 면 위 글씨 / ball = 공·NTRP·선택 칩·진한 면 위 CTA
     진한 면 위 글씨는 --on-court(#e5f1e3) 하나로 통일하고 위계는 크기·굵기로 준다(반투명으로 흐리게 하면 기준 미달).
     대비 계산(WCAG 2.1 상대휘도 공식, 직접 계산):
       --on-court(#e5f1e3) on --court-900(#35635b) = 5.83:1  (AA 통과)
       #fff                on --court-900          = 6.80:1
       --court-900 글씨     on #fff                 = 6.80:1
       --ball-ink(#35635b) on --ball(#ccf186)      = 5.34:1  (AA 통과)
       --ball              on --court-900          = 5.34:1  (진한 면 위 CTA)
       #fff                on --court-600(#529471) = 3.60:1  (18px+ 굵은 글씨·아이콘만)
       --court-300(#a3cd9e) on --court-900         = 3.81:1  (작은 글씨 금지)
       --text(#1a1a1a) on #fff = 17.40:1 · --text2(#555) = 7.46:1
       --text3 #888(3.54:1) → #6b6b6b(design-004, 검수: 비활성 탭·라벨·placeholder 가 4.5 미달) = 흰 5.33 · #f6f6f4 4.93 · --court-50 4.57
       --caution(#f0c15a, 사용자 팔레트) = 마감임박·노쇼 같은 주의 배지 면 전용, 글씨는 --text(10.3:1) */
  --court-900:#35635b;--court-600:#529471;--court-300:#a3cd9e;--court-50:#e5f1e3;
  /* rgba() 안에서 쓰려면 성분이 따로 필요하다(hex 토큰으로는 투명도를 못 섞는다).
     카드 사진 위 그라데이션처럼 '진한 면을 투명하게 깔아야 하는' 자리에서만 쓴다.
     **검정은 쓰지 않는다** — 그래서 검정 대신 이 색을 깐다. */
  --court-900-rgb:53,99,91;
  --on-court:#e5f1e3;
  --ball:#ccf186;--ball-soft:var(--court-50);--ball-ink:#35635b;
  --bg:#fff;--surface:#fff;--surface-2:#f6f6f4;
  --text:#1a1a1a;--text2:#555;--text3:#6b6b6b;
  --caution:#f0c15a;
  --white:#fff;--border:#e6e6e2;--line:#e6e6e2;
  /* 옛 --green 계열 변수는 페이지 곳곳(특히 meetups.html)에 남아 있어 별칭으로 잇는다.
     --green(글씨·테두리·진한 면) → --court-900, --gl(옅은 배경) → --court-50, --gm → --court-600.
     **새로 만드는 코드는 별칭 대신 --court-*·--ball·--on-court 를 직접 쓴다.** */
  --green:var(--court-900);--gl:var(--court-50);--gm:var(--court-600);
  --sand:var(--surface-2);--sand2:#ececea;
  --r-card:20px;--r-chip:999px;--r-sheet:24px;
  --r:var(--r-card);--rs:12px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --tap:44px;--tabbar-h:56px;
  --shadow:0 2px 16px rgba(0,0,0,.06);
}

/* ══════════════════════════════════════════════════════════════════════
   빠델 모드 (sport-001, 사용자 승인 2026-10-02)
   레이아웃·간격·아이콘·둥근 모서리는 **그대로** 두고 포인트 컬러만 바꾼다.
   토글 상태는 localStorage 에 있고, 화면은 <html data-sport="padel"> 만 세운다.
   공용 규칙은 테니스와 같다: 검정 면 금지 · 이모지 금지 · 선 아이콘 · 진한 면 위 글씨는
   --on-court 하나(흐리게 금지, 위계는 크기·굵기로).
   측정한 대비(계산기로 직접 재서 적는다 — 눈대중 금지):
     --on-court(#eaf2fa) on --court-900(#1b365d) = 10.73:1
     #fff               on --court-900          = 12.12:1
     --court-900 글씨    on #fff                 = 12.12:1
     --ball-ink(#1b365d) on --ball(#ccf186)      =  9.52:1
     --ball              on --court-900          =  9.52:1  (진한 면 위 CTA)
     #fff               on --court-600(#2e5c8a) =  6.97:1  (테니스 3.60 보다 여유 있다)
     --court-300(#9fc0e0) on --court-900        =  6.40:1  (작은 글씨도 통과)
   공(--ball)은 라임을 그대로 쓴다 — 빠델 공도 같은 색이고, 바꾸면 "공"으로 안 읽힌다. */
:root[data-sport="padel"]{
  --court-900:#1b365d;--court-600:#2e5c8a;--court-300:#9fc0e0;--court-50:#eaf2fa;
  --court-900-rgb:27,54,93;
  --on-court:#eaf2fa;
  --ball-ink:#1b365d;
  --danger:#c0392b;--warning:#e67700;--info:#2f6fde;
  /* [ui-font-001 2026-09-28] 타이포 스케일 — 9~11px 전면 금지(최소 12px). 기존 9~11.5px 선언은
     전부 --fs-caption(12px)으로 올렸다. 그 위 단계는 이후 화면을 새로 만들 때부터 적용한다. */
  --fs-caption:12px;--fs-body-s:13px;--fs-body:15px;--fs-title-s:17px;--fs-title:20px;--fs-display:24px;
}
body{font-family:'Pretendard Variable','Pretendard',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
/* meetups.html 은 이번 1단계에서 건드리지 않는다(PC-A 담당, PC-B 가 정산 화면 작업 중) — 탭바를
   안 넣으므로 그 페이지만 여백을 되돌린다. */
body.no-tabbar{padding-bottom:0}
/* 데스크톱: 모바일 우선 레이아웃이 넓은 화면에서 전폭으로 늘어나지 않게 가운데 520px 로 모은다 (ui-003, 2026-09-08 실서비스 캡처에서 확인) */
html{background:var(--surface-2)}
@media (min-width:640px){body{max-width:520px;margin:0 auto;box-shadow:0 0 0 1px var(--border),0 0 40px rgba(0,0,0,.06)}}

/* ── 하단 탭바(G1) — 홈·사람·번개·코치 4개. assets/nav.js 가 .header 바로 뒤에 심는다
   (모바일은 position:fixed 라 DOM 위치 무관, 1024px+ 상단 내비는 그 DOM 위치 그대로 header 아래 한 줄로 보인다).
   1024px+ 는 하단 고정 대신 상단 내비(같은 4개, 사용자 지시 2026-09-28 변경 — 왼쪽 레일 안 씀). */
.app-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;background:var(--white);border-top:1px solid var(--line);height:var(--tabbar-h);padding-bottom:env(safe-area-inset-bottom)}
.tabbar-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--text3);min-height:var(--tap)}
.tabbar-item svg{width:22px;height:22px}
.tabbar-item span{font-size:var(--fs-caption);font-weight:600}
.tabbar-icon{width:32px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-chip)}
.tabbar-item.active{color:var(--court-900)}
.tabbar-item.active .tabbar-icon{background:var(--court-50)}
@media (min-width:1024px){
  .app-tabbar{position:static;flex-direction:row;justify-content:center;gap:32px;height:auto;padding:9px 0;border-top:none;border-bottom:1px solid var(--line)}
  .tabbar-item{flex:0 0 auto;flex-direction:row;gap:6px;padding:6px 4px;min-height:auto}
  .tabbar-icon{width:auto;height:22px;padding:0 8px}
  .tabbar-item span{font-size:13px}
  body{padding-bottom:0;padding-left:0}
}

/* 데스크톱 전용 레이아웃 (1024px 이상, pc-layout 2026-09-11) — 640px 규칙(위)은 1023px 까지 그대로 두고
   여기서만 본문을 더 넓힌다. 목록 페이지는 컨테이너에 .pc-grid 만 붙이면 여기서 열을 나눈다.
   gap 은 각 페이지 목록이 이미 갖고 있는 값을 그대로 쓴다(여기서 새로 지정하지 않음). */
@media (min-width:1024px){
  body{max-width:1200px}
  .pc-grid{display:grid;grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1400px){
  .pc-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── 헤더 ── */
/* 내비를 로고·버튼과 같은 줄에 두면 자리가 모자라 마지막 항목(코트·코치)이 잘린다 —
   링크 6개에 310px 가 필요한데 본문이 520px 로 묶여 있어 어느 폭에서도 그만큼 남지 않는다.
   그래서 내비를 통째로 아랫줄로 내린다. 높이는 고정하지 않는다(줄이 늘면 헤더도 늘어야 한다). */
.header{background:var(--white);border-bottom:1px solid var(--border);padding:6px 16px;min-height:54px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;row-gap:4px;position:sticky;top:0;z-index:100;box-shadow:0 1px 8px rgba(0,0,0,.04)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}

/* 종목 토글 (sport-001) — 헤더에 들어가는 칩 두 개. 색은 토큰을 쓰므로 빠델 모드에서 자동으로
   네이비가 된다. 터치 영역 36px(헤더가 54px 라 44px 를 넣으면 헤더가 밀린다 — 칩은 손가락
   하나로 정확히 누르는 대상이라 36px 로 둔다). */
/* 로고(2026-10-01 사용자 확정 — 라켓 두 개가 D 를 이루는 마크 + DEUCE 워드마크, 앱 팔레트 색).
   아이콘·글자 모양은 SVG 파일이 원본이다(assets/icons/icon.svg, assets/logo/deuce-wordmark.svg).
   .logo-text 의 'Deuce' 글자는 화면에선 감추고 워드마크 그림으로 보이되, 스크린리더는 글자를 그대로 읽는다.
   .logo-icon 안에 옛 이모지가 남은 페이지가 있어도 보이지 않게 font-size:0 */
.logo-icon{width:34px;height:34px;background:url('icons/icon.svg') center/contain no-repeat;flex-shrink:0;font-size:0;color:transparent}
.logo-text{display:block;width:80px;height:21px;background:url('logo/deuce-wordmark.svg') left center/contain no-repeat;font-size:0;color:transparent;overflow:hidden}
.back-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--border);font-family:inherit;font-size:12px;cursor:pointer;background:transparent;color:var(--text2);text-decoration:none}

/* 사이트 전체 내비게이션 (2026-09-06 통합) — 찾기·사람·번개·대회·코트.
   페이지 내부 탭 전환용 .nav/.nav-btn 과는 별개 클래스라 충돌하지 않는다. */
/* order 3 + 폭 100% 로 항상 아랫줄을 차지한다. 링크가 7개가 되면서 플립 폭(344px)에서는 한 줄에
   안 들어가는데, 가로 스크롤로 넘기면 밀기 전까지 마지막 항목이 안 보인다 — 원래 신고가 그거였다.
   그래서 스크롤 대신 줄바꿈으로 흘린다. 두 줄이 되더라도 전부 보이는 쪽이 낫다. */
.sitenav{order:3;display:flex;flex-wrap:wrap;align-items:center;gap:4px;flex:0 0 100%;width:100%;min-width:0;justify-content:center;row-gap:2px}
.sitenav::-webkit-scrollbar{display:none}
.sitenav-link{flex:0 0 auto;padding:6px 14px;border-radius:20px;border:none;font-family:inherit;font-size:12px;cursor:pointer;transition:all .2s;background:transparent;color:var(--text2);font-weight:500;text-decoration:none;white-space:nowrap}
/* 폴더블 커버 화면(갤럭시 플립 ~344px)에서는 기본 여백으로 6개가 안 들어간다 */
@media (max-width:380px){
  .sitenav-link{padding:6px 9px}
  .logo-text{width:72px;height:19px}
}
.sitenav-link.active{background:var(--ball);color:var(--ball-ink);box-shadow:inset 0 0 0 1px var(--court-600)}

/* 페이지 내부 탭 전환 (코치찾기/코치등록, 번개목록/번개만들기, 아마추어/프로 등) */
.nav{display:flex;gap:4px}
.nav-btn{padding:6px 14px;border-radius:20px;border:none;font-family:inherit;font-size:12px;cursor:pointer;transition:all .2s;background:transparent;color:var(--text2);font-weight:500}
/* 흰 바탕 위 라임 면은 경계가 1.27:1 이라 court-600 안쪽 선(흰 바탕과 3.6:1)으로 모양을 잡는다 (design-004) */
.nav-btn.active{background:var(--ball);color:var(--ball-ink);box-shadow:inset 0 0 0 1px var(--court-600)}

.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-btn{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .15s}
.icon-btn:hover{border-color:var(--green);color:var(--green)}
/* ── 알림 종 아이콘 (2026-09-06) ── */
.notif-wrap{position:relative}
/* [2026-10-07 안 B] 종목 스위치 — 두 버튼 토글 대신 헤더 아이콘 줄의 아이콘 버튼 하나(현재 종목 글자) + 작은 메뉴.
   지구본(언어)은 헤더에서 빼고 설정(profile.html)으로 옮겼다. 메뉴 모양은 알림 메뉴와 같다. */
.sport-wrap{position:relative}
.sport-btn{font-size:13px;font-weight:700;letter-spacing:.02em}
.sport-btn.on-padel{border-color:var(--court-900);color:var(--court-900)}
.sport-menu{display:none;position:absolute;top:44px;right:0;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.12);min-width:130px;overflow:hidden;z-index:150}
.sport-menu.show{display:block}
.sport-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 14px;font-size:13px;color:var(--text2);cursor:pointer;background:transparent;border:none;font-family:inherit;text-align:left;white-space:nowrap}
.sport-item:hover{background:var(--sand)}
.sport-item.active{color:var(--court-900);font-weight:700}
.sport-item-check{display:none;font-size:12px}
.sport-item.active .sport-item-check{display:inline}
/* 폰에서는 글자 로고를 숨겨 헤더를 한 줄로 유지한다(스크린리더에는 남긴다). */
@media (max-width:600px){.logo-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);background:none}}
.notif-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#c0392b;color:#fff;font-size:var(--fs-caption);font-weight:700;display:none;align-items:center;justify-content:center;line-height:1}
.notif-menu{display:none;position:absolute;top:44px;right:0;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.12);width:300px;max-height:380px;overflow-y:auto;z-index:150}
.notif-menu.show{display:block}
.notif-menu-header{padding:12px 14px;font-size:13px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border)}
.notif-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--sand)}
.notif-icon{font-size:16px;flex-shrink:0}
.notif-body{flex:1;min-width:0}
.notif-text{font-size:12.5px;color:var(--text);line-height:1.5}
.notif-time{font-size:var(--fs-caption);color:var(--text3);margin-top:2px}
.notif-empty{padding:24px 14px;text-align:center;font-size:12px;color:var(--text3)}

.profile-btn{position:relative;display:flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--text2);font-family:inherit;font-size:12px;font-weight:600;text-decoration:none;max-width:130px}
.profile-btn:hover{border-color:var(--green);color:var(--green)}
.profile-btn.current{background:var(--gl);border-color:var(--green);color:var(--green)}
/* 헤더 버튼은 보이는 크기(36px·28px 높이)는 두고 누르는 영역만 44px 로 넓힌다 (design-004 검수: 터치 영역) */
.icon-btn::after{content:"";position:absolute;inset:-4px}
.profile-btn::after{content:"";position:absolute;inset:-8px -2px}
.profile-btn-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:74px}

.practice-badge{margin:12px 14px 0;background:#fff4e6;color:#e67700;border:1px solid #ffd8a8;border-radius:var(--rs);padding:9px 12px;font-size:12px;font-weight:600;text-align:center}

/* ── 토스트 ── */
.toast{display:none;position:fixed;top:64px;left:14px;right:14px;color:#fff;padding:13px 16px;border-radius:12px;z-index:300;font-size:13px;text-align:center;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.toast.show{display:block}
.toast.success{background:var(--court-900);color:var(--on-court)}.toast.error{background:#c0392b}

/* ── 버튼 ── (design-001) 흰 바탕 위 주 버튼 = 코트 진초록 면 + --on-court 글씨.
   진한 면(히어로 등) 위 CTA 는 .btn-ball(라임 공 면 + 진초록 글씨) — 흰 바탕에 라임 면은 경계가 흐려(1.3:1) 쓰지 않는다 */
.btn-primary{width:100%;padding:13px;background:var(--court-900);color:var(--on-court);border:none;border-radius:12px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 3px 12px rgba(53,99,91,.22);text-decoration:none;display:block;text-align:center;transition:opacity .15s;min-height:var(--tap)}
.btn-ball{display:inline-block;padding:12px 18px;background:var(--ball);color:var(--ball-ink);border:none;border-radius:12px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;text-align:center}
.btn-ball:hover{opacity:.9}
.btn-primary:hover{opacity:.88}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-secondary{width:100%;padding:13px;background:var(--white);border:1.5px solid var(--border);border-radius:12px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--text2);margin-top:8px;min-height:var(--tap)}
.btn-ghost{width:100%;padding:13px;background:transparent;border:none;border-radius:12px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--text2)}
.btn-ghost:hover{background:var(--surface-2)}

/* ── 배지 · 섹션 제목 · 세그먼트(회색 트랙 + 흰 선택 칩) ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-chip);background:var(--ball);color:var(--ball-ink);font-size:var(--fs-caption);font-weight:700;line-height:1.4}
.section-title{font-size:var(--fs-title-s);font-weight:800;color:var(--text);margin-bottom:10px}
.segment{display:flex;gap:2px;background:var(--surface-2);border-radius:var(--r-chip);padding:3px}
.segment-item{flex:1;padding:7px 10px;border:none;border-radius:var(--r-chip);background:transparent;color:var(--text2);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:center}
.segment-item.active{background:var(--white);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* ── 아바타(원형 프로필 사진) — 채팅·매칭 등에서 공용. 크기만 골라 쓴다 (avatar-2026-09-28) ── */
.avatar{border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--ball-soft);color:var(--ball-ink);display:flex;align-items:center;justify-content:center;font-weight:700}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-36{width:36px;height:36px;font-size:14px}
.avatar-32{width:32px;height:32px;font-size:13px}
.avatar-28{width:28px;height:28px;font-size:var(--fs-caption)}

/* ── 카드 기본 ── */
.card{background:var(--white);border-radius:var(--r);padding:18px 16px;margin-bottom:12px;border:1px solid var(--border);box-shadow:var(--shadow)}
.card h3{font-size:16px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.card .sub{font-size:var(--fs-caption);color:var(--text3);margin-bottom:14px;line-height:1.6}

/* ── 폼 ── */
.form-row{margin-bottom:12px}
/* [ui-font-001 2026-09-28] 한글 라벨엔 대문자 스타일이 의미가 없다 — uppercase·letter-spacing 제거,
   13px/600으로. (영문 라벨이 섞여도 title-case 그대로 두는 편이 자연스럽다.) */
.form-row label{display:block;font-size:13px;color:var(--text3);font-weight:600;margin-bottom:4px}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--rs);font-family:inherit;font-size:13px;background:var(--sand);color:var(--text);outline:none;transition:all .15s}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--green);background:var(--white);box-shadow:0 0 0 3px rgba(53,99,91,.12)}
/* 입력칸 안내 글씨 — 브라우저 기본(#757575)은 #f6f6f4 입력칸 위 4.26:1 이라 --text3(4.93:1)로 (design-004) */
::placeholder{color:var(--text3);opacity:1}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-hint{font-size:var(--fs-caption);color:var(--text3);margin-top:4px;display:block}
.form-err{font-size:var(--fs-caption);color:#c0392b;margin-top:4px;min-height:14px}

/* ── 칩 ── */
.chip-row{display:flex;gap:5px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:20px;border:1px solid var(--border);font-size:12px;cursor:pointer;background:var(--white);color:var(--text2);transition:all .15s;font-family:inherit;font-weight:500}
.chip.on{background:var(--ball);color:var(--ball-ink);border-color:var(--court-600);font-weight:600}

/* ── 로딩/빈 결과 (index/meetups/tourneys 공통) ── */
.loading{text-align:center;padding:40px;color:var(--text3);font-size:13px}
.no-results{text-align:center;padding:40px;color:var(--text3);font-size:13px}

/* ── 섹션 라벨 (coaches/meetups/tourneys 공통, index 는 자체 값이 달라 페이지에 잔차 유지) ── */
.section-label{padding:0 14px;margin:16px 0 10px;display:flex;justify-content:space-between;align-items:center}
.section-label h3{font-weight:800;letter-spacing:-.02em;font-size:20px}
.section-label span{font-size:12px;color:var(--green);font-weight:600}

/* ── 필터 그리드 (coaches/courts 공통, courts 잔차는 courts.html 에 있음) ── */
.region-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.fi label{display:block;font-size:var(--fs-caption);color:var(--text3);margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.fi select{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:var(--rs);font-family:inherit;font-size:13px;background:var(--sand);color:var(--text);outline:none;transition:border-color .15s}
.fi select:focus{border-color:var(--green);background:var(--white)}
.fi select:disabled{opacity:.4}
.tag-row{display:flex;gap:5px;flex-wrap:wrap}

/* ── 모달 (coaches/meetups 공통, 세부 잔차는 각 페이지에 있음) ── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:flex-end}
.modal-bg.show{display:flex}
.modal{background:var(--white);border-radius:24px 24px 0 0;width:100%;max-height:90vh;overflow-y:auto;padding:20px;position:relative}
.modal-handle{width:44px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 18px}
.modal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.mstat{background:var(--sand);border-radius:var(--rs);padding:11px;text-align:center}
.mstat .n{font-size:17px;font-weight:700;color:var(--green)}
.mstat .l{font-size:var(--fs-caption);color:var(--text3);margin-top:2px;font-weight:500}
.msec{margin-bottom:14px}
.msec h4{font-size:var(--fs-caption);font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.msec p{font-size:13px;color:var(--text2);line-height:1.7}
/* ── 사람 상세 카드 공통(원래 people.html 전용이었다가 profile.html '내 프로필 카드' 가 같은 구성을
   쓰게 되며 공용으로 옮김 — 2026-09-28 페이지 통일). .card-photo-overlay 안에서 쓰는 흰 글씨 버전은
   그 페이지(people.html)에만 남겨 둔다. */
.sheet-photo{width:100%;aspect-ratio:4/5;max-height:50vh;border-radius:16px;overflow:hidden;background:var(--gl);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.sheet-photo img{width:100%;height:100%;object-fit:cover}
.sheet-photo-fallback{font-size:64px;font-weight:700;color:var(--green)}
.sheet-name-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.sheet-name{font-weight:800;letter-spacing:-.02em;font-size:22px}
.sheet-age{font-size:14px;color:var(--text2)}
.sheet-ntrp-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.card-ntrp{font-size:26px;font-weight:700;color:var(--green);line-height:1;display:inline-block;margin-right:8px}
.card-ntrp-label{font-size:var(--fs-caption);color:var(--text3);letter-spacing:.06em;text-transform:uppercase;font-weight:700;display:inline-block;margin-bottom:8px}
.meta-tag{padding:5px 12px;background:var(--sand);color:var(--text2);border-radius:20px;font-size:var(--fs-caption);font-weight:600}
.meta-tag.division{background:var(--sand);color:var(--text2)}
/* '선수출신' 은 부수(국화부·오픈부…)와 성격이 다른 이력이라 같은 회색 태그로 묻히면 안 된다. */
.meta-tag.division.pro{background:var(--ball);color:var(--ball-ink);font-weight:700}
.divider{height:.5px;background:var(--border);margin:12px 0}
.close-btn{position:absolute;top:20px;right:20px;background:var(--sand);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
.reg-section{background:var(--white);border-radius:var(--r);padding:16px;margin-bottom:10px;border:1px solid var(--border);box-shadow:var(--shadow)}
.reg-section h3{font-size:14px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.sec-desc{font-size:var(--fs-caption);color:var(--text3);margin-bottom:14px;line-height:1.6}

/* ── 본문 래퍼 (people/profile 공통 기본값. chat/reset 은 다른 이름(.chat-wrap/.reset-wrap)으로 분리) ── */
.wrap{padding:14px;margin-bottom:40px}

/* ── 로그인 안내 박스 (meetups 기본, tourneys 잔차는 tourneys.html 에 있음) ── */
.login-hint{background:var(--gl);border:1px solid rgba(0,0,0,.15);border-radius:var(--r);padding:20px;text-align:center;font-size:13px;color:var(--text2);line-height:1.7}
.login-hint a{color:var(--green);font-weight:700;text-decoration:underline}

/* ── 인스타그램 아이디 링크 (people.html 카드·매칭 목록, chat.html 매칭방 헤더 공용, 2026-09-28) ── */
/* 인스타 아이콘 링크 (2026-09-28 사용자 요청: 아이콘을 누르면 인스타로). 모바일 우선 — 터치 영역 44px.
   아이콘은 외부 파일 없이 인라인 SVG(그라데이션 둥근 사각 + 흰 카메라 글리프). 아이디는 스크린리더용 .sr-only 와 title 에. */
.ig-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;text-decoration:none;flex:none}
.ig-link::before{content:"";width:28px;height:28px;border-radius:8px;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.ig-link::after{content:"";position:absolute;width:28px;height:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect x='6' y='6' width='16' height='16' rx='5' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='14' cy='14' r='3.8' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='18.6' cy='9.4' r='1.2' fill='white'/%3E%3C/svg%3E") center/28px no-repeat}
.ig-link:active::before{transform:scale(.92)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── 스켈레톤 로딩 placeholder (회색 반짝임, 2026-09-28) — 구체적인 모양(카드·아바타 등)은
   각 페이지가 이 클래스에 크기·모양만 얹어 조합한다(people.html 사용례 참고). */
@keyframes skeleton-shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
.skeleton-block{background:linear-gradient(90deg,var(--sand) 25%,var(--sand2) 37%,var(--sand) 63%);background-size:400px 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.skeleton-block{animation:none;background:var(--sand2)}}

/* ── 반응형 바텀시트/모달 (2026-09-28, 카드 탭 → 상세 시트 등에서 공용) — 모바일은 아래에서 올라오는
   바텀시트, 1024px 이상은 가운데 모달로 뜬다. 기존 .modal-bg/.modal(항상 바텀시트, filter-sheet·
   meetups 상세가 씀)과는 별도 클래스라 그 쪽 쓰임에는 영향이 없다. */
.sheet-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:250;align-items:flex-end;justify-content:center}
.sheet-bg.show{display:flex}
.sheet{background:var(--white);border-radius:24px 24px 0 0;width:100%;max-height:85vh;overflow-y:auto;padding:0 20px 20px;position:relative;-webkit-overflow-scrolling:touch}
.sheet-handle-hit{height:44px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}
.sheet-handle{width:44px;height:4px;background:var(--border);border-radius:2px}
.sheet-close-btn{position:absolute;top:10px;right:16px;background:var(--sand);border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;z-index:2}
@media (prefers-reduced-motion: no-preference){
  .sheet-bg.show .sheet{animation:sheetSlideUp .28s cubic-bezier(.22,.61,.36,1) both}
}
@media (prefers-reduced-motion: reduce){
  .sheet-bg.show .sheet{animation:sheetFadeIn .18s ease both}
}
@keyframes sheetSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes sheetFadeIn{from{opacity:0}to{opacity:1}}
@media (min-width:1024px){
  .sheet-bg{align-items:center;padding:20px}
  .sheet{max-width:480px;border-radius:20px;max-height:85vh}
}
@media (min-width:1024px) and (prefers-reduced-motion: no-preference){
  .sheet-bg.show .sheet{animation:sheetScaleIn .22s cubic-bezier(.22,.61,.36,1) both}
}
@keyframes sheetScaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

/* ── 기본 프로필 사진 = 테니스공 (2026-09-28 사용자: "사진 없으면 기본 사진을 테니스공으로, 지금은 그냥 노랑") ──
   사진(img)이 없는 아바타 자리 전부에 같은 공 그림을 깐다 — 이니셜 글자는 숨김. 외부 파일·요청 없음(인라인 SVG).
   :has() 로 "img 가 없을 때만" 고른다(크롬 105+·사파리 15.4+·파이어폭스 121+).
   (design-001 다시 그림, 사용자: "선이 너무 삐뚤해") 솔기 = 공과 같은 반지름(30)의 원호 두 개를 좌우 대칭으로
   — 중심 (-6,32)·(70,32), 공 테두리와 (13|51, 8.8)·(13|51, 55.2)에서 만난다. 솔기 끝은 공 원으로 잘라(clipPath)
   밖으로 삐져나오지 않게 한다. 색: 면 --ball(#ccf186), 테두리 --court-300(#a3cd9e), 솔기 흰색 */
:root{--ball-avatar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='32' cy='32' r='30'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='%23ccf186'/%3E%3Cg clip-path='url(%23c)' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M13 8.8A30 30 0 0 1 13 55.2'/%3E%3Cpath d='M51 8.8A30 30 0 0 0 51 55.2'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='30' fill='none' stroke='%23a3cd9e' stroke-width='2'/%3E%3C/svg%3E")}
.avatar:not(:has(img)),.mini-avatar:not(:has(img)),.match-avatar:not(:has(img)),.match-avatar-big:not(:has(img)),
.modal-avatar:not(:has(img)),.meet-host-avatar:not(:has(img)),.avatar-circle:not(:has(img)){
  background:var(--ball-avatar) center/cover no-repeat,#fff!important;color:transparent!important;text-shadow:none;font-size:0!important}
/* 큰 사진 칸(사람 덱 카드·상세 시트)은 공을 가운데 작게 */
.card-photo:not(:has(img)),.sheet-photo:not(:has(img)){background:var(--ball-avatar) center/42% no-repeat,#f7f7f5!important}
.card-photo-fallback,.sheet-photo-fallback{font-size:0!important;color:transparent!important}

/* ── 아이콘 (design-003, 2026-09-28) ── 이모지 대신 쓰는 선 아이콘 한 세트. 외부 요청·JS 없음(CSS mask + 인라인 SVG).
   쓰는 법: <span class="ic ic-pin" aria-hidden="true"></span> — 글자 색(currentColor)·글자 크기(1.15em)를 따라간다.
   경로는 대부분 Lucide(ISC 라이선스, lucide.dev) 를 선 굵기 1.8 로 맞춘 것, ic-court·ic-ball 은 직접 그림.
   아이콘만 있는 버튼은 버튼에 aria-label 을 단다. 이모지는 사용자가 쓴 글·채팅 내용에만 남긴다. */
.ic{display:inline-block;width:1.15em;height:1.15em;flex:none;vertical-align:-.22em;background-color:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic-pin{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E")}
.ic-calendar{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M16%202v4M8%202v4M3%2010h18%27%2F%3E%3C%2Fsvg%3E")}
.ic-clock{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710%27%2F%3E%3Cpath%20d%3D%27M12%206v6l4%202%27%2F%3E%3C%2Fsvg%3E")}
.ic-bolt{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13%203%205%2014h5l-1%207%208-11h-5l1-7Z%27%2F%3E%3C%2Fsvg%3E")}
.ic-chat{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7.9%2020A9%209%200%201%200%204%2016.1L2%2022Z%27%2F%3E%3C%2Fsvg%3E")}
.ic-pencil{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.174%206.812a1%201%200%200%200-3.986-3.987L3.842%2016.174a2%202%200%200%200-.5.83l-1.321%204.352a.5.5%200%200%200%20.623.622l4.353-1.32a2%202%200%200%200%20.83-.497z%27%2F%3E%3Cpath%20d%3D%27m15%205%204%204%27%2F%3E%3C%2Fsvg%3E")}
.ic-map{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14.106%205.553a2%202%200%200%200%201.788%200l3.659-1.83A1%201%200%200%201%2021%204.619v12.764a1%201%200%200%201-.553.894l-4.553%202.277a2%202%200%200%201-1.788%200l-4.212-2.106a2%202%200%200%200-1.788%200l-3.659%201.83A1%201%200%200%201%203%2019.381V6.618a1%201%200%200%201%20.553-.894l4.553-2.277a2%202%200%200%201%201.788%200z%27%2F%3E%3Cpath%20d%3D%27M15%205.764v15M9%203.236v15%27%2F%3E%3C%2Fsvg%3E")}
.ic-search{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%278%27%2F%3E%3Cpath%20d%3D%27m21%2021-4.3-4.3%27%2F%3E%3C%2Fsvg%3E")}
.ic-phone{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%27%2F%3E%3C%2Fsvg%3E")}
.ic-tree{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%2019a4%204%200%200%201-2.24-7.32A3.5%203.5%200%200%201%209%206.03V6a3%203%200%201%201%206%200v.04a3.5%203.5%200%200%201%203.24%205.65A4%204%200%200%201%2016%2019Z%27%2F%3E%3Cpath%20d%3D%27M12%2019v3%27%2F%3E%3C%2Fsvg%3E")}
.ic-home{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2011.5%2012%204l9%207.5%27%2F%3E%3Cpath%20d%3D%27M5.5%2010v9a1%201%200%200%200%201%201h4v-6h3v6h4a1%201%200%200%200%201-1v-9%27%2F%3E%3C%2Fsvg%3E")}
.ic-landmark{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2022h18M6%2018v-7M10%2018v-7M14%2018v-7M18%2018v-7M12%202l8%205H4Z%27%2F%3E%3C%2Fsvg%3E")}
.ic-building{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%272%27%20width%3D%2716%27%20height%3D%2720%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M9%2022v-4h6v4M8%206h.01M16%206h.01M12%206h.01M12%2010h.01M12%2014h.01M16%2010h.01M16%2014h.01M8%2010h.01M8%2014h.01%27%2F%3E%3C%2Fsvg%3E")}
.ic-cash{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272%27%20y%3D%276%27%20width%3D%2720%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272%27%2F%3E%3Cpath%20d%3D%27M6%2012h.01M18%2012h.01%27%2F%3E%3C%2Fsvg%3E")}
.ic-parking{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710%27%2F%3E%3Cpath%20d%3D%27M9%2017V7h4a3%203%200%200%201%200%206H9%27%2F%3E%3C%2Fsvg%3E")}
.ic-bulb{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%2014c.2-1%20.7-1.7%201.5-2.5%201-.9%201.5-2.2%201.5-3.5A6%206%200%200%200%206%208c0%201%20.2%202.2%201.5%203.5.7.7%201.3%201.5%201.5%202.5M9%2018h6M10%2022h4%27%2F%3E%3C%2Fsvg%3E")}
.ic-lock{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%2711%27%20width%3D%2718%27%20height%3D%2711%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M7%2011V7a5%205%200%200%201%2010%200v4%27%2F%3E%3C%2Fsvg%3E")}
.ic-award{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%276%27%2F%3E%3Cpath%20d%3D%27M15.477%2012.89%2017%2022l-5-3-5%203%201.523-9.11%27%2F%3E%3C%2Fsvg%3E")}
.ic-video{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m16%2013%205.223%203.482a.5.5%200%200%200%20.777-.416V7.87a.5.5%200%200%200-.752-.432L16%2010.5%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%276%27%20width%3D%2714%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3C%2Fsvg%3E")}
.ic-play{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203l14%209-14%209Z%27%2F%3E%3C%2Fsvg%3E")}
.ic-link{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%27%2F%3E%3Cpath%20d%3D%27M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%27%2F%3E%3C%2Fsvg%3E")}
.ic-external{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%207h10v10M7%2017%2017%207%27%2F%3E%3C%2Fsvg%3E")}
.ic-sliders{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%204h-7M10%204H3M21%2012h-9M8%2012H3M21%2020h-5M12%2020H3M14%202v4M8%2010v4M16%2018v4%27%2F%3E%3C%2Fsvg%3E")}
.ic-alert{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%27%2F%3E%3Cpath%20d%3D%27M12%209v4M12%2017h.01%27%2F%3E%3C%2Fsvg%3E")}
.ic-check{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27%2F%3E%3C%2Fsvg%3E")}
.ic-users{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M3%2020c0-3.3%202.7-6%206-6s6%202.7%206%206%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%278.5%27%20r%3D%272.3%27%2F%3E%3Cpath%20d%3D%27M15.5%2014.3c2.6.4%204.5%202.7%204.5%205.7%27%2F%3E%3C%2Fsvg%3E")}
.ic-sunrise{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202v8M4.93%2010.93l1.41%201.41M2%2018h2M20%2018h2M19.07%2010.93l-1.41%201.41M22%2022H2M8%206l4-4%204%204M16%2018a4%204%200%200%200-8%200%27%2F%3E%3C%2Fsvg%3E")}
.ic-sun{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M12%202v2M12%2020v2M4.93%204.93l1.41%201.41M17.66%2017.66l1.41%201.41M2%2012h2M20%2012h2M6.34%2017.66l-1.41%201.41M19.07%204.93l-1.41%201.41%27%2F%3E%3C%2Fsvg%3E")}
.ic-cloud-sun{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202v2M4.93%204.93l1.41%201.41M20%2012h2M19.07%204.93l-1.41%201.41M15.947%2012.65a4%204%200%200%200-5.925-4.128%27%2F%3E%3Cpath%20d%3D%27M13%2022H7a5%205%200%201%201%204.9-6H13a3%203%200%200%201%200%206Z%27%2F%3E%3C%2Fsvg%3E")}
.ic-moon{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203a6%206%200%200%200%209%209%209%209%200%201%201-9-9Z%27%2F%3E%3C%2Fsvg%3E")}
.ic-globe{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710%27%2F%3E%3Cpath%20d%3D%27M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20M2%2012h20%27%2F%3E%3C%2Fsvg%3E")}
.ic-court{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%273%27%20width%3D%2716%27%20height%3D%2718%27%20rx%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M4%2012h16M8%203v18M16%203v18M8%207.5h8M8%2016.5h8M12%207.5v9%27%2F%3E%3C%2Fsvg%3E")}
.ic-ball{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279.5%27%2F%3E%3Cpath%20d%3D%27M6%204.65A9.5%209.5%200%200%201%206%2019.35M18%204.65A9.5%209.5%200%200%200%2018%2019.35%27%2F%3E%3C%2Fsvg%3E")}
.ic-target{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%276%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272%27%2F%3E%3C%2Fsvg%3E")}
.ic-folder{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.69-.9L9.6%203.9A2%202%200%200%200%207.93%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%27%2F%3E%3C%2Fsvg%3E")}
.ic-clip{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m21.44%2011.05-9.19%209.19a6%206%200%200%201-8.49-8.49l8.57-8.57A4%204%200%201%201%2018%208.84l-8.59%208.57a2%202%200%200%201-2.83-2.83l8.49-8.48%27%2F%3E%3C%2Fsvg%3E")}
.ic-camera{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14.5%204h-5L7%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-3l-2.5-3z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2713%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E")}
.ic-user-check{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27m16%2011%202%202%204-4%27%2F%3E%3C%2Fsvg%3E")}
.ic-instagram{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272%27%20y%3D%272%27%20width%3D%2720%27%20height%3D%2720%27%20rx%3D%275%27%2F%3E%3Cpath%20d%3D%27M16%2011.37A4%204%200%201%201%2012.63%208%204%204%200%200%201%2016%2011.37z%27%2F%3E%3Cpath%20d%3D%27M17.5%206.5h.01%27%2F%3E%3C%2Fsvg%3E")}
/* 큰 장식 자리(매치 축하·등록 완료 등)는 이모지 대신 테니스공 그림 */
.ball-hero{display:block;width:64px;height:64px;margin:0 auto 12px;background:var(--ball-avatar) center/contain no-repeat}

/* 레슨 가능 시간 편집기 (coaches.html 등록 폼·lessons.html 공용, lessons.js mountAvailabilityEditor) */
.avail-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.avail-row{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1.5px solid var(--border);border-radius:var(--rs);font-size:12.5px;background:var(--sand)}
.avail-row-text{flex:1;font-weight:600;color:var(--text)}
.avail-row-sub{color:var(--text3);font-weight:500}
.avail-remove-btn{border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:14px;flex-shrink:0}
/* [2026-10-01 사용자 신고 "내 레슨 UI 가 삐져나온다" → 2026-10-02 공용으로 이동]
   grid 자식의 기본 min-width 가 auto 라 <input type="time"> 이 제 내용 폭(약 90px) 아래로 줄지
   않는다 → 375px 화면에서 행이 428px 이 되고, 페이지가 가로로 늘어나면서 **고정 하단 탭바까지
   끌려 나간다**(탭바 자체는 멀쩡하다). 그래서 폰 폭에서는 두 줄로 접는다.
   lessons.html 에만 페이지 지역으로 덮어 뒀던 규칙인데, 같은 편집기를 coaches.html 등록 폼도
   쓰므로(lessons.js mountAvailabilityEditor 하나를 공유) 공용 파일로 옮겼다. */
.avail-add-row{display:grid;grid-template-columns:76px 1fr 1fr;gap:6px;row-gap:8px;align-items:center}
.avail-add-row>*{min-width:0}
.avail-add-row>#avail-slot{grid-column:1 / 3}
.avail-add-row>.avail-add-btn{grid-column:3 / 4;min-height:44px}
@media (min-width:480px){
  .avail-add-row{grid-template-columns:76px 1fr 1fr 1fr auto}
  .avail-add-row>#avail-slot{grid-column:auto}
  .avail-add-row>.avail-add-btn{grid-column:auto}
}
.avail-add-row select,.avail-add-row input{padding:8px 6px;border:1.5px solid var(--border);border-radius:var(--rs);font-family:inherit;font-size:12px;background:var(--white);color:var(--text)}
.avail-add-btn{padding:9px 10px;background:var(--court-900);color:var(--on-court);border:none;border-radius:var(--rs);font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap;font-weight:600}

/* 웹 푸시 권한 안내 시트 (push-001, push.js 가 번개 개설 직후에만 띄운다) */
.push-sheet{position:fixed;left:14px;right:14px;bottom:14px;z-index:400;background:var(--white);border-radius:var(--r);border:1px solid var(--border);box-shadow:var(--shadow);padding:16px;max-width:420px;margin:0 auto}
.push-sheet p{margin:0 0 12px;font-size:13.5px;color:var(--text2);line-height:1.5}
.push-sheet-actions{display:flex;gap:8px}
.push-sheet-actions .btn-primary,.push-sheet-actions .btn-secondary{margin-top:0;width:auto;flex:1}
.push-sheet.push-sheet-info p{margin-bottom:0}

/* [2026-10-07 안 B 이후] 폰(≤600px) 헤더 메뉴 위치 — 헤더가 한 줄(로고 아이콘 + 오른쪽 아이콘 줄)이 되면서 .header-actions 는
   오른쪽 끝에 붙는다. 메뉴를 각 버튼 래퍼가 아니라 .header-actions 의 **오른쪽 끝** 기준으로 열어 화면 안에 들어오게 한다
   (344px: 종 메뉴 300px 가 x=28~328). 두 줄 헤더 시절의 "왼쪽 정렬" 규칙(fix/followups-1007)이 함께 들어와도 이 블록이
   파일 끝이라 이긴다 — 그 규칙은 지워도 된다. */
@media (max-width:600px){
  .header-actions{position:relative}
  .sport-wrap,.notif-wrap{position:static}
  .sport-menu,.notif-menu{right:0;left:auto}
  .notif-menu{width:min(300px,calc(100vw - 32px))}
}