/**
 * DXCMS — 커뮤니티 게시판 스킨 CSS v1.1.0
 * boards/skins/community/assets/skin.css
 *
 * ※ 배경색·border·border-radius 는 행 구분선과 버튼/뱃지에만 적용
 *    게시판 카드 전체 배경은 부모 테마에 위임
 */

/* ══════════════════════════════════════════
   전체 래퍼 — 배경/border/radius 없음
══════════════════════════════════════════ */
.cm-wrap {
  padding: 0;
}

/* ══════════════════════════════════════════
   헤더 (제목 + 총건수 + 검색)
══════════════════════════════════════════ */
.cm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 14px;
  gap: 16px;
}

.cm-header-left {}

.cm-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 3px;
  line-height: 1.3;
}

.cm-subtitle {
  font-size: .78rem;
  color: #64748b;
  margin: 0;
}

.cm-subtitle strong {
  color: #3b82f6;
  font-weight: 700;
}

/* ── 검색 박스 ── */
.cm-search-box {
  display: flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .15s;
}

.cm-search-box:focus-within {
  border-color: #94a3b8;
}

.cm-sf-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border-right: 1px solid #e2e8f0;
}

.cm-sf-select {
  appearance: none;
  -webkit-appearance: none;
  height: 38px;
  padding: 0 28px 0 12px;
  border: none;
  background: transparent;
  color: #334155;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  font-family: inherit;
}

.cm-sf-arrow {
  pointer-events: none;
  position: absolute;
  right: 8px;
  color: #94a3b8;
  font-size: .55rem;
}

