@font-face { font-family: Pretendard; font-weight: 400; font-display: swap; src: url(/static/fonts/Pretendard-Regular.subset.woff2) format('woff2'); }
@font-face { font-family: Pretendard; font-weight: 500 600; font-display: swap; src: url(/static/fonts/Pretendard-SemiBold.subset.woff2) format('woff2'); }
@font-face { font-family: Pretendard; font-weight: 700; font-display: swap; src: url(/static/fonts/Pretendard-Bold.subset.woff2) format('woff2'); }
@font-face { font-family: Pretendard; font-weight: 800 900; font-display: swap; src: url(/static/fonts/Pretendard-ExtraBold.subset.woff2) format('woff2'); }

:root {
  /* 대한축구협회와 비슷한 톤: 빨강 강조 + 흰 바탕 + 짙은 회색 글자, 남색은 보조(로고색) */
  /* 파랑(로고 남색) + 빨강을 섞은 톤: 바탕 구조는 남색, 강조·포인트는 빨강 */
  --navy: #0B1F66;        /* 주 색 (남색) — 머리글·버튼 */
  --navy-2: #1A3192;      /* 남색 밝게 (마우스 올림) */
  --navy-soft: #E9EDF8;   /* 남색 연하게 */
  --deep: #061447;        /* 더 짙은 남색 */
  --red: #E6002D;         /* 강조 빨강 — 선택 표시·뱃지·포인트 */
  --red-2: #B40028;
  --ink: #222222;
  --ink-2: #343434;
  --muted: #666666;
  --line: #E2E2E2;
  --bg: #F2F2F2;
  --card: #FFFFFF;
  --ok: #1E7B45; --ok-bg: #E6F4EC;
  --warn: #9A6200; --warn-bg: #FFF4DB;
  --err: #B42318; --err-bg: #FDECEA;
  --gold: #B8860B;
  --radius: 4px;
  --shadow: none;
  --font: Pretendard, 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans CJK KR', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 15px; word-break: keep-all; }
a { color: var(--ink); }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .6em; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mt { margin-top: 1rem; } .mt2 { margin-top: 2rem; } .mb0 { margin-bottom: 0; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* 환경 표시 */
.env-banner { background: #7A4B00; color: #fff; text-align: center; font-size: .85rem; padding: 4px 8px; }

/* 머리글 (빨간 띠) */
.site-header { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; gap: 22px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.brand img { height: 52px; width: auto; background: #fff; border-radius: 4px; padding: 3px 5px; }
.brand b { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; display: block; line-height: 1.2; }
.brand small { display: block; font-size: .68rem; color: rgba(255,255,255,.85); font-weight: 600; letter-spacing: .06em; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: 12px; }
.nav a { text-decoration: none; color: #fff; padding: 8px 12px; font-weight: 700; font-size: 1rem; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a.on { border-bottom-color: #fff; }
.nav-user { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: .9rem; color: rgba(255,255,255,.9); }
.nav-user .muted { color: rgba(255,255,255,.85); }
.nav-user .btn { background: #fff; color: var(--navy); border-color: #fff; }
.nav-user .btn:hover { background: #FFE5EA; }
.nav-user .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.7); color: #fff; border-radius: 4px; padding: 6px 12px; font: inherit; font-weight: 700; }
@media (max-width: 960px) {
  .menu-toggle { display: block; }
  .site-header .wrap { flex-wrap: wrap; min-height: 64px; }
  .brand img { height: 44px; }
  .nav, .nav-user { display: none; width: 100%; margin-left: 0; }
  .site-header.open .nav, .site-header.open .nav-user { display: flex; }
  .nav { flex-direction: column; padding-bottom: 8px; }
  .nav a { border-bottom: 1px solid rgba(255,255,255,.2); }
  .nav-user { margin: 0 0 12px; }
}

/* 관리자 보조 메뉴 */
.admin-bar { background: var(--deep); }
.admin-bar .wrap { display: flex; gap: 2px; overflow-x: auto; }
.admin-bar a { color: #C9D1EE; text-decoration: none; padding: 9px 12px; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.admin-bar a.on, .admin-bar a:hover { color: #fff; background: rgba(255,255,255,.12); }

main { padding: 24px 0 48px; min-height: 60vh; }
.page-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
.crumb { font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
.crumb a { color: var(--muted); }

/* 카드 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card + .card { margin-top: 16px; }
.card h2 { font-size: 1.08rem; }
.card-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s; }
.card-link:hover { border-color: var(--navy-2); }

/* 첫 화면 */
.hero { background: linear-gradient(120deg, #E6002D 0%, #C8002A 55%, #8E001F 100%); color: #fff; border-radius: 4px; padding: 28px; display: flex; gap: 24px; align-items: center; overflow: hidden; }
.hero img { height: 120px; background: #fff; border-radius: 4px; padding: 8px; }
.hero h1 { font-size: 1.8rem; margin-bottom: .3em; }
.hero p { margin: 0; color: #FFE3E8; }
@media (max-width: 600px) { .hero { flex-direction: column; text-align: center; padding: 22px 16px; } .hero img { height: 96px; } .hero h1 { font-size: 1.45rem; } }

/* 표 */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; background: #fff; font-size: .93rem; }
.tbl th, .tbl td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: middle; }
.tbl th { background: #F7F8FB; font-weight: 700; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.tbl tr:hover td { background: #FAFBFE; }

/* 배지 */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--navy-soft); color: var(--navy); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.gray { background: #EEF0F4; color: var(--muted); }

/* 버튼·폼 */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--navy); background: var(--navy); color: #fff; padding: 8px 14px; border-radius: 4px; font: inherit; font-weight: 700; font-size: .93rem; cursor: pointer; text-decoration: none; line-height: 1.3; }
.btn:hover { background: var(--navy-2); }
.btn.ghost { background: #fff; color: var(--navy); }
.btn.ghost:hover { background: var(--navy-soft); }
.btn.danger { background: #fff; color: var(--err); border-color: #E5B4AE; }
.btn.danger:hover { background: var(--err-bg); }
.btn.sm { padding: 5px 10px; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: wait; }
label.f { display: block; font-weight: 700; font-size: .88rem; margin: 12px 0 4px; }
label.f .hint { font-weight: 500; color: var(--muted); }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], input:not([type]), select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #C9D0DC; border-radius: 8px; font: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #B9C6F0; border-color: var(--navy-2); }
textarea { min-height: 110px; resize: vertical; }
.check { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; margin: 8px 16px 0 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.save-state { font-size: .88rem; font-weight: 600; }
.save-state.ok { color: var(--ok); } .save-state.err { color: var(--err); } .save-state.busy { color: var(--muted); }
.private-box { border: 1px dashed #D7A9A3; background: #FFF9F8; border-radius: 10px; padding: 4px 14px 14px; margin-top: 14px; }
.private-box legend { font-weight: 800; color: var(--err); font-size: .85rem; padding: 0 6px; }

/* 알림 */
.notice-box { border-radius: 10px; padding: 12px 14px; margin: 12px 0; font-size: .93rem; }
.notice-box.warn { background: var(--warn-bg); color: #5C3B00; }
.notice-box.err { background: var(--err-bg); color: #6E1A12; }
.notice-box.info { background: var(--navy-soft); color: var(--navy); }
.notice-box.ok { background: var(--ok-bg); color: #10502B; }
.notice-box ul { margin: 6px 0 0; padding-left: 20px; }

#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: #1A1F2E; color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.2); font-weight: 600; font-size: .93rem; }
.toast.ok { background: #145A33; } .toast.err { background: #8E1B12; }

/* 모달 */
.modal-bg { position: fixed; inset: 0; background: rgba(10, 16, 40, .45); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; border-radius: 14px; max-width: 560px; width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal h2 { margin-top: 0; }

/* 공지 */
.list { list-style: none; margin: 0; padding: 0; }
.list li { border-bottom: 1px solid var(--line); padding: 11px 2px; display: flex; gap: 10px; align-items: baseline; }
.list li a { text-decoration: none; color: var(--ink); font-weight: 600; flex: 1; }
.list li a:hover { color: var(--navy-2); text-decoration: underline; }
.prose { white-space: pre-wrap; line-height: 1.8; }

/* 팀 카드 */
.team-card { display: flex; gap: 14px; align-items: center; }
.emblem { width: 56px; height: 56px; border-radius: 12px; background: var(--navy-soft); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--navy); font-size: 1.2rem; flex: none; overflow: hidden; }
.emblem img { width: 100%; height: 100%; object-fit: cover; }
.emblem.lg { width: 96px; height: 96px; font-size: 2rem; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0; }
.kv dt { color: var(--muted); font-weight: 700; font-size: .88rem; }
.kv dd { margin: 0; }
.empty { color: #98A1B2; }

/* 탭 */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button, .tabs a { background: none; border: 0; padding: 10px 14px; font: inherit; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; text-decoration: none; }
.tabs .on { color: var(--navy); border-bottom-color: var(--navy); }
.tab-panel[hidden] { display: none; }

/* 대진표 화면 */
.bracket-sheet { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow-x: auto; }
.bracket-sheet .bracket-inner { min-width: 860px; aspect-ratio: 281 / 194; }
.bracket-svg { width: 100%; height: auto; display: block; }
.bracket-svg .clickable { fill: var(--navy-2); text-decoration: underline; }
.bracket-svg .hit:hover { fill: rgba(27, 47, 134, .08); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .88rem; font-weight: 600; }
.legend i { display: inline-block; width: 14px; height: 14px; border: 1px solid #8a93a6; border-radius: 3px; vertical-align: -2px; margin-right: 5px; }

/* 경기 일정 목록 (모바일 친화) */
.day { margin-bottom: 22px; }
.day-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px 10px 0 0; font-weight: 800; border: 1px solid var(--line); border-bottom: 0; }
.day-head .sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #8a93a6; }
.slots { border: 1px solid var(--line); border-radius: 0 0 10px 10px; background: #fff; }
.slot { display: grid; grid-template-columns: 96px 70px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.slot:first-child { border-top: 0; }
.slot .time { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slot .div { justify-self: start; }
.slot .vs { font-weight: 600; }
.slot .vs b { font-weight: 800; }
.slot .vs .tbd { color: #98A1B2; font-weight: 500; }
.slot.block { background: #F7F8FB; color: var(--muted); }
.slot .score { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .slot { grid-template-columns: auto 1fr; gap: 4px 10px; }
  .slot > :nth-child(3), .slot > :nth-child(4) { grid-column: 1 / -1; }
  .slot > :nth-child(4):empty { display: none; }
}
/* 추첨 편집 */
.draw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 14px; }
.draw-item { display: grid; grid-template-columns: 34px 1fr; gap: 6px; align-items: center; }
.draw-item .no { font-weight: 800; text-align: center; background: var(--navy-soft); color: var(--navy); border-radius: 6px; padding: 6px 0; }
.draw-item .inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.issues li { margin: 3px 0; }

footer.site-footer { background: #222222; color: #999999; padding: 26px 0; font-size: .88rem; }
footer.site-footer a { color: #DDDDDD; }

@media print {
  .no-print, .site-header, .admin-bar, footer.site-footer, .env-banner, #toasts { display: none !important; }
  body { background: #fff; }
  main { padding: 0; }
  .card { box-shadow: none; border: 0; padding: 0; }
}
.grid.side { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
@media (max-width: 860px) { .grid.side { grid-template-columns: 1fr; } }
.stat { font-size: 1.7rem; font-weight: 800; color: var(--navy); }
.grid > .card + .card, .grid > section + section { margin-top: 0; }
input:disabled, select:disabled, textarea:disabled { background: #F2F4F7; color: var(--muted); }

/* 대한축구협회 톤 보정 */
h1, h2, h3 { color: var(--ink-2); }
.card { border-color: #E5E5E5; }
.card h2 { font-size: 1.12rem; font-weight: 800; }
.hero .btn.ghost { background: #fff; color: var(--navy); border-color: #fff; }
.hero .btn.ghost:hover { background: #FFE5EA; }
.btn.ghost { color: var(--ink-2); border-color: #BDBDBD; }
.btn.ghost:hover { background: #F5F5F5; }
.badge { border-radius: 3px; background: #F1F1F1; color: var(--ink-2); }
.badge.red, .badge.accent { background: var(--navy); color: #fff; }
.tabs { border-bottom-color: #DDD; }
.tabs .on { color: var(--navy); border-bottom-color: var(--navy); }
.list li a:hover { color: var(--navy); }
.emblem { background: #F3F3F3; color: var(--ink-2); border-radius: 4px; }
.notice-box.info { background: #F6F6F6; color: var(--ink-2); border-left: 3px solid var(--navy); border-radius: 0 4px 4px 0; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.section-title h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.section-title .more { margin-left: auto; color: #999; text-decoration: none; font-size: 1.3rem; line-height: 1; }
.section-title .more:hover { color: var(--navy); }
.stat { color: var(--ink-2); }
.day-head { border-radius: 4px 4px 0 0; }
.slots { border-radius: 0 0 4px 4px; }
.modal { border-radius: 6px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], input:not([type]), select, textarea { border-radius: 4px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #FFC2CD; border-color: var(--navy); }
.hero h1, .hero h2 { color: #fff; }
.slot .vs .tbd, .empty { color: #AAAAAA; }
.env-banner { background: #333; color: #FFD666; }

/* ===== 기록 보관 화면 ===== */
.home-hero { padding: 34px 32px; }
.hero-kicker { font-size: .75rem; letter-spacing: .14em; font-weight: 700; color: #FFD0D8; margin-bottom: 4px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .home-grid { grid-template-columns: 1fr; } }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.badge.accent { background: var(--navy); color: #fff; }
.badge.ok { background: #E7F5EC; color: #1E7B45; }
.badge.warn { background: #FFF2D9; color: #8A5A00; }
.badge.gray { background: #F1F1F1; color: #777; }
.tour-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.tour-row:hover b { color: var(--navy); }
.tr-main { flex: 1; display: flex; flex-direction: column; }
.next-match { margin-top: 14px; padding: 12px 14px; background: #F7F7F7; border-left: 3px solid var(--navy); }
.nm-line { font-weight: 700; margin: 4px 0; }
.nm-line .time { color: var(--navy); font-variant-numeric: tabular-nums; }
.result-card .rc-title { font-weight: 800; font-size: 1.02rem; margin: 4px 0 10px; color: var(--ink-2); }
.result-card .rc-champ { font-weight: 700; }
.trophy { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: 999px; font-size: .76rem; font-weight: 800; line-height: 1.5; margin-right: 4px; vertical-align: middle; white-space: nowrap;
  background: linear-gradient(135deg, #FFF1B8 0%, #F7C948 55%, #E0A100 100%); color: #5A3D00; box-shadow: inset 0 0 0 1px rgba(160,110,0,.35), 0 1px 2px rgba(0,0,0,.08); }
.trophy::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%202h10v2h3.5v3.2A4.3%204.3%200%200%201%2016.6%2011.5%205.6%205.6%200%200%201%2013%2014.3V17h3.2v2.2H7.8V17H11v-2.7a5.6%205.6%200%200%201-3.6-2.8A4.3%204.3%200%200%201%203.5%207.2V4H7V2Zm0%204H5.5v1.2A2.3%202.3%200%200%200%207.1%209.4%206%206%200%200%201%207%208.6V6Zm10%200v2.6c0%20.3%200%20.5-.1.8a2.3%202.3%200%200%200%201.6-2.2V6H17ZM6.5%2020.4h11V22h-11z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%202h10v2h3.5v3.2A4.3%204.3%200%200%201%2016.6%2011.5%205.6%205.6%200%200%201%2013%2014.3V17h3.2v2.2H7.8V17H11v-2.7a5.6%205.6%200%200%201-3.6-2.8A4.3%204.3%200%200%201%203.5%207.2V4H7V2Zm0%204H5.5v1.2A2.3%202.3%200%200%200%207.1%209.4%206%206%200%200%201%207%208.6V6Zm10%200v2.6c0%20.3%200%20.5-.1.8a2.3%202.3%200%200%200%201.6-2.2V6H17ZM6.5%2020.4h11V22h-11z%22/%3E%3C/svg%3E") center / contain no-repeat; }
.trophy.rank-2 { background: linear-gradient(135deg, #FFFFFF 0%, #DDE2EA 55%, #AEB7C6 100%); color: #333B4D; box-shadow: inset 0 0 0 1px rgba(90,100,120,.35), 0 1px 2px rgba(0,0,0,.08); }
.trophy.rank-3 { background: linear-gradient(135deg, #FBE3CC 0%, #E3A673 55%, #B86E33 100%); color: #4A2300; box-shadow: inset 0 0 0 1px rgba(130,70,20,.35), 0 1px 2px rgba(0,0,0,.08); }
.trophy.rank-1 { color: #5A3D00; }
.trophy.rank-2::before, .trophy.rank-3::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%201.5h4l2%204%202-4h4l-3.6%207a6.5%206.5%200%201%201-4.8%200L6%201.5ZM12%2010a4.5%204.5%200%201%200%200%209%204.5%204.5%200%200%200%200-9Zm0%201.8%201.1%202.2%202.4.3-1.75%201.7.4%202.4L12%2017.3l-2.15%201.1.4-2.4-1.75-1.7%202.4-.3L12%2011.8Z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%201.5h4l2%204%202-4h4l-3.6%207a6.5%206.5%200%201%201-4.8%200L6%201.5ZM12%2010a4.5%204.5%200%201%200%200%209%204.5%204.5%200%200%200%200-9Zm0%201.8%201.1%202.2%202.4.3-1.75%201.7.4%202.4L12%2017.3l-2.15%201.1.4-2.4-1.75-1.7%202.4-.3L12%2011.8Z%22/%3E%3C/svg%3E"); }
.team-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ts-item { background: #fff; border: 1px solid #E5E5E5; border-radius: 4px; padding: 14px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--ink-2); text-align: center; }
.ts-item:hover { border-color: var(--navy); }
.ts-item .emblem { width: 52px; height: 52px; border-radius: 50%; }
.ts-name { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.photo-card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #ddd; color: #fff; text-decoration: none; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.photo-card:hover img { transform: scale(1.03); }
.photo-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.75)); display: flex; flex-direction: column; }
.photo-card small { opacity: .85; }
.filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar a { padding: 6px 14px; border: 1px solid #D5D5D5; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .9rem; background: #fff; }
.filter-bar a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid #E0E0E0; }
.timeline li { position: relative; padding: 0 0 18px 14px; }
.timeline li::before { content: ''; position: absolute; left: -25px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--navy); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--navy); }
.timeline .tl-date { font-weight: 800; color: var(--navy); font-size: .9rem; }
.rank-1 { color: var(--navy); font-weight: 800; }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.pager a, .pager span { padding: 5px 11px; border: 1px solid #DDD; border-radius: 3px; text-decoration: none; color: var(--ink-2); background: #fff; }
.pager .on { background: var(--navy); border-color: var(--navy); color: #fff; }
.file-list { list-style: none; padding: 0; margin: 0; }
.file-list li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.file-list a { font-weight: 600; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.gallery-grid a { display: block; aspect-ratio: 1; overflow: hidden; background: #ddd; border-radius: 3px; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 95; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.lightbox img { max-width: 94vw; max-height: 82vh; }
.lightbox .lb-cap { color: #ddd; margin-top: 10px; }
.lightbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 1.6rem; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.lb-prev { left: 12px; top: 50%; } .lb-next { right: 12px; top: 50%; } .lb-close { right: 12px; top: 12px; }
.team-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.team-stats { display: flex; gap: 8px; }
.team-stats div { text-align: center; min-width: 76px; padding: 8px 10px; background: #F7F7F7; border-radius: 4px; }
.team-stats b { display: block; font-size: 1.4rem; font-weight: 800; color: var(--ink-2); }
.team-stats span { font-size: .78rem; color: var(--muted); }
.home-grid > .card + .card { margin-top: 0; }
@media (max-width: 600px) {
  .home-hero { flex-direction: row; text-align: left; padding: 18px 16px; gap: 14px; }
  .home-hero img { height: 64px; padding: 4px; }
  .home-hero h1 { font-size: 1.3rem; margin-bottom: .2em; }
  .home-hero p { font-size: .88rem; }
  .hero-kicker { display: none; }
}
.tbl th { background: #F5F5F5; color: #555; }
.tbl tr:hover td { background: #FAFAFA; }

/* ===== 파랑·빨강 혼합 ===== */
.site-header { background: var(--navy); border-bottom: 4px solid var(--red); }
.nav a:hover, .nav a.on { border-bottom-color: var(--red); }
.nav-user .btn { background: var(--red); color: #fff; border-color: var(--red); }
.nav-user .btn:hover { background: var(--red-2); }
.nav-user .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.menu-toggle { border-color: rgba(255,255,255,.6); }
.admin-bar { background: var(--deep); border-bottom: 2px solid var(--red); }
.admin-bar a.on { box-shadow: inset 0 -3px 0 var(--red); }
.hero { background: linear-gradient(115deg, #0B1F66 0%, #142C88 58%, #E6002D 58.2%, #B40028 100%); }
.hero-kicker { color: #FF9AAE; }
.hero p { color: #DCE3F7; }
.hero .btn.ghost { color: var(--navy); }
.tabs .on { color: var(--red); border-bottom-color: var(--red); }
.badge.accent, .badge.red { background: var(--red); color: #fff; }
.section-title h2 { border-left: 4px solid var(--red); padding-left: 10px; }
.section-title .more:hover, .list li a:hover, .tour-row:hover b { color: var(--red); }
.next-match { border-left-color: var(--red); }
.nm-line .time, .rank-1, .timeline .tl-date { color: var(--red); }
.timeline li::before { background: var(--red); box-shadow: 0 0 0 1px var(--red); }
.filter-bar a.on { background: var(--navy); border-color: var(--navy); }
.notice-box.info { border-left-color: var(--navy); }
.ts-item:hover { border-color: var(--red); }
.btn.danger { color: var(--red); }
.pager .on { background: var(--navy); border-color: var(--navy); }
input:focus, select:focus, textarea:focus { outline: 2px solid #B9C6F0; border-color: var(--navy); }
footer.site-footer { background: #0A1238; color: #9AA3C2; border-top: 4px solid var(--red); }
/* 휴대폰 메뉴: 펼친 메뉴는 흰 바탕 */
@media (max-width: 960px) {
  .site-header.open .nav, .site-header.open .nav-user { background: #fff; margin: 0 -16px; width: calc(100% + 32px); padding: 4px 16px; }
  .site-header.open .nav { padding-top: 6px; }
  .site-header.open .nav-user { padding-bottom: 14px; margin-bottom: 0; }
  .site-header.open .nav a { color: var(--ink-2); border-bottom: 1px solid var(--line); border-left: 3px solid transparent; padding: 12px 10px; }
  .site-header.open .nav a.on, .site-header.open .nav a:hover { color: var(--red); border-bottom-color: var(--line); border-left-color: var(--red); background: #FFF5F7; }
  .site-header.open .nav-user, .site-header.open .nav-user .muted { color: var(--muted); }
  .site-header.open .nav-user .btn.ghost { color: var(--navy); border-color: #BDBDBD; }
}
@media (max-width: 960px) {
  .site-header.open .wrap { row-gap: 0; }
  .site-header.open .brand { padding-block: 8px; }
}
/* 인사말·임원 소개 */
.eyebrow { font-size: .72rem; letter-spacing: .16em; font-weight: 800; color: var(--red); margin-bottom: 4px; }
.greeting { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; padding: 28px; border-top: 4px solid var(--navy); }
.greet-side { background: var(--navy-soft); border-radius: 4px; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; }
.greet-side img { max-height: 180px; }
.greet-body h2 { font-size: 1.4rem; margin-bottom: 14px; }
.greet-body .prose { max-width: 68ch; line-height: 1.9; }
.signer { margin-top: 22px; font-weight: 800; color: var(--navy); font-size: 1.05rem; text-align: right; }
@media (max-width: 700px) { .greeting { grid-template-columns: 1fr; padding: 20px; } .greet-side { padding: 14px; } .greet-side img { max-height: 110px; } }
.president { display: flex; gap: 22px; align-items: center; border-top: 4px solid var(--navy); padding: 24px; }
.president img { width: 84px; }
.pres-role { color: var(--muted); font-weight: 700; }
.pres-name { font-size: 1.8rem; font-weight: 800; color: var(--navy); line-height: 1.2; margin: 2px 0 6px; }
.officer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.officer { background: #fff; border: 1px solid #E5E5E5; border-left: 3px solid var(--navy); border-radius: 4px; padding: 10px 14px; display: flex; flex-direction: column; }
.o-role { font-size: .8rem; color: var(--muted); font-weight: 700; }
.o-name { font-size: 1.05rem; font-weight: 800; color: var(--ink-2); }
.o-sub { font-size: .75rem; color: var(--red); font-weight: 700; }
.team-officers { margin-top: 6px; font-size: .95rem; color: var(--ink-2); }
.team-officers .sep { margin: 0 8px; color: #BBB; }
.team-officers-sm { color: var(--ink-2); font-weight: 600; margin-top: 2px; }
.greet-side { align-self: start; }
.greet-body .prose { line-height: 1.8; }
/* 안내 문서 */
.doc { padding: 28px 32px; line-height: 1.85; }
.doc > * { max-width: 78ch; }
.doc h2 { font-size: 1.12rem; margin: 1.6em 0 .5em; padding-left: 10px; border-left: 4px solid var(--red); }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 1rem; margin: 1.3em 0 .3em; color: var(--navy); }
.doc p { margin: .4em 0; }
.doc ul, .doc ol { margin: .4em 0 .8em; padding-left: 1.3em; }
.doc li { margin: .2em 0; }
@media (max-width: 600px) { .doc { padding: 20px 16px; } }
footer .foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }
footer .foot-links a { text-decoration: none; }
footer .foot-links a.strong { font-weight: 800; color: #fff; }
footer .foot-links .site-credit { margin-left: auto; color: #fff; font-weight: 700; letter-spacing: .02em; }
footer .foot-links a.site-credit:hover { text-decoration: underline; }
@media (max-width: 640px) { footer .foot-links .site-credit { margin-left: 0; flex-basis: 100%; margin-top: 6px; } }
.consent { border: 1px solid var(--line); border-radius: 4px; padding: 6px 14px 12px; margin-top: 16px; background: #FAFAFA; }
.consent legend { font-weight: 800; font-size: .88rem; padding: 0 6px; }
.consent ul { margin: 4px 0 6px; padding-left: 18px; color: var(--muted); }

/* ===== 머리글: 흰 바탕 + 아래 빨강·파랑 두 줄 ===== */
.site-header { background: #fff; color: var(--ink); border-bottom: 0; box-shadow: 0 3px 0 var(--red), 0 6px 0 var(--navy); margin-bottom: 6px; }
.brand { color: var(--navy); }
.brand img { background: #fff; padding: 0; border-radius: 0; }
.brand small { color: var(--muted); }
.nav a { color: var(--ink-2); }
.nav a:hover, .nav a.on { color: var(--red); border-bottom-color: var(--red); }
.nav-user, .nav-user .muted { color: var(--muted); }
.nav-user .btn { background: var(--red); color: #fff; border-color: var(--red); }
.nav-user .btn.ghost { background: #fff; color: var(--navy); border-color: #BDBDBD; }
.nav-user .btn.ghost:hover { background: var(--navy-soft); }
.menu-toggle { color: var(--navy); border-color: #BDBDBD; }
.admin-bar { margin-top: -6px; position: relative; top: 6px; margin-bottom: 6px; }
@media (max-width: 960px) {
  .site-header.open .nav, .site-header.open .nav-user { margin: 0 -16px; }
}
/* 협회 주최 / 대외 출전 구분 */
.badge.ext { background: #FDE8EC; color: var(--red); }
.result-card.ext { border-top: 3px solid var(--red); }
.filter-bar.sub-tabs { gap: 0; border-bottom: 1px solid #DADDE5; margin: 4px 0 16px; flex-wrap: nowrap; overflow-x: auto; }
.filter-bar.sub-tabs a { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 10px 16px; color: var(--ink-2); font-weight: 700; margin-bottom: -1px; white-space: nowrap; }
.filter-bar.sub-tabs a.on { color: var(--navy); border-bottom-color: var(--red); background: none; }
/* 출전 명단(참가신청서) */
.modal.modal-wide { max-width: 860px; }
.privacy-note { line-height: 1.6; }
.rules-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.roster-players input, .roster-staff input { width: 100%; min-width: 0; padding: 6px 8px; }
.roster-players td, .roster-staff td, .roster-staff th { padding: 4px 6px; }
.roster-players td.no { text-align: center; color: var(--muted); }
.roster-sum { margin-top: 8px; line-height: 1.7; }
.badge.danger-soft { background: #FDE8EC; color: #C00020; }
.text-danger { color: #C00020; font-weight: 700; }
.age-rules-table input { width: 100%; min-width: 0; padding: 6px 8px; }
@media (max-width: 640px) {
  .roster-players { table-layout: fixed; }
  .roster-players th:nth-child(1), .roster-players td.no, .roster-players th:nth-child(5), .roster-players td.ag { display: none; }
  .roster-players th:nth-child(2) { width: 52px !important; }
  .roster-players th:nth-child(4) { width: 132px !important; }
  .roster-players th:nth-child(6) { width: 38px !important; }
  .roster-players input { padding: 6px 4px; font-size: 15px; }
  .roster-staff th:first-child { width: 48px !important; }
}
.doc.notice-body { padding: 0; }
.doc strong { font-weight: 800; color: var(--ink); }
/* 중요 공지 (상단 고정) */
.list li.pinned { background: #FFF5F6; border-left: 3px solid var(--red); padding-left: 8px; }
.list li.pinned a { font-weight: 800; color: var(--ink); }
.badge.pin { background: var(--red); color: #fff; }
.badge.pin-until { background: #fff; color: var(--red); border: 1px solid #F5B5C0; font-size: .72rem; }
/* 팀 담당자 가입 신청: 상단 노출 */
.mobile-signup { display: none; }
@media (max-width: 960px) {
  .mobile-signup { display: inline-flex; margin-left: auto; background: var(--red); color: #fff; border-color: var(--red); font-weight: 800; }
  .mobile-signup + .menu-toggle { margin-left: 8px; }
}
@media (max-width: 480px) {
  .brand small { display: none; }
  .brand img { height: 38px; }
  .mobile-signup { padding: 6px 10px; font-size: .82rem; }
  .menu-toggle { padding: 6px 10px; }
  .list li.pinned .badge.pin-until { display: none; }
}
/* 메인 군포시축구회 상자: 작게 (가로형 칩) */
.team-strip { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.ts-item { flex-direction: row; justify-content: flex-start; padding: 6px 10px; gap: 8px; text-align: left; }
.ts-item .emblem { width: 28px; height: 28px; font-size: .8rem; flex: none; }
.ts-item .emblem img { width: 28px; height: 28px; }
.ts-name { font-size: .84rem; }

/* ---- 후원사(함께하는 곳) 띠: 푸터 맨 위 ---- */
footer.site-footer:has(.sponsor-band) { padding-top: 0; }
.sponsor-band { background: rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.08); padding: 18px 0 20px; margin-bottom: 22px; }
.sponsor-band .wrap { display: flex; align-items: center; gap: 18px; }
.sponsor-label { flex: none; font-size: .74rem; font-weight: 800; letter-spacing: .14em; color: #C9CFE6; padding-right: 18px; border-right: 1px solid rgba(255,255,255,.14); line-height: 1.2; }
.sponsor-label::before { content: ""; display: block; width: 18px; height: 3px; background: var(--red); border-radius: 2px; margin-bottom: 7px; }
.sponsor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sponsor > a, .sponsor > div { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; letter-spacing: -.01em;
  transition: background .15s, border-color .15s, transform .15s; }
.sponsor > a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); transform: translateY(-1px); }
.sponsor.has-logo > a, .sponsor.has-logo > div { background: #fff; border-color: #fff; border-radius: 10px; padding: 6px 14px; }
.sponsor.has-logo img { display: block; height: 30px; width: auto; max-width: 150px; object-fit: contain; }
@media (max-width: 640px) {
  .sponsor-band .wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sponsor-label { border-right: 0; padding-right: 0; }
  .sponsor > a, .sponsor > div { min-height: 36px; padding: 0 14px; font-size: .84rem; }
}
/* 관리: 후원사 편집 */
.sp-row { display: grid; grid-template-columns: 1.1fr 1.4fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sp-row .sp-logo { width: 72px; height: 36px; border: 1px dashed var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); overflow: hidden; background: #fff; }
.sp-row .sp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-row .sp-btns { display: flex; gap: 4px; flex-wrap: wrap; }
@media (max-width: 640px) { .sp-row { grid-template-columns: 1fr; } }