/* ============================================================ AutoTube Design System v1.0 (autotube-design-system.css) 全ページ共通スタイル。既存JSロジックには干渉しない。 使い方: 各ページの に ============================================================ */ /* ---------- 1. デザイントークン ---------- */ :root { --at-accent: #E50914; --at-bg: #FFFFFF; --at-bg-sub: #FAFAFC; --at-bg-thead: #F1F2F6; --at-bg-dark: #1A1A2E; --at-text: #1A1A1A; --at-text-body: #33333F; --at-text-sub: #55556A; --at-text-muted: #66667A; --at-text-faint: #9494A6; --at-border: rgba(0,0,0,0.08); --at-border-row: rgba(0,0,0,0.05); --at-border-input: rgba(0,0,0,0.18); --at-hover-row: rgba(0,0,0,0.04); --at-ok: #00A344; --at-ok-bg: rgba(0,163,68,0.12); --at-warn: #E68900; --at-warn-bg: rgba(255,152,0,0.12); --at-danger: #FF1744; --at-danger-bg: rgba(255,23,68,0.12); --at-info: #2464D9; --at-info-bg: rgba(41,121,255,0.10); /* 4指標（日本語表記: 露出/選択/消費/成果） */ --at-vec-exposure: #1976D2; --at-vec-exposure-g1: #2196F3; --at-vec-exposure-g2: #1565C0; --at-vec-choice: #2E7D32; --at-vec-choice-g1: #4CAF50; --at-vec-choice-g2: #2E7D32; --at-vec-consume: #EF6C00; --at-vec-consume-g1: #FF9800; --at-vec-consume-g2: #E65100; --at-vec-outcome: #7B1FA2; --at-vec-outcome-g1: #9C27B0; --at-vec-outcome-g2: #6A1B9A; /* AI席カラー */ --at-ai-claude: #7B1FA2; --at-ai-gpt: #2E7D32; --at-ai-gemini: #2464D9; --at-ai-grok: #E68900; --at-font: 'Noto Sans JP', sans-serif; --at-mono: 'Roboto Mono', monospace; --at-radius-card: 10px; --at-radius-ctl: 6px; --at-header-h: 48px; } /* ---------- 2. ベース ---------- */ html, body { margin: 0; padding: 0; background: var(--at-bg); color: var(--at-text); font-family: var(--at-font); font-size: 14px; } *, *::before, *::after { box-sizing: border-box; } a { color: var(--at-text); text-decoration: none; } a:hover { color: var(--at-accent); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #D0D0DC; border-radius: 4px; } @keyframes at-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes at-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes at-toast { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes at-shimmer{ from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes at-spin { to { transform: rotate(360deg); } } /* ---------- 3. 共通ヘッダー / フッター（autotube-header.jsが生成） ---------- */ .at-header { display: flex; align-items: center; gap: 14px; height: var(--at-header-h); padding: 0 16px; background: var(--at-bg); border-bottom: 1px solid var(--at-border); position: sticky; top: 0; z-index: 50; } .at-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .at-logo__mark { width: 26px; height: 18px; background: var(--at-accent); border-radius: 4px; display: grid; place-items: center; } .at-logo__mark::after { content: ""; width: 0; height: 0; margin-left: 2px; border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; } .at-logo__name { font-weight: 900; font-size: 15px; letter-spacing: 0.02em; color: var(--at-text); } .at-nav { display: flex; align-items: center; gap: 2px; height: 100%; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .at-nav::-webkit-scrollbar { display: none; } .at-nav a { display: flex; align-items: center; height: 100%; padding: 0 12px; font-size: 13px; color: var(--at-text-muted); border-bottom: 2px solid transparent; white-space: nowrap; } .at-nav a:hover { color: var(--at-text); } .at-nav a.active { color: var(--at-text); font-weight: 700; border-bottom-color: var(--at-accent); } .at-header__right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .at-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 500; } .at-chip i { width: 7px; height: 7px; border-radius: 50%; display: block; } .at-chip--alert { background: rgba(255,23,68,0.08); border: 1px solid rgba(255,23,68,0.25); color: var(--at-danger); } .at-chip--alert i { background: var(--at-danger); } .at-chip--ok { background: var(--at-ok-bg); border: 1px solid rgba(0,163,68,0.35); color: var(--at-ok); } .at-chip--ok i { background: var(--at-ok); animation: at-pulse 2s infinite; } .at-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--at-accent); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; } .at-footer { display: flex; align-items: center; gap: 16px; padding: 6px 16px; background: var(--at-bg); border-top: 1px solid var(--at-border); font-size: 11px; color: var(--at-text-faint); } .at-footer .mono, .at-mono { font-family: var(--at-mono); } .at-footer .num, .at-num { font-family: var(--at-mono); } .at-footer__right { margin-left: auto; } /* ---------- 4. ページ骨格 ---------- */ .at-page { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; animation: at-fadein 0.3s ease; } .at-titlebar { display: flex; align-items: center; gap: 12px; padding: 10px 16px 0 16px; flex-wrap: wrap; } .at-titlebar h1 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1; } .at-titlebar .desc { font-size: 12px; color: var(--at-text-muted); } .at-titlebar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .at-tabs { display: flex; gap: 2px; padding: 8px 16px 0 16px; border-bottom: 1px solid var(--at-border); overflow-x: auto; } .at-tabs button { background: transparent; color: var(--at-text-muted); font-weight: 400; border: none; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: var(--at-font); white-space: nowrap; } .at-tabs button.active { background: var(--at-bg); color: var(--at-text); font-weight: 700; border-bottom-color: var(--at-accent); } /* ---------- 5. カード / グリッド ---------- */ .at-card { background: var(--at-bg); border: 1px solid var(--at-border); border-radius: var(--at-radius-card); } .at-card--pad { padding: 10px 12px; } .at-card__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--at-border); } .at-card__title { font-size: 13px; font-weight: 700; color: var(--at-text); } .at-note { font-size: 10.5px; color: var(--at-text-faint); line-height: 1.5; } .at-grid { display: grid; gap: 10px; align-items: start; } .at-grid--12 { grid-template-columns: repeat(12, 1fr); } .at-grid--fit-160 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .at-grid--fit-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .at-grid--fit-250 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .span-3 { grid-column: span 3; min-width: 0; } .span-4 { grid-column: span 4; min-width: 0; } .span-5 { grid-column: span 5; min-width: 0; } .span-6 { grid-column: span 6; min-width: 0; } .span-7 { grid-column: span 7; min-width: 0; } .span-8 { grid-column: span 8; min-width: 0; } .span-12 { grid-column: span 12; min-width: 0; } /* KPIカード */ .at-kpi { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; } .at-kpi .label { font-size: 11px; color: var(--at-text-muted); } .at-kpi .value { font-family: var(--at-mono); font-size: 28px; font-weight: 700; line-height: 1; color: var(--at-text); } .at-kpi .unit { font-size: 11px; color: var(--at-text-faint); } .at-kpi .delta-up { color: var(--at-ok); } .at-kpi .delta-down { color: var(--at-danger); } .vec-exposure { border-top: 3px solid var(--at-vec-exposure-g1); } .vec-choice { border-top: 3px solid var(--at-vec-choice-g1); } .vec-consume { border-top: 3px solid var(--at-vec-consume-g1); } .vec-outcome { border-top: 3px solid var(--at-vec-outcome-g1); } /* ---------- 6. テーブル ---------- */ .at-table-wrap { overflow: auto; } .at-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .at-table thead th { position: sticky; top: 0; z-index: 2; background: var(--at-bg-thead); color: var(--at-text-muted); font-weight: 500; font-size: 11px; text-align: left; padding: 6px 10px; white-space: nowrap; user-select: none; } .at-table thead th.sortable { cursor: pointer; } .at-table thead th.num, .at-table td.num { text-align: right; font-family: var(--at-mono); } .at-table thead th.ctr, .at-table td.ctr { text-align: center; } .at-table tbody td { padding: 6px 10px; border-top: 1px solid var(--at-border-row); color: var(--at-text-body); } .at-table tbody tr:hover { background: var(--at-hover-row); } .at-table tbody tr.clickable { cursor: pointer; } .at-table .strong { color: var(--at-text); font-weight: 500; } .at-deprecated { text-decoration: line-through; color: var(--at-text-faint) !important; } /* ---------- 7. バッジ / ピル / ステータス ---------- */ .at-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; } .at-badge--ok { background: var(--at-ok-bg); color: var(--at-ok); } .at-badge--warn { background: var(--at-warn-bg); color: var(--at-warn); } .at-badge--danger { background: var(--at-danger-bg); color: var(--at-danger); } .at-badge--info { background: var(--at-info-bg); color: var(--at-info); } .at-badge--muted { background: rgba(0,0,0,0.06); color: var(--at-text-muted); } .at-tag { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px; white-space: nowrap; } /* ---------- 8. ボタン / 入力 ---------- */ .at-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--at-radius-ctl); font-size: 13px; cursor: pointer; font-family: var(--at-font); padding: 7px 16px; border: 1px solid transparent; } .at-btn--primary { background: var(--at-accent); color: #fff; border: none; font-weight: 700; } .at-btn--ghost { background: var(--at-bg); color: var(--at-text-body); border-color: var(--at-border-input); } .at-btn--ok { background: rgba(0,163,68,0.10); color: var(--at-ok); border-color: rgba(0,163,68,0.35); font-weight: 700; } .at-btn--danger-ghost { background: var(--at-bg); color: var(--at-danger); border-color: rgba(255,23,68,0.35); } .at-btn--sm { padding: 3px 12px; font-size: 11.5px; } .at-input, .at-select, .at-textarea { border: 1px solid var(--at-border-input); border-radius: var(--at-radius-ctl); padding: 7px 10px; font-size: 13px; color: var(--at-text); background: var(--at-bg); font-family: var(--at-font); } .at-input--mono { font-family: var(--at-mono); } .at-label { font-size: 12px; color: var(--at-text-muted); } .at-field { display: flex; flex-direction: column; gap: 4px; } input[type="range"].at-range { accent-color: var(--at-accent); } .at-chip-btn { background: var(--at-bg); color: var(--at-text-muted); border: 1px solid var(--at-border-input); padding: 3px 12px; border-radius: 99px; font-size: 12px; cursor: pointer; font-family: var(--at-font); } .at-chip-btn.active { background: var(--at-accent); color: #fff; border-color: var(--at-accent); } /* ---------- 9. 進捗 / スケルトン / スピナー ---------- */ .at-progress { height: 6px; background: rgba(0,0,0,0.08); border-radius: 3px; overflow: hidden; } .at-progress > i { display: block; height: 100%; background: var(--at-accent); border-radius: 3px; transition: width 0.5s ease; } .at-progress--ok > i { background: var(--at-ok); } .at-progress--info > i { background: var(--at-vec-exposure-g1); } .at-skeleton { border-radius: 4px; height: 11px; background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.06) 75%); background-size: 200% 100%; animation: at-shimmer 1.2s linear infinite; } .at-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(41,121,255,0.25); border-top-color: var(--at-info); animation: at-spin 0.8s linear infinite; } /* ---------- 10. トースト / モーダル ---------- */ .at-toast { position: fixed; right: 16px; bottom: 16px; z-index: 100; background: var(--at-bg-dark); color: #fff; border-radius: 8px; padding: 10px 16px; font-size: 13px; display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.25); animation: at-toast 0.25s ease; } .at-toast i { width: 8px; height: 8px; border-radius: 50%; background: #00C853; display: block; } .at-modal-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(15,15,26,0.5); display: grid; place-items: center; animation: at-fadein 0.2s ease; } .at-modal { background: var(--at-bg); border-radius: 12px; width: min(480px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; animation: at-toast 0.25s ease; } .at-modal__head { padding: 12px 16px; border-bottom: 1px solid var(--at-border); display: flex; align-items: center; gap: 8px; font-weight: 900; } .at-modal__body { padding: 12px 16px; } .at-modal__foot { padding: 10px 16px; border-top: 1px solid rgba(0,0,0,0.06); display: flex; justify-content: flex-end; gap: 8px; } /* ---------- 11. レスポンシブ ---------- */ @media (max-width: 1200px) { /* 12列→6列。span-8/span-4 のペアは 4:2 で横並びを維持（孤立折返し・死に余白を作らない） */ .at-grid--12 { grid-template-columns: repeat(6, 1fr); } .span-3, .span-4, .span-5 { grid-column: span 2; } .span-6 { grid-column: span 3; } .span-7, .span-8 { grid-column: span 4; } .span-12 { grid-column: span 6; } } @media (max-width: 768px) { .at-grid--12 { grid-template-columns: repeat(2, 1fr); } .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-12 { grid-column: span 2; } .at-titlebar .right { margin-left: 0; width: 100%; } .at-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 480px) { .at-grid--12, .at-grid--fit-160, .at-grid--fit-200, .at-grid--fit-250 { grid-template-columns: 1fr; } .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-12 { grid-column: span 1; } .at-page, .at-titlebar { padding-left: 10px; padding-right: 10px; } }