/**
 * ┌─────────────────────────────────────────────────────────────────────┐
 * │  FILE INDEX — 여수뉴스포털                                          │
 * ├──────────────┬──────────────────────────────────────────────────────┤
 * │  파일명      │  portal-widgets.css                                  │
 * │  위치        │  /assets/css/portal-widgets.css                      │
 * │  생성일      │  2026-07-11                                          │
 * │  버전        │  v1.0                                                │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  기능/역할   │  14개 포털 공통 UI 위젯 토큰 + 컴포넌트 스타일      │
 * │              │  - --pw-* 디자인 토큰 (모든 포털 공유)              │
 * │              │  - .pw-hero, .pw-card-grid, .pw-filter-bar 등        │
 * │              │  - 포털별 primary 는 var(--portal-primary) 주입      │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  로드 위치   │  includes/header.php — style.css 다음, portal.css 전 │
 * │  참조 파일   │  includes/widgets/*.php (renderWidget* 함수들)       │
 * │              │  docs/WIDGET_STANDARD.md                             │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  원칙        │  PROJECT_RULES.md 원칙 1~4 준수                     │
 * │              │  - 최소 폰트 14px (배지 제외)                        │
 * │              │  - 포털별 CSS는 {portal}/assets/css/{portal}.css 한정│
 * │              │  - 글로벌 선택자에 !important 사용 금지              │
 * └──────────────┴──────────────────────────────────────────────────────┘
 */

