/* RECOG Design System v2 — cache-bust */ :root { /* Brand */ --brand-navy: #001951; --brand-navy-600: #0B2C7A; --brand-navy-50: #EEF0FB; --brand-navy-100: #DCE1F3; /* Neutrals (from Tailwind slate-like tokens used in file) */ --gray-0: #FFFFFF; --gray-50: #F3F4F6; --gray-100: #E5E7EB; --gray-200: #D1D5DB; --gray-300: #9CA3AF; --gray-900: #1F2937; /* Semantic colors */ --red-500: #DC2626; --red-50: #FEE2E2; --amber-500: #F59E0B; --amber-50: #FEF3C7; --teal-500: #0E9E8A; --teal-600: #1D9E75; --teal-50: #E6F7F3; --magenta-500:#C42D58; --magenta-50: #FCE7EF; --magenta-glow: rgba(196,45,88,.18); /* SaveBar 等の attention pulse 用の半透明アクセント */ --purple-500: #9747FF; --purple-50: #F1E8FF; /* Background tokens */ --bg-page: #FAFAFA; --bg-default: #FFFFFF; --bg-canvas: #F5F6F8; --bg-subtle: #F3F4F6; --bg-danger: #FEE2E2; --bg-unread: #EEF0FB; /* Interactive */ --int-hover: #E5E7EB; --int-selected: #E0E7FF; --int-brand: #001951; --int-brand-h: #0B2C7A; --int-disabled: #F3F4F6; /* Text tokens */ --text-primary: #1F2937; --text-secondary: #4B5563; --text-tertiary: #6B7280; --text-placeholder: #9CA3AF; --text-disabled: #D1D5DB; --text-brand: #001951; --text-danger: #DC2626; --text-success: #1D9E75; --text-warning: #B45309; /* Border */ --border-default: #D1D5DB; /* WCAG: 1.5:1 (内側 divider 用) */ --border-subtle: #E5E7EB; /* default より薄い区切り（modal header/footer 等） */ --border-strong: #9CA3AF; /* WCAG: 3.0:1 達成 (外枠・hover state 用) */ --border-focus: #001951; --border-brand: #001951; --border-danger: #DC2626; --border-disabled: #E5E7EB; /* Shadow (elevation) */ --shadow-1: 0 1px 2px rgba(0,25,81,.08), 0 0 0 1px rgba(0,0,0,.02); --shadow-2: 0 2px 6px rgba(0,25,81,.10), 0 0 0 1px rgba(0,0,0,.02); --shadow-3: 0 8px 24px rgba(0,25,81,.12), 0 2px 6px rgba(0,25,81,.08); --shadow-4: 0 4px 12px rgba(0,25,81,.10), 0 0 0 1px rgba(0,0,0,.02); --shadow-8: 0 8px 16px rgba(0,25,81,.10), 0 0 0 1px rgba(0,0,0,.02); --shadow-16:0 16px 32px rgba(0,25,81,.13), 0 0 0 1px rgba(0,0,0,.04); --shadow-24:0 24px 48px rgba(0,25,81,.16), 0 0 0 1px rgba(0,0,0,.04); --shadow-focus: 0 0 0 3px rgba(99,102,241,.25); /* Radius */ --r-2: 2px; --r-4: 4px; --r-8: 8px; /* Spacing (4px sub-unit, 8px unit) */ /* Type */ --ff-sans: 'Plus Jakarta Sans','Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',system-ui,sans-serif; --ff-display: 'Plus Jakarta Sans','Noto Sans JP',sans-serif; --ff-mono: 'JetBrains Mono','SFMono-Regular',Menlo,monospace; } /* ===================================================== Dark mode — カラートークンだけを上書き（全コンポーネントはトークン参照なので、ここを差し替えるだけで暗転する）。有効化: ===================================================== */ :root[data-theme="dark"] { /* Brand（暗背景でも視認できる中〜明インディゴ。solid bg+白文字／アクセント文字の両用） */ --brand-navy: #4F6BE0; --brand-navy-600: #6E86F0; --brand-navy-50: #20263B; /* 暗いインディゴ面（未読・選択チップ背景） */ --brand-navy-100: #2A3350; /* Neutrals */ --gray-0: #181B20; --gray-50: #1F232B; --gray-100: #2A2F38; --gray-200: #3A404B; --gray-300: #6B7280; --gray-900: #E6E9EE; /* Semantic（-50 背景は暗いトーンへ、-500 は暗背景向けに少し明るく） */ --red-500: #F26D6D; --red-50: #3A1F1F; --amber-500: #F0B23E; --amber-50: #382D12; --teal-500: #2BB7A2; --teal-600: #2BB7A2; --teal-50: #123029; --magenta-500:#E0598A; --magenta-50: #3A1F2B; --magenta-glow: rgba(224,89,138,.22); --purple-500: #B07DFF; --purple-50: #281E3A; /* Background */ --bg-page: #0F1216; --bg-default: #181B20; --bg-canvas: #14171C; --bg-subtle: #22262E; --bg-danger: #3A1F1F; --bg-unread: #20263B; /* Interactive */ --int-hover: #262B33; --int-selected: #2A3350; --int-brand: #4F6BE0; --int-brand-h: #6E86F0; --int-disabled: #22262E; /* Text */ --text-primary: #E6E9EE; --text-secondary: #B6BDC8; --text-tertiary: #8A93A0; --text-placeholder: #6B7280; --text-disabled: #4B515C; --text-brand: #8AA2FF; --text-danger: #F26D6D; --text-success: #2BB7A2; --text-warning: #F0B23E; /* Border */ --border-default: #2E343D; --border-subtle: #23272F; --border-strong: #434A55; --border-focus: #6E86F0; --border-brand: #4F6BE0; --border-danger: #F26D6D; --border-disabled: #2A2F38; /* Shadow（暗背景では黒ベースで深く） */ --shadow-1: 0 1px 2px rgba(0,0,0,.40); --shadow-2: 0 2px 6px rgba(0,0,0,.45); --shadow-3: 0 8px 24px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.40); --shadow-4: 0 4px 12px rgba(0,0,0,.45); --shadow-8: 0 8px 16px rgba(0,0,0,.50); --shadow-16:0 16px 32px rgba(0,0,0,.55); --shadow-24:0 24px 48px rgba(0,0,0,.60); --shadow-focus: 0 0 0 3px rgba(110,134,240,.35); } :root[data-theme="dark"] body { background: var(--bg-page); } /* ハードコードの白ガラス面はトークンに乗らないので dark で個別に暗転 */ :root[data-theme="dark"] .subpanel { background: rgba(24,27,32,0.96); border-color: rgba(255,255,255,0.05); border-right-color: var(--border-default); box-shadow: 8px 9px 24px rgba(0,0,0,.40), inset 0 0 0 2px rgba(255,255,255,.04); } :root[data-theme="dark"] .gh { background: rgba(20,23,28,0.92); } /* ダークモード：ワードマークを明色インク版へ差し替え（HTML はそのまま、content で置換） */ :root[data-theme="dark"] .gh-logo img, :root[data-theme="dark"] .dn-brand__img { content: url("/assets/brand/logo-long-dark.svg"); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--ff-sans); font-size: 14px; line-height: 1.5; color: var(--text-primary); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--text-brand); } a:hover { text-decoration: underline; } /* ============ Layout ============ */ .app { display: grid; grid-template-columns: 240px minmax(0,1fr); min-height: 100vh; } .side { position: sticky; top: 0; align-self: start; height: 100vh; overflow: auto; border-right: 1px solid var(--border-default); background: var(--bg-default); padding: 24px 16px; } .side .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; border-bottom: 1px solid var(--border-default); margin-bottom: 12px; } .side .brand h1 { font-size: 15px; margin: 0; font-weight: 700; letter-spacing: .02em; } .side .brand p { font-size: 11px; margin: 0; color: var(--text-tertiary); font-family: var(--ff-mono); } .side .group { margin-top: 18px; } .side .group h4 { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 8px 8px; } .side a.nav { display: block; padding: 6px 10px; border-radius: 6px; color: var(--text-secondary); text-decoration: none; font-size: 13px; } .side a.nav:hover { background: var(--int-hover); color: var(--text-primary); text-decoration: none; } .main { padding: 48px 56px 96px; max-width: 1200px; } header.page-head { display: flex; gap: 24px; align-items: flex-end; border-bottom: 1px solid var(--border-default); padding-bottom: 32px; margin-bottom: 48px; } header.page-head h1 { font-family: var(--ff-display); font-size: 56px; line-height: 1; letter-spacing: -0.02em; margin: 0; font-weight: 800; } header.page-head p { color: var(--text-tertiary); margin: 0 0 6px; max-width: 520px; } header.page-head .badge { margin-left: auto; font-family: var(--ff-mono); font-size: 11px; color: var(--text-tertiary); padding: 4px 8px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--bg-default); } section.sec { margin-bottom: 80px; scroll-margin-top: 24px; } section.sec > h2 { font-family: var(--ff-display); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 700; margin: 0 0 8px; } section.sec > h3 { font-family: var(--ff-display); font-size: 32px; letter-spacing: -0.01em; margin: 0 0 8px; font-weight: 700; } section.sec > p.lead { color: var(--text-secondary); max-width: 680px; margin: 0 0 24px; } .sub { font-family: var(--ff-display); font-size: 18px; font-weight: 700; letter-spacing: -0.005em; margin: 32px 0 12px; } .sub small { color: var(--text-tertiary); font-family: var(--ff-mono); font-size: 12px; font-weight: 500; margin-left: 10px; } /* ============ Tokens ============ */ .grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .g6 { grid-template-columns: repeat(6, minmax(0,1fr)); } .g8 { grid-template-columns: repeat(8, minmax(0,1fr)); } .tok { background: var(--bg-default); border: 1px solid var(--border-default); border-radius: var(--r-4); padding: 14px; display: flex; flex-direction: column; gap: 10px; } .tok .swatch { height: 72px; border-radius: var(--r-4); border: 1px solid rgba(0,0,0,0.06); } .tok .name { font-weight: 600; font-size: 13px; } .tok .mono { font-family: var(--ff-mono); font-size: 11px; color: var(--text-tertiary); } .tok .desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .color-row { display: grid; grid-template-columns: 120px 1fr 160px 120px; gap: 16px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-default); } .color-row:last-child { border-bottom: 0; } .color-row .dot { width: 32px; height: 32px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.06); } .color-row .label { font-weight: 600; font-size: 13px; } .color-row .role { color: var(--text-secondary); font-size: 12px; } .color-row .hex { font-family: var(--ff-mono); font-size: 12px; color: var(--text-tertiary); } .card-panel { background: var(--bg-default); border: 1px solid var(--border-default); border-radius: var(--r-4); overflow: hidden; } /* Type sample */ .type-row { display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--border-default); } .type-row:last-child { border-bottom: 0; } .type-row .meta { font-family: var(--ff-mono); font-size: 11px; color: var(--text-tertiary); line-height: 1.7; } .type-row .meta b { color: var(--text-secondary); font-weight: 600; } /* Radius */ .radius-tok { padding: 16px; background: var(--bg-default); border: 1px solid var(--border-default); border-radius: var(--r-4); display:flex; flex-direction:column; align-items:center; gap:10px; } .radius-tok .shape { width:96px; height:64px; background: var(--brand-navy-50); border: 1px solid var(--border-brand); } .radius-tok .shape.r-100 { border-radius: 9999px; width:64px; } /* Shadow cards */ .elev-tok { padding: 24px; background: var(--bg-default); border-radius: var(--r-4); display: flex; flex-direction: column; align-items: center; gap: 12px; justify-content: center; min-height: 140px; border: 1px solid rgba(0,0,0,0.03); } .elev-label { font-family: var(--ff-mono); font-size: 11px; color: var(--text-tertiary); } /* Spacing */ .spacing-row { display: grid; grid-template-columns: 80px 120px 80px 1fr; align-items: center; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--border-default); } .spacing-row:last-child{ border-bottom: 0; } .spacing-box { height: 16px; background: repeating-linear-gradient(135deg, rgba(246,89,72,.14), rgba(246,89,72,.14) 4px, transparent 4px, transparent 8px); border: 1px dashed rgb(246,89,72); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--ff-sans); font-weight: 600; font-size: 14px; line-height: 1; padding: 0 16px; height: 40px; border-radius: var(--r-4); border: 1px solid transparent; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; white-space: nowrap; text-decoration: none; } /* Anchors styled as buttons inherit no underline in any state. (.btn--link is the only variant that intentionally enables underline on hover.) */ a.btn:not(.btn--link):hover, a.btn:not(.btn--link):focus, a.btn:not(.btn--link):active { text-decoration: none; } .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn--primary { background: var(--int-brand); color: #fff; border-color: var(--int-brand); box-shadow: var(--shadow-1); } .btn--primary:hover { background: var(--int-brand-h); border-color: var(--int-brand-h); } .btn--primary:active { background: #0a1f5e; } .btn--secondary { background: var(--bg-default); color: var(--text-primary); border-color: var(--border-strong); } .btn--secondary:hover { background: var(--int-hover); } .btn--ghost { background: transparent; color: var(--text-primary); border-color: transparent; } .btn--ghost:hover { background: var(--int-hover); } .btn--danger { background: var(--red-500); color: #fff; border-color: var(--red-500); } .btn--danger:hover { filter: brightness(.92); } .btn--link { background: transparent; color: var(--text-brand); border: 0; padding: 0; height: auto; text-decoration: none; } .btn--link:hover { text-decoration: underline; } .btn[disabled], .btn.is-disabled { background: var(--int-disabled); color: var(--text-disabled); border-color: var(--border-disabled); cursor: not-allowed; box-shadow: none; } /* display:inline-flex が UA default [hidden]{display:none} を上書きするので明示 */ .btn[hidden] { display: none; } /* Loading state — spinner overlays the button label */ .btn.is-loading { position: relative; color: transparent !important; pointer-events: none; } .btn.is-loading .ic { visibility: hidden; } .btn.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: #fff; animation: btn-spin .6s linear infinite; } .btn--secondary.is-loading::after, .btn--ghost.is-loading::after { color: var(--text-secondary); } @keyframes btn-spin { to { transform: rotate(360deg); } } .btn.xs { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 4px; } .btn.sm { height: 32px; padding: 0 12px; font-size: 13px; } .btn.md { height: 40px; } .btn.lg { height: 48px; padding: 0 20px; font-size: 15px; } .btn.xl { height: 56px; padding: 0 24px; font-size: 16px; } .btn.icon-only { width: 40px; padding: 0; } /* Icon sizing inside .btn (Lucide with .ic class) */ .btn .ic { width: 16px; height: 16px; flex: none; } .btn.xs .ic { width: 14px; height: 14px; } .btn.sm .ic { width: 14px; height: 14px; } .btn.lg .ic { width: 18px; height: 18px; } .btn.xl .ic { width: 20px; height: 20px; } /* ---------- SplitButton ---------- メインアクション + 隣接メニュートリガー。中身は 2 つの独立した button で、外枠 .sbtn-group が radius/border/shadow を担当し、内側の .sbtn-main と .sbtn-trigger は border 無しで divider を共有する。 */ .sbtn-group { display: inline-flex; align-items: stretch; position: relative; border-radius: var(--r-4); vertical-align: middle; } .sbtn-group .sbtn-main, .sbtn-group .sbtn-trigger { border-radius: 0; border: 0; box-shadow: none; margin: 0; } /* 外枠側で border/radius/shadow を描画（主ボタンの装飾を継承） */ .sbtn-group .sbtn-main { border-top-left-radius: inherit; border-bottom-left-radius: inherit; } .sbtn-group .sbtn-trigger { border-top-right-radius: inherit; border-bottom-right-radius: inherit; padding: 0; width: 40px; flex: 0 0 auto; position: relative; } /* Size sync — trigger width follows height */ .sbtn-group .sbtn-main.xs + .sbtn-trigger, .sbtn-group .sbtn-trigger.xs { width: 28px; } .sbtn-group .sbtn-main.sm + .sbtn-trigger, .sbtn-group .sbtn-trigger.sm { width: 32px; } .sbtn-group .sbtn-main.lg + .sbtn-trigger, .sbtn-group .sbtn-trigger.lg { width: 48px; } .sbtn-group .sbtn-main.xl + .sbtn-trigger, .sbtn-group .sbtn-trigger.xl { width: 56px; } /* Divider — 擬似要素で 1px 線。色はバリアントごとに上書き */ .sbtn-group .sbtn-trigger::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: rgba(255, 255, 255, .3); pointer-events: none; } /* Secondary / Ghost 系は暗い divider */ .sbtn-group .sbtn-main.btn--secondary + .sbtn-trigger::before, .sbtn-group .sbtn-main.btn--ghost + .sbtn-trigger::before { background: var(--border-default); } /* Secondary は外枠に枠線（単体の secondary ボタンと同じ縁取り。primary は地色で縁が立つので不要） */ .sbtn-group--secondary { border: 1px solid var(--border-strong); } /* Rounded / Pill 対応 — 外枠の radius をそのまま継承 */ .sbtn-group.is-pill { border-radius: 9999px; } .sbtn-group.is-rounded { border-radius: 12px; } /* Focus ring は片側のみに表示される（button 単位の outline） */ .sbtn-group .sbtn-main:focus-visible, .sbtn-group .sbtn-trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus); z-index: 1; } /* Open 状態（メニュー展開中）— トリガー側のみ暗めに */ .sbtn-group .sbtn-trigger.is-open { background: rgba(0, 0, 0, .15); } .sbtn-group .sbtn-main.btn--secondary + .sbtn-trigger.is-open, .sbtn-group .sbtn-main.btn--ghost + .sbtn-trigger.is-open { background: var(--int-hover); } .sbtn-group .sbtn-trigger.is-open .lucide[data-name="chevron-down"] { transform: rotate(180deg); } .sbtn-group .sbtn-trigger .lucide[data-name="chevron-down"] { transition: transform .12s ease; } /* Button shapes */ .btn--pill { border-radius: 9999px; } .btn--rounded { border-radius: 12px; } .btn--circle { border-radius: 9999px; width: 40px; height: 40px; padding: 0; flex: none; } .btn--circle.xs { width: 28px; height: 28px; } .btn--circle.sm { width: 32px; height: 32px; } .btn--circle.lg { width: 48px; height: 48px; } .btn--circle.xl { width: 56px; height: 56px; } /* Icon button (circle) */ .iconbtn { width: 40px; height: 40px; border-radius: 9999px; display: inline-grid; place-items: center; background: var(--bg-default); border: 1px solid var(--border-default); cursor: pointer; color: var(--text-secondary); transition: background .12s ease, border-color .12s ease, color .12s ease; } .iconbtn:hover { background: var(--int-hover); color: var(--text-primary); } /* フラット：枠・背景なし（丸で囲わない）。ホバー時だけ角丸の背景。ツールチップは併用可。 */ .iconbtn.is-flat { background: none; border-color: transparent; border-radius: 6px; } .iconbtn.is-flat:hover { background: var(--int-hover); color: var(--text-primary); } .iconbtn.xs { width: 28px; height: 28px; } .iconbtn.sm { width: 32px; height: 32px; } .iconbtn.lg { width: 48px; height: 48px; } /* Icon sizing inside .iconbtn — tuned so the glyph doesn't feel heavy */ .iconbtn .ic { width: 18px; height: 18px; } .iconbtn.xs .ic { width: 14px; height: 14px; } .iconbtn.sm .ic { width: 16px; height: 16px; } .iconbtn.lg .ic { width: 20px; height: 20px; } .iconbtn.brand { background: var(--int-brand); border-color: var(--int-brand); color: #fff; } .iconbtn.brand:hover { background: var(--int-brand-h); border-color: var(--int-brand-h); } /* Destructive variant — delete / trash 用。 hover で red 系に。 */ .iconbtn.is-danger { color: var(--red-500); } .iconbtn.is-danger .ic { color: var(--red-500); } .iconbtn.is-danger:hover { background: var(--red-50); border-color: #FDC7C7; color: var(--red-600, #B42121); } .iconbtn.is-danger:hover .ic { color: var(--red-600, #B42121); } /* ==== IconBox ========================================================= 色付き box にアイコンを 1 つ並べる小型インジケータ。用途：リスト先頭のロール / カテゴリ / チャネル種別の視覚アンカー。サイズ：s-24 / s-28 / s-32 / s-36 (既定) / s-40 トーン：is-navy (既定) / is-teal / is-danger / is-warning / is-subtle 注意：.iconbtn (操作可能なボタン) とは別物。.iconbox は静的な装飾。 ======================================================================= */ .iconbox { width: 36px; height: 36px; border-radius: var(--r-4); background: var(--brand-navy-50); color: var(--brand-navy); display: grid; place-items: center; flex: none; } .iconbox .ic { width: 16px; height: 16px; } .iconbox.s-24 { width: 24px; height: 24px; } .iconbox.s-24 .ic { width: 12px; height: 12px; } .iconbox.s-28 { width: 28px; height: 28px; } .iconbox.s-28 .ic { width: 14px; height: 14px; } .iconbox.s-32 { width: 32px; height: 32px; } .iconbox.s-32 .ic { width: 16px; height: 16px; } .iconbox.s-40 { width: 40px; height: 40px; } .iconbox.s-40 .ic { width: 20px; height: 20px; } /* Tones */ .iconbox.is-navy { background: var(--brand-navy-50); color: var(--brand-navy); } .iconbox.is-teal { background: var(--teal-50); color: var(--teal-600); } .iconbox.is-danger { background: var(--red-50); color: var(--red-500); } .iconbox.is-warning { background: var(--amber-50); color: var(--text-warning); } .iconbox.is-subtle { background: var(--bg-subtle); color: var(--text-secondary); } /* ==== HelpIcon =========================================================== ラベルの右に小さく置く "?" アイコン。クリック / ホバー / フォーカスで既存の .tt (Tooltip) コンポーネントを開く。専門用語・固有名詞・複雑な設定の補足説明に使用。用法: スクリプト: assets/js/help-tooltip.js を