/* ===================================================================== * CSS 目次 (詳細は MAP.md) * [CSS-0] 変数・base・共通 (.btn / ボタンの読み込み中 .btn.is-loading + .spinner) * [CSS-1] レイアウト (header / main / card / overlay / modal / drawer / toast) * [CSS-2] 台帳 (#pl-* / 並び替え .pl-sort / 表示設定 .pl-cols / レーンセル多段 .ln / 2026-09-15: 参加列 .col-partake / 2026-09-17: 旧チーム指定列 .desig は事前配置に一本化され撤去) * [CSS-3] 参加者 (#pt-*) * [CSS-4] 結果 (#rs-*) * [CSS-5] フォーム (#pm-* / #cfg-*) * ===================================================================== */ /* ===================== [CSS-0] 変数・base・共通 ===================== */ :root{ --bg:#0f1420; --bg2:#161d2c; --bg3:#1e2740; --line:#2b3550; --fg:#e7ecf5; --muted:#8c99b5; --accent:#5b8cff; --accent2:#3a6bff; --good:#3fbf7f; --warn:#e0a53a; --bad:#e0603a; --teamA:#4a8cff; --teamB:#ff7a59; --radius:12px; --shadow:0 8px 24px rgba(0,0,0,.35); --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans JP",sans-serif; --font-display:var(--font-body); } /* 2026-09-22: テーマ・書体（#cfg-drawer「表示設定」・uiPrefsStore）。html[data-theme]/[data-font]属性で このrootの色/フォント変数だけを差し替える方式＝コンポーネント側のCSSはvar()参照のみで変更不要。 */ :root[data-theme="hextech"]{ /* ヘクステック: 青×金 */ --bg:#0a1428; --bg2:#0f2044; --bg3:#1b3255; --line:#3a5a8f; --fg:#f0e6d2; --muted:#9aa8c4; /* 2026-09-23: 当初は#c8aa6e/#f0c94a（LoLクライアント風の明るい金）だったが、多くのボタンが この色を背景に白文字を乗せる作り（.pt-preset-add等）のため、明るすぎて白文字が読みにくかった。 金の色味は保ちつつ、白文字と十分なコントラストが出る濃さまで暗くした。 */ --accent:#8a6d1f; --accent2:#6e5619; --teamA:#0ac8b9; --teamB:#c8aa6e; } :root[data-theme="bloodmoon"]{ /* ブラッドムーン: 赤×黒 */ --bg:#120808; --bg2:#1c0d0d; --bg3:#2a1414; --line:#4a1f1f; --fg:#f5e6e6; --muted:#a98a8a; --accent:#e0334a; --accent2:#ff4d6a; --bad:#ff2e2e; --teamA:#4a8cff; --teamB:#e0334a; } :root[data-theme="arena"]{ /* アリーナ: ライト */ --bg:#f5f6fa; --bg2:#ffffff; --bg3:#e9ecf5; --line:#d3d9ea; --fg:#1a2030; --muted:#5a6480; --accent:#3a6bff; --accent2:#2851d6; --good:#1f9d5c; --warn:#c9860a; --bad:#c93a1f; --teamA:#3a6bff; --teamB:#e0603a; } :root[data-theme="emerald"]{ /* エメラルド: 緑×グレー */ --bg:#0f1a16; --bg2:#16241f; --bg3:#1e332b; --line:#2e4a3f; --fg:#e6f2ec; --muted:#8fae9f; /* 2026-09-23: --accentは元は--teamAと同じ#2fbf82（明るい緑）だったが、白文字を乗せるボタンの 背景として使うと明るすぎてコントラストが低かったため、少し濃い緑に調整（--teamAは表示用の アクセント色として据え置き、ボタン背景用の--accentだけ分離した）。 */ --accent:#1f8f61; --accent2:#22a06d; --teamA:#2fbf82; --teamB:#e0a53a; } :root[data-font="rounded"]{ --font-body:"Hiragino Maru Gothic ProN","BIZ UDGothic","M PLUS Rounded 1c","Segoe UI",sans-serif; } :root[data-font="mincho"]{ --font-body:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; } :root[data-font="esports"]{ --font-display:"Eurostile","Arial Narrow","Segoe UI",sans-serif; } :root[data-font="mono"]{ --font-body:"SFMono-Regular","Cascadia Code",Consolas,Monaco,"Noto Sans Mono JP",monospace; } *{box-sizing:border-box} /* 2026-09-18: ユーザー報告「D&Dでプレイヤーの枠に落とすと、半分幅のウィンドウでプレイヤー/事前配置の横並びが 縦積みになり、リロードしないと戻らない」。原因は`syncHeadActionsLayout`と同系統だが別物のバグ： `syncPreplaceLayout()`は`.pp-layout`の**幅**を実測して横並び⇔縦積みを判定するが、Windows版Chrome等の スクロールバーは表示領域の幅を実際に削る（オーバーレイでなく専有型）。境界付近の幅で、D&Dによる再描画が ページの縦の高さをほんの少し増やして縦スクロールバーが新たに出現すると、その分だけ`.pp-layout`の実測幅が 減り縦積みへ倒れる→縦積みになるとページがさらに縦に伸びる→スクロールバーが出続ける、という自己強化ループに 陥り、ウィンドウ幅自体は変えていないので再測定のきっかけ（resizeイベント）が来ず戻れなくなっていた。 `scrollbar-gutter:stable`でスクロールバー分の幅を常に一定に予約しておけば、縦スクロールバーの出現/消失で `.pp-layout`の実測幅が変動しなくなり、このループの発生源そのものを断つ。 */ html{scrollbar-gutter:stable} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--fg); font:14px/1.5 var(--font-body); padding-bottom:80px; } /* 2026-09-25: タブ「参加」はsyncJoinFitHeightNow()（[js/07-roster.js]）が.tab-actionsの位置を ウィンドウ内にきっちり収まるよう毎回実測調整しているが、body自体が持つこの80pxの下余白は どの子要素のgetBoundingClientRect()にも現れず、それでいてdocument.documentElement.scrollHeight には確実に加算されるため、計算に含めないと必ず80px前後の余分なページスクロールが残ってしまう （ユーザー報告：「全体が表示されている状態なのに、上下に少しだけスクロールする」）。かといって 単純にその分だけ一覧の高さを削ると、今度は逆に「下が空きすぎ」に見えてしまう（別のユーザー報告）。 この80pxは元々スクロールする他の画面向けの余白であり、常に画面内に収まる設計のタブ「参加」表示中 だけは不要なので、表示中だけ0にして一覧側の高さを削らずに済むようにする（syncJoinFitHeightNow()が #lt-joinの表示/非表示に応じてbody.jn-fit-activeを付け外しする）。 */ body.jn-fit-active{padding-bottom:0} h1,h2,h3,h4{margin:0;font-weight:700;font-family:var(--font-display)} h1{font-size:18px} h2{font-size:15px} h3{font-size:16px} h4{font-size:13px;color:var(--muted)} .muted{color:var(--muted);font-weight:400} .hint{font-size:12px} .hidden{display:none !important} sup{font-size:9px;color:var(--accent);margin-left:1px} hr{border:none;border-top:1px solid var(--line);margin:16px 0} /* 2026-09-18: ユーザー指摘「プレイヤー達/事前配置のスクロールバーの見た目が悪く浮いている」＝Windows既定の 白っぽい太いスクロールバーがダークテーマの箱の中で浮いて見える問題。アプリ全体（ページ本体＋.pp-players-list/ .pp-teams等の内側スクロール枠すべて）に細くダーク基調のスクロールバーを統一適用して馴染ませる。 トラックは透明＝どの背景色の箱に乗っても浮いて見えない。つまみは既定var(--line)（地味）・hoverでvar(--accent)。 */ html{scrollbar-width:thin;scrollbar-color:var(--line) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:var(--accent)} ::-webkit-scrollbar-corner{background:transparent} .btn{ appearance:none;border:1px solid var(--line);background:var(--bg3);color:var(--fg); padding:7px 12px;border-radius:9px;font-size:13px;cursor:pointer;font-weight:600; transition:filter .12s ease, background .12s ease; white-space:nowrap; /* 2026-09-28: ウィンドウを狭めた時にボタン自身の文字が2〜3行に折り返して崩れるのを防ぐ */ } .btn:hover{filter:brightness(1.15)} .btn:disabled{opacity:.4;cursor:not-allowed;filter:none} /* 2026-09-23: .btn.primaryは元々colorを明示せずbase(.btnのvar(--fg))任せだった。ダークテーマは--fgが 明るい色なので偶然読めていただけで、アリーナ(ライト)のように--fgが暗い色のテーマでは 塗り潰し背景(--accent2)の上で暗文字になり読みにくくなる。他の塗り潰しボタン(.pt-preset-add等)と 同じく明示的に白文字にする。 */ .btn.primary{background:var(--accent2);border-color:var(--accent);color:#fff} .btn.ghost{background:transparent} .btn.danger{background:transparent;border-color:var(--bad);color:var(--bad)} .btn.sm{padding:3px 8px;font-size:12px} /* 2026-09-23: 旧#cfe0ff/#ffd9cdはダークテーマの暗い背景(--bg3)を前提にした固定の薄色で、 アリーナ(ライト)のように--bg3が明るいテーマだと背景に溶けて見えなくなっていた（ユーザー報告）。 .btn.dangerと同じく、枠線と同じ変数(--teamA/--teamB)をそのまま文字色にすることで、 どのテーマでも背景(--bg3)との間に一定のコントラストが出るようにした。 */ .btn.team-a{border-color:var(--teamA);color:var(--teamA)} .btn.team-b{border-color:var(--teamB);color:var(--teamB)} /* 読み込み中ボタン（setBtnBusy）: disabled の減光は上書きしてスピナーをはっきり見せる */ .btn.is-loading:disabled{opacity:1;filter:none;cursor:wait} .spinner{ display:inline-block;width:13px;height:13px;margin-right:2px;vertical-align:-2px; border:2px solid currentColor;border-right-color:transparent;border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } /* ===================== [CSS-1] レイアウト ===================== */ #app-header{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 18px;border-bottom:1px solid var(--line); position:sticky;top:0;background:var(--bg);z-index:5; flex-wrap:wrap; /* 2026-09-28: ウィンドウを狭めるとhdr-left/hdr-rightが2行に折り返すようにし、 無理に1行へ収めようとして文字や配置が崩れるのを防ぐ（ユーザー報告） */ } #app-header .tag{font-size:10px;background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--muted);vertical-align:middle} /* 2026-09-23: #app-headerは.hdr-left（h1＋タブ）と.hdr-right（部屋バナー＋🏠/⚙️ボタン）の2要素だけにして justify-content:space-betweenで両端に振り分け、各ラッパー内部は自身のflexで横並びにする。 */ #app-header .hdr-left{display:flex;align-items:center;gap:16px;min-width:0;flex-wrap:wrap} /* 2026-09-28: hdr-right（部屋バナー＋🛠️/🏠/⚙️ボタン群）も同様にflex-wrap:wrapへ。狭い幅では部屋バナーの 下にボタン群が回り込む形で2行になり、個々のボタンが押し潰されて文字が折り返すのを防ぐ。 */ #app-header .hdr-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end} #app-header .hdr-btns{display:flex;gap:8px;flex-shrink:0} /* 2026-09-23: ユーザー要望「見出しの横にタブ」。localビュー内の切替（登録/参加/チーム分け）。 見た目は既存の.pt-order-switch/.pt-order-opt（セグメント式の切替ボタン）と同じパターンを流用。 */ .local-tabs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--bg)} .local-tab{border:none;background:transparent;color:var(--muted);font-size:12px;padding:5px 14px;cursor:pointer;white-space:nowrap;line-height:1.2;transition:background .18s ease,color .18s ease} .local-tab.on{background:var(--accent);color:#fff;font-weight:700} /* 2026-09-24: ユーザー要望「全画面にしたときにボーダーに合わせてサイズを変更できたりしない？ボーダーから 〇〇位の距離の上に全体枠のボーダーを持ってくるみたいな感じ」＝固定max-width:1000pxだと、画面を大きく （フルスクリーン等）した時に左右に大きな余白ができてしまっていた（例: 1920px幅で左右各460px前後が空白）。 `main`にはwidthの指定が無くブロック要素として既定でコンテナ幅いっぱいまで伸びる性質のため、max-widthを 大きく引き上げるだけで「ウィンドウが小さい間は今までどおり画面いっぱい＋固定余白（padding）」「ウィンドウが 非常に大きい時だけ、際限なく伸びきらないよう2000pxで頭打ちして中央寄せ」という挙動になる。 */ main{max-width:2000px;margin:0 auto;padding:18px} .view{display:none} .view.active{display:block} #view-local.view.active{display:flex;flex-direction:column;gap:16px} .card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:16px} .card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap} /* 2026-09-16: 「チーム分け設定」ヘッダ＝見出しの横に「チーム数」「詳細設定」（.pl-cols流用の開閉ボタン）、右端に「チーム分け実行」。 2026-09-16後続: 「チーム数」はボタンで開閉させず、常時見えるドロップダウンに変更（ユーザー要望）。 */ .pl-head-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pl-teams-inline{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap} .pl-teams-inline select{font-size:12px;padding:3px 6px;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px} /* 2026-09-18: ユーザー要望「チーム分け設定の題名の下に、おすすめ設定という小さな枠をおいてください。＋を○で 囲ったような記号をその中に用意して、押すとチーム分け設定を作って保存できるようになります」。 `.pl-head-left`は`flex-wrap:wrap`の横並びのため、この枠だけ`flex-basis:100%`にして自分の行だけで 折り返させる＝「他の項目より下の行」という配置をレイアウトの再構築なしで実現している。 2026-09-18後続: ユーザー要望「ウィンドウを半分にした時、題名の横にチーム数・詳細設定・プレイヤー情報更新・ チーム分け実行が来るように」で、この枠をDOM順序上`.pl-head-left`の**末尾**（詳細設定/プレイヤー情報更新/ チーム分け実行の後）へ移動。 2026-09-18後続後続: ユーザー要望「チーム分け実行はおすすめ設定の右側左端に出してほしい」で`#pt-run`を 枠の右隣へ一時的に移設したが、2026-09-18後続後続後続でユーザー報告「全画面にしたときに横に引っ付いてる のがダサい。右下端寄りにできる？」＝全画面だと枠が横に広がりボタンが遠く離れて間延びして見えるとのことで、 この配置は撤回。`#pt-run`は`.pl-head-left`から出して`.card-head`の直接の子（`.pl-head-left`の直後）に戻し、 `align-self:flex-end`だけ追加（`.card-head`は`justify-content:space-between`のため右端に寄り、 `align-items:center`を`#pt-run`だけ`align-self`で上書きして`.pl-head-left`の高さ全体の**下端**に揃う＝ 「右下端寄り」を絶対配置なしで実現）。`.pt-presets-box`は`flex-basis:100%`のまま`.pl-head-left`内の 独立行に戻った（`.pt-presets-row`は廃止）。 2026-09-18後続後続後続後続: ユーザー要望「チーム分け実行の一行上くらいにプレイヤー情報更新を持ってこれる？」で、 `#lv-reimport`（プレイヤー情報更新）を`.pl-head-left`（詳細設定の直後）から出し、新設`.pt-actions-col` （`#pt-run`と2人で1つの縦積みグループ）の中・`#pt-run`の直前へ移設。`.pt-actions-col`が`.card-head`の 直接の子として`.pl-head-left`の右に並び、`align-self:flex-end`+`margin-left:auto`は`#pt-run`個別ではなく このグループ全体に付け直した（2ボタンをまとめて同じルールで右下寄せする）。 2026-09-18後続後続後続後続後続: ユーザー報告「ウィンドウの幅を半分にしたときに、題名・チーム数・詳細設定・ おすすめ設定欄の横方向にプレイヤー更新やチーム分け実行が来ているようにしてほしい」＝`flex-wrap`のままだと、 `.pl-head-left`（おすすめ設定の枠を含み幅が広い）と`.pt-actions-col`（2ボタン）が同じ行に収まりきらない 中間幅（実測700px前後〜1000px弱）で`.pt-actions-col`だけ丸ごと下の行に折り返ってしまい、「横に来る」という 要望を満たせないケースがあった（`margin-left:auto`で右寄せ自体は直っていたが、折り返って“下”に来ることまでは 防げていなかった）。flex-wrapは「入りきらなければ折り返す」挙動そのものが前提のため、これをやめて `#pl-section .card-head`だけ**CSS Grid（2カラム）**に変更＝`.pl-head-left`（左カラム・残り幅いっぱい）と `.pt-actions-col`（右カラム・内容幅）を明示的に別カラムとして固定し、`.pl-head-left`内がどれだけ幅を 使っても`.pt-actions-col`は原理的に折り返れない（＝常に右に居続ける）ようにした。極端に狭い画面 （スマホ縦向き想定）では2カラムを維持するとかえって窮屈になるため、`@media (min-width:700px)`でのみ Gridを適用していたが、2026-09-18後続後続後続後続後続後続でユーザー要望「幅を小さくしたときに、詳細設定の 所まで被らないなら、詳細設定やおすすめ設定の真横で右端に出てほしい」＝700pxという固定値は根拠のない 決め打ちで、実際に見出し行（見出し＋チーム数＋詳細設定）とボタン列が本当に収まるかどうかとは無関係だった ため、`syncPreplaceLayout()`と同じ「実測して判定しclassを付け外す」方式に変更（`.pt-head-stacked`が 付いていなければGrid＝2カラム、それ以外はflex-wrapのまま下に落ちる）。 */ /* margin-left:auto は`.pt-head-stacked`のときのための保険（`.card-head`が`flex-wrap`で折り返し、 `.pt-actions-col`だけがその行に単独で残った場合、space-betweenは「同じ行に複数アイテムがある時だけ」 効くため素だとflex-start＝左寄せになってしまう。margin-leftを自動で埋めさせて右寄せを維持する）。 */ .pt-actions-col{display:flex;flex-direction:column;align-items:stretch;gap:6px;align-self:flex-end;margin-left:auto} #pl-section .card-head:not(.pt-head-stacked){display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:12px} #pl-section .card-head:not(.pt-head-stacked) .pt-actions-col{margin-left:0} .pt-presets-box{flex-basis:100%;border:1px solid var(--line);border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;gap:6px} .pt-presets-head{display:flex;align-items:center;gap:8px} .pt-presets-title{font-size:12px;font-weight:700;color:var(--muted)} .pt-preset-add{ flex:0 0 auto;width:20px;height:20px;border-radius:50%;padding:0; border:1px solid var(--accent);color:var(--accent);background:transparent; display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;cursor:pointer; } .pt-preset-add:hover{background:var(--accent);color:#fff} .pt-presets-list{display:flex;flex-wrap:wrap;gap:6px} .pt-presets-list:empty::before{content:'まだありません（＋で現在の詳細設定を保存できます）';font-size:11px;color:var(--muted)} .pt-preset-chip{display:inline-flex;align-items:center;background:var(--bg3);border:1px solid var(--line);border-radius:8px;overflow:hidden} .pt-preset-apply{background:transparent;border:none;color:var(--fg);font-size:11px;padding:3px 6px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px} .pt-preset-apply:hover{background:var(--accent2);color:#fff} .pt-preset-tag{font-size:9px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 4px;line-height:1.4} .pt-preset-apply:hover .pt-preset-tag{color:#fff;border-color:rgba(255,255,255,.5)} .pt-preset-del{background:transparent;border:none;border-left:1px solid var(--line);color:var(--muted);font-size:11px;padding:3px 6px;cursor:pointer;line-height:1} .pt-preset-del:hover{color:var(--bad)} .overlay{ position:fixed;inset:0;background:rgba(4,7,14,.6); display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:20;overflow:auto; } .modal,.drawer{ background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);width:100%;max-width:440px;padding:20px;display:flex;flex-direction:column;gap:12px; } .drawer{max-width:520px} .toast{ position:fixed;left:50%;bottom:24px;transform:translateX(-50%); background:var(--bg3);border:1px solid var(--line);border-radius:10px; padding:10px 16px;font-size:13px;box-shadow:var(--shadow);z-index:40; } /* 2026-09-18: 「希望レーンを有効化」の上限超過トーストで、要点（事前配置／超過したレーン名／上限人数／超えている） だけ大きく見せるための強調用クラス。toast()にHTMLを渡す場合だけ使う想定（通常のトーストはtextContentのまま）。 */ .toast-em{font-size:1.3em;font-weight:700} /* ===================== [CSS-2] 台帳 ===================== */ /* 2026-09-16: 「チーム分け設定」＝左=プレイヤー(ベンチ風カード一覧)・右=事前配置(詳細仕様は後日)の2カラム。 2026-09-16後続後続: 台帳表⇔事前配置の切替タブは廃止し、常時この事前配置ビューのみを表示する。 */ /* 2026-09-16後続: 結果画面のチームカード＋ベンチ（.rs-layout/.rs-cards-col/.rs-bench-col）と同じ配置パターンに変更。 左=プレイヤー枠(可変幅・.rs-cards-col相当)、右=事前配置枠(内容にフィットする幅・.rs-bench-col相当・スクロール中も 上部に追従するsticky)。 */ /* 2026-09-16後続後続後続後続: ユーザー要望「プレイヤー枠を小さく・事前配置を大きくしてほしい」。 プレイヤー枠を可変(1fr)→固定幅(220px。旧事前配置枠のmin-widthと同じ値)に、事前配置枠を内容フィット(auto)→ 可変(1fr)に入替＝残り幅をすべて事前配置側が受け取るようにした。 */ /* 2026-09-16後続後続後続後続後続: ユーザー報告「プレイヤーの枠が狭くて名前が見えない。全画面の時は半々くらいに」。 固定220pxだと名前が省略されやすかったため`1fr 1fr`（常に半々）に変更。 */ /* 2026-09-16後続後続後続後続後続後続: ユーザー報告「ウィンドウを最大の半分にした時の大きさはちょうどよい。 全画面にした時はプレイヤーの枠が余っているので、名前が日本語で6文字表現できるくらいのサイズで良い」。 `1fr 1fr`だと画面が広いほどプレイヤー枠も際限なく広がってしまっていた（全画面で名前欄が無駄に余る原因）ため、 プレイヤー枠を固定幅（`.pp-nm-name`と同じフォントで日本語6文字を実測≒84px＋レーン列5列(32px×5=160px)＋ `.pp-players`の左右パディング(20px)等 ≒ 280px）に変更、事前配置枠(1fr)だけが画面の余り幅を全部受け取るように した。半分幅の時にどのみち十分収まっていたサイズ感（狭すぎて名前が見えない、ということはない幅）を、 画面幅に関わらず一定にした形。 */ /* 2026-09-17: ユーザー要望「プレイヤー達の枠と事前配置の枠の上、チーム分け実行との間に横長の枠を作ってほしい。 本人希望レーンという名前で、希望レーンを出した人の名前をそのレーンのアイコンの下に表示」。 .pp-layout（プレイヤー/事前配置の2カラム）の直前・横いっぱいに配置する独立ブロック。 2026-09-17後続: ユーザー要望「題名の横にレーンアイコンを並べて、その下にプレイヤーを並べて。名前も『本人希望』に」。 2026-09-17後続後続: ユーザー要望「折りたためるようにする。デフォルトは折りたたまれている状態」。 `
本人希望...`のネイティブdetails/summaryに変更（open属性なし ＝初期状態は閉。既存の.pl-cols/.rs-benchと同じ仕組み）。タイトルはsummary側に固定表示となったため、 `.pref-lanes`本体はレーンアイコン×5＋名前リスト×5だけのシンプルな5列グリッドに戻した（タイトル分の auto列・空欄セルは不要になった）。#pref-lanesの中身だけをinnerHTMLで差し替える仕組みは変わらないため、 .rs-benchのような「再描画のたびopen属性を保存/復元する」手当ては不要（
自体は再生成されない）。 */ .pref-lanes-box{border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:8px} .pref-lanes-box summary{cursor:pointer;font-size:13px;font-weight:700;list-style:revert;display:flex;align-items:center;gap:8px;padding-right:78px} .pref-lanes-box[open] summary{margin-bottom:8px} /* 2026-09-18: ユーザー要望「表示設定の場所を本人希望の枠の中の右上へ変えてほしい」。summary内には入れ子の
を置けない（のコンテンツモデルはphrasing content限定）ため、position:absoluteで枠の右上へ 重ねて配置する別要素として実装。position:relativeは`.pref-lanes-box`自身（
）ではなく、それを包む `.pref-lanes-wrap`（ただのdiv）に付与する＝
を絶対配置の基準にすると、モダンブラウザの開閉アニメーション 対応（closed状態でも中身のサイズを裏で計測する仕組み）の影響で、top指定どおりの位置に来ない不具合が実機で 発生したため（div一枚挟むだけで解消）。summary側にpadding-rightを足して、閉じている間のチップ一覧 (.pref-lanes-summary・syncSummaryFitでel.clientWidthを実測)がバッジの下に潜り込まないよう先に幅を確保しておく。 */ .pref-lanes-wrap{position:relative} .pp-cols-corner{position:absolute;top:10px;right:10px;z-index:3} .pp-cols-corner[open]{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:8px; max-width:min(300px,calc(100vw - 40px));box-shadow:var(--shadow)} .pref-lanes{display:grid;grid-template-columns:repeat(5,1fr);gap:4px 8px;align-items:center} .pref-ic{font-size:10px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:2px} .pref-names{display:flex;flex-direction:column;gap:2px;align-items:center;width:100%;min-width:0} .pref-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .pref-empty{font-size:11px} /* 2026-09-18: 「表示設定」（プレイヤー枠と共通のppColsPref）を「本人希望」/「事前配置」のチップにも適用。 .pref-chip-sub/.pp-chip-sub＝今日の試合数・各レーンの数値項目をチップ内に小さく追記する用（アイコンは 名前の前・数値系は名前の後ろにまとめる）。「どこオプ」枠（lane==='flex'）はレーン非依存のtodayGames以外 非表示（特定のレーンが無いため、レーン依存の値を出すと誤解を招く）。 */ .pref-chip-sub,.pp-chip-sub{font-size:9px;color:var(--muted);white-space:nowrap} /* 2026-09-18: ユーザー要望「本人希望の欄を閉じているときに、隙間に表示できるだけ、希望レーンを指定している プレイヤーをレーンアイコン＋名前で表示してほしい」。summary行の「本人希望」の右側に余っている隙間を使い、 閉じている間だけ希望者チップを並べる。開いている間は中身（.pref-lanes）と二重表示になるため非表示にする。 幅に入りきらない分は syncPrefLanesSummary()（JS）で丸ごと非表示にし、チップが半端に切れて見えないようにする。 */ .pref-lanes-summary{flex:1;min-width:0;overflow:hidden;display:flex;flex-wrap:nowrap;gap:6px;font-weight:400} .pref-lanes-box[open] .pref-lanes-summary{display:none} .pref-sum-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:400;color:var(--muted);background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:1px 6px 1px 4px;white-space:nowrap} .pref-sum-chip .lane-ic{width:12px;height:12px} /* 2026-09-18: 「本人希望」「事前配置」のsummaryチップが幅に収まりきらない時に末尾へ出す「まだ表示されていない 人がいる」マーカー（syncSummaryFit参照）。 */ .pref-sum-more{flex:0 0 auto;color:var(--muted);font-weight:700;font-size:13px;line-height:1;padding:0 1px} .pp-layout{display:grid;grid-template-columns:280px 1fr;gap:12px;align-items:start;margin-top:8px} .pp-players{min-width:0} .pp-area{position:sticky;top:70px;min-width:220px} .pp-players,.pp-area{border:1px solid var(--line);border-radius:10px;padding:10px} /* 2026-09-16後続後続: ユーザー要望「半分くらいの幅でも横並びのままにしてほしい」で、固定640pxブレークポイントを syncPreplaceLayout()（実際に必要な幅を計算するJS判定。syncCardGridLayoutと同じ考え方）に置き換え。 */ .pp-layout.pp-stack{grid-template-columns:1fr} .pp-layout.pp-stack .pp-area{position:static} /* 2026-09-17: ユーザー要望「プレイヤー達と事前配置も折りたためるようにして」。.pref-lanes-boxと同じ
/パターンに変更（既定はopen＝これまでどおり常時表示のまま、折りたたみ可能になっただけ）。 */ .pp-players summary,.pp-area summary{margin:0;font-size:13px;font-weight:700;cursor:pointer;list-style:revert} .pp-players[open] summary,.pp-area[open] summary{margin-bottom:8px} .pp-players-list{max-height:60vh;overflow:auto} /* 2026-09-18: ユーザー要望「事前配置が閉じられているときに、本人希望のように省力した形で表示してほしい。 例：Any レーンマーク プレイヤー名／A レーンマーク プレイヤー名, C レーンマーク プレイヤー名」。 `.pref-lanes-summary`（本人希望）と同じ「summaryの隙間にチップを詰める」仕組みを`.pp-area`にも追加。 チップ自体の見た目（`.pref-sum-chip`）は共用し、チーム名ラベル用に`.pref-sum-team`だけ追加する。 */ .pp-area summary{display:flex;align-items:center;gap:8px} .pp-area-summary{flex:1;min-width:0;overflow:hidden;display:flex;flex-wrap:nowrap;gap:6px;font-weight:400} .pp-area[open] .pp-area-summary{display:none} .pref-sum-team{font-weight:700} /* 2026-09-17: ユーザー要望「プレイヤー達の枠にソート機能を追加。ランク・Top〜Supのそれぞれの得意度・試合数」。 参加者一覧（.pv-sort/#pv-sort等）と同じ「並びキー＋レーン得意度の時だけ出すレーン選択＋方向反転ボタン」の パターンを流用。内に置くとクリックがdetailsの開閉と競合するため、中身側（の外・ 一覧の直前）に配置。 */ .pp-sort{display:flex;gap:6px;align-items:center;margin:0 0 8px;font-size:12px;flex-wrap:wrap} .pp-sort label{color:var(--muted);white-space:nowrap} .pp-sort select{font-size:12px;padding:3px 6px;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px} .pp-sort #pp-sort-dir{flex:0 0 auto;min-width:34px;font-size:13px;line-height:1} /* 2026-09-17: 「事前配置」
の中身側（の外）にリセットボタン。内に置くと .pp-sortと同じ理由（クリックがdetailsの開閉と競合）で配置できないため。 */ #pp-reset{display:block;margin:0 0 8px} /* 2026-09-23・LoLクライアント風UI刷新Phase D: 「プレイヤー」一覧を、台帳のような列そろえテーブル （旧: display:contentsで全行を1グリッドに相乗りさせる方式）から、1人=1枚の独立したカードへ再構成した。 カード同士で列を揃える必要が無い分、.pp-rowは実体を持つ通常の箱に戻り、draggableもカード自身に一本化 （旧: .pp-nm/各レーンセルに個別付与）。ドラッグ判定(prePlaceDragSourceOf)はclosest()で.pp-row[data-pp-id]を 辿るだけなのでJS側の変更は不要だった。 */ .pp-table{display:flex;flex-direction:column;gap:8px} .pp-row.pp-card{ display:flex;flex-direction:column;gap:6px;cursor:grab; background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px; } .pp-row.pp-card.pp-drag-src{opacity:.4} .pp-card-head{display:flex;align-items:flex-start;gap:8px} /* アバターはプレイヤー個人の画像が存在しないための代替表示（avatarPlaceholderHtml参照）。 */ .pp-avatar{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;color:#fff;line-height:1} .pp-card-id{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px;overflow:hidden;flex:1 1 auto;min-width:0} .pp-nm-name{font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .pp-nm-sub{font-size:11px;white-space:nowrap} /* M6（2026-09-22・Phase C）: 名前行の参加チェック・編集ボタン・RiotID表示 */ .pp-nm-head{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%} .pp-nm-head .pp-nm-name{flex:1 1 auto;min-width:0} .pp-partake-chk{flex:0 0 auto;width:14px;height:14px;accent-color:var(--accent);cursor:pointer} .pp-partake-chk:disabled{cursor:default;opacity:.5} .pp-edit-btn{flex:0 0 auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:0 2px} .pp-edit-btn:hover{color:var(--accent)} .pp-nm-riotid{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block} .pp-sel-chk{flex:0 0 auto;width:15px;height:15px;accent-color:var(--bad);cursor:pointer} .pp-card-id.pp-nm-selected{background:color-mix(in srgb,var(--bad) 16%,transparent);border-radius:6px} .pp-chip-edit{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:0 2px;flex:0 0 auto} .pp-chip-edit:hover{color:var(--accent)} .pp-lncell.pp-pref{background:color-mix(in srgb,var(--accent) 14%,var(--bg3));font-weight:700} /* 2026-09-19: 「プレイヤー達」枠でのみ見学・一回休みを名前下に表示＋カード全体を色分け（表示設定でOnOff）。 カードが実体を持つ箱になった（Phase D）ため、色は直接.pp-row.pp-cardへ適用する。 .pp-prefより後に書くことで、優先レーンセルと重なった場合もこの色を優先（1枚のカードとしての一体感を保つ）。 */ .pp-nm-status{font-size:10px;font-weight:700;line-height:1.3} .pp-nm-status-rest{color:var(--warn)} .pp-nm-status-out{color:var(--bad)} .pp-row.pp-card.pp-row-rest{background:color-mix(in srgb,var(--warn) 12%,var(--bg2))} .pp-row.pp-card.pp-row-out{background:color-mix(in srgb,var(--bad) 12%,var(--bg2))} /* 2026-09-22: 「これは自分です」claim（個人ログインではなく端末が覚えるだけの軽量な識別）。 .pp-row-mineは他のpp-row-*状態色と重ねられるよう、そちらより後に書いて優先させる。 */ .pp-row.pp-card.pp-row-mine{background:color-mix(in srgb,var(--accent) 18%,var(--bg2));border-color:var(--accent)} .pp-nm-mine-tag{font-size:10px;font-weight:700;color:var(--accent);white-space:nowrap} .pp-nm-lock-tag{font-size:10px;line-height:1} .pp-claim-btn{flex:0 0 auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:0 2px} .pp-claim-btn:hover{color:var(--accent)} /* 2026-09-19後続後続後続: 「俺より強いやつに会いに来た」(boostDiv)。プレイヤー達は過去最高ランク行の末尾に 矢印だけ続ける（.pp-nm-boost-inline）、事前配置は名前の下、結果カード/ベンチは名前の文字列の手前に合体 （表示設定でOnOff・既定ON）。 */ .pp-nm-boost-inline{color:var(--accent);font-weight:700} /* 2026-09-18: 「プレイヤー」表示設定でランクポイント/勝敗ポイント/合計ポイント/勝率/強さを追加表示できるように。 .pp-lncell が1レーン分の枠（旧: アイコンのspan単体）、中に.pp-ln（アイコン行・数値行）を縦積み。 #pl-table td.lane の .ln1/.ln2 スタックと同じ考え方（台帳の表示設定と統一感を持たせる）。 2026-09-23・Phase D: カード内で複数並ぶバッジとして見えるよう、背景付きの丸みのある小箱に変更。 */ .pp-card-lanes{display:flex;gap:4px;flex-wrap:wrap} .pp-lncell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; min-width:30px;padding:3px 4px;border-radius:6px;background:var(--bg3)} .pp-ln-pt{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .pp-ln-empty{color:var(--muted)} /* 2026-09-16後続後続後続: 事前配置エリアに「Any/TeamA〜J」の枠（骨格・D&D未配線）を追加。 .pp-slot-drop が実際のドロップ先（data-pp-team/data-pp-lane）＝将来のD&D実装はこの要素を対象にする想定。 */ /* 2026-09-16後続後続後続後続: 事前配置枠が.pp-layoutの可変(1fr)列になり横幅に余裕が出たため、 縦1列積み(flex)→折返しグリッド(auto-fill)に変更＝幅が広い時はチームカードが複数列に並び、 狭い時（縦積みモード等）は1列に自然に戻る。 */ /* 2026-09-16後続後続後続後続後続: ユーザー要望「Anyは横長、その下にTeamA〜Jが2列くらいで並ぶように」。 auto-fillの折返しグリッドをやめ、Any単体はフルwidthのカード（.pp-teamsのflex子として自然に横いっぱい）、 TeamA〜Jだけを別の.pp-team-grid（常に2列固定）にまとめる構成に変更。 */ .pp-teams{max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:8px} .pp-team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .pp-team{border:1px solid var(--line);border-radius:8px;padding:8px} .pp-team-any{border-color:var(--accent)} .pp-team-head{font-weight:700;font-size:12px;margin-bottom:6px} .pp-slot-row{display:flex;align-items:center;gap:6px;margin-bottom:4px} .pp-slot-row:last-child{margin-bottom:0} .pp-slot-lane{flex:0 0 34px;font-size:9px;color:var(--muted);display:flex;align-items:center;gap:2px;line-height:1.1} .pp-slot-drop{flex:1;min-width:0;border:1px dashed var(--line);border-radius:6px;min-height:22px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:3px;padding:2px 4px} .pp-slot-drop.pp-slot-multi{min-height:34px} .pp-slot-flex{flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:6px;margin-top:2px} .pp-slot-note{flex:0 0 100%;font-size:9px;color:var(--muted)} /* 2026-09-16後続: ドロップ枠に入った人＝チップ表示。.pp-drop-hover はドラッグ中に対象枠の上に来た時のハイライト。 */ .pp-slot-drop.pp-drop-hover{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)} .pp-players.pp-drop-hover{border-color:var(--accent)} .pp-chip{display:inline-flex;align-items:center;gap:2px;max-width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:1px 2px 1px 6px;font-size:10px;line-height:1.6;cursor:grab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 2026-09-19後続: 「俺より強いやつに会いに来た」を名前の下に表示するとき用（.pp-chipは横並びinline-flexなので、 名前とこの行だけを縦積みのサブflexにして「下」に見せる。表示設定OFF時はnameBlockが素のテキストになり無関係）。 */ .pp-chip-nm{display:flex;flex-direction:column;line-height:1.15;min-width:0} .pp-chip-boost{font-size:8px;color:var(--accent);font-weight:700;white-space:nowrap} .pp-chip-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:0 3px;flex:0 0 auto} .pp-chip-x:hover{color:var(--bad)} .pp-chip.pp-chip-mine{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--bg3))} .pp-chip-claim{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:0 2px;flex:0 0 auto} .pp-chip-claim:hover{color:var(--accent)} .pp-chip.pp-drag-src{opacity:.4} .table-wrap{overflow-x:auto} /* 折りたたみ: 高さを約7名分に制限し、中を縦スクロール。ヘッダは sticky で残す */ .table-wrap.pl-collapsed{overflow-y:auto;max-height:300px} .table-wrap.pl-collapsed #pl-table thead th{position:sticky;top:0;z-index:2;background:var(--bg2);box-shadow:inset 0 -1px 0 var(--line)} #pl-table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap} #pl-table th,#pl-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:center} #pl-table th{color:var(--muted);font-weight:600;font-size:11px} #pl-table td.nm{text-align:left;font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis} #pl-table td.lane{color:var(--muted);font-size:12px} #pl-table td.lane .g-ic{font-size:13px;color:var(--fg)} #pl-table td.lane.g-main .g-ic,#pl-table td.lane.g-sub .g-ic{color:var(--good)} /* 「今日の参加」で優先レーンを表明した人：そのレーンのアイコン＋ランクを枠で囲って強調 */ #pl-table td.lane.ll-on{background:color-mix(in srgb,var(--accent) 12%,transparent)} #pl-table td.lane .ll-box{display:inline-flex;align-items:center;gap:3px;padding:1px 7px; border:1px solid var(--accent);border-radius:999px;color:var(--fg);font-weight:600;line-height:1.5} #pl-table td.rk{font-variant-numeric:tabular-nums} #pl-table td.wl{font-variant-numeric:tabular-nums} /* ランク列 / W–L列: 2値のときは1値=1行で縦に積む */ #pl-table td.rk .cl,#pl-table td.wl .cl{display:block} #pl-table td.rk.multi,#pl-table td.wl.multi{line-height:1.35} #pl-table td.rk .r-pt,#pl-table td.wl .wl-wr{color:var(--muted);font-size:11px} #pl-table td.gt{font-variant-numeric:tabular-nums;color:var(--muted)} #pl-table td.ps{font-variant-numeric:tabular-nums;color:var(--muted)} #pl-table td.ps .ps-bar{display:inline-block;height:5px;border-radius:3px;background:var(--accent);vertical-align:middle;margin-left:5px;min-width:2px} /* レーンセルの多段スタック（表示設定でレーン別 勝敗/勝率/勝率Pt を足したとき） */ #pl-table td.lane.lane-multi{white-space:normal;line-height:1.35} #pl-table td.lane .ln{display:block} #pl-table td.lane .ln1{white-space:nowrap} #pl-table td.lane .ln2{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums} #pl-table td.lane .ln-empty{color:var(--muted)} #pl-table td.lane .ln-hist{letter-spacing:1px} #pl-table td.lane .ln-hist .hm{font-size:10px} #pl-table td.lane .ln-hist .hw{color:var(--good)} #pl-table td.lane .ln-hist .hl{color:var(--bad)} #pl-table td.lane .ll-box.ll-col{flex-direction:column;align-items:center;gap:1px;line-height:1.3} /* 2026-09-16: 自評マークのボタン化（台帳・チーム結果カード・ベンチ共通）。押すと固定レーン(pinLane)をトグル。 希望レーン(lockedLane・.ll-on/--accent)とは別の概念なので、固定レーンは --warn で見分けられるようにする。 */ .gradebtn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;line-height:1} .gradebtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .gradebtn.pin-on{outline:2px solid var(--warn);outline-offset:2px;border-radius:50%} #pl-table td.lane.pin-on{background:color-mix(in srgb,var(--warn) 14%,transparent)} .pl-sort{display:flex;gap:6px;align-items:center;font-size:12px;flex-wrap:wrap} .pl-sort label{color:var(--muted);white-space:nowrap} .pl-sort select{font-size:12px;padding:3px 6px;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px} .pl-sort #pl-sort-dir{flex:0 0 auto;min-width:34px;font-size:13px;line-height:1} /* 「表示設定」ディスクロージャ（.jv-host / .pv-key パターン） */ .pl-cols{font-size:12px;color:var(--muted)} .pl-cols>summary{cursor:pointer;list-style:none;padding:3px 8px;border:1px solid var(--line);border-radius:8px; background:var(--bg3);color:var(--fg);font-weight:600;white-space:nowrap} .pl-cols>summary::-webkit-details-marker{display:none} .pl-cols[open]{flex-basis:100%;order:99;display:flex;flex-direction:column;gap:8px;margin-top:6px} .pl-cols-body{display:flex;flex-wrap:wrap;gap:12px} .pl-cols-grp{margin:0;border:1px solid var(--line);border-radius:8px;padding:6px 10px;display:flex;flex-direction:column;gap:3px} .pl-cols-grp legend{font-size:11px;color:var(--muted);padding:0 4px} .pl-cols-grp label{display:flex;align-items:center;gap:5px;cursor:pointer;color:var(--fg);white-space:nowrap} .pl-cols-grp input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent)} /* M6（2026-09-22・Phase C）: 台帳「参加」列＝プルダウン→単純なチェックボックスに戻す（真偽値のみ・ 部屋のパスワードを知っている人=canEdit()なら誰でも編集可・部屋のpartakeへ同期）。 */ #pl-table td.col-partake input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer} #pl-table td.col-partake input[type=checkbox]:disabled{opacity:.5;cursor:default} #pl-table td.col-sel,#pl-table th.col-sel{width:24px} #pl-table td.col-sel input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer} /* 行クリックで編集（RiotIDは名前の下に小さく表示）。チェックボックス自体のクリックは編集を開かない（JS側で判定） */ #pl-tbody tr.pl-editable{cursor:pointer} #pl-tbody tr.pl-editable:hover td{background:color-mix(in srgb,var(--accent) 8%,transparent)} #pl-tbody td.nm .pl-riotid{display:block;font-size:11px;color:var(--muted)} #pl-tbody tr.pl-selected td{background:color-mix(in srgb,var(--accent) 16%,transparent)} /* ===================== [CSS-3] 参加者 ===================== */ .pt-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #pt-count{font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted); border:1px solid var(--line);border-radius:8px;padding:4px 10px} #pt-count.ok{color:var(--good);border-color:var(--good)} /* 2026-09-17: ユーザー要望「チーム分け設定の下にある、今日の参加者を削除」で「今日の参加者」カード（見出し・ 枠）を撤去。#pt-count/#pt-clear/#pt-msg（人数の可否・チーム分け実行が無効な理由等の有用な情報）は idそのままチーム分け設定カードのcard-head直下へ移設（新規実装なし・JSは無改修）。 2026-09-17後続: ユーザー要望「〇〇人選択解除の部分を見えなくして」で、この.pt-status（#pt-count/#pt-clear） だけを.hiddenで非表示に（#pt-msgは「あと◯人」等チーム分け実行が無効な理由を説明する情報のため対象外＝ 引き続き表示）。renderParticipants()はJS側から直接#pt-count/#pt-clearのDOMを書き換えているだけで 無改修（要素はDOMに残るがdisplay:noneで見えないだけ）。 */ .pt-status{display:flex;align-items:center;gap:10px;margin-top:8px} /* 2026-09-23: 「参加」タブ＝3カラム候補者管理画面。.pp-layout（280px 1fr）と同じ考え方で、 左パネル(.jn-detail)だけ固定幅・中央/右(.jn-col)は均等（1fr 1fr）。カードの見た目はPhase Dの .pp-row.pp-cardと揃えるが、事前配置のD&D判定と衝突しないようクラス・スコープを独立させている。 */ /* 2026-09-23後続: 「参加」タブのカード表示設定コーナー。.pref-lanes-wrap/.pp-cols-cornerと同じ考え方 （
を絶対配置の基準にすると開閉アニメーションでズレるため、包む.jn-toolbarにposition:relativeを持たせる）。 2026-09-25訂正: 「ラベルが唯一の兄弟要素で高さを確保するので、コーナー自体には高さ指定不要」としていたが 誤りだった。.pp-cols-corner（[CSS]line282）は`position:absolute;top:10px`＋ボタン自身の高さ(約25px)で 計35px前後必要なのに対し、ラベル(.jn-toolbar-label、12px)基準のmin-height:24pxでは足りず、ボタンが .jn-toolbar自身の下端からはみ出して下の.jn-layout（参加候補/全プレイヤーの見出し行）に重なって見えて いた（ユーザー報告：「表示設定がずれている」＝ボタン自体の位置がおかしい）。ボタンの実際の必要高さに 合わせてmin-heightを引き上げ、はみ出しを解消する。 */ .jn-layout{display:grid;grid-template-columns:260px 1fr 1fr;gap:12px;align-items:start;margin-top:8px} /* 2026-09-28: ユーザー要望「詳細の枠(左パネル・固定260px)の方が参加候補/全プレイヤー(1fr 1fr)より大きく なってしまう時は、全体のサイズが等倍(3列均等)になるようにしてほしい」。js/07-roster.jsのsyncJoinLayoutCols() が実測して付け外す（固定ブレークポイントではなく、実際に260pxが1fr側を上回るかどうかで判定）。 */ .jn-layout.jn-layout-eq{grid-template-columns:1fr 1fr 1fr} .jn-detail{position:sticky;top:70px;border:1px solid var(--line);border-radius:10px;padding:12px;min-height:120px} .jn-detail-empty{color:var(--muted);font-size:13px} .jn-detail-name{font-weight:700;font-size:15px} .jn-detail-riotid{font-size:11px;color:var(--muted)} .jn-detail-lock-tag{font-size:11px} /* 2026-09-25: .jn-layout の1fr 1fr（参加候補/全プレイヤー）は中央列の左端がウィンドウ幅によって 非整数のCSS px位置になりやすく、既定の1px border(var(--line)、地味な色)がアンチエイリアスで 薄まって実質見えなくなることがある（右列はたまたま整数位置に来て濃く見える＝2列の見た目が揃わない というユーザー報告）。太さを2pxにし、colorをvar(--line)そのものではなくvar(--fg)寄りに少し 明るくした color-mix にすることで、どちらの列でも安定して視認できるようにした（テーマ変数のみ使用 のためどのテーマでも自然に馴染む）。 */ .jn-col{border:2px solid color-mix(in srgb, var(--line) 65%, var(--fg) 35%);border-radius:10px;padding:10px;min-width:0} /* 2026-09-23後続: ユーザー要望「参加候補と全プレイヤーのスライドバーを消さないようにしてほしい。カードの横サイズが 変わって使いづらい」＝overflow:autoだとコンテンツの高さが60vhを跨ぐたびスクロールバーの出現/消失で使える横幅が 変わりカードが伸び縮みしていた。overflow-y:scrollで常時スクロールバー分の幅を確保し、scrollbar-gutter:stableで オーバーレイ型スクロールバー環境でも同様に幅を固定して横サイズのガタつきを防ぐ。 */ .jn-list{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable} .jn-card{display:flex;flex-direction:column;gap:4px;cursor:grab; background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:6px 8px} .jn-card.jn-selected{border-color:var(--accent)} .jn-card.jn-drag-src{opacity:.4} .jn-card-head{display:flex;align-items:center;gap:6px} .jn-card-head .pp-avatar{width:22px;height:22px;font-size:9px} .jn-card-name{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0} .jn-card-lock-tag{font-size:10px;line-height:1;margin-right:2px} .jn-empty{color:var(--muted);font-size:12px;padding:8px 0} /* 2026-09-23後続: ユーザー要望「全プレイヤーで、アイコンと名前のみ／2列で表示できるようにしてほしい」。 .jn-list（#jn-mid/#jn-right共通のクラス）にクラスが付いたときだけ効くスコープ。 カードHTML自体は変えず、ランク/今日の試合数(.jn-card-meta)とレーン行(.jn-card-lanes)をCSSで隠すだけ。 2026-09-24さらに後続: ユーザー要望「参加候補にも同じ機能を」で、#jn-right専用スコープから .jn-list共通スコープへ変更（#jn-mid/#jn-rightそれぞれ独立した設定・クラス付け外しなので見た目には影響なし）。 */ .jn-list.jn-compact .jn-card-meta, .jn-list.jn-compact .jn-card-lanes{display:none} /* 2026-09-23さらに後続: ユーザー報告「2列がきれいに出るようにしてほしい」＝CSS Gridの既定 min-width:autoにより、名前が長いカードが1つあるとそのグリッド列（トラック）がその分だけ広がり、 2列の幅が不揃いになっていた（.rg-home-rowで踏んだのと同じ「グリッドの意図しない拡幅」）。 .jn-cardにmin-width:0を明示してこの拡幅を止める＝はみ出す名前は子の.jn-card-nameが省略記号で 省略する（ユーザー許可済み：「名前は省略してもらってよい」）。 */ /* 2026-09-25後続: 参加候補の人数が少ない状態でsyncJoinFitHeightNow()が.jn-listの高さを （全プレイヤー列に下端を揃えるため）実際のカード分より大きく伸ばすと、CSS Gridの既定 align-items:stretchにより、余った1行だけのグリッド行いっぱいにカードの枠線まで縦に伸びて しまう（ユーザー報告：「参加候補の中のプレイヤーのボーダーラインが参加候補の下に合わせて 伸びてしまっている」）。align-items:startでカードを自然な高さのまま行の先頭に留める。 */ /* 2026-09-25さらに後続: align-items:startだけではカード個々の伸びは止まるが、複数行ある場合は grid既定のalign-content:stretch（normal相当）で行同士の間隔が均等に広がり「等間隔配置」に 見える不具合が別途あった（ユーザー報告：「参加候補のプレイヤー達が等間隔配置されているので、 出来るだけ左上に詰めて配置してほしい」）。align-content:startを追加し、行の集合を先頭（左上）へ 詰め、余ったスペースは最後の行より下の空白としてまとめる。 */ .jn-list.jn-cols-2{grid-template-columns:1fr 1fr} .jn-list.jn-cols-3{grid-template-columns:1fr 1fr 1fr} .jn-list.jn-cols-4{grid-template-columns:1fr 1fr 1fr 1fr} /* 2026-09-25さらに後続: ユーザー要望「三列化四列化も出来るようにしてほしい」で2列と同じ仕組みを 3列・4列へ拡張。align-items/align-content/.jn-card{min-width:0}は列数に関わらず共通のため、 .jn-cols-2〜.jn-cols-4をまとめて1つのセレクタで宣言する（個別の列数だけgrid-template-columnsで上書き）。 */ .jn-list.jn-cols-2,.jn-list.jn-cols-3,.jn-list.jn-cols-4{display:grid;align-items:start;align-content:start} .jn-list.jn-cols-2 .jn-card,.jn-list.jn-cols-3 .jn-card,.jn-list.jn-cols-4 .jn-card{min-width:0} /* 「1列/2列/3列/4列」の切替アイコン（.pt-order-switch/.pt-order-optを流用し見た目を統一）。バーの本数で 列数を表現＝Unicode記号の実測サイズ差（過去の「○」問題）を避けて確実に同じ見た目にする。 */ .jn-col-icon{display:flex;gap:2px;width:16px;height:12px} .jn-col-icon i{flex:1;display:block;background:var(--muted);border-radius:1px} .pt-order-opt.on .jn-col-icon i,.jn-seg-opt.on .jn-col-icon i{background:#fff} /* 2026-10-02: 「参加」タブのレイアウト整理。高さ28pxの操作部品（検索・select・セグメント・一括ボタン）に統一し、 両列とも同じ3段の見出し（①タイトル・人数・一括 ②検索・並び替え ③詳細/簡易・列数）。カードは 1段目=アバター・名前・参加スイッチ、2段目=チップ（ピーク/今日/通算）＋右端にOP.GG、その下に表。 */ :root{--jn-ctl-h:28px} .jn-toolbar{display:flex;align-items:center;gap:12px;margin:8px 0 10px} .jn-toolbar-hint{margin:0;font-size:12px;color:var(--muted);flex:1 1 auto;min-width:0} .jn-toolbar-btns{display:flex;gap:6px;align-items:center;flex:0 0 auto} .jn-pop>summary{height:var(--jn-ctl-h);box-sizing:border-box;display:flex;align-items:center} .jn-col{display:flex;flex-direction:column;gap:6px} .jn-col-title{display:flex;align-items:center;gap:8px;min-height:var(--jn-ctl-h)} .jn-col-title h3{margin:0;font-size:14px;font-weight:700} .jn-count{font-size:11px;font-weight:600;color:var(--muted);background:var(--bg3);border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums} .jn-col-in .jn-col-title h3,.jn-col-mid .jn-col-title h3{color:var(--fg)} .jn-col-mid .jn-count{background:color-mix(in srgb,var(--good) 20%,var(--bg3));color:var(--fg)} .jn-bulk-btn{margin-left:auto;height:var(--jn-ctl-h);box-sizing:border-box;font:inherit;font-size:11px;font-weight:600;padding:0 12px; border-radius:999px;cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--fg);white-space:nowrap} .jn-bulk-in{border-color:color-mix(in srgb,var(--good) 60%,transparent);color:var(--good)} .jn-bulk-in:hover:not(:disabled){background:color-mix(in srgb,var(--good) 14%,transparent)} .jn-bulk-out:hover:not(:disabled){background:var(--bg3)} .jn-bulk-btn:disabled{opacity:.35;cursor:default} /* 2026-10-24: 全プレイヤー見出しの「📋 ロビーから参加」 */ .jn-col-right .jn-col-title{flex-wrap:wrap} .jn-col-title h3{white-space:nowrap} .jn-pop>.jn-lobby-body{width:min(420px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px} .jn-lobby-hint{margin:0;font-size:11px;line-height:1.45} .jn-lobby-text{width:100%;box-sizing:border-box;resize:vertical;font:inherit;font-size:12px;background:var(--bg);color:var(--fg); border:1px solid var(--line);border-radius:8px;padding:6px 8px} .jn-lobby-actions{display:flex;justify-content:flex-end} .jn-lobby-result p{margin:0 0 4px;font-size:12px} .jn-lobby-missing{margin:0;padding-left:18px;font-size:12px;max-height:160px;overflow:auto} .jn-col-search{display:flex;gap:4px;align-items:center} .jn-col-search input{flex:1 1 auto;min-width:0;width:auto;height:var(--jn-ctl-h);box-sizing:border-box;background:var(--bg);border:1px solid var(--line); color:var(--fg);border-radius:8px;padding:0 10px;font-size:12px} .jn-col-search input:focus{outline:none;border-color:var(--accent)} .jn-col-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .jn-sort{display:flex;gap:4px;align-items:center;flex:0 0 auto} .jn-sort select{height:var(--jn-ctl-h);font-size:11px;padding:0 6px;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px} .jn-icon-btn{width:var(--jn-ctl-h);height:var(--jn-ctl-h);display:inline-flex;align-items:center;justify-content:center;font-size:11px; background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:8px;cursor:pointer;padding:0} .jn-icon-btn:hover{border-color:var(--accent)} .jn-view{display:flex;gap:6px;align-items:center} .jn-seg{display:inline-flex;height:var(--jn-ctl-h);box-sizing:border-box;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)} .jn-seg-opt{font:inherit;font-size:11px;padding:0 9px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center} .jn-seg-opt+.jn-seg-opt{border-left:1px solid var(--line)} .jn-seg-opt.on{background:var(--accent);color:#fff} .jn-seg-opt:not(.on):hover{color:var(--fg)} /* カード */ .jn-card{gap:6px;padding:8px 10px} .jn-card-head{display:flex;align-items:center;gap:8px;min-width:0} .jn-card-head .pp-avatar{width:24px;height:24px;font-size:9px;flex:0 0 auto} .jn-card-name{font-size:13px} .jn-card-head .jn-pk{margin-left:auto;min-width:96px} .jn-card-head .jn-pk-opt{padding:4px 8px;font-size:10px} .jn-chips{align-items:center} .jn-chips-end{margin-left:auto;display:inline-flex} .jn-chip-link{color:var(--accent);text-decoration:none;font-weight:600;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:transparent;cursor:pointer} .jn-chip-link:hover{background:color-mix(in srgb,var(--accent) 15%,transparent)} .jn-list.jn-compact .jn-card{gap:4px;padding:6px 8px} /* 狭いカード（要約表示）は名前の下にスイッチを全幅で */ .jn-list.jn-d-summary .jn-card-head{flex-wrap:wrap} .jn-list.jn-d-summary .jn-card-head .jn-card-name{flex:1 1 0} .jn-list.jn-d-summary .jn-card-head .jn-pk{margin-left:0;flex:1 0 100%;min-width:0} .jn-list.jn-d-summary .jn-chips-end{margin-left:0} /* 左の詳細パネル: 見出し → 参加スイッチ → チップ → 指標 → 表 → 編集系ボタン */ .jn-detail{display:flex;flex-direction:column;gap:10px} .jn-detail-head{display:flex;align-items:center;gap:10px} .jn-detail-head .pp-avatar{width:36px;height:36px;font-size:12px;flex:0 0 auto} .jn-detail-id{display:flex;flex-direction:column;min-width:0} .jn-detail-name{font-weight:700;font-size:15px;overflow-wrap:anywhere} .jn-detail-riotid{font-size:11px;color:var(--muted);overflow-wrap:anywhere} /* 2026-10-05: OP.GG の過去最高（ソロ/フレックス・LP込み） */ .jn-detail-peak{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere} .jn-detail-pk{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;border-radius:10px;background:var(--bg3)} .jn-detail-pk.on{background:color-mix(in srgb,var(--good) 14%,var(--bg3))} .jn-detail-pk-l{font-size:11px;color:var(--muted)} .jn-detail-pk .jn-pk{width:100%} .jn-detail .jn-chips,.jn-detail .jn-kpis{margin:0} .jn-detail-tbl{margin-top:0} .jn-detail-actions{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding-top:10px} .jn-detail-actions .btn{flex:1 1 auto} /* スマホ幅: 縦積み（syncJoinLayoutCols が .jn-layout-stack を付ける）。未選択の詳細パネルは隠す */ .jn-layout.jn-layout-stack{grid-template-columns:1fr} .jn-layout-stack .jn-detail{position:static} .jn-layout-stack .jn-detail:has(.jn-detail-empty){display:none} .jn-layout-stack .jn-list{max-height:65vh} @media (max-width:640px){ .jn-toolbar{flex-wrap:wrap} .jn-toolbar-hint{flex-basis:100%} .jn-toolbar-btns{margin-left:auto} } /* 2026-10-02: 「参加」タブのカード・詳細・表示設定を新規実装（js/19-join-ui.js）。 各カードのレーン情報を「レーン=列・指標=行」のミニ表(.jn-tbl)にし、行ラベル・レーン見出し・グループ区切り・ 符号色で値の意味を示す。密度クラス(.jn-d-full/.jn-d-short/.jn-d-summary)はsyncJoinDensity()が一覧(.jn-list)と #jn-detailに付ける＝カード幅が狭いと行ラベルを略記、さらに狭いと要約行(.jn-sum)だけ残す。 */ .jn-pop{position:relative;font-size:12px} .jn-pop>summary{cursor:pointer;list-style:none;padding:3px 10px;border:1px solid var(--line);border-radius:8px; background:var(--bg3);color:var(--fg);font-weight:600;white-space:nowrap} .jn-pop>summary::-webkit-details-marker{display:none} .jn-pop[open]>summary{border-color:var(--accent)} .jn-pop-body{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(720px,calc(100vw - 32px)); max-height:min(70vh,640px);overflow:auto;box-sizing:border-box;background:var(--bg2);border:1px solid var(--line); border-radius:10px;padding:12px;box-shadow:var(--shadow);color:var(--fg)} .jn-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px} .jn-preset{font:inherit;font-size:12px;padding:4px 12px;border-radius:999px;border:1px solid var(--line); background:var(--bg);color:var(--fg);cursor:pointer} .jn-preset.on{background:var(--accent);border-color:var(--accent);color:#fff} .jn-opt-cols{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:12px;align-items:start} .jn-opt-list{display:flex;flex-direction:column;gap:8px;min-width:0} .jn-opt-grp{margin:0;border:1px solid var(--line);border-radius:8px;padding:6px 10px 8px;display:flex;flex-direction:column;gap:4px} .jn-opt-grp legend{font-size:11px;color:var(--muted);padding:0 4px;font-weight:600} .jn-opt-record{background:color-mix(in srgb,var(--fg) 4%,transparent)} .jn-opt-note{margin:0 0 2px;font-size:11px;color:var(--accent)} .jn-opt{display:flex;gap:6px;align-items:flex-start;cursor:pointer} .jn-opt input{flex:0 0 auto;width:14px;height:14px;margin-top:2px;accent-color:var(--accent)} .jn-opt span{display:flex;flex-direction:column;gap:1px;min-width:0} .jn-opt b{font-weight:600} .jn-opt em{font-style:normal;font-size:10px;color:var(--warn)} .jn-opt small{font-size:11px;color:var(--muted);line-height:1.35} .jn-preview{position:sticky;top:0} .jn-preview-h{font-size:11px;color:var(--muted);margin-bottom:4px} .jn-card.jn-card-preview{cursor:default} @media (max-width:640px){ .jn-opt-cols{grid-template-columns:1fr} .jn-preview{position:static} .jn-pop-body{position:fixed;left:16px;right:16px;top:72px;width:auto} } /* 用語の説明 */ .jn-gl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .jn-gl h4{margin:0 0 4px;font-size:12px} .jn-gl ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.45} .jn-gl-short{font-size:10px;color:var(--muted);margin-left:4px} .jn-gl-pref{color:var(--accent);font-weight:700} .jn-gl-best{background:color-mix(in srgb,var(--accent) 24%,transparent);border-radius:4px;padding:0 3px} /* カード: 見出し下のラベル付きチップ */ .jn-chips{display:flex;flex-wrap:wrap;gap:4px} .jn-chip{display:inline-flex;align-items:baseline;gap:3px;font-size:10px;line-height:1.5;padding:0 6px;border-radius:999px; background:var(--bg3);color:var(--fg);white-space:nowrap} .jn-chip b{font-weight:400;color:var(--muted)} .jn-mine{color:var(--warn);margin-right:2px} /* 2026-10-02: 検索で名前以外に当たったときのバッジ（searchHitBadgeHtml・js/01-util.js）。RiotID=青系・スクショ名=黄系 */ .jn-card-hit{min-width:0} /* 2026-10-02: 参加/不参加セグメントスイッチ（旧チェックボックスを置換）。2つのボタンの下につまみ(.jn-pk-thumb)を敷き、 .on で右（参加・緑）へスライド。選ばれている側の文字だけ濃く、もう片方は薄い＝状態が文字でも色でも読める。 */ .jn-pk{--pk-in:var(--good);position:relative;display:inline-grid;grid-template-columns:1fr 1fr;flex:0 0 auto; border-radius:999px;background:var(--bg);border:1px solid var(--line);padding:2px;min-width:112px;user-select:none} .jn-pk-thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:999px; background:color-mix(in srgb,var(--muted) 30%,var(--bg3));box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .17s ease,background-color .17s ease} .jn-pk.on .jn-pk-thumb{transform:translateX(100%);background:var(--pk-in)} .jn-pk-opt{position:relative;z-index:1;font:inherit;font-size:11px;font-weight:600;line-height:1;padding:5px 10px; border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:999px;white-space:nowrap;transition:color .17s} .jn-pk:not(.on) .jn-pk-out{color:var(--fg)} .jn-pk.on .jn-pk-in{color:#fff} .jn-pk:not(.on) .jn-pk-in:hover{color:var(--good)} .jn-pk.on .jn-pk-out:hover{color:var(--fg)} .jn-pk-opt:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .jn-pk.busy{pointer-events:none} .jn-pk-lg{min-width:150px} .jn-pk-lg .jn-pk-opt{font-size:13px;padding:7px 14px} /* 参加候補のカード: 左端に緑の帯 */ .jn-card.jn-card-in{box-shadow:inset 3px 0 0 var(--good)} /* 移動直後のカードを一瞬光らせる */ @keyframes jnFlash{0%{background:color-mix(in srgb,var(--good) 35%,var(--bg2))}100%{background:var(--bg2)}} .jn-card.jn-flash{animation:jnFlash 1.2s ease-out} .jn-list.jn-d-summary .jn-pk{min-width:0;width:100%} .jn-list.jn-d-summary .jn-pk-opt{padding:5px 4px;font-size:10px} /* 列見出しの一括ボタン */ .search-hit{display:inline-flex;align-items:baseline;gap:5px;max-width:100%;box-sizing:border-box;padding:0 7px;border-radius:999px; font-size:10px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg); border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)} .search-hit b{font-weight:700;color:var(--accent)} .search-hit-alias{border-color:color-mix(in srgb,var(--warn) 60%,transparent);background:color-mix(in srgb,var(--warn) 12%,transparent)} .search-hit-alias b{color:var(--warn)} .search-hit mark{background:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--fg);border-radius:3px;padding:0 1px} .search-hit-alias mark{background:color-mix(in srgb,var(--warn) 35%,transparent)} /* ミニ表 */ .jn-card-lanes{min-width:0;display:block} .jn-tbl{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:10px;line-height:1.5; font-variant-numeric:tabular-nums} .jn-tbl col.jn-c-lab{width:46px} .jn-tbl th,.jn-tbl td{padding:0 1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:clip} .jn-tbl thead th{font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.02em;border-bottom:1px solid var(--line)} .jn-tbl thead th.jn-pref{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)} .jn-tbl th.jn-lab{text-align:left;font-size:9px;font-weight:600;color:var(--muted);padding-left:2px} .jn-tbl th.jn-lab small{display:block;font-size:8px;line-height:1;color:var(--warn);font-weight:400} .jn-tbl tr.jn-grp-start>*{border-top:1px solid var(--line)} .jn-tbl td+td,.jn-tbl thead th+th{border-left:1px solid color-mix(in srgb,var(--line) 55%,transparent)} .jn-tbl tr.jn-g-record>*{background:color-mix(in srgb,var(--fg) 5%,transparent)} .jn-tbl tr.jn-r-grade td{font-size:11px;color:var(--fg)} .jn-tbl tr.jn-r-total td{font-weight:700;color:var(--fg)} .jn-tbl tr.jn-r-total th.jn-lab{color:var(--fg)} .jn-tbl td.jn-best{background:color-mix(in srgb,var(--accent) 24%,transparent);border-radius:4px} .jn-tbl tr.jn-r-tier td{color:var(--fg)} .jn-tbl .jn-pos{color:var(--good)} .jn-tbl .jn-neg{color:var(--bad)} .jn-tbl .jn-zero{color:var(--muted)} .jn-tbl tr.jn-off td{opacity:.45;text-decoration:line-through} .jn-l-short,.jn-v-short{display:none} .jn-d-short .jn-l-full,.jn-d-summary .jn-l-full,.jn-d-short .jn-v-full,.jn-d-summary .jn-v-full{display:none} .jn-d-short .jn-l-short,.jn-d-summary .jn-l-short,.jn-d-short .jn-v-short,.jn-d-summary .jn-v-short{display:inline} .jn-d-short .jn-tbl col.jn-c-lab{width:18px} .jn-d-summary .jn-tbl col.jn-c-lab{width:0} .jn-d-summary .jn-tbl th.jn-lab{padding:0;font-size:0} .jn-d-summary .jn-tbl thead th{letter-spacing:0} .jn-d-summary .jn-tbl tbody tr:not(.jn-sum){display:none} .jn-h-mini{display:none} .jn-d-summary .jn-h-full{display:none} .jn-d-summary .jn-h-mini{display:inline} .jn-sumline{display:none;flex-wrap:wrap;gap:3px;margin-top:3px} .jn-d-summary .jn-sumline{display:flex} /* 略記・要約表示中の凡例（列見出しの下） */ .jn-legend{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:10px;color:var(--muted);margin:-2px 0 6px} .jn-legend b{color:var(--fg);font-weight:600} .jn-legend.hidden{display:none} /* 左パネル */ .jn-detail .jn-chips{margin:6px 0} .jn-kpis{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0} .jn-kpi{display:flex;flex-direction:column;gap:1px;padding:5px 8px;border-radius:8px;background:var(--bg3);cursor:help} .jn-kpi-l{font-size:10px;color:var(--muted)} .jn-kpi-v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums} .jn-q{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%; border:1px solid var(--muted);font-size:8px;line-height:1;vertical-align:1px} .jn-detail-tbl{border-top:1px solid var(--line);padding-top:6px;margin-top:4px} .jn-detail-tbl .jn-tbl{font-size:11px} /* 2026-09-23後続: 「登録」タブを0から再設計。#rg-home（2つの大きいボタンだけ）⇔#rg-add（登録フォーム）の 2画面。プレビューカードは.pp-row.pp-card（Phase D）をそのまま流用するが、D&D対象ではないため cursor:grabを.rg-cardで打ち消す。 */ /* 2026-09-23後続: ユーザー要望「配置が気に入らない」→A案「画面ど真ん中」を採用。 .rg-home-row{height:100%}で中央寄せを試みたが、親.rg-homeがmin-heightしか持たず高さが不定 （contentサイズに委ねられる）ため、子のheight:100%は解決できず実質無視され、行がカード上端に 張り付いたままだった（実測で検証し発覚）。.rg-home自身をflexコンテナにして子を直接中央寄せする 方式に変更し、min-heightだけの不定な高さでも正しく中央に来るようにした。 */ /* .rg-home-rowはflexアイテムのため既定では横幅がcontentにfit-shrinkし、内側の.rg-home-btnの `45%`が「不定な幅の45%」という循環参照になって解決できず、ボタンが極端に狭くなって縦積みに なってしまっていた（実測で発覚）。width:100%を明示してこの循環を切る。 */ .rg-home{position:relative;min-height:420px;padding:24px 0;display:flex;align-items:center;justify-content:center} /* 2026-09-23さらに後続（CSV一括登録追加）: #rg-homeの直接の子は「画面ど真ん中」センタリングの前提 （唯一の子であること）を保つため常に1つ（.rg-home-inner）のまま、その中で行(.rg-home-row)と 結果表示(#rg-csv-result)を縦に積む。.rg-home-innerもflexアイテムなので同じ理由でwidth:100%が必要。 */ .rg-home-inner{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px} /* 2026-09-23さらに後続: ユーザー報告「プレイヤー登録がログインとずれる」＝align-items:centerだと、 CSVリンク2つ分だけ縦に長い.rg-home-primary列と、単体ボタンだけの#rg-go-loginを「行の高さ全体で 中央揃え」してしまい、結果的に「プレイヤー登録」ボタン自体は「ログイン」ボタンより上にずれて見えていた。 flex-startで両方の先頭（ボタンの上端）を揃える＝CSVリンクは.rg-home-primaryの下に伸びるだけになる。 */ .rg-home-row{display:flex;align-items:flex-start;justify-content:center;gap:32px;flex-wrap:wrap;width:100%} .rg-home-primary{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(360px,45%)} .rg-home-primary .rg-home-btn{width:100%} .rg-csv-link{font-size:13px;color:var(--fg);text-decoration:underline;cursor:pointer;background:none;border:none} .rg-csv-template-link{font-size:11px;color:var(--muted)} .rg-csv-result{width:min(600px,90%);text-align:left} .rg-csv-ok{color:var(--good);margin:0 0 4px} .rg-csv-errors{font-size:12px;color:var(--muted);margin:4px 0 0;padding-left:1.2em} .rg-home-btn{width:min(360px,45%);padding:44px 0;font-size:24px;font-weight:700;border-radius:18px; border:1px solid var(--line);cursor:pointer} .rg-home-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)} .rg-home-btn.ghost{background:var(--bg2);color:var(--fg)} /* 「次へ」（参加タブへ進む）。.pref-lanes-wrap/.pp-cols-cornerと同じ「絶対配置の基準は
自身では なく包む相対配置divへ」パターンを流用し、.rg-home自体をposition:relativeにして右下に固定する。 */ .rg-next-btn{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:6px; padding:10px 20px;font-size:14px;font-weight:700;border-radius:999px;border:1px solid var(--line); background:var(--bg2);color:var(--fg);cursor:pointer} .rg-next-icon{font-size:16px} /* min-width:0が無いと、右カラム(プレビューカード内の名前等)の中身が長いとグリッド列がfrの取り分を 超えて広がり（CSS Gridの既定min-width:autoによる「blowout」）、カード幅を突き破って右側の内容 （登録する等）が画面上は描画されるが視覚的な位置がズレて見えなくなる不具合があったため明示的に0で止める。 */ .rg-form-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;margin-top:8px} .rg-form-basic{display:flex;flex-direction:column;gap:10px;min-width:0} .rg-form-basic label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)} .rg-form-basic input,.rg-form-basic select{background:var(--bg);border:1px solid var(--line);color:var(--fg); border-radius:8px;padding:6px 8px;font-size:13px} /* 2026-09-23後続: ユーザー要望「○の時、形が崩れる」＝.rg-lane-btnがmin-widthだけでcontent-drivenな幅 だったため、グレード記号（◎○◇△✖）や実効ランク文字数がレーンごとに違うと5つのボタン幅がバラバラに なっていた。flex:1 1 0で常に5等分の同じ幅にし、アイコンは固定サイズボックスで中央揃え、実効ランク文言は 長すぎる場合だけ省略記号にして幅を安定させる。 */ .rg-lanes{display:flex;gap:6px} .rg-lane-btn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px; background:var(--bg2);border:1px solid var(--line);border-radius:10px;cursor:pointer} .rg-lane-btn:disabled{opacity:.5;cursor:not-allowed} .rg-lane-label{font-size:10px;color:var(--muted)} .rg-lane-icon{font-size:18px;width:22px;height:22px;line-height:22px;display:block} .rg-lane-eff{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .rg-goodcount{font-size:12px;color:var(--muted);margin:0} .rg-goodcount.ok{color:var(--good)} .rg-goodcount.bad{color:var(--bad)} .rg-err{color:var(--bad);font-size:12px;min-height:1em;margin:0} .rg-form-preview{position:sticky;top:70px;min-width:0} .pp-row.pp-card.rg-card{cursor:default} /* 2026-10-14: 「LoLカスタムルームメッセージで登録」(#rg-lobby・js/26-lobby-ui.js)。貼り付け欄＋1人1枚の下書きカード。 レーンボタンは登録フォームの.rg-lanes/.rg-lane-btnをそのまま流用する。 */ .rg-lobby-title{margin:0 0 4px;font-size:16px} .rg-lobby-hint{font-size:12px;margin:0 0 8px} .rg-lobby-text{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);color:var(--fg); border-radius:8px;padding:8px;font-size:13px;resize:vertical} .rg-lobby-opts{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0 12px} .rg-lobby-opts label{font-size:12px;color:var(--muted)} .rg-lobby-opts select,.rg-lobby-head select,.rg-lobby-name{background:var(--bg);border:1px solid var(--line);color:var(--fg); border-radius:8px;padding:5px 8px;font-size:13px} .rg-lobby-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:10px} .rg-lobby-row{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--bg2);display:flex;flex-direction:column;gap:8px;min-width:0} .rg-lobby-row.off{opacity:.55} .rg-lobby-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .rg-lobby-inc input{width:18px;height:18px} .rg-lobby-name{flex:1 1 120px;min-width:0;font-weight:700} .rg-lobby-riot{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px} .rg-lobby-info{display:flex;flex-direction:column;gap:2px} .rg-lobby-st{font-size:12px;margin:0} .rg-lobby-st.bad{color:var(--bad)} .rg-lobby-basis{font-size:11px} /* 2026-10-16: 主催者ツール「OP.GG から取り直す」(#og-refresh・js/27-opgg-refresh-ui.js) */ .og-drawer{max-width:640px} .og-quick{display:flex;gap:6px;flex-wrap:wrap} .og-list{display:flex;flex-direction:column;gap:4px;max-height:55vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px} /* 行は