/* ===========================
   CobbleWorks - スタイル
   暖色系（テラコッタ）デザイン
   色・角丸・影などの変数は tokens.css を参照
   =========================== */

/* 基本のbody設定 */
body {
  font-family: var(--map-font);
  padding: 40px 20px;
  box-sizing: border-box;
}

.app-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1000px 640px at 10% -8%, rgba(217,112,76,0.10), transparent 60%),
    radial-gradient(900px 620px at 105% 20%, rgba(217,112,76,0.07), transparent 65%),
    radial-gradient(1100px 800px at 50% 115%, rgba(61,50,41,0.05), transparent 60%),
    var(--map-bg);
}
.app-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(61,50,41,0.06) 0 1px, transparent 1px 160px),
    repeating-linear-gradient(0deg, rgba(61,50,41,0.05) 0 1px, transparent 1px 160px);
  mask-image: radial-gradient(1300px 850px at 25% 8%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(1300px 850px at 25% 8%, black, transparent 72%);
}
.app-bg-panel {
  position: absolute; border: 1px solid rgba(217,112,76,0.22);
  border-radius: 24px;
}
.app-bg-line {
  position: absolute; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,112,76,0.45), transparent);
}
.app-bg-mark {
  position: absolute; width: 22px; height: 2px; background: var(--map-accent);
  box-shadow: 0 0 8px 1px rgba(217,112,76,0.35);
  border-radius: 1px;
}
body > header, body > main, body > .hero { position: relative; z-index: 1; }

/* コンテンツの横幅を制限して中央揃えにする */
header, main, .hero {
  max-width: 680px;
  margin: 0 auto;
}

/* 狭い画面では、タイトル＋説明文の箱がheader-top内で縮めず、
   説明文が折り返さずにはみ出してしまうのを防ぐ（flexアイテムのmin-width:autoの罠） */
@media (max-width: 700px) {
  .site-logo-text {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* 検索欄 */
#search-section {
  margin-bottom: 32px;
}

/* トップページの検索欄は入力欄とボタンを横並びにする（フォームで囲んでいる場合のみ） */
#search-section form {
  display: flex;
  gap: 8px;
  position: relative; /* 直下のapp-suggestionsをこの位置基準で浮かせるため */
}

/* 検索サジェスト：入力中に関連度の高いミニアプリを最大5件だけ、Googleのサジェストのように出す */
.app-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--map-card);
  border-radius: var(--map-radius-icon);
  box-shadow: var(--map-shadow-modal);
  overflow: hidden;
  z-index: 20;
}

.app-suggestion-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 8px;
  padding: 10px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--map-divider);
}

.app-suggestion-item:last-child {
  border-bottom: none;
}

.app-suggestion-item:hover {
  background: var(--map-accent-tint);
}

.app-suggestion-item .app-glyph {
  align-self: center;
  color: var(--map-success); /* アプリ名と同じ緑 */
}

.app-suggestion-name {
  font-weight: 800;
  color: var(--map-success);
  font-size: var(--map-size-body);
}

.app-suggestion-category {
  font-size: 11px;
  font-weight: 700;
  color: var(--map-muted);
  text-transform: uppercase;
  letter-spacing: var(--map-label-spacing);
}

.app-suggestion-desc {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--map-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#searchInput {
  width: 100%;
  flex: 1;
  min-width: 0; /* ボタンを押し出さないようにする */
  padding: 12px 16px;
  font-size: 16px;
  font-family: inherit;
  border: 1.5px solid var(--map-border);
  border-radius: var(--map-radius-pill);
  box-sizing: border-box;
  background-color: var(--map-card);
  color: var(--map-ink);
}

#searchInput:focus {
  outline: none;
  border-color: var(--map-accent);
  box-shadow: var(--map-focus-ring);
}

#search-section button[type="submit"] {
  white-space: nowrap;
}

/* リクエストページへのリンク／リクエストページからの戻りリンク */
.back-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--map-accent-hover);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.back-link {
  margin-top: 0;
  margin-bottom: 12px;
}

/* ヘッダー */
header {
  margin-bottom: 40px;
}

header h1 {
  font-size: var(--map-size-title);
  font-weight: 800;
  margin-bottom: 4px;
}

header p {
  color: var(--map-text-2);
  margin: 0;
}

/* ヘッダー上段：ロゴと認証UIを横並びにする */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ログインボタン／ユーザーメニュー */
.auth-widget {
  display: flex;
  align-items: center;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-menu[hidden] {
  display: none;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--map-accent-tint);
}

.user-handle {
  font-weight: 700;
  font-size: 14px;
}

/* アバター＋handle部分をクリックするとプロフィール編集モーダルが開く */
.profile-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px;
  border-radius: var(--map-radius-pill);
  cursor: pointer;
  font-family: var(--map-font);
}

.profile-trigger:hover {
  background: var(--map-accent-tint);
}

.profile-trigger-gear {
  display: flex;
  color: var(--map-faint);
}

.avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-preview {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--map-accent-tint);
}

/* オンボーディングモーダル */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--map-modal-scrim);
  padding: 20px;
}

.modal-scrim[hidden] {
  display: none;
}

.map-modal {
  background: var(--map-card);
  border-radius: var(--map-radius-modal);
  box-shadow: var(--map-shadow-modal);
  padding: 28px;
  max-width: 380px;
  width: 100%;
}

.map-modal h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
}

.field-error {
  color: var(--map-error);
  font-size: 13px;
  margin: 6px 0 0;
}

/* ロゴ（アイコン＋タイトル）レイアウト */
.site-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  animation: logo-fade-in 0.5s ease;
}

/* アイコンの丸バッジ */
.logo-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--map-accent);
  color: #fff;
  transition: transform 0.2s ease;
}

.logo-mark:hover {
  transform: scale(1.08) rotate(-6deg);
}

@keyframes logo-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* アニメーションを減らす設定のユーザーには動きを付けない */
@media (prefers-reduced-motion: reduce) {
  .site-logo {
    animation: none;
  }
  .logo-mark {
    transition: none;
  }
  .hero-mascot--talk,
  .hero-mascot--hammer,
  .hero-mascot--offer,
  .hero-bubble-dots span,
  .hero-chip,
  .hero-fly-chip {
    animation: none;
  }
}

/* 各セクションの見出し（背景に薄いアクセントのチップを敷いて視認性を上げる） */
h2 {
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 16px;
  padding: 6px 16px;
  background: var(--map-accent-tint);
  color: var(--map-accent-hover);
  border-radius: var(--map-radius-pill);
}

/* あいまい検索の「もしかして」見出し */
.suggestions-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--map-text-2);
  margin: 20px 0 12px;
}

/* フォームセクション */
#request-form-section {
  background: var(--map-card);
  border-radius: var(--map-radius-card);
  padding: 22px;
  margin-bottom: 40px;
  box-shadow: var(--map-shadow-card);
}

/* フォームの各グループ（ラベル＋入力欄） */
.form-group {
  margin-bottom: 20px;
}

/* ラベル */
.form-group label {
  display: block;            /* 1行で表示 */
  font-weight: 700;
  margin-bottom: 2px;
}

/* ラベル下の説明文 */
.form-group small {
  display: block;
  color: var(--map-muted);
  font-size: 13px;
  margin-bottom: 6px;
}

/* テキスト入力欄 */
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  border: 1.5px solid var(--map-border);
  border-radius: 12px;
  box-sizing: border-box;    /* paddingを幅に含める */
  background-color: var(--map-card);
  color: var(--map-ink);
}

/* 複数行入力欄の高さ */
.form-group textarea {
  height: 80px;
  resize: vertical;          /* 縦方向にだけリサイズ可能 */
}

/* 入力欄にフォーカスしたときの枠線 */
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--map-accent);
  box-shadow: var(--map-focus-ring);
}

/* チェックボックスの設定行（メール通知のオン/オフなど）。
   .form-group input は width:100% なので、四角いままになるよう上書きする */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;          /* .form-group label の太字を打ち消す */
}

.form-group .form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;            /* 説明文が長くても潰れないように */
  margin: 2px 0 0;
  accent-color: var(--map-accent);
}

.form-check strong {
  display: block;
}

.form-group .form-check small {
  margin-bottom: 0;
}

/* ===========================
   押し通知まわり
   =========================== */

/* プロフィールの設定に出る「今この端末はどうなっているか」 */
.push-status {
  color: var(--map-accent);
  font-weight: 700;
  margin-top: 4px;
}

/* Inboxページの案内バー。カードより一段控えめにして、お知らせ本体を邪魔しない */
.push-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  background: var(--map-card);
  border: 1.5px dashed var(--map-border);
  border-radius: 14px;
}

/* display:flex はブラウザ標準の [hidden] を打ち消してしまうので、明示的に戻す。
   これが無いと、JSが「出さない」と決めた空の箱だけが画面に残る */
.push-banner[hidden] {
  display: none;
}

.push-banner-text {
  flex: 1 1 240px;        /* 狭い画面ではボタンが下に回り込む */
}

.push-banner-title {
  font-weight: 800;
  margin: 0 0 2px;
}

.push-banner-body {
  color: var(--map-muted);
  font-size: 14px;
  margin: 0;
}

/* リクエスト送信直後に出るお誘い */
.push-prompt {
  text-align: center;
}

.push-prompt-bell {
  font-size: 40px;
  line-height: 1;
  margin: 0 0 8px;
}

.push-prompt .form-actions {
  justify-content: center;
}

/* iPhone向けの手順。ここで諦めさせないことが一番大事なので、
   押せないボタンではなく必ず具体的な操作を並べる */
.push-ios-note {
  text-align: left;
  background: var(--map-bg);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 4px 0 14px;
}

.push-ios-title {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 8px;
}

.push-ios-steps {
  margin: 0;
  padding-left: 20px;
  color: var(--map-muted);
  font-size: 14px;
}

.push-ios-steps li {
  margin-bottom: 4px;
}

/* 送信ボタン */
button[type="submit"] {
  background-color: var(--map-accent);
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--map-radius-pill);
  cursor: pointer;           /* マウスをのせると手のアイコンに */
}

button[type="submit"]:hover {
  background-color: var(--map-accent-hover);
}

/* ===========================
   リクエストカード
   =========================== */

/* カード1枚のスタイル */
.request-card {
  position: relative;       /* 削除ボタンを右上に固定表示するため */
  background: var(--map-card);
  border-radius: var(--map-radius-card);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--map-shadow-card);
}

/* 削除ボタン（右上） */
.delete-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--map-faint);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 50%;
}

.delete-btn:hover {
  color: var(--map-error);
  background-color: rgba(192,57,43,0.08);
}

/* リクエスト一覧のページ送り */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.pagination-controls .map-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-indicator {
  font-size: var(--map-size-card, 14px);
  color: var(--map-faint);
  white-space: nowrap;
}

.pagination-indicator--top {
  margin: 0 0 12px;
}

/* カードタイトル（困りごと・アクセント色） */
.card-title {
  font-size: var(--map-size-card);
  font-weight: 800;
  line-height: 1.4;
  /* 白背景では--map-accentだとコントラスト不足のため、濃い方のアクセント色を使う */
  color: var(--map-accent-hover);
  margin: 0 40px 12px 0; /* 右側は削除ボタンとの重なりを避ける */
  overflow-wrap: break-word; /* 長い単語やURLでもカードからはみ出さない */
}

