/* ============================================================
   BEAUDOC category.css — 카테고리 페이지 전용
   global.css 이후 로드. 모든 섹션 공통 적용.
   ============================================================ */

/* ── 배너 ── */
.board-banner{
  max-width:var(--max-w);margin:0 auto;
  padding:28px var(--pad-x) 32px;
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.board-banner.has-bg{
  min-height:180px;padding:32px var(--pad-x);
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;
}
.banner-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(20,18,16,0.7) 0%,rgba(20,18,16,0.15) 60%,transparent 100%);
}
.banner-inner{position:relative;z-index:1}
.banner-tag{
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:4px 12px;margin-bottom:10px;
}
.board-banner.has-bg .banner-tag{background:rgba(255,255,255,0.15)!important;color:#fff!important;border:1px solid rgba(255,255,255,0.3)}
.banner-title{
  font-family:'Pretendard','Noto Sans KR',sans-serif;
  font-size:clamp(24px,3vw,34px);font-weight:800;
  line-height:1.2;word-break:keep-all;color:var(--ink);
}
.board-banner.has-bg .banner-title{color:#fff}
.banner-desc{
  font-size:15px;color:var(--ink-dim);margin-top:8px;
  max-width:520px;line-height:1.7;word-break:keep-all;
}
.board-banner.has-bg .banner-desc{color:rgba(255,255,255,0.8)}

/* ── 탭 ── */
.cat-tabs-wrap{
  max-width:var(--max-w);margin:0 auto;
  padding:0 var(--pad-x);
  border-bottom:1px solid var(--line);
}
.cat-tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tab{
  font-size:13.5px;font-weight:600;padding:14px 18px;
  color:var(--ink-dim);white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .18s,border-color .18s;flex-shrink:0;
}
.cat-tab:hover{color:var(--ink)}
.cat-tab.active{color:var(--ink);border-bottom-color:var(--tab-c,var(--ink))}

/* ── 대표기사 영역 ── */
.cat-featured-zone{
  max-width:var(--max-w);margin:0 auto;
  padding:28px var(--pad-x) 0;
  display:grid;grid-template-columns:1.4fr 1fr;
  gap:24px;border-bottom:1px solid var(--line);
  padding-bottom:28px;
}
/* 대표기사 */
.cat-main-article{display:block;text-decoration:none;color:inherit}
.cat-main-img{
  position:relative;width:100%;aspect-ratio:4/3;
  overflow:hidden;background:var(--panel);margin-bottom:14px;
}
.cat-main-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.cat-main-article:hover .cat-main-img img{transform:scale(1.04)}
.cat-main-badge{
  position:absolute;top:12px;left:12px;
  font-size:9.5px;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:#fff;padding:4px 11px;
}
.cat-main-title{
  font-size:22px;font-weight:800;line-height:1.28;
  color:var(--ink);word-break:keep-all;margin-bottom:8px;
}
.cat-main-article:hover .cat-main-title{color:var(--sec,var(--gold))}
.cat-main-excerpt{font-size:13px;color:var(--ink-dim);line-height:1.7;margin-bottom:8px}
.cat-main-meta{font-size:11px;color:var(--ink-faint)}

/* 주요기사 2개 */
.cat-sub-articles{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line)}
.cat-sub-article{
  display:grid;grid-template-columns:42% 58%;
  text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);transition:background .18s;flex:1;
}
.cat-sub-article:last-child{border-bottom:none}
.cat-sub-article:hover{background:var(--bg-warm)}
.cat-sub-img{overflow:hidden;background:var(--panel);align-self:stretch}
.cat-sub-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat-sub-article:hover .cat-sub-img img{transform:scale(1.04)}
.cat-sub-body{padding:18px 16px;display:flex;flex-direction:column;justify-content:center}
.cat-sub-badge{
  font-size:9px;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;display:block;margin-bottom:6px;
}
.cat-sub-title{
  font-size:15px;font-weight:700;line-height:1.4;
  color:var(--ink);word-break:keep-all;
}
.cat-sub-article:hover .cat-sub-title{color:var(--sec,var(--gold))}
.cat-sub-excerpt{font-size:11.5px;color:var(--ink-dim);margin-top:5px;line-height:1.55;word-break:keep-all}
.cat-sub-meta{font-size:10.5px;color:var(--ink-faint);margin-top:8px}

