/* DGS デザインシステム。トークンは DiHuCo デザインガイドライン v20(3〜5章)に準拠。 CODH サイト(codh.rois.ac.jp)の配色・フォントを継承する。 */ :root { /* ── 面(Scholarly Register: 温かみのある「紙」の地に文書を組む) ── */ --color-bg: #FBFAF6; /* ページ地 = ごく淡い温白(印刷物の紙感) */ --color-surface: #FFFFFF; /* カード・本文面など、地から持ち上げる面 */ --color-bg-secondary: #F2EFE7; /* セクション帯・コード地(地よりわずかに濃い紙) */ /* ── 文字 ── */ --color-text: #1C1B18; /* 本文 */ --color-text-light: #514D45; /* 補助テキスト */ --color-text-muted: #6E6960; /* 控えめテキスト(紙地で AA) */ --color-border: #E4DFD3; /* 紙地に合う温かいヘアライン */ --color-border-strong:#D3CCBC; /* ── ブランド: CODH の黄色 + 藍(継承) ── */ --color-primary: #FFEC00; /* CODH ブランド黄。ヘッダ・規矩線・要点に。 */ --color-primary-dark: #C5B600; --color-primary-light: #FFF7C2; /* セカンダリ(CODH フッターのダークネイビー) */ --color-secondary: #3F415E; --color-secondary-light: #DEDBE3; --color-secondary-muted: #9A95A4; /* ブランドの藍(DGS ロゴ)= 見出し・構造色の基調 */ --color-brand-ink: #1F3A5C; --color-ink: #1F3A5C; /* ── リンク(藍寄り。紙地で AA、ブランド藍と調和) ── */ --color-link: #11507F; --color-link-hover: #0B3354; --color-link-visited: #5B3A7A; /* 記事タイプ(白文字とも AA) */ --color-usecase: #0369A1; /* Use Case */ --color-bestpractice: #047857; /* Best Practice */ --color-issues: #7C3AED; /* Issues */ /* 機能カラー(記事タイプとは別系統) */ --color-success: #16803D; --color-warning: #B45309; --color-error: #B91C1C; --color-info: #0E7490; --color-hero-overlay: rgba(0, 0, 0, 0.45); --header-height: 52px; /* ── 書体: Source 超族 + Noto JP。見出し・本文に明朝/セリフ、UI に sans、コードに mono。 文書・読書のために設計された一貫した系で、学術サイトに相応しい品位を与える。 ── */ --font-serif: 'Source Serif 4', 'Noto Serif JP', Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif; --font-sans: 'Source Sans 3', 'Noto Sans JP', -apple-system, "Hiragino Kaku Gothic ProN", sans-serif; --font-code: "Source Code Pro", "Noto Sans Mono", "Menlo", "Consolas", monospace; --font-body: var(--font-sans); /* UI 既定 */ --font-heading: var(--font-serif); /* タイプスケール(本文 17px 基準、緩やかな比) */ --step--1: 0.85rem; --step-0: 1.0625rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: 2.1rem; /* 後方互換エイリアス: 既存クラスが参照する旧トークンを新トークンへ写像する。 これによりテンプレートを総書き換えせずにデザイン刷新を伝播できる。 */ --fg: var(--color-text); --muted: var(--color-text-muted); --accent: var(--color-link); --border: var(--color-border); --bg-code: var(--color-bg-secondary); } * { box-sizing: border-box; } body { margin: 0; color: var(--color-text); background: var(--color-bg); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 見出しはセリフ(明朝)= 文書としての品位。色はブランドの藍。 */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-ink); font-weight: 600; line-height: 1.3; } code, pre, kbd, samp { font-family: var(--font-code); } a { color: var(--color-link); text-underline-offset: 0.15em; } a:hover { color: var(--color-link-hover); } a:visited { color: var(--color-link-visited); } :focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; } /* 共通ボタン(マストヘッド等の行動喚起)。角丸は控えめ(編集物の規矩)。 */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; padding: 0.62rem 1.4rem; border-radius: 2px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .btn-primary { background: var(--color-primary); color: var(--color-ink); border-color: var(--color-primary-dark); } .btn-primary:hover, .btn-primary:visited { color: var(--color-ink); } .btn-primary:hover { background: var(--color-primary-dark); } .btn-ghost { background: transparent; color: var(--color-link); border-color: var(--color-border-strong); } .btn-ghost:hover { background: var(--color-surface); border-color: var(--color-ink); color: var(--color-ink); } /* `hidden` 属性は常に非表示にする。display を指定した要素(例: .site-user-menu の display:flex)は author 規則で UA の [hidden]{display:none} に勝ってしまい、 JS で hidden にしても消えない(ログアウト後にドロップダウンが残る不具合)。 */ [hidden] { display: none !important; } /* ヘッダ(ガイドライン5.1)。CODH のブランド黄色の帯を、藍の規矩線で締める。 */ .site-header { display: flex; align-items: center; gap: 1.5rem; padding: 0.55rem 1.75rem; background: var(--color-primary); border-bottom: 2px solid var(--color-ink); } .site-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; } .site-logo { display: block; width: 30px; height: 30px; border-radius: 4px; } .site-title { font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem; line-height: 1.15; letter-spacing: 0.01em; color: var(--color-ink); text-decoration: none; } .site-nav { display: flex; gap: 1.4rem; } .site-nav a { font-family: var(--font-sans); color: var(--color-ink); text-decoration: none; font-size: 0.92rem; font-weight: 600; padding-bottom: 2px; border-bottom: 2px solid transparent; } .site-nav a:hover { color: var(--color-ink); border-bottom-color: var(--color-ink); } .site-nav a:visited { color: var(--color-ink); } .content { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem 3rem; } /* フッタ(ガイドライン5.1)。CODH のダークネイビー。版・DOI は版ページに置く。 黄の細線でブランドを締める(ヘッダの黄と呼応)。 */ .site-footer { margin-top: 4rem; padding: 2.75rem 2rem; background: var(--color-secondary); color: var(--color-secondary-muted); font-family: var(--font-sans); font-size: 0.9rem; border-top: 3px solid var(--color-primary); } .site-footer a { color: #fff; font-weight: normal; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); } .site-footer a:hover { color: #fff; border-bottom-color: var(--color-primary); } .site-footer a:visited { color: #fff; } .footer-org { color: #fff; line-height: 1.85; } /* 権利・規約への導線。組織名の群とは役割が違うので、細い罫で仕切って間を取る。 ここに在った「アクセス日」の群(.footer-citation)を外した際、その群が担っていた 仕切りを引き継いだ ―― アクセス日は公開日が無いときの代替であって足すものではなく、 DGS は公開後に本文が変わらないので参照点は公開日で足りる(#804)。 */ .site-footer .footer-links { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.83rem; } .site-footer .copyright { margin-top: 1.5rem; color: var(--color-secondary-muted); } /* 一覧 = 編集物の「総目次」。セリフの見出しリンク + 右端に日付(台帳のような整列)。 */ .article-list { list-style: none; padding: 0; margin: 0; } .article-item { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--color-border); } /* バッジとタイトルを 1 つの flex アイテムにまとめ、長いタイトルの折り返しでバッジが 別行へ離れないようにする(#386 コメント)。min-width:0 で内部テキストが折り返せる。 */ .article-item-title { flex: 1 1 auto; min-width: 0; } /* 記事ID(引用・照会の鍵)。タイプバッジとタイトルの間に、識別子らしく等幅・弱い色で。 一覧・トップ・検索結果で同じ見え方にするため、この 1 つのクラスを共用する。 */ .article-item-id { margin-right: 0.5rem; color: var(--color-text-muted); font-family: var(--font-code); font-size: 0.82rem; white-space: nowrap; } /* 一覧のタグ(横断導線)。flex-basis:100% でタイトル行の下に折り返し、日付は タイトルと同じ行に残す。チップの見え方は共通の .tag 規則に委ねる。 */ .article-item-tags { flex: 0 0 100%; margin-top: 0.35rem; } .article-link { font-family: var(--font-serif); color: var(--color-ink); text-decoration: none; font-size: 1.12rem; line-height: 1.4; } .article-link:hover { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; } .article-link:visited { color: var(--color-ink); } .badge { display: inline-block; margin-left: 0.6rem; padding: 0.14em 0.5em; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; color: #fff; background: var(--color-text-muted); border-radius: 2px; vertical-align: 0.1em; } /* 前置バッジ(#386)。タイトル等の前に置くバッジは右側に間隔を取る(既定の後置 margin は打ち消す)。 */ .badge-lead { margin-left: 0; margin-right: 0.5rem; } /* 記事タイプの色分け(ガイドライン5.2)。 */ .badge.usecase { background: var(--color-usecase); } .badge.bestpractice { background: var(--color-bestpractice); } .badge.issues { background: var(--color-issues); } .date { margin-left: auto; padding-left: 0.75rem; color: var(--color-text-muted); font-family: var(--font-sans); font-size: 0.83rem; font-variant-numeric: tabular-nums; } .empty, .filter { color: var(--muted); } /* 個別記事 */ .article-meta { margin: 0.5rem 0 1.5rem; color: var(--muted); font-size: 0.9rem; } .article-meta .tags { margin-left: 0.5rem; } .source-url { margin-left: 0.5rem; } /* タグ = 主題による横断導線。素のアクセント色テキストでは、ただのリンクに見えて タグに見えなかった(#570)。丸みの強い枠付きチップにして「タグらしさ」を出す。 一覧・個別記事・レビュー面で同じ見え方にするため、この 1 つの規則を共用する。 */ .tag { display: inline-block; margin-right: 0.35rem; padding: 0.06rem 0.55rem; font-family: var(--font-sans); font-size: 0.78rem; line-height: 1.65; color: var(--muted); background: var(--color-surface); border: 1px solid var(--border); border-radius: 999px; text-decoration: none; } /* リンクのタグだけアクセント色にする(レビュー面の非リンク表示と役割を分ける)。 */ a.tag { color: var(--accent); } a.tag:hover { border-color: var(--accent); background: var(--bg-code); } /* キーワード = 記事内容の説明ラベル(非リンク)。タグ(丸いチップ)と見た目を分け、 役割の違いを示す: 角のある枠線付きの灰色チップにする。 */ .article-meta .keywords { margin-top: 0.4rem; } .kw-label { margin-right: 0.4rem; } .keyword { display: inline-block; margin-right: 0.3rem; padding: 0 0.4rem; font-size: 0.8rem; color: var(--muted); background: var(--bg-code); border: 1px solid var(--border); border-radius: 3px; } /* 記事本文・版本文 = 長文読書。セリフ(明朝)でゆったり組む。 */ .article-body, .edition-chapter, .edition-prose, .handbook-intro { font-family: var(--font-serif); font-size: 1.07rem; line-height: 1.85; } .article-body h2 { margin-top: 2.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--color-border); scroll-margin-top: 1rem; } .article-body h3 { margin-top: 1.8rem; } /* 本文の画像。⚠ 規則が無いと 1280px の画像が原寸で出て、**ページ全体が横スクロールする** (2026-08-28 の本番実測: body.scrollWidth 1601 > innerWidth 1366、本文欄は 760px)。 height: auto は、将来 width/height 属性を吐くようになったときに縦横比を保つため。 幅の狭い画像は中央に置く。 */ .article-body img { display: block; max-width: 100%; height: auto; margin: 1.5rem auto; } .article-body pre { background: var(--bg-code); padding: 0.8rem 1rem; overflow-x: auto; border-radius: 3px; border: 1px solid var(--color-border); font-size: 0.92rem; } .article-body code { background: var(--bg-code); padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.92em; } .article-body pre code { background: none; padding: 0; } /* 列の多い表は本文幅を超える。表自体を横スクロールの箱にして、ページ全体が横に 流れないようにする(max-content で列幅は内容に合わせ、max-width で本文幅に収める)。 桁揃えの class はレンダラが Markdown の ``|---:|`` から付ける(#795)。 */ .article-body table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1rem 0; font-size: 0.97rem; } .article-body .ta-left { text-align: left; } .article-body .ta-center { text-align: center; } .article-body .ta-right { text-align: right; } /* 和文は 1 文字まで縮められるので、下限が無いと表は横スクロールに届く前に 縦書きのように潰れる(欧文前提の overflow-x だけでは効かない)。列に読める幅の 下限を与えて、超えた分をスクロールに逃がす。 */ .article-body th, .article-body td { border: 1px solid var(--color-border); padding: 0.45rem 0.65rem; min-width: 5.5em; } .article-body th { background: var(--bg-code); font-family: var(--font-sans); } .article-body blockquote { margin: 1.2rem 0; padding: 0.4rem 1.1rem; border-left: 3px solid var(--color-primary); color: var(--color-text-light); } .related { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1rem; } .related ul { padding-left: 1.2rem; } .rel-type { color: var(--muted); font-size: 0.85rem; } /* 管理画面・レビュー(ナビは admin/base.html の左サイドバー = editorial_dashboard.css) */ /* 「渡さなかった記事」など、既定は畳んでおく補助リスト(管理面の診断材料)。 */ .admin-inline-list { list-style: none; padding-left: 0; margin: 0.4rem 0 0; } .admin-inline-list li { padding: 0.15rem 0; font-size: 0.9rem; } .admin-table { border-collapse: collapse; width: 100%; } .admin-table th, .admin-table td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; } .admin-table th { background: var(--bg-code); } /* レビュー URL セル: td は table-cell のまま(行の高さを他セルと揃える)、 中身の「開く」リンクとコピー用ボタンを横並び+間隔で置く。 */ .review-url-cell { white-space: nowrap; } .review-url-cell a { margin-right: 0.5rem; } .review-url-cell a, .review-url-cell .copy-url { vertical-align: middle; } /* 由来講演エディタ(記事編集): ラベル付きフィールドのカード行。 */ .talk-row { display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; align-items: flex-end; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-code); margin-bottom: 0.6rem; } /* .admin label { display:block } を上回るため .talk-row 子孫で指定する。 */ .talk-row .talk-field { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; flex: 1 1 9rem; } .talk-row .talk-field > span { font-size: 0.72rem; color: var(--color-text-muted); letter-spacing: 0.02em; } /* .admin を足して editorial_dashboard.css の汎用 input 規則(同順位・後読み)に勝たせる。 講演行は 1 行に多くの欄を並べるので、admin 既定より一段コンパクトなままにする。 */ .admin .talk-row .talk-field input { width: 100%; box-sizing: border-box; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-family: var(--font-sans); font-size: 0.9rem; background: #fff; } .talk-row .talk-field-wide { flex: 2.2 1 15rem; } .talk-row .talk-field-date { flex: 0 0 8.5rem; } .talk-row .talk-del { align-self: flex-end; flex: 0 0 auto; } /* 確認判定セル(外部レビュー): 判定表示 + 記録フォームをコンパクトにまとめる (列幅を占有しすぎないよう、記録フォームを幅制限し、理由欄は次行へ折り返す)。 */ #sec-review .admin-table th { white-space: nowrap; } .confirm-when { margin-left: 0.4rem; color: var(--color-text-muted); font-size: 0.82rem; } .confirm-note-shown { display: block; margin-top: 0.15rem; color: var(--color-text-muted); font-size: 0.82rem; } .confirm-set { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.45rem; max-width: 13rem; } .confirm-set select, .confirm-set input { padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; font-family: var(--font-sans); background: #fff; } .confirm-set select { flex: 0 0 auto; } .confirm-set input { flex: 1 1 100%; box-sizing: border-box; } /* 理由欄は独立行(セルを広げない) */ .confirm-set button { flex: 0 0 auto; } .admin section { margin: 1.5rem 0; } .admin label { display: block; margin: 0.4rem 0; } .actions { margin: 0.8rem 0; display: flex; gap: 0.5rem; } .msg { color: var(--color-success); } .error { color: var(--color-error); } .review-comments { max-width: 760px; margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1rem; } .review-comments ul { list-style: none; padding: 0; } .review-comments li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); } /* チャット(M6)。会話ログ(吹き出し)と入力欄(コンポーザ)を明確に分ける典型的な設計。 */ /* --- 会話ログ(トランスクリプト面) --- */ .chat-messages { max-width: 760px; border: 1px solid var(--border); border-radius: 10px; background: var(--color-bg-secondary); padding: 1rem; min-height: 16rem; overflow-y: auto; margin-bottom: 0.8rem; display: flex; flex-direction: column; gap: 0.9rem; } /* 全画面アプリ型(page-chat): ページは固定し、会話ログだけがスクロールする = スクロールバー 1 本。 body を縦フレックスにしてヘッダの下を本文が埋め、その中で会話ログ(.chat-messages)が伸縮する。 */ body.page-chat { min-height: 100dvh; display: flex; flex-direction: column; } body.page-chat .content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } body.page-chat #chat-area { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } body.page-chat .chat-messages { flex: 1 1 auto; min-height: 0; } .chat-empty { margin: auto; color: var(--muted); font-size: 0.9rem; text-align: center; } /* --- 吹き出し: ユーザは右(紺)、アシスタントは左(淡灰) --- */ .chat-message { display: flex; flex-direction: column; max-width: 85%; } .chat-user { align-self: flex-end; align-items: flex-end; } .chat-assistant { align-self: flex-start; align-items: flex-start; } .chat-role { font-size: 0.72rem; color: var(--muted); margin: 0 0.25rem 0.2rem; } /* 回答したモデルの識別子。役割ラベルより一段弱く、等幅で識別子らしく見せる。 */ .chat-model { font-family: var(--font-code); opacity: 0.75; } /* 会話ログは読み物ではなく UI 面。既定の本文(17px)のままだと、他の画面の文字より 一段大きく見える。吹き出しと入力欄を 0.95rem に揃える。 */ .chat-message .chat-body { padding: 0.55rem 0.85rem; border-radius: 14px; font-size: 0.95rem; line-height: 1.65; } /* 回答は Markdown なので見出し・段落が入る。ページ見出しの大きさのままだと吹き出しの 中で浮くため、本文とほぼ同じ大きさに落とし、上下端の余白は詰める。 */ .chat-body :is(h1, h2, h3, h4, h5, h6) { font-size: 1rem; margin: 0.7rem 0 0.3rem; } .chat-body > :first-child { margin-top: 0; } .chat-body > :last-child { margin-bottom: 0; } .chat-user .chat-body { background: var(--color-secondary); color: #fff; border-bottom-right-radius: 4px; } .chat-user .chat-body a { color: #fff; } .chat-assistant .chat-body { background: #fff; color: var(--color-text); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .chat-sources { font-size: 0.82rem; color: #555; margin-top: 0.4rem; align-self: flex-start; } .chat-access-date { color: #888; } /* 応答待ちのインジケータ(送信〜最初のトークン)。文言が穏やかに明滅する。 */ .chat-thinking { color: var(--muted); font-style: italic; animation: chat-pulse 1.2s ease-in-out infinite; } @keyframes chat-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .chat-thinking { animation: none; } } /* AI生成の初回通知 = info 系の通知(ガイドライン5.7)。ブランド黄色とは別系統にする。 */ .ai-generated-first-notice { max-width: 760px; font-size: 0.85rem; color: var(--color-text-light); background: #e8f6f9; border: 1px solid #b6e3ec; border-left: 3px solid var(--color-info); border-radius: 6px; padding: 0.6rem 0.8rem; } /* --- 入力欄(コンポーザ): 一目で「ここに入力」と分かる枠つきの白いボックス --- */ .chat-composer { max-width: 760px; display: flex; gap: 0.5rem; align-items: flex-end; border: 1px solid var(--color-primary-dark); border-radius: 12px; background: #fff; padding: 0.5rem 0.5rem 0.5rem 0.8rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07); } .chat-composer textarea { flex: 1; border: none; background: transparent; resize: vertical; font-family: inherit; font-size: 0.95rem; line-height: 1.5; padding: 0.35rem 0; min-height: 2.4rem; outline: none; } /* 送信ボタンは検索の送信ボタンと同じブランド primary 色に統一(#386 系のUI整合)。 */ .chat-composer button { align-self: stretch; padding: 0 1.2rem; border: 1px solid var(--color-primary-dark); border-radius: 8px; background: var(--color-primary); color: var(--color-ink); font-weight: 600; cursor: pointer; } .chat-composer button:hover { background: var(--color-primary-dark); } .chat-composer button:disabled { opacity: 0.55; cursor: progress; } /* 公開キーワード検索(M5/M8、段階2ステップ5) */ .site-search { margin-left: auto; } .site-search input { font-family: var(--font-sans); padding: 0.35rem 0.6rem; border: 1px solid var(--color-ink); border-radius: 2px; background: #fff; } .site-auth { display: flex; align-items: center; gap: 0.6rem; } .site-auth button { font-family: var(--font-sans); padding: 0.3rem 0.75rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: 1px solid var(--color-secondary); background: var(--color-secondary); color: #fff; border-radius: 2px; } .site-auth button:hover { background: #2d2f45; } .site-user { font-size: 0.85rem; color: var(--color-ink); } /* アカウントドロップダウン(表示名 → 表示名の変更 + ログアウト)。 */ .site-user-menu { position: relative; display: flex; } .site-user-trigger { display: inline-flex; align-items: center; gap: 0.35rem; } .site-user-caret { font-size: 0.7rem; line-height: 1; } .site-user-dropdown { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 60; min-width: 240px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); padding: 0.7rem; } .site-user-email { font-size: 0.78rem; color: var(--color-text-muted); word-break: break-all; margin-bottom: 0.6rem; } .site-user-field { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; } .site-user-field label { font-size: 0.78rem; font-weight: 600; color: var(--color-text-light); } .site-user-field input { font-family: var(--font-sans); font-size: 0.9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--color-border-strong); border-radius: 3px; background: #fff; color: var(--color-text); } .site-user-status { font-size: 0.75rem; color: var(--color-text-muted); min-height: 1em; } .site-user-dropdown hr { border: none; border-top: 1px solid var(--color-border); margin: 0.6rem 0; } .site-user-logout { width: 100%; } .search-form { max-width: 760px; display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .search-form input[type="search"] { flex: 1; font-family: var(--font-sans); font-size: 0.95rem; padding: 0.6rem 0.7rem; border: 1px solid var(--color-border-strong); border-radius: 2px; background: var(--color-surface); } .search-form button { font-family: var(--font-sans); font-weight: 600; padding: 0 1.2rem; border: 1px solid var(--color-primary-dark); border-radius: 2px; background: var(--color-primary); color: var(--color-ink); cursor: pointer; } .search-form button:hover { background: var(--color-primary-dark); } .search-meta, .list-meta { color: var(--color-text-muted); font-size: 0.9rem; } .search-results { list-style: none; padding: 0; max-width: 760px; } .search-result { padding: 1rem 0; border-bottom: 1px solid var(--color-border); } .search-result-title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; } /* 検索結果のタイプバッジは共有マクロの .badge(前置)に統一(#386)。 */ .search-result-section { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.25rem; } /* 抜粋は結果一覧の文字の主体。font-size 未指定だと本文既定(17px)を継ぎ、周りの メタ(0.85〜0.9rem)より一段大きくなる。チャットの吹き出しと同じ 0.95rem に揃える。 */ .search-result-snippet { margin: 0.35rem 0 0; color: var(--color-text-light); font-size: 0.95rem; line-height: 1.65; } /* ハンドブック(M4/M7、段階3) */ .handbook-toc { list-style: none; padding-left: 1rem; } .handbook-toc .handbook-toc { padding-left: 1.5rem; border-left: 1px solid var(--border); } .handbook-toc li { margin: 0.3rem 0; } .toc-desc { display: block; font-size: 0.85rem; color: #666; } .handbook-intro { max-width: 760px; } .section-seed { max-width: 760px; color: #333; background: var(--color-bg-secondary); border-left: 3px solid var(--accent); padding: 0.6rem 0.9rem; border-radius: 4px; margin-bottom: 1rem; white-space: pre-wrap; } .section-pending { max-width: 760px; } .breadcrumb { font-size: 0.85rem; color: #777; margin-bottom: 0.5rem; } .outline-editor { width: 100%; max-width: 900px; font-family: ui-monospace, monospace; padding: 0.6rem; border: 1px solid var(--border); border-radius: 6px; } .admin-table { border-collapse: collapse; max-width: 900px; } .admin-table th, .admin-table td { border: 1px solid var(--border); padding: 0.3rem 0.6rem; text-align: left; } .admin-form label { display: block; margin: 0.6rem 0; max-width: 760px; } .admin-form input[type="text"], .admin-form textarea, .admin-form select { width: 100%; padding: 0.4rem; border: 1px solid var(--border); border-radius: 6px; } .hint { color: #555; font-size: 0.9rem; max-width: 760px; } /* 取り返しのつかない操作(撤回・削除)。面は他の節と同じ fm-panel に載せ、赤は枠と 見出しだけに使う(赤地は他の管理画面の危険操作と揃わない)。 */ .danger-zone { border-color: var(--color-error); } .danger-zone .fm-panel-title { color: var(--color-error); border-bottom-color: var(--color-error); } .danger-zone .pub-block { border-left-color: var(--color-error); } button.danger { background: #c0392b; color: #fff; border: 1px solid #a33; } button.danger:hover { background: #a33; } /* feature-request-20260611: 編集画面の source 表示 / レビューの引用リンク・ハイライト */ .source-md { max-width: 900px; background: var(--color-bg-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 0.9rem; white-space: pre-wrap; overflow-x: auto; font-family: ui-monospace, monospace; font-size: 0.85rem; } /* seed(分担)の表示: ソースが複数行で書かれていても通常の散文として畳んで読みやすく出す。 */ .seed-text { max-width: 760px; background: var(--color-bg-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 0.9rem; color: #333; } .quote-ref { color: var(--accent); cursor: pointer; } .quote-ref:hover { text-decoration: underline; } .quote-field { background: var(--color-bg-secondary); border-left: 3px solid var(--accent); padding: 0.4rem 0.6rem; border-radius: 4px; } mark.review-hl { background: #ffe9a8; } #quote-popover { z-index: 50; } #quote-popover button { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: 0.85rem; } /* 管理: 公開ワークフローのステッパ(現在地の可視化)と遷移ボタン */ .workflow-stepper { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1rem; } .workflow-stepper .step { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; color: var(--muted); background: var(--color-bg-secondary); border: 1px solid var(--border); } .workflow-stepper .step + .step { border-left: none; } .workflow-stepper .step:first-child { border-radius: 5px 0 0 5px; } .workflow-stepper .step:last-child { border-radius: 0 5px 5px 0; } .workflow-stepper .step-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #fff; border: 1px solid var(--border); font-size: 0.8rem; font-weight: 600; } .workflow-stepper .step.done { color: var(--fg); background: #eef5ef; } .workflow-stepper .step.done .step-dot { background: #4a8f5d; color: #fff; border-color: #4a8f5d; } .workflow-stepper .step.current { color: #fff; background: var(--accent); border-color: var(--accent); } .workflow-stepper .step.current .step-dot { background: #fff; color: var(--accent); border-color: #fff; } .workflow-stepper .step-now { font-size: 0.68rem; padding: 0.05rem 0.3rem; border: 1px solid currentColor; border-radius: 3px; } .workflow-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .workflow-actions button { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 4px; padding: 0.35rem 0.8rem; cursor: pointer; font-size: 0.9rem; } .workflow-actions button:hover { background: #21496f; } .workflow-actions button.secondary { background: #fff; color: var(--accent); } .workflow-actions button.secondary:hover { background: #eef2f7; } /* 実行中ボタンの押下フィードバック(編集画面の全アクション共通) */ button:disabled { opacity: 0.55; cursor: progress; } /* handbook 管理: 章ごとの出版ステータスバッジと遷移ボタン */ .badge.status-draft { background: #8a8f98; } .badge.status-in_review { background: #c98a2b; } .badge.status-approved { background: var(--accent); } .badge.status-published { background: #3f8f5d; } /* ガイドラインの3状態(作業版=非規範の作業中/候補版=凍結・レビュー対象/承認版=引用可)。 */ .badge.status-working { background: #8a8f98; } .badge.status-candidate { background: #c98a2b; } .badge.status-edition { background: #3f8f5d; } /* 候補版の公開レビュー phase(E-2)。 */ .badge.status-finalized { background: #8a8f98; } .badge.status-under_review { background: #c98a2b; } .badge.status-dispositioned { background: #6b7280; } .badge.status-proposed { background: var(--accent); } .badge.status-superseded { background: #b04a4a; } .badge.status-spam { background: #b04a4a; } /* 公開コメント(E-3)。本文はプレーンテキスト(改行を保つ)。 */ .gl-comments { margin: 1rem 0 1.5rem; padding: 0.8rem 1rem; background: var(--color-bg-secondary); border: 1px solid var(--border); border-radius: 6px; } .gl-comments-head { font-size: 0.95rem; margin: 0 0 0.5rem; } .gl-comment-list { list-style: none; margin: 0 0 0.6rem; padding: 0; } .gl-comment { display: block; padding: 0.4rem 0; border-bottom: 1px solid var(--border); } .gl-comment.empty { color: #777; border-bottom: none; } .gl-comment-meta { display: block; font-size: 0.8rem; color: #666; } .gl-comment-body { display: block; white-space: pre-wrap; } .gl-disposition-note { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: #555; border-left: 3px solid var(--border); padding-left: 0.5rem; } .gl-disposition-form input[type="text"] { width: 14rem; max-width: 100%; } .gl-disposition-form button { margin-left: 0.2rem; } /* 版の引用情報・公開レビュー処理(E-5)。 */ .edition-citation, .edition-disposition { margin: 1rem 0 1.5rem; padding: 0.8rem 1rem; background: var(--color-bg-secondary); border: 1px solid var(--border); border-radius: 6px; } .edition-citation h2, .edition-disposition h2 { font-size: 1rem; margin: 0 0 0.5rem; } .edition-citation dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.8rem; margin: 0; } .edition-citation dt { font-weight: 600; color: #555; } .edition-citation dd { margin: 0; word-break: break-all; } .gl-comment-form textarea { width: 100%; box-sizing: border-box; } .gl-comment-status { font-size: 0.85rem; color: #666; margin-left: 0.5rem; } .link-button { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; text-decoration: underline; font: inherit; } .row-muted { opacity: 0.55; } .chapter-actions { margin-left: 0.4rem; display: inline-flex; gap: 0.3rem; } .chapter-actions button { font-size: 0.78rem; padding: 0.1rem 0.5rem; cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; } .chapter-actions button:hover { background: #21496f; } .chapter-actions button.secondary { background: #fff; color: var(--accent); } .chapter-actions button.secondary:hover { background: #eef2f7; } /* ── マストヘッド(トップページの題字)── 学術文書としての「題字」: 機関名のアイブロウ → セリフの題字 → 黄の規矩線 → 趣意文 → 行動喚起。右肩に「現行版 第N版」の標記(この系の署名 = 版を重ねる citable な文書であること を一目で示す構造装置)。装飾的な粒子やグラデーションは用いず、紙の地に静かに組む。 */ /* 題字と本文は同じ紙地。境界の罫は引かない —— 地の色が変わらないのに罫だけ引くと、 無い帯の縁を描くことになる。区切りは余白と、各節の見出し(藍の罫)が受け持つ。 */ .masthead { background: var(--color-bg); } /* 2 段組: 左に題字・趣意・入口、右に台帳。1 段組で左に寄せると右半分が空く(#648)。 右段の幅は台帳の中身(日付・ラベル)が収まる最小限に取り、間は 3rem 空ける。 */ .masthead-inner { max-width: 1040px; margin: 0 auto; padding: 3rem 1.5rem 1.75rem; display: grid; grid-template-columns: minmax(0, 1fr) 17rem; column-gap: 3rem; align-items: start; } .masthead-eyebrow { grid-column: 1 / -1; } .masthead-main { grid-column: 1; min-width: 0; } .masthead-register { grid-column: 2; } .masthead-eyebrow { font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--color-text-light); margin: 0 0 1.5rem; } .masthead-head { display: flex; align-items: center; gap: 1.25rem; } .masthead-mark { width: 54px; height: auto; flex: 0 0 auto; } .masthead-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.1rem, 5.2vw, 3.1rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--color-ink); margin: 0; } .masthead-rule { border: 0; height: 3px; width: 92px; background: var(--color-primary); margin: 1.75rem 0 1.25rem; } /* 趣意は 1 行で読ませる。⚠ 和文の行長を ch で切らないこと —— ch は「0」の字幅(≒半角) なので 46ch は全角 23 字ほどしかなく、26 字のこの一文が折れていた(#648)。全角字数で 考えられる em で取る。折れるとき(狭い画面)は文節で切る。 */ .masthead-lead { font-family: var(--font-serif); font-size: clamp(1.05rem, 2.2vw, 1.28rem); line-height: 1.65; color: var(--color-text-light); max-width: 30em; word-break: auto-phrase; margin: 0; } /* 署名: 右段の台帳。藍の太罫で始まり、いま読める版・記事数・更新日を項目ごとに引く。 題字側(趣意・入口)と対になって、この時点の状態を一目で示す柱。 */ .masthead-register { font-family: var(--font-sans); border-top: 2px solid var(--color-ink); padding-top: 0.6rem; } /* 項目は台帳の行。細い罫で区切り、ラベルと値を左右に振る。 */ .register-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; } .register-item + .register-item { border-top: 1px solid var(--color-border); } .register-more { display: block; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); font-size: 0.78rem; text-decoration: none; } .register-more:hover { text-decoration: underline; } .masthead-register .register-label { flex: 0 0 auto; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--color-text-light); } .masthead-register .register-value { font-family: var(--font-serif); text-align: right; font-size: 1.35rem; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; line-height: 1.2; } /* 版は柱、記事数・更新日は添え物。同じ大きさで並べると台帳が重くなる。 */ .masthead-register .register-value-sub { font-size: 1.05rem; font-weight: 600; } .masthead-register a { text-decoration: none; } .masthead-register a.register-value:hover { color: var(--color-link); text-decoration: underline; } /* ── トップページの本文(マストヘッドの下)。入口は「索引」のように落ち着いて並べる。 ── */ /* 題字と最初の節の間は、罫をやめた今は余白だけが区切り。3 か所(題字の下・本文の上・ 節の上)に散っていて合計 170px 近くあったので、まとめて詰める。 */ .page-top .content { max-width: 1040px; padding-top: 1.25rem; } /* 末尾の「このシステムについて」。読み終わりの段落なので、本文より一段落ち着かせる。 */ .top-about { margin: 2.75rem 0 0; } /* 行長は全角字数で取る(62ch は全角 31 字ほどにしかならない。上の趣意と同じ理由)。 */ .top-intro { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.8; color: var(--color-text-light); max-width: 34em; margin: 0; } /* 節の見出し(ガイドライン / 記事 / 最新の記事 / このシステムについて)。 小さな薄い標識にすると、どこで塊が変わるのかが読み取れない —— セリフの見出しと 藍の罫で、面の切れ目をはっきり出す。 */ .section-label { font-family: var(--font-serif); font-size: 1.32rem; font-weight: 600; letter-spacing: 0; color: var(--color-ink); border-bottom: 1px solid var(--color-ink); padding-bottom: 0.4rem; margin: 0 0 1.1rem; } .top-entries { margin: 1.5rem 0 2.75rem; } .card-grid + .section-label { margin-top: 2.25rem; } .card-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } /* 1 枚だけの群(ガイドライン)。束ねた成果なので、記事の道具 3 枚の行より狭くしない。 */ .card-grid-single { grid-template-columns: minmax(0, 1fr); } /* 中身は題 1 行 + 説明 1 行。本文の行送り(1.75)のままだと、余白より行間で嵩む。 */ .card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 2px; padding: 1rem 1.15rem; line-height: 1.5; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .card:hover { border-color: var(--color-ink); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31, 58, 92, 0.09); } .card-title { display: block; font-family: var(--font-serif); color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: 1.28rem; line-height: 1.35; } /* ガイドライン(束ねた成果)は入口の主。ブランドの黄の縦罫と一段大きな題で、道具のカードと 区別する。黄は題字の規矩線と同じ「要点」の印 —— 藍より明度が高いので、罫は一段太くする。 */ .card-lead { border-left: 6px solid var(--color-primary); padding-left: 1.35rem; } .card-lead .card-title { font-size: 1.5rem; line-height: 1.45; } .card-title:visited { color: var(--color-ink); } .card:hover .card-title { color: var(--color-link); } /* カード全体をクリック可能にする(リンクはカード内に1つ)。 */ .card-title::after { content: ""; position: absolute; inset: 0; } .card-desc { margin: 0.35rem 0 0; color: var(--color-text-light); font-family: var(--font-sans); font-size: 0.92rem; } /* 動きを抑える設定ではカードの浮き上がりを止める(境界色の変化のみ残す)。 */ @media (prefers-reduced-motion: reduce) { .card { transition: border-color .15s ease; } .card:hover { transform: none; box-shadow: none; } } .top-recent { margin: 2.75rem 0; } /* 一覧の行は、トップでは他の面(カード・見出し罫)と並ぶので区切りを一段強くする。 記事一覧ページ側の見え方は変えない(この節の中だけ)。 */ .top-recent .article-item { border-bottom-color: var(--color-border-strong); } .top-recent .date { color: var(--color-text-light); } /* レスポンシブ(ガイドライン7章)。狭幅ではヘッダを2段に折り返す。 */ @media (max-width: 720px) { .site-header { flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.5rem 1rem; } .site-brand { flex: 1 1 auto; } .site-search { order: 3; flex: 1 1 100%; margin-left: 0; } .site-search input { width: 100%; } .site-nav { gap: 1rem; } .site-title { font-size: 0.95rem; } .content { padding: 1.5rem 1.1rem 2.5rem; } .masthead-inner { padding: 2.5rem 1.1rem 2.25rem; } /* 狭幅では 1 段組に畳み、台帳は題字の下へ回す(2 段組は幅が足りない)。 */ .masthead-inner { grid-template-columns: minmax(0, 1fr); } .masthead-register { grid-column: 1; margin-top: 1.75rem; } .site-footer { padding: 2.25rem 1.25rem; } } @media (max-width: 600px) { .masthead-head { gap: 0.9rem; } .masthead-mark { width: 42px; } } /* ハンドブックの版(edition)/版プレビュー: 目次 + 章見出し */ .edition-toc { margin: 1.5rem 0 2rem; padding: 1rem 1.25rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 6px; } .edition-toc h2 { margin: 0 0 0.5rem; font-size: 1.05rem; } /*