/* 長い困りごと（90字超）は、太字のアクセント色のままだと読みづらいので
   本文寄りの見た目に落とす。短い困りごとは今まで通り見出しとして目立たせる */
.card-title--long {
  font-size: var(--map-size-body);
  font-weight: 700;
  line-height: 1.7;
  color: var(--map-ink);
}

/* 長文の折りたたみ（4行だけ表示）。開いたときは -webkit-line-clamp を解除する */
.card-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.card-clamp--open {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* 折りたたんだ本文の続きを開く「…」ボタン。
   言葉ではなく点だけを出し、押せることは丸い枠と色で伝える。
   小さな画面でも指で押せるように高さを32pxとっている */
.card-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 32px;
  margin: 4px 0 0;
  padding: 0 14px;
  background: var(--map-bg);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-pill);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: var(--map-accent-hover);
  cursor: pointer;
}

.card-more-btn[hidden] {
  display: none;
}

.card-more-btn:hover {
  background: var(--map-accent-tint);
  border-color: var(--map-accent-line);
}

/* 「…」を押したときに全文を出すポップアップ */
.fulltext-modal {
  max-width: 420px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 24px 22px 20px;
}

/* 見出しは「困りごと」などの項目名なので、カード内のラベルと同じ小さな見た目にそろえる */
.fulltext-modal h2 {
  margin: 0 0 10px;
  font-size: var(--map-size-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--map-label-spacing);
  color: var(--map-muted);
}

.fulltext-modal-body {
  margin: 0 0 18px;
  font-size: var(--map-size-body);
  line-height: 1.8;
  color: var(--map-ink);
  white-space: pre-wrap; /* 投稿の改行をそのまま見せる */
  overflow-wrap: break-word;
}

.fulltext-modal-close {
  width: 100%;
}

/* Problem / Current workaround などのラベル */
.card-label {
  font-size: var(--map-size-label);
  font-weight: 800;
  text-transform: uppercase; /* 小文字で書いても大文字で表示される */
  letter-spacing: var(--map-label-spacing);
  color: var(--map-muted);
  margin: 12px 0 2px;
}

/* ラベルの下の本文 */
.card-text {
  margin: 0;
  font-size: var(--map-size-body);
  line-height: 1.5;
  overflow-wrap: break-word; /* 長い単語やURLでもカードからはみ出さない */
}

/* 投稿日 */
.card-date {
  font-size: 12px;
  color: var(--map-faint);
  margin-top: 16px;
  margin-bottom: 0;
}

/* 翻訳リンク（Google翻訳を新しいタブで開く） */
.translate-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--map-accent-hover);
  text-decoration: none;
  margin-top: 6px;
}

.translate-link:hover {
  text-decoration: underline;
}

/* スマホ幅では本文をひとまわり大きく・行間を広くして、カードの余白は少し詰める。
   （480px以上のデスクトップ表示はこれまでと変わらない） */
@media (max-width: 479px) {
  .request-card {
    padding: 18px;
  }

  .card-text,
  .card-title--long {
    font-size: 15px;
    line-height: 1.75;
  }

  .card-label {
    margin-top: 16px;
  }
}

/* I want this too ボタンエリア */
.card-want-area {
  display: flex;           /* ボタンとカウントを横並びにする */
  align-items: center;
  flex-wrap: wrap;         /* 狭い画面ではボタンを折り返す */
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--map-divider); /* 上に薄い区切り線 */
}

/* Build this ボタン（ミニアプリ作成へ誘導・緑） */
.build-btn {
  background-color: var(--map-success-tint);
  color: var(--map-success);
  border: 1.5px solid transparent; /* want-btnと高さを揃えるための透明ボーダー */
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--map-radius-pill);
  cursor: pointer;
}

.build-btn:hover {
  background-color: var(--map-success-hover);
}

/* AI用の仕様書をコピーするボタン（作り始めるための入口なので、Build thisより手前に置く） */
.prompt-btn {
  background-color: var(--map-accent);
  color: #fff;
  border: 1.5px solid transparent; /* 他のボタンと高さを揃えるための透明ボーダー */
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--map-radius-pill);
  cursor: pointer;
}

.prompt-btn:hover {
  background-color: var(--map-accent-hover);
}

/* I want this too ボタン */
.want-btn {
  background-color: var(--map-card);
  color: var(--map-accent-hover);
  border: 1.5px solid var(--map-accent-line);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--map-radius-pill);
  cursor: pointer;
}

.want-btn:hover {
  background-color: var(--map-accent-tint);
}

.want-btn--active {
  background-color: var(--map-accent);
  color: #fff;
  border-color: var(--map-accent);
}

.want-btn--active:hover {
  background-color: var(--map-accent-hover);
}

/* カウント表示 */
.want-count {
  font-size: 14px;
  color: var(--map-text-2);
  margin: 0;
}

/* ローカルカウントの注記 */
.local-note {
  font-size: 12px;
  color: var(--map-faint);
  margin-top: 8px;
}

/* ===========================
   ミニアプリフォームセクション
   =========================== */

#app-form-section {
  background: var(--map-card);
  border-radius: var(--map-radius-card);
  padding: 22px;
  margin-bottom: 40px;
  box-shadow: var(--map-shadow-card);
}

/* リクエスト検索欄とその下のselectの間に隙間を空ける */
#requestSearch {
  margin-bottom: 8px;
}

/* selectボックス（ドロップダウン） */
.form-group select {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  border: 1.5px solid var(--map-border);
  border-radius: 12px;
  box-sizing: border-box;
  background-color: var(--map-card);
  color: var(--map-ink);
}

.form-group select:focus {
  outline: none;
  border-color: var(--map-accent);
  box-shadow: var(--map-focus-ring);
}

/* ===========================
   ミニアプリカード
   =========================== */

.app-card {
  background: var(--map-card);
  border-radius: var(--map-radius-card);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--map-shadow-card);
  border-left: 4px solid var(--map-success); /* 左に緑のアクセント線（リクエストカードと区別する） */
}

/* カードの中のカテゴリバッジ */
.app-category-badge {
  display: inline-block;
  margin-bottom: 12px;
}

/* いいねバッジ（銅・銀・金） */
.app-like-badge {
  display: inline-block;
  margin-bottom: 12px;
  margin-left: 8px;
  color: #fff;
}

.app-like-badge--bronze {
  background-color: #A9673A;
}

.app-like-badge--silver {
  background-color: #8A9199;
}

.app-like-badge--gold {
  background-color: #C9971F;
}

/* いいねボタンエリア */
.card-like-area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.like-btn {
  background-color: var(--map-card);
  color: var(--map-accent-hover);
  border: 1.5px solid var(--map-accent-line);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--map-radius-pill);
  cursor: pointer;
}

.like-btn:hover {
  background-color: var(--map-accent-tint);
}

.like-btn--active {
  background-color: var(--map-accent);
  color: #fff;
  border-color: var(--map-accent);
}

.like-btn--active:hover {
  background-color: var(--map-accent-hover);
}

.like-count {
  font-size: 14px;
  color: var(--map-text-2);
  margin: 0;
}

/* 並び替えタブ（新着/トレンド/バイラル/人気）の並び。ヒーローの下・検索欄の上に単独で置かれる */
.sort-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.sort-tab {
  font-family: var(--map-font);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--map-radius-pill);
  border: 1.5px solid var(--map-accent-line);
  background: var(--map-card);
  color: var(--map-accent-hover);
  cursor: pointer;
}

.sort-tab:hover {
  background: var(--map-accent-tint);
}

.sort-tab--active {
  background: var(--map-accent);
  border-color: var(--map-accent);
  color: #fff;
}

.sort-tab--active:hover {
  background: var(--map-accent-hover);
}

/* ===========================
   カテゴリの絞り込み欄
   スマホ（既定）＝一覧の上に横スクロールのチップ
   768px以上      ＝一覧の左に縦並びのキーワード欄（下の @media で切り替える）
   =========================== */

/* 左＝カテゴリ / 右＝アプリ一覧 の入れ物。狭い画面では縦積みのまま */
.apps-layout {
  display: block;
}

.category-sidebar {
  margin-bottom: 18px;
}

/* 「Category」の小見出し。h2共通のピル型装飾ではなく、控えめなラベルにする */
.category-sidebar-title {
  font-family: var(--map-font);
  font-size: var(--map-size-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--map-faint);
  margin: 0 0 8px;
}

.category-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;          /* 横に並べて、はみ出したらスワイプで見せる */
  padding-bottom: 4px;
  scrollbar-width: none;     /* Firefox: スクロールバーを隠す */
}

.category-filters::-webkit-scrollbar {
  display: none;             /* Chrome/Safari: スクロールバーを隠す */
}

.category-chip {
  flex: 0 0 auto;            /* 横スクロール時に縮ませない */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--map-font);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--map-radius-pill);
  border: 1.5px solid var(--map-accent-line);
  background: var(--map-card);
  color: var(--map-accent-hover);
  cursor: pointer;
  white-space: nowrap;
}

.category-chip:hover {
  background: var(--map-accent-tint);
}

.category-chip--active {
  background: var(--map-success);
  border-color: var(--map-success);
  color: #fff;
}

.category-chip--active:hover {
  background: var(--map-success);
}

/* 各カテゴリのアプリ件数 */
.category-count {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

/* 今の検索条件だと0件のカテゴリは薄くする（押せないわけではない） */
.category-chip--empty {
  opacity: 0.45;
}

/* ---- 768px以上：左のキーワード欄に切り替える ---- */
@media (min-width: 768px) {
  .apps-layout {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  /* 一覧を下までスクロールしてもカテゴリが付いてくる */
  .category-sidebar {
    position: sticky;
    top: 16px;
    margin-bottom: 0;
  }

  .category-sidebar-title {
    /* 下のリスト（左の色バー3px＋余白11px）と文字の頭を揃える */
    padding: 0 0 8px 14px;
    border-bottom: 1px solid var(--map-border);
    margin-bottom: 10px;
  }

  .category-filters {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }

  /* 丸いボタンをやめて、行そのものをリストの1項目として見せる */
  .category-chip {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    text-align: left;
    white-space: normal;
    line-height: 1.35;
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 10px 7px 11px;
    border: 0;
    border-left: 3px solid transparent;  /* 選択中だけ色が付く縦バー */
    border-radius: 0 var(--map-radius-pill) var(--map-radius-pill) 0;
    background: none;
    color: var(--map-text-2);
  }

  .category-chip + .category-chip {
    margin-top: 1px;
  }

  .category-chip:hover {
    background: var(--map-accent-tint);
    color: var(--map-accent-hover);
  }

  .category-chip--active,
  .category-chip--active:hover {
    background: var(--map-success-tint);
    border-left-color: var(--map-success);
    color: var(--map-success);
    font-weight: 800;
  }

  .category-count {
    flex: none;
    color: var(--map-faint);
    opacity: 1;
  }

  .category-chip--active .category-count {
    color: var(--map-success);
    opacity: 0.8;
  }
}

/* ---- 1040px以上：ミニアプリ一覧だけ本文幅(680px)より広げて、左右のゆとりを出す ---- */
@media (min-width: 1040px) {
  #apps-list-section {
    width: min(1000px, calc(100vw - 48px));
    /* 親(680px)の中央から、広げた幅の半分だけ左に戻して中央揃えにする */
    margin-left: calc(50% - min(500px, 50vw - 24px));
  }

  .apps-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 36px;
  }
}

