/* community.css — マイページ／コミュニティSNS のモック用コンポーネント
   （style.css の :root トークンを利用。Web3.0は“世界観だけ”＝所有/ランク/バッジ演出） */

/* ===== 共通: アバター ===== */
.av { border-radius: 50%; display: grid; place-items: center; font-family: var(--cond); font-weight: 700;
  color: #fff; overflow: hidden; flex-shrink: 0; letter-spacing: .02em; }
.av img { width: 100%; height: 100%; object-fit: cover; }

/* ===== マイページ ヒーロー ===== */
.pf-hero { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--panel); margin-bottom: 22px; }
.pf-cover { height: 168px; background:
    radial-gradient(120% 160% at 12% -10%, rgba(228,18,31,.20), transparent 55%),
    radial-gradient(120% 160% at 95% 0%, rgba(182,134,42,.28), transparent 55%),
    linear-gradient(120deg, #16181f, #2a2f3c); position: relative; }
.pf-cover::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size: 16px 16px; opacity: .5; }
.pf-main { display: flex; gap: 22px; padding: 0 26px 24px; margin-top: -46px; position: relative; flex-wrap: wrap; }
.pf-av { width: 110px; height: 110px; border: 4px solid var(--panel); font-size: 44px;
  background: linear-gradient(135deg, var(--red), #ff5a39); box-shadow: 0 12px 30px -12px rgba(18,22,33,.4); }
.pf-id { flex: 1; min-width: 220px; padding-top: 54px; }
.pf-name { font-family: var(--cond); font-size: 28px; font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
.pf-handle { color: var(--muted); font-family: var(--mono); font-size: 13px; }
.pf-rank { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  font-family: var(--cond); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(120deg, #f4e2b0, #b6862a); color: #3a2c0b; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.pf-rank svg { width: 13px; height: 13px; }
.pf-bio { color: var(--ink-2); font-size: 13.5px; margin-top: 12px; max-width: 560px; line-height: 1.7; }
.pf-verify { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 11.5px; color: var(--d00); font-family: var(--mono); }
.pf-verify svg { width: 14px; height: 14px; }
.pf-actions { padding-top: 54px; display: flex; gap: 10px; align-items: flex-start; }

.pf-stats { display: flex; gap: 26px; padding: 16px 26px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pf-stat b { font-family: var(--cond); font-size: 22px; }
.pf-stat span { color: var(--muted); font-size: 11.5px; margin-left: 6px; letter-spacing: .04em; }

/* レベル/ランクの進捗（所有演出） */
.lvl { margin: 0 26px 18px; }
.lvl-bar { height: 8px; border-radius: 99px; background: var(--panel-hi); overflow: hidden; }
.lvl-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--red), var(--gold)); }
.lvl-cap { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; font-family: var(--mono); }

/* ===== 実績バッジ ===== */
.ach-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.ach { width: 92px; text-align: center; }
.ach .ic { width: 64px; height: 64px; margin: 0 auto 7px; border-radius: 16px; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line-2); position: relative; }
.ach .ic svg { width: 30px; height: 30px; }
.ach.on .ic { background: linear-gradient(135deg, #fff, #fbeede); border-color: var(--gold); color: var(--gold-deep); box-shadow: 0 8px 18px -10px var(--gold); }
.ach.off .ic { opacity: .4; filter: grayscale(1); }
.ach .nm { font-size: 10.5px; color: var(--ink-2); line-height: 1.3; font-weight: 600; }
.ach.on .nm { color: var(--ink); }

/* ===== セグメントタブ ===== */
.seg { display: inline-flex; background: var(--panel-hi); border-radius: 99px; padding: 4px; gap: 2px; margin-bottom: 22px; }
.seg button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 9px 20px; border-radius: 99px;
  font-family: var(--cond); font-size: 14px; letter-spacing: .03em; color: var(--ink-2); }
.seg button.on { background: var(--ink); color: #fff; }

/* ===== コレクション・グリッド ===== */
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.coll-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--panel); transition: transform .25s, box-shadow .25s; position: relative; }
.coll-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(18,22,33,.35); border-color: var(--line-2); }
.coll-vis { aspect-ratio: 1/1; display: grid; place-items: center; background: radial-gradient(120% 95% at 50% 14%, #fff, #e7ebf2); border-bottom: 1px solid var(--line); position: relative; }
.coll-vis img { width: 74%; mix-blend-mode: multiply; }
.coll-vis svg.g-watch { width: 74%; }
.coll-own { position: absolute; top: 8px; left: 8px; background: var(--ink); color: #fff; font-family: var(--cond); font-size: 10px; letter-spacing: .1em; padding: 3px 8px; border-radius: 5px; }
.coll-own.want { background: var(--red); }
.coll-fav { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); cursor: pointer; display: grid; place-items: center; }
.coll-fav svg { width: 15px; height: 15px; fill: var(--red); }
.coll-body { padding: 11px 13px 14px; }
.coll-body .rf { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.coll-body h4 { font-family: var(--cond); font-size: 16px; margin: 2px 0 8px; letter-spacing: .01em; }
.coll-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cond { font-size: 10.5px; padding: 2px 8px; border-radius: 99px; background: var(--panel-hi); color: var(--ink-2); font-weight: 600; }
.cond.s { background: #e7f6ec; color: var(--d00); }
.cond.a { background: #e8f0fb; color: var(--d90); }
.coll-since { font-size: 10.5px; color: var(--muted); margin-top: 9px; font-family: var(--mono); }

/* ===== コミュニティ レイアウト ===== */
.cm-grid { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; }
@media (max-width: 900px){ .cm-grid { grid-template-columns: 1fr; } .cm-side { order: -1; } }

/* 投稿作成バー */
.cm-compose { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 18px; }
.cm-compose input { flex: 1; border: 1px solid var(--line-2); border-radius: 99px; padding: 10px 16px; font-family: var(--sans); font-size: 14px; background: var(--bg-2); }
.cm-compose input:focus { outline: none; border-color: var(--red); }

/* フィード */
.feed { display: flex; flex-direction: column; gap: 14px; }
.fitem { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.fhead { display: flex; gap: 12px; align-items: center; }
.fav { width: 42px; height: 42px; font-size: 17px; }
.fwho { flex: 1; line-height: 1.4; }
.fwho b { font-size: 14.5px; }
.fwho .h { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.fwho .t { color: var(--muted); font-size: 11.5px; }
.ffollow { font-family: var(--cond); font-size: 12px; letter-spacing: .04em; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; }
.ffollow.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.faction { margin: 12px 0; font-size: 14px; color: var(--ink); }
.faction .pill { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 5px; background: var(--panel-hi); color: var(--ink-2); }
.faction .add { background: #e7f6ec; color: var(--d00); } .faction .want { background: #fde8ea; color: var(--red); }
.fcard { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg-2); }
.fcard .vis { width: 66px; height: 66px; display: grid; place-items: center; flex-shrink: 0; background: radial-gradient(120% 95% at 50% 14%, #fff, #e7ebf2); border-radius: 8px; }
.fcard .vis img { width: 84%; mix-blend-mode: multiply; }
.fcard .vis svg.g-watch { width: 84%; }
.fcard .ci .rf { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.fcard .ci h4 { font-family: var(--cond); font-size: 17px; margin: 2px 0; }
.fcard .ci .pr { color: var(--gold); font-family: var(--mono); font-size: 12.5px; }
.fcmt { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; margin: 12px 0 0; }
.fbar { display: flex; gap: 20px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.fbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 12.5px; font-family: var(--mono); }
.fbtn svg { width: 16px; height: 16px; }
.fbtn:hover { color: var(--red); } .fbtn.on { color: var(--red); } .fbtn.on svg { fill: var(--red); }

/* サイドバー */
.cm-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-h) + 16px); }
.pcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 16px 8px; }
.pcard h3 { font-family: var(--cond); font-size: 16px; letter-spacing: .04em; margin: 0 0 12px; display: flex; align-items: center; gap: 7px; }
.trow { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); }
.trow:first-of-type { border-top: 0; }
.trow .n { font-family: var(--cond); color: var(--muted); width: 18px; font-size: 15px; }
.trow .vis { width: 48px; height: 48px; display: grid; place-items: center; background: radial-gradient(120% 95% at 50% 14%, #fff, #e7ebf2); border-radius: 7px; flex-shrink: 0; }
.trow .vis img { width: 86%; mix-blend-mode: multiply; }
.trow .ti { flex: 1; line-height: 1.3; }
.trow .ti .rf { font-family: var(--cond); font-size: 14px; }
.trow .ti .m { font-size: 11px; color: var(--muted); }
.trow .cnt { font-size: 11px; color: var(--red); font-family: var(--mono); }

.collector { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); }
.collector:first-of-type { border-top: 0; }
.collector .av { width: 38px; height: 38px; font-size: 15px; }
.collector .ci { flex: 1; line-height: 1.3; }
.collector .ci b { font-size: 13.5px; } .collector .ci .h { font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* AuctionLIVE! ティザー */
.auction-teaser { border-radius: var(--radius-lg); padding: 20px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #b00d18, #16181f 70%); }
.auction-teaser::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 14px 14px; }
.auction-teaser .live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; background: rgba(255,255,255,.16); padding: 4px 10px; border-radius: 99px; position: relative; }
.auction-teaser .live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: lpulse 1.3s infinite; }
@keyframes lpulse { 0%,100%{opacity:1} 50%{opacity:.25} }
.auction-teaser h3 { font-family: var(--impact); font-size: 26px; letter-spacing: .02em; margin: 12px 0 6px; position: relative; }
.auction-teaser p { font-size: 12.5px; color: rgba(255,255,255,.82); position: relative; line-height: 1.7; }
.auction-teaser .soon { display: inline-block; margin-top: 12px; font-family: var(--cond); font-size: 12px; letter-spacing: .1em; border: 1px solid rgba(255,255,255,.4); padding: 7px 14px; border-radius: 99px; position: relative; }

.mock-flag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--muted); border: 1px dashed var(--line-2); padding: 2px 8px; border-radius: 5px; vertical-align: middle; margin-left: 8px; }