/* ============================================================
   tile_keyword.css — キーワードの選び場の見た目 (第125便)
   ------------------------------------------------------------
   ★★★ このファイルは **カジさんの管轄**です。style.css と同じく、
     ここを直せば見た目が変わります。JavaScript は1文字も直りません。

   ★ 課題は「**スマホの小さな画面で、面積をとらずに**」でした。
     ですので、この形は次の3つで高さを抑えています。

       ① 大項目は **プルダウン1行**（10でも30でも1行）
       ② サブは **折り返して並ぶ**（縦に5行にしない）
       ③ えらんだものは **小さな札**で1〜2行

   ★★ 触ってよい所（この3つで、たいていの調整はできます）
       --kw-gap    … すきま
       --kw-size   … 字の大きさ
       --kw-round  … 角の丸み
   ============================================================ */

.kwBox {
  --kw-gap: 6px;
  --kw-size: 12px;
  --kw-round: 12px;
  display: block;
  margin: 4px 0 2px;
}

/* ---- えらんだもの ---------------------------------------- */
.kwBox .kwChipsHd,
.kwBox .kwGroupHd {
  display: block;
  font-size: 11px;
  opacity: 0.75;
  margin: 0 0 2px;
}

.kwBox .kwChips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kw-gap);
  /* ★ 何も選んでいなくても高さが変わらないように、下限を置きます
     （押すたびに下のものが上下すると、指がずれます） */
  min-height: 24px;
  align-items: center;
  margin: 0 0 6px;
}

.kwBox .kwEmpty {
  font-size: var(--kw-size);
  opacity: 0.55;
}

.kwBox .kwChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 9px;
  border: 1px solid var(--line, #cccccc);
  border-radius: var(--kw-round);
  font-size: var(--kw-size);
  line-height: 1.5;
  white-space: nowrap;
}

.kwBox .kwChipX {
  border: 0;
  background: transparent;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  /* ★ 指で押せる大きさを保ちます（見た目は小さいままです） */
  min-width: 22px;
  min-height: 22px;
}

/* ---- 大項目 ---------------------------------------------- */
.kwBox .kwGroupRow {
  margin: 0 0 6px;
}

.kwBox .kwGroup {
  width: 100%;
  font-size: 13px;
}

/* ---- サブ (ラジオ) --------------------------------------- */
.kwBox .kwSubs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kw-gap) 10px;
}

.kwBox .kwSub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--kw-size);
  line-height: 1.6;
  /* ★ 指で押せる高さ。字は小さいままで、押す所だけ広げます */
  min-height: 26px;
  cursor: pointer;
}

.kwBox .kwSub input[type="radio"] {
  margin: 0;
}

.kwBox .kwSub input[type="radio"]:disabled + .kwSubT {
  opacity: 0.4;
}

.kwBox .kwNote {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--err, #c04040);
}

/* ============================================================
   募集の掲示板（読む側）
   ★ 選び場と同じ札の形をそのまま使いますので、ここは並べかただけです
   ============================================================ */
/* ★★★ 第128便 (カジさんご指摘): 募集も、ほかの知らせと同じ形にします。
   ------------------------------------------------------------
   > デザインが違うため、見飛ばしてしまいそうです。
   >（グレーの背景の角丸矩形に収まっている）

   ★ 枠・余白・題・日付・本文の見た目は、**style.css の
     `.msgItem` / `.msgHead` / `.msgWho` / `.msgDate` / `.msgBody`
     にお任せ**しました。ですので、ここに同じ指定を書きません
     （台帳 7-87 決めごとは1か所に）。あちらを直せば、こちらも
     一緒に変わります。
   ★ ここに残すのは、募集にしか無いもの——語の札と、
     ［このタイルを見る］の置きかただけです。 */

.wantItem .wantKeys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 5px 0 0;
}

.wantItem .wantKey {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--line, #cccccc);
  border-radius: 12px;
  font-size: 11px;
  white-space: nowrap;
}

.wantItem .wantGo {
  margin: 6px 0 0;
}

/* ★ 自分の募集。はがす道を、その場に置きます */
.wantItem.is-mine {
  opacity: 0.85;
}

/* ============================================================
   ★★★★ 第166便: 読むだけの並び（ストリップから降りてくる語）
   ------------------------------------------------------------
   ★★★ 押す所はありません。**見えるが、ここでは直せない** —— 欄ごと
     消すと「無い」のか「直せない」のかが分かりません（第97便k）。
   ★★ 上の丸い札とそっくり同じ見た目にします。違うのは × が無いこと
     だけです。同じものが2通りに見えると、別のものだと思わせます。
   ============================================================ */
.kwChipsRO {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kw-gap);
  align-items: center;
  margin: 2px 0 6px;
}
.kwChipsRO .kwChip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid var(--line, #cccccc);
  border-radius: var(--kw-round);
  font-size: var(--kw-size);
  line-height: 1.5;
  white-space: nowrap;
  /* ★ 押せないことが、見て分かるように少しだけ薄く */
  opacity: 0.8;
}
.kwChipsRO .kwEmpty {
  font-size: var(--kw-size);
  opacity: 0.55;
}