:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #f9fafb;
    --border: #e6e8ec;
    --border-strong: #d4d8de;
    --text: #0f172a;
    --text-2: #475467;
    --muted: #8a94a6;

    --primary: #16a34a;
    --primary-hover: #15803d;
    --primary-soft: #ecfdf3;
    --primary-ring: rgba(22, 163, 74, .18);

    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --warning: #b45309;
    --warning-soft: #fffbeb;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, .25);
    --sidebar-w: 248px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Malgun Gothic", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.sub { color: var(--text-2); font-size: 13.5px; margin-top: 4px; }

.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 버튼 ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; padding: 0 14px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
    font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.btn:hover { background: var(--surface-2); }
.btn:focus-visible, .icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--primary-ring); }
.btn:disabled { opacity: .6; cursor: default; }
.btn .i { width: 16px; height: 16px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { background: #b91c1c; }
.btn.ghost-danger { background: transparent; border-color: transparent; box-shadow: none; color: var(--danger); }
.btn.ghost-danger:hover { background: var(--danger-soft); }
.btn.block { width: 100%; }
.btn.lg { height: 44px; font-size: 15px; }
.btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }

.icon-btn {
    display: inline-grid; place-items: center; width: 34px; height: 34px;
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------- 입력 ---------- */
.field { display: grid; gap: 6px; align-content: start; }
.field > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field b { color: var(--danger); font-weight: 600; }
.field small { color: var(--muted); font-size: 12px; }
input, textarea, select {
    width: 100%; height: 40px; padding: 0 12px;
    font: inherit; color: var(--text);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 10px 12px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #a3acba; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }
input.readonly { background: var(--surface-2); color: var(--text-2); box-shadow: none; cursor: default; }
input.readonly:focus { border-color: var(--border-strong); box-shadow: none; }
.invalid, .invalid:focus { border-color: var(--danger) !important; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12) !important; }

.alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px; white-space: pre-line; }
.alert.danger { background: var(--danger-soft); color: #991b1b; border: 1px solid #fecaca; }

/* ---------- 로그인 ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-brand {
    display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 64px;
    color: #fff;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .14), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(255, 255, 255, .10), transparent 45%),
        linear-gradient(135deg, #15803d, #16a34a 55%, #22c55e);
}
.auth-brand h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.auth-brand p { font-size: 17px; opacity: .9; line-height: 1.6; }
.auth-panel { display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: 100%; max-width: 380px; display: grid; gap: 18px; }
.auth-head h2 { font-size: 24px; font-weight: 700; }
.auth-head p { color: var(--text-2); margin-top: 6px; }

.logo-mark {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, #22c55e, #15803d); color: #fff;
    box-shadow: 0 4px 10px -2px rgba(22, 163, 74, .45);
}
.logo-mark .i { width: 18px; height: 18px; }
.logo-mark.lg { width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .18); box-shadow: none; backdrop-filter: blur(4px); }
.logo-mark.lg .i { width: 28px; height: 28px; }

/* ---------- 레이아웃 ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; gap: 8px; padding: 18px 14px;
    background: var(--surface); border-right: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
.brand-text { display: grid; line-height: 1.2; }
.brand-text strong { font-size: 15px; }
.brand-text small { color: var(--muted); font-size: 12px; }
.nav { display: grid; gap: 2px; flex: 1; align-content: start; overflow-y: auto; }
.nav > div { display: grid; gap: 2px; }
.nav-label { padding: 10px 10px 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.nav-item {
    display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px;
    border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500;
}
.nav-item .i { color: var(--muted); }
a.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { color: var(--text); font-weight: 600; }
.nav-item.active .i { color: var(--primary); }
.nav-item.disabled { color: #a3acba; cursor: default; }
.nav-item.disabled .i { color: #c5ccd6; }
.nav-item em {
    margin-left: auto; font-style: normal; font-size: 11px; font-weight: 500;
    padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.nav-sub {
    position: relative; display: flex; align-items: center; height: 34px; margin-left: 19px; padding: 0 10px 0 19px;
    border-left: 1px solid var(--border); color: var(--text-2); font-size: 13.5px;
}
.nav-sub:hover { color: var(--text); }
.nav-sub.active { color: var(--primary-hover); font-weight: 600; border-left-color: var(--primary); }
.nav-sub.active::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--primary); border-radius: 2px; }

.to-app { margin-bottom: 4px; }
.me { display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid var(--border); }
.avatar {
    display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary-hover); font-weight: 700;
}
.me-text { display: grid; line-height: 1.25; min-width: 0; flex: 1; }
.me-text strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-text small { color: var(--muted); font-size: 12px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 32px;
    background: rgba(246, 247, 249, .85); backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border);
}
.menu-btn { display: none; }
.topbar-logout { margin-left: auto; box-shadow: none; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs .i { width: 14px; height: 14px; }
.crumbs span:last-child { color: var(--text); font-weight: 600; }
.content { width: 100%; max-width: 1240px; padding: 28px 32px 64px; margin: 0 auto; }
.scrim { display: none; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; }
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.back:hover { color: var(--text); }
.back .i { width: 15px; height: 15px; }

/* ---------- 카드 ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.card-head h2, .section-head h2 { font-size: 15px; font-weight: 700; }
.card-body { padding: 20px; }
.card-foot { display: grid; gap: 6px; padding: 16px 20px; border-top: 1px solid var(--border); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.grid .wide { grid-column: 1 / -1; }

/* ---------- 목록 ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.search { position: relative; flex: 1; max-width: 380px; }
.search .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search input { padding-left: 36px; }
.count { margin-left: auto; color: var(--muted); font-size: 13px; }

.table { width: 100%; border-collapse: collapse; }
.table th {
    padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted);
    background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .col-no { width: 80px; color: var(--muted); font-variant-numeric: tabular-nums; }
.table .col-go { width: 44px; color: #c5ccd6; }
.table tbody tr.row { cursor: pointer; transition: background .12s; }
.table tbody tr.row:hover { background: #fafbfc; }
.table tbody tr.row:hover .col-go { color: var(--text-2); }
.club-name { font-weight: 600; font-size: 14.5px; }
.club-addr { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--muted); font-size: 13px; }
.club-addr .i { width: 13px; height: 13px; }
.chip {
    display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary-hover); font-size: 12.5px; font-weight: 600;
}
.unit { color: var(--muted); font-size: 12.5px; margin-left: 2px; }

.skeleton { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #eef0f3, #f6f7f9, #eef0f3); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.empty { padding: 56px 16px; text-align: center; }
.empty-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.empty-icon .i { width: 24px; height: 24px; }
.empty h3 { font-size: 16px; font-weight: 700; }
.empty p { color: var(--text-2); margin: 6px 0 18px; }

.pager { display: flex; justify-content: center; gap: 4px; padding: 12px; border-top: 1px solid var(--border); }
.pager:empty { display: none; }
.pager .btn { min-width: 34px; height: 34px; padding: 0 10px; box-shadow: none; border-color: transparent; }
.pager .btn.current { background: var(--primary-soft); color: var(--primary-hover); }

/* ---------- 등록 / 수정 ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.form-main { display: grid; gap: 24px; min-width: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.courses { display: grid; gap: 16px; }
.sticky { position: sticky; top: 76px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.stat small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.stat strong { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat strong .unit { font-size: 13px; font-weight: 500; }

.location { margin-top: 14px; padding: 12px; border-radius: var(--radius-sm); font-size: 13px; }
.location .loc-title { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 4px; }
.location .loc-title .i { width: 15px; height: 15px; }
.location.ok { background: var(--primary-soft); color: #14532d; }
.location.warn { background: var(--warning-soft); color: var(--warning); }
.location.pending { background: var(--surface-2); color: var(--text-2); }
.location code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; }

.course { overflow: hidden; }
.course-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--border); }
.course-badge {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
    background: var(--text); color: #fff; font-size: 13px; font-weight: 700;
}
.course-name { max-width: 240px; height: 36px; font-weight: 600; font-size: 15px; box-shadow: none; border-color: transparent; background: transparent; padding: 0 8px; }
.course-name:hover { background: var(--surface-2); }
.course-name:focus { background: var(--surface); }
.course-stats { margin-left: auto; color: var(--text-2); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.course-stats strong { color: var(--text); }

.holes { padding: 16px; overflow-x: auto; }
.scorecard { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.scorecard th, .scorecard td { padding: 4px 3px; text-align: center; }
.scorecard thead th { padding-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.scorecard thead th:first-child, .scorecard tbody th { width: 64px; text-align: left; padding-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.scorecard tbody th small { font-weight: 500; color: var(--muted); margin-left: 1px; }
.scorecard .total { width: 64px; font-weight: 700; color: var(--text); }
.scorecard thead .total { color: var(--text-2); }
.scorecard tbody .total { background: var(--surface-2); border-radius: 6px; }
.scorecard tbody tr + tr .total { border-top: 4px solid var(--surface); }
.scorecard select.par {
    height: 34px; padding: 0; border: 1px solid transparent; border-radius: 7px; box-shadow: none; cursor: pointer;
    appearance: none; -webkit-appearance: none; text-align: center; text-align-last: center;
    font-weight: 700; background: var(--primary-soft); color: var(--primary-hover);
}
.scorecard select.par[data-par="3"] { background: #eff6ff; color: #1d4ed8; }
.scorecard select.par[data-par="5"] { background: #fff7ed; color: #c2410c; }
.scorecard select.par:hover { border-color: var(--border-strong); }
.scorecard input.distance { height: 34px; padding: 0 4px; text-align: center; font-weight: 600; box-shadow: none; }
.scorecard input.distance::-webkit-outer-spin-button, .scorecard input.distance::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scorecard input.distance { -moz-appearance: textfield; }

.scorecard select.slope { height: 34px; padding: 0; text-align: center; text-align-last: center; appearance: none; -webkit-appearance: none; box-shadow: none; font-weight: 700; cursor: pointer; }
.scorecard input.elev { height: 34px; padding: 0 2px; text-align: center; font-weight: 600; box-shadow: none; font-size: 13px; }
.scorecard input.elev::-webkit-outer-spin-button, .scorecard input.elev::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scorecard .point-row td { padding-top: 8px; }
.pt-state { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 26px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.pt-state.done { background: var(--primary-soft); color: var(--primary-hover); }
.pt-state.partial { background: var(--warning-soft); color: var(--warning); }
.pt-state.none { background: var(--surface-2); color: var(--muted); }
.pt-state:hover { outline: 1px solid var(--border-strong); }
.legend { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* ---------- 좌표 수집 ---------- */
.collect { display: grid; gap: 16px; max-width: 680px; }
.collect-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.collect-pick .wide { grid-column: 1 / -1; }
.hole-picker { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.hole-picker button {
    position: relative; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); font: inherit; font-weight: 700; cursor: pointer; color: var(--text);
}
.hole-picker button::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: transparent; }
.hole-picker button.done::after { background: var(--primary); }
.hole-picker button.partial::after { background: #f59e0b; }
.hole-picker button.active { background: var(--text); border-color: var(--text); color: #fff; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface-2); color: var(--text-2); }
.pill.good { background: var(--primary-soft); color: var(--primary-hover); }
.pill.fair { background: var(--warning-soft); color: var(--warning); }
.pill.bad { background: var(--danger-soft); color: var(--danger); }
.muted-sm { color: var(--muted); font-size: 12.5px; }
.gps { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: baseline; }
.gps .big { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.gps dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.gps dt { color: var(--muted); }
.gps dd { margin: 0; font-variant-numeric: tabular-nums; }
.point-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.point-types button {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
    border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
    font: inherit; font-weight: 600; cursor: pointer; color: var(--text-2);
}
.point-types button .i { width: 15px; height: 15px; color: var(--primary); }
.point-types button.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-hover); box-shadow: 0 0 0 3px var(--primary-ring); }
.measure { margin-top: 14px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.measure-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.progress { height: 8px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .3s linear; }
.measure p { margin-top: 8px; }
.saved-list { display: grid; gap: 8px; }
.saved-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.saved-item .tag { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 12px; font-weight: 800; color: #fff; }
.tag.TEE { background: #2563eb; }
.tag.WAYPOINT { background: #f59e0b; }
.tag.GREEN_EDGE { background: #0d9488; }
.tag.CUP { background: var(--primary); }
.saved-item strong { display: block; }
.saved-item small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.saved-item .here { color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.path-summary { margin-top: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; display: grid; gap: 4px; }
.path-summary b { font-variant-numeric: tabular-nums; }

/* ---------- 동호회 ---------- */
.count-badge { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.member-add { position: relative; margin-bottom: 16px; }
.wide-search { max-width: none; }
.member-results {
    position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 6px);
    max-height: 320px; overflow-y: auto; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.result { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); }
.result:hover { background: var(--surface-2); }
.result-text { flex: 1; display: grid; line-height: 1.3; min-width: 0; }
.result-text small { color: var(--muted); font-size: 12px; }
.result-empty { padding: 14px; color: var(--muted); text-align: center; }
.avatar.sm { width: 30px; height: 30px; font-size: 13px; }
.table.members td, .table.members th { padding: 10px 12px; }
.table.members td[data-label] { white-space: nowrap; }
.table.members select.role { width: 96px; height: 32px; padding: 0 8px; font-weight: 600; box-shadow: none; }
.table.members select.role-LEADER { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.table.members select.role-MANAGER { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.table.members select.role-COMMITTEE { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.empty.compact { padding: 28px 16px; }
.delete-note { text-align: center; line-height: 1.5; }
.btn:disabled.ghost-danger { color: var(--muted); background: transparent; }

/* ---------- 마스터 / 회원가입 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.person-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.person-chip span:nth-child(2) { display: grid; line-height: 1.2; }
.person-chip small { color: var(--muted); font-size: 11.5px; }
.person-chip .icon-btn { width: 28px; height: 28px; }
.person-chip .icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.section-help { margin-bottom: 12px; }
.role-tag { display: inline-flex; height: 26px; align-items: center; padding: 0 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; background: var(--surface-2); color: var(--text-2); }
.role-tag.role-LEADER { background: #fef3c7; color: #92400e; }
.role-tag.role-MANAGER { background: #eff6ff; color: #1d4ed8; }
.role-tag.role-COMMITTEE { background: #f5f3ff; color: #6d28d9; }
.society-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.society-card { display: grid; gap: 14px; padding: 18px; transition: box-shadow .15s, border-color .15s; }
.society-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.society-card-head { display: flex; align-items: center; gap: 12px; }
.society-card-head > div { flex: 1; display: grid; min-width: 0; }
.society-card-head strong { font-size: 15.5px; }
.society-card-head small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.society-card-head > .i { color: var(--muted); }
.masters-line { margin-top: 12px; }
.stats.single { grid-template-columns: 1fr; }
.officers { margin-top: 14px; }
.officers h3 { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.officers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.officers li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.officers li .role-tag { flex: none; }
.officers li strong { font-size: 14px; }
.auth-switch { text-align: center; color: var(--text-2); font-size: 13.5px; }
.link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--primary-hover); cursor: pointer; }
.link:hover { text-decoration: underline; }
.auth-card .grid { gap: 14px; }
.done-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.done-icon .i { width: 28px; height: 28px; }

.sub-link { margin-top: -8px; }
.sub-link .dot { color: var(--muted); margin: 0 6px; }
.notice-list { margin: 0; padding: 12px 14px 12px 30px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 13.5px; display: grid; gap: 6px; }
.link.muted { color: var(--text-2); font-weight: 500; font-size: 13px; }
.dialog-icon.ok { background: var(--primary-soft); color: var(--primary); }
.code-input { margin-top: 16px; height: 52px; text-align: center; font-size: 24px; font-weight: 700; letter-spacing: .4em; font-variant-numeric: tabular-nums; }
.code-error { margin-top: 8px; color: var(--danger); font-size: 13px; }

.master-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 4px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--primary-soft); color: var(--primary-hover); vertical-align: 1px; }

/* ---------- 회원가입 아이디 중복 확인 ---------- */
.input-with-btn { display: flex; gap: 8px; }
.input-with-btn input { flex: 1; min-width: 0; }
.input-with-btn .btn { flex: none; height: 40px; }
.id-status { min-height: 18px; color: var(--muted); }
.id-status.ok { color: var(--primary-hover); font-weight: 600; }
.id-status.bad { color: var(--danger); font-weight: 600; }

/* ---------- 화면 선택 (관리자 로그인) ---------- */
.mode-dialog { width: min(460px, calc(100% - 32px)); }
.mode-options { display: grid; gap: 10px; margin-top: 18px; }
.mode-option {
    display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--surface); font: inherit; color: var(--text);
}
.mode-option strong { font-size: 16px; }
.mode-option span { color: var(--text-2); font-size: 13.5px; }
.mode-option:hover, .mode-option:focus-visible { border-color: var(--primary); background: var(--primary-soft); outline: none; }

/* ---------- 모달 / 토스트 ---------- */
.dialog { width: min(420px, calc(100% - 32px)); padding: 24px; border: 0; border-radius: 16px; box-shadow: var(--shadow-lg); color: var(--text); }
.dialog::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.dialog-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); margin-bottom: 14px; }
.dialog h3 { font-size: 17px; font-weight: 700; }
.dialog p { color: var(--text-2); margin-top: 6px; white-space: pre-line; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: grid; gap: 8px; }
.toast {
    display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: 380px; padding: 12px 16px;
    border-radius: 10px; background: #0f172a; color: #fff; box-shadow: var(--shadow-lg); font-weight: 500;
    animation: toast-in .2s ease-out;
}
.toast .i { width: 18px; height: 18px; color: #4ade80; }
.toast.error .i { color: #f87171; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 반응형 ---------- */
@media (max-width: 1100px) {
    .form-layout { grid-template-columns: minmax(0, 1fr); }
    .sticky { position: static; }
}

@media (max-width: 860px) {
    .auth { grid-template-columns: 1fr; }
    .auth-brand { padding: 40px 24px; gap: 10px; }
    .auth-brand h1 { font-size: 24px; }
    .auth-brand p { font-size: 15px; }

    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: fixed; z-index: 30; left: 0; top: 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform .2s ease; }
    .shell.nav-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
    .shell.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(15, 23, 42, .4); }
    .menu-btn { display: inline-grid; margin-left: -8px; }
    .topbar { padding: 0 16px; }
    .content { padding: 20px 16px 48px; }
}

@media (max-width: 640px) {
    .collect-pick { grid-template-columns: 1fr; }
    .hole-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .page-head { flex-direction: column; align-items: stretch; }
    .grid { grid-template-columns: 1fr; }
    .holes { padding: 12px; }
    .course-head { flex-wrap: wrap; }
    .course-stats { order: 3; width: 100%; margin-left: 40px; }
    .toolbar { flex-wrap: wrap; }
    .search { max-width: none; }

    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; }
    .table tr.row { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--border); }
    .table td { padding: 0; border: 0; }
    .table td.col-no { position: absolute; right: 16px; top: 14px; width: auto; font-size: 12px; }
    .table td.num { display: inline-block; margin: 8px 12px 0 0; text-align: left; }
    .table td.num::before { content: attr(data-label) " "; color: var(--muted); font-size: 12.5px; }
    .table td.col-go { display: none; }
    .table td[data-label]:not(.num) { margin-top: 6px; font-size: 13px; }
    .table td[data-label]:not(.num)::before { content: attr(data-label) " "; color: var(--muted); font-size: 12.5px; }
    .table.members tr { position: relative; padding: 12px 44px 12px 12px; border-bottom: 1px solid var(--border); }
    .table.members td { padding: 0; }
    .table.members td.col-go { display: block; position: absolute; right: 8px; top: 10px; width: auto; }
    .table.members td:nth-child(4) { margin-top: 8px; }
}