/*
 * 본선 토너먼트 브래킷 — CSS Grid.
 *
 * 라운드가 열, 경기가 행이다. 라운드가 깊어질수록 경기 하나가 차지하는
 * 행 수가 2배씩 늘어나 자연스럽게 트리 모양이 된다.
 *
 * ── 격자는 `.bracket` **하나뿐**이다 ──
 * 예전에는 라운드마다 `.bracket-round` 라는 격자를 또 두었다. 그 탓에
 * (1) 제목과 첫 경기가 둘 다 1행이라 겹쳐 그려졌고,
 * (2) `auto` 행 높이를 **열마다 따로** 계산해 열끼리 행선이 어긋났다.
 * 지금은 행이 한 벌뿐이라 열 사이 정렬이 구조적으로 보장된다.
 *
 *   1행    라운드 제목 전용
 *   2행~   경기 (--rows 개)
 *
 * old 는 jquery-bracket 을 썼다. 데이터 형식은 그대로 호환되므로
 * 이 파일과 _bracket.php 만 교체하면 라이브러리로 되돌릴 수 있다.
 *   → docs/08-bracket-algorithm.md
 */

.bracket-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.bracket {
    display: grid;
    /* 열 너비를 고정한다. 1fr 로 두면 라운드가 2개뿐일 때 열이 화면 폭까지
       늘어나 28px 연결선이 상자에 비해 터무니없이 짧아 보인다. */
    grid-template-columns: repeat(var(--rounds), 180px);
    grid-template-rows: auto repeat(var(--rows), minmax(28px, auto));
    justify-content: start;
    gap: 0 28px;
    min-width: min-content;
    padding: 8px 2px;
}

.bracket-round-title {
    grid-row: 1;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-muted);
    text-align: center;
}

/*
 * 격자 칸을 그대로 차지하는 래퍼.
 *
 * 세로 연결선은 **부모 경기가 차지한 행 구간 전체** 높이가 있어야 그릴 수
 * 있는데, .bracket-match 는 가운데 정렬이라 내용 높이밖에 안 된다.
 * 그래서 한 겹 감싸고 세로선은 이쪽에 그린다. 지우면 트리 선이 사라진다.
 */
.bracket-cell {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

/*
 * ⚠️ overflow 를 숨기지 않는다. 연결선을 그리는 ::before/::after 가 상자
 *    **바깥**으로 나가야 하는데, 여기서 자르면 통째로 사라진다.
 *    모서리를 둥글게 자르는 일은 안쪽 두 조각이 각자 맡는다.
 */
.bracket-match {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-bg);
}

/* 경기 번호 — 왼쪽 세로 띠. 다른 경기의 "N경기 승자" 가 이 번호를 가리킨다 */
.bracket-no {
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--c-line);
    color: var(--c-muted);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bracket-body {
    flex: 1;
    min-width: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    overflow: hidden;   /* .bracket-tag 의 배경이 모서리 밖으로 새지 않게 */
}

.bracket-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.3;
}

.bracket-slot + .bracket-slot {
    border-top: 1px solid var(--c-line);
}

.bracket-team {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bracket-score {
    flex: 0 0 auto;
    min-width: 18px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--c-muted);
}

/* 승자 강조 — 점수가 들어오면 컨트롤러가 이 클래스를 붙인다 */
.bracket-slot.is-winner .bracket-team { font-weight: 700; }
.bracket-slot.is-winner .bracket-score { color: var(--c-accent); }

/* 부전승 — 실제 경기가 열리지 않는다 */
.bracket-match.is-bye {
    border-style: dashed;
    opacity: 0.55;
}

.bracket-tag {
    display: block;
    padding: 2px 8px;
    background: var(--c-line);
    color: var(--c-muted);
    font-size: 11px;
    text-align: center;
}

