/* ===================================
   YORIMICHI v10 — "感情で寄り道"
   夜っぽい・エモい・Instagram世界観
   =================================== */

:root {
  /* ── ブランドカラー ── */
  --orange:      #FF6B35;
  --orange-2:    #FF8C5A;
  --orange-pale: #FFF0E8;

  --grad-warm:  linear-gradient(135deg,#FF8C35 0%,#FF5B5B 50%,#C2185B 100%);
  --grad-insta: linear-gradient(135deg,#F9A825 0%,#FF5722 35%,#E91E63 70%,#9C27B0 100%);
  /* ★ より深い夜 */
  --grad-night: linear-gradient(160deg,#0c0c14 0%,#111120 45%,#08080f 100%);

  --pink:        #E91E63;
  --pink-pale:   #FCE4EC;
  --purple:      #7C3AED;
  --purple-pale: #EDE9FE;

  /* テキスト */
  --text-900: #1a1a1a;
  --text-600: #555555;
  --text-400: #999999;
  --text-200: #DEDEDE;

  /* 背景 - ウォームグレー */
  --bg:        #F4F3F1;
  --surface:   #FFFFFF;
  --surface-2: #F4F3F1;
  --border:    #ECEAE7;
  --border-g:  rgba(0,0,0,0.06);

  --nav-h:    64px;
  --header-h: 60px;
  --sidebar-w:240px;

  /* ★ フォント：Safari向け完全スタック */
  --font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Maru Gothic Pro',
          'YuGothic', 'Yu Gothic', -apple-system, BlinkMacSystemFont,
          'Helvetica Neue', sans-serif;

  /* ★ 角丸 - より大きく統一 */
  --r-xl: 20px;
  --r-lg: 14px;
  --r-md: 10px;

  /* ★ 影 - 多層・より自然 */
  --sh-card: 0 1px 2px rgba(0,0,0,0.03), 0 4px 14px rgba(0,0,0,0.06), 0 16px 32px rgba(0,0,0,0.04);
  --sh-fab:  0 8px 24px rgba(255,91,91,0.35), 0 2px 8px rgba(0,0,0,0.12);

  --primary: #FF6B35;
}

/* =============================================
   グローバル：iOS ズーム・崩れ防止
   ============================================= */

/* ★ 横スクロール防止 */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ★ ボタン・リンクのダブルタップズーム防止 */
button, a, [role="button"],
input[type="button"], input[type="submit"] {
  touch-action: manipulation;
}

/* ★ 全inputでiOSズームを防ぐ（font-size>=16pxに統一済みだが念のため） */
input, textarea, select {
  font-size: 16px;
  touch-action: manipulation;
}

/* =============================================
   ★ ダークテーマ v3「温かい夜の旅」
   - ウォームダーク・白寄りテキスト
   - コントラスト徹底強化
   - ボタンの押せる感を強調
   ============================================= */
[data-theme="dark"] {
  --bg:        #141210;
  --surface:   #1e1c19;
  --surface-2: #272420;
  --border:    #38342c;
  --border-g:  rgba(255,220,180,0.08);
  --text-900: #F5F0E8;
  --text-600: #C8C0B4;
  --text-400: #968D82;
  --text-200: #403C35;
  --orange-pale: rgba(255,140,58,.22);
  --pink-pale:   rgba(233,30,99,.20);
  --purple-pale: rgba(124,58,237,.20);
  --sh-card: 0 2px 4px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.5), 0 20px 48px rgba(0,0,0,.4);
}

/* テーマトランジション */
body, .app-layout, .header, .card, .nav-bottom,
.sidebar, .modal-overlay, .sheet-card,
.badge-area, .time-chip, .mood-btn,
.hdr-btn, .form-input, .form-select {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

[data-theme="dark"] html,
html:has(body[data-theme="dark"]) { background: #0d0b09; }
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] .app-layout { box-shadow: 0 0 60px rgba(255,140,58,.05); background: var(--surface); }

/* ヘッダー */
[data-theme="dark"] .header { background: rgba(20,18,16,.97) !important; border-bottom: 1px solid var(--border) !important; }
[data-theme="dark"] .hdr-btn { color: var(--text-600) !important; }
[data-theme="dark"] .logo-main { color: var(--text-900) !important; }
[data-theme="dark"] .logo-sub  { color: var(--text-400) !important; }
[data-theme="dark"] .search-bar { background: rgba(22,20,17,.97); border-bottom: 1px solid var(--border); }
[data-theme="dark"] .search-input { color: var(--text-900); background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 12px; }
[data-theme="dark"] .search-input::placeholder { color: var(--text-400); }

/* ナビ */
[data-theme="dark"] .nav-bottom { background: rgba(18,16,14,.98) !important; border-top: 1px solid var(--border) !important; }
[data-theme="dark"] .nav-item { color: var(--text-400) !important; }
[data-theme="dark"] .nav-item.active { color: var(--orange-2) !important; }

/* カード */
[data-theme="dark"] .card { background: var(--surface) !important; border: 1px solid var(--border) !important; }
[data-theme="dark"] .card-img-wrap { background: #252220; }
[data-theme="dark"] .card-img-wrap::before { background: linear-gradient(90deg,#2c2926 25%,#232120 50%,#2c2926 75%); background-size: 200% 100%; }
[data-theme="dark"] .card-img-wrap::after,[data-theme="dark"] .spot-detail-img-wrap::after { background: linear-gradient(to bottom, rgba(0,0,0,0) 25%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.8) 100%) !important; }
[data-theme="dark"] .badge-area { background: rgba(18,16,14,.92) !important; color: var(--text-900) !important; border: 1px solid rgba(255,220,180,.15) !important; }
[data-theme="dark"] .card-phrase { color: var(--text-900) !important; }
[data-theme="dark"] .card-comment { color: var(--text-600) !important; }

/* タグ */
[data-theme="dark"] .tag:nth-child(3n+1) { background: rgba(255,140,58,.25) !important; color: #FFBA80 !important; }
[data-theme="dark"] .tag:nth-child(3n+2) { background: rgba(255,92,145,.22) !important; color: #FFA8C9 !important; }
[data-theme="dark"] .tag:nth-child(3n)   { background: rgba(167,139,250,.22) !important; color: #C8B5FF !important; }
[data-theme="dark"] .card-emotion-tag { filter: brightness(1.2) saturate(1.1); }
[data-theme="dark"] .card-meta-chip { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-600) !important; }

/* ボタン */
[data-theme="dark"] .card-like-btn,[data-theme="dark"] .card-wish-btn { background: var(--surface-2) !important; border: 1.5px solid var(--border) !important; color: var(--text-600) !important; }
[data-theme="dark"] .card-like-btn.liked,[data-theme="dark"] .spot-detail-like-btn.liked { background: rgba(255,78,106,.28) !important; border-color: rgba(255,78,106,.7) !important; color: #FF9EB5 !important; }
[data-theme="dark"] .card-wish-btn.wished,[data-theme="dark"] .spot-detail-wish-btn.wished { background: rgba(59,130,246,.28) !important; border-color: rgba(96,165,250,.7) !important; color: #93C5FD !important; }
[data-theme="dark"] .card-detail-btn { background: rgba(255,255,255,.12) !important; color: var(--text-900) !important; border: 1.5px solid rgba(255,255,255,.14) !important; }
[data-theme="dark"] .card-visited-badge { background: rgba(20,40,25,.95) !important; color: #6EE7A0 !important; border: 1px solid rgba(110,231,160,.4) !important; }

/* チップ */
[data-theme="dark"] .time-chip { background: var(--surface-2) !important; border: 1.5px solid var(--border) !important; color: var(--text-600) !important; }
[data-theme="dark"] .time-chip.active { background: var(--grad-warm) !important; color: #fff !important; border-color: transparent !important; }
[data-theme="dark"] .mood-btn { background: var(--surface-2) !important; border: 1.5px solid var(--border) !important; }
[data-theme="dark"] .mood-btn-label { color: var(--text-600) !important; }
[data-theme="dark"] .mood-btn.active { background: var(--grad-warm) !important; border-color: transparent !important; }
[data-theme="dark"] .mood-section-title,[data-theme="dark"] .time-section-title { color: var(--text-900) !important; font-weight: 800; }
[data-theme="dark"] .mood-section-sub,[data-theme="dark"] .time-section-sub { color: var(--text-400) !important; }
[data-theme="dark"] .mood-reset-btn,[data-theme="dark"] .time-reset-btn { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-600) !important; }

/* フォーム */
[data-theme="dark"] .form-input,[data-theme="dark"] .form-textarea,[data-theme="dark"] .form-select { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-900) !important; }
[data-theme="dark"] .form-input::placeholder,[data-theme="dark"] .form-textarea::placeholder { color: var(--text-400) !important; }
[data-theme="dark"] .form-label { color: var(--text-600) !important; }
[data-theme="dark"] .form-hint  { color: var(--text-400) !important; }
[data-theme="dark"] .emotion-tag-btn { background: var(--surface-2) !important; border: 1.5px solid var(--border) !important; color: var(--text-600) !important; }
[data-theme="dark"] .emotion-tag-btn.selected { color: #fff !important; border-color: transparent !important; }

/* モーダル */
[data-theme="dark"] .modal-sheet { background: #1e1c19 !important; border-top: 1px solid var(--border) !important; }
[data-theme="dark"] .sheet-body,[data-theme="dark"] .sheet-card { background: #1e1c19 !important; }
[data-theme="dark"] .sheet-header { background: #1e1c19 !important; border-bottom: 1px solid var(--border) !important; }
[data-theme="dark"] .sheet-title { color: var(--text-900) !important; }
[data-theme="dark"] .sheet-handle { background: var(--border) !important; }

/* プロフィール */
[data-theme="dark"] .welcome-section { background: var(--surface) !important; }
[data-theme="dark"] .mypage-tab-btn { color: var(--text-400) !important; border-bottom-color: transparent !important; }
[data-theme="dark"] .mypage-tab-btn.active { color: var(--orange-2) !important; border-bottom-color: var(--orange-2) !important; }

/* ★ マイページ全体ダーク対応 */
[data-theme="dark"] .mypage-user-card { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .mypage-user-name { color: var(--text-900) !important; }
[data-theme="dark"] .mypage-user-email { color: var(--text-400) !important; }
[data-theme="dark"] .mypage-level-card { background: linear-gradient(135deg,#1f1c17,#2e2518) !important; border-color: rgba(255,140,58,.25) !important; }
[data-theme="dark"] .mypage-stats { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .mypage-stat-num { color: var(--orange-2) !important; }
[data-theme="dark"] .mypage-stat-label { color: var(--text-400) !important; }
[data-theme="dark"] .mypage-tabs { background: var(--surface) !important; border-top-color: var(--border) !important; }
[data-theme="dark"] .mypage-tab { color: var(--text-400) !important; }
[data-theme="dark"] .mypage-tab.active { color: var(--orange-2) !important; border-bottom-color: var(--orange-2) !important; }
/* ★ 称号バッジ ダーク対応 */
[data-theme="dark"] .achievement-section { background: transparent !important; }
[data-theme="dark"] .achievement-title { color: var(--text-900) !important; }
[data-theme="dark"] .achievement-badge { background: var(--surface-2) !important; border-color: var(--border) !important; }
[data-theme="dark"] .achievement-badge.unlocked { background: rgba(255,107,53,.18) !important; border-color: rgba(255,107,53,.5) !important; }
[data-theme="dark"] .achievement-badge-name { color: var(--text-600) !important; }
[data-theme="dark"] .achievement-badge.unlocked .achievement-badge-name { color: #FFBA80 !important; }
[data-theme="dark"] .achievement-badge-locked { color: var(--text-400) !important; }
/* ★ サイドバー ダーク対応 */
[data-theme="dark"] .sidebar { background: #1a1815 !important; border-right: 1px solid var(--border) !important; }
[data-theme="dark"] .sidebar-item { color: var(--text-600) !important; }
[data-theme="dark"] .sidebar-item:hover { background: var(--surface-2) !important; color: var(--orange-2) !important; }
[data-theme="dark"] .sidebar-item.active { background: rgba(255,107,53,.15) !important; color: var(--orange-2) !important; }
[data-theme="dark"] .sidebar-footer { border-top-color: var(--border) !important; }
/* ★ XPバー・退会 */
[data-theme="dark"] .mypage-xp-bar-bg { background: var(--surface-2) !important; }
[data-theme="dark"] .mypage-xp-label { color: var(--text-600) !important; }
[data-theme="dark"] .logout-btn { background: rgba(229,57,53,.12) !important; border-color: rgba(229,57,53,.3) !important; color: #FF6B6B !important; }
[data-theme="dark"] .withdraw-btn { color: var(--text-400) !important; }
/* ★ ログインプロンプト */
[data-theme="dark"] .login-prompt { background: var(--surface) !important; border-color: rgba(255,140,58,.4) !important; }
[data-theme="dark"] .login-prompt-title { color: var(--text-900) !important; }
[data-theme="dark"] .login-prompt-sub { color: var(--text-400) !important; }

/* サイドバー */
[data-theme="dark"] .sidebar { background: #1a1815 !important; border-right: 1px solid var(--border) !important; }

/* お題・チップ */
[data-theme="dark"] .daily-topic-card { background: var(--surface-2) !important; border: 1px solid var(--border) !important; }
[data-theme="dark"] .daily-topic-label { color: var(--orange-2) !important; }
[data-theme="dark"] .daily-topic-text  { color: var(--text-900) !important; }
[data-theme="dark"] .pref-chip { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-900) !important; }

/* 詳細 */
[data-theme="dark"] .spot-detail-body { background: var(--surface) !important; color: var(--text-900) !important; }
[data-theme="dark"] .spot-detail-share-btn,[data-theme="dark"] .spot-detail-wish-btn,[data-theme="dark"] .section-more-btn { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-600) !important; }

/* コメント */
[data-theme="dark"] .detail-comment-input { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-900) !important; }
[data-theme="dark"] .detail-comment-input::placeholder { color: var(--text-400) !important; }
[data-theme="dark"] .detail-comment-send:not([disabled]) { background: var(--grad-warm) !important; }
[data-theme="dark"] .detail-comment-login-hint,[data-theme="dark"] .detail-comment-empty { color: var(--text-400) !important; }
[data-theme="dark"] .detail-comment-item-avatar,[data-theme="dark"] .detail-voice-avatar,[data-theme="dark"] .detail-comment-avatar { background: var(--surface-2) !important; border: 1px solid var(--border) !important; }

/* おでかけリスト */
[data-theme="dark"] .triplist-item { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-900) !important; }
[data-theme="dark"] .triplist-item-remove { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-400) !important; }
[data-theme="dark"] .triplist-empty,[data-theme="dark"] .photo-box-placeholder { color: var(--text-400) !important; }

/* 投稿フォーム追加要素 */
[data-theme="dark"] .post-inspiration-box { background: linear-gradient(135deg, rgba(255,140,58,.12), rgba(233,30,99,.08)) !important; border-color: rgba(255,140,58,.28) !important; }
[data-theme="dark"] .post-inspiration-text { color: var(--text-600) !important; }
[data-theme="dark"] .post-success-overlay { background: rgba(0,0,0,.8) !important; }
[data-theme="dark"] .post-success-sheet { background: #1e1c19 !important; border: 1px solid var(--border) !important; }
[data-theme="dark"] .post-success-title { color: var(--text-900) !important; }
[data-theme="dark"] .post-success-body  { color: var(--text-600) !important; }
[data-theme="dark"] .post-success-share-btn { background: var(--surface-2) !important; border: 1.5px solid var(--border) !important; color: var(--text-900) !important; }

/* 感情セクション */
[data-theme="dark"] .emotion-section { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; }
[data-theme="dark"] .emotion-section-title { color: var(--text-900) !important; }
[data-theme="dark"] .emotion-nav-item { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-600) !important; }
[data-theme="dark"] .emotion-nav-item.active { color: #fff !important; border-color: transparent !important; }
[data-theme="dark"] .mood-carry-badge { background: rgba(255,140,58,.14) !important; border-color: rgba(255,140,58,.32) !important; }
[data-theme="dark"] .mood-carry-text { color: var(--orange-2) !important; }

/* ★ もっと見る・すべて見る・こんな気分・今日のおすすめ */
[data-theme="dark"] .load-more-btn { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-600) !important; }
[data-theme="dark"] .mood-show-all-btn { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-600) !important; }
[data-theme="dark"] .mood-also-chip { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-600) !important; }
[data-theme="dark"] .mood-also-title { color: var(--text-400) !important; }
[data-theme="dark"] .today-pick-section { border-top-color: var(--border) !important; background: var(--surface) !important; }
[data-theme="dark"] .today-pick-title { color: var(--text-900) !important; }
[data-theme="dark"] .today-pick-refresh { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-400) !important; }

/* 管理ページ */
[data-theme="dark"] .admin-post-item,[data-theme="dark"] .admin-user-item,[data-theme="dark"] .admin-report-item { border-color: var(--border) !important; background: var(--surface) !important; }
[data-theme="dark"] .admin-post-name,[data-theme="dark"] .admin-user-name { color: var(--text-900) !important; }
[data-theme="dark"] .admin-post-meta span,[data-theme="dark"] .admin-user-meta span { color: var(--text-400) !important; }
[data-theme="dark"] .admin-filter-select,[data-theme="dark"] .admin-search { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-900) !important; }
[data-theme="dark"] .admin-edit-modal { background: #1e1c19 !important; }
[data-theme="dark"] .admin-edit-input,[data-theme="dark"] .admin-edit-textarea { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-900) !important; }
[data-theme="dark"] .admin-stats-section { background: var(--surface) !important; border-color: var(--border) !important; }
[data-theme="dark"] .admin-revenue-card { background: var(--surface-2) !important; border-color: var(--border) !important; }
[data-theme="dark"] .admin-export-btn { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-600) !important; }

/* =============================================
   ヘッダー（モバイル）
   ============================================= */
.header{
  position:fixed;
  top:env(safe-area-inset-top,0);
  left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  background:var(--grad-warm);
  z-index:200;
  /* overflow:visible にして子要素が正常にレイアウトされるようにする */
  overflow:visible;
}
/* 装飾ぼかし */
.header::before{
  content:'';position:absolute;top:-30%;right:-15%;
  width:180px;height:180px;
  background:radial-gradient(circle,rgba(255,255,255,0.22) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;z-index:0;
}

.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 8px;position:relative;z-index:1;
}

.header-logo{
  display:flex;align-items:center;gap:10px;
  cursor:pointer;          /* ★ クリッカブル */
  border-radius:12px;
  transition:opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
.header-logo:hover{opacity:.85;}
.header-logo:active{opacity:.7;}

/* ブランドロゴ画像 */
.logo-img{
  width:40px;height:40px;
  object-fit:contain;
  flex-shrink:0;
  background:white;
  border-radius:12px;
  padding:3px;
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
  transform:rotate(-3deg);
}

.logo-text{display:flex;flex-direction:column;line-height:1.2;}
.logo-main{
  font-size:18px;font-weight:900;color:white;
  letter-spacing:.06em;text-shadow:0 2px 4px rgba(0,0,0,.15);
  font-family:'Sora', var(--font);
}
.logo-sub{font-size:10px;color:rgba(255,255,255,0.92);font-weight:700;letter-spacing:.04em;}

.header-actions{display:flex;gap:6px;}
.hdr-btn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,0.25);backdrop-filter:blur(10px);
  color:white;display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .15s;
}
.hdr-btn:active{background:rgba(255,255,255,0.4);transform:scale(.92);}
.hdr-btn .material-icons-round{font-size:21px;}

/* 検索バー */
.search-bar{
  display:flex;align-items:center;
  margin:0 16px 8px;
  background:rgba(255,255,255,0.9);border-radius:var(--r-lg);
  padding:0 12px;height:0;overflow:hidden;opacity:0;
  transition:height .25s ease,opacity .2s ease;
  position:relative;z-index:1;
}
.search-bar.open{height:42px;opacity:1;}
.search-icon{font-size:18px;color:var(--orange);flex-shrink:0;}
.search-input{
  flex:1;border:none;background:transparent;
  padding:0 8px;font-size:16px;font-weight:500;color:var(--text-900);outline:none;height:100%;
}
.search-input::placeholder{color:var(--text-400);}
.search-clear{color:var(--text-400);display:flex;align-items:center;}
.search-clear .material-icons-round{font-size:18px;}

/* ─────────────────────────────────────────────
   タブ行（確実な被り防止）
   min-width:0 が鍵：area-tabsがflexアイテムとして
   正しく縮小できるようになり、右の要素を押し出さない。
   overflow:hiddenラッパー不要・スクロールも全ブラウザで確実。
   ────────────────────────────────────────────── */
.tabs-row{
  display:flex;
  align-items:center;
  padding:0 12px 11px 16px;
  gap:0;
  position:relative;
  z-index:1;
}

/* タブスクロールコンテナ（直接flexアイテム） */
.area-tabs{
  flex:1;
  min-width:0;     /* ★必須：flexのmin-content制約を解除。これがないと右要素を押し出す */
  display:flex;
  gap:7px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:2px 20px 2px 0; /* 右端フェードの余白 */
}
.area-tabs::-webkit-scrollbar{display:none;}

/* 右端フェード：tabs-rowの疑似要素で実装（DOM追加不要・mask干渉なし） */
.tabs-row::after{
  content:'';
  position:absolute;
  /* 右padding(12px) + 縦線(1px+16px margin) + ボタン(32px) = 61px */
  right:61px;
  top:0;
  bottom:11px;
  width:20px;
  background:linear-gradient(to right, transparent 0%, #FF7A2F 88%);
  pointer-events:none;
  z-index:2;
}

/* タブ本体 */
.tab{
  flex-shrink:0;
  padding:7px 15px;
  border-radius:100px;
  background:rgba(255,255,255,0.5);
  color:white;
  font-size:12px;
  font-weight:800;
  border:1.5px solid rgba(255,255,255,0.5);
  transition:all .18s ease;
  text-shadow:0 1px 3px rgba(0,0,0,.2);
  letter-spacing:.01em;
  white-space:nowrap;
}
.tab:active{transform:scale(.93);}
.tab.active{
  background:white;
  color:var(--orange);
  border-color:white;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  text-shadow:none;
  font-weight:900;
}

/* 縦線セパレーター */
.tab-divider{
  width:1px;
  height:20px;
  background:rgba(255,255,255,0.4);
  flex-shrink:0;
  margin:0 8px;
}

/* 編集ボタン（flex-shrink:0で絶対に潰れない） */
.tab-edit-btn{
  flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.22);
  color:rgba(255,255,255,0.95);
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,0.4);
  transition:background .15s,transform .12s;
}
.tab-edit-btn:hover{background:rgba(255,255,255,0.38);}
.tab-edit-btn:active{background:rgba(255,255,255,0.5);transform:scale(.92);}
.tab-edit-btn .material-icons-round{font-size:17px;}

/* サイドバー（モバイルは非表示） */
.sidebar{display:none;}

/* =============================================
   コンテンツエリア
   ============================================= */
.content-area{
  padding-top:calc(var(--header-h) + 8px);
  padding-bottom:calc(var(--nav-h) + 20px);
  min-height:100vh;
}

.page{display:none;animation:fadeIn .3s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* =============================================
   ホーム：フィード
   ============================================= */
.feed-meta{padding:4px 18px 12px;font-size:12px;color:var(--text-400);font-weight:500;}
#spotCount{color:var(--orange);font-weight:800;font-size:14px;}

/* ★ フィード：余白を広く */
.feed{padding:0 14px;display:flex;flex-direction:column;gap:20px;}

/* ── カード本体 ── */
.card{
  background:var(--surface);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--sh-card);
  /* ★ より上品なフェードイン */
  animation:cardFadeUp .5s cubic-bezier(.16,1,.3,1) both;
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex;flex-direction:column;
  border:1px solid rgba(0,0,0,.03);
}
.card::before{ display:none; }
/* ★ アクティブ時は控えめに */
.card:active{transform:scale(.988);box-shadow:0 1px 4px rgba(0,0,0,.05);}
.card:nth-child(1){animation-delay:.04s;}
.card:nth-child(2){animation-delay:.09s;}
.card:nth-child(3){animation-delay:.14s;}
.card:nth-child(n+4){animation-delay:.17s;}
@keyframes cardFadeUp{
  from{opacity:0;transform:translateY(10px);}
  to  {opacity:1;transform:translateY(0);}
}

/* ── 画像エリア ── */
.card-img-wrap{
  position:relative;width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#E8E7E5;
}
.card-img-wrap::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,#e4e4e4 25%,#d4d4d4 50%,#e4e4e4 75%);
  background-size:200% 100%;
  animation:skeleton 1.4s ease infinite;
}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
.card-img{
  width:100%;height:100%;object-fit:cover;
  transition:opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1);
  opacity:0;position:relative;z-index:2;
}
.card-img.loaded{opacity:1;}
.card-img-wrap.img-loaded::before{display:none;}
/* ★ ホバーズームを控えめに */
.card:hover .card-img{transform:scale(1.025);}

/* ★ 画像グラデーション（より強く・映える）*/
.card-img-wrap::after{
  content:'';position:absolute;inset:0;z-index:3;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.0)  30%,
    rgba(0,0,0,.08) 55%,
    rgba(0,0,0,.62) 100%
  );
  pointer-events:none;
}
.card-badges{
  position:absolute;top:12px;left:12px;right:12px;
  display:flex;justify-content:space-between;align-items:flex-start;z-index:4;
}
.badge-area{
  background:rgba(255,255,255,.88);
  color:var(--text-900);
  font-size:10px;font-weight:700;
  padding:4px 10px;border-radius:100px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 6px rgba(0,0,0,.1);
  letter-spacing:.01em;
}
.badge-new{
  background:var(--grad-warm);color:white;
  font-size:9px;font-weight:800;
  padding:4px 10px;border-radius:100px;
}
.card-img-title{
  position:absolute;bottom:14px;left:14px;right:14px;z-index:4;
}
.card-img-title h3{
  font-size:19px;font-weight:900;color:white;
  line-height:1.2;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
  letter-spacing:-.02em;
}

/* 訪問済みバッジ */
.card-visited-badge{
  position:absolute;top:12px;right:12px;z-index:4;
  background:rgba(30,200,120,.88);color:white;
  font-size:10px;font-weight:700;
  padding:4px 10px;border-radius:100px;
  display:flex;align-items:center;gap:3px;
  backdrop-filter:blur(8px);
}
.card-visited-badge .material-icons-round{font-size:12px;}

/* ── カード本文 ── */
/* ★ 余白を広く・詰め込まない */
.card-body{padding:16px 16px 14px;display:flex;flex-direction:column;flex:1;gap:0;}

/* ★ 感情フレーズ → 主役に */
.card-phrase{
  font-size:15px;
  font-weight:800;
  color:var(--text-900);
  line-height:1.4;
  margin-bottom:8px;
  letter-spacing:-.02em;
}

/* ★ メタ情報バー（時間帯・人数）→ よりミニマルに */
.card-meta-bar{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-bottom:10px;
}
.card-meta-chip{
  font-size:10px;font-weight:600;
  color:var(--text-400);
  background:var(--bg);
  padding:3px 9px;border-radius:100px;
  border:1px solid var(--border);
  letter-spacing:.01em;
}

/* ★ 一言コメント → 空気感重視・短く */
.card-comment{
  font-size:12px;
  color:var(--text-400);
  line-height:1.7;
  margin-bottom:12px;
  font-weight:400;
  /* ★ 2行で切る */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 感情タグ */
.card-emotion-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;}
.card-emotion-tag{
  font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:100px;color:white;
}

/* ★ ハッシュタグ → 最大3個・控えめに */
.card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;flex:1;align-content:flex-start;}
.tag{
  padding:3px 9px;border-radius:100px;font-size:10px;font-weight:700;
  letter-spacing:.01em;
}
.tag:nth-child(3n+1){background:var(--orange-pale);color:var(--orange);}
.tag:nth-child(3n+2){background:var(--pink-pale);color:var(--pink);}
.tag:nth-child(3n)  {background:var(--purple-pale);color:var(--purple);}

/* ── フッター ── */
/* ★ より余白を持たせ・ボタンを押しやすく */
.card-footer{display:flex;gap:8px;align-items:center;margin-top:auto;padding-top:2px;}
.card-like-btn{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-400);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .2s ease;
}
.card-like-btn:active{transform:scale(.82);}
.card-like-btn.liked{
  background:#FFF0F5;border-color:var(--pink);color:var(--pink);
  animation:heartPop .28s ease;
}
@keyframes heartPop{
  0%  {transform:scale(1);}
  40% {transform:scale(1.3);}
  70% {transform:scale(.93);}
  100%{transform:scale(1);}
}
.card-wish-btn{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-400);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .2s ease;
}
.card-wish-btn:active{transform:scale(.82);}
.card-wish-btn.wished{background:#EFF6FF;border-color:#3B82F6;color:#3B82F6;}
.card-like-btn .material-icons-round,
.card-wish-btn .material-icons-round{font-size:18px;}

/* ★ 詳しく見るボタン → シンプルで押しやすく */
.card-detail-btn{
  flex:1;height:40px;border-radius:var(--r-lg);
  background:var(--text-900);color:white;
  font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:4px;
  transition:opacity .15s;
  letter-spacing:.02em;
}
.card-detail-btn:active{opacity:.75;}
.card-detail-btn .material-icons-round{font-size:14px;}

.empty-state{display:none;text-align:center;padding:60px 20px;}
.empty-state.show{display:block;}
.empty-icon{font-size:48px;margin-bottom:14px;opacity:.5;}
.empty-title{font-size:16px;font-weight:700;color:var(--text-600);margin-bottom:6px;}
.empty-sub{font-size:13px;color:var(--text-400);margin-bottom:20px;}
.empty-post-btn{
  display:inline-flex;align-items:center;gap:6px;padding:13px 24px;
  border-radius:100px;background:var(--grad-warm);color:white;
  font-size:13px;font-weight:800;box-shadow:0 4px 18px rgba(255,107,53,.28);
}
.empty-post-btn .material-icons-round{font-size:17px;}

/* =============================================
   エリア画面
   ============================================= */
.page-area{padding:16px;}

.area-breadcrumb{
  display:flex;align-items:center;gap:6px;margin-bottom:16px;
  padding:10px 14px;background:var(--surface);border-radius:var(--r-md);
  border:1.5px solid var(--border);font-size:12px;font-weight:700;
  overflow-x:auto;white-space:nowrap;scrollbar-width:none;
}
.area-breadcrumb::-webkit-scrollbar{display:none;}
.crumb{color:var(--text-400);background:none;padding:0;font-size:12px;font-weight:700;}
.crumb.active{color:var(--orange);}
.crumb-sep{color:var(--text-200);}

.area-step{display:none;animation:fadeIn .25s ease;}
.area-step.active{display:block;}

.region-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.region-card{
  border-radius:var(--r-xl);padding:20px 14px;color:white;cursor:pointer;
  display:flex;flex-direction:column;gap:8px;min-height:110px;
  transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.region-card::before{
  content:'';position:absolute;top:-30%;right:-20%;
  width:100px;height:100px;background:rgba(255,255,255,.18);border-radius:50%;pointer-events:none;
}
.region-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.18);}
.region-card:active{transform:scale(.96);}
.region-emoji{font-size:30px;line-height:1;}
.region-name{font-size:15px;font-weight:900;}
.region-spot-count{
  font-size:11px;font-weight:700;background:rgba(255,255,255,.25);
  padding:3px 9px;border-radius:100px;align-self:flex-start;
}

.area-back-btn{
  display:inline-flex;align-items:center;gap:4px;margin-bottom:14px;
  padding:8px 14px;border-radius:100px;background:var(--surface-2);color:var(--text-600);
  font-size:13px;font-weight:500;transition:background .15s;
}
.area-back-btn:hover{background:var(--border);}
.area-back-btn .material-icons-round{font-size:16px;}

.area-step-title{font-size:20px;font-weight:700;color:var(--text-900);margin-bottom:14px;}

.pref-chips{display:flex;flex-wrap:wrap;gap:8px;}
.pref-chip{
  padding:10px 16px;border-radius:100px;
  background:var(--surface);border:2px solid var(--border);
  font-size:13px;font-weight:500;color:var(--text-900);cursor:pointer;transition:all .15s;
}
.pref-chip:hover{border-color:var(--orange);color:var(--orange);}
.pref-chip.active{background:var(--orange);border-color:var(--orange);color:white;}
/* ── エリア検索ボックス ─────────────────────────── */
.area-search-wrap{
  display:flex;align-items:center;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:0 14px;
  margin:0 0 16px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  transition:border-color .2s,box-shadow .2s;
  position:relative;
}
.area-search-wrap:focus-within{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,122,47,.1);
}
.area-search-icon{
  font-size:18px;color:var(--text-400);
  flex-shrink:0;margin-right:8px;
}
.area-search-input{
  flex:1;border:none;outline:none;
  font-family:var(--font);font-size:16px;
  color:var(--text-900);background:transparent;
  padding:13px 0;
  line-height:1;
}
.area-search-input::placeholder{color:var(--text-400);}
.area-search-clear{
  background:none;border:none;padding:4px;
  cursor:pointer;color:var(--text-400);
  display:flex;align-items:center;
  border-radius:50%;transition:background .15s;
}
.area-search-clear:hover{background:var(--bg);}
.area-search-clear .material-icons-round{font-size:16px;}

/* 検索結果パネル */
.area-search-results{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  margin-bottom:16px;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
}
.area-search-empty{
  padding:28px 20px;text-align:center;
  color:var(--text-400);font-size:.875rem;
}
.area-search-empty .material-icons-round{
  font-size:32px;display:block;margin-bottom:8px;
}

/* 検索結果グループ */
.search-result-group{}
.search-result-group-label{
  font-size:.7rem;font-weight:700;
  color:var(--text-400);letter-spacing:.06em;
  padding:10px 16px 4px;
  text-transform:uppercase;
  border-top:1px solid var(--border);
}
.search-result-group:first-child .search-result-group-label{border-top:none;}
.search-result-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;
  cursor:pointer;
  transition:background .15s;
  border:none;background:none;width:100%;text-align:left;
  font-family:var(--font);
}
.search-result-item:hover{background:var(--bg);}
.search-result-item:last-child{}
.search-result-item-icon{
  width:30px;height:30px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;flex-shrink:0;
  background:var(--bg);
}
.search-result-item-icon.type-pref{background:#FFF0E8;color:var(--orange);}
.search-result-item-icon.type-city{background:#F0F8FF;color:#3A8FD6;}
.search-result-item-icon.type-spot{background:#F0FFF4;color:#27AE60;}
.search-result-item-main{flex:1;min-width:0;}
.search-result-item-name{
  font-size:.875rem;font-weight:700;
  color:var(--text-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-result-item-name mark{
  background:none;color:var(--orange);font-weight:800;
}
.search-result-item-sub{
  font-size:.75rem;color:var(--text-400);margin-top:1px;
}

/* スポット内絞り込み */
.area-filter-wrap{
  display:flex;align-items:center;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:0 12px;
  margin-bottom:12px;
  transition:border-color .2s;
}
.area-filter-wrap:focus-within{border-color:var(--orange);}
.area-filter-icon{font-size:16px;color:var(--text-400);margin-right:6px;flex-shrink:0;}
.area-filter-input{
  flex:1;border:none;outline:none;
  font-family:var(--font);font-size:.85rem;
  color:var(--text-900);background:transparent;
  padding:10px 0;
}
.area-filter-input::placeholder{color:var(--text-400);}
/* ───────────────────────────────────────────────── */

.area-spots-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.area-spots-badge{font-size:12px;background:var(--grad-warm);color:white;padding:4px 12px;border-radius:100px;font-weight:800;}

.area-spot-item{
  background:var(--surface);border-radius:var(--r-lg);padding:14px;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--sh-card);border:1.5px solid var(--border);
  cursor:pointer;transition:transform .12s;margin-bottom:10px;
}
.area-spot-item:hover{transform:translateY(-2px);}
.area-spot-emoji{
  width:52px;height:52px;flex-shrink:0;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;font-size:24px;
  background:var(--grad-warm);
}
.area-spot-info{flex:1;min-width:0;}
.area-spot-name{font-size:14px;font-weight:800;margin-bottom:4px;}
.area-spot-city{font-size:11px;color:var(--orange);font-weight:700;margin-bottom:3px;}
.area-spot-comment{font-size:12px;color:var(--text-400);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

.area-empty{text-align:center;padding:40px 20px;background:var(--surface);border-radius:var(--r-xl);border:2px dashed var(--orange-2);}
.area-empty-emoji{font-size:44px;margin-bottom:10px;}
.area-empty-title{font-size:14px;font-weight:700;color:var(--text-600);margin-bottom:4px;}
.area-empty-sub{font-size:12px;color:var(--text-400);}

.placeholder-page{text-align:center;padding:80px 20px;}
.placeholder-emoji{font-size:56px;margin-bottom:16px;}
.placeholder-page h2{font-size:22px;font-weight:900;color:var(--text-600);margin-bottom:8px;}
.placeholder-page p{font-size:14px;color:var(--text-400);}

/* =============================================
   FAB・下部ナビ（モバイルのみ）
   ============================================= */
.fab{
  position:fixed;bottom:calc(var(--nav-h) - 28px);left:50%;transform:translateX(-50%);
  width:64px;height:64px;border-radius:50%;
  background:var(--grad-insta);color:white;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-fab);z-index:300;border:4px solid white;transition:transform .15s;
}
.fab:hover{transform:translateX(-50%) scale(1.08) rotate(90deg);}
.fab:active{transform:translateX(-50%) scale(.92);}
.fab .material-icons-round{font-size:28px;}

.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:var(--nav-h);
  background:var(--surface);border-top:1px solid var(--border);
  display:flex;align-items:flex-start;padding-top:10px;
  z-index:200;box-shadow:0 -4px 20px rgba(255,107,0,.06);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.nav-gap{flex:1.2;}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--text-400);transition:color .15s,transform .1s;
}
.nav-item:active{transform:scale(.9);}
.nav-item .material-icons-round{font-size:24px;}
.nav-label{font-size:10px;font-weight:700;}
.nav-item.active{color:var(--orange);}

/* =============================================
   モーダル（共通）
   ============================================= */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(80,20,120,.22);backdrop-filter:blur(8px);
  z-index:400;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.modal-overlay.open{opacity:1;pointer-events:all;}

.modal-sheet{
  width:100%;max-width:430px;background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  max-height:92dvh;          /* dvhでアドレスバー分を正確に除外 */
  display:flex;flex-direction:column; /* ヘッダー固定・ボディスクロール */
  overflow:hidden;           /* 子要素に任せる */
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
  position:relative;
}
.modal-overlay.open .modal-sheet{transform:translateY(0);}
.modal-sheet::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--grad-insta);border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.sheet-handle{width:40px;height:4px;background:var(--text-200);border-radius:2px;margin:14px auto 4px;flex-shrink:0;}
.sheet-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 14px;border-bottom:1px solid var(--border);flex-shrink:0;}
.sheet-title{font-size:17px;font-weight:900;}
.sheet-close{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--text-600);display:flex;align-items:center;justify-content:center;}
.sheet-close .material-icons-round{font-size:18px;}
.sheet-body{
  padding:20px 20px 40px;
  display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;           /* ここだけスクロール */
  flex:1;                    /* 残り高さを全部使う */
  -webkit-overflow-scrolling:touch; /* iOS慣性スクロール */
}
.sheet-body::-webkit-scrollbar{width:3px;}
.sheet-body::-webkit-scrollbar-thumb{background:var(--orange-2);border-radius:2px;}

