/*
 * 테니스 KDK — 운영 화면용 차분한 스포츠 톤.
 * 색: 먹색 + 거의 흰 회색 바탕 + 강조 하나(테니스공 연두). 코트 그림의 초록·파랑, 남녀 파랑·분홍은 "정보 색"이라 예외.
 * 모양: 카드 20px · 버튼/입력 12px · 작은 표시(칩·태그)만 알약. 그림자 대신 1px 옅은 테두리.
 */
:root {
  /* 기본 = 다크: 남색 바탕 + 테니스공 노랑(2026-11-05 확정). 밝은 색은 아래 body.tone-a 에서만 */
  color-scheme:dark;
  --ink:#eef2f8; --ink-2:#d3dae6; --muted:#9aa6ba; --faint:#6c7891;
  --bg:#0f1522; --card:#172033; --fill:#212c42; --fill-2:#2a364e; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.2);
  --accent:#e6ef4e; --accent-ink:#2a2a00; --accent-soft:#30341c; --accent-text:#f1f59a;
  --free:#1f3352; --free-ink:#a9c8f0;
  --court:#5fbf84; --court-2:#7fd39f; --court-soft:#1b3330;
  --err:#ff8a7a; --err-soft:#3a2522;
  --men:#6f98ff; --men-soft:#1e2a45; --women:#ff7fae; --women-soft:#3e2130;
  --men-ink:#a9c2ff; --women-ink:#ffb3cf;
  --hero:#0a0f1a; --on-hero:#ffffff;              /* 눈에 띄는 큰 카드(내 카드·진행용 태블릿 등) */
  --sel-bg:var(--accent); --sel-ink:var(--accent-ink); /* 고른 것·주 버튼 */
  --r:20px; --r-md:12px; --pill:999px;
  --lift:0 1px 2px rgba(0,0,0,.2), 0 6px 20px -12px rgba(0,0,0,.6);
  font-size:17px;
}
/* 밝게(진행 태블릿에서만 고를 수 있음) */
body.tone-a {
  color-scheme:light;
  --ink:#121714; --ink-2:#2b322d; --muted:#6a746d; --faint:#9aa39c;
  --bg:#f4f5f2; --card:#ffffff; --fill:#eceee9; --fill-2:#e3e6e0; --line:rgba(18,23,20,.09); --line-2:var(--line-2);
  --accent-ink:#2a2a00; --accent-soft:#f6f8d2; --accent-text:#5b5f00;
  --free:#dbe7f5; --free-ink:#2b4f80;
  --court:#2f7d4e; --court-2:#246b41; --court-soft:#e8f2eb;
  --err:#c43a2f; --err-soft:#fbecea;
  --men:#2f64e8; --men-soft:#e8eefd; --women:#d63f78; --women-soft:#fcebf2;
  --men-ink:#1f3f9e; --women-ink:#a02a5c;
  --hero:#121714; --on-hero:#ffffff;
  --sel-bg:#121714; --sel-ink:#ffffff;
  --lift:0 1px 2px rgba(18,23,20,.04), 0 6px 20px -12px rgba(18,23,20,.18);
}
* { box-sizing:border-box; }
body {
  margin:0; color:var(--ink); background:var(--bg); line-height:1.5; min-height:100dvh;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
main { max-width:1080px; margin:0 auto; padding:28px 20px 64px; }
a { color:var(--ink); text-underline-offset:3px; text-decoration-color:var(--faint); }
a:hover { text-decoration-color:var(--ink); }
h1 { font-size:1.7rem; font-weight:800; margin:0; letter-spacing:-.035em; line-height:1.2; }
h2 { font-size:1.02rem; font-weight:750; margin:0 0 16px; letter-spacing:-.02em; display:flex; align-items:baseline; gap:8px; }
h2 small, h1 small { font-weight:600; font-size:.8rem; color:var(--muted); letter-spacing:0; }
h3 { letter-spacing:-.015em; }
.muted { color:var(--muted); }
.error { color:var(--err); background:var(--err-soft); font-weight:600; padding:12px 16px; border-radius:var(--r-md); }
.danger-text { color:var(--err); }

/* 상단: 큰 제목 + 오른쪽 버튼. 띠·장식 없음 */
.bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
main > header.bar { margin:0 0 24px; padding:4px 2px; }

/* 가운데 화면(홈·PIN·새로 시작) */
main.narrow { max-width:420px; padding-top:10vh; text-align:center; }
main.narrow > h1 { font-size:1.9rem; margin-bottom:8px; }
main.narrow > h1::before { /* 표지: 연두 원 하나 */
  content:""; display:block; width:44px; height:44px; margin:0 auto 20px; border-radius:50%;
  background:var(--accent); box-shadow:inset 0 0 0 2px rgba(28,37,0,.08);
}
main.narrow form { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; margin:24px 0; text-align:left; }
main.narrow .btn.big { margin:24px 0 10px; width:100%; }
main.narrow section { margin-top:40px; text-align:left; }

.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.stack { display:flex; flex-direction:column; gap:16px; }
.stack label { display:flex; flex-direction:column; gap:7px; font-weight:650; font-size:.86rem; text-align:left; color:var(--ink-2); }
.stack label small, .stack label input { font-weight:400; }
.left { text-align:left; }
.grow { flex:1; }

.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; margin-bottom:16px; }
.card > form + form { margin-top:10px; }
a.card.block { display:flex; justify-content:space-between; align-items:center; text-decoration:none; padding:16px 20px; margin-bottom:8px; transition:border-color .2s, transform .2s; }
a.card.block:hover { border-color:var(--line-2); transform:translateY(-1px); }
a.card.block::after { content:"›"; color:var(--faint); font-size:1.4rem; margin-left:12px; }
a.card.block .muted { margin-left:auto; }
.block { display:block; text-decoration:none; color:inherit; }