/* 3·4위전 — 트리 밖이라 결승 아래에 따로 놓는다 */
.bracket-cell.is-third { align-items: start; padding-top: 16px; }
.bracket-match.is-third { border-color: var(--c-muted); }

/*
 * ── 연결선 ──
 *
 * 열 간격이 28px 이므로 그 중간점은 상자 기준 ±14px 다. 세 조각을 잇는다.
 *
 *   자식 상자 ──14px──┐
 *                     │ 세로선 (셀의 25% → 75%)
 *   자식 상자 ──14px──┴──14px── 부모 상자
 *
 * 세로선이 25%~75% 인 이유: 부모 셀은 자식 둘의 행 구간을 합친 크기이고
 * 각 자식은 그 절반 안에서 가운데 정렬된다. 따라서 자식의 중심은 부모 셀
 * 높이의 정확히 1/4 지점과 3/4 지점이다.
 */
.bracket-cell:not(.is-last) .bracket-match::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 14px;
    border-top: 1px solid var(--c-line);
}

.bracket-cell.is-feed .bracket-match::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 14px;
    border-top: 1px solid var(--c-line);
}

.bracket-cell.is-feed::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 25%;
    height: 50%;
    border-left: 1px solid var(--c-line);
}

/* 예선 조 표 */
.jo-cols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.jo-box {
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: 10px 12px;
}

.jo-box h4 { margin: 0 0 6px; font-size: 13px; }

.jo-teams { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; }
.jo-teams li { margin-bottom: 2px; }
.jo-teams .muted { margin-right: 4px; font-size: 12px; }

.jo-games { width: 100%; font-size: 12px; }
.jo-games td { padding: 3px 4px; border: 0; }
.jo-games .vs { width: 12px; text-align: center; color: var(--c-muted); }

/* 종목 블록 */
.event-block { margin-bottom: 32px; }
.event-block-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
    padding-bottom: 6px; border-bottom: 2px solid var(--c-line);
}
.event-block-head h2 { margin: 0; font-size: 16px; }
.event-block-head .btn-cancel { padding: 5px 12px; font-size: 12px; }
.sub-title { margin: 16px 0 8px; font-size: 13px; color: var(--c-muted); }

/* 종목 선택·병합 목록은 admin.css 에 있다.
   이 파일은 대진 화면에서만 로드되는데 종목 병합 화면은 admin.css 만
   로드하므로, 두 곳이 함께 쓰는 .event-pool 계열을 그쪽에 두었다. */

/* 종목마다 고르는 진행 방식(리그 / 토너먼트) — 대진 생성 화면에만 있다.
   .event-pool label 이 width:100% 라 그대로 두면 select 가 밀려 찌그러진다.
   → docs/25-tournament-way.md */
.event-pool > li:has(.event-way) label { width: auto; flex: 1 1 auto; min-width: 0; }
.event-way {
    flex: 0 0 auto; margin-left: 8px;
    padding: 2px 6px; font-size: 12px;
    border: 1px solid var(--c-line); border-radius: var(--radius);
    background: var(--c-bg); color: var(--c-fg);
}

/* ------------------------------------------------------------------ */
/* 대진 확인 — 조 편집                                                  */
/* ------------------------------------------------------------------ */

.event-block-tools { display: flex; gap: 6px; }
.event-block-tools .btn-primary { padding: 5px 12px; font-size: 12px; }

.jo-box { transition: border-color .12s; }
/* 같은 소속이 한 조에 겹침 — 막지 않고 표시만 한다.
   바꿔치기로 풀 수 있으면 주황 ⚠, 소속 팀 수가 조 수보다 많아
   애초에 나눌 수 없으면 회색 · (경고가 아니라 사실 안내) */
.jo-box.has-dup { border-color: var(--c-warn); }
.jo-box.has-dup-fixed { border-color: var(--c-line); }

.dup-flag { font-size: 11px; font-weight: 400; }
.has-dup .dup-flag { color: var(--c-warn); }
.has-dup-fixed .dup-flag { color: var(--c-muted); }
.dup-name { white-space: nowrap; }

