/* =====================================================================
   console.css — ibit.dev 公開サイトの「テクニカル/コンソール」ビジュアル層
   ---------------------------------------------------------------------
   style.css → 各ページCSS → refine.css の後に読み込む最終レイヤー。
   ここで見た目を「エンジニアが作った硬質でクールなコンソール調」へ一新する。
   方針は不変: ダーク / 青(--accent)主役+紫(--accent-2)サブ / セルフホスト /
   CSP準拠(inline style/script なし) / 素朴なコピー / 実用ツールは対象外。

   デザイン言語:
   - 書体は本文・ラベルとも柔らかい sans(--font: Inter/Noto)で統一。コンソール感は
     書体ではなく「構造と記号」で出す: グリッド背景・見出しの // マーカー・
     タイプライター行の > プロンプト・シャープな角・コーナーブラケット・数字の桁揃え。
     （当初は等幅にしたが「角ばって見える」ため sans に戻した経緯）。
   - 大見出し(hero-name / section-title)は Inter のまま solid で力強く、シャープに。
   - 背景はオーロラ→薄いグリッド線（設計図/端末の方眼）。
   - 角はシャープ(3–4px)。カードは 1px 罫 + コーナーブラケット(L字)。
   - 発光は抑え、ホバーは「罫が青く点灯」する乾いた反応に。
   /system・/admin は render_head を通さないため影響しない。
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. トークン上書き — 角丸をシャープに、発光を抑える、グリッド線色を追加
   --------------------------------------------------------------------- */
:root {
    --radius: 4px;
    --radius-sm: 3px;
    --radius-xs: 3px;
    --radius-pill: 4px;          /* タグ/バッジは「ピル」をやめて角ばった小箱に */

    /* 影・発光をコンソール調に。ベタ影は薄く、青発光はほぼ消して乾いた質感に。
       注意: --glow は refine.css 側で `box-shadow: A, B, var(--glow)` のように
       他の shadow とカンマ列挙されて使われる箇所がある。box-shadow のリスト内
       要素に none は使えない (invalid at computed-value time で宣言全体が
       unset に落ち、A・B の影まで丸ごと消える) ため、none ではなく
       「見た目は何も無いが文法的に有効な shadow」で無効化する。 */
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
    --glow: 0 0 0 rgba(0, 0, 0, 0);
    --glow-strong: 0 0 0 rgba(0, 0, 0, 0);

    /* 方眼グリッドの線色（極薄。本文コントラストを落とさない） */
    --grid-line: rgba(255, 255, 255, 0.022);
    /* コンソールUIの罫線を少し明るめに（面の分離を線で担う） */
    --border: #262e3a;
    --border-bright: #384354;
}

/* 見出しグラデは使わず、乾いた単色＋青のアクセントで見せる。
   注意: none にすると background-clip:text + color:transparent の消費側
   (.error-code / .about-handle 等) が「透明文字」になり完全に不可視になる。
   単色 2 点グラデにすることで、clip-text 実装のまま実質単色で描画される。 */
:root {
    --grad-heading: linear-gradient(var(--text), var(--text));
    --grad-rule: linear-gradient(90deg, var(--accent), transparent);
}

/* ---------------------------------------------------------------------
   1. 背景 — オーロラ → テクニカルな方眼グリッド + 上部のかすかな青み
   --------------------------------------------------------------------- */
