/*
Theme Name: Eximradar Cyber (Modern)
Theme URI: https://www.eximradar.jp/
Description: Twenty Eleven をベースにした「環水平アーク」用の子テーマ。赤×黒のサイバーな世界観はそのままに、PC-98 / VT-100 / DOS-TUI のテキスト端末的な「機能美」へ再構築。監視ダッシュボード風のパネル・1pxの罫線・等幅データ・意味のあるステータス・Audiowide の中抜きロゴで統一。親テーマ(twentyeleven)を土台に継承し、その上に上書きスタイルを適用します。
Author: Eximradar
Template: twentyeleven
Version: 2.0
Text Domain: twentyeleven-cyber
*/

/* 親テーマ(Twenty Eleven)を土台として読み込む（header.php は stylesheet_url=子の style.css を読むため必須）*/
@import url("../twentyeleven/style.css");

/* ロゴ用 Audiowide を自己ホスト読込（外部依存なし）*/
@font-face{
	font-family:"Audiowide";
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url("fonts/audiowide.woff2") format("woff2");
}
/* ダンプ用の確実な等幅フォント（桁揃いを保証）*/
@font-face{
	font-family:"Share Tech Mono";
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url("fonts/sharetechmono.woff2") format("woff2");
}

/* =========================================================================
   Eximradar Cyber 2.0 — Systematic / Retro-Terminal (PC-98 / VT-100 / DOS-TUI)
   赤×黒のまま、装飾ではなく「規律と一貫性」で魅せる。
   ========================================================================= */

:root{
	--ground:#0a0b0d;
	--surface:#0e1013;
	--surface-2:#14171b;
	--line:#313a42;          /* 罫線（box-drawing が見える明るさ）*/
	--line-soft:#1c2228;
	--text:#e3e7e1;          /* 蛍光体ホワイト（やや明るめ）*/
	--dim:#8b938b;
	--mute:#576058;
	--red:#ff4338;           /* 蛍光体レッド（やや暖色）*/
	--red-deep:#c01a12;
	--red-bright:#ff6b62;
	--amber:#e8b13a;
	--green:#46c97e;
	--mono:"SFMono-Regular",ui-monospace,"DejaVu Sans Mono","Liberation Mono",Consolas,Menlo,monospace;
	--jp:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ","MS PGothic",sans-serif;
	--ease:cubic-bezier(.7,0,.2,1);
}

