/* Gravity API Bridge Styles */

/* テーマのmain要素の横パディングを無効化（モバイル対応） */
@media screen and (max-width: 834px) {
    main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.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 更新ボタンとコンテナ */
.gravity-api-wrapper {
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    background: #fff;
    padding: 16px;
    margin: 16px 0;
    position: relative;
}

.gravity-api-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.gravity-api-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.gravity-api-refresh {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gravity-api-refresh::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.gravity-api-refresh:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.gravity-api-refresh:hover::before {
    left: 100%;
}

.gravity-api-refresh:active {
    transform: translateY(0);
}

.gravity-api-refresh:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.gravity-api-refresh:disabled::before {
    display: none;
}

.gravity-api-refresh-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.gravity-api-refresh.loading .gravity-api-refresh-icon {
    animation: spin 1s linear infinite;
}

.gravity-api-content {
    min-height: 80px;
    position: relative;
}

.gravity-api-content.loading {
    opacity: 0.6;
    pointer-events: none;
}

.gravity-api-loading-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.gravity-api-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e5e5;
    border-top: 2px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.gravity-api-last-updated {
    font-size: 12px;
    color: #888;
    text-align: right;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
    .gravity-api-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .gravity-api-refresh {
        justify-content: center;
        width: 100%;
    }
}

/* アニメーション */
.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; width: 100%; }
.grv-trending__link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }

/* ログイン誘導ヒント */
.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: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .grv-trending__link {
    flex: 1 1 auto;
    min-width: 0;
  }
  .grv-user-wishlist-container {
    margin-left: auto;
    margin-top: 0;
    align-self: center;
  }
  .grv-user-wishlist .grv-wishlist-link {
    justify-content: center;
  }
  /* フッターはモバイルで縦積み */
  .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;
  }
}

/* ===== Amazonほしい物リスト機能のスタイル ===== */
.grv-wishlist-form-container {
  max-width: 600px;
  margin: 24px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.grv-wishlist-form-header h3 {
  color: #111827;
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 10px;
}

.grv-wishlist-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.grv-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grv-form-group label {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.grv-form-group input,
.grv-form-group select {
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
  background: #fff;
}

.grv-form-group input:focus,
.grv-form-group select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.grv-form-hint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.grv-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.grv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.grv-btn--primary {
  background: #3b82f6;
  color: #fff;
}

.grv-btn--primary:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.grv-btn--secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.grv-btn--secondary:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.grv-btn--small {
  padding: 8px 16px;
  font-size: 12px;
}

.grv-btn:disabled {
  background: #9ca3af;
  color: #6b7280;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.grv-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: grv-spin 1s linear infinite;
}

@keyframes grv-spin {
  to { transform: rotate(360deg); }
}

.grv-wishlist-message {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin: 16px 0;
}

.grv-wishlist-message.success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.grv-wishlist-message.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* ログイン・認証エラー表示 */
.grv-not-logged-in,
.grv-not-authenticated {
  text-align: center;
  padding: 24px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 12px;
  color: #92400e;
}

/* 既存リスト表示 */
.grv-existing-wishlists {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

.grv-existing-wishlists h4 {
  color: #374151;
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
}

.grv-wishlist-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grv-wishlist-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.grv-wishlist-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.grv-wishlist-info {
  flex: 1;
}

.grv-wishlist-title {
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.grv-wishlist-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #6b7280;
}

.grv-wishlist-meta a {
  color: #3b82f6;
  text-decoration: none;
}

.grv-wishlist-meta a:hover {
  text-decoration: underline;
}

.grv-wishlist-display-type,
.grv-wishlist-priority {
  padding: 2px 6px;
  background: #e5e7eb;
  border-radius: 4px;
  font-weight: 500;
}

/* ランキング内のほしい物リスト表示 */
.grv-user-wishlist-container {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.grv-user-wishlist {
  display: flex;
  align-items: center;
}

.grv-wishlist-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #ff9500 0%, #ff6900 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.grv-wishlist-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(255, 149, 0, 0.35);
  color: #fff;
  text-decoration: none;
}

.grv-wishlist-icon {
  font-size: 14px;
  line-height: 1;
}

.grv-wishlist-label {
  color: inherit;
  letter-spacing: 0.2px;
}

.grv-wishlist-badge {
  background: rgba(255, 255, 255, 0.25);
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* モバイル対応 */
@media (max-width: 640px) {
  .grv-wishlist-form-container {
    margin: 16px;
    padding: 16px;
    border-radius: 8px;
  }
  
  .grv-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .grv-btn {
    width: 100%;
  }
  
  .grv-wishlist-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .grv-wishlist-actions {
    align-self: flex-end;
  }
  
  .grv-wishlist-link {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 16px;
  }
  
  .grv-wishlist-meta {
    flex-direction: column;
    gap: 6px;
  }
}

/* 最後の調整 */
.grv-trending__item{ 
  padding-left: 0; 
}