.community {
  padding: 6rem 1.25rem 7rem;
  scroll-margin-top: var(--nav-height);
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,0.025) 50%, transparent 50.1%),
    #101211;
  border-top: 1px solid var(--border);
}

.community-inner { max-width: 1420px; margin: 0 auto; }

.community-heading {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(220px, 300px);
  justify-content: space-between;
  align-items: end;
  gap: 3rem;
  margin-bottom: 3rem;
}

.community-kicker {
  margin-bottom: 0.65rem;
  color: #d97854;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.community-heading h2 {
  max-width: 700px;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4.6vw, 4.6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
}

.community-heading > div > p:last-child {
  max-width: 650px;
  margin-top: 1.25rem;
  color: #a4aaa6;
  font-size: 0.98rem;
  line-height: 1.7;
}

.community-storage { padding-bottom: 0.4rem; }
.community-storage > div:first-child { display: flex; justify-content: space-between; color: #858b87; font-size: 0.72rem; }
.community-storage-used { color: var(--text); }
.community-storage-track { height: 4px; margin-top: 0.65rem; overflow: hidden; background: #292c2a; }
.community-storage-track span { display: block; width: 0; height: 100%; background: #9fb394; transition: width 0.5s ease; }

.community-gate {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  border: 1px solid #303532;
  border-left: 3px solid #d97854;
  background: rgba(25, 28, 26, 0.82);
}

.community-gate-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid #4c514d;
  color: #d97854;
  font-family: var(--font-serif);
  font-size: 1rem;
}

.community-gate h3, .community-feed h3 { color: var(--white); font-family: var(--font-serif); font-size: 1.3rem; font-weight: 400; }
.community-gate p { color: #8f9591; font-size: 0.86rem; }

.community-app { display: grid; grid-template-columns: minmax(290px, 390px) minmax(0, 1fr); align-items: start; gap: 2.5rem; }
.community-compose { position: sticky; top: calc(var(--nav-height) + 1.5rem); padding: 1.35rem; border: 1px solid #303532; background: #181b19; }
.community-compose-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }
.community-compose-head div { display: flex; flex-direction: column; line-height: 1.3; }
.community-compose-head strong { color: var(--white); font-size: 0.87rem; }
.community-compose-head div span { color: #7f8581; font-size: 0.7rem; }

.community-avatar {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #9fb394;
  color: #151815;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-weight: 700;
}

.community-drop {
  position: relative;
  display: grid;
  min-height: 190px;
  overflow: hidden;
  place-items: center;
  border: 1px dashed #515853;
  background: #111311;
  cursor: pointer;
}

.community-drop.is-dragging { border-color: #d97854; background: #1c1815; }
.community-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.community-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.community-drop-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; text-align: center; }
.community-drop-copy strong { color: var(--white); font-size: 0.84rem; }
.community-drop-copy small { color: #747a76; font-size: 0.67rem; }

.community-topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 1rem; border: 0; background: #313532; }
.community-topics legend { width: 100%; padding-bottom: 0.45rem; color: #858b87; font-size: 0.65rem; }
.community-topics label { background: #202320; cursor: pointer; }
.community-topics input { position: absolute; opacity: 0; }
.community-topics span { display: grid; min-height: 44px; padding: 0.55rem 0.25rem; place-items: center; color: #8e948f; font-size: 0.65rem; text-align: center; }
.community-topics input:checked + span { background: #d97854; color: #171310; }

.community-field { display: block; margin-top: 1rem; }
.community-field > span { display: block; margin-bottom: 0.35rem; color: #8e948f; font-size: 0.67rem; }
.community-field input, .community-field textarea, .community-comment-form textarea {
  width: 100%;
  border: 1px solid #363b37;
  border-radius: 0;
  outline: none;
  background: #111311;
  color: var(--text);
  font: 16px/1.5 var(--font-sans);
}
.community-field input { min-height: 44px; padding: 0.65rem 0.75rem; }
.community-field textarea { resize: vertical; padding: 0.7rem 0.75rem; }
.community-field input:focus, .community-field textarea:focus, .community-comment-form textarea:focus { border-color: #9fb394; }
.community-notice { min-height: 1.3rem; margin-top: 0.65rem; color: #d97854; font-size: 0.72rem; line-height: 1.3; }
.community-publish { width: 100%; min-height: 46px; border: 0; background: #9fb394; color: #121512; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; cursor: pointer; }
.community-publish:hover, .community-publish:focus-visible { background: #c3d0bc; }
.community-publish:disabled { cursor: wait; opacity: 0.55; }

.community-feed-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid #303532; }
.community-feed-head button { width: 44px; height: 44px; border: 1px solid #363b37; background: transparent; color: #a0a6a2; font-size: 1.2rem; cursor: pointer; }
.community-feed-head button:hover { border-color: #9fb394; color: var(--white); }
.community-loading, .community-empty { padding: 4rem 1rem; color: #777d79; text-align: center; }

.community-post { margin-bottom: 2rem; border: 1px solid #303532; background: #181b19; animation: community-rise 0.45s ease both; }
@keyframes community-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.community-post-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.15rem; }
.community-post-person { min-width: 0; flex: 1; line-height: 1.25; }
.community-post-person strong { display: block; overflow: hidden; color: var(--white); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.community-post-person span { color: #767c78; font-size: 0.66rem; }
.community-topic { padding: 0.25rem 0.5rem; border: 1px solid #4a514b; color: #aeb7b0; font-size: 0.59rem; letter-spacing: 0.08em; text-transform: uppercase; }
.community-delete { border: 0; background: none; color: #737975; font-size: 1.1rem; cursor: pointer; }
.community-delete:hover { color: #d97854; }
.community-post-image { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #0b0c0b; }
.community-post-image img { width: 100%; height: 100%; object-fit: contain; }
.community-post-copy { padding: 1.2rem 1.15rem; }
.community-post-copy h4 { color: var(--white); font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; letter-spacing: 0; }
.community-post-copy p { margin-top: 0.55rem; color: #a4aaa6; font-size: 0.85rem; line-height: 1.65; white-space: pre-wrap; }

.community-comments { padding: 0 1.15rem 1.15rem; border-top: 1px solid #2d312e; }
.community-comment-count { padding: 0.8rem 0 0.55rem; color: #797f7b; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; }
.community-comment { display: grid; grid-template-columns: 30px 1fr; gap: 0.65rem; padding: 0.65rem 0; }
.community-comment .community-avatar { width: 30px; height: 30px; font-size: 0.62rem; }
.community-comment-body { padding: 0.55rem 0.7rem; background: #202320; }
.community-comment-body strong { color: #d7d9d7; font-size: 0.72rem; }
.community-comment-body time { margin-left: 0.45rem; color: #686e6a; font-size: 0.62rem; }
.community-comment-body p { margin-top: 0.2rem; color: #a3a8a4; font-size: 0.78rem; line-height: 1.5; white-space: pre-wrap; }
.community-comment-form { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; margin-top: 0.65rem; }
.community-comment-form textarea { min-height: 42px; padding: 0.55rem 0.65rem; resize: vertical; }
.community-comment-form button { min-width: 76px; min-height: 44px; border: 1px solid #9fb394; background: transparent; color: #b8c8b0; font-size: 0.65rem; cursor: pointer; }
.community-comment-form button:hover { background: #9fb394; color: #121512; }

@media (max-width: 900px) {
  .community-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .community-storage { max-width: 320px; }
  .community-app { grid-template-columns: 1fr; }
  .community-compose { position: static; }
}

@media (max-width: 600px) {
  .community { padding: 4.5rem 0.75rem 5rem; }
  .community-heading h2 { font-size: 2.45rem; }
  .community-gate { grid-template-columns: auto 1fr; padding: 1.25rem; }
  .community-gate .btn { grid-column: 1 / -1; text-align: center; }
  .community-topics { grid-template-columns: repeat(2, 1fr); }
  .community-post-head { flex-wrap: wrap; }
  .community-post-image { aspect-ratio: 4 / 3; }
  .community-comment-form { grid-template-columns: 1fr; }
  .community-comment-form button { min-height: 44px; }
}