/* ================================================================
   §0  디자인 토큰 — --pw-* 공통 변수
   portal.php 가 주입하는 --portal-primary 를 최우선 참조
================================================================ */
:root {
  /* ── 컬러: 포털 primary (portal.php 주입값 우선) ── */
  --pw-primary:       var(--portal-primary,      var(--primary,      #2563eb));
  --pw-primary-dark:  var(--portal-primary-dark,  var(--primary-dark,  #1d4ed8));
  --pw-primary-light: var(--portal-primary-light, var(--primary-light, #dbeafe));

  /* ── 텍스트 컬러 ── */
  --pw-text-dark:   #1e293b;
  --pw-text-body:   #334155;
  --pw-text-muted:  #64748b;
  --pw-text-faint:  #94a3b8;
  --pw-text-white:  #ffffff;

  /* ── 배경 / 보더 ── */
  --pw-bg:          #ffffff;
  --pw-bg-soft:     #f8fafc;
  --pw-bg-mute:     #f1f5f9;
  --pw-border:      #e2e8f0;
  --pw-border-mid:  #cbd5e1;

  /* ── 상태 컬러 ── */
  --pw-success:     #16a34a;
  --pw-warning:     #d97706;
  --pw-danger:      #dc2626;
  --pw-info:        #0ea5e9;

  /* ── 타이포그래피 스케일 (PROJECT_RULES.md 원칙3) ── */
  --pw-fs-xs:    var(--fs-xs,   12px);  /* 배지 전용 최솟값 */
  --pw-fs-sm:    var(--fs-sm,   14px);  /* 메타·날짜·보조텍스트 최솟값 ★ */
  --pw-fs-base:  var(--fs-base, 16px);  /* 본문 기본 */
  --pw-fs-md:    var(--fs-md,   17px);  /* 강조 본문·버튼 */
  --pw-fs-lg:    var(--fs-lg,   18px);  /* 카드 제목·섹션명 */
  --pw-fs-xl:    var(--fs-xl,   20px);  /* 서브 헤더 */
  --pw-fs-2xl:   var(--fs-2xl,  24px);  /* 페이지 제목 */
  --pw-fs-3xl:   var(--fs-3xl,  28px);  /* 섹션 대제목 */
  --pw-fs-hero:  var(--fs-hero, 32px);  /* 히어로 제목 */
  --pw-lh:       1.6;
  --pw-lh-tight: 1.4;

  /* ── 간격 ── */
  --pw-sp-xs:  4px;
  --pw-sp-sm:  8px;
  --pw-sp-md:  12px;
  --pw-sp-lg:  16px;
  --pw-sp-xl:  24px;
  --pw-sp-2xl: 32px;

  /* ── 카드 / 그리드 ── */
  --pw-card-radius: var(--radius-md,   10px);
  --pw-card-shadow: var(--shadow-sm,   0 1px 6px rgba(0,0,0,.07));
  --pw-card-gap:    var(--card-gap,    16px);
  --pw-grid-gap:    var(--grid-gap,    20px);
  --pw-thumb-w:     140px;
  --pw-thumb-h:     94px;

  /* ── 섹션 레이아웃 ── */
  --pw-section-max:   960px;
  --pw-hero-pad:      36px 24px 32px;
  --pw-section-pad:   28px 16px 0;
  --pw-side-width:    240px;

  /* ── 반응형 중단점 ── */
  --pw-bp-mobile:  600px;
  --pw-bp-tablet:  900px;
}


/* ================================================================
   §1  히어로 위젯 — .pw-hero
   renderWidgetHero() 사용
================================================================ */
.pw-hero {
  background: linear-gradient(135deg, var(--pw-primary) 0%, var(--pw-primary-dark) 100%);
  padding: var(--pw-hero-pad);
  color: var(--pw-text-white);
  border-radius: var(--pw-card-radius) var(--pw-card-radius) 0 0;
}
.pw-hero__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--pw-fs-2xl);
  margin-bottom: 12px;
}
.pw-hero__title {
  margin: 0 0 6px;
  font-size: var(--pw-fs-2xl);
  font-weight: 800;
  line-height: var(--pw-lh-tight);
}
.pw-hero__subtitle {
  margin: 0;
  font-size: var(--pw-fs-sm);
  opacity: .88;
  line-height: var(--pw-lh);
}
.pw-hero__actions {
  display: flex;
  gap: var(--pw-sp-sm);
  flex-wrap: wrap;
  margin-top: 20px;
}
.pw-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: var(--pw-fs-sm);
  font-weight: 700;
  text-decoration: none;
  transition: all .15s;
}
.pw-hero__btn--primary {
  background: rgba(255,255,255,.2);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
}
.pw-hero__btn--primary:hover {
  background: rgba(255,255,255,.32);
}
.pw-hero__btn--ghost {
  background: transparent;
  color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.3);
}
.pw-hero__btn--ghost:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}


/* ================================================================
   §2  통계 바 — .pw-stats
   renderWidgetStatsBar() 사용
================================================================ */
.pw-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.2);
  margin-top: 20px;
  padding-top: 18px;
}
.pw-stats--standalone {
  /* 히어로 외부 독립 사용 시 */
  background: var(--pw-bg);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-card-radius);
  padding: 16px 0;
  border-top: none;
  margin-top: 0;
}
.pw-stat {
  flex: 1;
  text-align: center;
}
.pw-stat + .pw-stat {
  border-left: 1px solid rgba(255,255,255,.2);
}
.pw-stats--standalone .pw-stat + .pw-stat {
  border-left-color: var(--pw-border);
}
.pw-stat__num {
  display: block;
  font-size: var(--pw-fs-2xl);
  font-weight: 800;
  line-height: 1.2;
}
.pw-stat__lbl {
  display: block;
  font-size: var(--pw-fs-xs);
  opacity: .8;
  margin-top: 4px;
}
.pw-stats--standalone .pw-stat__lbl {
  opacity: 1;
  color: var(--pw-text-muted);
}
.pw-stats--standalone .pw-stat__num {
  color: var(--pw-primary);
}


