:root { --ce-color: #2e8b57; --pl-color: #4682b4; --bg-light: #f5f5f5; --text-main: #222; --accent: #0066cc; --border-soft: #ddd; }* { box-sizing: border-box; }body { margin: 0; padding: 0; font-family: "M PLUS 1p", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg-light); color: var(--text-main); }a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }header { background: linear-gradient(90deg, #f7fbf8 0%, #f7faff 100%); color: #123d6b; border-bottom: 3px solid var(--ce-color); }.header-inner { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }.site-title { font-size: 1.4rem; font-weight: 700; } .site-sub { font-size: 0.8rem; color: #4b6b8f; } .header-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; }.lang-switch { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; } .lang-label { color: #36506c; } .lang-switch select { padding: 3px 6px; font-size: 0.75rem; border-radius: 4px; border: 1px solid #9eb4ca; background: #fff; color: #123d6b; }.nav-bar { background: linear-gradient(90deg, #e9f5ed 0%, #e8f0fb 100%); border-bottom: 1px solid #cdd9e6; } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px 4px; display: flex; flex-direction: column; align-items: center; } .nav-toggle { display: none; font-size: 1.1rem; color: #123d6b; cursor: pointer; padding: 10px 0; text-align: center; width: 100%; border-bottom: 1px solid #cdd9e6; user-select: none; } .nav-toggle span { margin-left: 4px; font-size: 0.8rem; }.nav, .nav ul { list-style: none; margin: 0; padding: 0; } .nav { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.85rem; } .nav li { position: relative; } .nav > li > a { display: block; padding: 12px 6px; color: #123d6b; white-space: nowrap; font-weight: 700; } .nav a:hover { color: var(--ce-color); text-decoration: none; } .nav li > ul { display: none; background: #f8fbff; border: 1px solid #d6e1ec; } .nav li > ul a { color: #123d6b; font-size: 0.8rem; } .nav-caret { margin-left: 6px; font-size: 0.68rem; color: #94a3b8; } .nav-caret-side { font-size: 0.72rem; position: absolute; right: 12px; }.breadcrumb-wrap { background: #f0f4f8; border-bottom: 1px solid var(--border-soft); } .breadcrumb { max-width: 1200px; margin: 0 auto; padding: 6px 16px; font-size: 0.72rem; color: #777; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .breadcrumb a { color: #666; } .breadcrumb-separator { color: #aaa; } .breadcrumb-current { color: #333; font-weight: 600; }.page-container { max-width: 1200px; margin: 0 auto; padding: 18px 16px 40px; } .page-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; padding: 18px 0 22px; } .page-head h1 { margin: 0; font-size: 2rem; line-height: 1.18; } .page-kicker, .section-kicker { margin: 0 0 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: #6b7280; } .page-lead { margin: 8px 0 0; color: #555; line-height: 1.8; } .page-tools { display: flex; gap: 16px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-left: auto; } .year-select { display:flex; align-items:center; gap:10px; } .year-select label { display:block; margin-bottom:0; font-size:0.75rem; color:#555; white-space:nowrap; } .year-select select { padding: 8px 10px; border: 1px solid #cfd8df; border-radius: 6px; background: #fff; } .hero-actions { display:flex; gap:10px; flex-wrap:wrap; } .hero-link { display:inline-block; padding:10px 14px; border-radius:999px; border:1px solid #c8d5e6; background:#fff; color:#1f3b61; font-weight:600; } .hero-link.primary { background:#1f3b61; color:#fff; border-color:#1f3b61; } .hero-link-ce { background:linear-gradient(135deg, #2e8b57, #3ea56e); color:#fff; border-color:#2e8b57; } .hero-link-pl { background:linear-gradient(135deg, #4682b4, #5a9adb); color:#fff; border-color:#4682b4; }.content-panel { background:#fff; border:1px solid #dde4eb; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.04); padding:16px; margin-bottom:20px; } .section-title-row { display:flex; justify-content:space-between; gap:16px; align-items:end; margin-bottom:14px; } .section-title-row h2 { margin:0; font-size:1.2rem; }.ranking-card, .detail-table-wrap { position:relative; overflow-x:auto; overflow-y:hidden; border:1px solid #dce3ec; border-radius:12px; background:#fff; } .league-overview-card .ranking-card { border:none; border-radius:0; } .rank-table, .detail-table { width:100%; border-collapse:separate; border-spacing:0; min-width:1120px; } .rank-table th, .rank-table td, .detail-table th, .detail-table td { padding:10px 8px; border-bottom:1px solid #e6ebf1; font-size:0.9rem; text-align:right; white-space:nowrap; } .team-col, .team-col a { text-align:left !important; font-weight:700; } .rank-table tr > .rank-col { position:sticky; left:0; z-index:5; min-width:44px; text-align:center !important; background:#fff; box-shadow:1px 0 0 #e6ebf1; } .rank-table tr > .team-col { position:sticky; left:44px; z-index:5; min-width:110px; background:#fff; box-shadow:1px 0 0 #e6ebf1; } .rank-table .rank-subhead > .rank-col, .rank-table .rank-subhead > .team-col { z-index:6; background:#f7f9fc; box-shadow:1px 0 0 #dce3ec; } .detail-table tr > .team-col { position:sticky; left:0; z-index:5; width:64px; min-width:64px; max-width:64px; background:#fff; box-shadow:1px 0 0 #e6ebf1; } .detail-table thead tr > .team-col { z-index:6; background:#f7f9fc; box-shadow:1px 0 0 #dce3ec; } .league-overview-card { border:1px solid #dce3ec; border-radius:12px; background:#fff; overflow:hidden; } .league-overview-banner { padding:12px 14px; text-align:left; font-size:1.02rem; font-weight:700; } .league-overview-banner.rank-header-ce { border-top:8px solid var(--ce-color); background:#f7fbf8; color:#123d6b; } .league-overview-banner.rank-header-pl { border-top:8px solid var(--pl-color); background:#f7faff; color:#123d6b; } .rank-subhead th, .detail-table thead th { background:#f7f9fc; color:#444; font-size:0.86rem; } .vs-table thead tr:first-child th { text-align:left; font-size:1.02rem; }.content-panel-note { background:linear-gradient(180deg, #fffdf8, #ffffff); } .info-stack { display:grid; gap:16px; } .info-block { padding:16px 18px; border:1px solid #eadfcb; border-radius:10px; background:#fffdfa; } .info-block h3 { margin:0 0 10px; font-size:1rem; color:#6f4e1c; } .info-block p { margin:0; line-height:1.9; color:#4b5563; } .info-list { margin:10px 0 10px 20px; padding:0; line-height:1.9; color:#4b5563; } .site-footer { max-width:1200px; margin:0 auto; padding:18px 16px 30px; color:#666; font-size:0.82rem; }@media (min-width: 841px) { .nav-inner { flex-direction: row; align-items: center; justify-content: flex-start; padding-top: 0; } .nav { display: flex; } .nav > li > ul { position: absolute; top: 100%; left: 0; min-width: 250px; overflow: visible; border-radius: 0 0 8px 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.28); z-index: 20; } .nav li:hover > ul { display: block; } .nav > li > ul > li > a { display: block; padding: 8px 14px; border-top: 1px solid rgba(255,255,255,0.04); } .nav > li > ul > li.has-sub > a { padding-right: 30px; } .nav > li > ul > li > ul { position: absolute; top: -1px; left: 100%; min-width: 220px; overflow: visible; border-radius: 0 8px 8px 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.28); } .nav > li > ul > li > ul a { display: block; padding: 8px 14px; border-top: 1px solid rgba(255,255,255,0.04); } }@media (max-width: 840px) { .nav-inner { align-items: flex-end; } .nav-toggle { display: block; text-align: right; padding-right: 4px; } .nav { display: none; flex-direction: column; width: 100%; gap: 0; padding-bottom: 10px; align-items: stretch; } .nav.show { display: flex; } .nav > li, .nav li > ul > li { width: 100%; } .nav a { display: block; padding: 11px 12px; border-top: 1px solid #cdd9e6; color: #123d6b; white-space: normal; text-align: left; background: transparent; } .nav li.open > ul { display: block; } .nav li > ul { background: #f6fbff; } .nav li > ul a { padding-left: 24px; } .nav li > ul li > ul { background: #eef6ff; } .nav li > ul li > ul a { padding-left: 38px; } .page-head { flex-direction: column; align-items: flex-start; } }@media (max-width: 600px) { .header-inner { flex-direction: column; align-items: flex-start; } .header-right { width: 100%; justify-content: flex-start; } .page-head h1 { font-size: 1.45rem; line-height: 1.2; } .rank-table th, .rank-table td, .detail-table th, .detail-table td { font-size: 0.82rem; padding: 8px 7px; } }