/* FOOTCOVER_TEST: これが見えたらCSSが効いてる */
html { outline: 10px solid red !important; }

/* ===== THE THOR 実体を直接潰す ===== */
body.is-footcover-search .l-sidebar,
body.is-footcover-search .p-sidebar,
body.is-footcover-search .sidebar,
body.is-footcover-search #secondary,
body.is-footcover-search aside {
  display: none !important;
}

/* メインをフル幅に戻す */
body.is-footcover-search .l-content,
body.is-footcover-search .l-main,
body.is-footcover-search .l-primary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* デバッグ：この枠が出ればCSSは勝っている */
body.is-footcover-search .l-main {
  outline: 5px solid red !important;
}

/* 強制：フットカバー検索ページのサイドバーをDOM直指定で消す */
body aside.widget-side,
body aside.widget,
body .widget-area,
body #secondary,
body .sidebar {
  display: none !important;
}

/* ==============================
   フットカバー検索ページのみ
   サイドバー完全削除
   ============================== */

/* URLに footcover-search を含むページだけ */
body:has(a[href*="footcover-search"]) aside.widget-side,
body:has(a[href*="footcover-search"]) aside.widget,
body:has(a[href*="footcover-search"]) .widget-area,
body:has(a[href*="footcover-search"]) #secondary,
body:has(a[href*="footcover-search"]) .sidebar {
  display: none !important;
}

/* メイン幅を1カラムに戻す */
body:has(a[href*="footcover-search"]) .l-main,
body:has(a[href*="footcover-search"]) .l-content,
body:has(a[href*="footcover-search"]) .container,
body:has(a[href*="footcover-search"]) .wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==============================
   フットカバー検索ページ
   記事ボックス無効化（アプリ化）
   ============================== */

/* 記事特有の白枠・影・余白を全削除 */
.is-footcover-search .article,
.is-footcover-search .entry-content,
.is-footcover-search .post-content,
.is-footcover-search .c-article,
.is-footcover-search .c-entry {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* コンテンツ中央寄せを解除 */
.is-footcover-search .l-content,
.is-footcover-search .l-main {
  padding: 0 !important;
}

/* アプリ本体を“画面の主役”に */
.is-footcover-search #footcover-app {
  max-width: 1100px;
  margin: 40px auto;
  padding: 32px;
  background: #fff;
  border-radius: 16px;
}

/* ==================================================
   4) 検索結果の見せ方改善
   - カード化
   - 情報の強弱
   - CTAの統一
================================================== */

/* 結果一覧 全体 */
body.is-footcover-search .footcover-results,
body.is-footcover-search .results,
body.is-footcover-search .search-results {
  margin-top: 20px !important;
}

/* 1件ごとのカード */
body.is-footcover-search .footcover-result,
body.is-footcover-search .result-item,
body.is-footcover-search .search-result-item {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  padding: 14px 14px 16px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.04) !important;
}

/* 作品タイトル */
body.is-footcover-search .footcover-result h2,
body.is-footcover-search .result-item h2,
body.is-footcover-search .search-result-item h2 {
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin: 0 0 6px !important;
  font-weight: 700 !important;
}

/* 説明文（短文想定） */
body.is-footcover-search .footcover-result p,
body.is-footcover-search .result-item p,
body.is-footcover-search .search-result-item p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin: 6px 0 10px !important;
  color: #444 !important;
}

/* ハッシュタグ行 */
body.is-footcover-search .tags,
body.is-footcover-search .hashtags {
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.7 !important;
  margin-bottom: 10px !important;
  word-break: break-word !important;
}

/* CTA：作品ページへ */
body.is-footcover-search a.footcover-link,
body.is-footcover-search .footcover-result a,
body.is-footcover-search .result-item a {
  display: inline-block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 12px 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fafafa !important;
}

/* CTA hover（PC） */
@media (hover: hover) {
  body.is-footcover-search a.footcover-link:hover,
  body.is-footcover-search .footcover-result a:hover,
  body.is-footcover-search .result-item a:hover {
    background: #f2f2f2 !important;
  }
}

/* 「該当：◯件」の視認性UP */
body.is-footcover-search .result-count,
body.is-footcover-search .count,
body.is-footcover-search .hit-count {
  font-weight: 600 !important;
  margin: 12px 0 !important;
}

/* ==================================================
   2) UI/UX改善（フォームの使いやすさ）
   - 入力欄を分かりやすく
   - ボタンを強く/押しやすく
   - 余白と整列
================================================== */

/* フォーム全体の間隔を整理 */
body.is-footcover-search form,
body.is-footcover-search .footcover-form,
body.is-footcover-search .search-form {
  margin: 0 0 14px !important;
}

/* ラベルはブロック化して“入力の説明”にする */
body.is-footcover-search label {
  display: block !important;
  font-weight: 600 !important;
  margin: 12px 0 6px !important;
  line-height: 1.6 !important;
}