.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.form-label{font-size:13px;font-weight:800;color:var(--text-900);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.req{font-size:10px;font-weight:800;background:var(--grad-warm);color:white;padding:2px 8px;border-radius:100px;}
.form-hint{font-size:11px;font-weight:500;color:var(--text-400);}

.form-input,.form-textarea{
  width:100%;padding:13px 14px;
  border:2px solid var(--border);border-radius:var(--r-md);
  font-size:16px;font-weight:500;color:var(--text-900);
  background:var(--surface-2);outline:none;transition:all .15s;-webkit-appearance:none;
}
.form-input:focus,.form-textarea:focus{
  border-color:var(--orange);background:white;box-shadow:0 0 0 4px rgba(255,107,0,.1);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-400);font-weight:400;}
.form-textarea{resize:none;line-height:1.7;}

.select-wrap{position:relative;}
.form-select{
  width:100%;padding:13px 40px 13px 14px;
  border:2px solid var(--border);border-radius:var(--r-md);
  font-size:16px;font-weight:500;color:var(--text-900);
  background:var(--surface-2);outline:none;-webkit-appearance:none;transition:all .15s;
}
.form-select:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,107,0,.1);}
.select-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--orange);pointer-events:none;}

.form-error{font-size:12px;color:#E53935;font-weight:700;min-height:16px;}

/* ★ 気分引き継ぎバッジ（投稿モーダル内） */
/* ★ 投稿フォーム：インスピレーションコピー */
.post-inspiration-box {
  background: linear-gradient(135deg, rgba(255,107,53,.08), rgba(233,30,99,.05));
  border: 1px solid rgba(255,107,53,.2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.post-inspiration-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  line-height: 1.6;
  letter-spacing: .01em;
}

/* ★ 投稿完了モーダル */
.post-success-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn .25s ease;
}
.post-success-sheet {
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 40px 28px 52px;
  width: 100%; max-width: 480px;
  text-align: center;
  border: 1px solid var(--border);
  animation: slideUp .35s cubic-bezier(.16,1,.3,1);
}
@keyframes slideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.post-success-emoji { font-size: 40px; margin-bottom: 16px; }
.post-success-title {
  font-size: 22px; font-weight: 900;
  color: var(--text-900);
  letter-spacing: -.03em; margin-bottom: 12px;
}
.post-success-body {
  font-size: 14px; line-height: 1.85;
  color: var(--text-600);
  margin-bottom: 28px;
}
.post-success-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.post-success-share-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px;
  background: #000; color: #fff;
  border-radius: 100px;
  font-size: 14px; font-weight: 800;
  transition: opacity .15s;
}
.post-success-share-btn:active { opacity: .75; }
.post-success-close-btn {
  padding: 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  font-size: 13px; font-weight: 700;
  color: var(--text-600);
  transition: all .15s;
}
.post-success-close-btn:active { opacity: .75; }

