/* ============================================
   nrp-decoration.css v1.2.4
   nanrepo.com 記事装飾 テーマ非依存スタイル
   AFFINGER6の実レンダリングを再現（2026-07-10実測）
   1.0.1: 吹き出しの既定を右寄せ（旧st-kaiwa1 r準拠）へ変更・
          nrp-balloon-left追加・ボックス内リストのリセット強化
   1.1.0: 公開記事の変換用に追加（2026-07-10 PM承認の案2・4・6）:
          タイトル付き汎用ボックス（nrp-box-titled/nrp-box-title-plain）・
          関連記事カード（nrp-card一式）・
          チェック/丸リストをボックス外でも有効化（セレクタ統一）
   1.2.0: 実機不具合修正（2026-07-10 りっぽさん実機確認・複数回指摘）:
          - 吹き出し：nrp-balloon-left修飾クラスが公開記事の大半(45/60件)に
            残存し右寄せ指示と矛盾していたため、左寄せ効果を無効化し
            全吹き出しを右寄せへ統一（右寄せが唯一の表示になる）
          - 吹き出し：nrp-balloon-textクラスを持たない子要素（壊れたHTML由来の
            余分なp）がflexコンテナ内で横並びし前後テキストの回り込みに
            見えていたため、flex-basis:100%で強制的にブロック化して解消
          - blockquote：旧AFFINGER風グレー背景を新規実装（SANGO標準の
            白背景・黒枠・引用符アイコンを打ち消し）。X埋め込み(twitter-tweet)は
            widgets.jsによりiframeへ置換されるためCSS対象外（別ドメインの
            公式ウィジェットでnrp側では制御不可）
          - アコーディオン／ボックス内リスト：SANGO標準の
            .entry-content :where(ul:not([class])), :where(ol:not([class]))
            が生ul/olへ自動で枠線(2px solid #e8e8e8)とpaddingを付与し、
            nrp-box/nrp-accordionの外枠と二重枠になっていたため、
            nrp部品内の生ul/ol/blockquoteに対してSANGO装飾を個別に打ち消し
          - ボタン：display:table + margin:20px auto のショートハンドが
            結合CSS環境でmargin-left/rightに展開されず左寄せのままだった
            実機不具合を確認。margin-left/right:autoを個別指定に変更
   1.2.1: ボタン中央揃えの追加修正（2026-07-11実機検証で発覚）：
          1.2.0の個別プロパティ化だけでは.entry-content p（SANGO標準・
          要素+クラスで詳細度0,0,1,1）が.nrp-button（クラス単体で
          詳細度0,0,1,0）に詳細度で勝りmargin-left:0pxに上書きされ、
          依然左寄せのままだったことを実機のcomputed styleで確認。
          margin-top/bottom/left/rightすべてに!importantを付与し、
          詳細度に関わらず確実に中央寄せされるよう修正
   1.2.2: 実機不具合修正（2026-07-11りっぽさん実機指摘）：
          - アコーディオンの二重枠：`.nrp-box > .nrp-accordion`という入れ子構造
            （curel-deep-moisture-spray他）で、nrp-boxの外枠とnrp-accordionの
            外枠の両方が表示されていた実機不具合を確認（SANGOの干渉ではなく
            nrp部品同士の枠の二重表示）。公開91記事の実データ調査で7記事・
            19箇所が同一パターン（nrp-box-gray直下にnrp-accordion）と判明。
            nrp-box内に入れ子になったnrp-accordionは自前の枠・背景・
            パディング・マージンを持たないよう打ち消し、外枠（nrp-box側）
            だけが見える状態にした。単独で使われるnrp-accordionの枠は維持
          - STEP見出し／ポイント見出し：生ショートコード除去でh4化した後、
            カスタマイザーの見出し再現CSSを撤去したことでh4装飾が消滅し、
            ただの太字テキストになっていた実機不具合を確認。ステップ見出し用
            クラスnrp-stepを新規実装（メインカラー系の番号ラベル＋太字
            テキスト。既存nrp部品と調和する控えめなデザイン。THEME_FREE_
            DECORATION.mdに「案8」の具体設計は存在しなかったため、既存部品
            のトーンに合わせて新規設計した）
   1.2.3: 実機不具合修正（2026-07-11りっぽさん実機発見）：
          - 吹き出し：セリフ箱（.nrp-balloon-text）の右端がアバター
            （.nrp-balloon-avatar）に重なって表示される不具合を確認
            （間宮アロエ軟膏の代替品記事で実機確認。280px〜1900pxの
            幅帯で検証）。旧実装は margin-right:20px のみでアバターとの
            隙間を確保していたが、.nrp-balloon が flex-wrap:wrap の
            折返し計算を行う際、テキストの内容量とコンテナ幅の組み合わせ
            によってはこのmarginが縮小・消失し隙間が0になることを実機の
            computed styleで確認（該当記事はHTML崩れ由来の空<p>も併存
            していたが、その空<p>をdisplay:noneで除いても事象が再現し、
            CSS設計側の不具合と判明）。column-gap:20pxをコンテナ側で
            確保する方式に変更し、アバターにflex-shrink:0、セリフ箱に
            flex-shrink:1・min-width:0を明示することで、どの画面幅でも
            一定の隙間（20px）が保たれるよう修正。あわせて、内容が空の
            子要素（壊れたHTML由来の空<p>等）はdisplay:noneでレイアウト
            計算から除外し、gapの二重計算を防止
   1.2.4: 外部リンクアイコンのデザイン変更（2026-07-12りっぽさん依頼）：
          - .nrp-ext-link::afterの記号「↗」(unicode矢印)をFontAwesome6の
            arrow-up-right-from-square（四角＋右上矢印）へ差し替え。
            記事ページ実機で使用中フォントを実測した結果、SANGOがフロント
            全体でuse.fontawesome.com/releases/v6.1.1/css/all.cssを読み込み
            済みで、既存のfa/fasアイコン（fa-home等）は全て
            font-family:"Font Awesome 6 Free", font-weight:900で描画されて
            いることを確認（追加のFA読み込みは不要）。この実測に基づき
            content:"\f08e" + font-family:"Font Awesome 6 Free" +
            font-weight:900を採用（りっぽさん提示のiタグ表記
            `fa-solid fa-arrow-up-right-from-square`と同一グリフ）。記事
            ページ上で一時スタイル適用しグリフ描画（width実測17.85px、
            スクリーンショットで四角+矢印形状を確認）してから本採用。
            りっぽさん自身も本番記事（コミック番長記事の直販サイトリンク）へ
            手動で<i class="fa-solid fa-arrow-up-right-from-square">を挿入し
            アイコン描画をスクリーンショットで確認済みで、fa-solid表記が
            このサイトで機能することの裏付けとなった。
            色はcolor:inheritを明示しリンク文字色の継承を維持。
            margin-leftは当初4pxとしたが「テキストとの間が窮屈」との指摘を
            受け、半角スペース1個分の余白感に近い0.35emへ変更
   ============================================ */

