/* =====================================================
   RainySketch timeline.css（整理・完全版 / 全置換OK）
   - 3カラム
   - TLカード/画像/Viewer
   - 返信/詳細/まとめていいね
   - アクション行（円形hover + mask SVG）を完全統一
   ===================================================== */

:root{
  --rs-main-max: 600px;

  /* action */
  --rs-action-col: 92px;
  --rs-action-icbox: 34px;      /* 円の直径 */
  --rs-action-icsize: 18px;     /* アイコンの見た目サイズ（maskはこの箱に収まる） */
}

/* ========== Base ========== */
html, body{
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
#app{ min-height: 100vh; }

/* ========== 3 columns ========== */
.timeline-wrapper{
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.timeline-main{
  width: 100%;
  max-width: var(--rs-main-max);
  min-height: 100vh;
  background: #fff;
  flex: 0 0 auto;
  overflow: visible;
}

/* center header sticky */
.timeline-header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  transition: box-shadow .2s ease;
}
.timeline-header.scrolled{
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* sidebars */
.left-sidebar,
.right-sidebar{
  width: 350px;
  height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: 0 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f8f9fa;
}
.left-sidebar{ padding-bottom: 16px; }

.left-sidebar .mt-auto{ position: static !important; }

#tl{ min-height: 40vh; }

/* responsive */
@media (max-width: 991.98px){
  .left-sidebar,
  .right-sidebar{ display: none !important; }

  .timeline-main{ max-width: 100%; }

  /* SP FAB */
  #btnPost{
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 100;
    border-radius: 999px;
  }

  /* ============================
    SP: アクションバー詰める + 押しやすくする
    - 右端ギリギリ問題の主因：4ボタン * 固定列幅が広すぎる
    - SPだけ列幅/アイコン箱/隙間を縮めて収まりを良くする
    ============================ */

  :root{
    --rs-action-col: 72px;     /* 92 → 72（4ボタンでも320pxに収まりやすい） */
    --rs-action-icbox: 32px;   /* 34 → 32 */
    --rs-action-icsize: 17px;  /* 18 → 17 */
  }

  .rs-post-actions{
    gap: 4px;                 /* 8 → 4 */
    padding-right: 6px;       /* 右端の押しづらさを軽減（微妙に内側へ） */
  }

  .rs-action-btn .rs-action-count{
    font-size: 11px;          /* 数字も少しだけ締める */
  }

  /* ============================
     SP: 詳細の時刻をXっぽく小さめに
     ============================ */
  .rs-post-detail-time{
    font-size: 12px;          /* 0.92em → 固定pxで小さく */
  }
}

/* ========== Avatar frames (optional) ========== */
.rs-avatar-frame{
  width: 45px;
  height: 45px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rs-avatar-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.rs-avatar-normal{
  border-radius:50%;
  border:2px solid #ccc;
  background:#444;
}
.rs-avatar-premium{
  border-radius:999px;
  border:2px solid #c9a14a;
  box-shadow:0 0 6px rgba(201,161,74,0.6);
  background:#fffbe8;
}
.rs-avatar-royal{
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  background: linear-gradient(135deg, #d6b16a, #f6e1a0);
}
.rs-avatar-royal img{
  clip-path: inherit;
  background:#fff;
}

.account-btn:hover{
  background:#999;
  color:#fff;
}

/* =====================================================
   TL Post Card
   ===================================================== */
.rs-post-card{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  transition: background-color .12s ease;
}
.rs-post-card:hover{ background: rgba(0,0,0,0.04); }

.rs-post-label{
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  margin-bottom: 6px;
}

/* 2カラム：左=アイコン / 右=本文 */
.rs-post-row{
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 0;        /* 本文左端をアイコン右端に合わせるため */
  align-items: start;
}

.rs-post-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
}
.rs-post-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 本文エリア：少しだけ余白 */
.rs-post-main{
  padding-left: 10px;
  min-width: 0;
}

/* 名前行 */
.rs-post-meta-line{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.25;
  margin-top: 4px;
  margin-bottom: 6px;
}
.rs-post-userid,
.rs-post-time{
  color: rgba(0,0,0,.55);
  font-size: 0.92em;
  white-space: nowrap;
}

/* 本文 */
.rs-post-text{
  margin-top: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* =====================================================
   Images (grid 1~4)
   ===================================================== */
.rs-imggrid{
  width: 100%;
  display: grid;
  gap: 6px;
  margin-top: 8px; /* 画像は本文の下でも上でも使える */
}
.rs-imggrid img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  display: block;
}
.rs-imggrid-1{ grid-template-columns: 1fr; }
.rs-imggrid-1 .rs-img{ height: 340px; }

.rs-imggrid-2{ grid-template-columns: 1fr 1fr; }
.rs-imggrid-2 .rs-img{ height: 260px; }

.rs-imggrid-3{
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 160px 160px;
}
.rs-imggrid-3 .rs-img:nth-child(1){ grid-row:1 / span 2; height:326px; }
.rs-imggrid-3 .rs-img:nth-child(2){ grid-row:1; height:160px; }
.rs-imggrid-3 .rs-img:nth-child(3){ grid-row:2; height:160px; }

.rs-imggrid-4{
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 160px 160px;
}
.rs-imggrid-4 .rs-img{ height:160px; }

/* 5+ pager */
.rs-imgpager{
  position: relative;
  width: 100%;
  height: 340px;
  margin-top: 8px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.04);
}
.rs-imgpager img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rs-imgpager-ind{
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color:#fff;
  font-size: 12px;
}
.rs-imgpager-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.rs-imgpager-btn:hover{ background: rgba(0,0,0,0.75); }
.rs-imgpager-prev{ left: 10px; }
.rs-imgpager-next{ right: 10px; }

/* =====================================================
   Fullscreen viewer (#rsViewer)
   - 画面いっぱい contain
   ===================================================== */
.rs-viewer{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}
.rs-viewer.show{ display:block; }

.rs-viewer-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.86);
  cursor: pointer;
  z-index: 1;
}