html::before {
    background-image:
        radial-gradient(1200px 520px at 50% -12%, rgba(var(--accent-rgb), 0.055), transparent 70%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, 58px 58px, 58px 58px;
    background-position: center top;
}

/* 上部のドット格子は方眼と二重になるため無効化（線グリッドに一本化） */
body::before {
    background-image: none;
}

/* ---------------------------------------------------------------------
   2. ナビ — 端末のステータスバー風。ガラス感を抑え、シャープ罫 (書体は sans 統一)
   --------------------------------------------------------------------- */
.navbar {
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    /* スクロール時にナビ裏の画像内テキスト等が透けて見えないよう不透明寄り
       （旧: 0.78 → 現: 0.9）。backdrop-filter で背後もぼかす二段構え。 */
    background: rgba(var(--bg-rgb), 0.9);
    border-bottom: 1px solid var(--border-bright);
}

/* ワードマークを端末プロンプト風に (書体は sans のまま構造で見せる) */
.nav-logo {
    font-weight: 600;
    letter-spacing: 0.01em;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
}

/* ナビ項目は小さめ・字間を開けて「メニューコマンド」的に */
.nav-menu li a {
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}

/* 現在地は下線ではなく色で示す (コメント風 // マーカーは見出し側が担当) */
.nav-menu li a.is-active,
.nav-menu li a[aria-current] {
    color: var(--accent-strong);
}

/* ---------------------------------------------------------------------
   3. 見出し — 章ラベルを // マーカーで前置き、罫はシャープに
   --------------------------------------------------------------------- */
.section-title {
    letter-spacing: -0.01em;
}

/* // マーカー: 見出しの前のアクセント。全ページの section-title / h1 に付与。 */
.section-title::before {
    /* alt 構文 (content: "..." / "") で読み上げから外す。純粋な装飾で
       "スラッシュスラッシュ" と読まれると見出しの意味を邪魔するため
       (Chrome/Edge/Safari は ::before の content をアクセシブルネームに含める)。
       counter(...) / "" の前例が同ファイル内の privacy 章番号バッジにある。 */
    content: "// " / "";
    font-weight: 600;
    font-size: 0.5em;
    letter-spacing: 0.05em;
    color: var(--accent);
    vertical-align: 0.35em;
    margin-right: 0.15em;
    -webkit-text-fill-color: var(--accent);
}

/* 見出し下の罫線を「シャープな2pxの起点線」に（発光を消す） */
main.left .section-title::after {
    width: 44px;
    height: 2px;
    background: var(--accent);
    box-shadow: none;
    border-radius: 0;
}

/* ---------------------------------------------------------------------
   4. カード — 直角・1px罫・コーナーブラケット(L字)・乾いたホバー
   --------------------------------------------------------------------- */
.card {
    border: 1px solid var(--border-bright);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* 上端のグラデ細線 → 消して、代わりに左上/右下のコーナーブラケットで囲う。
   refine.css の .card::before(上端バー) を無効化し、L字ブラケットに転用。 */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: none;
    border-top: 2px solid var(--border-bright);
    border-left: 2px solid var(--border-bright);
    border-radius: 0;
    opacity: 1;
    transform: none;
    transition: border-color var(--dur) var(--ease-out);
    pointer-events: none;
    z-index: 2;
}

.card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    border-bottom: 2px solid var(--border-bright);
    border-right: 2px solid var(--border-bright);
    pointer-events: none;
    transition: border-color var(--dur) var(--ease-out);
    z-index: 2;
}

/* ホバー: 浮かせず、罫とブラケットを青く点灯（乾いた反応） */
.card:hover {
    transform: none;
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow: var(--shadow-sm);
}

.card:hover::before,
.card:hover::after {
    border-color: var(--accent);
}

.card:hover::before {
    transform: none;
}

/* work-card / tool-card は refine.css で ::after を「光沢スイープ」に転用されて
   いる (inset:0 + 斜めグラデ + translateX)。同じ ::after を console.css は
   「右下コーナーブラケット」に転用しており、詳細度が同じ (0,2,1) セレクタが
   カスケード順 (refine → console) で衝突している。console.css が後勝ちする
   前提で、位置・背景・変形を明示的にブラケットへ引き戻す。
   このサイトの現行方針は「浮かせない・光らせない・罫だけ点灯」の乾いた反応
   (このファイル冒頭の設計言語を参照) なので、スイープ自体を無効化する。 */
:is(.work-card, .tool-card).card::after {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    background: none;
    transform: none;
    border-radius: 0;
}