/* ---------- ボックス共通 ---------- */
.nrp-box {
  position: relative;
  margin: 25px 0;
  padding: 20px;
  border: 2px solid #cccccc;
  border-radius: 5px;
  background: #ffffff;
  box-sizing: border-box;
}
.nrp-box > *:last-child { margin-bottom: 0; }

/* Check!ボックス（黄枠） */
.nrp-box-check {
  border-color: #e2da5f;
  border-radius: 0;
  padding-top: 30px;
}
.nrp-box-title {
  position: absolute;
  top: -0.8em;
  left: 10px;
  display: inline-block;
  margin: 0;
  padding: 0 6px;
  background: #ffffff;
  color: #e2da5f;
  font-weight: normal;
  line-height: 1;
}
.nrp-box-title::before {
  content: "\2713";  /* チェックマーク（絵文字ではなくUnicode記号。外部フォント不要） */
  margin-right: 4px;
}

/* グレー枠（リストボックス） */
.nrp-box-gray {
  border-color: #cccccc;
  border-radius: 5px;
}

/* タイトル付き汎用ボックス（MEMO/Point!/任意タイトル。1.1.0追加・案2）
   タイトルは✓アイコンなし。枠・タイトルの色はインラインstyleで引き継ぐ */
.nrp-box-titled {
  border-radius: 0;
  padding-top: 30px;
}
.nrp-box-title-plain::before {
  content: none;  /* ✓はCheck!専用。汎用タイトルにはアイコンを付けない */
}

/* nrp-box内の生ul/ol（クラス指定なし）の二重枠打ち消し（1.2.0追加）
   SANGO標準 .entry-content :where(ul:not([class])), :where(ol:not([class]))
   が border:2px solid #e8e8e8 と padding を自動付与するため、
   nrp-boxの外枠と入れ子の二重枠になる。ボックス内では打ち消して
   外枠だけが見える状態にする */
.nrp-box ul:not([class]),
.nrp-box ol:not([class]) {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 0 0 1.4em !important;
  margin: 0 0 10px !important;
}
.nrp-box ul:not([class]) > li:last-child,
.nrp-box ol:not([class]) > li:last-child {
  margin-bottom: 0;
}