.rs-viewer-inner{
  position:absolute;
  inset:0;
  z-index: 2;
  pointer-events: none; /* 背景クリックを通す */
}

.rs-viewer-img{
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  max-width: none;
  max-height: none;
  display: block;
  pointer-events: none;
}

.rs-viewer-close{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color:#fff;
  font-size: 22px;
  line-height: 40px;
  text-align:center;
  cursor:pointer;
  pointer-events: auto;
}
.rs-viewer-close:hover{ background: rgba(0,0,0,0.75); }

.rs-viewer-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color:#fff;
  font-size: 22px;
  line-height: 44px;
  text-align:center;
  cursor:pointer;
  pointer-events: auto;
}
.rs-viewer-nav:hover{ background: rgba(0,0,0,0.75); }
.rs-viewer-prev{ left: 12px; }
.rs-viewer-next{ right: 12px; }

.rs-viewer-ind{
  position:absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events:none;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color:#fff;
  font-size: 12px;
}

/* =====================================================
   Post action bar（ここが今回の主役）
   - アイコン歪みの原因＝多重定義を排除して完全統一
   ===================================================== */

/* 行：各ボタンの幅固定でアイコンx位置を揃える */
.rs-post-actions{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rs-action-col);
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* ボタン：横長背景は常に出さない */
.rs-action-btn{
  width: var(--rs-action-col);
  display: grid;
  grid-template-columns: var(--rs-action-icbox) auto;
  align-items: center;
  justify-content: start;

  border: 0;
  background: transparent !important;
  box-shadow: none !important;

  padding: 0;
  margin: 0;

  color: rgba(0,0,0,0.55);
  cursor: pointer;
  transition: color .12s ease, transform .06s ease;
}
.rs-action-btn:active{ transform: scale(0.98); }

/* アイコンBOX（ここに円＋maskを固定） */
.rs-action-btn .rs-ic{
  width: var(--rs-action-icbox);
  height: var(--rs-action-icbox);
  position: relative;
  display: grid;
  place-items: center;
}

/* 円形hover背景（maskの影響を受けない） */
.rs-action-btn .rs-ic::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 999px;
  background: transparent;
  transition: background-color .12s ease;
}

/* アイコン本体：maskを確実に当てる（歪み防止） */
.rs-action-btn .rs-ic::after{
  content:"";
  width: var(--rs-action-icsize);
  height: var(--rs-action-icsize);
  background: currentColor;
  display:block;

  -webkit-mask-image: var(--rs-mask);
          mask-image: var(--rs-mask);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* 数字：アイコンにくっつけて左揃え */
.rs-action-btn .rs-action-count{
  margin-left: 4px;
  justify-self: start;
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: currentColor; /* 色同期 */
  transition: color .12s ease;
}

/* --- hover配色（指定） --- */
.rs-action-btn.rs-reply:hover{ color: rgb(60, 150, 245); }
.rs-action-btn.rs-reply:hover .rs-ic::before{ background: rgba(80, 170, 255, .18); }

.rs-action-btn.rs-repost:hover{ color: rgb(35, 165, 95); }
.rs-action-btn.rs-repost:hover .rs-ic::before{ background: rgba(60, 200, 120, .18); }

.rs-action-btn.rs-like:hover{ color: rgb(235, 70, 125); }
.rs-action-btn.rs-like:hover .rs-ic::before{ background: rgba(255, 90, 140, .18); }

/* まとめていいね：円=レモン / アイコン色=オレンジ */
.rs-action-btn.rs-bulklike:hover{ color: rgb(255, 140, 0); }
.rs-action-btn.rs-bulklike:hover .rs-ic::before{ background: rgba(255, 235, 120, .38); }

/* まとめていいね：横長背景の残骸を完全に殺す */
.rs-action-btn.rs-bulklike,
.rs-action-btn.rs-bulklike:hover{
  background: transparent !important;
  border-radius: 0 !important;
}

/* いいねON状態 */
.rs-action-btn.rs-like.is-on{
  color: #e84b7a;
}

/* --- SVG masks（歪みが出ないよう “transform多用”を避けた形） --- */
.rs-action-btn.rs-reply .rs-ic{
  --rs-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H6a3 3 0 0 0-3 3v13.5a.5.5 0 0 0 .8.4L8.3 18H20a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm1 11a1 1 0 0 1-1 1H7.7L5 17.9V7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8Z'/%3E%3C/svg%3E");
}
.rs-action-btn.rs-repost .rs-ic{
  --rs-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 7h10.2L15 4.8 16.4 3.4 21 8l-4.6 4.6L15 11.2 17.2 9H7a2 2 0 0 0-2 2v2H3v-2a4 4 0 0 1 4-4Zm10 10H6.8L9 19.2 7.6 20.6 3 16l4.6-4.6L9 12.8 6.8 15H17a2 2 0 0 0 2-2v-2h2v2a4 4 0 0 1-4 4Z'/%3E%3C/svg%3E");
}
.rs-action-btn.rs-like .rs-ic{
  --rs-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.1-4.4-9.6-8.3C.4 9.2 1.6 5.9 4.8 4.7c1.8-.7 3.9-.2 5.3 1.2L12 7.8l1.9-1.9c1.4-1.4 3.5-1.9 5.3-1.2 3.2 1.2 4.4 4.5 2.4 8C19.1 16.6 12 21 12 21Z'/%3E%3C/svg%3E");
}

/* 💕（大ハートを少し細く、右上の小ハートを“外側”に、比率6:4寄り） */
.rs-action-btn.rs-bulklike .rs-ic{
  --rs-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Cpath d='M12 21s-7.1-4.4-9.6-8.3C.4 9.2 1.6 5.9 4.8 4.7c1.8-.7 3.9-.2 5.3 1.2L12 7.8l1.9-1.9c1.4-1.4 3.5-1.9 5.3-1.2 3.2 1.2 4.4 4.5 2.4 8C19.1 16.6 12 21 12 21Z' transform='matrix(0.90 0 0 1 0.6 0)'/%3E%3Cpath d='M17.7 3.2c-1 0-2 .5-2.6 1.3-.6-.8-1.6-1.3-2.6-1.3-2 0-3.6 1.6-3.6 3.6 0 2.4 2.3 4.4 5.8 6.7l.4.3.4-.3c3.5-2.3 5.8-4.3 5.8-6.7 0-2-1.6-3.6-3.6-3.6Z' transform='matrix(0.62 0 0 0.62 9.2 -0.2)'/%3E%3C/g%3E%3C/svg%3E");
}

/* =====================================================
   Like animations
   ===================================================== */
.rs-action-btn.rs-like.rs-anim-pop .rs-ic::after{
  animation: rsLikePop 220ms ease-out;
}
@keyframes rsLikePop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.22); }
  100%{ transform: scale(1); }
}
.rs-action-btn.rs-bulklike.rs-anim-pop .rs-ic::after{
  animation: rsLikePop 240ms ease-out;
}

