/* community 组（community / community-post / community-new / community-mine）專屬樣式。
 * 全部用 app.css 的 token；class 用 cmty- 前綴。兼容 iOS Safari 14：不用 inset / flex gap / aspect-ratio / :is() / dvh / color-mix。
 */

/* ---------------------------------------------------------------- 共用小件 */

.cmty-ic {
  display: block;
  width: 20px;
  height: 20px;
}

/* 灰底 + 圖標的圖片佔位（載入失敗） */
.cmty-broken {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fill);
  color: var(--label-3);
}
.cmty-broken .cmty-ic { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- 信息流頂部（分段控件 + 話題行） */

.cmty-top { padding: 0 var(--gutter) var(--sp-3); }

/* 話題行：一行橫向滾動；不用 flex gap，chip 之間靠 margin */
.cmty-topics {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--gutter);
  scrollbar-width: none;
}
.cmty-topics::-webkit-scrollbar { display: none; }
.cmty-topic {
  display: inline-block;
  margin: 0 var(--sp-1) 0 0;
  padding: 0;
  border: 0;
  background: none;
  min-height: var(--tap);
  vertical-align: top;
}
.cmty-topic__pill {
  display: inline-block;
  padding: 4px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--label-2);
  font-size: 14px;
  line-height: 22px;
  vertical-align: middle;
}
.cmty-topic.is-selected .cmty-topic__pill {
  background: var(--tint);
  color: var(--on-tint);
  font-weight: 600;
}
.cmty-topic:active .cmty-topic__pill { opacity: 0.75; }
/* 發帖頁裡的話題快捷 chips（同樣的藥丸，放表單下面） */
.cmty-chiprow-empty { display: none; }

/* ---------------------------------------------------------------- 雙列瀑布流 */

.cmty-feed {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 0 var(--gutter);
  /* 底部留白：不讓懸浮按鈕壓住最後一張卡片 */
  padding-bottom: 88px;
}
.cmty-col {
  flex: 1 1 0;
  min-width: 0;
}
.cmty-col + .cmty-col { margin-left: var(--sp-2); }
/* 列表底部状态行占满整行（排到两列下面），不用挪节点 */
.cmty-feed .load-more { flex: 0 0 100%; }
.cmty-feed--one .load-more { flex: 0 0 auto; }

.cmty-card {
  margin-bottom: var(--sp-2);
  background: var(--bg-elevated);
  border-radius: var(--radius);
  overflow: hidden;
}
.cmty-card__link {
  display: block;
  color: var(--label);
  text-decoration: none;
}
.cmty-card__link:active { opacity: 0.85; }

/* 封面外殼：padding-top 百分比撐高度（133% / 100% / 75% 三種，讓兩列高低錯落） */
.cmty-cover {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: var(--fill);
}
.cmty-ratio-0 { padding-top: 133%; }
.cmty-ratio-1 { padding-top: 100%; }
.cmty-ratio-2 { padding-top: 75%; }
.cmty-cover__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 封面角標 */
.cmty-cover__count {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--scrim);
  color: var(--white);
  font-size: 12px;
  line-height: 1.4;
}
.cmty-cover__kind {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
}
.cmty-cover--broken { padding-top: 56%; }

/* 純文字帖：無封面，用 tint 底色文字卡 */
.cmty-textcover {
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  background: var(--tint-soft);
}
/* 純文字帖的類型角標（投票 / 鑑定）：在文字卡頂部佔一行，不覆蓋摘要文字 */
.cmty-textcover .cmty-cover__kind {
  position: static;
  display: inline-block;
  margin-bottom: var(--sp-2);
}
.cmty-textcover__text {
  color: var(--label-2);
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  word-break: break-word;
}

.cmty-card__title {
  padding: var(--sp-2) var(--sp-3) 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}

