/* =============================================
   style.css
   のんびりひとやすみ村 — メインスタイルシート
   どうぶつの森風のほんわかパレット
============================================= */

/* =============================================
   CSS カスタムプロパティ（テーマカラー管理）
   色を変えたいときはここだけ編集すればOK
============================================= */
:root {
  --color-bg:         #f7f3eb;   /* 温かみのあるオフホワイト */
  --color-bg-soft:    #fdf9f2;   /* 投稿カードなどの白っぽい面 */
  --color-green:      #7bb68a;   /* どうぶつの森の草色 */
  --color-green-pale: #b9d9c3;   /* 薄い緑（アクセント） */
  --color-brown:      #b08b6e;   /* 土っぽいブラウン */
  --color-brown-pale: #e8d9c8;   /* 薄いベージュ */
  --color-pink:       #e8a0a8;   /* やさしいピンク */
  --color-pink-pale:  #f5d5d9;   /* 薄ピンク */
  --color-yellow:     #f0d080;   /* ほっこりイエロー */
  --color-text:       #5a4a3a;   /* 読みやすいブラウン系テキスト */
  --color-text-light: #9a8a7a;   /* サブテキスト */
  --radius-sm:        12px;
  --radius-md:        20px;
  --radius-lg:        32px;
  --shadow-soft:      0 4px 16px rgba(90,74,58,0.10);
  --shadow-card:      0 2px 12px rgba(90,74,58,0.08);
  --font-main:        'Zen Maru Gothic', sans-serif;
}

/* =============================================
   リセット・ベーススタイル
============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  /* ほんのり草原テクスチャ感をグラデーションで演出 */
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(123,182,138,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 10%, rgba(240,208,128,0.15) 0%, transparent 50%);
}

/* =============================================
   ページ全体のラッパー（スマホ幅中心）
============================================= */
.app-wrapper {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

/* =============================================
   1. ヘッダーエリア
   タイトル・サブタイトル（検索アイコンは削除済み）
============================================= 
.site-header {
  text-align: center;
  padding: 28px 0 16px;
}

// タイトル

.site-title {
  font-size: clamp(0.95rem, 4vw, 1.35rem);
  font-weight: 700;
  color: var(--color-green);
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: nowrap; // 絵文字込みで折り返さない 
}

//サブタイトル 
.site-subtitle {
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin-top: 4px;
  letter-spacing: 0.05em;
}*/
/* =============================================
   ヘッダーエリア（画像ヘッダー版）
============================================= */
.site-header {
  text-align: center;
  padding: 0; /* 余白リセット */
  margin: 0 0 14px; /* 横に少しマージン */
}

/* ヘッダー画像 */
.site-header-image {
  width: 100%;
  height: auto;
  display: block; /* 下の余白防止 */
  border-radius: var(--radius-md);
}


/* =============================================
   2. 足あとエリア（ヘッダー直下・1行表示）
   「🐾今日は ○人あそびに来たよ」を1行で表示
   STEP2 で PHP/MySQL 集計に切り替え予定
============================================= */
.footprint-area {
  margin: 0 0 14px;  /* ヘッダー直下に配置 */
  text-align: center;
}

/* 足あと表示カード（1行インライン） */
.footprint-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 20px;
  background: var(--color-bg-soft);
  border: 1.5px solid var(--color-brown-pale);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* 足あと絵文字（ぽこぽこアニメーション） */
.footprint-emoji {
  font-size: 1.1rem;
  animation: poko 1.8s ease-in-out infinite;
  display: inline-block;
}

@keyframes poko {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%       { transform: translateY(-3px) rotate(5deg); }
}

/* テキスト部分（1行） */
.footprint-text {
  font-size: 0.84rem;
  color: var(--color-text-light);
  white-space: nowrap; /* 絶対に折り返さない */
}

/* 人数ハイライト */
.footprint-count {
  font-weight: 700;
  color: var(--color-green);
}

/* =============================================
   3. 投稿表示エリア
============================================= */
.posts-section {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden; /* 角丸を背景画像に適用 */
}

/* images/coment.png を背景に敷く */
.posts-bg {
  position: absolute;
  inset: 0;
  background-image: url('images/coment3.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* 白いぼかしオーバーレイ（文字の視認性確保） */
.posts-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(253,249,242,0.1);
  backdrop-filter: blur(0.5px);
  z-index: 1;
}

/* スクロールエリア本体（高さ380px固定） */
.posts-scroll {
  position: relative;
  z-index: 2;
  height: 380px;
  overflow-y: auto;
  padding: 16px 14px;
  /* スクロールバーを細くして可愛く */
  scrollbar-width: thin;
  scrollbar-color: var(--color-green-pale) transparent;
}

.posts-scroll::-webkit-scrollbar {
  width: 5px;
}

.posts-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.posts-scroll::-webkit-scrollbar-thumb {
  background: var(--color-green-pale);
  border-radius: 10px;
}

/* ===== 投稿カード ===== */
.post-card {
  background: rgba(255,255,255,0.88);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(176,139,110,0.12);
  /* カード表示のふわっとアニメーション */
  animation: fadeInUp 0.3s ease both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* カードヘッダー（アイコン・名前・時間） */
.post-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.post-icon {
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brown-pale);
  border-radius: 50%;
  flex-shrink: 0;
}

.post-meta {
  flex: 1;
}

.post-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
}

.post-category-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  background: var(--color-green-pale);
  color: var(--color-green);
  font-weight: 500;
  margin-top: 2px;
}