/* ----- ベース ----- */
body, button, input, select, textarea{
	font-family:var(--mono);
	-webkit-font-smoothing:antialiased;
}
body{
	color:var(--text);
	line-height:1.65;
	font-size:13.5px;
	letter-spacing:.01em;
}
/* グラフ用紙風の極薄グリッド（既存のドット背景を上書き）*/
body.custom-background, body{
	background-color:#060709 !important;
	background-image:
		linear-gradient(#12161b 1px, transparent 1px),
		linear-gradient(90deg, #12161b 1px, transparent 1px) !important;
	background-size:32px 32px, 32px 32px !important;
	background-position:-1px -1px !important;
	background-attachment:fixed !important;
}
::selection{background:var(--red); color:var(--ground)}
::-moz-selection{background:var(--red); color:var(--ground)}
*{scrollbar-color:var(--line) #0a0b0d}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0a0b0d}
::-webkit-scrollbar-thumb{background:#2a323a;border:2px solid #0a0b0d}
::-webkit-scrollbar-thumb:hover{background:var(--red-deep)}

/* 既定のリンクは赤。各文脈（.widget a 等）が上書きできるよう詳細度は低く保つ。
   ※親のインライン link_color は functions.php で停止済みのため a だけで足りる。 */
a{color:var(--red)}

/* ----- #page：タイトル付き二重罫線ウィンドウ ----- */
#page{
	max-width:1280px; margin:2em auto;   /* ワイドディスプレイ向けに拡幅（旧1120px比 約114%）*/
	background:var(--surface);
	border:3px double var(--line);
	border-radius:0;
	box-shadow:
		0 0 0 1px rgba(49,58,66,.6),
		0 0 16px rgba(49,58,66,.55),
		0 0 44px rgba(49,58,66,.3);
}

/* ----- ヘッダー ----- */
#branding{ padding:0; border-bottom:0; }
/* SEO用の本来見出しは隠す */
.cy-seo{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); margin:0}

/* 上部ステータスバー */
.cy-statusbar{display:flex; flex-wrap:wrap; align-items:center;
	font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--dim);
	border-bottom:1px solid var(--line); background:var(--surface-2)}
.cy-statusbar .cell{padding:7px 13px; border-right:1px solid var(--line); white-space:nowrap}
.cy-statusbar .cell.host{color:var(--text)}
.cy-statusbar .grow{flex:1; border-right:0}
.cy-statusbar .k{color:var(--mute)} .cy-statusbar .v{color:var(--text)}
.cy-statusbar .dot{display:inline-block; width:7px; height:7px; margin-right:7px; vertical-align:baseline}
.cy-statusbar .dot.green{background:var(--green)}
/* モバイル：折り返して見栄えが崩れるため、スペーサーと末尾 node セルを省略 */
@media (max-width:800px){
	.cy-statusbar{flex-wrap:nowrap; overflow:hidden}
	.cy-statusbar .grow, .cy-statusbar .cell:last-child{display:none}
}

/* ロゴ：Audiowide の中抜き＋擬似イタリック。外側にだけ発光（drop-shadow はストローク形状に沿う）*/
/* パディングは .cy-brand-main 側に持たせ、飾り(.cy-readout 絶対配置)はヘッダーの
   実際の端まで届かせる（.cy-brand にパディングがあると右端等に隙間ができる）。 */
.cy-brand{position:relative; overflow:hidden; display:flex; align-items:center; border-bottom:1px solid var(--line)}
.cy-brand-main{position:relative; z-index:2; min-width:0; padding:26px 24px 22px}
/* 右側の飾り：ヘッダー右側をフル占有。EXR-Network の UTF-8 バイトダンプ（背景）＋
   回転ワイヤーフレーム四面体（前面 canvas）。左端はマスクでフェードしてロゴと干渉させない。 */
.cy-readout{position:absolute; top:0; right:0; bottom:0; width:54%; z-index:1; overflow:hidden; pointer-events:none;
	-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40%);
	        mask-image:linear-gradient(90deg, transparent 0, #000 40%)}
/* ダンプは canvas 描画（等幅グリッドで完全に桁揃い＋ランダムなふわっとハイライト）*/
.cy-dump-canvas{position:absolute; inset:0; width:100%; height:100%}
.cy-wire{position:absolute; inset:0; width:100%; height:100%}
@media (max-width:800px){.cy-readout{display:none}}
.cy-logo-link{display:inline-block; text-decoration:none}
.cy-logo{display:inline-block; font-family:"Audiowide","Arial Black",Impact,sans-serif;
	font-weight:400; font-size:clamp(19px,3.9vw,36px); letter-spacing:.005em; line-height:1.12;
	text-transform:uppercase; color:transparent;
	-webkit-text-stroke:1.4px var(--red); text-stroke:1.4px var(--red);
	transform:skewX(-10deg); transform-origin:left center;
	filter:drop-shadow(0 0 2px rgba(255,67,56,.9)) drop-shadow(0 0 8px rgba(255,67,56,.45))}
.cy-logo .pt{color:var(--red); -webkit-text-stroke:0; text-stroke:0}
.cy-prompt{font-family:var(--mono); font-size:12.5px; color:var(--dim); margin:14px 0 0}
.cy-prompt .usr{color:var(--green)} .cy-prompt .pth{color:var(--text)} .cy-prompt .ar{color:var(--red)}
.cy-prompt .cur{display:inline-block; width:8px; height:15px; background:var(--red); margin-left:2px;
	vertical-align:text-bottom; animation:cyblink 1s steps(1) infinite}
@keyframes cyblink{50%{opacity:0}}
.cy-subjp{font-family:var(--jp); font-size:12px; color:var(--mute); margin:8px 0 0; letter-spacing:.04em}
.cy-subjp .sep{margin:0 8px; color:#3a4248}

/* ----- ナビ #access：インバースビデオ＋左→右ワイプ ----- */
#access{margin:0; background:var(--surface-2); border-bottom:1px solid var(--line);
	box-shadow:none; display:block; min-height:0; clear:both}
#access .assistive-text, #access .skip-link{position:absolute; clip:rect(1px,1px,1px,1px)}
#access > div, #access .menu{margin:0; padding:0}
#access ul{display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none; width:auto}
#access li{margin:0; position:relative; float:none}
/* 親の赤いメニュー境界線（#access ul li / li+li の border:red）を解除。
   区切りはリンクの border-right（グレー）に統一。 */
#access ul li, #access ul li + li{border:0}
#access ul li a, #access a{
	position:relative; z-index:0; overflow:hidden; display:block;
	font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
	color:var(--dim); padding:13px 17px; line-height:1; border-right:1px solid var(--line); height:auto;
	transition:color .18s var(--ease), letter-spacing .22s var(--ease)}
#access ul li a::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--red);
	transform:scaleX(0); transform-origin:left center; transition:transform .26s var(--ease)}