/* 頭文字バッジ＋アプリ名の行 */
.app-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* アプリ名リンク */
.app-name {
  display: block;
  flex: 1; /* お気に入りの星をカード右端に押し出す */
  font-size: var(--map-size-card);
  font-weight: 800;
  line-height: 1.4;
  color: var(--map-success);
  text-decoration: none;
  overflow-wrap: break-word; /* 長い単語やURLでもカードからはみ出さない */
  min-width: 0; /* 長い名前でもバッジを押し出さない */
}

/* お気に入り登録用の星ボタン（カード右端） */
.favorite-star-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  color: var(--map-border);
}

.favorite-star-btn:hover {
  transform: scale(1.15);
  color: var(--map-star);
}

.favorite-star-btn--active {
  color: var(--map-star);
}

/* アプリの頭文字バッジ（一覧で見分けやすくするための色付きアイコン） */
.app-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--map-radius-icon);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}

/* アイコン(app-icons.js)がある場合。線の色はタイルの文字色(白)をそのまま使う */
.app-avatar svg {
  width: 20px;
  height: 20px;
  display: block;
}

.app-avatar--sm {
  width: 24px;
  height: 24px;
  font-size: 12px;
  border-radius: 8px;
}

.app-avatar--sm svg {
  width: 15px;
  height: 15px;
}

/* チップ・候補リストの中に置く小さいアイコン（タイル無し・文字色をそのまま使う） */
.app-glyph {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.app-glyph svg {
  width: 14px;
  height: 14px;
  display: block;
}

.app-avatar-c0 { background-color: var(--map-accent); }
.app-avatar-c1 { background-color: var(--map-success); }
.app-avatar-c2 { background-color: var(--map-star); }
.app-avatar-c3 { background-color: var(--map-ink); }

/* 作者クレジット（アプリ名のすぐ下）。押すとその人のプロフィールへ */
.app-author {
  /* flexで独立した行にしつつ、押せる範囲は名前の幅までに留める */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin: 6px 0 10px;
  text-decoration: none;
}

.app-author:hover .app-author-name,
.app-author:focus-visible .app-author-name {
  color: var(--map-accent-hover);
  text-decoration: underline;
}

.app-author-avatar {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

/* 頭文字バッジで代用する場合も、写真アバターと同じ大きさに揃える */
.app-author .app-avatar {
  width: 20px;
  height: 20px;
  font-size: 11px;
  border-radius: 50%;
}

.app-author-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--map-text-2);
}

/* 別サイトで公開されているアプリのドメイン表示 */
.app-external-badge {
  background-color: var(--map-bg);
  color: var(--map-muted);
  border: 1px solid var(--map-border);
}

/* apps.html（JavaScript無しの全アプリ一覧）のリスト */
.all-apps-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.all-apps-item {
  padding: 14px 0;
  border-top: 1px solid var(--map-divider);
}

.all-apps-item:first-child {
  border-top: none;
}

.all-apps-link {
  font-size: 16px;
  font-weight: 800;
  color: var(--map-success);
  text-decoration: none;
}

.all-apps-link:hover {
  text-decoration: underline;
}

.all-apps-text {
  margin: 4px 0 0;
  font-size: var(--map-size-body);
  line-height: 1.5;
  color: var(--map-text-2);
}

/* ボタンの見た目（tokens.cssの.map-btn）をリンク<a>にも効かせる */
a.map-btn {
  display: inline-block;
  text-decoration: none;
}

a.map-btn--primary {
  color: #fff;
}

/* 投稿フォームの上に出す出品ガイド */
.submit-guide {
  margin-bottom: 20px;
  padding: 16px 18px;
  background-color: var(--map-accent-tint);
  border-radius: var(--map-radius-icon);
}

.submit-guide-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--map-ink);
}

.submit-guide-body {
  margin: 0;
  font-size: var(--map-size-body);
  line-height: 1.5;
  color: var(--map-text-2);
}

.submit-guide-list {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--map-text-2);
}

.app-name:hover {
  text-decoration: underline;
}

/* アプリの説明文 */
.app-description {
  color: var(--map-text-2);
  font-size: var(--map-size-body);
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Built for request の表示 */
.app-request-text {
  background-color: var(--map-success-tint);
  border-radius: 10px;
  padding: 8px 10px;
}

/* ===========================
   フォームのボタン行（送信＋キャンセル）
   =========================== */

.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ===========================
   プロフィールページ (profile.html)
   =========================== */

.profile-card {
  position: relative;
  background: var(--map-card);
  border-radius: var(--map-radius-card);
  padding: 32px 28px;
  margin-bottom: 40px;
  box-shadow: var(--map-shadow-card);
  text-align: center;
}

.profile-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.profile-avatar-lg {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--map-accent-tint);
}

.profile-avatar-lg--fallback {
  font-size: 34px;
}

.profile-handle-lg {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 22px;
  font-weight: 800;
  background: none;
  color: var(--map-ink);
  border-radius: 0;
}

.profile-bio {
  margin: 0 auto;
  color: var(--map-muted);
  font-size: 15px;
  line-height: 1.5;
  max-width: 460px;
  white-space: pre-wrap;
}

.profile-bio-empty {
  color: var(--map-faint);
  font-style: italic;
}

.profile-settings-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--map-accent-line);
  background: var(--map-card);
  color: var(--map-accent-hover);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.profile-settings-btn:hover {
  background: var(--map-accent-tint);
}

/* ===========================
   Your Apps セクション（トップページの元の一覧。今はprofile.htmlのPortfolioにも使う）
   =========================== */

#your-apps-section {
  margin-bottom: 40px;
}

/* Your Apps カード内の編集・削除ボタン行 */
.card-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--map-divider);
}

/* この行の中では、通常は右上に絶対配置される.delete-btnを
   ボタン行の一部として並べたいので配置方法だけ打ち消す */
.card-edit-actions .delete-btn {
  position: static;
  border: 1.5px solid var(--map-accent-line);
  border-radius: var(--map-radius-pill);
  padding: 10px 16px;
  font-size: 14px;
}

/* ===========================
   リクエストカード内のアプリ表示
   =========================== */

.card-linked-apps {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--map-divider);
}

/* 紐づいたアプリへのリンク（公式リンク＝緑のチップ） */
.linked-app-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: var(--map-success-tint);
  color: var(--map-success);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--map-radius-pill);
  margin-right: 8px;
  margin-top: 6px;
}

.linked-app-link:hover {
  background-color: var(--map-success-hover);
}

/* ===========================
   関連アプリの提案（吹き出し）
   =========================== */

.card-related-apps {
  margin-top: 12px;
}

/* 吹き出し本体 */
.related-bubble {
  position: relative;
  background-color: var(--map-bg);   /* ページ背景色でやわらかく馴染ませる */
  border: 1.5px dashed var(--map-border);
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 8px;
}

/* 吹き出しの三角（上に付ける） */
.related-bubble::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 16px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--map-bg);
}

.related-bubble-label {
  font-size: var(--map-size-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--map-label-spacing);
  color: var(--map-muted);
  margin: 0 0 6px;
}

/* 提案リンクはアウトラインのチップ（＝まだ確定していない候補という見た目） */
.related-app-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: var(--map-card);
  color: var(--map-accent-hover);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--map-radius-pill);
  border: 1.5px solid var(--map-accent-line);
  margin-right: 8px;
  margin-top: 4px;
}

.related-app-link:hover {
  background-color: var(--map-accent-tint);
}

/* ===========================
   データ共有セクション
   =========================== */

#data-section {
  background: var(--map-card);
  border-radius: var(--map-radius-card);
  padding: 22px;
  margin-bottom: 40px;
  box-shadow: var(--map-shadow-card);
}

.data-note {
  font-size: var(--map-size-body);
  line-height: 1.5;
  color: var(--map-text-2);
  margin: 0 0 16px;
}

/* ヒーロー：キャッチコピー＋Request/Build/Shelfの3シーン */
.hero {
  text-align: center;
  padding: 8px 4px 4px;
  margin-bottom: 40px;
}

.hero-tagline {
  font-size: clamp(22px, 4.4vw, 34px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--map-ink);
  margin: 0 auto 34px;
  max-width: 22ch;
  text-wrap: pretty;
}

.hero-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .hero-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hero-step {
  background: var(--map-card);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-card);
  box-shadow: var(--map-shadow-card);
  padding: 16px 18px 18px;
  text-align: left;
}

.hero-scene {
  position: relative;
  height: 150px;
}
.hero-scene--clip {
  overflow: hidden;
}

.hero-mascot {
  position: absolute;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(60, 40, 20, 0.12));
}
.hero-mascot--talk {
  left: 2px;
  bottom: 0;
  width: 104px;
  transform-origin: 50% 92%;
  animation: cwTalk 3s ease-in-out infinite;
}
.hero-mascot--hammer {
  left: 50%;
  margin-left: -62px;
  bottom: 22px;
  width: 124px;
  transform-origin: 46% 96%;
  animation: cwHammer 1.5s ease-in-out infinite;
}
.hero-mascot--offer {
  left: 0;
  bottom: 14px;
  width: 100px;
  transform-origin: 50% 92%;
  animation: cwOffer 2.6s ease-in-out infinite;
}

.hero-shadow {
  position: absolute;
  left: 6px;
  bottom: -2px;
  width: 110px;
  height: 12px;
  border-radius: 50%;
  background: rgba(61, 50, 41, 0.07);
}

.hero-bubble {
  position: absolute;
  right: 0;
  top: 8px;
  width: 150px;
  background: var(--map-bg);
  border: 1.5px dashed var(--map-accent-line);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--map-text-2);
  line-height: 1.45;
}
.hero-bubble-dots {
  display: flex;
  gap: 3px;
  margin-top: 7px;
}
.hero-bubble-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--map-accent);
  display: inline-block;
  animation: cwDots 1.2s ease-in-out infinite;
}
.hero-bubble-dots span:nth-child(2) { animation-delay: 0.2s; }
.hero-bubble-dots span:nth-child(3) { animation-delay: 0.4s; }

