:root {
  /* ── Brand Colors ──
     2026-06 配色移行: 主ブランドを紺(navy)→フォレスト緑に。変数名は据え置き
     （参照箇所が多いため）。--navy は実体は緑。将来 --forest 等にリネーム予定。 */
  --navy: #2F5D43;          /* 主ブランド = フォレスト（旧 #1B2D5B 紺） */
  --navy-light: #3F7355;    /* 旧 #2A4080 */
  --header: #294C38;        /* ヘッダー濃緑（旧 #1B2D5B） */
  --header-dark: #1B3826;   /* 旧 #142244 */
  --coral: #E8583A;         /* 温かいポップ差し色として継続使用 */
  --coral-hover: #D04A2E;
  --coral-link: #A63B28;    /* 本文リンク用。明るい背景で本文サイズのコントラストを確保 */
  --coral-link-hover: #8B301F;
  --amber: #E8A838;
  --amber-d: #C88820;
  --sage: #4A7A58;
  --sage-dark: #2a5a3a;
  --sage-darker: #1a3a2a;
  --brown: #3D1E0A;
  /* ヘッダー／アクセントの金 */
  --gold: #C9A24B;          /* 旧 #D9B25F をやや深く */
  --gold-soft: #E0C079;     /* 旧 #E8C77E */
  /* 連絡先マークのブランド色（Issue #67-2）。各サービスの公式色なので、他の用途には使わない */
  --brand-line: #06C755;
  --brand-instagram: #E1306C;
  --brand-x: #14171A;
  --brand-tiktok: #010101;
  --brand-facebook: #1877F2;
  /* はじめにタブ機能カードのアクセント（ラウンジ・メンバー用） */
  --plum: #7E5B85;
  --plum-d: #5F4366;
  --teal: #3F8A8A;
  --teal-d: #2F6A6A;
  /* メンバーカードの自己紹介の吹き出し（フェーズごとの淡い色。フェーズのラベルと同じ色の仲間） */
  --bubble-pre: #FBF0D9;
  --bubble-staying: #E6F0E8;
  --bubble-returned: #E5ECF2;
  --bubble-none: #F3F1E8;

  /* ── Neutrals ──
     旧クリーム(#F7F4F0)→ ウォームペーパーに（緑みのある暖色オフホワイト） */
  --bg: #F3F1E8;
  --bg-elevated: #EAE8DC;
  --surface: #FFFFFF;
  --text: #20241E;
  --text-2: #5C5246;
  --text-3: #8C8278;
  --border: #E5E1D4;
  --border-light: #EEEADF;

  /* ── Shadows (4 levels) ── */
  --sh-sm: 0 1px 3px rgba(26,14,6,.04);
  --sh: 0 2px 8px rgba(26,14,6,.06);
  --sh-md: 0 4px 16px rgba(26,14,6,.08);
  --sh-lg: 0 8px 32px rgba(26,14,6,.12);

  /* ── Radius (3 levels) ── */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;

  /* ── Freshness ── */
  --fresh: #4A7A58;
  --stale: #9C9488;
  --old: #C4A882;

  /* ── Animation ── */
  --ease: cubic-bezier(.2,.8,.3,1);
  --duration: 200ms;

  /* ── Page horizontal padding ── */
  /* 全タブ共通の本文左右余白。モバイルで 16px に縮める（下の @media 参照）。
     ヘッダーと各タブのコンテナで同じ値を使い、タブ切替時に左端がズレないようにする */
  --page-pad: 24px;

  /* ── Card padding tokens ── */
  /* 基本のカード内側余白。左帯アクセント付きカードは左側のみ +4px */
  --card-pad-y: 22px;
  --card-pad-x: 22px;
  --card-pad-accent-left: 26px;

  /* ── Button padding tokens (3 段階) ── */
  --btn-sm-pad:   8px 16px;   /* 小: .btn-detail / .btn-ghost など */
  --btn-md-pad:  11px 20px;   /* 中: .contribute-btn など */
  --btn-full-pad: 16px;       /* 全幅: .btn-form / .btn-cta など */

  /* ── Editorial ── */
  --font-serif: 'Noto Serif JP','Hiragino Mincho ProN',serif;
  --font-sans:  'Noto Sans JP',-apple-system,'Hiragino Sans','Yu Gothic',sans-serif;
  --font-display: 'Zen Maru Gothic','Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
  /* ホームヒーロー用の見出しフォント（端正な角ゴシック）。将来 display を置き換える候補 */
  --font-hero: 'Zen Kaku Gothic New','Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
  --rule: 1px solid var(--border);
  --rule-light: 1px solid var(--border-light);
  --rule-dashed: 1px dashed var(--border);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-sans); background:var(--bg); color:var(--text); min-height:100vh; line-height:1.7; -webkit-font-smoothing:antialiased; font-feature-settings:"palt" 1,"kern" 1; }
/* 横はみ出しガード（どこか1要素が画面より広くても横スクロール／ズレを起こさない）。
   overflow-x:clip を使う理由: hidden はスクロールコンテナを作って .topbar の position:sticky を壊すため。
   clip は横はみ出しを同様に防ぎつつ sticky を生かす。 */
html, body { overflow-x:clip; max-width:100%; }
/* プルトゥリフレッシュ時、ブラウザ標準の「下に引っ張るとページ丸ごと再読込」と喧嘩しないように。 */
body { overscroll-behavior-y:contain; }

/* ═══════════ プルトゥリフレッシュ（引っ張って更新）のくるくる ═══════════ */
#ptrIndicator{
  position:fixed; top:0; left:50%; z-index:899; /* ヘッダー(.topbar z-index:900)のすぐ下に潜らせる */
  transform:translateX(-50%) translateY(-50px); opacity:0;
  pointer-events:none;
}
.ptr-circle{
  width:38px; height:38px; border-radius:50%;
  background:var(--surface); box-shadow:var(--sh-sm);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.ptr-icon{ font-size:15px; color:var(--text-3); transition:transform .15s ease, color .15s ease; }
#ptrIndicator.ptr-ready .ptr-icon{ color:var(--coral); }
#ptrIndicator.ptr-ready .ptr-circle{ border-color:var(--coral); }
#ptrIndicator.ptr-spin .ptr-icon{ color:var(--coral); animation:ptr-spin .7s linear infinite; }
@keyframes ptr-spin{ to{ transform:rotate(360deg); } }
h1,h2 { font-family:var(--font-display); letter-spacing:.01em; }
h3    { font-family:var(--font-serif);  letter-spacing:.01em; }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;} }

/* ── Editorial utilities ── */
.eyebrow { font-family:var(--font-sans); font-size:10.5px; font-weight:800; color:var(--text-3); letter-spacing:1.4px; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; }
.eyebrow::before { content:''; display:inline-block; width:14px; height:1.5px; background:currentColor; opacity:.6; }
.eyebrow.tone-coral { color:var(--coral); }
.eyebrow.tone-navy  { color:var(--navy); }
.eyebrow.tone-sage  { color:var(--sage); }
.eyebrow.tone-amber { color:var(--amber-d); }

.section-rule { height:1px; background:linear-gradient(to right,var(--border) 0%,var(--border) 40%,transparent 100%); margin:8px 0 18px; }
.editorial-num { font-feature-settings:"tnum" 1,"lnum" 1; }

/* ── UNIFIED TAB HERO ── */
/* Unified hero: same size/structure across tabs, distinct dark tone per tab */
/* ════════ Home Hero (ホームタブの大ヒーロー / ディープフォレスト×オーロラ) ════════ */
.home-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:40px 28px 52px; text-align:center;
  background:linear-gradient(165deg, #356A4C 0%, var(--header) 58%, #11261A 100%);
}
/* ゆっくり漂うオーロラ光（金＋緑） */
.home-hero::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:420px; height:420px; top:-160px; right:-120px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,75,.40) 0%, rgba(201,162,75,.10) 45%, transparent 70%);
  filter:blur(34px); animation:heroDrift1 16s ease-in-out infinite alternate;
}
.home-hero::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:340px; height:340px; bottom:-150px; left:-110px; border-radius:50%;
  background:radial-gradient(circle, rgba(74,122,88,.55) 0%, rgba(47,93,67,.12) 50%, transparent 72%);
  filter:blur(38px); animation:heroDrift2 20s ease-in-out infinite alternate;
}
@keyframes heroDrift1{ from{transform:translate(0,0) scale(1);} to{transform:translate(-46px,40px) scale(1.15);} }
@keyframes heroDrift2{ from{transform:translate(0,0) scale(1);} to{transform:translate(50px,-34px) scale(1.12);} }

.home-hero-inner{ position:relative; z-index:2; max-width:560px; margin:0 auto; }

/* 入場フェードアップ（安定要素のみ。CTAエリアはコンテナ単位で1回） */
@keyframes heroFadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.home-hero-eyebrow{ animation:heroFadeUp .6s cubic-bezier(.2,.8,.3,1) both; }
.home-hero-title{ animation:heroFadeUp .7s cubic-bezier(.2,.8,.3,1) .08s both; }
.home-hero-lead{ animation:heroFadeUp .7s cubic-bezier(.2,.8,.3,1) .18s both; }
#homeHeroCtaArea{ animation:heroFadeUp .7s cubic-bezier(.2,.8,.3,1) .3s both; }

.home-hero-eyebrow{
  font-family:var(--font-hero);
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; font-weight:700; letter-spacing:1.8px;
  color:var(--gold-soft); margin-bottom:12px;
}
/* 中央寄せなので線は前後の両側 */
.home-hero-eyebrow::before, .home-hero-eyebrow::after{
  content:''; display:inline-block; width:20px; height:1px; background:currentColor; opacity:.55;
}
.home-hero-title{
  font-family:var(--font-hero);
  font-size:26px; font-weight:700; line-height:1.45; letter-spacing:.02em;
  color:#FCFAF4;
}
.home-hero-title .hh-accent{ color:var(--gold-soft); }
.home-hero-lead{
  font-family:var(--font-sans);
  font-size:13.5px; line-height:1.8; margin-top:10px; color:rgba(255,255,255,.82);
}
.home-hero-lead strong{ color:#fff; font-weight:700; }

.home-hero-cta{
  font-family:var(--font-hero);
  display:inline-flex; align-items:center; gap:9px;
  margin-top:18px; padding:12px 24px; border-radius:999px;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#23311F;
  font-size:14px; font-weight:700; letter-spacing:.5px;
  border:none; cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.30);
  transition:transform var(--duration) var(--ease), box-shadow var(--duration);
}
/* CTA の光沢スイープ（半透明なので文字の上を通っても自然な艶として見える） */
.home-hero-cta::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg); animation:heroSheen 3.6s ease-in-out 1.2s infinite;
}
@keyframes heroSheen{ 0%{left:-60%;} 60%,100%{left:130%;} }
.home-hero-cta:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(0,0,0,.38); }
/* メンバー時の副ボタン（コミュニティ）。ダーク地に映える半透明ライト */
.home-hero-cta.ghost{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.35); box-shadow:none; }
.home-hero-cta.ghost::after{ display:none; }
.home-hero-cta.ghost:hover{ background:rgba(255,255,255,.18); box-shadow:none; }
.home-hero-actions{ display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
/* メンバー時のヒーロー。目立たせる順番は ①メンバーを見る（白いカード）→ ②家探し（半透明のカード）→ ③シェア（小さい文字）。
   顔＋人数はボタンにせず「人がいる」証拠として見せる（押せばメンバー一覧が開く） */
.hh-proof{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:22px auto 0; padding:4px; background:none; border:none; color:inherit; cursor:pointer; font-family:var(--font-hero);
}
.hh-proof:focus-visible,.hh-share-link:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:8px; }
.hh-avatars{ display:flex; align-items:center; }
.hh-avatars .av{
  width:44px; height:44px; margin-left:-12px; border-radius:50%; object-fit:cover;
  display:flex; align-items:center; justify-content:center; background:var(--navy);
  font-family:var(--font-hero); font-weight:700; font-size:16px; color:#fff; border:2px solid rgba(255,255,255,.85);
}
.hh-avatars .av:first-child{ margin-left:0; }
.hh-proof-txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
.hh-members-count{ font-size:26px; font-weight:700; letter-spacing:.01em; color:#FCFAF4; font-feature-settings:"tnum" 1; }
.hh-proof-sub{ margin-top:3px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.72); }
.hh-ctas{ display:flex; flex-direction:column; gap:10px; max-width:360px; margin:20px auto 0; }
.hh-cta-card{
  display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px;
  border-radius:18px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.09); color:#fff;
  font-family:var(--font-hero); text-align:left; cursor:pointer;
  transition:transform var(--duration) var(--ease), box-shadow var(--duration);
}
.hh-cta-card.is-main{ background:#FCFAF4; color:var(--header-dark); border-color:transparent; box-shadow:0 12px 28px rgba(0,0,0,.35); }
.hh-cta-card:active{ transform:scale(.98); }
.hh-cta-card:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
.hh-cta-ic{
  width:44px; height:44px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:rgba(255,255,255,.12); color:var(--gold-soft);
}
.hh-cta-card.is-main .hh-cta-ic{ background:linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#23311F; }
.hh-cta-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.hh-cta-t{ font-size:15.5px; font-weight:800; }
.hh-cta-s{ font-size:11.5px; font-weight:600; opacity:.7; }
.hh-cta-go{ font-size:13px; opacity:.6; }
.hh-share-link{
  margin-top:10px; background:none; border:none; padding:6px 4px;
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-hero); font-size:12.5px; font-weight:600; color:rgba(255,255,255,.72); cursor:pointer;
}
.hh-share-link i{ font-size:10px; }
.home-hero-greet{ font-family:var(--font-hero); font-size:22px; font-weight:700; color:#FCFAF4; margin-top:6px; }
.home-hero-cta-sub{ font-size:11px; margin-top:12px; color:rgba(255,255,255,.6); }
.home-hero-status{
  font-family:var(--font-hero); font-size:13px; font-weight:700; color:var(--gold-soft);
  margin-top:16px; display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); padding:10px 18px; border-radius:999px;
}
@media(max-width:600px){
  .home-hero{ padding:26px 20px 44px; }
  .home-hero-eyebrow{ font-size:10px; letter-spacing:1.6px; margin-bottom:10px; }
  .home-hero-title{ font-size:21px; }
  .home-hero-lead{ font-size:12.5px; line-height:1.75; margin-top:8px; }
  .home-hero-cta{ margin-top:14px; padding:10px 20px; font-size:13px; }
  .home-hero-greet{ font-size:18px; margin-top:2px; }
  .home-hero-actions{ margin-top:14px; gap:8px; }
}
@media(prefers-reduced-motion:reduce){
  .home-hero::before, .home-hero::after,
  .home-hero-eyebrow, .home-hero-title, .home-hero-lead, #homeHeroCtaArea,
  .home-hero-cta::after{ animation:none; }
  .home-hero-eyebrow, .home-hero-title, .home-hero-lead, #homeHeroCtaArea{ opacity:1; transform:none; }
}

.tab-hero {
  position:relative; overflow:hidden; isolation:isolate;
  padding:56px 24px 48px;
  color:#fff;
  background:linear-gradient(160deg, var(--header) 0%, var(--header-dark) 55%, #0F1A38 100%);
  border-bottom:0;
}
.tab-hero::before {
  content:''; position:absolute; pointer-events:none; z-index:0;
  top:-110px; right:-90px; width:360px; height:360px;
  background:radial-gradient(circle, rgba(232,168,56,.32) 0%, rgba(232,88,58,.14) 45%, transparent 72%);
  filter:blur(44px); opacity:.95;
}
.tab-hero::after {
  content:''; position:absolute; pointer-events:none; z-index:0;
  bottom:-80px; left:-70px; width:240px; height:240px;
  background:radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  filter:blur(40px);
}

/* Tone variant — used only on the guide (はじめに) tab */
.tab-hero.tone-ink    { background:linear-gradient(160deg, var(--header) 0%, var(--header-dark) 55%, #0B1328 100%); }

.tab-hero-inner { position:relative; z-index:1; max-width:720px; margin:0 auto; text-align:center; }
.tab-hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:11px; font-weight:700;
  color:rgba(255,255,255,.82);
  letter-spacing:1.6px;
  margin-bottom:20px;
}
.tab-hero-eyebrow::before, .tab-hero-eyebrow::after {
  content:''; display:inline-block; width:22px; height:1px; background:currentColor; opacity:.45;
}

.tab-hero-title {
  font-family:var(--font-display);
  font-size:30px; font-weight:700; color:#fff; line-height:1.55;
  letter-spacing:.02em; margin-bottom:16px;
  text-shadow:0 1px 2px rgba(0,0,0,.14);
}
.tab-hero-lead {
  font-family:var(--font-display);
  font-size:14.5px; font-weight:500;
  color:rgba(255,255,255,.86); line-height:2;
  letter-spacing:.03em; max-width:34em; margin:0 auto;
}
.tab-hero-lead strong { color:#fff; font-weight:700; }

.tab-hero-actions { display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.tab-hero-actions .btn-hero {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:999px;
  font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.6px;
  cursor:pointer; border:none;
  transition:transform var(--duration) var(--ease), box-shadow var(--duration), background var(--duration), color var(--duration);
}
.tab-hero-actions .btn-hero-primary { background:#fff; color:var(--text); box-shadow:0 4px 14px rgba(0,0,0,.18); }
.tab-hero-actions .btn-hero-primary:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.26); background:var(--amber); color:var(--navy); }
.tab-hero-actions .btn-hero-secondary { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(4px); }
.tab-hero-actions .btn-hero-secondary:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55); }

.tab-hero-stats { display:flex; gap:40px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.tab-hero-stat { text-align:center; }
.tab-hero-stat-num {
  font-family:var(--font-display);
  font-size:26px; font-weight:700; color:#fff;
  font-feature-settings:"tnum" 1,"lnum" 1; line-height:1.2;
}
.tab-hero-stat-label {
  font-family:var(--font-display);
  font-size:11px; color:rgba(255,255,255,.7);
  letter-spacing:.6px;
  margin-top:6px; font-weight:500;
}

/* 3-step flow row — dark hero variant */
.tab-hero-flow { display:flex; align-items:center; justify-content:center; gap:0; margin-top:30px; flex-wrap:wrap; }
.tab-hero-flow-step { display:flex; flex-direction:column; align-items:center; gap:9px; padding:8px 22px; cursor:pointer; transition:transform var(--duration) var(--ease); }
.tab-hero-flow-step:hover { transform:translateY(-2px); }
.tab-hero-flow-step-icon {
  width:54px; height:54px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;
  transition:background var(--duration), border-color var(--duration), box-shadow var(--duration);
  backdrop-filter:blur(6px);
}
.tab-hero-flow-step:hover .tab-hero-flow-step-icon {
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.55);
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
.tab-hero-flow-step-label { font-family:var(--font-display); font-size:13px; font-weight:700; color:#fff; letter-spacing:.5px; }
.tab-hero-flow-arrow { color:rgba(255,255,255,.32); font-size:11px; margin-bottom:24px; }

@media(max-width:600px){
  .tab-hero { padding:40px 20px 36px; }
  .tab-hero-title { font-size:22px; }
  .tab-hero-lead { font-size:13.5px; line-height:1.85; }
  .tab-hero-stats { gap:24px; }
  .tab-hero-stat-num { font-size:22px; }
  .tab-hero-flow { gap:0; margin-top:22px; }
  .tab-hero-flow-step { padding:6px 12px; }
  .tab-hero-flow-step-icon { width:46px; height:46px; font-size:17px; }
}

/* ── Tab title strip (used on explore / market — light, soft) ── */
.tab-title-strip {
  max-width:1200px; margin:0 auto;
  padding:24px 24px 6px;
}
.tab-title-strip h2 {
  font-family:var(--font-sans);
  font-size:20px; font-weight:700; color:var(--text);
  letter-spacing:.02em; line-height:1.4;
  display:flex; align-items:center; gap:10px;
  margin:0;
  padding-left:12px; border-left:4px solid transparent;
}
.tab-title-strip h2 i { color:var(--amber-d); font-size:17px; }
.tab-title-strip.tts-learn    h2   { border-left-color:var(--navy); }
.tab-title-strip.tts-learn    h2 i { color:var(--navy); }
.tab-title-strip.tts-explore  h2   { border-left-color:var(--amber-d); }
.tab-title-strip.tts-explore  h2 i { color:var(--amber-d); }
.tab-title-strip.tts-market   h2   { border-left-color:var(--coral); }
.tab-title-strip.tts-market   h2 i { color:var(--coral); }
@media(max-width:600px){
  .tab-title-strip { padding:18px 16px 4px; }
  .tab-title-strip h2 { font-size:17px; padding-left:10px; border-left-width:3px; }
}

/* ── TOP BAR (header + sub-seg) ── */
.topbar { position:sticky; top:0; z-index:900; }

/* ── HEADER ── */
.header {
  background:
    radial-gradient(120% 140% at 12% -20%, rgba(217,178,95,.16), transparent 55%),
    linear-gradient(155deg,#2A211A 0%,#1E1812 55%,#120D09 100%);
  padding:14px var(--page-pad);
  display:flex; align-items:center; justify-content:space-between;
  min-height:60px;
  position:relative;
}
.header::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(to right, transparent, var(--gold) 18%, var(--gold-soft) 50%, var(--gold) 82%, transparent);
  opacity:.6;
}
.header-brand { display:flex; align-items:center; gap:14px; }
.header-logo {
  width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0;
  box-shadow:0 0 0 1.5px rgba(217,178,95,.55), 0 0 0 4px rgba(217,178,95,.12);
}
.header-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.header-text h1 {
  font-family:var(--font-serif); font-size:17px; font-weight:700; color:#fff;
  letter-spacing:.02em; line-height:1.2;
}
.header-text .htag {
  font-family:var(--font-sans);
  font-size:9.5px; color:var(--gold-soft); letter-spacing:1.8px; margin-top:4px;
  text-transform:uppercase; font-weight:600;
  display:flex; align-items:center; gap:6px;
}
.header-text .htag::before {
  content:''; width:14px; height:1px; background:var(--gold); opacity:.7;
}
.header-actions { display:flex; gap:8px; align-items:center; }
.btn-ghost {
  background:transparent; border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.85);
  padding:var(--btn-sm-pad); border-radius:var(--r-sm); cursor:pointer;
  font-size:12px; font-weight:600; letter-spacing:.3px;
  transition:all var(--duration) var(--ease); white-space:nowrap;
}
.btn-ghost:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.35); color:#fff; }
.btn-ghost:focus-visible { outline:2px solid rgba(255,255,255,.5); outline-offset:2px; }

/* ── SUB-SEGMENT (グループ内のサブ切替: ヘッダー直下) ── */
.sub-seg {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:10px var(--page-pad);
  display:flex; gap:7px;
}
.sub-seg-btn {
  flex:0 1 auto;
  padding:8px 16px;
  border:1px solid var(--border); background:var(--surface); cursor:pointer;
  font-family:var(--font-sans); font-size:12.5px; font-weight:700; color:var(--text-3);
  letter-spacing:.2px; border-radius:20px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  transition:all var(--duration) var(--ease);
}
.sub-seg-btn i { font-size:11px; opacity:.9; }
.sub-seg-btn.active { background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:var(--sh-sm); }
.sub-seg-btn:hover:not(.active) { color:var(--text); border-color:var(--text-3); }
.sub-seg-btn:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.sub-seg-lock { font-size:9px; opacity:.55; margin-left:1px; }

/* ── BOTTOM NAV (4タブ・下固定) ── */
.bottom-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:950;
  background:var(--surface);
  border-top:1px solid var(--border);
  display:flex;
  padding:7px 2px calc(7px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(27,45,91,.06);
}
.bnav-btn {
  flex:1; min-width:0;
  border:none; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family:var(--font-sans); font-size:10px; font-weight:700; color:var(--text-3);
  letter-spacing:.2px; padding:4px 2px;
  position:relative; transition:color var(--duration) var(--ease);
}
.bnav-btn span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.bnav-btn i:first-child { font-size:17px; opacity:.9; }
.bnav-btn.active { color:var(--coral); }
.bnav-btn.active::before {
  content:''; position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:22px; height:3px; border-radius:3px; background:var(--coral);
}
.bnav-btn:hover:not(.active) { color:var(--text); }
.bnav-btn:focus-visible { outline:2px solid var(--navy); outline-offset:-3px; border-radius:var(--r-sm); }
.bnav-lock {
  position:absolute; top:-2px; left:50%; margin-left:6px;
  font-size:8px; color:var(--text-3);
}

/* 本文がボトムナビに隠れないように余白を確保 */
body { padding-bottom:calc(64px + env(safe-area-inset-bottom)); }

/* ── SECTIONS ── */
.section { display:none; }
.section.active { display:block; }

/* ── GUIDE TAB ── */

/* ── 知る TAB ── */
.learn-content { padding:32px var(--page-pad) 112px; max-width:1200px; margin:0 auto; }
.section-heading {
  font-family:var(--font-sans);
  font-size:20px; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:12px;
  letter-spacing:.01em; line-height:1.35;
  padding-bottom:10px; margin-bottom:20px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.section-heading::after {
  content:''; position:absolute; bottom:-1px; left:0; width:48px; height:2px;
  background:var(--coral);
}
.section-heading i { color:var(--navy); font-size:16px; }
.section-heading small { font-family:var(--font-sans); font-size:11.5px; font-weight:500; color:var(--text-3); letter-spacing:.3px; margin-left:auto; }
.section-heading.tone-navy::after  { background:var(--navy); }
.section-heading.tone-sage::after  { background:var(--sage); }
.section-heading.tone-amber::after { background:var(--amber-d); }

.industry-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:40px; }
.industry-card {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r);
  box-shadow:var(--sh-sm); border:1px solid var(--border-light);
  cursor:pointer;
  transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease),border-color var(--duration);
}
.industry-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:1;
  background:var(--navy); opacity:.65; transition:opacity var(--duration);
}
.industry-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--border); }
.industry-card:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
.industry-card:active { transform:scale(.98); }
.industry-card:hover::before { opacity:1; }
.learn-cat-card {
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 14px 14px; text-align:center; cursor:pointer;
  box-shadow:var(--sh-sm); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.learn-cat-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.learn-cat-card:active { transform:scale(.98); }
.learn-cat-card:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
.learn-cat-icon {
  width:48px; height:48px; margin:0 auto 11px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:21px;
}
.learn-cat-card.tone-food .learn-cat-icon { background:var(--coral); }
.learn-cat-card.tone-logistics .learn-cat-icon { background:var(--amber-d); }
.learn-cat-card.tone-life .learn-cat-icon { background:var(--navy); }
.learn-cat-card.tone-other .learn-cat-icon { background:var(--text-3); }
.learn-cat-name { font-family:var(--font-sans); font-size:15px; font-weight:800; color:var(--text); line-height:1.3; }
.learn-cat-desc { font-size:11px; color:var(--text-3); margin-top:4px; line-height:1.5; }
.learn-cat-stats {
  display:flex; gap:10px; justify-content:center; margin-top:10px; padding-top:9px;
  border-top:var(--rule-dashed); font-size:11px; color:var(--text-2);
}
.learn-cat-stats strong { color:var(--navy); font-size:12.5px; }
.learn-cat-back { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.learn-cat-back-btn {
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border);
  background:var(--surface); color:var(--navy); font-family:var(--font-sans); font-size:13px; font-weight:700;
  padding:8px 14px; border-radius:999px; cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.learn-cat-back-btn:hover { background:var(--bg-elevated); border-color:var(--navy-light); }
.learn-cat-back-title { font-size:13.5px; font-weight:800; color:var(--text); display:inline-flex; align-items:center; gap:7px; }
.learn-cat-back-title .fas { color:var(--text-3); }
.learn-fab {
  position:fixed; right:16px; bottom:calc(70px + env(safe-area-inset-bottom)); z-index:900;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--coral); color:#fff; font-family:var(--font-sans); font-size:14px; font-weight:800;
  border:none; border-radius:999px; padding:13px 19px; cursor:pointer;
  box-shadow:0 6px 18px rgba(232,88,58,.4);
}
.learn-fab:hover { background:var(--coral-hover); }
.learn-fab:active { transform:scale(.97); }
/* カバー写真（種類の雰囲気を伝える）。読み込み失敗時はトーンカラーのパネルが残る */
.industry-card-cover { position:relative; width:100%; aspect-ratio:5/2; background:rgba(27,45,91,.06); overflow:hidden; }
.industry-card-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.industry-card-body {
  display:flex; flex-direction:column; flex:1;
  padding:var(--card-pad-y) var(--card-pad-x) var(--card-pad-y) var(--card-pad-accent-left);
}
/* Industry tone variants (grouped by category) */
.industry-card.tone-food::before       { background:var(--coral); }
.industry-card.tone-food      .industry-card-cover { background:rgba(232,88,58,.09); }
.industry-card.tone-clean::before      { background:var(--sage); }
.industry-card.tone-clean     .industry-card-cover { background:rgba(74,122,88,.10); }
.industry-card.tone-logistics::before  { background:var(--amber-d); }
.industry-card.tone-logistics .industry-card-cover { background:rgba(200,136,32,.12); }
.industry-card.tone-life::before       { background:var(--navy); }
.industry-card.tone-life      .industry-card-cover { background:rgba(27,45,91,.08); }
.industry-card.tone-other::before      { background:var(--text-3); }
.industry-card.tone-other     .industry-card-cover { background:rgba(140,130,120,.10); }
.industry-name { font-family:var(--font-sans); font-size:19px; font-weight:700; color:var(--text); margin-bottom:6px; letter-spacing:.01em; line-height:1.35; }
.industry-sub { font-size:13px; color:var(--text-2); margin-bottom:14px; line-height:1.7; }
.industry-stats { display:flex; flex-direction:column; gap:6px; padding-top:12px; border-top:1px dashed var(--border-light); margin-top:auto; }
.industry-stat { font-size:11px; color:var(--text-3); letter-spacing:.2px; font-feature-settings:"tnum" 1; }
.industry-stat strong { color:var(--navy); font-weight:800; font-size:13px; margin-right:2px; }
/* 業界カードの「最終更新」表示 — 古いガイドが交じっても気付ける */
.industry-updated { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:10.5px; color:var(--text-3); margin-top:8px; letter-spacing:.2px; }
.industry-updated i { font-size:10px; opacity:.7; }
.industry-updated-empty { color:var(--coral); font-weight:700; }
.industry-updated-empty i { opacity:.85; }

/* Industry Detail */
.industry-detail { display:none; }
.industry-detail.show { display:block; }
.detail-back { display:inline-flex; align-items:center; gap:6px; padding:8px 0; font-size:13px; font-weight:600; color:var(--text-2); cursor:pointer; border:none; background:none; margin-bottom:20px; transition:color var(--duration); }
.detail-back:hover { color:var(--text); }
.detail-header {
  position:relative; overflow:hidden;
  background:var(--surface); border-radius:var(--r);
  box-shadow:var(--sh-sm); border:1px solid var(--border-light);
  margin-bottom:24px;
}
.detail-header::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:1;
  background:var(--navy); opacity:.75;
}
.detail-header-cover { position:relative; width:100%; aspect-ratio:5/2; background:rgba(27,45,91,.06); overflow:hidden; }
.detail-header-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.detail-header-body { padding:18px 22px 20px 24px; }
.detail-header h2 { font-family:var(--font-sans); font-size:20px; font-weight:700; letter-spacing:.01em; line-height:1.35; text-wrap:balance; margin-bottom:8px; }
.dh-suffix { white-space:nowrap; }
.detail-desc { font-size:14px; color:var(--text-2); line-height:1.75; max-width:60ch; }

.data-summary { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-bottom:28px; }
.data-item { background:var(--surface); border-radius:var(--r-sm); padding:16px; box-shadow:var(--sh-sm); text-align:center; border:1px solid var(--border-light); }
.data-item .data-val { font-size:18px; font-weight:700; color:var(--navy); font-family:'Noto Sans JP',sans-serif; }
.data-item .data-label { font-size:11px; color:var(--text-3); margin-top:4px; }