.rs-action-btn .rs-action-count.rs-anim-bump{
  animation: rsCountBump 260ms ease-out;
}
@keyframes rsCountBump{
  0%{ transform: translateY(0) scale(1); opacity: 1; }
  40%{ transform: translateY(-2px) scale(1.08); opacity: 1; }
  100%{ transform: translateY(0) scale(1); opacity: 1; }
}

/* floating heart */
.rs-like-float{
  position: fixed;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  will-change: transform, opacity;
}
.rs-like-float::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.1-4.4-9.6-8.3C.4 9.2 1.6 5.9 4.8 4.7c1.8-.7 3.9-.2 5.3 1.2L12 7.8l1.9-1.9c1.4-1.4 3.5-1.9 5.3-1.2 3.2 1.2 4.4 4.5 2.4 8C19.1 16.6 12 21 12 21Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.1-4.4-9.6-8.3C.4 9.2 1.6 5.9 4.8 4.7c1.8-.7 3.9-.2 5.3 1.2L12 7.8l1.9-1.9c1.4-1.4 3.5-1.9 5.3-1.2 3.2 1.2 4.4 4.5 2.4 8C19.1 16.6 12 21 12 21Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.rs-like-float.rs-fly{
  animation: rsFloatUp 620ms ease-out forwards;
}
@keyframes rsFloatUp{
  0%   { opacity: 0; transform: translate(var(--x), var(--y)) scale(.85) rotate(var(--r)); }
  12%  { opacity: .95; }
  100% { opacity: 0; transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(1.15) rotate(calc(var(--r) + 22deg)); }
}

/* =====================================================
   Bulk Like Popup（最終版）
   ===================================================== */
body.rs-modal-lock{ overflow: hidden; }

.rs-bulklike-wrap{
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
}
.rs-bulklike-wrap.show{ display:block; }

.rs-bulklike-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.45);
}

.rs-bulklike-panel{
  position: fixed;
  width: 360px; /* PC: TL(600)の60% */
  max-width: calc(100vw - 24px);
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.22);
  padding: 14px 14px 12px;
  overflow: visible; /* 尻尾を切らない */
}
@media (max-width: 575.98px){
  .rs-bulklike-panel{
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
  }
}

.rs-bulklike-close{
  position:absolute;
  left: 12px;
  top: 12px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.45);
  background: #fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rs-bulklike-close:hover{ background: rgba(0,0,0,0.06); }

.rs-x-ic{
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.75);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 尻尾 */
.rs-bulklike-tail{
  position:absolute;
  width: 14px;
  height: 14px;
  left: calc(var(--tail-x, 50%) - 7px);
  background: #fff;
  transform: rotate(45deg);
  border-radius: 2px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
}
.rs-bulklike-panel.rs-tail-top .rs-bulklike-tail{ top: -7px; }
.rs-bulklike-panel.rs-tail-bottom .rs-bulklike-tail{ bottom: -7px; }

.rs-bulklike-body.rs-bulklike-body-5{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  padding-top: 54px; /* closeと重ならない */
}