.hero-chip {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  animation: cwChip 1.5s ease-out infinite;
}
.hero-chip--a { right: 56px; bottom: 74px; background: #A8B6C4; }
.hero-chip--b { right: 48px; bottom: 70px; width: 6px; height: 6px; background: #8FA97F; animation-delay: 0.5s; }

.hero-bench {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  background: var(--map-bg);
  border-top: 2px solid var(--map-border);
  border-radius: 6px 6px 0 0;
}
.hero-bench-screen {
  position: absolute;
  left: 14px; bottom: 6px;
  width: 44px; height: 22px;
  border-radius: 6px;
  background: var(--map-card);
  border: 1.5px solid var(--map-accent-line);
  display: grid;
  place-items: center;
}
.hero-bench-screen span {
  width: 22px; height: 3px;
  border-radius: 2px;
  background: var(--map-accent-tint);
}
.hero-bench-swatch {
  position: absolute;
  right: 16px; bottom: 8px;
  width: 26px; height: 18px;
  border-radius: 5px;
  background: var(--map-accent-tint);
  border: 1.5px dashed var(--map-accent-line);
}

.hero-fly-chip {
  position: absolute;
  left: 78px; bottom: 74px;
  width: 26px; height: 20px;
  border-radius: 5px;
  background: var(--map-accent-tint);
  border: 1.5px solid var(--map-accent-line);
  animation: cwFly 2.8s ease-in-out infinite;
}
.hero-shelf {
  position: absolute;
  right: 0; top: 16px;
  width: 118px;
}
.hero-shelf-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 5px;
  margin-bottom: 5px;
}
.hero-shelf-row span {
  width: 26px;
  border-radius: 6px;
  background: var(--map-bg);
  border: 1px solid var(--map-border);
}
.hero-shelf-row .t1 { height: 22px; }
.hero-shelf-row .t2 { height: 30px; background: var(--map-accent-tint); border-color: var(--map-accent-line); }
.hero-shelf-row .t3 { height: 18px; }
.hero-shelf-row .t4 { height: 20px; }
.hero-shelf-row .t5 { height: 26px; }
.hero-shelf-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--map-border);
}

.hero-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-weight: 800;
  font-size: 16px;
  color: var(--map-ink);
}
.hero-step-num {
  font-size: 11px;
  font-weight: 800;
  color: var(--map-faint);
}
.hero-step-desc {
  font-size: 12.5px;
  color: var(--map-muted);
  line-height: 1.5;
  margin-top: 2px;
}

@keyframes cwTalk {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(-4px); }
}
@keyframes cwHammer {
  0%, 100% { transform: rotate(-1deg); }
  45% { transform: rotate(-8deg) translateY(2px); }
  70% { transform: rotate(2deg); }
}
@keyframes cwOffer {
  0%, 100% { transform: rotate(3deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-6px); }
}
@keyframes cwDots {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
@keyframes cwFly {
  0% { transform: translate(0, 0) rotate(-8deg); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(84px, -26px) rotate(6deg); opacity: 0; }
}
@keyframes cwChip {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translate(14px, -22px) scale(1) rotate(40deg); opacity: 0; }
}

/* ログインすれば使えること・無料であることを伝える案内ボックス */
.signin-callout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--map-accent-tint);
  border: 1.5px dashed var(--map-accent-line);
  border-radius: var(--map-radius-card);
  padding: 18px 20px;
  margin-bottom: 20px;
}

.signin-callout[hidden] {
  display: none;
}

.signin-callout-icon {
  font-size: 26px;
  flex-shrink: 0;
}

.signin-callout-text {
  flex: 1;
  min-width: 200px;
}

.signin-callout-title {
  margin: 0 0 2px;
  font-weight: 800;
  color: var(--map-ink);
}

.signin-callout-body {
  margin: 0;
  font-size: 13px;
  color: var(--map-text-2);
}

.data-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap; /* 狭い画面ではボタンを折り返す */
}

/* ===========================
   サイドバー（最近使った／人気のアプリ）
   =========================== */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-section {
  background: var(--map-card);
  border-radius: var(--map-radius-card);
  padding: 20px;
  box-shadow: var(--map-shadow-card);
}

.sidebar-section h2 {
  font-size: 16px;
  margin-bottom: 8px;
}

.sidebar-app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--map-divider);
}

.sidebar-app-row:last-child {
  border-bottom: none;
}

.sidebar-app-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0; /* 長い名前でも省略や折り返しができるようにする */
}

.sidebar-app-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--map-success);
  text-decoration: none;
  overflow-wrap: break-word;
}

.sidebar-app-link:hover {
  text-decoration: underline;
}

.sidebar-app-meta {
  font-size: 12px;
  color: var(--map-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar-empty {
  font-size: 13px;
  color: var(--map-faint);
  margin: 0;
}

/* ===========================
   トースト（画面下の通知）
   見た目はtokens.cssの.map-toast、ここでは位置と動きだけ指定
   =========================== */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: calc(100vw - 32px); /* 狭い画面でも画面からはみ出さない */
  box-sizing: border-box;
  text-align: center;
  animation: toast-in 0.2s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* アニメーションを減らす設定のユーザーには動きを付けない */
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

/* ===========================
   星評価
   =========================== */

.star-rating-area {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--map-divider);
}

/* 平均点の表示行 */
.star-average-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* 平均を示す星（金色） */
.average-stars {
  position: relative;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 2px;
}

.average-stars .stars-back {
  color: var(--map-border);
}

.average-stars .stars-front {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--map-star);
}

/* 平均点と件数のテキスト */
.rating-info {
  font-size: 13px;
  color: var(--map-muted);
}

/* クリックして評価する行 */
.star-rate-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rate-label {
  font-size: 13px;
  color: var(--map-faint);
}

/* クリック可能な星ボタン */
.star-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--map-star);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.star-btn:hover {
  transform: scale(1.2); /* ホバー時に少し大きくする */
}

/* ===========================
   コメント（作者へのフィードバック）
   =========================== */

.comments-area {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--map-divider);
}

.comments-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--map-accent-hover);
  cursor: pointer;
}

.comments-toggle:hover {
  text-decoration: underline;
}

.comments-panel {
  margin-top: 12px;
}

.comments-list {
  margin-bottom: 12px;
}

.comments-empty {
  font-size: 13px;
  color: var(--map-faint);
  margin: 0;
}

.comment-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--map-divider);
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-text {
  font-size: var(--map-size-body);
  line-height: 1.5;
  margin: 0 0 4px;
  overflow-wrap: break-word;
}

.comment-meta {
  font-size: 12px;
  color: var(--map-faint);
  margin: 0;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-form textarea,
.comment-form input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  border: 1.5px solid var(--map-border);
  border-radius: 12px;
  box-sizing: border-box;
  background-color: var(--map-card);
  color: var(--map-ink);
}

.comment-form textarea {
  height: 60px;
  resize: vertical;
}

.comment-form textarea:focus,
.comment-form input[type="text"]:focus {
  outline: none;
  border-color: var(--map-accent);
  box-shadow: var(--map-focus-ring);
}

.comment-form button[type="submit"] {
  align-self: flex-start;
}

/* --- リクエストへのアイデア（作る前の機能提案）--- */
/* 見た目はアプリのコメント欄に揃えつつ、電球の色味だけ少し変える */

.ideas-area {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--map-divider);
}

.ideas-panel {
  margin-top: 12px;
}

.ideas-list {
  margin-bottom: 12px;
}

.idea-item {
  position: relative;
  padding: 10px 28px 10px 0; /* 右側は削除ボタンのぶん空けておく */
  border-bottom: 1px solid var(--map-divider);
}

.idea-item:last-child {
  border-bottom: none;
}

.idea-delete-btn {
  position: absolute;
  top: 8px;
  right: 0;
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 13px;
  line-height: 1;
  opacity: 0.45;
  cursor: pointer;
}

.idea-delete-btn:hover {
  opacity: 1;
}

.ideas-signin-note {
  font-size: 13px;
  color: var(--map-faint);
  margin: 0;
}

/* Matchingのカードの下に並ぶ「♡ / 💡」 */
.swipe-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.swipe-card-actions .swipe-want-btn {
  margin-top: 0;
}

.swipe-ideas-btn {
  background: var(--map-card);
  color: var(--map-accent-hover);
  border: 1.5px solid var(--map-accent-line);
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--map-radius-pill);
  cursor: pointer;
}

.swipe-ideas-btn:hover {
  background: var(--map-accent-tint);
}

/* アイデア用モーダル：一覧が伸びても画面からはみ出さないようにする */
.ideas-modal {
  text-align: left;
  max-height: 85vh;
  overflow-y: auto;
}

.ideas-modal #ideasPanelHost {
  margin-top: 4px;
}

/* 「スワイプに戻る」を本文の左端に揃える */
.ideas-modal .claim-modal-skip {
  margin-top: 14px;
  padding-left: 0;
}

.comment-reply {
  margin: 8px 0 0 16px;
  padding: 8px 12px;
  border-left: 2px solid var(--map-accent);
  background-color: var(--map-bg);
  border-radius: 8px;
}

.comment-reply-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--map-accent-hover);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.comment-reply-btn {
  background: none;
  border: none;
  padding: 0;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--map-accent-hover);
  cursor: pointer;
}

.comment-reply-btn:hover {
  text-decoration: underline;
}

.comment-reply-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.comment-reply-form textarea {
  width: 100%;
  height: 50px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  border: 1.5px solid var(--map-border);
  border-radius: 12px;
  box-sizing: border-box;
  background-color: var(--map-card);
  color: var(--map-ink);
  resize: vertical;
}

.comment-reply-form textarea:focus {
  outline: none;
  border-color: var(--map-accent);
  box-shadow: var(--map-focus-ring);
}

.comment-reply-form button[type="submit"] {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   運営が用意したコンテンツであることを示すバッジ
   （シードリクエスト = サンプル / 運営コメント = 運営）
   一般ユーザーの投稿と必ず見分けが付くようにするためのもの。
   -------------------------------------------------------------------------- */

/* リクエストカードの「サンプル」バッジ */
.card-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.card-badge--seed {
  color: var(--map-faint);
  background-color: var(--map-bg);
  border: 1px solid var(--map-border);
}

/* 運営コメント：左のアクセント線で、一般コメントと視覚的に区別する */
.comment-item--official {
  padding-left: 12px;
  border-left: 3px solid var(--map-accent);
  background-color: var(--map-bg);
  border-radius: 8px;
  margin-bottom: 8px;
}

.comment-official-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background-color: var(--map-accent);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}

/* ===========================================================
   グローバルナビ（全ページ共通の移動タブ）
   PC：ヘッダー内のタブ　／　スマホ：画面下に固定されるタブバー
   =========================================================== */
.site-nav {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding: 6px;
  background: var(--map-card);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-pill);
  box-shadow: var(--map-shadow-card);
}