.info-blocks { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin-bottom:28px; }
.info-block { background:var(--surface); border-radius:var(--r); padding:var(--card-pad-y) var(--card-pad-x); box-shadow:var(--sh-sm); border:1px solid var(--border-light); }
.info-block-title { font-size:13px; font-weight:700; color:var(--navy); letter-spacing:.4px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.info-block-content li { font-size:14px; color:var(--text); line-height:1.7; margin-bottom:8px; list-style:none; padding-left:18px; position:relative; }
.info-block-content li::before { content:''; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:var(--amber); }

.warning-block { background:#FFF8F5; border:1.5px solid rgba(232,88,58,.15); border-radius:var(--r); padding:var(--card-pad-y) var(--card-pad-x); margin-bottom:28px; }
.warning-block-title { font-size:13px; font-weight:700; color:var(--coral); letter-spacing:.4px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.warning-block li { font-size:14px; color:#7A3020; line-height:1.7; margin-bottom:8px; list-style:none; padding-left:22px; position:relative; }
.warning-block li::before { content:'\f071'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; left:0; font-size:10px; top:4px; color:var(--coral); }

.voice-section { margin-bottom:28px; }
.voice-quotes { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.voice-quote { position:relative; background:var(--surface); border-radius:var(--r); padding:22px 24px 20px 28px; box-shadow:var(--sh-sm); border:1px solid var(--border-light); }
.voice-quote::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--amber); opacity:.7; border-radius:var(--r) 0 0 var(--r); }
.voice-quote p { font-family:var(--font-sans); font-size:15px; color:var(--text); line-height:1.85; letter-spacing:.01em; }
.voice-quote .voice-attr { font-family:var(--font-sans); font-size:11px; color:var(--text-3); margin-top:12px; font-style:normal; letter-spacing:.4px; font-weight:600; }
.voice-quote .voice-attr::before { content:'— '; opacity:.5; }

.voice-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.voice-card { background:var(--surface); border-radius:var(--r); padding:var(--card-pad-y) var(--card-pad-x); box-shadow:var(--sh-sm); border:1px solid var(--border-light); }
.voice-card-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.voice-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; flex-shrink:0; }
.voice-card-name { font-size:14px; font-weight:700; }
.voice-card-meta { font-size:11px; color:var(--text-3); }
.voice-card-item { font-size:13px; color:var(--text-2); line-height:1.6; margin-bottom:8px; }
.voice-card-item strong { color:var(--text); font-weight:700; font-size:12px; }

.related-jobs { margin-top:28px; }
.related-link { display:flex; align-items:center; justify-content:space-between; background:var(--surface); border-radius:var(--r); padding:16px 20px; box-shadow:var(--sh-sm); border:1px solid var(--border-light); cursor:pointer; transition:box-shadow var(--duration) var(--ease),border-color var(--duration); margin-bottom:10px; }
.related-link:hover { box-shadow:var(--sh); border-color:var(--border); }
.related-link-text { font-size:14px; font-weight:700; color:var(--text); }
.related-link-sub { font-size:12px; color:var(--text-3); }
.related-link i { color:var(--navy); }

/* Zoom */
.zoom-section { margin-top:40px; }
.zoom-card { background:var(--surface); border-radius:var(--r); padding:var(--card-pad-y) var(--card-pad-x); box-shadow:var(--sh-sm); border:1px solid var(--border-light); display:flex; gap:16px; align-items:center; margin-bottom:12px; transition:box-shadow var(--duration); }
.zoom-card:hover { box-shadow:var(--sh); }
.zoom-date { text-align:center; min-width:56px; }
.zoom-date .month { font-size:11px; font-weight:700; color:var(--coral); text-transform:uppercase; }
.zoom-date .day { font-size:24px; font-weight:700; color:var(--text); font-family:'Noto Sans JP',sans-serif; }
.zoom-info { flex:1; }
.zoom-title { font-size:15px; font-weight:700; color:var(--text); }
.zoom-meta { font-size:12px; color:var(--text-2); margin-top:3px; }
.zoom-badge { padding:5px 12px; background:rgba(27,45,91,.06); color:var(--navy); border-radius:var(--r-lg); font-size:11px; font-weight:700; white-space:nowrap; }

/* ── 知る TAB: メンバー投稿機能 ── */
.learn-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.housing-topbar { align-items:flex-start; }
.housing-story-cta { flex-shrink:0; white-space:nowrap; }

/* 投稿者本人向け「確認中」表示（承認待ちの自分の投稿） */
.contribution-pending-badge{
  display:inline-flex; align-items:center; gap:4px;
  margin-left:6px; padding:2px 8px; border-radius:8px;
  background:rgba(232,168,56,.16); color:var(--amber-d);
  font-size:10px; font-weight:800; vertical-align:middle;
}
.contribution-card-pending{
  border:1px dashed var(--amber);
  background:rgba(232,168,56,.05);
}
/* 送信完了画面の投稿プレビュー */
.contrib-preview{ margin-top:18px; }
.contrib-preview-head{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12.5px; font-weight:800; color:var(--text-2); margin-bottom:10px;
}
.contrib-preview-head span{
  font-size:10.5px; font-weight:700; color:var(--amber-d);
  background:rgba(232,168,56,.16); padding:2px 8px; border-radius:8px;
}

/* 投稿フォーム: 下書き復元バナー */
.contrib-draft-banner{
  margin-bottom:14px; padding:10px 14px;
  background:rgba(232,168,56,.12); border-left:3px solid var(--amber);
  border-radius:var(--r-sm);
  font-size:12.5px; color:#7a4a00; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.contrib-draft-banner .contrib-draft-discard{
  padding:5px 10px; background:#fff;
  border:1px solid var(--amber); color:#7a4a00;
  border-radius:6px; font-size:11px; font-weight:700;
  cursor:pointer; white-space:nowrap;
}
.contrib-draft-banner .contrib-draft-discard:hover{ background:rgba(232,168,56,.10); }

/* 管理パネル: 再読み込みボタン */
.admin-header-actions{ display:flex; align-items:center; gap:6px; }
.admin-reload{
  background:transparent; border:none; cursor:pointer;
  color:rgba(255,255,255,.75); font-size:16px; padding:6px 10px;
  border-radius:8px; transition:background .12s, color .12s;
}
.admin-reload:hover{ background:rgba(255,255,255,.12); color:#fff; }
.admin-reload.is-loading i{ animation:admin-reload-spin .9s linear infinite; }
@keyframes admin-reload-spin{ to { transform:rotate(360deg); } }

/* 管理パネル: 承認待ちカード内の「詳細を見る」ボタン */
.admin-pending-detail-btn{
  padding:8px 12px; background:#fff; color:var(--navy);
  border:1px solid rgba(27,45,91,.18); border-radius:8px;
  font-size:12px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
}
.admin-pending-detail-btn:hover{ background:rgba(27,45,91,.05); }

/* 申請詳細モーダル */
.pending-detail-overlay{
  display:none; position:fixed; inset:0;
  background:rgba(20,18,30,.55); z-index:2200;
  align-items:center; justify-content:center; padding:20px;
}
.pending-detail-overlay.show{ display:flex; }
.pending-detail-panel{
  background:var(--bg); border-radius:var(--r);
  width:100%; max-width:680px; max-height:90vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.pending-detail-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
  background:var(--surface);
}
.pending-detail-header h2{
  font-size:16px; font-weight:800; color:var(--text); margin:0;
  display:flex; align-items:center; gap:8px;
}
.pending-detail-close{
  background:transparent; border:none; font-size:24px;
  color:var(--text-2); cursor:pointer; padding:0 4px; line-height:1;
}
.pending-detail-body{
  flex:1; overflow-y:auto; padding:18px 20px;
  -webkit-overflow-scrolling:touch;
}
.pending-detail-footer{
  display:flex; gap:10px; padding:14px 20px;
  border-top:1px solid var(--border); background:var(--surface);
}
.pending-detail-footer .pd-btn{
  flex:1; padding:11px 16px; border:none; border-radius:8px;
  font-size:13px; font-weight:800; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.pending-detail-footer .pd-btn-approve{ background:var(--sage); color:#fff; }
.pending-detail-footer .pd-btn-approve:hover{ filter:brightness(1.05); }
.pending-detail-footer .pd-btn-reject{ background:#F0EAE2; color:var(--text-2); flex:0 0 100px; }
.pending-detail-footer .pd-btn-reject:hover{ background:#E8E0D6; }

/* セクション・フィールド表示 */
.pd-section{
  margin-bottom:18px; padding:14px 16px;
  background:var(--surface); border-radius:var(--r-sm);
  border:1px solid var(--border);
}
.pd-section-title{
  font-size:12px; font-weight:800; color:var(--navy);
  margin-bottom:10px; padding-bottom:8px;
  border-bottom:1px dashed rgba(0,0,0,.08);
  display:flex; align-items:center; gap:6px;
  text-transform:uppercase; letter-spacing:.4px;
}
.pd-field{
  display:grid; grid-template-columns:130px 1fr; gap:10px;
  padding:6px 0; align-items:start;
}
.pd-field-label{
  font-size:12px; font-weight:700; color:var(--text-3);
  padding-top:2px;
}
.pd-field-value{
  font-size:13px; color:var(--text); line-height:1.7;
  word-break:break-word; white-space:pre-wrap;
}
.pd-field-value .pd-chip{
  display:inline-block; padding:2px 9px; margin:2px 4px 2px 0;
  background:rgba(27,45,91,.08); color:var(--navy);
  border-radius:10px; font-size:11px; font-weight:700;
}
.pd-field-source{
  display:inline-block; padding:2px 8px;
  border-radius:6px; font-size:10.5px; font-weight:700;
}
.pd-field-source.s-handover{ background:rgba(27,45,91,.10); color:var(--navy); }
.pd-field-source.s-direct{ background:rgba(74,122,88,.12); color:var(--sage); }
@media (max-width:520px){
  .pd-field{ grid-template-columns:1fr; gap:2px; }
  .pd-field-label{ font-size:11px; }
  .pending-detail-footer .pd-btn-reject{ flex:0 0 80px; }
}

/* 知るタブ: クイックジャンプピル（業界/住まい一覧の上、タップで詳細へ直接ジャンプ） */
.learn-intro { flex:1; min-width:240px; font-size:13px; color:var(--text-2); line-height:1.7; margin:0; }
.contribute-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:var(--btn-md-pad); background:var(--coral); color:#fff;
  border:none; border-radius:var(--r-sm); font-size:12.5px; font-weight:700; letter-spacing:.3px;
  cursor:pointer; transition:transform var(--duration) var(--ease),box-shadow var(--duration),background var(--duration);
  box-shadow:0 2px 6px rgba(232,88,58,.22);
}
.contribute-btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(232,88,58,.32); background:var(--coral-hover); }
.contribute-btn:active { transform:scale(.98); }
.contribute-btn-small { padding:11px 16px; font-size:12.5px; }

.industry-card { position:relative; }
.industry-card-new {
  position:absolute; top:14px; left:14px;
  padding:3px 8px; background:var(--coral); color:#fff;
  border-radius:var(--r-sm); font-size:10px; font-weight:800; letter-spacing:.5px;
  animation:glowPulse 2.2s var(--ease) infinite;
  z-index:1;
}
/* 知るタブ: 2列コンパクトカード（業界一覧 / 住まい一覧）— 開いてすぐ全項目が見渡せる */
.industry-card-compact .industry-card-body { padding:10px 12px 12px 15px; gap:6px; }
.industry-card-compact .industry-name { font-size:15px; margin-bottom:0; line-height:1.4; }
.industry-card-compact .industry-stats { gap:10px; padding-top:10px; margin-top:6px; }
.industry-card-compact .industry-stat { font-size:11.5px; color:var(--text-2); }
.industry-card-compact .industry-stat strong { font-size:13px; }
.industry-card-compact .industry-card-new { top:8px; left:8px; padding:2px 6px; font-size:10px; }

/* 業界詳細: 自動集計サマリー */
.industry-aggregate {
  background:linear-gradient(135deg,rgba(27,45,91,.03) 0%,rgba(232,168,56,.05) 100%);
  border:1px solid var(--border-light); border-radius:var(--r);
  padding:var(--card-pad-y) var(--card-pad-x); margin-bottom:24px;
}
.industry-aggregate-heading {
  font-size:12px; font-weight:700; color:var(--navy); letter-spacing:.4px;
  margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.industry-aggregate-heading i { color:var(--amber); }
.industry-aggregate .data-summary { margin-bottom:0; }
.industry-aggregate-empty-msg { font-size:13px; color:var(--text-2); line-height:1.7; }

/* 業界詳細: 自動集計を1行ストリップ化（コンパクト版） */
.aggregate-strip { padding:14px var(--card-pad-x); }
.aggregate-strip .industry-aggregate-heading { margin-bottom:8px; }
.agg-headline { display:flex; align-items:baseline; gap:7px; }
.agg-headline-num {
  font-size:26px; font-weight:800; color:var(--navy);
  font-family:'Noto Sans JP',sans-serif; line-height:1;
}
.agg-headline-label { font-size:11px; color:var(--text-3); font-weight:600; }
.agg-meta {
  display:flex; flex-wrap:wrap; align-items:baseline;
  row-gap:4px; margin-top:6px; font-size:12px; color:var(--text-2);
}
.agg-meta-item strong { color:var(--navy); font-weight:800; }
.agg-meta-item + .agg-meta-item::before { content:"·"; margin:0 5px; color:var(--text-3); }

/* 業界詳細: 業種固有データブロック（ファーム/カフェ/ホテル/バーテンダー） */
.industry-specific-block {
  background:linear-gradient(135deg,rgba(74,122,88,.04) 0%,rgba(232,168,56,.04) 100%);
  border:1px solid rgba(74,122,88,.18);
}
.industry-specific-heading {
  font-size:12px; font-weight:700; color:var(--navy); letter-spacing:.4px;
  margin-bottom:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.industry-specific-heading i { color:var(--sage); }
.industry-specific-heading small { font-size:11px; color:var(--text-3); font-weight:500; letter-spacing:0; }
.is-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.is-card {
  background:var(--surface); border:1px solid var(--border-light); border-radius:var(--r-sm);
  padding:12px 14px; display:flex; flex-direction:column; gap:8px;
}
.is-card-empty { opacity:.55; }
.is-card-head {
  font-size:12px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px;
}
.is-card-head i { color:var(--amber); }
.is-card-head small { margin-left:auto; font-size:10.5px; color:var(--text-3); font-weight:600; letter-spacing:.3px; }
.is-empty-msg { font-size:11.5px; color:var(--text-3); }
.is-bars { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.is-bars li { display:flex; flex-direction:column; gap:3px; }
.is-bar { position:relative; height:5px; background:var(--bg-elevated); border-radius:3px; overflow:hidden; }
.is-bar-fill { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--sage),var(--amber)); border-radius:3px; }
.is-row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:11.5px; color:var(--text-2); }
.is-label { font-weight:600; color:var(--text); }
.is-pct { color:var(--text-2); font-weight:700; white-space:nowrap; }
.is-pct small { color:var(--text-3); font-weight:500; }

/* 分布: スタック型横棒チャート + 凡例 */
.is-stacked-bar {
  display:flex;
  width:100%;
  height:14px;
  background:var(--bg-elevated);
  border-radius:7px;
  overflow:hidden;
  margin:8px 0 10px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.04);
}
.is-stack-seg {
  height:100%;
  transition:opacity .15s ease;
  border-right:1px solid rgba(255,255,255,0.4);
}
.is-stack-seg:last-child { border-right:0; }
.is-stack-seg:hover { opacity:0.85; }
.is-stack-legend {
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  font-size:11.5px;
  line-height:1.4;
}
.is-leg {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--text-2);
}
.is-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.is-leg-label {
  font-weight:600;
  color:var(--text);
}
.is-leg-meta {
  color:var(--text-2);
  font-weight:700;
  white-space:nowrap;
}
.is-leg-meta small { color:var(--text-3); font-weight:500; margin-left:1px; }
.is-topvals { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; }
.is-topvals li { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--text); padding:5px 8px; background:var(--bg); border-radius:6px; }
.is-tv-name { font-weight:600; word-break:break-word; }
.is-tv-count { color:var(--text-3); font-weight:600; font-size:11px; white-space:nowrap; }
.is-rate { display:flex; align-items:baseline; gap:10px; }
.is-rate-num { font-size:24px; font-weight:800; color:var(--navy); line-height:1; }
.is-rate-num small { font-size:13px; color:var(--text-3); margin-left:2px; font-weight:700; }
.is-rate-meta { font-size:11px; color:var(--text-3); font-weight:600; }
.is-hint { font-size:10.5px; color:var(--text-3); line-height:1.5; }

/* 業界詳細: 投稿ボタン（ヘッダー内） */
.detail-header .contribute-btn { margin-top:14px; }

/* メンバーの声 セクション */
.contribution-heading { margin-top:28px; margin-bottom:16px; }
.contribution-list { display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:28px; }
.handover-knowledge-heading { margin-top:20px !important; margin-bottom:10px !important; }
.handover-knowledge-intro {
  font-size:12.5px; color:var(--text-2); line-height:1.75; letter-spacing:.01em;
  padding:10px 14px; margin-bottom:14px;
  background:rgba(74,122,88,.06); border-left:3px solid var(--sage); border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.contribution-card-featured {
  background:linear-gradient(180deg, rgba(74,122,88,.04) 0%, var(--surface) 60%);
  border:1px solid rgba(74,122,88,.18);
  box-shadow:0 2px 14px rgba(74,122,88,.08);
}
.contribution-card-featured::before { background:var(--sage) !important; width:4px !important; }
.contribution-empty-small {
  font-size:12px; color:var(--text-3); padding:10px 14px; margin:0 0 20px;
  background:var(--bg-elevated); border-radius:var(--r-sm); line-height:1.7;
}
.contribution-card {
  position:relative; overflow:hidden;
  background:var(--surface); border-radius:var(--r);
  padding:var(--card-pad-y) var(--card-pad-x) var(--card-pad-y) var(--card-pad-accent-left);
  box-shadow:var(--sh-sm); border:1px solid var(--border-light);
  transition:box-shadow var(--duration),transform var(--duration) var(--ease),border-color var(--duration);
}
.contribution-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--amber); opacity:.55; transition:opacity var(--duration);
}
.contribution-card:hover { box-shadow:var(--sh); transform:translateY(-1px); border-color:var(--border); }
.contribution-card:hover::before { opacity:1; }
.contribution-card.tone-money::before { background:var(--navy); }
.contribution-card.tone-human::before { background:var(--sage); }
.contribution-card.tone-warn::before  { background:var(--coral); }
.contribution-card.tone-env::before,
.contribution-card.tone-process::before,
.contribution-card.tone-skill::before,
.contribution-card.tone-admin::before,
.contribution-card.tone-perk::before  { background:var(--amber-d); }

.contribution-header { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.contribution-avatar {
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; color:#fff; flex-shrink:0;
}
.contribution-meta { flex:1; min-width:0; }
.contribution-name {
  font-size:14px; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.contribution-sub { font-size:11.5px; color:var(--text-3); margin-top:4px; letter-spacing:.2px; }
.contribution-new-badge {
  padding:2px 7px; background:var(--coral); color:#fff;
  border-radius:var(--r-sm); font-size:9px; font-weight:800; letter-spacing:.5px;
}
.contribution-source-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; background:rgba(232,168,56,.16); color:var(--amber-d);
  border-radius:var(--r-sm); font-size:9.5px; font-weight:800; letter-spacing:.4px;
}
.contribution-source-badge i { font-size:8.5px; }
.contribution-creds {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; background:rgba(27,45,91,.07); color:var(--navy);
  border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.15px;
  white-space:nowrap;
}
.contribution-creds i { font-size:9px; opacity:.75; }
/* 投稿者の信頼性マーカー（ビザ種類 / 滞在期間） */
.contribution-cred-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cred-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.2px; white-space:nowrap;
  border:1px solid transparent;
}
.cred-pill i { font-size:9.5px; }
.cred-navy  { background:rgba(27,45,91,.09);  color:var(--navy);    border-color:rgba(27,45,91,.18); }
.cred-sage  { background:rgba(74,122,88,.10); color:var(--sage);    border-color:rgba(74,122,88,.22); }
.cred-amber { background:rgba(232,168,56,.14);color:var(--amber-d); border-color:rgba(232,168,56,.32); }
.cred-neutral { background:var(--bg-elevated); color:var(--text-2); border-color:var(--border-light); }
.contributor-breakdown {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--border-light);
  font-size:11.5px;
}
.contributor-breakdown-label {
  display:inline-flex; align-items:center; gap:6px;
  font-weight:800; color:var(--text-2); letter-spacing:.3px;
}
.contributor-breakdown-label i { color:var(--navy); font-size:11px; }
.cred-mini {
  padding:2px 9px; background:var(--surface); border:1px solid var(--border-light);
  border-radius:999px; color:var(--text-2); font-weight:700;
}
.cred-mini strong { color:var(--navy); margin-left:2px; }

.contribution-field { margin-top:14px; padding-top:14px; border-top:1px dashed var(--border-light); }
.contribution-field:first-of-type { margin-top:0; padding-top:0; border-top:none; }
.contribution-field-label {
  font-size:10.5px; font-weight:800; color:var(--navy); letter-spacing:.6px; text-transform:uppercase;
  margin-bottom:7px; display:flex; align-items:center; gap:6px;
}
.contribution-field-label i { color:var(--amber); font-size:11px; }
.contribution-field-body {
  font-family:var(--font-sans);
  font-size:13.5px; color:var(--text); line-height:1.85; white-space:pre-wrap; letter-spacing:.01em;
}
.contribution-field-tip {
  margin-top:18px; padding:14px 16px 13px;
  background:rgba(232,168,56,.07); border-left:3px solid var(--amber-d);
  border-radius:0 var(--r-sm) var(--r-sm) 0; border-top:none !important;
}
.contribution-field-tip .contribution-field-label,
.contribution-field-tip .contribution-field-label i { color:var(--amber-d); }
.contribution-field-caution {
  margin-top:18px; padding:14px 16px 13px;
  background:rgba(232,88,58,.06); border-left:3px solid var(--coral);
  border-radius:0 var(--r-sm) var(--r-sm) 0; border-top:none !important;
}
.contribution-field-caution .contribution-field-label,
.contribution-field-caution .contribution-field-label i { color:var(--coral); }

.contribution-tag {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; background:rgba(27,45,91,.06); color:var(--navy);
  border-radius:var(--r-sm); font-size:11px; font-weight:700;
}

/* 運営の基礎ガイド（折りたたみ） */
.operator-guide {
  background:var(--surface); border:1px solid var(--border-light); border-radius:var(--r);
  margin-bottom:28px; overflow:hidden;
}
.operator-guide summary {
  padding:18px 22px; font-size:14px; font-weight:700; color:var(--text-2);
  cursor:pointer; display:flex; align-items:center; gap:10px;
  list-style:none; transition:background var(--duration);
}
.operator-guide summary::-webkit-details-marker { display:none; }
.operator-guide summary i { color:var(--navy); }
.operator-guide summary::after {
  content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900;
  margin-left:auto; font-size:11px; color:var(--text-3);
  transition:transform var(--duration);
}
.operator-guide[open] summary::after { transform:rotate(180deg); }
.operator-guide summary:hover { background:var(--bg); }
.operator-guide-body { padding:4px 22px 22px; }

/* 投稿フォーム */
.contrib-intro {
  font-size:13px; color:var(--text-2); line-height:1.7;
  padding:12px 14px; background:rgba(232,168,56,.1); border-radius:var(--r-sm);
  margin-bottom:18px;
}
.contrib-intro strong { color:var(--coral); }
.contrib-row { margin-bottom:16px; }
.contrib-label { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text); margin-bottom:6px; }
.contrib-label i { color:var(--navy); font-size:11px; }
.contrib-req { padding:1px 7px; background:var(--coral); color:#fff; border-radius:var(--r-sm); font-size:9px; font-weight:800; letter-spacing:.4px; }
.contrib-opt { padding:1px 7px; background:var(--bg-elevated); color:var(--text-3); border:1px solid var(--border); border-radius:var(--r-sm); font-size:9px; font-weight:800; letter-spacing:.4px; }
.contrib-input {
  width:100%; padding:10px 12px; font-size:14px; color:var(--text);
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-family:inherit; transition:border-color var(--duration),box-shadow var(--duration);
}
.contrib-input:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(27,45,91,.1); }
.contrib-textarea { resize:vertical; min-height:90px; line-height:1.6; }
.contrib-hint { display:block; margin-top:5px; font-size:11px; color:var(--text-3); line-height:1.5; }
.contrib-section-heading { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text); margin:24px 0 6px; padding-top:16px; border-top:1px solid var(--border); }
.contrib-section-heading i { color:var(--navy); font-size:12px; }
.contrib-section-desc { font-size:12px; color:var(--text-3); line-height:1.6; margin:0 0 14px; }
.contrib-success { text-align:center; padding:30px 16px; }
.contrib-success-icon { font-size:56px; color:var(--sage); margin-bottom:14px; }
.contrib-success h3 { font-size:18px; font-weight:700; color:var(--text); margin-bottom:10px; }
.contrib-success p { font-size:13px; color:var(--text-2); line-height:1.8; }

@media(max-width:600px){
  .learn-topbar { align-items:flex-start; }
  .housing-topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px; }
  .housing-topbar .learn-intro { grid-column:1 / -1; grid-row:2; }
  .housing-story-cta { grid-column:2; grid-row:1; justify-self:end; }
  .industry-aggregate .data-summary { grid-template-columns:repeat(2,1fr); }
  .is-grid { grid-template-columns:1fr; }
  .is-rate-num { font-size:22px; }
}

