/* 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 { 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;
    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: 36px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 6px;
    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__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-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;
}