.site-nav-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--map-radius-pill);
  font-size: 15px;
  font-weight: 800;
  color: var(--map-text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.site-nav-item svg {
  flex-shrink: 0;
}

.site-nav-item:hover {
  background: var(--map-accent-tint);
  color: var(--map-accent-hover);
}

/* 今いるページのタブは塗りつぶして、どこにいるかをはっきりさせる */
.site-nav-item[aria-current="page"] {
  background: var(--map-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(217, 112, 76, 0.28);
}

.site-nav-item:focus-visible {
  outline: 2px solid var(--map-accent);
  outline-offset: 2px;
}

/* スマホでしか出さないタブ（プロフィール）はPCでは隠す */
.site-nav-item--mobile {
  display: none;
}

/* スマホ：画面下に固定するタブバーに切り替える */
@media (max-width: 639px) {
  body {
    padding-bottom: 92px;
  }

  /* 下タブバーは<header>の中にあるが、headerとmainはどちらもz-index:1。
     同じ値だと後ろに書かれているmainが上に描かれてしまい、
     スクロール中に本文がタブバーに重なって読めなくなる。
     この幅のときだけheaderを前に出して、本文がタブバーの下を通るようにする */
  body > header {
    z-index: 40;
  }

  .site-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    margin-top: 0;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border: none;
    border-top: 1px solid var(--map-border);
    border-radius: 0;
    box-shadow: 0 -6px 20px rgba(60, 40, 20, 0.10);
  }

  .site-nav-item {
    flex-direction: column;
    gap: 3px;
    padding: 7px 4px;
    font-size: 11px;
  }

  .site-nav-item--mobile {
    display: flex;
  }

  .site-nav-item[aria-current="page"] {
    background: var(--map-accent-tint);
    color: var(--map-accent-hover);
    box-shadow: none;
  }
}

/* ===========================================================
   使い方ガイド：ヒーロー下のボタンと、画面に重なる説明モーダル
   =========================================================== */
.hero-cta {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

.guide-open-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--map-font);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: var(--map-accent);
  border: none;
  border-radius: var(--map-radius-pill);
  box-shadow: 0 6px 18px rgba(217, 112, 76, 0.30);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.guide-open-btn:hover {
  background: var(--map-accent-hover);
  transform: translateY(-1px);
}

/* ボタンの外側に広がる輪。初見の人の目を引くための控えめな合図 */
.guide-open-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--map-radius-pill);
  border: 2px solid var(--map-accent);
  opacity: 0;
  animation: cwGuidePulse 2.8s ease-out infinite;
  pointer-events: none;
}

@keyframes cwGuidePulse {
  0% { transform: scale(1); opacity: 0.55; }
  70% { transform: scale(1.12); opacity: 0; }
  100% { opacity: 0; }
}

.guide-open-btn-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 10px;
}

/* モーダル本体 */
.guide-modal {
  position: relative;
  background: var(--map-card);
  border-radius: var(--map-radius-modal);
  box-shadow: var(--map-shadow-modal);
  padding: 26px 24px 20px;
  max-width: 440px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.guide-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  color: var(--map-muted);
  background: var(--map-bg);
  border: 1px solid var(--map-border);
  border-radius: 50%;
  cursor: pointer;
}

.guide-close:hover {
  color: var(--map-ink);
  background: var(--map-accent-tint);
}

.guide-slide[hidden] {
  display: none;
}

.guide-slide {
  animation: cwGuideSlideIn 0.28s ease;
  text-align: center;
}

@keyframes cwGuideSlideIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* スライドの絵。ヒーローと同じ動きの部品をそのまま使い回す */
.guide-scene {
  position: relative;
  height: 172px;
  margin: 8px auto 0;
  max-width: 300px;
  background: var(--map-bg);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-card);
  overflow: hidden;
}

/* ガイドの中では、ヒーローの絵を少し内側に寄せて枠に収める */
.guide-scene .hero-mascot--talk { left: 10px; bottom: 46px; width: 92px; }
.guide-scene .hero-bubble { right: 10px; top: 14px; width: 148px; }
.guide-scene .hero-mascot--hammer { bottom: 30px; width: 116px; }
.guide-scene .hero-bench { border-radius: 0; }
.guide-scene .hero-chip--a { right: 74px; bottom: 78px; }
.guide-scene .hero-chip--b { right: 66px; bottom: 74px; }

/* 1枚目：検索欄のモック（カーソルが点滅する） */
.guide-searchbar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--map-card);
  border: 1.5px solid var(--map-accent-line);
  border-radius: var(--map-radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--map-faint);
}

.guide-caret {
  width: 1.5px;
  height: 13px;
  background: var(--map-accent);
  animation: cwCaret 1.1s step-end infinite;
}

@keyframes cwCaret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* 3枚目：スマホの中でアプリを使い、♡と★が飛ぶ */
.guide-scene .hero-mascot--offer { left: 12px; bottom: 18px; width: 88px; }

.guide-phone {
  position: absolute;
  box-sizing: border-box; /* 枠線と余白を含めた高さにして、絵の枠からはみ出さないようにする */
  right: 26px;
  top: 20px;
  width: 98px;
  height: 132px;
  padding: 12px 10px;
  background: var(--map-card);
  border: 2px solid var(--map-border);
  border-radius: 16px;
  box-shadow: var(--map-shadow-card);
}

.guide-phone-row {
  height: 9px;
  border-radius: 3px;
  background: var(--map-border);
  margin-bottom: 8px;
  animation: cwRowIn 3.2s ease-in-out infinite;
}

.guide-phone-row:nth-child(1) { width: 62%; background: var(--map-accent-tint); }
.guide-phone-row:nth-child(2) { width: 100%; animation-delay: 0.3s; }
.guide-phone-row:nth-child(3) { width: 84%; animation-delay: 0.6s; }
.guide-phone-row:nth-child(4) { width: 92%; animation-delay: 0.9s; }

@keyframes cwRowIn {
  0%, 100% { opacity: 0.45; }
  40%, 70% { opacity: 1; }
}

.guide-phone-fav {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--map-accent);
  background: var(--map-accent-tint);
  border-radius: 50%;
  animation: cwFavTap 3.2s ease-in-out infinite;
}

@keyframes cwFavTap {
  0%, 55%, 100% { transform: scale(1); }
  65% { transform: scale(0.82); }
  75% { transform: scale(1.18); }
}

.guide-pop {
  position: absolute;
  font-size: 15px;
  opacity: 0;
  animation: cwPop 3.2s ease-out infinite;
}

.guide-pop--heart { right: 34px; bottom: 44px; color: var(--map-accent); animation-delay: 0.1s; }
.guide-pop--star  { right: 58px; bottom: 50px; color: var(--map-star); animation-delay: 0.45s; }

@keyframes cwPop {
  0%, 55% { transform: translateY(0) scale(0.6); opacity: 0; }
  70% { transform: translateY(-14px) scale(1); opacity: 1; }
  100% { transform: translateY(-34px) scale(0.9); opacity: 0; }
}

.guide-step-label {
  display: inline-block;
  margin-top: 16px;
  padding: 3px 12px;
  font-size: var(--map-size-label);
  font-weight: 800;
  letter-spacing: var(--map-label-spacing);
  text-transform: uppercase;
  color: var(--map-accent-hover);
  background: var(--map-accent-tint);
  border-radius: var(--map-radius-pill);
}

.guide-slide h3 {
  margin: 10px 0 6px;
  font-size: 19px;
  font-weight: 800;
  color: var(--map-ink);
}

.guide-slide p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--map-text-2);
}

/* 下段：戻る／進むボタンと、今が何枚目かを示す点 */
.guide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--map-divider);
}

.guide-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: var(--map-font);
  font-size: 14px;
  font-weight: 800;
  border-radius: var(--map-radius-pill);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.guide-nav-btn--prev {
  color: var(--map-text-2);
  background: var(--map-bg);
  border: 1px solid var(--map-border);
}

.guide-nav-btn--prev:hover:not(:disabled) {
  background: var(--map-accent-tint);
}

.guide-nav-btn--prev:disabled {
  opacity: 0.35;
  cursor: default;
}

.guide-nav-btn--next {
  color: #fff;
  background: var(--map-accent);
  border: none;
  box-shadow: 0 4px 12px rgba(217, 112, 76, 0.28);
}

.guide-nav-btn--next:hover {
  background: var(--map-accent-hover);
}

.guide-dots {
  display: flex;
  gap: 7px;
}

.guide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--map-border);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.guide-dot--active {
  background: var(--map-accent);
  transform: scale(1.25);
}

@media (max-width: 479px) {
  .guide-modal {
    padding: 22px 16px 16px;
  }
  .guide-nav-btn {
    padding: 10px 14px;
  }
}

/* 動きを減らす設定のときは、ガイドのアニメーションも止める */
@media (prefers-reduced-motion: reduce) {
  .guide-open-btn::after,
  .guide-slide,
  .guide-caret,
  .guide-phone-row,
  .guide-phone-fav,
  .guide-pop {
    animation: none;
  }
  .guide-pop {
    opacity: 1;
  }
}

/* ===========================
   Matching（リクエストを1枚ずつ判定する画面）
   =========================== */

/* ページ見出しだけ、カードをめくる感じのアンダーラインを付ける */
.matching-title {
  position: relative;
  display: inline-block;
}
.matching-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--map-accent) 0 34%, var(--map-accent-line) 34% 67%, var(--map-border) 67% 100%);
}

.matching-main {
  max-width: 460px;
}

.matching-main .signin-callout {
  margin-bottom: 20px;
}

/* カードが重なって置かれる場所。中身の高さに関わらず場所を確保しておく */
.matching-stage {
  position: relative;
  min-height: 420px;
  margin-bottom: 20px;
}

.matching-deck {
  position: relative;
  height: 420px;
}

/* --- 山札を配る前の「探しています」演出 --- */
.matching-searching {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 30px 24px;
  box-sizing: border-box;
  text-align: center;
  background: var(--map-card);
  border: 1.5px dashed var(--map-border);
  border-radius: var(--map-radius-card);
}
.matching-searching[hidden] {
  display: none;
}

/* 中心のマスコットから輪が広がっていく、レーダーのような絵 */
.matching-radar {
  position: relative;
  width: 176px;
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.matching-radar-ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--map-accent);
  border-radius: 50%;
  opacity: 0;
  animation: radar-pulse 2.1s ease-out infinite;
}
/* 3本の輪を時間差で出すと、ずっと広がり続けているように見える */
.matching-radar-ring:nth-of-type(2) { animation-delay: 0.7s; }
.matching-radar-ring:nth-of-type(3) { animation-delay: 1.4s; }

/* ぐるっと一周する光。探している最中らしさを足す */
.matching-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 296deg, var(--map-accent-tint) 330deg, transparent 360deg);
  animation: radar-sweep 2.4s linear infinite;
}

.matching-radar-mascot {
  position: relative;
  width: 62px;
  height: auto;
  animation: radar-bob 1.8s ease-in-out infinite;
}