/* 左ハート */
.rs-bulklike-heart{
  width: 64px;
  height: 64px;
  background: rgba(0,0,0,0.65);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.1-4.4-9.6-8.3C.4 9.2 1.6 5.9 4.8 4.7c1.8-.7 3.9-.2 5.3 1.2L12 7.8l1.9-1.9c1.4-1.4 3.5-1.9 5.3-1.2 3.2 1.2 4.4 4.5 2.4 8C19.1 16.6 12 21 12 21Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.1-4.4-9.6-8.3C.4 9.2 1.6 5.9 4.8 4.7c1.8-.7 3.9-.2 5.3 1.2L12 7.8l1.9-1.9c1.4-1.4 3.5-1.9 5.3-1.2 3.2 1.2 4.4 4.5 2.4 8C19.1 16.6 12 21 12 21Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 5桁 */
.rs-bulklike-5digits{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

/* 1桁 */
.rs-digit-col{
  position: relative;
  display: grid;
  grid-template-rows: 30px 58px 30px;
  gap: 8px;
  align-items: center;
}

/* 区切り線 */
.rs-bulklike-5digits .rs-digit-col:not(:last-child)::after{
  content:'';
  position:absolute;
  right: -5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0,0,0,0.18);
}

/* 下線 */
.rs-bulklike-5digits .rs-digit-col::before{
  content:'';
  position:absolute;
  left: 8px;
  right: 8px;
  top: 30px;
  transform: translateY(58px);
  height: 2px;
  background: rgba(0,0,0,0.55);
  border-radius: 2px;
}
.rs-bulklike-5digits .rs-digit-col:has(.rs-digit:focus)::before{
  background: rgba(13,110,253,0.9);
}

.rs-bulklike-5digits .rs-digit{
  width: 100%;
  height: 58px;
  border: 0;
  background: transparent;
  font-size: 22px;
  text-align: center;
  outline: none;
}

/* 上下ボタン */
.rs-digit-step{
  border: 0;
  background: rgba(0,0,0,0.30);
  border-radius: 8px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rs-digit-step:hover{ background: rgba(0,0,0,0.40); }
.rs-digit-step:active{ transform: scale(0.98); }

.rs-step-ic{
  width: 16px;
  height: 16px;
  background: #fff;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-position: center;
          mask-repeat: no-repeat;
          mask-size: contain;
}
.rs-step-up{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8 4 16h16z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8 4 16h16z'/%3E%3C/svg%3E");
}
.rs-step-down{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 16 4 8h16z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 16 4 8h16z'/%3E%3C/svg%3E");
}

.rs-bulklike-divider{
  height: 2px;
  background: rgba(0,0,0,0.35);
  margin: 12px 0 10px;
}
.rs-bulklike-footer{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.rs-bulklike-note{
  font-size: 12px;
  color: rgba(0,0,0,0.55);
}
.rs-bulklike-send{
  border: 0;
  background:#4a4a4a;
  color:#fff;
  font-size: 22px;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 8px;
  cursor:pointer;
}
.rs-bulklike-send:hover{ filter: brightness(1.06); }

/* =====================================================
   Book / Page / Post modal restore（必要な範囲だけ残す）
   ===================================================== */
.rs-book-menu{ position: fixed; z-index: 5000; }
.btn-book-dots{ border: 0; }

/* 未参加時の中央CTA */
.rs-empty-books-cta{ padding: 28px 18px; }
.rs-empty-books-cta-inner{
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  padding: 22px 18px;
  background: #fff;
  max-width: 520px;
  margin: 12px auto 18px;
  text-align: center;
}
.rs-empty-books-cta-title{ font-weight: 700; margin-bottom: 14px; }
.rs-empty-books-cta-buttons{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap: wrap;
}
.rs-empty-books-cta-buttons .btn{
  padding: 12px 18px;
  border-radius: 14px;
  min-width: 180px;
}

/* =====================================================
   Reply / Detail modal（既存構造に合わせる）
   ※このへんは今回の“アイコン歪み”とは無関係なので最小限
   ===================================================== */
.rs-modal{
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
}
.rs-modal.show{ display:block; }

.rs-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.rs-modal-panel{
  position: absolute;
  inset: 0;
  margin: 0 auto;
  max-width: 680px;
  background: #fff;
  height: 100%;
  overflow: auto;
  border-left: 1px solid rgba(0,0,0,.08);
  border-right: 1px solid rgba(0,0,0,.08);
}
@media (max-width: 768px){
  .rs-modal-panel{ max-width: none; }
}

.rs-modal-head{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}
.rs-modal-title{ font-weight: 700; }
.rs-modal-close{
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}

/* 返信モーダルを中央・コンパクト */
#rsReplyModal{ display:none; }
#rsReplyModal.show{ display:block; }
#rsReplyModal .rs-modal-panel{
  position: fixed !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 520px) !important;
  height: auto !important;
  max-height: 70vh !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.25) !important;
}
#rsReplyModal .rs-modal-body{
  max-height: calc(70vh - 56px) !important;
  overflow-y: auto !important;
}
@media (max-width: 768px){
  #rsReplyModal .rs-modal-panel{
    width: 94vw !important;
    max-height: 80vh !important;
  }
  #rsReplyModal .rs-modal-body{
    max-height: calc(80vh - 56px) !important;
  }
}

/* 返信UI（X風の箱） */
.rs-reply-wrap{ padding: 12px 14px 14px; }
.rs-reply-parent{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin-bottom: 10px;
}
.rs-reply-parent .rs-av,
.rs-reply-me .rs-av{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.rs-reply-parent .rs-av img,
.rs-reply-me .rs-av img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.rs-reply-parent-right{
  display:flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rs-reply-parent-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.25;
  margin: 0 !important;
  padding: 0 !important;
}
.rs-reply-parent-meta .rs-uname{ font-weight: 700; }
.rs-reply-parent-meta .rs-uid,
.rs-reply-parent-meta .rs-date{
  color: rgba(0,0,0,.55);
  font-size: 0.95em;
}
.rs-reply-parent-body{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.45;
  white-space: pre-wrap;
}
.rs-reply-to{
  margin-top: 6px;
  color: rgba(0,0,0,.55);
  font-size: 0.95em;
}

.rs-reply-me{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin-top: 14px;
}
.rs-reply-input{ margin-top: 10px; width: 100%; }
.rs-reply-input textarea{
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
  min-height: 90px;
  max-height: 220px;
  resize: vertical;
}

.rs-reply-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.rs-reply-tools{
  display:flex;
  gap: 10px;
  align-items:center;
}
.rs-tool-btn{
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  color: rgba(0,0,0,.65);
}
.rs-tool-btn:hover{ background: rgba(0,0,0,.06); }
.rs-reply-file{ display:none; }

/* =====================================================
   Discover Books ("ブックを探索") list layout
   Targets: #joinBookList / .rs-join-book-card / .rs-book-visibility
===================================================== */

/* コンテナ（idで確実に当てる） */
#joinBookList{
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* PCで余裕がある時は2カラムに（任意） */
@media (min-width: 768px){
  #joinBookList{
    grid-template-columns: 1fr 1fr;
  }
}

