/* ================================
   SORANA Floating Panel - 宇宙フルテーマ
   ================================ */

/* 丸い未来的フローティングボタン（惑星風） */
.sfn-floating-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 64px;
  height: 64px;
  border-radius: 50%;                   /* 完全な円 */
  background: radial-gradient(circle at 30% 30%, #6a11cb, #2575fc);
  border: 2px solid rgba(0,255,255,0.45);
  box-shadow: 0 0 18px rgba(0,255,255,0.7), 0 0 40px rgba(106,17,203,0.35) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: sfnGlowPulse 3s infinite;
  padding: 0;
  z-index: 1000000;
}
.sfn-floating-button:hover { transform: scale(1.06); }
@keyframes sfnGlowPulse {
  0%   { box-shadow: 0 0 10px #0ff, 0 0 0 rgba(0,0,0,0) inset; }
  50%  { box-shadow: 0 0 26px #6a11cb, 0 0 20px rgba(37,117,252,0.35) inset; }
  100% { box-shadow: 0 0 10px #0ff, 0 0 0 rgba(0,0,0,0) inset; }
}

/* パネル本体（黒×星空） */
.sfn-news-panel {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  background: radial-gradient(circle at 20% 20%, #000010 0%, #000000 70%);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);          /* 初期は隠す */
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  overflow: hidden;                      /* 星屑を内側に切る */
}
.sfn-news-panel.active { transform: translateX(0); }

/* ヘッダー（SORANA） */
.sfn-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, rgba(13,71,161,.9), rgba(106,17,203,.9), rgba(37,117,252,.9));
  color: #fff;
  box-shadow: 0 2px 22px rgba(37,117,252,.45);
}
.sfn-panel-title {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 10px #0ff, 0 0 22px #6a11cb, 0 0 36px #2575fc;
}

/* 閉じるボタン（ネオン） */
.sfn-close-button {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(0,255,255,0.35);
  width: 40px; height: 40px;
  border-radius: 50%;
  color: #0ff;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
  box-shadow: 0 0 12px rgba(0,255,255,.55);
}
.sfn-close-button:hover {
  transform: rotate(90deg) scale(1.08);
  background: rgba(255,255,255,0.15);
  box-shadow: 0 0 18px #0ff, 0 0 36px #6a11cb, 0 0 56px #2575fc;
}

/* 星屑アニメーションレイヤ（DOM要素は1つ、CSSで多層アニメ） */
.sfn-starfield {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  /* 3層の星を重ねる（密度・サイズ・速度をレイヤで変える） */
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.9) 99%, transparent) repeat,
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.8) 99%, transparent) repeat,
    radial-gradient(2px 2px at 70% 40%, rgba(255,255,255,.9) 99%, transparent) repeat;
  background-size: 220px 220px, 300px 300px, 520px 520px;
  background-position: 0 0, 0 0, 0 0;
  animation:
    sfnStarDrift1 90s linear infinite,
    sfnStarDrift2 140s linear infinite,
    sfnStarDrift3 220s linear infinite;
}
@keyframes sfnStarDrift1 { to { background-position: 0 600px, 0 0, 0 0; } }
@keyframes sfnStarDrift2 { to { background-position: 0 0, 0 800px, 0 0; } }
@keyframes sfnStarDrift3 { to { background-position: 0 0, 0 0, 0 1200px; } }

/* コンテンツ（内部だけスクロール） */
.sfn-panel-content {
  position: relative; z-index: 1;
  flex: 1;
  overflow-y: auto;                  /* パネル内のみスクロール */
  padding: 20px;
  color: #eaeaea;
}

/* 投稿カード（未来的グラス） */
.sfn-post-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,255,255,0.18);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 0 14px rgba(0,153,255,0.28);
  backdrop-filter: blur(6px);
  color: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
  animation: sfnItemFade .5s ease-out;
}
.sfn-post-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 22px rgba(0,255,255,.6);
}
@keyframes sfnItemFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.sfn-post-thumbnail { flex-shrink: 0; margin-bottom: 10px; }
.sfn-post-thumbnail img { border-radius: 10px; object-fit: cover; width: 100%; height: auto; }

.sfn-post-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.sfn-post-title a {
  color: #fff; text-decoration: none;
  text-shadow: 0 0 6px rgba(0,255,255,.5);
}
.sfn-post-meta { margin-bottom: 8px; }
.sfn-post-date { font-size: 12px; color: #b9c0ff; }
.sfn-post-excerpt { font-size: 14px; color: #cfd6ff; line-height: 1.7; }

/* ローディング / エラー */
.sfn-loading {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 40px; color:#a8b5ff;
}
.sfn-spinner {
  width:40px; height:40px; border:3px solid rgba(255,255,255,.2); border-top:3px solid #59f;
  border-radius:50%; animation:sfnSpin 1s linear infinite; margin-bottom:14px;
}
@keyframes sfnSpin { to { transform: rotate(360deg); } }
.sfn-error, .sfn-no-posts { text-align:center; color:#b9c0ff; padding: 40px 20px; }

/* オーバーレイ（背面クリック用） */
.sfn-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 999998;
}
.sfn-overlay.active { opacity: 1; visibility: visible; }

/* レスポンシブ */
@media (max-width: 768px) {
  .sfn-news-panel { max-width: 100%; width: 85%; }
  .sfn-panel-title { font-size: 22px; }
  .sfn-panel-content { padding: 16px; }
}
@media (max-width: 480px) {
  .sfn-news-panel { width: 100%; }
  .sfn-floating-button { width: 56px; height: 56px; }
}

/* アクセシビリティ / 印刷 */
.sfn-floating-button:focus, .sfn-close-button:focus { outline: 3px solid #4c9aff; outline-offset: 2px; }
@media print { .sfn-floating-container, .sfn-news-panel, .sfn-overlay { display:none !important; } }