/* The community stays within the existing cocoa lobby and board surfaces. */
#lobbyFeatureBody .community-intro { margin: 0 1px 15px; }
#lobbyFeatureBody .community-intro h1 { margin: 0; color: #fff3e0; font-size: 18px; font-weight: 800; letter-spacing: -.45px; }
#lobbyFeatureBody .community-intro p { margin: 5px 0 0; color: #cbb99d; font-size: 11px; }
.community-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 25px; margin-bottom: 10px; }
.community-section-head h2 { margin: 0; color: #f2c574; font-size: 13px; font-weight: 800; }
.community-update-badge { flex: none; padding: 5px 8px; border: 1px solid #80613f; border-radius: 7px; background: #3a2e25; color: #ceb998; font-size: 9px; white-space: nowrap; }
.community-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#lobbyFeatureBody .community-video-card { display: block; width: 100%; min-width: 0; padding: 0; overflow: hidden; border: 1px solid #795c36; border-radius: 11px; background: linear-gradient(145deg, #3b3026, #30261e); color: #fff3e0; text-align: left; }
.community-video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #231c17; }
.community-video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.community-video-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 35px; height: 25px; transform: translate(-50%, -50%); border-radius: 7px; background: #e93128; box-shadow: 0 2px 9px #0005; }
.community-video-play svg { width: 11px; height: 13px; margin-left: 2px; fill: #fff; }
.community-video-duration { position: absolute; right: 6px; bottom: 5px; padding: 2px 4px; border-radius: 3px; background: #130f0dd9; color: #fff5e2; font-size: 9px; font-variant-numeric: tabular-nums; }
.community-video-copy { display: block; padding: 9px 9px 10px; }
.community-video-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; color: #f6e8cf; font-size: 11.5px; font-weight: 750; line-height: 1.45; letter-spacing: -.2px; overflow-wrap: anywhere; }
.community-video-copy small { display: block; overflow: hidden; margin-top: 4px; color: #b5a185; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.community-video-updated { margin: 8px 1px 0; text-align: right; color: #b5a185; font-size: 9px; }
.community-video-empty { display: grid; place-items: center; gap: 8px; min-height: 106px; padding: 16px; border: 1px solid #795c3677; border-radius: 11px; background: #30261e; color: #cbb99d; font-size: 12px; text-align: center; }
#lobbyFeatureBody .community-video-retry { min-height: 44px; padding: 6px 12px; border: 1px solid #80613f; border-radius: 7px; background: #3a2e25; color: #f2c574; font-size: 12px; }
.community-board-section { margin-top: 21px; padding-top: 16px; border-top: 1px solid #86653c6e; }
.community-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.community-board-heading h2 { margin: 0; color: #fff0d6; font-size: 16px; letter-spacing: -.4px; }
.community-board-heading p { margin: 3px 0 0; color: #baa889; font-size: 10px; }
#lobbyFeatureBody .community-board-heading .board-small-primary { flex: none; min-width: 79px; border-color: #d9a943; background: linear-gradient(180deg, #ffdc8b, #edbb61); color: #422b13; box-shadow: 0 2px 0 #845724; }
#lobbyFeatureBody .community-board-section .board-tabs { gap: 5px; margin-bottom: 10px; }
#lobbyFeatureBody .community-board-section .board-tabs button { border-color: #735a3a; background: #352b23; color: #d2bd9f; font-size: 11px !important; }
#lobbyFeatureBody .community-board-section .board-tabs button.is-active { border-color: #e7c071; background: linear-gradient(180deg, #ead09a, #d2ae69); color: #3d2916; }
.community-search { display: flex; align-items: center; min-height: 44px; border: 1px solid #725a40; border-radius: 9px; background: #302720; }
#lobbyFeatureBody .community-search input { min-width: 0; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 9px 0 0 9px; background: transparent; color: #f1e2c5; font-size: 16px; }
.community-search input::placeholder { color: #b29c7d; font-size: 11px; }
#lobbyFeatureBody .community-search button { display: grid; flex: none; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0 9px 9px 0; background: transparent; color: #d1b27d; }
.community-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.community-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: 5px 1px 3px; }
.community-list-toolbar > span { color: #bba88b; font-size: 10px; }
.community-sort { display: flex; align-items: center; }
#lobbyFeatureBody .community-sort button { position: relative; min-width: 44px; min-height: 44px; padding: 0 5px; border: 0; background: transparent; color: #baa889; font-size: 11px; }
#lobbyFeatureBody .community-sort button.is-active { color: #f3ca7e; font-weight: 800; }
.community-sort button + button::before { position: absolute; left: 0; top: 17px; height: 10px; border-left: 1px solid #6e5638; content: ''; }
/* Native modal keeps keyboard focus within the player and above every lobby layer. */
.community-video-dialog { box-sizing: border-box; width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 12px; overflow: auto; border: 1px solid #a98247; border-radius: 14px; background: #30261e; color: #f6e8cf; box-shadow: 0 14px 60px #0009; font-family: Pretendard, 'Pretendard Variable', sans-serif; }
.community-video-dialog::backdrop { background: #100b08cc; }
.community-player-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.community-player-head h2 { min-width: 0; margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.community-player-head button { flex: none; width: 44px; min-height: 44px; padding: 0; border: 1px solid #80613f; border-radius: 9px; background: #3a2e25; color: #f6e8cf; font: inherit; cursor: pointer; }
.community-video-dialog iframe { display: block; width: 100%; min-height: 200px; aspect-ratio: 16 / 9; border: 0; border-radius: 7px; background: #100d0a; }
.community-youtube-link { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; color: #f3ca7e; font-size: 13px; text-decoration: none; }
.community-video-dialog :focus-visible { outline: 2px solid #ffd76a; outline-offset: 2px; }
@media (max-width: 359px) { .community-section-head h2 { font-size: 12px; } .community-update-badge { padding: 5px; } .community-board-heading p { font-size: 9px; } }