/* カード */
.rs-join-book-card{
  position: relative;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px 12px 12px;
  background: #fff;
  cursor: pointer;
  transition: background-color .12s ease, box-shadow .12s ease, transform .06s ease;
}

.rs-join-book-card:hover{
  background: rgba(0,0,0,.03);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.rs-join-book-card:active{
  transform: scale(0.995);
}

/* 公開/非公開バッジ（右上） */
.rs-book-visibility{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
  line-height: 1;
}

.rs-book-public{ color: #168a34; }    /* 緑 */
.rs-book-private{ color: #c73535; }   /* 赤 */

/* ブック名 */
.rs-join-book-name{
  font-weight: 800;
  margin-bottom: 4px;
  padding-right: 72px; /* バッジ分の逃げ */
  line-height: 1.25;
}

/* メタ（種別・参加者数） */
.rs-join-book-meta{
  font-size: 12px;
  color: rgba(0,0,0,.60);
}

/* 説明文（2〜3行で折りたたみ、長文でも崩れない） */
.rs-join-book-desc{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(0,0,0,.78);
  line-height: 1.45;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* スマホはバッジ逃げを少し小さく */
@media (max-width: 575.98px){
  .rs-join-book-name{ padding-right: 66px; }
}

/* =====================================================
   Discover Books: ブックを探索（1列 / 最大幅）
   home.html: #joinBookListWrap -> #joinBookList.rs-join-book-list
===================================================== */

#joinBookListWrap{
  padding: 12px 0;
}

#joinBookList.rs-join-book-list{
  width: 100%;
  max-width: 100%;
  padding: 0 12px;

  display: grid;
  grid-template-columns: 1fr; /* ★必ず1列 */
  gap: 10px;
}

.rs-join-book-card{
  position: relative;
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px 12px;
  background: #fff;
  cursor: pointer;
  transition: background-color .12s ease, box-shadow .12s ease, transform .06s ease;
}

.rs-join-book-card:hover{
  background: rgba(0,0,0,.03);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.rs-join-book-card:active{
  transform: scale(0.995);
}

.rs-book-visibility{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
  line-height: 1;
  user-select: none;
}

.rs-book-public{ color: #168a34; }
.rs-book-private{ color: #c73535; }

.rs-join-book-name{
  font-weight: 800;
  margin-bottom: 4px;
  padding-right: 78px; /* バッジ逃げ */
  line-height: 1.25;
}

.rs-join-book-meta{
  font-size: 12px;
  color: rgba(0,0,0,.60);
}


/* =====================================================
   Book / Page Create modal (bookCreateModal / pageCreateModal)
   home.html: .rs-book-modal / .rs-book-modal-head / .rs-book-x / .rs-book-body
===================================================== */

.rs-book-modal{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  overflow: hidden;
}

.rs-book-modal-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
}

.rs-book-x{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 34px;
  text-align: center;
}
.rs-book-x:hover{ background: rgba(0,0,0,.05); }

.rs-book-title{
  font-weight: 800;
  font-size: 16px;
}

.rs-book-line{
  height: 1px;
  background: rgba(0,0,0,.10);
}

.rs-book-body{
  padding: 14px 14px 16px;
}

.rs-book-label{
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color: rgba(0,0,0,.78);
}


/* =====================================================
   Book action menu ("…")
   home.html: #bookActionMenu.rs-book-menu / .rs-book-menu-item
===================================================== */

.rs-book-menu{
  position: fixed;
  min-width: 180px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  padding: 6px;
  z-index: 6000;
}

.rs-book-menu-item{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
.rs-book-menu-item:hover{
  background: rgba(0,0,0,.06);
}


/* =====================================================
   Book Join modal (bookJoinModal)
   home.html: .rs-book-dialog / .rs-book-content / .rs-book-header / .rs-book-row etc.
===================================================== */

.rs-book-dialog{
  max-width: 520px;
}

.rs-book-content{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  overflow: hidden;
}

.rs-book-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  background: #fff;
}

.rs-book-row{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.rs-book-row:last-of-type{
  border-bottom: 0;
}

.rs-book-value{
  color: rgba(0,0,0,.82);
  word-break: break-word;
}
.rs-book-desc{
  white-space: pre-wrap;
  line-height: 1.45;
}

/* private キー入力 */
.rs-join-key{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rs-keybox{
  width: 84px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: .08em;
}

.rs-keydash{
  color: rgba(0,0,0,.35);
  font-weight: 700;
}

.rs-keyhint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

.rs-book-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
}

/* ===== 詳細ビュー（TL差し替え） ===== */
.rs-detail-view{
  width: 100%;
}

.rs-detail-head{
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--rs-bg, #fff);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.rs-detail-back{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: transparent;
}

.rs-detail-back:hover{
  background: rgba(0,0,0,.05);
}

.rs-detail-title{
  font-weight: 700;
}

.rs-detail-body{
  padding-bottom: 30px;
}

/* ===== 詳細カードの見た目（アイコン巨大化を防ぐ） ===== */
.rs-post-detail-head{
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 10px;
  align-items: start;
  padding: 12px 12px 0 12px;
}

.rs-post-detail-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
}
.rs-post-detail-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rs-post-detail-body{
  padding: 10px 12px 0 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.rs-post-detail-images{
  padding: 0 12px;
}

.rs-post-detail-time{
  padding: 8px 12px 0 12px;
  color: rgba(0,0,0,.55);
  font-size: 0.92em;
}

.rs-detail-head{
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--rs-bg, #fff);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.rs-detail-back{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.rs-detail-back:hover{ background: rgba(0,0,0,.06); }
.rs-detail-title{ font-weight: 700; }

/* =========================================================
   Post Create Modal (#postModal)
   - closeボタン/プレビュー/下段レイアウト/円形ゲージを整える
   ========================================================= */

/* モーダルサイズ（スマホも崩れにくく） */
#postModal .rs-post-dialog{
  width: 100%;
  max-width: 640px;
  margin: 0.75rem auto;
}
#postModal .rs-post-content{
  border-radius: 16px;
  overflow: hidden;
}

/* ヘッダ */
#postModal .rs-post-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* ×ボタンを「デフォルトボタン」に見せない */
#postModal .rs-post-close{
  appearance: none;
  border: none;
  background: transparent;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
#postModal .rs-post-close:hover{
  background: rgba(0,0,0,0.06);
}

/* body */
#postModal .rs-post-body{
  padding: 12px;
}

/* テキストエリア */
#postModal .rs-post-textarea{
  border-radius: 12px;
  resize: vertical;
  min-height: 240px;
}

/* 区切り線 */
#postModal .rs-post-divider{
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 10px 0;
}