/* ── 探す TAB ── */
.explore-toolbar { background:var(--surface); border-bottom:1px solid var(--border); padding:12px 20px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tab-group { display:flex; background:var(--bg-elevated); border-radius:var(--r-sm); overflow:hidden; }
.tab-btn { padding:8px 18px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--text-2); transition:all var(--duration) var(--ease); white-space:nowrap; }
.tab-btn.active { background:var(--navy); color:#fff; border-radius:var(--r-sm); }
.tab-btn:hover:not(.active) { background:var(--border-light); }
.tab-btn .fav-count { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; background:var(--coral); color:#fff; border-radius:50%; font-size:10px; font-weight:700; margin-left:5px; }
.search-wrap { flex:1; min-width:160px; position:relative; }
.search-input { width:100%; padding:9px 14px 9px 36px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:13px; font-family:inherit; background:var(--bg); color:var(--text); transition:border-color var(--duration),background var(--duration); }
.search-input:focus { border-color:var(--navy); background:#fff; outline:none; box-shadow:0 0 0 3px rgba(27,45,91,.1); }
.search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:13px; pointer-events:none; }
.search-clear { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-3); cursor:pointer; font-size:14px; display:none; }
.search-clear.show { display:block; }
.view-group { display:flex; gap:4px; }
.view-btn { width:36px; height:36px; border:1.5px solid var(--border); border-radius:var(--r-sm); background:var(--surface); cursor:pointer; font-size:14px; color:var(--text-2); transition:all var(--duration); display:flex; align-items:center; justify-content:center; }
.view-btn.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.view-btn:hover:not(.active) { border-color:var(--navy); color:var(--navy); }
.filter-btn { display:flex; align-items:center; gap:6px; padding:8px 14px; border:1.5px solid var(--border); border-radius:var(--r-sm); background:var(--surface); cursor:pointer; font-size:13px; color:var(--text-2); font-weight:600; transition:all var(--duration); white-space:nowrap; }
.filter-btn:hover { border-color:var(--navy); color:var(--navy); }
.filter-btn.active { border-color:var(--navy); color:var(--navy); background:rgba(27,45,91,.04); }
.filter-bar { background:var(--surface); border-bottom:1px solid var(--border); padding:0 20px; max-height:0; overflow:hidden; transition:max-height .3s ease,padding .3s ease; }
.filter-bar.open { max-height:160px; padding:14px 20px; }
.filter-row { display:flex; flex-wrap:wrap; gap:8px; }
.filter-chip { padding:7px 15px; border:1.5px solid var(--border); border-radius:var(--r-lg); background:var(--surface); cursor:pointer; font-size:12px; font-weight:600; color:var(--text-2); transition:all var(--duration); white-space:nowrap; }
.filter-chip.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.filter-chip:hover:not(.active) { border-color:var(--navy); color:var(--navy); }
.filter-select { padding:7px 12px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:12px; font-weight:600; background:var(--surface); color:var(--text); cursor:pointer; font-family:inherit; }

.main { padding:24px var(--page-pad); max-width:1400px; margin:0 auto; }
.stats-bar { display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.stat-card { background:var(--surface); border-radius:var(--r-sm); padding:14px 18px; box-shadow:var(--sh-sm); border:1px solid var(--border-light); flex:1; min-width:90px; }
.stat-card .num { font-size:24px; font-weight:700; color:var(--text); font-family:'Noto Sans JP',sans-serif; }
.stat-card .num.hot { color:var(--coral); }
.stat-card .num.green { color:var(--sage); }
.stat-card .lbl { font-size:11px; color:var(--text-3); margin-top:3px; font-weight:500; }

/* 投稿CTA（探すタブ → 引き継ぎフォーム） */
.explore-cta { display:flex; align-items:center; gap:13px; width:100%; padding:13px 15px; margin-bottom:20px; background:var(--coral); color:#fff; border:none; border-radius:var(--r); cursor:pointer; font-family:inherit; text-align:left; box-shadow:0 5px 16px rgba(232,88,58,.28); transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease),background var(--duration); }
.explore-cta:hover { transform:translateY(-1px); box-shadow:0 7px 20px rgba(232,88,58,.34); background:var(--coral-hover); }
.explore-cta:active { transform:translateY(0); }
.explore-cta:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.explore-cta-icon { width:38px; height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.18); border-radius:10px; font-size:16px; }
.explore-cta-body { flex:1; min-width:0; }
.explore-cta-title { display:block; font-size:13.5px; font-weight:700; line-height:1.4; }
.explore-cta-sub { display:block; font-size:11px; opacity:.85; margin-top:1px; line-height:1.4; }
.explore-cta-chev { flex-shrink:0; font-size:13px; opacity:.7; }

/* Cards */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.card { background:var(--surface); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); border:1px solid var(--border-light); cursor:pointer; transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease),border-color var(--duration); position:relative; }
.card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--border); }
.card.stale-card { opacity:.75; }
.card.old-card { opacity:.6; }
.card-photo { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-elevated); }
.card-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.card:hover .card-photo img { transform:scale(1.03); }
.card-photo-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:40px; color:var(--navy); }
.badge-status { position:absolute; top:12px; left:12px; padding:5px 12px; border-radius:var(--r-lg); font-size:11px; font-weight:700; color:#fff; backdrop-filter:blur(12px); }
.badge-status.recruiting, .badge-status.available { background:rgba(232,88,58,.85); }
.badge-status.stocked, .badge-status.notes_only { background:rgba(27,45,91,.85); }
.badge-status.developing, .badge-status.member_working { background:rgba(232,168,56,.92); color:var(--text); }
.badge-status.baton_recruiting { background:rgba(232,88,58,.92); animation:glowPulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.8} }
@keyframes glowPulse { 0%,100%{box-shadow:0 0 0 0 rgba(232,88,58,0);} 50%{box-shadow:0 0 14px 3px rgba(232,88,58,.55);} }
@keyframes favBounce { 0%{transform:scale(1);} 30%{transform:scale(1.35);} 60%{transform:scale(.92);} 100%{transform:scale(1);} }
.card.card-recruiting { border-color:rgba(232,88,58,.35); }
.card.card-recruiting::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--coral); z-index:3; }
.fav-btn.active { animation:favBounce .45s var(--ease); }
.badge-price { position:absolute; bottom:12px; right:12px; background:rgba(20,10,4,.6); backdrop-filter:blur(10px); color:#fff; padding:5px 12px; border-radius:var(--r-lg); font-size:13px; font-weight:700; }
.fav-btn { position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; transition:transform var(--duration) var(--ease); box-shadow:var(--sh-sm); z-index:2; }
.fav-btn:hover { transform:scale(1.1); }
.fav-btn .far { color:#AAA; }
.fav-btn .fas { color:#E84393; }
.card-body { padding:16px 20px 18px; }
.card-meta { font-size:10px; color:var(--text-3); font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
.freshness-tag { font-size:10px; font-weight:700; padding:3px 8px; border-radius:var(--r-sm); text-transform:none; letter-spacing:0; }
.freshness-tag.fresh { background:rgba(74,122,88,.1); color:var(--fresh); }
.freshness-tag.stale { background:rgba(156,148,136,.12); color:var(--stale); }
.freshness-tag.old { background:rgba(196,168,130,.12); color:var(--old); }
.card-title { font-family:var(--font-sans); font-size:17px; font-weight:700; color:var(--text); margin-bottom:12px; line-height:1.4; letter-spacing:.01em; }
.card-row { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-2); margin-bottom:4px; }
.card-row i { width:14px; color:var(--navy); font-size:11px; opacity:.85; }
.card-row.card-price { font-weight:700; color:var(--text); font-feature-settings:"tnum" 1; }
.card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.tag { padding:4px 10px; background:rgba(27,45,91,.05); border-radius:var(--r-lg); font-size:11px; font-weight:600; color:var(--navy); letter-spacing:.1px; }
.tag.hot { background:rgba(232,88,58,.08); color:var(--coral); border:1px solid rgba(232,88,58,.15); }
.card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--border-light); }
.social-proof { font-size:12px; color:var(--sage); font-weight:700; letter-spacing:.1px; }
.btn-detail {
  padding:var(--btn-sm-pad); background:var(--navy); color:#fff; border:none; border-radius:var(--r-sm);
  font-size:11.5px; font-weight:700; letter-spacing:.5px; cursor:pointer;
  transition:background var(--duration),transform var(--duration) var(--ease);
}
.btn-detail:hover { background:var(--navy-light); transform:translateY(-1px); }
.stars { color:var(--amber); font-size:12px; }

/* Map */
.map-container { display:none; height:calc(100vh - 200px); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); position:relative; }
.map-container.show { display:block; }
#map { width:100%; height:100%; }
.map-legend { position:absolute; bottom:20px; left:20px; background:rgba(255,255,255,.96); padding:14px 18px; border-radius:var(--r); z-index:800; font-size:12px; box-shadow:var(--sh); backdrop-filter:blur(8px); }
.map-legend div { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-weight:500; color:var(--text-2); }
.map-legend div:last-child { margin-bottom:0; }
.legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
/* 空状態（empty state）共通テンプレ — 説明 → ヒント → 次の一手の 3 層 */
.empty-cta {
  text-align:center; padding:44px 24px 36px; max-width:480px; margin:24px auto;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-elevated) 100%);
  border:1px solid var(--border-light);
  border-bottom:3px solid var(--amber);
  border-radius:var(--r);
  position:relative;
}
.empty-cta::before {
  content:''; position:absolute; top:14px; left:18px;
  width:22px; height:1.5px; background:var(--amber-d);
}
.empty-cta-icon { font-size:30px; color:var(--amber-d); opacity:.9; margin-bottom:14px; display:block; }
.empty-cta-title { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text); letter-spacing:.02em; line-height:1.5; margin-bottom:10px; }
.empty-cta-hint { font-size:12.5px; color:var(--text-2); line-height:1.8; max-width:34ch; margin:0 auto 18px; }
.empty-cta-action { display:inline-flex; align-items:center; gap:6px; padding:10px 18px; background:var(--surface); color:var(--coral); border:1.5px solid var(--coral); border-radius:var(--r-sm); font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:all var(--duration); text-decoration:none; }
.empty-cta-action:hover { background:var(--coral); color:#fff; }

/* ── 引き継ぐ TAB ── */
.handover-content { padding:32px var(--page-pad); max-width:800px; margin:0 auto; }
.handover-steps { display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
.handover-step { background:var(--surface); border-radius:var(--r); padding:var(--card-pad-y) var(--card-pad-x); box-shadow:var(--sh-sm); border:1px solid var(--border-light); display:flex; gap:16px; align-items:flex-start; transition:box-shadow var(--duration); }
.handover-step:hover { box-shadow:var(--sh); }
.step-num { width:36px; height:36px; border-radius:50%; background:var(--sage); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
.step-content h3 { font-size:15px; font-weight:700; margin-bottom:5px; }
.step-content p { font-size:13px; color:var(--text-2); line-height:1.7; }
.step-reward { display:inline-block; margin-top:8px; padding:4px 12px; background:rgba(232,168,56,.12); color:var(--amber-d); border-radius:var(--r-sm); font-size:12px; font-weight:700; }
.btn-form { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:var(--btn-full-pad); background:var(--sage); color:#fff; border:none; border-radius:var(--r); font-size:15px; font-weight:700; cursor:pointer; transition:filter var(--duration); }
.btn-form:hover { filter:brightness(1.06); }

/* 引き継ぐタブ: 自分の投稿履歴 */
.my-submissions-wrap { margin-bottom:32px; }
.my-submissions-group { margin-bottom:14px; }
.my-submissions-group-title {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:var(--text-2); letter-spacing:.3px;
  margin-bottom:10px;
}
.my-submissions-group-count {
  font-size:11px; font-weight:700; padding:2px 9px; border-radius:var(--r-sm);
  background:rgba(27,45,91,.08); color:var(--navy);
}
.my-submission-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; margin-bottom:6px;
  background:var(--surface); border-radius:var(--r-sm);
  border:1px solid var(--border-light);
  font-size:13px;
}
.my-submission-item .ms-type {
  font-size:10px; font-weight:800; letter-spacing:.4px;
  padding:3px 8px; border-radius:var(--r-sm); white-space:nowrap;
}
.my-submission-item .ms-type.t-job { background:rgba(27,45,91,.08); color:var(--navy); }
.my-submission-item .ms-type.t-housing { background:rgba(74,122,88,.10); color:var(--sage); }
.my-submission-item .ms-title {
  flex:1; min-width:0; color:var(--text); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.my-submission-item .ms-title-sub { color:var(--text-3); font-weight:500; font-size:11.5px; margin-left:4px; }
.my-submission-item .ms-date { font-size:11px; color:var(--text-3); font-feature-settings:"tnum" 1; white-space:nowrap; }
.my-submission-item .ms-status {
  font-size:10px; font-weight:800; letter-spacing:.4px;
  padding:3px 8px; border-radius:var(--r-sm); white-space:nowrap;
}
.ms-status.s-pending { background:rgba(232,168,56,.15); color:var(--amber-d); }
.ms-status.s-public  { background:rgba(74,122,88,.12); color:var(--sage); }
.my-submissions-note { font-size:11.5px; color:var(--text-3); margin-top:10px; line-height:1.6; }
@media (max-width:480px){
  .my-submission-item { flex-wrap:wrap; }
  .my-submission-item .ms-title { flex-basis:100%; order:3; }
  .my-submission-item .ms-date { order:4; margin-left:auto; }
}

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; align-items:flex-end; justify-content:center; backdrop-filter:blur(6px); }
.modal-overlay.show { display:flex; }
.modal { background:var(--surface); width:100%; max-width:660px; max-height:92vh; border-radius:var(--r-lg) var(--r-lg) 0 0; overflow-y:auto; animation:slideUp .3s var(--ease); }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
@media(min-width:768px){ .modal-overlay.show{align-items:center;} .modal{border-radius:var(--r-lg);max-height:88vh;} }
.modal-carousel { position:relative; width:100%; aspect-ratio:4/3; background:var(--bg-elevated); overflow:hidden; }
.modal-carousel img { width:100%; height:100%; object-fit:cover; display:block; }
.modal-carousel-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:48px; color:var(--navy); }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border:none; cursor:pointer; font-size:14px; color:var(--text); display:flex; align-items:center; justify-content:center; z-index:5; transition:background var(--duration); }
.carousel-btn:hover { background:#fff; }
.carousel-prev { left:12px; }
.carousel-next { right:12px; }
.carousel-dots { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.cdot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; transition:all var(--duration); }
.cdot.active { background:#fff; width:20px; border-radius:3px; }
.modal-close { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.35); color:#fff; border:none; cursor:pointer; font-size:18px; z-index:6; display:flex; align-items:center; justify-content:center; transition:background var(--duration); }
.modal-close:hover { background:rgba(0,0,0,.5); }
.modal-badge { position:absolute; bottom:12px; left:12px; padding:4px 10px; border-radius:var(--r-lg); font-size:10px; font-weight:700; color:#fff; backdrop-filter:blur(8px); z-index:5; }
.modal-body { padding:24px 24px 32px; }
.modal-title { font-size:22px; font-weight:700; color:var(--text); margin-bottom:6px; }
.modal-sub { font-size:14px; color:var(--text-2); margin-bottom:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.modal-section { margin-bottom:24px; }
.modal-section-title { font-size:12px; font-weight:700; color:var(--text-3); letter-spacing:.6px; text-transform:uppercase; margin-bottom:14px; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.info-item { background:var(--bg); border-radius:var(--r-sm); padding:12px 14px; display:flex; align-items:center; gap:12px; }
.info-item .info-icon { width:36px; height:36px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.info-item .info-icon.green { background:rgba(74,122,88,.1); color:var(--sage); }
.info-item .info-icon.blue { background:rgba(27,45,91,.08); color:var(--navy); }
.info-item .info-icon.coral { background:rgba(232,88,58,.08); color:var(--coral); }
.info-item .info-icon.amber { background:rgba(232,168,56,.1); color:var(--amber); }
.info-item .key { font-size:10px; font-weight:700; color:var(--text-3); letter-spacing:.4px; text-transform:uppercase; margin-bottom:2px; }
.info-item .val { font-size:14px; font-weight:700; color:var(--text); line-height:1.4; }
.baton-banner { background:linear-gradient(135deg,var(--coral),var(--coral-hover)); color:#fff; padding:16px 18px; border-radius:var(--r); margin-bottom:20px; display:flex; align-items:flex-start; gap:12px; }
.baton-banner i { font-size:20px; flex-shrink:0; margin-top:2px; }
.baton-banner strong { font-size:14px; font-weight:700; display:block; margin-bottom:3px; }
.baton-banner p { font-size:12px; opacity:.9; line-height:1.5; }
.resident-card { background:var(--bg); border-radius:var(--r); padding:18px; display:flex; gap:14px; align-items:flex-start; }
.resident-avatar { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:#fff; flex-shrink:0; }
.resident-info { flex:1; }
.resident-name { font-size:15px; font-weight:700; }
.resident-meta { font-size:12px; color:var(--text-2); margin-top:3px; }
.resident-badge { display:inline-flex; align-items:center; gap:4px; background:rgba(74,122,88,.1); color:var(--sage); border-radius:var(--r-lg); padding:3px 10px; font-size:11px; font-weight:700; margin-top:8px; }
.resident-bio { font-size:13px; color:var(--text-2); line-height:1.7; margin-top:10px; }
.review-card { background:var(--bg); border-radius:var(--r-sm); padding:16px; margin-bottom:10px; }
.review-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.review-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }
.review-name { font-size:13px; font-weight:700; }
.review-date { font-size:11px; color:var(--text-3); margin-left:auto; }
.review-text { font-size:13px; color:var(--text-2); line-height:1.7; }

/* Handover Notes (unlocked for package users) */
.handover-notes { display:flex; flex-direction:column; gap:14px; }
.handover-note-item { background:var(--bg); border-radius:var(--r); padding:18px 20px; border-left:3px solid var(--sage); }
.handover-note-item.note-navy { border-left-color:var(--navy); }
.handover-note-item.note-amber { border-left-color:var(--amber); }
.handover-note-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.handover-note-icon { width:32px; height:32px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.handover-note-icon.icon-sage { background:rgba(74,122,88,.1); color:var(--sage); }
.handover-note-icon.icon-navy { background:rgba(27,45,91,.08); color:var(--navy); }
.handover-note-icon.icon-amber { background:rgba(232,168,56,.1); color:var(--amber); }
.handover-note-label { font-size:12px; font-weight:700; color:var(--text-2); letter-spacing:.3px; }
.handover-note-text { font-size:14px; color:var(--text); line-height:1.8; }

.btn-cta { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:var(--btn-full-pad); background:var(--coral); color:#fff; border:none; border-radius:var(--r); font-size:15px; font-weight:700; cursor:pointer; margin-top:16px; transition:filter var(--duration),transform var(--duration); }
.btn-cta:hover { filter:brightness(1.06); transform:translateY(-1px); }
.cta-note { text-align:center; font-size:12px; color:var(--text-3); margin-top:10px; }
.cta-note span { color:var(--sage); font-weight:700; }

/* Admin */
.admin-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1100; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
.admin-overlay.show { display:flex; }
.admin-panel { background:var(--surface); width:95%; max-width:1000px; max-height:90vh; border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; }
.admin-header { background:var(--navy); color:#fff; padding:18px 24px; display:flex; justify-content:space-between; align-items:center; }
.admin-header h2 { font-size:16px; font-weight:700; font-family:'Noto Sans JP',sans-serif; }
.admin-close { background:none; border:none; color:rgba(255,255,255,.7); font-size:22px; cursor:pointer; transition:color var(--duration); }
.admin-close:hover { color:#fff; }
.admin-body { padding:20px; overflow-y:auto; flex:1; }
.admin-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.admin-tabs.is-sub { align-items:center; gap:6px; padding-bottom:14px; margin-bottom:16px; border-bottom:var(--rule-light); }
.admin-tabs-label { font-size:11px; font-weight:700; color:var(--text-3); margin-right:2px; }
.admin-tab { padding:8px 14px; border:none; border-radius:var(--r-sm); cursor:pointer; font-size:13px; font-weight:700; white-space:nowrap; background:var(--bg-elevated); color:var(--text-2); transition:all var(--duration); }
.admin-tabs.is-sub .admin-tab { padding:5px 11px; font-size:12px; background:transparent; border:1px solid var(--border); }
.admin-tab:hover:not(.active) { background:var(--border-light); }
.admin-tab.active, .admin-tabs.is-sub .admin-tab.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.admin-table { width:100%; min-width:600px; border-collapse:collapse; font-size:13px; }
.admin-table th { background:var(--bg); padding:10px 14px; text-align:left; white-space:nowrap; border-bottom:2px solid var(--border); font-weight:700; color:var(--text-2); font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.admin-table td { padding:10px 14px; white-space:nowrap; border-bottom:1px solid var(--border-light); }
.admin-table tr:hover td { background:var(--bg); }
.admin-status { position:static; top:auto; left:auto; padding:3px 10px; border-radius:var(--r-sm); font-size:11px; font-weight:700; color:#fff; display:inline-block; animation:none; box-shadow:none; }

/* 管理パネル: 共通パーツ（js/features/handover-admin.js） */
.admin-muted { color:var(--text-3); font-weight:500; }
.admin-small { font-size:11.5px; }
.admin-lead { margin:-4px 0 10px; }
.admin-foot { margin-top:8px; }
.admin-empty { text-align:center; padding:40px 16px; color:var(--text-3); }
.admin-empty > i { font-size:30px; display:block; margin-bottom:12px; }
.admin-empty p { margin-bottom:12px; }
.admin-empty.is-error { color:var(--coral); }
.admin-tag { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:6px; font-size:10.5px; font-weight:700; white-space:nowrap; margin-bottom:4px; }
.admin-tag.is-sage { background:rgba(74,122,88,.12); color:var(--sage); }
.admin-tag.is-navy { background:rgba(47,93,67,.10); color:var(--navy); }
.admin-tag.is-muted { background:var(--bg-elevated); color:var(--text-3); }
.admin-icon-btn { background:none; border:none; cursor:pointer; font-size:14px; padding:8px; border-radius:8px; color:var(--text-3); }
.admin-icon-btn.is-danger { color:var(--coral); }
.admin-icon-btn:hover { background:var(--bg-elevated); }
.admin-seg { display:flex; gap:4px; background:var(--bg-elevated); padding:4px; border-radius:11px; margin-bottom:10px; }
.admin-seg button { flex:1; padding:8px 6px; border:none; background:transparent; color:var(--text-2); font-size:12.5px; font-weight:700; cursor:pointer; border-radius:8px; }
.admin-seg button.active { background:var(--navy); color:#fff; }
.admin-seg-count { opacity:.65; }
.admin-records { display:flex; flex-direction:column; gap:8px; }
.admin-record { display:flex; align-items:center; gap:8px; background:var(--bg); border-radius:10px; padding:10px 6px 10px 14px; cursor:pointer; }
.admin-record:hover { background:var(--bg-elevated); }
.admin-record-main { flex:1; min-width:0; }
.admin-record-title { font-size:13.5px; font-weight:800; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-record .admin-tag { margin-bottom:0; }

/* 管理パネル: 参加申請（カード・サマリーのグラフ） */
.admin-card { background:var(--bg); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.admin-card-title { font-size:13px; font-weight:800; color:var(--text); margin-bottom:10px; }
.admin-card-note { font-size:11px; margin:-6px 0 10px; }
.admin-status-pill { display:inline-block; margin-left:8px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800; white-space:nowrap; vertical-align:middle; }
.admin-status-pill.is-pending { color:var(--amber-d); background:rgba(232,168,56,.15); }
.admin-status-pill.is-approved { color:var(--sage); background:rgba(74,122,88,.12); }
.admin-status-pill.is-rejected { color:var(--text-3); background:var(--bg-elevated); }
.admin-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.admin-btn { padding:10px 16px; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.admin-btn.is-approve { flex:1; min-width:130px; background:var(--sage); color:#fff; }
.admin-btn.is-reject { background:var(--border-light); color:var(--text-2); }
.admin-btn:disabled { opacity:.5; cursor:default; }
.admin-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.admin-chip { padding:6px 12px; border:1px solid var(--border); border-radius:999px; font-size:12px; font-weight:700; cursor:pointer; background:var(--surface); color:var(--text-2); }
.admin-chip.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.admin-person { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.admin-person-main { flex:1; min-width:0; }
.admin-person-name { font-size:15px; font-weight:800; color:var(--text); }
.admin-avatar { width:44px; height:44px; flex:none; border-radius:50%; object-fit:cover; background:var(--bg-elevated); display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:var(--text-2); }
.admin-section { border-radius:8px; padding:10px 12px; margin-bottom:8px; }
.admin-section.is-public { background:rgba(74,122,88,.07); }
.admin-section.is-private { background:rgba(47,93,67,.04); border:var(--rule-light); }
.admin-section-title { font-size:11px; font-weight:800; margin-bottom:8px; }
.admin-section.is-public .admin-section-title { color:var(--sage); }
.admin-section.is-private .admin-section-title { color:var(--navy); }
.admin-kv { display:flex; gap:8px; font-size:12px; margin-bottom:4px; }
.admin-kv-label { color:var(--text-3); min-width:92px; flex:none; font-size:11.5px; }
.admin-kv-val { color:var(--text); font-weight:600; min-width:0; word-break:break-word; }
.admin-kv-val.admin-muted { color:var(--text-3); }
.admin-ktext { margin-bottom:10px; }
.admin-ktext .admin-kv-label { margin-bottom:2px; }
.admin-ktext-body { font-size:13px; color:var(--text); line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.admin-line-btn { display:inline-flex; align-items:center; gap:6px; margin-top:8px; background:var(--brand-line); color:#fff; padding:8px 13px; border-radius:8px; font-size:12px; font-weight:700; text-decoration:none; }
.admin-legacy { font-size:12px; margin-bottom:4px; }
.admin-legacy summary { cursor:pointer; color:var(--text-3); font-size:11.5px; font-weight:700; margin-bottom:6px; }
.admin-pie { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.admin-pie svg { flex:none; }
.admin-pie-legend { flex:1; min-width:160px; }
.admin-legend-row { display:flex; align-items:center; gap:7px; font-size:12px; margin-bottom:4px; color:var(--text); }
.admin-legend-dot { width:11px; height:11px; border-radius:3px; flex:none; }
.admin-legend-label { flex:1; }
.admin-legend-num { color:var(--text-2); font-weight:700; white-space:nowrap; }
.admin-bar { margin-bottom:8px; }
.admin-bar-head { display:flex; justify-content:space-between; gap:8px; font-size:12px; margin-bottom:3px; color:var(--text); }
.admin-bar-track { background:var(--bg-elevated); border-radius:6px; height:9px; overflow:hidden; }
.admin-bar-fill { height:100%; border-radius:6px; }
.admin-free-row { border-bottom:1px solid var(--bg-elevated); padding:8px 0; }
.admin-free-name { font-size:12px; font-weight:800; color:var(--text); margin-bottom:4px; }
.admin-free-item { font-size:12px; margin-bottom:2px; color:var(--text); white-space:pre-wrap; }

/* 管理パネル: 投稿申請・ご意見・通報のカード */
.admin-break { word-break:break-all; }
.admin-card.is-done { opacity:.65; }
.admin-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.admin-card-head-main { flex:1; min-width:0; }
.admin-body-text { font-size:13px; color:var(--text); line-height:1.6; margin:2px 0 8px; }
.admin-body-text.is-pre { line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.admin-meta { line-height:1.6; margin-bottom:10px; }
.admin-meta summary { cursor:pointer; margin-top:4px; }
.admin-note { font-size:12px; color:var(--text-2); background:var(--bg-elevated); padding:8px 10px; border-radius:8px; margin-bottom:10px; }
.admin-kind { font-size:12px; font-weight:800; }
.admin-state { font-size:12px; font-weight:700; white-space:nowrap; }
.admin-state.is-done { color:var(--sage); }
.admin-state.is-open { color:var(--coral); }
.admin-btn-sm { padding:6px 10px; font-size:11.5px; font-weight:700; background:var(--bg-elevated); color:var(--text-2); border:1px solid var(--border-light); border-radius:8px; cursor:pointer; }
.admin-btn-sm.is-approve { background:var(--sage); color:#fff; border-color:var(--sage); }
.admin-btn-sm.is-danger { background:rgba(232,88,58,.10); color:var(--coral); border-color:var(--coral); }
.admin-preview { margin-bottom:10px; }
.admin-preview summary { font-size:12px; font-weight:700; color:var(--text-2); cursor:pointer; }
.admin-preview-body { margin:8px 0 6px; }
.admin-check { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--text-2); margin-bottom:6px; cursor:pointer; }
.admin-warn { font-size:11px; color:var(--coral); margin-bottom:8px; }

@media (max-width:600px){
  .admin-panel { width:100%; max-width:none; height:100vh; height:100dvh; max-height:none; border-radius:0; }
  .admin-header { padding:14px 16px; }
  .admin-body { padding:14px 16px; }
}

@media(max-width:600px){
  :root{ --page-pad:16px; }   /* 全タブ共通の本文左右余白をモバイルで詰める */
  .card-grid{grid-template-columns:1fr;}
  .header-text h1{font-size:14px;}
  .modal-body{padding:18px 18px 28px;}
  .search-wrap{min-width:100%;order:5;}
  .info-blocks{grid-template-columns:1fr;}
  .data-summary{grid-template-columns:repeat(2,1fr);}
  .guide-steps{flex-direction:column;align-items:center;}
  .guide-step::after{display:none;}
  .bnav-btn{font-size:9.5px;}
  .bnav-btn i:first-child{font-size:16px;}
  .header{padding:12px 16px;}
  .feature-section{padding:24px var(--page-pad) 8px;}
  .handover-content{padding:24px var(--page-pad);}
  .learn-content{padding:24px var(--page-pad);}
  .main{padding:16px var(--page-pad);}
  .explore-toolbar{padding:10px 14px;}
  .info-grid{grid-template-columns:1fr;}
  .modal-carousel{height:200px;}
}

/* ── ゆずる (MARKET) TAB ── */
.dummy-banner{background:#FFF8E5;border-bottom:1px solid rgba(232,168,56,.3);padding:10px 20px;text-align:center;font-size:12px;color:#7A5A20;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;}
.dummy-banner i{color:var(--amber-d);}

.market-content{padding:24px var(--page-pad) 40px;max-width:1200px;margin:0 auto;}
.market-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.market-search-wrap{position:relative;flex:1;min-width:180px;}
.market-search{width:100%;padding:10px 14px 10px 38px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:13px;font-family:inherit;background:var(--surface);transition:border-color var(--duration);}
.market-search:focus{outline:none;border-color:var(--sage);}
.market-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:13px;}
.market-sort{padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:13px;font-family:inherit;background:var(--surface);cursor:pointer;color:var(--text);}
.market-sort:focus{outline:none;border-color:var(--sage);}
.market-post-btn{padding:10px 18px;background:var(--sage);color:#fff;border:none;border-radius:var(--r-sm);font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:filter var(--duration);white-space:nowrap;font-family:inherit;}
.market-post-btn:hover{filter:brightness(1.08);}

.market-categories{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
.market-categories::-webkit-scrollbar{display:none;}
.market-cat-chip{padding:8px 16px;border:1.5px solid var(--border);border-radius:var(--r-lg);background:var(--surface);cursor:pointer;font-size:12px;font-weight:600;color:var(--text-2);transition:all var(--duration);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-family:inherit;}
.market-cat-chip i{font-size:11px;}
.market-cat-chip.active{background:var(--sage);color:#fff;border-color:var(--sage);}
.market-cat-chip:hover:not(.active){border-color:var(--sage);color:var(--sage);}

.market-result-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:12px;color:var(--text-3);}
.market-result-count strong{color:var(--text);font-weight:700;}

.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;}
.item-card{background:var(--surface);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease);border:1px solid var(--border-light);position:relative;display:flex;flex-direction:column;}
.item-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);}
.item-card.is-sold{opacity:.65;}
.item-card.is-sold .item-photo::after{content:'SOLD';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);color:#fff;font-size:24px;font-weight:800;letter-spacing:4px;font-family:'Noto Sans JP',sans-serif;}
.item-photo{position:relative;width:100%;aspect-ratio:1/1;background:var(--bg);overflow:hidden;}
.item-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease);}
.item-card:hover .item-photo img{transform:scale(1.04);}
.item-fav-btn{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-3);transition:all var(--duration);font-size:14px;backdrop-filter:blur(4px);z-index:2;}
.item-fav-btn:hover{background:#fff;color:var(--coral);}
.item-fav-btn.active{color:var(--coral);background:#fff;}
.item-package-tag{position:absolute;top:8px;left:8px;background:var(--coral);color:#fff;padding:4px 9px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.4px;display:inline-flex;align-items:center;gap:4px;z-index:2;}
.item-condition-tag{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;padding:3px 9px;border-radius:6px;font-size:10px;font-weight:600;backdrop-filter:blur(4px);z-index:2;}
.item-info{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1;}
.item-title{font-family:var(--font-sans);font-size:15px;font-weight:700;color:var(--text);line-height:1.45;letter-spacing:.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em;}
.item-price{font-size:20px;font-weight:800;color:var(--coral);font-family:var(--font-sans);letter-spacing:-.3px;font-feature-settings:"tnum" 1,"lnum" 1;}
.item-price .currency{font-size:13px;font-weight:700;margin-right:1px;}
.item-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-3);margin-top:2px;}
.item-meta-area{display:inline-flex;align-items:center;gap:3px;}
.item-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--text-3);}
.item-urgent{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:rgba(232,88,58,.1);color:var(--coral);font-size:10px;font-weight:700;border-radius:6px;margin-top:2px;align-self:flex-start;}


/* Item modal */
.item-modal-photo-wrap{position:relative;width:100%;aspect-ratio:4/3;background:#1A1A1A;overflow:hidden;}
.item-modal-photo{width:100%;height:100%;object-fit:contain;background:#1A1A1A;}
.item-modal-photo-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;backdrop-filter:blur(4px);transition:background var(--duration);}
.item-modal-photo-nav:hover{background:rgba(0,0,0,.75);}
.item-modal-photo-nav.prev{left:12px;}
.item-modal-photo-nav.next{right:12px;}
.item-modal-photo-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;}
.item-modal-photo-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background var(--duration);}
.item-modal-photo-dot.active{background:#fff;}
.item-modal-body{padding:22px 24px 28px;}
.item-modal-cat-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.item-modal-cat{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;background:var(--bg-elevated);color:var(--text-2);border-radius:12px;font-size:11px;font-weight:700;}
.item-modal-condition{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:12px;font-size:11px;font-weight:700;}
.cond-new{background:rgba(74,122,88,.15);color:var(--sage);}
.cond-good{background:rgba(75,123,187,.15);color:#3A6298;}
.cond-used{background:rgba(232,168,56,.15);color:var(--amber-d);}
.cond-junk{background:rgba(140,130,120,.15);color:var(--text-2);}
.item-modal-title{font-size:22px;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:8px;}
.item-modal-price{font-size:30px;font-weight:800;color:var(--coral);font-family:'Noto Sans JP',sans-serif;margin-bottom:18px;letter-spacing:-.5px;}
.item-modal-price .currency{font-size:18px;font-weight:700;}
.item-modal-section{padding:16px 0;border-top:1px solid var(--border-light);}
.item-modal-section-title{font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.item-modal-desc{font-size:14px;color:var(--text);line-height:1.75;white-space:pre-wrap;}
.item-modal-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.item-modal-info-item{display:flex;flex-direction:column;gap:3px;}
.item-modal-info-label{font-size:11px;color:var(--text-3);}
.item-modal-info-val{font-size:13px;color:var(--text);font-weight:600;}
.item-modal-package-list{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.item-modal-package-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg);border-radius:8px;font-size:13px;color:var(--text);}
.item-modal-package-item i{color:var(--sage);font-size:11px;}
.item-modal-seller{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg);border-radius:var(--r-sm);}
.item-modal-seller-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;flex-shrink:0;}
.item-modal-seller-info{flex:1;min-width:0;}
.item-modal-seller-name{font-size:14px;font-weight:700;color:var(--text);}
.item-modal-seller-meta{font-size:11px;color:var(--text-3);margin-top:2px;}
.item-modal-cta-row{display:flex;gap:10px;margin-top:20px;}
.item-modal-cta-line{flex:1;padding:14px;background:#06C755;color:#fff;border:none;border-radius:var(--r-sm);font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-family:inherit;transition:filter var(--duration);}
.item-modal-cta-line:hover{filter:brightness(1.08);}
.item-modal-cta-line i{font-size:16px;}
.item-modal-cta-fav{padding:14px 18px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;color:var(--text-3);font-size:16px;transition:all var(--duration);}
.item-modal-cta-fav:hover{border-color:var(--coral);color:var(--coral);}
.item-modal-cta-fav.active{color:var(--coral);border-color:var(--coral);background:rgba(232,88,58,.05);}
.item-modal-mine{margin-top:14px;padding:12px;background:var(--bg-elevated);border-radius:var(--r-sm);display:flex;gap:8px;align-items:center;justify-content:center;font-size:12px;color:var(--text-2);}
.item-modal-mine-actions{display:flex;gap:8px;margin-top:10px;}
.item-modal-mine-btn{flex:1;padding:10px;border:1.5px solid var(--border);background:var(--surface);border-radius:var(--r-sm);font-size:12px;font-weight:600;cursor:pointer;color:var(--text-2);font-family:inherit;transition:all var(--duration);}
.item-modal-mine-btn:hover{border-color:var(--text-2);color:var(--text);}
.item-modal-mine-btn.danger{color:var(--coral);}
.item-modal-mine-btn.danger:hover{border-color:var(--coral);background:rgba(232,88,58,.05);}
.item-modal-trust-note{margin-top:14px;padding:12px 14px;background:#F2F7F4;border:1px solid rgba(74,122,88,.2);border-radius:var(--r-sm);font-size:12px;color:#3A5A45;line-height:1.6;display:flex;gap:8px;align-items:flex-start;}
.item-modal-trust-note i{color:var(--sage);margin-top:2px;flex-shrink:0;}

/* Submit form: market specific */
.market-form-photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
.market-form-photo-slot{aspect-ratio:1/1;border:2px dashed var(--border);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:var(--text-3);cursor:pointer;font-size:11px;transition:all var(--duration);background:var(--bg);position:relative;}
.market-form-photo-slot:hover{border-color:var(--sage);color:var(--sage);}
.market-form-photo-slot i{font-size:16px;}
.market-form-photo-slot.has-photo{border-style:solid;border-color:var(--border);background-size:cover;background-position:center;cursor:default;}
.market-form-photo-slot.has-photo:hover{border-color:var(--border);}
.market-form-photo-slot.is-disabled{opacity:.35;cursor:not-allowed;border-style:dashed;}
.market-form-photo-slot.is-disabled:hover{border-color:var(--border);color:var(--text-3);}
.market-form-photo-slot .photo-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(0,0,0,.65);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.market-form-photo-slot .photo-remove:hover{background:rgba(0,0,0,.85);}
.market-form-photo-note{font-size:11px;color:var(--text-3);margin-bottom:14px;text-align:center;padding:10px;background:#FFF8E5;border-radius:var(--r-sm);color:#7A5A20;}

@media(max-width:600px){
  .item-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .market-content{padding:18px var(--page-pad) 32px;}
  .item-title{font-size:13px;}
  .item-price{font-size:17px;}
  .item-modal-title{font-size:18px;}
  .item-modal-price{font-size:24px;}
  .item-modal-body{padding:18px 18px 24px;}
  .market-toolbar{gap:8px;}
  .market-post-btn{padding:9px 14px;font-size:12px;width:100%;justify-content:center;}
  .market-form-photo-grid{grid-template-columns:repeat(2,1fr);}
}

/* ── LEAFLET ── */
.leaflet-popup-content{font-family:'Noto Sans JP',sans-serif;font-size:13px;}
.popup-title{font-weight:700;font-size:14px;margin-bottom:4px;}
.popup-btn{display:inline-block;margin-top:8px;padding:6px 16px;background:var(--coral);color:#fff;border-radius:var(--r-sm);font-size:12px;cursor:pointer;text-decoration:none;font-weight:600;transition:filter var(--duration);}
.popup-btn:hover{filter:brightness(1.06);}
.leaflet-container a.popup-btn{color:#fff;} /* Leaflet 標準のリンク色（青）に負けて文字が読みにくくなるのを防ぐ */

/* ── SUBMISSION FORM ── */
.submit-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1200;align-items:flex-end;justify-content:center;backdrop-filter:blur(6px);}
.submit-overlay.show{display:flex;}
.submit-modal{background:var(--surface);width:100%;max-width:600px;height:94vh;max-height:94vh;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .3s var(--ease);}
#submitModalContent{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden;}
@media(min-width:768px){.submit-overlay.show{align-items:center;}.submit-modal{border-radius:var(--r-lg);height:88vh;}}
.submit-modal-header{padding:20px 22px 0;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.submit-modal-title{font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;}
.submit-modal-title i{color:var(--sage);}
.submit-modal-close{background:none;border:none;font-size:24px;color:var(--text-3);cursor:pointer;line-height:1;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background var(--duration);}
.submit-modal-close:hover{background:var(--bg);}
.form-progress{padding:16px 22px 0;display:flex;align-items:center;gap:6px;flex-shrink:0;}
.form-step-dot{flex:1;height:4px;border-radius:2px;background:var(--border-light);transition:background .25s var(--ease);}
.form-step-dot.active{background:var(--sage);}
.form-step-dot.done{background:var(--amber);}
.form-step-label{font-size:11px;color:var(--text-3);font-weight:700;margin-left:8px;white-space:nowrap;}
.submit-form-body{padding:20px 22px;overflow-y:scroll;flex:1 1 0;min-height:0;-webkit-overflow-scrolling:touch;}
.form-step-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px;display:flex;align-items:center;}
.form-step-title i{color:var(--navy);font-size:13px;margin-right:8px;}
.form-step-desc{font-size:13px;color:var(--text-2);margin-bottom:20px;line-height:1.6;}
.form-group{margin-bottom:16px;}
.form-label{font-size:11px;font-weight:800;color:var(--text-2);margin-bottom:7px;display:block;letter-spacing:.5px;text-transform:uppercase;}
.form-label .req{color:var(--coral);margin-left:3px;letter-spacing:0;}
.form-input,.form-select,.form-textarea{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:14px;font-family:inherit;background:var(--bg);color:var(--text);transition:border-color var(--duration),background var(--duration),box-shadow var(--duration);}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--navy);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(27,45,91,.08);}
.form-textarea{resize:vertical;min-height:92px;line-height:1.75;}

/* 住居フォームの写真トリミング（4:3 固定） */
.hs-crop-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:100000;padding:16px;}
.hs-crop-modal{background:var(--bg);border-radius:var(--r);padding:14px;max-width:95vw;width:420px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.hs-crop-header{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14px;color:var(--text);}
.hs-crop-header i{color:var(--sage);margin-right:6px;}
.hs-crop-x{background:transparent;border:none;font-size:22px;cursor:pointer;color:var(--text-2);padding:0 6px;line-height:1;}
.hs-crop-x:hover{color:var(--text);}
.hs-crop-stage{position:relative;width:100%;aspect-ratio:4/3;background:#000;overflow:hidden;border-radius:var(--r-sm);user-select:none;touch-action:none;cursor:grab;}
.hs-crop-stage:active{cursor:grabbing;}
.hs-crop-img{position:absolute;user-select:none;pointer-events:none;max-width:none;max-height:none;}
.hs-crop-hint{font-size:11px;color:var(--text-3);text-align:center;}
.hs-crop-controls{display:flex;flex-direction:column;gap:10px;}
.hs-crop-zoom{display:flex;align-items:center;gap:10px;color:var(--text-2);}
.hs-crop-zoom i{font-size:13px;}
.hs-crop-zoom input[type=range]{flex:1;accent-color:var(--sage);}
.hs-crop-btns{display:flex;gap:8px;}
.hs-crop-btns button{flex:1;padding:11px;border-radius:var(--r-sm);border:1.5px solid var(--border);cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;}
.hs-crop-cancel{background:var(--bg);color:var(--text-2);}
.hs-crop-cancel:hover{background:var(--bg-elevated);}
.hs-crop-ok{background:var(--sage);color:#fff;border-color:var(--sage);}
.hs-crop-ok:hover{filter:brightness(.95);}
.hs-crop-ok i{margin-right:4px;}

/* iOS Safari は input の font-size が 16px 未満だとフォーカス時に自動ズームインするので、モバイルでは 16px に底上げする */
@media(max-width:768px){
  input,textarea,select{font-size:16px;}
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;}
.form-toggle{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:all var(--duration);user-select:none;}
.form-toggle:hover:not(.checked){border-color:var(--border);}
.form-toggle.checked{border-color:var(--sage);background:rgba(74,122,88,.05);}
.form-toggle i{color:var(--text-3);font-size:13px;width:16px;text-align:center;flex-shrink:0;transition:color var(--duration);}
.form-toggle.checked i{color:var(--sage);}
.form-toggle span{font-size:13px;font-weight:600;color:var(--text-2);transition:color var(--duration);}
.form-toggle.checked span{color:var(--sage);}
.form-note-box{background:rgba(232,168,56,.06);border:1px solid rgba(232,168,56,.2);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start;}
.form-note-box i{color:var(--amber);font-size:13px;margin-top:2px;flex-shrink:0;}
.form-note-box p{font-size:12px;color:var(--text-2);line-height:1.6;}
.form-confirm-block{background:var(--bg);border-radius:var(--r-sm);padding:16px 18px;margin-bottom:12px;}
.form-confirm-label{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.form-confirm-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:6px;}
.form-confirm-row .key{color:var(--text-2);flex-shrink:0;}
.form-confirm-row .val{font-weight:700;color:var(--text);text-align:right;margin-left:8px;}
.form-nav,
.submit-form-nav{padding:14px 22px 22px;display:flex;justify-content:space-between;gap:10px;flex-shrink:0;border-top:1px solid var(--border-light);background:var(--surface);}
.submit-form-nav:has(> :only-child){justify-content:center;}
.btn-fn{padding:12px 22px;border-radius:var(--r-sm);font-size:13.5px;font-weight:700;letter-spacing:.3px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:all var(--duration) var(--ease);border:none;white-space:nowrap;}
.btn-fn-back{background:transparent;color:var(--text-2);border:1px solid var(--border);}
.btn-fn-back:hover{background:var(--bg-elevated);border-color:var(--text-3);color:var(--text);}
.btn-fn-next{background:var(--navy);color:#fff;}
.btn-fn-next:hover{background:var(--navy-light);transform:translateY(-1px);}
.btn-fn-submit{background:var(--sage);color:#fff;box-shadow:0 2px 6px rgba(74,122,88,.22);}
.btn-fn-submit:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 6px 16px rgba(74,122,88,.28);}
.submit-success{text-align:center;padding:32px 20px;}
.submit-success-icon{width:64px;height:64px;border-radius:50%;background:rgba(74,122,88,.1);color:var(--sage);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 18px;}
.submit-success h3{font-size:18px;font-weight:700;margin-bottom:10px;}
.submit-success p{font-size:14px;color:var(--text-2);line-height:1.7;}
.pending-badge{background:var(--coral);color:#fff;border-radius:var(--r-sm);padding:1px 6px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;margin-left:4px;vertical-align:middle;}
.handover-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;}
.handover-action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 18px;border:none;border-radius:var(--r);cursor:pointer;transition:transform var(--duration) var(--ease),filter var(--duration);font-family:inherit;}
.handover-action-btn:hover{transform:translateY(-2px);filter:brightness(1.06);}
.handover-action-btn i{font-size:24px;}
.handover-action-btn span{font-size:14px;font-weight:700;}
.handover-action-btn small{font-size:11px;opacity:.8;line-height:1.4;text-align:center;}
@media(max-width:480px){.handover-action-grid{grid-template-columns:1fr;}.form-row{grid-template-columns:1fr;}.form-toggles{grid-template-columns:1fr;}}

/* ── はじめに PAGE ── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.feature-section{padding:32px var(--page-pad) 12px;}
.feature-section-title{font-size:12px;font-weight:700;color:var(--text-3);letter-spacing:.8px;text-transform:uppercase;text-align:center;margin-bottom:20px;}

.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto;}
@media(max-width:980px){.feature-cards{grid-template-columns:repeat(2,1fr);}}
/* モバイル: 1 列に戻し、内部要素はやや控えめに（デフォルトより一回り小さく） */
/* 一言の説明はスマホのタイルでだけ使う（PCは箇条書きとボタンを出す） */
.fc-sub{display:none;}
.feature-card{position:relative;background:var(--surface);border-radius:var(--r-lg);padding:26px 22px;box-shadow:var(--sh-sm);border:1px solid var(--border-light);display:flex;flex-direction:column;cursor:pointer;transition:transform var(--duration) var(--ease),box-shadow var(--duration),border-color var(--duration);border-top:4px solid transparent;}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--border);}
.feature-card.fc-learn{border-top-color:var(--navy);}
.feature-card.fc-explore{border-top-color:var(--amber);}
.feature-card.fc-market{border-top-color:var(--coral);}
.fc-icon{width:60px;height:60px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px;}
.feature-card.fc-learn .fc-icon{background:rgba(27,45,91,.07);color:var(--navy);}
.feature-card.fc-explore .fc-icon{background:rgba(232,168,56,.1);color:var(--amber-d);}
.feature-card.fc-market .fc-icon{background:rgba(232,88,58,.08);color:var(--coral);}
.fc-tab{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px;}
.feature-card.fc-learn .fc-tab{color:var(--navy);}
.feature-card.fc-explore .fc-tab{color:var(--amber-d);}
.feature-card.fc-market .fc-tab{color:var(--coral);}
.fc-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:16px;line-height:1.35;}
.fc-list{list-style:none;margin-bottom:22px;flex:1;}
.fc-list li{font-size:14px;color:var(--text-2);line-height:1.7;padding-left:16px;position:relative;margin-bottom:5px;}
.fc-list li::before{content:'';position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;}
.feature-card.fc-learn .fc-list li::before{background:var(--navy);}
.feature-card.fc-explore .fc-list li::before{background:var(--amber);}
.feature-card.fc-market .fc-list li::before{background:var(--coral);}
.fc-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:none;border-radius:var(--r-sm);font-size:14px;font-weight:700;cursor:pointer;transition:background var(--duration);font-family:inherit;width:100%;}
.feature-card.fc-learn .fc-btn{background:rgba(27,45,91,.06);color:var(--navy);}
.feature-card.fc-learn .fc-btn:hover{background:rgba(27,45,91,.12);}
.feature-card.fc-explore .fc-btn{background:rgba(232,168,56,.08);color:var(--amber-d);}
.feature-card.fc-explore .fc-btn:hover{background:rgba(232,168,56,.16);}
.feature-card.fc-market .fc-btn{background:rgba(232,88,58,.07);color:var(--coral);}
.feature-card.fc-market .fc-btn:hover{background:rgba(232,88,58,.14);}

/* 新カード: 渡航前 (sage) / ラウンジ (plum) / メンバー (teal) */
.feature-card.fc-predeparture{border-top-color:var(--sage);}
.feature-card.fc-lounge{border-top-color:var(--plum);}
.feature-card.fc-members{border-top-color:var(--teal);}
.feature-card.fc-predeparture .fc-icon{background:rgba(74,122,88,.10);color:var(--sage);}
.feature-card.fc-lounge .fc-icon{background:rgba(126,91,133,.12);color:var(--plum);}
.feature-card.fc-members .fc-icon{background:rgba(63,138,138,.12);color:var(--teal);}
.feature-card.fc-predeparture .fc-tab{color:var(--sage);}
.feature-card.fc-lounge .fc-tab{color:var(--plum-d);}
.feature-card.fc-members .fc-tab{color:var(--teal-d);}
.feature-card.fc-predeparture .fc-list li::before{background:var(--sage);}
.feature-card.fc-lounge .fc-list li::before{background:var(--plum);}
.feature-card.fc-members .fc-list li::before{background:var(--teal);}
.feature-card.fc-predeparture .fc-btn{background:rgba(74,122,88,.08);color:var(--sage);}
.feature-card.fc-predeparture .fc-btn:hover{background:rgba(74,122,88,.16);}
.feature-card.fc-lounge .fc-btn{background:rgba(126,91,133,.09);color:var(--plum-d);}
.feature-card.fc-lounge .fc-btn:hover{background:rgba(126,91,133,.18);}
.feature-card.fc-members .fc-btn{background:rgba(63,138,138,.09);color:var(--teal-d);}
.feature-card.fc-members .fc-btn:hover{background:rgba(63,138,138,.18);}

/* メンバー限定バッジ（カード左上の小さな鍵タグ） */
.feature-card-lock-badge{
  position:absolute; top:-10px; left:16px;
  background:var(--bg-elevated); color:var(--text-2);
  font-family:var(--font-sans); font-size:10.5px; font-weight:800;
  padding:4px 9px; border-radius:999px;
  border:1px solid var(--border-light);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  display:inline-flex; align-items:center; gap:5px;
  letter-spacing:.3px; pointer-events:none; z-index:2;
}
.feature-card-lock-badge i{ font-size:9px; color:var(--text-3); }
@media(max-width:720px){
  .feature-card-lock-badge{ top:-8px; left:14px; font-size:10px; padding:3px 8px; }
}
/* モバイル: 2列の小さな入口タイル。箇条書きとボタンは畳み、見出し＋一言＋矢印だけにする。
   カードの基本スタイルより後ろに置く（前に置くと同じ強さの基本スタイルに上書きされる） */
@media(max-width:560px){
  .feature-section-title{display:none;}
  .feature-cards{grid-template-columns:1fr 1fr;gap:10px;}
  .feature-card{padding:14px 14px 12px;border-radius:var(--r);border-top-width:3px;box-shadow:var(--sh-md);}
  .feature-card:hover{transform:none;}
  .fc-icon{width:34px;height:34px;font-size:15px;margin-bottom:10px;border-radius:9px;}
  .fc-tab{display:none;}
  .fc-title{font-size:14.5px;line-height:1.4;margin-bottom:4px;}
  .fc-sub{display:block;font-size:11.5px;line-height:1.5;color:var(--text-2);padding-right:14px;}
  .fc-list, .fc-btn{display:none;}
  .feature-card::after{
    content:'\f054'; font-family:'Font Awesome 6 Free'; font-weight:900;
    position:absolute; right:12px; bottom:13px; font-size:10px; color:var(--text-3);
  }
  /* ヒーローの直後にタイルが来るとき（本番: イベント・フェーズが隠れている）だけ、下端に少し重ねる */
  .home-events[hidden] + .phase-block[style*="none"] + .feature-section{position:relative;z-index:3;margin-top:-28px;padding-top:0;}
}

/* ── TOPIC CHIPS（知るタブ向けタグ付け / form + display） ── */
.topic-field-hint { font-size:11px; color:var(--text-3); margin-top:4px; margin-bottom:6px; line-height:1.5; }
.topic-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.topic-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px;
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  font-size:12px; font-weight:600;
  color:var(--text-2);
  cursor:pointer; user-select:none;
  transition:border-color var(--duration) var(--ease), background var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  white-space:nowrap;
}
.topic-chip:hover:not(.checked) { border-color:var(--text-3); color:var(--text); }
.topic-chip i { font-size:11px; transition:color var(--duration); }
.topic-chip.tone-money i { color:var(--navy); }
.topic-chip.tone-human i { color:var(--sage); }
.topic-chip.tone-warn  i { color:var(--coral); }
.topic-chip.tone-env i,
.topic-chip.tone-process i,
.topic-chip.tone-skill i,
.topic-chip.tone-admin i,
.topic-chip.tone-perk i  { color:var(--amber-d); }
.topic-chip.checked i { color:#fff; }
.topic-chip.checked { box-shadow:0 2px 6px rgba(26,14,6,.08); }
.topic-chip.checked.tone-money { background:var(--navy); border-color:var(--navy); color:#fff; }
.topic-chip.checked.tone-human { background:var(--sage); border-color:var(--sage); color:#fff; }
.topic-chip.checked.tone-warn  { background:var(--coral); border-color:var(--coral); color:#fff; }
.topic-chip.checked.tone-env,
.topic-chip.checked.tone-process,
.topic-chip.checked.tone-skill,
.topic-chip.checked.tone-admin,
.topic-chip.checked.tone-perk { background:var(--amber-d); border-color:var(--amber-d); color:#fff; }

/* 投稿カード内のタグ表示 */
.contribution-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.contribution-tag-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px;
  border-radius:var(--r-lg);
  font-size:10.5px; font-weight:700;
  letter-spacing:.15px;
  background:var(--bg-elevated);
  color:var(--text-2);
}
.contribution-tag-chip i { font-size:9.5px; opacity:.85; }
.contribution-tag-chip.tone-money { background:rgba(27,45,91,.08); color:var(--navy); }
.contribution-tag-chip.tone-human { background:rgba(74,122,88,.1); color:var(--sage); }
.contribution-tag-chip.tone-warn  { background:rgba(232,88,58,.09); color:var(--coral); }
.contribution-tag-chip.tone-env,
.contribution-tag-chip.tone-process,
.contribution-tag-chip.tone-skill,
.contribution-tag-chip.tone-admin,
.contribution-tag-chip.tone-perk { background:rgba(232,168,56,.13); color:var(--amber-d); }

/* 投稿メタ（ビザ・滞在期間）のセレクト行 */
.meta-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:480px){ .meta-row { grid-template-columns:1fr; } }

/* ── ACCESSIBILITY & FOCUS ── */
:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
button:focus-visible, .tab-btn:focus-visible, .filter-chip:focus-visible, .view-btn:focus-visible,
.filter-btn:focus-visible, .handover-action-btn:focus-visible, .fc-btn:focus-visible {
  outline:2px solid var(--navy); outline-offset:2px; border-radius:var(--r-sm);
}
.form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible {
  outline:none; /* these use box-shadow ring instead */
}
.modal-close:focus-visible, .carousel-btn:focus-visible, .submit-modal-close:focus-visible {
  outline:2px solid #fff; outline-offset:2px;
}

/* ── SELECTION ── */
::selection { background:rgba(27,45,91,.15); color:var(--text); }

/* ── SMOOTH SCROLL ── */
html { scroll-behavior:smooth; }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

/* ── SCROLLBAR STYLING (webkit) ── */
.modal::-webkit-scrollbar, .admin-body::-webkit-scrollbar, .submit-form-body::-webkit-scrollbar {
  width:6px;
}
.modal::-webkit-scrollbar-track, .admin-body::-webkit-scrollbar-track, .submit-form-body::-webkit-scrollbar-track {
  background:transparent;
}
.modal::-webkit-scrollbar-thumb, .admin-body::-webkit-scrollbar-thumb, .submit-form-body::-webkit-scrollbar-thumb {
  background:var(--border); border-radius:3px;
}
.modal::-webkit-scrollbar-thumb:hover, .admin-body::-webkit-scrollbar-thumb:hover, .submit-form-body::-webkit-scrollbar-thumb:hover {
  background:var(--text-3);
}

/* ── PRINT ── */
@media print {
  .header, .bottom-nav, .sub-seg, .explore-toolbar, .filter-bar, .btn-cta, .btn-detail, .fav-btn, .modal-overlay, .admin-overlay, .submit-overlay { display:none!important; }
  body { background:#fff; color:#000; }
  .card { box-shadow:none; border:1px solid #ddd; break-inside:avoid; }
}

/* ══════════════════════════════════════════════════════════
   R1-R4 改善（2026-04-24）
   モーダル連絡 CTA / 投稿カード鮮度タグ / 空状態 CTA /
   同意チェック共通 / 業種カード eyebrow
   ══════════════════════════════════════════════════════════ */

/* モーダル下の LINE 連絡 CTA（住居・職場モーダル共通） */
.modal-contact-cta {
  margin:22px 0 4px; padding:18px 20px; text-align:center;
  background:var(--bg-elevated);
  border-radius:var(--r);
  border:1px solid var(--border-light);
}
.modal-contact-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 24px; background:#06C755; color:#fff;
  border-radius:var(--r-sm); font-weight:700; font-size:14px;
  text-decoration:none; transition:filter var(--duration);
  font-family:var(--font-sans);
}
.modal-contact-btn:hover { filter:brightness(1.08); }
.modal-contact-btn i { font-size:18px; }
.modal-contact-cta small {
  display:block; margin-top:10px; font-size:11px; color:var(--text-3);
  line-height:1.7;
}

/* 投稿カード内の鮮度タグ（.freshness-tag を流用しつつサイズ微調整） */
.contribution-sub .freshness-tag {
  margin-left:8px; font-size:10px; padding:2px 7px;
  vertical-align:middle;
}


/* 同意チェックブロック（引き継ぎ／知る 両投稿フォーム共通） */
.consent-check-block {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  padding:14px 16px; border:1.5px solid var(--border);
  border-radius:var(--r-sm); margin-top:14px;
  background:var(--surface);
  transition:border-color var(--duration), background var(--duration);
}
.consent-check-block input[type="checkbox"] {
  width:18px; height:18px; margin-top:2px; flex-shrink:0;
  accent-color:var(--sage); cursor:pointer;
}
.consent-check-block .consent-text {
  font-size:13px; color:var(--text-2); line-height:1.7;
}
.consent-check-block .consent-text a { color:var(--navy); text-decoration:underline; cursor:pointer; }
.consent-check-block.is-error {
  border-color:var(--coral);
  background:rgba(232,88,58,.06);
  animation:consent-shake .3s ease 1;
}
@keyframes consent-shake {
  0%,100%{ transform:translateX(0); }
  25% { transform:translateX(-4px); }
  75% { transform:translateX(4px); }
}
.consent-alert {
  margin-top:10px; padding:10px 14px;
  background:rgba(232,88,58,.08); border-left:3px solid var(--coral);
  border-radius:var(--r-sm);
  font-size:12.5px; color:var(--coral); font-weight:700;
  display:flex; align-items:center; gap:8px;
}

/* フォーム必須項目のエラー表示（赤枠＋振動アニメ） */
.form-input.is-error, .form-input.is-error:focus,
.form-select.is-error, .form-select.is-error:focus,
.form-textarea.is-error, .form-textarea.is-error:focus,
.contrib-input.is-error, .contrib-input.is-error:focus {
  border-color:var(--coral);
  background:rgba(232,88,58,.06);
  box-shadow:0 0 0 3px rgba(232,88,58,.10);
  animation:consent-shake .3s ease 1;
}
.field-error-banner {
  margin-bottom:14px; padding:10px 14px;
  background:rgba(232,88,58,.08); border-left:3px solid var(--coral);
  border-radius:var(--r-sm);
  font-size:12.5px; color:var(--coral); font-weight:700;
  display:flex; align-items:center; gap:8px;
}

/* 住まい基本知識セクションの補助説明文 */
.housing-basics-intro {
  font-size:13px; color:var(--text-2); line-height:1.7;
  margin:0 0 16px;
}

/* 「すべての声」: 業界別/住まい別の中のビュー切替トグル */
.learn-subtoggle { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.learn-subtoggle-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px;
  background:var(--surface); color:var(--text-2);
  border:1.5px solid var(--border);
  border-radius:999px;
  font:700 12px/1 var(--font-sans);
  cursor:pointer;
  transition:background var(--duration), border-color var(--duration), color var(--duration), transform var(--duration);
}
.learn-subtoggle-btn:hover { border-color:var(--coral); color:var(--coral); }
.learn-subtoggle-btn:active { transform:scale(.98); }
.learn-subtoggle-btn.active { background:var(--coral); color:#fff; border-color:var(--coral); }
.learn-subtoggle-btn i { font-size:12px; }

/* 「すべての声」フィード */
.av-heading {
  display:flex; align-items:center; gap:8px;
  font:700 15px/1.3 var(--font-display);
  color:var(--text); margin:4px 0 14px;
}
.av-heading i { color:var(--coral); font-size:15px; }
.av-heading small { font:500 11.5px/1 var(--font-sans); color:var(--text-3); letter-spacing:.3px; margin-left:auto; }
.av-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.av-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  font:600 12px/1 var(--font-sans);
  color:var(--text-2);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.av-chip:hover { border-color:var(--coral); color:var(--coral); }
.av-chip.active { background:var(--coral); color:#fff; border-color:var(--coral); }
.av-chip.active .av-chip-count { color:#fff; }
.av-chip-count { font-weight:700; color:var(--text-3); font-size:11px; }
.av-feed { display:flex; flex-direction:column; gap:14px; }
.av-chip-area { background:var(--navy); color:#fff; border-color:var(--navy); }
.av-chip-area:hover { color:#fff; border-color:var(--navy); filter:brightness(1.08); }

/* 住まいマップ (#87) */
.hm-map-frame { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); }
.hm-map { height:360px; width:100%; background:var(--bg-elevated); }
.hm-actions { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 4px; }
.hm-note { font:500 11.5px/1.6 var(--font-sans); color:var(--text-3); margin:6px 0 0; }
.hm-legend { display:flex; flex-wrap:wrap; gap:4px 12px; margin:0 0 8px; font:500 11.5px/1.4 var(--font-sans); color:var(--text-2); }
.hm-legend i, .hm-popup-mix i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:0; }
/* ピン：件数の丸＋住まい方のリング＋エリア名 */
.hm-ring-wrap { background:none; border:0; }
.hm-ring { border-radius:50%; padding:5px; box-shadow:var(--sh-md); transition:transform var(--duration) var(--ease); }
.hm-ring span {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; border-radius:50%;
  background:var(--surface); color:var(--text);
  font:800 13px/1 var(--font-sans); font-variant-numeric:tabular-nums;
}
/* エリア名は白い札に入れる（地図の地名や道と混ざらないように） */
.hm-ring-name {
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:4px;
  white-space:nowrap; pointer-events:none;
  padding:2px 7px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-sm);
  font:700 11.5px/1.3 var(--font-sans); color:var(--text);
}
.hm-far .hm-ring-name { display:none; }
.hm-ring-wrap.is-on .hm-ring { transform:scale(1.14); }
@media (prefers-reduced-motion: reduce){ .hm-ring { transition:none; } }
.hm-popup-mix { display:flex; flex-wrap:wrap; gap:2px 8px; font-size:11.5px; color:var(--text-2); margin:3px 0 2px; }
.hm-popup-count { font-size:12px; color:var(--text-2); }
.hm-popup-count i { color:var(--coral); margin-right:3px; }
.hm-popup-rent { font-size:12px; color:var(--text-2); margin-top:2px; }
.hm-popup-rent strong { color:var(--text); }

/* 業種カード カテゴリ eyebrow（右上の小ラベル） */
.industry-eyebrow {
  font-family:var(--font-sans);
  font-size:9.5px; font-weight:800;
  letter-spacing:1.6px; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:7px;
  color:var(--text-3);
  margin-bottom:7px;
}
.industry-eyebrow::before {
  content:''; width:14px; height:1.5px; background:currentColor; opacity:.55;
}
.industry-card.tone-food      .industry-eyebrow { color:var(--coral); }
.industry-card.tone-clean     .industry-eyebrow { color:var(--sage); }
.industry-card.tone-logistics .industry-eyebrow { color:var(--amber-d); }
.industry-card.tone-life      .industry-eyebrow { color:var(--navy); }
.industry-card.tone-other     .industry-eyebrow { color:var(--text-3); }
@media(max-width:480px){
  .industry-eyebrow { font-size:9px; letter-spacing:1.3px; }
  .industry-eyebrow::before { width:10px; }
}

/* ══════════════════════════════════════════════════════════
   MY ACCOUNT (drawer) — Phase 1 v1
   ヘッダー右上のアバターから開く右スライドドロワー。
   投稿履歴・お気に入りを集約。プロフィール編集と認証は v2 以降。
   ══════════════════════════════════════════════════════════ */

/* Header avatar button */
.header-avatar-btn {
  background:none; border:none; padding:0; cursor:pointer;
  display:flex; align-items:center; margin-right:8px;
}
.header-avatar-img {
  width:34px; height:34px; min-width:34px; flex:0 0 34px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--coral),var(--amber));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:13px;
  font-family:var(--font-display);
  overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.08);
  transition:transform var(--duration);
}
.header-avatar-btn:hover .header-avatar-img { transform:scale(1.05); }
.header-avatar-img img { width:34px; height:34px; object-fit:cover; display:block; border-radius:50%; }

/* Drawer base */
.account-drawer {
  position:fixed; inset:0; z-index:1100;
  pointer-events:none;
}
.account-drawer.show { pointer-events:auto; }
.account-drawer-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s ease;
}
.account-drawer.show .account-drawer-overlay { opacity:1; }

/* Drawer panel (slides from right) */
.account-drawer-panel {
  position:absolute; top:0; right:0; bottom:0;
  width:min(380px, 100%);
  background:var(--bg);
  transform:translateX(100%);
  transition:transform .25s ease;
  display:flex; flex-direction:column;
  box-shadow:-8px 0 24px rgba(0,0,0,.12);
}
.account-drawer.show .account-drawer-panel { transform:translateX(0); }

.account-drawer-head {
  padding:20px 18px;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; gap:12px;
}
.account-avatar-large {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--coral),var(--amber));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:18px;
  font-family:var(--font-display);
  flex-shrink:0; overflow:hidden;
}
.account-avatar-large img { width:48px; height:48px; object-fit:cover; display:block; border-radius:50%; }
.account-name { flex:1; min-width:0; }
.account-name-main { font-weight:800; font-size:15px; color:#fff; }
.account-name-sub { font-size:11px; color:rgba(255,255,255,.7); margin-top:2px; }
.account-drawer-close {
  background:none; border:none;
  color:rgba(255,255,255,.7); font-size:22px; cursor:pointer;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  transition:color var(--duration);
}
.account-drawer-close:hover { color:#fff; }

.account-drawer-body { flex:1; overflow-y:auto; padding:18px; }
.account-section + .account-section { margin-top:24px; }
.account-section-title {
  font-size:13px; font-weight:700; color:var(--text);
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.account-section-title i { color:var(--coral); }

/* Favorites list */
.account-fav-empty {
  font-size:12px; color:var(--text-3);
  padding:12px 14px; background:var(--bg-elevated);
  border-radius:var(--r-sm); line-height:1.6;
}
.account-fav-group + .account-fav-group { margin-top:14px; }
.account-fav-group-title {
  font-size:12px; font-weight:700; color:var(--text-2);
  margin-bottom:6px;
}
.account-fav-item {
  padding:10px 12px; background:var(--surface);
  border-radius:var(--r-sm);
  margin-bottom:6px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  cursor:pointer;
  transition:background var(--duration);
}
.account-fav-item:hover { background:var(--bg-elevated); }
.account-fav-item-title {
  font-size:13px; font-weight:600; color:var(--text);
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.account-fav-item-title i { margin-right:6px; color:var(--text-3); }
.account-fav-item-meta {
  font-size:11px; color:var(--text-3);
  flex-shrink:0;
}

/* ═══════════════ 知る タブ: 「みんなの声」質問軸タブ ═══════════════ */
.qa-voices { margin: 24px 0; }
.qa-tabs-wrap {
  margin: 12px -4px 16px;
  position: relative;
}
.qa-tabs {
  display: flex;
  gap: 8px;
  padding: 4px 12px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: var(--rule-light);
}
.qa-tabs::-webkit-scrollbar { display: none; }
.qa-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.qa-tab i { font-size: 12px; }
.qa-tab:hover { border-color: var(--coral); color: var(--coral); }
.qa-tab.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.qa-tab.active:hover { color: #fff; }
.qa-tab-count {
  background: rgba(0,0,0,0.06);
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.qa-tab.active .qa-tab-count {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

.qa-panel { display: none; }
.qa-panel.active { display: block; }

.qa-bubble-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qa-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  position: relative;
  box-shadow: var(--sh-sm);
}
.qa-bubble:hover { border-color: var(--coral); box-shadow: var(--sh); }
.qa-bubble-hidden { display: none !important; }

.qa-bubble-quote {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
}
.qa-bubble-quote::before {
  content: '"';
  position: absolute;
  left: -2px;
  top: -10px;
  font: 700 38px/1 var(--font-serif);
  color: var(--coral);
  opacity: 0.35;
}
.qa-bubble-preview {
  font: 14px/1.65 var(--font-sans);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.qa-bubble-full,
.qa-other-answers { display: none; }
.qa-bubble.expanded .qa-bubble-preview { display: none; }
.qa-bubble.expanded .qa-bubble-full {
  display: block;
  font: 14px/1.7 var(--font-sans);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.qa-bubble.expanded .qa-other-answers {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: var(--rule-dashed);
}
.qa-other-heading {
  font: 700 10.5px/1 var(--font-sans);
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.qa-other-answer { margin-bottom: 10px; }
.qa-other-answer:last-child { margin-bottom: 0; }
.qa-other-label {
  font: 600 11.5px/1.2 var(--font-sans);
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.qa-other-label i { color: var(--text-3); font-size: 11px; }
.qa-other-body {
  font: 13px/1.65 var(--font-sans);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.qa-bubble-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: var(--rule-light);
}
.qa-bubble-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 700 13px/1 var(--font-sans);
  flex-shrink: 0;
}
.qa-bubble-author-meta { flex: 1; min-width: 0; }
.qa-bubble-name {
  font: 600 13px/1.3 var(--font-sans);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.qa-bubble-sub {
  font: 11px/1.4 var(--font-sans);
  color: var(--text-3);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.qa-bubble-creds {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 5px;
}
.qa-bubble-toggle-icon {
  color: var(--text-3);
  font-size: 12px;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.qa-bubble.expanded .qa-bubble-toggle-icon { transform: rotate(180deg); }

.qa-show-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  color: var(--text-2);
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.qa-show-more i { margin-right: 6px; font-size: 11px; }
.qa-show-more:hover {
  background: var(--surface);
  border-color: var(--coral);
  color: var(--coral);
}

.qa-empty {
  font: 13px/1.6 var(--font-sans);
  color: var(--text-3);
  padding: 18px 0;
  text-align: center;
}

/* ─── 絞り込みフィルター ─── */
.qa-filter { margin: 8px 0 14px; }
.qa-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 600 12.5px/1 var(--font-sans);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.qa-filter-toggle i { font-size: 12px; }
.qa-filter-toggle:hover { border-color: var(--coral); color: var(--coral); }
.qa-filter-chev { transition: transform .2s ease; }
.qa-voices.qa-filter-open .qa-filter-chev { transform: rotate(180deg); }
.qa-filter-active-count {
  background: var(--coral);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.qa-filter-panel {
  display: none;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border-radius: var(--r);
  border: 1px solid var(--border);
}
.qa-voices.qa-filter-open .qa-filter-panel { display: block; }
.qa-filter-group { margin-bottom: 12px; }
.qa-filter-group:last-child { margin-bottom: 0; }
.qa-filter-label {
  font: 700 10.5px/1 var(--font-sans);
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.qa-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qa-filter-chip {
  padding: 6px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 600 12px/1 var(--font-sans);
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.qa-filter-chip:hover { border-color: var(--coral); color: var(--coral); }
.qa-filter-chip.active {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

/* フィルター適用時の bubble 表示制御 */
.qa-bubble-filtered-out { display: none !important; }
.qa-voices[data-qa-filter-active="1"] .qa-bubble-hidden:not(.qa-bubble-filtered-out) { display: block; }
.qa-voices[data-qa-filter-active="1"] .qa-show-more { display: none; }

.qa-no-match {
  font: 13px/1.6 var(--font-sans);
  color: var(--text-3);
  text-align: center;
  padding: 22px 12px;
  margin: 0;
  background: var(--bg-elevated);
  border-radius: var(--r);
  border: 1px dashed var(--border);
}

@media (max-width: 480px) {
  .qa-bubble { padding: 12px 14px 10px; }
  .qa-bubble-quote { padding-left: 22px; }
  .qa-bubble-quote::before { font-size: 32px; top: -8px; }
  .qa-bubble-preview, .qa-bubble.expanded .qa-bubble-full { font-size: 13.5px; }
  .qa-filter-toggle { padding: 7px 12px; font-size: 12px; }
  .qa-filter-chip { padding: 5px 10px; font-size: 11.5px; }
}

/* マイ投稿カードの編集ボタン（承認待ちのみ表示） */
.my-submission-edit-btn{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:4px;
  background:transparent;border:1px solid var(--coral);
  color:var(--coral);
  border-radius:var(--r-sm);
  padding:6px 10px;
  font-size:12px;font-weight:600;
  cursor:pointer;
  min-height:32px;
}
.my-submission-edit-btn:hover,.my-submission-edit-btn:active{
  background:var(--coral);color:#fff;
}
.my-submission-edit-btn i{font-size:11px}

/* 投稿フォームが「編集モード」のときヘッダーに出す小バッジ */
.submit-modal-edit-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--amber);color:#fff;
  border-radius:999px;
  padding:3px 10px;
  font-size:11px;font-weight:600;
  margin-left:8px;
}
.submit-modal-edit-badge i{font-size:10px}

/* ═══════════════ 渡航準備 タブ ═══════════════ */
.tab-title-strip.tts-predeparture h2   { border-left-color:var(--sage); }
.tab-title-strip.tts-predeparture h2 i { color:var(--sage); }

.predeparture-content { max-width:1200px; margin:0 auto; padding:16px var(--page-pad) 112px; }
.predeparture-topbar {
  display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
  background:var(--surface); border-radius:var(--r); padding:18px 20px;
  box-shadow:var(--sh-sm); margin-bottom:18px;
}
.predeparture-intro {
  flex:1 1 280px; min-width:240px; margin:0;
  font-size:13.5px; line-height:1.7; color:var(--text-2);
}
.predeparture-topbar .contribute-btn-small { flex-shrink:0; }

/* タブ内アクション群（contribute + 渡航前リンク） */
.contribute-btn-alt {
  background:var(--bg-elevated)!important;
  color:var(--sage)!important;
  border:1px dashed var(--sage)!important;
}
.contribute-btn-alt:hover { background:rgba(74,122,88,.06)!important; }

/* 探すタブの「または渡航前の準備…」サブCTA */
.explore-cta-alt {
  display:flex; align-items:center; gap:10px; width:100%;
  background:var(--bg-elevated); border:1px dashed var(--sage); color:var(--sage);
  padding:11px 16px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:13px; font-weight:700;
  cursor:pointer; margin-top:8px;
  transition:background var(--duration) var(--ease);
}
.explore-cta-alt span { flex:1; text-align:left; }
.explore-cta-alt:hover { background:rgba(74,122,88,.06); }
.explore-cta-alt:focus-visible { outline:2px solid var(--sage); outline-offset:2px; }

/* カテゴリーカードグリッド */
.predeparture-grid {
  display:grid; gap:12px;
  grid-template-columns:repeat(2,1fr);
  margin-bottom:18px;
}
@media(min-width:760px){ .predeparture-grid { grid-template-columns:repeat(3,1fr); gap:16px; } }

.pred-cat-card {
  position:relative;
  background:var(--surface); border-radius:var(--r);
  border:1px solid var(--border-light); border-top:4px solid var(--border-light);
  padding:18px 14px 14px; box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; text-align:center;
  font-family:inherit;
  transition:transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
  min-height:148px;
}
.pred-cat-card:hover { transform:translateY(-2px); box-shadow:var(--sh); }
.pred-cat-card:focus-visible { outline:2px solid var(--sage); outline-offset:2px; }
.pred-cat-card.tone-admin   { border-top-color:#5B6BC8; }
.pred-cat-card.tone-money   { border-top-color:var(--sage); }
.pred-cat-card.tone-human   { border-top-color:var(--coral); }
.pred-cat-card.tone-process { border-top-color:var(--amber-d); }
.pred-cat-card.tone-perk    { border-top-color:#7A8C5B; }
.pred-cat-card.tone-skill   { border-top-color:var(--navy); }

.pred-cat-icon {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated);
  margin-bottom:4px;
}
.pred-cat-icon i { font-size:20px; color:var(--text-2); }
.pred-cat-card.tone-admin   .pred-cat-icon { background:rgba(91,107,200,.12); }
.pred-cat-card.tone-admin   .pred-cat-icon i { color:#5B6BC8; }
.pred-cat-card.tone-money   .pred-cat-icon { background:rgba(74,122,88,.12); }
.pred-cat-card.tone-money   .pred-cat-icon i { color:var(--sage); }
.pred-cat-card.tone-human   .pred-cat-icon { background:rgba(214,99,82,.12); }
.pred-cat-card.tone-human   .pred-cat-icon i { color:var(--coral); }
.pred-cat-card.tone-process .pred-cat-icon { background:rgba(232,168,56,.16); }
.pred-cat-card.tone-process .pred-cat-icon i { color:var(--amber-d); }
.pred-cat-card.tone-perk    .pred-cat-icon { background:rgba(122,140,91,.14); }
.pred-cat-card.tone-perk    .pred-cat-icon i { color:#7A8C5B; }
.pred-cat-card.tone-skill   .pred-cat-icon { background:rgba(27,45,91,.10); }
.pred-cat-card.tone-skill   .pred-cat-icon i { color:var(--navy); }

.pred-cat-name {
  font-family:var(--font-sans); font-size:14px; font-weight:800;
  color:var(--text); letter-spacing:.3px;
}
.pred-cat-tagline {
  font-size:11.5px; line-height:1.55; color:var(--text-3);
  margin:0;
}
.pred-cat-count {
  margin-top:auto; padding-top:8px;
  font-size:11px; font-weight:800; color:var(--text-2); letter-spacing:.4px;
}
.pred-cat-new {
  position:absolute; top:8px; right:8px;
  background:var(--coral); color:#fff;
  font-size:9.5px; font-weight:800; letter-spacing:.6px;
  padding:2px 7px; border-radius:999px;
}

/* カテゴリ詳細画面 */
.predeparture-cat-detail { display:none; }
.predeparture-cat-detail.show { display:block; }

.pred-cat-detail-back {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:none; padding:6px 0; margin-bottom:10px;
  color:var(--text-2); font-family:var(--font-sans); font-size:12.5px; font-weight:700;
  cursor:pointer; transition:color var(--duration) var(--ease);
}
.pred-cat-detail-back:hover { color:var(--navy); }
.pred-cat-detail-back i { font-size:11px; }

.pred-cat-detail-head {
  background:var(--surface); border-radius:var(--r);
  padding:18px 20px; box-shadow:var(--sh-sm);
  margin-bottom:14px;
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
}
.pred-cat-detail-title { display:inline-flex; align-items:center; gap:10px; }
.pred-cat-detail-title h3 { margin:0; font-family:var(--font-sans); font-size:17px; color:var(--text); }
.pred-cat-detail-title i { font-size:18px; color:var(--text-2); }
.pred-cat-detail-title.tone-admin   i { color:#5B6BC8; }
.pred-cat-detail-title.tone-money   i { color:var(--sage); }
.pred-cat-detail-title.tone-human   i { color:var(--coral); }
.pred-cat-detail-title.tone-process i { color:var(--amber-d); }
.pred-cat-detail-title.tone-perk    i { color:#7A8C5B; }
.pred-cat-detail-title.tone-skill   i { color:var(--navy); }
.pred-cat-detail-tagline {
  margin:0; font-size:13px; color:var(--text-2); line-height:1.6;
}

.pred-cat-detail-list {
  display:grid; gap:14px;
  grid-template-columns:1fr;
}
@media(min-width:760px){ .pred-cat-detail-list { grid-template-columns:1fr 1fr; } }

/* 投稿カード */
.pred-card {
  background:var(--surface); border-radius:var(--r); padding:18px 20px;
  box-shadow:var(--sh-sm); border-left:4px solid var(--border-light);
  display:flex; flex-direction:column; gap:10px;
}
.pred-card.pred-card-tone-admin   { border-left-color:#5B6BC8; }
.pred-card.pred-card-tone-money   { border-left-color:var(--sage); }
.pred-card.pred-card-tone-human   { border-left-color:var(--coral); }
.pred-card.pred-card-tone-process { border-left-color:var(--amber-d); }
.pred-card.pred-card-tone-perk    { border-left-color:#7A8C5B; }
.pred-card.pred-card-tone-skill   { border-left-color:var(--navy); }
.pred-card-pending { background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 14px,var(--bg-elevated) 14px,var(--bg-elevated) 28px); }

.pred-card-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pred-card-cat {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-sans); font-size:12.5px; font-weight:800; color:var(--text);
  letter-spacing:.3px;
}
.pred-card-cat i { color:var(--sage); font-size:12px; }
.pred-card-tone-admin   .pred-card-cat i { color:#5B6BC8; }
.pred-card-tone-money   .pred-card-cat i { color:var(--sage); }
.pred-card-tone-human   .pred-card-cat i { color:var(--coral); }
.pred-card-tone-process .pred-card-cat i { color:var(--amber-d); }
.pred-card-tone-perk    .pred-card-cat i { color:#7A8C5B; }
.pred-card-tone-skill   .pred-card-cat i { color:var(--navy); }

.pred-card-fresh {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.2px;
}
.pred-card-fresh.fresh-fresh { background:rgba(74,122,88,.10); color:var(--sage); }
.pred-card-fresh.fresh-stale { background:rgba(232,168,56,.14);color:var(--amber-d); }
.pred-card-fresh.fresh-old   { background:rgba(214,99,82,.12); color:var(--coral); }
.pred-card-fresh i { font-size:9.5px; }

.pred-card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pred-card-nick { font-size:13px; font-weight:700; color:var(--text); }

.pred-card-pills { display:flex; flex-wrap:wrap; gap:6px; }
.pred-card-pills .cred-pill {
  background:var(--bg-elevated); color:var(--text-2); border-color:var(--border-light);
}
.pred-card-pills .cred-pill-phase {
  background:rgba(27,45,91,.08); color:var(--navy); border-color:rgba(27,45,91,.18);
}

.pred-card-body { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.pred-field {
  background:var(--bg-elevated); border-radius:var(--r-sm);
  padding:10px 12px;
}
.pred-field-label {
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; color:var(--text-2); letter-spacing:.3px;
  margin-bottom:5px;
}
.pred-field-label i { font-size:10.5px; color:var(--sage); }
.pred-field-body {
  font-size:13px; line-height:1.7; color:var(--text);
  white-space:pre-wrap; word-break:break-word;
}

/* 空状態 */
.predeparture-empty {
  background:var(--surface); border-radius:var(--r);
  padding:32px 24px; text-align:center;
  box-shadow:var(--sh-sm);
}
.predeparture-empty i { font-size:32px; color:var(--text-3); margin-bottom:12px; display:block; }
.predeparture-empty h3 { font-family:var(--font-sans); font-size:15px; margin:0 0 6px; color:var(--text); }
.predeparture-empty p { font-size:13px; color:var(--text-2); margin:0 0 14px; }

/* ═══════════════ 渡航前 投稿フォーム ═══════════════ */
.pred-form-section { margin-bottom:22px; }
.pred-form-section:last-child { margin-bottom:0; }
.pred-form-label {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-sans); font-size:13.5px; font-weight:800; color:var(--text);
  margin-bottom:6px;
}
.pred-form-label i { color:var(--sage); font-size:13px; }
.pred-form-hint { font-size:12px; color:var(--text-3); line-height:1.6; margin:0 0 10px; }
.pred-form-required {
  display:inline-block; padding:1px 7px; border-radius:999px;
  background:rgba(214,99,82,.12); color:var(--coral);
  font-size:10px; font-weight:800; letter-spacing:.3px;
}
.pred-form-recommended {
  display:inline-block; padding:1px 7px; border-radius:999px;
  background:rgba(232,168,56,.14); color:var(--amber-d);
  font-size:10px; font-weight:800; letter-spacing:.3px;
}

.pred-form-cat-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:8px; margin-bottom:6px;
}
.pred-form-cat-chip {
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  background:var(--bg-elevated); border:1px solid var(--border-light);
  border-radius:var(--r-sm); padding:10px 12px;
  text-align:left; cursor:pointer;
  font-family:var(--font-sans);
  transition:all var(--duration) var(--ease);
}
.pred-form-cat-chip:hover { background:var(--bg); border-color:var(--border); }
.pred-form-cat-chip.active { background:rgba(74,122,88,.10); border-color:var(--sage); }
.pred-form-cat-chip.active.pred-chip-tone-admin   { background:rgba(91,107,200,.10); border-color:#5B6BC8; }
.pred-form-cat-chip.active.pred-chip-tone-money   { background:rgba(74,122,88,.10);  border-color:var(--sage); }
.pred-form-cat-chip.active.pred-chip-tone-human   { background:rgba(214,99,82,.10);  border-color:var(--coral); }
.pred-form-cat-chip.active.pred-chip-tone-process { background:rgba(232,168,56,.14); border-color:var(--amber-d); }
.pred-form-cat-chip.active.pred-chip-tone-perk    { background:rgba(122,140,91,.10); border-color:#7A8C5B; }
.pred-form-cat-chip.active.pred-chip-tone-skill   { background:rgba(27,45,91,.08);   border-color:var(--navy); }
.pred-form-cat-chip i { color:var(--sage); font-size:13px; }
.pred-form-cat-label { font-size:13px; font-weight:800; color:var(--text); }
.pred-form-cat-tag   { font-size:11px; font-weight:500; color:var(--text-3); line-height:1.5; }
.pred-form-cat-hint {
  margin-top:8px; padding:8px 12px; border-radius:var(--r-sm);
  background:rgba(74,122,88,.08); color:var(--sage);
  font-size:12px; font-weight:600;
}
.pred-form-cat-hint span { color:var(--text-2); font-weight:500; }

.pred-form-row {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;
}
@media(max-width:480px){ .pred-form-row { grid-template-columns:1fr; } }
.pred-form-field { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.pred-form-sublabel {
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--text-2);
}
.pred-form-sublabel i { color:var(--sage); font-size:11px; }
.pred-form-input {
  width:100%; padding:9px 12px;
  background:var(--bg-elevated); border:1px solid var(--border-light); border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:13.5px; color:var(--text);
  transition:border-color var(--duration) var(--ease);
}
.pred-form-input:focus { outline:none; border-color:var(--sage); }
.pred-form-textarea { resize:vertical; min-height:78px; line-height:1.6; }

.pred-form-phase-row { display:flex; flex-wrap:wrap; gap:6px; }
.pred-form-phase-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 14px; border-radius:999px;
  background:var(--bg-elevated); border:1px solid var(--border-light);
  font-family:var(--font-sans); font-size:12px; font-weight:700; color:var(--text-2);
  cursor:pointer; transition:all var(--duration) var(--ease);
}
.pred-form-phase-chip:hover { background:var(--bg); }
.pred-form-phase-chip.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.pred-form-phase-chip i { font-size:11px; }

.pred-form-consent { background:var(--bg-elevated); border-radius:var(--r-sm); padding:12px 14px; }
.pred-form-consent-row {
  display:flex; align-items:flex-start; gap:8px; cursor:pointer;
  font-size:12.5px; line-height:1.6; color:var(--text-2);
}
.pred-form-consent-row input[type="checkbox"] { margin-top:3px; flex-shrink:0; }

/* ═══════════════ Stage 2A: Auth UI ═══════════════ */

/* ヘッダーのサインインボタン */
.header-signin-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:#06C755; color:#fff; border:none;
  padding:8px 14px; border-radius:999px;
  font-family:var(--font-sans); font-size:12px; font-weight:700;
  cursor:pointer; margin-right:8px;
  transition:filter var(--duration) var(--ease);
}
.header-signin-btn:hover { filter:brightness(1.08); }
.header-signin-btn:focus-visible { outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
@media(max-width:480px){
  .header-signin-btn { padding:7px 11px; font-size:11.5px; }
  .header-signin-btn i:not(:only-child) { display:none; }
}

/* タブタイトル: ラウンジ */
.tab-title-strip.tts-lounge h2   { border-left-color:#06C755; }
.tab-title-strip.tts-lounge h2 i { color:#06C755; }

/* ラウンジ本体 */
.lounge-content { max-width:1200px; margin:0 auto; padding:16px var(--page-pad) 80px; }
.lounge-locked, .lounge-unlocked-placeholder {
  background:var(--surface); border-radius:var(--r);
  padding:32px 28px; box-shadow:var(--sh-sm);
  text-align:center; max-width:560px; margin:24px auto;
}
.lounge-locked h3, .lounge-unlocked-placeholder h3 {
  font-family:var(--font-sans); font-size:18px; margin:0 0 10px; color:var(--text);
}
.lounge-locked p, .lounge-unlocked-placeholder p {
  font-size:13.5px; line-height:1.7; color:var(--text-2); margin:0 0 14px;
}
.lounge-locked-icon {
  width:64px; height:64px; margin:0 auto 16px;
  border-radius:50%; background:rgba(6,199,85,.10);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; color:#06C755;
}
.lounge-locked-step {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; margin:6px 0;
  background:var(--bg-elevated); border-radius:var(--r-sm);
  text-align:left; font-size:13px; color:var(--text-2);
}
.lounge-step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--navy); color:#fff;
  font-family:var(--font-sans); font-size:12px; font-weight:800;
  flex-shrink:0;
}
.lounge-locked-progress { background:linear-gradient(180deg,var(--surface),var(--bg-elevated)); }
.lounge-pending-note {
  margin:10px 0!important; padding:10px 14px; border-radius:var(--r-sm);
  background:rgba(232,168,56,.12); color:var(--amber-d);
  font-size:12.5px; font-weight:600;
}
.lounge-cta-row {
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin-top:14px;
}
.lounge-cta-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; border-radius:999px;
  background:var(--navy); color:#fff; border:none;
  font-family:var(--font-sans); font-size:13px; font-weight:700;
  cursor:pointer; transition:filter var(--duration) var(--ease);
}
.lounge-cta-btn:hover { filter:brightness(1.1); }

/* サインインモーダル */
.signin-overlay {
  position:fixed; inset:0; z-index:1300;
  background:rgba(0,0,0,.5);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.signin-overlay.show { display:flex; }
.signin-modal {
  position:relative;
  background:var(--surface); border-radius:var(--r);
  padding:32px 28px 24px; max-width:420px; width:100%;
  box-shadow:0 12px 48px rgba(0,0,0,.18);
  max-height:90vh; overflow-y:auto;
}
.signin-close {
  position:absolute; top:12px; right:14px;
  background:none; border:none; font-size:24px; color:var(--text-3);
  cursor:pointer; line-height:1; padding:4px 8px;
}
.signin-close:hover { color:var(--text); }
.signin-header { text-align:center; margin-bottom:18px; }
.signin-icon { font-size:36px; color:#06C755; margin-bottom:10px; }
.signin-header h2 {
  font-family:var(--font-sans); font-size:18px; font-weight:800;
  margin:0 0 6px; color:var(--text);
}
.signin-lead { font-size:13px; color:var(--text-2); line-height:1.6; margin:0; }
.signin-benefits { margin:18px 0; display:flex; flex-direction:column; gap:10px; }
.signin-benefit {
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 12px; background:var(--bg-elevated); border-radius:var(--r-sm);
}
.signin-benefit i {
  font-size:18px; color:#06C755; flex-shrink:0;
  margin-top:2px; width:22px; text-align:center;
}
.signin-benefit div { display:flex; flex-direction:column; gap:2px; }
.signin-benefit strong {
  font-family:var(--font-sans); font-size:13px; font-weight:800; color:var(--text);
}
.signin-benefit span { font-size:11.5px; color:var(--text-3); line-height:1.5; }

.signin-line-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:14px 18px;
  background:#06C755; color:#fff; border:none;
  border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:15px; font-weight:800;
  cursor:pointer;
  transition:filter var(--duration) var(--ease);
}
.signin-line-btn:hover { filter:brightness(1.08); }
.signin-line-btn:disabled { opacity:.6; cursor:not-allowed; }
.signin-line-btn i { font-size:18px; }
.signin-line-btn-compact { padding:11px 16px; font-size:13.5px; }
.signin-privacy {
  font-size:11px; color:var(--text-3); line-height:1.6;
  margin:12px 0 0; text-align:center;
}

/* アカウントドロワーの auth セクション */
#accountAuthSection { background:var(--bg-elevated); border-radius:var(--r-sm); padding:14px 16px; }
.account-auth-guest p { font-size:13px; color:var(--text-2); line-height:1.7; margin:0 0 12px; }
.account-auth-signedin { display:flex; flex-direction:column; gap:10px; }
.account-auth-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.account-auth-name { font-family:var(--font-sans); font-size:14px; font-weight:800; color:var(--text); }
.auth-lock-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.2px;
}
.auth-lock-badge.unlocked { background:rgba(74,122,88,.12); color:var(--sage); }
.auth-lock-badge.locked { background:rgba(232,168,56,.14); color:var(--amber-d); }
.account-auth-progress {
  font-size:12.5px; color:var(--text-2); line-height:1.6;
}
.account-auth-progress strong { color:var(--text); font-weight:800; }
.account-signout-btn {
  align-self:flex-start;
  background:transparent; color:var(--text-3); border:1px solid var(--border-light);
  padding:7px 14px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:12px; font-weight:600;
  cursor:pointer; transition:all var(--duration) var(--ease);
}
.account-signout-btn:hover { color:var(--coral); border-color:var(--coral); }

/* 通知（Web Push）トグル */
.account-push-block {
  border:1px solid var(--border-light); border-radius:var(--r-sm);
  padding:11px 12px; display:flex; flex-direction:column; gap:7px;
  background:var(--bg-elevated);
}
.account-push-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.account-push-label { font-family:var(--font-sans); font-size:13px; font-weight:800; color:var(--text); display:inline-flex; align-items:center; gap:6px; }
.account-push-state { font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; }
.account-push-state.off { background:rgba(232,88,58,.12); color:var(--coral); }
.account-push-hint { font-size:11.5px; color:var(--text-2); line-height:1.6; }
.account-push-hint strong { color:var(--text); font-weight:800; }
.account-push-btn {
  background:var(--navy); color:#fff; border:none;
  padding:7px 14px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:12px; font-weight:700;
  cursor:pointer; transition:all var(--duration) var(--ease);
  display:inline-flex; align-items:center; gap:6px;
}
.account-push-btn:hover { background:var(--navy-light); }
.account-push-btn:disabled { opacity:.6; cursor:default; }
.account-push-btn.on { background:rgba(74,122,88,.14); color:var(--sage); }
.account-push-btn.on:hover { background:rgba(74,122,88,.22); }

/* ═══════════════ Stage 2B-Closed: タブのロック画面 ═══════════════ */
/* ロック中はセクションの実コンテンツを隠し、ロック画面だけ表示 */
.section.tab-locked > *:not(.tab-lock-screen){ display:none !important; }
.section:not(.tab-locked) > .tab-lock-screen{ display:none; }
.tab-lock-screen{ display:block; }
.tab-lock-inner{
  max-width:480px; margin:60px auto; padding:40px 28px;
  background:var(--surface); border-radius:var(--r); box-shadow:var(--sh-sm);
  text-align:center;
}
.tab-lock-icon{
  width:64px; height:64px; margin:0 auto 16px;
  border-radius:50%; background:var(--bg-elevated);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:var(--text-3);
}
.tab-lock-title{
  font-family:var(--font-sans); font-size:18px; font-weight:800; color:var(--text);
  margin:0 0 10px;
}
.tab-lock-msg{ font-size:13.5px; line-height:1.7; color:var(--text-2); margin:0 0 18px; }
.tab-lock-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:#06C755; color:#fff; border:none;
  padding:13px 22px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:14px; font-weight:800;
  cursor:pointer; transition:filter var(--duration) var(--ease);
}
.tab-lock-btn:hover{ filter:brightness(1.08); }
.tab-lock-btn i{ font-size:17px; }
/* 審査中に自己紹介を編集する二次ボタン（LINE色ではなくネイビーの枠線） */
.tab-lock-btn-edit{
  margin-top:12px; background:var(--surface); color:var(--navy);
  border:1.5px solid var(--navy); font-weight:700;
}
.tab-lock-btn-edit i{ font-size:14px; }
.tab-lock-note{
  font-size:12.5px; line-height:1.7; color:var(--text-2);
  background:var(--bg-elevated); border-radius:var(--r-sm);
  padding:12px 16px; text-align:left;
}
.tab-lock-note i{ color:var(--amber-d); margin-right:6px; }
/* ロック画面: このタブで何ができるかの箇条書き */
.tab-lock-feats{
  list-style:none; margin:0 0 18px; padding:14px 16px;
  background:var(--bg-elevated); border-radius:var(--r-sm); text-align:left;
}
.tab-lock-feats li{
  display:flex; align-items:flex-start; gap:9px;
  font-size:13px; line-height:1.55; color:var(--text-2);
}
.tab-lock-feats li + li{ margin-top:9px; }
.tab-lock-feats li i{ color:var(--sage); font-size:12px; margin-top:3px; flex-shrink:0; }

/* チラ見せ: 1件目を途中までだけ見せて下端をフェードで途切れさせる */
.peek-fade{
  position:relative; max-height:150px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
          mask-image:linear-gradient(180deg,#000 55%,transparent);
}

/* チラ見せ末尾のインラインロックカード（知る/渡航前/ゆずる） */
.peek-lock{
  margin:16px 0; padding:24px 20px;
  background:linear-gradient(180deg, rgba(27,45,91,.04), var(--bg-elevated));
  border:1px dashed var(--border); border-radius:var(--r);
  text-align:center;
}
.peek-lock-icon{
  width:44px; height:44px; margin:0 auto 10px;
  border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--text-3); box-shadow:var(--sh-sm);
}
.peek-lock-title{ font-family:var(--font-sans); font-size:15px; font-weight:800; color:var(--text); margin-bottom:5px; }
.peek-lock-msg{ font-size:12.5px; line-height:1.7; color:var(--text-2); margin-bottom:14px; }
.peek-lock-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:#06C755; color:#fff; border:none;
  padding:11px 20px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:13.5px; font-weight:800; cursor:pointer;
  transition:filter var(--duration) var(--ease);
}
.peek-lock-btn:hover{ filter:brightness(1.08); }
.peek-lock-btn i{ font-size:16px; }
.peek-lock-note{
  font-size:12px; line-height:1.7; color:var(--text-2);
  background:var(--surface); border-radius:var(--r-sm); padding:10px 14px;
  display:inline-block; text-align:left;
}
.peek-lock-note i{ color:var(--amber-d); margin-right:5px; }

/* ═══════════════ Stage 2B-2: 参加申請モーダル ═══════════════ */
.app-overlay{
  position:fixed; inset:0; z-index:1500;
  background:rgba(0,0,0,.55);
  display:none; align-items:flex-start; justify-content:center;
  padding:20px; overflow-y:auto;
}
.app-overlay.show{ display:flex; }
.app-modal{
  background:var(--surface); border-radius:var(--r);
  max-width:560px; width:100%; margin:auto;
  display:flex; flex-direction:column;
  box-shadow:0 12px 48px rgba(0,0,0,.2);
  max-height:92vh;
}
.app-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--border-light);
  position:sticky; top:0; background:var(--surface); border-radius:var(--r) var(--r) 0 0; z-index:1;
}
.app-modal-head h2{ font-family:var(--font-sans); font-size:17px; font-weight:800; color:var(--text); margin:0; display:flex; align-items:center; gap:8px; }
.app-modal-head h2 i{ color:var(--navy); }
.app-modal-close{ background:none; border:none; font-size:26px; color:var(--text-3); cursor:pointer; line-height:1; padding:0 6px; }
.app-modal-body{ padding:18px 22px; overflow-y:auto; flex:1; }
.app-modal-foot{
  display:flex; gap:10px; justify-content:flex-end;
  padding:14px 22px; border-top:1px solid var(--border-light);
  position:sticky; bottom:0; background:var(--surface); border-radius:0 0 var(--r) var(--r);
  z-index:2; flex-shrink:0;
}

/* ステップバー（参加申請 → 自己紹介） */
.app-step-bar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border-light);
}
.app-step{
  font-family:var(--font-sans); font-size:12.5px; font-weight:800;
  color:var(--text-3); padding:5px 12px; border-radius:999px; background:var(--bg-elevated);
}
.app-step.active{ background:var(--navy); color:#fff; }
.app-step.done{ background:rgba(74,122,88,.14); color:var(--sage); }
.app-step-sep{ color:var(--text-3); font-size:11px; }

/* ── 参加申請の1問1画面（.app-flow）。一度に見せる質問を1つにして、途中で閉じられにくくする ── */
.app-flow{ min-height:min(640px, 92vh); }
.app-flow-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px 8px; flex-shrink:0;
}
.app-flow-back{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:999px; color:var(--text); font-size:17px; cursor:pointer;
}
/* 最初の画面では戻る先が無いので見えなくする（場所は残して、数字が中央からずれないようにする） */
.app-flow-back[hidden]{ display:inline-flex; visibility:hidden; }
.app-flow-count{
  font-family:var(--font-sans); font-size:12.5px; font-weight:800; color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.app-flow .app-modal-close{ width:40px; height:40px; padding:0; }
/* 進み具合のバー */
.app-flow-progress{ height:4px; margin:0 22px; background:var(--bg-elevated); border-radius:999px; overflow:hidden; flex-shrink:0; }
.app-flow-progress span{ display:block; height:100%; background:var(--navy); border-radius:999px; transition:width var(--duration) var(--ease); }
.app-flow .app-modal-body{ padding:26px 22px 22px; }
.app-flow-title{
  font-family:var(--font-sans); font-size:21px; font-weight:800; line-height:1.45; color:var(--text);
  margin:0 0 8px;
}
.app-flow-lead{ font-size:12.5px; line-height:1.7; color:var(--text-2); margin:0 0 4px; }
.app-flow-lead strong{ color:var(--text); }
.app-flow-lead i{ color:var(--text-3); font-size:11px; }
.app-flow-body{ margin-top:20px; }
.app-flow-resumed{
  display:flex; align-items:center; gap:7px; margin:0 0 16px; padding:8px 12px;
  font-size:12px; line-height:1.6; color:var(--text-2); background:var(--bg-elevated); border-radius:var(--r-sm);
}
.app-flow-resumed i{ color:var(--sage); flex-shrink:0; }
/* タップで選ぶ縦並びの選択肢。指で押しやすい高さにして、選んだものにはチェックを出す */
.app-flow-opts{ display:flex; flex-direction:column; gap:10px; }
.app-flow-opt{
  display:flex; align-items:center; gap:12px; width:100%; min-height:54px; padding:12px 16px;
  background:var(--surface); border:1.5px solid var(--border-light); border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:15px; font-weight:700; color:var(--text); text-align:left;
  cursor:pointer; transition:border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.app-flow-opt span{ flex:1 1 auto; }
.app-flow-opt-icon{ width:20px; text-align:center; color:var(--text-3); }
.app-flow-opt-check{ color:var(--navy); font-size:18px; opacity:0; transition:opacity var(--duration) var(--ease); }
.app-flow-opt:hover{ border-color:var(--border); }
.app-flow-opt.active{ border-color:var(--navy); background:rgba(27,45,91,.06); }
.app-flow-opt.active .app-flow-opt-icon{ color:var(--navy); }
.app-flow-opt.active .app-flow-opt-check{ opacity:1; }
.app-field-err .app-flow-opt{ border-color:var(--coral); }
.app-flow-input{ font-size:17px; padding:13px 14px; }
.app-flow-photo{ margin-top:26px; }
.app-flow-sub{ margin-top:20px; }
.app-flow-body .app-textarea{ font-size:15px; }
/* 下に固定する次へボタン。画面の幅いっぱいにして、親指で押しやすくする */
.app-flow-foot{ padding:12px 22px calc(12px + env(safe-area-inset-bottom)); }
.app-flow-foot .app-flow-next{ flex:1 1 auto; justify-content:center; min-height:50px; font-size:15px; }
.app-flow-foot .app-flow-skip{ flex:0 0 auto; min-height:50px; }
/* スマホでは画面いっぱいに出す（周りに背景が見えると「ポップアップ＝すぐ閉じるもの」に見えるため） */
@media(max-width:600px){
  .app-overlay:has(.app-flow){ padding:0; }
  .app-flow{ max-width:none; min-height:100dvh; max-height:100dvh; height:100dvh; border-radius:0; margin:0; box-shadow:none; }
  .app-flow .app-modal-foot{ border-radius:0; }
}

.app-section{ margin-bottom:24px; }
.app-section-banner{
  display:flex; align-items:center; gap:8px;
  padding:9px 13px; border-radius:var(--r-sm);
  font-size:12px; font-weight:800; margin-bottom:14px;
}
.app-section-public{ background:rgba(74,122,88,.12); color:var(--sage); }
.app-section-private{ background:rgba(27,45,91,.08); color:var(--navy); }

.app-field{ margin-bottom:16px; }
.app-label{
  display:block; font-family:var(--font-sans); font-size:13px; font-weight:800; color:var(--text);
  margin-bottom:8px;
}
.app-req{
  display:inline-block; padding:1px 7px; border-radius:999px; margin-left:4px;
  background:rgba(214,99,82,.12); color:var(--coral); font-size:10px; font-weight:800;
}
.app-opt{
  display:inline-block; padding:1px 7px; border-radius:999px; margin-left:4px;
  background:var(--bg-elevated); color:var(--text-3); font-size:10px; font-weight:700;
}
.app-public-note{
  display:flex; align-items:flex-start; gap:7px; margin:0 0 14px;
  font-size:12px; line-height:1.6; color:var(--text-2);
}
.app-public-note i{ color:var(--sage); margin-top:3px; flex-shrink:0; font-size:11px; }
.app-public-note strong{ color:var(--text); font-weight:800; }
.app-hint-inline{ font-size:10.5px; color:var(--text-3); font-weight:500; margin-left:4px; }
.app-hint{ font-size:11px; color:var(--text-3); line-height:1.6; margin:6px 0 0; }

.app-input{
  width:100%; padding:10px 12px;
  background:var(--bg-elevated); border:1px solid var(--border-light); border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:13.5px; color:var(--text);
}
.app-input:focus{ outline:none; border-color:var(--sage); }
.app-input-mt{ margin-top:8px; }
.app-hint-mt{ margin-top:8px; }
/* 連絡先の入力（Issue #67-2）。左のマークが、貼られたURLに合わせて切り替わる */
.app-contact-rows{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.app-contact-row{ display:flex; align-items:center; gap:9px; }
.app-contact-row .app-input{ flex:1 1 auto; min-width:0; }
.app-contact-mark{
  flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; line-height:1;
}
.app-contact-mark-empty{ background:var(--bg-elevated); color:var(--text-3); }
.app-textarea{ resize:vertical; min-height:74px; line-height:1.6; }
/* 入力欄の上に置く補足（例: 編集画面の「いまカードに出ているひとこと」） */
.app-hint-lead{ margin:0 0 8px; }
/* 文字数カウンター（自己紹介） */
.app-count{ font-size:11px; color:var(--text-3); text-align:right; margin:4px 0 0; font-variant-numeric:tabular-nums; }
/* 見出しつきチップ（ハマってること）。見出しで区切ると、自分に関係する行だけ見れば済む */
.app-chip-group-label{ font-size:11px; font-weight:700; color:var(--text-3); margin:12px 0 7px; }
.app-chip-group-label:first-child{ margin-top:0; }
/* 自己紹介で「何を書けばいいか」を示す質問。入力欄の上に置き、書いている間も消えないようにする。
   項目名に見えないよう、枠を付けず小さいグレーの文字にする */
.app-qlist{ margin:0 0 8px; }
.app-qlist-lead{ margin:0 0 5px; font-size:11px; font-weight:700; color:var(--text-3); }
/* 質問は「・」でつないだ1行（箇条書きにすると、質問ごとに改行して答える書き方を誘うため） */
.app-qlist-topics{ margin:0; font-size:11.5px; line-height:1.55; color:var(--text-2); }
/* 文章の例。入力欄の中に置くと打ち始めで消えるので、上に常に出す */
.app-qlist-example{
  margin:6px 0 0; padding:8px 10px; font-size:11.5px; line-height:1.6; color:var(--text-2);
  background:var(--bg-elevated); border-radius:var(--r-sm);
}
.app-qlist-example span{ font-weight:700; color:var(--text-3); }

/* 入力欄の中の薄い例。薄すぎて読めないと案内にならないので、文字色は本文の薄いグレーに揃える */
.app-input::placeholder{ color:var(--text-3); opacity:1; }
.app-textarea::placeholder{ line-height:1.7; }

.app-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.app-chip{
  min-height:44px; padding:10px 15px; border-radius:999px;
  background:var(--bg-elevated); border:1px solid var(--border-light);
  font-family:var(--font-sans); font-size:12.5px; font-weight:700; color:var(--text-2);
  cursor:pointer; transition:all var(--duration) var(--ease); white-space:nowrap;
}
.app-chip:hover{ background:var(--bg); border-color:var(--border); color:var(--text); }
.app-chip.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

.app-consent{ background:var(--bg-elevated); border-radius:var(--r-sm); padding:14px 16px; }
.app-consent-lead{ font-size:12.5px; color:var(--text-2); line-height:1.7; margin-top:4px; }
/* 確認事項: 項目ごとのチェックボックス */
.app-consent-list{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.app-consent-check{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:12.5px; line-height:1.7; color:var(--text);
}
.app-consent-check input{
  flex-shrink:0; width:18px; height:18px; margin-top:3px; cursor:pointer;
  accent-color:var(--sage);
}

/* 入力エラー: 該当項目の近くに赤いメッセージ＋赤枠で表示 */
.app-err{
  display:flex; align-items:center; gap:6px; margin-top:7px;
  font-size:12px; font-weight:700; line-height:1.5; color:var(--coral);
}
.app-err i{ font-size:11px; flex-shrink:0; }
.app-field-err .app-label{ color:var(--coral); }
.app-field-err .app-input{ border-color:var(--coral); }
.app-field-err .app-chips{
  padding:8px; margin:-8px; border-radius:var(--r-sm);
  box-shadow:0 0 0 1.5px var(--coral) inset;
}
/* 見出しつきチップは、行ごとではなくグループ全体を1つの枠で囲む（行ごとの枠は見出しと重なるため） */
.app-field-err .app-chip-groups{
  padding:8px; margin:-8px; border-radius:var(--r-sm);
  box-shadow:0 0 0 1.5px var(--coral) inset;
}
.app-field-err .app-chip-groups .app-chips{ padding:0; margin:0; box-shadow:none; }
.app-consent-err{ box-shadow:0 0 0 1.5px var(--coral) inset; }

.app-btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy); color:#fff; border:none;
  padding:11px 22px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:14px; font-weight:800; cursor:pointer;
  transition:filter var(--duration) var(--ease);
}
.app-btn-primary:hover{ filter:brightness(1.1); }
.app-btn-primary[disabled]{ opacity:.65; cursor:default; filter:none; }
.app-btn-ghost{
  background:transparent; border:1px solid var(--border-light); color:var(--text-2);
  padding:11px 18px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:13px; font-weight:700; cursor:pointer;
}
.app-btn-ghost:hover{ background:var(--bg-elevated); color:var(--text); }

.app-modal-success{ text-align:center; padding:40px 28px; max-width:440px; }
.app-success-icon{
  width:64px; height:64px; margin:0 auto 16px;
  border-radius:50%; background:rgba(74,122,88,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:var(--sage);
}
.app-modal-success h2{ font-family:var(--font-sans); font-size:19px; font-weight:800; color:var(--text); margin:0 0 10px; }
.app-modal-success p{ font-size:13.5px; line-height:1.8; color:var(--text-2); margin:0 0 20px; }

/* ───────── オンボーディング（初回ウェルカム / サインイン後ようこそ） ───────── */
.ob-overlay{
  position:fixed; inset:0; z-index:1450;
  background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center;
  padding:20px; overflow-y:auto;
}
.ob-overlay.show{ display:flex; }
.ob-modal{
  position:relative;
  background:var(--surface); border-radius:var(--r);
  max-width:420px; width:100%; margin:auto;
  padding:30px 26px 24px;
  box-shadow:0 12px 48px rgba(0,0,0,.2);
  max-height:92vh; overflow-y:auto;
}
.ob-close{
  position:absolute; top:12px; right:14px;
  background:none; border:none; font-size:24px; color:var(--text-3);
  cursor:pointer; line-height:1; padding:4px 8px;
}
.ob-close:hover{ color:var(--text); }

.ob-hero{ text-align:center; margin-bottom:20px; }
.ob-logo{
  font-family:var(--font-display); font-size:15px; font-weight:800;
  color:var(--text-3); letter-spacing:.04em; margin-bottom:14px;
}
.ob-logo span{ color:var(--coral); }
.ob-check{ font-size:42px; color:var(--sage); margin-bottom:12px; line-height:1; }
.ob-title{
  font-family:var(--font-display); font-size:20px; font-weight:800;
  color:var(--text); margin:0 0 10px; line-height:1.4;
}
.ob-lead{ font-size:13.5px; color:var(--text-2); line-height:1.8; margin:0; }
.ob-lead strong{ color:var(--coral); font-weight:800; }

.ob-points{ display:flex; flex-direction:column; gap:10px; margin:0 0 22px; }
.ob-point{
  display:flex; align-items:center; gap:13px;
  padding:12px 14px; background:var(--bg-elevated); border-radius:var(--r-sm);
}
.ob-point i{
  font-size:18px; color:var(--navy); flex-shrink:0;
  width:24px; text-align:center;
}
.ob-point div{ display:flex; flex-direction:column; gap:2px; }
.ob-point strong{ font-family:var(--font-sans); font-size:13.5px; font-weight:800; color:var(--text); }
.ob-point span{ font-size:11.5px; color:var(--text-3); line-height:1.5; }

.ob-progress{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px;
  margin:0 0 22px; padding:12px; background:var(--bg-elevated); border-radius:var(--r-sm);
}
.ob-prog-step{
  font-family:var(--font-sans); font-size:11.5px; font-weight:800;
  color:var(--text-3); padding:5px 11px; border-radius:999px; background:var(--surface);
}
.ob-prog-step.done{ background:rgba(74,122,88,.14); color:var(--sage); }
.ob-prog-step.current{ background:var(--navy); color:#fff; }
.ob-prog-sep{ color:var(--text-3); font-size:10px; }

.ob-actions{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.ob-btn-block{ width:100%; justify-content:center; }
.ob-btn-text{
  background:none; border:none; cursor:pointer;
  font-family:var(--font-sans); font-size:13px; font-weight:700; color:var(--text-3);
  padding:6px 10px;
}
.ob-btn-text:hover{ color:var(--text-2); }

/* ───────── 入口ゲート（メンバー以外に出す、画面いっぱいのスタート画面／審査中画面） ─────────
   参加申請(1500)・自己紹介の編集(1500)はこの上に重なる。ヘッダーや下のナビはこの下に隠れる */
.entry-gate{
  position:fixed; inset:0; z-index:1450;
  display:none; background:var(--surface); overflow-y:auto;
}
.entry-gate.show{ display:block; }
.eg-inner{
  max-width:480px; min-height:100%; margin:0 auto;
  display:flex; flex-direction:column;
  padding:28px 24px calc(20px + env(safe-area-inset-bottom));
}
.eg-main{ flex:1 1 auto; }
.eg-brand img{ height:34px; width:auto; display:block; }
.eg-title{
  font-family:var(--font-display); font-size:25px; font-weight:900; line-height:1.45;
  color:var(--text); margin:36px 0 12px;
}
.eg-accent{ color:var(--coral); }
.eg-lead{ font-size:14px; line-height:1.8; color:var(--text-2); margin:0 0 26px; }
.eg-icon{ font-size:38px; color:var(--sage); margin:40px 0 -20px; line-height:1; }
.eg-points{ display:flex; flex-direction:column; gap:10px; margin:0 0 24px; }
.eg-point{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; background:var(--bg-elevated); border-radius:var(--r-sm);
}
.eg-point i{ font-size:19px; color:var(--navy); width:24px; text-align:center; flex-shrink:0; }
.eg-point div{ display:flex; flex-direction:column; gap:3px; }
.eg-point strong{ font-family:var(--font-sans); font-size:14px; font-weight:800; color:var(--text); }
.eg-point span{ font-size:12px; line-height:1.55; color:var(--text-3); }
/* はじめるまでの3ステップ。いまどこにいるかを、色の付いた丸で示す */
.eg-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.eg-steps li{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-sans); font-size:13.5px; font-weight:700; color:var(--text-3);
}
.eg-steps li > span{
  width:26px; height:26px; flex-shrink:0; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); color:var(--text-3); font-size:12px; font-weight:800;
}
.eg-steps li.done{ color:var(--text-2); }
.eg-steps li.done > span{ background:rgba(74,122,88,.14); color:var(--sage); }
.eg-steps li.current{ color:var(--text); }
.eg-steps li.current > span{ background:var(--navy); color:#fff; }
.eg-foot{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:28px; }
.eg-btn{ width:100%; justify-content:center; min-height:50px; font-size:15px; }
.eg-loading{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  min-height:60vh; color:var(--text-3); font-size:13px;
}
.eg-loading i{ font-size:22px; }

/* 写真アップロードUI（参加申請ステップ2・メンバー編集で共用） */
.app-photo-row{ display:flex; gap:10px; align-items:center; }
.app-photo-add{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:96px; height:96px; border-radius:var(--r-sm); border:1.5px dashed var(--border);
  background:var(--bg-elevated); color:var(--text-3);
  font-family:var(--font-sans); font-size:11.5px; font-weight:700; cursor:pointer;
  transition:all var(--duration) var(--ease);
}
.app-photo-add:hover{ border-color:var(--sage); color:var(--sage); }
.app-photo-add i{ font-size:20px; }
.app-photo-thumb{ position:relative; width:96px; height:96px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--border-light); }
.app-photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.app-photo-remove{
  position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
/* サムネイルの形（丸／角丸）。保存した photo_shape に合わせる */
.app-photo-thumb-circle{ border-radius:50%; }
.app-photo-thumb-rounded{ border-radius:var(--r-sm); }
/* 「調整・変更」ボタン（サムネイルの右に並ぶ二次ボタン） */
.app-photo-change{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); color:var(--navy); border:1px solid var(--border);
  padding:8px 12px; border-radius:var(--r-sm); cursor:pointer;
  font-family:var(--font-sans); font-size:12px; font-weight:700;
}
.app-photo-change:hover{ border-color:var(--navy); }

/* ── 写真切り抜き調整モーダル（openImageCropper／自己紹介・メンバー・ラウンジ共通） ── */
.cropper-overlay{
  position:fixed; inset:0; z-index:5000;
  background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.cropper-modal{
  background:var(--surface); width:100%; max-width:360px; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh); display:flex; flex-direction:column;
}
.cropper-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border-light); }
.cropper-head h2{ font-family:var(--font-sans); font-size:15px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; }
.cropper-head h2 i{ color:var(--navy); font-size:14px; }
.cropper-close{ background:none; border:none; font-size:24px; line-height:1; color:var(--text-3); cursor:pointer; padding:0 4px; }
.cropper-stage{ display:flex; justify-content:center; padding:20px 18px 6px; }
.cropper-viewport{
  position:relative; width:min(72vw,260px); height:min(72vw,260px);
  overflow:hidden; background:var(--surface); touch-action:none; cursor:grab;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--navy);
}
.cropper-viewport:active{ cursor:grabbing; }
.cropper-viewport-circle{ border-radius:50%; }
.cropper-viewport-rounded{ border-radius:16px; }
.cropper-img{ position:absolute; top:0; left:0; transform-origin:top left; user-select:none; -webkit-user-drag:none; max-width:none; pointer-events:none; }
.cropper-controls{ padding:8px 20px 4px; }
.cropper-zoom-row{ display:flex; align-items:center; gap:10px; }
.cropper-zoom-row i{ color:var(--text-3); font-size:13px; }
.cropper-zoom{ flex:1; accent-color:var(--navy); }
.cropper-shape-row{ display:flex; gap:8px; margin-top:12px; justify-content:center; }
.cropper-shape-btn{
  display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:999px;
  background:var(--surface); color:var(--text-2); border:1.5px solid var(--border); cursor:pointer;
  font-family:var(--font-sans); font-size:12.5px; font-weight:700;
}
.cropper-shape-btn.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.cropper-shape-btn i{ font-size:11px; }
.cropper-hint{ font-size:11.5px; color:var(--text-3); text-align:center; margin-top:10px; line-height:1.6; }
.cropper-foot{ display:flex; gap:10px; padding:14px 18px 18px; }
.cropper-foot button{ flex:1; padding:12px; border-radius:var(--r-sm); font-family:var(--font-sans); font-size:13.5px; font-weight:700; cursor:pointer; }
.cropper-btn-ghost{ background:var(--surface); color:var(--text-2); border:1px solid var(--border); }
.cropper-btn-primary{ background:var(--navy); color:#fff; border:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; }

/* ═══════════════ メンバー紹介タブ ═══════════════ */
.members-content{ max-width:760px; margin:0 auto; padding:16px var(--page-pad); }

/* 自分のプロフィールプレビュー＋編集 */
.mb-own{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg-elevated); border:1px solid var(--border-light); border-radius:var(--r);
  padding:12px 14px; margin-bottom:14px;
}
.mb-own-left{ display:flex; align-items:center; gap:11px; min-width:0; }
.mb-own-name{ font-family:var(--font-sans); font-weight:800; font-size:14px; color:var(--text); }
.mb-own-sub{ font-size:11.5px; color:var(--text-3); margin-top:2px; }
/* 自己紹介がまだの人にだけ出す案内（本人にしか見えない） */
.mb-own-nudge{ background:rgba(232,168,56,.12); border-color:rgba(232,168,56,.45); }
.mb-own-nudge .mb-own-sub{ color:var(--text-2); font-weight:600; line-height:1.5; }
.mb-edit-btn{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  background:var(--navy); color:#fff; border:none; padding:8px 14px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:12.5px; font-weight:700; cursor:pointer;
  transition:filter var(--duration) var(--ease);
}
.mb-edit-btn:hover{ filter:brightness(1.1); }

/* フィルターバー */
.mb-filterbar{ background:var(--surface); border:1px solid var(--border-light); border-radius:var(--r); padding:12px 14px; margin-bottom:12px; }
/* キーワード検索（フィルターバーの先頭）。iOS は 16px 未満の入力欄にフォーカスすると画面を拡大するので 16px にする */
.mb-search{ position:relative; margin-bottom:12px; }
.mb-search > i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:13px; pointer-events:none; }
.mb-search-input{
  width:100%; box-sizing:border-box; height:42px; padding:0 40px 0 36px;
  border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg);
  font-family:var(--font-sans); font-size:16px; color:var(--text);
  -webkit-appearance:none; appearance:none;
}
.mb-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.mb-search-input::placeholder{ color:var(--text-3); font-size:13.5px; }
.mb-search-input:focus{ outline:none; border-color:var(--navy); background:var(--surface); }
.mb-search-clear{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:none; background:none; color:var(--text-3); font-size:14px; cursor:pointer;
}
.mb-search-clear[hidden]{ display:none; }
.mb-filter-group{ margin-bottom:11px; position:relative; }
.mb-filter-group:last-of-type{ margin-bottom:0; }
.mb-filter-label{ font-size:11.5px; font-weight:800; color:var(--text-2); margin-bottom:7px; display:flex; align-items:center; gap:6px; }
.mb-filter-label i{ color:var(--navy); font-size:11px; }
/* 各グループは折り返さず横1列でスクロール（フィルター全体を計2行に収める） */
.mb-fchips{
  display:flex; flex-wrap:nowrap; gap:6px;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:1px;
}
.mb-fchips::-webkit-scrollbar{ display:none; }
.mb-fchip{
  flex:0 0 auto;
  padding:5px 11px; border-radius:999px; background:var(--bg-elevated); border:1px solid var(--border-light);
  font-family:var(--font-sans); font-size:11.5px; font-weight:700; color:var(--text-2); cursor:pointer;
  transition:all var(--duration) var(--ease); white-space:nowrap;
}
/* はみ出していて、まだ右端まで見ていないときだけ右端にフェード（続きあり） */
.mb-filter-group.has-more::after{
  content:''; position:absolute; right:0; bottom:0; width:30px; height:30px;
  pointer-events:none; border-radius:0 999px 999px 0;
  background:linear-gradient(to right, rgba(255,255,255,0), var(--surface) 78%);
}
.mb-fchip:hover{ color:var(--text); }
.mb-fchip.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.mb-filter-clear{ margin-top:11px; background:none; border:none; color:var(--coral); font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }

.mb-count{ font-size:12px; color:var(--text-3); font-weight:700; margin:0 2px 10px; }

/* カードグリッド */
.mb-grid{ display:grid; grid-template-columns:1fr; gap:11px; }
@media(min-width:640px){ .mb-grid{ grid-template-columns:1fr 1fr; } }
.mb-card{
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:15px; cursor:pointer; box-shadow:var(--sh);
  transition:box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.mb-card:hover{ box-shadow:0 6px 16px rgba(26,14,6,.10); transform:translateY(-2px); border-color:var(--border); }
/* 押したときに少し沈む（押せるカードだと手で分かるように） */
.mb-card:active{ transform:scale(.985); box-shadow:var(--sh-sm); }
/* 自己紹介の吹き出し＝カードの主役。右上の写真から出る「しっぽ」を付けて、その人がしゃべっているように見せる */
.mb-bubble{
  position:relative; margin:14px 0 0; padding:12px 15px;
  background:var(--bubble-none); border-radius:16px;
}
.mb-bubble::before{
  content:''; position:absolute; top:-8px; right:19px;
  border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:9px solid var(--bubble-none);
}
.mb-bubble-pre{ background:var(--bubble-pre); }      .mb-bubble-pre::before{ border-bottom-color:var(--bubble-pre); }
.mb-bubble-staying{ background:var(--bubble-staying); } .mb-bubble-staying::before{ border-bottom-color:var(--bubble-staying); }
.mb-bubble-returned{ background:var(--bubble-returned); } .mb-bubble-returned::before{ border-bottom-color:var(--bubble-returned); }
/* 一覧の吹き出しは 13px・4行まで（15px・3行だと375px幅で50字ほどしか見えず、ほとんどの人が途中で切れていた） */
/*   改行は書いたとおりに出す（詳細の .mb-detail-intro と同じ pre-line） */
.mb-bubble .mb-intro-text{ font-size:13px; line-height:1.6; font-weight:500; -webkit-line-clamp:4; line-clamp:4; white-space:pre-line; }
/* 関心・挑戦／力になれる＝脇役。枠を付けず、小さなラベルの下に本文を2行まで */
.mb-lines{ margin-top:11px; display:flex; flex-direction:column; gap:9px; }
.mb-line{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.mb-line-text{
  margin:0; font-size:12px; line-height:1.6; color:var(--text-2); font-weight:500;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; overflow-wrap:anywhere;
}
.mb-line-tag{
  display:inline-flex; align-items:center; gap:4px; padding:1px 8px;
  border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.02em;
}
.mb-line-tag i{ font-size:9.5px; }
.mb-line-challenge .mb-line-tag{ color:var(--navy); background:rgba(47,93,67,.11); }
.mb-line-help .mb-line-tag{ color:var(--coral-hover); background:rgba(232,88,58,.10); }
.mb-line-journey .mb-line-tag{ color:var(--amber-d); background:rgba(232,168,56,.14); }
.mb-card-head{ display:flex; gap:12px; align-items:flex-start; }
.mb-card-headtext{ flex:1; min-width:0; }
.mb-name{ font-family:var(--font-sans); font-weight:800; font-size:16px; color:var(--text); letter-spacing:.01em; }
.mb-meta{ font-size:12px; color:var(--text-2); font-weight:500; margin-top:3px; }
/* ひとこと（自己紹介の声）= カードの主役。引用ボックスで前に出す */
.mb-word{
  font-family:var(--font-sans); font-size:13.5px; color:var(--text); line-height:1.6;
  margin:11px 0 0; padding:10px 13px;
  background:var(--bg); border-radius:10px; border-left:3px solid var(--amber);
}
/* 自己紹介（intro・最大200字）。一覧は「ざっと眺めて気になる人を探す」場所なので3行で省略し、全文は詳細で読む */
/*   枠（余白・背景）と文章（3行で切る）を分ける。同じ要素にすると下の余白に4行目が透けて見えるため */
.mb-intro{
  margin:11px 0 0; padding:10px 13px;
  background:var(--bg); border-radius:10px; border-left:3px solid var(--amber);
}
.mb-intro-text{
  margin:0; font-family:var(--font-sans); font-size:13.5px; color:var(--text); line-height:1.65;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3;
  overflow:hidden; overflow-wrap:anywhere;
}
/* 関心があること・いま挑戦していること（challenge）。主役の自己紹介の下に添える（文字は自己紹介より控えめ）。2行で省略する */
.mb-challenge{
  margin:11px 0 0; padding:9px 12px 10px;
  background:rgba(47,93,67,.06); border-radius:10px; border:1px solid rgba(47,93,67,.14);
}
.mb-challenge-label{ font-size:10.5px; font-weight:800; color:var(--navy); letter-spacing:.02em; display:flex; align-items:center; gap:5px; }
.mb-challenge-label i{ font-size:10px; }
.mb-challenge-text{
  margin:3px 0 0; font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--text); line-height:1.55;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden; overflow-wrap:anywhere;
}
/* 詳細では全文を出す */
.mb-detail-challenge{ margin:16px 0 0; }
.mb-detail-challenge .mb-challenge-text{ display:block; -webkit-line-clamp:unset; line-clamp:unset; }

/* 住んでいるエリア（カードの名前・肩書きの下） */
.mb-area{ font-size:12px; color:var(--text-2); font-weight:500; margin-top:2px; overflow-wrap:anywhere; }
.mb-area i{ font-size:10.5px; color:var(--text-3); margin-right:5px; }

/* いいねボタン（カード／詳細で共通）。押すとハートが塗りつぶし＆赤に */
.mb-card-foot{ display:flex; justify-content:flex-end; margin-top:11px; }
.mb-like{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg); border:1px solid var(--border); border-radius:999px;
  padding:5px 12px; cursor:pointer; font-family:var(--font-sans);
  font-size:13px; font-weight:700; color:var(--text-2);
  transition:background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.mb-like i{ font-size:13px; }
.mb-like:hover{ border-color:var(--coral); color:var(--coral); }
.mb-like:active{ transform:scale(.92); }
.mb-like.liked{ background:rgba(231,111,81,.10); border-color:var(--coral); color:var(--coral); }
.mb-like.liked i{ color:var(--coral); }
.mb-like-count{ min-width:8px; text-align:left; font-variant-numeric:tabular-nums; }
.mb-detail-like{ display:flex; justify-content:center; margin-top:13px; }

/* ── 詳細モーダルの操作列（いいね｜連絡先マーク）。Issue #67-2 ──
   連絡先は URL の文字を出さず、サービスのマークだけを並べる。押すとそのアプリ・ページが開く。 */
.mb-detail-actions{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:13px; flex-wrap:wrap; }
.mb-detail-sep{ width:1px; height:26px; background:var(--border); }
.mb-contacts{ display:flex; align-items:center; gap:10px; }
.mb-contact{
  width:46px; height:46px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; font-size:21px; line-height:1;
  transition:transform var(--duration) var(--ease), filter var(--duration) var(--ease);
}
.mb-contact:hover{ filter:brightness(1.07); }
.mb-contact:active{ transform:scale(.92); }
.mb-contact-line{ background:var(--brand-line); }
/* Instagram は公式のロゴが多色。単色の変数だけだと沈むのでブランドのグラデーションで出す */
.mb-contact-instagram{ background:linear-gradient(45deg,#F9CE34,#EE2A7B 55%,#6228D7); }
.mb-contact-x{ background:var(--brand-x); }
.mb-contact-tiktok{ background:var(--brand-tiktok); }
.mb-contact-facebook{ background:var(--brand-facebook); }
/* 見分けられなかったURL。ブランド色を持たないので中間色にする */
.mb-contact-link{ background:var(--text-2); }

/* フェーズピル（渡航前／滞在中／帰国後）。カード・詳細で共通 */
/* カードではピルと「永住・社会人・大阪出身」を1行に並べる。写真の横で幅が狭いので、入りきらない人は折り返す */
.mb-phase-row{ margin-top:5px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.mb-phase-row .mb-meta{ margin-top:0; }
.mb-phase{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; line-height:1.4; }
.mb-phase i{ font-size:10px; }
.mb-phase-pre{ color:#9A6B12; background:rgba(232,168,56,.16); }
.mb-phase-staying{ color:var(--navy); background:rgba(74,122,88,.15); }
.mb-phase-returned{ color:#4A6276; background:rgba(74,98,118,.13); }

/* 写真／フォールバックアバター（共通サイズ） */
.mb-photo{ object-fit:cover; border:1px solid var(--border-light); flex-shrink:0; }
.mb-avatar{ display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; flex-shrink:0; font-family:var(--font-sans); }
.mb-photo-sq,.mb-avatar-sq{ width:52px; height:52px; border-radius:12px; font-size:20px; }
.mb-photo-sm,.mb-avatar-sm{ width:44px; height:44px; border-radius:10px; font-size:17px; }
.mb-photo-lg,.mb-avatar-lg{ width:96px; height:96px; border-radius:18px; font-size:34px; }
/* 形（丸／角丸）。circle は完全な丸、rounded は上の角丸サイズを使う */
.mb-shape-circle{ border-radius:50% !important; }

/* カード内チップ */
.mb-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.mb-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; }
.mb-chip i{ font-size:9px; opacity:.75; }
.mb-chip-hobby{ color:var(--sage-dark); background:rgba(74,122,88,.09); border:1px solid rgba(74,122,88,.16); }
.mb-chip-want{ color:var(--coral); background:rgba(214,99,82,.09); border:1px solid rgba(214,99,82,.16); }

/* カード内「思い出/やってみたいこと」「力になれること」のアイコン付き2行ブロック */
.mb-kv{ margin-top:11px; display:flex; flex-direction:column; gap:8px; }
.mb-kv-row{ display:flex; gap:8px; align-items:flex-start; }
.mb-kv-ic{ width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:11px; }
.mb-kv-ic.j{ background:rgba(74,98,118,.12); color:#4A6276; }
.mb-kv-ic.h{ background:rgba(74,122,88,.13); color:var(--sage); }
.mb-kv-body{ flex:1; min-width:0; }
.mb-kv-label{ font-size:10px; font-weight:700; color:var(--text-3); letter-spacing:.02em; }
.mb-kv-val{ font-size:12.5px; color:var(--text); line-height:1.5; font-weight:500; margin-top:1px; }

.mb-loading,.mb-empty{ text-align:center; color:var(--text-3); padding:40px 16px; font-size:13px; }
.mb-empty i{ font-size:28px; display:block; margin-bottom:10px; opacity:.5; }
/* 読み込み失敗(仮表示)バナー */
.mb-load-error{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:#FFF8E5; border:1px solid rgba(232,168,56,.4); border-radius:var(--r-sm);
  padding:10px 14px; margin-bottom:12px; font-size:12.5px; color:#7A5A20; line-height:1.6;
}
.mb-load-error i{ color:var(--amber-d); }
.mb-load-error button{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  background:var(--surface); color:var(--navy); border:1px solid var(--navy);
  padding:6px 12px; border-radius:var(--r-sm); cursor:pointer; font-size:12px; font-weight:700; font-family:var(--font-sans);
}
.mb-loading i{ margin-right:6px; }

/* 詳細モーダル */
.mb-detail-overlay{
  position:fixed; inset:0; z-index:1500; background:rgba(0,0,0,.55);
  display:none; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto;
}
.mb-detail-overlay.show{ display:flex; }
.mb-detail{
  position:relative; background:var(--surface); border-radius:var(--r);
  max-width:460px; width:100%; margin:auto; box-shadow:0 12px 48px rgba(0,0,0,.2);
  padding:28px 24px 24px;
}
.mb-detail-close{ position:absolute; top:10px; right:12px; background:none; border:none; font-size:26px; color:var(--text-3); cursor:pointer; line-height:1; }
.mb-detail-top{ text-align:center; }
.mb-detail-top .mb-photo-lg,.mb-detail-top .mb-avatar-lg{ margin:0 auto 12px; }
.mb-detail-name{ font-family:var(--font-sans); font-weight:800; font-size:19px; color:var(--text); }
.mb-badge{ display:inline-block; margin-top:8px; font-size:11.5px; font-weight:700; padding:3px 12px; border-radius:999px; background:rgba(27,45,91,.08); color:var(--navy); }
.mb-detail-badges{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; margin-top:8px; }
.mb-detail-badges .mb-badge{ margin-top:0; }
.mb-detail-home{ font-size:12.5px; color:var(--text-3); margin-top:8px; }
.mb-detail-home i{ margin-right:4px; }
.mb-detail-word{ font-size:14px; line-height:1.7; color:var(--text); text-align:center; margin:16px 0; padding:14px; background:var(--bg-elevated); border-radius:var(--r-sm); }
/* 自己紹介の全文。長文なので左揃えにし、本人が入れた改行を残す */
.mb-detail-intro{ font-size:14px; line-height:1.8; color:var(--text); text-align:left; white-space:pre-line; overflow-wrap:anywhere; margin:16px 0; padding:14px 16px; background:var(--bg-elevated); border-radius:var(--r-sm); }
.mb-d-block,.mb-d-row{ margin-top:14px; }
.mb-d-label{ font-size:11.5px; font-weight:800; color:var(--text-2); margin-bottom:6px; }
.mb-d-val{ font-size:13.5px; line-height:1.65; color:var(--text); }

/* ═══════════════ Stage 2B-Lounge: ラウンジ機能 ═══════════════ */

/* ヘッダー通知ベル */
.header-notif-btn {
  background:transparent; border:none; color:rgba(255,255,255,.85);
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:6px; cursor:pointer; position:relative;
  transition:background var(--duration) var(--ease);
}
.header-notif-btn:hover { background:rgba(255,255,255,.10); color:#fff; }
.header-notif-btn i { font-size:16px; }
.header-notif-badge {
  position:absolute; top:4px; right:4px;
  background:var(--coral); color:#fff;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:8px;
  font-family:var(--font-sans); font-size:10px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; border:2px solid var(--header);
}

/* 開発モードバナー */
.lounge-dev-banner {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:rgba(232,168,56,.12);
  color:var(--amber-d);
  border:1px dashed var(--amber-d);
  border-radius:var(--r-sm);
  padding:9px 14px;
  font-size:11.5px; line-height:1.5;
  margin:14px 4px 8px;
}
.lounge-dev-banner i { font-size:11px; }
.lounge-dev-banner strong { font-weight:800; }
.lounge-dev-banner a {
  color:var(--amber-d); text-decoration:underline; cursor:pointer;
  font-weight:700;
}
.lounge-dev-banner a:hover { color:var(--text); }

/* ラウンジ Shell */
.lounge-shell { max-width:760px; margin:0 auto; padding:0 var(--page-pad) 80px; }
.lounge-list-pane { position:relative; }
.lounge-top { padding:14px 4px 8px; }
.lounge-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.lounge-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:999px;
  background:var(--bg-elevated); border:1px solid var(--border-light);
  font-family:var(--font-sans); font-size:12px; font-weight:700; color:var(--text-2);
  cursor:pointer; transition:all var(--duration) var(--ease);
  white-space:nowrap;
}
.lounge-chip:hover { background:var(--bg); border-color:var(--border); color:var(--text); }
.lounge-chip.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.lounge-chip i { font-size:10.5px; }
.lounge-chip-coral.active { background:var(--coral); border-color:var(--coral); }
.lounge-chip-sage.active  { background:var(--sage);  border-color:var(--sage); }
.lounge-chip-amber.active { background:var(--amber-d); border-color:var(--amber-d); }
.lounge-chip-navy.active  { background:var(--navy);  border-color:var(--navy); }

/* 新着バナー（#70）: 離れている間に来た投稿・返信を知らせるだけ。押されるまで画面は作り直さない。
   位置（top / bottom）は lounge.js が実際のヘッダー・下タブバーの高さから決める。 */
.lounge-new-banner {
  position:fixed; left:50%; transform:translateX(-50%);
  z-index:880;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:999px;
  background:var(--navy); color:#fff; border:none;
  font-family:var(--font-sans); font-size:12.5px; font-weight:800;
  box-shadow:0 4px 16px rgba(27,45,91,.28);
  cursor:pointer; white-space:nowrap;
  animation:loungeBannerDown var(--duration) var(--ease);
}
.lounge-new-banner:hover { filter:brightness(1.1); }
.lounge-new-banner i { font-size:11px; }
.lounge-new-banner-bottom { animation:loungeBannerUp var(--duration) var(--ease); }
@keyframes loungeBannerDown {
  from { opacity:0; transform:translateX(-50%) translateY(-6px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
@keyframes loungeBannerUp {
  from { opacity:0; transform:translateX(-50%) translateY(6px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* カテゴリーチップの新着バッジ（絞り込みで隠れている新着を知らせる） */
.lounge-chip-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; margin-left:2px;
  border-radius:999px; background:var(--coral); color:#fff;
  font-size:9.5px; font-weight:800; line-height:1;
}
.lounge-chip.active .lounge-chip-badge { background:rgba(255,255,255,.3); }

/* カードの「新着」印（新着順だと返信の付いた古いスレッドは上に上がらず埋もれるため） */
.lounge-card-new {
  display:inline-block; margin-right:6px; padding:1.5px 6px;
  border-radius:999px; background:var(--coral); color:#fff;
  font-size:9.5px; font-weight:800; vertical-align:middle;
}

.lounge-sort-toggle { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.lounge-sort-btn, .lounge-archive-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 11px; border-radius:8px;
  background:var(--bg-elevated); border:1px solid var(--border-light);
  font-family:var(--font-sans); font-size:11.5px; font-weight:700; color:var(--text-3);
  cursor:pointer;
}
.lounge-sort-btn.active, .lounge-archive-btn.active { background:var(--text); color:#fff; border-color:var(--text); }
.lounge-archive-btn { margin-left:auto; }

.lounge-fab {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 18px;
  background:linear-gradient(135deg,var(--coral),var(--amber));
  color:#fff; border:none; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:13.5px; font-weight:800;
  cursor:pointer; margin:8px 0 14px;
  box-shadow:0 4px 16px rgba(214,99,82,.25);
  transition:transform var(--duration) var(--ease);
}
.lounge-fab:hover { transform:translateY(-1px); }

.lounge-thread-list { display:flex; flex-direction:column; gap:10px; }
.lounge-loading { text-align:center; padding:30px; color:var(--text-3); font-size:13px; }
/* 読み込みタイムアウト時の再読み込み表示 */
.lounge-load-error{ text-align:center; padding:36px 20px; color:var(--text-2); }
.lounge-load-error i{ font-size:26px; color:var(--amber-d); margin-bottom:12px; display:block; }
.lounge-load-error p{ font-size:13px; line-height:1.7; margin-bottom:16px; }
.lounge-reload-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy); color:#fff; border:none;
  padding:11px 22px; border-radius:var(--r-sm); cursor:pointer;
  font-family:var(--font-sans); font-size:13.5px; font-weight:700;
}

.lounge-card {
  background:var(--surface); border-radius:var(--r); padding:14px 16px;
  box-shadow:var(--sh-sm); border-left:4px solid var(--border-light);
  cursor:pointer; transition:transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.lounge-card:hover { transform:translateY(-1px); box-shadow:var(--sh); }
.lounge-card-coral { border-left-color:var(--coral); }
.lounge-card-sage  { border-left-color:var(--sage); }
.lounge-card-amber { border-left-color:var(--amber-d); }
.lounge-card-navy  { border-left-color:var(--navy); }

.lounge-author {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:6px;
}
.lounge-avatar {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--sage));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-sans); font-size:11px; font-weight:800;
  object-fit:cover; flex-shrink:0;
}
.lounge-avatar-lg { width:42px; height:42px; font-size:14px; }
.lounge-avatar-tiny { width:20px; height:20px; font-size:9px; }
.lounge-avatar-fallback { background:var(--bg-elevated); color:var(--text-2); }
img.lounge-avatar { background:none; }

.lounge-author-name { font-family:var(--font-sans); font-size:12.5px; font-weight:800; color:var(--text); }
.lounge-author-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:3px; }
.lounge-pill {
  background:var(--bg-elevated); color:var(--text-2); border:1px solid var(--border-light);
  padding:2px 8px; border-radius:999px;
  font-size:10px; font-weight:700; white-space:nowrap;
}
.lounge-time { font-size:11px; color:var(--text-3); margin-left:auto; }

.lounge-card-title {
  font-family:var(--font-sans); font-size:15px; font-weight:800; color:var(--text);
  margin:6px 0 6px; line-height:1.4;
  /* 空白の無い長い URL 等がカードを横にはみ出さないよう折り返す */
  overflow-wrap:break-word;
}
.lounge-card-body {
  font-size:13px; line-height:1.6; color:var(--text-2);
  margin:0 0 8px;
  /* 一覧プレビューの長い URL がカードをはみ出さないよう折り返す（普通の本文はそのまま） */
  overflow-wrap:break-word;
}
.lounge-event-meta {
  display:flex; gap:10px; flex-wrap:wrap;
  background:var(--bg-elevated); border-radius:var(--r-sm);
  padding:8px 10px; margin:6px 0 8px;
  font-size:11.5px; color:var(--text-2);
}
.lounge-event-meta span { display:inline-flex; align-items:center; gap:5px; }
.lounge-event-meta i { font-size:11px; color:var(--coral); }

.lounge-card-foot {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding-top:8px; border-top:1px dashed var(--border-light);
  flex-wrap:wrap;
}
.lounge-cat-tag {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--bg-elevated); padding:3px 9px; border-radius:999px;
  font-size:10.5px; font-weight:700; color:var(--text-2);
}
.lounge-cat-tag i { font-size:10px; }
.lounge-foot-stats { display:flex; gap:14px; font-size:13px; color:var(--text-3); }
.lounge-foot-stats span { display:inline-flex; align-items:center; gap:5px; font-weight:700; }
.lounge-foot-stats i { font-size:14px; }
.lounge-foot-stats .reacted i { color:var(--coral); }
/* 一覧カードから直接いいねを押せる小型ボタン（詳細を開かずに反応できる）。
   見た目は右下の統計テキストに馴染ませ、押しやすいよう余白で当たり判定を広げる。 */
.lounge-foot-like {
  display:inline-flex; align-items:center; gap:5px;
  font-weight:700; font-size:13px; color:var(--text-3);
  background:none; border:0; padding:3px 6px; margin:-3px -2px;
  font-family:inherit; line-height:1; cursor:pointer;
  border-radius:999px; -webkit-tap-highlight-color:transparent;
}
.lounge-foot-like i { font-size:14px; transition:transform .12s ease; }
.lounge-foot-like:active i { transform:scale(1.3); }
.lounge-foot-like.reacted i { color:var(--coral); }

/* 空状態 */
.lounge-empty {
  background:var(--surface); border-radius:var(--r);
  padding:32px 24px; text-align:center;
  box-shadow:var(--sh-sm);
}
.lounge-empty i { font-size:32px; color:var(--text-3); margin-bottom:12px; display:block; }
.lounge-empty h3 { font-family:var(--font-sans); font-size:15px; margin:0 0 6px; color:var(--text); }
.lounge-empty p { font-size:13px; color:var(--text-2); margin:0 0 14px; }

/* ─── 詳細画面 ─── */
.lounge-detail-pane { padding-top:8px; }
.lounge-detail-head { display:flex; align-items:center; gap:8px; padding:8px 0 12px; }
.lounge-back-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--border-light); color:var(--text-2);
  padding:7px 14px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:12.5px; font-weight:700;
  cursor:pointer; transition:all var(--duration) var(--ease);
}
.lounge-back-btn:hover { background:var(--bg-elevated); color:var(--text); }
.lounge-icon-btn, .lounge-icon-btn-sm {
  background:transparent; border:1px solid var(--border-light); color:var(--text-3);
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--duration) var(--ease);
}
.lounge-icon-btn-sm { width:28px; height:28px; font-size:11px; }
.lounge-icon-btn:hover, .lounge-icon-btn-sm:hover { background:var(--bg-elevated); color:var(--coral); border-color:var(--coral); }
.lounge-icon-btn { margin-left:auto; }
.lounge-icon-btn + .lounge-icon-btn { margin-left:6px; }

.lounge-thread-detail {
  background:var(--surface); border-radius:var(--r); padding:18px 20px;
  box-shadow:var(--sh-sm); border-left:4px solid var(--border-light);
}
.lounge-detail-title {
  font-family:var(--font-sans); font-size:19px; font-weight:800; color:var(--text);
  margin:10px 0 12px; line-height:1.4;
}
.lounge-detail-body {
  font-size:14px; line-height:1.8; color:var(--text);
  white-space:pre-wrap; word-break:break-word;
  margin:12px 0;
}
/* 本文・返信に貼られた URL のリンク表示（linkifyHtml が出力する <a>） */
.lounge-link {
  color:var(--coral-link); text-decoration:underline;
  text-underline-offset:2px; word-break:break-all;
}
.lounge-link:hover { color:var(--coral-link-hover); }
.lounge-event-block {
  background:var(--bg-elevated); border-radius:var(--r-sm);
  padding:14px 16px; margin:14px 0;
}
.lounge-event-meta-detail {
  display:flex; flex-direction:column; gap:6px;
  margin-bottom:12px;
}
.lounge-event-meta-detail div {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-2); font-weight:600;
}
.lounge-event-meta-detail i { color:var(--coral); width:18px; }

.lounge-detail-actions { padding-top:10px; border-top:1px dashed var(--border-light); }
.lounge-react-btn, .lounge-react-btn-sm {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--border-light); color:var(--text-2);
  padding:7px 16px; border-radius:999px;
  font-family:var(--font-sans); font-size:13px; font-weight:700;
  cursor:pointer; transition:all var(--duration) var(--ease);
}
.lounge-react-btn-sm { padding:5px 12px; font-size:11.5px; }
.lounge-react-btn:hover, .lounge-react-btn-sm:hover { background:var(--bg-elevated); border-color:var(--coral); color:var(--coral); }
.lounge-react-btn.reacted, .lounge-react-btn-sm.reacted {
  background:rgba(214,99,82,.10); color:var(--coral); border-color:var(--coral);
}
.lounge-react-btn.reacted i, .lounge-react-btn-sm.reacted i { color:var(--coral); }

.lounge-replies-head {
  font-family:var(--font-sans); font-size:13px; font-weight:800; color:var(--text-2);
  margin:24px 0 10px; display:flex; align-items:center; gap:8px;
}
.lounge-replies-head i { color:var(--sage); }
.lounge-replies-list { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.lounge-reply {
  background:var(--surface); border-radius:var(--r-sm); padding:12px 14px;
  border-left:3px solid var(--border-light);
}
.lounge-reply-body {
  font-size:13.5px; line-height:1.7; color:var(--text);
  white-space:pre-wrap; word-break:break-word;
  margin:6px 0;
}
.lounge-reply-actions { display:flex; gap:6px; margin-top:6px; }
.lounge-no-replies {
  text-align:center; padding:18px; color:var(--text-3); font-size:12.5px;
}

.lounge-reply-form {
  background:var(--surface); border-radius:var(--r); padding:14px 16px;
  box-shadow:var(--sh-sm); margin-bottom:30px;
}
.lounge-reply-form textarea {
  width:100%; padding:10px 12px;
  background:var(--bg-elevated); border:1px solid var(--border-light);
  border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:13.5px; line-height:1.6; color:var(--text);
  resize:vertical; min-height:80px;
}
.lounge-reply-form textarea:focus { outline:none; border-color:var(--sage); }
.lounge-reply-form-foot {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:10px; flex-wrap:wrap;
}
.lounge-form-hint { font-size:11px; color:var(--text-3); }
.lounge-submit-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--navy); color:#fff; border:none;
  padding:9px 18px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:13px; font-weight:700;
  cursor:pointer; transition:filter var(--duration) var(--ease);
}
.lounge-submit-btn:hover { filter:brightness(1.1); }

/* ─── 新規投稿モーダル ─── */
.lounge-form-overlay {
  position:fixed; inset:0; z-index:1400;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px; overflow-y:auto;
}
.lounge-form-modal {
  background:var(--surface); border-radius:var(--r);
  max-width:560px; width:100%; max-height:90vh; overflow-y:auto;
  display:flex; flex-direction:column;
  box-shadow:0 12px 48px rgba(0,0,0,.18);
}
.lounge-form-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--border-light);
}
.lounge-form-head h2 {
  font-family:var(--font-sans); font-size:16px; font-weight:800; color:var(--text);
  margin:0; display:flex; align-items:center; gap:8px;
}
.lounge-form-head h2 i { color:var(--coral); }
.lounge-form-close {
  background:none; border:none; font-size:24px; color:var(--text-3);
  cursor:pointer; line-height:1; padding:4px 8px;
}
.lounge-form-body { padding:20px 22px; flex:1; }
.lounge-form-foot {
  display:flex; gap:10px; justify-content:flex-end;
  padding:14px 22px; border-top:1px solid var(--border-light);
}
.lounge-btn-primary {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--navy); color:#fff; border:none;
  padding:10px 22px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:13.5px; font-weight:800;
  cursor:pointer; transition:filter var(--duration) var(--ease);
}
.lounge-btn-primary:hover { filter:brightness(1.1); }
.lounge-btn-ghost {
  background:transparent; border:1px solid var(--border-light); color:var(--text-2);
  padding:10px 18px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:13px; font-weight:700;
  cursor:pointer;
}
.lounge-btn-ghost:hover { background:var(--bg-elevated); color:var(--text); }

.lounge-form-section { margin-bottom:18px; }
.lounge-form-label {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-sans); font-size:13px; font-weight:800; color:var(--text);
  margin-bottom:8px;
}
.lounge-form-label i { color:var(--coral); }
.lounge-required {
  display:inline-block; padding:1px 7px; border-radius:999px;
  background:rgba(214,99,82,.12); color:var(--coral);
  font-size:10px; font-weight:800; letter-spacing:.3px;
}
.lounge-form-hint-inline { font-size:11px; color:var(--text-3); font-weight:500; }

.lounge-form-cat-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
@media(max-width:480px){ .lounge-form-cat-grid { grid-template-columns:1fr; } }
.lounge-form-cat {
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  background:var(--bg-elevated); border:1px solid var(--border-light);
  border-radius:var(--r-sm); padding:10px 12px;
  text-align:left; cursor:pointer;
  font-family:var(--font-sans);
  transition:all var(--duration) var(--ease);
}
.lounge-form-cat:hover { background:var(--bg); border-color:var(--border); }
.lounge-form-cat.active.lounge-chip-coral { background:rgba(214,99,82,.10); border-color:var(--coral); }
.lounge-form-cat.active.lounge-chip-sage  { background:rgba(74,122,88,.10); border-color:var(--sage); }
.lounge-form-cat.active.lounge-chip-amber { background:rgba(232,168,56,.14); border-color:var(--amber-d); }
.lounge-form-cat.active.lounge-chip-navy  { background:rgba(27,45,91,.08); border-color:var(--navy); }
.lounge-form-cat i { font-size:13px; color:var(--coral); }
.lounge-form-cat > span:not([class]) { font-size:11px; color:var(--text-3); font-weight:500; line-height:1.4; }

.lounge-form-input {
  width:100%; padding:9px 12px;
  background:var(--bg-elevated); border:1px solid var(--border-light); border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:13.5px; color:var(--text);
}
.lounge-form-input:focus { outline:none; border-color:var(--sage); }
.lounge-form-textarea { resize:vertical; line-height:1.6; min-height:120px; }
.lounge-form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
@media(max-width:480px){ .lounge-form-row { grid-template-columns:1fr; } }
.lounge-form-field { display:flex; flex-direction:column; gap:5px; }
.lounge-form-sublabel { font-size:11.5px; font-weight:700; color:var(--text-2); }
.lounge-form-event-block {
  background:var(--bg-elevated); border-radius:var(--r-sm); padding:14px;
}

/* 写真: フォームのピッカー */
.lounge-photo-grid { display:flex; flex-wrap:wrap; gap:8px; }
.lounge-photo-thumb {
  position:relative; width:72px; height:72px; border-radius:var(--r-sm);
  overflow:hidden; flex-shrink:0;
}
.lounge-photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.lounge-photo-remove {
  position:absolute; top:3px; right:3px;
  width:20px; height:20px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:10px; padding:0;
}
.lounge-photo-add {
  width:72px; height:72px; border-radius:var(--r-sm);
  background:var(--bg-elevated); border:1px dashed var(--border);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  cursor:pointer; color:var(--text-3);
  font-family:var(--font-sans); font-size:11px; font-weight:700;
}
.lounge-photo-add:hover { background:var(--bg); color:var(--text-2); }
.lounge-photo-add i { font-size:16px; }

/* 写真: 一覧カードのサムネ */
.lounge-card-photo {
  position:relative; margin:0 0 8px; border-radius:var(--r-sm); overflow:hidden;
  max-height:180px;
}
.lounge-card-photo img { width:100%; height:100%; max-height:180px; object-fit:cover; display:block; }
.lounge-photo-more {
  position:absolute; bottom:8px; right:8px;
  background:rgba(0,0,0,.65); color:#fff;
  padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:800;
}

/* 写真: 詳細のグリッド */
.lounge-detail-photos {
  display:grid; gap:6px; margin:12px 0;
}
.lounge-detail-photos-1 { grid-template-columns:1fr; }
.lounge-detail-photos-2 { grid-template-columns:1fr 1fr; }
.lounge-detail-photos-3, .lounge-detail-photos-4 { grid-template-columns:1fr 1fr; }
.lounge-detail-photos img {
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-sm);
  cursor:pointer; display:block;
}
.lounge-detail-photos-1 img { aspect-ratio:auto; max-height:420px; }

/* 写真: ライトボックス */
.lounge-lightbox {
  position:fixed; inset:0; z-index:1600;
  background:rgba(0,0,0,.9);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.lounge-lightbox img { max-width:100%; max-height:90vh; object-fit:contain; border-radius:6px; }
.lounge-lightbox-close {
  position:absolute; top:16px; right:18px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; border:none;
  font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lounge-form-note {
  font-size:11.5px; line-height:1.7; color:var(--text-3);
  padding:10px 12px; background:rgba(232,168,56,.06); border-radius:var(--r-sm);
}
.lounge-form-note i { color:var(--amber-d); margin-right:5px; }

/* ─── いいねした人 リンク ─── */
.lounge-reactors-link {
  background:none; border:none; cursor:pointer;
  font-family:var(--font-sans); font-size:12.5px; font-weight:600;
  color:var(--text-3); padding:6px 4px;
}
.lounge-reactors-link:hover { color:var(--coral); text-decoration:underline; }
.lounge-reactors-link-sm { font-size:11.5px; padding:5px 4px; }

/* ─── いいねした人 ボトムシート ─── */
.lounge-reactors-overlay {
  position:fixed; inset:0; z-index:1650;
  background:rgba(0,0,0,.45);
  display:none; align-items:flex-end; justify-content:center;
}
.lounge-reactors-sheet {
  width:100%; max-width:520px;
  max-height:70vh; display:flex; flex-direction:column;
  background:var(--surface);
  border-radius:16px 16px 0 0;
  box-shadow:0 -4px 24px rgba(0,0,0,.18);
  padding-bottom:env(safe-area-inset-bottom);
  animation:loungeSheetUp var(--duration) var(--ease);
}
@keyframes loungeSheetUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .lounge-reactors-sheet { animation:none; }
}
.lounge-reactors-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--border-light);
}
.lounge-reactors-head h2 {
  font-family:var(--font-sans); font-size:15px; font-weight:800; color:var(--text);
  margin:0; display:flex; align-items:center; gap:8px;
}
.lounge-reactors-head i { color:var(--coral); }
.lounge-reactors-body { flex:1; overflow-y:auto; padding:8px; }
.lounge-reactors-limit-note { padding:4px 12px 8px; color:var(--text-3); font-size:11px; }
.lounge-reactor-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-sm);
}
.lounge-reactor-name { font-size:14px; color:var(--text); font-weight:600; }
.lounge-reactors-empty { text-align:center; padding:32px 20px; color:var(--text-3); font-size:13px; }

/* ─── 通知ドロワー ─── */
.lounge-notif-overlay {
  position:fixed; inset:0; z-index:1300;
  background:rgba(0,0,0,.45);
}
.lounge-notif-drawer {
  position:fixed; top:0; right:0; bottom:0;
  width:360px; max-width:90vw;
  background:var(--surface);
  display:flex; flex-direction:column;
  box-shadow:-4px 0 24px rgba(0,0,0,.12);
}
.lounge-notif-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--border-light);
}
.lounge-notif-head h2 {
  font-family:var(--font-sans); font-size:15px; font-weight:800; color:var(--text);
  margin:0; display:flex; align-items:center; gap:8px;
}
.lounge-notif-head i { color:var(--coral); }
.lounge-notif-body { flex:1; overflow-y:auto; padding:8px; }
.lounge-notif-item {
  padding:12px 14px; border-radius:var(--r-sm);
  cursor:pointer; transition:background var(--duration) var(--ease);
  border-left:3px solid transparent;
}
.lounge-notif-item:hover { background:var(--bg-elevated); }
.lounge-notif-item.unread { border-left-color:var(--coral); background:rgba(214,99,82,.04); }
.lounge-notif-msg { font-size:13px; color:var(--text); line-height:1.5; margin-bottom:4px; }
.lounge-notif-msg .lounge-notif-sub { font-size:12px; color:var(--text-2); font-weight:400; margin-top:2px; }
.lounge-notif-time { font-size:11px; color:var(--text-3); }
.lounge-notif-empty { text-align:center; padding:32px 20px; color:var(--text-3); font-size:13px; }

/* 管理パネルの「イベント」タブ（js/features/events.js の initAdminEvents） */
.aev{display:flex;flex-direction:column;gap:14px;}
.aev-msg{text-align:center;padding:28px 12px;color:var(--text-3);font-size:13px;}
.aev-err{margin:0;font-size:13px;color:var(--coral-hover);}
.aev-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text);background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--r-sm);cursor:pointer;}
.aev-btn-danger{color:var(--coral-hover);border-color:rgba(180,72,60,.32);}
.aev-notice{margin:0;padding:10px 12px;border-radius:var(--r-sm);background:var(--bg);color:var(--text-2);font-size:13px;line-height:1.5;}
.aev-delete-note{align-self:center;font-size:11.5px;color:var(--text-3);}
.aev-btn:disabled{opacity:.6;cursor:default;}
.aev-btn-primary{align-self:flex-start;background:var(--navy);color:var(--surface);border-color:var(--navy);min-height:42px;padding:0 18px;font-size:14px;}
.aev-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.aev-form{display:flex;flex-direction:column;gap:6px;background:var(--bg);border-radius:12px;padding:16px;}
.aev-form-title{font-size:15px;font-weight:700;margin-bottom:4px;}
.aev-form label{font-size:12px;font-weight:700;color:var(--text-2);margin-top:6px;}
.aev-form input,.aev-form textarea,.aev-form select{width:100%;box-sizing:border-box;padding:10px 12px;font-family:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);}
.aev-form textarea{resize:vertical;line-height:1.6;}
.aev-form-actions{display:flex;gap:8px;margin-top:10px;}
.aev-form-actions .aev-btn-primary{align-self:auto;}
.aev-list{display:flex;flex-direction:column;gap:10px;}
.aev-row{background:var(--bg);border-radius:12px;padding:14px;}
.aev-row-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.aev-chip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--bg-elevated);color:var(--text-2);}
.aev-chip.is-open{background:var(--sage);color:var(--surface);}
.aev-chip.is-closed{background:var(--text-3);color:var(--surface);}
.aev-count{font-size:12.5px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;}
.aev-row-title{margin-top:6px;font-size:15px;font-weight:700;color:var(--text);}
.aev-row-meta{font-size:12.5px;color:var(--text-2);margin-top:2px;}
.aev-row-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.aev-people{margin:10px 0 0;padding:10px 12px 10px 30px;background:var(--surface);border-radius:var(--r-sm);font-size:13px;}
.aev-people li{padding:3px 0;}
.aev-people li span{margin-left:8px;font-size:11.5px;color:var(--text-3);}

/* 管理パネルの写真の並び */
.aev-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.aev-photo{position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--bg-elevated);}
.aev-photo img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.aev-photo-missing{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:8px;text-align:center;color:var(--text-3);font-size:11px;}
.aev-photo-cover{position:absolute;top:4px;left:4px;padding:1px 6px;border-radius:999px;background:var(--navy);color:var(--surface);font-size:10.5px;font-weight:700;}
.aev-photo-ops{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:4px;background:linear-gradient(to top,rgba(20,24,18,.55),transparent);}
.aev-photo-ops button{width:30px;height:30px;border:0;border-radius:50%;background:var(--surface);color:var(--text);font-size:12px;cursor:pointer;}
.aev-photo-ops button:disabled{opacity:.35;cursor:default;}
.aev-photo-add{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:1;border:1.5px dashed var(--border);border-radius:var(--r-sm);color:var(--text-2);font-size:12px;font-weight:700;cursor:pointer;background:var(--surface);}
.aev-photo-add input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.aev-photo-add:focus-within{outline:2px solid var(--gold);outline-offset:2px;}
.aev-photo-status{margin:6px 0 0;font-size:12.5px;color:var(--text-2);}

/* ═══════════ ホームの「今月のイベント」（Issue #109 / js/features/events.js） ═══════════
   B案: 写真を大きく出し、その上にイベント名と日時を白文字で重ねる。写真が無ければ緑の背景 */
.home-events{max-width:720px;margin:24px auto 0;padding:0 var(--page-pad);}

/* ── ホーム: 自己紹介の仕上げ／新しく参加したメンバー（js/features/home-members.js） ── */
.home-profile-nudge,.home-new-members{max-width:720px;margin:24px auto 0;padding:0 var(--page-pad);}
.hpn-card{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border-light);border-left:4px solid var(--teal);border-radius:var(--r);padding:16px;box-shadow:var(--sh-sm);}
.hpn-icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);color:var(--teal);font-size:17px;}
.hpn-body{min-width:0;padding-right:28px;}
.hpn-close{position:absolute;top:4px;right:4px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:50%;color:var(--text-3);font-size:16px;cursor:pointer;}
.hpn-close:focus-visible{outline:2px solid var(--navy);outline-offset:-4px;}
.hpn-title{margin:0 0 4px;font-size:15px;font-weight:800;color:var(--text);}
.hpn-text{margin:0 0 12px;font-size:13px;line-height:1.65;color:var(--text-2);}
.hpn-text strong{color:var(--text);}
.hpn-item{white-space:nowrap;}
.hpn-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border:none;border-radius:999px;background:var(--teal);color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;}
.hpn-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}

.hnm-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;}
.hnm-title{margin:0;font-family:var(--font-hero);font-weight:900;font-size:21px;letter-spacing:.01em;color:var(--text);}
.hnm-more{flex-shrink:0;background:none;border:none;padding:8px 0;font-family:inherit;font-size:13px;font-weight:700;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.hnm-track{list-style:none;margin:0 calc(-1 * var(--page-pad));padding:4px var(--page-pad) 8px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--page-pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.hnm-track::-webkit-scrollbar{display:none;}
.hnm-track:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;}
.hnm-item{flex:0 0 116px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border-light);border-radius:var(--r);padding:14px 8px 12px;box-shadow:var(--sh-sm);}
.hnm-card{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;background:none;border:none;padding:0;font-family:inherit;cursor:pointer;color:inherit;}
.hnm-card:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:8px;}
.hnm-card .mb-photo-lg,.hnm-card .mb-avatar-lg{width:64px;height:64px;font-size:24px;}
.hnm-name{max-width:100%;font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hnm-phase{font-size:11px;font-weight:700;color:var(--text-3);display:inline-flex;align-items:center;gap:4px;}
.hnm-error{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--r);padding:14px 16px;font-size:13px;color:var(--text-2);}
.hnm-error p{margin:0 0 10px;}
.hnm-retry{background:none;border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text-2);cursor:pointer;}
.ev-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;}
.ev-head-title{margin:0;font-family:var(--font-hero);font-weight:900;font-size:21px;letter-spacing:.01em;color:var(--text);}
.ev-head-en{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--amber-d);}
.ev-list{display:flex;flex-direction:column;gap:16px;}
.ev-card{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);}
.ev-card.is-draft{outline:2px dashed var(--border);outline-offset:-2px;}

