/* ========================================================================
   laravel-site.css — Phase 4 + 4.6 デザイン刷新
   ハッキンググリーン + ネオン + サイバー基調
   ======================================================================== */

:root {
    --hl-bg:        #000;
    --hl-bg-soft:   #050507;
    --hl-bg-card:   #0a0a0a;
    --hl-bg-card-2: #0f0f12;
    --hl-fg:        #e8e8e8;
    --hl-fg-mute:   #b8b8b8;
    --hl-fg-dim:    #888;
    --hl-accent:    #00ff41;
    --hl-accent-2:  rgba(0,255,65,0.5);
    --hl-accent-3:  rgba(0,255,65,0.15);
    --hl-glow:      rgba(0,255,65,0.3);
    --hl-glow-strong: rgba(0,255,65,0.6);
    --hl-magenta:   #ff00aa;
    --hl-cyan:      #00f7ff;
    --hl-danger:    #ff3860;
    --hl-warn:      #f59e0b;
    /* 記事タイプ別アクセントカラー (既存の neon palette を流用)
       news=alert red / explanation=cyan / experiment=magenta /
       machine=green (デフォルト) / development=amber */
    --hl-type-news:        #ff3860;
    --hl-type-news-glow:   rgba(255,56,96,0.30);
    --hl-type-explanation: #00f7ff;
    --hl-type-explanation-glow: rgba(0,247,255,0.28);
    --hl-type-experiment:  #ff00aa;
    --hl-type-experiment-glow: rgba(255,0,170,0.28);
    --hl-type-machine:     #b794f4;
    --hl-type-machine-glow: rgba(183,148,244,0.30);
    --hl-type-development: #f5a524;
    --hl-type-development-glow: rgba(245,165,36,0.28);
    --hl-type-all:         #00ff41;
    --hl-type-all-glow:    rgba(0,255,65,0.28);
    --hl-mono:    'JetBrains Mono', 'Source Code Pro', 'Courier New', ui-monospace, monospace;
    --hl-sans:    'Inter', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', system-ui, sans-serif;
}

/* === reset + flex layout でフッター固定 === */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
/* モバイルでのピンチアウト時、横方向にはみ出した要素が原因で初期スケール未満に
   縮小される問題への安全策。overflow-x: clip は sticky を破壊しない modern API。
   要素が想定外に横にあふれても、html 側で表示領域を超えない。 */
html { overflow-x: clip; }
body { overflow-x: clip; }
body {
    font-family: var(--hl-sans);
    background: var(--hl-bg);
    color: var(--hl-fg);
    margin: 0;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.noscroll { overflow: hidden; }
body > main { flex: 1 0 auto; width: 100%; }
body > footer { flex-shrink: 0; margin-top: 0; }

/* 背景うっすらスキャンライン (派手さ) */
body::before {
    content: '';
    position: fixed; inset: 0;
    background: repeating-linear-gradient(
        180deg, transparent 0, transparent 3px,
        rgba(0,255,65,0.022) 3px, rgba(0,255,65,0.022) 4px
    );
    pointer-events: none;
    z-index: 1;
}
body::after {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(800px 500px at 80% -10%, rgba(0,255,65,0.06), transparent 60%),
        radial-gradient(700px 500px at 0% 100%, rgba(0,247,255,0.04), transparent 60%);
    pointer-events: none;
    z-index: 1;
}
body > * { position: relative; z-index: 2; }

a { color: var(--hl-accent); text-decoration: none; transition: color .2s, text-shadow .2s; }
a:hover { color: var(--hl-accent); text-shadow: 0 0 10px var(--hl-glow); }
img { max-width: 100%; height: auto; }
code, pre, .mono { font-family: var(--hl-mono); }

/* === Navbar === */
.navbar {
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    padding: 0 2.4vw;
    border-bottom: 1px solid var(--hl-accent-2);
    box-shadow: 0 2px 18px var(--hl-glow);
    position: sticky; top: 0; z-index: 1100;
    transition: transform .3s ease;
}
.navbar--hidden { transform: translateY(-100%); }
.site-logo { display: flex; align-items: center; gap: .6rem; }
.site-logo img { height: 44px; width: auto; opacity: .92; transition: transform .3s, filter .3s, opacity .3s; }
.site-logo:hover img { transform: scale(1.06); opacity: 1; filter: drop-shadow(0 0 12px var(--hl-glow-strong)); }

.nav-links { list-style: none; display: flex; gap: 2.2rem; margin: 0; padding: 0; }
.nav-links a {
    /* リンク先タイプに応じた色。nav-link--X で上書きされる */
    --nav-accent: var(--hl-accent);
    --nav-accent-glow: var(--hl-glow-strong);

    color: #f0f0f0; font-size: .95rem; font-weight: 500;
    padding: .6rem .25rem; position: relative; display: inline-block;
    letter-spacing: .5px;
}
.nav-link--home        { --nav-accent: var(--hl-accent);            --nav-accent-glow: var(--hl-glow-strong); }
.nav-link--news        { --nav-accent: var(--hl-type-news);         --nav-accent-glow: rgba(255,56,96,0.55); }
.nav-link--explanation { --nav-accent: var(--hl-type-explanation);  --nav-accent-glow: rgba(0,247,255,0.55); }
.nav-link--experiment  { --nav-accent: var(--hl-type-experiment);   --nav-accent-glow: rgba(255,0,170,0.55); }
.nav-link--development { --nav-accent: var(--hl-type-development);  --nav-accent-glow: rgba(245,165,36,0.55); }
.nav-link--machine     { --nav-accent: var(--hl-type-machine);      --nav-accent-glow: var(--hl-glow-strong); }
.nav-links a::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 2px; background: var(--nav-accent);
    box-shadow: 0 0 8px var(--nav-accent-glow);
    transition: width .25s ease-out;
}
.nav-links a:hover, .nav-links a.active { color: var(--nav-accent); text-shadow: 0 0 12px var(--nav-accent-glow); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.hamburger {
    display: none;
    width: 36px; height: 36px;
    background: none; border: 1px solid var(--hl-accent-2);
    cursor: pointer; padding: 0;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    border-radius: 4px;
    transition: box-shadow .2s, border-color .2s;
}
.hamburger:hover { box-shadow: 0 0 14px var(--hl-glow-strong); border-color: var(--hl-accent); }
.hamburger span { display: block; width: 18px; height: 2px; background: var(--hl-accent); transition: transform .25s, opacity .25s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
    position: fixed; top: 64px; right: 0;
    width: 80%; max-width: 320px; height: calc(100vh - 64px);
    background: rgba(0,0,0,.97);
    border-left: 1px solid var(--hl-accent-2);
    box-shadow: -10px 0 30px rgba(0,255,65,0.1);
    transform: translateX(100%); transition: transform .3s;
    z-index: 1099; padding: 1.5rem 1.2rem; overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu a { display: block; padding: .75rem 0; color: #f0f0f0; border-bottom: 1px solid rgba(0,255,65,0.18); font-size: 1rem; }
.mobile-menu a:hover { color: var(--hl-accent); padding-left: .4rem; }

/* === footer === */
.site-footer {
    background: linear-gradient(180deg, transparent, #050a07);
    color: #ccc; text-align: center;
    padding: 1.4rem 0 1.2rem; font-size: .85rem;
    border-top: 1px solid var(--hl-accent-3);
    margin-top: 3rem;
}
.site-footer p { margin: 0; font-family: var(--hl-mono); letter-spacing: 1px; }

/* === Container (4K 配慮) === */
.container {
    max-width: 1720px;
    margin: 0 auto;
    padding: 1.8rem clamp(1rem, 3vw, 3rem);
}

/* === Hero (matrix canvas + 派手な glow + ネオンパルス) === */
.hero {
    position: relative; height: 360px;
    background: var(--hl-bg-soft);
    overflow: hidden;
    border-bottom: 1px solid var(--hl-accent-2);
    box-shadow:
        inset 0 -40px 80px rgba(0,255,65,.08),
        inset 0 40px 80px rgba(0,247,255,.04);
}
.hero canvas#matrixCanvas { width: 100%; height: 100%; display: block; }
.hero-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    pointer-events: none; gap: .4rem;
}
.hero-title {
    font-family: var(--hl-mono); font-size: clamp(1.8rem, 5vw, 3.4rem);
    color: var(--hl-accent); letter-spacing: 4px; font-weight: 700;
    margin: 0;
    text-shadow:
        0 0 14px var(--hl-glow-strong),
        0 0 28px var(--hl-glow),
        0 0 56px rgba(0,255,65,0.25);
    animation: neon-pulse 3.2s ease-in-out infinite;
}
.hero-subtitle {
    color: #ddd; font-size: clamp(.7rem, 1.2vw, .95rem);
    letter-spacing: 6px; font-family: var(--hl-mono);
    text-shadow: 0 0 8px var(--hl-glow);
}
.hero-name-ja {
    color: var(--hl-accent);
    font-size: clamp(1rem, 2.2vw, 1.4rem);
    letter-spacing: 8px;
    font-weight: 700;
    margin: .4rem 0 .2rem;
    text-shadow: 0 0 10px var(--hl-glow), 0 0 20px rgba(0,255,65,0.3);
}
@keyframes neon-pulse {
    0%, 100% {
        text-shadow: 0 0 14px var(--hl-glow-strong), 0 0 28px var(--hl-glow), 0 0 56px rgba(0,255,65,0.18);
    }
    50% {
        text-shadow: 0 0 22px var(--hl-glow-strong), 0 0 44px var(--hl-glow), 0 0 88px rgba(0,255,65,0.4);
    }
}

/* === post-grid / post-card 派手化 === */
.post-grid {
    list-style: none; padding: 0; margin: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
    gap: 1.4rem;
    justify-content: center;
}
.post-card {
    /* タイプ別アクセント。.post-card--type-X で上書きされる */
    --card-accent: var(--hl-accent);
    --card-accent-glow: var(--hl-glow);
    --card-accent-glow-strong: var(--hl-glow-strong);
    --card-accent-bg: rgba(0,255,65,0.08);

    /* 上端に accent tint をうっすら載せ、下に向かって深い闇に沈ませる */
    background:
        radial-gradient(120% 60% at 50% -20%,
            color-mix(in srgb, var(--card-accent) 14%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg,
            #0d0d10 0%,
            #08080a 55%,
            #030305 100%);
    border: 1px solid color-mix(in srgb, var(--card-accent) 35%, transparent);
    border-top-color: color-mix(in srgb, var(--card-accent) 55%, transparent);
    border-radius: 6px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--card-accent) 35%, transparent),
        inset 0 -30px 40px -20px rgba(0,0,0,0.6),
        0 0 14px color-mix(in srgb, var(--card-accent-glow) 70%, transparent);
    transition: box-shadow .35s ease, border-color .25s ease, transform .25s ease;
    position: relative;
    isolation: isolate;
}
/* 上端のネオン発光ライン */
.post-card::before {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--card-accent) 50%,
        transparent 100%);
    box-shadow:
        0 0 6px var(--card-accent),
        0 0 14px var(--card-accent-glow);
    opacity: .85;
    z-index: 3;
    transition: opacity .25s ease, left .35s ease, right .35s ease;
    pointer-events: none;
}
/* 左下/右上の HUD コーナーマーカー (小さな L 字) */
.post-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(var(--card-accent), var(--card-accent)) top    left  / 14px 1px no-repeat,
        linear-gradient(var(--card-accent), var(--card-accent)) top    left  / 1px 14px no-repeat,
        linear-gradient(var(--card-accent), var(--card-accent)) bottom right / 14px 1px no-repeat,
        linear-gradient(var(--card-accent), var(--card-accent)) bottom right / 1px 14px no-repeat;
    opacity: .55;
    transition: opacity .25s ease;
}
.post-card:hover {
    border-color: var(--card-accent);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 var(--card-accent),
        inset 0 -30px 40px -20px rgba(0,0,0,0.6),
        0 0 28px var(--card-accent-glow-strong, var(--hl-glow-strong)),
        0 6px 28px -8px color-mix(in srgb, var(--card-accent) 35%, transparent);
}
.post-card:hover::before { left: 0; right: 0; opacity: 1; }
.post-card:hover::after  { opacity: 1; }