.dup-legend { margin: 0 0 8px; }

.jo-teams { position: relative; }
/* 다이어그램 꼭짓점 번호와 같은 번호 */
.jt-no {
    flex: 0 0 1.4em; text-align: center;
    font-size: 10px; font-weight: 700; line-height: 1.4em;
    color: #fff; background: var(--c-accent); border-radius: 50%;
}
.jo-team {
    display: flex; align-items: center; gap: 6px;
    cursor: grab; border-radius: var(--radius); padding: 3px 5px;
}
.jo-team:hover { background: rgba(0, 0, 0, 0.03); }
.jo-team.is-drag { opacity: 0.4; }
/* 끌고 온 팀과 맞바꿀 상대 — 드롭 대상은 조 상자가 아니라 팀이다 */
.jo-team.is-target {
    background: rgba(37, 99, 235, 0.12);
    outline: 1px dashed var(--c-accent);
}
.jo-team.is-dup .jt-club { color: var(--c-warn); font-weight: 600; }
.jt-label { flex: 1; }

.jt-edit {
    border: 0; background: none; color: var(--c-muted);
    font-size: 12px; padding: 1px 4px; cursor: pointer; opacity: 0;
}
.jo-team:hover .jt-edit { opacity: 1; }
.jt-edit:hover { color: var(--c-accent); }

/* 인라인 수정 폼 */
.jt-form {
    flex-basis: 100%; margin: 5px 0 8px; padding: 8px;
    border: 1px solid var(--c-accent); border-radius: var(--radius);
    background: var(--c-bg);
}
.jt-row { display: flex; gap: 4px; margin-bottom: 4px; }
.jt-row input, .jt-row select {
    padding: 4px 6px; font-size: 12px;
    border: 1px solid var(--c-line); border-radius: var(--radius);
    min-width: 0;
}
.jt-row input { flex: 1; }
.jt-row select { flex: 0 0 4.5rem; }
.jt-actions { display: flex; gap: 5px; margin-top: 6px; }
.jt-actions button { padding: 4px 12px; font-size: 12px; }

/* ------------------------------------------------------------------ */
/* 조별 리그 다이어그램 — 정다각형 그래프                                */
/* 완전그래프(K_n) = 리그전. 변 하나가 경기 하나.                        */
/* ------------------------------------------------------------------ */

.lg-graph { margin: 10px 0; padding: 0; }
.lg-graph svg { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
.lg-graph figcaption {
    text-align: center; font-size: 11px; color: var(--c-muted); margin-top: 2px;
}

/*
 * SVG 안에는 표현 속성(fill·font-size·font-family)도 함께 찍혀 있다.
 * PDF 내려받기에서 mPDF 가 이 CSS 를 못 읽기 때문이다(_league_graph.php 주석).
 * CSS 가 표현 속성보다 우선하므로 화면은 여기 값이 이긴다 — 다크모드 포함.
 *
 * font-family 만은 명시적으로 되돌려야 한다. SVG 에 PDF 용 한글 폰트
 * (unbatang)가 박혀 있어 그대로 두면 화면에서도 그 이름을 찾으려 든다.
 */
.lg-graph text { font-family: inherit; }

.lg-edge { stroke: var(--c-line); stroke-width: 1.2; }
.lg-edge-no { font-size: 7px; fill: var(--c-accent); }
.lg-edge-no.is-no { font-size: 9px; font-weight: 700; }
.lg-node { fill: var(--c-accent); }
.lg-node-no { font-size: 10px; fill: #fff; font-weight: 700; }
.lg-name { font-size: 8.5px; fill: var(--c-muted); }
.lg-name.is-team { fill: var(--c-fg); font-weight: 600; }

@media (max-width: 720px) {
    .jt-row { flex-wrap: wrap; }
    .jt-row select { flex: 1 0 4rem; }
}