/* ================================================================
   §3  섹션 헤더 — .pw-section-head
================================================================ */
.pw-section {
  max-width: var(--pw-section-max);
  margin: 0 auto;
  padding: var(--pw-section-pad);
}
.pw-section-head {
  display: flex;
  align-items: center;
  gap: var(--pw-sp-sm);
  margin-bottom: 14px;
}
.pw-section-title {
  margin: 0;
  font-size: var(--pw-fs-base);
  font-weight: 800;
  color: var(--pw-text-dark);
  display: flex;
  align-items: center;
  gap: var(--pw-sp-sm);
}
.pw-section-title i {
  color: var(--pw-primary);
}
.pw-section-more {
  margin-left: auto;
  font-size: var(--pw-fs-xs);
  font-weight: 500;
  color: var(--pw-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.pw-section-more:hover {
  color: var(--pw-primary);
}


/* ================================================================
   §4  카드 그리드 — .pw-grid / .pw-card
   renderWidgetCardGrid() 사용
================================================================ */
.pw-grid {
  display: grid;
  gap: var(--pw-card-gap);
}
.pw-grid--auto300 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pw-grid--auto240 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pw-grid--auto200 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pw-grid--2       { grid-template-columns: repeat(2, 1fr); }
.pw-grid--3       { grid-template-columns: repeat(3, 1fr); }
.pw-grid--4       { grid-template-columns: repeat(4, 1fr); }

.pw-card {
  background: var(--pw-bg);
  border-radius: var(--pw-card-radius);
  box-shadow: var(--pw-card-shadow);
  border: 1.5px solid var(--pw-border);
  overflow: hidden;
  text-decoration: none;
  color: var(--pw-text-body);
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.pw-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  border-color: var(--pw-primary);
}
.pw-card__thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: var(--pw-bg-mute);
}
.pw-card__thumb--sq {
  aspect-ratio: 1;
}
.pw-card__body {
  padding: var(--pw-sp-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--pw-sp-sm);
}
.pw-card__cat {
  font-size: var(--pw-fs-xs);
  font-weight: 700;
  color: var(--pw-primary);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pw-card__title {
  font-size: var(--pw-fs-sm);
  font-weight: 700;
  color: var(--pw-text-dark);
  line-height: var(--pw-lh-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pw-card__desc {
  font-size: var(--pw-fs-sm);
  color: var(--pw-text-muted);
  line-height: var(--pw-lh);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.pw-card__meta {
  display: flex;
  align-items: center;
  gap: var(--pw-sp-sm);
  font-size: var(--pw-fs-xs);
  color: var(--pw-text-faint);
  flex-wrap: wrap;
  margin-top: auto;
}
.pw-card__foot {
  padding: var(--pw-sp-sm) var(--pw-sp-lg);
  border-top: 1px solid var(--pw-border);
  display: flex;
  align-items: center;
  gap: var(--pw-sp-sm);
  font-size: var(--pw-fs-xs);
  color: var(--pw-text-muted);
  background: var(--pw-bg-soft);
}

/* 목록형 카드 (.pw-card--row) */
.pw-card--row {
  flex-direction: row;
  align-items: center;
}
.pw-card--row .pw-card__thumb {
  width: var(--pw-thumb-w);
  height: var(--pw-thumb-h);
  aspect-ratio: unset;
  flex-shrink: 0;
  border-radius: 0;
}
.pw-card--row .pw-card__body {
  padding: var(--pw-sp-md) var(--pw-sp-lg);
}

/* 빈 상태 */
.pw-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  color: var(--pw-text-faint);
  font-size: var(--pw-fs-sm);
}
.pw-grid-empty i {
  display: block;
  font-size: 36px;
  margin-bottom: 12px;
  opacity: .4;
}


/* ================================================================
   §5  필터 바 — .pw-filter
   renderWidgetFilterBar() 사용
================================================================ */
.pw-filter {
  background: var(--pw-bg);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-card-radius);
  padding: var(--pw-sp-md) var(--pw-sp-lg);
  display: flex;
  gap: var(--pw-sp-sm);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--pw-sp-lg);
}
.pw-filter__search {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: var(--pw-sp-sm);
  background: var(--pw-bg-soft);
  border: 1px solid var(--pw-border);
  border-radius: 24px;
  padding: 8px 16px;
}
.pw-filter__search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--pw-fs-sm);
  color: var(--pw-text-body);
  outline: none;
}
.pw-filter__search input::placeholder {
  color: var(--pw-text-faint);
}
.pw-filter__search i {
  color: var(--pw-text-muted);
  font-size: var(--pw-fs-sm);
}
.pw-filter__select {
  padding: 8px 12px;
  border: 1px solid var(--pw-border);
  border-radius: 8px;
  font-size: var(--pw-fs-sm);
  color: var(--pw-text-body);
  background: var(--pw-bg);
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.pw-filter__select:focus {
  border-color: var(--pw-primary);
}
.pw-filter__btn {
  padding: 8px 16px;
  background: var(--pw-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: var(--pw-fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.pw-filter__btn:hover {
  background: var(--pw-primary-dark);
}
.pw-filter__reset {
  padding: 8px 12px;
  background: transparent;
  color: var(--pw-text-muted);
  border: 1px solid var(--pw-border);
  border-radius: 8px;
  font-size: var(--pw-fs-sm);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .15s;
  white-space: nowrap;
}
.pw-filter__reset:hover {
  border-color: var(--pw-primary);
  color: var(--pw-primary);
}

/* 활성 필터 태그 */
.pw-filter-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-sp-sm);
  margin-bottom: var(--pw-sp-md);
}
.pw-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--pw-primary-light);
  color: var(--pw-primary-dark);
  border-radius: 20px;
  font-size: var(--pw-fs-xs);
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}
.pw-filter-tag:hover {
  background: var(--pw-primary);
  color: #fff;
}
.pw-filter-tag--reset {
  background: var(--pw-bg-mute);
  color: var(--pw-text-muted);
}