/* 卡片底部一行：小頭像 + 名字 + 愛心 */
.cmty-card__foot {
  display: flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
}
.cmty-mini {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-right: var(--sp-2);
}
.cmty-mini .avatar {
  width: 24px;
  height: 24px;
  font-size: 12px;
}
/* 信息流卡片底行只留头像 + 名字 + 讚好（與小紅書式卡片一致）；徽章與國旗已在頭像上，這裡不再重複 */
.cmty-card__foot .cv-badges { display: none; }
.cmty-card__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--label-2);
  font-size: 13px;
}
.cmty-like {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  justify-content: center;
  margin: 0;
  padding: 0 var(--sp-2);
  border: 0;
  background: none;
  color: var(--label-2);
  font-size: 13px;
  line-height: 1;
}
.cmty-like .cmty-ic { width: 18px; height: 18px; margin-right: 4px; }
.cmty-like.is-on { color: var(--red); }
.cmty-like:disabled { opacity: 0.6; }

/* 我的帖子：單列時卡片寬度撐滿 */
.cmty-feed--one { display: block; padding-bottom: var(--sp-5); }
.cmty-feed--one .cmty-col { margin-left: 0; }

/* ---------------------------------------------------------------- 右下角懸浮發布鈕 */

.cmty-fab {
  position: fixed;
  right: max(16px, calc((100vw - var(--col)) / 2 + 16px));
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--fab-blue);
  color: var(--on-fab);
  box-shadow: var(--shadow-float);
  text-decoration: none;
}
.cmty-fab:active { opacity: 0.85; }
.cmty-fab .cmty-ic { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- 帖子詳情 */

.cmty-post { padding-top: var(--sp-3); }
.cmty-post__pad { margin: 0 var(--gutter) var(--sp-3); }

.cmty-hiddentip {
  margin: 0 var(--gutter) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: var(--orange-soft);
  color: var(--orange-ink);
  font-size: 14px;
  line-height: 1.5;
}

.cmty-head {
  margin: 0 var(--gutter) var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-elevated);
  border-radius: var(--radius);
}
.cmty-head__author {
  display: flex;
  align-items: center;
  min-height: 40px;
}
.cmty-head__author .avatar { flex: 0 0 auto; margin-right: var(--sp-2); }
.cmty-head__meta {
  flex: 1 1 auto;
  min-width: 0;
}
.cmty-head__follow {
  flex: 0 0 auto;
  min-height: 34px;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-3);
  border: 1px solid var(--tint);
  border-radius: var(--radius-pill);
  background: var(--tint);
  color: white;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.cmty-head__follow.is-following { background: var(--tint-soft); color: var(--tint); }
.cmty-head__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}
.cmty-head__time {
  margin-top: 2px;
  color: var(--label-2);
  font-size: 12px;
  line-height: 1.4;
}
.cmty-minitag {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--label-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  vertical-align: 1px;
}
.cmty-head__tags {
  margin-top: var(--sp-2);
}
.cmty-head__tags .tag { margin-right: var(--sp-2); }

/* 話題標籤：≥44px 的按鈕，內部藥丸 */
.cmty-topictag {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  min-height: var(--tap);
  vertical-align: top;
}
.cmty-topictag__pill {
  display: inline-block;
  padding: 4px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--tint-soft);
  color: var(--tint);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  vertical-align: middle;
}
.cmty-topictag:active .cmty-topictag__pill { opacity: 0.75; }

.cmty-head__title {
  margin: var(--sp-2) 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}