/* 입력·버튼: 터치 기준 46px, 모서리 12px */
input, select {
  font:inherit; padding:10px 14px; min-height:46px; color:inherit; background:var(--fill);
  border:1px solid transparent; border-radius:var(--r-md); transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder { color:var(--faint); }
input:hover, select:hover { background:var(--fill-2); }
input:focus, select:focus { outline:none; background:var(--card); border-color:var(--ink); box-shadow:0 0 0 4px rgba(230,239,78,.45); }
input[type=radio] { min-height:auto; accent-color:var(--ink); width:18px; height:18px; }
input[type=password] { letter-spacing:.2em; }
input[type=password]::placeholder { letter-spacing:normal; }
.btn {
  font:inherit; font-weight:700; font-size:.95rem; padding:10px 18px; min-height:46px; border:0; border-radius:var(--r-md);
  background:var(--fill); cursor:pointer; text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:background .15s, transform .08s; white-space:nowrap;
}
.btn:hover { background:var(--fill-2); }
.btn:active { transform:scale(.98); }
.btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.btn.primary { background:var(--accent); color:var(--accent-ink); }
.btn.primary:hover { filter:brightness(1.06); }
.btn.big { padding:16px 28px; font-size:1.05rem; }
.btn.sm { min-height:34px; min-width:34px; padding:4px 10px; font-size:.85rem; background:transparent; color:var(--muted); }
.btn.sm:hover { background:var(--fill); color:var(--ink); }
.btn.sm.danger-text { color:var(--err); }
.btn.sm.danger-text:hover { background:var(--err-soft); }

/* 코트 목록: 이름 칸 + 저장이 한 덩어리 */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; margin-bottom:14px; }
.grid > form, .court-row > form:first-child { flex-wrap:nowrap; gap:0; background:var(--fill); border-radius:var(--r-md); padding:3px; }
.grid input { flex:1; min-width:0; background:transparent; min-height:40px; }
.grid input:focus { background:var(--card); box-shadow:none; border-color:transparent; }
.grid .btn { min-height:40px; background:var(--card); font-size:.85rem; border-radius:9px; }