#access ul li a:hover{color:var(--ground); background:transparent; letter-spacing:.12em}
#access ul li a:hover::before{transform:scaleX(1)}
#access ul li.current-menu-item > a,
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a{color:var(--ground)}
#access ul li.current-menu-item > a::before,
#access ul li.current_page_item > a::before,
#access ul li.current-menu-ancestor > a::before{transform:scaleX(1)}
/* サブメニュー */
#access ul ul{position:absolute; top:100%; left:0; display:none; background:var(--surface); border:1px solid var(--line);
	box-shadow:0 10px 28px rgba(0,0,0,.6); width:auto; z-index:99999}
#access ul ul ul{top:0; left:100%}
#access ul li:hover > ul{display:block}
#access ul ul li{float:none}
#access ul ul a{border-right:0; border-bottom:1px solid var(--line-soft); min-width:180px}

/* ----- 本文レイアウト（左サイドバー: theme_mod=sidebar-content → body.left-sidebar）-----
   親の .left-sidebar 指定（#secondary 18.8% / #content margin-left 34% = 隙間12.7%）を、
   高詳細度の同セレクタで上書きし、ネガティブマージンをやめた明快なフロートに再定義。
   外側ガター 2.6% / サイドバー 25% / 隙間 4% / 本文 71% */
#main{padding:2em 2.6% 2.5em; border-top:0}
/* #primary/#secondary はフロートなので #main で内包（クリア）し、下パディングをフロート下に効かせる */
#main::after{content:""; display:block; clear:both}
/* 2カラム幅はデスクトップ限定（min-width:801px）。
   モバイル(<=800px)は Twenty Eleven 本来の1カラム積み重ねに任せる。
   ※メディアクエリ外で指定するとモバイルでも本文が右69%に固定されてしまう。 */
@media (min-width:801px){
	.left-sidebar #secondary{float:left; width:27%; margin:0}
	.left-sidebar #primary{float:right; width:69%; margin:0}
	.left-sidebar #content{width:auto; margin:0}
	/* 個別記事（singular）も一覧と同じ広い2カラム幅に。親の .singular 専用幅
	   （.left-sidebar.singular #content{margin:0 34% 0 7.6%} 等）を上書き。 */
	.singular #primary, .left-sidebar.singular #primary{margin:0}
	.singular #content, .left-sidebar.singular #content{width:auto; margin:0}
}
.hentry, .no-results{border-bottom:1px solid var(--line-soft); margin:0 0 1.8em; padding:0 0 1.8em}
.hentry:last-child{border-bottom:0}