@keyframes radar-pulse {
  0%   { transform: scale(0.3); opacity: 0; }
  18%  { opacity: 0.7; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes radar-sweep {
  to { transform: rotate(360deg); }
}
@keyframes radar-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.matching-searching-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}

.matching-searching-body {
  margin: 0;
  max-width: 300px;
  font-size: var(--map-size-body);
  line-height: 1.6;
  color: var(--map-text-2);
}

/* --- カード1枚 --- */
.swipe-card {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 26px 24px 22px;
  background: var(--map-card);
  border: 1.5px solid var(--map-border);
  border-radius: var(--map-radius-card);
  box-shadow: var(--map-shadow-card);
  /* 奥のカードほど小さく・下にずらして、山札に見せる */
  transform: translateY(calc(var(--depth, 0) * 18px)) scale(calc(1 - var(--depth, 0) * 0.035));
  transition: transform 0.25s ease, opacity 0.25s ease;
  user-select: none;
}

/* 探し終わった直後だけ、下から配られたように出てくる。
   backwards にしているのは、動きが終わったあとに元の位置指定へ戻すため
   （そうしないとドラッグ中の移動が上書きされてしまう） */
.swipe-card--dealing {
  animation: card-deal-in 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  animation-delay: var(--deal-delay, 0ms);
}

@keyframes card-deal-in {
  from {
    opacity: 0;
    transform: translateY(calc(var(--depth, 0) * 18px + 38px))
               scale(calc(1 - var(--depth, 0) * 0.035))
               rotate(-4deg);
  }
  to {
    opacity: 1;
    transform: translateY(calc(var(--depth, 0) * 18px))
               scale(calc(1 - var(--depth, 0) * 0.035))
               rotate(0deg);
  }
}

/* 一番手前の1枚だけ触れる。他はクリックを素通りさせる */
.swipe-card:not(.swipe-card--top) {
  pointer-events: none;
}

.swipe-card--top {
  cursor: grab;
  box-shadow: 0 12px 30px rgba(60,40,20,0.14);
  touch-action: pan-y; /* 横は自前で処理し、縦スクロールはブラウザに任せる */
}

/* ドラッグ中は指に即ついてくるよう、アニメーションを切る */
.swipe-card--dragging {
  cursor: grabbing;
  transition: none;
}

.swipe-card--leaving {
  transition: transform 0.26s ease-in, opacity 0.26s ease-in;
}

/* --- ドラッグ中に浮かぶスタンプ --- */
.swipe-stamp {
  position: absolute;
  top: 18px;
  opacity: 0;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 10px;
  border: 3px solid currentColor;
  pointer-events: none;
}
.swipe-stamp--nope {
  right: 20px;
  color: var(--map-muted);
  transform: rotate(14deg);
}
.swipe-stamp--yes {
  left: 20px;
  color: var(--map-success);
  transform: rotate(-14deg);
}

/* --- カードの中身 --- */
.swipe-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.swipe-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--map-radius-pill);
  background: var(--map-accent-tint);
  color: var(--map-accent-hover);
}
.swipe-chip--seed {
  background: var(--map-divider);
  color: var(--map-muted);
}
.swipe-chip--built {
  background: var(--map-success-tint);
  color: var(--map-success);
}

.swipe-card-problem {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--map-ink);
}
/* 長い困りごとは少し小さくして、カードに収まるようにする */
.swipe-card-problem--long {
  font-size: 16px;
}

.swipe-card-label {
  margin: 8px 0 0;
  font-size: var(--map-size-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--map-label-spacing);
  color: var(--map-faint);
}

.swipe-card-features {
  margin: 0;
  font-size: var(--map-size-body);
  line-height: 1.6;
  color: var(--map-text-2);
  /* はみ出す長文は途中で切る。全文はRequestsページで読める */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.swipe-card-meta {
  margin: auto 0 0; /* 下端に寄せる */
  font-size: 12px;
  color: var(--map-faint);
}

.swipe-want-btn {
  align-self: flex-start;
  margin-top: 10px;
  background: var(--map-card);
  color: var(--map-accent-hover);
  border: 1.5px solid var(--map-accent-line);
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--map-radius-pill);
  cursor: pointer;
}
.swipe-want-btn:hover {
  background: var(--map-accent-tint);
}
.swipe-want-btn--active {
  background: var(--map-accent);
  border-color: var(--map-accent);
  color: #fff;
}

/* --- 判定ボタン --- */
/* hidden属性を付けたときに確実に消えるようにする（display:flexが打ち消してしまうため） */
.matching-controls[hidden],
.matching-empty[hidden] {
  display: none;
}

.matching-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.match-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  padding: 13px 22px;
  border-radius: var(--map-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.match-btn:hover  { transform: translateY(-1px); }
.match-btn:active { transform: translateY(1px); }

.match-btn-icon { font-size: 16px; }

.match-btn--skip {
  background: var(--map-card);
  color: var(--map-muted);
  border-color: var(--map-border);
}
.match-btn--skip:hover {
  color: var(--map-ink);
  border-color: var(--map-faint);
}

.match-btn--build {
  background: var(--map-accent);
  color: #fff;
}
.match-btn--build:hover {
  background: var(--map-accent-hover);
}

.match-btn--undo {
  padding: 11px 14px;
  font-size: 17px;
  background: transparent;
  color: var(--map-faint);
  border-color: var(--map-border);
}
.match-btn--undo:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.matching-counter {
  margin: 14px 0 2px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--map-muted);
}

.matching-hint {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--map-faint);
}

/* --- 山札を配り切ったとき --- */
.matching-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 24px;
  box-sizing: border-box;
  text-align: center;
  background: var(--map-card);
  border: 1.5px dashed var(--map-border);
  border-radius: var(--map-radius-card);
}

.matching-empty-mascot {
  width: 88px;
  height: auto;
  opacity: 0.9;
}

.matching-empty-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.matching-empty-body {
  margin: 0;
  max-width: 320px;
  font-size: var(--map-size-body);
  line-height: 1.6;
  color: var(--map-text-2);
}

.matching-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.matching-empty-actions .map-btn {
  text-decoration: none;
  display: inline-block;
}

/* --- 「作る」直後に出る案内 --- */
.claim-modal {
  text-align: center;
}

.claim-modal-mark {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 6px;
}

.claim-modal-request {
  margin: 14px 0 18px;
  padding: 12px 14px;
  font-size: var(--map-size-body);
  line-height: 1.5;
  text-align: left;
  color: var(--map-ink);
  background: var(--map-bg);
  border-left: 3px solid var(--map-accent);
  border-radius: 0 10px 10px 0;
}

.claim-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.claim-modal-actions .map-btn {
  text-decoration: none;
  text-align: center;
}

.claim-modal-skip {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--map-muted);
  cursor: pointer;
  padding: 4px;
}
.claim-modal-skip:hover {
  color: var(--map-ink);
}

/* リクエスト一覧のカードに出る「🔨 2人が制作中」の札 */
.making-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--map-radius-pill);
  background: var(--map-accent-tint);
  color: var(--map-accent-hover);
}

/* 狭い画面ではカードを少し低くして、ボタンが画面内に収まるようにする */
@media (max-width: 480px) {
  .matching-stage,
  .matching-deck {
    min-height: 380px;
    height: 380px;
  }
  .swipe-card {
    padding: 22px 18px 18px;
  }
  .matching-radar {
    width: 148px;
    height: 148px;
  }
  .swipe-card-problem {
    font-size: 18px;
  }
  .match-btn {
    font-size: 14px;
    padding: 12px 18px;
  }
}

/* 動きを減らす設定の人には、カードを飛ばすアニメーションを出さない */
@media (prefers-reduced-motion: reduce) {
  .swipe-card,
  .swipe-card--leaving {
    transition: none;
  }
  /* 探しています演出の動きも止める（表示自体は残す） */
  .matching-radar-ring,
  .matching-radar-sweep,
  .matching-radar-mascot,
  .swipe-card--dealing {
    animation: none;
  }
  .matching-radar-ring {
    opacity: 0.35;
  }
}

/* ===========================
   ランディング（index.html の上半分）
   下の #board が今までの実画面。ここはその手前に置く紹介部分。
   色・角丸は tokens.css の変数をそのまま使う。
   =========================== */

.lp {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 見出しだけセリフ体。本文は今までどおり Nunito */
.lp-title,
.lp-h2,
.lp-count b {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.16;
}

.lp-brow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--map-accent-hover);
}
.lp-brow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--map-accent);
  flex: none;
}

.lp-h2 { margin: 0 0 10px; font-size: 30px; color: var(--map-ink); text-wrap: balance; }
.lp-lead { margin: 0; font-size: 15px; color: var(--map-text-2); max-width: 56ch; line-height: 1.65; }
.lp-fine { margin: 14px 0 0; font-size: 13px; color: var(--map-muted); line-height: 1.65; }

.lp-btn {
  display: inline-block;
  border-radius: var(--map-radius-pill);
  font-weight: 800;
  font-size: 15px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.lp-btn--pri { background: var(--map-accent); color: #fff; border-color: var(--map-accent); }
.lp-btn--pri:hover { background: var(--map-accent-hover); border-color: var(--map-accent-hover); }
.lp-btn--sec { background: var(--map-card); color: var(--map-accent-hover); border-color: var(--map-accent-line); }
.lp-btn--sec:hover { background: var(--map-accent-tint); }

/* ---- ヒーロー ---- */
.lp-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  padding: 44px 0 36px;
}
.lp-title { margin: 0 0 16px; font-size: 46px; color: var(--map-ink); text-wrap: balance; }
.lp-title em { font-style: normal; color: var(--map-accent-hover); }
.lp-sub { margin: 0 0 24px; font-size: 16px; color: var(--map-text-2); max-width: 32ch; line-height: 1.6; }
.lp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }


/* ヒーロー右のミニアプリ見本 */
.lp-demo {
  background: var(--map-card);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-card);
  padding: 22px;
  box-shadow: 0 16px 44px rgba(60, 40, 20, 0.12);
}
.lp-demo-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lp-demo-title b { display: block; font-size: 17px; font-weight: 800; }
.lp-demo-title i { font-style: normal; font-size: 12.5px; color: var(--map-muted); }
.lp-demo-bar { height: 8px; background: var(--map-divider); border-radius: var(--map-radius-pill); overflow: hidden; margin-bottom: 16px; }
.lp-demo-bar i { display: block; height: 100%; width: 62%; background: var(--map-success); border-radius: var(--map-radius-pill); }
.lp-demo-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--map-divider); font-size: 15px; }
.lp-demo-row:last-child { border-bottom: none; }
.lp-demo-box { width: 18px; height: 18px; border-radius: 6px; border: 1.8px solid var(--map-accent-line); flex: none; }
.lp-demo-box--on { background: var(--map-success); border-color: var(--map-success); position: relative; }
.lp-demo-box--on::after {
  content: "✓";
  position: absolute; inset: 0;
  color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.lp-demo-row--done span:last-child { color: var(--map-faint); text-decoration: line-through; }

/* ---- 信頼バンド ---- */
.lp-band {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  background: var(--map-card);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-card);
  padding: 22px 28px;
}
.lp-count { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.lp-count b { font-size: 42px; color: var(--map-accent-hover); }
.lp-count span { font-size: 13.5px; color: var(--map-text-2); font-weight: 700; line-height: 1.35; }
.lp-facts { display: flex; gap: 28px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--map-text-2); }
.lp-facts li { display: flex; align-items: center; gap: 9px; }
.lp-facts li::before { content: "✓"; color: var(--map-success); font-weight: 800; }

/* ---- 共通セクション ---- */
.lp-sec {
  background: var(--map-card);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-card);
  padding: 36px 32px;
}
.lp-sec--tint { background: var(--map-bg); }

/* ---- 困りごと ---- */
.lp-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.lp-quotes li {
  background: var(--map-bg);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-icon);
  padding: 20px 22px;
  font-size: 15px;
  color: var(--map-text-2);
  font-style: italic;
  line-height: 1.6;
}
.lp-sec--tint .lp-quotes li { background: var(--map-card); }