/* 画像プレビュー枠：はみ出し防止 */
#postModal .rs-preview-wrap{
  position: relative;
  width: 100%;
  max-height: 280px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  margin-bottom: 10px;
}

/* プレビュー画像：モーダル内に収める */
#postModal .rs-preview-img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
}

/* プレビュークリア(×)ボタンもデフォルト見えを消す */
#postModal .rs-preview-clear{
  appearance: none;
  border: none;
  background: rgba(255,255,255,0.9);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
#postModal .rs-preview-clear:hover{
  background: rgba(255,255,255,1);
}

/* 左右クリックゾーン（必要なら） */
#postModal .rs-preview-zone{
  position: absolute;
  top: 0; bottom: 0;
  width: 18%;
  z-index: 2;
}
#postModal .rs-preview-zone-left{ left: 0; }
#postModal .rs-preview-zone-right{ right: 0; }
#postModal .rs-preview-index{
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px;
}

/* 下段：ツール + ゲージ + ポストボタン */
#postModal .rs-post-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between; /* ★ポストボタンを右へ */
  gap: 10px;
}

/* 左側ツール */
#postModal .rs-post-tools{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 「謎の黒い丸」対策：円形ゲージSVGの塗りつぶしを無効化 */
#postModal .rs-post-gauge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  position: relative;
  flex: 0 0 auto;
}
#postModal .rs-gauge-svg{
  width: 34px;
  height: 34px;
  display: block;
}
#postModal .rs-gauge-bg,
#postModal .rs-gauge-arc{
  fill: none;                /* ★黒塗りつぶしを消す */
  stroke-width: 3;
  stroke-linecap: round;
}
#postModal .rs-gauge-bg{
  stroke: rgba(0,0,0,0.15);
}
#postModal .rs-gauge-arc{
  stroke: rgba(0,0,0,0.65);
}
#postModal .rs-gauge-text{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(0,0,0,0.7);
}

/* ポストボタン：右下固定っぽく見えるように */
#postModal .rs-post-submit{
  margin-left: auto;         /* ★右寄せ */
  border-radius: 999px;
  padding: 6px 14px;
}

/* 絵文字パネル（必要なら） */
#postModal .rs-emoji-panel{
  margin-top: 10px;
}

/* =========================================================
   Post Modal: Gauge + Preview Arrows (追加修正)
   ========================================================= */

/* ---------------------------
   下段レイアウト：ツール左、（ゲージ+投稿）右に寄せる
   --------------------------- */
#postModal .rs-post-bottom{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ツールは左に固定（残りは右側へ押し出す） */
#postModal .rs-post-tools{
  margin-right: auto; /* ★これで右側（ゲージ+投稿）が右に寄る */
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ゲージは投稿ボタンのすぐ左 */
#postModal .rs-post-gauge{
  margin-right: 8px;  /* 投稿ボタンとの間隔 */
  flex: 0 0 auto;
}

/* 投稿ボタンは右端（変に左に寄らないように） */
#postModal .rs-post-submit{
  margin-left: 0 !important; /* 以前の margin-left:auto などを打ち消す */
  flex: 0 0 auto;
}


/* ---------------------------
   文字数ゲージ：円が“正しく”見えるように
   ※ home_post_create.js の updateGauge() は
      strokeDashoffset を 0〜100 で動かす設計なので、
      CSS側で dasharray=100 に揃えるのがポイント
   --------------------------- */
#postModal .rs-gauge-svg{
  width: 34px;
  height: 34px;
  display: block;
}

/* 背景円・アーク共通 */
#postModal .rs-gauge-bg,
#postModal .rs-gauge-arc{
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;

  /* ★ここが重要：100ベースのゲージとして扱う */
  stroke-dasharray: 100 100;
  stroke-dashoffset: 0;

  /* 上から開始（12時方向）にする */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

#postModal .rs-gauge-bg{
  stroke: rgba(0,0,0,0.15);
}

#postModal .rs-gauge-arc{
  stroke: rgba(0,0,0,0.65);
  /* 初期状態：空（updateGaugeで 100-pct に変わる想定）
     もし初期で見えないなら下行を有効にしてもOK
     stroke-dashoffset: 100;
  */
}

/* 残り10文字以下の数字（中央） */
#postModal .rs-gauge-text{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,0.75);
  pointer-events: none;
}


/* ---------------------------
   複数画像プレビュー：＜＞ボタン見える化
   - 既に #postPreviewPrev/#postPreviewNext がクリックゾーンとして存在
   - そこに疑似要素で矢印を描画する
   --------------------------- */
#postModal .rs-preview-wrap{
  position: relative;
}

/* クリックゾーン（左右） */
#postModal .rs-preview-zone{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

/* 矢印の見た目 */
#postModal .rs-preview-zone::before{
  content: '';
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: rgba(0,0,0,0.75);
  opacity: 0;                 /* 通常は薄く（邪魔にならない） */
  transition: opacity .15s ease;
}

