@charset "UTF-8";
/* ============================================================
   ROOM — 会員ランク別表示

   このファイルだけは、元のデザインHTMLには無かった追加分です。
   （ランクバッジ・件数表示・ぼかし枠）
   色や余白は site.css のデザイン変数をそのまま使っているので、
   サイト全体の世界観からは外れません。
   ============================================================ */

/* ---------- ランクのバッジ ---------- */
.nana-tier{
  /* サイト共通の小さなバッジの書式（.sch-cat / .ga-tag / .room-tag と同じ決まりごと）。
     ランク名を日本語に変更した場合は、下の font-family を var(--sans) に、
     text-transform を none にすると、和文がきれいに出ます。 */
  font-family:var(--latin);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;padding:6px 14px;border-radius:999px;
  display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;
}
/* 帯にだけ添える日本語の読み（サイトの見出し sec-en / sec-jp と同じ作法） */
.nana-tier .read{
  font-family:var(--sans);font-style:normal;font-weight:500;font-size:10.5px;
  letter-spacing:.02em;text-transform:none;opacity:.78;
}
/* カードのバッジは幅が狭いので、読みは出さない */
.card-tier .read{display:none;}

/* 4段階の意味を伝える一行（手書き書体で、説明くさくならないように） */
.room-legend{
  font-family:var(--hand);font-size:16px;color:var(--orange-deep);
  margin:0 0 12px;line-height:1.7;
}
.room-legend .note{display:block;font-size:14px;opacity:.85;}
/* 陽の当たり方が増えていく順。
   最上位（太陽）だけは花ではなく「咲かせるがわ」なので、
   単色ではなくグラデーションと光で、階段の続きではなく別格に見せています。 */
.nana-tier-1{background:#D99A4E;}                    /* 一輪 */
.nana-tier-2{background:var(--orange);}              /* 花束 */
.nana-tier-3{background:var(--gold);color:#4A3208;}  /* 花畑 */
.nana-tier-4{background:linear-gradient(120deg,#F0B92B,#E27328);color:#3A2113;
             box-shadow:0 0 0 3px rgba(240,185,43,.30), 0 4px 14px rgba(226,115,40,.35);}

/* 一覧上部の「自分のランク」表示 */
.room-tierbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
.room-tierbar .nana-tier.is-off{opacity:.42;}

/* 何件見られるか（物量を伝える一行） */
.room-count{font-family:var(--hand);font-size:16px;color:var(--orange-deep);margin:2px 0 22px;}

/* カード左上のランクバッジ */
.room-card{position:relative;}
.room-card .card-tier{position:absolute;top:12px;left:12px;z-index:3;}

/* ---------- まだ見られない記事のサムネ枠 ----------
   ここに出しているのは「のぞき見用」の共通写真です。
   記事の本当のサムネイルとリンク先は、サーバーから送っていません。
   そのため、ぼかしを外されても記事の中身にはたどり着けません。      */
.room-thumb.veil{position:relative;overflow:hidden;background:#D9C7AE;}
.room-thumb.veil .peek{
  position:absolute;inset:-8%;background-size:cover;background-position:center 28%;
  transform:scale(1.08);
}
.room-thumb.veil::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(58,33,19,.30),rgba(226,115,40,.22) 55%,rgba(235,171,34,.28));
  mix-blend-mode:multiply;
}
/* ランクが近いほど、ぼかしを弱く（もう少しで見える、という感覚を出す） */
.room-thumb.veil.near1 .peek{filter:blur(7px)  saturate(1.05);}
.room-thumb.veil.near2 .peek{filter:blur(12px) saturate(1.0);}
.room-thumb.veil.near3 .peek{filter:blur(17px) saturate(.95);}

.room-thumb.veil .lockmark{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  font-size:26px;filter:drop-shadow(0 2px 8px rgba(30,16,4,.55));
}

/* 見出しと冒頭文のぼかし（タイトルは本物。中身は届いていない） */
.room-card .masked{filter:blur(4.5px);user-select:none;color:var(--ink-soft);}

/* 「◯◯ で開きます」の一行 */
.room-card .upsell{
  margin-top:9px;font-family:var(--sans);font-weight:700;font-size:12.5px;
  color:var(--orange-deep);display:flex;align-items:center;gap:6px;
}

/* 解錠済みカードの導線 */
.room-card .room-open{
  margin-top:2px;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--sky);
  display:block;
}

/* 記事がまだ無いときの案内（管理者にだけ出ます） */
.room-empty{
  background:var(--peach);border-radius:var(--radius);padding:18px 20px;
  font-size:14px;line-height:1.9;color:var(--ink);
}