@charset "utf-8";
/* ============================================================
   user/board/popular.php — 공감데이터 대시보드 (라이트)
   ============================================================ */
#main { padding:0; }

/* 히어로 */
.pd-hero {
    background:#1B4B9B;
    background-image:linear-gradient(135deg,#173F86 0%,#1F58B8 100%);
    color:#fff; text-align:center; padding:52px 0 48px;
}
.pd-hero-badge { display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.30); border-radius:20px; font-size:13px; font-weight:700; padding:5px 16px; margin-bottom:14px; }
.pd-hero-title { font-size:clamp(24px,4vw,34px); font-weight:900; letter-spacing:-.02em; margin-bottom:10px; }
.pd-hero-sub { font-size:15px; color:rgba(255,255,255,.85); margin-bottom:12px; word-break:keep-all; }
.pd-hero-upd { font-size:13px; color:rgba(255,255,255,.7); }
.pd-hero-upd strong { color:#FFD24A; font-weight:700; }

/* 본문 */
.pd-body { background:var(--surface-soft,#F6F7F9); padding:28px 0 64px; }

/* 요약 카드 */
.pd-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
@media(min-width:760px){ .pd-summary{ grid-template-columns:repeat(6,1fr); } }
.pd-sum-card { background:#fff; border:1px solid var(--border-soft,#D3D7DE); border-radius:8px; padding:20px 12px; position:relative; overflow:hidden;
    display:flex; flex-direction:column-reverse; align-items:center; justify-content:center; gap:8px; text-align:center; }
.pd-sum-lbl { font-size:20px; color:#333; margin:0; }
.pd-sum-num { font-size:34px; font-weight:900; color:#1C5BAC; line-height:1; }
.pd-sum-num span { font-size:17px; font-weight:600; margin-left:2px; }

/* 그리드 */
.pd-grid { display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:18px; }
@media(min-width:880px){ .pd-grid-2{ grid-template-columns:1fr 1fr; } }

.pd-card { background:#fff; border:1px solid var(--border-soft,#D3D7DE); border-radius:8px; padding:22px 24px; min-width:0; overflow:hidden; }
.pd-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:16px; }
.pd-card-head h2 { font-size:20px; font-weight:800; color:#16264D; }
.pd-card-sub { font-size:12px; color:#9CA3AF; flex-shrink:0; }
.pd-chart { position:relative; height:300px; width:100%; }
/* 모바일에서 차트 위를 드래그해도 페이지가 세로 스크롤되도록 */
.pd-chart canvas { touch-action:pan-y !important; max-width:100%; }
.pd-empty { text-align:center; color:#9CA3AF; padding:40px 0; }

/* TOP10 */
.pd-top10 { list-style:none; padding:0; margin:0; }
.pd-top10 li { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-soft,#D3D7DE); }
.pd-top10 li:last-child { border-bottom:none; }
.pd-rank { flex-shrink:0; width:24px; height:24px; border-radius:50%; background:#E1E5EA; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pd-rank-1 { background:#F2A900; } .pd-rank-2 { background:#9CA3AF; } .pd-rank-3 { background:#C98A3C; }
.pd-top10-body { flex:1; min-width:0; text-decoration:none; display:flex; flex-direction:column; align-items:stretch; gap:1.5px; }
.pd-top10-cat { font-size:12px; font-weight:600; color:#9098A6; }
.pd-top10-title { width:100%; min-width:0; font-size:16px; font-weight:600; color:#222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-top10-body:hover .pd-top10-title { color:#1C5BAC; }
.pd-top10-stat { flex-shrink:0; font-size:12px; font-weight:700; color:#E5446D; white-space:nowrap; }
.pd-top10-cm { color:#9098A6; }

/* 하단 */
.pd-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; background:#fff; border:1px solid var(--border-soft,#D3D7DE); border-radius:8px; padding:18px 22px; margin-top:4px; }
.pd-foot p { font-size:13px; color:#6B7283; line-height:1.6; word-break:keep-all; }
.pd-foot-btns { display:flex; gap:10px; flex-shrink:0; }
.pd-dl { background:#1B4B9B; color:#fff; border:0; border-radius:8px; font-size:13px; font-weight:700; padding:10px 16px; cursor:pointer; }
.pd-dl:hover { background:#163C7E; }

/* ── 모바일 반응형 ── */
@media(max-width:640px){
    /* Top10에서 카테고리 배지·댓글 수 숨김 */
    .pd-top10-cat { display:none; }
    .pd-top10-cm { display:none; }
    /* 카드 여백 축소로 차트 공간 확보 */
    .pd-card { padding:18px 16px; border-radius:8px; }
    .pd-chart { height:260px; }
    .pd-foot { flex-direction:column; align-items:stretch; }
    .pd-foot-btns { width:100%; }
    .pd-foot-btns .pd-dl { flex:1; }
}