@media (prefers-reduced-motion: no-preference) {
  .post-item,
  .hero-carousel-root,
  .community-desktop-panel {
    animation: communityRise .42s ease both;
  }
}

@keyframes communityRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:root {
  --community-bg: #edf5fb;
  --community-card: rgba(255, 255, 255, .88);
  --community-ink: #13202f;
  --community-muted: #637083;
  --community-line: rgba(72, 95, 125, .16);
  --community-blue: #246bfe;
  --community-blue-soft: rgba(36, 107, 254, .10);
  --community-radius: 24px;
}

body {
  color: var(--community-ink);
  background:
    radial-gradient(620px 360px at 18% 4%, rgba(77, 166, 255, .18), transparent 68%),
    radial-gradient(520px 320px at 88% 12%, rgba(72, 211, 177, .14), transparent 64%),
    linear-gradient(180deg, #f7fbff 0%, var(--community-bg) 58%, #f4f8fb 100%) !important;
}

.page-container {
  background: transparent !important;
}

.hero-carousel-root {
  margin: 10px 12px 0 !important;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(33, 67, 112, .13);
}

.hero-card img {
  width: 100%;
  height: clamp(120px, 36vw, 160px);
  object-fit: cover;
  object-position: center bottom;
  aspect-ratio: auto !important;
}

.hero-dots {
  bottom: 10px !important;
  padding: 4px 7px;
  background: rgba(15, 23, 42, .18);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.hero-dot {
  opacity: .72;
  width: 5px !important;
  height: 5px !important;
}

.hero-dot.active {
  width: 14px !important;
  background: rgba(255, 255, 255, .92) !important;
}

.page-container > div[style*="padding: 10px 12px 4px"] {
  padding: 12px 14px 6px !important;
}

.page-container input {
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid var(--community-line) !important;
  box-shadow: 0 12px 28px rgba(32, 80, 150, .08);
}

.page-container button {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.page-container button:active {
  transform: scale(.97);
}

.post-item {
  margin: 12px 12px 0 !important;
  padding: 15px !important;
  border: 1px solid var(--community-line);
  border-radius: var(--community-radius);
  background: var(--community-card) !important;
  box-shadow: 0 16px 36px rgba(31, 66, 108, .10);
  backdrop-filter: blur(14px);
}

.post-item:hover {
  box-shadow: 0 22px 48px rgba(31, 66, 108, .16) !important;
}

.post-avatar {
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 8px 18px rgba(36, 107, 254, .14);
}

.post-nickname {
  color: #172033;
  font-weight: 700 !important;
}

.post-meta {
  color: var(--community-muted) !important;
}

.post-category-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 8px;
}

.post-category-tag,
.post-anonymous-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.post-category-tag {
  color: #1350c8;
  background: var(--community-blue-soft);
}

.post-anonymous-tag {
  color: #8a4b0f;
  background: rgba(245, 158, 11, .14);
}

.post-title {
  color: #101828;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}

.post-content {
  color: #3f4b5d !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
  -webkit-line-clamp: 3 !important;
}

.post-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px !important;
  margin-top: 10px !important;
}

.post-preview-grid:has(.post-preview-item:only-child) {
  grid-template-columns: 1fr;
}

.post-preview-item {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  border-radius: 16px !important;
  overflow: hidden;
  background: #e8eef6 !important;
}

.post-preview-item:only-child {
  aspect-ratio: 16 / 10;
}

.post-preview-item img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 16px !important;
}

.post-stats {
  padding-top: 12px;
  border-top: 1px solid rgba(72, 95, 125, .10);
  color: var(--community-muted) !important;
}

.community-report-btn {
  margin-left: auto;
  color: #64748b;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(100, 116, 139, .20);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.community-report-btn:hover {
  color: #dc2626;
  border-color: rgba(220, 38, 38, .30);
  background: rgba(254, 242, 242, .9);
}

.community-comment-report {
  color: #dc2626 !important;
  margin-left: 8px;
}

.loading,
.empty {
  margin: 16px 12px;
  border: 1px dashed rgba(99, 112, 131, .22);
  border-radius: 22px;
  background: rgba(255, 255, 255, .68);
}

.community-desktop-panel {
  display: none;
}

@media (min-width: 1180px) {
  .page-container {
    max-width: 720px !important;
    padding-top: 82px !important;
    padding-bottom: 36px !important;
  }

  .bottom-nav {
    display: flex !important;
    position: fixed !important;
    top: 18px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 48px));
    height: 58px !important;
    padding: 6px !important;
    border: 1px solid rgba(72, 95, 125, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 18px 46px rgba(31, 66, 108, .14);
    backdrop-filter: blur(18px);
    z-index: 1000;
  }

  .bottom-nav-item {
    height: 46px;
    flex-direction: row !important;
    gap: 7px;
    border-radius: 999px;
    color: #475569;
    font-size: 13px !important;
    font-weight: 800;
    padding: 0 16px !important;
  }

  .bottom-nav-item span:last-child {
    font-size: 13px !important;
    color: inherit !important;
    font-weight: 800;
  }

  .bottom-nav-plus {
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
    box-shadow: 0 10px 24px rgba(36, 107, 254, .26);
  }

  .hero-carousel-root {
    margin-top: 0 !important;
  }

  .hero-card img {
    height: clamp(180px, 16vw, 240px);
  }

  .community-desktop-panel {
    display: block;
    position: fixed;
    top: 92px;
    width: 220px;
    padding: 16px;
    border: 1px solid var(--community-line);
    border-radius: 26px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 20px 50px rgba(36, 62, 99, .10);
    backdrop-filter: blur(18px);
  }

  .community-desktop-left {
    left: max(24px, calc(50% - 610px));
  }

  .community-desktop-right {
    right: max(24px, calc(50% - 610px));
  }

  .community-panel-title {
    margin-bottom: 12px;
    color: #101828;
    font-size: 14px;
    font-weight: 800;
  }

  .community-panel-list {
    display: grid;
    gap: 8px;
  }

  .community-panel-btn,
  .community-panel-card {
    width: 100%;
    border: 1px solid rgba(72, 95, 125, .12);
    border-radius: 16px;
    background: rgba(255, 255, 255, .64);
    color: #334155;
    padding: 10px 12px;
    text-align: left;
    font-size: 13px;
  }

  .community-panel-btn {
    cursor: pointer;
  }

  .community-panel-btn:hover,
  .community-panel-btn.active {
    color: #155eef;
    background: rgba(36, 107, 254, .10);
    border-color: rgba(36, 107, 254, .22);
  }

  .community-publish-card {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    border: 0;
    border-radius: 18px;
    padding: 13px 14px;
    color: #fff;
    background: linear-gradient(135deg, #155eef, #43a7ff);
    text-decoration: none;
    text-align: left;
    box-shadow: 0 16px 32px rgba(36, 107, 254, .22);
    cursor: pointer;
  }

  .community-panel-card + .community-panel-card {
    margin-top: 8px;
  }
}

@media (max-width: 1179px) {
  .bottom-nav {
    height: 72px !important;
    border-radius: 24px 24px 0 0;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 -12px 34px rgba(31, 66, 108, .14);
    backdrop-filter: blur(18px);
  }
}