/* ★ 感情ナビ（ホーム感情導線） */
.emotion-section {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.emotion-section-header { margin-bottom: 10px; }
.emotion-section-title {
  font-size: 12px; font-weight: 700;
  color: var(--text-400);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.emotion-nav-bar {
  display: flex; gap: 7px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 4px;
}
.emotion-nav-bar::-webkit-scrollbar { display: none; }
.emotion-nav-item {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  color: var(--text-600);
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
  transition: all .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.emotion-nav-item:active { transform: scale(.93); }
.emotion-nav-item.active {
  background: var(--grad-warm);
  border-color: transparent;
  color: white;
  box-shadow: 0 3px 12px rgba(255,107,53,.3);
}

.mood-carry-badge{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,rgba(255,122,47,.12),rgba(255,78,106,.08));
  border:1.5px solid rgba(255,122,47,.3);
  border-radius:var(--r-md);padding:10px 14px;
  margin-bottom:12px;
  animation:fadeIn .3s ease;
}
.mood-carry-emoji{font-size:20px;line-height:1;flex-shrink:0;}
.mood-carry-text{font-size:12px;font-weight:700;color:var(--orange);}

.submit-btn{
  width:100%;padding:16px;border-radius:var(--r-lg);
  background:var(--grad-warm);color:white;font-size:15px;font-weight:900;
  display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 6px 20px rgba(255,107,0,.35);transition:transform .15s;margin-top:8px;
}
.submit-btn:active{transform:scale(.98);}
.submit-btn .material-icons-round{font-size:18px;}

/* =============================================
   タブ設定モーダル
   ============================================= */
.tab-settings-hint{font-size:13px;color:var(--text-400);line-height:1.7;margin-bottom:4px;}

.tab-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;min-height:36px;}
.tab-chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:100px;
  background:var(--orange-pale);border:1.5px solid var(--orange);font-size:13px;font-weight:700;color:var(--orange);
}
.tab-chip.is-fixed{background:var(--surface-2);border-color:var(--border);color:var(--text-400);}
.tab-chip-del{
  width:18px;height:18px;border-radius:50%;background:var(--orange);color:white;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;font-weight:900;transition:transform .1s;
}
.tab-chip-del:hover{transform:scale(1.2);}

.add-tab-btn-full{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:13px;border-radius:var(--r-md);
  background:var(--orange);color:white;font-size:14px;font-weight:800;
  margin-top:8px;transition:background .15s,transform .12s;
  box-shadow:0 4px 12px rgba(255,107,0,.3);
}
.add-tab-btn-full:hover{background:var(--orange-2);}
.add-tab-btn-full:active{transform:scale(.97);}
.add-tab-btn-full .material-icons-round{font-size:18px;}

.reset-tabs-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:12px;border-radius:var(--r-md);
  border:2px solid var(--border);color:var(--text-400);
  font-size:13px;font-weight:700;margin-top:4px;transition:all .15s;
}
.reset-tabs-btn:hover{border-color:var(--orange);color:var(--orange);}
.reset-tabs-btn .material-icons-round{font-size:16px;}

/* =============================================
   トースト
   ============================================= */
