.match-board {
    max-width:1140px;
    margin:0 auto;
    padding:72px 24px 90px;
    color:#202c28;
    line-height:1.6;
}

.match-page {
    background:#f7f9f8;
    padding-top:90px;
    min-height:70vh;
}

.match-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:32px;
}

.match-board h1,.match-board h2,.match-board h3 {
    color:#202c28;
    letter-spacing:-.04em;
}

.match-board h1 {
    font-size:36px;
    line-height:1.35;
    overflow-wrap:anywhere;
}

.match-board h2 {
    font-size:30px;
    margin:0 0 8px;
}

.match-muted {
    color:#738078;
    margin:0;
}

.match-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:32px 26px;
}

.match-card {
    display:block;
    background:#fff;
    border:1px solid #e3e9e5;
    border-radius:16px;
    overflow:hidden;
    color:inherit;
    transition:transform .2s,box-shadow .2s;
}

.match-card:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 30px #143c2412;
    text-decoration:none;
}

.match-thumb {
    position:relative;
    aspect-ratio:489/489;
    background:#edf2ee;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#6f8576;
}

.match-thumb img {
    width:100%;
    height:100%;
    object-fit:contain;
}

.match-card-info {
    padding:22px;
}

.match-card h3 {
    font-size:20px;
    line-height:1.5;
    margin:0 0 12px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    overflow-wrap:anywhere;
}

.match-card time {
    color:#728077;
    font-size:14px;
}

.match-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 22px;
    border:1px solid #d7e1da;
    border-radius:8px;
    background:#fff;
    color:#34493c;
    font-size:15px;
    cursor:pointer;
    white-space:nowrap;
}

.match-btn.primary {
    background:#225c3d;
    border-color:#225c3d;
    color:white;
}

.match-actions {
    display:flex;
    gap:10px;
    justify-content:flex-end;
    align-items:center;
    margin-top:28px;
    flex-wrap:wrap;
}

.match-actions form {
    margin:0;
}

.match-empty {
    text-align:center;
    padding:80px 20px;
    background:#f7f9f8;
    border:1px solid #e3e9e5;
    border-radius:16px;
}

.match-pagination {
    display:flex;
    gap:8px;
    justify-content:center;
    margin-top:42px;
    flex-wrap:wrap;
}

.match-pagination a {
    padding:8px 15px;
    border:1px solid #e0e7e2;
    border-radius:6px;
    color:#47614f;
}

.match-pagination a[aria-current] {
    background:#225c3d;
    color:#fff;
}

.match-panel {
    background:white;
    border:1px solid #e1e8e3;
    border-radius:16px;
    padding:36px;
    margin-bottom:24px;
}

.match-detail-head {
    border-bottom:1px solid #e1e8e3;
    padding-bottom:28px;
    margin-bottom:30px;
}

.match-detail-head time {
    color:#63786b;
}

.match-prize-total {
    background:#edf5ef;
    padding:24px;
    border-radius:12px;
    margin:24px 0;
    font-size:24px;
    font-weight:700;
    overflow-wrap:anywhere;
}

.match-prize-total small {
    display:block;
    font-size:13px;
    color:#63786b;
    font-weight:400;
    margin-bottom:5px;
}

.match-prizes {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.match-prize {
    background:#f7f9f8;
    border-radius:8px;
    padding:18px;
    overflow-wrap:anywhere;
}

.match-prize strong {
    display:block;
    color:#225c3d;
    margin-bottom:5px;
}

.match-body {
    overflow-wrap:anywhere;
    overflow-x:auto;
    line-height:1.9;
}

.match-body img {
    max-width:100%!important;
    height:auto!important;
}

.match-body table {
    max-width:100%;
}

.match-field {
    margin-bottom:24px;
}

.match-field label {
    display:block;
    font-weight:600;
    margin-bottom:8px;
}

.match-field input:not([type=file]),.match-field textarea {
    width:100%;
    padding:12px 14px;
    border:1px solid #d4ded7;
    border-radius:7px;
    background:#fff;
    color:#263d2e;
    font:inherit;
    box-sizing:border-box;
}

.match-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.match-field small {
    display:block;
    color:#748077;
    margin-top:7px;
}

.match-required {
    color:#b74335;
}

.match-preview {
    display:block;
    width:240px;
    max-width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:8px;
    margin-top:14px;
}

.match-error {
    padding:18px;
    background:#fff1ef;
    color:#9e3426;
    border-radius:8px;
    margin-bottom:24px;
}

.match-board a:focus-visible,.match-board button:focus-visible,.match-board input:focus-visible {
    outline:3px solid #81ad91;
    outline-offset:3px;
}

@media(max-width:800px) {
    .match-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .match-board {
        padding:42px 20px 60px;
    }
    .match-panel {
        padding:24px;
    }
    .match-board h1 {
        font-size:28px;
    }
}

@media(max-width:520px) {
    .match-grid,.match-fields,.match-prizes {
        grid-template-columns:1fr;
    }
    .match-heading {
        align-items:flex-start;
    }
    .match-board h2 {
        font-size:25px;
    }
    .match-card-info {
        padding:18px;
    }
    .match-panel {
        padding:20px;
    }
    .match-heading .match-btn {
        padding:9px 12px;
    }
}

.match-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 36px;
}

.match-detail-info {
    flex: 1;
    min-width: 0;
}

.match-detail-info h1 {
    margin: 12px 0 16px;
}

.match-title-sponsor {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 45%;
    margin-left: auto;
    text-align: right;
    font-size: 22px;
}

.match-sponsor-label {
    color: #738078;
    white-space: nowrap;
}

.match-title-sponsor img {
    display: block;
    max-width: min(200px, 100%);
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.match-title-sponsor strong {
    overflow-wrap: anywhere;
    min-width: 0;
}

@media(max-width:800px) {
    .match-detail-head {
        flex-wrap: wrap;
    }

    .match-detail-info {
        flex-basis: 100%;
    }

    .match-title-sponsor {
        max-width: 100%;
    }
}

.match-sponsor-logo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: 110px;
    object-fit: contain;
    background: #fff;
    margin-top: 12px;
}