/* 見出し：左の赤ブロック＋下線。ホバーで文字色が左→右へ赤く流れる */
.entry-header{margin:0}
.entry-title{font-family:var(--jp); font-weight:700; font-size:20px; letter-spacing:.01em; color:var(--text);
	margin:0 0 12px; padding:3px 0 10px 14px; line-height:1.4;
	border-left:7px solid var(--red); border-bottom:1px solid var(--line); border-width:0 0 1px 7px; border-style:solid}
/* 個別記事の見出しを一覧と同サイズに（親のモバイル指定 .singular .entry-title{font-size:24px} を上書き）*/
.singular .entry-title{font-size:20px}
.entry-title a{position:relative; color:transparent; -webkit-text-fill-color:transparent;
	background-image:linear-gradient(90deg, var(--red) 50%, var(--text) 50%);
	-webkit-background-clip:text; background-clip:text;
	background-size:200% 100%; background-position:100% 0; background-repeat:no-repeat;
	transition:background-position .45s var(--ease)}
.entry-title a:hover{background-position:0 0}
.entry-title a::after{content:""; display:inline-block; width:9px; height:.95em; background:var(--red);
	margin-left:7px; vertical-align:-2px; opacity:0; transition:opacity .1s ease}
.entry-title a:hover::after{opacity:1; animation:cyblink 1s steps(1) infinite}
.entry-title:hover{border-left-color:var(--red-bright); box-shadow:-7px 0 14px -7px rgba(255,67,56,.7)}

/* メタ：等幅で整列 */
.entry-meta, .entry-meta a, .comment-meta{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--mute)}
/* メタのリンク（投稿日時・著者・カテゴリ等）も本文リンクと同じ下線ワイプ */
.entry-meta a{color:var(--dim); font-weight:700;
	background-image:linear-gradient(var(--red),var(--red)); background-repeat:no-repeat;
	background-position:left 100%; background-size:0 1px;
	transition:background-size .26s var(--ease), color .15s ease}
.entry-meta a:hover{color:var(--red); background-size:100% 1px}

/* 本文 */
.entry-content, .entry-summary{font-family:var(--jp); color:var(--text); line-height:1.85; font-size:14px}
.entry-content p, .entry-summary p{margin:0 0 1.3em}
/* 本文中の小見出しも左ブロック＋下線で統一 */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.comment-content h1, .comment-content h2, .comment-content h3{
	font-family:var(--jp); font-weight:700; color:var(--text);
	margin:1.6em 0 .8em; padding:2px 0 6px 12px;
	border-left:5px solid var(--red); border-bottom:1px solid var(--line)}
.entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6{
	font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:13px}
/* 本文中リンク：下線が左→右に引かれる */
.entry-content a, .entry-summary a, .comment-content a{color:var(--red);
	background-image:linear-gradient(var(--red),var(--red)); background-repeat:no-repeat;
	background-position:left 100%; background-size:0 1px;
	border-bottom:1px solid rgba(255,67,56,.3);
	transition:background-size .26s var(--ease), color .15s ease}
.entry-content a:hover, .entry-summary a:hover, .comment-content a:hover{background-size:100% 1px; color:var(--red-bright)}
/* more-link / arrows は下で上書き */