/* 丸チェックリスト（旧class="maruck"相当）
   1.0.1: テーマ（AFFINGER/SANGO等）の ul/li 標準スタイル（●マーカー・
   余白・li装飾）を確実に打ち消すため、詳細度を上げ !important で
   リセットを明示。✓は絶対配置で行頭に固定し縦位置を揃える
   1.1.0: セレクタを ul.nrp-check-list に統一し、ボックス外の
   裸チェックリスト（旧・裸maruck）でも有効化（案6） */
ul.nrp-check-list {
  list-style: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}
.nrp-box ul.nrp-check-list { margin: 0 !important; }
ul.nrp-check-list > li {
  list-style: none !important;
  margin: 0 0 10px !important;
  padding: 0 0 0 2.25em !important;
  position: relative;
  background: none !important;
}
ul.nrp-check-list > li::marker { content: none; }
ul.nrp-check-list > li:last-child { margin-bottom: 0 !important; }
ul.nrp-check-list > li::before {
  content: "\2713";
  position: absolute;
  left: 0.25em;
  top: 0.15em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border-radius: 50%;
  background: #f3f3f3;
  color: #333333;
  font-size: 0.9em;
  box-sizing: border-box;
}

/* 丸リスト（旧class="st-list-circle"相当）
   1.0.1: リセット強化はチェックリストと同様
   1.1.0: セレクタを ul.nrp-circle-list に統一（ボックス外でも有効） */
ul.nrp-circle-list {
  list-style: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}
.nrp-box ul.nrp-circle-list { margin: 0 !important; }
ul.nrp-circle-list > li {
  list-style: none !important;
  margin: 0 0 8px !important;
  padding: 0 0 0 1.5em !important;
  position: relative;
  background: none !important;
}
ul.nrp-circle-list > li::marker { content: none; }
ul.nrp-circle-list > li:last-child { margin-bottom: 0 !important; }
ul.nrp-circle-list > li::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.6em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #cccccc;
}

/* ---------- 折りたたみ（details/summary） ---------- */
.nrp-accordion {
  margin: 0 0 20px;
  padding: 15px;
  border-radius: 5px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
}
.nrp-accordion-summary {
  cursor: pointer;
  color: #1a1a1a;
  font-weight: bold;
  list-style: none;         /* デフォルトの三角マーカーを消す */
  display: flex;
  align-items: center;
}
.nrp-accordion-summary::-webkit-details-marker { display: none; }
.nrp-accordion-summary::before {
  content: "\FF0B";  /* ＋（全角プラス。開閉アイコンとして使用） */
  margin-right: 6px;
  font-weight: bold;
}
.nrp-accordion[open] .nrp-accordion-summary::before {
  content: "\2212";  /* － */
}
.nrp-accordion-content {
  margin-top: 12px;
}
/* アコーディオン内の生ul/olも二重枠になるため同様に打ち消し（1.2.0追加） */
.nrp-accordion-content ul:not([class]),
.nrp-accordion-content ol:not([class]) {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 0 0 1.4em !important;
  margin: 0 0 10px !important;
}
.nrp-accordion-content blockquote {
  margin: 0;
  padding: 10px 15px;
  border: none;
  border-left: 3px solid #cccccc;
  background: #f9f9f9;
}
.nrp-accordion-content blockquote::before {
  content: none;  /* SANGO標準の引用符アイコンはアコーディオン内では非表示 */
}

/* nrp-box内に入れ子になったnrp-accordionの二重枠打ち消し（1.2.2追加）
   `<div class="nrp-box nrp-box-gray"><details class="nrp-accordion">…</details></div>`
   という入れ子構造で、nrp-boxの外枠とnrp-accordionの外枠の両方が表示される
   実機不具合を確認（curel-deep-moisture-spray等）。nrp-box内では
   nrp-accordion自身の枠・背景・パディング・マージンを持たせず、
   外側のnrp-boxの枠だけが見える状態にする。単独使用時の枠は維持 */
.nrp-box .nrp-accordion {
  margin: 15px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}
.nrp-box .nrp-accordion:first-child {
  margin-top: 0;
}

/* ---------- 吹き出し ----------
   1.0.1: 既定を右寄せ（アバター右・セリフ左）へ変更。
   旧 [st-kaiwa1 r] のAFFINGER実CSS（.st-kaiwa-area2 text-align:right／
   .st-kaiwa-hukidashi2 margin-right:20px・しっぽright:-10px左向き三角）準拠。
   変換済み記事の吹き出しは全件 r 変種のため右寄せが既定
   1.2.0: 公開記事の実態調査で nrp-balloon-left が60記事中45記事に
   残存していたことが判明。「全吹き出しをアバター右にする」というりっぽさんの
   指示に合わせ、nrp-balloon-left修飾クラスの左寄せ効果を無効化した
   （後方のセレクタでレイアウトのみ上書き。クラス自体は記事本文に残るが
   見た目には影響しない） */
