.community-page { min-height: 100vh; color: #234c37; background: linear-gradient(180deg, #edf8d9 0, #fffbea 440px, #f6f3dc 100%); }
.community-main { min-height: calc(100vh - 190px); padding-top: clamp(42px, 7vw, 90px); padding-bottom: 70px; }
.community-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.community-heading h1 { margin: 6px 0 10px; color: #174e37; font-size: clamp(32px, 5vw, 52px); line-height: 1; }
.community-heading p { max-width: 640px; margin: 0; color: #5c765a; font-size: 15px; line-height: 1.55; }
.community-status { min-height: 22px; color: #5c765a; font-size: 13px; }
.community-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.community-photo-card { overflow: hidden; border: 2px solid #9acb66; border-radius: 19px; background: #fffdf1; box-shadow: 0 6px 0 #d5e8b8, 0 12px 28px #244e3212; }
.community-photo-open { display: block; width: 100%; padding: 13px 13px 0; border: 0; background: transparent; cursor: zoom-in; }
.community-photo-open img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 5px solid #9a6b31; border-radius: 6px; background: #e6efd7; }
.community-photo-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 15px; }
.community-photo-copy strong { overflow: hidden; color: #20553a; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.community-photo-copy time { flex: 0 0 auto; color: #738468; font-size: 11px; }
.community-empty { padding: 25px; border: 1px solid #c8dfa5; border-radius: 16px; color: #607a5c; background: #f8f9e9; text-align: center; }
.community-viewer { width: min(980px, calc(100% - 30px)); padding: 25px; border: 7px solid #754f26; border-radius: 9px; background: #fff8dc; box-shadow: 0 6px 0 #442f18; }
.community-viewer::backdrop { background: #142d26b3; backdrop-filter: blur(5px); }
.community-viewer form { position: absolute; top: 8px; right: 8px; }
.community-viewer-close { width: 35px; height: 35px; border: 2px solid #fff; border-radius: 50%; color: #704915; background: #ffd842; font-size: 23px; cursor: pointer; }
.community-viewer figure { margin: 0; padding: 9px 9px 13px; background: #fff; box-shadow: 0 2px 12px #2a261d30; }
.community-viewer figure img { display: block; width: 100%; max-height: 75vh; object-fit: contain; background: #e4ead8; }
.community-viewer figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 3px 0; color: #36593a; }
.community-viewer figcaption time { color: #71836b; font-size: 12px; }
@media (max-width: 650px) { .community-heading { align-items: start; flex-direction: column; } }