/*
* WordPress環境固有の補正のみ。design.css（オリジナルのビルド済みCSS）には
* 一切手を加えないこと。ここにはデザイン変更を書かない。
*/
/* SNSシェアボタン系プラグインの固定バーはホーム画面では非表示
（オリジナルデザインには存在しない要素のため） */
body.nuu-home .sns-share-bar { display: none !important; }
/* 管理バー表示中もレイアウトが崩れないように。
design.css の position:fixed / sticky 要素のうち、上端(top:0)を基準に
しているものは WordPress 標準の「html に margin-top を付けて全体を
押し下げる」方式では自動的にずれない（fixed/stickyの基準はビューポート
であり、祖先要素のmarginの影響を受けないため）。該当する要素ごとに
管理バーの高さ分（PC:32px / 782px以下:46px）を個別にオフセットする。
- .sidebar … PCの固定サイドバー
- .topbar … 760px以下で表示されるスマホ用stickyヘッダー
（760px以下は常に管理バーが46px側になるため
メディアクエリなしで固定値でよい）
- .scroll-progress … 画面最上部の読了プログレスバー */
body.nuu-home.admin-bar .sidebar { top: 32px; }
body.nuu-home.admin-bar .scroll-progress { top: 32px; }
body.nuu-home.admin-bar .topbar { top: 46px; }
@media screen and (max-width: 782px) {
body.nuu-home.admin-bar .sidebar { top: 46px; }
body.nuu-home.admin-bar .scroll-progress { top: 46px; }
}
/* Safariのラバーバンド（吸い付き）オーバースクロール色を白に固定。
design.css は body に「左ダーク/右白」split背景（PC）／--paper
というクリーム色背景（760px以下のモバイル）を指定しているだけで、
html には何も指定していない。CSS仕様上は html に背景を明示すれば
キャンバス（バウンス領域含む）はその色になり、body の背景は
ページの実高さの範囲内にしか影響しないはずだが、iOS Safariでは
この伝播が期待通りに働かず、body側の色がバウンス領域に見えてしまう
実機報告があったため、body 側にも同じ白を重ねて二重に指定している。
body の実高さは document 全体の高さとぴったり一致しており
（検証済み、隙間0px）、通常のスクロール中はこの背景色が
見えることはないため、画面内の見た目には影響しない。 */
html { background-color: #fff; }
body.nuu-home { background-color: #fff; }
@media (max-width: 760px) {
body.nuu-home { background-color: #fff !important; }
}
/* 新着記事・編集部ピックの画像を記事へのリンクにした（元の app/page.tsx は
静的モックアップで実際のリンク先を持たなかったため、bare ![]()
だった）。
design.css は .story-image img / .editor-img img を「親の height:100%」
前提でサイズ計算しているため、間に を挟むと img の height:100% の
基準が「中身に合わせて縮むinline要素」になり崩れる。この2行はその を
親いっぱいに広げているだけで、見た目のサイズ・トリミングは元のままになる。 */
.story-image a, .editor-img a { position: absolute; inset: 0; display: block; }
/* 外観 → カスタマイズ からアップロードしたロゴ画像のサイズ調整。
design.css の .brand は display:flex なので img を置いても崩れないが、
高さの基準がないと画像の原寸で表示されてしまう。元デザインの
"n" マーク（.brand-mark、通常30px／モバイルヘッダーは27px）と
同じ高さに揃え、横幅は比率維持で自動計算させる。 */
.brand img.custom-logo { display: block; height: 30px; width: auto; }
.mobile-brand img.custom-logo { height: 27px; }
/* ユーザー指定のデザイン微調整（design.css は無改変のまま、ここで上書き）。
編集部ピックの記事タイトルを、スマホ表示（760px以下）だけ13px→14pxに。 */
@media (max-width: 760px) {
.editor-copy h3 { font-size: 14px; }
}
/* design.css は 480px以下で .story-card のシャドウを
`0 8px 18px -10px rgba(43,43,43,.24), 0 2px 6px rgba(43,43,43,.06)`
という下方向オフセット付き（非対称）のドロップシャドウに切り替えている。
デスクトップ／タブレット幅の `0 0 18px rgba(43,43,43,.12)`（オフセット
なしの均等な広がり）に統一する。 */
@media (max-width: 480px) {
.story-card, .story-card.is-visible:hover {
box-shadow: 0 0 18px rgba(43, 43, 43, 0.12);
}
}
/* 新着記事カード全体をクリック対象にする（ストレッチリンク手法）。
これまでは画像とタイトルにそれぞれ別の があるだけで、抜粋文や
日付・PV数の部分はクリックできなかった。タイトルの に
position:absolute; inset:0 の疑似要素を重ね、カード全体
（.story-card、position:relativeが必要）を覆うことで解決する。
画像側の とリンク先URLは同じなので、どちらがクリックを拾っても
遷移先は変わらない。抜粋文のテキスト選択はできなくなるが、カード
全体クリック型の一般的な仕様として許容している。
注意: ::after の絶対配置の基準（containing block）は「positionが
static でない最も近い祖先」。 自身に position:relative を付けると
::after の基準が「カード全体」ではなく「 というテキストサイズの
小さな要素自身」になってしまい、inset:0 で覆う範囲がタイトル文字の
すぐ周りだけに縮んでしまう（実際にこのバグが発生していた）。
::after 自身は position:absolute を持つのでそれ単体で z-index が有効
になり、 自身に position を付ける必要はない。 */
.story-card { position: relative; }
.story-card .story-image a { position: absolute; inset: 0; z-index: 1; }
.story-card .story-body h3 a::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
}
/* 編集部ピックのカードも同様に全体をクリック対象にする。こちらは
タイトルに が無く、画像と右下の丸い矢印アイコンにしかリンクが
無かった。既存の矢印アイコンの （.editor-copy 内、正しい記事URLと
aria-label 付き）にストレッチリンクを重ね、カード全体
（.editor-card、position:relativeが必要）を覆う。 自身には
position を付けない（上記と同じ理由）。 */
.editor-card { position: relative; }
.editor-card .editor-img a { position: absolute; inset: 0; z-index: 1; }
.editor-card .editor-copy > div > a::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
}
/* カード全体クリック化に伴う副作用の修正：タイトルや本文のテキストは
h3・spanなどの普通の要素のままなので、ブラウザは「テキストの上に
カーソルがある」と判定し、リンクなのに文字選択用のカーソル（Iビーム）
や、うっかりドラッグしての範囲選択が発生してしまうことがある
（実際に上に重なっている ::after はカードの見た目上は透明だが、
下のテキストの存在自体はブラウザのカーソル判定・選択判定に影響する）。
カード全体が1つのリンクとして振る舞う以上、テキスト選択は元々
できない（::after がクリックを横取りするため）ので、選択不可を
明示してカーソルも常にリンクのポインターに統一する。 */
.story-card .story-body,
.editor-card .editor-copy {
-webkit-user-select: none;
user-select: none;
}
.story-card .story-image a,
.story-card .story-body h3 a,
.story-card .story-body h3 a::after,
.editor-card .editor-img a,
.editor-card .editor-copy > div > a,
.editor-card .editor-copy > div > a::after {
cursor: pointer;
}
/* ================================================================
メインカラー（カスタマイズ → NÜUホーム画面 → デザイン）
================================================================
design.css（無改変）は、アクセントカラーの大部分を
:root{ --green:#ff2ca8 } というCSS変数経由で使っている。ここで
--green を --nuu-accent（front-page.php が
としてカスタマイザーの設定値を書き出す）で上書きするだけで、
var(--green) を使っている約20箇所（トップの読了バー、ボタン背景、
ホバー時の文字色、区切り線グラデーションの起点など）はすべて
自動的に新しい色に追従する。
ただし design.css には、box-shadowの発光効果やグラデーションの
もう一方の色など、var(--green) を経由せず #ff2ca8 系の色を直接
書いている箇所も存在する（Tailwindのビルド時にCSS変数化されな
かった箇所と思われる）。それらは --green を書き換えただけでは
古いピンクのまま変わらないため、対象セレクタごとに同じ
プロパティを再宣言し、color-mix() で新しい色から同じ濃さ／
明るさの色を計算して上書きしている（wp-compat.css は design.css
より後に読み込まれるため、同じセレクタ・同じ詳細度でも後勝ちで
反映される）。透明度は元のアルファ値と同じ割合になるよう、
明るさ（白との混合）は元の色との混合比率を逆算して揃えている
ため、色だけが変わり発光の強さ・グラデーションの雰囲気は
元デザインのまま維持される。 */
:root { --green: var(--nuu-accent, #ff2ca8); }
.scroll-progress {
box-shadow: 0 0 15px color-mix(in srgb, var(--nuu-accent, #ff2ca8) 75%, transparent);
}
.cursor-halo {
border-color: color-mix(in srgb, var(--nuu-accent, #ff2ca8) 62%, transparent);
box-shadow: 0 0 18px color-mix(in srgb, var(--nuu-accent, #ff2ca8) 16%, transparent), inset 0 0 10px #ffffff8c;
}
.cursor-decoration.is-interactive .cursor-halo {
border-color: color-mix(in srgb, var(--nuu-accent, #ff2ca8) 90%, transparent);
box-shadow: 0 0 26px color-mix(in srgb, var(--nuu-accent, #ff2ca8) 24%, transparent), inset 0 0 14px #ffffffa8;
}
.brand:hover .brand-mark {
box-shadow: 0 0 22px color-mix(in srgb, var(--nuu-accent, #ff2ca8) 35%, transparent);
}
.slider-controls button:hover {
box-shadow: inset 0 0 0 1px #ffffff52, 0 9px 22px color-mix(in srgb, var(--nuu-accent, #ff2ca8) 23%, transparent);
}
.slider-controls button:before {
background: linear-gradient(135deg, var(--nuu-accent, #ff2ca8), color-mix(in srgb, var(--nuu-accent, #ff2ca8) 65%, #fff));
}
.hero-pager-arrow:hover {
box-shadow: 0 8px 20px color-mix(in srgb, var(--nuu-accent, #ff2ca8) 20%, transparent);
}
.hero-pager-arrow:before {
background: linear-gradient(135deg, var(--nuu-accent, #ff2ca8), color-mix(in srgb, var(--nuu-accent, #ff2ca8) 65%, #fff));
}
.kicker:before {
background: linear-gradient(90deg, var(--nuu-accent, #ff2ca8), color-mix(in srgb, var(--nuu-accent, #ff2ca8) 56%, #fff));
box-shadow: 0 0 10px color-mix(in srgb, var(--nuu-accent, #ff2ca8) 24%, transparent);
}
.section-heading h2:after,
.news-intro h2:after {
background: linear-gradient(90deg, var(--nuu-accent, #ff2ca8), color-mix(in srgb, var(--nuu-accent, #ff2ca8) 18%, transparent));
}
.more-stories-button:hover {
box-shadow: 0 14px 30px color-mix(in srgb, var(--nuu-accent, #ff2ca8) 25%, transparent);
}
.more-stories-button:before {
background: linear-gradient(105deg, var(--nuu-accent, #ff2ca8), color-mix(in srgb, var(--nuu-accent, #ff2ca8) 65%, #fff));
}
.news-section {
background: linear-gradient(135deg, #fff 0% 48%, color-mix(in srgb, var(--nuu-accent, #ff2ca8) 6%, #fff) 100%);
box-shadow: inset 0 0 48px color-mix(in srgb, var(--nuu-accent, #ff2ca8) 13%, transparent), inset 0 0 120px color-mix(in srgb, var(--nuu-accent, #ff2ca8) 5%, transparent);
}
.news-item:hover,
.news-item:focus-visible {
box-shadow: 0 14px 32px color-mix(in srgb, var(--nuu-accent, #ff2ca8) 18%, transparent);
}
.category-card:hover i {
box-shadow: 0 8px 20px color-mix(in srgb, var(--nuu-accent, #ff2ca8) 30%, transparent);
}