:root{
  --bg:#f6f7fb; --card:#fff; --border:#e5e7eb; --text:#111827;
  --muted:#6b7280; --brand:#4f46e5; --brand-2:#4338ca;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
     color:var(--text); background:var(--bg);}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:none}
.container{max-width:1000px;margin:0 auto;padding:0 16px}
.flex-row{display:flex;gap:12px;align-items:center}
.between{justify-content:space-between}



/* --- nav ボタンの色を .nav a の色上書きから守る --- */
.nav a.btn,
.nav .btn {
  color: #fff !important;               /* ソリッドボタンは白文字 */
  background: var(--brand);
  border-color: var(--brand);
}

.nav a.btn:hover,
.nav .btn:hover {
  background: var(--brand-2);
  border-color: var(--brand-2);
}

/* もしログインをゴーストにしたい場合はこれを使う（今回は未使用）
.nav a.btn.ghost {
  background: #fff;
  color: var(--brand) !important;
  border-color: var(--brand);
}
*/

/* フォームを横並び維持（ログアウト用） */
.nav form.inline { display: inline; margin: 0; }




.site-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.brand{font-weight:800;font-size:22px;padding:10px 0;display:block}
.nav a{margin:0 8px;padding:8px 4px;color:#374151}
.nav .btn{margin-left:8px}

.main{padding:24px 0}
.site-footer{margin-top:40px;padding:24px 0;border-top:1px solid var(--border);color:var(--muted);background:#fff}

/* components */
.panel{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px}
.panel.narrow{max-width:520px;margin:0 auto}
.panel-title{margin:0 0 12px 0; font-size:18px; font-weight:700}
.section-title{font-weight:700;margin:12px 0}
.mb8{margin-bottom:8px} .mt8{margin-top:8px} .mt16{margin-top:16px}
.muted{color:var(--muted)} .alert{background:#fff8e1;border:1px solid #f3e8c8;padding:8px 12px;border-radius:8px;margin-bottom:12px}

.input,.select,.textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); background:#fff;
  border-radius:8px; outline:none;
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand)}
.textarea{min-height:120px; resize:vertical}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:8px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; font-weight:600; cursor:pointer;
}
.btn:hover{background:var(--brand-2); border-color:var(--brand-2)}
.btn.small{padding:6px 10px; font-size:14px}
.btn.ghost{background:#fff; color:var(--brand); border-color:var(--brand)}
.btn.link{background:transparent;border:none;color:var(--brand);padding:8px}

.toolbar{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;margin: 0}
.toolbar-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.toolbar-item{display:flex;gap:8px;align-items:center}

.grid-2{display:grid;grid-template-columns:1fr 1fr}
.grid-col{display:flex;flex-direction:column;gap:6px}
.grid-full{grid-column:1 / -1}
.gap{gap:12px}
.label{font-size:13px;color:var(--muted)}

.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:12px}
.card-body{padding:12px}
.card-title{font-weight:700;font-size:16px;color:#111827}
.card-meta{color:var(--muted);font-size:12px;margin:6px 0}
.card-text{margin:8px 0 10px 0;color:#111827}
.card-actions{display:flex;gap:12px;align-items:center}

.comments{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.comment{padding:12px;border:1px solid var(--border);border-radius:10px;background:#fff}

.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin:16px 0}

@media (max-width:800px){
  .cards{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}





/* --- like / bookmark をチップ風に --- */
.card-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.inline{display:inline-block;margin:0}            /* フォームの余白ゼロ */

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);background:#fff;
  color:#374151;font-weight:500;line-height:1; cursor:pointer;
}
.chip i{font-size:14px}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 既存 .btn に影響しないよう分離。不要なら .btn から使い回してもOK */
.icon-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}

.icon-btn:hover {
  opacity: 0.7;
}

.icon-btn.active {
  color: var(--brand);
}




.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  margin-top: 1rem;
}

.footer-nav a {
  color: var(--muted);
  font-size: 14px;
}

.footer-nav a:hover {
  color: var(--brand);
}




.btn.danger{
  background:#ef4444; border-color:#ef4444;
}
.btn.danger:hover{
  background:#dc2626; border-color:#dc2626;
}




/* 2カラムレイアウト */
.layout{
  display:grid;
  grid-template-columns: 1fr 300px; /* ← メインを少し狭く、右に300pxのサイド */
  gap:16px;
}
.layout-main{min-width:0}
.layout-side{position:sticky; top:72px; height:max-content}

@media (max-width: 960px){
  .layout{grid-template-columns: 1fr}
  .layout-side{position:static}
}