/* === post-card タイプ別アクセント === */
.post-card--type-news {
    --card-accent: var(--hl-type-news);
    --card-accent-glow: var(--hl-type-news-glow);
    --card-accent-glow-strong: rgba(255,56,96,0.55);
    --card-accent-bg: rgba(255,56,96,0.10);
}
.post-card--type-explanation {
    --card-accent: var(--hl-type-explanation);
    --card-accent-glow: var(--hl-type-explanation-glow);
    --card-accent-glow-strong: rgba(0,247,255,0.50);
    --card-accent-bg: rgba(0,247,255,0.10);
}
.post-card--type-experiment {
    --card-accent: var(--hl-type-experiment);
    --card-accent-glow: var(--hl-type-experiment-glow);
    --card-accent-glow-strong: rgba(255,0,170,0.50);
    --card-accent-bg: rgba(255,0,170,0.10);
}
.post-card--type-machine {
    --card-accent: var(--hl-type-machine);
    --card-accent-glow: var(--hl-type-machine-glow);
    --card-accent-glow-strong: rgba(183,148,244,0.55);
    --card-accent-bg: rgba(183,148,244,0.12);
}
.post-card--type-development {
    --card-accent: var(--hl-type-development);
    --card-accent-glow: var(--hl-type-development-glow);
    --card-accent-glow-strong: rgba(245,165,36,0.50);
    --card-accent-bg: rgba(245,165,36,0.12);
}
.post-card a.post-card-link { color: inherit; display: flex; flex-direction: column; height: 100%; }
.post-card-thumb {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
    background: #050505; border-bottom: 1px solid #1a1a1a;
}
/* ニュースカードはヒーロー画像が情報量を持つので contain で全体表示
   (16:9 でないアスペクト比でも上下/左右が切れない) */