/* 入力欄・セレクト：見た目統一 */
body.is-footcover-search input[type="text"],
body.is-footcover-search input[type="search"],
body.is-footcover-search select {
  width: 100% !important;
  max-width: 520px !important; /* PCで広がりすぎない */
  height: 44px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

/* 入力欄のフォーカス（どこを触ってるか明確に） */
body.is-footcover-search input[type="text"]:focus,
body.is-footcover-search input[type="search"]:focus,
body.is-footcover-search select:focus {
  outline: none !important;
  border-color: rgba(0,0,0,.35) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important;
}

/* ボタン行：横並び、押し間違い防止で余白 */
body.is-footcover-search .footcover-actions,
body.is-footcover-search .actions,
body.is-footcover-search .button-row {
  display: flex !important;
  gap: 10px !important;
  margin-top: 12px !important;
  align-items: center !important;
}

/* 検索ボタン（主ボタン） */
body.is-footcover-search button[type="submit"],
body.is-footcover-search input[type="submit"] {
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(0,0,0,.22) !important;
  background: #111 !important;
  color: #fff !important;
  cursor: pointer !important;
}

/* リセット（副ボタン） */
body.is-footcover-search button[type="reset"],
body.is-footcover-search input[type="reset"],
body.is-footcover-search .reset,
body.is-footcover-search .btn-reset {
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  background: #fff !important;
  color: #222 !important;
  cursor: pointer !important;
}

/* ホバー（PC） */
@media (hover: hover) {
  body.is-footcover-search button[type="submit"]:hover,
  body.is-footcover-search input[type="submit"]:hover {
    opacity: .92 !important;
  }
  body.is-footcover-search button[type="reset"]:hover,
  body.is-footcover-search input[type="reset"]:hover,
  body.is-footcover-search .reset:hover,
  body.is-footcover-search .btn-reset:hover {
    background: #f6f6f6 !important;
  }
}

/* スマホ：ボタンは2分割で押しやすく */
@media (max-width: 768px) {
  body.is-footcover-search .footcover-actions,
  body.is-footcover-search .actions,
  body.is-footcover-search .button-row {
    display: flex !important;
  }
  body.is-footcover-search button[type="submit"],
  body.is-footcover-search input[type="submit"],
  body.is-footcover-search button[type="reset"],
  body.is-footcover-search input[type="reset"],
  body.is-footcover-search .reset,
  body.is-footcover-search .btn-reset {
    flex: 1 !important;
  }
}

/* ==================================================
   1) デザイン改善（見た目の格上げ）
   - 余白 / 角丸 / 影 / タイポ
   - 背景と“白い箱”のコントラスト
================================================== */

/* このページだけの全体トーン */
body.is-footcover-search {
  background: #f3d9dd !important; /* 今のピンクに馴染む薄め */
}

/* 中の白い箱（アプリ本体）を“カード”として上品に */
body.is-footcover-search .footcover-app,
body.is-footcover-search #footcover-app,
body.is-footcover-search .footcover-app-wrap,
body.is-footcover-search .footcover-search-wrap {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.08) !important;
  padding: 22px !important;
  backdrop-filter: blur(2px) !important;
}

/* 見出し：締まった印象＋余白整理 */
body.is-footcover-search h1 {
  font-size: 28px !important;
  line-height: 1.25 !important;
  letter-spacing: .02em !important;
  margin: 0 0 18px !important;
}

/* 説明文/補足：読みやすさ */
body.is-footcover-search p,
body.is-footcover-search .help,
body.is-footcover-search .hint {
  color: #333 !important;
  line-height: 1.8 !important;
}

/* ラベル：視線誘導 */
body.is-footcover-search label {
  color: #111 !important;
  font-weight: 700 !important;
}

/* 入力欄：上質感（角丸・薄影） */
body.is-footcover-search input[type="text"],
body.is-footcover-search input[type="search"],
body.is-footcover-search select {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.04) !important;
}

/* ボタン：コントラスト強化（主/副の差を明確に） */
body.is-footcover-search button[type="submit"],
body.is-footcover-search input[type="submit"] {
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
}

body.is-footcover-search button[type="reset"],
body.is-footcover-search input[type="reset"],
body.is-footcover-search .reset,
body.is-footcover-search .btn-reset {
  border-radius: 12px !important;
}

/* “該当：◯件” を見出しっぽく */
body.is-footcover-search .result-count,
body.is-footcover-search .count,
body.is-footcover-search .hit-count {
  font-size: 15px !important;
  color: #111 !important;
  padding: 8px 10px !important;
  background: rgba(0,0,0,.04) !important;
  border-radius: 10px !important;
  display: inline-block !important;
}

/* 結果カードの影を少し上品に（4で入れたカードに上書き） */
body.is-footcover-search .footcover-result,
body.is-footcover-search .result-item,
body.is-footcover-search .search-result-item {
  box-shadow: 0 8px 22px rgba(0,0,0,.06) !important;
  border-radius: 14px !important;
}

/* CTA（作品ページへ）：ボタンに“押せそう感” */
body.is-footcover-search a.footcover-link,
body.is-footcover-search .footcover-result a,
body.is-footcover-search .result-item a {
  border-radius: 12px !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.06) !important;
}

/* PCホバー：少し浮く */
@media (hover: hover) {
  body.is-footcover-search a.footcover-link:hover,
  body.is-footcover-search .footcover-result a:hover,
  body.is-footcover-search .result-item a:hover {
    transform: translateY(-1px) !important;
  }
}