.toast{
  position:fixed;bottom:calc(var(--nav-h) + 24px);left:50%;
  transform:translateX(-50%) translateY(12px);
  background:var(--text-900);color:white;
  padding:13px 22px;border-radius:100px;font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:500;transition:opacity .25s,transform .25s;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .material-icons-round{font-size:17px;color:#4CAF50;}

/* ====================================================
   PC レイアウト（≥768px）
   ==================================================== */
@media(min-width:768px){
  html{background:#ECEAE6;}
  body{background:transparent;}

  .app-layout{
    max-width:1280px;margin:0 auto;background:white;
    box-shadow:0 0 80px rgba(0,0,0,.1);
    display:grid;
    grid-template-areas:"header header" "sidebar content";
    grid-template-columns:var(--sidebar-w) 1fr;
    grid-template-rows:auto 1fr;
    min-height:100vh;
  }

  /* PC ヘッダー（白・クリーン） */
  .header{
    grid-area:header;position:sticky;top:0;
    left:0;transform:none;max-width:none;width:100%;
    background:white;border-bottom:1px solid var(--border-g);
    box-shadow:0 1px 8px rgba(0,0,0,.05);overflow:visible;
  }
  .header::before{display:none;}
  .header-inner{padding:14px 28px 10px;}
  /* PCではロゴをグラデテキストに */
  .logo-main{
    background:var(--grad-warm);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  .logo-sub{color:var(--text-400);}

  .hdr-btn{background:var(--surface-2);color:var(--text-600);}
  .hdr-btn:hover{background:#ECEAE6;}

  .search-bar{background:var(--surface-2);margin:0 28px 10px;}

  /* PC タブ */
  .tabs-row{padding:0 28px 12px;}
  /* PCでは疑似要素フェードを白ベースに */
  .tabs-row::after{
    background:linear-gradient(to right, transparent 0%, white 88%);
    right:69px; /* PC右padding(28px) + 縦線(17px) + ボタン(32px) - 補正 */
  }

  .tab{background:var(--surface-2);color:var(--text-600);border-color:var(--border-g);text-shadow:none;}
  .tab:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-pale);}
  .tab.active{background:var(--orange);color:white;border-color:var(--orange);box-shadow:0 3px 10px rgba(255,107,0,.3);text-shadow:none;}

  .tab-divider{background:var(--border-g);}
  .tab-edit-btn{background:var(--surface-2);color:var(--text-600);border-color:var(--border-g);}
  .tab-edit-btn:hover{background:var(--orange-pale);color:var(--orange);border-color:var(--orange);}

  /* サイドバー */
  .sidebar{
    grid-area:sidebar;display:flex;flex-direction:column;
    position:sticky;top:64px;height:calc(100vh - 64px);
    border-right:1px solid var(--border-g);padding:24px 14px;
    overflow-y:auto;background:var(--surface);
  }
  .sidebar-nav{display:flex;flex-direction:column;gap:4px;flex:1;}
  .sidebar-item{
    display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r-lg);
    font-size:14px;font-weight:700;color:var(--text-600);
    transition:background .15s,color .15s;text-align:left;width:100%;
  }
  .sidebar-item .material-icons-round{font-size:22px;flex-shrink:0;}
  .sidebar-item:hover{background:var(--surface-2);color:var(--orange);}
  .sidebar-item.active{background:var(--orange-pale);color:var(--orange);}
  .sidebar-footer{padding-top:16px;border-top:1px solid var(--border-g);margin-top:8px;}
  .sidebar-post-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:13px;border-radius:var(--r-lg);
    background:var(--grad-warm);color:white;font-size:14px;font-weight:900;
    box-shadow:0 4px 16px rgba(255,107,0,.3);transition:transform .12s,box-shadow .12s;
  }
  .sidebar-post-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,107,0,.4);}
  .sidebar-post-btn:active{transform:scale(.97);}
  .sidebar-post-btn .material-icons-round{font-size:20px;}

  /* コンテンツ */
  .content-area{grid-area:content;padding-top:0;padding-bottom:0;overflow-y:auto;height:calc(100vh - 64px);}
  .page{padding:28px 32px;}
  .page-area{padding:28px 32px;}

  .feed{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:0;}
  .region-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
  .region-card{min-height:130px;}

  .modal-overlay{align-items:center;}
  .modal-sheet{max-width:520px;border-radius:var(--r-xl);max-height:85dvh;}
  .modal-sheet::before{border-radius:var(--r-xl) var(--r-xl) 0 0;}
  .sheet-handle{display:none;}

  .toast{bottom:32px;}
  .fab{display:none;}
  .bottom-nav{display:none;}
}

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

.modal-sheet::-webkit-scrollbar{width:4px;}
.modal-sheet::-webkit-scrollbar-thumb{background:var(--orange-2);border-radius:2px;}

/* =============================================
   人気・マイページ 共通ヘッダー
   ============================================= */
.page-header-block{
  padding:4px 18px 16px;
}
.page-title{
  font-size:20px;font-weight:900;color:var(--text-900);
  margin-bottom:4px;letter-spacing:-.01em;
}
.page-subtitle{font-size:13px;color:var(--text-400);font-weight:400;}

/* =============================================
   マイページ：統計
   ============================================= */
.mypage-stats{
  display:flex;gap:20px;margin-top:12px;
  padding:14px 16px;
  background:white;border-radius:var(--r-lg);
  border:1.5px solid var(--border);
  box-shadow:var(--sh-card);
}
.mypage-stat{
  display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;
}
.mypage-stat-num{
  font-size:26px;font-weight:900;color:var(--orange);
  font-family:'Sora',sans-serif;
}
.mypage-stat-label{font-size:11px;color:var(--text-400);font-weight:700;}

/* =============================================
   カード：削除ボタン（マイページ用）
   ============================================= */
.card-delete-btn{
  width:44px;height:44px;border-radius:var(--r-md);
  border:2px solid rgba(229,57,53,0.2);
  background:rgba(229,57,53,0.06);
  color:#E53935;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .15s;
}
.card-delete-btn:hover{background:rgba(229,57,53,0.14);border-color:rgba(229,57,53,0.4);}
.card-delete-btn:active{transform:scale(.9);}
.card-delete-btn .material-icons-round{font-size:20px;}

/* =============================================
   カード：いいね数バッジ（人気ページ）
   ============================================= */
.like-count-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:800;color:var(--pink);
  background:var(--pink-pale);
  padding:4px 10px;border-radius:100px;
  margin-bottom:10px;
}
.like-count-badge .material-icons-round{font-size:14px;}

/* =============================================
   ヘッダーアバター
   ============================================= */
.header-avatar{
  width:32px;height:32px;border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,0.8);
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

/* =============================================
   マイページ：ユーザーカード
   ============================================= */
.mypage-user-card{
  display:flex;align-items:center;gap:12px;
  margin:0 18px 12px;
  padding:16px;
  background:var(--surface);border-radius:var(--r-lg);
  border:1.5px solid var(--border);
  box-shadow:var(--sh-card);
}
.mypage-avatar{
  width:52px;height:52px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  border:3px solid var(--orange-pale);
}
.mypage-user-info{flex:1;min-width:0;}
.mypage-user-name{
  font-size:15px;font-weight:800;color:var(--text-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mypage-user-email{
  font-size:12px;color:var(--text-400);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:2px;
}

.mypage-stats{
  margin:0 18px 16px;
}

/* ログアウトボタン */
.logout-btn{
  flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 10px;border-radius:var(--r-sm);
  background:rgba(229,57,53,0.06);color:#E53935;
  border:1.5px solid rgba(229,57,53,0.2);
  font-size:10px;font-weight:700;
  transition:all .15s;
}
.logout-btn:hover{background:rgba(229,57,53,0.12);}
.logout-btn .material-icons-round{font-size:18px;}

/* =============================================
   ログインプロンプト（マイページ未ログイン時）
   ============================================= */
.login-prompt{
  text-align:center;padding:52px 28px;
  margin:16px;
  background:var(--surface);border-radius:var(--r-xl);
  border:1.5px solid var(--border);
  box-shadow:var(--sh-card);
}
.login-prompt-emoji{font-size:48px;margin-bottom:16px;}
.login-prompt-title{font-size:18px;font-weight:900;color:var(--text-900);margin-bottom:10px;letter-spacing:-.02em;}
.login-prompt-sub{font-size:13px;color:var(--text-600);margin-bottom:24px;line-height:1.75;}
.login-prompt-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 32px;border-radius:100px;
  background:var(--grad-warm);color:white;
  font-size:14px;font-weight:800;
  box-shadow:0 6px 20px rgba(255,107,53,.3);
  transition:transform .15s, box-shadow .15s;
}
.login-prompt-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,107,53,.38);}
.login-prompt-btn:active{transform:scale(.97);}
.login-prompt-btn .material-icons-round{font-size:18px;}

/* =============================================
   「はじめる」モーダル（匿名認証）
   ============================================= */

/* ウェルカムブロック */
.anon-welcome{
  text-align:center;
  padding:8px 0 20px;
}
.anon-welcome-emoji{
  font-size:52px;
  margin-bottom:12px;
}
.anon-welcome-title{
  font-size:18px;font-weight:800;
  color:var(--text-900);margin-bottom:6px;
}
.anon-welcome-sub{
  font-size:13px;color:var(--text-400);font-weight:400;
}

/* 注記 */
.anon-note{
  text-align:center;
  font-size:11px;
  color:var(--text-400);
  line-height:1.7;
  margin-top:16px;
  font-weight:400;
}

/* マイページのアバター（画像なし・テキストアイコン版） */
.mypage-avatar-anon{
  width:52px;height:52px;border-radius:50%;
  background:var(--grad-warm);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(255,122,47,.3);
}

/* Googleログインボタン */
.google-login-btn{
  width:100%;padding:14px;
  border-radius:var(--r-lg);
  background:white;color:var(--text-900);
  border:2px solid var(--border-g);
  font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:all .15s;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.google-login-btn:hover{background:#F8F8F8;border-color:#C0C0C0;box-shadow:0 4px 12px rgba(0,0,0,0.12);}
.google-login-btn:active{transform:scale(.98);}

/* OR 区切り線 */
.auth-divider{
  display:flex;align-items:center;gap:12px;
  margin:16px 0;color:var(--text-400);font-size:12px;font-weight:600;
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:var(--border-g);
}

/* パスワードラッパー */
.password-wrap{position:relative;}
.password-wrap .form-input{padding-right:46px;}
.password-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--text-400);display:flex;align-items:center;
  background:none;border:none;padding:0;
}
.password-toggle .material-icons-round{font-size:20px;}

/* ログイン/新規登録切り替え */
.auth-toggle-row{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;font-size:13px;color:var(--text-400);font-weight:500;
}
.auth-toggle-btn{
  color:var(--orange);font-size:13px;font-weight:800;
  background:none;border:none;padding:0;text-decoration:underline;
  cursor:pointer;
}

/* パスワードリセットボタン */
.auth-reset-btn{
  display:block;width:100%;margin-top:10px;
  text-align:center;font-size:12px;color:var(--text-400);
  background:none;border:none;cursor:pointer;padding:6px;
  text-decoration:underline;
}
.auth-reset-btn:hover{color:var(--orange);}

}
.like-count-badge .material-icons-round{font-size:14px;}

/* =============================================
   ★ AIフキダシ
   ============================================= */

.ai-bubble-wrap{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:0 16px 14px;
  animation:fadeIn .3s ease;
}

/* AIラベル（アイコン） */
.ai-bubble-label{
  flex-shrink:0;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--grad-warm);
  color:white;
  font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
  box-shadow:0 2px 8px rgba(255,122,47,.3);
  letter-spacing:.02em;
}

/* フキダシ本体 */
.ai-bubble{
  flex:1;
  background:white;
  border-radius:0 var(--r-lg) var(--r-lg) var(--r-lg);
  padding:12px 14px;
  border:1.5px solid var(--border);
  box-shadow:var(--sh-card);
  min-height:44px;
  display:flex;
  align-items:center;
}

/* ローディングドット */
.ai-bubble-loading{
  display:flex;
  align-items:center;
  gap:5px;
  padding:2px 4px;
}
.ai-bubble-loading span{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--orange);
  opacity:.4;
  animation:dotBounce 1.2s ease-in-out infinite;
}
.ai-bubble-loading span:nth-child(2){ animation-delay:.2s; }
.ai-bubble-loading span:nth-child(3){ animation-delay:.4s; }

@keyframes dotBounce{
  0%,80%,100%{ transform:scale(.8); opacity:.4; }
  40%{ transform:scale(1.2); opacity:1; }
}

/* AIメッセージテキスト */
.ai-bubble-text{
  font-size:14px;
  color:var(--text-900);
  line-height:1.6;
  font-weight:400;
  margin:0;
}

/* PC */
@media(min-width:768px){
  .ai-bubble-wrap{ padding:0 32px 16px; }
}

/* 気分セクション全体 */
.mood-section{
  padding:16px 16px 4px;
}

/* セクションタイトル */
.mood-section-title{
  font-size:15px;font-weight:800;color:var(--text-900);
  letter-spacing:-.02em;line-height:1.3;
}

/* サブコピー */
.mood-section-sub{
  font-size:11px;font-weight:500;color:var(--text-400);
  margin-top:2px;line-height:1.5;
  transition:color .2s;
}
.mood-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  margin-bottom:12px;
}

.mood-header-texts{
  flex:1;min-width:0;
}

.mood-lead{
  font-size:15px;font-weight:700;color:var(--text-900);
  letter-spacing:-.01em;
}

.mood-reset-btn{
  display:flex;align-items:center;gap:3px;
  font-size:12px;font-weight:700;color:var(--text-400);
  background:var(--surface-2);border:1.5px solid var(--border);
  padding:5px 11px;border-radius:100px;
  transition:all .15s;
}
.mood-reset-btn:hover{color:var(--orange);border-color:var(--orange);}
.mood-reset-btn .material-icons-round{font-size:14px;}

/* 気分ボタンの横スクロール列 */
.mood-bar{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:4px;
}
.mood-bar::-webkit-scrollbar{display:none;}

/* 気分ボタン本体 */
.mood-btn{
  flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 14px;
  border-radius:var(--r-lg);
  background:white;
  border:2px solid var(--border);
  color:var(--text-600);
  min-width:64px;
  transition:all .18s ease;
  box-shadow:var(--sh-card);
}
.mood-btn:active{transform:scale(.93);}

.mood-btn-emoji{font-size:22px;line-height:1;}
.mood-btn-label{font-size:11px;font-weight:700;white-space:nowrap;}

/* アクティブ状態（選択中） */
.mood-btn.active{
  background:var(--grad-warm);
  border-color:transparent;
  color:white;
  box-shadow:0 4px 16px rgba(255,107,0,.35);
  transform:translateY(-2px);
}
.mood-btn.active .mood-btn-label{color:white;}

/* =============================================
   ★ おすすめスポットセクション
   ============================================= */
.mood-result{
  padding:0 16px;
  animation:fadeIn .3s ease;
}

/* おすすめヘッダー */
.mood-result-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;padding-top:16px;
}

.mood-result-title{
  font-size:16px;font-weight:900;color:var(--text-900);
  letter-spacing:-.01em;
}

.mood-result-count{
  font-size:11px;font-weight:800;
  background:var(--grad-warm);color:white;
  padding:4px 11px;border-radius:100px;
}

/* おすすめフィード（通常feedと同スタイルを継承） */
.mood-feed{
  padding:0;
  gap:14px;
  margin-bottom:0;
}

/* ★ すべての寄り道を見る */
.mood-show-all-wrap {
  display:flex;justify-content:center;
  padding:16px 0 4px;
}
.mood-show-all-btn {
  display:flex;align-items:center;gap:6px;
  padding:12px 24px;
  background:var(--surface-2);
  border:1.5px solid var(--border);
  border-radius:100px;
  font-size:13px;font-weight:700;
  color:var(--text-600);
  transition:all .15s;
}
.mood-show-all-btn:hover { border-color:var(--orange);color:var(--orange); }
.mood-show-all-btn .material-icons-round { font-size:17px; }

/* ★ こんな気分ならこちらも */
.mood-also-section {
  padding:16px 0 8px;
}
.mood-also-title {
  font-size:12px;font-weight:700;color:var(--text-400);
  letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:10px;
}
.mood-also-chips {
  display:flex;gap:8px;flex-wrap:wrap;
}
.mood-also-chip {
  padding:8px 14px;border-radius:100px;
  background:var(--surface-2);border:1.5px solid var(--border);
  color:var(--text-600);font-size:12px;font-weight:700;
  transition:all .18s;
  -webkit-tap-highlight-color:transparent;
}
.mood-also-chip:hover { border-color:var(--orange);color:var(--orange); }
.mood-also-chip:active { transform:scale(.93); }

/* ★ もっと見るボタン */
.load-more-wrap {
  display:flex;justify-content:center;
  padding:20px 16px 8px;
}
.load-more-btn {
  display:flex;align-items:center;gap:8px;
  padding:14px 32px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:100px;
  font-size:13px;font-weight:800;
  color:var(--text-600);
  box-shadow:var(--sh-card);
  transition:all .18s;
  -webkit-tap-highlight-color:transparent;
}
.load-more-btn:hover { border-color:var(--orange);color:var(--orange);transform:translateY(-1px); }
.load-more-btn:active { transform:scale(.97); }
.load-more-btn .material-icons-round { font-size:18px; }