.post-card--news .post-card-thumb { object-fit: contain; background: #000; }
.post-card-body { padding: .9rem 1.05rem 1rem; flex-grow: 1; display: flex; flex-direction: column; gap: .45rem; }
.post-card-type {
    display: inline-block; align-self: flex-start;
    padding: .12rem .55rem;
    font-family: var(--hl-mono); font-size: .68rem; letter-spacing: 2px;
    color: var(--card-accent); text-transform: uppercase;
    background: var(--card-accent-bg);
    border: 1px solid var(--card-accent);
    border-radius: 2px;
    text-shadow: 0 0 6px var(--card-accent-glow);
    font-weight: 700;
}
/* 旧来の is-news セレクタ (DOM 互換用) も同色になるよう card-accent ベースで定義 */
.post-card-type.is-news {
    color: var(--card-accent);
    background: var(--card-accent-bg);
    border-color: var(--card-accent);
}
.post-card:hover .post-card-title { color: var(--card-accent); }
.news-source-callout {
    margin: 0 0 1.4rem; padding: .7rem 1rem;
    border-left: 3px solid var(--hl-accent);
    background: rgba(0,255,65,0.05);
    font-size: .85rem; color: var(--hl-fg-dim);
    font-family: var(--hl-mono);
}
.news-source-callout .label { color: var(--hl-accent); margin-right: .5em; font-weight: 700; }
.news-source-callout ul { margin: .3rem 0 0; padding-left: 1.2em; list-style: '› '; }
.news-source-callout a { color: var(--hl-fg-dim); text-decoration: underline; text-decoration-color: rgba(0,255,65,0.4); }
.news-source-callout a:hover { color: var(--hl-accent); }
.post-card-title { font-size: 1rem; margin: 0; color: #fff; line-height: 1.4; }
.post-card-summary {
    font-size: .82rem; color: var(--hl-fg-mute); margin: 0; flex-grow: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-meta {
    font-family: var(--hl-mono); font-size: .7rem; color: var(--hl-fg-dim);
    display: flex; gap: .9rem; margin-top: .4rem;
    border-top: 1px solid #181818; padding-top: .55rem;
}

/* === page-heading === */
.page-heading {
    /* 一覧ページなど body クラスで --page-accent を上書きするとテーマが切り替わる */
    --page-accent: var(--hl-accent);
    --page-accent-glow: var(--hl-glow);

    margin: 0 0 1.2rem; padding-bottom: .7rem;
    font-family: var(--hl-mono); font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    color: var(--page-accent); letter-spacing: 1px;
    border-bottom: 1px solid color-mix(in srgb, var(--page-accent) 40%, transparent);
    text-shadow: 0 0 8px var(--page-accent-glow);
}
.page-heading::before { content: '> '; opacity: .6; }

/* === 一覧ページのタイプ別カラーテーマ (body class で切替) === */
body.news_list        { --page-accent: var(--hl-type-news);        --page-accent-glow: var(--hl-type-news-glow); }
body.explanation_list { --page-accent: var(--hl-type-explanation); --page-accent-glow: var(--hl-type-explanation-glow); }
body.experiment_list  { --page-accent: var(--hl-type-experiment);  --page-accent-glow: var(--hl-type-experiment-glow); }
body.development_list { --page-accent: var(--hl-type-development); --page-accent-glow: var(--hl-type-development-glow); }
body.machines-list    { --page-accent: var(--hl-type-machine);     --page-accent-glow: var(--hl-type-machine-glow); }

/* === post detail === */
.post-detail { max-width: 880px; margin: 0 auto; }
.post-detail .thumbnail-contaner { margin-bottom: 1rem; text-align: center; }
.post-detail .thumbnail-contaner img {
    max-width: 100%; max-height: 380px;
    width: auto; height: auto;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid rgba(0,255,65,0.25);
    box-shadow: 0 0 20px var(--hl-glow);
}
.post-header { margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid #1a1a1a; }
.post-date { font-family: var(--hl-mono); font-size: .8rem; color: var(--hl-accent); letter-spacing: 1px; }
.post-date .date-label { color: var(--hl-fg-dim); margin-right: .4rem; }
.post-title-text {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem); color: #fff; margin: .4rem 0;
    line-height: 1.3; font-weight: 700;
    text-shadow: 0 0 10px rgba(0,255,65,0.15);
    overflow-wrap: anywhere; word-break: normal;
}
.post-stats { font-family: var(--hl-mono); font-size: .8rem; color: var(--hl-fg-dim); display: flex; gap: 1.2rem; margin-top: .5rem; align-items: center; }
.post-stats__log-date {
    margin-left: auto;
    color: var(--hl-accent);
    letter-spacing: 1px;
    text-shadow: 0 0 6px var(--hl-glow);
    font-weight: 700;
}
.post-body { line-height: 1.85; color: var(--hl-fg); font-size: .96rem; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 {
    color: var(--hl-accent); margin-top: 2.2rem; margin-bottom: .8rem;
    text-shadow: 0 0 10px var(--hl-glow);
    letter-spacing: .5px;
}
.post-body h1 { font-size: 1.55rem; border-bottom: 1px solid var(--hl-accent-2); padding-bottom: .4rem; }
.post-body h2 { font-size: 1.28rem; }
.post-body h3 { font-size: 1.12rem; }
.post-body p { margin: .85rem 0; }
.post-body code {
    background: #0a0a0a; color: var(--hl-accent); padding: .14rem .38rem;
    border-radius: 3px; border: 1px solid #1a1a1a; font-size: .9em;
}
.post-body pre {
    position: relative;
    background: #050505; border: 1px solid rgba(0,255,65,0.18);
    padding: 1rem; border-radius: 4px; overflow-x: auto; margin: 1.2rem 0;
    box-shadow: inset 0 0 16px rgba(0,255,65,0.06);
}
.code-copy-btn {
    position: absolute; top: .4rem; right: .4rem;
    padding: .25rem .65rem; font-family: var(--hl-mono); font-size: .68rem;
    background: rgba(0,0,0,0.7); border: 1px solid rgba(0,255,65,0.3);
    color: var(--hl-fg-mute); border-radius: 3px; cursor: pointer;
    letter-spacing: .5px; line-height: 1;
    transition: color .15s, border-color .15s, background .15s;
    opacity: 0;
}
.post-body pre:hover .code-copy-btn,
.code-copy-btn:focus { opacity: 1; }
.code-copy-btn:hover { color: var(--hl-accent); border-color: var(--hl-accent); }
.code-copy-btn.copied { color: var(--hl-accent); border-color: var(--hl-accent); background: rgba(0,255,65,0.1); }
.read-time { color: var(--hl-accent); font-family: var(--hl-mono); }

/* === Heading anchors (#) === */
.post-body h1, .post-body h2, .post-body h3 {
    position: relative; scroll-margin-top: 80px;
}
.heading-anchor {
    margin-left: .45rem; color: var(--hl-fg-dim); text-decoration: none;
    font-weight: 400; opacity: 0; transition: opacity .15s, color .15s;
}
.post-body h1:hover .heading-anchor,
.post-body h2:hover .heading-anchor,
.post-body h3:hover .heading-anchor,
.heading-anchor:focus-visible { opacity: 1; }
.heading-anchor:hover { color: var(--hl-accent); }
.heading-anchor.copied {
    color: var(--hl-accent); opacity: 1;
    text-shadow: 0 0 6px var(--hl-glow);
}
.heading-anchor.copied::after {
    content: ' copied!'; font-size: .7em; color: var(--hl-accent);
    margin-left: .3em; letter-spacing: 1px;
}

/* === Global focus visibility === */
*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid var(--hl-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
button:focus-visible, .page-link:focus-visible, .post-card:focus-visible,
.post-card-link:focus-visible, .like-button:focus-visible, .cyber-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(0,255,65,0.35);
    outline: 2px solid var(--hl-accent);
    outline-offset: 2px;
}
.post-body pre code { background: none; border: none; padding: 0; color: #d8e6dc; }
.post-body pre code.hljs { background: transparent; padding: 0; color: inherit; }
.post-body ul, .post-body ol { padding-left: 1.5rem; margin: .8rem 0; }
.post-body li { margin: .3rem 0; }
.post-body blockquote {
    border-left: 3px solid var(--hl-accent); margin: 1rem 0; padding: .5rem 1rem;
    background: rgba(0,255,65,0.05); color: var(--hl-fg-mute);
    box-shadow: 0 0 14px rgba(0,255,65,0.06);
}
.post-body img { max-width: 100%; height: auto; border-radius: 4px; border: 1px solid #1a1a1a; }
.post-body { overflow-wrap: anywhere; }

/* 表 (攻撃パスまとめ など) */
.post-body table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    margin: 1.4rem 0; font-size: .88rem; line-height: 1.55;
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-accent-2); border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 14px rgba(0,255,65,0.06), inset 0 0 16px rgba(0,255,65,0.04);
}
.post-body thead {
    background: linear-gradient(180deg, #002b14 0%, #001a08 100%);
}
.post-body th {
    padding: .7rem .95rem; text-align: left;
    font-family: var(--hl-mono); font-size: .72rem; letter-spacing: 1.5px;
    color: var(--hl-accent); text-transform: uppercase;
    text-shadow: 0 0 6px var(--hl-glow);
    border-bottom: 1px solid var(--hl-accent);
    border-right: 1px solid rgba(0,255,65,0.18);
}
.post-body th:last-child { border-right: none; }
.post-body td {
    padding: .58rem .95rem; vertical-align: top;
    border-top: 1px solid rgba(0,255,65,0.10);
    border-right: 1px solid rgba(0,255,65,0.06);
    color: var(--hl-fg);
}
.post-body td:last-child { border-right: none; }
.post-body tbody tr:nth-child(even) td { background: rgba(0,255,65,0.025); }
.post-body tbody tr:hover td { background: rgba(0,255,65,0.06); }
/* Step 列のような数字ファースト列を強調 (1 文字 or 短い数値) */
.post-body td:first-child {
    font-family: var(--hl-mono); color: var(--hl-accent); font-weight: 700;
    text-shadow: 0 0 4px var(--hl-glow);
    white-space: nowrap;
}
.post-body table code {
    background: rgba(0,255,65,0.08); border-color: rgba(0,255,65,0.2);
}

/* === Pagination === */
.pagination-wrapper {
    margin: 2.4rem 0 1rem; padding-top: 1.5rem;
    display: flex; justify-content: center;
    border-top: 1px dashed rgba(0,255,65,0.18);
}
.pagination {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem;
    font-family: var(--hl-mono);
}
.page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.1rem; height: 2.1rem; padding: 0 .55rem;
    background: transparent; border: 1px solid var(--hl-accent-2);
    color: var(--hl-fg-mute); text-decoration: none;
    font-size: .85rem; line-height: 1; border-radius: 3px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.page-link:hover { color: var(--hl-accent); border-color: var(--hl-accent); }
.page-link--active {
    background: var(--hl-accent); color: #000; border-color: var(--hl-accent);
    font-weight: 700; cursor: default;
}
.page-link--ellipsis {
    border-color: transparent; color: var(--hl-fg-dim);
    cursor: default; min-width: 1rem; padding: 0;
}
.page-link--ellipsis:hover { color: var(--hl-fg-dim); border-color: transparent; }

/* === action / like / comment === */
.action-section {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
    margin: 2rem 0 1rem; padding: 1rem 1.2rem;
    background: var(--hl-bg-card); border: 1px solid rgba(0,255,65,0.22); border-radius: 6px;
    box-shadow: 0 0 16px rgba(0,255,65,0.05);
}
.like-button {
    display: inline-flex; align-items: center; gap: .55rem;
    background: transparent; color: var(--hl-fg);
    border: 1px solid var(--hl-accent-2); padding: .55rem 1.1rem;
    border-radius: 4px; cursor: pointer; transition: all .2s;
    font-family: var(--hl-mono); font-size: .9rem;
}
.like-button:hover { box-shadow: 0 0 18px var(--hl-glow-strong); border-color: var(--hl-accent); color: var(--hl-accent); }
.like-button.liked { background: var(--hl-accent); color: #000; border-color: var(--hl-accent); box-shadow: 0 0 22px var(--hl-glow-strong); }
.like-button .heart-icon {
    width: 20px; height: 20px; fill: currentColor;
    transition: transform .15s ease;
}
.like-button:hover .heart-icon { transform: scale(1.1); }
.like-button.just-liked .heart-icon { animation: heart-bump .55s cubic-bezier(.2,1.4,.5,1); }
.like-count { font-weight: 700; display: inline-block; min-width: 1.6em; text-align: center; }
.like-count.bump { animation: like-count-pop .4s ease; }

@keyframes heart-bump {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.45); }
    45%  { transform: scale(.85); }
    70%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
@keyframes like-count-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* like 解除時に薄くフラッシュさせる ripple */
.like-button.liked::after {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(0,255,65,0.6);
}
.like-button.just-liked::after {
    animation: like-ripple .65s ease-out;
}
.like-button { position: relative; overflow: visible; }
@keyframes like-ripple {
    0%   { box-shadow: 0 0 0 0    rgba(0,255,65,0.55); }
    100% { box-shadow: 0 0 0 16px rgba(0,255,65,0);    }
}

.action-group-right { display: flex; align-items: center; gap: .8rem; }
.share-label { color: var(--hl-fg-dim); font-size: .8rem; }
.sns-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .75rem; border: 1px solid #2a2a2a; border-radius: 3px;
    color: #ddd; font-size: .8rem; transition: all .2s;
}
.sns-btn:hover { border-color: var(--hl-accent-2); color: var(--hl-accent); box-shadow: 0 0 10px var(--hl-glow); }

.comment-area { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(0,255,65,0.2); }
.comment-heading {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--hl-mono); color: var(--hl-accent);
    font-size: 1.1rem; letter-spacing: 2px;
    text-shadow: 0 0 8px var(--hl-glow); margin: 0 0 1.2rem;
}
.comment-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.8rem; height: 1.8rem; padding: 0 .5rem;
    background: rgba(0,255,65,0.12); border: 1px solid var(--hl-accent-2);
    border-radius: 999px; color: var(--hl-accent); font-size: .8rem;
    text-shadow: none;
}

.comment-list { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.8rem; }
.comment-item {
    display: flex; gap: .9rem;
    background: linear-gradient(180deg, var(--hl-bg-card), var(--hl-bg-card-2));
    border: 1px solid #1a1a1a; border-left: 3px solid var(--hl-accent-2);
    padding: .85rem 1rem; border-radius: 4px;
}
.comment-item--admin {
    border-left-color: #ffb84a;
    box-shadow: inset 3px 0 16px rgba(255,184,74,0.06);
}
.comment-avatar {
    flex: none; width: 2.4rem; height: 2.4rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,255,65,0.08); border: 1px solid var(--hl-accent-2);
    border-radius: 50%; color: var(--hl-accent);
    font-family: var(--hl-mono); font-size: 1rem; font-weight: 700;
    text-transform: uppercase; user-select: none;
}
.comment-item--admin .comment-avatar {
    background: rgba(255,184,74,0.10); border-color: rgba(255,184,74,0.5); color: #ffb84a;
}
.comment-main { flex: 1; min-width: 0; }
.comment-header {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin-bottom: .35rem; font-size: .8rem;
}
.comment-name { color: var(--hl-accent); font-family: var(--hl-mono); font-weight: 700; }
.comment-item--admin .comment-name { color: #ffb84a; }
.comment-badge {
    display: inline-block; padding: .05rem .45rem;
    background: rgba(255,184,74,0.15); border: 1px solid rgba(255,184,74,0.55);
    border-radius: 3px; color: #ffb84a;
    font-family: var(--hl-mono); font-size: .65rem; letter-spacing: 1px;
}
.comment-date { color: var(--hl-fg-dim); font-family: var(--hl-mono); margin-left: auto; }
.comment-body { color: var(--hl-fg); line-height: 1.7; word-break: break-word; }
.comment-empty {
    color: var(--hl-fg-dim); font-style: italic;
    padding: 1.2rem 1rem; text-align: center;
    border: 1px dashed rgba(0,255,65,0.18); border-radius: 4px;
}

.comment-form {
    background: var(--hl-bg-card);
    border: 1px solid rgba(0,255,65,0.22); padding: 1rem 1.2rem 1.2rem;
    border-radius: 6px;
}
.comment-form-heading {
    margin: 0 0 1rem; font-family: var(--hl-mono); color: var(--hl-accent);
    font-size: .92rem; letter-spacing: 1px;
    border-bottom: 1px solid rgba(0,255,65,0.18); padding-bottom: .4rem;
}
.comment-form-row { margin: .6rem 0; }
.comment-form-field { display: block; position: relative; }
.comment-form-label {
    display: block; color: var(--hl-fg-mute); font-size: .78rem;
    font-family: var(--hl-mono); letter-spacing: .5px; margin-bottom: .25rem;
}
.comment-form-label small { color: var(--hl-fg-dim); margin-left: .3rem; }
.comment-form input[type=text], .comment-form textarea {
    width: 100%; box-sizing: border-box;
    background: #050505; color: var(--hl-fg);
    border: 1px solid #2a2a2a; padding: .6rem .7rem; border-radius: 3px;
    font-family: var(--hl-sans); font-size: .9rem;
}
.comment-form textarea { font-family: var(--hl-mono); resize: vertical; min-height: 110px; }
.comment-form input:focus, .comment-form textarea:focus {
    outline: none; border-color: var(--hl-accent); box-shadow: 0 0 10px var(--hl-glow);
}
.comment-form-counter {
    position: absolute; right: .4rem; bottom: .35rem;
    font-family: var(--hl-mono); font-size: .7rem; color: var(--hl-fg-dim);
    pointer-events: none;
}
.comment-form-recaptcha { margin: .8rem 0; }
.comment-form-actions {
    display: flex; align-items: center; gap: 1rem; margin-top: .9rem;
}
.comment-form button[type=submit] {
    background: transparent; color: var(--hl-accent);
    border: 1px solid var(--hl-accent); padding: .55rem 1.6rem;
    font-family: var(--hl-mono); font-weight: 700; letter-spacing: 1px;
    cursor: pointer; border-radius: 3px;
    transition: background .15s, color .15s;
}
.comment-form button[type=submit]:hover { background: var(--hl-accent); color: #000; }
.comment-error { color: var(--hl-danger); font-size: .85rem; margin: 0; }

/* === Home shell (フル幅 + 右端固定サイドバー) ===
   ホーム専用。container/.with-sidebar の max-width 制約を外し、
   サイドバーを viewport 右端に張り付けて main の表示幅を最大化する。 */
.home-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    align-items: start;
    padding: 1.8rem clamp(1.5rem, 6vw, 6rem);
    max-width: none;
}
.home-main { min-width: 0; }
.home-sidebar {
    display: flex; flex-direction: column; gap: 1.1rem;
    position: sticky; top: 84px;
    max-height: calc(100vh - 100px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 8px 4px 4px;
}

/* === Home section (カテゴリ別ブロック) === */
.home-section {
    /* セクションごとに上書きされるアクセントカラー (タイトル / 見出しバー用) */
    --section-accent: var(--hl-accent);
    --section-accent-glow: var(--hl-glow);
    --section-accent-tint: rgba(0,255,65,0.04);
    margin: 0 0 3.5rem;
    position: relative;
}
.home-section__header {
    position: relative;
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; margin: 0 0 1.4rem;
    padding: .45rem 0 .7rem 1rem;
}
/* タイトル横の縦バー (ネオン光) */
.home-section__header::before {
    content: '';
    position: absolute;
    top: .15rem; bottom: .35rem; left: 0;
    width: 3px;
    background: var(--section-accent);
    box-shadow:
        0 0 8px var(--section-accent),
        0 0 18px var(--section-accent-glow);
    border-radius: 2px;
}
/* 下端のグラデーション underline (中央が一番明るく、右端へフェード) */
.home-section__header::after {
    content: '';
    position: absolute;
    left: 1rem; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--section-accent) 70%, transparent) 0%,
        color-mix(in srgb, var(--section-accent) 25%, transparent) 40%,
        transparent 100%);
    box-shadow: 0 0 6px var(--section-accent-glow);
}
.home-section__title {
    margin: 0; font-family: var(--hl-mono);
    color: var(--section-accent); font-size: 1.4rem; letter-spacing: 3px;
    text-shadow:
        0 0 8px var(--section-accent-glow),
        0 0 18px color-mix(in srgb, var(--section-accent) 35%, transparent);
    font-weight: 700;
    text-transform: uppercase;
}
.home-section__title::before { content: '// '; opacity: .45; letter-spacing: 1px; }