/* 上半分: 写真＋重ねた文字 */
.ev-hero{position:relative;aspect-ratio:4/3;background:var(--bg-elevated);}
.ev-hero.no-photo{aspect-ratio:auto;min-height:168px;background:linear-gradient(140deg,var(--navy-light),var(--header-dark));}
.ev-photo-track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.ev-photo-track::-webkit-scrollbar{display:none;}
.ev-photo-track:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.ev-photo{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;display:block;}
/* 文字を読みやすくする下からの影。スワイプの邪魔をしないよう指の操作は写真に通す */
.ev-hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(12,16,10,.82) 0%,rgba(12,16,10,.35) 45%,transparent 70%);}
.ev-hero.no-photo .ev-hero-shade{display:none;}
.ev-hero-text{position:absolute;left:16px;right:16px;bottom:16px;pointer-events:none;color:var(--surface);}
.ev-hero.no-photo .ev-hero-text{position:relative;left:auto;right:auto;bottom:auto;padding:22px 16px 18px;}
.ev-state{display:inline-block;margin-bottom:8px;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;background:var(--gold-soft);color:var(--brown);}
.ev-state.is-closed,.ev-state.is-draft{background:rgba(255,255,255,.88);color:var(--text-2);}
.ev-state.is-live{background:var(--coral);color:var(--surface);}
.ev-title{margin:0 0 6px;font-family:var(--font-hero);font-weight:900;font-size:25px;line-height:1.25;letter-spacing:.01em;color:inherit;text-wrap:balance;text-shadow:0 1px 8px rgba(0,0,0,.25);}
.ev-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:13.5px;font-weight:500;}
.ev-meta span{display:inline-flex;align-items:center;gap:6px;}
.ev-meta i{font-size:12px;opacity:.9;}
.ev-photo-dots{position:absolute;top:12px;right:12px;display:flex;gap:6px;pointer-events:none;}
.ev-photo-dots span{width:7px;height:7px;border-radius:50%;background:var(--surface);opacity:.55;box-shadow:0 0 3px rgba(0,0,0,.3);transition:opacity var(--duration) var(--ease);}
.ev-photo-dots span.on{opacity:1;}