/* ★ 今日のおすすめ */
.today-pick-section {
  padding:16px 0 0;
  border-top:1px solid var(--border);
  margin-bottom:4px;
}
.today-pick-header {
  display:flex;align-items:center;gap:8px;
  padding:0 16px;
  margin-bottom:12px;
}
.today-pick-icon { font-size:16px; }
.today-pick-title {
  font-size:13px;font-weight:800;
  color:var(--text-900);flex:1;
  letter-spacing:-.01em;
}
.today-pick-refresh {
  width:30px;height:30px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-400);
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.today-pick-refresh:hover { color:var(--orange);border-color:var(--orange); }
.today-pick-refresh .material-icons-round { font-size:15px; }
.today-pick-feed {
  padding:0 16px;
  gap:12px;
}

/* 該当なし */
.mood-empty{
  text-align:center;padding:32px 20px;
  background:white;border-radius:var(--r-xl);
  border:2px dashed var(--orange-2);
  margin-bottom:8px;
}
.mood-empty-emoji{font-size:40px;margin-bottom:10px;}
.mood-empty-title{font-size:14px;font-weight:800;color:var(--text-600);margin-bottom:4px;}
.mood-empty-sub{font-size:12px;color:var(--text-400);margin-bottom:14px;}

/* 仕切り線（おすすめ↓通常フィード） */
.mood-result-divider{
  display:flex;align-items:center;gap:12px;
  margin:20px 0 8px;
  font-size:12px;font-weight:700;color:var(--text-400);
}
.mood-result-divider::before,
.mood-result-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* =============================================
   PC：気分UI調整
   ============================================= */
@media(min-width:768px){
  .mood-section{ padding:20px 32px 4px; }
  .mood-result{ padding:0 32px; }
  .mood-btn{ min-width:72px;padding:14px 16px; }
  .mood-btn-emoji{ font-size:26px; }
  .mood-btn-label{ font-size:12px; }
  .mood-section-title{ font-size:16px; }
  .mood-section-sub{ font-size:12px; }
}

/* =============================================
   ★ 時間帯で変わる寄り道セクション
   ============================================= */
.time-section{
  padding:16px 16px 8px;
  border-bottom:1px solid var(--border);
  margin-bottom:0;
}

/* ヘッダー行 */
.time-section-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  margin-bottom:10px;
}
.time-section-texts{ flex:1;min-width:0; }

.time-section-title{
  font-size:15px;font-weight:800;color:var(--text-900);
  letter-spacing:-.02em;line-height:1.3;
}
.time-section-sub{
  font-size:11px;font-weight:500;color:var(--text-400);
  margin-top:2px;line-height:1.5;
}

/* リセットボタン（mood-reset-btnと同スタイル） */
.time-reset-btn{
  display:flex;align-items:center;gap:3px;flex-shrink:0;
  font-size:12px;font-weight:700;color:var(--text-400);
  background:var(--surface-2);border:1.5px solid var(--border);
  padding:5px 11px;border-radius:100px;
  transition:all .15s;
}
.time-reset-btn:hover{color:var(--orange);border-color:var(--orange);}
.time-reset-btn .material-icons-round{font-size:14px;}

/* チップ横スクロール */
.time-chip-bar{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:6px;
}
.time-chip-bar::-webkit-scrollbar{display:none;}

/* チップボタン本体（テキストのみ・横長） */
.time-chip{
  flex-shrink:0;
  padding:8px 14px;
  border-radius:100px;
  background:white;
  border:1.5px solid var(--border);
  color:var(--text-600);
  font-size:12px;font-weight:700;
  white-space:nowrap;
  transition:all .18s ease;
  box-shadow:var(--sh-card);
  -webkit-tap-highlight-color:transparent;
}
.time-chip:active{transform:scale(.93);}

/* アクティブ状態 */
.time-chip.active{
  background:var(--grad-warm);
  border-color:transparent;
  color:white;
  box-shadow:0 3px 12px rgba(255,107,0,.3);
}

/* PC表示 */
@media(min-width:768px){
  .time-section{ padding:16px 32px 8px; }
  .time-chip{ font-size:13px;padding:8px 16px; }
  .time-section-title{ font-size:16px; }
  .time-section-sub{ font-size:12px; }
}



/* =============================================
   メール+パスワード認証 追加スタイル
   ============================================= */

/* パスワード入力ラップ */
.password-wrap {
  position: relative;
}
.password-wrap .form-input {
  padding-right: 44px;
}
.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-400);
  padding: 4px;
  display: flex;
  align-items: center;
}

/* ログイン↔新規登録 切り替え */
.auth-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 8px;
  font-size: 13px;
  color: var(--text-400);
}
.auth-toggle-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}

/* パスワードリセット */
.auth-reset-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-400);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  padding: 4px 0 8px;
}

/* マイページ：頭文字アバター */
.mypage-avatar-initial {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF7A2F, #FF4E6A);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  font-family: 'Sora', sans-serif;
}

/* 退会ボタン */
.withdraw-btn {
  display: block;
  width: 100%;
  margin: 4px 0 12px;
  padding: 10px;
  background: none;
  border: none;
  color: var(--text-400);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.withdraw-btn:hover { color: #FF4E6A; }

/* =============================================
   画像アップロードUI
   ============================================= */

.img-upload-placeholder { display: none; }
.img-remove-btn { display: none; }

/* アップロードプログレスバー */
.upload-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.upload-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--grad-warm);
  border-radius: 2px;
  transition: width .2s;
}

/* =============================================
   ヒーローセクション（ファーストビュー）新版
   ============================================= */
/* =============================================
   ヒーローセクション（未ログイン）
   ============================================= */
.hero-section {
  min-height: 100svh;
  /* ベース色（CSS変数未適用環境のフォールバック） */
  background: #FF6B35;
  background: linear-gradient(140deg, #FF9A35 0%, #FF5B5B 40%, #D81B60 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* PC時に page の padding を打ち消す */
  margin: -28px -32px 0;
  padding: 100px 40px 120px;
}
/* 右上 光の球 */
.hero-section::before {
  content: '';
  position: absolute;
  top: -180px; right: -180px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,235,120,.38) 0%, transparent 62%);
  border-radius: 50%;
  pointer-events: none;
}
/* 左下 光の球 */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -160px; left: -160px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(140,0,90,.35) 0%, transparent 62%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.45);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(255,255,255,.96);
  text-transform: uppercase;
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-title {
  font-size: clamp(36px, 8vw, 58px);
  font-weight: 900;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -.04em;
  margin-bottom: 22px;
  text-shadow: 0 4px 28px rgba(0,0,0,.18);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .hero-title { font-size: 36px; white-space: normal; }
}
.hero-desc {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  line-height: 1.9;
  margin-bottom: 48px;
  letter-spacing: .01em;
  max-width: 400px;
}
/* ★ CTAボタン → シンプル・白・押しやすい */
.hero-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 800;
  padding: 17px 32px;
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.hero-cta-btn:active { transform: scale(.95); }
.hero-cta-btn .material-icons-round { font-size: 19px; }
.hero-cta-primary {
  background: #fff;
  color: #FF5535;
  font-weight: 900;
  box-shadow: 0 14px 44px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
}
.hero-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 52px rgba(0,0,0,.28); }
.hero-cta-secondary {
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.96);
  border: 1.5px solid rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-cta-secondary:hover { background: rgba(255,255,255,.24); }
.hero-cta-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin-bottom: 14px;
}
.hero-cta-sub {
  font-size: 11px;
  color: rgba(255,255,255,.22);
  font-weight: 400;
  letter-spacing: .04em;
}
/* ★ 気分タグのチラ見せ */
.hero-mood-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  max-width: 340px;
}
.hero-mood-chip {
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 700;
}
@media(min-width: 768px) {
  .hero-title { font-size: 58px; }
  /* PC: page の padding を打ち消して全幅ヒーローに */
  .hero-section {
    margin: -28px -32px 0;
    min-height: calc(100vh - 64px);
    padding: 80px 60px 100px;
  }
  .hero-inner { max-width: 600px; }
}

/* ★ 空状態の改善 */
.empty-state { padding: 52px 24px; text-align: center; }
.empty-state-inner { display: flex; flex-direction: column; align-items: center; }
.empty-icon { font-size: 52px; margin-bottom: 16px; animation: gentle-bounce 2.4s ease infinite; }
@keyframes gentle-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.empty-title { font-size: 16px; font-weight: 800; color: var(--text-900); margin-bottom: 8px; letter-spacing: -.01em; }
.empty-sub { font-size: 13px; color: var(--text-400); line-height: 1.8; margin-bottom: 24px; }
.empty-post-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 28px; border-radius: 100px;
  background: var(--grad-warm); color: white;
  font-size: 14px; font-weight: 800;
  box-shadow: 0 6px 20px rgba(255,107,53,.3);
}
.empty-post-btn:active { transform: scale(.95); }
.empty-post-btn .material-icons-round { font-size: 18px; }

/* ★ 投稿者アイコン＋ニックネーム */
.card-poster { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.card-poster-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-warm); color: white;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.card-poster-name {
  font-size: 11px; font-weight: 600; color: var(--text-400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ★ カード統計 */
.card-stats { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.card-stat { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--text-400); }
.card-stat .material-icons-round { font-size: 13px; color: var(--pink); }

/* ★ ログイン誘導モーダル */
.login-prompt-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.58);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .22s ease;
}
.login-prompt-sheet {
  background: var(--surface); border-radius: 24px 24px 0 0;
  padding: 40px 28px 52px; width: 100%; max-width: 480px; text-align: center;
  animation: slideUp .32s cubic-bezier(.16,1,.3,1);
}
.login-prompt-emoji { font-size: 42px; margin-bottom: 14px; display: block; }
.login-prompt-title { font-size: 18px; font-weight: 900; color: var(--text-900); margin-bottom: 12px; letter-spacing: -.02em; }
.login-prompt-body { font-size: 14px; line-height: 1.85; color: var(--text-600); margin-bottom: 28px; }
.login-prompt-sub-note { display: block; margin-top: 6px; font-size: 12px; color: var(--text-400); }
.login-prompt-actions { display: flex; flex-direction: column; gap: 10px; }
.login-prompt-register-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; border-radius: 100px;
  background: var(--grad-warm); color: #fff;
  font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 20px rgba(255,107,53,.3);
}
.login-prompt-register-btn:active { opacity: .8; }
.login-prompt-register-btn .material-icons-round { font-size: 18px; }
.login-prompt-login-btn {
  padding: 13px; background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: 100px; font-size: 13px; font-weight: 700; color: var(--text-600);
}
.login-prompt-cancel-btn { font-size: 12px; color: var(--text-400); padding: 8px; }
[data-theme="dark"] .login-prompt-sheet { background: #1e1c19 !important; }
[data-theme="dark"] .login-prompt-title { color: var(--text-900) !important; }
[data-theme="dark"] .login-prompt-body { color: var(--text-600) !important; }
[data-theme="dark"] .login-prompt-login-btn { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-600) !important; }
[data-theme="dark"] .card-poster-name { color: var(--text-400) !important; }
[data-theme="dark"] .card-stat { color: var(--text-400) !important; }

/* =============================================
   ログイン後ウェルカムセクション（新版・シンプル）
   ============================================= */
.welcome-section {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 18px 12px;
}
.welcome-inner { max-width: 480px; margin: 0 auto; }

.welcome-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.welcome-time {
  font-size: 11px;
  color: var(--text-400);
  font-weight: 500;
  margin-bottom: 2px;
}
.welcome-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-900);
}
.welcome-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: white;
  font-size: 17px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden; /* ★ 画像を丸く切り抜くために必須 */
}
.welcome-action-area {
  background: white;
  color: var(--primary);
  border: 2px solid #FF7A2F33;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

@media(min-width: 768px) {
  .welcome-section { padding: 28px 32px 20px; }
  .welcome-name { font-size: 26px; }
  .welcome-action-btn { padding: 14px 16px; font-size: 14px; }
}

.welcome-app-desc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  opacity: .75;
  margin-bottom: 12px;
}
.welcome-app-desc .material-icons-round { font-size: 14px; }

/* ===== スポット詳細モーダル ===== */
.spot-detail-sheet {
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
}
.spot-detail-sheet::before { display: none; } /* グラデーションオーバーレイ無効 */

.spot-detail-img-wrap {
  position: relative;
  width: 100%;
  height: 260px;
  flex-shrink: 0;
  background: var(--surface-2);
  overflow: hidden;
}
.spot-detail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg,#FFB347,#FF6B6B);
}
/* 画像上に暗いグラデ（テキスト可読性） */
.spot-detail-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,0)   40%,
    rgba(0,0,0,.55) 100%
  );
  pointer-events: none;
}
.spot-detail-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.spot-detail-close-btn .material-icons-round { font-size: 18px; }
.spot-detail-img-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
}
.spot-detail-img-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 18px;
  z-index: 10;
}
.spot-detail-name {
  font-size: 22px;
  font-weight: 900;
  color: white;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

.spot-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.spot-detail-comment {
  font-size: 15px;
  color: var(--text-600);
  line-height: 1.8;
  font-weight: 400;
  white-space: pre-wrap;
}
.spot-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.spot-detail-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-400);
  font-weight: 500;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.spot-detail-meta .meta-divider { opacity: .4; }

.spot-detail-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.spot-detail-like-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px;
  border-radius: var(--r-md);
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--text-600);
  font-size: 14px;
  font-weight: 700;
  transition: all .2s;
}
.spot-detail-like-btn .material-icons-round { font-size: 20px; }
.spot-detail-like-btn.liked {
  border-color: #FF4E6A;
  background: #FFF0F3;
  color: #FF4E6A;
}
.spot-detail-share-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px;
  border-radius: var(--r-md);
  background: var(--grad-warm);
  color: white;
  font-size: 14px;
  font-weight: 700;
}
.spot-detail-share-btn .material-icons-round { font-size: 20px; }

@media(min-width: 768px) {
  .spot-detail-img-wrap { height: 320px; }
  .spot-detail-name { font-size: 26px; }
}

/* =============================================
   急上昇セクション
   ============================================= */
.trending-section {
  padding: 20px 0 4px;
  border-bottom: 1px solid var(--border);
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin-bottom: 12px;
}
.section-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--text-900);
}
.section-more-btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
}
.trending-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 16px 16px;
  scrollbar-width: none;
}
.trending-scroll::-webkit-scrollbar { display: none; }
.trending-card {
  flex: 0 0 160px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-card);
  cursor: pointer;
  position: relative;
}
.trending-card-img {
  width: 160px;
  height: 120px;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .3s ease;
}
.trending-card-img.loaded { opacity: 1; }
.trending-card {
  background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease infinite;
}
.trending-card.img-loaded { animation: none; background: var(--surface); }
.trending-rank {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: white;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.trending-rank.rank-1 { background: #F59E0B; }
.trending-rank.rank-2 { background: #9CA3AF; }
.trending-rank.rank-3 { background: #B45309; }
.trending-info {
  padding: 8px 10px 10px;
}
.trending-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.trending-area {
  font-size: 11px;
  color: var(--text-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trending-likes {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #FF4E6A;
  margin-top: 4px;
}
.trending-likes .material-icons-round { font-size: 12px; }

/* =============================================
   人気ページ ランキング番号
   ============================================= */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  margin-right: 8px;
  flex-shrink: 0;
}
.rank-badge.rank-1 { background: #FEF3C7; color: #D97706; }
.rank-badge.rank-2 { background: #F3F4F6; color: #6B7280; }
.rank-badge.rank-3 { background: #FEF2EC; color: #B45309; }
.rank-badge.rank-other { background: #F7F7F7; color: var(--text-400); font-size: 11px; }

.like-count-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #FF4E6A;
  margin-bottom: 8px;
}
.like-count-badge .material-icons-round { font-size: 16px; }

/* =============================================
   バッジ（投稿数・いいね）
   ============================================= */
.user-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--bg);
  color: var(--text-600);
  margin-top: 2px;
}
.mypage-user-badge { margin-top: 4px; }

/* =============================================
   マイページ タブ
   ============================================= */
.mypage-tabs {
  display: flex;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}
.mypage-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-400);
  border-bottom: 2px solid transparent;
  transition: all .2s;
}
.mypage-tab .material-icons-round { font-size: 18px; }
.mypage-tab.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* =============================================
   詳細モーダル 「行きたい」ボタン
   ============================================= */
.spot-detail-wish-btn {
  flex: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text-600);
  font-size: 14px;
  font-weight: 700;
  transition: all .2s;
}
.spot-detail-wish-btn .material-icons-round { font-size: 20px; }
.spot-detail-wish-btn.wished {
  border-color: #3B82F6;
  background: #EFF6FF;
  color: #3B82F6;
}

/* 詳細ボタン群を3つに */
.spot-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}
.spot-detail-like-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text-600);
  font-size: 14px;
  font-weight: 700;
  transition: all .2s;
}
.spot-detail-like-btn .material-icons-round { font-size: 20px; }
.spot-detail-like-btn.liked {
  border-color: #FF4E6A;
  background: #FFF0F3;
  color: #FF4E6A;
}
.spot-detail-share-btn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--text-900);
  color: white;
  flex-shrink: 0;
}
.spot-detail-share-btn .material-icons-round { font-size: 20px; }