/* ---- 3ステップ＋マスコット ---- */
.lp-steps-wrap { display: grid; grid-template-columns: 1fr 190px; gap: 32px; align-items: center; margin-top: 28px; }
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.lp-steps li {
  background: var(--map-card);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-card);
  padding: 22px 20px;
}
.lp-sec--tint .lp-steps li { background: var(--map-card); }
.lp-step-n { font-size: 12px; font-weight: 800; color: var(--map-accent); letter-spacing: 0.12em; }
.lp-steps b { display: block; font-size: 17px; font-weight: 800; margin: 8px 0 6px; }
.lp-steps li > span:last-child { font-size: 13.5px; color: var(--map-muted); line-height: 1.6; }
.lp-mascot { width: 100%; height: auto; display: block; }

/* ---- 4つの特徴 ---- */
.lp-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.lp-feats li {
  background: var(--map-bg);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-card);
  padding: 24px 26px;
}
.lp-feats b { display: block; font-size: 17px; font-weight: 800; margin-bottom: 7px; }
.lp-feats span { font-size: 14px; color: var(--map-muted); line-height: 1.65; }

/* ---- 棚 ---- */
.lp-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 28px 0 0; padding: 0; list-style: none; }
.lp-shelf li {
  background: var(--map-card);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-card);
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--map-shadow-card);
}
.lp-shelf a { text-decoration: none; color: inherit; }
.lp-shelf-text { min-width: 0; }
.lp-shelf-text b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 4px; line-height: 1.3; }
.lp-shelf-text span { display: block; font-size: 13px; color: var(--map-muted); line-height: 1.5; }
.lp-shelf li > .app-avatar { flex: none; }
.lp-sec-cta { margin: 24px 0 0; }

/* ---- まだ作られていないリクエスト ---- */
.lp-reqs { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.lp-reqs li {
  background: var(--map-card);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-card);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.lp-req-text { font-size: 15.5px; color: var(--map-ink); font-weight: 700; min-width: 0; }
.lp-reqs .lp-btn { padding: 9px 19px; font-size: 13.5px; }

/* ---- FAQ ---- */
.lp-faq { margin: 26px 0 0; border-top: 1px solid var(--map-border); max-width: 780px; }
/* <details>だが、開いた状態(open)ではPCの今までの見出し＋答えとまったく同じ見た目になる */
.lp-faq-item summary {
  font-size: 16px;
  font-weight: 800;
  padding-top: 18px;
  cursor: pointer;
  list-style: none; /* 標準の三角マーカーを消す */
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item p { margin: 5px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--map-border); font-size: 14.5px; color: var(--map-muted); line-height: 1.7; }
/* 閉じているときは答えが消えるので、区切り線を見出し側に付け替える */
.lp-faq-item:not([open]) summary { padding-bottom: 18px; border-bottom: 1px solid var(--map-border); }

/* ---- 最後の2択 ---- */
.lp-final { background: var(--map-accent-tint); border-color: var(--map-accent-line); text-align: center; }
.lp-final .lp-brow { justify-content: center; }
.lp-final .lp-lead { margin-left: auto; margin-right: auto; }
.lp-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; text-align: left; }
.lp-lane {
  background: var(--map-card);
  border: 1px solid var(--map-accent-line);
  border-radius: var(--map-radius-card);
  padding: 28px;
}
.lp-lane b { display: block; font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.lp-lane > span { display: block; font-size: 14.5px; color: var(--map-muted); margin-bottom: 20px; line-height: 1.6; }

/* ---- 画面右の「下に実画面がある」目印 ---- */
.lp-rail {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  white-space: nowrap;
  background: var(--map-card);
  border: 1px solid var(--map-accent-line);
  border-radius: var(--map-radius-pill);
  box-shadow: var(--map-shadow-card);
  text-decoration: none;
  color: var(--map-accent-hover);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lp-rail:hover { background: var(--map-accent-tint); }
.lp-rail-text {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.lp-rail-arrow { font-size: 15px; font-weight: 800; animation: lp-rail-bob 1.8s ease-in-out infinite; }
@keyframes lp-rail-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
/* 実画面まで来たら引っ込める（script.js が付け外しする） */
.lp-rail[hidden] { display: none; }
.lp-rail--gone { opacity: 0; transform: translateY(-50%) translateX(24px); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-rail-arrow { animation: none; }
  .lp-rail { transition: none; }
}

@media (max-width: 860px) {
  .lp { margin-bottom: 36px; gap: 14px; }
  .lp-hero { grid-template-columns: 1fr; gap: 28px; padding: 24px 0 20px; }
  .lp-title { font-size: 32px; }
  .lp-h2 { font-size: 24px; }
  .lp-sec { padding: 26px 20px; }
  .lp-band { padding: 18px 20px; gap: 20px; }
  .lp-facts { gap: 14px; }
  .lp-quotes,
  .lp-steps,
  .lp-feats,
  .lp-shelf,
  .lp-lanes { grid-template-columns: 1fr; }
  .lp-steps-wrap { grid-template-columns: 1fr; }
  .lp-mascot { max-width: 150px; margin: 0 auto; }
  .lp-rail { right: 8px; padding: 9px 14px; gap: 7px; }
  .lp-rail-text { font-size: 11px; }
}

/* ===========================================================
   スマホ幅のランディング：情報量を減らして「見て分かる」長さにする
   -----------------------------------------------------------
   PCでは横3列に並ぶカードが、この幅では全部縦に積まれる。
   8ブロック×カード3〜6枚だと、アプリ一覧に着くまで縦7画面ぶんになっていた。
   ここで隠しているものは、すべて「別の場所に同じ内容がある」ものだけ。
   （下タブバーと同じ 639px を境目にしている）
   =========================================================== */
@media (max-width: 639px) {
  /* ヒーローの見本カード（Packing Listの絵）。下の「On the shelf」で本物が見られる */
  .lp-demo { display: none; }
  .lp-hero { gap: 0; }

  /* 困りごとの引用は1つで十分。実際のリクエストは「Open right now」に出る */
  .lp-quotes li:nth-child(n + 2) { display: none; }

  /* 4枚のうち後ろ2枚（データの置き場所・アカウントの話）はFAQに同じ答えがある */
  .lp-feats li:nth-child(n + 3) { display: none; }

  /* 棚は4つまで。全部見たい人には下の「Browse all」ボタンがある */
  .lp-shelf li:nth-child(n + 5) { display: none; }

  /* Googleログインの話がページ内で5回出てくる。スマホでは
     ヒーローの一文とFAQの「Do I need an account?」の2か所に絞る */
  .lp-lead--signin,
  .lp-final .lp-fine { display: none; }

  /* 折りたたんだFAQ：見出しの右に開閉の＋を出す */
  .lp-faq-item summary { display: flex; align-items: baseline; gap: 12px; }
  .lp-faq-item summary::after {
    content: "+";
    margin-left: auto;
    font-size: 19px;
    font-weight: 800;
    color: var(--map-accent);
    line-height: 1;
  }
  .lp-faq-item[open] summary::after { content: "−"; }

  /* 右の目印：縦書きの帯だとカードの右端に重なって文字が読めないので、
     下タブバーの上に浮かぶ丸い↓ボタンに変える */
  .lp-rail {
    top: auto;
    bottom: 106px; /* 下タブバー(92px)の上 */
    right: 12px;
    transform: none;
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .lp-rail-arrow { font-size: 19px; }
  /* 文字は読み上げ用に残し、画面からだけ消す */
  .lp-rail-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .lp-rail--gone { transform: translateY(10px); }
}

/* ===========================================================
   AI検索：キーワードではなく「やりたいこと」からアプリを探す
   -----------------------------------------------------------
   見た目はサイト共通のカード（白地＋テラコッタの淡い枠）に揃えている。
   =========================================================== */
.ai-search-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--map-card);
  border: 1.5px solid var(--map-accent-line);
  border-radius: var(--map-radius-card);
  box-shadow: var(--map-shadow-card);
}

/* 左端のきらめきマーク。アプリのアイコンタイルと同じ大きさ・角丸にする */
.ai-search-mark {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--map-radius-icon);
  background: var(--map-accent-tint);
  color: var(--map-accent-hover);
}

.ai-search-mark svg {
  width: 20px;
  height: 20px;
  display: block;
}

.ai-search-copy {
  flex: 1 1 220px;
  min-width: 0;
}

.ai-search-title {
  margin: 0;
  font-size: var(--map-size-body);
  font-weight: 800;
  color: var(--map-ink);
}

.ai-search-hint {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--map-muted);
}

.ai-search-btn {
  flex-shrink: 0;
  font-family: var(--map-font);
  font-size: 14px;
  border: none;
  background: var(--map-accent);
  color: #fff;
  font-weight: 700;
  border-radius: var(--map-radius-pill);
  padding: 10px 18px;
  cursor: pointer;
}

.ai-search-btn:hover:not(:disabled) {
  background: var(--map-accent-hover);
}

.ai-search-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.ai-search-panel {
  margin-top: 12px;
  background: var(--map-card);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-card);
  box-shadow: var(--map-shadow-card);
  overflow: hidden;
}

.ai-search-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--map-divider);
}

.ai-search-status {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--map-text-2);
}

.ai-search-close {
  border: none;
  background: none;
  font-family: var(--map-font);
  color: var(--map-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--map-radius-pill);
}

.ai-search-close:hover {
  background: var(--map-accent-tint);
  color: var(--map-accent-hover);
}

/* 結果は1件ずつカードにする（アプリ一覧のカードと同じ空気にする） */
.ai-search-results {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px 16px;
}

/* 検索中・エラー中は中身が空なので、余白だけが残らないようにする */
.ai-search-results:empty {
  padding: 0;
}

.ai-search-item {
  display: block;
  padding: 12px 14px;
  text-decoration: none;
  background: var(--map-card);
  border: 1.5px solid var(--map-border);
  border-radius: var(--map-radius-icon);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.ai-search-item:hover {
  transform: translateY(-2px);
  border-color: var(--map-accent-line);
  box-shadow: var(--map-shadow-card);
}

/* 本命の1件目だけ、淡い色を敷いて先に目に入るようにする */
.ai-search-item--top {
  background: var(--map-accent-tint);
  border-color: var(--map-accent-line);
}

/* 「これかも？」の一言 */
.ai-search-guess {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--map-label-spacing);
  padding: 3px 10px;
  border-radius: var(--map-radius-pill);
  background: var(--map-bg);
  color: var(--map-muted);
}

.ai-search-guess--top {
  background: var(--map-accent);
  color: #fff;
}

.ai-search-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 名前とカテゴリを縦に積む（アイコンの右側） */
.ai-search-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.ai-search-name {
  font-weight: 800;
  color: var(--map-ink);
  font-size: var(--map-size-card);
  line-height: 1.3;
}

.ai-search-category {
  font-size: 11px;
  font-weight: 700;
  color: var(--map-muted);
  text-transform: uppercase;
  letter-spacing: var(--map-label-spacing);
}

/* 外部リンクだと分かるようにする右端の矢印 */
.ai-search-arrow {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--map-faint);
}

.ai-search-item:hover .ai-search-arrow {
  color: var(--map-accent-hover);
}