blockquote{border-left:3px solid var(--red); padding:.4em 0 .4em 1.2em; background:rgba(255,67,56,.04); color:var(--dim)}
code, kbd, tt, var, pre{font-family:var(--mono)}
pre{background:#08090b; border:1px solid var(--line); padding:1em 1.2em; color:#d7dad4; overflow-x:auto}
code{background:rgba(255,67,56,.08); color:#ff8e88; padding:.1em .4em}
hr{background:var(--line); height:1px}

/* ----- 画像の囲い：ホバーで対角コーナーから赤い線が伸びて枠を描く ----- */
.entry-content img:not(.wp-smiley), .comment-content img{
	padding:0; border:1px solid var(--line); background:var(--surface-2); border-radius:0;
	transition:border-color .25s ease}
/* リンク画像はぴったり包んで、コーナー線が画像の四辺に沿うように
   （画像のマージン/インライン余白で <a> が画像より大きくなり、上・右が開くのを防ぐ）*/
.entry-content a:has(img) img, .comment-content a:has(img) img{display:block; margin:0; vertical-align:top; max-width:100%}
/* 親テーマのグレー→白ホバーを打ち消し、枠は赤に（非リンク画像のフォールバックも兼ねる）*/
a:focus img[class*="align"], a:hover img[class*="align"], a:active img[class*="align"],
a:focus img[class*="wp-image-"], a:hover img[class*="wp-image-"], a:active img[class*="wp-image-"],
.entry-content a:hover img, .comment-content a:hover img,
#content .gallery .gallery-icon a:hover img, .wp-caption a:hover img{
	background:var(--surface-2); border-color:var(--line)}
/* 画像リンク：下線（ワイプ）を出さず、コーナー線アニメの基準ボックスにする */
.entry-content a:has(img), .comment-content a:has(img){
	position:relative; display:inline-block; line-height:0; font-size:0; background-image:none; border-bottom:0}
.entry-content a:has(img)::before, .entry-content a:has(img)::after,
.comment-content a:has(img)::before, .comment-content a:has(img)::after{
	content:""; position:absolute; width:0; height:0; box-sizing:border-box; z-index:2; pointer-events:none; opacity:0;
	transition:width .4s var(--ease), height .4s var(--ease), opacity .15s ease;
	filter:drop-shadow(0 0 4px rgba(255,67,56,.55))}
/* 左上から：上辺(右へ)＋左辺(下へ)が成長。画像から2px外側 */
.entry-content a:has(img)::before, .comment-content a:has(img)::before{
	left:-2px; top:-2px; border-top:2px solid var(--red); border-left:2px solid var(--red)}
/* 右下から：下辺(左へ)＋右辺(上へ)が成長。画像から2px外側 */
.entry-content a:has(img)::after, .comment-content a:has(img)::after{
	right:-2px; bottom:-2px; border-bottom:2px solid var(--red); border-right:2px solid var(--red)}
.entry-content a:has(img):hover::before, .entry-content a:has(img):hover::after,
.comment-content a:has(img):hover::before, .comment-content a:has(img):hover::after{
	width:calc(100% + 4px); height:calc(100% + 4px); opacity:1}
/* キャプション付き画像 */
.wp-caption{background:var(--surface-2); border:1px solid var(--line); border-radius:0; padding:6px}
.wp-caption img{border:0; padding:0; background:none}
.wp-caption .wp-caption-text{color:var(--dim); font-family:var(--mono); font-size:11px; letter-spacing:.04em}

/* ----- READ MORE（.more-link）：赤が左→右にワイプして反転＋矢印スライド ----- */
.entry-content a.more-link, a.more-link{
	display:inline-flex; align-items:center; gap:9px;
	font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
	color:var(--text); padding:7px 16px; border:1px solid var(--line); border-bottom:1px solid var(--line);
	background-image:linear-gradient(90deg, var(--red) 50%, var(--surface-2) 50%);
	background-size:200% 100%; background-position:100% 0;
	transition:background-position .3s var(--ease), color .2s ease, border-color .2s ease}
.entry-content a.more-link:hover, a.more-link:hover{color:var(--ground); border-color:var(--red); background-position:0 0; background-size:200% 100%}
.more-link .meta-nav{transition:transform .25s ease}
.more-link:hover .meta-nav{transform:translateX(4px)}

/* ----- ウィジェット（パネル）----- */
#secondary .widget, .widget{border:1px solid var(--line); background:var(--surface); margin:0 0 22px; padding:0}
.widget-title{display:block; font-family:var(--mono); font-size:11px; font-weight:600;
	letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
	background:var(--surface-2) !important; background-image:none !important;
	padding:9px 12px 9px 28px; margin:0 0 0; border-bottom:1px solid var(--line); position:relative; line-height:1.3}
.widget-title::before{content:""; position:absolute; left:11px; top:50%; transform:translateY(-50%);
	width:8px; height:8px; background:var(--red)}
/* 見出し以外の中身（リストでもプロフィール本文でも）に上下左右の余白を一貫付与。
   見出しバー直後のコンテンツが密着して被るのを防ぐ。 */
.widget > *:not(.widget-title){margin:13px 13px 0}
.widget > *:not(.widget-title):last-child{margin-bottom:14px}
.widget p{margin:0 0 .8em}
.widget p:last-child{margin-bottom:0}
.widget .textwidget{line-height:1.7}
.widget ul{padding:0; list-style:none; font-size:12.5px; line-height:1.4}
.widget ul li{position:relative; padding:3px 0 3px 16px; border-bottom:1px solid var(--line-soft); color:var(--dim); font-family:var(--jp); line-height:1.45}
.widget ul li:last-child{border-bottom:none}
.widget ul li::before{content:"\2502"; position:absolute; left:0; color:var(--mute); font-family:var(--mono)}
.widget ul li:hover::before{content:"\003E"; color:var(--red)}
.widget a{color:var(--dim)}
.widget li:hover > a, .widget a:hover{color:var(--red); text-decoration:none}
.widget ul ul{margin:.4em 0 .4em 1em}

/* 検索フォーム：入力欄をサイドバー（ウィジェット）幅いっぱいに（親の width:57% を上書き）*/
.widget_search #s{width:100%; box-sizing:border-box}
input#s, input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], textarea, select{
	background:var(--ground); color:var(--text); border:1px solid var(--line); border-radius:0;
	font-family:var(--mono); padding:8px 10px; box-shadow:none}