/* 左右の矢印文字 */
#postModal .rs-preview-zone-left::before{ content: '＜'; }
#postModal .rs-preview-zone-right::before{ content: '＞'; }

/* ホバー時に表示（PC） */
@media (hover:hover){
  #postModal .rs-preview-wrap:hover .rs-preview-zone::before{
    opacity: 1;
  }
}

/* タップ環境（スマホ）は常に表示寄りに */
@media (hover:none){
  #postModal .rs-preview-zone::before{
    opacity: 0.85;
    pointer-events: none;  /* ★矢印丸はクリックを受けず、親divに通す */
  }
}

/* プレビュー自体が非表示の時だけクリック無効（ゾーン側の aria-hidden は信頼しない） */
#postModal .rs-preview-wrap[aria-hidden="true"] .rs-preview-zone{
  pointer-events: none;
}

/* =========================================================
   Reply Modal Preview UI (rsReplyModal)
   - postModal と同じプレビューUIを返信にも適用
   ========================================================= */

#rsReplyModal .rs-reply-preview-wrap{
  position: relative;
  width: 100%;
  max-height: 280px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  margin-top: 10px;
}

#rsReplyModal .rs-preview-img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
}

/* クリア× */
#rsReplyModal .rs-preview-clear{
  appearance: none;
  border: none;
  background: rgba(255,255,255,0.9);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
#rsReplyModal .rs-preview-clear:hover{
  background: rgba(255,255,255,1);
}

/* 左右クリックゾーン */
#rsReplyModal .rs-preview-zone{
  position: absolute;
  top: 0; bottom: 0;
  width: 18%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
#rsReplyModal .rs-preview-zone-left{ left: 0; }
#rsReplyModal .rs-preview-zone-right{ right: 0; }

/* ＜＞の丸 */
#rsReplyModal .rs-preview-zone::before{
  content: '';
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: rgba(0,0,0,0.75);
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none; /* ★クリックは親divに通す */
}
#rsReplyModal .rs-preview-zone-left::before{ content: '＜'; }
#rsReplyModal .rs-preview-zone-right::before{ content: '＞'; }

@media (hover:hover){
  #rsReplyModal .rs-reply-preview-wrap:hover .rs-preview-zone::before{
    opacity: 1;
  }
}
@media (hover:none){
  #rsReplyModal .rs-preview-zone::before{
    opacity: 0.85;
  }
}

/* 枚数バッジ */
#rsReplyModal .rs-preview-index{
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px;
}

/* =========================================================
   Post Modal: プレビューと本文の位置を入れ替える
   （本文 → 画像プレビュー → 区切り → 下段）
   ========================================================= */

#postModal .rs-post-body{
  display: flex;
  flex-direction: column;
}

/* 本文を上に */
#postModal #postText{
  order: 1;
}

/* プレビューを本文の下に */
#postModal #postPreviewWrap{
  order: 2;
  margin-top: 10px;     /* 上に余白（本文との間） */
  margin-bottom: 10px;  /* 下に余白（区切り線との間） */
}

/* 区切り線はその下 */
#postModal .rs-post-divider{
  order: 3;
}

/* 下段（絵文字/画像/ゲージ/ポストする）は一番下 */
#postModal .rs-post-bottom{
  order: 4;
}


/* =========================
   SP Header Menu (Dropdown)
   ========================= */
.rs-spmenu{
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(0,0,0,.25);
}
.rs-spmenu-panel{
  width: 100%;
  background: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  overflow: hidden;
}
.rs-spmenu-head{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.rs-spmenu-title{
  font-weight: 800;
  flex: 1;
  text-align: center;
}
.rs-spmenu-back,
.rs-spmenu-close{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  cursor: pointer;
}
.rs-spmenu-back:hover,
.rs-spmenu-close:hover{ background: rgba(0,0,0,.05); }

.rs-spmenu-body{
  padding: 10px 12px 14px;
}
.rs-spmenu-item{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  border-radius: 14px;
  padding: 12px 12px;
  margin-bottom: 10px;
  cursor: pointer;
}
.rs-spmenu-item:active{ transform: scale(0.995); }

.rs-spmenu-item-top{ font-weight: 800; }
.rs-spmenu-item-sub{ font-size: 12px; color: rgba(0,0,0,.60); margin-top: 4px; }

.rs-spmenu-hr{
  height: 1px;
  background: rgba(0,0,0,.12);
  margin: 10px 0;
}
.rs-spmenu-row{
  display:flex;
  gap: 8px;
  align-items:center;
  margin-bottom: 10px;
}
.rs-spmenu-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.rs-spmenu-section{
  font-size: 12px;
  color: rgba(0,0,0,.60);
  font-weight: 800;
  margin: 6px 2px 8px;
}

/* =========================
   SP FAB
   ========================= */
.rs-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 15000;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 0;
  background: #4a4a4a;
  color: #fff;
  font-size: 34px;
  line-height: 56px;
  text-align: center;
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
}
.rs-fab:active{ transform: scale(0.98); }

/* =========================
   SP header tap area
   - モバイル上部ナビの「ヘッダ全体タップ」を成立させる
   ========================= */
@media (max-width: 991.98px){
  /* home.html の d-lg-none ヘッダを “全体ボタン化” したいので pointer を確保 */
  #scopeTitle_sp{
    user-select: none;
  }
}

/* =========================
   SP用 文字サイズ最適化（X風）
   ========================= */