/* お知らせ一覧 */
.ann-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ann-list .ann-title{font-weight:700;color:#111827}
.ann-list .ann-meta{font-size:12px;color:var(--muted)}
.ann-list.large .ann-item{padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.ann-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:6px}
.ann-body{color:#111827}










/* コメントのネストインデント（最大5段想定、必要なら拡張） */
.thread .comment{ background:#fff }
.depth-0{ margin-left: 0 }
.depth-1{ margin-left: 16px }
.depth-2{ margin-left: 32px }
.depth-3{ margin-left: 48px }
.depth-4{ margin-left: 64px }
.depth-5{ margin-left: 80px }

/* summary をリンク風に */
.link-like {
  cursor: pointer;
  color: var(--brand);
  list-style: none;
}
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }



.card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px; margin-bottom: 8px;}
.tag{
  display:inline-block;padding:4px 8px;border:1px solid var(--border);
  border-radius:999px;background:#fff;font-size:12px;color:#374151;
}
.tag:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}



/* ボックスは .input の見た目を継承。中身を横並びに */
.input.tagsbox {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: 0 .75rem;         /* ← あなたの .input に合わせる */
  min-height: 2.35rem;        /* ← 同上 */
}

/* チップ */
.tag-chip{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: 0 .5rem;
  border-radius: .375rem;
  background: var(--chip-bg, #eef2f7);
  border: 1px solid var(--chip-bd, #d8dee9);
  font-size: .875rem;
  line-height: 1.8;
  margin: 5px;
}

.tag-chip__x{
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}

/* 追加入力は枠線ナシで馴染ませる（高さはボックスに合わせる） */
.tagsbox__entry{
  border: 0;
  outline: none;
  flex: 1;
  min-width: 6ch;
  height: 2.0rem;           /* ← .input と合わせる */
  line-height: 2.5rem;      /* キャレットを中央に */
  padding: 0;
}













/* ==== Hamburger (mobile) ==== */
.site-header .container{ position: relative; } /* ナビの絶対配置基準 */

.menu-toggle{
  display:none;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  font-weight:600;
  color:#374151;
  cursor:pointer;
}
.menu-toggle:hover{ border-color:var(--brand); color:var(--brand); }
.menu-toggle .close{ display:none; }            /* × は閉じる時だけ表示 */
.menu-toggle.active .bars{ display:none; }
.menu-toggle.active .close{ display:inline-block; }
.menu-toggle .menu-text{ font-size:14px; }

@media (max-width:800px){
  .menu-toggle{ display:inline-flex; }

  /* モバイルのナビは浮かせてドロップダウン */
  .nav{
    position:absolute;
    right:16px;
    top:calc(100% + 8px);
    display:none;
    flex-direction:column;
    gap:4px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:8px;
    min-width:220px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    z-index:20;
  }
  .nav.open{ display:flex; }

  /* 項目の余白を縦メニュー用に最適化 */
  .nav a{ margin:0; padding:10px 8px; }
  .nav .btn, .nav a.btn{ width:100%; justify-content:center; margin-left:0; }
  .nav form.inline{ width:100%; }
  .nav form.inline .btn{ width:100%; }
}









/* ===== Filters (toolbar) ===== */
.filters-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px 16px;                 /* 行間/列間を広めに */
}

@media (max-width: 960px){
  .filters-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .filters-grid{ grid-template-columns: 1fr; }
}

.filter-field{ display:flex; flex-direction:column; gap:6px; }
.filter-actions{
  display:flex; gap:8px; align-items:center; justify-content:flex-end;
}
.filter-help{ color:var(--muted); font-size:12px; }

/* 既存に合わせた別名クラス（テンプレが btn-primary / btn-ghost を使っているため） */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:8px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; font-weight:600; cursor:pointer;
}
.btn-primary:hover{ background:var(--brand-2); border-color:var(--brand-2); }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:8px; border:1px solid var(--brand);
  background:#fff; color:var(--brand); font-weight:600; cursor:pointer;
}
.btn-ghost:hover{ border-color:var(--brand-2); color:var(--brand-2); }

/* 各入力の見出しを少し濃く */
.filter-field .label{ font-size:13px; color:#4b5563; }




/* ---- Filters buttons fine-tune ---- */
.filter-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  grid-column: 1 / -1;        /* ← 1行フル幅に */
  margin-top: 4px;
}

