/* ============================================================
 * NEW BASIC — community.css  v1.0.0
 * 홈 커뮤니티 최신글 (스튜디오 · 그룹채팅 · 자유게시판)
 * board_latest/community/{studio,chat,free}.php 전용 · 그림자 없음 · 다크모드 body.dark
 * ============================================================ */
.ncm {
  --ncm-ink: #20231f; --ncm-acid: var(--nc-acid, #d7fb55);
  --ncm-paper: var(--bg-card, #fffefa); --ncm-line: var(--border, #dedfd5);
  --ncm-mute: var(--text-muted, #777c70); --ncm-text: var(--text-main, #1d211d);
  --ncm-soft: rgba(32,35,31,.045);
  letter-spacing: -.035em; margin: 0 0 46px;
}
html body.dark .ncm { --ncm-soft: rgba(255,255,255,.05); }
.ncm *, .ncm *::before, .ncm *::after { box-sizing: border-box; }
.ncm a { color: inherit; text-decoration: none; }

/* 섹션 머리 */
.ncm-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.ncm-sec-head small { display: block; margin-bottom: 9px; font-size: 10px; font-weight: 850; letter-spacing: .16em; color: var(--ncm-mute); }
.ncm-sec-head h2 { margin: 0; font-size: clamp(24px,2.6vw,32px); line-height: 1.15; letter-spacing: -.07em; font-weight: 900; color: var(--ncm-text); }
.ncm-sec-head p { margin: 8px 0 0; font-size: 13px; color: var(--ncm-mute); }

/* 배치: 스튜디오(좌 · 2행) / 채팅(우 상) / 자유(우 하) */
.ncm-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); grid-template-areas: "s c" "s f"; gap: 15px; }
.ncm-studio { grid-area: s; } .ncm-chat { grid-area: c; } .ncm-free { grid-area: f; }