.cm-search-form {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.cm-search-input {
  height: 38px;
  width: 200px;
  border: none;
  outline: none;
  padding: 0 10px;
  font-size: .84rem;
  color: #1e293b;
  background: transparent;
  font-family: inherit;
}

.cm-search-input::placeholder { color: #94a3b8; }

.cm-search-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .15s;
}
.cm-search-btn:hover { color: #3b82f6; }

.cm-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  color: #94a3b8;
  font-size: .72rem;
  text-decoration: none;
  transition: all .15s;
  flex-shrink: 0;
}
.cm-search-clear:hover { border-color: #ef4444; color: #ef4444; }

/* ══════════════════════════════════════════
   관리자 바 — 배경/border 없음
══════════════════════════════════════════ */
.cm-adm-bar {
  display: flex;
  align-items: center;
  padding: 8px 20px;
  gap: 8px;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.cm-adm-checkall {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: #64748b;
  cursor: pointer;
  user-select: none;
}

.cm-adm-checkall input {
  width: 14px;
  height: 14px;
  accent-color: #3b82f6;
  cursor: pointer;
}

.cm-adm-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 관리자 버튼 — 배경/border 없음 */
.cm-adm-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 0;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
  background: transparent;
}
.cm-adm-btn:hover { opacity: .7; }
.cm-adm-btn-del  { color: #ef4444; }
.cm-adm-btn-move { color: #7c3aed; }
.cm-adm-btn-copy { color: #059669; }

/* ══════════════════════════════════════════
   카테고리 모바일 바
══════════════════════════════════════════ */
.cm-cat-bar {
  display: none;
  border-top: 1px solid #e2e8f0;
}
@media (max-width: 1023px) { .cm-cat-bar { display: block; } }

.cm-cat-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background: none;
  border: none;
  font-size: .82rem;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  text-align: left;
  gap: 6px;
}

.cm-cat-pill {
  padding: 1px 8px;
  background: rgba(59,130,246,.1);
  color: #3b82f6;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
}

.cm-cat-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  border-top: 1px solid #e2e8f0;
}

.cm-cat-item {
  display: flex;
  align-items: center;
  padding: 7px 20px;
  font-size: .82rem;
  color: #1e293b;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .12s;
}
.cm-cat-item.active {
  color: #3b82f6;
  background: rgba(59,130,246,.06);
  border-left-color: #3b82f6;
  font-weight: 700;
}
.cm-cat-item:hover:not(.active) { background: rgba(0,0,0,.03); }

/* ══════════════════════════════════════════
   컬럼 헤더 — 배경 없음
══════════════════════════════════════════ */
.cm-thead {
  display: none;
  grid-template-columns: 80px 1fr 120px 100px 80px;
  padding: 0 20px;
  min-height: 44px;
  align-items: center;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
@media (min-width: 768px) { .cm-thead { display: grid; } }

.cm-th {
  font-size: .78rem;
  font-weight: 600;
  color: #64748b;
  text-align: center;
}
.cm-th-title {
  font-size: .78rem;
  font-weight: 600;
  color: #64748b;
  text-align: left;
  padding-left: 4px;
}

/* ══════════════════════════════════════════
   행 — PC (배경 없음)
══════════════════════════════════════════ */
.cm-row {
  display: none;
  grid-template-columns: 80px 1fr 120px 100px 80px;
  padding: 0 20px;
  min-height: 54px;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
  transition: background .12s;
}
.cm-row:last-child { border-bottom: none; }
.cm-row:hover { background: rgba(0,0,0,.02) !important; }
@media (min-width: 768px) { .cm-row { display: grid; } }

.cm-row-notice {}
.cm-row-cur {
  background: rgba(59,130,246,.04) !important;
  box-shadow: inset 3px 0 0 #3b82f6;
}

/* ── 번호 셀 ── */
.cm-td-num {
  text-align: center;
  font-size: .82rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

/* ── 제목 셀 ── */
.cm-td-title {
  padding: 10px 4px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.cm-title-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  overflow: hidden;
}
.cm-title-link:hover .cm-title-text { color: #3b82f6; }

.cm-title-text {
  font-size: .9rem;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  transition: color .12s;
}
.cm-row-cur .cm-title-text { color: #3b82f6; font-weight: 700; }

.cm-cmt { color: #3b82f6; font-weight: 700; font-size: .78rem; flex-shrink: 0; white-space: nowrap; }

/* ── 작성자 셀 — 이름 텍스트만 ── */
.cm-td-author {
  text-align: center;
  font-size: .82rem;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* ── 날짜·조회 셀 ── */
.cm-td-date {
  text-align: center;
  font-size: .82rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.cm-td-view {
  text-align: center;
  font-size: .82rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════
   행 — 모바일 (배경 없음)
══════════════════════════════════════════ */
.cm-row-mo {
  display: flex;
  padding: 12px 20px;
  border-bottom: 1px solid #e2e8f0;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: background .12s;
}
.cm-row-mo:last-child { border-bottom: none; }
.cm-row-mo:hover { background: rgba(0,0,0,.02) !important; }
@media (min-width: 768px) { .cm-row-mo { display: none !important; } }

.cm-mo-body { flex: 1; min-width: 0; }

.cm-mo-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  min-width: 0;
}

.cm-mo-title-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  overflow: hidden;
}

.cm-mo-title-text {
  font-size: .875rem;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.cm-mo-date { font-size: .72rem; color: #94a3b8; flex-shrink: 0; white-space: nowrap; }

.cm-mo-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: .74rem;
  color: #94a3b8;
}
.cm-mo-author { font-size: .74rem; font-weight: 600; color: #475569; }
.cm-mo-sep    { color: #cbd5e1; }
.cm-mo-view   { font-size: .72rem; color: #94a3b8; }

/* ══════════════════════════════════════════
   뱃지
══════════════════════════════════════════ */
.cm-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.cm-badge-hot    { color: #f97316; background: rgba(249,115,22,.1); font-style: italic; font-weight: 900; }
.cm-badge-cat    { color: #3b82f6; background: rgba(59,130,246,.09); }
.cm-badge-survey { color: #8b5cf6; background: rgba(139,92,246,.08); }
.cm-badge-link   { color: #0ea5e9; background: rgba(14,165,233,.08); }
.cm-badge-file   { color: #64748b; background: rgba(100,116,139,.08); }

.cm-badge-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  flex-shrink: 0;
}

/* 공지 아이콘 */
.cm-notice-icon { color: #3b82f6; font-size: .9rem; }

/* 검색 하이라이트 */
.cm-hl { background: #fef08a; color: #78350f; border-radius: 2px; padding: 0 1px; font-weight: 800; }
body.dark .cm-hl { background: #713f12; color: #fef08a; }

/* ══════════════════════════════════════════
   빈 목록
══════════════════════════════════════════ */
.cm-empty {
  padding: 60px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: .875rem;
}

/* ══════════════════════════════════════════
   하단: 페이지네이션 + 글쓰기
══════════════════════════════════════════ */
.cm-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  position: relative;
  min-height: 62px;
  border-top: 1px solid #e2e8f0;
}

.cm-pager {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cm-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: transparent;
  color: #64748b;
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
}
.cm-page-btn:hover { border-color: #94a3b8; color: #334155; }
.cm-page-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(59,130,246,.25);
}

.cm-write-btn {
  position: absolute;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 9px;
  background: #3b82f6;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter .15s;
  box-shadow: 0 2px 8px rgba(59,130,246,.28);
  white-space: nowrap;
}
.cm-write-btn:hover { filter: brightness(1.1); }

/* ══════════════════════════════════════════
   전체 공지
══════════════════════════════════════════ */
.cm-gn-wrap {
  border-bottom: 1px solid #e2e8f0;
}
.cm-gn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-bottom: 1px solid #e2e8f0;
  transition: background .12s;
}
.cm-gn-row:last-child { border-bottom: none; }
.cm-gn-row:hover { background: rgba(0,0,0,.02); }
.cm-gn-badge { flex-shrink: 0; padding: 2px 7px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; border-radius: 5px; white-space: nowrap; }
.cm-gn-title { flex: 1; min-width: 0; font-size: .875rem; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-gn-link  { text-decoration: none; transition: opacity .12s; }
.cm-gn-link:hover { opacity: .75; }

/* ══════════════════════════════════════════
   다크모드
══════════════════════════════════════════ */
body.dark .cm-wrap              { /* 배경 없음 */ }
body.dark .cm-title             { color: var(--text-main); }
body.dark .cm-subtitle          { color: var(--text-muted); }
body.dark .cm-search-box        { border-color: var(--border); }
body.dark .cm-sf-wrap           { border-right-color: var(--border); }
body.dark .cm-sf-select         { color: var(--text-main); }
body.dark .cm-search-input      { color: var(--text-main); }
body.dark .cm-adm-bar           { border-color: var(--border); }
body.dark .cm-thead             { border-color: var(--border); }
body.dark .cm-th,
body.dark .cm-th-title          { color: var(--text-muted); }
body.dark .cm-row               { border-color: var(--border); }
body.dark .cm-row:hover         { background: rgba(255,255,255,.03) !important; }
body.dark .cm-row-mo            { border-color: var(--border); }
body.dark .cm-row-mo:hover      { background: rgba(255,255,255,.03) !important; }
body.dark .cm-title-text        { color: var(--text-main); }
body.dark .cm-td-author         { color: var(--text-main); }
body.dark .cm-td-date           { color: var(--text-muted); }
body.dark .cm-td-view           { color: var(--text-muted); }
body.dark .cm-td-num            { color: var(--text-muted); }
body.dark .cm-mo-title-text     { color: var(--text-main); }
body.dark .cm-mo-author         { color: var(--text-muted); }
body.dark .cm-footer            { border-color: var(--border); }
body.dark .cm-page-btn          { border-color: var(--border); color: var(--text-muted); }
body.dark .cm-gn-wrap           { border-color: var(--border); }
body.dark .cm-gn-row            { border-color: var(--border); }
body.dark .cm-gn-row:hover      { background: rgba(255,255,255,.03); }
body.dark .cm-gn-title          { color: var(--text-main); }
body.dark .cm-cat-list          { border-color: var(--border); }
body.dark .cm-cat-item          { color: var(--text-main); }
body.dark .cm-cat-toggle        { color: var(--text-main); }
body.dark .cm-cat-bar           { border-color: var(--border); }
body.dark .cm-cat-item:hover:not(.active) { background: rgba(255,255,255,.03); }

/* ══════════════════════════════════════════
   반응형
══════════════════════════════════════════ */
@media (max-width: 640px) {
  .cm-header       { padding: 14px 16px 10px; flex-wrap: wrap; }
  .cm-title        { font-size: 1rem; }
  .cm-search-input { width: 130px; }
  .cm-footer       { padding: 12px 14px; min-height: 56px; }
  .cm-write-btn    { right: 14px; padding: 8px 14px; font-size: .78rem; }
  .cm-thead        { padding: 0 16px; }
  .cm-row          { padding: 0 16px; }
  .cm-row-mo       { padding: 12px 16px; }
  .cm-adm-bar      { padding: 8px 16px; }
  .cm-gn-row       { padding: 9px 16px; }
  .cm-cat-toggle   { padding: 10px 16px; }
  .cm-cat-item     { padding: 7px 16px; }
  .cm-empty        { padding: 60px 16px; }
}
@media (max-width: 400px) {
  .cm-search-input { width: 90px; }
  .cm-sf-select    { padding-left: 8px; padding-right: 20px; font-size: .76rem; }
}