input#s:focus, input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, textarea:focus, select:focus{
	color:#fff; border-color:var(--red); outline:none; box-shadow:0 0 0 2px rgba(255,67,56,.18)}
::placeholder{color:var(--mute)}
/* ボタン（検索ほか） */
/* ボタン全般：READ MORE と同じ赤の左→右ワイプ反転 */
#searchsubmit, input[type=submit], button{
	font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
	color:var(--text); border:1px solid var(--line); border-radius:0; padding:8px 16px; cursor:pointer;
	background-image:linear-gradient(90deg, var(--red) 50%, var(--surface-2) 50%);
	background-size:200% 100%; background-position:100% 0;
	transition:background-position .3s var(--ease), color .2s ease, border-color .2s ease}
#searchsubmit:hover, input[type=submit]:hover, button:hover{color:var(--ground); border-color:var(--red); background-position:0 0}

/* ----- フッター ----- */
#colophon{clear:both}
#supplementary{border-top:1px solid var(--line); background:var(--surface-2); padding:1.6em 7.6%}
#supplementary .widget{background:transparent; border:0}
#supplementary .widget-title{background:transparent !important; border-bottom:1px solid var(--line); padding-left:20px}
#supplementary .widget-title::before{left:3px}
#supplementary .widget > *:not(.widget-title){margin-left:0; margin-right:0}

/* DOS ファンクションキーバー */
.cy-fkeys{display:flex; flex-wrap:wrap; align-items:center; border-top:1px solid var(--line); background:var(--surface)}
.cy-fkeys .fk{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--dim);
	padding:9px 14px; border-right:1px solid var(--line); text-decoration:none;
	transition:color .15s ease, background .2s ease}
.cy-fkeys .fk b{color:var(--ground); background:var(--red); padding:1px 6px; margin-right:7px; font-weight:700}
.cy-fkeys .fk:hover{color:#fff; background:var(--surface-2)}
.cy-fkeys .grow{flex:1; border-right:0; padding:0}

#site-generator{background:#08090b; border-top:1px solid var(--line); color:var(--mute);
	font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-align:left; padding:12px 16px; line-height:1.8}