/* 下半分 */
.ev-body{padding:14px 16px 16px;}
.ev-desc{margin:0 0 14px;font-size:14px;line-height:1.7;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;}
.ev-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;border:0;border-radius:999px;background:var(--gold);color:var(--brown);font-family:var(--font-hero);font-size:16px;font-weight:900;cursor:pointer;transition:background var(--duration) var(--ease),transform var(--duration) var(--ease);}
.ev-btn:hover{background:var(--gold-soft);}
.ev-btn:active{transform:scale(.98);}
.ev-btn:disabled{opacity:.6;cursor:default;transform:none;}
.ev-btn:focus-visible,.ev-btn-link:focus-visible,.ev-people-link:focus-visible,.ev-person:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.ev-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:50px;padding:0 6px 0 16px;border-radius:999px;background:var(--bg);}
.ev-going{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-hero);font-size:16px;font-weight:900;color:var(--sage-dark);}
.ev-btn-link{background:none;border:0;padding:10px 12px;font-family:inherit;font-size:13px;color:var(--text-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.ev-btn-link:disabled{cursor:default;text-decoration:none;}
.ev-btn-ghost{display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:40px;padding:0 18px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--navy);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.ev-note{margin:0;font-size:13.5px;color:var(--text-2);}
.ev-note i{margin-right:4px;color:var(--text-3);}
.ev-error-msg{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--coral-hover);}
.ev-card-error{padding:16px;}

/* 参加者 */
.ev-people-link{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:12px 0 0;border:0;border-top:1px solid var(--border-light);background:none;font-family:inherit;text-align:left;color:inherit;cursor:pointer;}
.ev-people-link:disabled{cursor:default;}
.ev-avs{display:flex;flex-shrink:0;}
.ev-av{width:28px;height:28px;border-radius:50%;border:2px solid var(--surface);object-fit:cover;background:var(--bg-elevated);flex-shrink:0;}
.ev-avs .ev-av + .ev-av{margin-left:-8px;}
.ev-av-initial{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text-2);}
.ev-people-count{flex:1;min-width:0;font-size:13px;color:var(--text-2);}
.ev-people-count b{font-family:var(--font-hero);font-weight:900;font-size:15px;color:var(--navy);margin-right:2px;}
.ev-people-more{flex-shrink:0;font-size:13px;font-weight:700;color:var(--navy);}
.ev-people-more i{font-size:11px;margin-left:2px;}
.ev-people{list-style:none;margin:10px 0 0;padding:0;}
.ev-people li + li{border-top:1px solid var(--border-light);}
.ev-person{display:flex;align-items:center;gap:12px;width:100%;padding:10px 2px;border:0;background:none;font-family:inherit;text-align:left;color:inherit;cursor:pointer;}
.ev-person .ev-av{width:38px;height:38px;border:0;}
.ev-person-text{flex:1;min-width:0;}
.ev-person-text b{display:block;font-size:14px;font-weight:700;color:var(--text);}
.ev-person-text small{display:block;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ev-person > i{font-size:12px;color:var(--text-3);}
.ev-person.is-loading{opacity:.55;cursor:progress;}
.ev-people-rest{padding:10px 2px;font-size:12.5px;color:var(--text-3);}
.ev-attend-empty{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border-light);font-size:13px;color:var(--text-3);}