/* mypage-stats 3カラム対応 */
.mypage-stats {
  display: flex;
  text-align: center;
  padding: 0 20px 0;
  gap: 0;
}
.mypage-stat { flex: 1; }

/* =============================================
   地域別フィルター（人気ページ）
   ============================================= */
.popular-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px 16px;
  scrollbar-width: none;
}
.popular-filter-row::-webkit-scrollbar { display: none; }
.popular-filter-btn {
  flex: 0 0 auto;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-600);
  white-space: nowrap;
  transition: all .2s;
}
.popular-filter-btn.active {
  background: var(--text-900);
  color: white;
  border-color: var(--text-900);
}

/* =============================================
   訪問済みバッジ・ボタン
   ============================================= */
.card-visited-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(16,185,129,0.9);
  color: white;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 3px;
  backdrop-filter: blur(4px);
  z-index: 5;
}
.card-visited-badge .material-icons-round { font-size: 12px; }

.spot-detail-visited-btn {
  flex: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text-600);
  font-size: 13px;
  font-weight: 700;
  transition: all .2s;
}
.spot-detail-visited-btn .material-icons-round { font-size: 18px; }
.spot-detail-visited-btn.visited {
  border-color: #10B981;
  background: #ECFDF5;
  color: #10B981;
}

.detail-visited-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ECFDF5;
  border: 1.5px solid #10B981;
  color: #10B981;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 16px;
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.detail-visited-banner .material-icons-round { font-size: 20px; }

/* アクションボタン4つ対応 */
.spot-detail-wish-btn {
  flex: 1;
  font-size: 13px;
  padding: 12px 8px;
}
.spot-detail-like-btn {
  flex: 1;
  font-size: 13px;
  padding: 12px 8px;
}

/* mypage stats 4カラム */
.mypage-stats { gap: 0; }
.mypage-stat { flex: 1; min-width: 0; }
.mypage-stat-num { font-size: 20px; }

/* mypage tabs 3カラム */
.mypage-tab { font-size: 12px; padding: 10px 4px; gap: 4px; }
.mypage-tab .material-icons-round { font-size: 16px; }

/* =============================================
   3ステップ投稿ウィザード
   ============================================= */
.post-wizard-sheet {
  max-height: 96dvh;
  display: flex;
  flex-direction: column;
}
.post-wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 0;
  flex-shrink: 0;
}
.post-wizard-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-600);
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-wizard-back .material-icons-round { font-size: 20px; }
.post-step-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.post-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: all .3s;
}
.post-step-dot.active {
  width: 22px;
  border-radius: 4px;
  background: var(--orange);
}

.post-step {
  display: none;
  flex: 1;
  overflow-y: auto;
  flex-direction: column;
}
.post-step.active { display: flex; }

.post-step-title {
  text-align: center;
  padding: 20px 20px 16px;
  flex-shrink: 0;
}
.post-step-num {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
}
.post-step-title h2 {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-900);
  margin-bottom: 4px;
}
.post-step-title p {
  font-size: 13px;
  color: var(--text-400);
}

/* Step1: 写真 */
.post-photo-area {
  flex: 1;
  margin: 0 20px;
  border-radius: 20px;
  overflow: hidden;
  border: 2px dashed var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 220px;
  transition: border-color .2s;
  position: relative;
}
.post-photo-area:active { border-color: var(--orange); }
.post-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-400);
}
.post-photo-placeholder .material-icons-round {
  font-size: 48px;
  color: var(--text-200);
}
.post-photo-placeholder p {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-400);
}
.post-photo-hint {
  font-size: 11px;
  color: var(--text-200);
}
.post-photo-remove {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.6);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
}
.post-photo-remove .material-icons-round { font-size: 14px; }

.post-next-btn {
  margin: 16px 20px 20px;
  height: 52px;
  border-radius: var(--r-xl);
  background: var(--text-900);
  color: white;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  transition: opacity .15s;
}
.post-next-btn:active { opacity: .8; }
.post-next-btn .material-icons-round { font-size: 18px; }

/* Step2: 感情タグ */
.emotion-tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 20px;
  flex: 1;
  align-content: flex-start;
}
.emotion-tag-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-600);
  transition: all .15s;
  cursor: pointer;
}
.emotion-tag-btn:active { transform: scale(.95); }
.emotion-tag-btn.selected {
  border-color: transparent;
  color: white;
}

/* Step3: 場所・一言 */
.post-step3-body {
  padding: 0 20px 24px !important;
}
.post-comment-textarea {
  resize: none;
  font-size: 15px;
  line-height: 1.7;
}
.post-submit-btn {
  width: 100%;
  height: 52px;
  border-radius: var(--r-xl);
  background: var(--grad-warm);
  color: white;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  box-shadow: 0 4px 16px rgba(255,122,47,.35);
  transition: opacity .15s;
}
.post-submit-btn:active { opacity: .85; }
.post-submit-btn .material-icons-round { font-size: 20px; }

/* =============================================
   あなた向けセクション
   ============================================= */
.foryou-section {
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border);
}
.foryou-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 16px;
  scrollbar-width: none;
}
.foryou-scroll::-webkit-scrollbar { display: none; }
.foryou-card {
  flex: 0 0 200px;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
  cursor: pointer;
}
.foryou-card-img {
  width: 200px;
  height: 130px;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}
.foryou-card-info {
  padding: 10px 12px 12px;
}
.foryou-card-emotion {
  font-size: 11px;
  font-weight: 800;
  color: var(--orange);
  margin-bottom: 4px;
}
.foryou-card-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foryou-card-area {
  font-size: 11px;
  color: var(--text-400);
  margin-top: 2px;
}

/* =============================================
   カードに感情タグ表示
   ============================================= */
.card-emotion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.card-emotion-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 100px;
  color: white;
}

/* =============================================
   レベル・XPシステム
   ============================================= */
.mypage-level-card {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2218 100%);
  color: white;
  border-radius: var(--r-xl);
  padding: 16px 20px;
  margin: 0 16px 16px;
  border: 1px solid rgba(255,140,58,.2);
}
.mypage-level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mypage-level-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mypage-level-num {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.mypage-level-label {
  font-size: 13px;
  font-weight: 700;
  opacity: .8;
}
.mypage-level-title {
  font-size: 15px;
  font-weight: 900;
}
/* XPバー → 下部の新定義を参照 */

/* 称号バッジ一覧 */
.achievement-section {
  padding: 0 16px 20px;
}
.achievement-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-900);
  margin-bottom: 12px;
}
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.achievement-badge {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px 8px;
  text-align: center;
  transition: all .2s;
}
.achievement-badge.unlocked {
  border-color: var(--orange);
  background: var(--orange-pale);
}
.achievement-badge-emoji { font-size: 24px; display: block; margin-bottom: 4px; }
.achievement-badge-name {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-600);
  line-height: 1.3;
}
.achievement-badge.unlocked .achievement-badge-name { color: var(--orange); }
.achievement-badge-locked { font-size: 10px; color: var(--text-400); margin-top: 2px; }

/* =============================================
   管理者ページ
   ============================================= */
.admin-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: #1a1a1a;
  color: white;
}
.admin-header .material-icons-round {
  font-size: 28px;
  color: #FF7A2F;
}
.admin-header h2 {
  font-size: 18px;
  font-weight: 900;
  color: white;
}
.admin-header p {
  font-size: 12px;
  opacity: .6;
  margin-top: 2px;
}

.admin-toolbar {
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-search {
  width: 100%;
  height: 40px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 12px;
  font-size: 14px;
  background: var(--bg);
  font-family: var(--font);
  color: var(--text-900);
}
.admin-search:focus { outline: none; border-color: var(--orange); }
.admin-sort-row { display: flex; gap: 6px; }
.admin-sort-btn {
  padding: 5px 12px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-600);
  background: var(--surface);
}
.admin-sort-btn.active {
  background: var(--text-900);
  color: white;
  border-color: var(--text-900);
}

.admin-stats {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.admin-stat-card {
  flex: 1;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 10px;
  text-align: center;
  box-shadow: var(--sh-card);
}
.admin-stat-num {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--orange);
}
.admin-stat-label {
  font-size: 10px;
  color: var(--text-400);
  font-weight: 600;
}

.admin-post-list {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-post-item {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--border);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.admin-post-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--r-md);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
  transition: opacity .25s ease;
}
/* 画像が読み込まれるまで透明（ブラウザのlazyloadで自動フェードイン） */
.admin-post-thumb[src=""] { opacity: 0; }
.admin-post-info { flex: 1; min-width: 0; }
.admin-post-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-post-meta {
  font-size: 11px;
  color: var(--text-400);
  margin-top: 3px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-post-comment {
  font-size: 12px;
  color: var(--text-600);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-post-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.admin-delete-btn {
  padding: 6px 10px;
  border-radius: var(--r-md);
  background: #FFF0F0;
  color: #EF4444;
  font-size: 12px;
  font-weight: 800;
  border: 1.5px solid #FCA5A5;
  display: flex;
  align-items: center;
  gap: 3px;
}
.admin-delete-btn .material-icons-round { font-size: 14px; }
.admin-view-btn {
  padding: 6px 10px;
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text-600);
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid var(--border);
}

/* =============================================
   詳細 — みんなの声・コメント
   ============================================= */
.detail-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-900);
  margin-bottom: 12px;
}
.detail-section-title .material-icons-round { font-size: 18px; color: var(--orange); }
.detail-comment-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-400);
}

/* みんなの声 */
.detail-voices-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 8px;
}
.detail-voice-item {
  background: var(--bg);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--orange);
}
.detail-voice-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.detail-voice-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: white;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden; /* ★ 画像を丸く切り抜くために必須 */
}
.detail-voice-name { font-size: 12px; font-weight: 700; color: var(--text-900); }
.detail-voice-date { font-size: 10px; color: var(--text-400); margin-left: auto; }
.detail-voice-text { font-size: 13px; color: var(--text-600); line-height: 1.6; }

/* コメント */
.detail-comment-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 8px;
}
.detail-comment-list { margin-bottom: 12px; }
.detail-comment-loading {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 12px;
}
.detail-comment-loading span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-200);
  animation: dotPulse 1.2s infinite both;
}
.detail-comment-loading span:nth-child(2) { animation-delay: .2s; }
.detail-comment-loading span:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse {
  0%,80%,100% { transform: scale(.6); opacity: .4; }
  40%          { transform: scale(1);  opacity: 1;  }
}
.detail-comment-item {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.detail-comment-item-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: white;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden; /* ★ 画像を丸く切り抜くために必須 */
}
.detail-comment-item-body { flex: 1; }
.detail-comment-item-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.detail-comment-item-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-900);
}
.detail-comment-item-date { font-size: 10px; color: var(--text-400); }
.detail-comment-item-text {
  font-size: 13px;
  color: var(--text-600);
  line-height: 1.6;
  background: var(--bg);
  border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
  padding: 8px 10px;
}
.detail-comment-delete {
  font-size: 10px;
  color: var(--text-400);
  margin-top: 3px;
  text-decoration: underline;
  cursor: pointer;
}

/* コメント入力 */
.detail-comment-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.detail-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: white;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden; /* ★ 画像を丸く切り抜くために必須 */
}
.detail-comment-input-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  background: var(--bg);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  padding: 6px 8px;
  transition: border-color .2s;
}
.detail-comment-input-wrap:focus-within { border-color: var(--orange); }
.detail-comment-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  font-family: var(--font);
  color: var(--text-900);
  resize: none;
  outline: none;
  line-height: 1.5;
  max-height: 80px;
  overflow-y: auto;
}
.detail-comment-send {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--orange);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: .4;
  transition: opacity .2s;
}
.detail-comment-send:not([disabled]) { opacity: 1; }
.detail-comment-send .material-icons-round { font-size: 16px; }
.detail-comment-login-hint {
  font-size: 13px;
  color: var(--text-400);
  text-align: center;
  padding: 8px;
}
.detail-comment-login-hint button {
  color: var(--orange);
  font-weight: 700;
  text-decoration: underline;
}
.detail-comment-empty {
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: var(--text-400);
}

/* =============================================
   アバターアップロード
   ============================================= */
.mypage-avatar-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  cursor: pointer;
}
.mypage-avatar-initial {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad-warm);
  color: white;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mypage-avatar-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.mypage-avatar-edit {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text-900);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
}
.mypage-avatar-edit .material-icons-round { font-size: 11px; }

/* アバターアップロード中のオーバーレイ */
.mypage-avatar-loading {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mypage-avatar-loading .material-icons-round {
  font-size: 20px;
  color: white;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ヘッダーのアバター（アップロードした画像を表示） */
.header-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

/* =============================================
   管理者 - 感情タグ管理セクション
   ============================================= */
.admin-section {
  margin: 0 16px 24px;
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 1.5px solid var(--border);
  overflow: hidden;
}
.admin-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.admin-section-header .material-icons-round { color: var(--orange); font-size: 20px; }
.admin-section-header h3 { font-size: 15px; font-weight: 800; color: var(--text-900); }
.admin-section-desc {
  font-size: 12px;
  color: var(--text-400);
  padding: 8px 16px 0;
}

.admin-tag-list {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: var(--r-md);
}
.admin-tag-preview {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: white;
  padding: 4px 10px;
  border-radius: 100px;
  flex-shrink: 0;
}
.admin-tag-row-inputs { display: flex; gap: 6px; flex: 1; min-width: 0; }
.admin-tag-edit-emoji {
  width: 42px;
  text-align: center;
  font-size: 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 5px 4px;
  background: var(--surface);
  font-family: var(--font);
}
.admin-tag-edit-label {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 5px 8px;
  font-size: 13px;
  background: var(--surface);
  font-family: var(--font);
}
.admin-tag-edit-color {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
}
.admin-tag-save-btn {
  padding: 5px 10px;
  border-radius: var(--r-md);
  background: var(--text-900);
  color: white;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.admin-tag-del-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFF0F0;
  color: #EF4444;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-tag-del-btn .material-icons-round { font-size: 15px; }

.admin-tag-add-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--border);
}
.admin-tag-input {
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px;
  font-size: 13px;
  background: var(--surface);
  font-family: var(--font);
}
.admin-tag-input:focus { outline: none; border-color: var(--orange); }
.admin-tag-color {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
}
.admin-tag-add-btn {
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--grad-warm);
  color: white;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

/* =============================================
   XPバー（現在値・残り・数値を明確に表示）
   ============================================= */

/* ── バー外枠：未達成部分（半透明白でグレー感） ── */
.mypage-xp-bar-wrap {
  border-radius: 100px;
  height: 18px;
  overflow: visible;         /* ラベルがはみ出るため */
  position: relative;
  margin-bottom: 6px;
}

/* 未達成部分の背景（バー全体のトラック） */
.mypage-xp-bar-bg {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.22);  /* 黒カード上でしっかり見える */
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.10);
}