:is(.work-card, .tool-card).card:hover::after {
    /* refine.css の :hover::after (transform: translateX(130%)) は :hover 分
       詳細度が高い (0,3,1) ため、hover 時だけ上の無効化が上書かれてしまう。
       同じ詳細度で改めて殺す。 */
    transform: none;
}

/* refine.css の「カードは浮かせる」ホバー (:is(.work-card:not(.is-pending),
   .timeline-content, .tool-card):hover) が詳細度 (0,3,0) で上の
   .card:hover { transform: none } (0,2,0) に勝ってしまい、最も目立つ
   work-card/tool-card だけ従来どおり浮いていた。work-card/tool-card は
   .card クラスを持ち上の「浮かせない」方針が直接及ぶ対象なので統一する
   (.timeline-content は .card を持たない別コンポーネントで、about-timeline
   限定で既に無効化されている以外は判断材料が無いため対象外のまま残す)。 */
:is(.work-card, .tool-card).card:hover {
    transform: none;
    /* refine.css 側の box-shadow (glass-hilite + shadow-lg + accent リング) も
       同じ理由で上書きし、他の .card と同じ「乾いた」小さい影に揃える。 */
    box-shadow: var(--shadow-sm);
}

/* サムネイルは角を落とし、端末プレビュー風に細罫で締める */
.card-thumb {
    border-radius: 0;
}

/* カードのメタ情報（年・役割・件数）は字間を締めて「データ」らしく */
.card-meta-item,
.card-meta-item time,
.wd-highlight-label {
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------
   5. ボタン — グラデ廃止。シャープな枠。primary は青ベタ。
   --------------------------------------------------------------------- */
.btn {
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-bright);
    background: transparent;
    box-shadow: none;
    text-transform: none;
}

.btn:hover {
    transform: none;
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
    box-shadow: none;
}

/* primary は角ばった青ベタ。先頭に端末プロンプト風の > を添える */
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    box-shadow: none;
}

.btn-primary:hover {
    transform: none;
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    box-shadow: none;
}

/* カード内の小型リンク（詳しく見る等）も小さめで統一 */
.card-link {
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------
   6. タグ・バッジ・チップ — 角ばった小箱。技術名は [ ... ] 風の乾いた質感
   --------------------------------------------------------------------- */
.tech-tags li {
    font-size: 0.76rem;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-2);
}

.card-tag,
.count-badge {
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-size: 0.68rem;
}

/* tech-tag アイコンのブランド色は style.css の「単一の真実源」ブロックに集約済み
   （console.css には置かない）。 */

/* ---------------------------------------------------------------------
   7. ヒーロー — 端末プロンプト調のアイブロウ + solid な大見出し + 出力行
   --------------------------------------------------------------------- */
/* アイブロウ: ピル→角ばったタグ、大文字。稼働ドットは維持 */
.hero-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    border-color: var(--border-bright);
    background: var(--bg-2);
    color: var(--muted);
}

/* 名前: 青グラデのクリップをやめ、solid の白で力強く・シャープに */
#typewriter,
.hero-name {
    background: none;
    -webkit-text-fill-color: var(--text);
    color: var(--text);
    filter: none;
    letter-spacing: -0.02em;
}

/* タイプライター行(サブテキスト)は > プロンプトで「端末の出力」に見せる。
   先頭に薄い > プロンプトを添える（キャレットは既存の ::after を流用）。 */
.subtext {
    color: var(--muted);
}

.subtext::before {
    /* alt 構文で読み上げから外す (.section-title::before と同じ理由)。 */
    content: "> " / "";
    color: var(--accent);
    opacity: 0.8;
}

/* アバター背後の光だまり/オービットリングは控えめに（発光過多を避ける）。
   角は丸のまま（顔写真の自然さ優先）だが、周辺の派手な glow を抑制。 */
.hero-right::before {
    opacity: 0.55;
}

/* ---------------------------------------------------------------------
   8. フッター — 端末フッター風 (書体は sans 統一、記号と罫で見せる)
   --------------------------------------------------------------------- */
.footer-logo {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
}

.footer-sitemap a,
.copyright,
.last-updated {
    letter-spacing: 0.01em;
}