#site-generator a{color:var(--dim)}
#site-generator a:hover{color:var(--red)}
.cy-cred .sep{margin:0 8px; color:#2c343a}
.cy-cred b{color:var(--green)}

/* ----- コメント欄：パネル/ターミナル調に統一 ----- */
#comments{margin:2.4em 0 0}
/* 見出しは記事タイトルと同じ「左赤ブロック＋下線」 */
#comments-title, .singular #comments-title, #reply-title{
	font-family:var(--mono); font-size:13px; font-weight:700; line-height:1.4;
	letter-spacing:.1em; text-transform:uppercase; color:var(--text);
	margin:0 0 1.2em; padding:4px 0 8px 14px;
	border-left:6px solid var(--red); border-bottom:1px solid var(--line)}
.nopassword, .nocomments{color:var(--dim); font-family:var(--mono); font-size:13px; font-weight:400;
	letter-spacing:.04em; text-align:left; margin:1.2em 0; padding:10px 14px; border:1px dashed var(--line)}

.commentlist{list-style:none; margin:0; width:100%}
.content .commentlist{width:100%}
/* コメント＝ログカード（暗色サーフェス＋1px罫線、アバターはカード内左上に収める）*/
.commentlist > li.comment{position:relative; background:var(--surface-2); border:1px solid var(--line);
	border-radius:0; margin:0 0 1em; padding:14px 16px 14px 74px}
.commentlist .children{list-style:none; margin:0}
.commentlist .children li.comment{position:relative; background:#0e1013; border:1px solid var(--line);
	border-left:2px solid var(--red); border-radius:0; margin:1em 0 0; padding:14px 16px 14px 74px}
.commentlist .pingback{padding:8px 14px; border:1px solid var(--line-soft); margin:0 0 1em; color:var(--dim)}
/* 親の left:-102px / 矢印画像を解除し、カード内に固定 */
.commentlist .avatar, .commentlist .children .avatar{
	position:absolute !important; left:14px !important; top:14px !important;
	width:48px; height:48px; border-radius:0; box-shadow:none; padding:0; margin:0; background:none}
.commentlist > li:before, .commentlist > li.bypostauthor:before, .commentlist > li.pingback:before{content:"" !important}
/* メタ・本文 */
.comment-meta, .commentlist .children li.comment .comment-meta{
	font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--mute); line-height:1.7; margin-left:0}
.comment-author .fn, .comment-meta .fn{font-style:normal; font-weight:700; color:var(--text)}
.comment-meta a{color:var(--dim); font-weight:700;
	background-image:linear-gradient(var(--red),var(--red)); background-repeat:no-repeat;
	background-position:left 100%; background-size:0 1px;
	transition:background-size .26s var(--ease), color .15s ease}
.comment-meta a:hover{color:var(--red); background-size:100% 1px}
.comment-content, .commentlist .children li.comment .comment-content{
	font-family:var(--jp); color:var(--text); line-height:1.8; margin:.8em 0 0; font-size:13.5px}
/* 投稿者本人コメントの強調 */
.commentlist > li.bypostauthor, .commentlist .children > li.bypostauthor{background:#15110f; border-color:var(--red)}
.commentlist > li.bypostauthor .comment-meta{color:var(--dim)}
/* 返信リンク：小さなインバースボタン */
a.comment-reply-link{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
	color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:0; padding:3px 10px;
	transition:color .15s ease, background .2s ease}
a.comment-reply-link:hover, a.comment-reply-link:focus{background:var(--red); color:var(--ground)}
a.comment-reply-link > span{top:0}

/* コメントフォーム */
#respond{background:transparent; border:0; margin:2em 0 0; padding:0}
.commentlist #respond{margin:1em 0 0}
#respond .comment-notes, #respond .logged-in-as, #respond .form-allowed-tags{
	font-family:var(--mono); font-size:11.5px; color:var(--mute)}
#respond .logged-in-as a, #respond .comment-notes a{color:var(--red)}
#respond label{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
/* 親テーマの「薄グレーのピルを入力欄に重ねる」ラベルを、ダーク＋等幅の通常ラベルに上書き */
#respond .comment-form-author label, #respond .comment-form-email label,
#respond .comment-form-url label, #respond .comment-form-comment label{
	background:transparent; box-shadow:none; color:var(--dim);
	display:block; position:static; top:auto; left:auto; min-width:0;
	padding:0 0 5px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase}