/* 基本ボタン寸法を統一 */
.btn-primary,
.btn-ghost{
  display:inline-flex;         /* a要素でも同じ見た目に */
  align-items:center;
  justify-content:center;
  height: 40px;                /* ← 高さを固定して差をなくす */
  padding: 0 16px;             /* ← 左右だけ指定（上下はheightに委ねる） */
  border-radius:8px;
  font-weight:600;
  font-size: 14px;
  line-height: 1;              /* 文字の縦位置を安定化 */
  white-space: nowrap;         /* 文字折返し防止 */
  box-sizing: border-box;
}

/* 既存カラーを踏襲 */
.btn-primary{
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
}
.btn-primary:hover{ background:var(--brand-2); border-color:var(--brand-2); }

.btn-ghost{
  border:1px solid var(--brand);
  background:#fff;
  color:var(--brand);
}
.btn-ghost:hover{ border-color:var(--brand-2); color:var(--brand-2); }

/* モバイル最適化：縦積み＋幅いっぱい */
@media (max-width:640px){
  .filter-actions{
    justify-content:stretch;
  }
  .filter-actions .btn-primary,
  .filter-actions .btn-ghost{
    flex:1 1 auto;            /* ← 2つが同じ幅で伸びる */
    width: 100%;
    height: 44px;             /* 親指タップ配慮で少し高め */
  }
}