/* タイトル全体をクリックでセクション一覧へ */
.home-section__title-link {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size .25s ease, text-shadow .25s ease;
    padding-bottom: 2px;
}
.home-section__title-link:hover {
    background-size: 100% 1px;
    text-shadow:
        0 0 12px var(--section-accent-glow),
        0 0 24px color-mix(in srgb, var(--section-accent) 40%, transparent);
}
.home-section__grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    justify-content: start;
}

/* === 横スクロール (カルーセル) モード ===
   home-section--carousel に付与すると、grid → 横スクロール flex に切替。
   左右の home-carousel__btn でスライド。 */
.home-carousel {
    position: relative;
    /* ボタンが要素の左右にはみ出すぶんのバッファ */
    padding: 0 38px;
}
/* 左右の端をフェードでぼかし、半端に切れたカードを視覚的に隠す。
   さらに pointer-events: auto でクリックを吸収するため、ボタンを
   押す際に背後の半端カードを誤クリックする事故を防ぐ。
   ボタンは z-index で上に。 */
.home-carousel::before,
.home-carousel::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 64px;
    pointer-events: auto;
    z-index: 3;
}
.home-carousel::before {
    left: 0;
    background: linear-gradient(90deg,
        var(--hl-bg) 0%,
        var(--hl-bg) 35%,
        rgba(0,0,0,0) 100%);
    transition: opacity .25s ease;
}
.home-carousel::after {
    right: 0;
    background: linear-gradient(270deg,
        var(--hl-bg) 0%,
        var(--hl-bg) 35%,
        rgba(0,0,0,0) 100%);
    transition: opacity .25s ease;
}
/* 端まで来てボタンが消えた側はフェードも消す */
.home-carousel.is-at-start::before { opacity: 0; pointer-events: none; }
.home-carousel.is-at-end::after    { opacity: 0; pointer-events: none; }
/* featured セクションは枠で囲うので、その境目までフェードする */
.home-section--featured .home-carousel::before,
.home-section--featured .home-carousel::after {
    background: linear-gradient(90deg, #050505 0%, #050505 30%, transparent 100%);
}
.home-section--featured .home-carousel::after {
    background: linear-gradient(270deg, #050505 0%, #050505 30%, transparent 100%);
}
.home-section__grid--scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1.4rem;
    padding: 4px 4px 12px; /* glow が見切れないよう余白 */
    margin: 0;
    /* スクロールバー非表示 (FF/Safari/Chromium) */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* ドラッグスクロール用のカーソル */
    cursor: grab;
    /* 横スワイプはカルーセル本体を、縦スワイプはページ全体をスクロール。
       (旧 pan-y のみだと「Y 方向のみ許可」の意味で横スワイプがブロックされていた) */
    touch-action: pan-x pan-y;
}
.home-section__grid--scroll.is-dragging,
.home-section__grid--scroll.is-momentum {
    scroll-snap-type: none;
    scroll-behavior: auto;
}
.home-section__grid--scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.home-section__grid--scroll.is-dragging .post-card,
.home-section__grid--scroll.is-dragging a {
    pointer-events: none;
}
/* ネイティブ HTML5 のリンク / 画像ドラッグを禁止
   (a や img をブラウザのタブ欄に放り込まれて URL ドラッグが
    発火するのを防ぐ。JS 側でも dragstart を preventDefault) */
.home-section__grid--scroll a,
.home-section__grid--scroll img {
    -webkit-user-drag: none;
    user-drag: none;
}
.home-section__grid--scroll::-webkit-scrollbar { display: none; }
.home-section__grid--scroll > .post-card {
    flex: 0 0 280px;          /* カード幅を固定。ぎゅっと詰めずに横にスライド */
    max-width: 280px;
    scroll-snap-align: start;
    scroll-snap-stop: always; /* 1枚ずつ確実に止める */
}

/* 左右のボタン (フェードグラデーションより上に重ねる) */
.home-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
    border: 1px solid color-mix(in srgb, var(--section-accent, var(--hl-accent)) 45%, transparent);
    color: var(--section-accent, var(--hl-accent));
    font-family: var(--hl-mono);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 0 12px color-mix(in srgb, var(--section-accent, var(--hl-glow)) 25%, transparent);
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.home-carousel__btn--prev { left: 0; }
.home-carousel__btn--next { right: 0; }
.home-carousel__btn:hover:not(:disabled) {
    background: var(--section-accent, var(--hl-accent));
    color: #000;
    box-shadow: 0 0 18px color-mix(in srgb, var(--section-accent, var(--hl-glow)) 55%, transparent);
}
.home-carousel__btn:disabled {
    opacity: .25;
    cursor: default;
}

@media (max-width: 767px) {
    /* スマホはネイティブのスワイプに任せ、ボタンは隠す */
    .home-carousel { padding: 0; }
    .home-carousel__btn { display: none; }
    /* カードを小さくして「右端に次のカードが見切れている」状態にする。
       これでユーザに横スワイプ可能性が視覚的に伝わる。 */
    .home-section__grid--scroll > .post-card { flex: 0 0 62vw; max-width: 62vw; }
}

/* セクションタイプ別アクセント (カードと同じパレットを共有) */
.home-section--news        { --section-accent: var(--hl-type-news);        --section-accent-glow: var(--hl-type-news-glow);        --section-accent-tint: rgba(255,56,96,0.04); }
.home-section--explanation { --section-accent: var(--hl-type-explanation); --section-accent-glow: var(--hl-type-explanation-glow); --section-accent-tint: rgba(0,247,255,0.04); }
.home-section--experiment  { --section-accent: var(--hl-type-experiment);  --section-accent-glow: var(--hl-type-experiment-glow);  --section-accent-tint: rgba(255,0,170,0.04); }
.home-section--machine     { --section-accent: var(--hl-type-machine);     --section-accent-glow: var(--hl-type-machine-glow);     --section-accent-tint: rgba(0,255,65,0.04); }
.home-section--development { --section-accent: var(--hl-type-development); --section-accent-glow: var(--hl-type-development-glow); --section-accent-tint: rgba(245,165,36,0.04); }

/* 「おすすめ」は特別扱い: 薄い枠で囲む。色は緑のまま (サイトの基調色) */
.home-section--featured {
    background: linear-gradient(180deg, var(--section-accent-tint), transparent);
    border-radius: 6px;
    padding: 1rem 1.2rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--section-accent) 22%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--section-accent) 10%, transparent);
}
.home-section--all .sort-bar { flex-wrap: wrap; }
.home-section--all { --section-accent: var(--hl-type-all); --section-accent-glow: var(--hl-type-all-glow); }