.site-footer {
    border-top: 1px solid var(--border-bright);
}

/* ---------------------------------------------------------------------
   9. リンク下線・フォーカス等の微調整（コンソール調の乾いた質感）
   --------------------------------------------------------------------- */
/* home の about ステートメントのハイライトはグラデ下地→乾いた実線アンダーラインに */
#about .about-text .hl {
    background: linear-gradient(180deg, transparent 70%, rgba(var(--accent-rgb), 0.35) 70%);
    border-radius: 0;
}

/* セクション下端の淡い青ヘアラインは、方眼グリッドと相性が良いので残すが、
   #contact の着地グローは弱める（発光過多を避ける） */
#contact::after {
    opacity: 0.5;
}

/* ---------------------------------------------------------------------
   11. ページ固有パーツ — 確立した言語（タブラー数字/シャープ/
       乾いた反応）を各ページの特徴的な部品へ展開する
   --------------------------------------------------------------------- */

/* --- Skills: メーターをシャープに、% は等幅タブラー（ブランド色の塗りは維持） --- */
.skill-bar {
    border-radius: 2px;
}

.skill-level {
    border-radius: 2px;
}

.skill-percentage {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.skill-name {
    letter-spacing: 0.01em;
}

/* --- Community / About: 統計の大きな数字は等幅タブラー --- */
.stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.timeline-date {
    letter-spacing: 0.01em;
}

.section-count {
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --- Articles: 特大アウトライン番号は等幅タブラー、行カードはシャープ --- */
.article-no {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.article-entry-inner {
    border-radius: var(--radius);
}

.article-entry-meta {
    letter-spacing: 0.02em;
}

/* --- エラーページ: 特大エラーコードは字間を締める --- */
.error-code {
    letter-spacing: -0.02em;
}

/* --- Contact: フォームはシャープ、ラベルは小さな大文字（本文の入力は
       日本語可読性優先で sans のまま）。FAQ もシャープに。 --- */
.contact-form input,
.contact-form textarea {
    border-radius: var(--radius-sm);
}

.form-field label {
    /* text-transform: uppercase は和文には効かず、必須項目の日本語ラベル
       ("お名前" 等) を 0.74rem (≒11.8px) まで縮めるだけの副作用になって
       いたため、可読なサイズへ戻す。uppercase は英字ラベルが無いため撤去。 */
    letter-spacing: 0.04em;
    font-size: 0.84rem;
}

.char-count {
    font-variant-numeric: tabular-nums;
}

.faq-item {
    border-radius: var(--radius);
}

/* --- AI: フローの 01–04 番号はタブラー。Claude 本家オレンジは
       コンソールの枠（ブラケット/罫/ホバー）でも維持する。 --- */
.ai-flow-card .card-title::after {
    font-variant-numeric: tabular-nums;
}

.ai-role-tag {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
}

.ai-card {
    border-color: rgba(var(--brand-claude-rgb), 0.4);
}

.ai-card::before,
.ai-card::after {
    border-color: rgba(var(--brand-claude-rgb), 0.5);
}

.ai-card:hover {
    border-color: var(--brand-claude);
}

.ai-card:hover::before,
.ai-card:hover::after {
    border-color: var(--brand-claude);
}

/* --- Privacy: 章番号バッジはタブラー数字 --- */

/* (旧 .community-subtitle::after ルールは削除: content 未定義の擬似要素は生成されず
   一度も描画されない死ルールだった。// マーカーは .section-title::before が担当) */

/* ---------------------------------------------------------------------
   10. アクセシビリティ配慮
   --------------------------------------------------------------------- */
/* 追加した装飾は既存の reduced-motion / forced-colors ガード(refine.css)の
   範囲内。新規の常時アニメーションは足していない（キャレット点滅は既存のまま）。 */
@media (forced-colors: active) {
    /* 強制配色ではブラケット/罫は system 色に委ねる */
    .card::before,
    .card::after {
        border-color: CanvasText;
    }
}