/* イベントタブ: 「これから / 過去」の切り替え */
.ev-seg{display:flex;gap:6px;max-width:720px;margin:16px auto 0;padding:0 var(--page-pad);}
.ev-seg-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-2);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background var(--duration) var(--ease),color var(--duration) var(--ease),border-color var(--duration) var(--ease);}
.ev-seg-btn i{font-size:13px;}
.ev-seg-btn.active{background:var(--navy);border-color:var(--navy);color:var(--surface);}
.ev-seg-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* イベントタブ（これまでのイベント／アーカイブ） */
.evarc-msg{max-width:720px;margin:28px auto;padding:0 var(--page-pad);text-align:center;color:var(--text-2);font-size:14px;}
.evarc-err p{margin:0 0 4px;}
.evarc-none{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border-light);font-size:13px;color:var(--text-3);}
.evarc-mine-row{margin-top:10px;}
.evarc-mine{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--navy);}
.evarc-mine i{color:var(--amber-d);}
.evarc-empty{max-width:520px;margin:40px auto;padding:36px 24px;text-align:center;}
.evarc-empty-icon{font-size:34px;color:var(--border);margin-bottom:14px;}
.evarc-empty-title{margin:0 0 6px;font-family:var(--font-hero);font-weight:900;font-size:17px;color:var(--text);}
.evarc-empty-sub{margin:0;font-size:13px;color:var(--text-3);line-height:1.7;}

