/* Gravity API Bridge Styles */

.gravity-api-form-container {
    max-width: 600px;
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.gravity-api-form-container h3 {
    color: #23282d;
    margin-bottom: 15px;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
}

.gravity-api-form-container form {
    background: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gravity-api-form-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.gravity-api-form-container input[type="url"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.gravity-api-form-container input[type="url"]:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.3);
}

.gravity-api-form-container input[type="submit"] {
    background: #0073aa;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.gravity-api-form-container input[type="submit"]:hover {
    background: #005a87;
}

.gravity-api-form-container input[type="submit"]:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.gravity-api-result {
    border: 1px solid #ddd;
    padding: 15px;
    background: #fff;
    margin: 15px 0;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gravity-api-result b {
    color: #0073aa;
    display: inline-block;
    min-width: 80px;
}

.gravity-api-results-multiple {
    margin: 20px 0;
}

.gravity-api-results-multiple h3 {
    color: #23282d;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
}

.gravity-api-result-item {
    border: 1px solid #ddd;
    margin: 10px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 5px;
    position: relative;
}

.gravity-api-result-item h4 {
    margin: 0 0 10px 0;
    color: #0073aa;
    font-size: 16px;
}

.gravity-api-error {
    background: #fff2f2;
    border: 1px solid #dc3232;
    color: #dc3232;
    padding: 15px;
    border-radius: 5px;
    margin: 15px 0;
}

.gravity-api-form-result {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.gravity-api-form-result h4 {
    color: #0073aa;
    margin-bottom: 10px;
}

/* 管理画面用のスタイル */
.wrap .gravity-api-result {
    max-width: 100%;
}

.wrap code {
    background: #f1f1f1;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: Consolas, Monaco, monospace;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .gravity-api-form-container {
        max-width: 100%;
        margin: 10px 0;
    }
    
    .gravity-api-form-container form {
        padding: 15px;
    }
    
    .gravity-api-result,
    .gravity-api-result-item {
        padding: 10px;
    }
    
    .gravity-api-result b {
        display: block;
        margin-bottom: 5px;
    }
}

/* アニメーション */
.gravity-api-result,
    /* --- Slider media square layout --- */
    .grv-slide__post-images { display:grid; grid-template-columns: repeat(2, 1fr); gap:6px; }
    .grv-slide__post-images img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; }
    .grv-slide__avatar { border-radius:8px; object-fit:cover; }
.gravity-api-result-item {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* カードUI */
.gravity-api-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  margin: 16px 0;
  box-sizing: border-box;
}

.gravity-api-card__index {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #555;
}

.gravity-api-card__body {
  grid-column: 2;
}

.gravity-api-card__meta {
  color: #888;
  font-size: 12px;
  margin-bottom: 6px;
}

.gravity-api-card__user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #333;
}

.gravity-api-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.gravity-api-card__content {
  margin: 0 0 8px;
  line-height: 1.6;
  color: #222;
}

.gravity-api-card__images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 6px 0 8px;
}
.gravity-api-card__images img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    background: #f2f2f2;
}

/* サムネイル画像（今後非推奨）：正方形に統一 */
.gravity-api-card__thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}

.gravity-api-card__link a {
  color: #0073aa;
  text-decoration: underline;
}

.gravity-api-card__stats {
  display: flex;
  gap: 12px;
  color: #666;
  font-size: 12px;
}

/* 投票フォーム */
.gravity-nominee-form-container form input[type="text"],
.gravity-nominee-form-container form textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 3px; }

.grv-avatar{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
  background: #eee;
  flex: 0 0 28px;
}