/* ================================================================
   §6  탭 내비게이션 — .pw-tab
   renderWidgetTabNav() 사용
================================================================ */
.pw-tab-bar {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 2px solid var(--pw-border);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pw-tab-bar::-webkit-scrollbar { display: none; }

.pw-tab-btn {
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: var(--pw-fs-sm);
  font-weight: 600;
  color: var(--pw-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: -2px;
}
.pw-tab-btn:hover {
  color: var(--pw-primary);
}
.pw-tab-btn.active {
  color: var(--pw-primary);
  border-bottom-color: var(--pw-primary);
}
.pw-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--pw-bg-mute);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--pw-text-muted);
}
.pw-tab-btn.active .pw-tab-count {
  background: var(--pw-primary);
  color: #fff;
}
.pw-tab-pane { display: none; }
.pw-tab-pane.active { display: block; }


/* ================================================================
   §7  사이드 패널 — .pw-side / .pw-side-block
   renderWidgetSidePanel() 사용
================================================================ */
.pw-side-block {
  background: var(--pw-bg);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-card-radius);
  overflow: hidden;
  margin-bottom: var(--pw-sp-md);
}
.pw-side-block__head {
  display: flex;
  align-items: center;
  gap: var(--pw-sp-sm);
  padding: var(--pw-sp-md) var(--pw-sp-lg);
  font-size: var(--pw-fs-sm);
  font-weight: 700;
  color: var(--pw-text-dark);
  border-bottom: 1px solid var(--pw-border);
  background: var(--pw-bg-soft);
}
.pw-side-block__head i {
  color: var(--pw-primary);
  width: 16px;
  text-align: center;
}
.pw-side-block__body {
  padding: var(--pw-sp-md) var(--pw-sp-lg);
}
.pw-side-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pw-side-block__list li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--pw-border);
}
.pw-side-block__list li:last-child {
  border-bottom: none;
}
.pw-side-block__list a {
  font-size: var(--pw-fs-sm);
  color: var(--pw-text-body);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--pw-sp-sm);
  line-height: var(--pw-lh-tight);
  transition: color .15s;
}
.pw-side-block__list a:hover {
  color: var(--pw-primary);
}

