/* 자석 칠판.
 *
 * 기준 기기는 **태블릿**이다(10~11인치, 가로). 데스크톱은 덤이고 폰은 입장 탭 위주다.
 * 그래서 기본 크기 자체를 태블릿에 맞춰 크게 잡고, 좁아지면 줄인다 —
 * 반대로(데스크톱 기준으로 잡고 키우기) 하면 태블릿에서 늘 작다.
 *
 * 배경은 흰색으로 고정한다. 체육관 조명 아래 흰 바탕이 가장 잘 보이고,
 * 기기 다크모드에 따라 칠판 색이 바뀌면 "어제와 다른 화면"이 되어 버린다.
 */
:root {
  /* **기기 다크모드를 타지 않는다.** 이 앱에는 어두운 판이 없다 — 위 주석대로 배경은
     흰색 고정이다. 그런데 폰 브라우저는 그렇게 만든 화면도 제멋대로 뒤집는다
     (크롬 안드로이드의 '자동 어두운 테마', 삼성 인터넷의 '다크 모드'). 흰 바탕에
     맞춰 고른 초록·회색이 반전되어 글자가 안 읽히고, 무엇보다 **어제와 다른 화면**이
     된다. 'only light' 가 그 거부 선언이고, 입력칸·버튼 같은 브라우저 기본 부품도
     이 선언을 따라 밝은 쪽으로 그려진다. */
  color-scheme: only light;
  --bg: #ffffff;
  --panel: #f7f8fa;          /* 흰 바탕 위에서 영역을 구분하는 아주 옅은 회색 */
  --fg: #14181c;
  --muted: #5f6b7a;
  --card: #ffffff;
  --border: #d8dee6;
  --primary: #1f7a4d;
  --primary-fg: #ffffff;
  --live: #1f7a4d;
  --live-bg: #eef8f2;        /* 경기 중인 코트 — 옅은 초록 */
  --danger: #b42318;
  --danger-bg: #fdf3f2;      /* 지우는 자리에서 켜지는 옅은 빨강 — live-bg 의 짝 */
  --blue: #1d4ed8;          /* 심판 */
  /* 레슨 자리. 초록(경기·난타)·빨강(위험)·파랑(심판)과 겹치지 않는 색이어야
     같은 코트 안에서 난타1과 난타2가 한눈에 갈린다. */
  --lesson: #6d28d9;
  --lesson-bg: #f5f1fe;
  /* 관리코트. 초록(경기·난타)·보라(레슨)·빨강·파랑과 다 갈려야 한 화면에서
     "여기는 줄이 없는 코트" 가 한눈에 보인다. */
  --managed: #b45309;
  --managed-bg: #fdf6ec;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06);
}

* { box-sizing: border-box; }

/* hidden 속성은 브라우저 기본 스타일([hidden]{display:none})로 동작한다. 그런데
   .join/.dup/.add 처럼 클래스가 display 를 지정하면 작성자 스타일이 이겨서
   "숨겼는데 그대로 보이는" 일이 생긴다(실제로 관리 탭 비번 창이 그랬다).
   숨김은 협상 대상이 아니므로 못을 박는다. */
[hidden] { display: none !important; }
/* 바탕은 html 에도 못 박는다. body 에만 주면 스크롤이 끝까지 갔을 때 그 너머(오버스크롤)
   와 주소창 뒤가 브라우저 기본색으로 남아, 다크모드 폰에서 그 부분만 까맣게 보였다. */
html { background: var(--bg); color: var(--fg); }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  /* 태블릿에서 읽기 편한 기준 크기. 아래 모든 rem 이 여기에 따라 커진다. */
  font-size: 17px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  /* 대기판을 계속 만지는 화면이다. 더블탭 확대는 오작동만 만든다. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }
button {
  cursor: pointer; border: 1px solid transparent; border-radius: 12px;
  min-height: 48px;           /* 손가락으로 정확히 눌리는 최소 크기 */
}

/* 대기본(비상 모드) 띠. 원내에서는 이 요소가 아예 그려지지 않는다. */
.standby-banner {
  padding: .45rem .8rem; text-align: center; font-weight: 700;
  background: var(--danger); color: #fff;
}

/* ------------------------------------------------------------------- 탭 */
.tabs {
  display: flex; gap: .3rem; padding: .3rem .6rem; flex-wrap: wrap;
  background: var(--card); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.tab {
  padding: .5rem 1.5rem; border-radius: 10px; text-decoration: none;
  color: var(--muted); font-weight: 600; font-size: 1rem;
}
.tab.is-on { background: var(--primary); color: var(--primary-fg); }
/* 관리 아래 서브메뉴. 위 탭은 넷으로 묶어 두고, 관리자 전용 화면은 여기로 내렸다. */
.subtabs {
  display: flex; gap: .3rem; align-items: center; flex-wrap: wrap;
  padding: .35rem .6rem; background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.subtab {
  padding: .4rem 1rem; border-radius: 9px; text-decoration: none;
  color: var(--muted); font-weight: 600; font-size: .92rem;
}
.subtab.is-on { background: var(--card); color: var(--fg); border: 1px solid var(--border); }
/* 개발자 문. 평소에 쓰는 곳이 아니라 오른쪽 끝에 떨어뜨려 두고 흐리게 둔다. */
.subtab-gear { margin-left: auto; font-size: 1.1rem; opacity: .5; padding: .4rem .7rem; }
.subtab-gear.is-on { opacity: 1; }

/* ------------------------------------------------- 입장 화면 / 잠금 화면 */
.join { display: flex; justify-content: center; padding: 2rem 1rem 3rem; }
.join-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--shadow); padding: 1.8rem; width: min(460px, 100%);
  display: flex; flex-direction: column; gap: 1rem; text-align: center;
}
.join-card h1 { font-size: 1.5rem; margin: 0; }
.join-card .lead { color: var(--muted); margin: 0; font-size: 1rem; }
.join-card input {
  padding: 1rem; border-radius: 14px; text-align: center;
  border: 1px solid var(--border); background: var(--panel); color: var(--fg);
  font-size: 1.3rem;
}
button.big { padding: 1.1rem; font-size: 1.2rem; font-weight: 700;
  background: var(--primary); color: var(--primary-fg); }
/* .ghost 가 뒤에 정의되어 padding 까지 덮어쓰므로 조합을 따로 못박는다. */
button.big.ghost { padding: 1.1rem; font-size: 1.15rem; font-weight: 600;
  background: transparent; color: var(--fg); border-color: var(--border); }