.post-time {
  font-size: 0.72rem;
  color: var(--color-text-light);
  white-space: nowrap;
}

/* カード本文 */
.post-body {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 10px;
  word-break: break-word;
}

/* 投稿画像 */
.post-image {
  width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  object-fit: cover;
  max-height: 180px;
}

/* カードフッター（リアクション・返信） */
.post-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* リアクションボタン */
.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-brown-pale);
  background: var(--color-bg);
  font-family: var(--font-main);
  font-size: 0.8rem;
  color: var(--color-text-light);
  cursor: pointer;
  transition: all 0.15s;
}

.reaction-btn:hover {
  background: var(--color-yellow);
  border-color: #d0b060;
  color: var(--color-text);
}

/* リアクション済み */
.reaction-btn.is-reacted {
  background: var(--color-yellow);
  border-color: #d0b060;
  color: var(--color-text);
  font-weight: 500;
}

/* 返信ボタン */
.reply-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-green-pale);
  background: transparent;
  font-family: var(--font-main);
  font-size: 0.78rem;
  color: var(--color-green);
  cursor: pointer;
  transition: all 0.15s;
}

.reply-btn:hover {
  background: var(--color-green-pale);
}

/* データなし・読み込み表示 */
.posts-placeholder {
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.88rem;
  padding: 40px 0;
  line-height: 2;
}

/* =============================================
   4. 検索バー（ラベルなし・バーのみ）
============================================= */
.search-section {
  margin: 8px 0 20px;
}

.search-bar-wrap {
  position: relative;
}

.search-bar-wrap::before {
  content: '🔍';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 2px solid var(--color-brown-pale);
  border-radius: var(--radius-lg);
  font-family: var(--font-main);
  font-size: 0.88rem;
  color: var(--color-text);
  background: var(--color-bg-soft);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.search-input::placeholder {
  color: var(--color-text-light);
  font-size: 0.8rem;
}

.search-input:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(123,182,138,0.18);
}

/* =============================================
   5. 投稿フォーム
============================================= */
.post-form-card {
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  box-shadow: var(--shadow-soft);
  border: 1.5px solid var(--color-brown-pale);
  margin-bottom: 24px;
}

/* フォームセクションのタイトル行 */
.form-section-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-light);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
  display: block;   
  text-align: center;
}

/* ------ アイコン選択 & 名前入力 ------ */
.icon-name-row {
  display: flex;
  flex-direction: column; /* 横並びから縦並びに変更 */
  gap: 16px;              /* アイコンと名前欄の間の余白 */
  margin-bottom: 20px;
  align-items: stretch;   /* 横幅いっぱいに広げる */
}

/* アイコン選択エリア（左） */
.icon-select-area {
  flex: 0 0 auto;
}

.icon-select-area .form-section-title {
  text-align: center;
}

/* どうぶつアイコングリッド（3列×2行） */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 3から6に変更 */
  gap: 8px;
  justify-items: center; /* アイコンを中央に寄せる */
}