/* AIが書いた「なぜ合うか」の一言 */
.ai-search-reason {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--map-text-2);
  line-height: 1.5;
}

/* スマホでは、ボタンを横幅いっぱいにして押しやすくする */
@media (max-width: 600px) {
  .ai-search-btn {
    flex: 1 1 100%;
  }
}

/* 見つからなかったときの「リクエストとして投稿する」導線 */
.ai-search-cta {
  align-self: flex-start;
  font-weight: 700;
  font-size: var(--map-size-body);
  color: var(--map-accent-hover);
  text-decoration: none;
  border: 1.5px solid var(--map-accent-line);
  background: var(--map-accent-tint);
  border-radius: var(--map-radius-pill);
  padding: 8px 16px;
}

.ai-search-cta:hover {
  background: var(--map-accent);
  border-color: var(--map-accent);
  color: #fff;
}

/* ===========================================================
   トップページ（整理後）
   説明は about.html、投稿フォームは submit.html に移したので、
   ここは「見出し → 検索 → ミニアプリ一覧」の1本道だけ。
   =========================================================== */

.home-main { padding-bottom: 8px; }

/* ---- ヒーロー：ここまでで1画面に収める ---- */
.home-hero {
  text-align: center;
  padding: 30px 0 34px;
}

.home-hero-title,
.home-outro-title {
  /* h2 共通のピル型タイトルではなく、見出しそのものとして見せる */
  display: block;
  padding: 0;
  background: none;
  color: var(--map-ink);
}

.home-hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(28px, 5.2vw, 40px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--map-ink);
  margin: 0;
}

/* 2文目だけ色を変えて、「困りごと → アプリ」の流れを目で追えるようにする */
.home-hero-title em {
  font-style: normal;
  color: var(--map-accent);
  display: block;
}

.home-hero-sub {
  max-width: 30em;
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--map-text-2);
}

/* ---- 検索欄：1画面目の主役なので大きめに ---- */
.home-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  margin: 22px auto 0;
  padding: 6px 6px 6px 16px;
  background: var(--map-card);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-pill);
  box-shadow: var(--map-shadow-card);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.home-search:focus-within {
  border-color: var(--map-accent-line);
  box-shadow: var(--map-focus-ring);
}

.home-search-icon {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--map-faint);
}
.home-search-icon svg { width: 100%; height: 100%; display: block; }

.home-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 12px 0;
  font-family: var(--map-font);
  font-size: 16px; /* 16px未満だとiPhoneで勝手に拡大される */
  color: var(--map-ink);
}
.home-search input:focus { outline: none; }
.home-search input::placeholder { color: var(--map-faint); }

.home-search button[type="submit"] {
  flex: none;
  border: 0;
  border-radius: var(--map-radius-pill);
  padding: 11px 22px;
  background: var(--map-accent);
  color: #fff;
  font-family: var(--map-font);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}
.home-search button[type="submit"]:hover { background: var(--map-accent-hover); }

/* 検索候補は検索欄の真下に重ねる */
.home-search .app-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  text-align: left;
}

/* ---- AI検索と使い方への入口：箱をやめて1行のリンクに ---- */
.home-hero-aux {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 0;
}

.home-aux-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--map-font);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--map-text-2);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.home-aux-link:hover { color: var(--map-accent); border-bottom-color: var(--map-accent-line); }
.home-aux-link--ai { color: var(--map-accent); }

.home-aux-dot { color: var(--map-faint); }

.home-hero-count {
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: var(--map-label-spacing);
  text-transform: uppercase;
  color: var(--map-muted);
}
.home-hero-count b {
  font-size: 15px;
  color: var(--map-ink);
  margin-right: 6px;
}

/* AI検索の結果パネルはヒーローの直下に出す */
.home-main > .ai-search-panel { margin-bottom: 28px; }

/* ---- 自分用の棚（履歴・お気に入り）。中身があるときだけ出る ---- */
.home-strips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
/* 2つとも hidden のときは、間のすき間も出ないように枠ごと消す */
.home-strips:not(:has(.sidebar-section:not([hidden]))) { display: none; }

/* ---- ミニアプリ一覧の見出し行 ---- */
.apps-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.apps-head h2 { margin: 0; }
.apps-head-submit { flex: none; }

/* ---- 締め：3ステップ＋2つの入口 ---- */
.home-outro {
  margin-top: 44px;
  padding: 34px 28px;
  background: var(--map-card);
  border: 1px solid var(--map-border);
  border-radius: var(--map-radius-card);
  text-align: center;
}

.home-outro-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 22px;
}

.home-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.home-steps li {
  background: var(--map-bg);
  border: 1px solid var(--map-border);
  border-radius: 16px;
  padding: 18px 16px;
}
.home-steps .lp-step-n {
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
  color: var(--map-accent);
}
.home-steps b { display: block; font-size: 16px; font-weight: 800; margin: 6px 0 5px; }
.home-steps li > span:last-child { font-size: 13px; color: var(--map-muted); line-height: 1.6; }

.home-outro-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.home-outro-fine { margin: 16px 0 0; font-size: 13px; }
.home-outro-fine a { color: var(--map-muted); text-decoration: none; font-weight: 700; }
.home-outro-fine a:hover { color: var(--map-accent); }

/* ---- submit.html / about.html の共通枠 ---- */
.page-main { padding-bottom: 8px; }

.page-back { margin: 0 0 18px; font-size: 13.5px; }
.page-back a { color: var(--map-muted); text-decoration: none; font-weight: 700; }
.page-back a:hover { color: var(--map-accent); }

/* about.html の先頭：トップと同じ見出しをもう一度置く枠 */
.lp--about { display: grid; gap: 20px; }
.lp-sec--lead { text-align: center; }
/* ページ先頭の大見出しは、h2共通のピル型ではなく見出しそのものとして見せる */
.lp-sec--lead .lp-h2 {
  display: block;
  padding: 0;
  background: none;
  font-size: 34px;
}
.lp-sec--lead .lp-h2 em { font-style: normal; color: var(--map-accent); }
.lp-sec--lead .lp-lead { margin-left: auto; margin-right: auto; max-width: 34em; }

@media (max-width: 639px) {
  .home-hero { padding: 22px 0 26px; }
  .home-search {
    flex-wrap: wrap;
    border-radius: 22px;
    padding: 10px 14px;
  }
  .home-search button[type="submit"] { width: 100%; }
  .home-steps { grid-template-columns: 1fr; }
  .home-outro { padding: 26px 20px; }
  .apps-head-submit { width: 100%; text-align: center; }
}

.apps-foot { margin: 22px 0 0; text-align: center; font-size: 14px; }
.apps-foot a { color: var(--map-accent); text-decoration: none; font-weight: 800; }
.apps-foot a:hover { color: var(--map-accent-hover); text-decoration: underline; }

/* ===========================================================
   お知らせ（Inbox）：ナビのタブ・未読バッジ・一覧カード
   =========================================================== */

/* 未読の件数バッジ。タブの中に置くので、タブ側を位置の基準にする */
.site-nav-inbox {
  position: relative;
}

/* 未ログイン時はタブごと隠す（.site-nav-itemのdisplay:flexを打ち消す） */
.site-nav-inbox[hidden] {
  display: none;
}

.nav-badge {
  box-sizing: border-box;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--map-radius-pill);
  background: var(--map-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* 未読0件のときはバッジを消す */
.nav-badge[hidden] {
  display: none;
}

/* 未読があるタブは、塗らずに色と淡い下地で「何か来ている」と分かるようにする */
.site-nav-inbox--unread:not([aria-current="page"]) {
  background: var(--map-accent-tint);
  color: var(--map-accent-hover);
}

/* 今いるページのタブはアクセント色で塗られているので、バッジは白地に反転させる */
.site-nav-item[aria-current="page"] .nav-badge {
  background: #fff;
  color: var(--map-accent-hover);
}

/* 出てきたときだけ小さく弾ませて、初見でも目に留まるようにする（1回だけ） */
@keyframes inbox-badge-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.nav-badge:not([hidden]) {
  animation: inbox-badge-pop 0.45s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .nav-badge:not([hidden]) { animation: none; }
}

/* スマホ：タブがアイコンの上にラベルの縦並びになるので、
   バッジは行に割り込ませず、アイコンの右上に重ねる */
@media (max-width: 639px) {
  .nav-badge {
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: 4px;
  }

  /* 下タブバーの現在タブは淡い下地なので、バッジはアクセント色のままで読める */
  .site-nav-item[aria-current="page"] .nav-badge {
    background: var(--map-accent);
    color: #fff;
  }
}

/* --- 未ログイン／お知らせ0件のときの表示 --- */
.inbox-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 24px;
  text-align: center;
  background: var(--map-card);
  border: 1.5px dashed var(--map-border);
  border-radius: var(--map-radius-card);
}

.inbox-state[hidden] {
  display: none;
}

.inbox-state-mascot {
  width: 88px;
  height: auto;
  opacity: 0.9;
}

.inbox-state-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.inbox-state-body {
  margin: 0;
  max-width: 340px;
  font-size: var(--map-size-body);
  line-height: 1.6;
  color: var(--map-text-2);
}

/* --- お知らせ一覧 --- */
.inbox-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inbox-card {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: var(--map-card);
  border: 1px solid var(--map-border);
  border-left: 4px solid var(--map-border);
  border-radius: var(--map-radius-card);
  box-shadow: var(--map-shadow-card);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.inbox-card--link:hover {
  border-top-color: var(--map-accent-line);
  border-right-color: var(--map-accent-line);
  border-bottom-color: var(--map-accent-line);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(60, 40, 20, 0.10);
}

.inbox-card--link:focus-visible {
  outline: 2px solid var(--map-accent);
  outline-offset: 2px;
}

/* 未読は左端の太い線で示す */
.inbox-card--unread {
  border-left-color: var(--map-accent);
}

/* 「リクエストが形になった」ことを表すチェックの丸 */
.inbox-card-mark {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--map-success-tint);
  color: var(--map-success);
}

.inbox-card-body {
  flex: 1 1 auto;
  min-width: 0; /* 長い文章でカードが横に伸びないようにする */
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.inbox-card-headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: var(--map-size-body);
  font-weight: 800;
  color: var(--map-text-2);
}

.inbox-card-new {
  padding: 2px 8px;
  border-radius: var(--map-radius-pill);
  background: var(--map-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: var(--map-label-spacing);
  text-transform: uppercase;
}

.inbox-card-app {
  margin: 0;
  font-size: var(--map-size-card);
  font-weight: 800;
  line-height: 1.35;
  color: var(--map-ink);
}

/* どのリクエストへの返事かを添える。長文は2行で切る */
.inbox-card-request {
  margin: 0;
  font-size: var(--map-size-body);
  line-height: 1.5;
  color: var(--map-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inbox-card-meta {
  margin: 0;
  font-size: 12px;
  color: var(--map-faint);
}

.inbox-card-cta {
  align-self: flex-start;
  margin-top: 4px;
  font-size: var(--map-size-body);
  font-weight: 800;
  color: var(--map-accent-hover);
}

.inbox-card--link:hover .inbox-card-cta {
  text-decoration: underline;
}