/* 管理者ページ専用スタイル */ .admin-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--bdr); margin-bottom: 16px; } .admin-tabs button { background: transparent; border: none; color: var(--tx3); padding: 10px 18px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; } .admin-tabs button:hover { color: var(--tx); } .admin-tabs button.active { color: var(--acc); border-bottom-color: var(--acc); } .admin-panel { padding: 0 4px; } .admin-note { background: rgba(59,130,246,.1); border-left: 3px solid var(--acc); padding: 10px 14px; border-radius: 0 6px 6px 0; margin-bottom: 14px; font-size: 12px; color: var(--tx2); } .admin-note p { margin: 3px 0; } .admin-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; color: var(--tx2); } .admin-filters select { background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 5px; color: var(--tx); padding: 4px 8px; font-size: 12px; } .admin-table { width: 100%; border-collapse: collapse; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 8px; overflow: hidden; font-size: 12px; zoom: var(--tbl-zoom, 1); } .admin-table th { background: var(--bg3); color: var(--tx3); padding: 10px 12px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; border-bottom: 1px solid var(--bdr2); } .admin-table td { padding: 9px 12px; border-top: 1px solid var(--bdr); color: var(--tx2); } .admin-table tr:hover td { background: var(--bg3); } .admin-table td.mono { font-family: "SF Mono", Monaco, monospace; font-size: 11px; } .admin-stats-wrap { overflow-x: auto; } /* ==== toggle switch ==== */ .switch { position: relative; display: inline-block; width: 38px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--bdr2); border-radius: 20px; transition: .2s; } .switch .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; } .switch input:checked + .slider { background: var(--acc); } .switch input:checked + .slider:before { transform: translateX(18px); } .switch.disabled { opacity: .4; } .switch.disabled .slider { cursor: not-allowed; } /* 管理者バッジ（各ページヘッダに出る） */ .admin-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .admin-badge.is-admin { background: rgba(139,92,246,.2); color: #a855f7; border: 1px solid rgba(139,92,246,.4); } .admin-badge.is-user { background: var(--bg3); color: var(--tx3); border: 1px solid var(--bdr); } /* 環境バッジ（staging時のみ表示、視認性高く） */ .env-badge { display: inline-flex; align-items: center; padding: 3px 8px; margin-right: 4px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; } .env-badge.env-staging { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; box-shadow: 0 0 12px rgba(245,158,11,.4); animation: env-pulse 2.5s ease-in-out infinite; } @keyframes env-pulse { 0%,100% { box-shadow: 0 0 8px rgba(245,158,11,.3); } 50% { box-shadow: 0 0 16px rgba(245,158,11,.6); } } .admin-badge a { color: inherit; text-decoration: none; } .admin-badge a:hover { text-decoration: underline; } /* ============================================================ 📡 当日データ タブ (operation.js の renderOpTodayPanel) ============================================================ */ /* サブタブ (Beyond / CR 単位) */ #opToday .today-subtabs{display:flex;gap:6px;margin-bottom:10px;border-bottom:1px solid var(--bdr)} #opToday .today-subtab{padding:8px 16px;font-size:13px;border:none;background:transparent;color:var(--tx3);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit} #opToday .today-subtab:hover{color:var(--tx2)} #opToday .today-subtab.on{color:var(--tx);font-weight:600;border-bottom-color:var(--acc)} #opToday .today-subtab .count{font-size:10px;color:var(--tx3);margin-left:6px;font-variant-numeric:tabular-nums} #opToday .today-subtab.on .count{color:var(--acc)} /* CR 単位サブタブのテーブル */ #opToday .today-cr-meta{display:flex;align-items:center;gap:12px;padding:6px 4px;font-size:11px;color:var(--tx3);flex-wrap:wrap} #opToday .today-cr-meta .src{padding:1px 6px;border-radius:3px;background:var(--bg2);border:1px solid var(--bdr2);font-size:10px} /* CR 単位サブタブの階層構造 (媒体×案件 → CPN セクション → CR 行 を 1 table で表現) */ #opToday .today-cpn-bulk{padding:3px 10px;border:1px solid var(--bdr2);border-radius:14px;background:var(--bg2);color:var(--tx2);font-size:11px;cursor:pointer;font-family:inherit;line-height:1.4} #opToday .today-cpn-bulk:hover{background:var(--bg3);color:var(--tx)} #opToday .today-cr-groups{display:flex;flex-direction:column;gap:14px;padding-bottom:8px} #opToday .today-cr-group{background:var(--bg2);border:1px solid var(--bdr);border-radius:8px;overflow-x:auto} /* 列幅統一テーブル (媒体×案件 1グループ = 1 table) */ #opToday .today-cr-tbl{width:100%;table-layout:fixed;min-width:1550px;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums} #opToday .today-cr-tbl thead th{position:sticky;top:0;z-index:3;background:var(--bg3);color:var(--tx2);font-weight:600;font-size:11px;padding:6px 8px;border-bottom:1px solid var(--bdr2);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none} #opToday .today-cr-tbl thead th.r{text-align:right} #opToday .today-cr-tbl thead th.sortable{cursor:pointer} #opToday .today-cr-tbl thead th.sortable:hover{background:var(--bg2);color:var(--tx)} #opToday .today-cr-tbl thead th.sorted{color:var(--acc)} #opToday .today-cr-tbl thead th .sort{font-size:9px;margin-left:3px;font-variant-numeric:normal} #opToday .today-cr-tbl td{padding:6px 8px;border-bottom:1px solid var(--bdr);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle} #opToday .today-cr-tbl td.r{text-align:right} #opToday .today-cr-tbl td .pos{color:var(--green)} #opToday .today-cr-tbl td .neg{color:var(--red,#ef4444)} #opToday .today-cr-tbl .cr-code{color:var(--acc);cursor:pointer;text-decoration:none} #opToday .today-cr-tbl .cr-code:hover{text-decoration:underline} #opToday .today-cr-tbl tbody tr.unmatched td{color:var(--tx3)} /* サムネ — コンパクト版 (max 64x64 程度。画像 aspect に従って縮小、列幅 72px) 行高さ強制は無し → サムネが小さい行/合計行は無駄な余白なく詰まる。 ★サムネ OFF 時は画像だけ非表示にし、 列幅 (72px) は維持 → CR No sticky 位置や他列がズレない。 */ #opToday .today-cr-tbl .thumb{display:block;margin:0 auto;max-width:64px;max-height:64px;width:auto;height:auto;border-radius:4px;object-fit:contain;background:var(--bg3);border:1px solid var(--bdr2)} #opToday .today-cr-tbl .thumb.noimg{display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:var(--tx3);font-size:10px} #opToday .today-cr-tbl .thumb-cell{padding:4px;vertical-align:middle} /* サムネ OFF: 画像だけ非表示、列幅は維持 (CR No sticky 位置や他列がズレない) */ #opToday.no-thumb .today-cr-tbl .thumb, #opToday.no-thumb .today-cr-tbl .thumb.noimg{display:none} /* 媒体×案件 合計行 */ #opToday .today-cr-tbl tbody.grp-summary tr td{background:var(--bg3);font-weight:600;border-bottom:2px solid var(--bdr2)} #opToday .today-cr-tbl tbody.grp-summary .grp-proj{font-size:13px;font-weight:700;color:var(--tx)} #opToday .today-cr-tbl tbody.grp-summary .grp-meta{font-size:10px;color:var(--tx3);margin-left:8px} /* CPN 合計行 */ #opToday .today-cr-tbl tr.today-cr-cpn-summary td{background:var(--bg2);font-weight:500;cursor:pointer;user-select:none;border-top:1px solid var(--bdr2)} #opToday .today-cr-tbl tr.today-cr-cpn-summary:hover td{background:var(--bg3)} #opToday .today-cr-tbl tr.today-cr-cpn-summary .toggle{font-size:10px;color:var(--tx3)} #opToday .today-cr-tbl tr.today-cr-cpn-summary .cpn-code{font-family:'SF Mono',Monaco,monospace;font-weight:600;color:var(--tx)} #opToday .today-cr-tbl tr.today-cr-cpn-summary .cpn-cr-count{font-size:10px;color:var(--tx3);margin-left:8px;padding:1px 6px;background:var(--bg3);border:1px solid var(--bdr2);border-radius:10px} /* CR 行 hover */ #opToday .today-cr-tbl tbody tr:not(.today-cr-cpn-summary):hover td{background:rgba(59,130,246,.05)} /* sticky 左固定 (サムネ列 + CR No 列) — 横スクロール時も常時表示 */ #opToday .today-cr-tbl thead th:nth-child(1), #opToday .today-cr-tbl tbody td:nth-child(1){position:sticky;left:0;z-index:2;background:var(--bg2)} #opToday .today-cr-tbl thead th:nth-child(2), #opToday .today-cr-tbl tbody td:nth-child(2){position:sticky;left:72px;z-index:2;background:var(--bg2);border-right:1px solid var(--bdr2)} #opToday .today-cr-tbl thead th:nth-child(1), #opToday .today-cr-tbl thead th:nth-child(2){z-index:4;background:var(--bg3)} #opToday .today-cr-tbl tbody.grp-summary td:nth-child(1), #opToday .today-cr-tbl tbody.grp-summary td:nth-child(2){background:var(--bg3)} #opToday .today-cr-tbl tr.today-cr-cpn-summary td:nth-child(1), #opToday .today-cr-tbl tr.today-cr-cpn-summary td:nth-child(2){background:var(--bg2)} /* サムネ OFF 時は CR No が left:0 */ /* サムネ OFF でも CR No の sticky left は 72px のまま (列幅維持で他列ズレ防止) */ #opToday .today-cr-tbl-wrap{overflow:auto;border:1px solid var(--bdr);border-radius:6px} #opToday .today-cr-tbl{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums} #opToday .today-cr-tbl thead th{position:sticky;top:0;background:var(--bg2);color:var(--tx2);font-weight:600;font-size:11px;padding:6px 8px;border-bottom:1px solid var(--bdr);text-align:left;white-space:nowrap;cursor:pointer;user-select:none} #opToday .today-cr-tbl thead th:hover{background:var(--bg3)} #opToday .today-cr-tbl thead th.r{text-align:right} #opToday .today-cr-tbl thead th .sort{font-size:9px;color:var(--tx3);margin-left:3px} #opToday .today-cr-tbl tbody td{padding:5px 8px;border-bottom:1px solid var(--bdr);white-space:nowrap} #opToday .today-cr-tbl tbody td.r{text-align:right} #opToday .today-cr-tbl tbody tr:hover{background:rgba(59,130,246,.05)} #opToday .today-cr-tbl tbody tr.unmatched td{color:var(--tx3)} #opToday .today-cr-tbl .cr-code{color:var(--acc);cursor:pointer;text-decoration:none} #opToday .today-cr-tbl .cr-code:hover{text-decoration:underline} /* ★2026-06-18 削除済: width:40x40 cover の重複 rule を削除 (118-120 行の 96x128 contain rule を上書きしていた) */ #opToday .today-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:var(--bg2);border:1px solid var(--bdr);border-radius:8px;margin-bottom:10px;flex-wrap:wrap} #opToday .today-bar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap} #opToday .today-bar-right{display:flex;align-items:center;gap:14px} #opToday .today-title{font-size:15px;font-weight:700} #opToday .today-status{font-size:12px;color:var(--tx3)} #opToday .today-status b{color:var(--tx2)} /* 折返し禁止の最小単位 (「TikTok 7分前」 のような 媒体名+値 の組)。 モバイルで status 行を折返させても媒体名や時刻が途中で切れないようにする */ #opToday .today-status .nw{white-space:nowrap} #opToday .today-kpi{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1} #opToday .today-kpi .l{font-size:10px;color:var(--tx3)} #opToday .today-kpi .v{font-size:16px;font-weight:700;font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums} #opToday .today-filters{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap} /* チップの入れ物 (配信数値サブタブのみ)。 PC では箱を作らず、 チップが従来どおり .today-filters の直接の flex アイテムとして折返す。 モバイルだけ横スクロール帯にする */ #opToday .today-chip-scroll{display:contents} #opToday .today-count{font-size:11px;color:var(--tx3);margin-left:auto;font-family:'Inter',sans-serif} /* 媒体×案件 チップ (クリックで ON/OFF) */ #opToday .today-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid var(--bdr2);border-radius:14px;background:var(--bg2);color:var(--tx2);font-size:11px;cursor:pointer;font-family:inherit;line-height:1.4} #opToday .today-chip:hover{background:var(--bg3);border-color:var(--bdr2)} #opToday .today-chip.on{background:rgba(59,130,246,.15);border-color:var(--acc);color:var(--tx);font-weight:600} #opToday .today-chip .today-bg{margin-left:0;font-size:10px;padding:1px 6px} #opToday .today-chip-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #opToday .today-chip-cv{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;color:var(--tx3);font-size:10px;padding:0 4px;border-left:1px solid var(--bdr2);margin-left:2px} #opToday .today-chip.on .today-chip-cv{color:var(--green);font-weight:700} #opToday .today-chip-clear{padding:3px 10px;border:1px solid #ef4444;border-radius:14px;background:rgba(239,68,68,.1);color:#ef4444;font-size:11px;cursor:pointer;font-family:inherit} #opToday .today-chip-clear:hover{background:rgba(239,68,68,.2)} /* グループを 1 行で横並び (折り返しなし)、 viewport 超過分は html (window) が横スクロール today-groups 自体の overflow は visible にして scroll container を作らない (sticky の親を奪わない) */ #opToday .today-groups{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;align-items:flex-start;padding-bottom:8px} /* overflow:clip = border-radius 切抜き効果は維持しつつ scroll container は作らない */ #opToday .today-group{flex:0 0 560px;min-width:0;background:var(--bg2);border:1px solid var(--bdr);border-radius:8px;overflow:clip;display:flex;flex-direction:column} /* group-h (媒体・案件・MCV/CV/CVR): 各グループ列の上端に sticky 固定。 横並び複数列の場合、 画面上部に各列の group-h が並ぶが、 これは「どのグループの 何を見ているか」を常に示すため必要。 列ヘッダ (today-tbl-head top:250px) と セットで group-h top:188 にし、 同じ sticky スタックを構成。 高 62px (上下 padding 8 + 内容 + margin-top:2px + group-sum 行)。 ★bg3 不透明 + z-index 5 で本体テーブルより前面に。 */ #opToday .today-group-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 10px;background:var(--bg3);border-bottom:1px solid var(--bdr2);font-size:12px; position:sticky;top:188px;z-index:5} #opToday .today-group-h .today-proj{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #opToday .today-group-h .today-group-sum{flex-basis:100%;font-family:'Inter',sans-serif;font-size:11px;color:var(--tx2);font-variant-numeric:tabular-nums;margin-top:2px} #opToday .today-group-h .today-group-sum b{color:var(--green)} #opToday .today-bg{display:inline-block;font-size:11px;padding:2px 9px;border-radius:10px;font-weight:600;background:rgba(100,116,139,.18);color:var(--tx2)} #opToday .today-bg.bg-yts{background:rgba(239,68,68,.15);color:var(--red)} #opToday .today-bg.bg-tiktok{background:rgba(100,116,139,.2);color:var(--tx2)} #opToday .today-bg.bg-meta{background:rgba(59,130,246,.18);color:var(--acc2)} #opToday .today-bg.bg-yda{background:rgba(168,85,247,.18);color:var(--purple)} #opToday .today-bg.bg-google{background:rgba(234,179,8,.18);color:var(--yellow)} #opToday .today-bg.bg-line{background:rgba(34,197,94,.18);color:var(--green)} #opToday .today-bg.bg-fb{background:rgba(59,130,246,.15);color:var(--acc2)} #opToday .today-bg.bg-ig{background:rgba(236,72,153,.15);color:var(--pink)} #opToday .today-bg.bg-yt{background:rgba(6,182,212,.15);color:var(--cyan)} #opToday .today-bg.bg-sn{background:rgba(34,197,94,.15);color:var(--green)} #opToday .today-bg.bg-pg{background:rgba(236,72,153,.15);color:var(--pink)} #opToday .today-bg.bg-x{background:rgba(234,179,8,.15);color:var(--yellow)} #opToday .today-bg.bg-uni{background:rgba(249,115,22,.18);color:var(--orange)} /* グループ内 = テーブル (CR | CR No | MCV | CV | CVR | CPN No | ADG No)、縦スクロールなし */ /* 共通カラム幅定義 — header(div grid) と body(table) は同じ比率で配分: 両方とも親幅(today-group内)に対し fr 単位で比例分配されるので X 座標が完全一致。 比率: CR=104 / CR No=86 / MCV=44 / CV=44 / CVR=54 / t No=50 / p No=50 / CPN No=82 ★2026-06-10 案A: タイトルNo/記事No 列追加。CPN/ADG は 1 列に統合して横幅増を相殺 (計 496 → 514、+18 のみ。番号不一致時のみ CPN セル内 2 段表示) */ #opToday .today-tbl-head{ display:grid; grid-template-columns:104fr 86fr 44fr 44fr 54fr 50fr 50fr 82fr; gap:0;align-items:center; /* container の左右 padding を 0 にして td と左端を揃える (二重 padding で 6px ズレてた) */ padding:0;background:var(--bg3);color:var(--tx3);font-weight:500;font-size:10px; border-bottom:1px solid var(--bdr2);white-space:nowrap; /* sticky: group-h の真下に張り付く (group-h top:188 + height 62 = 250) */ position:sticky;top:250px;z-index:4} #opToday .today-tbl-head div{padding:5px 6px;text-align:left} #opToday .today-tbl-head .r{text-align:right} #opToday .today-tbl-head .thumb-col{text-align:center} #opToday .today-tbl{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed} /* table 列幅を header と完全一致 (table-layout:fixed なので col 幅で確定) */ #opToday .today-tbl colgroup{display:table-column-group} #opToday .today-tbl td{padding:6px;border-bottom:1px solid var(--bdr);font-family:'Noto Sans JP',sans-serif;font-size:11px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #opToday .today-tbl td.r{text-align:right;font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums} #opToday .today-tbl td.mono{font-family:'Inter',sans-serif;font-size:10px;color:var(--tx2);font-variant-numeric:tabular-nums} #opToday .today-tbl td.thumb-cell{padding:4px;width:104px;text-align:center} #opToday .today-tbl tr:hover td{background:var(--bg3)} /* 配信数値タブ: 調整 (AFAD差分) 行 — CR ではないことが分かる控えめな表示 */ #opToday .today-cr-tbl tr.today-cr-adjust-row td{background:rgba(148,163,184,.06);color:var(--tx2);font-style:normal;border-bottom:1px dashed var(--bdr2)} #opToday .today-cr-tbl tr.today-cr-adjust-row .today-cr-no.na{color:var(--tx3);font-size:10.5px} #opToday .today-tbl td:nth-child(1){width:104px} #opToday .today-tbl td:nth-child(2){width:86px} #opToday .today-tbl td:nth-child(3){width:44px} #opToday .today-tbl td:nth-child(4){width:44px} #opToday .today-tbl td:nth-child(5){width:54px} #opToday .today-tbl td:nth-child(6){width:50px} #opToday .today-tbl td:nth-child(7){width:50px} #opToday .today-tbl td:nth-child(8){width:82px} /* サムネ大判: 元アスペクト比保持 (object-fit:contain) / 最大 96×128 */ #opToday .today-thumb{display:block;margin:0 auto;max-width:96px;max-height:128px;width:auto;height:auto;border-radius:4px;object-fit:contain;background:var(--bg3);border:1px solid var(--bdr2)} #opToday .today-thumb.noimg{display:flex;align-items:center;justify-content:center;width:80px;height:108px;font-size:14px;color:var(--tx3);font-weight:700;border-radius:4px;background:var(--bg3);border:1px solid var(--bdr2)} /* CR No: 見やすさ重視で明るい色 + やや大きめフォント。dark/light で色を切替 */ #opToday .today-cr-no{font-family:'Inter',sans-serif;font-size:12px;color:#7dd3fc;font-weight:600;cursor:pointer} #opToday .today-cr-no.na{color:var(--tx3);cursor:default} #opToday .today-cr-no:hover:not(.na){color:#bae6fd;text-decoration:underline} /* ライトモード: 白背景で見えるよう暗めの青 (sky-700) */ :root[data-theme="light"] #opToday .today-cr-no{color:#0369a1} :root[data-theme="light"] #opToday .today-cr-no:hover:not(.na){color:#0c4a6e} /* サムネ ON/OFF: no-thumb でサムネ列(1列目)非表示。header の grid 列も削除 */ #opToday.no-thumb .today-tbl-head{grid-template-columns:86fr 44fr 44fr 54fr 50fr 50fr 82fr} #opToday.no-thumb .today-tbl-head .thumb-col, #opToday.no-thumb .today-tbl td:first-child{display:none} /* スクロールしてもバー類が画面上部に固定。運用ページのタブバー(admin-tabs)も sticky にしてナビ(60) の直下に置く → today-bar/filters/thead はその下に積む */ /* zoom: var(--tbl-zoom) は Chromium 既知バグで position:sticky を破壊する。 当日タブ表示中だけ zoom を無効化 (ヘッダの zoom ウィジェット機能はこの間効かないが sticky のほうが優先) */ body.today-active .app-main{zoom:unset !important} /* 実測高さで sticky-top を完全連続に積む (隙間ゼロ・重なりゼロ): app-header h=53 → admin-tabs top:53, admin-tabs h=40 → today-bar top:93, today-bar h=55 → today-filters top:148, today-filters h=40 → today-group-h top:188, today-group-h h=62 → today-tbl-head top:250 */ body[data-page="operation"] .admin-tabs{position:sticky;top:53px;background:var(--bg);z-index:9;margin-bottom:0} #opToday .today-bar {position:sticky;top:93px;z-index:8;background:var(--bg)} #opToday .today-filters{position:sticky;top:148px;z-index:7;background:var(--bg);padding:6px 0;margin-top:0} /* ★2026-08-27 TikTok は明細だけ媒体API 由来 (AFAD は v9999 に潰れて CR 別に割れない) */ #opToday .today-src-note{margin-left:8px;font-size:10px;color:var(--tx3);border:1px solid var(--bdr2);border-radius:4px;padding:1px 6px;cursor:help;white-space:nowrap} #opToday .today-adjust-row td{background:var(--bg3);color:var(--tx3)} #opToday .today-adjust-row td:nth-child(2){font-size:10px} /* TikTok 明細は CR / CR No / CV / t No / p No / CPN No の 6 列 (消化・実CPA は配信数値タブが持つので出さない)。 MCV/CVR 2列分 (98px) 減るので カード幅も 560 → 460 に詰めて、 他媒体のカードに横幅を譲る */ #opToday .today-group.tt-detail{flex:0 0 460px} #opToday .today-group.tt-detail .today-tbl-head{grid-template-columns:104fr 96fr 40fr 44fr 44fr 86fr} #opToday .today-group.tt-detail .today-tbl td:nth-child(1){width:104px} #opToday .today-group.tt-detail .today-tbl td:nth-child(2){width:96px} #opToday .today-group.tt-detail .today-tbl td:nth-child(3){width:40px} #opToday .today-group.tt-detail .today-tbl td:nth-child(4){width:44px} #opToday .today-group.tt-detail .today-tbl td:nth-child(5){width:44px} #opToday .today-group.tt-detail .today-tbl td:nth-child(6){width:86px} #opToday.no-thumb .today-group.tt-detail .today-tbl-head{grid-template-columns:96fr 40fr 44fr 44fr 86fr} /* サムネ ON/OFF ボタン */ #opToday .today-thumb-toggle{background:var(--bg3);border:1px solid var(--bdr2);border-radius:6px;padding:5px 11px;font-size:11px;font-family:inherit;cursor:pointer;color:var(--tx2)} #opToday .today-thumb-toggle.on{background:rgba(34,197,94,.15);border-color:var(--green);color:var(--green);font-weight:600} #opToday .today-thumb-toggle:hover{background:var(--bdr2)} #opToday .today-thumb-toggle.on:hover{background:rgba(34,197,94,.25)} /* ============================================================ 📱 モバイル (max-width:768px) 当日データ レスポンシブ対応 ============================================================ 方針: - JS / HTML は触らず CSS のみで card 化 - PC レイアウトには一切影響しない (上書きは media 内のみ) - PC で動作する sticky 高さ計算は mobile では破綻するので解除 - 8 セル table (thumb / CR No / MCV / CV / CVR / t / p / CPN) を CSS grid で 60px thumb + 右側 3 列に再配置: 行1: CR No (3 列 span) 行2: t / p / CPN (3 タグ) 行3: MCV / CV / CVR (3 指標、 ::before ラベル付き) ============================================================ */ @media (max-width: 768px) { /* セカンダリタブ (admin-tabs) を横スクロール可能に */ body[data-page="operation"] .admin-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none} body[data-page="operation"] .admin-tabs::-webkit-scrollbar{display:none} body[data-page="operation"] .admin-tabs > *{flex:0 0 auto;white-space:nowrap} /* PC ハードコード sticky top (53/93/148/188/250) は破綻するため一旦リセット */ body[data-page="operation"] .admin-tabs{position:static} #opToday .today-bar, #opToday .today-filters, #opToday .today-tbl-head{position:static} /* サマリーバー: 1行目=タイトル+最終同期+シート行 (横並び 1 列) / 2行目=KPI 3 列 / 3行目=サムネトグル */ #opToday .today-bar{flex-direction:column;align-items:stretch;gap:6px;padding:8px 12px 0} #opToday .today-bar-left{ flex-direction:row;align-items:center;gap:8px;width:100%; flex-wrap:wrap;font-size:11px;line-height:1.4; } #opToday .today-title{font-size:13px;font-weight:700} /* ⚠️ 2026-08-14: ここが white-space:nowrap だと 「最終取得: TikTok ●分前 / YDA ●分前 / Google … / YTs … / Meta … / ●件」 が 1 行で 430px 前後になり、 375px の画面で **ドキュメント全体が横にはみ出す**。 iOS Safari はそれを shrink-to-fit で 縮小表示するため、 画面全体が小さく描画される (= 「レスポンシブ崩れ」の主因)。 折返しは許可し、 媒体名と時刻が途中で切れないよう .nw (operation.js が付与) の単位でだけ nowrap にする。 */ #opToday .today-status{font-size:11px;color:var(--tx3);white-space:normal;min-width:0} #opToday .today-bar-right{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;width:100%;align-items:stretch} #opToday .today-kpi{background:var(--bg3);border-radius:6px;padding:6px 8px;align-items:center;min-width:0;overflow:hidden} #opToday .today-kpi .l{font-size:10px;white-space:nowrap} #opToday .today-kpi .v{font-size:15px;white-space:nowrap} /* サムネ ON/OFF ボタン: - 通常時: today-bar-right の grid 内 KPI 直下にフル幅配置 - sticky-active 時 (operation.js の IntersectionObserver で body.today-sticky-active 付与): fixed で画面最上部に固定 + group-h と一緒に sticky セット表示 */ #opToday .today-thumb-toggle{ grid-column:1 / -1;width:100%;min-height:30px; padding:5px 11px;font-size:11px;border-radius:6px; } body.today-sticky-active #opToday .today-thumb-toggle{ position:fixed;top:0;left:0;right:0;z-index:9; width:100%;min-height:34px;border-radius:0; border-left:0;border-right:0; padding:7px 11px;font-size:12px; background:var(--bg2); } /* フィルタチップ: 折返し禁止 + 横スクロール (タッチで流せる) */ #opToday .today-filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 12px;gap:6px;margin-bottom:6px} #opToday .today-filters::-webkit-scrollbar{display:none} #opToday .today-chip{flex:0 0 auto;min-height:32px;padding:5px 10px} #opToday .today-chip-name{max-width:110px} #opToday .today-chip-clear{flex:0 0 auto;white-space:nowrap} #opToday .today-count{flex:0 0 auto;margin-left:0;padding-left:4px;border-left:1px solid var(--bdr2);white-space:nowrap} /* ⚠️ 配信数値サブタブだけは行ごと横スクロールにしない。 チップの後ろに 全開/全閉/列 ボタンが並んでおり、 案件×媒体が増えるほど 右へ流されて画面外に固定される (実質押せない) ため、 1 行目 = チップ (横スクロール帯 .today-chip-scroll) 2 行目 = 件数 + 全開 / 全閉 / 列 の 2 段に分ける。 */ #opToday .today-filters-cr{flex-wrap:wrap;overflow:visible} #opToday .today-filters-cr .today-chip-scroll{ display:flex;align-items:center;gap:6px; flex:1 1 100%;min-width:0; overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; } #opToday .today-filters-cr .today-chip-scroll::-webkit-scrollbar{display:none} #opToday .today-filters-cr .today-count{flex:1 1 auto;padding-left:0;border-left:0;white-space:normal} #opToday .today-filters-cr .today-cpn-bulk{flex:0 0 auto;min-height:30px;padding:5px 11px} /* タブ ↔ today-bar の間隔を縮める */ body[data-page="operation"] .admin-tabs{margin-bottom:0} #opToday .today-bar{padding:6px 12px 0;margin-bottom:0} /* グループ縦並び (PC は flex 横並び 560px 固定 → モバイルは縦に積む) */ #opToday .today-groups{flex-direction:column;flex-wrap:nowrap;gap:10px;padding:0 12px 16px;margin-top:6px} /* overflow:clip を上書き — sticky の group-h が group カード境界外でも追従できるよう visible に */ #opToday .today-group{flex:1 1 100%;width:100%;min-width:0;overflow:visible} /* tt-detail の固定幅 460px は PC 専用。 モバイルでは他カードと同じ全幅に戻す (詳細度が .today-group より高いので明示的に上書きが要る) */ #opToday .today-group.tt-detail{flex:1 1 100%;width:100%} /* グループヘッダ: 通常時は通常スクロール、 サムネトグル sticky-active 時のみ 画面上部 (サムネトグル高 34 の直下) に sticky 張り付き */ #opToday .today-group-h{ padding:8px 10px;font-size:12px;background:var(--bg3); } body.today-sticky-active #opToday .today-group-h{ position:sticky !important;top:34px;z-index:7; } #opToday .today-group-h .today-proj{font-size:13px} #opToday .today-group-h .today-group-sum{font-size:11px} /* テーブルヘッダ非表示 (PC の grid 列ヘッダはモバイルカードでは不要) */ #opToday .today-tbl-head{display:none} /* テーブル → カード化: 各 を grid レイアウト */ #opToday .today-tbl{display:block;table-layout:auto} #opToday .today-tbl tbody{display:block} #opToday .today-tbl tr{ display:grid; grid-template-columns:60px 1fr 1fr 1fr; column-gap:10px; row-gap:6px; padding:10px 12px; border-bottom:1px solid var(--bdr2); align-items:start; } #opToday .today-tbl tr:last-child{border-bottom:0} #opToday .today-tbl tr:hover td{background:transparent} /* 個別 td の幅指定 (PC) を全部解除 */ #opToday .today-tbl td{ width:auto !important; padding:0; border:0; white-space:normal; overflow:visible; text-overflow:unset; vertical-align:top; line-height:1.35; } /* セル位置: thumb=列1 (3行 span)、 CR No=行1 右側 3 列 span、 タグ (t/p/CPN)=行2、 指標 (MCV/CV/CVR)=行3 */ #opToday .today-tbl td:nth-child(1){grid-column:1;grid-row:1 / span 3} #opToday .today-tbl td:nth-child(2){grid-column:2 / span 3;grid-row:1;font-size:13px} #opToday .today-tbl td:nth-child(6){grid-column:2;grid-row:2} #opToday .today-tbl td:nth-child(7){grid-column:3;grid-row:2} #opToday .today-tbl td:nth-child(8){grid-column:4;grid-row:2;font-size:9px;line-height:1.25} #opToday .today-tbl td:nth-child(3){grid-column:2;grid-row:3;text-align:left;padding-top:5px;border-top:1px dashed var(--bdr2)} #opToday .today-tbl td:nth-child(4){grid-column:3;grid-row:3;text-align:left;padding-top:5px;border-top:1px dashed var(--bdr2)} #opToday .today-tbl td:nth-child(5){grid-column:4;grid-row:3;text-align:left;padding-top:5px;border-top:1px dashed var(--bdr2)} /* 指標ラベル (::before) */ #opToday .today-tbl td:nth-child(3)::before{content:"MCV ";color:var(--tx3);font-size:9px;font-weight:500} #opToday .today-tbl td:nth-child(4)::before{content:"CV ";color:var(--tx3);font-size:9px;font-weight:500} #opToday .today-tbl td:nth-child(5)::before{content:"CVR ";color:var(--tx3);font-size:9px;font-weight:500} /* 🛑 TikTok 明細 (.tt-detail) は列構成が違う (3=CV / 4=t No / 5=p No / 6=CPN No)。 標準 8 列用の nth-child 配置・ラベルのままだと CV 値に "MCV"、 t0003 に "CV"、 p0003 に "CVR" が付きズレて見えた (2026-09-01 ユーザー報告)。 配置: 行1=CR No / 行2=t・p・CPN / 行3=CV */ #opToday .today-group.tt-detail .today-tbl td:nth-child(4){grid-column:2;grid-row:2;border-top:0;padding-top:0;text-align:left} #opToday .today-group.tt-detail .today-tbl td:nth-child(5){grid-column:3;grid-row:2;border-top:0;padding-top:0;text-align:left} #opToday .today-group.tt-detail .today-tbl td:nth-child(6){grid-column:4;grid-row:2} #opToday .today-group.tt-detail .today-tbl td:nth-child(3)::before{content:"CV "} #opToday .today-group.tt-detail .today-tbl td:nth-child(4)::before{content:""} #opToday .today-group.tt-detail .today-tbl td:nth-child(5)::before{content:""} /* タグ 列 (t/p/CPN) の文字スタイル */ #opToday .today-tbl td.mono{font-size:10px;color:var(--tx3)} /* サムネを 60×80 に縮小 (PC の 96×128 → モバイル) */ #opToday .today-tbl .today-thumb{max-width:60px;max-height:80px;border-radius:4px} #opToday .today-tbl .today-thumb.noimg{width:60px;height:80px;font-size:12px} #opToday .today-tbl td.thumb-cell{padding:0;text-align:left} /* CR No: モバイルでも目立つように */ #opToday .today-cr-no{font-size:13px;font-weight:700} /* サムネ OFF 時: 1 列目を隠して 3 列レイアウトに圧縮 */ #opToday.no-thumb .today-tbl tr{grid-template-columns:1fr 1fr 1fr;column-gap:8px} #opToday.no-thumb .today-tbl td:nth-child(2){grid-column:1 / span 3} #opToday.no-thumb .today-tbl td:nth-child(6){grid-column:1;grid-row:2} #opToday.no-thumb .today-tbl td:nth-child(7){grid-column:2;grid-row:2} #opToday.no-thumb .today-tbl td:nth-child(8){grid-column:3;grid-row:2} #opToday.no-thumb .today-tbl td:nth-child(3){grid-column:1;grid-row:3} #opToday.no-thumb .today-tbl td:nth-child(4){grid-column:2;grid-row:3} #opToday.no-thumb .today-tbl td:nth-child(5){grid-column:3;grid-row:3} /* tt-detail × サムネ OFF: 行2=t・p・CPN / 行3=CV (列1 起点) */ #opToday.no-thumb .today-group.tt-detail .today-tbl td:nth-child(4){grid-column:1;grid-row:2;border-top:0;padding-top:0} #opToday.no-thumb .today-group.tt-detail .today-tbl td:nth-child(5){grid-column:2;grid-row:2;border-top:0;padding-top:0} #opToday.no-thumb .today-group.tt-detail .today-tbl td:nth-child(6){grid-column:3;grid-row:2} } /* iOS Safari の auto-zoom 殺し (フォーカス時の強制ズーム回避) — 当日タブ専用ではないが レスポンシブ初期施策として明示。 16px 以上で zoom 発火しない */ @media (max-width: 768px) { input[type="text"],input[type="search"],input[type="number"], input[type="date"],input[type="email"],input[type="password"], select,textarea{font-size:16px !important} } /* ============================================================ 📱 モバイル (max-width:768px) 配信数値タブ レスポンシブ対応 (Phase 1) ============================================================ 方針: - data-mk 属性を活用 (operation.js の cellFor / _todayCrAggCells で全 td に付与済) - 多列 (最大 17 列) を主要 4 KPI のみ表示 (cost / cv / imp / click) + profit 強調 - 詳細指標 (ctr/cpc/cpm/mcv/mcvr/mcpa/cvr/ctvr/cpa/epc/revenue/roas) はモバイルで非表示 → スクロール量削減、 1 画面で多くの CR が見える - thead は非表示、 td には ::before で metric ラベル自動付与 - CR 行: 行 1 サムネ + CR No / 行 2 cost + cv / 行 3 imp + click / 行 4 profit (全幅、 色強調) - CPN サマリ行 / グループサマリ行 も同じ grid 構成で踏襲 - PC レイアウトには一切影響しない (上書きは media 内のみ) ============================================================ */ @media (max-width: 768px) { /* 親 group の overflow-x:auto を解除 (横スクロール不要) */ #opToday .today-cr-group{overflow-x:visible} /* テーブル → ブロック化 + PC の min-width:1550px を解除 */ #opToday .today-cr-tbl{display:block;table-layout:auto;width:100%;min-width:0} #opToday .today-cr-tbl colgroup{display:none} #opToday .today-cr-tbl thead{display:none} #opToday .today-cr-tbl tbody{display:block} /* PC の sticky 列 (nth-child 1/2) リセット — grid を破壊するため */ #opToday .today-cr-tbl thead th:nth-child(1), #opToday .today-cr-tbl thead th:nth-child(2), #opToday .today-cr-tbl tbody td:nth-child(1), #opToday .today-cr-tbl tbody td:nth-child(2), #opToday .today-cr-tbl tbody.grp-summary td:nth-child(1), #opToday .today-cr-tbl tbody.grp-summary td:nth-child(2), #opToday .today-cr-tbl tr.today-cr-cpn-summary td:nth-child(1), #opToday .today-cr-tbl tr.today-cr-cpn-summary td:nth-child(2){ position:static !important; left:auto !important; background:transparent !important; border-right:0 !important; z-index:auto !important; } /* グループサマリ tbody も block 化 (PC の table 構造を解除) */ #opToday .today-cr-tbl tbody.grp-summary{display:block} #opToday .today-cr-tbl tbody.grp-summary tr td{background:transparent} /* === tr を flex-wrap 化 (grid は PC td 構造と競合するため不採用) === */ #opToday .today-cr-tbl tr{ display:flex !important; flex-wrap:wrap !important; align-items:flex-start; column-gap:10px; row-gap:6px; padding:10px 12px !important; border-bottom:1px solid var(--bdr2) !important; background:transparent !important; /* 1 列目 (サムネ / ▼トグル / 媒体バッジ) を絶対配置する基準 */ position:relative; } #opToday .today-cr-tbl tr:last-child{border-bottom:0 !important} #opToday .today-cr-tbl tr:hover td{background:transparent !important} /* td: PC の幅指定 / border / overflow を全リセット */ #opToday .today-cr-tbl td{ width:auto !important; min-width:0 !important; padding:0 !important; border:0 !important; white-space:nowrap !important; overflow:visible !important; text-overflow:unset !important; vertical-align:top !important; line-height:1.35 !important; font-size:11px !important; background:transparent !important; text-align:left !important; } /* === CR 行のセル配置 (4 行カード構成、 カラム整列) === ⚠️ 幅計算のルール (2026-08-14 修正): tr の column-gap は 10px。 1 行に 2 セル並べるときの合計は インデント(60px) + セル幅 + gap(10px) + セル幅 ≦ 100% を必ず満たすこと。 旧実装は margin-left を両方に付けた上で gap を 勘定に入れておらず 100% + 10px となり、 **全指標が 1 行ずつ折返して 段違いに表示される** 崩れになっていた。 セル幅 calc(50% - 36px) は 60 + (50% - 36) + 10 + (50% - 36) = 100% - 2px で 2px の余裕を残す (サブピクセル丸めで折返さないため)。 */ /* サムネ列 (CR/CPN/グループ 共通 50px = サムネ画像の最大幅と一致)。 ⚠️ flex の行内に置くと 1 行目の高さがサムネ (50px) に引っ張られ、 CR No の 右側に 30px 前後の死に領域ができる (1 カード 180px → 画面に 4 件しか出ない)。 absolute で行の左カラムに固定し、 指標行をサムネの右へ詰める。 (PC の sticky 列も同時に無効化されるので上の解除ルールと矛盾しない) ⚠️ 上の 「sticky 解除」 ルールが tbody.grp-summary / tr.today-cr-cpn-summary 付きで position:static !important を当てているため、 同等以上の詳細度で書かないと サマリ行だけ static のまま残り、 1 列目がインデントと二重取りになって CPN コードや案件名が 2 行目に落ちる。 3 系統すべて明示する。 */ #opToday .today-cr-tbl tbody.grp-summary tr > td:nth-child(1), #opToday .today-cr-tbl tr.today-cr-cpn-summary > td:nth-child(1), #opToday .today-cr-tbl tbody tr > td:nth-child(1){ position:absolute !important; left:12px !important; top:10px !important; width:50px !important; flex:none !important; order:1 !important; text-align:center !important; } /* 行が 70px 未満だとサムネ (top10 + 50px) が次の行にはみ出す。 列を隠して行が短くなっても崩れないよう最低高を担保する */ #opToday:not(.no-thumb) .today-cr-tbl tbody tr{min-height:70px} /* CR No / CPN コード / グループプロジェクト名 (サムネの右、 残り幅) サムネ 50px + 余白 10px = 60px 分をインデント (2px 余裕) */ #opToday .today-cr-tbl td[data-mk="creative_code"], #opToday .today-cr-tbl tr.today-cr-cpn-summary td:nth-child(2), #opToday .today-cr-tbl tr.today-cr-group-summary td:nth-child(2), #opToday .today-cr-tbl tbody.grp-summary tr td:nth-child(2){ flex:1 1 calc(100% - 62px) !important; order:2 !important; margin-left:60px !important; min-width:0 !important; font-size:13px;font-weight:600; white-space:normal !important; overflow-wrap:anywhere !important; } /* CPN コード/CR Count: チップに少しスペース */ #opToday .today-cr-tbl tr.today-cr-cpn-summary .cpn-cr-count, #opToday .today-cr-tbl tr.today-cr-group-summary .grp-meta{ margin-left:8px; } /* Cost (row 2 左) — 50% カラム、 ラベル inline、 大きめ。 CR No と指標を区切る dashed セパレータ (MCV/CV カードと統一)。 左列だけ 60px インデント、 右列は column-gap の 10px で空ける (両方に margin を付けると合計が 100% を超えて折返す) */ #opToday .today-cr-tbl td[data-mk="cost"]{ flex:0 0 calc(50% - 36px) !important; margin-left:60px !important; order:3 !important; font-size:15px;font-weight:700;color:var(--tx); padding-top:6px !important;margin-top:4px !important; border-top:1px dashed var(--bdr2) !important; } /* CV (row 2 右) */ #opToday .today-cr-tbl td[data-mk="cv"]{ flex:0 0 calc(50% - 36px) !important; margin-left:0 !important; order:4 !important; font-size:15px;font-weight:700;color:var(--tx); padding-top:6px !important;margin-top:4px !important; border-top:1px dashed var(--bdr2) !important; } /* Imp (row 3 左) */ #opToday .today-cr-tbl td[data-mk="imp"]{ flex:0 0 calc(50% - 36px) !important; margin-left:60px !important; order:5 !important; font-size:12px;color:var(--tx2); } /* Click (row 3 右) */ #opToday .today-cr-tbl td[data-mk="click"]{ flex:0 0 calc(50% - 36px) !important; margin-left:0 !important; order:6 !important; font-size:12px;color:var(--tx2); } /* 利益 (row 4 左、 詳細ボタンと並ぶ)。 インデント(60) + 利益 + gap(10) + 詳細ボタン(64) = 100% - 2px */ #opToday .today-cr-tbl td[data-mk="profit"]{ flex:0 0 calc(100% - 136px) !important; margin-left:60px !important; order:7 !important; text-align:right !important; font-size:14px;font-weight:700; padding:6px 0 0 !important; border-top:1px dashed var(--bdr2) !important; margin-top:4px !important; } /* 詳細ボタン (row 4 右、 ::after で生成) */ #opToday .today-cr-tbl tbody tr:not(.today-cr-cpn-summary)::after{ content:"詳細 ▼"; flex:0 0 64px; box-sizing:border-box; order:8; align-self:center; text-align:center; font-size:11px;color:var(--acc);font-weight:700; padding:3px 0; margin-top:6px; background:var(--bg3); border:1px solid var(--acc); border-radius:10px; cursor:pointer; user-select:none; } #opToday .today-cr-tbl tbody tr.mk-expanded:not(.today-cr-cpn-summary)::after{ content:"閉じる ▲"; color:var(--tx3); border-color:var(--bdr); } /* ▶/▼ キャンペーン展開トグル: cpn コードの左に配置 + 円形背景で視認性向上 */ #opToday .today-cr-tbl tr.today-cr-cpn-summary td.thumb-cell{ text-align:right !important; } #opToday .today-cr-tbl tr.today-cr-cpn-summary td.thumb-cell .toggle{ font-size:13px !important; color:#fff !important; font-weight:700 !important; display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px; background:var(--acc); border-radius:50%; line-height:1; } /* グループサマリ チップ (YDA/TikTok/Meta etc) — 中央に */ #opToday .today-cr-tbl tr.today-cr-group-summary td.thumb-cell > *, #opToday .today-cr-tbl tbody.grp-summary tr td.thumb-cell > *{ display:inline-block; font-size:10px; padding:2px 6px; border-radius:3px; } /* === 詳細 12 指標: デフォルトは非表示、 mk-expanded で 3 列グリッド表示 === */ #opToday .today-cr-tbl td[data-mk="ctr"], #opToday .today-cr-tbl td[data-mk="cpc"], #opToday .today-cr-tbl td[data-mk="cpm"], #opToday .today-cr-tbl td[data-mk="mcv"], #opToday .today-cr-tbl td[data-mk="mcvr"], #opToday .today-cr-tbl td[data-mk="mcpa"], #opToday .today-cr-tbl td[data-mk="cvr"], #opToday .today-cr-tbl td[data-mk="ctvr"], #opToday .today-cr-tbl td[data-mk="cpa"], #opToday .today-cr-tbl td[data-mk="epc"], #opToday .today-cr-tbl td[data-mk="revenue"], #opToday .today-cr-tbl td[data-mk="roas"]{ display:none !important; } /* mk-expanded 時のみ 12 指標を表示 (3列 × 4行 グリッド) */ #opToday .today-cr-tbl tr.mk-expanded td[data-mk="ctr"], #opToday .today-cr-tbl tr.mk-expanded td[data-mk="cpc"], #opToday .today-cr-tbl tr.mk-expanded td[data-mk="cpm"], #opToday .today-cr-tbl tr.mk-expanded td[data-mk="mcv"], #opToday .today-cr-tbl tr.mk-expanded td[data-mk="mcvr"], #opToday .today-cr-tbl tr.mk-expanded td[data-mk="mcpa"], #opToday .today-cr-tbl tr.mk-expanded td[data-mk="cvr"], #opToday .today-cr-tbl tr.mk-expanded td[data-mk="ctvr"], #opToday .today-cr-tbl tr.mk-expanded td[data-mk="cpa"], #opToday .today-cr-tbl tr.mk-expanded td[data-mk="epc"], #opToday .today-cr-tbl tr.mk-expanded td[data-mk="revenue"], #opToday .today-cr-tbl tr.mk-expanded td[data-mk="roas"]{ display:block !important; /* 3 列 + gap 10px × 2 = 100% - 4px (gap を勘定に入れないと 2 列に折返す) */ flex:0 0 calc(33.333% - 8px); font-size:11px;color:var(--tx2); padding:3px 0 !important; } /* 12 指標 order (利益のあとに展開) */ #opToday .today-cr-tbl tr.mk-expanded td[data-mk="ctr"] {order:10} #opToday .today-cr-tbl tr.mk-expanded td[data-mk="cpc"] {order:11} #opToday .today-cr-tbl tr.mk-expanded td[data-mk="cpm"] {order:12} #opToday .today-cr-tbl tr.mk-expanded td[data-mk="cvr"] {order:13} #opToday .today-cr-tbl tr.mk-expanded td[data-mk="ctvr"] {order:14} #opToday .today-cr-tbl tr.mk-expanded td[data-mk="cpa"] {order:15} #opToday .today-cr-tbl tr.mk-expanded td[data-mk="mcv"] {order:16} #opToday .today-cr-tbl tr.mk-expanded td[data-mk="mcvr"] {order:17} #opToday .today-cr-tbl tr.mk-expanded td[data-mk="mcpa"] {order:18} #opToday .today-cr-tbl tr.mk-expanded td[data-mk="epc"] {order:19} #opToday .today-cr-tbl tr.mk-expanded td[data-mk="revenue"]{order:20} #opToday .today-cr-tbl tr.mk-expanded td[data-mk="roas"] {order:21} /* === ラベル inline 化 (::before) === */ #opToday .today-cr-tbl td[data-mk="cost"]::before{content:"Cost ";color:var(--tx3);font-size:11px;font-weight:500;margin-right:4px} #opToday .today-cr-tbl td[data-mk="cv"]::before{content:"CV ";color:var(--tx3);font-size:11px;font-weight:500;margin-right:4px} #opToday .today-cr-tbl td[data-mk="imp"]::before{content:"Imp ";color:var(--tx3);font-size:10px;font-weight:500;margin-right:4px} #opToday .today-cr-tbl td[data-mk="click"]::before{content:"Click ";color:var(--tx3);font-size:10px;font-weight:500;margin-right:4px} #opToday .today-cr-tbl td[data-mk="profit"]::before{content:"利益 ";color:var(--tx3);font-size:11px;font-weight:500;margin-right:6px} /* 詳細 12 指標のラベル (expanded 時のみ意味あり) */ #opToday .today-cr-tbl td[data-mk="ctr"]::before {content:"CTR "; color:var(--tx3);font-size:9px;margin-right:3px} #opToday .today-cr-tbl td[data-mk="cpc"]::before {content:"CPC "; color:var(--tx3);font-size:9px;margin-right:3px} #opToday .today-cr-tbl td[data-mk="cpm"]::before {content:"CPM "; color:var(--tx3);font-size:9px;margin-right:3px} #opToday .today-cr-tbl td[data-mk="cvr"]::before {content:"CVR "; color:var(--tx3);font-size:9px;margin-right:3px} #opToday .today-cr-tbl td[data-mk="ctvr"]::before {content:"CTVR "; color:var(--tx3);font-size:9px;margin-right:3px} #opToday .today-cr-tbl td[data-mk="cpa"]::before {content:"CPA "; color:var(--tx3);font-size:9px;margin-right:3px} #opToday .today-cr-tbl td[data-mk="mcv"]::before {content:"MCV "; color:var(--tx3);font-size:9px;margin-right:3px} #opToday .today-cr-tbl td[data-mk="mcvr"]::before {content:"MCVR "; color:var(--tx3);font-size:9px;margin-right:3px} #opToday .today-cr-tbl td[data-mk="mcpa"]::before {content:"MCPA "; color:var(--tx3);font-size:9px;margin-right:3px} #opToday .today-cr-tbl td[data-mk="epc"]::before {content:"EPC "; color:var(--tx3);font-size:9px;margin-right:3px} #opToday .today-cr-tbl td[data-mk="revenue"]::before{content:"売上 "; color:var(--tx3);font-size:9px;margin-right:3px} #opToday .today-cr-tbl td[data-mk="roas"]::before {content:"ROAS "; color:var(--tx3);font-size:9px;margin-right:3px} /* === CPN サマリ行 / グループサマリ行 背景色 === (列幅・ margin-left は CR 行と統一して上位ルールで 56px / 64px に揃える) */ #opToday .today-cr-tbl tr.today-cr-cpn-summary, #opToday .today-cr-tbl tr.today-cr-group-summary, #opToday .today-cr-tbl tbody.grp-summary tr{ background:var(--bg3) !important; } /* サムネ (PC 64px → mobile 50px、 MCV/CV カードと同じ border-radius:4px) */ #opToday .today-cr-tbl .thumb{max-width:50px;max-height:50px;border-radius:4px} #opToday .today-cr-tbl .thumb.noimg{width:50px;height:50px;font-size:11px;border-radius:4px} /* === サムネ OFF 時 === CR 行のサムネ列は消える。 CPN/グループ サマリ行の 1 列目は ▼トグルと 媒体バッジが入っていて消せないので、 絶対配置をやめて中身なりの幅で 行内に戻し、 インデントを全行ゼロに揃える (全行の指標が左端で揃う)。 2 セル + gap(10px) = 100% - 2px になるよう 50% - 6px。 */ #opToday.no-thumb .today-cr-tbl tbody.grp-summary tr > td:nth-child(1), #opToday.no-thumb .today-cr-tbl tr.today-cr-cpn-summary > td:nth-child(1), #opToday.no-thumb .today-cr-tbl tbody tr > td:nth-child(1){ position:static !important; width:auto !important; flex:0 0 auto !important; } #opToday.no-thumb .today-cr-tbl td[data-mk="thumb"]{display:none !important} #opToday.no-thumb .today-cr-tbl td[data-mk="creative_code"]{flex-basis:100% !important;margin-left:0 !important} #opToday.no-thumb .today-cr-tbl tr.today-cr-cpn-summary td:nth-child(2), #opToday.no-thumb .today-cr-tbl tr.today-cr-group-summary td:nth-child(2), #opToday.no-thumb .today-cr-tbl tbody.grp-summary tr td:nth-child(2){ flex:1 1 auto !important; margin-left:0 !important; } #opToday.no-thumb .today-cr-tbl td[data-mk="cost"], #opToday.no-thumb .today-cr-tbl td[data-mk="imp"]{margin-left:0 !important;flex-basis:calc(50% - 6px) !important} #opToday.no-thumb .today-cr-tbl td[data-mk="cv"], #opToday.no-thumb .today-cr-tbl td[data-mk="click"]{flex-basis:calc(50% - 6px) !important} #opToday.no-thumb .today-cr-tbl td[data-mk="profit"]{ margin-left:0 !important;flex-basis:calc(100% - 76px) !important; } } /* ============================================================ 🎛 media-ops — アラート対応画面 (2026-08-20 オブジェクト先行 UI) ============================================================ 方針: - 表を使わない。 1 行 = 1 カードの縦積み。 **横スクロールを作らない** - 操作はカードをタップ → モーダル (body 直下) - スマホはタッチターゲット 44px 以上、 モーダルは下からのシート ============================================================ */ #opAlerts .ops-scope{display:flex;flex-direction:column;gap:12px} #opAlerts .ops-head{display:flex;flex-direction:column;gap:2px} #opAlerts .ops-head-t{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap} #opAlerts .ops-muted{color:var(--tx3);font-size:11.5px} #opAlerts .ops-hint{flex:1 1 auto;text-align:right} #opAlerts .ops-topbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap} #opAlerts .ops-listbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--tx2)} #opAlerts .ops-listbar b{color:var(--tx);font-weight:700} #opAlerts .ops-list{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto;overflow-x:hidden} #opAlerts .ops-row{display:flex;align-items:stretch;gap:4px;min-width:0} #opAlerts .ops-row-d1{padding-left:16px} #opAlerts .ops-row-d2{padding-left:32px} /* 開閉ボタン。 ⚠️ 26px はスマホで押しにくい (ユーザー指摘 2026-08-21) → タップ領域を広げ、 グリフも大きくする。 空セルは同じ幅で桁を揃えるだけ */ #opAlerts .ops-caret{flex:0 0 auto;width:34px;min-height:40px;border:0;background:transparent; color:var(--tx2);font-size:16px;line-height:1;cursor:pointer;border-radius:7px; display:flex;align-items:center;justify-content:center} #opAlerts .ops-caret:hover{background:var(--bg3);color:var(--tx)} #opAlerts .ops-caret-empty{cursor:default} #opAlerts .ops-card{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left;padding:9px 11px;border:1px solid var(--bdr2);border-radius:8px;background:var(--bg2);color:var(--tx);cursor:pointer;font:inherit} #opAlerts .ops-card:hover{background:var(--bg3);border-color:var(--acc,#3b82f6)} #opAlerts .ops-card:focus-visible{outline:2px solid var(--acc,#3b82f6);outline-offset:1px} #opAlerts .ops-card-top{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap} #opAlerts .ops-card-sub{font-size:11px;color:var(--tx2);word-break:break-word} /* 指標グリッド: 折り返しで並ぶので **横スクロールが出ない** */ .ops-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:2px 8px;width:100%;min-width:0} .ops-metrics .ops-m{display:flex;flex-direction:column;min-width:0;line-height:1.35} .ops-metrics .ops-m i{font-style:normal;font-size:9px;color:var(--tx3);letter-spacing:.02em} .ops-metrics .ops-m b{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ops-metrics .ops-v-neg{color:#ef4444} .ops-metrics .ops-v-warn{color:#f59e0b} .ops-metrics-lg{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px 10px} .ops-metrics-lg .ops-m i{font-size:10px} .ops-metrics-lg .ops-m b{font-size:13px} .ops-modal-state{font-size:12px;color:var(--tx2);display:flex;align-items:center;gap:6px;flex-wrap:wrap} #opAlerts .ops-sortbar{display:inline-flex;gap:5px} .ops-mini-on{border-color:var(--acc,#3b82f6);background:var(--bg3);color:var(--tx)} /* ==== アラート設定: ルール一覧 (2026-08-21 テーブル → 1行1ルール) ==== 旧実装はグループごとに 9 列テーブルを作っていて、 1 グループ 1 ルールが普通なため 13 ルールで 11 個のヘッダが並んでいた。 しかも「ルール名」と「条件」は同じ 自動生成文字列の二重表示。 → 1 行に畳み、 詳細と操作は ⚙ のモーダルへ。 */ #opAlerts .alrt-list{display:flex;flex-direction:column} #opAlerts .alrt-row{display:flex;align-items:center;gap:10px;padding:9px 12px; border-top:1px solid var(--bdr);min-width:0} #opAlerts .alrt-row:first-child{border-top:0} #opAlerts .alrt-row:hover{background:rgba(120,120,140,.06)} #opAlerts .alrt-sw{flex:0 0 auto} #opAlerts .alrt-main{flex:1 1 auto;min-width:0;cursor:pointer} #opAlerts .alrt-name{font-size:12.5px;font-weight:600;line-height:1.45;word-break:break-word} #opAlerts .alrt-meta{font-size:10px;color:var(--tx3);margin-top:2px;display:flex; align-items:center;gap:5px;flex-wrap:wrap} #opAlerts .alrt-sep{color:var(--bdr2)} #opAlerts .alrt-memo{font-size:10px;color:var(--tx3);margin-top:2px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} #opAlerts .alrt-chip{flex:0 0 auto;font-size:10.5px;font-weight:700;border:1px solid; border-radius:10px;padding:2px 9px;white-space:nowrap} #opAlerts .alrt-gear{flex:0 0 auto;width:34px;min-height:34px;border:1px solid var(--bdr2); border-radius:7px;background:var(--bg3);color:var(--tx2);font-size:14px;cursor:pointer} #opAlerts .alrt-gear:hover{color:var(--tx);border-color:var(--acc,#3b82f6)} @media (max-width:768px){ /* スマホ: 状態チップを名前の上に回し、 ⚙ は指で押せる大きさにする */ #opAlerts .alrt-row{flex-wrap:wrap;gap:8px;padding:10px} #opAlerts .alrt-main{flex:1 1 100%;order:2} #opAlerts .alrt-sw{order:1} #opAlerts .alrt-chip{order:1;margin-left:auto} #opAlerts .alrt-gear{order:1;width:42px;min-height:42px;font-size:16px} } /* CR 名は押すと詳細モーダル。 カード本体 (操作メニュー) と区別が付くよう点線下線 */ #opAlerts .ops-name-cr{cursor:zoom-in;text-decoration:underline dotted;text-underline-offset:3px} #opAlerts .ops-name-cr:hover{color:#22d3ee} #opAlerts .ops-name{font-family:var(--font-mono);font-size:11.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto} #opAlerts .ops-lv{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.04em;border:1px solid var(--bdr2);border-radius:4px;padding:0 5px;color:var(--tx3)} /* 階層を色で見分ける (CPN=青 / ADG=紫 / CR=シアン)。 ラベルとカード左端の帯を 同じ色にして、 スマホでスクロール中でもどの階層を見ているか分かるようにする。 ⚠️ Meta の ADG は level='adset'、 YDA/TikTok は 'adgroup' なので同じ色に寄せる */ #opAlerts .ops-lv-cpn{color:#60a5fa;border-color:#60a5fa;background:rgba(96,165,250,.14)} #opAlerts .ops-lv-adg{color:#c084fc;border-color:#c084fc;background:rgba(192,132,252,.14)} #opAlerts .ops-lv-cr{color:#22d3ee;border-color:#22d3ee;background:rgba(34,211,238,.14)} #opAlerts .ops-lv-sp{color:#f59e0b;border-color:#f59e0b;background:rgba(245,158,11,.14)} #opAlerts .ops-card-cpn{border-left:3px solid #60a5fa} #opAlerts .ops-card-adg{border-left:3px solid #c084fc} #opAlerts .ops-card-cr{border-left:3px solid #22d3ee} #opAlerts .ops-card-cpn .ops-name{font-size:12.5px} #opAlerts .ops-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;display:inline-block} #opAlerts .ops-tag{flex:0 0 auto;font-size:10px;font-weight:700;border-radius:8px;padding:1px 7px;white-space:nowrap} #opAlerts .ops-tag-hit{background:#ef4444;color:#fff} #opAlerts .ops-tag-un{color:#f59e0b;border:1px solid #f59e0b} #opAlerts .ops-loading{display:flex;align-items:center;gap:8px;color:var(--tx2);font-size:12px;padding:14px 0} #opAlerts .ops-empty{color:var(--tx3);font-size:12px;padding:14px 0} #opAlerts .ops-err{color:#ef4444;font-size:12px} #opAlerts .ops-warnline{color:#ef4444;font-size:11.5px;font-weight:600;margin:6px 0 0} /* ---- アラート設定 決定版一覧 (2026-08-25): ミニマトリクス + トリアージ ---- */ #opAlerts .alrt-mx-wrap{border:1px solid var(--bdr);border-radius:8px;background:var(--bg2);padding:9px 12px;margin-bottom:12px} #opAlerts .alrt-mx-title{font-size:10px;color:var(--tx3);font-weight:700;letter-spacing:.04em;margin-bottom:6px} #opAlerts table.alrt-mx{border-collapse:collapse} #opAlerts .alrt-mx th{font-size:10px;color:var(--tx3);font-weight:600;padding:2px 5px;text-align:center} #opAlerts .alrt-mx tbody th{text-align:left;color:var(--tx2);font-size:11px;padding-right:10px;white-space:nowrap} #opAlerts .alrt-mx td{padding:2px 3px;text-align:center} #opAlerts .alrt-mx-none{color:var(--bdr2);font-size:11px} #opAlerts .alrt-mx-cell{border:none;background:var(--bg3);border-radius:4px;width:40px;height:22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} #opAlerts .alrt-mx-cell:hover{background:var(--bg4,rgba(120,130,160,.18))} #opAlerts td.alrt-mx-fire .alrt-mx-cell{background:rgba(239,68,68,.10);box-shadow:inset 0 0 0 1px rgba(239,68,68,.5)} #opAlerts .alrt-mx-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:10px;color:var(--tx3)} #opAlerts .alrt-mx-legend span{display:inline-flex;gap:4px;align-items:center} #opAlerts .alrt-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 auto} #opAlerts .alrt-dot-fire{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.20)} #opAlerts .alrt-dot-ok{background:#22c55e} #opAlerts .alrt-dot-off{background:transparent;border:1.5px solid var(--tx3)} #opAlerts .alrt-zone{border:1px solid var(--bdr);border-radius:8px;margin-bottom:12px;overflow:hidden;background:var(--bg2)} #opAlerts .alrt-zone-fire{border-color:rgba(239,68,68,.5)} #opAlerts .alrt-zoneh{display:flex;align-items:center;gap:8px;padding:8px 13px;font-weight:700;font-size:12.5px;background:rgba(120,130,160,.07)} #opAlerts .alrt-zone-fire .alrt-zoneh{background:rgba(239,68,68,.08);color:#ef4444} #opAlerts .alrt-zonecnt{font-weight:400;color:var(--tx3);font-size:11px} #opAlerts .alrt-zonetoggle{background:none;border:none;color:inherit;font:inherit;font-weight:700;cursor:pointer;display:flex;gap:8px;align-items:center;padding:0} #opAlerts .alrt-firebtn{display:inline-block;background:#ef4444;color:#fff;border-radius:6px;padding:6px 12px;font-size:11.5px;font-weight:700;text-decoration:none;white-space:nowrap;border:none;cursor:pointer;font-family:inherit;line-height:1.3} #opAlerts .alrt-gran{border:1px solid var(--bdr2);color:var(--tx2);border-radius:4px;padding:0 5px;font-size:9px;font-weight:700} #opAlerts .alrt-flash{animation:alrtFlash 1.6s ease-out 1} @keyframes alrtFlash{0%{box-shadow:inset 0 0 0 2px #3b82f6}100%{box-shadow:inset 0 0 0 2px transparent}} @media (prefers-reduced-motion: reduce){#opAlerts .alrt-flash{animation:none}} /* ---- 編集フォーム: パターン切替 / Chatwork 宛先 / 再通知 ---- */ #opAlerts .alrt-ptbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px;padding:8px 10px;border:1px solid var(--bdr);border-radius:6px;background:rgba(59,130,246,.05)} #opAlerts .alrt-ptchip{border:1px solid var(--bdr2);background:var(--bg3);color:var(--tx2);border-radius:14px;padding:3px 11px;font-size:11px;cursor:pointer;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #opAlerts .alrt-ptchip.on{border-color:#3b82f6;color:var(--tx);background:rgba(59,130,246,.14);font-weight:600} #opAlerts .alrt-ptchip.dim{opacity:.55} #opAlerts .alrt-ptadd{border:1px dashed var(--bdr2);background:none;color:var(--tx3);border-radius:14px;padding:3px 11px;font-size:11px;cursor:pointer} #opAlerts .alrt-rnopt{display:flex;gap:8px;align-items:flex-start;padding:7px 10px;border:1px solid var(--bdr);border-radius:6px;margin-bottom:6px;font-size:11.5px} #opAlerts .alrt-rnopt.on{border-color:#3b82f6;background:rgba(59,130,246,.06)} #opAlerts .alrt-rnopt input[type=checkbox]{margin-top:2px;accent-color:#3b82f6} #opAlerts .alrt-rnopt .d{color:var(--tx3);font-size:10.5px;margin-top:2px} /* ---- モック準拠 行・カード (2026-08-26) ---- */ #opAlerts .alrt-dot-warn{background:#f59e0b} #opAlerts .alrt-mchip{display:inline-block;color:#fff;padding:1px 8px;border-radius:10px;font-size:10px;font-weight:700;letter-spacing:.02em} #opAlerts .alrt-mgh{display:flex;align-items:center;gap:8px;padding:6px 13px;background:rgba(120,130,160,.06);border-top:1px solid var(--bdr);font-size:11px;color:var(--tx3)} #opAlerts .alrt-row2{display:flex;align-items:center;gap:9px;padding:7px 13px;border-top:1px solid var(--bdr);cursor:pointer;min-height:38px;flex-wrap:wrap} #opAlerts .alrt-row2:hover{background:var(--bg3)} #opAlerts .alrt-row2:focus-visible{outline:2px solid var(--acc,#3b82f6);outline-offset:-2px} #opAlerts .alrt-row2-dim{opacity:.55} #opAlerts .alrt-row2nm{font-weight:600;font-size:12px;min-width:130px} #opAlerts .alrt-conds{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap} #opAlerts .alrt-cchip{background:rgba(120,130,160,.14);border:1px solid var(--bdr2);border-radius:4px;padding:1px 7px;font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums} #opAlerts .alrt-cchip b{font-weight:700} #opAlerts .alrt-cop{color:var(--tx3);font-size:10px;padding:0 1px} #opAlerts .alrt-cop-or{color:#f59e0b;font-weight:700} #opAlerts .alrt-sp{flex:1} #opAlerts .alrt-ref7{font-size:10.5px;white-space:nowrap;font-variant-numeric:tabular-nums} #opAlerts .alrt-offnote{font-size:10.5px;color:var(--tx3);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #opAlerts .alrt-gear{background:none;border:1px solid var(--bdr2);color:var(--tx2);border-radius:5px;width:26px;height:26px;font-size:13px;line-height:1;flex:0 0 auto;cursor:pointer} #opAlerts .alrt-gear:hover{border-color:var(--acc,#3b82f6);color:var(--tx)} #opAlerts .alrt-fcard{padding:11px 14px;display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(239,68,68,.25)} #opAlerts .alrt-fcard-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap} #opAlerts .alrt-fcnm{font-size:14px;font-weight:700} #opAlerts .alrt-why{font-size:12px;color:var(--tx2);line-height:1.7} #opAlerts .alrt-actbtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center} #opAlerts .alrt-btn{border-radius:6px;padding:6px 13px;font-size:12px;font-weight:600;border:1px solid var(--bdr2);background:var(--bg3);color:var(--tx);cursor:pointer} #opAlerts .alrt-fcard-others{border:1px solid var(--bdr);border-radius:6px;overflow:hidden;margin-top:2px} #opAlerts .alrt-fcard-others .alrt-row2:first-child{border-top:none} /* ---- モック準拠 編集モーダル ---- */ #opAlerts .alrt-edov{position:fixed;inset:0;background:rgba(5,9,20,.72);display:flex;align-items:flex-start;justify-content:center;z-index:1000;padding:3vh 12px;overflow-y:auto} #opAlerts .alrt-edmo{background:var(--bg2);border:1px solid var(--bdr2);border-radius:10px;width:100%;max-width:680px;box-shadow:0 18px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;max-height:92vh} #opAlerts .alrt-edhead{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--bdr);flex-wrap:wrap} #opAlerts .alrt-edx{background:none;border:none;color:var(--tx3);font-size:17px;padding:2px 6px;cursor:pointer} #opAlerts .alrt-edbody{padding:13px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto} /* 🛑 flex 縦並びの子は既定 shrink=1 で、 max-height に収めようと各セクションが潰れて重なる (2026-08-26 実測「モーダルが崩れている」) */ #opAlerts .alrt-edbody > *{flex:0 0 auto} #opAlerts .alrt-edfoot{display:flex;gap:8px;padding:11px 16px;border-top:1px solid var(--bdr);align-items:center;flex-wrap:wrap} #opAlerts .alrt-savebtn{background:#3b82f6;border:1px solid #3b82f6;color:#fff;border-radius:6px;padding:7px 18px;font-size:12px;font-weight:700;cursor:pointer} #opAlerts .alrt-edname{background:var(--bg3);border:1px dashed var(--bdr2);border-radius:6px;padding:8px 12px;font-size:12.5px} #opAlerts .alrt-ednamecap{display:block;color:var(--tx3);font-size:10px;margin-bottom:2px} #opAlerts .alrt-new{display:inline-block;background:#f59e0b;color:#1a1204;font-size:9px;font-weight:800;border-radius:4px;padding:0 5px;letter-spacing:.05em;vertical-align:2px;margin-left:4px} #opAlerts .alrt-edsec{border:1px solid var(--bdr);border-radius:8px;overflow:hidden} #opAlerts .alrt-edsech{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--bg3);font-size:12px;font-weight:700;cursor:pointer;user-select:none} #opAlerts .alrt-edsecn{display:inline-flex;width:18px;height:18px;border-radius:50%;background:#3b82f6;color:#fff;font-size:10.5px;align-items:center;justify-content:center;flex:0 0 auto} #opAlerts .alrt-edsecsum{font-weight:400;color:var(--tx3);font-size:11px;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%} #opAlerts .alrt-edseccar{color:var(--tx3);font-size:10px} #opAlerts .alrt-edsecbd{padding:12px 13px;border-top:1px solid var(--bdr);display:none} #opAlerts .alrt-edsec.open .alrt-edsecbd{display:block} /* ---- 監視中 3 階層ツリー (2026-08-26): 媒体 → 案件 (開閉) → パターン ---- */ #opAlerts .alrt-prow{display:flex;align-items:center;gap:9px;padding:8px 13px;border-top:1px solid var(--bdr);cursor:pointer;min-height:38px;flex-wrap:wrap;user-select:none} #opAlerts .alrt-prow:hover{background:var(--bg3)} #opAlerts .alrt-prow:focus-visible{outline:2px solid var(--acc,#3b82f6);outline-offset:-2px} #opAlerts .alrt-caret{color:var(--tx3);font-size:11px;width:12px;flex:0 0 auto;text-align:center} #opAlerts .alrt-ptcount{font-size:10px;color:var(--tx3);border:1px solid var(--bdr2);border-radius:8px;padding:0 7px;white-space:nowrap} #opAlerts .alrt-ptrow{display:flex;align-items:flex-start;gap:8px;padding:6px 13px 6px 34px;border-top:1px solid var(--bdr);cursor:pointer;background:rgba(120,130,160,.035)} #opAlerts .alrt-ptrow:hover{background:var(--bg3)} #opAlerts .alrt-ptrow:focus-visible{outline:2px solid var(--acc,#3b82f6);outline-offset:-2px} #opAlerts .alrt-ptcorner{color:var(--tx3);font-size:11px;flex:0 0 auto;line-height:20px} #opAlerts .alrt-ptrow .alrt-gran{margin-top:2px} #opAlerts .alrt-conds-grow{flex:1;min-width:180px} #opAlerts .alrt-actchip{border:1px solid var(--bdr2);background:rgba(59,130,246,.10);color:var(--tx2);border-radius:9px;padding:1px 8px;font-size:10px;font-weight:600;white-space:nowrap;flex:0 0 auto;margin-top:1px} #opAlerts .alrt-actchip-stop{border-color:rgba(245,158,11,.6);background:rgba(245,158,11,.12);color:#f59e0b} #opAlerts .alrt-actchip-warn{border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.10);color:#ef4444} #opAlerts .alrt-ptrow .alrt-gear{width:24px;height:24px;font-size:12px} #opAlerts .alrt-prow-fire{cursor:default} #opAlerts .alrt-prow-fire:hover{background:transparent} #opAlerts .alrt-evrow:hover td{background:var(--bg3)} #opAlerts .alrt-evkid td{background:rgba(120,130,160,.05);border-top:1px dashed var(--bdr)} #opAlerts .ops-backtop{display:inline-block;font-size:13px;font-weight:700;color:#3b82f6;text-decoration:none;margin-bottom:10px;padding:6px 12px;border:1px solid var(--bdr2);border-radius:6px;background:var(--bg2)} #opAlerts .ops-backtop:hover{border-color:#3b82f6} /* --- モーダル (body 直下。 #opAlerts の再描画では消えない) --- */ .ops-modal-ov{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px} .ops-modal{width:min(460px,100%);max-height:88vh;overflow-y:auto;overflow-x:hidden;background:var(--bg2);border:1px solid var(--bdr2);border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.35);display:flex;flex-direction:column} .ops-modal-head{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border-bottom:1px solid var(--bdr);position:sticky;top:0;background:var(--bg2);z-index:1} .ops-modal-title{font-family:var(--font-mono);font-size:13px;font-weight:700;word-break:break-all;margin-left:6px} .ops-x{margin-left:auto;flex:0 0 auto;width:30px;height:30px;border:0;border-radius:6px;background:transparent;color:var(--tx2);font-size:15px;cursor:pointer} .ops-x:hover{background:var(--bg3)} .ops-modal-body{padding:13px 15px 16px;display:flex;flex-direction:column;gap:10px} .ops-dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:12.5px} .ops-dl dt{color:var(--tx3);white-space:nowrap} .ops-dl dd{margin:0;text-align:right;font-variant-numeric:tabular-nums} .ops-actbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px} .ops-act{flex:1 1 auto;min-width:120px;min-height:42px;padding:9px 14px;font-size:13px;font-weight:700;border:1px solid var(--bdr2);border-radius:8px;background:var(--bg3);color:var(--tx);cursor:pointer} .ops-act:disabled{opacity:.45;cursor:not-allowed} .ops-act-off{border-color:#ef4444;color:#ef4444} .ops-act-on{border-color:#22c55e;color:#22c55e} .ops-act-go{background:#3b82f6;border-color:#3b82f6;color:#fff} .ops-mini{min-height:38px;padding:6px 11px;font-size:12px;border:1px solid var(--bdr2);border-radius:6px;background:var(--bg3);color:var(--tx);cursor:pointer;white-space:nowrap} .ops-form{display:flex;flex-direction:column;gap:9px} .ops-form-t{margin:0;font-size:13px;font-weight:700} .ops-form input{width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--bdr2);border-radius:8px;background:var(--bg);color:var(--tx);font-size:16px;font-variant-numeric:tabular-nums} .ops-presets{display:grid;grid-template-columns:1fr 1fr;gap:7px} .ops-calc{margin:0;font-size:12.5px;font-variant-numeric:tabular-nums} .ops-result{border-left:3px solid #22c55e;background:var(--bg3);border-radius:0 8px 8px 0;padding:10px 12px;font-size:12px} .ops-result p{margin:0 0 4px} .ops-result p:last-child{margin:0} .ops-modal .ops-muted{color:var(--tx3);font-size:11.5px} @media (max-width:768px){ /* 下からのシート。 片手で親指が届く位置にボタンを寄せる。 max-height は 80vh: Chatwork アプリ内ブラウザは自前の丸ボタン (✕ 等) を 画面上部 ~10vh に浮かせるため、 92vh だとシート上端の ✕ がその真下に隠れて 閉じられなくなる (2026-08-27 ユーザー報告)。 上端を 20vh まで下げて回避 */ .ops-modal-ov{align-items:flex-end;padding:0} .ops-modal{width:100%;max-height:80vh;border-radius:14px 14px 0 0;border-bottom:0} .ops-act{min-width:0;flex:1 1 46%;min-height:46px} #opAlerts .ops-list{max-height:none} #opAlerts .ops-card{padding:11px} .ops-metrics{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))} .ops-metrics-lg{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))} #opAlerts .ops-name{font-size:12px} #opAlerts .ops-caret{width:44px;min-height:46px;font-size:20px} #opAlerts .ops-caret:not(.ops-caret-empty){background:var(--bg3);border:1px solid var(--bdr2)} #opAlerts .ops-caret-empty{width:14px} #opAlerts .ops-hint{display:none} #opAlerts .ops-row-d1{padding-left:10px} #opAlerts .ops-row-d2{padding-left:20px} } /* 通知履歴テーブル (アラートタブ最下部) — スマホでは字を詰めて横スクロール量を減らす */ @media (max-width:768px){ #opAlerts .admin-table{font-size:10.5px} #opAlerts .ops-scope p{word-break:break-word} } .ops-verdicts{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--bdr2);border-radius:8px;background:var(--bg3);font-size:12px} .ops-verdict{line-height:1.6} /* ★2026-09-02 当日データ: タイトル本文行 (サムネ ON 時のみ・折り返して全文) + 配信数値の t No チップ */ #opToday .cr-carry{display:inline-block;font-size:10px;color:var(--acc);margin-right:5px;padding:0 4px;border:1px solid var(--acc);border-radius:3px;vertical-align:1px;white-space:nowrap;opacity:.85} #opToday .cr-tno{display:inline-block;font-family:'Inter',sans-serif;font-size:10.5px;color:var(--tx3);margin-right:6px;padding:0 4px;border:1px solid var(--bdr2);border-radius:3px;vertical-align:1px;white-space:nowrap} #opToday tr.today-title-row td{padding:0 8px 8px;font-size:11.5px;line-height:1.5;color:var(--tx2);white-space:normal;word-break:break-word;border-top:0;vertical-align:top;text-align:left} #opToday .today-tbl tr.today-title-row td{width:auto} #opToday tr.today-title-row:hover td{background:transparent} #opToday.no-thumb tr.today-title-row{display:none} @media (max-width:768px){ #opToday .today-tbl tr.today-title-row{display:block;padding:0 0 6px} #opToday .today-tbl tr.today-title-row td{display:block;width:auto;grid-column:auto;grid-row:auto;border:0;padding:0 4px 4px} #opToday .today-cr-tbl tr.today-title-row{display:block;padding:0 10px 8px;margin-top:-4px} #opToday .today-cr-tbl tr.today-title-row td{display:block;border:0;padding:0} } /* ★2026-09-02 当日タブ (PC): 上部ブロックを縦横固定 → グループ群だけ内側で縦横スクロール 従来は「グループ列の超過分をウィンドウが横スクロール」する設計で、幅がビューポート分しか 無い sticky バー群 (ヘッダ・タブ・集計・チップ) が横スクロールで左へ流れて消えていた。 さらに sticky の top が固定値 (93/148/188/250) のため、チップが折り返すとズレていた。 #opToday を残りビューポート高の flex 縦積み (高さは JS _todayFitPanel が実測) にし、 .today-groups / .today-cr-groups を overflow:auto のスクロール枠にする。 group-h / 列ヘッダの sticky はその枠基準 (top:0 / 62) に付け直す。 */ @media (min-width:769px){ #opToday.today-fixed{display:flex;flex-direction:column;min-height:0;box-sizing:border-box} #opToday.today-fixed .today-subtabs, #opToday.today-fixed .today-bar, #opToday.today-fixed .today-filters{position:static;flex:0 0 auto} #opToday.today-fixed .today-groups, #opToday.today-fixed .today-cr-groups{flex:1 1 auto;min-height:0;overflow:auto;padding-bottom:8px} #opToday.today-fixed .today-group-h{top:0} #opToday.today-fixed .today-tbl-head{top:62px} /* 配信数値: 各グループの横スクロールを外枠 (.today-cr-groups) に統合 → 列ヘッダの sticky top と CR/CR No 列の sticky left が外枠基準で効く */ #opToday.today-fixed .today-cr-group{overflow:visible} #opToday.today-fixed .today-cr-tbl thead th{top:0} } /* 配信数値のタイトル行: 左 2 列 (サムネ〜CR No ≒ 212px) の幅で折り返す。CR 列と同じ sticky-left */ #opToday .today-cr-tbl tr.today-title-row td.title-cell{position:sticky;left:0;z-index:2;background:var(--bg2);max-width:212px;white-space:normal;word-break:break-word;padding:0 8px 8px 10px;border-right:1px solid var(--bdr2)} #opToday .today-cr-tbl tr.today-title-row td.title-fill{position:static;border-right:0;padding:0} @media (max-width:768px){ #opToday .today-cr-tbl tr.today-title-row td.title-cell{position:static;max-width:none;border-right:0;padding:0} #opToday .today-cr-tbl tr.today-title-row td.title-fill{display:none} } /* CR＆数値の段とタイトルの段の間の横線を消して 1 ブロックに見せる (区切りはタイトル段の下だけ) */ #opToday .today-tbl tr.has-title td, #opToday .today-cr-tbl tr.has-title td{border-bottom:0} #opToday .today-tbl tr.has-title td.thumb-cell{border-bottom:1px solid var(--bdr)} /* rowspan=2 のサムネ列は最下段の線を保つ */ /* ホバーは 2 段まとめて */ #opToday .today-tbl tr.has-title:hover + tr.today-title-row td, #opToday .today-cr-tbl tr.has-title:hover + tr.today-title-row td{background:var(--bg3)} #opToday .today-tbl tr:has(+ tr.today-title-row:hover) td, #opToday .today-cr-tbl tr:has(+ tr.today-title-row:hover) td{background:var(--bg3)} #opToday tr.today-title-row:hover td{background:var(--bg3)} /* ── 記事レビュー M5: 人の指摘 (ゲスト/社内) のピン・カード + 外部レビュアー画面 (2026-09-03) ── */ /* 招待リンクごとの色 (2026-09-10): 発行順に .hc0..hc7 を循環。--hc 未指定は従来の紫。 AI の指摘 (🔴 赤 / 🟡 橙) と紛れないよう、赤系・橙系はパレットに入れない。 */ .hc0{--hc:#8b5cf6} .hc1{--hc:#06b6d4} .hc2{--hc:#22c55e} .hc3{--hc:#ec4899} .hc4{--hc:#3b82f6} .hc5{--hc:#14b8a6} .hc6{--hc:#a3e635} .hc7{--hc:#f472b6} .ar-dot.human{background:var(--hc,#8b5cf6);border-color:color-mix(in srgb,var(--hc,#8b5cf6) 40%,#fff);color:#fff} .ar-dot.human.sel{box-shadow:0 0 0 3px color-mix(in srgb,var(--hc,#8b5cf6) 45%,transparent)} .ar-dot.inline{position:static;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:11px;margin-right:2px} .ar-dot.pending{background:#f59e0b;border-color:#fde68a;color:#111} .ar-hl.human{border-color:color-mix(in srgb,var(--hc,#8b5cf6) 75%,transparent);background:color-mix(in srgb,var(--hc,#8b5cf6) 12%,transparent)} .ar-hl.pending{border-style:dashed} .ar-hcard{border:1px solid var(--border-color,#2a3548);border-left:3px solid var(--hc,#8b5cf6);border-radius:6px;padding:8px 10px;margin:6px 0;font-size:13px;line-height:1.55} .ar-hcard.ai{border-left-color:#f59e0b} .ar-hcard.resolved{opacity:.55} .ar-hcard.sel{box-shadow:0 0 0 2px var(--hc,#8b5cf6)} .ar-htop{display:flex;gap:8px;align-items:center;margin-bottom:4px;flex-wrap:wrap} .ar-htop .ar-spc{flex:1} .ag-body-text{white-space:pre-wrap} tr.ar-dead td{opacity:.5} /* 外部レビュアー画面 */ .ag-body{margin:0} .ag-top{display:flex;gap:14px;align-items:baseline;padding:10px 16px;border-bottom:1px solid var(--border-color,#2a3548)} .ag-brand{font-weight:700;color:var(--accent-color,#4fc3f7)} .ag-title{font-size:13px;opacity:.8} .ag-root{margin:12px} .ag-head{padding:6px 4px 10px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} .ag-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px 16px 6px;margin:0 -16px;position:sticky;top:0;z-index:4;background:var(--bg)} /* 右ペインの中で上に固定 (2026-09-10)。左右の余白ぶん広げて下の行が透けないように */ .ag-split .ar-h2{margin-top:6px;padding-top:8px} /* ボタン行と水平線の間隔を詰める */ .ag-tools .ops-act{flex:0 0 auto;padding:5px 10px;font-size:12px} .ag-toggle{margin-left:auto;font-size:13px;display:flex;gap:6px;align-items:center;cursor:pointer} .ag-sheet.ag-edit{cursor:crosshair} .ag-sheet img{user-select:none;-webkit-user-drag:none} .ag-rubber{position:absolute;border:2px dashed #8b5cf6;background:rgba(139,92,246,.15);pointer-events:none} .ag-form{border:1px solid #8b5cf6;border-radius:8px;padding:10px;margin-bottom:12px;background:var(--card-bg,#1a2332)} .ag-form textarea{width:100%;min-height:90px;margin:6px 0;box-sizing:border-box} .ag-form .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .ag-form .ar-spc{flex:1} .ag-msg{padding:40px 16px;text-align:center;color:#ef4444} /* ── 記事レビュー: 動画は枠内で自動再生 (muted・loop・クリックで音) (2026-09-03) ── */ .ar-vslot{position:absolute;overflow:hidden;background:#000;z-index:1;border-radius:3px;pointer-events:none} .ar-vslot video{display:block;width:100%;height:100%;object-fit:contain} .ar-vslot.na{background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center} .ar-vna{font-size:11px;color:#fff;background:rgba(0,0,0,.55);padding:2px 8px;border-radius:10px} .ar-vmute{position:absolute;right:6px;bottom:6px;font-size:13px;background:rgba(0,0,0,.55);border-radius:10px;padding:1px 6px;pointer-events:auto;cursor:pointer} .ar-stbox{display:flex;flex-direction:column;align-items:flex-end;gap:2px} .ar-stnow{font-size:11px;font-weight:600} .ar-stnow.resolved{color:#22c55e} .ar-stnow.open{color:#f59e0b} /* 範囲指摘 (人) の枠: 太く・中を薄く塗って場所が分かるように (2026-09-03 ユーザー要望) */ .ar-hl.human{border:3px solid color-mix(in srgb,var(--hc,#8b5cf6) 90%,transparent);background:color-mix(in srgb,var(--hc,#8b5cf6) 22%,transparent);box-shadow:0 0 0 2px rgba(255,255,255,.35);opacity:1} .ar-hl.human.pending{border-style:dashed;background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.9)} .ar-mk.human{background:var(--hc,#8b5cf6);left:2px;right:2px;height:4px} .ar-hcard.jumpable{cursor:pointer} /* ゲスト画面の stage はミニマップ列を持たない */ .ag-split .ar-stage{grid-template-columns:510px minmax(210px,330px)} .ag-split .ar-endmark{grid-column:1 / -1} @media (max-width:980px){.ag-split .ar-stage{grid-template-columns:minmax(0,1fr)} .ar-stage{overflow-x:auto}} /* 欄外注釈 (人) と アコーディオン */ .ar-ann.human{border-left-color:var(--hc,#8b5cf6)} .ar-ann.human.resolved{opacity:.6} .ar-ann.human.sel{outline:2px solid var(--hc,#8b5cf6)} .ar-no.human{background:var(--hc,#8b5cf6)} .ar-hcard.ai.sel{box-shadow:0 0 0 2px #f59e0b} details.ar-acc > summary{font-weight:700;font-size:14px;cursor:pointer;padding:8px 0} details.ar-acc > summary small{font-weight:400;opacity:.75;margin-left:6px} /* 実物 HTML 表示 (sandbox iframe を 375px で描き AR_SHEET_W に拡大) */ .ar-htmlwrap{position:relative;width:510px;overflow:hidden;background:#fff;min-height:200px} .ar-htmlframe{position:absolute;left:0;top:0;border:0;display:block;background:#fff} .ar-modes{margin-left:auto;display:inline-flex;gap:4px} .ar-modes .ar-fbtn.on{font-weight:700} /* 自分のピン/範囲の移動 (ゲスト画面) */ .ar-dot.human.mine{cursor:move} .ar-hl.human.mine{pointer-events:auto;cursor:move} .ag-shield{position:absolute;inset:0;z-index:50;cursor:move;background:transparent} /* 範囲指摘のリサイズハンドル (2026-09-07): 自分の範囲の 4 隅。掴んだ角の対角を固定して大きさを変える */ .ar-hl.human.mine .ag-rh{position:absolute;width:11px;height:11px;background:#8b5cf6;border:2px solid #fff;border-radius:2px;box-sizing:border-box;opacity:.6;pointer-events:auto;z-index:2} .ar-hl.human.mine:hover .ag-rh{opacity:1} .ar-hl.human.mine .ag-rh.nw{left:-6px;top:-6px;cursor:nwse-resize} .ar-hl.human.mine .ag-rh.ne{right:-6px;top:-6px;cursor:nesw-resize} .ar-hl.human.mine .ag-rh.sw{left:-6px;bottom:-6px;cursor:nesw-resize} .ar-hl.human.mine .ag-rh.se{right:-6px;bottom:-6px;cursor:nwse-resize} .ag-shield.ag-shield-resize.nw,.ag-shield.ag-shield-resize.se{cursor:nwse-resize} .ag-shield.ag-shield-resize.ne,.ag-shield.ag-shield-resize.sw{cursor:nesw-resize} /* ライターカルテ (骨組み) */ .ar-ktable td{vertical-align:top} .ar-krow{cursor:pointer} .ar-krow:hover td{background:rgba(79,195,247,.06)} .ar-kx{display:inline-block;border:1px solid var(--border-color,#2a3548);border-radius:10px;padding:1px 7px;margin:1px 2px;font-size:12px} .ar-kx small{opacity:.7;margin-left:3px} .ar-kx.hi{border-color:#ef4444;color:#fca5a5} .ar-ksub{padding:6px 12px 10px;background:rgba(0,0,0,.12)} .ar-klink{display:inline-block;margin:2px 10px 2px 0;cursor:pointer;color:var(--accent-color,#4fc3f7)} .ar-klink small{color:var(--text-color,#c0cad6);opacity:.7;margin-left:4px} /* 招待リンク一覧 (2026-09-10): レビュアーの色チップと、反映を外した行 */ .ar-gchip{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--hc,#8b5cf6);margin-right:7px;vertical-align:-1px;flex:0 0 auto} .ar-grow.off td{opacity:.5} .ar-fbtn.on{background:color-mix(in srgb,var(--hc,#8b5cf6) 22%,transparent);border-color:color-mix(in srgb,var(--hc,#8b5cf6) 60%,transparent);color:inherit}