/* 이름이 겹쳤을 때 나오는 선택지 */
.dup { display: flex; flex-direction: column; gap: .6rem; }
/* 명단에 있는 같은 이름들. 한 명당 버튼 하나 — 이름에 전화번호 뒤 네 자리가 붙어 있어
   본인은 자기 것을 안다. */
.dup-picks { display: flex; flex-direction: column; gap: .6rem; }
.dup-picks:empty { display: none; }
.dup-hint { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.dup-hint b { color: var(--fg); }
.dup-msg {
  margin: 0 0 .2rem; font-size: 1.05rem; font-weight: 600; line-height: 1.5;
}
button:disabled { opacity: .4; cursor: default; }

.plea {
  margin: 0; padding: .75rem .9rem;
  background: var(--live-bg); border: 1px solid var(--primary);
  border-radius: 12px; color: var(--fg); font-size: .95rem; line-height: 1.6;
}
.plea b { color: var(--primary); }
/* 경고 투의 안내. 부탁이 아니라 규칙이라는 것을 색으로 알린다. */
.plea.is-warn { background: #fff4f2; border-color: var(--danger); }
.plea.is-warn b { color: var(--danger); }
.enter-bottom { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.enter-bottom button { width: 100%; padding: .9rem; }
/* '폰에 앱으로 저장하기'. 입장이 끝난 **뒤에** 하는 일이라 위의 '처음 왔어요' 보다
   조용해야 한다 — 같은 크기로 두면 처음 온 사람이 어느 쪽을 눌러야 할지 헷갈린다. */
#install { padding: .7rem; font-size: .95rem; color: var(--muted); }

.pin-row { display: flex; justify-content: center; gap: .55rem; min-height: 3rem; }
.pin-dot {
  width: 2.4rem; height: 3rem; border-radius: 12px;
  border: 2px solid var(--border); background: var(--panel);
  display: grid; place-items: center; font-size: 1.5rem; font-weight: 700;
}
.pin-dot.is-set { border-color: var(--primary); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.key {
  padding: 1.15rem 0; font-size: 1.6rem; font-weight: 700;
  background: var(--panel); color: var(--fg); border-color: var(--border);
}
.key:active { background: var(--primary); color: var(--primary-fg); }
.key.ghost { font-size: 1.05rem; color: var(--muted); }

/* ----------------------------------------------------------- 관리: 바 */
/* 이 화면의 주인공은 코트다. 머리말은 한 줄로 눌러 세로 공간을 코트에 넘긴다. */
.bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .45rem .8rem; background: var(--panel);
  border-bottom: 1px solid var(--border);
  /* sticky 로 두지 않는다 — 탭 바가 이미 붙어 있고, 둘이 겹치면 위가 더 좁아진다. */
}
/* 바 왼쪽에 붙는 이름표. 화면 제목 노릇이라 조용히 둔다. */
.bar-label { color: var(--muted); font-size: .85rem; }
.bar-club { font-weight: 700; font-size: 1.05rem; }
.bar-url { color: var(--muted); font-size: .8rem; }
.grow { flex: 1; }

.ghost { background: transparent; color: var(--fg); border-color: var(--border);
  padding: .6rem 1.1rem; font-weight: 500; }
.ghost.danger { color: var(--danger); }
.primary { background: var(--primary); color: var(--primary-fg);
  padding: .7rem 1.3rem; font-weight: 700; font-size: 1.05rem; }
/* 바와 행 안에서 쓰는 작은 버튼. 그래도 손가락이 닿는 크기는 지킨다. */
.sm { padding: .45rem .8rem; font-size: .95rem; min-height: 40px; }
.link { background: none; border: none; color: var(--muted);
  font-size: .88rem; padding: .3rem .45rem; min-height: 36px; }
.count {
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: .1rem .6rem; font-size: .85rem; color: var(--muted);
}

main { padding: .8rem; display: grid; gap: 1.1rem; max-width: 900px; margin: 0 auto; }
.sec { font-size: .95rem; margin: 0 0 .45rem; display: flex; align-items: center;
  gap: .45rem; flex-wrap: wrap; color: var(--muted); font-weight: 700; }
.sec-hint { color: var(--muted); font-weight: 400; font-size: .8rem; }

/* 알림 스위치. 켜져 있는지가 멀리서도 보여야 한다. */
#push-toggle { padding: .35rem .7rem; font-size: .8rem; }
#push-toggle.is-on { border-color: var(--primary); color: var(--primary); }
/* 전광판 '사용 방법'. 알림 스위치 옆에 나란히 서므로 같은 치수여야 한다.
   (입장 화면에도 #howto 가 있는데 그쪽은 제목 옆이라 .sm 그대로 둔다 — 여기만 집는다.) */
.sec #howto { padding: .35rem .7rem; font-size: .8rem; }

/* -------------------------------------------------------------- 쿨타임 */
/* 잠깐 빠진 사람들. 휴게실 바로 아래에 조용히 둔다 — 벌이 아니라 순서다. */
.cool-sec { margin: .8rem 0 .4rem; font-size: .85rem; }
.magnet.is-cooling { opacity: .6; border-style: dashed; cursor: default; }
.cool-left {
  margin-left: .35rem; font-size: .8rem; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
#cooldown.is-on { border-color: var(--danger); color: var(--danger); }

/* ------------------------------------------------- 관리: AI 매칭 추천 */
/* 점수 높은 순으로 셋. 한 줄이 한 조라 세로로 훑으면 다 읽힌다 —
   고른 줄만 초록 테두리로 잡아 준다(그게 지금 '고른 넷'이다). */
.match-box {
  border: 1px solid var(--border); border-radius: 12px; background: var(--card);
  padding: .55rem .65rem; margin: .5rem 0;
}
/* 머리줄과 날짜별 목록은 한 덩어리다 — main 의 grid 간격에 떼어 놓지 않는다. */
.matches { display: flex; flex-direction: column; gap: .25rem; }
.match-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.match-opt {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  width: 100%; text-align: left; margin-top: .4rem; min-height: 44px;
  padding: .5rem .6rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  font-size: 1rem; cursor: pointer;
}
.match-opt.is-picked { border-color: var(--primary); background: var(--live-bg); }
/* 마지막 칸('실력 맞춤')은 순위가 아니라 다른 종류의 제안이다 — 점선으로 갈라 둔다. */
.match-opt.is-skill { border-style: dashed; margin-top: .55rem; }
.match-opt:disabled { opacity: .5; cursor: default; }
.match-rank { font-size: .74rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
.match-names { font-weight: 700; }
.match-note { font-size: .78rem; color: var(--muted); white-space: nowrap; }

/* --------------------------------------------------------- 관리: 줄 */
/* 코트도 대기조도 한 줄에 하나. 세로로 훑으면 전부 읽힌다. */
.rows { display: flex; flex-direction: column; gap: .4rem; }
.row {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); min-height: 60px;
}
.row.is-live { border-color: var(--primary); background: var(--live-bg); }
.row.is-idle { border-style: dashed; background: var(--panel); }
.row.is-ready { border-color: var(--primary); }

/* 코트 밑에 딸려 붙는 대기조.
   "2번 코트가 경기 중이고 다음은 이 조" 를 한 자리에서 읽으라는 배치라, **그 코트에
   속해 보여야** 한다.

   ★ **선을 하나도 긋지 않는다.** 처음엔 테두리를 남긴 채 음수 여백으로 끌어올리고
     왼쪽에 초록 강조선을 뒀는데, 왼쪽에서 초록이 **세 겹으로 뭉쳤다** —
     위 코트 줄의 초록 테두리(is-live), 이 줄의 초록 테두리(is-ready: 조가 다 차면
     초록이 된다), 그리고 강조선. 화면에서는 정체 모를 초록 실선으로 보였다.
     딸린 줄은 **위 줄과 경쟁하는 카드가 아니라 붙어 있는 쪽지**다. 소속은 선이 아니라
     **들여쓰기와 낮은 키**로 말한다.

   ★ 여백은 겹치지 않을 만큼만 당긴다(줄 간격 .4rem 중 .2rem). 더 당기면 위 줄의
     테두리와 맞닿아 다시 두 겹으로 보인다. */
.row.is-sub {
  margin-left: 1.6rem; margin-top: -.2rem;
  min-height: 0; padding: .3rem .55rem;
  border: 0;                       /* 선을 하나도 긋지 않는다 */
  border-radius: 10px;
  background: var(--panel);
}
/* 딸린 줄의 순번은 `대기1`·`대기2` 다. 세 글자가 들어가므로 자리를 조금 넓게 잡는다 —
   좁으면 줄마다 이름 시작 위치가 어긋나 계단처럼 보인다. */
.row.is-sub .row-no.ord {
  background: transparent; color: var(--muted);
  font-size: .78rem; font-weight: 700; padding: 0; min-width: 2.9rem;
}
/* 자석도 같이 낮춘다. magnet 의 min-height(44px)가 그대로 걸리면 '작게' 가 안 된다 —
   딸린 줄의 키를 정하는 것은 padding 이 아니라 이 값이었다. */
.row.is-sub .magnet {
  font-size: .92rem; padding: .15rem .45rem; min-height: 34px; box-shadow: none;
}
/* 딸린 줄이 둘 이상이면(한 코트에 두 조를 걸어 둘 수 있다) 줄 간격이 갈라 준다 —
   여기서도 선은 안 긋는다. */
.row-no {
  flex: 0 0 auto; min-width: 2.6rem; font-weight: 800; font-size: 1.05rem;
  text-align: center;
}
.row-no.ord {
  background: var(--primary); color: var(--primary-fg);
  border-radius: 9px; padding: .1rem .5rem; min-width: 1.9rem;
}
.row-names { flex: 1; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.row-empty { color: var(--muted); font-size: .95rem; }
.row-act { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; }
.row-time {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--live);
  font-size: 1rem; min-width: 3.1rem; text-align: right;
}
/* 난타 코트가 교대 시각을 넘겼다. 기다리는 조가 생기는 즉시 서버가 넘긴다. */
.row-time.is-over { color: var(--danger); }

/* 난타 코트 딱지. 코트 종류를 한눈에 가른다. */
.kind-tag {
  flex: 0 0 auto; font-size: .75rem; font-weight: 700;
  padding: .15rem .45rem; border-radius: 6px;
  background: var(--primary); color: var(--primary-fg);
}
/* 이 조가 뺀 코트. 그 코트에서 치는 조장이 다음 조를 제대로 부르려면 보여야 한다.
   딱지지 경고가 아니므로 테두리만 두르고 색은 죽여 둔다. */
.avoid-tag {
  flex: 0 0 auto; font-size: .75rem; font-weight: 700;
  padding: .15rem .45rem; border-radius: 6px;
  border: 1px solid var(--danger); color: var(--danger); background: transparent;
}
/* 이 조가 올라갈 코트. 위 avoid-tag 의 반대짝이라 모양을 맞추고 색만 가른다 —
   빼는 것은 빨강, 정하는 것은 초록이다. 이쪽만 **누를 수 있다**(눌러서 푼다). */
.want-tag {
  flex: 0 0 auto; font-size: .75rem; font-weight: 700;
  padding: .15rem .45rem; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--primary); color: var(--primary); background: transparent;
}
.row.is-rally.is-idle { border-color: var(--primary); }

/* 레슨 자리. 난타 코트의 자리 하나를 빌려 쓰는 것이라 **같은 코트 안에서 갈려 보여야**
   한다 — 난타1은 난타 색, 난타2는 레슨 색이 되는 식이다. 시간 제한도 대기 줄도 없는
   자리라 '교대 임박'(is-over) 빨간 글씨는 여기 붙지 않는다. */
.kind-tag.is-lesson-tag { background: var(--lesson); color: #fff; }
.row.is-lesson.is-live { border-color: var(--lesson); background: var(--lesson-bg); }
/* 빈 레슨 자리는 **점선**이다 — 저절로 차지 않는 자리라는 뜻이다(대기 줄이 없다). */
.row.is-lesson.is-idle { border-color: var(--lesson); border-style: dashed; }

/* 관리코트. 대기 줄에서 뗀 코트라 **빈 줄이 점선인 규칙을 레슨과 공유한다** —
   점선 = 저절로 차지 않는다. 다만 여기서 친 것은 경기라서(판수·승패가 쌓인다)
   색만 다르고 나머지 문법은 경기 코트 그대로다. */
.kind-tag.is-managed-tag { background: var(--managed); color: #fff; }
.row.is-managed.is-live { border-color: var(--managed); background: var(--managed-bg); }
.row.is-managed.is-idle { border-color: var(--managed); border-style: dashed; }
/* 닫은 코트 — 번호는 남지만 새 조가 올라가지 않는다. */
.row.is-closed { opacity: .55; background: var(--panel); border-style: dotted; }
/* 옮기려고 집어 든 자리. */
.row.is-held { border-color: var(--danger); border-style: dashed; }
.row.is-held .row-no.ord { background: var(--danger); }
.row.is-moving { border-color: var(--live); border-width: 2px; background: var(--live-bg); }
/* 닫힘·변경 예약처럼 코트에 걸린 상태. */
.state-tag {
  flex: 0 0 auto; font-size: .72rem; font-weight: 700;
  padding: .1rem .4rem; border-radius: 6px;
  background: var(--panel); color: var(--muted); border: 1px solid var(--border);
}

/* 전광판 꼬리말 */
.board-foot {
  max-width: 900px; margin: 0 auto; padding: .5rem 1rem 2.5rem;
  color: var(--muted); font-size: .85rem; text-align: center;
}
.board-foot a { color: var(--primary); }

/* -------------------------------------------------------------- 자석들 */
.magnets { display: flex; flex-wrap: wrap; gap: .4rem; }
.magnet {
  background: var(--card); color: var(--fg);
  border: 1px solid var(--border); border-radius: 10px;
  padding: .4rem .6rem; min-height: 44px;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 1.05rem; font-weight: 700; box-shadow: 0 1px 0 rgba(16,24,40,.12);
  user-select: none; cursor: pointer;
}
.magnet .g { font-size: .72rem; font-weight: 600; color: var(--muted); }
/* 동명이인 이름 끝의 전화번호 넉 자('홍길동(3340)'). 찾는 것은 '홍길동' 이고 괄호는
   둘을 가르는 표시일 뿐이라 작게 둔다 — 같은 크기면 이름 하나가 두 배로 길어져
   대기조 한 줄에 넷이 안 들어간다. */
.magnet .nm .tail { font-size: .72em; font-weight: 700; opacity: .75; }
/* 다음 경기 심판. 조를 만들 때 정해져서 그 조를 따라다닌다. */
.ref-tag {
  font-size: .65rem; font-weight: 700; letter-spacing: -.02em;
  background: var(--live); color: #fff; border-radius: 5px; padding: .05rem .25rem;
}
.lead-tag {
  font-size: .65rem; font-weight: 700; letter-spacing: -.02em;
  background: var(--fg); color: #fff; border-radius: 5px; padding: .05rem .25rem;
}
.magnet.is-picked .ref-tag, .magnet.is-picked .lead-tag { background: #fff; color: var(--primary); }
/* 지금 이 코트에서 심판을 보고 있는 사람. */
.ref-now {
  flex: 0 0 auto; font-size: .78rem; font-weight: 600; color: var(--live);
  white-space: nowrap;
}
/* 관리 화면에서는 이 딱지가 **누르는 것**이다 — 심판을 바꾸거나, 비어 있으면 지정한다.
   점선 테두리로 "눌리는 자리" 라고만 알리고, 옆의 경기 버튼들보다는 조용히 둔다. */
button.ref-now {
  background: transparent; border: 1px dashed var(--border); border-radius: 999px;
  padding: .25rem .6rem; min-height: 36px;
}
button.ref-now.is-none { color: var(--muted); }
.magnet .g::after { content: "판"; }
.magnet.is-picked { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.magnet.is-picked .g { color: inherit; opacity: .85; }
/* 퇴실 모드에서 고른 사람. 조를 짤 때의 파랑(is-picked)과 **색으로** 갈린다 —
   확인창을 읽지 않아도 "이 사람들이 나간다" 가 화면에 그대로 보여야 한다. */
.magnet.is-leaving { background: var(--danger); color: #fff; border-color: var(--danger); }
.magnet.is-leaving .g, .magnet.is-leaving .cool-left { color: inherit; opacity: .85; }
/* 쿨타임 자석은 평소 못 누르지만 퇴실 모드에서는 눌린다(쉬는 중에 집에 가는 사람). */
body.leaving .magnet.is-cooling { opacity: .85; cursor: pointer; }
body.leaving #lounge-hint { color: var(--danger); font-weight: 600; }
/* 진짜로 내보내는 문. 모드 안에서만 나오므로 통째로 빨갛게 두어도 손이 스치지 않는다. */
#leave-go {
  background: var(--danger); color: #fff; border-color: var(--danger);
  padding: .7rem 1.3rem; font-weight: 700; font-size: 1.05rem;
}
.magnet.on-court { cursor: default; box-shadow: none; background: transparent; border-color: transparent; }
.magnet .x { border: none; background: none; color: var(--danger);
  font-size: 1.1rem; padding: 0 .1rem; line-height: 1; min-height: 0; }
.slot {
  border: 2px dashed var(--border); border-radius: 10px; min-height: 44px;
  padding: .4rem .7rem; color: var(--muted); font-size: .9rem;
  background: transparent; cursor: pointer;
}
.slot.is-target { border-color: var(--primary); color: var(--primary); }

.lounge-tools { display: flex; gap: .45rem; align-items: center; margin-bottom: .55rem; flex-wrap: wrap; }
.add { display: flex; gap: .35rem; }
.add input { padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--fg); width: 9rem; }
.empty { color: var(--muted); font-size: .95rem; margin: .2rem 0; }

/* ------------------------------------------------------------------ 토스트 */
/* 회비 미납 안내처럼 나무라지 않으면서 눈에 띄어야 하는 한마디. 붉게 하지 않는다 —
   문 앞에서 여럿이 보는 화면이라 야단맞는 그림이 되면 안 된다. */
.toast.is-warn { background: #8a5a00; color: #fff; line-height: 1.6; }
.toast.is-ok { background: var(--primary); color: var(--primary-fg); }
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--fg); color: #fff; padding: .9rem 1.3rem;
  border-radius: 14px; font-size: 1.05rem; box-shadow: var(--shadow); z-index: 30;
  max-width: 92vw; text-align: center;
}

/* 폰. 한 줄에 다 못 들어가므로 이름 줄이 아래로 접힌다. */
@media (max-width: 560px) {
  body { font-size: 16px; }
  main { padding: .6rem; gap: .9rem; }
  .row { flex-wrap: wrap; }
  .row-names { flex: 1 1 100%; order: 3; }   /* 번호·버튼이 윗줄, 이름이 아랫줄 */
  .row-act { margin-left: auto; }
  .magnet { min-height: 46px; }

  /* ---------------------------------------------- 전광판(폰)만 촘촘하게
   *
   * 체육관에서 **서서 보는 화면**이라 스크롤이 곧 손해다. 코트와 대기 줄이 한 화면에
   * 같이 들어와야 "내가 몇 번째"가 한눈에 읽힌다.
   *
   * 줄 안의 자석은 **읽는 것이지 누르는 것이 아니다**(전광판에서 눌리는 자석은 휴게실
   * 뿐이다). 그래서 여기서만 손가락 크기를 버리고 글자를 줄인다 — 휴게실 자석과 관리
   * 화면은 그대로 46px 을 지킨다.
   */
  body.board main { padding: .5rem; gap: .7rem; }
  body.board .sec { margin-bottom: .3rem; }
  body.board .row { gap: .4rem; padding: .45rem .5rem; min-height: 0; }
  body.board .row .magnet {
    font-size: .95rem; padding: .3rem .4rem; min-height: 0; gap: .25rem;
  }
  /* 판수는 휴게실에서 본다 — 조를 짤 때 쓰는 숫자다. 코트·대기 줄에서는 넉 자 이름
     하나만 들어와도 이 숫자 때문에 줄이 접힌다. */
  body.board .row .magnet .g { display: none; }
  body.board .row-names { gap: .25rem; }
  /* 대기조는 **순번과 이름이 한 줄**이어야 한다. 위의 order:3 은 코트 줄을 위한 것이다
     (코트는 시각·종료 버튼이 붙어 이름이 아랫줄로 접힐 수밖에 없다) — 대기조는 순번과
     이름뿐이라 접으면 번호 하나가 한 줄을 통째로 먹는다. */
  body.board .row.is-wait .row-names { flex: 1 1 auto; order: 0; }
  body.board .row.is-wait .row-no.ord {
    min-width: 1.6rem; padding: .1rem .35rem; font-size: .95rem;
  }
}

/* 좁은 폰(320~360px — 갤럭시 S 다수, iPhone SE 1세대, 폴드 커버 화면).
   한 단계 더 줄여야 **네 자 이름**이나 **동명이인 이름**('홍길동(3340)')이 섞인 조도
   한 줄에 든다. 여기서 안 줄이면 그런 조만 두 줄이 되어 줄 높이가 들쭉날쭉해진다. */
@media (max-width: 360px) {
  body.board .row .magnet { font-size: .88rem; padding: .25rem .3rem; gap: .2rem; }
  body.board .row-names { gap: .2rem; }
  body.board .row.is-wait .row-no.ord { min-width: 1.45rem; padding: .1rem .3rem; }
}

/* 큰 데스크톱에서만 한 단계 더 키운다(태블릿 기준을 흔들지 않는다). */
@media (min-width: 1600px) {
  body { font-size: 18px; }
}


/* ------------------------------------------------------------ 개발자 페이지 */
.dev-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.1rem; box-shadow: var(--shadow); max-width: 560px;
  display: flex; flex-direction: column; gap: .9rem;
}
.dev-note { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.dev-note b { color: var(--fg); }
.dev-note code {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: .05rem .3rem; font-size: .85em;
}
.dev-form { display: flex; gap: .45rem; flex-wrap: wrap; }
.dev-form input {
  flex: 1 1 11rem; padding: .7rem .8rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); color: var(--fg);
}
/* 되돌릴 수 없는 것을 다루는 카드. 테두리만 붉게 두른다 — 배경까지 칠하면
   경고가 커져 평소 쓰는 카드와 나란히 놓기 부담스럽다. */
.dev-card.is-danger { border-color: var(--danger); }
.dev-actions { display: flex; gap: .45rem; flex-wrap: wrap; }

/* 쿨타임 단 편집. 한 줄이 한 단 — [4] 경기 이상 [5] 분. */
.tiers { display: flex; flex-direction: column; gap: .4rem; }
.tier { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tier-num {
  width: 4.5rem; padding: .5rem .6rem; border-radius: 10px; text-align: right;
  border: 1px solid var(--border); background: var(--panel); color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.tier-lbl { color: var(--muted); font-size: .9rem; }
.win-time { width: 7.5rem; text-align: center; }

/* 요일 단추. 켜진 요일이 한눈에 보여야 한다. */
.win-days { display: flex; gap: .35rem; flex-wrap: wrap; }
.day-btn {
  min-width: 3rem; min-height: 44px; border-radius: 12px; font-weight: 700;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
}
.day-btn.is-on { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
/* 지금 고른 소리 크기. */
.dev-actions .ghost.is-on { border-color: var(--primary); color: var(--primary); font-weight: 700; }

/* ------------------------------------------------------------------ 출석부 */
.day { margin-bottom: 1.4rem; }
.day .sec { align-items: baseline; }
.day-label { font-size: 1.05rem; }

/* ------------------------------------------------------------ 경기별 기록 */
/* 한 줄이 한 경기. 이긴 두 사람이 왼쪽에 오고, 색은 **이긴 쪽에만** 준다 —
   진 쪽을 칠하면 진 것이 강조된다. */
.match-row { gap: .45rem; min-height: 52px; flex-wrap: wrap; }
/* 두 편이 같은 폭을 나눠 갖는다 — 이름 길이에 따라 칸이 들쭉날쭉하면
   여러 줄을 세로로 훑을 때 어디까지가 한 편인지 눈이 놓친다. */
.side { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; flex: 1 1 8rem; }
.side .magnet { padding: .25rem .5rem; font-size: .9rem; }
/* 이긴 쪽 이름 **옆**에 붙는 한 글자. 진 쪽에는 아무것도 붙이지 않는다 —
   딱지가 달린 쪽이 이긴 쪽이라, 위에 열 이름을 적어 둘 필요가 없다.
   이름과 같은 줄에 놓아 줄 높이를 늘리지 않는다(시각과 같은 줄에 남는다). */
.win-tag {
  flex: 0 0 auto; font-size: .7rem; font-weight: 800; line-height: 1;
  padding: .15rem .3rem; border-radius: 5px;
  background: var(--primary); color: var(--primary-fg);
}
.side .magnet.is-won { border-color: var(--primary); background: var(--live-bg); font-weight: 700; }
/* 기록에서 눌러 고른 이름. 이긴 쪽 색(is-won)보다 세게 잡는다 — 지금 누구로 걸러
   보고 있는지는 표 어디를 봐도 한눈에 보여야 한다. */
.side .magnet.is-picked {
  background: var(--primary); color: var(--primary-fg); border-color: var(--primary);
}
.vs { color: var(--muted); font-size: .8rem; flex: 0 0 auto; }

/* 열 이름 줄. 줄(.row) 의 칸 구조만 빌려 쓰고 카드 모양은 벗긴다 —
   테두리를 두면 이것도 한 경기처럼 보인다. */
.match-head {
  border: none; background: none; min-height: 0; padding: .2rem .6rem;
  color: var(--muted); font-size: .78rem; font-weight: 700;
}
.match-head .row-time { color: var(--muted); font-weight: 700; font-size: .78rem; }
/* 'vs' 는 폭만 내주고 사라진다(아래 줄과 칸을 맞추는 자리). */
.match-head .vs { visibility: hidden; }

/* ------------------------------------------------------------------ 승률 */
.rank { color: var(--muted); width: 2.5rem; }
/* 승률 칸은 배경에 막대를 깐다(JS 가 폭을 준다) — 숫자를 안 읽어도 길이로 비교된다. */
.rate { font-weight: 700; }
/* 삭제 모드일 때만 × 가 붙는다. */
.magnet.is-deletable { border-color: var(--danger); }
/* 오늘 왔다가 간 사람. 기록에는 남지만 지금 체육관에는 없다. */
.magnet.has-left { opacity: .55; }
.link.danger, .ghost.danger { color: var(--danger); }


/* ------------------------------------------------------------ 회원관리 표 */
.bar-filter {
  padding: .4rem .7rem; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--fg); width: 9rem;
}
.table-wrap { overflow-x: auto; }        /* 좁은 화면에서 표만 가로로 민다 */
table.members { border-collapse: collapse; width: 100%; min-width: 460px; }
table.members th, table.members td {
  padding: .5rem .6rem; border-bottom: 1px solid var(--border); text-align: left;
}
table.members th {
  font-size: .82rem; color: var(--muted); font-weight: 700;
  border-bottom: 2px solid var(--border); white-space: nowrap;
}
/* 등급 칸 머리에 붙는 등급별 인원(A 3 · B 5 …). 제목보다 흐리고 작게 — 표를 읽는
   눈을 뺏지 않으면서, 등급을 매기는 사람이 세어 보지 않아도 되게. */
table.members td.nm { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
/* 이름은 **누르는 자리**다(전화번호 창을 연다). 버튼처럼 칠하지는 않는다 — 표에서
   이름은 읽는 값이 먼저고, 누를 수 있다는 것은 밑줄과 손가락 커서로만 알린다. */
table.members td.nm .nm-btn {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline dotted var(--muted);
  text-underline-offset: 3px;
}
table.members td.nm .nm-btn:hover { text-decoration-style: solid; }
table.members .num, table.members th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.members .rate { font-weight: 700; }
table.members tr.is-unpaid { background: var(--live-bg); }

/* 승률 표. 회원관리 표의 뼈대를 쓰되 좁은 폰에서 가로로 밀지 않는다 —
   **이 규칙들은 반드시 table.members 뒤에 와야 한다**(순위가 같아 뒤가 이긴다).
   여섯 칸뿐이라 다 들어간다: 숫자 칸은 폭을 못 박고 남는 폭은 전부 이름 칸이
   가져간다. 이름이 넘치면 줄바꿈 대신 …으로 자른다 — 줄 높이가 들쭉날쭉하면
   순위를 위에서 아래로 훑기 어렵다. */
table.rates { min-width: 0; table-layout: fixed; }
table.rates th, table.rates td { padding: .5rem .3rem; }
table.rates th:first-child, table.rates td:first-child { padding-left: .1rem; }
table.rates th:last-child, table.rates td:last-child { padding-right: .1rem; }
table.rates th:nth-child(1) { width: 2.3rem; }
table.rates th:nth-child(3),
table.rates th:nth-child(4),
table.rates th:nth-child(5) { width: 2.5rem; }
table.rates th:nth-child(6) { width: 3.4rem; }
table.rates td.nm { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
input.cell, select.cell {
  padding: .35rem .5rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); color: var(--fg); width: 100%; min-width: 6rem;
}
/* 고르는 칸(등급·소속)은 좁다. 담기는 값이 'A' 한 자, '게스트' 석 자뿐이라
   다른 입력칸과 같은 min-width 6rem 을 그대로 쓰면 이 칸들이 표를 옆으로 민다.
   ★ **폭을 숫자로 찍지 않는다.** 처음엔 칸을 4.8rem 으로 박고 min-width 를 0 으로
     풀었는데, 그러면 드롭다운이 칸 폭을 밀어 주는 힘을 잃어 **글자가 사라지고 화살표만**
     남았다(실제로 그렇게 나왔다). 내용에 맞추게 두고(width:auto), 칸은 'width:1%' 로
     내용만큼만 차지하게 한다 — 표 레이아웃이 남는 폭을 이 칸에 몰아주지 않는다. */
table.members th.tight-col { width: 1%; white-space: nowrap; }
select.cell.tight-sel {
  width: auto; min-width: 0; padding: .35rem .3rem; font-size: .92rem;
}
input.dues { width: 22px; height: 22px; }

/* 정렬되는 칸 머리. 제목처럼 보이되 **누를 수 있다는 것**이 읽혀야 한다 —
   손가락이 닿는 자리를 칸 머리 전체로 넓히고(padding 을 음수로 되돌려 칸을 꽉 채운다),
   고른 칸에만 화살표를 붙인다. */
table.members th .th-sort {
  font: inherit; color: inherit; background: none; border: 0;
  padding: .5rem .6rem; margin: -.5rem -.6rem;   /* th 의 padding 만큼 되돌린다 */
  width: calc(100% + 1.2rem); text-align: inherit;
  cursor: pointer; white-space: nowrap; border-radius: 4px;
}
table.members th .th-sort:hover { background: var(--panel); }
table.members th .th-sort.is-sorted { color: var(--fg); }
/* 화살표는 내용이 아니라 **표시**다 → ::after 로 붙인다. 고르지 않은 칸은
   data-dir 이 빈 문자열이라 아무것도 안 붙는다(자리도 안 차지한다). */
table.members th .th-sort::after { content: attr(data-dir); margin-left: .25rem; }

/* 랭킹 칸. 등수는 숫자라 **폭이 흔들리면 안 된다** — tabular-nums 로 자릿수를 맞춘다.
   경기가 없는 사람의 '—' 는 흐리게: 빈 값이 표를 어지럽히지 않게. */
table.members td.rank-cell { width: 1%; white-space: nowrap; text-align: right; }
table.members .rank-no { font-weight: 700; font-variant-numeric: tabular-nums; }
table.members .rank-none { color: var(--muted); }

/* 승자를 고르는 중인 코트 줄 */
.row.is-finishing { border-color: var(--live); border-width: 2px; }
.row.is-finishing .magnet { cursor: pointer; }


/* --------------------------------------------------------------- 입장 화면 */
/* 카드(둥근 상자)에 담지 않는다. 이름 버튼이 주인공이라 좁은 상자에 가두면
   태블릿에서 가로가 통째로 남는다. */
/* 클럽 이름과 '에티켓'을 한 줄에 둔다 — 이름 옆이 규칙을 찾는 자리다. */
.enter-head { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; }
.enter-title { font-size: 1.6rem; margin: 0 0 .8rem; }
.enter-head .enter-title { margin: 0; }
/* 사용법·에티켓은 한 덩어리로 오른쪽에 붙인다 — 둘 다 '읽고 닫는' 것이라 나란히 있어야
   찾기 쉽고, 각각에 margin-left:auto 를 주면 둘 사이가 벌어져 버린다. */
.enter-acts { margin-left: auto; flex: 0 0 auto; display: flex; gap: .4rem; }
/* 이 화면에서 할 일 한 줄. 경고 상자(.plea.is-warn) 자리에 들어왔다 —
   부탁은 '입장방법' 창으로 옮기고, 여기에는 **누르는 법만** 남긴다. */
.enter-how { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--fg); }
.enter-how b { color: var(--primary); }
/* 오픈채팅방 단추. 링크지만 단추처럼 보이게 — 입장 단추보다 작고 조용하게 둔다. */
.enter-chat {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: .5rem 0 0; padding: .45rem .7rem;
  border: 1px solid var(--border); border-radius: .5rem;
  background: transparent; color: var(--fg);
  font-size: .9rem; font-weight: 600; text-decoration: none;
}
.enter-chat:hover { border-color: var(--primary); color: var(--primary); }
/* 이름 버튼을 위로 끌어올린다 — 폰에서 한 화면에 이름이 몇 개 더 들어오는 것이
   이 화면의 전부다. */
.enter-tools {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin: .6rem 0 .7rem;
}
.enter-tools input {
  flex: 1 1 12rem; padding: .8rem 1rem; border-radius: 12px; font-size: 1.1rem;
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
}
/* 이름 버튼은 손가락으로 정확히 눌려야 한다 — 자석보다 한 치수 크게. */
.big-magnets .magnet { min-height: 60px; font-size: 1.25rem; padding: .6rem 1rem; }
/* 이미 들어온 사람. 흐리게 두어 "들어와 있음"이 한눈에 보이되, 눌리기는 한다 —
   그 누름이 퇴장이다(누르면 확인을 묻는다). */
.big-magnets .magnet.is-here {
  box-shadow: none; background: var(--panel); color: var(--muted);
  border-style: dashed;
}
.enter-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.enter-form input {
  flex: 1 1 11rem; padding: .8rem 1rem; border-radius: 12px; font-size: 1.1rem;
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
}
#new-view .plea, #roster-view .plea { max-width: 46rem; }


/* ------------------------------------------------- 전광판: 역할 색 + 신청 */
/* 조장은 빨강, 심판은 파랑. 글자를 붙이면 자석이 길어져 한 줄에 넉 장이 안 들어간다. */
.magnet.is-lead { border: 2px solid var(--danger); color: var(--danger); }
.magnet.is-ref  { border: 2px solid var(--blue);   color: var(--blue); }
.magnet.is-lead .g, .magnet.is-ref .g { color: inherit; opacity: .75; }

.legend { margin-left: auto; font-weight: 400; font-size: .8rem; color: var(--muted); }
.dot {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  margin: 0 .15rem 0 .5rem; vertical-align: middle;
}
.dot.lead { background: var(--danger); }
.dot.ref { background: var(--blue); }

.apply-tools { display: flex; gap: .5rem; margin-bottom: .7rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ 모달 */
.modal {
  position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 40;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal[hidden] { display: none !important; }
.modal-box {
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow);
  padding: 1.2rem; width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
}
.modal-box h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.modal-lead { color: var(--muted); margin: 0 0 .8rem; }
.modal-foot { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.modal-foot button { flex: 1 1 auto; }

/* 심판 후보 목록(관리 화면). 이름 옆에 **판수와 심판 맡은 횟수**를 같이 둔다 —
   누구를 시켜야 공평한지가 그 숫자로 보인다(다음 심판을 뽑는 순번도 같은 숫자다). */
.ref-list { display: flex; flex-direction: column; gap: .35rem; }
.ref-opt {
  display: flex; align-items: baseline; gap: .5rem; width: 100%; text-align: left;
  padding: .55rem .7rem; border-radius: 10px; min-height: 48px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  font-size: 1.05rem; font-weight: 700; cursor: pointer;
}
.ref-opt .ref-n {
  margin-left: auto; font-size: .78rem; font-weight: 500; color: var(--muted);
  white-space: nowrap;
}

/* 에티켓 본문. 조목이 열두 개라 소제목으로 묶어야 눈이 쉰다. */
.rules h3 {
  margin: 1rem 0 .35rem; font-size: .9rem; color: var(--muted);
  letter-spacing: .02em;
}
.rules h3:first-child { margin-top: .2rem; }
.rules ul, .rules ol { margin: 0; padding-left: 1.2rem; line-height: 1.7; }
.rules li { margin-bottom: .4rem; }
.rules b { color: var(--primary); }
/* 사용 방법은 순서가 있는 글이라 번호가 눈에 띄어야 한다. */
.howto { font-size: .95rem; }
.howto ol { margin-bottom: .4rem; }
.howto ol li::marker { font-weight: 700; color: var(--primary); }
.howto ol + ul { margin-top: .1rem; }
/* 오늘 안 쓰는 기능(난타·쿨타임·코트 빼기·종료 비번)은 줄째로 감춘다.
   li 는 display 를 따로 받지 않지만, 나중에 누가 주면 hidden 이 조용히 진다. 못 박아 둔다. */
.howto li[hidden] { display: none; }
/* '지금 꺼져 있음' 딱지. 안내에서 기능을 지우는 대신 **켜는 곳을 알려 주는** 자리라
   눈에는 띄되 본문을 밀어내지는 않게 둔다. 켜져 있으면 글자가 비고 :empty 로 사라진다. */
.hw-off {
  display: inline-block; margin-left: .35rem;
  padding: .05rem .45rem; border-radius: 999px;
  background: var(--panel); border: 1px dashed var(--border);
  color: var(--muted); font-size: .78rem; font-weight: 600;
}
.hw-off:empty { display: none; }

/* 입장방법 끝에 붙는 '다음은 여기' 안내. 목록이 아니라 표지판이라 상자로 둔다 —
   읽고 나면 어디로 갈지가 마지막 인상으로 남아야 한다. */
/* 앱으로 저장하기 — 기기별 갈래. 둘 다 보여 주고 **지금 쓰는 쪽만** 도드라지게 한다.
   하나만 골라 보여 주려면 기기를 정확히 알아야 하는데 UA 는 늘 정확하지 않다
   (카톡 안에서 열면 더 그렇다) — 틀리게 찍으면 읽는 사람이 빠져나갈 길이 없다. */
.inst-block {
  border: 1px solid var(--border); border-radius: 12px;
  padding: .7rem .85rem; margin-top: .6rem;
}
.inst-block.is-yours { border-color: var(--primary); background: var(--live-bg); }
.rules .inst-block h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--fg); }
.inst-yours-tag {
  font-size: .72rem; font-weight: 700; color: var(--primary);
  border: 1px solid var(--primary); border-radius: 999px;
  padding: .05rem .4rem; margin-left: .35rem; white-space: nowrap;
}
.inst-note { margin: .5rem 0 0; font-size: .85rem; color: var(--muted); line-height: 1.6; }
/* 경고 칸 안에 붙는 덧말('이미 어둡게 저장하셨다면…'). 경고문 색을 물려받지 않게 둔다. */
.plea .inst-note { display: block; margin-top: .4rem; color: inherit; opacity: .85; }
/* 갈래 제목 바로 밑에 붙는 한 줄('갤럭시에 원래 들어 있는 브라우저입니다') */
.inst-note.inst-lead { margin-top: 0; margin-bottom: .4rem; }
.inst-note b { color: var(--fg); }
/* 웨일처럼 **그 브라우저에서는 아예 안 되는** 경우. 각주로 두면 못 보고 메뉴만 찾는다. */
.inst-note.is-warn {
  border: 1px solid var(--danger); border-radius: 12px; padding: .6rem .8rem;
  background: #fff4f2; color: var(--fg);
}
.inst-note.is-warn b { color: var(--danger); }
#inst-quick { margin: .2rem 0 .6rem; }
#install-now { width: 100%; }

.next-step {
  margin: 1rem 0 0; padding: .8rem 1rem;
  border: 1px dashed var(--primary); border-radius: 12px;
  background: var(--live-bg); color: var(--fg); line-height: 1.6;
}
.next-step b { color: var(--primary); }
.next-step span { font-size: .9rem; color: var(--muted); }
.next-step span b { color: var(--fg); }

.notice { margin: .6rem 0; padding-left: 1.1rem; line-height: 1.7; }
.notice li { margin-bottom: .45rem; }
.notice li[hidden] { display: none; }
.notice-who { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem;
  color: var(--muted); font-size: .95rem; }
.who { font-weight: 700; border-radius: 8px; padding: .25rem .6rem; }
.who.lead { background: var(--danger); color: #fff; }
.who.ref { background: var(--blue); color: #fff; }

.code-label { display: block; margin: .9rem 0 .35rem; font-size: .9rem; color: var(--muted); }
/* display 를 준 요소는 hidden 속성만으로 안 숨는다 — 규칙이 이깁니다. 짝을 맞춰 둔다. */
.code-label[hidden] { display: none; }
.code-label b { color: var(--fg); }

/* '이 코트는 빼 주세요' 체크칸. 누르는 자리가 넉넉해야 폰에서 안 헛나간다. */
.opt-label {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: .9rem 0 .2rem; padding: .7rem .8rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  cursor: pointer;
}
.opt-label[hidden] { display: none; }
.opt-label input { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; margin-top: .1rem; }

/* 한 줄에 나란히 놓는 라디오(등급으로 / 랭킹으로). .opt-label 은 칸을 통째로 쓰는
   체크칸이라 둘을 나란히 못 놓는다 — 이쪽은 줄 안에서 자리만큼만 차지한다.
   그래도 **누르는 자리는 넉넉히** 둔다(폰에서 라디오 점만 노리면 헛나간다). */
.opt-inline {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); cursor: pointer; white-space: nowrap;
}
.opt-inline input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin: 0; }
/* 고른 쪽을 칠한다 — 라디오 점만으로는 어느 쪽이 켜졌는지 한눈에 안 들어온다. */
.opt-inline:has(input:checked) {
  border-color: var(--primary); background: var(--live-bg); font-weight: 700;
}
#apply-code, #end-code {
  width: 100%; padding: .8rem 1rem; border-radius: 12px; font-size: 1.15rem;
  border: 1px solid var(--border); background: var(--panel); color: var(--fg);
}

/* 전화번호 칸. 평소에는 글자로만 두고 `고침` 을 눌러야 입력칸이 열린다 —
   표를 훑다가 손이 스쳐 번호가 조용히 바뀌는 사고를 막는다. */
.phone-cell { white-space: nowrap; }
.phone-text { display: inline-block; min-width: 8rem; }



/* ------------------------------------------------- 출석부: 엑셀 내려받을 날짜 고르기 */
/* 체크박스를 줄줄이 세우는 화면이라 **한 줄 전체가 누르는 자리**여야 한다
   (label 로 감싼다). 폰에서 작은 네모만 눌러야 하면 자꾸 빗나간다. */
.pick-tools { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  margin-bottom: .6rem; }
.pick-days {
  display: flex; flex-direction: column; gap: .3rem;
  max-height: 44vh; overflow-y: auto;
  padding: .4rem; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel);
}
.pick-day {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; background: var(--card);
}
.pick-day.is-on { border-color: var(--primary); background: var(--live-bg); }
.pick-day input { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.pick-label { font-weight: 600; }


/* ------------------------------------------------ 개발자 페이지: 기록 관리·휴지통 */
/* 고르는 모양은 엑셀 쪽과 같게 두고 **색만** 다르다 — 같은 자리에서 같은 손짓으로
   지우는데 초록으로 켜지면 무엇을 하는 중인지 헷갈린다. */
.pick-days.is-danger .pick-day.is-on { border-color: var(--danger); background: var(--danger-bg); }

.trash-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card);
  margin-bottom: .3rem;
}
.trash-row.is-done { opacity: .55; }
.trash-label { font-weight: 600; }
.trash-kind {
  flex: 0 0 auto; font-size: .75rem; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: .05rem .5rem;
}

/* 날짜 한 줄. 눌러서 펼치면 그 안에 출석 자석과 경기 줄이 나온다.
   접어 두는 것이 기본이다 — 몇 달치가 한 화면에 펼쳐지면 아무것도 못 찾는다. */
.rec-day { border: 1px solid var(--border); border-radius: 12px; margin-bottom: .4rem;
  background: var(--card); overflow: hidden; }
.rec-head {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .6rem .7rem; background: transparent; border: none; text-align: left;
  font-size: .95rem; color: var(--fg); min-height: 44px;
}
.rec-head.is-open { border-bottom: 1px solid var(--border); background: var(--panel); }
.rec-caret { color: var(--muted); }
.rec-label { font-weight: 600; }
.rec-body { padding: .6rem .7rem; display: grid; gap: .6rem; }

.rec-matches { display: grid; gap: .25rem; }
.rec-match {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .4rem .55rem; border-radius: 9px; background: var(--panel);
  font-size: .9rem;
}
.rec-win  { font-weight: 700; color: var(--live); }
.rec-lose { color: var(--muted); }