/**
 * DX Cafe — cafe.css v1.0.0
 * 독립형 카페 플랫폼 스타일
 */

/* ── 리셋 & 변수 ── */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --cafe-primary:   #03c75a;
  --cafe-primary-d: #02a34a;
  --cafe-bg:        #f5f6f8;
  --cafe-card:      #ffffff;
  --cafe-border:    #e8e9ec;
  --cafe-text:      #1a1a2e;
  --cafe-muted:     #8c8c8c;
  --cafe-radius:    10px;
  --cafe-shadow:    0 2px 12px rgba(0,0,0,.08);
  --font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}

body { margin:0; font-family:var(--font); background:var(--cafe-bg); color:var(--cafe-text); line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul, ol { margin:0; padding:0; list-style:none; }
h1,h2,h3,h4 { margin:0; }
input, button, textarea, select { font-family:inherit; }

/* ── 헤더 ── */
.dxcafe-header {
  position: sticky; top:0; z-index:100;
  background: #fff;
  border-bottom: 1px solid var(--cafe-border);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.dxcafe-header-inner {
  max-width:1200px; margin:0 auto; padding:0 20px;
  height: 56px; display:flex; align-items:center; gap:16px;
}
.dxcafe-logo { display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.1rem; flex-shrink:0; }
.dxcafe-logo-icon { font-size:1.4rem; }
.dxcafe-logo-text { color:var(--cafe-primary); }

.dxcafe-search-form { flex:1; display:flex; max-width:420px; }
.dxcafe-search-input {
  flex:1; padding:8px 14px; border:1px solid var(--cafe-border);
  border-radius:20px 0 0 20px; font-size:.875rem; outline:none;
  border-right:none;
}
.dxcafe-search-input:focus { border-color:var(--cafe-primary); }
.dxcafe-search-btn {
  padding:8px 14px; border:1px solid var(--cafe-border); border-left:none;
  border-radius:0 20px 20px 0; background:#f5f6f8; cursor:pointer;
}

.dxcafe-header-utils { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.dxcafe-util-btn {
  padding:6px 14px; border-radius:20px; font-size:.82rem; font-weight:600;
  border:1px solid var(--cafe-border); background:#fff; cursor:pointer;
  transition:all .15s; white-space:nowrap;
}
.dxcafe-util-btn:hover { border-color:var(--cafe-primary); color:var(--cafe-primary); }
.dxcafe-util-link { font-size:.8rem; color:var(--cafe-muted); }
.dxcafe-btn-primary {
  background:var(--cafe-primary)!important; color:#fff!important;
  border-color:var(--cafe-primary)!important;
}
.dxcafe-btn-primary:hover { background:var(--cafe-primary-d)!important; }

/* ── 레이아웃 ── */
.dxcafe-wrap { min-height: calc(100vh - 56px - 48px); }
.dxcafe-container { max-width:1200px; margin:0 auto; padding:0 20px; }
.dxcafe-main { }

/* ── 히어로 ── */
.dxcafe-hero {
  background: linear-gradient(135deg, #03c75a 0%, #00a8e8 100%);
  padding: 64px 20px;
  text-align: center;
  color: #fff;
}
.dxcafe-hero-inner { max-width:600px; margin:0 auto; }
.dxcafe-hero h1 { font-size:1.8rem; font-weight:900; margin-bottom:12px; }
.dxcafe-hero p  { font-size:1rem; opacity:.9; margin-bottom:24px; }
.dxcafe-btn-hero {
  display:inline-block; padding:12px 32px;
  background:#fff; color:var(--cafe-primary);
  border-radius:24px; font-weight:700; font-size:.95rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  transition: transform .15s;
}
.dxcafe-btn-hero:hover { transform:translateY(-2px); }

/* ── 카테고리 탭 ── */
.dxcafe-category-tabs {
  display:flex; gap:8px; flex-wrap:wrap;
  padding: 20px 0 0;
}
.dxcafe-tab {
  padding:6px 16px; border-radius:16px; font-size:.82rem; font-weight:600;
  border:1px solid var(--cafe-border); background:#fff; transition:all .15s;
}
.dxcafe-tab:hover, .dxcafe-tab.active {
  background:var(--cafe-primary); color:#fff; border-color:var(--cafe-primary);
}

/* ── 리스트 헤더 ── */
.dxcafe-list-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; border-bottom:1px solid var(--cafe-border); margin-bottom:20px;
}
.dxcafe-sort-tabs { display:flex; gap:4px; }
.dxcafe-sort-tab {
  padding:4px 12px; border-radius:12px; font-size:.8rem;
  color:var(--cafe-muted); transition:all .15s;
}
.dxcafe-sort-tab.active { background:var(--cafe-primary); color:#fff; }
.dxcafe-total-count { font-size:.82rem; color:var(--cafe-muted); }

/* ── 카페 카드 그리드 ── */
.dxcafe-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  padding-bottom:32px;
}
.dxcafe-card {
  background:var(--cafe-card); border-radius:var(--cafe-radius);
  border:1px solid var(--cafe-border); overflow:hidden;
  transition:box-shadow .2s, transform .2s;
  display:flex; flex-direction:column;
}
.dxcafe-card:hover { box-shadow:var(--cafe-shadow); transform:translateY(-2px); }

.dxcafe-card-cover {
  height:100px; background:#e8f5e9 center/cover no-repeat;
  position:relative; display:flex; align-items:flex-end;
}
.dxcafe-card-cover-default {
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:2rem; background:linear-gradient(135deg,#e8f5e9,#b2dfdb);
}
.dxcafe-card-logo {
  position:absolute; bottom:-16px; left:16px;
  width:40px; height:40px; border-radius:8px;
  border:2px solid #fff; object-fit:cover;
}
.dxcafe-card-logo-default {
  position:absolute; bottom:-16px; left:16px;
  width:40px; height:40px; border-radius:8px;
  border:2px solid #fff; background:var(--cafe-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:700; color:#fff;
}
.dxcafe-card-body { padding:24px 14px 14px; flex:1; }
.dxcafe-card-name { font-size:.9rem; font-weight:700; margin-bottom:4px; }
.dxcafe-card-intro { font-size:.75rem; color:var(--cafe-muted); margin-bottom:10px; line-height:1.5; min-height:34px; }
.dxcafe-card-meta { display:flex; gap:8px; font-size:.72rem; color:var(--cafe-muted); flex-wrap:wrap; }

/* ── 카페 헤더 ── */
.dxcafe-cafe-header {
  background: #1a1a2e center/cover no-repeat;
  position:relative; min-height:200px;
}
.dxcafe-cafe-header-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.7));
}
.dxcafe-cafe-header-inner {
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:32px 20px 0;
  display:flex; align-items:flex-end; gap:20px;
}
.dxcafe-cafe-logo {
  width:72px; height:72px; border-radius:12px;
  border:3px solid rgba(255,255,255,.9); object-fit:cover; flex-shrink:0;
}
.dxcafe-cafe-logo-default {
  width:72px; height:72px; border-radius:12px;
  border:3px solid rgba(255,255,255,.9); background:var(--cafe-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:700; color:#fff; flex-shrink:0;
}
.dxcafe-cafe-info { flex:1; color:#fff; }
.dxcafe-cafe-name { font-size:1.4rem; font-weight:900; margin-bottom:4px; }
.dxcafe-cafe-intro { font-size:.875rem; opacity:.85; margin-bottom:8px; }
.dxcafe-cafe-stats { display:flex; gap:16px; font-size:.8rem; opacity:.8; }
.dxcafe-cafe-actions { flex-shrink:0; }

/* 게시판 네비 */
.dxcafe-board-nav {
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:flex; gap:0; border-top:1px solid rgba(255,255,255,.15);
  margin-top:16px; overflow-x:auto;
}
.dxcafe-board-nav-item {
  padding:12px 20px; font-size:.875rem; font-weight:600;
  color:rgba(255,255,255,.75); border-bottom:3px solid transparent;
  white-space:nowrap; transition:all .15s;
}
.dxcafe-board-nav-item:hover,
.dxcafe-board-nav-item.active {
  color:#fff; border-bottom-color:var(--cafe-primary);
}

/* ── 카페 콘텐츠 레이아웃 ── */
.dxcafe-cafe-content {
  display:grid; grid-template-columns:1fr 280px;
  gap:24px; padding-top:24px; padding-bottom:32px;
}
.dxcafe-cafe-main { }
.dxcafe-cafe-side  { }

/* ── 섹션 ── */
.dxcafe-section { background:var(--cafe-card); border-radius:var(--cafe-radius); border:1px solid var(--cafe-border); margin-bottom:16px; overflow:hidden; }
.dxcafe-section-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--cafe-border); }
.dxcafe-section-head h2 { font-size:.9rem; font-weight:700; }

/* ── 게시글 목록 ── */
.dxcafe-post-list { }
.dxcafe-post-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px; border-bottom:1px solid var(--cafe-border); gap:12px;
}
.dxcafe-post-item:last-child { border-bottom:none; }
.dxcafe-post-link { display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.dxcafe-post-board { font-size:.75rem; color:var(--cafe-primary); flex-shrink:0; }
.dxcafe-post-title { font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dxcafe-post-comments { font-size:.75rem; color:#ff6b6b; flex-shrink:0; }
.dxcafe-post-meta { font-size:.72rem; color:var(--cafe-muted); flex-shrink:0; }

/* ── 위젯 ── */
.dxcafe-widget { background:var(--cafe-card); border-radius:var(--cafe-radius); border:1px solid var(--cafe-border); padding:16px 18px; margin-bottom:12px; }
.dxcafe-widget-title { font-size:.82rem; font-weight:700; margin-bottom:10px; color:var(--cafe-muted); text-transform:uppercase; letter-spacing:.05em; }
.dxcafe-widget-desc { font-size:.82rem; line-height:1.7; color:#555; }
.dxcafe-grade-list { display:flex; flex-direction:column; gap:6px; }
.dxcafe-grade-list li { font-size:.8rem; display:flex; justify-content:space-between; }
.dxcafe-grade-score { color:var(--cafe-muted); }

/* ── 뱃지/태그 ── */
.dxcafe-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:.72rem; font-weight:700; background:#e8f5e9; color:var(--cafe-primary); }
.dxcafe-badge-pending { background:#fff3cd; color:#856404; }
.dxcafe-tag { display:inline-block; padding:2px 8px; border-radius:10px; font-size:.7rem; background:#f0f0f0; color:#555; }

/* ── 버튼 ── */
.dxcafe-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:6px; font-size:.875rem; font-weight:600; cursor:pointer; border:1px solid var(--cafe-border); background:#fff; transition:all .15s; }
.dxcafe-btn:hover { border-color:var(--cafe-primary); color:var(--cafe-primary); }
.dxcafe-btn-sm { padding:5px 12px; font-size:.78rem; }
.dxcafe-btn-outline { background:transparent; border-color:#ccc; color:#666; }
.dxcafe-btn-danger { border-color:#ef4444; color:#ef4444; }

/* ── 폼 ── */
.dxcafe-form { background:var(--cafe-card); border-radius:var(--cafe-radius); border:1px solid var(--cafe-border); padding:28px; max-width:640px; margin:32px auto; }
.dxcafe-form-title { font-size:1.1rem; font-weight:800; margin-bottom:24px; }
.dxcafe-form-group { margin-bottom:18px; }
.dxcafe-form-label { display:block; font-size:.82rem; font-weight:600; color:#444; margin-bottom:6px; }
.dxcafe-form-input, .dxcafe-form-select, .dxcafe-form-textarea {
  width:100%; padding:10px 14px; border:1px solid var(--cafe-border); border-radius:8px;
  font-size:.875rem; outline:none; transition:border-color .15s;
}
.dxcafe-form-input:focus, .dxcafe-form-select:focus, .dxcafe-form-textarea:focus { border-color:var(--cafe-primary); }
.dxcafe-form-textarea { min-height:120px; resize:vertical; }
.dxcafe-form-hint { font-size:.72rem; color:var(--cafe-muted); margin-top:4px; }
.dxcafe-form-actions { display:flex; gap:10px; margin-top:24px; }
.dxcafe-form-submit { flex:1; padding:12px; background:var(--cafe-primary); color:#fff; border:none; border-radius:8px; font-size:.9rem; font-weight:700; cursor:pointer; transition:background .15s; }
.dxcafe-form-submit:hover { background:var(--cafe-primary-d); }

/* ── 게시글 상세 ── */
.dxcafe-post-view { background:var(--cafe-card); border-radius:var(--cafe-radius); border:1px solid var(--cafe-border); padding:28px; }
.dxcafe-post-view-title { font-size:1.3rem; font-weight:800; margin-bottom:12px; }
.dxcafe-post-view-meta { display:flex; gap:12px; font-size:.8rem; color:var(--cafe-muted); padding-bottom:16px; border-bottom:1px solid var(--cafe-border); margin-bottom:20px; }
.dxcafe-post-view-content { font-size:.9rem; line-height:1.9; min-height:200px; }
.dxcafe-post-view-content img { max-width:100%; border-radius:6px; }

/* 댓글 */
.dxcafe-comments { margin-top:24px; }
.dxcafe-comment-head { font-size:.9rem; font-weight:700; margin-bottom:14px; }
.dxcafe-comment-item { padding:12px 0; border-bottom:1px solid var(--cafe-border); }
.dxcafe-comment-author { font-size:.8rem; font-weight:700; margin-bottom:4px; }
.dxcafe-comment-body { font-size:.85rem; line-height:1.6; }
.dxcafe-comment-meta { font-size:.72rem; color:var(--cafe-muted); margin-top:4px; }
.dxcafe-comment-form { margin-top:16px; display:flex; gap:10px; }
.dxcafe-comment-input { flex:1; padding:10px 14px; border:1px solid var(--cafe-border); border-radius:8px; font-size:.875rem; resize:none; min-height:60px; }
.dxcafe-comment-submit { padding:10px 20px; background:var(--cafe-primary); color:#fff; border:none; border-radius:8px; font-weight:700; cursor:pointer; }

/* ── 빈 상태 ── */
.dxcafe-empty { text-align:center; padding:64px 20px; color:var(--cafe-muted); }
.dxcafe-empty-icon { font-size:3rem; margin-bottom:12px; }
.dxcafe-empty-sm { padding:24px 18px; text-align:center; color:var(--cafe-muted); font-size:.82rem; }

/* ── 페이지네이션 ── */
.dxcafe-pagination { display:flex; justify-content:center; gap:4px; padding:24px 0; }
.dxcafe-page-btn {
  min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--cafe-border); border-radius:6px; font-size:.82rem; background:#fff;
  transition:all .15s;
}
.dxcafe-page-btn:hover, .dxcafe-page-btn.active {
  background:var(--cafe-primary); color:#fff; border-color:var(--cafe-primary);
}

/* ── 플래시 ── */
.dxcafe-flash { padding:12px 20px; font-size:.875rem; font-weight:600; text-align:center; }
.dxcafe-flash-success { background:#d1fae5; color:#065f46; }
.dxcafe-flash-error   { background:#fee2e2; color:#991b1b; }
.dxcafe-flash-info    { background:#dbeafe; color:#1e40af; }

/* ── 푸터 ── */
.dxcafe-footer { background:#fff; border-top:1px solid var(--cafe-border); height:48px; display:flex; align-items:center; }
.dxcafe-footer-inner { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--cafe-muted); width:100%; }

/* ── 관리자 레이아웃 ── */
.dxcafe-admin-wrap { display:flex; min-height:100vh; }
.dxcafe-admin-side { width:220px; background:#1a1a2e; flex-shrink:0; padding-top:20px; }
.dxcafe-admin-side-logo { padding:0 20px 20px; font-size:1rem; font-weight:700; color:#03c75a; border-bottom:1px solid rgba(255,255,255,.08); }
.dxcafe-admin-nav-item { display:block; padding:10px 20px; font-size:.83rem; color:rgba(255,255,255,.65); transition:all .15s; }
.dxcafe-admin-nav-item:hover, .dxcafe-admin-nav-item.active { background:rgba(3,199,90,.1); color:#03c75a; }
.dxcafe-admin-main { flex:1; padding:24px; background:#f5f6f8; overflow-x:auto; }
.dxcafe-admin-title { font-size:1.1rem; font-weight:800; margin-bottom:20px; }
.dxcafe-admin-card { background:#fff; border-radius:10px; border:1px solid var(--cafe-border); padding:20px; margin-bottom:16px; }

/* ── 반응형 ── */
@media (max-width:1023px) { .dxcafe-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px) {
  .dxcafe-grid { grid-template-columns:repeat(2,1fr); }
  .dxcafe-cafe-content { grid-template-columns:1fr; }
  .dxcafe-cafe-side { display:none; }
  .dxcafe-header-utils .dxcafe-util-link { display:none; }
}
@media (max-width:480px) {
  .dxcafe-grid { grid-template-columns:1fr; }
  .dxcafe-search-form { display:none; }
}