/* =====================================================
   05_theory.css
   考察・記事スタイル
   - ⑪ 考察記事 (.khth-wrap, .khth-intro, .khth-tags, .khth-tag--kh1…ux)
   - 考察記事の各種コンポーネント (引用・図解・まとめボックス・更新履歴)
===================================================== */
   /* =====================================================
         11 考察記事用CSS (.khth-*)
         -----------------------------------------------------
         読み物向け：文字大きめ・行間ゆったり・装飾控えめ
         ===================================================== */
   
   /* ラッパー：本文全体のベース */
   .khth-wrap {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
       "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
     color: #2c2c2c;
     font-size: 1.05em;
     line-height: 1.95;
     letter-spacing: 0.015em;
   }
   
   /* 導入ブロック */
   .khth-intro {
     margin: 0 0 2em;
     padding: 22px 24px;
     background: linear-gradient(135deg, #fafbfd 0%, #fff 100%);
     border-left: 6px solid #1f3373;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   }
   .khth-summary {
     font-size: 1.05em;
     font-weight: 600;
     color: #2c2c2c;
     margin: 0 0 1em;
     line-height: 1.8;
   }
   
   /* メタ情報行（公開日・読了時間・テーマ） */
   .khth-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
     margin-top: 0.6em;
     font-size: 0.85em;
     color: #666;
   }
   .khth-meta-item {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     white-space: nowrap;
   }
   
   /* 作品バッジ */
   .khth-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin: 0.6em 0;
   }
   .khth-tag {
     font-size: 0.78em;
     font-weight: 800;
     padding: 3px 12px;
     border-radius: 99px;
     color: #fff;
     letter-spacing: 0.03em;
     background: #888;
   }
   .khth-tag--kh1 {
     background: linear-gradient(90deg, #1a3a8c 0%, #3556a8 100%);
   }
   .khth-tag--kh2 {
     background: linear-gradient(90deg, #7d2a2a 0%, #a04545 100%);
   }
   .khth-tag--kh3 {
     background: linear-gradient(90deg, #1f3373 0%, #3a5aa8 100%);
   }
   .khth-tag--bbs {
     background: linear-gradient(90deg, #5a6e2a 0%, #8aa345 100%);
   }
   .khth-tag--ddd {
     background: linear-gradient(90deg, #5a3a8c 0%, #8a5cb8 100%);
   }
   .khth-tag--ml {
     background: linear-gradient(90deg, #b46a1e 0%, #d99540 100%);
   }
   .khth-tag--ux {
     background: linear-gradient(90deg, #2a6e7d 0%, #45a3b8 100%);
   }
   .khth-tag--other {
     background: #888;
   }
   
   /* ネタバレ警告（軽め） */
   .khth-spoiler-alert {
     margin: 1.6em 0;
     padding: 12px 16px;
     font-size: 0.9em;
     color: #6c4f1e;
     background: #fff8e6;
     border: 1px solid #f7d774;
     border-radius: 8px;
     display: flex;
     align-items: center;
     gap: 10px;
   }
   .khth-spoiler-alert::before {
     content: "⚠";
     font-size: 1.3em;
     line-height: 1;
   }
   
   /* 見出し（Cocoonデフォルトに被せる） */
   .khth-wrap + h2,
   .khth-wrap ~ h2 {
     margin: 2.2em 0 0.9em;
     padding: 0.55em 0.8em;
     font-size: 1.4em;
     color: #1f3373;
     border-left: 5px solid #f7d774;
     background: linear-gradient(90deg, #fafbfd 0%, transparent 100%);
     line-height: 1.4;
   }
   .khth-wrap + h3,
   .khth-wrap ~ h3,
   .khth-wrap + h2 ~ h3 {
     margin: 1.6em 0 0.7em;
     padding-left: 0.7em;
     font-size: 1.15em;
     color: #1f3373;
     border-left: 3px solid #d8def0;
     line-height: 1.5;
   }
   
   /* セリフ引用ブロック */
   blockquote.khth-quote {
     margin: 1.8em 0;
     padding: 20px 22px 16px 50px;
     background: #f9f9fc;
     border-left: 4px solid #c4a96b;
     border-radius: 6px;
     position: relative;
     font-style: normal;
   }
   blockquote.khth-quote::before {
     content: "\201C";
     position: absolute;
     top: 8px;
     left: 14px;
     font-size: 2.8em;
     color: #c4a96b;
     opacity: 0.45;
     font-family: Georgia, serif;
     line-height: 1;
   }
   blockquote.khth-quote p {
     margin: 0;
     font-size: 1.02em;
     line-height: 1.85;
     color: #333;
   }
   .khth-quote-source {
     display: block;
     margin-top: 0.7em;
     text-align: right;
     font-size: 0.85em;
     color: #666;
     font-style: normal;
   }
   .khth-quote-source::before {
     content: "— ";
   }
   
   /* 画像＋キャプション */
   .khth-figure {
     margin: 1.8em 0;
     text-align: center;
   }
   .khth-figure img {
     max-width: 100%;
     height: auto;
     border-radius: 8px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   }
   .khth-caption {
     display: block;
     margin-top: 0.6em;
     font-size: 0.85em;
     color: #666;
     line-height: 1.5;
     font-style: italic;
   }
   
   /* 章末まとめボックス */
   .khth-conclusion {
     margin: 2em 0;
     padding: 18px 22px;
     background: linear-gradient(135deg, #fff8e6 0%, #fffdf5 100%);
     border: 1px solid #f7d774;
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(247, 215, 116, 0.2);
   }
   .khth-conclusion-title {
     font-size: 1.05em;
     font-weight: 800;
     color: #1f3373;
     margin: 0 0 0.6em;
     padding-bottom: 0.4em;
     border-bottom: 2px solid #f7d774;
     display: flex;
     align-items: center;
     gap: 8px;
   }
   .khth-conclusion-title::before {
     content: "\2726";
     color: #c4a96b;
     font-size: 1.1em;
   }
   .khth-conclusion p {
     margin: 0.4em 0;
   }
   .khth-conclusion p:last-child {
     margin-bottom: 0;
   }
   
   /* 更新履歴 */
   .khth-history {
     margin: 2.4em 0 1em;
     padding: 14px 18px;
     background: #fafbfd;
     border: 1px dashed #d8def0;
     border-radius: 8px;
     font-size: 0.85em;
     color: #666;
   }
   .khth-history-title {
     font-weight: 700;
     color: #1f3373;
     margin: 0 0 0.5em;
   }
   .khth-history ul {
     margin: 0;
     padding-left: 1.4em;
   }
   .khth-history li {
     margin: 0.15em 0;
   }
   
   /* スマホ対応 */
   @media (max-width: 600px) {
     .khth-wrap {
       font-size: 1em;
       line-height: 1.85;
     }
     .khth-intro {
       padding: 16px 18px;
     }
     .khth-summary {
       font-size: 1em;
     }
     .khth-meta {
       gap: 10px;
       font-size: 0.8em;
     }
     blockquote.khth-quote {
       padding: 16px 16px 12px 40px;
     }
     blockquote.khth-quote::before {
       font-size: 2.2em;
       top: 6px;
       left: 10px;
     }
     blockquote.khth-quote p {
       font-size: 0.95em;
     }
     .khth-conclusion {
       padding: 14px 16px;
     }
   }