.nrp-balloon {
  display: flex;
  flex-direction: row-reverse;   /* DOM順（img→p）のままアバターを右へ */
  flex-wrap: wrap;                /* 余分な子要素はflex-basis:100%で強制改行 */
  justify-content: flex-start;   /* row-reverse時は右端起点＝全体が右寄せ */
  align-items: flex-start;
  column-gap: 20px;               /* 1.2.3: アバターとセリフ箱の隙間はgapで確保
                            （旧実装はセリフ箱のmargin-rightのみで確保していたが、
                            flex-wrapの折返し計算時にmarginが縮小・消失し
                            セリフ箱がアバターに重なる実機不具合を確認したため） */
  margin-bottom: 20px;
}
.nrp-balloon-avatar {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  flex-shrink: 0;                 /* 1.2.3: 明示（アバターは常に固定サイズを維持） */
}
.nrp-balloon-text {
  position: relative;
  display: inline-block;
  flex-shrink: 1;                 /* 1.2.3: 明示（コンテナが狭い時はテキスト側が縮む） */
  min-width: 0;                   /* 1.2.3: flexアイテムの既定min-width:autoを解除し、
                            コンテナ幅に応じて確実に縮小・折返しできるようにする */
  margin: 5px 0 0;                /* 1.2.3: 右マージンはcolumn-gapに統一したため0に変更 */
  padding: 15px 20px;
  border-radius: 7px;
  background-color: #f9f9f9;
  word-break: break-word;
  text-align: left;              /* セリフ文字は左揃え（hukidashi2準拠） */
}
.nrp-balloon-text::after {
  content: "";
  position: absolute;
  top: 30px;
  right: -10px;                  /* しっぽは右端からアバターへ向く */
  margin-top: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #f9f9f9;
}

/* nrp-balloon-textを持たない子要素（壊れたHTML由来の余分なp等）は
   flexコンテナの横並びから外し、独立したブロックとして全幅表示する
   （1.2.0追加。前後段落の回り込み対策） */
.nrp-balloon > *:not(.nrp-balloon-avatar):not(.nrp-balloon-text) {
  flex: 1 1 100%;
  order: 3;
  margin: 8px 0 0;
}
/* 中身が空の場合（壊れたHTML由来の空<p>等）はレイアウト計算から除外する
   （1.2.3追加。column-gapは可視・不可視を問わずflexアイテム間に等しく
   適用されるため、空要素を残したままだとgapが余分に積み重なり
   セリフ箱とアバターの隙間が意図した20pxからずれてしまうため） */
.nrp-balloon > *:not(.nrp-balloon-avatar):not(.nrp-balloon-text):empty {
  display: none;
}

/* nrp-balloon-left：1.2.0で左寄せ効果を無効化し常に右寄せへ統一。
   クラスは記事本文に残存するため互換のためセレクタ自体は維持するが、
   プロパティは基本セレクタと同じ値にして視覚上の左寄せを発生させない */