/* 必須マーク（*）を全てグレーに統一、巨大＆絶対配置をやめる */
#respond .required, #respond .comment-form-author .required, #respond .comment-form-email .required,
#respond .comment-form-url .required, #respond .comment-form-comment .required{
	color:var(--dim) !important; font-size:inherit !important; font-weight:700;
	position:static !important; left:auto !important; top:auto !important}
#respond textarea{width:100%; box-sizing:border-box; text-indent:0}
/* コメントフォームの全テキスト入力を border-box に（幅75%は親既定を継承し、4欄で一致）。
   親の height:24px を border-box が総高さ化して潰れるため height:auto に。text-indent も解除。 */
#respond input[type=text]{box-sizing:border-box; height:40px; line-height:normal; text-indent:0}
/* 認証欄を75%幅の inline-block にし、その右隣（残り25%）に送信ボタンを横並び。下端を揃える。 */
#respond p:has(#siteguard_captcha){display:inline-block; width:75%; vertical-align:bottom; margin:12px 0 0}
#respond #siteguard_captcha{width:100%}
#respond .form-submit{display:inline-block; vertical-align:bottom; float:none !important; clear:none;
	margin:12px 0 0 12px !important; text-align:left}
#respond p{margin:12px 0}
/* 狭い画面（≤800px）：コメントフォームを全幅・左寄せ・フロート無効で縦積みに統一 */
@media (max-width:800px){
	#respond .comment-form-comment, #respond .comment-form-author, #respond .comment-form-email,
	#respond .comment-form-url, #respond .comment-form-cookies-consent,
	#respond p:has(#siteguard_captcha), #respond .form-submit{
		display:block !important; width:auto !important; float:none !important; clear:both !important;
		margin:12px 0 0 !important; padding:0 !important; text-align:left !important; vertical-align:baseline !important}
	#respond #siteguard_captcha{width:95% !important}
	/* 段落内の改行（空白文字）を消してボタンを左端に。ボタン自体はサイズ維持 */
	#respond .form-submit{font-size:0}
	#respond input#submit{font-size:11.5px !important}
	/* コメント欄とその下のウィジェットの隙間を確保 */
	#main #secondary{margin-top:2.5em !important}
	#respond{margin-bottom:2.5em}
}
#respond input[type=text], #respond input[type=email], #respond input[type=url], #respond textarea{
	background:var(--ground); color:var(--text); border:1px solid var(--line); border-radius:0;
	font-family:var(--mono); padding:8px 10px; box-shadow:none}
#respond input[type=text]:focus, #respond input[type=email]:focus, #respond input[type=url]:focus, #respond textarea:focus{
	border-color:var(--red); color:#fff; box-shadow:0 0 0 2px rgba(255,67,56,.18)}
/* コメント投稿ボタンも READ MORE と同じワイプ反転に統一 */
#respond input#submit{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
	color:var(--text); border:1px solid var(--line); border-radius:0; padding:0 18px; margin:0 !important; cursor:pointer;
	height:40px; box-sizing:border-box;
	background-image:linear-gradient(90deg, var(--red) 50%, var(--surface-2) 50%);
	background-size:200% 100%; background-position:100% 0;
	transition:background-position .3s var(--ease), color .2s ease, border-color .2s ease}
#respond input#submit:hover{color:var(--ground); border-color:var(--red); background-position:0 0}
#respond #cancel-comment-reply-link{font-family:var(--mono); color:var(--dim)}
#respond #cancel-comment-reply-link:hover{color:var(--red)}

/* ----- a11y / motion ----- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
	outline:2px solid var(--red); outline-offset:2px}
@media (prefers-reduced-motion:reduce){
	*, *::before, *::after{transition:none !important; animation:none !important}
}