.icon-btn {
  /* ラジオボタンを視覚的に隠してカスタムボタンで表現 */
  display: none;
}

.icon-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
  border-radius: 50%;
  background: var(--color-brown-pale);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
  border: 2px solid transparent;
}

.icon-label:hover {
  transform: scale(1.12);
}

/* 選択されたアイコンのスタイル */
.icon-btn:checked + .icon-label {
  background: var(--color-green-pale);
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(123,182,138,0.25);
  transform: scale(1.1);
}

/* 名前入力エリア（右） */
.name-input-area {
  flex: 1;
  display: flex;       /* ラベルと入力を横に並べる */
  align-items: center; /* 縦方向の中央揃え */
  gap: 12px;           /* 「おなまえ」と入力欄の間の隙間 */
}

/* 名前ラベルの調整 */
.name-input-area .form-section-title {
  margin-bottom: 0;     /* 下の余白を消して横並びに適応 */
  white-space: nowrap;  /* 改行を防ぐ */
  text-align: left;     /* 左寄せ */
}

.name-input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--color-brown-pale);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 0.88rem;
  color: var(--color-text);
  background: var(--color-bg);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.name-input::placeholder {
  color: var(--color-text-light);
  font-size: 0.82rem;
}

.name-input:focus {
  border-color: var(--color-brown);
  box-shadow: 0 0 0 3px rgba(176,139,110,0.15);
}

/* ------ カテゴリ選択（広場 / 博物館） ------ */
.category-main-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

/* カテゴリ選択ラジオをカスタムボタン化 */
.category-radio {
  display: none;
}

.category-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  border: 2px solid var(--color-brown-pale);
  background: var(--color-bg);
  color: var(--color-text-light);
  transition: all 0.2s;
  text-align: center;
  line-height: 1.4;
}

.category-label:hover {
  border-color: var(--color-green);
  color: var(--color-green);
}

/* 広場選択時のカラー */
.category-radio[value="hiroba"]:checked + .category-label {
  background: #e8f5ec;
  border-color: var(--color-green);
  color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(123,182,138,0.15);
}

/* 博物館選択時のカラー */
.category-radio[value="museum"]:checked + .category-label {
  background: #fef0d5;
  border-color: var(--color-brown);
  color: var(--color-brown);
  box-shadow: 0 0 0 3px rgba(176,139,110,0.15);
}

/* ------ タイトルカテゴリ（プルダウン選択） ------ */
.tag-category-area {
  margin-bottom: 16px;
}

/* プルダウン本体 */
.tag-select {
  width: 100%;
  padding: 10px 36px 10px 14px; /* 右側に矢印スペース */
  border: 2px solid var(--color-brown-pale);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 0.88rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  /* カスタム矢印（ブラウザデフォルト矢印を非表示にして SVG 矢印を重ねる） */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a8a7a' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tag-select:focus {
  border-color: var(--color-pink);
  box-shadow: 0 0 0 3px rgba(232,160,168,0.15);
}

/* 非選択状態（空 option）のプレースホルダー色 */
.tag-select option[value=""] {
  color: var(--color-text-light);
}

/* 広場選択時のプルダウン色 */
.tag-select.is-hiroba {
  border-color: var(--color-green);
  background-color: #f0faf3;
}

/* 博物館選択時のプルダウン色 */
.tag-select.is-museum {
  border-color: var(--color-brown);
  background-color: #fef8ee;
}

/* プルダウンラッパー：カテゴリ未選択時は非表示 */
.tag-select-wrap {
  display: none;
}

.tag-select-wrap.is-active {
  display: block;
}

/* 旧タグボタン残骸（念のため非表示スタブ） */
.tag-radio  { display: none; }
.tag-label  { display: none; }
.tag-group  { display: none; }
.tag-group.is-active { display: none; }

/* ------ おしゃべり入力欄（テキストエリア） ------ */
.talk-textarea-area {
  margin-bottom: 16px;
}

.talk-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--color-brown-pale);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 0.88rem;
  color: var(--color-text);
  background: var(--color-bg);
  resize: vertical;
  min-height: 90px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1.7;
}

.talk-textarea::placeholder {
  color: var(--color-text-light);
  font-size: 0.82rem;
}

.talk-textarea:focus {
  border-color: var(--color-pink);
  box-shadow: 0 0 0 3px rgba(232,160,168,0.15);
}