.nrp-balloon.nrp-balloon-left {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.nrp-balloon.nrp-balloon-left .nrp-balloon-text {
  margin: 5px 0 0;                /* 1.2.3: 右マージンはcolumn-gapに統一したため0に変更（基本セレクタと同値） */
}
.nrp-balloon.nrp-balloon-left .nrp-balloon-text::after {
  right: -10px;
  left: auto;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #f9f9f9;
}

/* ---------- マーカー・文字装飾 ---------- */
.nrp-ymarker {
  font-weight: 700;
  background: linear-gradient(transparent 70%, #fff9c4 0%);
}
.nrp-rmarker {
  font-weight: 700;
  background: #ffcdd2;
}
.nrp-red-bold {
  color: #ef5350;
  font-weight: 700;
}
.nrp-red-150 {
  color: #ef5350;
  font-weight: 700;
  font-size: 150%;
}
.nrp-bold-150 {
  font-weight: 700;
  font-size: 150%;
}

/* ---------- ボタン ---------- */
.nrp-button {
  box-sizing: border-box;
  display: table;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  margin-left: auto !important;    /* 1.2.0: margin:20px auto ショートハンドが結合CSS環境で
                            展開されず左寄せになる実機不具合を確認したため、
                            個別プロパティ指定に変更。
                            1.2.1: 個別指定化しても .entry-content p（SANGO標準・
                            詳細度0,0,1,1）が .nrp-button（詳細度0,0,1,0）より
                            詳細度で勝りmargin-left:0に上書きされ、依然左寄せに
                            なる実機不具合を2026-07-11実機検証で確認したため、
                            !importantを付与して確実に中央寄せさせる */
  margin-right: auto !important;
  border: 1px solid #FFC266;
  border-radius: 30px;
  background: #FFC266;
}
.nrp-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1.5em;
  color: #3A4D66;
  font-weight: bold;
  font-size: 95%;
  text-decoration: none;
}
.nrp-button-arrow {
  margin-left: 8px;
}

/* ---------- 外部リンクアイコン ---------- */
.nrp-ext-link::after {
  content: "\f08e";  /* FontAwesome6 arrow-up-right-from-square。SANGOがフロントで読み込むuse.fontawesome.com v6.1.1（Font Awesome 6 Free, weight 900）を利用。追加読み込みなし */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  margin-left: 0.35em;  /* りっぽさん手動確認版（半角スペース1個分の余白感）に合わせ調整。旧4pxは窮屈だったため0.35emへ */
  font-size: 0.85em;
  color: inherit;
}

/* ---------- 関連記事カード（旧st-card。1.1.0追加・案4） ----------
   現行AFFINGERの実レンダリング（.st-cardbox: padding:15px・
   border:1px solid #e0e0e0・hover時opacity:.6・150x150サムネ・
   ラベルは実CSSで display:none）に寄せた静的カード */
.nrp-card {
  display: block;
  padding: 15px;
  border: 1px solid #e0e0e0;
  margin: 0 0 20px;
  text-decoration: none;
  color: inherit;
  transition: opacity .5s;
  box-sizing: border-box;
}
.nrp-card:hover { opacity: .6; }
.nrp-card-label {
  display: none;  /* 現行AFFINGERの実CSSに合わせ非表示（ラベル文字列はHTMLに保持） */
}
.nrp-card-body {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.nrp-card-thumb {
  width: 150px;
  height: 150px;
  object-fit: cover;
  flex-shrink: 0;
}
.nrp-card-inner { display: block; min-width: 0; }
.nrp-card-title {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
}
.nrp-card-more {
  display: block;
  color: #777777;
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- ステップ／ポイント見出し（旧[st-step]・[st-marumozi]。1.2.2新規実装） ----------
   生ショートコード除去でh4化 → カスタマイザーの見出し再現CSS撤去でh4装飾が
   消滅し、ただの太字テキストになっていた実機不具合の修正。
   THEME_FREE_DECORATION.mdに具体設計（案8）は存在しなかったため、
   既存nrp部品（nrp-box-check・nrp-button等）のトーンに合わせ、
   大げさな装飾のない番号ラベル＋太字テキストで新規設計した。
   使用例：<h4 class="nrp-step"><span class="nrp-step-num">1</span>パッチテストをする</h4> */
.nrp-step {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #dddd00;
  font-size: 105%;
  font-weight: bold;
}
.nrp-step:first-child { margin-top: 0; }
.nrp-step-num {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: #dddd00;
  color: #333333;
  font-size: 90%;
  font-weight: bold;
  line-height: 1;
}

/* ---------- 引用（blockquote） ----------
   1.2.0新規実装。旧AFFINGER時代はグレー背景だったが、現行SANGOでは
   白背景・黒枠(2px solid #464646)・FontAwesome引用符アイコンで表示される。
   旧AFFINGER風グレー背景を再現し、SANGO標準装飾を打ち消す。
   X投稿の埋め込み(<blockquote class="twitter-tweet">)はtwitter widgets.js
   実行後にdiv+iframe（Twitter公式ウィジェット、別オリジン）へ置換されるため
   このCSSの対象外（nrp側では制御不可。公式ウィジェットの見た目がそのまま出る） */
.entry-content blockquote {
  border: none;
  background-color: #f3f3f3;
  color: #333333;
  padding: 15px 20px;
  border-radius: 5px;
}
.entry-content blockquote::before {
  content: none;  /* SANGO標準の引用符アイコンを非表示にする */
}
.entry-content blockquote cite {
  color: #777777;
}

/* ---------- レスポンシブ（スマホ幅） ---------- */
@media (max-width: 480px) {
  .nrp-box { padding: 15px; }
  .nrp-balloon { column-gap: 15px; }  /* 1.2.3: アバターとの隙間もmargin-rightからcolumn-gapへ統一 */
  .nrp-balloon-avatar { width: 48px; height: 48px; }
  .nrp-balloon-text { padding: 12px 15px; }
  .nrp-card-thumb { width: 100px; height: 100px; }
}