/* 코트 관리: 이름 + 사용 상태 칩 */
.courts-admin { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.court-row { display:flex; align-items:center; gap:8px; }
.court-row > form:first-child { flex:1; min-width:0; }
.court-row.off > form:first-child { opacity:.55; }
.avail { font:inherit; font-size:.76rem; font-weight:750; white-space:nowrap; padding:6px 11px; border-radius:var(--pill); cursor:pointer;
  background:var(--card); color:var(--ink-2); border:1px solid var(--line-2); }
.avail:hover { border-color:var(--ink); }
.avail.off { background:var(--fill); color:var(--muted); border-style:dashed; }

/* 확인 팝업 */
/* 공통 알림·확인 창(js/dialog.js) */
dialog.confirm { border:0; border-radius:var(--r); padding:22px; width:min(380px,90vw); box-shadow:0 24px 60px -20px rgba(0,0,0,.45); color:var(--ink); background:var(--card); }
dialog.confirm::backdrop { background:rgba(15,22,18,.4); }
dialog.confirm h3 { margin:0 0 6px; font-size:1.1rem; }
dialog.confirm p { margin:0 0 18px; color:var(--muted); font-size:.9rem; line-height:1.55; white-space:pre-line; }
dialog.confirm .row { justify-content:flex-end; }
dialog.confirm [hidden] { display:none !important; }
dialog.confirm .btn.danger { background:var(--err) !important; color:#fff !important; border-color:var(--err) !important; }
@media (max-width:560px) { dialog.confirm .row { display:grid; grid-template-columns:1fr 1.4fr; } dialog.confirm .row .btn[hidden] + .btn { grid-column:1 / -1; } }

/* 조 카드 */
.seeds { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; margin-bottom:12px; }
.seed { border-radius:16px; padding:14px; background:var(--bg); border:1px solid transparent; transition:background .15s, border-color .15s; }
.seed h3 { margin:0; font-size:1rem; font-weight:800; }
.seed > form.row { margin-top:12px; flex-wrap:nowrap; }
.seed > form.row select { flex:1; min-width:0; background:var(--card); }
.seed > form:last-child { margin-top:6px; text-align:right; }
.players { list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:4px; }
.players li { padding:6px 6px 6px 8px; border-radius:10px; flex-wrap:nowrap; background:var(--card); border:1px solid var(--line); }
.no { width:26px; height:26px; flex:none; border-radius:50%; background:var(--fill); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; }

.tag { font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:var(--pill); background:var(--fill); color:var(--muted); white-space:nowrap; }
.tag.ok { background:var(--accent-soft); color:var(--accent-text); }
.tag.warn { background:var(--err-soft); color:var(--err); }

/* 남녀 색: 참가자에만 */
.no.men, .chip.men { background:var(--men-soft); color:var(--men); }
.no.women, .chip.women { background:var(--women-soft); color:var(--women); }
.kind { font-size:.72rem; font-weight:700; color:var(--muted); background:var(--card); border:1px solid var(--line); padding:2px 8px; border-radius:var(--pill); margin-right:4px; vertical-align:middle; }

/* 조 판: 왼쪽 참가자, 오른쪽 조들 */
.seed-board { display:grid; grid-template-columns:270px 1fr; gap:16px; align-items:start; }
.pool { position:sticky; top:12px; border-radius:16px; padding:16px; background:var(--bg); border:1px dashed transparent; transition:background .15s, border-color .15s; }
.pool h3 { margin:0 0 12px; font-size:.95rem; font-weight:800; }
.pool .hint { font-size:.78rem; margin:12px 0 0; line-height:1.55; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:2px; padding:6px 12px; border-radius:var(--pill); font-weight:700; font-size:.88rem; cursor:grab; }
.chip form { display:inline; }
.chip .x { border:0; background:transparent; color:inherit; opacity:.45; cursor:pointer; font:inherit; font-size:.72rem; padding:0 0 0 6px; }
.chip .x:hover { opacity:1; }
.seed.add { display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; background:transparent; border:1px dashed var(--line-2); min-height:130px; text-align:center; }
.seed.add .muted { font-size:.78rem; }
.seed.add.drop-ok { border:2px solid var(--ink); background:var(--accent-soft); }
.add-person { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.add-person input[name=name] { width:100%; background:var(--card); }
.pick { display:inline-flex; align-items:center; gap:5px; padding:0 14px; min-height:46px; border-radius:var(--r-md); background:var(--card); cursor:pointer; font-weight:700; border:1px solid var(--line); }
.pick input { accent-color:currentColor; }
.pick.men:has(input:checked) { background:var(--men-soft); border-color:var(--men); color:var(--men); }
.pick.women:has(input:checked) { background:var(--women-soft); border-color:var(--women); color:var(--women); }
.players .empty { justify-content:center; padding:16px; border:1px dashed var(--line-2); background:transparent; font-size:.85rem; }

/* 끌기: 놓을 수 있는 곳 = 점선, 올라간 곳 = 먹색 실선 + 연두 바탕 */
[data-member], [data-player] { touch-action:none; user-select:none; -webkit-user-select:none; }
[data-player] { cursor:grab; }
.is-dragging, .is-dragging * { cursor:grabbing !important; }
.is-dragging .seed[data-seed], .is-dragging .seed.add { border:1px dashed var(--line-2); }
.dragging { opacity:.3; }
.drag-ghost { position:fixed; left:0; top:0; z-index:100; pointer-events:none; box-shadow:0 16px 32px -12px rgba(18,23,20,.35); background:var(--card); border-radius:var(--pill); list-style:none; }
li.drag-ghost { border-radius:10px; padding:6px 12px; }
.drop-marker { height:3px; border-radius:var(--pill); background:var(--ink); margin:2px 6px; list-style:none; }
.seed.drop-ok { border:2px solid var(--ink); background:var(--accent-soft); }
.seed.drop-ok .empty { display:none; }
.pool.drop-ok { border:2px solid var(--err); background:var(--err-soft); }

main > p.muted { font-size:.84rem; padding:0 4px; }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }
@media (max-width:760px) {
  .seed-board { grid-template-columns:1fr; }
  .pool { top:0; z-index:5; max-height:42vh; overflow:auto; }
}
@media (max-width:600px) {
  main { padding:16px 14px 48px; }
  h1 { font-size:1.45rem; }
  .card { padding:16px; }
  .card .row > input { flex:1 1 140px; min-width:0; }
}

/* 공통 셀렉트(js/select.js): 버튼 + 화면 톤 목록 */
.ui-sel { position:relative; display:block; min-width:0; }
.ui-sel-btn { width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 14px; font:inherit; font-size:.92rem; font-weight:700; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-sel-btn::after { content:""; flex:none; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg) translateY(-3px); transition:transform .15s; }
.ui-sel-btn[aria-expanded="true"] { border-color:var(--accent); box-shadow:0 0 0 3px rgba(230,239,78,.25); }
.ui-sel-btn[aria-expanded="true"]::after { transform:rotate(225deg) translateY(-3px); }
.ui-sel-btn.set { border-color:rgba(230,239,78,.6); }
.ui-sel-btn.bad { border-color:var(--err); box-shadow:0 0 0 3px rgba(196,58,47,.18); }
.ui-sel-btn:disabled { opacity:.55; cursor:default; }
.row > .ui-sel { flex:1; }
.ui-sel-list { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40; margin:0; padding:6px; list-style:none; max-height:280px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:0 18px 40px -16px rgba(0,0,0,.45); }
.ui-sel-list.up { top:auto; bottom:calc(100% + 6px); }
.ui-sel-list li { padding:10px 12px; min-height:40px; border-radius:9px; font-size:.92rem; font-weight:650; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.ui-sel-list li:hover, .ui-sel-list li.hover { background:var(--fill); }
.ui-sel-list li.on { font-weight:850; }
.ui-sel-list li.on::after { content:"✓"; color:var(--accent); font-weight:900; }
@media (prefers-reduced-motion:reduce) { .ui-sel-btn::after { transition:none; } }

/* 공통 뒤로가기: 동그란 화살표 + 어디로 가는지 (밝게·어둡게 모두 글자색을 따라감) */
.back { position:relative; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px 0 5px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font:inherit; font-size:.92rem; font-weight:800; text-decoration:none; cursor:pointer; align-self:flex-start; transition:background .15s, border-color .15s; }
.back::before { content:""; flex:none; width:34px; height:34px; border-radius:50%; background:var(--fill); transition:background .15s; }
.back::after { content:""; position:absolute; left:20px; top:50%; width:9px; height:9px; border-left:2.6px solid currentColor; border-bottom:2.6px solid currentColor; border-radius:1px; transform:translateY(-50%) rotate(45deg); }
.back:hover { border-color:var(--line-2); }
.back:hover::before { background:var(--accent); }
.back:hover::after { color:var(--accent-ink); }
.back:active { transform:scale(.98); }