/* 文字数カウンター */
.char-counter {
  text-align: right;
  font-size: 0.74rem;
  color: var(--color-text-light);
  margin-top: 4px;
}

.char-counter.is-warning {
  color: #d06060; /* 残り少なくなったら赤系 */
}

/* ------ 画像アップロード ------ */
.image-upload-area {
  margin-bottom: 20px;
}

/* ドロップゾーン風のデザイン */
.image-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px;
  border: 2px dashed var(--color-brown-pale);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-bg);
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}

.image-upload-label:hover {
  border-color: var(--color-pink);
  background: var(--color-pink-pale);
}

.image-upload-icon {
  font-size: 1.5rem;
}

.image-upload-text {
  font-size: 0.82rem;
  color: var(--color-text-light);
}

.image-upload-input {
  display: none; /* ラベルクリックで発火させるため非表示 */
}

/* 画像プレビュー */
.image-preview {
  display: none; /* 画像選択後に JS で表示 */
  margin-top: 10px;
  position: relative;
}

.image-preview img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* プレビュー削除ボタン */
.image-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(90,74,58,0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------ 投稿ボタン ------ */
.submit-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--color-green) 0%, #9ecfaa 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(123,182,138,0.35);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(123,182,138,0.40);
}

.submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(123,182,138,0.30);
}

/* エラーメッセージ（フォーム直下） */
.form-error-msg {
  display: none; /* エラー時に JS で表示 */
  margin-top: 10px;
  padding: 10px 14px;
  background: #fff0f0;
  border: 1.5px solid #f5c2c2;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: #c05050;
  text-align: center;
}

/* =============================================
   ユーティリティ
============================================= */
/* 要素を視覚的に隠す（アクセシビリティ考慮） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* =============================================
   スマホ → PC レスポンシブ対応
============================================= */
@media (min-width: 520px) {
  .app-wrapper {
    padding: 0 24px 60px;
  }
  /* site-title は clamp() で自動調整するのでここでは上書きしない */
  .icon-label {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }
}

/* =============================================
   STEP7：返信機能スタイル
============================================= */

/* -----------------------------------------------
   返信アコーディオンラッパー
   .post-card の直後に置かれ、デフォルトは閉じた状態
   JS が .is-open を付けると max-height が伸びて開く
----------------------------------------------- */
.reply-accordion {
  /* max-height アニメーションで滑らかに開閉 */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  opacity: 0;
}

.reply-accordion.is-open {
  /* 十分大きな値を指定して中身が全部見えるようにする */
  max-height: 800px;
  opacity: 1;
}

/* -----------------------------------------------
   返信フォームカード
----------------------------------------------- */
.reply-form-card {
  background: rgba(240, 250, 243, 0.92);   /* 薄いグリーン背景 */
  border: 1.5px solid var(--color-green-pale);
  border-radius: var(--radius-md);
  padding: 14px 14px 12px;
  margin: 0 4px 8px;                        /* カードの内側に少しインデント */
}

/* フォームのラベル小テキスト */
.reply-form-label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-bottom: 6px;
  display: block;
}

/* アイコン + 名前 横並び */
.reply-icon-name-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

/* 返信フォームのアイコングリッド（小さめ） */
.reply-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  flex-shrink: 0;
}

.reply-icon-btn {
  display: none; /* ラジオを非表示にしてラベルで操作 */
}

.reply-icon-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 1.1rem;
  border-radius: 50%;
  background: var(--color-brown-pale);
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, background 0.15s;
}

.reply-icon-label:hover {
  transform: scale(1.1);
}

.reply-icon-btn:checked + .reply-icon-label {
  background: var(--color-green-pale);
  border-color: var(--color-green);
  transform: scale(1.08);
}

/* 返信フォームの名前入力（右側） */
.reply-name-area {
  flex: 1;
}

.reply-name-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--color-brown-pale);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 0.84rem;
  color: var(--color-text);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.reply-name-input::placeholder {
  color: var(--color-text-light);
  font-size: 0.8rem;
}

.reply-name-input:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 2px rgba(123,182,138,0.15);
}

.reply-name-input.is-error {
  border-color: #e07070;
  animation: shake 0.3s ease;
}