/* 광고 박스 */
.pw-side-ad {
  background: var(--pw-bg-mute);
  border: 1px dashed var(--pw-border-mid);
  border-radius: var(--pw-card-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  font-size: var(--pw-fs-sm);
  color: var(--pw-text-faint);
  margin-bottom: var(--pw-sp-md);
}


/* ================================================================
   §8  배지 — .pw-badge
================================================================ */
.pw-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: var(--pw-fs-xs);
  font-weight: 700;
  white-space: nowrap;
  background: var(--pw-bg-mute);
  color: var(--pw-text-muted);
}
.pw-badge--primary { background: var(--pw-primary);    color: #fff; }
.pw-badge--success { background: var(--pw-success);    color: #fff; }
.pw-badge--warning { background: var(--pw-warning);    color: #fff; }
.pw-badge--danger  { background: var(--pw-danger);     color: #fff; }
.pw-badge--info    { background: var(--pw-info);       color: #fff; }
.pw-badge--soft    { background: var(--pw-primary-light); color: var(--pw-primary-dark); }


/* ================================================================
   §9  페이지네이션 — .pw-pager
   renderWidgetPagination() 사용
================================================================ */
.pw-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pw-sp-xs);
  padding: var(--pw-sp-xl) 0;
  flex-wrap: wrap;
}
.pw-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: var(--pw-fs-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--pw-text-muted);
  background: var(--pw-bg);
  border: 1px solid var(--pw-border);
  transition: all .15s;
}
.pw-pager__btn:hover {
  border-color: var(--pw-primary);
  color: var(--pw-primary);
}
.pw-pager__btn.active {
  background: var(--pw-primary);
  border-color: var(--pw-primary);
  color: #fff;
}
.pw-pager__btn:disabled,
.pw-pager__btn--disabled {
  opacity: .4;
  pointer-events: none;
}
.pw-pager__ellipsis {
  font-size: var(--pw-fs-sm);
  color: var(--pw-text-faint);
  padding: 0 4px;
}


/* ================================================================
   §10  레이아웃 유틸리티
================================================================ */
/* 좌우 2컬럼 (사이드바 레이아웃) */
.pw-layout {
  display: flex;
  gap: var(--pw-grid-gap);
  align-items: flex-start;
}
.pw-layout__main {
  flex: 1;
  min-width: 0;
}
.pw-layout__side {
  width: var(--pw-side-width);
  flex-shrink: 0;
  position: sticky;
  top: 10px;
}

/* 섹터 풀 래퍼 */
.pw-page {
  padding: 0 0 60px;
}
.pw-page__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 16px;
}

/* 플래시 메시지 */
.pw-flash {
  padding: 11px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: var(--pw-fs-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pw-flash--success { background: #dcfce7; color: #15803d; }
.pw-flash--error   { background: #fee2e2; color: #dc2626; }
.pw-flash--warn    { background: #fef3c7; color: #d97706; }
.pw-flash--info    { background: #dbeafe; color: #1d4ed8; }


/* ================================================================
   §11  반응형
================================================================ */
@media (max-width: 900px) {
  .pw-layout {
    flex-direction: column;
  }
  .pw-layout__side {
    width: 100%;
    position: static;
  }
  .pw-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .pw-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .pw-hero { padding: 24px 16px 20px; }
  .pw-hero__title { font-size: var(--pw-fs-xl); }
  .pw-grid--2 { grid-template-columns: 1fr; }
  .pw-grid--3 { grid-template-columns: 1fr; }
  .pw-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pw-filter { flex-direction: column; align-items: stretch; }
  .pw-filter__search { min-width: 0; }
  .pw-stats { flex-wrap: wrap; }
  .pw-stat { min-width: 50%; }
  .pw-stat + .pw-stat { border-left: none; }
}