/* ========================================================================= court-table-view.css — コート割り振り「参考デザイン」テーブルの共有スタイル。 court-table-view.js が描く .ref-result（公平性チップ・grid 表・出場バランス） の見た目を定義する。generator（/generator）と event ページの両方が読み込む。 ★ 自己完結: 必要な North Star トークンを .ref-result 配下で再定義しているため、 ホストページが tennis-base.css を読み込んでいなくても（= event ページ）正しく 描画される。generator は別途 tennis-base.css も読むが、その値とここでの値は一致。 こうしてホスト側の token 体系（style.css の --primary 等）と衝突しない。 ※ フォント（Zen Kaku / Outfit）は各ページが で読み込む。未読込でも system-ui にフォールバックするだけで崩れない。 ========================================================================= */ .ref-result { /* --- North Star トークン（self-contained。tennis-base.css と同値） --- */ --lime: #C7ED45; --lime-bright: #D6F45A; --court: #14532D; --court-mid: #1E7D3C; --ink: #16241B; --muted: #5C6B5E; --faint: #8A988C; --bg: #FBFDF6; --soft: #F1F8E6; --soft2: #EAF4DA; --line: #E7EFD9; --white: #FFFFFF; --maybe: #D99A1C; --maybe-bg: #FBF1D8; --gold: #E0B341; --radius: 20px; --radius-sm: 14px; --shadow-card: 0 1px 2px rgba(20, 83, 45, .05), 0 10px 30px -12px rgba(20, 83, 45, .16); --rt-font-jp: "Zen Kaku Gothic New", system-ui, sans-serif; --rt-font-num: "Outfit", system-ui, sans-serif; display: flex; flex-direction: column; gap: 16px; } /* 公平性チップ（参考の .fair / .fchip） */ .ref-result .fair { display: flex; gap: 8px; flex-wrap: wrap; } .ref-result .fchip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--court); font-family: var(--rt-font-jp); background: var(--white); border: 1px solid var(--soft2); border-radius: 999px; padding: 7px 12px; } .ref-result .fchip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--court-mid); } .ref-result .fchip b { font-family: var(--rt-font-num); } /* アバター基底（参考の .av）。 サイズ・文字サイズは .pl .av / .bchip .av が上書き */ .ref-result .av { border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-family: var(--rt-font-num); font-weight: 800; line-height: 1; } /* matrix table */ .ref-result .tablewrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-card); overflow-x: auto; } .ref-result table.grid { border-collapse: collapse; width: 100%; min-width: 100%; } .ref-result table.grid th, .ref-result table.grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: middle; } .ref-result table.grid th:last-child, .ref-result table.grid td:last-child { border-right: none; } .ref-result table.grid tr:last-child td { border-bottom: none; } .ref-result table.grid thead th { background: var(--court); color: #fff; font-family: var(--rt-font-jp); font-weight: 800; font-size: 12.5px; padding: 11px 8px; position: sticky; top: 0; } .ref-result table.grid thead th.rcol { background: #0F4226; } .ref-result table.grid thead th .ci { display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .ref-result table.grid thead th .court-let { font-family: var(--rt-font-num); font-weight: 800; color: var(--lime-bright); } .ref-result .rcell { background: var(--soft); text-align: center; font-family: var(--rt-font-num); font-weight: 800; font-size: 13px; color: var(--court); padding: 10px 8px; white-space: nowrap; } .ref-result .rcell small { display: block; font-size: 9px; color: var(--faint); font-weight: 600; margin-top: 2px; } .ref-result .mcell { padding: 10px 9px; min-width: 118px; } .ref-result .rest-cell { padding: 10px 9px; min-width: 78px; background: var(--maybe-bg); } .ref-result .rest-cell .rl { font-size: 9.5px; font-weight: 700; color: var(--maybe); letter-spacing: .04em; margin-bottom: 4px; } .ref-result .rest-cell .rn { font-size: 12px; font-weight: 700; color: var(--maybe); line-height: 1.5; } .ref-result .rest-cell.none { background: var(--bg); } .ref-result .rest-cell.none .rn { color: #C2CDBA; font-weight: 600; } .ref-result .team { display: flex; flex-direction: column; gap: 4px; } .ref-result .pl { display: flex; align-items: center; gap: 6px; } .ref-result .pl .av { width: 20px; height: 20px; font-size: 9.5px; } .ref-result .pl .nm { font-size: 12.5px; font-weight: 700; color: var(--ink); font-family: var(--rt-font-jp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; } .ref-result .vsbar { display: flex; align-items: center; gap: 7px; margin: 5px 0; } .ref-result .vsbar .ln { flex: 1; height: 1px; background: var(--line); } .ref-result .vsbar .v { font-family: var(--rt-font-num); font-weight: 800; font-size: 9.5px; color: var(--faint); } /* 延長戦アコーディオン（予定回戦の後・タップ展開） */ .ref-result .ref-extra { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft); overflow: hidden; } .ref-result .ref-extra > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 9px; padding: 14px 16px; min-height: 24px; font-family: var(--rt-font-jp); font-size: 13.5px; font-weight: 700; color: var(--court); transition: background .15s ease; } .ref-result .ref-extra > summary::-webkit-details-marker { display: none; } .ref-result .ref-extra > summary:hover { background: var(--soft2); } .ref-result .ref-extra .ref-extra-ico { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--court); font-family: var(--rt-font-num); font-weight: 800; font-size: 16px; line-height: 1; } /* グリフは ::before で出し、 開閉で ＋ ⇄ − に差し替える（transform に依存しない＝quirk なし） */ .ref-result .ref-extra .ref-extra-ico::before { content: "＋"; } .ref-result .ref-extra[open] .ref-extra-ico::before { content: "−"; } .ref-result .ref-extra[open] > summary { background: var(--soft2); } .ref-result .ref-extra .ref-extra-txt { line-height: 1.3; } .ref-result .ref-extra .ref-extra-body { padding: 0 12px 14px; } .ref-result .ref-extra .ref-extra-body .tablewrap { margin-top: 2px; } /* per-player appearance balance */ .ref-result .balance { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 14px 16px; } .ref-result .balance .bh { font-size: 12px; font-weight: 700; color: var(--faint); letter-spacing: .04em; margin-bottom: 11px; display: flex; align-items: center; gap: 7px; font-family: var(--rt-font-jp); } .ref-result .balance .blist { display: flex; flex-wrap: wrap; gap: 7px; } .ref-result .balance .bchip { display: inline-flex; align-items: center; gap: 6px; background: var(--soft); border: 1px solid var(--soft2); border-radius: 999px; padding: 5px 11px 5px 6px; } .ref-result .balance .bchip .av { width: 20px; height: 20px; font-size: 9.5px; } .ref-result .balance .bchip .bn { font-size: 12px; font-weight: 700; color: var(--court); font-family: var(--rt-font-jp); } .ref-result .balance .bchip .bc { font-family: var(--rt-font-num); font-weight: 700; font-size: 11px; color: var(--court-mid); background: var(--white); border-radius: 999px; padding: 1px 7px; } /* entrance reveal — base visible; only animate when host page opts in via body.anim */ @media (prefers-reduced-motion: no-preference) { body.anim .ref-result.reveal { opacity: 0; transform: translateY(15px); animation: rt-rise .6s cubic-bezier(.2, .7, .2, 1) forwards; } body.anim .ref-result table.grid tbody tr.in { animation: rt-rowin .42s cubic-bezier(.2, .7, .2, 1) both; } body.anim .ref-result .fair, body.anim .ref-result .balance { animation: rt-rise .5s cubic-bezier(.2, .7, .2, 1) both; } @keyframes rt-rise { to { opacity: 1; transform: none; } } @keyframes rt-rowin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } } /* ミックス割り振り: 男女の文字色（出欠表の男女色 #3b82f6/#ec4899 と同系統・ 小さめ太字テキストの可読性のため1段濃い青/赤。アバター背景は JS が直接指定）。 .random-table-result 側は buildTableHtml のフォールバック表・凡例用。 */ .ref-result .g-m { color: #2563EB; font-weight: 700; } .ref-result .g-f { color: #DB2777; font-weight: 700; } .random-table-result .g-m { color: #2563EB; } .random-table-result .g-f { color: #DB2777; } /* 番号運用の2桁アバター（10〜30）: 円内に全桁収めるためフォント縮小（2026-07-05 本人報告） */ .ref-result .av.av-2d { font-size: 8px; letter-spacing: -0.03em; } /* 保存・共有 action dialog。 出欠表全画面(40)より前面、共通toast(60)と既存modal(100)より背面。 */ body.court-action-dialog-open { overflow: hidden; } .court-action-dialog-overlay { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; box-sizing: border-box; padding: 20px; background: rgba(15, 36, 24, .58); overscroll-behavior: contain; } .court-action-dialog { width: min(520px, 100%); max-height: min(720px, calc(100dvh - 40px)); overflow: auto; box-sizing: border-box; padding: 22px; border: 1px solid #DCE8D7; border-radius: 18px; background: #FFFFFF; color: #16241B; box-shadow: 0 24px 70px rgba(12, 46, 25, .28); font-family: "Zen Kaku Gothic New", system-ui, sans-serif; } .court-action-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .court-action-dialog-header h2 { margin: 0; color: #14532D; font-size: 20px; line-height: 1.4; } .court-action-dialog-close { flex: none; min-height: 38px; padding: 7px 11px; border: 1px solid #D7E4D2; border-radius: 10px; background: #FFFFFF; color: #49604F; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .court-action-dialog-description { margin: 10px 0 0; color: #5C6B5E; font-size: 14px; line-height: 1.65; } .court-action-dialog-live { min-height: 24px; margin-top: 12px; color: #31513A; font-size: 13px; font-weight: 700; line-height: 1.6; } .court-action-dialog-overlay[data-dialog-state="error"] .court-action-dialog-live { color: #A53A2A; } .court-action-dialog-actions { display: grid; gap: 10px; margin-top: 14px; } .court-action-dialog-option, .court-action-dialog-primary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; box-sizing: border-box; padding: 11px 16px; border: 1px solid #BFD4B9; border-radius: 12px; background: #FFFFFF; color: #14532D; font: inherit; font-size: 14px; font-weight: 800; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; } .court-action-dialog-option-pdf, .court-action-dialog-primary { border-color: #14532D; background: #14532D; color: #FFFFFF; } .court-action-dialog button:disabled { cursor: wait; opacity: .52; } .court-action-dialog :is(button, a):focus-visible, .court-action-dialog-live:focus-visible { outline: 3px solid #D6F45A; outline-offset: 3px; } .court-action-dialog[aria-busy="true"] .court-action-dialog-live::before { display: inline-block; width: .75em; height: .75em; margin-right: 8px; border: 2px solid #BFD4B9; border-top-color: #14532D; border-radius: 50%; content: ""; animation: court-action-dialog-spin .8s linear infinite; } @keyframes court-action-dialog-spin { to { transform: rotate(360deg); } } @media (max-width: 520px) { .court-action-dialog-overlay { align-items: end; padding: 12px; } .court-action-dialog { max-height: calc(100dvh - 24px); padding: 18px; border-radius: 16px; } } @media (prefers-reduced-motion: reduce) { .court-action-dialog[aria-busy="true"] .court-action-dialog-live::before { animation-duration: 1.8s; } }