/* 返信テキストエリア */
.reply-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-brown-pale);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 0.84rem;
  color: var(--color-text);
  background: #fff;
  resize: vertical;
  min-height: 72px;
  outline: none;
  transition: border-color 0.2s;
  line-height: 1.65;
  margin-bottom: 8px;
}

.reply-textarea::placeholder {
  color: var(--color-text-light);
  font-size: 0.8rem;
}

.reply-textarea:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 2px rgba(123,182,138,0.15);
}

.reply-textarea.is-error {
  border-color: #e07070;
  animation: shake 0.3s ease;
}

/* 返信送信ボタン */
.reply-submit-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, var(--color-green) 0%, #9ecfaa 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-main);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(123,182,138,0.30);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.reply-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(123,182,138,0.38);
}

.reply-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* 返信フォーム直下のエラーメッセージ */
.reply-error-msg {
  display: none;
  font-size: 0.75rem;
  color: #c05050;
  background: #fff5f5;
  border: 1px solid #f5c2c2;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-top: 6px;
  text-align: center;
}

.reply-error-msg.is-visible {
  display: block;
  animation: fadeInUp 0.2s ease;
}

/* -----------------------------------------------
   返信一覧エリア
   フォームの下に並ぶ
----------------------------------------------- */
.reply-list {
  margin: 4px 4px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 返信が0件のとき */
.reply-list:empty::after {
  content: 'まだへんじはないよ🌿';
  display: block;
  font-size: 0.76rem;
  color: var(--color-text-light);
  text-align: center;
  padding: 8px 0 4px;
}

/* -----------------------------------------------
   返信カード（1件）
----------------------------------------------- */
.reply-card {
  background: rgba(255,255,255,0.82);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(185,217,195,0.5);  /* 薄いグリーン枠 */
  padding: 10px 12px;
  /* 新着返信のふわっと表示 */
  animation: fadeInUp 0.25s ease both;
}

/* 返信カードのヘッダー（アイコン + 名前 + 時間） */
.reply-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.reply-icon {
  font-size: 1.3rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-green-pale);
  border-radius: 50%;
  flex-shrink: 0;
}

.reply-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
}

.reply-time {
  font-size: 0.68rem;
  color: var(--color-text-light);
  white-space: nowrap;
}

/* 返信本文 */
.reply-body {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--color-text);
  word-break: break-word;
  /* 返信であることを示す左ライン */
  padding-left: 10px;
  border-left: 2px solid var(--color-green-pale);
}

/* -----------------------------------------------
   返信ボタンの「開いてるよ」状態
----------------------------------------------- */
.reply-btn.is-open {
  background: var(--color-green-pale);
  font-weight: 600;
}

/* =============================================
   STEP5：検索機能スタイル
============================================= */

/* 検索バーラッパーを relative に（クリアボタン配置用） */
.search-bar-wrap {
  position: relative;
}

/* 検索クリアボタン（×）
   入力があるときだけ JS で .is-visible を付けて表示 */
.search-clear-btn {
  display: none;          /* デフォルト非表示 */
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-brown-pale);
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-light);
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.search-clear-btn.is-visible {
  display: flex;          /* 入力ありのとき表示 */
}

.search-clear-btn:hover {
  background: var(--color-pink-pale);
  color: var(--color-pink);
}

/* 検索中に右側の × と重ならないよう入力欄の右パディングを拡げる */
.search-input.has-value {
  padding-right: 42px;
}

/* 検索結果バナー
   「○○ の検索結果 △件」表示エリア
   投稿エリアの直上に出る */
.search-result-banner {
  display: none;          /* 検索中のみ JS で .is-visible を付けて表示 */
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 6px;
  background: var(--color-green-pale);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: var(--color-green);
  animation: fadeInUp 0.2s ease;
}

.search-result-banner.is-visible {
  display: flex;
}

/* バナー内テキスト */
.search-result-text {
  flex: 1;
  font-weight: 500;
}

/* 「もどる」ボタン（検索リセット） */
.search-reset-btn {
  flex-shrink: 0;
  padding: 3px 12px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-green);
  background: #fff;
  font-family: var(--font-main);
  font-size: 0.76rem;
  color: var(--color-green);
  cursor: pointer;
  transition: background 0.15s;
}

.search-reset-btn:hover {
  background: var(--color-green-pale);
}