@media(max-width:600px){
  .home-events{margin-top:20px;}
  .ev-title{font-size:23px;}
}
@media(prefers-reduced-motion:reduce){
  .ev-btn,.ev-photo-dots span{transition:none;}
}

/* ═══════════════ 不具合・ご要望フォーム（js/features/feedback.js） ═══════════════ */
/* 右下に浮かぶボタン。下部ナビ（高さ約60px・z-index:950）のすぐ上に置き、ナビより下の重なり順にする */
.feedback-fab{
  position:fixed; right:16px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:940;
  width:64px; height:64px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--navy); color:#fff; border:none; cursor:pointer;
  font-size:17px; box-shadow:0 4px 14px rgba(32,36,30,.22);
  transition:transform var(--duration) var(--ease);
}
/* マークだけでは何のボタンかわからないので、下に小さく文字を添える（下部ナビと同じ見せ方） */
.feedback-fab-label{
  display:block; font-family:var(--font-sans); font-size:9px; font-weight:700;
  line-height:1; letter-spacing:-.02em; white-space:nowrap;
}
.feedback-fab:active{ transform:scale(.94); }
.feedback-fab:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

/* 下からせり上がるシート（投稿フォームと同じ出方。高さは中身に合わせる） */
.feedback-overlay{
  display:none; position:fixed; inset:0; z-index:1250;
  background:rgba(0,0,0,.5); backdrop-filter:blur(6px);
  align-items:flex-end; justify-content:center;
}
.feedback-overlay.show{ display:flex; }
.feedback-sheet{
  background:var(--surface); width:100%; max-width:600px; max-height:90vh;
  border-radius:var(--r-lg) var(--r-lg) 0 0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:env(safe-area-inset-bottom);
  animation:slideUp .3s var(--ease);
}
@media(min-width:768px){
  .feedback-overlay.show{ align-items:center; }
  .feedback-sheet{ border-radius:var(--r-lg); }
}
.feedback-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 16px 0 20px; }
.feedback-title{ font-size:16px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; margin:0; }
.feedback-title i{ color:var(--sage); }
.feedback-close{
  background:none; border:none; font-size:24px; color:var(--text-3); cursor:pointer; line-height:1;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.feedback-body{ padding:12px 20px 20px; }
.feedback-lead{ font-size:13px; color:var(--text-2); line-height:1.7; margin:0 0 16px; }
.feedback-kinds{ display:flex; gap:8px; flex-wrap:wrap; }
.feedback-kind{
  flex:1 1 auto; min-height:44px; padding:10px 12px;
  border:1.5px solid var(--border); border-radius:var(--r-sm); background:var(--bg);
  font-family:inherit; font-size:13px; font-weight:700; color:var(--text-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:border-color var(--duration), background var(--duration), color var(--duration);
}
.feedback-kind[aria-checked="true"]{ border-color:var(--navy); background:var(--navy); color:#fff; }
.feedback-textarea{ min-height:140px; font-size:16px; } /* 16px 未満だと iPhone が入力時に拡大する */
.feedback-count{ text-align:right; font-size:11px; color:var(--text-3); margin-top:4px; }
.feedback-error{ font-size:13px; color:var(--coral); line-height:1.6; margin:0 0 12px; }
.feedback-submit{
  width:100%; min-height:48px; border:none; border-radius:var(--r-sm);
  background:var(--navy); color:#fff; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.feedback-submit:disabled{ opacity:.6; cursor:default; }
.feedback-done{ padding:28px 20px 24px; text-align:center; }
.feedback-done > i{ font-size:40px; color:var(--sage); margin-bottom:12px; }
.feedback-done-title{ font-size:16px; font-weight:700; color:var(--text); margin:0 0 6px; }
.feedback-done-text{ font-size:13px; color:var(--text-2); margin:0 0 20px; }
@media(prefers-reduced-motion:reduce){
  .feedback-sheet{ animation:none; }
  .feedback-fab,.feedback-kind{ transition:none; }
}
@media print{ .feedback-fab,.feedback-overlay{ display:none!important; } }

/* 審査中画面の「ホーム画面に追加」ブロック（中身は install-prompt.js が環境に合わせて入れる） */
.eg-install{ margin:0 0 26px; }
.eg-install-title{
  display:flex; align-items:flex-start; gap:8px; margin:0 0 6px;
  font-family:var(--font-sans); font-size:14px; font-weight:800; line-height:1.5; color:var(--text);
}
.eg-install-title i{ color:var(--navy); margin-top:3px; }
.eg-install .hpn-text{ margin-bottom:10px; }
/* 手順の番号つきリスト（審査中画面・メンバーのホームのカードで共用） */
.iap-steps{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:1.6; color:var(--text); }
.iap-steps i{ color:var(--navy); }
.iap-sub{ display:block; font-size:11.5px; color:var(--text-3); }
.iap-note{ margin:10px 0 0; font-size:11.5px; line-height:1.6; color:var(--text-3); }

/* 参加申請の最後の「メンバーにはこう見えます」。一覧と同じカードを、押せない見本として出す */
.app-preview{ margin:0 0 22px; padding:14px; background:var(--bg-elevated); border-radius:var(--r-sm); }
.app-preview .mb-card-preview{ cursor:default; margin:0; }
/* プレビューの下の「直す」ボタン。押すとその質問の画面に直接飛ぶ */
.app-edit-lead{ margin:0 0 8px; font-size:12px; font-weight:800; color:var(--text-3); }
.app-edit-row{ display:flex; flex-wrap:wrap; gap:8px; }
.app-edit-btn{
  display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px;
  background:var(--surface); border:1px solid var(--border-light); border-radius:999px;
  font-family:var(--font-sans); font-size:13px; font-weight:700; color:var(--text); cursor:pointer;
}
.app-edit-btn i{ font-size:11px; color:var(--text-3); }
.app-edit-btn:hover{ border-color:var(--border); }
/* 申請の最後の「3rd Place で大切にしていること」と、1つだけの同意チェック */
.app-rules{ padding:16px; background:var(--bg-elevated); border-radius:var(--r-sm); margin:0 0 20px; }
.app-rules-title{ margin:0 0 10px; font-family:var(--font-sans); font-size:13px; font-weight:800; color:var(--text); }
.app-rules-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.app-rules-list li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; line-height:1.6; color:var(--text); }
.app-rules-list i{ color:var(--sage); font-size:12px; margin-top:5px; flex-shrink:0; }
.app-consent-one{ font-size:14px; font-weight:700; }
.app-legal-link{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.eg-legal{ margin:4px 0 0; font-size:11.5px; color:var(--text-3); display:flex; gap:4px; }
.eg-legal a{ color:var(--text-3); text-decoration:underline; text-underline-offset:2px; }
/* スタート画面のボタン下の一言。ログアウトしたメンバーが「また申請させられる？」と迷わないように */
.eg-member-note{ margin:2px 0 0; font-size:12.5px; font-weight:700; color:var(--text-2); text-align:center; }

/* ───────── 入口ゲートのスタート画面（ログイン前）─────────
   メンバー向けホームのヒーロー（.home-hero）と同じ深い緑。上＝見出しと人の気配、下の白いシート＝3ステップと LINE のボタン */
.entry-gate[data-screen="guest"]{
  background:linear-gradient(165deg, var(--navy-light) 0%, var(--header) 50%, var(--header-dark) 100%);
}
.entry-gate[data-screen="guest"] .eg-inner{ padding:0; position:relative; isolation:isolate; overflow:hidden; }
/* 右上の金色の光と、紙のようなざらつき */
.entry-gate[data-screen="guest"] .eg-inner::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:460px; height:460px; top:-190px; right:-170px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,192,121,.45), rgba(201,162,75,.08) 50%, transparent 70%);
  filter:blur(30px); animation:heroDrift1 16s ease-in-out infinite alternate;
}
.entry-gate[data-screen="guest"] .eg-inner::after{
  content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.13; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.egs-hero{ flex:1 0 auto; display:flex; flex-direction:column; padding:22px 24px 0; color:#fff; }
/* アプリ名。ロゴと「3rd Place Hub」を左上に並べる */
.egs-brand{ display:flex; align-items:center; gap:10px; }
.egs-brand img{ height:36px; width:36px; border-radius:50%; display:block; }
.egs-name{ font-family:var(--font-hero); font-size:19px; font-weight:900; letter-spacing:.01em; color:#fff; }
.egs-name em{ font-style:normal; color:var(--gold-soft); }
/* つながりの絵。アプリ名と見出しの間の余った高さを使う（背の低い画面では縮み、入らなければ消える） */
/* 絵は高さの計算に入れない（絶対配置）。入れると絵の大きさのぶん画面が伸びて、背の低いスマホでスクロールが出るため */
.egs-art-wrap{ flex:1 1 0; min-height:0; position:relative; }
.egs-art{ position:absolute; left:0; right:0; top:14px; bottom:0; margin:auto; width:100%; max-width:340px; height:calc(100% - 14px); max-height:240px; overflow:visible; }
.egs-art-lines line{ stroke:rgba(224,192,121,.55); stroke-width:1.6; stroke-dasharray:3 5; stroke-linecap:round; }
.egs-art-p{ animation:egsFloat 6s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center; }
.egs-art-p > circle:first-child{ stroke:var(--header); stroke-width:3; }
.egs-art-coral > circle:first-child{ fill:var(--coral); }
.egs-art-teal  > circle:first-child{ fill:var(--teal); }
.egs-art-gold  > circle:first-child{ fill:var(--gold); }
.egs-art-plum  > circle:first-child{ fill:var(--plum); }
.egs-art-sage  > circle:first-child{ fill:var(--sage); }
.egs-art-head, .egs-art-body{ fill:rgba(255,255,255,.88); }
@keyframes egsFloat{ from{ transform:translateY(-3px); } to{ transform:translateY(4px); } }
/* 見出しと人数は、シートのすぐ上にまとめて置く */
.egs-center{ flex:0 0 auto; padding:clamp(18px,3vh,30px) 0 clamp(28px,4.5vh,40px); }
.egs-eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0;
  font-family:var(--font-hero); font-size:11px; font-weight:700; letter-spacing:2.4px; color:var(--gold-soft);
  animation:heroFadeUp .6s cubic-bezier(.2,.8,.3,1) both;
}
.egs-eyebrow::after{ content:''; width:24px; height:1px; background:currentColor; opacity:.6; }
.egs-title{
  font-family:var(--font-hero); font-weight:900; font-size:clamp(29px,4.1vh,36px); line-height:1.4; letter-spacing:.01em;
  color:#fff; margin:12px 0 0; animation:heroFadeUp .7s cubic-bezier(.2,.8,.3,1) .08s both;
}
.egs-title em{ font-style:normal; color:var(--gold-soft); position:relative; z-index:0; }
.egs-title em::after{
  content:''; position:absolute; z-index:-1; left:0; right:0; bottom:2px; height:8px;
  background:rgba(224,192,121,.22); border-radius:4px;
}
/* 人数（380+）。絵の丸と重複しないよう、ここは文字だけ */
.egs-proof{ margin:16px 0 0; display:flex; align-items:baseline; gap:10px; animation:heroFadeUp .7s cubic-bezier(.2,.8,.3,1) .2s both; }
.egs-proof b{ font-family:var(--font-hero); font-size:24px; font-weight:900; line-height:1; color:#fff; }
.egs-proof span{ font-size:12.5px; color:rgba(255,255,255,.72); }
/* 下からせり上がる白いシート */
.egs-sheet{
  background:var(--surface); color:var(--text);
  border-radius:28px 28px 0 0; padding:24px 24px calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:6px;
  animation:heroFadeUp .7s cubic-bezier(.2,.8,.3,1) .4s both;
}
/* 参加までの3ステップ（点線の路線でつなぐ） */
.egs-route{ list-style:none; margin:0 0 18px; padding:0; width:100%; display:flex; justify-content:space-between; position:relative; }
.egs-route::before{
  content:''; position:absolute; left:14px; right:14px; top:15px; height:2px;
  background:repeating-linear-gradient(90deg, var(--navy) 0 6px, transparent 6px 11px);
}
.egs-route li{
  position:relative; width:33%; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-sans); font-size:13.5px; font-weight:700; line-height:1.4; color:var(--text); text-align:center;
}
.egs-route i{
  width:32px; height:32px; border-radius:50%; background:var(--surface); border:2px solid var(--navy);
  display:inline-flex; align-items:center; justify-content:center;
  font-style:normal; font-size:14px; font-weight:900; color:var(--navy);
}
.egs-route li:first-child i{ background:var(--navy); color:#fff; }
.egs-line-btn{ border-radius:999px; min-height:54px; font-family:var(--font-hero); font-size:16px; letter-spacing:.04em; box-shadow:0 10px 24px rgba(6,199,85,.28); }
.egs-sheet .eg-legal{ justify-content:center; margin-top:2px; }
/* 審査中画面の「承認されたら LINE で…」と、却下画面の運営コメント */
.eg-notice{
  display:flex; align-items:flex-start; gap:9px; margin:-10px 0 24px; padding:11px 14px;
  background:rgba(6,199,85,.08); border-radius:var(--r-sm);
  font-size:13px; font-weight:700; line-height:1.6; color:var(--text);
}
.eg-notice i{ color:var(--brand-line); font-size:17px; margin-top:2px; }
.eg-icon-muted{ color:var(--text-3); }
.eg-reason{ margin:-8px 0 20px; padding:14px 16px; background:var(--bg-elevated); border-radius:var(--r-sm); }
.eg-reason-label{ margin:0 0 4px; font-size:11.5px; font-weight:800; color:var(--text-3); }
.eg-reason-text{ margin:0; font-size:14px; line-height:1.75; color:var(--text); white-space:pre-wrap; }
.eg-lead-sm{ font-size:12.5px; }
.eg-lead a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; word-break:break-all; }

/* ───────── 審査中画面の「ホーム画面に追加しよう」カード（押すと説明画面が開く） ─────────
   目に入るように、スタート画面と同じ深い緑のカードにして、スマホとアプリのアイコンの絵を添える */
.ig-card{
  width:100%; display:flex; align-items:center; gap:14px; padding:16px 16px 16px 14px; text-align:left;
  background:linear-gradient(150deg, var(--navy-light), var(--header) 60%, var(--header-dark));
  border:none; border-radius:var(--r); color:#fff; cursor:pointer;
  box-shadow:0 10px 24px rgba(41,76,56,.25); position:relative; overflow:hidden;
}
.ig-card::before{
  content:''; position:absolute; width:180px; height:180px; right:-60px; top:-90px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,192,121,.35), transparent 70%); pointer-events:none;
}
.ig-card-phone{
  flex-shrink:0; width:46px; height:76px; border-radius:11px; border:2.5px solid rgba(255,255,255,.85);
  display:flex; align-items:flex-start; justify-content:center; padding-top:12px; background:rgba(255,255,255,.08);
}
.ig-card-app{
  width:26px; height:26px; border-radius:7px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 0 0 3px rgba(224,192,121,.55); animation:igPulse 2.2s ease-in-out infinite;
}
.ig-card-app img{ width:100%; height:100%; object-fit:cover; }
@keyframes igPulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(224,192,121,.55); } 50%{ box-shadow:0 0 0 7px rgba(224,192,121,.15); } }
.ig-card-body{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; position:relative; }
.ig-card-kicker{ font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--gold-soft); }
.ig-card-title{ font-family:var(--font-hero); font-size:17px; font-weight:900; line-height:1.35; }
.ig-card-sub{ font-size:12px; line-height:1.5; color:rgba(255,255,255,.78); }
.ig-card-go{ font-size:15px; color:rgba(255,255,255,.85); position:relative; }