.grv-user-badge { display: inline-flex; align-items: center; gap: 8px; }
.grv-username { font-weight: 600; color: #333; }

.grv-stats { border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; padding: 12px; margin: 12px 0; }
.grv-stats__header { font-weight: 600; margin-bottom: 8px; color: #333; }
.grv-stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.grv-stat { transition: background-color .2s ease, transform .1s ease; }
.grv-stat:hover { background:#f4f7fb; transform: translateY(-1px); }
.grv-stat { background: #fafafa; border: 1px solid #f0f0f0; border-radius: 6px; padding: 10px; }
.grv-stat__label { color: #666; font-size: 12px; margin-bottom: 4px; }
.grv-stat__value { color: #111; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Ajax 結果の領域 */
.gravity-api-ajax-result {
  margin-top: 12px;
}

/* 投票 UI */
.grv-rec { border: 1px solid #eaeaea; border-radius: 10px; background: #fff; padding: 12px; margin: 16px 0; }
.grv-rec__title { margin: 0 0 6px; }
.grv-rec__header { color: #555; margin-bottom: 8px; }
.grv-rec__quota { font-weight: 700; color: #111; }
.grv-rec__form { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; }
.grv-rec__form--confirm { background: #fff; }
.grv-rec__step { display: inline-block; font-size: 12px; color: #555; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 2px 8px; margin-bottom: 6px; }
.grv-rec__intro { color: #444; margin-bottom: 10px; }
.grv-rec__section { margin: 12px 0; }
.grv-sec__title { font-weight: 700; color: #222; margin-bottom: 6px; }
.grv-rec__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.grv-field { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 6px; background:#fff; border:1px solid #eee; border-radius:6px; padding:8px; }
.grv-field__label { color: #666; font-size: 12px; }
.grv-field__input { width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; }
.grv-rec__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.grv-btn { appearance: none; border: none; border-radius: 6px; padding: 10px 16px; cursor: pointer; font-weight: 700; }
.grv-btn--primary { background: #0073aa; color: #fff; }
.grv-btn--primary:disabled { background: #9ca3af; cursor: not-allowed; }

/* 候補オプション */
.grv-rec__options { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.grv-rec-option { border: 1px solid #eee; border-radius: 8px; background: #fff; padding: 8px; }
.grv-rec-option label { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; }
.grv-rec-option input[type="radio"] { accent-color: #0073aa; }
.grv-rec-option__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #f1f1f1; display:inline-block; text-align:center; line-height:36px; font-weight:700; color:#666; }
.grv-rec-option__avatar--fallback { background:#efefef; }
.grv-rec-option__meta { display:flex; flex-direction: column; }
.grv-rec-option__name { font-weight: 700; color: #111; }
.grv-rec-option__stats { color: #666; font-size: 12px; }

@media (max-width: 640px) {
    .grv-rec__grid { grid-template-columns: 1fr; }
    .grv-field { grid-template-columns: 1fr; }
    .grv-rec__actions { justify-content: stretch; }
}

/* 話題のユーザー（ランキング） */
.grv-trending {
  border: 1px solid #eaeaea;
  border-radius: 10px;
  background: #fff;
  /* 左側の余白を詰める */
  padding: 12px 12px 12px 8px;
  margin: 16px 0;
}
.grv-trending__header {
    font-weight: 700;
    color: #222;
    padding: 6px 8px 10px;
    border-bottom: 2px solid #f3f3f3;
}
.grv-trending__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.grv-trending__item {
  display: grid;
  /* ランク列を内容幅に合わせて自動化し無駄なスペースを削減 */
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  /* 左パディングを削減 */
  padding: 10px 6px 10px 0;
  border-bottom: 1px dashed #eee;
}
.grv-trending__item:last-child { border-bottom: none; }
.grv-trending__rank {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #444;
}
.grv-trending__user { display: flex; align-items: center; gap: 10px; }
.grv-trending__link { display: inline-flex; align-items: center; gap: 10px; }

/* ログイン誘導ヒント */
.grv-login-hint { background: #f8fafc; border: 1px solid #e2e8f0; padding: 12px; border-radius: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grv-login-hint__text { color: #334155; font-size: 14px; }
.grv-login-hint__btn { text-decoration: none; }
.grv-trending__avatar { border-radius: 50%; object-fit: cover; background: #f1f1f1; }
.grv-trending__avatar.fallback { display:flex; align-items:center; justify-content:center; border-radius:50%; background:#efefef; color:#777; font-weight:700; }
.grv-trending__name { font-weight: 700; color: #111; }
.grv-trending__stats { color: #666; font-size: 12px; margin-top: 2px; }
.grv-trending__footer { grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top: 6px; }
.grv-trending__actions { display:flex; gap:8px; align-items:center; }
.grv-inline-note[hidden]{ display:none !important; }
.grv-inline-note, .grv-inline-note * { writing-mode: horizontal-tb !important; }
.grv-inline-note { display:block; margin:8px 0 0 0; max-height:none; overflow:visible; }
.grv-note__form{ max-height:none; overflow:visible; }
.grv-note__form textarea{ width:100%; min-height:80px; }
.grv-quick-vote { margin-left:6px; background:#10b981; color:#fff; border:none; border-radius:4px; font-size:12px; padding:5px 10px; cursor:pointer; font-weight:600; line-height:1; letter-spacing:.5px; }
.grv-quick-vote:hover { background:#059669; }
.grv-quick-vote:disabled { background:#9ca3af; cursor:not-allowed; }
.grv-top1 .grv-trending__rank { background: #ffeaa7; color: #6d4c41; }
.grv-top2 .grv-trending__rank { background: #dfe6e9; color: #2d3436; }
.grv-top3 .grv-trending__rank { background: #fab1a0; color: #6d4c41; }

/* スライダー */
.grv-slider{position:relative;margin:16px 0;padding:12px;border:1px solid #e5e5e5;background:#fff;border-radius:8px;overflow:hidden}
.grv-slider__header{font-weight:600;margin-bottom:8px}
.grv-slider__viewport{position:relative;min-height:140px;--grv-nav-size:48px;--grv-nav-gap:16px;padding:0 calc(var(--grv-nav-size) + var(--grv-nav-gap));}
@media (max-width:640px){
    .grv-slider__viewport{--grv-nav-size:56px;--grv-nav-gap:12px;}
}
.grv-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;display:flex;align-items:center;justify-content:center;padding:8px;pointer-events:none;visibility:hidden}
.grv-slide.is-active{opacity:1;position:relative;pointer-events:auto;visibility:visible;z-index:2}
.grv-slide__inner{display:flex;flex-direction:column;gap:8px;align-items:flex-start;max-width:720px;width:100%}
.grv-slide__user{display:flex;gap:10px;align-items:center}
.grv-slide__avatar{border-radius:50%;background:#f2f2f2;object-fit:cover}
.grv-slide__avatar--fallback{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#f2f2f2;color:#555;font-weight:600}
.grv-slide__meta{display:flex;flex-direction:column}
.grv-slide__name{font-size:16px;font-weight:600}
.grv-slide__rec{font-size:12px;color:#666}
.grv-slide__rec .grv-quick-vote{margin-left:8px;}
.grv-slide__post{font-size:14px;line-height:1.6;background:#fafafa;border:1px solid #eee;border-radius:6px;padding:10px;width:100%}
.grv-slide__post-image{margin-bottom:8px}
.grv-slide__post-image img{width:100%;max-height:280px;object-fit:cover;border-radius:6px;background:#f2f2f2}
.grv-slide__post a{color:#0073aa;text-decoration:none}
.grv-slide__post a:hover{text-decoration:underline}
.grv-slider__controls{position:absolute;inset-block:0;inset-inline:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;padding:0;}
/* ナビゲーションボタン: モバイルでも押しやすい最小44px角以上に拡大 */
.grv-slider__controls .grv-prev,.grv-slider__controls .grv-next{pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;user-select:none;border:none;background:rgba(0,0,0,.42);color:#fff;border-radius:50%;width:48px;height:48px;line-height:48px;text-align:center;cursor:pointer;font-size:20px;font-weight:600;position:relative;transition:background .18s ease,transform .18s ease,opacity .18s ease;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.grv-slider__controls .grv-prev{margin-left:8px;transform:translateX(calc(-50% + 4px));}
.grv-slider__controls .grv-next{margin-right:8px;transform:translateX(calc(50% - 4px));}
/* クリックしやすい余白（ヒットスロップ）: 実際の視覚サイズは維持しつつ当たり判定拡大 */
.grv-slider__controls .grv-prev::before,.grv-slider__controls .grv-next::before{content:"";position:absolute;inset:-8px;-webkit-user-select:none;user-select:none}
.grv-slider__controls .grv-prev:hover,.grv-slider__controls .grv-next:hover{background:rgba(0,0,0,.55)}
.grv-slider__controls .grv-prev:focus-visible,.grv-slider__controls .grv-next:focus-visible{outline:3px solid #fff;outline-offset:2px;background:rgba(0,0,0,.65)}
.grv-slider__controls .grv-prev:active,.grv-slider__controls .grv-next:active{transform:scale(.9);background:rgba(0,0,0,.65)}
/* 小さい画面ではもう少し大きく */
@media (max-width:640px){
    .grv-slider__controls .grv-prev,.grv-slider__controls .grv-next{width:56px;height:56px;line-height:56px;font-size:22px}
    .grv-slider__controls .grv-prev{transform:translateX(calc(-50% + 2px));}
    .grv-slider__controls .grv-next{transform:translateX(calc(50% - 2px));}
}
/* Safari iOS での一時的なタップ遅延回避 */
.grv-slider__controls .grv-prev:active,.grv-slider__controls .grv-next:active{opacity:.9}
.grv-slider__dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.grv-slider__dots button{width:8px;height:8px;border-radius:50%;border:none;background:#ccc;cursor:pointer}
.grv-slider__dots button.is-active{background:#0073aa}
@media (max-width:480px){.grv-slide__inner{max-width:100%}.grv-slide__post{font-size:13px}}

/* スライダー全体：高さ変化のアニメ抑制＆あふれ防止 */
.grv-trending-slider {
  position: relative;
  overflow: hidden;
  /* 任意の既定値。JSで最大高に上書きされます */
  min-height: var(--grv-slider-min-height, 320px);
  transition: height .25s ease, min-height .25s ease;
}

/* メディア領域の比率を固定（画像読み込み前から高さを確保） */
.grv-trending-slider .grv-slide__media {
  aspect-ratio: 16 / 9;        /* 必要に応じて 4/3 や 1/1 に変更 */
  overflow: hidden;
}
.grv-trending-slider .grv-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* はみ出す部分はトリミング */
}

/* テキストは行数で揃える（長文で高さが暴れないように） */
.grv-trending-slider .grv-slide__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--grv-slider-lines, 3); /* 2〜4に調整 */
    line-clamp: var(--grv-slider-lines, 3);
  overflow: hidden;
}

/* 計測時に一時的に可視化するためのスタイル（JSが付与） */
.grv-trending-slider .grv-slide[data-measuring] {
  position: absolute;
  visibility: hidden;
  inset: 0;
  display: block !important;
}

/* 行数制御（本文） */
.grv-trending-slider .grv-slide__post-content {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: var(--grv-slider-lines, 5);
    line-clamp: var(--grv-slider-lines, 5);
    overflow:hidden;
}

/* スライダー準備中は不可視（高さだけ確保） */
.grv-trending-slider.is-preparing {
  opacity: 0;
  visibility: hidden;
}
.grv-trending-slider.is-ready {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

/* ===== ひとこと文スライダー（ランキング内） ===== */
.grv-recslider{grid-column:2 / -1; margin:8px 0 4px 0}
.grv-recslider__viewport{position:relative;overflow:hidden}
.grv-recslide{display:none}
.grv-recslide.is-active{display:block}
.grv-recslide__inner{display:flex;align-items:flex-start;gap:8px}
.grv-recslide__inner{width:100%;}
.grv-recslide__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#f3f4f6;flex:0 0 auto}
.grv-recslide__avatar--fallback{display:inline-flex;width:32px;height:32px;border-radius:50%;background:#e5e7eb;align-items:center;justify-content:center;font-size:16px}
.grv-recslide__bubble{position:relative;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;max-width:min(680px, calc(100% - 48px));box-sizing:border-box;min-width:0;word-break:break-word;overflow-wrap:anywhere}
.grv-recslide__bubble::after{content:"";position:absolute;left:-6px;top:10px;border-width:6px;border-style:solid;border-color:transparent #e5e7eb transparent transparent}
.grv-recslide__bubble::before{content:"";position:absolute;left:-5px;top:10px;border-width:6px;border-style:solid;border-color:transparent #f8fafc transparent transparent}
.grv-recslide__text{font-size:14px;line-height:20px;color:#111;display:block;max-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grv-recslide__text.is-expanded{white-space:normal;max-height:none;overflow:visible}
.grv-recslide__reactions{margin-top:8px;display:flex;gap:8px}
.grv-recslide__reactions .grv-react{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:4px 8px;font-size:12px;cursor:pointer;color:#374151}
.grv-recslide__reactions .grv-react.is-active{background:#111827;color:#fff;border-color:#111827}
.grv-rmore{margin:6px 0 0 0;background:none;border:none;color:#2563eb;cursor:pointer;font-size:12px;padding:2px 4px}
/* ひとこと文を表示する（折りたたみ解除）ボタン */
.grv-rshow{margin:6px 0 0 0;padding:6px 10px;font-size:12px;line-height:1.2;color:#374151;background:#fff;border:1px solid #e5e7eb;border-radius:9999px;cursor:pointer;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease}
.grv-rshow:hover{background:#f9fafb;border-color:#d1d5db}
.grv-rshow:focus{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.15);border-color:#93c5fd}
.grv-recslider__controls{display:flex;gap:6px;margin-top:6px;margin-left:0}
.grv-recslider__controls .grv-rprev,.grv-recslider__controls .grv-rnext{background:#fff;border:1px solid #ddd;border-radius:6px;padding:2px 8px;cursor:pointer}
.grv-recslider__controls .grv-rprev:hover,.grv-recslider__controls .grv-rnext:hover{background:#f3f4f6}
.grv-recslider__more{margin:6px 0 0 0;background:none;border:none;color:#2563eb;cursor:pointer}
.grv-recslider__morelist{margin:6px 0 0 0;padding:0;list-style:none}
.grv-recslider__moreitem{margin:4px 0;color:#111;font-size:13px;line-height:1.6}
.grv-recslider__bullet{display:inline-block;width:1em;color:#9ca3af}
.grv-recslider__empty{margin:6px 0 0 0;color:#6b7280;font-size:13px}

/* ランキング内 ひとことフォーム: ひとこと文（.grv-recslider）の下、2列目に表示 */
.grv-trending__item { position: relative; }
.grv-trending__item .grv-inline-note{
  grid-column: 2 / -1;
  margin-top: 6px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  z-index: 0; /* バブル等と重なっても下に潜らないようにベース化 */
}
.grv-trending__item .grv-recslider + .grv-inline-note { margin-top: 8px; }
.grv-trending__item .grv-note__form textarea { width: 100%; }

/* 横書きの明示（テーマの縦書き干渉を防ぐ） */
.grv-rec, .grv-recs, .grv-recs *,
.grv-recslider, .grv-recslider * {
  writing-mode: horizontal-tb;
}

/* 追加: ランキング内のインラインひとことフォームも横書きを絶対化 */
.grv-inline-note,
.grv-inline-note *,
.grv-note__form,
.grv-note__form * {
  writing-mode: horizontal-tb !important;
}

/* 追加: hidden 属性の互換（テーマのresetに負けないように） */
.grv-inline-note[hidden] {
  display: none !important;
}

/* ひとことフォームの表示領域は制限しない */
.grv-inline-note, .grv-note__form {
  max-height: none;
  overflow: visible;
}

/* 「ひとことする」ボタンのデザインを投票に揃える */
.grv-open-note{
    margin-left:6px; background:#10b981; color:#fff; border:none; border-radius:4px; font-size:12px; padding:5px 10px; cursor:pointer; font-weight:600; line-height:1; letter-spacing:.5px;
}
.grv-open-note:hover{ background:#059669; }

/* ===== スマホ最適化: ランキングの名前の後で改行 ===== */
@media (max-width: 640px) {
  .grv-trending__user {
    display: grid;
    grid-template-columns: auto 1fr; /* アイコン + テキスト */
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
  }
  /* 統計を2列目（名前の下）に配置して、名前の後で改行させる */
  .grv-trending__user > .grv-trending__stats {
    grid-column: 2 / -1;
    margin-top: 0;
  }
  /* フッターはモバイルで縦積み */
  .grv-trending__footer { flex-direction: column; align-items: flex-start; gap:6px; }
}
.grv-open-note:disabled{ background:#9ca3af; cursor:not-allowed; }

/* ===== ひとこと文一覧（[gravity_recommendations]） ===== */
.grv-recs{border:1px solid #e5e7eb;background:#fff;border-radius:12px;padding:14px;margin:16px 0}
.grv-recs__header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.grv-recs__avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#f3f4f6}
.grv-recs__title{font-weight:700;color:#111;font-size:16px}
.grv-recs__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.grv-rec-item{border:1px solid #eef2f7;background:#fafbff;border-radius:10px;padding:12px}
.grv-rec-item__body{display:flex;flex-direction:column;gap:8px}
.grv-rec-item__content{color:#111;line-height:1.75;font-size:14px}
.grv-rec-item__meta{display:flex;align-items:center;gap:10px;justify-content:space-between}
.grv-reactions{display:flex;align-items:center;gap:8px}
.grv-react{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:6px 10px;font-size:13px;cursor:pointer;color:#374151}
.grv-react.is-active{background:#111827;color:#fff;border-color:#111827}
.grv-badge{display:inline-block;background:#f59e0b;color:#111;font-size:12px;border-radius:6px;padding:2px 6px}
.grv-rec-item.is-collapsed .grv-rec-item__content{opacity:.75;filter:grayscale(.1)}
@media (max-width: 640px){
  .grv-recs{padding:12px}
  .grv-rec-item{padding:10px}
}

/* ===== モバイル最適化の追加上書き ===== */
@media (max-width: 640px){
  /* ひとこと文: 1行省略から2行クランプに変更（見切れ解消） */
  .grv-recslide__text{
    white-space: normal;               /* 1行固定を解除 */
    display: -webkit-box;              /* マルチライン省略 */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;             /* 必要に応じて 3 に変更可 */
    line-clamp: 2;
    max-height: calc(20px * 2);        /* 行高(20px)×行数 */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 展開時は制限を解除（既存の .is-expanded ルールを再強化） */
  .grv-recslide__text.is-expanded{
    display: block;
    max-height: none;
    overflow: visible;
  }

  /* ランキングの左余白を詰める（テーマ側の ul スタイルに勝つ） */
  .grv-trending{ padding-left: 4px; }
  .grv-trending__list{
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .grv-trending__item{ padding-left: 0; }
}