/* 達成済み部分（オレンジグラデ） */
.mypage-xp-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, #FFAA44 0%, #FF7A2F 55%, #FF4E6A 100%);
  transition: width 1s cubic-bezier(.22,1,.36,1);
  min-width: 10px;
  box-shadow: 0 2px 8px rgba(255,122,47,.5);  /* 光る感じ */
}
/* バー上の光沢 */
.mypage-xp-bar::after {
  content: '';
  position: absolute;
  top: 2px; left: 4px; right: 4px;
  height: 5px;
  border-radius: 100px;
  background: rgba(255,255,255,.35);
}

/* XP現在値強調 */
.xp-current-num {
  font-size: 15px;
  font-weight: 900;
  color: #FFCF84;
}
.mypage-xp-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  opacity: .85;
  color: white;
}
.mypage-xp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* =============================================
   管理タブ
   ============================================= */
.admin-tabs {
  display: flex;
  background: #111;
  border-bottom: 1px solid #333;
}
.admin-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #888;
  border-bottom: 2px solid transparent;
  transition: all .2s;
}
.admin-tab .material-icons-round { font-size: 16px; }
.admin-tab.active { color: #FF7A2F; border-bottom-color: #FF7A2F; }

.admin-tabs {
  display: flex;
  background: #111;
  border-bottom: 1px solid #333;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 11px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #888;
  border-bottom: 2px solid transparent;
  transition: all .2s;
  white-space: nowrap;
}
.admin-tab .material-icons-round { font-size: 14px; }
.admin-tab.active { color: #FF7A2F; border-bottom-color: #FF7A2F; }

/* ── フィルター行 ── */
.admin-filter-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.admin-filter-select {
  flex: 1; min-width: 100px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: var(--font); font-size: 12px;
  color: var(--text-900); background: var(--surface);
  outline: none;
}
.admin-filter-select:focus { border-color: var(--orange); }

/* ── アクション行 ── */
.admin-action-row {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; margin-top: 8px;
}
.admin-check-all-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--text-600);
  cursor: pointer;
}
.admin-bulk-delete-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: 8px;
  background: #FF4E6A; color: white;
  font-size: 12px; font-weight: 700;
  opacity: 1; transition: opacity .15s;
}
.admin-bulk-delete-btn:disabled { opacity: .4; cursor: not-allowed; }
.admin-bulk-delete-btn .material-icons-round { font-size: 15px; }

.admin-export-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: 8px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  color: var(--text-600); font-size: 12px; font-weight: 700;
  transition: all .15s;
}
.admin-export-btn:hover { border-color: var(--orange); color: var(--orange); }
.admin-export-btn .material-icons-round { font-size: 15px; }

.admin-filtered-count {
  margin-left: auto; font-size: 12px;
  color: var(--text-400); font-weight: 700;
}

/* ── 投稿アイテム（チェックボックス付き） ── */
.admin-post-check {
  width: 16px; height: 16px;
  flex-shrink: 0; cursor: pointer;
  accent-color: var(--orange);
}
.admin-post-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.admin-edit-btn {
  display: flex; align-items: center; gap: 3px;
  padding: 6px 10px; border-radius: 8px;
  background: #E3F2FD; color: #1976D2;
  font-size: 11px; font-weight: 700;
}
.admin-edit-btn .material-icons-round { font-size: 13px; }

/* ── 管理者編集モーダル ── */
.admin-edit-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.6); display: flex;
  align-items: center; justify-content: center;
  padding: 20px;
}
.admin-edit-modal {
  background: var(--surface); border-radius: 20px;
  width: 100%; max-width: 480px;
  max-height: 80vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.admin-edit-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.admin-edit-header h3 { font-size: 16px; font-weight: 800; color: var(--text-900); }
.admin-edit-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-400);
  display: flex; align-items: center; justify-content: center;
}
.admin-edit-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.admin-edit-label { font-size: 12px; font-weight: 700; color: var(--text-600); }
.admin-edit-input, .admin-edit-textarea {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-family: var(--font); font-size: 13px; color: var(--text-900);
  background: var(--bg); outline: none;
}
.admin-edit-input:focus, .admin-edit-textarea:focus { border-color: var(--orange); }
.admin-edit-textarea { min-height: 100px; resize: vertical; line-height: 1.7; }
.admin-edit-footer {
  display: flex; gap: 10px; padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.admin-edit-cancel-btn {
  flex: 1; padding: 12px; border-radius: 12px;
  background: var(--surface-2); color: var(--text-600);
  font-size: 13px; font-weight: 700;
}
.admin-edit-save-btn {
  flex: 2; padding: 12px; border-radius: 12px;
  background: var(--grad-warm); color: white;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.admin-edit-save-btn .material-icons-round { font-size: 16px; }

/* ── 今週の新着 stat card ── */
#adminWeeklyPosts { color: #2ECC71; }

/* ── 統計タブ ── */
.admin-stats-detail { padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.admin-stats-section {
  background: var(--surface); border-radius: var(--r-lg);
  padding: 16px; border: 1px solid var(--border);
}
.admin-stats-title { font-size: 13px; font-weight: 800; color: var(--text-900); margin-bottom: 14px; }
.admin-bar-chart { display: flex; flex-direction: column; gap: 8px; }
.admin-bar-row { display: flex; align-items: center; gap: 8px; }
.admin-bar-label { font-size: 11px; color: var(--text-600); width: 72px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-bar-track { flex: 1; height: 10px; background: var(--bg); border-radius: 100px; overflow: hidden; }
.admin-bar-fill { height: 100%; background: var(--grad-warm); border-radius: 100px; transition: width .6s ease; }
.admin-bar-fill-pink { background: linear-gradient(90deg, #E91E63, #9C27B0); }
.admin-bar-val { font-size: 11px; font-weight: 700; color: var(--text-400); width: 24px; text-align: right; }

/* 週次グラフ */
.admin-week-chart {
  display: flex; gap: 6px; align-items: flex-end;
  height: 100px; padding-bottom: 20px;
  position: relative;
}
.admin-week-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 3px;
}
.admin-week-bar {
  width: 100%; background: var(--grad-warm);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height .5s ease;
}
.admin-week-cnt { font-size: 10px; font-weight: 700; color: var(--text-600); }
.admin-week-label { font-size: 9px; color: var(--text-400); text-align: center; }

/* 収益カード */
.admin-revenue-cards { display: flex; gap: 8px; margin-bottom: 12px; }
.admin-revenue-card {
  flex: 1; background: var(--bg); border-radius: var(--r-md);
  padding: 12px 8px; text-align: center;
  border: 1px solid var(--border);
}
.admin-revenue-num { font-size: 22px; font-weight: 900; color: var(--orange); }
.admin-revenue-label { font-size: 10px; color: var(--text-400); margin-top: 2px; }
.admin-stats-note { font-size: 11px; color: var(--text-400); line-height: 1.6; }

/* ── ユーザー管理 ── */
.admin-user-list { padding: 8px 0; }
.admin-user-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.admin-user-item.flagged { background: #FFF0F3; }
.admin-user-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--grad-warm); color: white;
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name { font-size: 14px; font-weight: 800; color: var(--text-900); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.admin-user-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-user-meta span { font-size: 11px; color: var(--text-400); }
.admin-user-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.admin-flag-badge { font-size: 10px; background: #FF4E6A; color: white; padding: 2px 7px; border-radius: 100px; font-weight: 700; }
.admin-flag-btn {
  display: flex; align-items: center; gap: 3px; padding: 6px 10px;
  border-radius: 8px; background: #FFF0E8; color: var(--orange);
  font-size: 11px; font-weight: 700;
}
.admin-unflag-btn {
  display: flex; align-items: center; gap: 3px; padding: 6px 10px;
  border-radius: 8px; background: #F0F0F0; color: #888;
  font-size: 11px; font-weight: 700;
}
.admin-flag-btn .material-icons-round,
.admin-unflag-btn .material-icons-round { font-size: 13px; }

/* ── 通報管理 ── */
.admin-report-list { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.admin-reports-empty { text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.admin-reports-empty p { font-size: 14px; font-weight: 700; color: var(--text-400); }
.admin-report-item {
  background: var(--surface); border-radius: var(--r-lg);
  padding: 14px; border: 1px solid var(--border);
}
.admin-report-item.resolved { opacity: .55; }
.admin-report-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.admin-report-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; }
.admin-report-badge.pending { background: #FFF0E8; color: var(--orange); }
.admin-report-badge.resolved { background: #E8F5E9; color: #2E7D32; }
.admin-report-date { font-size: 11px; color: var(--text-400); }
.admin-report-type { font-size: 12px; font-weight: 700; color: var(--text-600); margin-bottom: 6px; }
.admin-report-body { font-size: 13px; color: var(--text-900); line-height: 1.6; margin-bottom: 8px; }
.admin-report-meta { font-size: 11px; color: var(--text-400); margin-bottom: 10px; }
.admin-report-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 感情タグ管理 */
.admin-tag-section {
  padding: 16px;
}
.admin-tag-desc {
  font-size: 13px;
  color: var(--text-400);
  margin-bottom: 16px;
  line-height: 1.5;
}
.admin-tag-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.admin-tag-input {
  height: 40px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 10px;
  font-size: 14px;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-900);
}
.admin-tag-input:first-child { width: 52px; text-align: center; font-size: 20px; padding: 0 4px; }
.admin-tag-input-name { flex: 1; min-width: 120px; }
.admin-tag-color {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.admin-tag-add-btn {
  height: 40px;
  padding: 0 14px;
  background: var(--text-900);
  color: white;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.admin-tag-add-btn .material-icons-round { font-size: 16px; }

/* =============================================
   スケルトンローディング
   ============================================= */
.skeleton-box {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e4e4e4 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: skeleton 1.2s ease infinite;
}
/* カード全体がスケルトンの場合は影を薄く */
.card.card-skeleton {
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   App Footer
   ═══════════════════════════════════════════════════ */
.app-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  /* モバイル：ボトムナビ分の余白を確保 */
  padding: 20px 20px calc(24px + var(--nav-h, 70px));
}
@media (min-width: 768px) {
  /* デスクトップ：content-area内なのでmargin-left不要 */
  .app-footer {
    padding: 24px 28px 32px;
  }
}
.app-footer-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.footer-sns-row {
  display: flex;
  gap: 8px;
}
.footer-sns-btn {
  width: 32px;
  height: 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-400);
  text-decoration: none;
  transition: color 0.18s, border-color 0.18s;
}
.footer-sns-btn:hover {
  color: var(--orange);
  border-color: var(--orange-2);
}
.footer-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  justify-content: center;
}
.footer-nav-links a {
  font-size: 0.72rem;
  color: var(--text-400);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.18s;
  white-space: nowrap;
}
.footer-nav-links a:hover { color: var(--orange); }
.footer-cr {
  font-size: 0.68rem;
  color: var(--text-200);
  letter-spacing: 0.03em;
}
/* ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   シェアシート
   ═══════════════════════════════════════════════════ */
.share-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0);
  display:flex;align-items:flex-end;
  pointer-events:none;
  transition:background .25s;
}
.share-overlay.open{
  background:rgba(0,0,0,.45);
  pointer-events:all;
}
.share-sheet{
  width:100%;max-width:520px;margin:0 auto;
  background:var(--surface);
  border-radius:24px 24px 0 0;
  padding:10px 20px 32px;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.32,1,.28,1);
}
.share-overlay.open .share-sheet{ transform:translateY(0); }
.share-handle{
  width:36px;height:4px;
  background:var(--border);border-radius:2px;
  margin:0 auto 16px;
}
.share-title{
  font-size:.8rem;font-weight:700;
  color:var(--text-400);letter-spacing:.06em;
  text-align:center;margin-bottom:16px;
  text-transform:uppercase;
}
.share-btns{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:12px;
}
.share-btn{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:14px 18px;
  border:1.5px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  font-family:var(--font);font-size:.95rem;font-weight:700;
  color:var(--text-900);cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s;
  text-align:left;
}
.share-btn:active{ transform:scale(.97); }
.share-btn-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.share-btn-x      .share-btn-icon{ background:#000;color:#fff; }
.share-btn-line   .share-btn-icon{ background:#06C755;color:#fff; }
.share-btn-copy   .share-btn-icon{ background:var(--bg);color:var(--orange); }
.share-btn-x:hover    { border-color:#000; }
.share-btn-line:hover { border-color:#06C755; }
.share-btn-copy:hover { border-color:var(--orange); }
.share-cancel-btn{
  width:100%;padding:14px;
  background:var(--bg);border:none;border-radius:14px;
  font-family:var(--font);font-size:.92rem;font-weight:700;
  color:var(--text-600);cursor:pointer;
  transition:background .15s;
}
.share-cancel-btn:hover{ background:var(--border); }
/* ═══════════════════════════════════════════════════ */

/* ── 気分タグ管理 ────────────────────────────────── */
.admin-mood-add-row{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-bottom:16px;
}
.admin-mood-keywords{
  flex:1;min-width:180px;
  padding:10px 12px;
  border:1.5px solid var(--border);border-radius:10px;
  font-family:var(--font);font-size:.85rem;
  color:var(--text-900);background:var(--bg);
  outline:none;transition:border-color .2s;
}
.admin-mood-keywords:focus{ border-color:var(--orange); }
.admin-mood-keywords::placeholder{ color:var(--text-400); }

/* ★ 除外ワード入力 */
.admin-mood-exclude{ border-color:rgba(255,78,106,.35); }
.admin-mood-exclude:focus{ border-color:#FF4E6A; }

.admin-mood-kw-wrap{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;
}
.admin-mood-kw-chip{
  font-size:.72rem;background:#FFF0E8;color:var(--orange);
  border-radius:20px;padding:3px 8px;font-weight:700;
}
/* ★ 除外ワードチップ（赤系） */
.admin-mood-ex-chip{
  background:#FFF0F3;color:#FF4E6A;
}
/* ────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════
   ③ 投稿編集ボタン
   ═══════════════════════════════════════════════════ */
.detail-owner-actions{
  margin:0 0 12px;
  display:flex;gap:8px;flex-wrap:wrap;
}
.detail-edit-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;
  border:1.5px solid var(--orange);
  border-radius:24px;
  background:transparent;
  color:var(--orange);
  font-family:var(--font);font-size:.85rem;font-weight:700;
  cursor:pointer;transition:background .15s,color .15s;
}
.detail-edit-btn:hover{ background:var(--orange);color:#fff; }
.detail-edit-btn .material-icons-round{ font-size:16px; }

/* ★ Instagramシェアボタン */
.detail-instagram-wrap {
  display:flex;flex-direction:column;gap:5px;
}
.detail-instagram-note {
  font-size:10px;color:var(--text-400);
  line-height:1.55;padding:0 2px;
}
.detail-instagram-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;
  border-radius:24px;
  border:1.5px solid transparent;
  background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF,#515BD4);
  color:#fff;
  font-family:var(--font);font-size:.85rem;font-weight:700;
  cursor:pointer;transition:opacity .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.detail-instagram-btn:hover{ opacity:.88; }
.detail-instagram-btn:active{ transform:scale(.95); }
.detail-instagram-btn .insta-icon{ flex-shrink:0; }

/* ★ Instagramガイドモーダル */
/* ★ Instagramガイドモーダル（ステップ形式） */
.ig-guide-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.6);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .22s ease;
}
.ig-guide-sheet{
  background:var(--surface);
  border-radius:24px 24px 0 0;
  width:100%;max-width:480px;
  max-height:90svh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  animation:slideUp .32s cubic-bezier(.16,1,.3,1);
}
.ig-guide-header{
  display:flex;align-items:center;gap:12px;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.ig-guide-logo{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ig-guide-header-text{ flex:1;min-width:0; }
.ig-guide-title{ font-size:15px;font-weight:800;color:var(--text-900);letter-spacing:-.01em; }
.ig-guide-subtitle{ font-size:12px;color:var(--text-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px; }
.ig-guide-x-btn{
  width:30px;height:30px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-400);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ig-guide-x-btn .material-icons-round{font-size:16px;}
.ig-guide-copied-banner{
  display:flex;align-items:center;gap:8px;
  margin:14px 20px 0;padding:10px 14px;
  background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.35);
  border-radius:10px;font-size:13px;font-weight:700;color:#1a7a4a;
}
.ig-guide-copied-banner .material-icons-round{font-size:18px;color:#27ae60;}
.ig-guide-warn-banner{
  display:flex;align-items:center;gap:8px;
  margin:14px 20px 0;padding:10px 14px;
  background:rgba(255,152,0,.1);border:1px solid rgba(255,152,0,.35);
  border-radius:10px;font-size:12px;font-weight:600;color:#b45309;
}
.ig-guide-warn-banner .material-icons-round{font-size:18px;color:#f59e0b;}
.ig-guide-steps-wrap{ padding:16px 20px 8px; }
.ig-guide-steps-label{
  font-size:12px;font-weight:700;color:var(--text-400);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px;
}
.ig-guide-steps{ list-style:none;display:flex;flex-direction:column;gap:0; }
.ig-guide-step{
  display:flex;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--border);
}
.ig-guide-step:last-child{ border-bottom:none; }
.ig-step-num{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#F58529,#DD2A7B);
  color:#fff;font-size:13px;font-weight:900;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;
}
.ig-step-body{ flex:1;min-width:0; }
.ig-step-title{ font-size:14px;font-weight:800;color:var(--text-900);margin-bottom:4px;line-height:1.3; }
.ig-step-desc{ font-size:12px;color:var(--text-600);line-height:1.7;margin-bottom:8px; }
.ig-step-desc strong{ color:var(--text-900); }
.ig-step-action-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;
  background:var(--surface-2);border:1.5px solid var(--border);border-radius:100px;
  font-size:12px;font-weight:700;color:var(--text-900);
  text-decoration:none;cursor:pointer;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.ig-step-action-btn:active{ transform:scale(.95);opacity:.8; }
.ig-step-action-btn .material-icons-round{ font-size:15px; }
#igOpenAppBtn{
  background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF) !important;
  border-color:transparent !important;color:#fff !important;
}
.ig-guide-close-full-btn{
  display:block;width:calc(100% - 40px);
  margin:12px 20px 28px;padding:15px;
  background:var(--surface-2);border:1.5px solid var(--border);border-radius:100px;
  font-size:14px;font-weight:800;color:var(--text-600);cursor:pointer;
}
.ig-guide-close-full-btn:active{ opacity:.75; }
[data-theme="dark"] .ig-guide-sheet{ background:#1e1c19; }
[data-theme="dark"] .ig-guide-header{ background:#1e1c19;border-bottom-color:var(--border); }
[data-theme="dark"] .ig-guide-title{ color:var(--text-900); }
[data-theme="dark"] .ig-guide-subtitle{ color:var(--text-400); }
[data-theme="dark"] .ig-guide-x-btn{ background:var(--surface-2);border-color:var(--border);color:var(--text-400); }
[data-theme="dark"] .ig-guide-copied-banner{ background:rgba(46,204,113,.10);border-color:rgba(46,204,113,.25);color:#6EE7A0; }
[data-theme="dark"] .ig-guide-copied-banner .material-icons-round{ color:#6EE7A0; }
[data-theme="dark"] .ig-guide-step{ border-bottom-color:var(--border); }
[data-theme="dark"] .ig-step-title{ color:var(--text-900); }
[data-theme="dark"] .ig-step-desc{ color:var(--text-600); }
[data-theme="dark"] .ig-step-desc strong{ color:var(--text-900); }
[data-theme="dark"] .ig-step-action-btn{ background:var(--surface-2);border-color:var(--border);color:var(--text-900); }
[data-theme="dark"] .ig-guide-close-full-btn{ background:var(--surface-2);border-color:var(--border);color:var(--text-600); }



/* ④ 投稿フォームのマイクロコピー */
.post-hint-bar{
  display:flex;align-items:center;gap:8px;
  background:#FFF8F0;border:1px solid #FFE0C4;
  border-radius:12px;padding:10px 14px;
  margin-bottom:14px;
  transition:opacity .3s;
}
.post-hint-icon{ font-size:1rem;flex-shrink:0; }
.post-hint-text{
  font-size:.8rem;color:#7A5A40;line-height:1.5;font-weight:500;
}

/* ⑤ 今日のお題 */
.daily-topic-wrap{
  padding:0 0 4px;
  margin-bottom:4px;
}
.daily-topic-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(135deg,#FFF5EE,#FFF0E4);
  border:1.5px solid #FFDBBC;
  border-radius:var(--r-xl);
  padding:14px 16px;
}
.daily-topic-left{ flex:1;min-width:0; }
.daily-topic-label{
  font-size:.68rem;font-weight:800;letter-spacing:.08em;
  color:var(--orange);text-transform:uppercase;display:block;margin-bottom:4px;
}
.daily-topic-text{
  font-size:.95rem;font-weight:700;color:var(--text-900);
  line-height:1.4;
}
.daily-topic-post-btn{
  display:inline-flex;align-items:center;gap:5px;
  flex-shrink:0;
  background:var(--orange);color:#fff;
  border:none;border-radius:24px;
  padding:9px 16px;
  font-family:var(--font);font-size:.8rem;font-weight:800;
  cursor:pointer;transition:opacity .15s;white-space:nowrap;
}
.daily-topic-post-btn:hover{ opacity:.88; }
.daily-topic-post-btn .material-icons-round{ font-size:15px; }

/* ⑦ こんな人におすすめ */
.detail-recommend-section{
  margin:16px 0;
}
.detail-recommend-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
}
.recommend-chip{
  display:inline-block;
  background:#FFF0E8;border:1px solid #FFCBA8;
  color:#7A4A2A;font-size:.78rem;font-weight:700;
  padding:6px 12px;border-radius:20px;
}

/* ⑩ 公式ピックアップ */
.pickup-section{ margin-bottom:8px; }
.admin-pickup-btn{
  display:flex;align-items:center;gap:4px;
  margin-top:8px;
  padding:7px 12px;
  border:1.5px solid #FFCB4A;
  border-radius:20px;background:#FFFBEE;
  color:#8A6A00;font-family:var(--font);font-size:.78rem;font-weight:700;
  cursor:pointer;transition:background .15s;
}
.admin-pickup-btn.active{
  background:#FFECAA;border-color:#F5A623;color:#7A4A00;
}
.admin-pickup-btn .material-icons-round{ font-size:15px; }
/* ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   ⑥ 投稿テンプレート
   ═══════════════════════════════════════════════════ */
.template-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  background: var(--bg);
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-600);
  cursor: pointer;
  transition: border-color .2s, color .2s;
  text-align: left;
}
.template-toggle-btn:hover { border-color: var(--orange); color: var(--orange); }
.template-toggle-btn .material-icons-round { font-size: 18px; }
.template-toggle-arrow {
  margin-left: auto;
  transition: transform .2s;
  font-size: 18px !important;
}
.template-toggle-btn.open .template-toggle-arrow { transform: rotate(180deg); }

.template-fields {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--bg);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.template-row { display: flex; flex-direction: column; gap: 6px; }
.template-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.template-col { display: flex; flex-direction: column; gap: 6px; }
.template-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-600);
  letter-spacing: .03em;
}
.template-chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.t-chip {
  padding: 6px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-600);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.t-chip:hover  { border-color: var(--orange-2); color: var(--orange); }
.t-chip.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* ⑧ 詳細：この近くの寄り道 */
.detail-nearby-section {
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}
.detail-nearby-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 12px 0 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.detail-nearby-scroll::-webkit-scrollbar { display: none; }
.nearby-card {
  flex-shrink: 0;
  width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform .15s, box-shadow .15s;
}
.nearby-card:hover { transform: translateY(-2px); box-shadow: var(--sh-card); }
.nearby-card-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  background: var(--bg);
  display: block;
}
.nearby-card-body { padding: 8px 10px; }
.nearby-card-name {
  font-size: .78rem;
  font-weight: 800;
  color: var(--text-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nearby-card-area {
  font-size: .7rem;
  color: var(--text-400);
  margin-top: 2px;
}

/* ⑨ おでかけリスト */
.triplist-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.triplist-input {
  flex: 1;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: var(--font);
  font-size: .88rem;
  color: var(--text-900);
  background: var(--bg);
  outline: none;
  transition: border-color .2s;
}
.triplist-input:focus { border-color: var(--orange); }
.triplist-add-btn {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity .2s;
}
.triplist-add-btn:hover { opacity: .85; }
.triplist-add-btn .material-icons-round { font-size: 20px; }

.triplist-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
}
.triplist-group-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  gap: 8px;
}
.triplist-group-name {
  flex: 1;
  font-size: .92rem;
  font-weight: 800;
  color: var(--text-900);
}
.triplist-group-count {
  font-size: .75rem;
  color: var(--text-400);
  background: var(--bg);
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 700;
}
.triplist-group-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-400);
  padding: 4px;
  display: flex; align-items: center;
  transition: color .15s;
}
.triplist-group-del:hover { color: var(--pink); }
.triplist-group-del .material-icons-round { font-size: 18px; }

.triplist-items { border-top: 1px solid var(--border); }
.triplist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bg);
  cursor: pointer;
  transition: background .15s;
}
.triplist-item:hover { background: var(--bg); }
.triplist-item:last-child { border-bottom: none; }
.triplist-item-img {
  width: 40px; height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg);
  flex-shrink: 0;
}
.triplist-item-name {
  flex: 1;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.triplist-item-area { font-size: .72rem; color: var(--text-400); }
.triplist-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-400);
  padding: 4px;
  display: flex; align-items: center;
  transition: color .15s;
  flex-shrink: 0;
}
.triplist-item-remove:hover { color: var(--pink); }
.triplist-item-remove .material-icons-round { font-size: 16px; }

.triplist-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--text-400);
  font-size: .85rem;
}
.triplist-empty .material-icons-round {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
  color: var(--border);
}