/* ============== MyPage ============== */
.profile-header { padding: 16px; }
.profile-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; }
.profile-avatar { width:72px; height:72px; border-radius:9999px; overflow:hidden; background:#e5e7eb; display:flex; align-items:center; justify-content:center; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-avatar--placeholder { font-weight:700; color:#6b7280; font-size:24px; }
.profile-name { margin:0; font-size:20px; font-weight:800; }
.profile-sub { color:var(--muted); font-size:14px; margin-top:2px; }
.profile-bio { margin:8px 0 0; color:#111827; }
.profile-links { display:flex; gap:8px; align-items:center; margin-top:10px; }
.profile-links .link { color:var(--brand); text-decoration:none; }
.profile-links .link:hover { text-decoration:underline; }

.profile-stats { list-style:none; margin:0; padding:0; display:flex; gap:12px; }
.stat{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 12px; text-align:center; min-width:84px;}
.stat-num{ font-size:18px; font-weight:800; color:#111827; line-height:1.2;}
.stat-label{ font-size:12px; color:var(--muted); }

/* カードリスト */
.dashboard-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:16px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.list-item{ padding:10px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.list-title{ font-weight:700; color:#111827; text-decoration:none; }
.list-title:hover{ text-decoration:underline; }
.list-meta{ color:var(--muted); font-size:12px; margin-top:4px; }
.panel-foot{ margin-top:12px; display:flex; justify-content:flex-end; }

/* スマホ対応 */
@media (max-width: 960px){
  .profile-row { grid-template-columns: 56px 1fr; }
  .profile-stats { grid-column: 1 / -1; }
}
@media (max-width: 800px){
  .dashboard-grid{ grid-template-columns:1fr; }
  .profile-header{ padding:12px; }
}




/* ===== Profile Edit ===== */
.form-v { display:flex; flex-direction:column; gap:14px; }
.form-row { display:flex; flex-direction:column; gap:6px; }
.field-error { color:#b91c1c; font-size:13px; }
.hint { color:var(--muted); font-size:12px; }

.avatar-row { display:flex; align-items:center; gap:12px; }
.profile-avatar.lg { width:96px; height:96px; border-radius:9999px; overflow:hidden; background:#e5e7eb; display:flex; align-items:center; justify-content:center; }
.profile-avatar.lg img { width:100%; height:100%; object-fit:cover; }
.profile-avatar--placeholder { font-weight:700; color:#6b7280; font-size:28px; }

.form-actions { display:flex; gap:8px; justify-content:flex-end; }

@media (max-width: 600px){
  .avatar-row { align-items:flex-start; }
  .profile-avatar.lg { width:80px; height:80px; }
}











.form-actions {
  display: flex;      /* 既にflexならOK */
  gap: 8px;
  /* justify-content は不要。あってもOK */
}
.form-actions .btn {
  flex: 1 1 auto;     /* ← これで横いっぱいに広がる */
  /* もしくは width: 100%; でも可 */
}




.btn-sns {
  background:#fff !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  /* 高さは固定せず、.btn と同じpaddingで統一 */
  padding:8px 14px;     /* ← .btn と同じ */
  border-radius:8px;    /* ← .btn と同じ */
  font-weight:700;
  font-size:16px;
  width:100%;
  box-sizing:border-box;

  margin-bottom: 10px;
}

.btn-sns:hover{
  background:#f3f4f6;
}

.btn-sns .icon-box {
  width:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
}

.btn-sns .spacer {
  width:28px;
  flex:0 0 28px;
}

.btn-sns .icon-box i {
  font-size:20px;
  line-height:1;
}

/* ブランドカラー修正 */
.btn-google   .icon-box i{ color:#000; }
.btn-github   .icon-box i{ color:#111827; }
.btn-twitter  .icon-box i{ color:#000; }
.btn-facebook .icon-box i{ color:#1877F2; }






/* ===== セクション用テーマ色 ===== */
:root {
  --tint-purple: #e9d5ff;   /* 薄紫 */
  --tint-blue:   #dbeafe;   /* 薄青 */
  --tint-orange: #fed7aa;   /* 薄オレンジ */
}

.theme-purple { --tint: var(--tint-purple); }
.theme-blue   { --tint: var(--tint-blue); }
.theme-orange { --tint: var(--tint-orange); }

/* 見出し帯デザイン */
.panel[class*="theme-"] { position: relative; }
.panel[class*="theme-"] .panel-title {
  display: block;
  margin: -16px -16px 12px;     /* パネル内側余白に被せる */
  padding: 14px 16px;
  background: var(--tint);
  border-radius: 12px 12px 0 0; /* 上だけ角丸 */
  font-weight: 800;
}

/* 検索パネル内の toolbar 枠を消す（任意） */
.panel.theme-blue .toolbar {
  border: 0;
  padding: 0;
  margin: 0;
}





/* ===== Platform page header ===== */
.page-head{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin:16px 0;
}
.page-title{
  margin:4px 0 12px;
  font-size:28px;
  font-weight:800;
}
.crumb{
  display:inline-block;
  font-size:14px;
  color:var(--brand);
  text-decoration:none;
}
.crumb:hover{ text-decoration:underline; }

.lang-filter{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  max-width:360px;
}
.lang-filter .label{font-size:13px; color:#6b7280;}





/* ==== Nav: language picker ==== */
.nav-lang{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  position:relative;           /* ▼ .chev の基準 */
}

.nav-lang i{ font-size:14px; color:var(--muted); }

/* セレクトをボタンに近い背丈に */
.nav-lang select{
  font:inherit;
  color:#374151;
  height:32px;
  padding:0 28px 0 8px;        /* 右は矢印ぶん */
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  line-height:1;
}
.nav-lang select:hover,
.nav-lang select:focus{ border-color:var(--brand); outline:none; }

/* カスタム矢印 */
.nav-lang .chev{
  position:absolute;
  right:10px;
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid #6b7280;
  pointer-events:none;
}

/* モバイル（ドロップダウン内）は幅いっぱいに */
@media (max-width:800px){
  .nav .nav-lang{ width:100%; margin-top:4px; }
  .nav .nav-lang select{ width:100%; height:40px; padding-right:32px; }
  .nav .nav-lang .chev{ right:14px; }
}








/* ===== Hero (catchphrase) ===== */
.hero{
  position: relative;
  background: linear-gradient(180deg, rgba(79,70,229,0.06), rgba(79,70,229,0.02));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 16px;
  margin: 8px 0 16px;
}

.hero-title{
  margin: 0 0 6px 0;
  font-size: clamp(20px, 3.2vw, 28px);
  line-height: 1.25;
  font-weight: 800;
  color: #111827; /* ベース本文色より少し強め */
  letter-spacing: .02em;
}

.hero-subtitle{
  margin: 0;
  color: var(--muted);
  font-size: clamp(14px, 2.2vw, 16px);
  line-height: 1.7;
}

/* 少しだけアクセント（左帯） */
.hero::before{
  content: "";
  position: absolute;
  left: -1px;
  top: 16px;
  bottom: 16px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  opacity: .75;
}

/* レイアウトと一体感：小画面で余白を増やす */
@media (max-width: 640px){
  .hero{ padding: 16px 12px; border-radius: 12px; }
}

/* 既存セレクタの基礎スタイルは流用 */
.nav-lang--mobile { display: none; }

/* モバイルではヘッダー内のフォームだけ表示、ナビ内は隠す */
@media (max-width:800px){
  /* ヘッダー内（ロゴの横）を表示 */
  .nav-lang--mobile{
    display:inline-flex;
    margin-left: 8px;          /* ロゴと少し間を空ける */
  }

  /* ナビ（ドロップダウン）内の言語フォームは隠す */
  .nav .nav-lang{
    display:none;
  }
}

/* --- モバイル時の言語セレクタを小型化 --- */
@media (max-width:800px){
  .nav-lang--mobile{
    gap:4px;                 /* アイコンとの隙間を少し詰める */
  }
  .nav-lang--mobile i{
    font-size:12px;          /* 地球アイコンも小さく */
  }
  .nav-lang--mobile select{
    font-size:13px;          /* 少し小さく */
    height:32px;             /* 既存と整合 */
    padding:0 22px 0 6px;    /* 右は矢印、左は最小限 */
    width:auto;              /* コンテンツ幅に縮む */
    max-width:90px;          /* ここで上限を掛ける（お好みで 80–110px） */
  }
  .nav-lang--mobile .chev{
    right:8px;               /* パディング縮小に追随 */
  }

  /* メニューボタンの文言が縦に崩れないように */
  .menu-toggle{
    white-space:nowrap;      /* 「メニュー」を改行させない */
    padding:6px 8px;         /* ちょい詰め */
    gap:6px;
  }

  /* 3者の間隔を微調整（任意） */
  .site-header .container.flex-row{ gap:8px; }
}












.brand{
  display:inline-block; /* 横並びじゃなく独立ブロック化 */
  text-align:center;    /* 文字をロゴの下中央に */
  padding:10px 0;
}

.brand-logo-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;  /* ロゴと文字の隙間 */
}

.brand-logo{
  height: 75px;
  width:auto;
  display:block;
}

.brand-caption{
  font-size:12px;
  color:var(--muted);   /* 少し控えめな色 */
  font-weight:600;
  line-height:1.3;
  margin-top: -10px;
}



/* 既存の .brand スタイルはそのまま */

@media (max-width: 640px){
  .brand-logo{
    height: 40px;   /* ← 元は75px、ここで小さめに */
  }

  .brand-caption{
    font-size: 10px;   /* ← 元は12px */
    margin-top: -6px;  /* 隙間を詰める */
  }
}



/* 虹色グラデ（静止） */
.rainbow-text{
  background: linear-gradient(90deg,
    #ff0040, #ff7a00, #ffd400, #37ff00, #00e0ff, #7a00ff, #ff00d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;             /* 文字色を透明にして背景を見せる */
}

/* 虹色グラデ（ゆっくり動く） */
.rainbow-anim{
  background: linear-gradient(90deg,
    #ff0040, #ff7a00, #ffd400, #37ff00, #00e0ff, #7a00ff, #ff00d4, #ff0040);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowShift 8s linear infinite;
}

@keyframes rainbowShift{
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* コントラスト確保（薄い背景で見づらい時の微妙な縁取り） */
.rainbow-text, .rainbow-anim{
  text-shadow: 0 0 0 rgba(0,0,0,0.001); /* Safariでの描画バグ回避の小技 */
}

/* モバイルで強すぎないように少し控えめ（任意） */
@media (max-width: 640px){
  .hero-title.rainbow-anim{ animation-duration: 10s; }
}








.avatar {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; overflow:hidden; background:#eee; color:#555;
  width:36px; height:36px; font-weight:700; font-size:0.9rem;
}
.avatar--sm { width:32px; height:32px; font-size:0.85rem; }
.avatar--xs { width:24px; height:24px; font-size:0.75rem; }
.avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.avatar--ph { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }


/* 影響を「カード内のメタ行」だけに限定 */
.cards .card .card-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;      /* 折り返し可にして崩れ防止 */
  column-gap: 6px;      /* 横の間隔 */
  row-gap: 2px;         /* 折り返した行の縦間隔 */
}

/* メタ行のアバターは小さめ＆中央寄せ */
.cards .card .card-meta .avatar{
  width: 30px;
  height: 30px;
  vertical-align: middle;  /* 念のため */
}




/* 投稿本文用テキストエリアを広めに */
.post-textarea {
  min-height: 200px;       /* 通常より縦を広げる */
  font-size: 15px;
  line-height: 1.6;
  padding: 12px;
  border-radius: 10px;
}

/* 画像フィールドもカード風に */
input[type="file"] {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}




/* ===== Card thumbnail ===== */
.card-thumb{
  width: 100%;
  max-height: 220px;         /* 画像の最大高さ */
  border-radius: 10px;
  overflow: hidden;
  margin: 8px 0 10px;
  background: #f3f4f6;       /* 読み込み時の下地 */
}

.card-thumb img{
  display: block;
  width: 100%;
  height: 220px;             /* 高さを固定して均一に */
  object-fit: cover;         /* はみ出す分はトリミング */
}