/**
 * 지역정보포털플랫폼 – 포털 공통 CSS (portal.css)
 * - 포털 전환 버튼, 관심 설정 모달, 위젯 스타일, 다크 테마
 * - 폰트 크기 조절 시스템 (xs / sm / md / lg / xl)
 */

/* ══════════════════════════════════════════════
   폰트 크기 조절 시스템
   --fs-base 를 단계별로 설정하고
   본문 전체에 rem 기반 비율 적용
══════════════════════════════════════════════ */

/* 기본값 (medium = 16px 기준) */
:root {
  --fs-base:   16px;    /* 조절 기준점 */
  --fs-xs:     0.75em;  /* 12px */
  --fs-sm:     0.875em; /* 14px */
  --fs-md:     1em;     /* 16px */
  --fs-lg:     1.125em; /* 18px */
  --fs-xl:     1.25em;  /* 20px */
  --fs-2xl:    1.5em;   /* 24px */
  --fs-title:  1.75em;
  --lh-base:   1.7;
  --lh-tight:  1.4;

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

/* ── 단계별 font-size 클래스 (html/body에 적용) ── */

/* 매우 작게 (xsmall) */
html.fz-xsmall { font-size: 14px; }

/* 작게 (small) */
html.fz-small  { font-size: 14px; }

/* 기본 (medium) – 기본값 */
html.fz-medium { font-size: 16px; }

/* 크게 (large) */
html.fz-large  { font-size: 18px; }

/* 매우 크게 (xlarge) */
html.fz-xlarge { font-size: 20px; }

/* ── 본문 콘텐츠 영역 폰트 비율 적용 ── */
body {
  font-size: 1rem;
  line-height: var(--lh-base);
}

/* 본문 주요 텍스트 요소 */
.sector-wrap.s5 p,
.sector-wrap.s5 li,
.sector-wrap.s5 td,
.sector-wrap.s5 th,
.sector-wrap.s5 span:not(.badge):not(.news-cat):not(.rank),
.widget-section p,
.news-info h4,
.hot-news-list a,
.my-feed-list a {
  line-height: var(--lh-base);
}

/* 뉴스 카드 제목 */
html.fz-large  .news-info h4,
html.fz-xlarge .news-info h4  { -webkit-line-clamp: 3; }

/* GNB 는 크기 고정 (너무 커지면 레이아웃 깨짐 방지) */
html.fz-large  .gnb-link,
html.fz-xlarge .gnb-link  { font-size: 14px !important; }

/* ── 폰트 크기 조절 버튼 바 (헤더 내 플로팅 바) ── */
.font-size-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 2px 4px;
  height: 26px;
}
.fz-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border: none;
  background: none;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 700;
  color: #777;
  transition: background .15s, color .15s;
  font-family: inherit;
  line-height: 1;
  padding: 0;
  font-size: 14px;
}
.fz-btn:hover  { background: #e8e8e8; color: #333; }
.fz-btn.active { background: var(--portal-primary, #c0392b); color: #fff; }
.fz-btn.fz-decrease { font-size: 14px; }
.fz-btn.fz-increase { font-size: 14px; }
.fz-btn.fz-reset    { font-size: 14px; letter-spacing: -0.5px; }
.fz-divider {
  width: 1px; height: 14px;
  background: #ddd; flex-shrink: 0;
}

/* ── 폰트 크기 인디케이터 (현재 단계 표시) ── */
.fz-indicator {
  font-size: 14px;
  font-weight: 700;
  color: #888;
  min-width: 22px;
  text-align: center;
  user-select: none;
}

/* ── 모달 내 폰트 크기 슬라이더 영역 ── */
.font-size-control {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fz-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fz-slider-wrap .fz-icon-sm { font-size: 14px; color: #aaa; }
.fz-slider-wrap .fz-icon-lg { font-size: 18px; color: #555; }
.fz-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--portal-primary,#c0392b) 0%, var(--portal-primary,#c0392b) var(--slider-pct,40%), #e0e0e0 var(--slider-pct,40%), #e0e0e0 100%);
  outline: none;
  cursor: pointer;
}
.fz-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--portal-primary, #c0392b);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  border: 2px solid #fff;
}
.fz-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--portal-primary, #c0392b);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.fz-step-labels {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #aaa;
  padding: 0 2px;
}
.fz-step-labels span.cur { color: var(--portal-primary,#c0392b); font-weight: 700; }
.fz-preview-text {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  border: 1px solid #eee;
  transition: font-size .2s;
}
.fz-preview-text strong { color: var(--portal-primary,#c0392b); }

/* ── 다크 테마에서 폰트 크기 바 (CSS 변수 적용) ── */
[data-theme="dark"] .font-size-bar {
  background:   var(--dark-bar-bg, #2a2a2a);
  border-color: var(--dark-bar-border, #444444);
}
[data-theme="dark"] .fz-btn       { color: var(--dark-link-color, #dddddd); }
[data-theme="dark"] .fz-btn:hover { background: var(--dark-card-bg, #2a2a2a); color: #eee; }
[data-theme="dark"] .fz-divider   { background: var(--dark-bar-border, #444444); }
[data-theme="dark"] .fz-indicator { color: #666; }
[data-theme="dark"] .fz-preview-text {
  background:   var(--dark-bar-bg, #2a2a2a);
  border-color: var(--dark-bar-border, #444444);
  color:        var(--dark-link-color, #dddddd);
}

/* ══════════════════════════════════════════════
   포털 전환 스위처 (헤더 섹터2 좌측)
══════════════════════════════════════════════ */
.portal-switcher {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ps-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: var(--pcolor, #888);
  opacity: 0.55;
  transition: opacity .15s, transform .1s;
  border: 2px solid transparent;
}
.ps-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.ps-btn.ps-active {
  opacity: 1;
  border-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* ══════════════════════════════════════════════
   관심 설정 모달
══════════════════════════════════════════════ */
.portal-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
}
.portal-modal-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: min(520px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: modalIn .2s ease;
}
@keyframes modalIn {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.portal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #eee;
}
.portal-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #333;
}
.portal-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
  padding: 4px 8px;
  border-radius: 50%;
  transition: background .15s;
}
.portal-modal-close:hover { background: #f5f5f5; color: #333; }
.portal-modal-body { padding: 16px 20px; }
.portal-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid #eee;
  text-align: right;
}

/* 설정 섹션 */
.pref-section { margin-bottom: 20px; }
.pref-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #444;
  margin-bottom: 10px;
}
.pref-label i { margin-right: 6px; color: var(--portal-primary, #c0392b); }

/* 포털 전환 버튼 (모달 내) */
.portal-switch-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.portal-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: var(--pcolor, #888);
  border: 3px solid transparent;
  transition: all .15s;
  opacity: .7;
}
.portal-btn:hover { opacity: .9; transform: translateY(-1px); }
.portal-btn.active {
  opacity: 1;
  border-color: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.25);
}

/* 관심 메뉴 그리드 */
.interest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.interest-item {
  display: flex;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #eee;
  transition: border-color .15s, box-shadow .15s;
}
.interest-item input[type="checkbox"] { display: none; }
.interest-item span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  width: 100%;
  transition: background .15s, color .15s;
}
.interest-item span i { color: var(--ic, #888); font-size: 14px; }
.interest-item.selected {
  border-color: var(--portal-primary, #c0392b);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.interest-item.selected span {
  background: var(--portal-primary, #c0392b);
  color: #fff;
}
.interest-item.selected span i { color: #fff; }

/* 테마 버튼 */
.theme-btns { display: flex; gap: 8px; }
.theme-btn {
  flex: 1;
  padding: 8px 14px;
  border-radius: 20px;
  border: 2px solid #e0e0e0;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  transition: all .15s;
}
.theme-btn.active {
  border-color: var(--portal-primary, #c0392b);
  background: var(--portal-primary, #c0392b);
  color: #fff;
}

/* 저장 버튼 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--portal-primary, #c0392b);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.btn-icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s;
}
.btn-icon-sm:hover { background: #f0f0f0; }

/* ══════════════════════════════════════════════
   위젯 공통 스타일
══════════════════════════════════════════════ */
.widget-section {
  margin-bottom: 24px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  /* 프리셋 widget_header_bg 우선, 없으면 --primary 기준 */
  background: var(--widget-header-bg, transparent);
  border-bottom: 2px solid var(--primary, var(--portal-primary, #c0392b));
}
.widget-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--widget-header-text, #222);
}
.widget-header h3 i { margin-right: 6px; color: var(--primary, var(--portal-primary, #c0392b)); }
.badge {
  font-size: 14px;
  padding: 2px 7px;
  border-radius: 10px;
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
}

/* 뉴스 그리드 */
.news-grid { display: grid; gap: var(--grid-gap, 12px); padding: 14px;
             grid-template-columns: repeat(var(--grid-cols, 3), 1fr); }
.news-grid-3 { grid-template-columns: repeat(3, 1fr); }
.news-grid-2 { grid-template-columns: repeat(2, 1fr); }
.news-grid-1 { grid-template-columns: 1fr; }
.news-card {
  border-radius: var(--card-radius, 8px);   /* 프리셋 card_radius 반영 */
  overflow: hidden;
  background: #fff;
  border: 1px solid #f0f0f0;
  box-shadow: var(--card-shadow, none);      /* 프리셋 card_shadow 반영 */
  transition: box-shadow .15s, transform .15s;
}
.news-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-2px); }
.news-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.news-card:hover .news-thumb img { transform: scale(1.04); }
/* 프리셋 card_gap: 카드 내 패딩 조정 */
.news-info { padding: calc(var(--card-gap, 16px) * 0.6) calc(var(--card-gap, 16px) * 0.75); }
.news-cat {
  display: inline-block;
  font-size: 14px;
  padding: 2px 7px;
  border-radius: 10px;
  color: #fff;
  margin-bottom: 5px;
}
.news-info h4 {
  margin: 0 0 5px;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-info h4 a { color: #222; text-decoration: none; }
.news-info h4 a:hover { color: var(--link-hover, var(--primary, var(--portal-primary, #c0392b))); }
.news-info time { font-size: 14px; color: #999; }

/* 인기 뉴스 */
.hot-news-list { list-style: none; padding: 0; margin: 0; }
.hot-news-list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #f5f5f5; }
.hot-news-list li:last-child { border-bottom: none; }
.rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  background: #eee;
  color: #888;
}
.rank-1 { background: #f1c40f; color: #fff; }
.rank-2 { background: #bdc3c7; color: #fff; }
.rank-3 { background: #e67e22; color: #fff; }
.hot-news-list a { font-size: 14px; color: #333; text-decoration: none; line-height: 1.4; }
.hot-news-list a:hover { color: var(--link-hover, var(--primary, var(--portal-primary, #c0392b))); }

/* 맞춤 피드 */
.my-feed-list { list-style: none; padding: 0; margin: 0; }
.my-feed-list li { display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #f5f5f5; }
.my-feed-list li:last-child { border-bottom: none; }
.my-feed-list a { font-size: 14px; color: #333; text-decoration: none; }
.my-feed-list a:hover { color: var(--link-hover, var(--primary, var(--portal-primary, #c0392b))); }

/* 광고 위젯 */
.widget-ad-banner { padding: 8px; }
.ad-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;   /* 기본 배너 투명 */
  border: none;              /* 테두리 제거 */
  border-radius: 0;
  color: transparent;        /* 텍스트 숨김 */
  font-size: 14px;
  padding: 0;
  text-align: center;
  pointer-events: none;
  overflow: hidden;
}
.ad-placeholder i { font-size: 20px; }
.widget-top-banner .ad-placeholder {
  min-height: 60px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}
.widget-mid-banner .ad-placeholder { min-height: 90px; }
.ad-side { min-height: 120px; }

/* 기타 공통 */
.empty-msg { text-align: center; color: #aaa; font-size: 14px; padding: 20px 16px; }
.widget-placeholder { text-align: center; padding: 30px; color: #bbb; }
.widget-placeholder i { font-size: 28px; margin-bottom: 10px; display: block; }

/* ── 포털별 GNB 관심 아이템 하이라이트 */
.gnb-item.gnb-interest > .gnb-link { position: relative; }

/* ══════════════════════════════════════════════
   다크 테마 ([data-theme="dark"])
   ※ body/섹터 배경은 layout-vars(인라인스타일)에서 !important로 최우선 처리.
   ※ 여기서는 UI 컴포넌트(카드, 모달, 위젯 등)만 담당.
   ※ 모든 선택자: html[data-theme="dark"] 접두사 사용.
══════════════════════════════════════════════ */
/* 카드·위젯 */
html[data-theme="dark"] .widget-section {
  background: var(--dark-card-bg, #2a2a2a) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
html[data-theme="dark"] .news-card {
  background:   var(--dark-card-bg, #2a2a2a) !important;
  border-color: var(--dark-card-border, #333333) !important;
}
html[data-theme="dark"] .news-info h4 a,
html[data-theme="dark"] .hot-news-list a,
html[data-theme="dark"] .my-feed-list a {
  color: var(--dark-link-color, #dddddd) !important;
}
/* 광고 플레이스홀더 */
html[data-theme="dark"] .ad-placeholder {
  background:   var(--dark-ad-bg, #2a2a2a) !important;
  border-color: var(--dark-bar-border, #444444) !important;
  color: #666;
}
/* 모달 */
html[data-theme="dark"] .portal-modal-box {
  background: var(--dark-modal-bg, #2a2a2a) !important;
  color:      var(--dark-text-color, #e0e0e0) !important;
}
html[data-theme="dark"] .portal-modal-header { border-color: var(--dark-bar-border, #444444); }
html[data-theme="dark"] .portal-modal-footer { border-color: var(--dark-bar-border, #444444); }
/* 관심 설정 */
html[data-theme="dark"] .interest-item      { border-color: var(--dark-bar-border, #444444); }
html[data-theme="dark"] .interest-item span { color: var(--dark-link-color, #dddddd); }
/* 테마 버튼 */
html[data-theme="dark"] .theme-btn {
  background:   var(--dark-card-bg, #2a2a2a) !important;
  border-color: var(--dark-bar-border, #444444) !important;
  color:        var(--dark-link-color, #dddddd) !important;
}

/* ══════════════════════════════════════════════
   반응형
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .portal-switcher { gap: 3px; }
  .ps-btn { font-size: 14px; padding: 2px 6px; }
  .news-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .interest-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  /* 폰트 크기 바 모바일 */
  .font-size-bar { padding: 2px 3px; }
  .fz-btn { width: 22px; height: 20px; }
  .fz-indicator { min-width: 18px; font-size: 14px; }
}
@media (max-width: 480px) {
  .news-grid-3, .news-grid-2 { grid-template-columns: 1fr; }
  .portal-modal-box { border-radius: 12px 12px 0 0; position: fixed; bottom: 0; margin: 0; width: 100%; max-height: 85vh; }
  /* 폰트 크기 바 최소화 */
  .fz-indicator { display: none; }
  .fz-divider:not(:last-of-type) { display: none; }
}

/* ══════════════════════════════════════════════
   폰트 크기별 가독성 보정
   (GNB 등 UI 요소는 크기 고정)
══════════════════════════════════════════════ */
/* XSmall: 가장 작은 단계 */
html.fz-xsmall .portal-logo-main { font-size: 24px !important; }
html.fz-xsmall .portal-switcher  { gap: 2px; }

/* Large: 큰 단계 보정 */
html.fz-large .news-grid-3 { grid-template-columns: repeat(2, 1fr); }
html.fz-large .portal-logo-main { font-size: 28px !important; }

/* XLarge: 가장 큰 단계 보정 */
html.fz-xlarge .news-grid-3 { grid-template-columns: 1fr; }
html.fz-xlarge .news-grid-2 { grid-template-columns: 1fr; }
html.fz-xlarge .portal-logo-main { font-size: 26px !important; }
html.fz-xlarge .ps-btn { font-size: 14px; padding: 2px 5px; }

/* 접근성: 폰트 크기 바 포커스 스타일 */
.fz-btn:focus-visible {
  outline: 2px solid var(--portal-primary, #c0392b);
  outline-offset: 2px;
}
.fz-slider:focus-visible {
  outline: 2px solid var(--portal-primary, #c0392b);
  outline-offset: 4px;
}

/* ──────────────────────────────────────────────────
   헤더 3단 테마 토글바  (라이트 / 시스템 / 다크)
────────────────────────────────────────────────── */
.theme-toggle-bar {
  display: inline-flex;
  align-items: center;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 2px;
  gap: 1px;
}
.ttb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #888;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.ttb-btn:hover { background: #e0e0e0; color: #555; }
.ttb-btn.active {
  background: var(--portal-primary, #c0392b);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* 다크 모드에서 토글바 */
html[data-theme="dark"] .theme-toggle-bar {
  background: #2a2a2a;
  border-color: #444;
}
html[data-theme="dark"] .ttb-btn         { color: #aaa; }
html[data-theme="dark"] .ttb-btn:hover   { background: #3a3a3a; color: #eee; }
html[data-theme="dark"] .ttb-btn.active  {
  background: var(--portal-primary, #c0392b);
  color: #fff;
}

/* 설정 모달 테마 버튼 – system 옵션 추가 시 3등분 */
.theme-btns { display: flex; gap: 6px; }
.theme-btn  { flex: 1; }

/* ═══════════════════════════════════════════════════════════════
   행사·이벤트 다목적 위젯 (ev_event_widget)
   ─────────────────────────────────────────────────────────────── */
.ev-widget-wrap {
  --ev-accent:    #e74c3c;
  --ev-card-bg:   #ffffff;
  --ev-gap:       16px;
  --ev-radius:    10px;
  --ev-img-w:     280px;
  --ev-img-h:     180px;
  --ev-title-sz:  15px;
  --ev-title-lines: 2;
  font-family: inherit;
}

/* ─── 헤더 ──────────────────────────────────── */
.ev-w-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px 10px;
  border-bottom: 2px solid var(--ev-accent);
  margin-bottom: 14px;
}
.ev-w-header h3 {
  margin: 0; font-size: 16px; font-weight: 700; color: #1a1a1a;
  display: flex; align-items: center; gap: 7px;
}
.ev-w-header h3 i { color: var(--ev-accent); }
.ev-w-more-link {
  font-size: 14px; color: #888; text-decoration: none;
  display: flex; align-items: center; gap: 3px;
  transition: color .2s;
}
.ev-w-more-link:hover { color: var(--ev-accent); }
.ev-w-footer-more { text-align: right; margin-top: 10px; }

/* ─── 배지 (상태·무료·유료) ──────────────────── */
.ev-w-status-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 20px;
  font-size: 14px; font-weight: 700; line-height: 1.4;
  white-space: nowrap;
}
.ev-w-badge-sm { font-size: 14px; padding: 1px 5px; }
.ev-w-ongoing  { background: #e74c3c; color: #fff; }
.ev-w-upcoming { background: #2980b9; color: #fff; }
.ev-w-ended    { background: #95a5a6; color: #fff; }
.ev-w-dday {
  display: inline-flex; align-items: center;
  padding: 2px 6px; border-radius: 20px;
  font-size: 14px; font-weight: 700;
  background: rgba(0,0,0,.55); color: #fff;
}
.ev-w-fee-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 20px;
  font-size: 14px; font-weight: 600;
}
.ev-w-free { background: #27ae60; color: #fff; }
.ev-w-paid { background: #e67e22; color: #fff; }
.ev-w-cat {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 4px;
  font-size: 14px; font-weight: 600;
  background: color-mix(in srgb, var(--ev-accent) 12%, transparent);
  color: var(--ev-accent);
}

/* ─── 빈 상태 ───────────────────────────────── */
.ev-w-empty {
  grid-column: 1/-1; text-align: center;
  padding: 40px 20px; color: #bbb;
}
.ev-w-empty i { font-size: 36px; display: block; margin-bottom: 10px; }
.ev-w-empty p { margin: 0; font-size: 14px; }
.ev-w-no-img {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: #f5f5f5; color: #ccc; font-size: 28px;
}

/* ══════════════════════════════════════════════
   카드형 (card)
   ══════════════════════════════════════════════ */
.ev-w-grid {
  display: grid;
  gap: var(--ev-gap);
}
.ev-w-card {
  display: flex; flex-direction: column;
  border-radius: var(--ev-radius);
  background: var(--ev-card-bg);
  border: 1px solid #eee;
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.ev-w-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.ev-w-card-img {
  position: relative; overflow: hidden;
  background: #f0f0f0;
}
.ev-w-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s;
}
.ev-w-card:hover .ev-w-card-img img { transform: scale(1.05); }
.ev-w-card-img .ev-w-status-badge {
  position: absolute; top: 8px; left: 8px;
}
.ev-w-card-img .ev-w-dday {
  position: absolute; top: 8px; left: 58px;
}
.ev-w-card-img .ev-w-fee-badge {
  position: absolute; bottom: 8px; right: 8px;
}
.ev-w-card-body {
  padding: 11px 13px 13px;
  display: flex; flex-direction: column; gap: 5px;
  flex: 1;
}
.ev-w-title {
  font-size: var(--ev-title-sz);
  font-weight: 700; color: #1a1a1a;
  -webkit-line-clamp: var(--ev-title-lines);
  display: -webkit-box; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.45; margin: 0;
}
.ev-w-date, .ev-w-venue, .ev-w-org, .ev-w-views, .ev-w-desc {
  font-size: 14px; color: #666; display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-w-date i, .ev-w-venue i, .ev-w-org i, .ev-w-views i {
  color: var(--ev-accent); flex-shrink: 0;
}
.ev-w-desc { font-size: 14px; color: #888; white-space: normal; }

/* ══════════════════════════════════════════════
   목록형 (list)
   ══════════════════════════════════════════════ */
.ev-w-list {
  display: flex; flex-direction: column; gap: var(--ev-gap);
}
.ev-w-list-item {
  display: flex; align-items: stretch;
  border-radius: var(--ev-radius);
  background: var(--ev-card-bg);
  border: 1px solid #eee;
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.ev-w-list-item:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  border-color: var(--ev-accent);
}
.ev-w-list-thumb {
  position: relative; overflow: hidden;
  flex-shrink: 0; background: #f0f0f0;
  min-width: 80px;
}
.ev-w-list-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s;
}
.ev-w-list-item:hover .ev-w-list-thumb img { transform: scale(1.06); }
.ev-w-list-thumb .ev-w-status-badge {
  position: absolute; top: 6px; left: 6px;
}
.ev-w-list-body {
  padding: 10px 14px; display: flex; flex-direction: column;
  gap: 5px; flex: 1; justify-content: center; min-width: 0;
}
.ev-w-list-meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.ev-w-list-info {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.ev-w-list-info span {
  font-size: 14px; color: #666; display: flex; align-items: center; gap: 4px;
}
.ev-w-list-info i { color: var(--ev-accent); }

/* ══════════════════════════════════════════════
   배너형 (banner / 슬라이드쇼)
   ══════════════════════════════════════════════ */
.ev-w-banner-wrap {
  position: relative; overflow: hidden;
  border-radius: var(--ev-radius);
  background: #111;
  aspect-ratio: 16/7;
  min-height: 180px;
}
.ev-w-banner-slides { position: relative; width: 100%; height: 100%; }
.ev-w-banner-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .5s ease;
}
.ev-w-banner-slide.active { opacity: 1; }
.ev-w-banner-slide img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.ev-w-banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 55%, transparent 100%);
  display: flex; flex-direction: column;
  justify-content: flex-end; padding: 16px 18px;
  gap: 6px;
}
.ev-w-banner-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.ev-w-banner-title {
  font-size: 18px; font-weight: 700; color: #fff;
  text-decoration: none; display: block;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.ev-w-banner-info {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.ev-w-banner-info span { font-size: 14px; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 4px; }
.ev-w-banner-info i { color: var(--ev-accent); }
/* 이전/다음 버튼 */
.ev-w-banner-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.2); border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  backdrop-filter: blur(4px);
}
.ev-w-banner-btn:hover { background: rgba(255,255,255,.4); }
.ev-w-banner-prev { left: 10px; }
.ev-w-banner-next { right: 10px; }
/* 인디케이터 dots */
.ev-w-banner-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px;
}
.ev-w-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.4); border: none; cursor: pointer;
  transition: background .2s, transform .2s;
  padding: 0;
}
.ev-w-dot.active {
  background: #fff; transform: scale(1.3);
}

/* ══════════════════════════════════════════════
   캘린더형 (calendar)
   ══════════════════════════════════════════════ */
.ev-w-calendar {
  border-radius: var(--ev-radius);
  border: 1px solid #eee;
  overflow: hidden;
  background: var(--ev-card-bg);
}
.ev-w-cal-header {
  background: var(--ev-accent); color: #fff;
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: center;
}
.ev-w-cal-month { font-size: 15px; font-weight: 700; }
.ev-w-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid #eee;
}
.ev-w-cal-dow {
  text-align: center; font-size: 14px; font-weight: 600;
  padding: 6px 2px; background: #fafafa; color: #555;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #eee;
}
.ev-w-cal-dow.sun { color: #e74c3c; }
.ev-w-cal-dow.sat { color: #2980b9; }
.ev-w-cal-cell {
  min-height: 56px; padding: 3px 3px 4px;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px; cursor: pointer;
  transition: background .15s;
  overflow: hidden;
}
.ev-w-cal-cell:hover { background: #fef9f9; }
.ev-w-cal-cell.empty { background: #fafafa; cursor: default; }
.ev-w-cal-cell.today .ev-w-cal-day {
  background: var(--ev-accent); color: #fff;
  border-radius: 50%; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ev-w-cal-cell.has-event { background: #fff8f8; }
.ev-w-cal-cell.sun .ev-w-cal-day { color: #e74c3c; }
.ev-w-cal-cell.sat .ev-w-cal-day { color: #2980b9; }
.ev-w-cal-day {
  display: block; text-align: center;
  font-size: 14px; font-weight: 600; line-height: 20px;
  margin-bottom: 1px;
}
.ev-w-cal-event {
  display: block; font-size: 14px;
  background: color-mix(in srgb, var(--ev-accent) 15%, transparent);
  color: var(--ev-accent); border-radius: 2px;
  padding: 1px 3px; margin-bottom: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none; line-height: 1.4;
}
.ev-w-cal-event:hover { background: var(--ev-accent); color: #fff; }
.ev-w-cal-more { font-size: 14px; color: #999; display: block; text-align: right; padding-right: 2px; }
/* 이번달 행사 목록 */
.ev-w-cal-list {
  padding: 10px 14px 12px;
  border-top: 1px solid #eee;
}
.ev-w-cal-list-title {
  font-size: 14px; font-weight: 700; color: #444;
  margin: 0 0 8px; display: flex; align-items: center; gap: 5px;
}
.ev-w-cal-list-title i { color: var(--ev-accent); }
.ev-w-cal-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ev-w-cal-list li { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ev-w-cal-list-title-link {
  text-decoration: none; color: #222; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-w-cal-list-title-link:hover { color: var(--ev-accent); }
.ev-w-cal-list-date { font-size: 14px; color: #999; flex-shrink: 0; }

/* ─── 반응형 ──────────────────────────────────── */
@media (max-width: 1024px) {
  .ev-w-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .ev-w-grid { grid-template-columns: 1fr !important; }
  .ev-w-list-item { flex-direction: column; }
  .ev-w-list-thumb { width: 100% !important; height: 160px !important; }
  .ev-w-banner-wrap { aspect-ratio: 4/3; }
  .ev-w-banner-title { font-size: 14px; }
}