@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Template:   cocoon-master
Version:    1.1.3
*/

/* =========================
   TOKENS
========================= */
:root{
  --rv-brand : #00c2b2;
  --rv-title : #0b8a82;
  --rv-border: #c7eeeb;
  --rv-divider:#eef3f2;

  /* meter badge */
  --badge-w  : 5ch;
  --badge-pad: .5rem;
}

/* =========================
   REVIEW METERS（最小）
========================= */
.rv-meters{ --rv-gap:14px; --rv-bar-h:48px; --rv-radius: calc(var(--rv-bar-h)/2); display:grid; gap:var(--rv-gap); }
.rv-meter--inline{ display:grid; grid-template-columns: clamp(10ch,28vw,18ch) 1fr; align-items:center; gap:.8rem; }
.rv-meter__label{ font-weight:700; color:#0f3e3a; line-height:1.2; }
.rv-meter__bar{ position:relative; height:var(--rv-bar-h); border:2px solid var(--rv-border); border-radius:var(--rv-radius);
  background:linear-gradient(#0000,#0000) padding-box,
             repeating-linear-gradient(90deg,var(--rv-border) 0 1px,transparent 1px 10%) border-box; overflow:hidden; }
.rv-meter__fill{ height:100%; width:var(--p,0%); background:linear-gradient(90deg,#02cec0,#009b8b);
  border-radius:inherit; transition:width .7s cubic-bezier(.2,.8,.2,1); }
.rv-meter__pct{ position:absolute; top:50%;
  left:clamp(var(--badge-pad,.5rem), calc(var(--p,0%) - (var(--badge-w,5ch)/2)), calc(var(--p,0%) - var(--badge-w,5ch) - var(--badge-pad,.5rem)));
  transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center;
  width:var(--badge-w,5ch); color:#fff; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.35); pointer-events:none; }
@media (max-width:480px){ .rv-meters{ --rv-bar-h:36px; } }

/* =========================
   REVIEW CARD（最小）
========================= */
.rvx-card{ border:1px solid #ddd; border-radius:8px; padding:1rem; background:#fff; }
.rvx-row{ display:flex; gap:1rem; align-items:flex-start; }
.rvx-media{ flex:0 0 200px; }
.rvx-info{ flex:1 1 auto; min-width:0; }
@media (max-width:768px){ .rvx-row{ flex-direction:column; } }

/* =========================================================
   FILTER v6（決定版）
   目的：左カラムを常に一定幅に固定。右は残り幅を自動使用。
   特徴：Grid不要・HTML無改造。見出しタグの種類が混在してもOK。
========================================================= */
.rv-filter{
  --left-w : 13.2rem;   /* ← 左の固定幅（12–14remで微調整） */
  --gap-x  : 1rem;      /* 左右の間隔 */
  --title-fs: .94rem;   /* 見出しの文字サイズ */
  --title-lh: 1.25;
}

/* 各“行”の外枠（fieldsetでもdivでもOK）を clearfix して区切り線を付与 */
.rv-filter > *{
  overflow:auto;                  /* ← floatを内包して崩れない */
  padding:10px 0;
  border-top:1px solid var(--rv-divider);
}
.rv-filter > *:first-child{ border-top:0; }

/* 左：見出し候補を固定幅で float（タグ/クラス混在に対応） */
.rv-filter :is(legend, h3, .filter-title, .search-filter__title, .rv-heading){
  float:left;
  width:var(--left-w);
  margin:0;
  padding:0 var(--gap-x) 0 0;
  text-align:right;
  font:700 var(--title-fs)/var(--title-lh) inherit;
  color:var(--rv-title);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:transparent;
}

/* 右：見出しの“後続兄弟”は BFC を作って残り幅を占有（複数兄弟でもOK） */
.rv-filter :is(legend, h3, .filter-title, .search-filter__title, .rv-heading) ~ *{
  display:block;
  overflow:hidden;           /* ← BFC：floatの回り込みを止めて右側を全取得 */
  margin:0; padding:0;
}

/* チップの横並び（ul/ol/divの器がある場合のみ適用） */
.rv-filter :is(legend, h3, .filter-title, .search-filter__title, .rv-heading) ~ :is(ul, ol, .rv-chips, .chips, .search-filter__options, .filter-options){
  display:flex; flex-wrap:wrap; gap:.45rem .7rem;
  list-style:none; margin:0; padding:0;
}

/* 単体label（連載中/完結など）は伸びない */
.rv-filter label{ display:inline-flex; align-items:center; gap:.35rem; }

/* スマホ：縦積み（固定幅解除） */
@media (max-width:768px){
  .rv-filter :is(legend, h3, .filter-title, .search-filter__title, .rv-heading){
    float:none; width:auto; text-align:left; padding-right:0; margin-bottom:.25rem; font-size:.92rem;
  }
  .rv-filter :is(legend, h3, .filter-title, .search-filter__title, .rv-heading) ~ *{
    overflow:visible;
  }
}