/* ============================================================ VIBE MAKER デザインシステム 正本: docs/DESIGN_SYSTEM.md ／ 準拠: Vibe-Maker/AGENTS.md（melta UI） - ライトモードが既定。 でダークへ切替 - 色の意味論は厳守: ネガ=赤 / ポジ=青（緑は使わない）/ 注視=黄マーカー - スペーシングは4px基準・8px推奨 - 本文と背景のコントラストは WCAG 2.1 AA（4.5:1）以上 ============================================================ */ :root{ /* ---- 3層構造（背景 → サーフェス → テキスト） ---- */ --bg:#f4f6f8; --surface:#ffffff; --surface-2:#eef1f4; --surface-3:#e4e8ed; --line:#dde2e8; --line-strong:#c6ced8; --text:#1a1d21; /* 対背景 15:1 */ --text-2:#3d444d; /* 対背景 9:1 */ --text-muted:#5f6874; /* 対背景 4.9:1（AA） */ /* ---- 意味色（AGENTS.md の色の意味論） ---- */ --brand:#c5171e; /* TANRENレッド。ブランドと「注意」の兼用 */ --brand-ink:#ffffff; --brand-weak:rgba(197,23,30,.10); --negative:#c5171e; /* ネガティブ＝赤 */ --positive:#1d4ed8; /* ポジティブ＝青（緑は使わない） */ --positive-weak:rgba(29,78,216,.12); --marker:#fde047; /* 注視＝黄マーカー。1画面に1〜2箇所まで */ /* ---- スライド等の「白い紙」を背景から浮かせるための下地 ---- */ --stage:#e9ecf0; --paper:#ffffff; --paper-shadow:0 1px 3px rgba(16,24,40,.10), 0 8px 24px rgba(16,24,40,.08); --paper-shadow-hover:0 2px 6px rgba(16,24,40,.14), 0 12px 32px rgba(16,24,40,.12); --card-shadow:0 1px 2px rgba(16,24,40,.06); --overlay:rgba(28,32,38,.88); --scrollbar:#c3cad3; /* ---- 余白（4px基準・8px推奨） ---- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; /* ---- 角丸 ---- */ --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:999px; /* ---- 文字 ---- */ --font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; --font-mono:"SF Mono","Menlo","Consolas",monospace; --fs-xs:11px; --fs-sm:12.5px; --fs-md:15px; --fs-lg:17px; --fs-xl:21px; --fs-2xl:28px; --lh:1.85; /* ---- 動き ---- */ --ease:cubic-bezier(.2,.7,.3,1); --dur:170ms; } :root[data-theme="dark"]{ --bg:#0d0f12; --surface:#14171c; --surface-2:#1a1e25; --surface-3:#212630; --line:#262b33; --line-strong:#39404b; --text:#e8eaed; --text-2:#c8ccd4; --text-muted:#8a929e; --brand:#e0393f; /* 暗背景では少し明るくしてコントラストを確保 */ --brand-weak:rgba(224,57,63,.14); --negative:#e0393f; --positive:#60a5fa; --positive-weak:rgba(96,165,250,.16); --stage:#0d0f12; --paper:#ffffff; /* スライドは白のまま（原本の見た目を変えない） */ --paper-shadow:none; --paper-shadow-hover:0 0 0 1px var(--line-strong); --card-shadow:none; --overlay:rgba(5,6,8,.94); --scrollbar:#2c323b; } /* ============================================================ ベース ============================================================ */ *{box-sizing:border-box} html,body{margin:0} body{ background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--fs-md); line-height:var(--lh); -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} img{max-width:100%} code{ font-family:var(--font-mono);font-size:.86em; background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-sm);padding:1px 5px; } pre{ font-family:var(--font-mono);font-size:12.5px;line-height:1.7; background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-md);padding:var(--s4);overflow-x:auto; } pre code{background:none;border:0;padding:0} hr{border:0;border-top:1px solid var(--line);margin:var(--s5) 0} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:5px;border:2px solid var(--bg)} ::-webkit-scrollbar-track{background:transparent} /* 見出し階層は必ず視覚化する（のっぺりさせない） */ h1{font-size:var(--fs-2xl);line-height:1.4;margin:0 0 var(--s3);letter-spacing:.02em} h2{font-size:var(--fs-xl);line-height:1.5;margin:var(--s6) 0 var(--s3)} h3{font-size:var(--fs-lg);line-height:1.6;margin:var(--s5) 0 var(--s2)} /* ============================================================ レイアウト ============================================================ */ .vm-wrap{max-width:1180px;margin:0 auto;padding:0 var(--s5)} .vm-wrap-narrow{max-width:860px;margin:0 auto;padding:0 var(--s5)} .vm-stack > * + *{margin-top:var(--s4)} .vm-row{display:flex;align-items:center;gap:var(--s3)} .vm-spacer{margin-left:auto} .vm-grid{display:grid;gap:var(--s4)} .vm-grid-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .vm-grid-tiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} /* ============================================================ ヘッダー ============================================================ */ .vm-header{ height:56px;display:flex;align-items:center;gap:var(--s4); padding:0 var(--s4);background:var(--surface); border-bottom:1px solid var(--line);position:relative;z-index:30; } .vm-logo{font-weight:700;letter-spacing:.1em;font-size:14px;white-space:nowrap} .vm-logo b{color:var(--brand)} .vm-header nav{display:flex;gap:var(--s1);overflow-x:auto} .vm-navlink{ padding:var(--s2) var(--s3);border-radius:var(--r-md); font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap; } .vm-navlink:hover{background:var(--surface-2);color:var(--text)} .vm-navlink[aria-current="page"]{background:var(--brand);color:var(--brand-ink);font-weight:600} /* ============================================================ ボタン ============================================================ */ .vm-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); padding:10px var(--s4);border-radius:var(--r-md); font-size:14px;font-weight:600;border:1px solid transparent; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease); } .vm-btn-primary{background:var(--brand);color:var(--brand-ink)} .vm-btn-primary:hover{filter:brightness(1.08)} .vm-btn-secondary{background:var(--surface);border-color:var(--line-strong);color:var(--text)} .vm-btn-secondary:hover{background:var(--surface-2)} .vm-btn-ghost{color:var(--text-muted);padding:var(--s2) var(--s3);font-weight:400;font-size:var(--fs-sm)} .vm-btn-ghost:hover{background:var(--surface-2);color:var(--text)} .vm-btn-oauth{ background:#fff;color:#1f2328;border-color:#d4dae1; box-shadow:0 1px 2px rgba(16,24,40,.08); } .vm-btn-oauth:hover{background:#f1f3f5} .vm-btn-oauth svg{width:18px;height:18px;flex:none} .vm-btn[disabled]{opacity:.5;cursor:not-allowed} .vm-btn-block{width:100%} /* ============================================================ カード ============================================================ */ .vm-card{ background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--card-shadow); } .vm-card-pad{padding:var(--s5)} .vm-card-link{ display:flex;flex-direction:column;gap:var(--s2); transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .vm-card-link:hover{ transform:translateY(-2px);border-color:var(--line-strong); box-shadow:0 4px 12px rgba(16,24,40,.10); } .vm-card-head{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);font-size:15px;font-weight:600} .vm-card-body{padding:var(--s5)} .vm-card-foot{padding:var(--s4) var(--s5);border-top:1px solid var(--line)} /* 型ごとの色の帯（コンテンツ種別を一目で見分ける） */ .vm-type-bar{height:3px;border-radius:var(--r-lg) var(--r-lg) 0 0} .vm-type-lecture{background:var(--brand)} .vm-type-tool{background:#334155} .vm-type-skill{background:#7c3aed} .vm-type-sop{background:#0891b2} .vm-type-asset{background:#b45309} .vm-type-corpus{background:#4338ca} /* ============================================================ チップ・バッジ ============================================================ */ .vm-chip{ display:inline-flex;align-items:center;gap:var(--s1); font-size:var(--fs-xs);color:var(--text-muted); background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-full);padding:3px 10px;white-space:nowrap; } .vm-chip-btn{cursor:pointer;transition:all var(--dur) var(--ease)} .vm-chip-btn:hover{border-color:var(--line-strong);color:var(--text)} .vm-chip-btn[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600} .vm-badge{ display:inline-block;font-size:var(--fs-xs);font-weight:700; border-radius:var(--r-sm);padding:2px 8px; } .vm-badge-positive{background:var(--positive-weak);color:var(--positive)} .vm-badge-negative{background:var(--brand-weak);color:var(--negative)} .vm-badge-neutral{background:var(--surface-2);border:1px solid var(--line);color:var(--text-muted)} /* 注視させたい最重要箇所（1画面に1〜2箇所まで） */ .vm-mark{ background:linear-gradient(transparent 62%, var(--marker) 62%); padding:0 2px;font-weight:600; } /* ============================================================ テーブル ============================================================ */ .vm-table-wrap{overflow-x:auto} .vm-table{width:100%;border-collapse:collapse;font-size:13.5px} .vm-table th,.vm-table td{ padding:11px var(--s4);text-align:left; border-bottom:1px solid var(--line);white-space:nowrap; } .vm-table th{ font-size:var(--fs-xs);letter-spacing:.06em;color:var(--text-muted); font-weight:600;position:sticky;top:0;background:var(--surface); } .vm-table td.num{text-align:right;font-variant-numeric:tabular-nums} .vm-table tr:last-child td{border-bottom:0} .vm-table tbody tr:hover td{background:var(--surface-2)} /* ============================================================ フォーム ============================================================ */ .vm-field{display:flex;flex-direction:column;gap:6px} .vm-label{font-size:var(--fs-sm);color:var(--text-2);font-weight:600} .vm-input{ width:100%;padding:10px var(--s3);font:inherit;font-size:14px; background:var(--surface);color:var(--text); border:1px solid var(--line-strong);border-radius:var(--r-md); } .vm-input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)} .vm-help{font-size:var(--fs-sm);color:var(--text-muted)} .vm-error{font-size:var(--fs-sm);color:var(--negative);font-weight:600} /* ============================================================ 状態表示 ============================================================ */ .vm-empty{ display:grid;place-items:center;text-align:center; padding:var(--s8) var(--s5);color:var(--text-muted); } .vm-empty strong{display:block;color:var(--text);font-size:15px;margin-bottom:var(--s2)} .vm-progress{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden} .vm-progress > i{display:block;height:100%;background:var(--positive);transition:width var(--dur) var(--ease)} .vm-notice{ border:1px solid var(--line);border-left:3px solid var(--brand); background:var(--surface-2);border-radius:var(--r-lg); padding:var(--s4) var(--s5);font-size:14px; } /* ============================================================ 「白い紙」（スライド画像・資料） ============================================================ */ .vm-paper{ background:var(--paper);border:1px solid var(--line); border-radius:var(--r-md);box-shadow:var(--paper-shadow); transition:box-shadow var(--dur) var(--ease); } .vm-paper:hover{box-shadow:var(--paper-shadow-hover)} /* ============================================================ アクセシビリティ ============================================================ */ :focus-visible{outline:2px solid var(--brand);outline-offset:2px} .vm-sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } @media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* ============================================================ レスポンシブ ============================================================ */ @media (max-width:767px){ .vm-wrap,.vm-wrap-narrow{padding:0 var(--s4)} h1{font-size:22px} .vm-grid-cards{grid-template-columns:1fr} }