.cmty-head__body {
  margin-top: var(--sp-2);
  font-size: 16px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 圖片區：單圖；2–4 張兩列；5–15 張三列；16 張四列。 */
.cmty-imgs { margin: 0 0 var(--sp-3); }
.cmty-imgs--pad { margin: var(--sp-2) var(--gutter) var(--sp-3); }
.cmty-imgfull {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: var(--fill);
}
.cmty-imgfull img {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
}
.cmty-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -3px;
}
.cmty-grid__cell {
  width: 33.333%;
  padding: 3px;
  box-sizing: border-box;
}
.cmty-grid--2 > .cmty-grid__cell { width: 50%; }
.cmty-grid--4 > .cmty-grid__cell { width: 25%; }
.cmty-grid__shell {
  position: relative;
  width: 100%;
  background: var(--fill);
  border: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.cmty-grid__shell::before { content: ""; display: block; padding-top: 100%; }
.cmty-grid__shell img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmty-grid__shell .cmty-broken {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 互動行（正文之後）：讚好 / 評論數 / 舉報 / 刪除 */
.cmty-actions {
  display: flex;
  align-items: center;
  margin: 0 var(--gutter) var(--sp-3);
}
.cmty-act {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-right: var(--sp-1);
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--label);
  font-size: 14px;
}
.cmty-act .cmty-ic { width: 18px; height: 18px; margin-right: 4px; }
.cmty-act.is-on { color: var(--red); background: var(--tint-soft); }
.cmty-act:disabled { opacity: 0.6; }
.cmty-act--danger { color: var(--red-ink); }
.cmty-actions__spacer { flex: 1 1 auto; }

/* 投票區 */
.cmty-vote {
  margin: 0 var(--gutter) var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-elevated);
  border-radius: var(--radius);
}
.cmty-opt {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius);
  background: var(--fill);
  color: var(--label);
  font-size: 15px;
  text-align: left;
  word-break: break-word;
}
.cmty-opt:active { background: var(--tint-soft); }
.cmty-opt:last-child { margin-bottom: 0; }
.cmty-optrow { margin-bottom: var(--sp-3); }
.cmty-optrow:last-child { margin-bottom: 0; }
.cmty-optrow__top {
  display: flex;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.5;
}
.cmty-optrow__label {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.cmty-optrow__pct {
  flex: 0 0 auto;
  margin-left: var(--sp-2);
  color: var(--label-2);
  font-size: 13px;
}
.cmty-optrow__label .cmty-votedtag { margin-left: var(--sp-2); }
.cmty-votedtag {
  display: inline-block;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--tint-soft);
  color: var(--tint);
  font-size: 12px;
  line-height: 1.6;
  vertical-align: 1px;
}
.cmty-bar {
  margin-top: var(--sp-1);
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--fill);
  overflow: hidden;
}
.cmty-bar__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--tint);
}
.cmty-vote__foot {
  margin-top: var(--sp-3);
  color: var(--label-2);
  font-size: 13px;
  line-height: 1.5;
}
.cmty-vote__foot > span { margin-right: var(--sp-2); }

/* ---------------------------------------------------------------- 評論區 */

.cmty-cmts { padding-bottom: var(--sp-2); }
.cmty-cmts__title {
  margin: 0 var(--gutter) var(--sp-2);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
/* 置頂的被採納評論 */
.cmty-cmt--pin { margin-top: 0; }
.cmty-cmt {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 0 var(--gutter) var(--sp-2);
  padding: var(--sp-2);
  background: var(--bg-elevated);
  border-radius: var(--radius);
}
.cmty-cmt.is-accepted { box-shadow: inset 3px 0 0 var(--green); }
.cmty-cmt__main {
  flex: 1 1 auto;
  min-width: 0;
}
.cmty-cmt__meta {
  display: flex;
  align-items: baseline;
}
.cmty-cmt__meta .avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  font-size: 13px;
  margin-right: var(--sp-2);
  align-self: center;
}
.cmty-cmt__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
}
.cmty-cmt__time {
  margin-left: var(--sp-2);
  color: var(--label-3);
  font-size: 12px;
}
.cmty-cmt__body {
  margin-top: var(--sp-1);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.cmty-cmt__reply {
  margin-top: var(--sp-1);
  color: var(--label-3);
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}
.cmty-cmt__more {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  margin: 0 0 0 var(--sp-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--label-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cmty-cmt__more .cmty-ic { width: 18px; height: 18px; }
.cmty-cmt__more:disabled { opacity: 0.5; }

/* ---------------------------------------------------------------- 評論輸入條（固定底欄） */

/* 輸入條本體是 .action-bar（core 的固定底欄）；這裡把它改成縱向布局，
 * 上層是「回覆某某」狀態行（出現時頁面根節點加 .cmty-hasreply 加高留白），下層是輸入行 */
.cmty-composer {
  flex-direction: column;
  align-items: stretch;
}
.cmty-composer__row {
  display: flex;
  align-items: center;
}
/* 輸入條的底部留白用 ::after 佔位，不用 padding-bottom：padding 會把容器自身的下沿
 * 一起推到固定底欄下面（版式檢查把容器 rect 當內容，會誤判「底欄壓住內容」）。
 * 偽元素不在 DOM 裡，真實內容仍然停在底欄上方。 */
.cmty-postwrap.has-action-bar { padding-bottom: 0; }
.cmty-postwrap.has-action-bar::after {
  content: "";
  display: block;
  height: calc(66px + var(--safe-bottom));
}
.cmty-postwrap.has-action-bar.cmty-hasreply::after { height: calc(114px + var(--safe-bottom)); }
.cmty-composer__input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--tap);
  margin-right: var(--sp-2);
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--label);
  font-size: 16px;
}
.cmty-composer__btn {
  flex: 0 0 auto;
  min-height: var(--tap);
  min-width: 64px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--tint);
  color: var(--on-tint);
  font-size: 15px;
  font-weight: 600;
}
.cmty-composer__btn:disabled { opacity: 0.5; }

