/* =====================================================
   08_achievements.css
   実績システムスタイル
   - @keyframes アニメーション定義
   - トースト通知 (.kh-toast)
   - 実績記録ページ (#kh-achievements-root, .kh-card-*)
   - 実績ヘッダーリンク (.khblog-ach-link)
   - 拡張機能 (ダークモード body.kh-heartless-mode)
   - ハートアニメーション (.kh-heart-container)
   - SNSシェア (.kh-share-wrap)
===================================================== */
   /* ============================
    *  53_ KH実績システム CSS
    *  （アニメーション・トースト通知・実績ページ）
    * ============================ */
   /* -------------------------------------------------------
      2. アニメーション定義
   ------------------------------------------------------- */
   @keyframes kh-twinkle {
     from { opacity: 0.2; }
     to   { opacity: 0.9; }
   }
   @keyframes kh-heartPulse {
     from { transform: scale(1); }
     to   { transform: scale(1.15); }
   }
   @keyframes kh-fadeSlideIn {
     from { opacity: 0; transform: translateY(20px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   @keyframes kh-titleGlow {
     from { text-shadow: 0 0 20px rgba(255,215,0,0.3); }
     to   { text-shadow: 0 0 40px rgba(255,215,0,0.7), 0 0 80px rgba(255,215,0,0.2); }
   }
   @keyframes kh-revealCard {
     0%   { transform: scale(1); box-shadow: 0 0 0px rgba(255,215,0,0); }
     35%  { transform: scale(1.03); box-shadow: 0 0 16px rgba(255,215,0,0.4); }
     100% { transform: scale(1); box-shadow: 0 0 0px rgba(255,215,0,0); }
   }
   @keyframes kh-toast-slide-in {
     from { transform: translateX(110%); opacity: 0; }
     to   { transform: translateX(0);    opacity: 1; }
   }
   @keyframes kh-toast-slide-out {
     from { transform: translateX(0);    opacity: 1; }
     to   { transform: translateX(110%); opacity: 0; }
   }
   @keyframes kh-toast-progress {
     from { width: 100%; }
     to   { width: 0%; }
   }
   
   /* -------------------------------------------------------
      4. トロフィー通知
   ------------------------------------------------------- */
   .kh-toast {
     position: fixed;
     top: 24px;
     right: 24px;
     z-index: 99999;
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 280px;
     max-width: 340px;
     background: rgba(6, 6, 20, 0.97);
     border: 1px solid var(--kh-toast-border, #cd7f32);
     border-radius: 8px;
     padding: 10px 16px 10px 6px;
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     box-shadow: 0 4px 28px var(--kh-toast-glow, rgba(205,127,50,0.5));
     transform: translateX(110%);
     opacity: 0;
     pointer-events: none;
     overflow: hidden;
     transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
   }
   .kh-toast.is-visible { transform: translateX(0); opacity: 1; pointer-events: auto; }
   .kh-toast.is-hiding  { transform: translateX(110%); opacity: 0; }
   
   .kh-toast-line-left {
     position: absolute; left: 0; top: 0; bottom: 0;
     width: 3px;
     background: var(--kh-toast-color, #cd7f32);
     border-radius: 8px 0 0 8px;
     flex-shrink: 0;
   }
   .kh-toast-icon {
     padding-left: 10px; flex-shrink: 0;
     filter: drop-shadow(0 0 6px var(--kh-toast-glow, rgba(205,127,50,0.5)));
     display: flex; align-items: center; justify-content: center;
   }
   .kh-toast-icon svg { display: block; }
   .kh-toast-body { flex: 1; min-width: 0; }
   .kh-toast-label {
     font-size: 8px; letter-spacing: 0.3em;
     color: var(--kh-toast-color, #cd7f32);
     font-family: 'Cinzel', serif; margin-bottom: 2px;
   }
   .kh-toast-title {
     font-size: 13px; font-family: 'Noto Serif JP', serif; font-weight: 700;
     color: #f0e6d0; letter-spacing: 0.04em;
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
   }
   .kh-toast-desc {
     font-size: 10px; color: #6a7090;
     font-family: 'Noto Sans JP', sans-serif; margin-top: 2px;
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
   }
   .kh-toast-bottom-glow {
     position: absolute; bottom: 0; left: 0; right: 0; height: 1.5px;
     background: linear-gradient(to right, transparent, var(--kh-toast-border, #cd7f32), transparent);
   }
   .kh-toast-progress {
     position: absolute; bottom: 0; left: 0; height: 2px;
     background: var(--kh-toast-color, #cd7f32);
     opacity: 0.5;
     animation: kh-toast-progress 3.2s linear forwards;
   }
   @media (max-width: 480px) {
     .kh-toast {
       top: auto; bottom: 16px; right: 12px; left: 12px;
       max-width: 100%; min-width: unset;
       transform: translateY(120%);
     }
     .kh-toast.is-visible { transform: translateY(0); }
     .kh-toast.is-hiding  { transform: translateY(120%); }
   }
   
   /* -------------------------------------------------------
      5. 実績記録ページ
   ------------------------------------------------------- */
   #kh-achievements-root {
     position: relative; min-height: 100vh;
     background: linear-gradient(180deg, #04040f 0%, #080820 40%, #0a0a1e 100%);
     color: #e0d8f0; font-family: 'Noto Sans JP', sans-serif;
     overflow-x: hidden; padding: 60px 20px 80px;
     box-sizing: border-box; max-width: 960px; margin: 0 auto;
   }
   .kh-starfield { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
   .kh-star {
     position: absolute; border-radius: 50%; background: white; opacity: 0.6;
     animation: kh-twinkle var(--dur) var(--delay) ease-in-out infinite alternate;
   }
   .kh-header { text-align: center; margin-bottom: 48px; position: relative; z-index: 1; animation: kh-fadeSlideIn 0.8s ease forwards; }
   .kh-header-sub { font-size: 11px; letter-spacing: 0.4em; color: #b09060; font-family: 'Cinzel', serif; margin-bottom: 16px; }
   .kh-title {
     font-size: clamp(28px, 6vw, 48px); font-family: 'Cinzel', serif; font-weight: 700;
     color: #f0e6d0; letter-spacing: 0.08em; margin: 0;
     animation: kh-titleGlow 3s ease-in-out infinite alternate;
   }
   .kh-subtitle { margin-top: 12px; font-size: 13px; color: #5a607a; font-style: italic; font-family: 'Noto Serif JP', serif; letter-spacing: 0.1em; }
   .kh-hearts { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 16px 0 8px; align-items: center; }
   .kh-heart svg { flex-shrink: 0; }
   .kh-heart.filled svg { filter: drop-shadow(0 0 4px rgba(192,48,90,0.8)); animation: kh-heartPulse 2.4s ease-in-out infinite alternate; }
   .kh-progress-text { font-size: 12px; color: #5a607a; font-family: 'Cinzel', serif; letter-spacing: 0.15em; }
   .kh-filters { display: flex; gap: 10px; justify-content: center; margin-bottom: 36px; position: relative; z-index: 1; animation: kh-fadeSlideIn 0.8s 0.2s ease both; }
   .kh-filter-btn {
     padding: 8px 20px; border-radius: 20px; border: 1.5px solid #2a2a3a;
     background: rgba(255,255,255,0.03); color: #556;
     font-size: 12px; font-family: 'Cinzel', serif; letter-spacing: 0.1em;
     cursor: pointer; transition: all 0.2s;
   }
   .kh-filter-btn.active { border-color: #b09060; background: rgba(176,144,96,0.18); color: #e8d5a0; }
   .kh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; position: relative; z-index: 1; }
   .kh-card-wrapper { perspective: 1000px; height: 228px; padding-top: 8px; cursor: default; animation: kh-fadeSlideIn 0.6s ease both; }
   .kh-card-wrapper.unlocked { cursor: pointer; }
   .kh-card-wrapper.revealing { animation: kh-revealCard 1.2s ease forwards; border-radius: 12px; }
   .kh-card-wrapper.revealed  { animation: none; } /* 再発火防止 */
   .kh-card-inner { position: relative; width: 100%; height: 220px; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1); }
   .kh-card-wrapper.flipped .kh-card-inner { transform: rotateY(180deg); }
   .kh-card-front {
     position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
     border-radius: 12px; border: 1.5px solid #2a2a3a; background: rgba(10,10,20,0.7);
     padding: 24px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px;
     transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; box-sizing: border-box;
   }
   .kh-card-wrapper.unlocked .kh-card-front { border-color: var(--rarity-border); background: linear-gradient(135deg, var(--rarity-bg), rgba(10,10,30,0.9)); box-shadow: 0 2px 12px var(--rarity-glow); }
   .kh-card-wrapper.unlocked:hover .kh-card-front { transform: translateY(-6px); box-shadow: 0 8px 32px var(--rarity-glow), 0 0 0 1px var(--rarity-border-40); }
   .kh-card-badge { position: absolute; top: 10px; left: 12px; font-size: 9px; letter-spacing: 0.2em; font-family: 'Cinzel', serif; font-weight: 700; color: var(--rarity-color); display: none; }
   .kh-card-wrapper.unlocked .kh-card-badge { display: block; }
   .kh-card-new { position: absolute; top: 10px; right: 12px; font-size: 9px; letter-spacing: 0.15em; color: #FFD700; font-family: 'Cinzel', serif; font-weight: 700; background: rgba(255,215,0,0.15); border: 1px solid rgba(255,215,0,0.4); border-radius: 4px; padding: 2px 6px; display: none; }
   .kh-card-wrapper.is-new .kh-card-new { display: block; }
   .kh-card-icon { margin-top: 8px; display: flex; align-items: center; justify-content: center; filter: none; transition: filter 0.3s; }
   .kh-card-wrapper.unlocked .kh-card-icon { filter: drop-shadow(0 0 8px var(--rarity-glow)); }
   .kh-card-label { font-size: 13px; font-family: 'Noto Serif JP', serif; font-weight: 700; color: #444; letter-spacing: 0.05em; text-align: center; line-height: 1.5; }
   .kh-card-wrapper.unlocked .kh-card-label { color: #f0e6d0; }
   .kh-card-desc { font-size: 11px; font-family: 'Noto Sans JP', sans-serif; color: #333; font-style: italic; line-height: 1.6; text-align: center; min-height: 32px; }
   .kh-card-wrapper.unlocked .kh-card-desc { color: #8a8fa8; }
   .kh-card-divider { width: 80%; height: 1px; background: linear-gradient(to right, transparent, var(--rarity-border-60, #333), transparent); margin-top: 4px; display: none; }
   .kh-card-wrapper.unlocked .kh-card-divider { display: block; }
   .kh-card-date { font-size: 10px; font-family: 'Cinzel', serif; color: var(--rarity-color); opacity: 0.7; letter-spacing: 0.1em; display: none; }
   .kh-card-wrapper.unlocked .kh-card-date { display: block; }
   .kh-card-hint { position: absolute; bottom: 7px; right: 10px; font-size: 8px; font-family: 'Cinzel', serif; color: var(--rarity-color); opacity: 0.35; letter-spacing: 0.1em; display: none; }
   .kh-card-wrapper.unlocked .kh-card-hint { display: block; }
   .kh-card-back {
     position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
     transform: rotateY(180deg); border-radius: 12px; border: 2px solid var(--rarity-border);
     background: var(--back-bg); padding: 16px; display: flex; flex-direction: column;
     align-items: center; justify-content: center; gap: 8px; overflow: hidden; box-sizing: border-box;
   }
   .kh-back-details { font-size: 8px; letter-spacing: 0.35em; font-family: 'Cinzel', serif; color: var(--back-label); }
   .kh-back-icon { display: flex; align-items: center; justify-content: center; }
   .kh-back-label { font-size: 12px; font-family: 'Noto Serif JP', serif; font-weight: 700; color: var(--back-text); text-align: center; line-height: 1.4; }
   .kh-back-desc { font-size: 10px; font-family: 'Noto Sans JP', sans-serif; color: var(--back-sub); text-align: center; line-height: 1.6; }
   .kh-back-divider, .kh-back-divider2 { width: 75%; height: 1px; background: linear-gradient(to right, transparent, var(--rarity-border-90, #555), transparent); }
   .kh-back-howto-label { font-size: 8px; letter-spacing: 0.2em; font-family: 'Cinzel', serif; color: var(--back-label); margin-bottom: 2px; }
   .kh-back-howto { font-size: 10px; font-family: 'Noto Sans JP', sans-serif; color: var(--back-sub); text-align: center; line-height: 1.6; padding: 0 4px; }
   .kh-back-date { font-size: 10px; font-family: 'Cinzel', serif; color: var(--back-label); letter-spacing: 0.12em; }
   .kh-back-hint { position: absolute; bottom: 8px; right: 10px; font-size: 8px; font-family: 'Cinzel', serif; color: var(--back-label); opacity: 0.6; letter-spacing: 0.1em; }
   .kh-footer { text-align: center; margin-top: 64px; font-size: 11px; color: #2a2a3a; font-family: 'Cinzel', serif; letter-spacing: 0.2em; position: relative; z-index: 1; }
   ::-webkit-scrollbar { width: 4px; }
   ::-webkit-scrollbar-track { background: #080820; }
   ::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 2px; }
   
   
   /* ============================
    *  54_ 実績記録リンク（logo-header 右上）
    * ============================ */
   .khblog-ach-link {
     position: absolute;
     top: 12px;
     right: 76px;
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 5px 10px 5px 7px;
     background: rgba(12, 24, 56, 0.85);
     border: 1px solid rgba(255, 209, 102, 0.45);
     border-radius: 999px;
     color: #ffd166;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-decoration: none;
     z-index: 100;
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     transition: background 0.2s ease, box-shadow 0.2s ease;
   }
   .khblog-ach-link:hover {
     background: rgba(20, 36, 85, 0.95);
     box-shadow: 0 0 12px rgba(255, 209, 102, 0.3);
     color: #ffd166;
     text-decoration: none;
   }
   .khblog-ach-link-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 18px;
     height: 18px;
     flex-shrink: 0;
   }
   .khblog-ach-link-icon svg {
     width: 100%;
     height: 100%;
   }
   .khblog-ach-link-text {
     white-space: nowrap;
   }
   .khblog-ach-link-count {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 16px;
     height: 16px;
     padding: 0 4px;
     background: #ffd166;
     color: #0c1838;
     font-size: 9px;
     font-weight: 700;
     border-radius: 999px;
     line-height: 1;
   }
   @media (max-width: 600px) {
     .khblog-ach-link {
       top: 10px;
       right: 58px;
       padding: 4px 8px 4px 6px;
     }
     .khblog-ach-link-icon {
       width: 15px;
       height: 15px;
     }
     .khblog-ach-link-text {
       display: none;
     }
   }

   /* ============================
    *  57_ KH拡張機能CSS
    *  （ダークモード・ハートアニメーション・SNSシェア）
    * ============================ */
   /* -------------------------------------------------------
      3. ダークモード（ハートレス侵食）
      body.kh-heartless-mode で適用
   ------------------------------------------------------- */
   body.kh-heartless-mode {
     filter: brightness(0.7) saturate(0.5) hue-rotate(220deg);
     transition: filter 1.2s ease;
   }
   body.kh-heartless-mode::before {
     content: 'ハートレスに侵食されています…';
     position: fixed;
     top: 0; left: 0; right: 0;
     background: rgba(20, 0, 40, 0.9);
     border-bottom: 1px solid #3a0a5a;
     color: #9060c0;
     font-size: 11px;
     font-family: 'Noto Serif JP', serif;
     text-align: center;
     padding: 6px;
     z-index: 99998;
     letter-spacing: 0.1em;
   }
   
   /* -------------------------------------------------------
      6. ハートアニメーション
      .kh-heart-container を記事テンプレートの末尾に設置
   ------------------------------------------------------- */
   .kh-heart-container {
     position: fixed;
     bottom: 70px;
     right: 24px;
     width: 50px;
     height: 50px;
     pointer-events: none;
     z-index: 9000;
   }
   /* JSで動的に生成されるハート要素 */
   .kh-floating-heart {
     position: absolute;
     bottom: 0;
     right: 0;
     pointer-events: none;
     filter: drop-shadow(0 0 8px rgba(220,40,60,0.8)) drop-shadow(0 0 16px rgba(255,80,80,0.35));
     /* アニメーションはJSで個別に付与 */
   }
   
   /* -------------------------------------------------------
      7. SNSシェアボタン
      [kh_share] ショートコードで出力
   ------------------------------------------------------- */
   .kh-share-wrap {
     margin: 32px 0; padding: 20px;
     border: 1px solid rgba(176,144,96,0.3); border-radius: 10px;
     background: rgba(176,144,96,0.04); text-align: center;
   }
   .kh-share-label { font-size: 11px; letter-spacing: 0.3em; color: #b09060; font-family: 'Cinzel', serif; margin-bottom: 14px; }
   .kh-share-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
   .kh-share-btn {
     display: inline-flex; align-items: center; gap: 6px;
     padding: 8px 16px; border-radius: 20px; font-size: 12px;
     font-family: 'Noto Sans JP', sans-serif; text-decoration: none;
     border: 1px solid transparent; cursor: pointer; transition: all 0.2s; background: none;
   }
   .kh-share-x        { background: #000; color: #fff; border-color: #333; }
   .kh-share-line     { background: #06c755; color: #fff; }
   .kh-share-facebook { background: #1877f2; color: #fff; }
   .kh-share-copy     { background: rgba(255,255,255,0.06); color: #b09060; border-color: rgba(176,144,96,0.3); }
   .kh-share-btn:hover { opacity: 0.85; transform: translateY(-1px); }
   
   
   /* サムネイル非表示 */
   .postid-795 .eye-catch {
     display: none;
   }
   .postid-723 .eye-catch {
     display: none;
   }