/* 説明画面（入口ゲート 1450 より上） */
.ig-overlay{ position:fixed; inset:0; z-index:1600; display:none; background:var(--surface); overflow-y:auto; }
.ig-overlay.show{ display:block; }
.ig-modal{ position:relative; max-width:480px; margin:0 auto; padding:20px 24px calc(28px + env(safe-area-inset-bottom)); }
/* 動画のない短い説明は、画面の上下の真ん中に置く */
.ig-modal-center{ min-height:100dvh; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; }
.ig-close{
  position:absolute; top:12px; right:12px; width:40px; height:40px; border:none; border-radius:50%;
  background:var(--bg-elevated); color:var(--text-2); font-size:18px; cursor:pointer; z-index:1;
}
/* スマホの枠。中で操作の動画が流れる */
.ig-phone{
  /* 縦横の比率は録画（1180×2398）に合わせる。ずれると動画の左右が切れて、右下のボタンが見えなくなるため */
  width:min(176px, 46vw); aspect-ratio:1180/2398; margin:22px auto 0; padding:8px;
  border-radius:32px; background:var(--text); box-shadow:0 18px 40px rgba(26,14,6,.22);
}
.ig-screen{ position:relative; width:100%; height:100%; border-radius:25px; overflow:hidden; background:var(--bg-elevated); }
.ig-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s; }
.ig-screen.has-video .ig-video{ opacity:1; }
.ig-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--text-3); font-size:12px; font-weight:700;
}
.ig-placeholder i{ font-size:30px; color:var(--navy); }
.ig-screen.has-video .ig-placeholder{ display:none; }
/* Android（動画なし）: ホーム画面に並んだアイコンの絵 */
.ig-screen-home{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(165deg, var(--navy-light), var(--header-dark));
}
.ig-app-lg{ width:58px; height:58px; border-radius:15px; }
.ig-app-name{ font-size:11px; font-weight:700; color:#fff; }
.ig-title{ margin:20px 0 8px; font-family:var(--font-hero); font-size:23px; font-weight:900; line-height:1.4; color:var(--text); text-align:center; }
.ig-lead{ margin:0 0 20px; font-size:13.5px; line-height:1.75; color:var(--text-2); text-align:center; }
/* 大きな番号つきの手順 */
.ig-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ig-steps li{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px; background:var(--bg); border-radius:var(--r-sm); }
.ig-num{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-hero); font-size:15px; font-weight:900;
}
.ig-steps strong{ display:block; font-family:var(--font-sans); font-size:15px; font-weight:800; line-height:1.5; color:var(--text); }
.ig-steps strong i{ color:var(--navy); margin:0 2px; }
.ig-steps small{ display:block; margin-top:2px; font-size:12px; line-height:1.55; color:var(--text-3); }
.ig-action{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; margin-top:20px;
  border:none; border-radius:999px; background:var(--navy); color:#fff;
  /* 押してほしいボタンなので、説明が長くても画面の下に見え続けるようにする */
  position:sticky; bottom:calc(14px + env(safe-area-inset-bottom)); box-shadow:0 8px 20px rgba(41,76,56,.3);
  font-family:var(--font-hero); font-size:16px; font-weight:700; cursor:pointer;
}
.ig-note{ margin:16px 0 0; font-size:12px; line-height:1.65; color:var(--text-3); text-align:center; }
/* 申請を送った直後の画面（スマホのブラウザ）。上に「受け付けました」、続けて「あと1つ：ホーム画面に追加」の説明 */
.app-done .app-modal-body{ padding-top:22px; }
.app-done-banner{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:rgba(74,122,88,.12); border-radius:var(--r-sm);
}
.app-done-banner > i{ font-size:26px; color:var(--sage); flex-shrink:0; }
.app-done-banner strong{ display:block; font-family:var(--font-hero); font-size:16px; font-weight:900; color:var(--text); }
.app-done-banner span{ display:block; font-size:12.5px; line-height:1.6; color:var(--text-2); }
.app-done-kicker{
  margin:26px 0 -10px; text-align:center;
  font-family:var(--font-hero); font-size:13px; font-weight:900; letter-spacing:.12em; color:var(--coral);
}
.app-done .ig-phone{ margin-top:18px; }