/* 回覆狀態行：輸入條內、輸入行上方 */
.cmty-replying {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  color: var(--label-2);
  font-size: 13px;
}
.cmty-replying__cancel {
  min-height: var(--tap);
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  border: 0;
  background: none;
  color: var(--tint);
  font-size: 13px;
}

/* 我的帖子：被隱藏標籤行 */
.cmty-card__hidden { padding: var(--sp-2) var(--sp-3) 0; }

/* ---------------------------------------------------------------- 發帖表單 */

.cmty-new { padding-top: var(--sp-3); }
.cmty-new__kind { padding: 0 var(--gutter) var(--sp-3); }
.cmty-new__kindlabel {
  padding: 0 var(--sp-1) var(--sp-2);
  color: var(--label-2);
  font-size: 13px;
  line-height: 1.35;
}
.cmty-new__hint {
  margin: 0 var(--gutter) var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--tint-soft);
  color: var(--tint);
  font-size: 13px;
  line-height: 1.5;
}

/* 圖片選擇區（包在 data-field="images" 里，422 可貼欄位錯誤） */
.cmty-imgpick {
  display: flex;
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4);
}
.cmty-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 var(--sp-2) var(--sp-2) 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--fill);
}
.cmty-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmty-thumb__cover {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1px var(--sp-1);
  background: var(--scrim);
  color: var(--white);
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0 0 var(--radius-sm) 0;
}
.cmty-thumb__rm {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--tap);
  height: var(--tap);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-tint);
}
.cmty-thumb__rm .cmty-ic {
  width: 16px;
  height: 16px;
  padding: 3px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--scrim);
}
.cmty-thumb__spin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
}
.cmty-thumb__setcover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 28px;
  padding: 2px 0;
  border: 0;
  background: var(--scrim);
  color: var(--white);
  font-size: 12px;
  line-height: 1.5;
}
.cmty-addimg {
  width: 88px;
  height: 88px;
  margin: 0 0 var(--sp-2) 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--fill);
  color: var(--label-2);
  font-size: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cmty-addimg .cmty-ic { width: 22px; height: 22px; margin-bottom: 4px; }
.cmty-addimg:active { background: var(--tint-soft); }