/* ── 툴바 ── */
.cat-toolbar{
  max-width:var(--max-w);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--pad-x) 0;flex-wrap:wrap;gap:10px;
}
.sort-group{display:flex;gap:4px;background:var(--bg-warm);padding:3px;border:1px solid var(--line)}
.sort-btn{
  font-size:12.5px;padding:6px 13px;background:none;border:none;
  color:var(--ink-faint);cursor:pointer;font-family:inherit;transition:.18s;
  text-decoration:none;display:inline-block;
}
.sort-btn.active{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,0.07)}
.cat-count{font-size:12px;color:var(--ink-faint)}
.cat-count strong{color:var(--ink);font-weight:700}

/* ── 기사 그리드 ── */
.cat-grid{
  max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;padding:24px var(--pad-x) 0;
}
.cat-card{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;transition:opacity .18s;
}
.cat-card:hover{opacity:.88}
.cat-card-img{
  width:100%;aspect-ratio:16/10;
  overflow:hidden;background:var(--panel);
  position:relative;margin-bottom:12px;
}
.cat-card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s;display:block;
}
.cat-card:hover .cat-card-img img{transform:scale(1.04)}
.cat-card-cat{
  position:absolute;top:9px;left:9px;background:#fff;
  font-size:9.5px;font-weight:700;padding:3px 9px;
  letter-spacing:0.04em;
}
.cat-card-title{
  font-size:17px;font-weight:700;line-height:1.4;
  color:var(--ink);word-break:keep-all;margin-bottom:6px;
}
.cat-card-excerpt{
  font-size:12.5px;color:var(--ink-dim);
  line-height:1.65;flex:1;
}
.cat-card-meta{
  display:flex;gap:7px;margin-top:10px;
  font-size:11.5px;color:var(--ink-dim);
}

/* ── 빈 상태 ── */
.cat-empty{
  max-width:var(--max-w);margin:0 auto;
  padding:80px var(--pad-x);text-align:center;
}
.cat-empty p{font-size:15px;color:var(--ink-faint);margin-bottom:6px}

/* ── 광고 슬롯 ── */
.ad-slot{
  max-width:var(--max-w);margin:24px auto 0;
  padding:0 var(--pad-x);
}
.ad-slot:empty{display:none!important}

/* ── 페이지네이션 ── */
.pagination{
  max-width:var(--max-w);margin:0 auto;
  display:flex;justify-content:center;gap:6px;
  padding:40px var(--pad-x) 72px;flex-wrap:wrap;
}
.page-btn{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--ink-dim);border:1px solid var(--line);
  transition:.18s;text-decoration:none;
}
.page-btn.active{color:#fff;font-weight:700}
.page-btn:hover:not(.active){background:var(--panel)}

/* ════════════════════════
   반응형
   ════════════════════════ */
@media(max-width:900px){
  .cat-featured-zone{grid-template-columns:1fr;gap:16px}
  .cat-sub-articles{border-left:none;border-top:1px solid var(--line)}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:600px){
  .board-banner{padding:20px 4vw 24px}
  .board-banner.has-bg{min-height:150px}
  .banner-title{font-size:22px}
  .banner-desc{font-size:14px}
  .cat-tabs-wrap{padding:0 4vw}
  .cat-tab{font-size:13px;padding:12px 14px}
  .cat-featured-zone{padding:20px 4vw 20px}
  .cat-sub-article{grid-template-columns:38% 62%}
  .cat-toolbar{padding:14px 4vw 0}
  .cat-grid{grid-template-columns:1fr;gap:12px;padding:16px 4vw 0}
  .cat-card-title{font-size:16px}
  .pagination{padding:28px 4vw 52px}
  .ad-slot{padding:0 4vw}
}