/* === Sidebar (with-sidebar layout) === */
.with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.with-sidebar--left { grid-template-columns: 300px minmax(0, 1fr); }
.with-sidebar--right { grid-template-columns: minmax(0, 1fr) 280px; }
.sidebar {
    display: flex; flex-direction: column; gap: 1.1rem;
    position: sticky; top: 84px;
    max-height: calc(100vh - 100px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 8px 4px 4px; /* hover glow が見切れないようバッファ */
}
.sidebar--left { padding-right: .35rem; }
.info-card {
    background: linear-gradient(180deg, #000 0%, #050805 100%);
    border: 1px solid var(--hl-accent-2); border-radius: 6px;
    padding: 1rem 1.1rem; box-shadow: 0 0 14px var(--hl-glow);
    transform: none !important;
    transition: none;
}
.info-card:hover { transform: none !important; }
.info-card h3 {
    margin: 0 0 .8rem; padding-bottom: .5rem; font-family: var(--hl-mono);
    color: var(--hl-accent); font-size: .95rem; letter-spacing: 1px;
    border-bottom: 1px solid rgba(0,255,65,0.3);
    text-shadow: 0 0 8px var(--hl-glow);
}
.info-card h3::before { content: '// '; opacity: .6; }
.info-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .85rem; }
.info-card li a { color: #ddd; transition: color .2s, padding .2s; display: flex; gap: .5rem; align-items: center; }
.info-card li a:hover { color: var(--hl-accent); }
.info-card li .post-num { color: var(--hl-accent); font-family: var(--hl-mono); font-size: .75rem; opacity: .8; }

.cyber-button {
    display: block; width: 100%; padding: .65rem 0; background: transparent;
    border: 1px solid var(--hl-accent); color: var(--hl-accent); text-align: center;
    font-family: var(--hl-mono); font-weight: bold; letter-spacing: 2px; font-size: .85rem;
    text-decoration: none; cursor: pointer; border-radius: 3px;
}
.cyber-button:hover { background: var(--hl-accent); color: #000; }

/* === sidebar 検索フォーム === */
.sidebar-search input[type=search] {
    width: 100%; box-sizing: border-box;
    background: #050505; border: 1px solid #2a2a2a; color: var(--hl-fg);
    padding: .5rem .7rem; border-radius: 3px;
    font-family: var(--hl-mono); font-size: .85rem;
}
.sidebar-search input:focus { outline: none; border-color: var(--hl-accent); box-shadow: 0 0 12px var(--hl-glow); }
.sidebar-search button {
    width: 100%; margin-top: .5rem;
    background: transparent; color: var(--hl-accent);
    border: 1px solid var(--hl-accent); padding: .45rem 0;
    font-family: var(--hl-mono); font-weight: bold; letter-spacing: 1px; cursor: pointer;
    border-radius: 3px; transition: all .2s;
}
.sidebar-search button:hover { background: var(--hl-accent); color: #000; box-shadow: 0 0 14px var(--hl-glow-strong); }

/* === タグクラウド === */
.tag-cloud { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag-cloud a {
    display: inline-block; padding: .25rem .55rem;
    background: rgba(0,255,65,0.06); border: 1px solid rgba(0,255,65,0.2);
    color: #ccc; border-radius: 3px;
    font-family: var(--hl-mono); font-size: .75rem;
    transition: all .2s;
}
.tag-cloud a:hover { background: var(--hl-accent); color: #000; border-color: var(--hl-accent); box-shadow: 0 0 12px var(--hl-glow-strong); }
.tag-cloud a.active { background: var(--hl-accent); color: #000; border-color: var(--hl-accent); }

.category-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; font-family: var(--hl-mono); font-size: .85rem; }
.category-list a { display: flex; justify-content: space-between; padding: .35rem .5rem; background: #0a0a0a; border-radius: 3px; color: #ccc; }
.category-list a:hover { background: rgba(0,255,65,0.08); color: var(--hl-accent); }
.category-list a.active { background: rgba(0,255,65,0.15); color: var(--hl-accent); border-left: 2px solid var(--hl-accent); }

/* === Home: 横幅最大限 === */
.hero-section-wrap { max-width: 1480px; margin: 0 auto; padding: 1.5rem 2.4vw 0; }
.home-bottom-cards {
    max-width: 1480px; margin: 2.5rem auto 0;
    padding: 1.5rem 2.4vw 0; border-top: 1px solid var(--hl-accent-3);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem;
}

/* === Admin (グリーン基調) === */
.admin-nav {
    background: #050505; padding: .65rem 1.4rem; display: flex; gap: 1.2rem;
    align-items: center; border-bottom: 1px solid var(--hl-accent-2);
    box-shadow: 0 2px 14px var(--hl-glow);
}
.admin-nav strong { color: var(--hl-accent); font-family: var(--hl-mono); letter-spacing: 1px; text-shadow: 0 0 6px var(--hl-glow); }
.admin-nav a, .admin-nav button { color: #ddd; background: none; border: none; cursor: pointer; padding: .25rem .5rem; font-size: .9rem; transition: color .2s; }
.admin-nav a:hover, .admin-nav button:hover { color: var(--hl-accent); }
.admin-main { padding: 1.4rem 2.4vw; max-width: 1480px; margin: 0 auto; flex: 1 0 auto; }

.flash {
    background: rgba(0,255,65,0.15); color: var(--hl-accent);
    border: 1px solid var(--hl-accent-2); padding: .6rem 1rem;
    border-radius: 4px; margin: 1rem 0; font-family: var(--hl-mono);
    box-shadow: 0 0 14px var(--hl-glow);
}
.errors { background: rgba(255,56,96,0.12); color: var(--hl-danger); border: 1px solid var(--hl-danger); padding: .6rem 1rem; border-radius: 4px; margin: 1rem 0; }

table.admin-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .9rem; }
table.admin-table th, table.admin-table td { border: 1px solid #1a1a1a; padding: .55rem .75rem; text-align: left; vertical-align: top; }
table.admin-table th { background: #0a0a0a; color: var(--hl-accent); font-family: var(--hl-mono); }
table.admin-table tr:hover td { background: rgba(0,255,65,0.05); }

.btn-primary, .btn-danger {
    display: inline-block; padding: .45rem .95rem; border-radius: 3px;
    font-family: var(--hl-mono); font-weight: bold; letter-spacing: 1px;
    cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: all .2s;
}
.btn-primary { background: transparent; color: var(--hl-accent); border-color: var(--hl-accent); }
.btn-primary:hover { background: var(--hl-accent); color: #000; box-shadow: 0 0 14px var(--hl-glow-strong); }
.btn-danger { background: transparent; color: var(--hl-danger); border-color: var(--hl-danger); }
.btn-danger:hover { background: var(--hl-danger); color: #fff; box-shadow: 0 0 12px rgba(255,56,96,0.5); }

.field { margin: .8rem 0; }
.field label { display: block; color: var(--hl-fg-mute); font-size: .85rem; margin-bottom: .25rem; }
.field input, .field textarea, .field select {
    width: 100%; box-sizing: border-box; background: #050505; color: var(--hl-fg);
    border: 1px solid #2a2a2a; padding: .55rem; border-radius: 3px;
    font-family: var(--hl-sans);
}
.field textarea { font-family: var(--hl-mono); min-height: 240px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--hl-accent); box-shadow: 0 0 12px var(--hl-glow); }
form.inline { display: inline; }

/* === Home toolbar (sort) === */
.home-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin: 0 0 1.4rem;
}
.sort-bar {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--hl-mono); font-size: .8rem; color: var(--hl-fg-mute);
}
.sort-bar label { letter-spacing: 1px; }
.sort-bar select {
    background: #050505; border: 1px solid var(--hl-accent-2); color: var(--hl-fg);
    padding: .4rem .7rem; border-radius: 3px; font-family: var(--hl-mono);
    font-size: .82rem; cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.sort-bar select:hover, .sort-bar select:focus {
    outline: none; border-color: var(--hl-accent); box-shadow: 0 0 10px var(--hl-glow);
}
.sort-bar button {
    background: transparent; border: 1px solid var(--hl-accent); color: var(--hl-accent);
    padding: .4rem .9rem; border-radius: 3px; font-family: var(--hl-mono);
    font-size: .8rem; cursor: pointer; letter-spacing: 1px;
}
.sort-bar button:hover { background: var(--hl-accent); color: #000; }

/* === Profile / SNS sidebar (home) === */
.profile-card .profile-body {
    display: flex; gap: .9rem; align-items: flex-start;
}
.profile-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    border: 1px solid var(--hl-accent); box-shadow: 0 0 12px var(--hl-glow);
    object-fit: cover; flex: none;
}
.profile-meta { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.profile-name {
    margin: 0; font-family: var(--hl-mono); color: var(--hl-accent);
    font-size: .95rem; letter-spacing: 1px;
}
.profile-handle {
    margin: 0; font-family: var(--hl-mono); color: var(--hl-fg-dim);
    font-size: .78rem;
}
.profile-bio {
    margin: .35rem 0 0; color: var(--hl-fg-mute);
    font-size: .78rem; line-height: 1.6;
}
.sns-card .sns-handle {
    margin: 0 0 .3rem; font-family: var(--hl-mono); color: var(--hl-accent);
    font-size: .85rem;
}
.sns-card .sns-desc {
    margin: 0 0 .8rem; color: var(--hl-fg-mute);
    font-size: .8rem; line-height: 1.6;
}
.sns-x { border-left: 3px solid #1da1f2; }
.sns-yt { border-left: 3px solid #ff0033; }

/* === Sidebar mobile toggle === */
.sidebar-mobile-summary { display: none; }
.sidebar-mobile-toggle { display: contents; }
@media (max-width: 1023px) {
    .sidebar-mobile-toggle { display: block; border: 1px solid var(--hl-accent-2); border-radius: 6px; background: rgba(0,0,0,0.6); }
    .sidebar-mobile-summary {
        display: flex; align-items: center; justify-content: space-between;
        padding: .8rem 1rem; cursor: pointer;
        font-family: var(--hl-mono); color: var(--hl-accent);
        font-size: .9rem; letter-spacing: 1px;
        list-style: none;
    }
    .sidebar-mobile-summary::-webkit-details-marker { display: none; }
    .sidebar-mobile-summary-icon { transition: transform .2s; }
    .sidebar-mobile-toggle[open] > .sidebar-mobile-summary-icon,
    .sidebar-mobile-toggle[open] > .sidebar-mobile-summary > .sidebar-mobile-summary-icon {
        transform: rotate(180deg);
    }
    .sidebar-mobile-toggle[open] { padding: 0 .55rem .55rem; }
}

/* === Filter form (left sidebar) === */
.filter-form .filter-label {
    display: block; font-family: var(--hl-mono); font-size: .75rem;
    color: var(--hl-fg-mute); letter-spacing: 1px; margin: 0 0 .35rem;
}
.filter-form input[type=search] {
    width: 100%; box-sizing: border-box; background: #050505;
    border: 1px solid #2a2a2a; color: var(--hl-fg);
    padding: .5rem .7rem; border-radius: 3px;
    font-family: var(--hl-mono); font-size: .85rem;
}
.filter-form input[type=search]:focus {
    outline: none; border-color: var(--hl-accent); box-shadow: 0 0 12px var(--hl-glow);
}
.tag-checkbox-list {
    display: flex; flex-wrap: wrap; gap: .35rem;
    max-height: 320px; overflow-y: auto; padding: .35rem .15rem;
    border: 1px solid rgba(0,255,65,0.12); border-radius: 3px;
    background: #030503;
}
.tag-checkbox-list--inline {
    max-height: none; overflow: visible;
    border: none; background: transparent;
    padding: .25rem 0 0;
}

/* タググループ (details/summary) */
.tag-group-list {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .4rem; border: 1px solid rgba(0,255,65,0.12);
    border-radius: 3px; background: #030503;
}
.tag-group {
    border: 1px solid rgba(0,255,65,0.12);
    border-radius: 3px; background: #050905;
}
.tag-group-summary {
    display: flex; align-items: center;
    gap: .5rem; padding: .4rem .6rem; cursor: pointer;
    font-family: var(--hl-mono); font-size: .78rem;
    color: var(--hl-fg-mute); list-style: none;
    transition: color .15s, background .15s;
    min-width: 0;
}
.tag-group-summary::-webkit-details-marker { display: none; }
.tag-group-summary::before {
    content: '▸'; color: var(--hl-accent); transition: transform .2s;
    font-size: .7rem; line-height: 1;
}
.tag-group[open] > .tag-group-summary::before { transform: rotate(90deg); }
.tag-group-summary:hover { color: var(--hl-accent); background: rgba(0,255,65,0.04); }
.tag-group-name {
    flex: 1; min-width: 0; letter-spacing: .5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag-group-count {
    font-size: .68rem; color: var(--hl-fg-dim);
    border: 1px solid rgba(0,255,65,0.2); border-radius: 999px;
    padding: 0 .45rem; line-height: 1.4;
}
.tag-group[open] > .tag-checkbox-list { padding: 0 .55rem .55rem; }
.tag-checkbox {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .55rem; border: 1px solid rgba(0,255,65,0.2);
    border-radius: 999px; background: #050505; cursor: pointer;
    font-family: var(--hl-mono); font-size: .72rem;
    color: var(--hl-fg-mute); transition: all .15s;
}
.tag-checkbox:hover { border-color: var(--hl-accent); color: var(--hl-fg); }
.tag-checkbox input[type=checkbox] { display: none; }
.tag-checkbox.checked,
.tag-checkbox:has(input:checked) {
    background: rgba(0,255,65,0.15); border-color: var(--hl-accent);
    color: var(--hl-accent); box-shadow: 0 0 8px var(--hl-glow);
}
.tag-checkbox .tag-count {
    font-size: .65rem; opacity: .7;
}
.filter-actions {
    display: flex; align-items: center; gap: .8rem; margin-top: .9rem;
}
.filter-actions .cyber-button { flex: 1; }
.filter-clear {
    color: var(--hl-fg-dim); font-family: var(--hl-mono);
    font-size: .75rem; letter-spacing: 1px; text-decoration: underline;
}
.filter-clear:hover { color: var(--hl-danger); }
.filter-summary {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .5rem; margin: .5rem 0 1rem;
    color: var(--hl-fg-mute); font-family: var(--hl-mono); font-size: .82rem;
}
.filter-chip {
    display: inline-block; padding: .15rem .55rem;
    background: rgba(0,255,65,0.1); border: 1px solid var(--hl-accent-2);
    border-radius: 999px; color: var(--hl-accent);
}
.filter-clear-inline {
    margin-left: .4rem; color: var(--hl-fg-dim);
}

/* === Read progress bar (article) === */
.read-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: var(--hl-accent);
    box-shadow: 0 0 8px var(--hl-glow-strong);
    z-index: 1101; pointer-events: none;
    transition: width .08s linear;
}

/* === Back to top floating button === */
.back-to-top {
    position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 1050;
    width: 2.6rem; height: 2.6rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.85); color: var(--hl-accent);
    border: 1px solid var(--hl-accent); border-radius: 50%;
    box-shadow: 0 0 14px var(--hl-glow);
    cursor: pointer;
    transition: background .15s, color .15s, transform .2s;
}
.back-to-top:hover {
    background: var(--hl-accent); color: #000;
    box-shadow: 0 0 22px var(--hl-glow-strong);
    transform: translateY(-2px);
}
.back-to-top[hidden] { display: none; }
@supports (padding: env(safe-area-inset-bottom)) {
    .back-to-top {
        bottom: calc(1.4rem + env(safe-area-inset-bottom));
        right:  calc(1.4rem + env(safe-area-inset-right));
    }
}

/* === Machines list === */
.machines-head { margin-bottom: 1.4rem; }
.page-lead { color: var(--hl-fg-mute); font-size: .9rem; margin: .4rem 0 0; }

.machines-filter {
    display: flex; flex-direction: column; gap: .8rem;
    margin: 0 0 1.6rem; padding: 1rem 1.1rem;
    background: linear-gradient(180deg, #000 0%, #050805 100%);
    border: 1px solid var(--hl-accent-2); border-radius: 6px;
}
.machines-filter-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.machines-filter-label {
    font-family: var(--hl-mono); font-size: .72rem; letter-spacing: 2px;
    color: var(--hl-fg-dim); min-width: 96px;
}
.filter-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .8rem; background: #050505; border: 1px solid var(--hl-accent-2);
    color: var(--hl-fg-mute); border-radius: 999px;
    font-family: var(--hl-mono); font-size: .76rem;
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}
.filter-pill:hover { color: var(--hl-accent); border-color: var(--hl-accent); }
.filter-pill.active {
    background: var(--hl-accent); color: #000; border-color: var(--hl-accent);
    box-shadow: 0 0 10px var(--hl-glow);
}
.filter-pill .pill-count { font-size: .68rem; opacity: .7; }
.filter-pill.active .pill-count { opacity: 1; color: rgba(0,0,0,0.7); }

.machines-filter-search { gap: .5rem; }
.machines-filter-search input[type=search] {
    flex: 1 1 240px; min-width: 200px; box-sizing: border-box;
    background: #050505; border: 1px solid var(--hl-accent-2); color: var(--hl-fg);
    padding: .5rem .8rem; border-radius: 3px;
    font-family: var(--hl-mono); font-size: .85rem;
}
.machines-filter-search input:focus {
    outline: none; border-color: var(--hl-accent); box-shadow: 0 0 10px var(--hl-glow);
}
.machines-filter-search button {
    background: transparent; color: var(--hl-accent);
    border: 1px solid var(--hl-accent); padding: .5rem 1.2rem;
    font-family: var(--hl-mono); font-size: .8rem;
    cursor: pointer; border-radius: 3px;
}
.machines-filter-search button:hover { background: var(--hl-accent); color: #000; }

.machine-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
    gap: 1.4rem; justify-content: center;
}
.machine-card {
    background: linear-gradient(180deg, var(--hl-bg-card), var(--hl-bg-card-2));
    border: 1px solid var(--hl-accent-2); border-radius: 6px;
    overflow: hidden; box-shadow: 0 0 12px var(--hl-glow);
    transition: box-shadow .25s, border-color .25s;
}
.machine-card:hover {
    border-color: var(--hl-accent); box-shadow: 0 0 22px var(--hl-glow-strong);
}
.machine-card-link {
    display: flex; flex-direction: column; height: 100%; color: inherit;
}
.machine-card-thumb {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
    background: #050505; border-bottom: 1px solid #1a1a1a;
}
.machine-card-thumb--placeholder {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #001a08 0%, #002b14 100%);
    color: var(--hl-accent); font-family: var(--hl-mono);
    font-size: 3rem; font-weight: 700; letter-spacing: 4px;
    text-shadow: 0 0 16px var(--hl-glow-strong);
}
.machine-card-body { padding: .9rem 1.05rem 1rem; flex-grow: 1; display: flex; flex-direction: column; gap: .5rem; }
.machine-card-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.machine-card-name { margin: 0; font-family: var(--hl-mono); font-size: 1.15rem; color: var(--hl-accent); letter-spacing: 1px; }
.machine-card-summary {
    margin: 0; flex-grow: 1; font-size: .82rem; color: var(--hl-fg-mute); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.machine-card-tech { display: flex; flex-wrap: wrap; gap: .3rem; }
.machine-card-meta {
    display: flex; gap: .8rem; font-family: var(--hl-mono); font-size: .7rem;
    color: var(--hl-fg-dim); border-top: 1px solid rgba(0,255,65,0.12); padding-top: .5rem;
}

/* === Badges (OS / Difficulty / Tech) === */
.badge {
    display: inline-block; padding: .15rem .55rem;
    font-family: var(--hl-mono); font-size: .68rem; letter-spacing: 1px;
    border: 1px solid currentColor; border-radius: 3px; line-height: 1.4;
}
.badge-os-linux    { color: #e6c64a; }
.badge-os-windows  { color: #4ab4ff; }
.badge-os-mac      { color: #c0c0c0; }
.badge-os-other    { color: var(--hl-fg-mute); }
.badge-diff-easy   { color: #6ee870; }
.badge-diff-medium { color: #ffb84a; }
.badge-diff-hard   { color: #ff7a5a; }
.badge-diff-insane { color: #ff5a8a; }

.tech-chip {
    display: inline-block; padding: .15rem .55rem;
    background: rgba(0,255,65,0.08); border: 1px solid var(--hl-accent-2);
    border-radius: 999px; color: var(--hl-fg-mute);
    font-family: var(--hl-mono); font-size: .7rem;
}

/* === Machine detail header === */
.machine-header-badges { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.machine-date { font-family: var(--hl-mono); font-size: .78rem; color: var(--hl-fg-dim); margin-left: auto; }
.machine-tech-row { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0 1rem; }

/* === Machine info box (HTB-like) === */
.machine-infobox {
    display: grid; grid-template-columns: 110px 1fr; gap: 1.4rem;
    padding: 1.3rem 1.4rem; margin: 0 0 1.8rem;
    background: linear-gradient(135deg, #001b09 0%, #002d15 60%, #001a08 100%);
    border: 1px solid var(--hl-accent); border-radius: 8px;
    box-shadow: 0 0 22px var(--hl-glow), inset 0 0 32px rgba(0,255,65,0.08);
    position: relative; overflow: hidden;
}
.machine-infobox::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 10% 0%, rgba(0,255,65,0.10), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(0,247,255,0.06), transparent 50%);
    pointer-events: none;
}
.machine-infobox-icon {
    width: 110px; height: 110px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,255,65,0.06); border: 1px solid var(--hl-accent);
    border-radius: 8px; color: var(--hl-accent);
    font-family: var(--hl-mono); font-size: 3rem; font-weight: 700;
    text-shadow: 0 0 18px var(--hl-glow-strong);
    overflow: hidden;
    box-shadow: inset 0 0 14px rgba(0,255,65,0.18);
}
.machine-infobox-icon img { width: 100%; height: 100%; object-fit: cover; }
.machine-infobox-main { min-width: 0; position: relative; }
.machine-infobox-name {
    margin: 0 0 .85rem; font-family: var(--hl-mono);
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    color: var(--hl-accent); letter-spacing: 3px;
    text-shadow: 0 0 12px var(--hl-glow);
    overflow-wrap: anywhere;
}
.machine-infobox-meta {
    display: flex; flex-wrap: wrap; gap: .55rem 1.6rem;
    margin: 0 0 .9rem;
}
.machine-infobox-meta > div {
    display: flex; align-items: center; gap: .55rem;
    font-family: var(--hl-mono); font-size: .82rem;
    flex-wrap: wrap;
}
.machine-infobox-meta dt {
    color: var(--hl-fg-dim); letter-spacing: 1px;
    font-size: .68rem; text-transform: uppercase;
}
.machine-infobox-meta dd { margin: 0; color: var(--hl-fg); }
.machine-infobox-meta-tech { flex-basis: 100%; align-items: flex-start !important; }
.machine-infobox-tech { display: flex; flex-wrap: wrap; gap: .3rem; }
.machine-infobox-summary {
    margin: 0; padding-top: .8rem;
    border-top: 1px dashed rgba(0,255,65,0.2);
    color: var(--hl-fg-mute); font-size: .85rem; line-height: 1.7;
    overflow-wrap: anywhere;
}
@media (max-width: 640px) {
    .machine-infobox { grid-template-columns: 76px 1fr; gap: .9rem; padding: 1rem; }
    .machine-infobox-icon { width: 76px; height: 76px; font-size: 2.2rem; }
    .machine-infobox-name { letter-spacing: 1.5px; }
}

/* === Tag page header === */
.tag-header {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    margin: .4rem 0 1.4rem; padding-bottom: .8rem;
    border-bottom: 1px dashed rgba(0,255,65,0.2);
}
.tag-header-prefix {
    font-family: var(--hl-mono); font-size: .72rem;
    color: var(--hl-fg-dim); letter-spacing: 2px;
    border: 1px solid var(--hl-accent-2); border-radius: 3px;
    padding: .2rem .6rem;
}
.tag-header-name {
    margin: 0; font-family: var(--hl-mono); font-size: 1.4rem;
    color: var(--hl-accent); letter-spacing: 1px;
    text-shadow: 0 0 10px var(--hl-glow);
}
.tag-header-count {
    margin-left: auto; font-family: var(--hl-mono);
    color: var(--hl-fg-mute); font-size: .8rem;
}

/* === Post detail tag list === */
.post-tags {
    list-style: none; padding: 0; margin: 0 0 1.4rem;
    display: flex; flex-wrap: wrap; gap: .4rem;
}
.post-tags a {
    display: inline-block; padding: .2rem .65rem;
    background: rgba(0,255,65,0.06); border: 1px solid var(--hl-accent-2);
    border-radius: 999px; color: var(--hl-fg-mute);
    font-family: var(--hl-mono); font-size: .72rem;
    transition: color .15s, border-color .15s, background .15s;
}
.post-tags a:hover {
    color: var(--hl-accent); border-color: var(--hl-accent);
    background: rgba(0,255,65,0.12);
}

/* === Related posts === */
.related-posts { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px dashed rgba(0,255,65,0.2); }
.related-heading {
    font-family: var(--hl-mono); color: var(--hl-accent);
    font-size: 1rem; letter-spacing: 3px; margin: 0 0 1rem;
    text-shadow: 0 0 8px var(--hl-glow);
}
.post-grid--related { grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); gap: 1rem; }

/* === Search hit highlight === */
.search-hl {
    background: var(--hl-accent); color: #000;
    padding: 0 .15em; border-radius: 2px;
    box-shadow: 0 0 8px var(--hl-glow);
}

/* === Post prev/next nav === */
.post-nav {
    margin-top: 2.4rem; padding-top: 1.4rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    border-top: 1px dashed rgba(0,255,65,0.2);
}
.post-nav-link {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .9rem 1rem;
    background: var(--hl-bg-card); border: 1px solid rgba(0,255,65,0.18);
    border-radius: 4px; color: var(--hl-fg-mute);
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.post-nav-link:hover {
    border-color: var(--hl-accent); color: var(--hl-fg);
    background: rgba(0,255,65,0.05);
}
.post-nav-prev { text-align: left; }
.post-nav-next { text-align: right; }
.post-nav-dir {
    font-family: var(--hl-mono); font-size: .72rem;
    color: var(--hl-accent); letter-spacing: 1.5px;
}
.post-nav-title {
    font-size: .92rem; line-height: 1.5; color: inherit;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-nav-empty {
    background: transparent; border-color: transparent; pointer-events: none;
}
@media (max-width: 640px) {
    .post-nav { grid-template-columns: 1fr; }
    .post-nav-empty { display: none; }
}

/* === Breadcrumbs === */
.breadcrumbs {
    margin: 0 0 1rem; font-family: var(--hl-mono); font-size: .78rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.breadcrumbs::-webkit-scrollbar { height: 4px; }
.breadcrumbs ol {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: nowrap; align-items: center; gap: .35rem;
    min-width: max-content;
}
.breadcrumbs li {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--hl-fg-mute);
}
.breadcrumbs li + li::before {
    content: '/'; color: var(--hl-fg-dim); margin: 0 .15rem; opacity: .7;
}
.breadcrumbs a {
    color: var(--hl-fg-mute); text-decoration: none;
    border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.breadcrumbs a:hover { color: var(--hl-accent); border-bottom-color: var(--hl-accent); }
.breadcrumbs [aria-current="page"] {
    color: var(--hl-accent); max-width: 60ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* === Article TOC sidebar === */
.toc-card .toc-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .25rem;
    font-family: var(--hl-mono); font-size: .8rem;
    max-height: calc(100vh - 220px); overflow-y: auto;
    overscroll-behavior: contain;
}
.toc-item a {
    display: block; padding: .25rem .35rem;
    color: var(--hl-fg-mute); text-decoration: none;
    border-left: 2px solid transparent;
    line-height: 1.5; word-break: break-word;
    transition: color .15s, border-color .15s, padding .15s;
}
.toc-item a:hover {
    color: var(--hl-accent);
    border-left-color: var(--hl-accent);
}
.toc-item--active > a {
    color: var(--hl-accent);
    border-left-color: var(--hl-accent);
    background: rgba(0,255,65,0.06);
    text-shadow: 0 0 6px var(--hl-glow);
}
.toc-level-1 > a { color: var(--hl-fg); font-weight: 600; }
.toc-level-2 > a { padding-left: .9rem; font-size: .78rem; }
.toc-level-3 > a { padding-left: 1.5rem; font-size: .76rem; opacity: .85; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* === Sidebar category radio === */
.cat-radio-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.cat-radio {
    display: flex; align-items: center; gap: .5rem;
    padding: .35rem .6rem; border: 1px solid transparent;
    border-radius: 3px; cursor: pointer;
    font-family: var(--hl-mono); font-size: .8rem;
    color: var(--hl-fg-mute); transition: all .15s;
}
.cat-radio:hover { border-color: rgba(0,255,65,0.3); color: var(--hl-fg); }
.cat-radio input[type=radio] { display: none; }
.cat-radio.checked,
.cat-radio:has(input:checked) {
    background: rgba(0,255,65,0.12); border-color: var(--hl-accent);
    color: var(--hl-accent); box-shadow: 0 0 8px var(--hl-glow);
}
.cat-radio .cat-name { flex: 1; }
.cat-radio .cat-count { font-size: .7rem; opacity: .7; }

/* === Responsive === */
@media (max-width: 1199px) {
    .with-sidebar { grid-template-columns: minmax(0, 1fr) 280px; gap: 1.5rem; }
    .with-sidebar.with-sidebar--left { grid-template-columns: 260px minmax(0, 1fr); }
    .with-sidebar.with-sidebar--right { grid-template-columns: minmax(0, 1fr) 240px; }
    .home-shell { grid-template-columns: minmax(0, 1fr) 280px; gap: 1.5rem; }
}
@media (max-width: 1023px) {
    .with-sidebar { grid-template-columns: minmax(0, 1fr); }
    .with-sidebar.with-sidebar--left { grid-template-columns: minmax(0, 1fr); }
    .with-sidebar.with-sidebar--right { grid-template-columns: minmax(0, 1fr); }
    .with-sidebar > .content-main,
    .with-sidebar > .sidebar { min-width: 0; }
    .sidebar { position: static; max-height: none; overflow: visible; }
    /* モバイルでは右サイドバーの TOC を inline TOC に置き換える (重複防止) */
    .sidebar .toc-card { display: none; }

    .home-shell { grid-template-columns: minmax(0, 1fr); }
    .home-sidebar { position: static; max-height: none; overflow: visible; }
}

/* === Inline 目次 (モバイル限定で本文上部に出現) === */
.toc-card-inline { display: none; }
@media (max-width: 1023px) {
    .toc-card-inline {
        display: block;
        background: linear-gradient(180deg, #000 0%, #050805 100%);
        border: 1px solid var(--hl-accent-2);
        border-radius: 6px;
        padding: .75rem 1rem;
        box-shadow: 0 0 14px var(--hl-glow);
        margin: 0 0 1.5rem;
    }
    .toc-card-inline > summary {
        cursor: pointer;
        list-style: none;
        display: flex; justify-content: space-between; align-items: center;
        font-family: var(--hl-mono); color: var(--hl-accent);
        font-size: .95rem; letter-spacing: 1px; font-weight: 700;
        padding: .2rem 0;
    }
    .toc-card-inline > summary::-webkit-details-marker { display: none; }
    .toc-card-inline > summary::after {
        content: '[ − ]';
        font-family: var(--hl-mono); font-size: .8rem;
        color: var(--hl-fg-dim);
    }
    .toc-card-inline:not([open]) > summary::after { content: '[ + ]'; }
    .toc-card-inline > .toc-list {
        margin: .8rem 0 0; padding-left: 0; list-style: none;
        border-top: 1px solid rgba(0,255,65,0.15); padding-top: .6rem;
    }
}
@media (max-width: 767px) {
    .post-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .navbar { padding: 0 1rem; height: 56px; }
    .site-logo img { height: 36px; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    body > main { min-height: 0; }
    .mobile-menu { top: 56px; height: calc(100vh - 56px); }
    .container { padding: 1rem; }
    .hero { height: 240px; }
    .hero-title { letter-spacing: 2px; }
    .hero-subtitle { letter-spacing: 3px; }
    .post-grid { grid-template-columns: 1fr; gap: 1rem; }
    /* ホームの「すべての記事」セクションだけは 2 カラムで詰めて、
       1 枚 1 枚が画面いっぱいに膨れて「でかい」のを避ける */
    .home-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
    /* 2 カラムでは中身も詰めて文字落ちを防ぐ */
    .home-section__grid .post-card-body { padding: .55rem .7rem .7rem; gap: .3rem; }
    .home-section__grid .post-card-title { font-size: .88rem; line-height: 1.35; }
    .home-section__grid .post-card-summary { font-size: .72rem; -webkit-line-clamp: 2; }
    .home-section__grid .post-card-meta { font-size: .62rem; gap: .5rem; padding-top: .4rem; }
    .home-section__grid .post-card-type { font-size: .58rem; letter-spacing: 1px; padding: .08rem .35rem; }
    .home-shell { padding: 1rem; }
    .home-section__header { flex-wrap: wrap; }
    .home-toolbar { flex-direction: column; align-items: stretch; }
    .sort-bar { width: 100%; justify-content: space-between; }
    .sort-bar select { flex: 1; }
    .action-section { flex-direction: column; align-items: stretch; }
    .action-group-right { justify-content: space-between; }
    .admin-main { padding: 1rem; }
    table.admin-table { font-size: .82rem; }
    table.admin-table th, table.admin-table td { padding: .4rem; }
}

/* スクロールバー */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--hl-accent); border-radius: 8px; border: 2px solid #111; box-shadow: 0 0 6px var(--hl-glow); }
::-webkit-scrollbar-track { background: #0a0a0a; border-radius: 8px; }