/* 行きたいボタンの長押しでリスト選択ヒント */
.wish-list-hint {
  font-size: .7rem;
  color: var(--text-400);
  text-align: center;
  margin-top: 4px;
}
/* ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   投稿フォーム：写真ボックス
   ═══════════════════════════════════════════════════ */
.photo-box {
  border-radius: 14px;
  overflow: hidden;
  border: 2px dashed var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: border-color .2s;
}
.photo-box:hover { border-color: var(--orange-2); }

/* 写真なし：プレースホルダー */
.photo-box-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 20px;
  color: var(--text-400);
}
.photo-box-placeholder .material-icons-round {
  font-size: 40px;
  color: var(--text-200);
}
.photo-box-placeholder p {
  font-size: .875rem;
  font-weight: 700;
}

/* 写真あり：プレビュー */
.photo-box-preview {
  position: relative;
}
.photo-box-preview img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
}
.photo-box-remove {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 7px 16px;
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.photo-box-remove .material-icons-round { font-size: 15px; }
.photo-box-remove:hover { background: rgba(0,0,0,.7); }
/* ═══════════════════════════════════════════════════ */

/* =============================================
   修正：カード上の「訪問済み」バッジを自然な横長チップに変更
   - 以前の縦長ピル表示を上書き
   - 写真右下に小さく表示して、タイトル・写真の邪魔をしない
   ============================================= */
.card-img-wrap .card-visited-badge {
  position: absolute !important;
  top: auto !important;
  right: 14px !important;
  bottom: 14px !important;
  left: auto !important;
  z-index: 6 !important;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: calc(100% - 28px) !important;
  aspect-ratio: auto !important;

  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  padding: 8px 13px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #22b983 !important;
  border: 1px solid rgba(34, 185, 131, 0.18) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
}

.card-img-wrap .card-visited-badge .material-icons-round {
  font-size: 19px !important;
  line-height: 1 !important;
  color: #22b983 !important;
}

@media (max-width: 420px) {
  .card-img-wrap .card-visited-badge {
    right: 12px !important;
    bottom: 12px !important;
    padding: 7px 11px !important;
    font-size: 12px !important;
  }

  .card-img-wrap .card-visited-badge .material-icons-round {
    font-size: 18px !important;
  }
}

/* =============================================
   ChatGPT修正：ダークモード視認性改善パッチ
   - 真っ黒すぎる背景を少し柔らかい濃紺に変更
   - 文字色・カード・フォーム・ナビのコントラストを改善
   - ボタン/チップ/モーダルが沈まないように上書き
   ============================================= */

/* =============================================
   ★ 収益・集客機能スタイル
   広告枠・アフィリエイト・シェアバー・フォロー・PR
   ============================================= */

/* ── 広告枠 ── */
.ad-slot {
  margin: 12px 16px;
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 60px;
}
.ad-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  font-size: 11px;
  color: var(--text-400);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ad-placeholder .material-icons-round { font-size: 14px; }
.ad-slot-detail { margin: 12px 0 0; }

/* ── シェアバー ── */
.detail-share-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.share-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text-600);
}
.share-bar-btn:active { transform: scale(.93); }
.share-bar-btn .material-icons-round { font-size: 14px; }
.share-bar-x {
  background: #000;
  border-color: #000;
  color: #fff;
}
.share-bar-x:hover { opacity: .82; }
.share-bar-copy:hover { border-color: var(--orange); color: var(--orange); }
.share-bar-follow {
  background: var(--orange-pale);
  border-color: var(--orange-2);
  color: var(--orange);
}
.share-bar-follow.following {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-400);
}

/* ── アフィリエイトリンク ── */
.detail-affiliate-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.affiliate-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.affiliate-link-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text-900);
  font-size: 13px;
  font-weight: 700;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.affiliate-link-btn:hover {
  border-color: var(--aff-color, var(--orange));
  color: var(--aff-color, var(--orange));
  transform: translateX(2px);
}
.affiliate-link-btn:active { transform: scale(.97); }
.aff-icon { font-size: 18px; flex-shrink: 0; }
.aff-label { flex: 1; }
.aff-arrow {
  font-size: 16px !important;
  color: var(--text-400);
  flex-shrink: 0;
}

/* ── PRバッジ ── */
.pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: linear-gradient(135deg, #FFD700, #FFA000);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 100px;
  letter-spacing: .06em;
  margin-left: 8px;
}

/* カード内PRバッジ */
.card-pr-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  background: linear-gradient(135deg, #FFD700, #FF8F00);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  border-radius: 100px;
  z-index: 5;
  letter-spacing: .05em;
}

/* ダークモード対応 */
[data-theme="dark"] .ad-placeholder { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-400) !important; }
[data-theme="dark"] .share-bar-btn { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-600) !important; }
[data-theme="dark"] .share-bar-x { background: #fff !important; border-color: #fff !important; color: #000 !important; }
[data-theme="dark"] .share-bar-follow { background: rgba(255,140,58,.14) !important; border-color: rgba(255,140,58,.4) !important; color: var(--orange-2) !important; }
[data-theme="dark"] .share-bar-follow.following { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-400) !important; }
[data-theme="dark"] .affiliate-link-btn { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-900) !important; }