/* ══════════════════════════════════════════════════════════════
   위플온 — 공통 디자인 시스템
   색상 변수(--brand-*)는 /theme.css 에서 클럽별로 주입된다.
   ══════════════════════════════════════════════════════════════ */
@import url('/shared/fonts.css');
:root{
  /* /theme.css 미로드 시 폴백 (위플온 기본 브랜드) */
  --brand:#123B8A; --brand-dark:#0d2a63; --brand-deep:#0f327a; --brand-light:#4a6bb0;
  --brand-soft:#e7edf8; --accent:#A8E51D; --accent-deep:#8bbf17; --accent-soft:#eef9d2;
  --on-brand:#ffffff; --on-accent:#16211c; --ink:#16211c; --muted:#5c6b60;
  --paper:#f6f8fc; --paper-2:#eef2f9; --line:#e0e6f0; --surface:#ffffff;

  --radius:16px; --radius-sm:10px;
  --shadow-sm:0 1px 3px rgba(18,40,90,.06), 0 2px 8px rgba(18,40,90,.05);
  --shadow-md:0 8px 28px rgba(18,40,90,.12);
  --font: 'Nanum Human','Malgun Gothic','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  --nav-h:60px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.5; font-size:15px;
}
/* 종목별 바탕 테마 — 은은한 워터마크 패턴 */
body[data-sport]{ background-color:var(--paper); background-repeat:repeat; background-position:center; background-size:150px 150px; background-attachment:fixed; }
body[data-sport="tennis"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='50%25' y='50%25' font-size='58' text-anchor='middle' dominant-baseline='central' opacity='0.06'%3E🎾%3C/text%3E%3C/svg%3E"); }
body[data-sport="badminton"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='50%25' y='50%25' font-size='58' text-anchor='middle' dominant-baseline='central' opacity='0.06'%3E🏸%3C/text%3E%3C/svg%3E"); }
body[data-sport="tabletennis"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='50%25' y='50%25' font-size='58' text-anchor='middle' dominant-baseline='central' opacity='0.06'%3E🏓%3C/text%3E%3C/svg%3E"); }
body[data-sport="pickleball"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg opacity='0.09'%3E%3Cg transform='translate(24,22) rotate(-18)'%3E%3Crect x='0' y='0' width='36' height='48' rx='17' fill='%23123B8A'/%3E%3Crect x='13' y='46' width='9' height='18' rx='3' fill='%23123B8A'/%3E%3C/g%3E%3Cg transform='translate(99,93)'%3E%3Ccircle r='17' fill='%23A8E51D'/%3E%3Ccircle cx='-7' cy='-4' r='2.3' fill='%23ffffff'/%3E%3Ccircle cx='3' cy='-7' r='2.3' fill='%23ffffff'/%3E%3Ccircle cx='7' cy='3' r='2.3' fill='%23ffffff'/%3E%3Ccircle cx='-3' cy='7' r='2.3' fill='%23ffffff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
body[data-sport="squash"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='50%25' y='50%25' font-size='58' text-anchor='middle' dominant-baseline='central' opacity='0.06'%3E🎾%3C/text%3E%3C/svg%3E"); }
body[data-sport="futsal"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='50%25' y='50%25' font-size='58' text-anchor='middle' dominant-baseline='central' opacity='0.06'%3E⚽%3C/text%3E%3C/svg%3E"); }
body[data-sport="basketball"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='50%25' y='50%25' font-size='58' text-anchor='middle' dominant-baseline='central' opacity='0.06'%3E🏀%3C/text%3E%3C/svg%3E"); }
body[data-sport="volleyball"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='50%25' y='50%25' font-size='58' text-anchor='middle' dominant-baseline='central' opacity='0.06'%3E🏐%3C/text%3E%3C/svg%3E"); }
a{color:var(--brand); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0 0 .4em; letter-spacing:-.01em; font-weight:800; line-height:1.25;}
h1{font-size:1.6rem;} h2{font-size:1.25rem;} h3{font-size:1.05rem;}
p{margin:0 0 1em;}
small,.muted{color:var(--muted);}

/* ── 상단바 ── */
.topbar{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; gap:16px; padding:0 18px;
  background:linear-gradient(120deg,var(--brand-dark),var(--brand) 65%,var(--brand-light));
  color:#fff; box-shadow:var(--shadow-sm); border-bottom:3px solid var(--accent);
}
.topbar .brand{display:flex; align-items:center; gap:10px; font-weight:900; color:#fff; font-size:1.12rem;}
.topbar .brand:hover{text-decoration:none;}
.topbar .brand img{height:34px; width:34px; background:#fff; border-radius:9px; padding:3px;}
.topbar .brand .sub{font-size:.62rem; font-weight:700; background:var(--accent); color:var(--on-accent); padding:2px 7px; border-radius:20px; letter-spacing:.02em;}
.topbar .spacer{flex:1;}
.topbar .navlinks{display:flex; gap:2px; align-items:center; overflow:visible; flex-wrap:wrap;}
.topbar .navlinks a{
  color:rgba(255,255,255,.85); padding:8px 12px; border-radius:9px; font-size:.9rem; font-weight:600; white-space:nowrap;
}
.topbar .navlinks a:hover{color:#fff; background:rgba(255,255,255,.12); text-decoration:none;}
.topbar .navlinks a.active{color:var(--on-accent); background:var(--accent);}
.topbar .navlinks a i{margin-right:5px; font-size:.95rem;}
.nav-sep{width:1px; height:20px; background:rgba(255,255,255,.25); margin:0 6px; flex:0 0 auto;}
.nav-badge{position:absolute; top:-4px; right:-6px; background:#e2483c; color:#fff; font-size:.62rem; font-weight:800; min-width:16px; height:16px; line-height:16px; text-align:center; border-radius:20px; padding:0 4px;}
.nav-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#e2483c; margin-left:5px; vertical-align:middle; flex:0 0 auto;}
.dd-menu a .nav-dot{margin-left:6px;}
.topbar .navlinks a{position:relative;}
@media(max-width:860px){ .nav-sep{width:100%; height:1px; margin:6px 0;} }

/* ── 관리 드롭다운 ── */
.topbar .navlinks .dd{position:relative;}
.topbar .navlinks .dd .dd-toggle{color:rgba(255,255,255,.85); padding:8px 12px; border-radius:9px; font-size:.9rem; font-weight:600; white-space:nowrap; cursor:pointer; display:inline-flex; align-items:center;}
.topbar .navlinks .dd .dd-toggle:hover, .topbar .navlinks .dd.active-parent .dd-toggle{color:#fff; background:rgba(255,255,255,.12); text-decoration:none;}
.dd-caret{font-size:.62rem !important; margin-left:3px; margin-right:0 !important; transition:transform .15s;}
.dd.open .dd-caret{transform:rotate(180deg);}
.dd-menu{position:absolute; top:calc(100% + 6px); left:0; min-width:200px; background:var(--brand-dark); border:1px solid rgba(255,255,255,.12); border-radius:12px; box-shadow:var(--shadow-md); padding:6px; display:none; z-index:60;}
.dd.dd-right .dd-menu{left:auto; right:0;}
.dd.open .dd-menu{display:block;}
.topbar .navlinks .dd .dd-toggle, .topbar .who .dd .dd-toggle{position:relative;}
.topbar .who .dd .dd-toggle{color:#fff;}
.topbar .who{gap:14px;}
.dd-menu a{display:flex !important; align-items:center; width:100%; color:rgba(255,255,255,.9) !important; padding:9px 12px; border-radius:8px; font-size:.88rem; font-weight:600; white-space:nowrap;}
.dd-menu a:hover{background:rgba(255,255,255,.14); text-decoration:none;}
.dd-menu a.active{background:var(--accent); color:var(--on-accent) !important;}
.dd-divider{height:1px; background:rgba(255,255,255,.15); margin:5px 6px;}
/* 30분 단위 시간 선택 드롭다운 */
.wp-tmenu{position:fixed; z-index:2000; background:var(--surface,#fff); border:1px solid var(--line,#e2e7ee); border-radius:10px; box-shadow:var(--shadow-md,0 10px 30px rgba(0,0,0,.18)); max-height:240px; overflow-y:auto; padding:4px; -webkit-overflow-scrolling:touch;}
.wp-topt{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 12px; border-radius:7px; cursor:pointer; font-size:.92rem; white-space:nowrap; color:var(--ink,#16211c);}
.wp-topt:hover{background:var(--brand-soft,#eef2fb);}
.wp-topt.sel{background:var(--brand-soft,#eef2fb); font-weight:800;}
.wp-t12{color:var(--muted,#5c6b60); font-size:.8rem;}
.wp-tnone{padding:8px 12px; color:var(--muted,#5c6b60); font-size:.85rem;}
.dd-group-title{display:flex; align-items:center; gap:6px; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); padding:9px 12px 4px; margin-top:2px;}
.dd-group-title:first-child{margin-top:0;}
.dd-group-title + .dd-group-title{margin-top:2px;}
.dd-menu .dd-group-title ~ a{padding-left:16px;}
@media(max-width:860px){
  .topbar .navlinks .dd{width:100%;}
  .topbar .navlinks .dd .dd-menu{position:static; display:none; background:transparent; border:none; box-shadow:none; padding:4px 0 4px 14px; min-width:0;}
  .topbar .navlinks .dd.open .dd-menu{display:block;}
  .topbar .navlinks .dd .dd-toggle{width:100%;}
}
.topbar .who{font-size:.85rem; color:rgba(255,255,255,.92); display:flex; align-items:center; gap:10px;}
.topbar .who b{color:#fff;}
.hamburger{display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer;}

@media(max-width:860px){
  .topbar .navlinks{
    position:fixed; top:var(--nav-h); left:0; right:0; flex-direction:column; flex-wrap:nowrap; gap:0;
    background:var(--brand-dark); padding:8px; box-shadow:var(--shadow-md); display:none;
    max-height:calc(100vh - var(--nav-h)); max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  .topbar .navlinks.open{display:flex;}
  .topbar .navlinks a{width:100%;}
  .hamburger{display:block;}
  .topbar .who .name-full{display:none;}
}

/* ── 레이아웃 ── */
.wrap{max-width:1120px; margin:0 auto; padding:24px 18px 60px;}
/* ── 페이지 상단 배너 (모든 메뉴 공통) ── */
.page-head, .page-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:linear-gradient(120deg,var(--brand-dark),var(--brand) 60%,var(--brand-light));
  color:#fff; border-radius:var(--radius); padding:18px 22px; box-shadow:var(--shadow-md);
  border-bottom:3px solid var(--accent); margin-bottom:18px;
}
.page-head .title h1, .page-banner .title h1{margin:0; color:#fff; font-size:1.4rem; display:flex; align-items:center; gap:8px;}
.page-head .title p, .page-banner .title p{margin:.35em 0 0; color:rgba(255,255,255,.9); font-size:.9rem;}
/* 배너 위 컨트롤 가독성 */
.page-head .btn.ghost{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.4);}
.page-head .btn.ghost:hover{background:rgba(255,255,255,.28); filter:none;}
.page-head select, .page-head input{background:#fff; color:var(--ink); border-color:transparent;}
.page-head .badge{background:rgba(255,255,255,.2); color:#fff;}

/* ── 카드 ── */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px;}
.card + .card{margin-top:16px;}
.card h3{margin-top:0;}
.grid{display:grid; gap:16px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:760px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}}

/* 통계 타일 */
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm);}
.stat .n{font-size:1.9rem; font-weight:900; color:var(--brand);}
.stat .k{color:var(--muted); font-size:.85rem; font-weight:600;}
.stat.accent{background:linear-gradient(135deg,var(--brand),var(--brand-light)); color:#fff; border:none;}
.stat.accent .n,.stat.accent .k{color:#fff;}

/* ── 버튼 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:inherit; font-size:.92rem; font-weight:700; cursor:pointer;
  padding:10px 18px; border-radius:11px; border:1px solid transparent; transition:.15s;
  background:var(--brand); color:var(--on-brand);
}
.btn:hover{filter:brightness(1.06); text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.accent{background:var(--accent); color:var(--on-accent);}
.btn.ghost{background:transparent; color:var(--brand); border-color:var(--line);}
.btn.ghost:hover{background:var(--brand-soft); filter:none;}
.btn.danger{background:#e2483c;}
.btn.sm{padding:6px 12px; font-size:.82rem; border-radius:9px;}
.btn.block{width:100%;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap;}

/* ── 폼 ── */
label{display:block; font-weight:700; font-size:.86rem; margin-bottom:6px; color:var(--ink);}
.field{margin-bottom:16px;}
input,select,textarea{
  width:100%; font-family:inherit; font-size:.95rem; color:var(--ink);
  padding:11px 13px; border:1.5px solid var(--line); border-radius:11px; background:#fff; transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);}
textarea{min-height:90px; resize:vertical;}
.hint{font-size:.8rem; color:var(--muted); margin-top:5px;}
.inline{display:flex; gap:10px; flex-wrap:wrap;}
.inline > *{flex:1; min-width:120px;}

/* 칩/뱃지 */
.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:.75rem; font-weight:700;}
.badge.b-brand{background:var(--brand-soft); color:var(--brand-deep);}
.badge.b-accent{background:var(--accent-soft); color:var(--accent-deep);}
.badge.b-ok{background:#e2f6e6; color:#1c8a3c;}
.badge.b-warn{background:#fdeede; color:#c9821f;}
.badge.b-mute{background:var(--paper-2); color:var(--muted);}

/* 선택 카드(온보딩/종목 등) */
.pick{
  border:1.5px solid var(--line); border-radius:14px; padding:16px; cursor:pointer; text-align:center;
  background:#fff; transition:.15s; user-select:none;
}
.pick:hover{border-color:var(--brand-light); background:var(--brand-soft);}
.pick.on{border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 3px var(--brand-soft);}
.pick .emoji{font-size:1.7rem;}
.pick .lb{font-weight:700; margin-top:6px; font-size:.9rem;}

/* ── 테이블 ── */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff;}
table{width:100%; border-collapse:collapse; font-size:.9rem;}
th,td{padding:11px 13px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap;}
th{background:var(--paper-2); font-weight:700; color:var(--muted); font-size:.8rem; position:sticky; top:0;}
tbody tr:hover{background:var(--brand-soft);}
td.center,th.center{text-align:center;}

/* ── 토스트 ── */
#toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center;}
.toast{background:var(--ink); color:#fff; padding:12px 20px; border-radius:12px; box-shadow:var(--shadow-md); font-weight:600; font-size:.9rem; animation:tin .2s;}
.toast.ok{background:#1c8a3c;} .toast.err{background:#e2483c;}
@keyframes tin{from{opacity:0; transform:translateY(8px);}to{opacity:1;}}

/* ── 모달 ── */
.modal-bg{position:fixed; inset:0; background:rgba(15,25,45,.5); z-index:150; display:none; align-items:center; justify-content:center; padding:16px;}
.modal-bg.open{display:flex;}
.modal{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-md); width:100%; max-width:480px; max-height:90vh; overflow:auto; padding:24px;}
.modal h3{margin-top:0;}

.empty{text-align:center; color:var(--muted); padding:40px 16px;}
.center-page{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.loading{text-align:center; color:var(--muted); padding:30px;}
hr{border:none; border-top:1px solid var(--line); margin:18px 0;}