@media (max-width: 576px){

  /* 投稿カード全体 */
  .rs-post-card{
    font-size: 15px;              /* 基準文字サイズ */
    line-height: 1.55;
  }

  /* ユーザ名 */
  .rs-post-username{
    font-size: 15px;
    font-weight: 700;
  }

  /* @userid */
  .rs-post-userid{
    font-size: 13px;
    color: rgba(0,0,0,.55);
  }

  /* 投稿日時 */
  .rs-post-time{
    font-size: 12px;
    color: rgba(0,0,0,.45);
  }

  /* 本文 */
  .rs-post-body{
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: .01em;
  }

  /* リプライ・いいね数など */
  .rs-post-action span,
  .rs-post-action button{
    font-size: 13px;
  }

  /* 詳細表示（ポスト詳細） */
  .rs-post-detail-body{
    font-size: 16px;
    line-height: 1.65;
  }

  /* 詳細のユーザ名 */
  .rs-post-detail-username{
    font-size: 16px;
    font-weight: 800;
  }

  /* 詳細の @userid */
  .rs-post-detail-userid{
    font-size: 13px;
    color: rgba(0,0,0,.55);
  }
}

/* =========================
   SPメニュー：文字サイズとボタン位置の調整
   ========================= */
@media (max-width: 576px){

  /* メニュー全体の基準フォントを固定（ここで巨大化を抑える） */
  .rs-spmenu-panel{
    font-size: 14px;
  }

  /* 上部タイトル「メニュー」 */
  .rs-spmenu-title{
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
  }

  /* 「×」「＜」ボタンの位置ズレ対策：中身を完全センタリング */
  .rs-spmenu-back,
  .rs-spmenu-close{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
  }
  .rs-spmenu-close{ font-size: 24px; } /* × */
  .rs-spmenu-back{  font-size: 20px; } /* ＜ */

  /* メイン：タイムライン / ブック選択 / ページ名 の文字を小さく */
  .rs-spmenu-item-top{
    font-size: 16px;       /* でか過ぎたので抑える */
    font-weight: 800;
    line-height: 1.25;
  }
  .rs-spmenu-item-sub{
    font-size: 12px;
    line-height: 1.2;
  }

  /* ページ一覧（（ページ名）） */
  #spPageList .rs-spmenu-item .rs-spmenu-item-top{
    font-size: 15px;
    font-weight: 700;
  }

  /* ブック選択：ブック名と「ブックを探索」を小さく */
  #spJoinedBookList .rs-spmenu-item .rs-spmenu-item-top{
    font-size: 15px;
    font-weight: 700;
  }
  #spOpenDiscover{
    font-size: 14px;       /* 「ブックを探索」ボタン全体 */
  }
  #spOpenDiscover .rs-spmenu-item-top{
    font-size: 15px;
    font-weight: 700;
  }

  /* ブック探索：ブック名の文字を小さく */
  #spDiscoverList .rs-spmenu-item .rs-spmenu-item-top{
    font-size: 15px;
    font-weight: 700;
  }
  #spDiscoverList .rs-spmenu-item .rs-spmenu-item-sub{
    font-size: 12px;
  }

  /* 入力と作成ボタンのバランス */
  .rs-spmenu-row .form-control{
    font-size: 14px;
  }
  .rs-spmenu-row .btn{
    font-size: 13px;
    padding: 8px 10px;     /* 縦にデカくなりすぎないように */
  }
}

/* =========================
   SP: TLヘッダ（タイトル省略… + 右端≡）
   ========================= */
@media (max-width: 991.98px){

  /* ヘッダ全体：タップできる雰囲気 */
  .rs-spheader .rs-spheader-hit{
    cursor: pointer;
    user-select: none;
  }

  /* タイトル：小さく + 1行 + はみ出し… */
  #scopeTitle_sp.rs-spheader-title{
    font-size: 13px;
    line-height: 1.2;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 戻るボタンが出ても潰れないように */
    min-width: 0;
  }

  /* 右端：≡ボタン（ハンバーガー） */
  .rs-spheader-menubtn{
    appearance: none;
    border: 1px solid rgba(0,0,0,.18);
    background: #fff;

    width: 40px;
    height: 40px;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
    line-height: 1;
    padding: 0;

    cursor: pointer;
  }
  .rs-spheader-menubtn:active{ transform: scale(0.98); }
}

/* =========================
   ポストカード「…」メニュー
   ========================= */

.rs-post-more{
  position: absolute;
  top: 6px;
  right: 6px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
  color: rgba(0,0,0,.6);
}

.rs-post-more-menu{
  position: absolute;
  z-index: 20000;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 6px;
  min-width: 140px;
}

.rs-post-more-item{
  width: 100%;
  border: 0;
  background: none;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}

.rs-post-more-item:hover{
  background: rgba(0,0,0,.05);
}

/* 削除（赤） */
.rs-post-delete{
  color: #d93025;
  font-weight: 700;
}


/* =========================
   ポストカード右上「…」強制表示（SP/PC共通）
   ========================= */
.rs-post-card{
  position: relative;     /* absolute の基準 */
  overflow: visible;      /* ←これ重要。hidden だとメニューや…が切れる */
}

.rs-post-more{
  position: absolute;
  top: 6px;
  right: 6px;

  z-index: 50;            /* ←他要素に負けない */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  border-radius: 999px;

  /*border: 1px solid rgba(0,0,0,.12);*/
  border:0px;
  background: rgba(255,255,255,.92);  /* 白背景で埋もれ防止 */
  color: rgba(0,0,0,.65);

  font-size: 22px;
  line-height: 1;
  padding: 0;
  cursor: pointer;

  pointer-events: auto;   /* 念のため */
}

.rs-post-more:active{
  transform: scale(0.98);
}

/* 三点メニューもカード外に出ても切れないように */
.rs-post-more-menu{
  z-index: 20050;
}

.rs-post-detail{ position: relative; }

@media (max-width: 991.98px){
  #btnMainTL_sp{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: 0px solid rgba(0,0,0,.15);
    border-radius: 10px;
    background: #fff;
    font-size: 22px;
    line-height: 1;
    padding: 0;
  }
}