/* 공통 패널 */
.ncm-panel { min-width: 0; display: flex; flex-direction: column; padding: 22px; background: var(--ncm-paper); border: 1px solid var(--ncm-line); border-radius: 4px; color: var(--ncm-text); }
.ncm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ncm-head small { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 9px; font-weight: 850; letter-spacing: .14em; color: var(--ncm-mute); }
.ncm-head h3 { margin: 0; font-size: 18px; letter-spacing: -.06em; font-weight: 850; color: inherit; }
.ncm .ncm-head a { flex: none; font-size: 10px; font-weight: 850; color: inherit; }
.ncm .ncm-head a:hover { opacity: .6; }
.ncm-empty { padding: 34px 0; text-align: center; font-size: 12px; color: var(--ncm-mute); }
.ncm-meta { font-size: 11px; font-weight: 700; color: var(--ncm-mute); font-variant-numeric: tabular-nums; }
.ncm-new { display: inline-block; padding: 1px 5px; border-radius: 2px; background: var(--ncm-acid); color: #20231f !important; font-style: normal; font-size: 8px; font-weight: 900; letter-spacing: .04em; line-height: 1.5; vertical-align: 1px; }

/* ── 스튜디오 ── */
.ncm-feat { display: block; }
.ncm-feat-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 3px; background: var(--ncm-soft) center / cover no-repeat; overflow: hidden; }
.ncm-feat-img.is-empty { display: flex; align-items: center; justify-content: center; background: var(--ncm-ink); }
.ncm-feat-img.is-empty b { font-size: 90px; font-weight: 900; color: var(--ncm-acid); letter-spacing: -.1em; }
.ncm-feat-img .ncm-new { position: absolute; left: 12px; top: 12px; font-size: 9px; padding: 3px 7px; }
.ncm-feat-body { display: block; padding: 18px 2px 4px; }
.ncm-feat-body strong { display: block; margin: 8px 0 9px; font-size: clamp(19px,1.9vw,24px); line-height: 1.32; font-weight: 850; letter-spacing: -.07em; color: var(--ncm-text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ncm-ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.75; color: var(--ncm-mute); }
.ncm-more { display: inline-flex; gap: 6px; margin-top: 13px; font-size: 11px; font-weight: 850; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.ncm-more em { font-style: normal; transition: transform .15s; }
.ncm-feat:hover .ncm-more em { transform: translateX(4px); }
.ncm-feat:hover .ncm-feat-body strong { text-decoration: underline; text-underline-offset: 3px; }
.ncm-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--ncm-line); }
.ncm-feat + .ncm-minis { margin-top: 20px; }
.ncm-mini { display: flex; gap: 13px; align-items: center; min-width: 0; }
.ncm-mini-img { flex: none; width: 92px; height: 68px; border-radius: 3px; background: var(--ncm-soft) center / cover no-repeat; }
.ncm-mini-img.is-empty { background: var(--ncm-ink); }
.ncm-mini-body { min-width: 0; display: block; }
.ncm-mini-body strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px; font-size: 13px; line-height: 1.45; font-weight: 800; letter-spacing: -.05em; }
.ncm-mini:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* 유튜브 재생 뱃지 */
.ncm-play { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(32,35,31,.82); transition: background .15s, transform .15s; }
.ncm-play svg { width: 18px; height: 18px; fill: #fff; }
.ncm-feat:hover .ncm-play, .ncm-mini:hover .ncm-play { background: var(--ncm-acid); transform: scale(1.06); }
.ncm-feat:hover .ncm-play svg, .ncm-mini:hover .ncm-play svg { fill: #20231f; }
.ncm-mini-img { position: relative; }
.ncm-mini-img .ncm-play { right: 5px; bottom: 5px; width: 26px; height: 19px; border-radius: 5px; }
.ncm-mini-img .ncm-play svg { width: 11px; height: 11px; }
.ncm .ncm-by { font-weight: 850; color: var(--ncm-text); }

/* ── 그룹채팅 (잉크 패널) ── */
.ncm-chat { background: var(--ncm-ink); border-color: var(--ncm-ink); color: #fff; }
html body.dark .ncm-chat { background: #1e293b; border-color: #334155; }
.ncm-chat .ncm-head small { color: #a9aea2; }
.ncm-pulse { width: 7px; height: 7px; border-radius: 50%; background: #6b7064; }
.ncm-chat.is-live .ncm-pulse { background: var(--ncm-acid); animation: ncmPulse 1.6s infinite; }
@keyframes ncmPulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
.ncm-total { margin: -4px 0 14px; font-size: 12px; color: #a9aea2; }
.ncm-total b { margin-right: 4px; font-size: 30px; font-weight: 900; letter-spacing: -.06em; color: #fff; vertical-align: -3px; font-variant-numeric: tabular-nums; }
.ncm-total.is-on b { color: var(--ncm-acid); }
.ncm-rooms { margin: 0; padding: 0; list-style: none; }
.ncm-rooms li + li { border-top: 1px solid #373b34; }
html body.dark .ncm-rooms li + li { border-color: #334155; }
.ncm-room { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.ncm-av { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #31352e; font-size: 15px; font-weight: 900; color: #cfd3c6; }
html body.dark .ncm-av { background: #2a3850; }
.ncm-room.is-active .ncm-av { background: var(--ncm-acid); color: #20231f; }
.ncm-rb { flex: 1; min-width: 0; display: block; }
.ncm-rb b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; letter-spacing: -.05em; color: #fff; }
.ncm-rb b i { margin-left: 5px; font-size: 9px; color: #8d9284; }
.ncm-rb small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #a1a698; }
.ncm-room:hover .ncm-rb b { text-decoration: underline; text-underline-offset: 3px; }
.ncm-room.is-flash .ncm-rb small::after { content: ' · 새 메시지'; color: var(--ncm-acid); font-weight: 800; }
.ncm-rs { flex: none; display: flex; align-items: center; gap: 6px; }
.ncm-live { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; border: 1px solid #4a4f45; font-size: 11px; font-weight: 850; color: #a1a698; font-variant-numeric: tabular-nums; }
.ncm-live i { width: 6px; height: 6px; border-radius: 50%; background: #6b7064; }
.ncm-live em { font-style: normal; }
.ncm-live em::after { content: '명'; margin-left: 1px; font-weight: 700; }
.ncm-live.is-on { border-color: var(--ncm-acid); background: var(--ncm-acid); color: #20231f; }
.ncm-live.is-on i { background: #20231f; animation: ncmPulse 1.6s infinite; }
.ncm-unread { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 99px; background: #ff7a59; color: #fff; font-size: 10px; font-weight: 900; }

/* ── 자유게시판 ── */
.ncm-flist { margin: 0; padding: 0; list-style: none; }
.ncm-flist li + li { border-top: 1px solid var(--ncm-line); }
.ncm-flist a { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 0; }
.ncm-no { font-size: 11px; font-weight: 900; letter-spacing: .02em; color: var(--ncm-mute); font-variant-numeric: tabular-nums; transition: color .15s; }
.ncm-flist a:hover .ncm-no { color: var(--ncm-text); }
.ncm-ft { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ncm-ft b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 750; }
.ncm-flist a:hover .ncm-ft b { text-decoration: underline; text-underline-offset: 3px; }
.ncm-ft b i.fa-lock { margin-right: 4px; font-size: 10px; color: var(--ncm-mute); }
.ncm-ft em { flex: none; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 99px; background: var(--ncm-soft); font-style: normal; font-size: 10px; font-weight: 850; color: var(--ncm-text); }
.ncm-fm { font-size: 11px; color: var(--ncm-mute); white-space: nowrap; }
.ncm-fm small { margin-left: 8px; font-size: 11px; font-variant-numeric: tabular-nums; }

/* 반응형 */
@media (max-width: 1000px) {
  .ncm-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: "s s" "c f"; }
}
@media (max-width: 720px) {
  .ncm-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "s" "c" "f"; gap: 12px; }
  .ncm-panel { padding: 18px; }
  .ncm-sec-head { margin-bottom: 16px; }
}
@media (max-width: 480px) {
  .ncm-minis { grid-template-columns: 1fr; }
  .ncm-fm small { display: none; }
  .ncm-feat-body strong { font-size: 18px; }
}

/* ── 블로그 벤토 (큰 카드 1 + 작은 카드 4) ── */
.ncm-blog { margin-bottom: 46px; }
.ncm-bento { display: grid; grid-template-columns: minmax(0,1.3fr) repeat(2, minmax(0,1fr)); grid-template-rows: repeat(2, 200px); gap: 15px; }
.ncm-bc { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: 20px 22px; border-radius: 4px; background: var(--ncm-ink) center / cover no-repeat; color: #fff !important; overflow: hidden; }
.ncm-bc::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,19,0) 35%, rgba(20,22,19,.78) 100%); transition: background .2s; }
.ncm-bc:hover::before { background: linear-gradient(180deg, rgba(20,22,19,.12) 20%, rgba(20,22,19,.88) 100%); }
.ncm-bc.is-big { grid-row: 1 / 3; padding: 28px 30px; }
.ncm-bc.is-empty { background: var(--ncm-ink); }
.ncm-bc.is-empty .ncm-bc-txt strong { color: var(--ncm-acid); }
.ncm-bc-txt { position: relative; display: block; padding-right: 8px; }
.ncm-bc-txt small { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 850; letter-spacing: .02em; color: var(--ncm-acid); }
.ncm-bc-txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.4; font-weight: 850; letter-spacing: -.055em; color: #fff; }
.ncm-bc.is-big .ncm-bc-txt strong { font-size: clamp(22px,2.4vw,30px); line-height: 1.28; letter-spacing: -.07em; }
.ncm-bc:hover .ncm-bc-txt strong { text-decoration: underline; text-underline-offset: 3px; }
.ncm-bc-cnt { position: absolute; right: 16px; top: 14px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; background: rgba(20,22,19,.55); font-size: 10px; font-weight: 850; color: #fff; font-variant-numeric: tabular-nums; }
.ncm-bc-cnt i { font-size: 10px; opacity: .85; }
.ncm-bc-cnt i + i { margin-left: 5px; }
/* 개수가 적을 때 */
.ncm-bento-1 { grid-template-columns: 1fr; grid-template-rows: 300px; } .ncm-bento-1 .is-big { grid-row: auto; }
.ncm-bento-2 { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); grid-template-rows: 340px; } .ncm-bento-2 .is-big { grid-row: auto; }
.ncm-bento-3 { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); }
@media (max-width: 1000px) {
  .ncm-bento, .ncm-bento-4, .ncm-bento-5 { grid-template-columns: 1fr 1fr; grid-template-rows: 280px repeat(2, 170px); }
  .ncm-bc.is-big { grid-row: auto; grid-column: 1 / 3; }
  .ncm-bento-2, .ncm-bento-3 { grid-template-rows: 280px 170px; }
}
@media (max-width: 480px) {
  .ncm-bento, .ncm-bento-4, .ncm-bento-5 { grid-template-rows: 230px repeat(2, 150px); gap: 10px; }
  .ncm-bc { padding: 14px 15px; } .ncm-bc.is-big { padding: 18px; }
  .ncm-bc-txt strong { font-size: 13px; }
}