/* 投票選項行 */
.cmty-optedit {
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  margin-bottom: var(--sp-2);
}
.cmty-optedit input {
  flex: 1 1 auto;
  min-width: 0;
}
.cmty-optedit .cmty-optedit__rm {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  margin-left: var(--sp-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--red-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cmty-optedit__rm .cmty-ic { width: 18px; height: 18px; }
.cmty-addopt {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin: 0 var(--sp-4) var(--sp-2);
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--tint);
  font-size: 14px;
  font-weight: 600;
}
.cmty-addopt .cmty-ic { width: 16px; height: 16px; margin-right: 4px; }

/* 彈層裡的表單（舉報 / 大圖） */
.cmty-sheetdesc {
  margin-bottom: var(--sp-2);
  color: var(--label-2);
  font-size: 14px;
  line-height: 1.5;
}
.cmty-sheeterr {
  margin-top: var(--sp-2);
  color: var(--red-ink);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.cmty-viewer-img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.cmty-viewer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-2);
}
.cmty-viewer-nav button {
  width: var(--tap);
  height: var(--tap);
  margin: 0 var(--sp-2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--label);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cmty-viewer-nav button:disabled { opacity: 0.4; }
.cmty-viewer-nav__n {
  min-width: 64px;
  text-align: center;
  color: var(--label-2);
  font-size: 13px;
}

/* 大圖查看器佔位 */
.cmty-viewer-broken {
  width: 240px;
  height: 180px;
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  .cmty-card__link:active,
  .cmty-topic:active .cmty-topic__pill,
  .cmty-topictag:active .cmty-topictag__pill,
  .cmty-fab:active,
  .cmty-opt:active,
  .cmty-addimg:active { opacity: 1; }
}
/* 小紅書式社區首屏：上方類別列吸頂，次列提供「我的帖子」和話題篩選。 */
.cmty-feedhead { position: sticky; top: 0; z-index: 20; padding-top: var(--safe-top); background: var(--material); border-bottom: var(--hairline) solid var(--separator); -webkit-backdrop-filter: saturate(170%) blur(22px); backdrop-filter: saturate(170%) blur(22px); }
.cmty-feedhead__main { display: flex; align-items: center; min-height: 48px; padding: 0 var(--sp-2) 0 var(--gutter); }
.cmty-feedhead__main .seg { flex: 1 1 auto; min-width: 0; padding: 0; border-radius: 0; background: transparent; }
.cmty-feedhead__main .seg__block { top: auto; bottom: 0; height: 3px; border-radius: 3px; background: var(--tint); box-shadow: none; }
.cmty-feedhead__main .seg__item { height: 48px; padding: 0 var(--sp-2); color: var(--label-2); font-size: 15px; }
.cmty-feedhead__main .seg__item.is-selected { color: var(--label); font-weight: 700; }
.cmty-feedhead__search { display: flex; flex: 0 0 var(--tap); align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 0; background: transparent; color: var(--label); }
.cmty-feedhead__search .cmty-ic { width: 22px; height: 22px; }
.cmty-feedhead__sub { display: flex; align-items: center; min-height: 42px; padding: 0 var(--gutter); }
.cmty-feedhead__mine { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 34px; margin-right: var(--sp-2); padding: 0 var(--sp-2); border-radius: var(--radius-pill); background: var(--tint-soft); color: var(--tint); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cmty-feedhead__mine span { margin-left: 4px; font-size: 18px; line-height: 1; }
.cmty-feedhead__topics { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.cmty-feedhead__topics .cmty-topics { padding: 0; }
.cmty-feedhead__topics .cmty-topic { min-height: 34px; margin-right: var(--sp-1); }
.cmty-feedhead__topics .cmty-topic__pill { padding: 4px var(--sp-2); font-size: 12px; line-height: 20px; }
.cmty-search { display: flex; margin: 0 var(--gutter) var(--sp-3); padding: var(--sp-1); border: var(--hairline) solid var(--glass-stroke); border-radius: var(--radius); background: var(--glass); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: saturate(170%) blur(22px); backdrop-filter: saturate(170%) blur(22px); }
.cmty-search input { flex: 1 1 auto; min-width: 0; padding: var(--sp-2); border: 0; outline: 0; background: transparent; font-size: 16px; }
.cmty-search button { flex: 0 0 auto; padding: 0 var(--sp-3); border: 0; border-radius: var(--radius-sm); background: var(--tint); color: var(--on-tint); }