/**
 * ┌─────────────────────────────────────────────────────────────────────┐
 * │  FILE INDEX — 여수뉴스포털                                          │
 * ├──────────────┬──────────────────────────────────────────────────────┤
 * │  파일명      │  footer-v4.css                                       │
 * │  위치        │  /assets/css/footer-v4.css                           │
 * │  생성일      │  2026-05-16                                          │
 * │  수정일      │  2026-06-02                                          │
 * │  버전        │  v2.1                                                │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  기능/역할   │  스타일시트 — 푸터 v4 레이아웃 (fv4-*, l14-s10)     │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  레이아웃    │  기준 너비: 1200px (전역·포털 변수와 연동)           │
 * │  섹터 구조   │  .sector-wrap width:100% — 다열은 .sector-inner      │
 * │  폰트 기준   │  최소 14px (--fs-base 등 변수 연동)                  │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  연관 파일   │  load-by  : header.php·_l14_footer.php               │
 * │              │  변수 주입: echoLayoutVars()·포털 CSS (해당 시)      │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  참조 사항   │  /docs/PROJECT_RULES.md 원칙8·포털 CSS 접두 규칙     │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  변경 이력   │  2026-05-16 v1.0 - FILE INDEX 일괄 부여              │
 * │              │  2026-06-02 v2.0 - 아이콘 제거, 카드 컴팩트          │
 * │              │  2026-06-02 v2.1 - 아코디언 독립동작 CSS 수정        │
 * └──────────────┴──────────────────────────────────────────────────────┘
 */

/* ─── 1. 디자인 토큰 (라이트 기본) ─── */
:root {
  --fv4-brand: #0a4d8c;
  --fv4-brand-2: #1565c0;
  --fv4-brand-soft: rgba(10, 77, 140, 0.08);
  --fv4-accent: #fbbf24;
  --fv4-success: #16a34a;
  --fv4-danger: #dc2626;
  --fv4-warn: #f59e0b;

  --fv4-bg: #f8fafc;
  --fv4-bg-2: #ffffff;
  --fv4-card: #ffffff;
  --fv4-border: #e2e8f0;
  --fv4-border-soft: #f1f5f9;
  --fv4-text: #0f172a;
  --fv4-text-2: #334155;
  --fv4-mut: #64748b;
  --fv4-mut-2: #94a3b8;

  --fv4-radius-sm: 6px;
  --fv4-radius: 10px;
  --fv4-radius-lg: 16px;
  --fv4-radius-pill: 9999px;

  --fv4-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --fv4-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  --fv4-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10);

  --fv4-gap: 16px;
  --fv4-gap-lg: 24px;
  --fv4-gap-xl: 32px;
  --fv4-max: 1200px;

  --fv4-font: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR",
              "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;

  --fv4-trans-fast: 120ms cubic-bezier(.4,0,.2,1);
  --fv4-trans: 200ms cubic-bezier(.4,0,.2,1);
}

/* 다크모드 — html[data-theme="dark"] 명시 또는 시스템 자동 */
html[data-theme="dark"] {
  --fv4-bg: #0b1220;
  --fv4-bg-2: #0f172a;
  --fv4-card: #1e293b;
  --fv4-border: #334155;
  --fv4-border-soft: #1f2a3d;
  --fv4-text: #f1f5f9;
  --fv4-text-2: #cbd5e1;
  --fv4-mut: #94a3b8;
  --fv4-mut-2: #64748b;
  --fv4-brand-soft: rgba(96, 165, 250, 0.12);
  --fv4-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --fv4-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --fv4-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --fv4-bg: #0b1220;
    --fv4-bg-2: #0f172a;
    --fv4-card: #1e293b;
    --fv4-border: #334155;
    --fv4-border-soft: #1f2a3d;
    --fv4-text: #f1f5f9;
    --fv4-text-2: #cbd5e1;
    --fv4-mut: #94a3b8;
    --fv4-mut-2: #64748b;
    --fv4-brand-soft: rgba(96, 165, 250, 0.12);
  }
}

/* ─── 2. 공통 컨테이너 ─── */
.fv4 { font-family: var(--fv4-font); color: var(--fv4-text); }
.fv4-wrap { max-width: var(--fv4-max); margin: 0 auto; padding: 0 16px; }
.fv4-section { padding: 32px 0; background: var(--fv4-bg-2); border-top: 1px solid var(--fv4-border); }
.fv4-divider { height: 1px; background: var(--fv4-border); margin: 16px 0; border: 0; }

/* ─── 3. 상단 CTA 띠 (뉴스레터 + 앱 + 빠른액션) ─── */
.fv4-cta {
  background: linear-gradient(135deg, var(--fv4-brand) 0%, #163c64 60%, #0d2944 100%);
  color: #fff;
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}
.fv4-cta::before {
  content: ''; position: absolute; right: -120px; top: -120px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 65%);
  pointer-events: none;
}
.fv4-cta::after {
  content: ''; position: absolute; left: -80px; bottom: -80px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,.10), transparent 65%);
  pointer-events: none;
}
.fv4-cta-grid {
  display: grid; grid-template-columns: 1.4fr 1fr auto;
  gap: var(--fv4-gap-lg); align-items: center; position: relative; z-index: 1;
}
@media (max-width: 900px) { .fv4-cta-grid { grid-template-columns: 1fr; gap: 18px; } }

.fv4-news h4 {
  margin: 0 0 6px; font-size: 17px; font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
.fv4-news h4 i { color: var(--fv4-accent); }
.fv4-news p { margin: 0 0 12px; font-size: 15px; opacity: .88; line-height: 1.5; }

.fv4-news-form {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; max-width: 520px;
  position: relative;
}
.fv4-news-form input {
  padding: 12px 16px; border: 0; border-radius: var(--fv4-radius);
  background: rgba(255,255,255,.97); color: #0f172a;
  font-size: 14px; font-family: inherit;
  outline: 2px solid transparent; transition: outline-color var(--fv4-trans-fast);
}
.fv4-news-form input:focus { outline-color: var(--fv4-accent); }
.fv4-news-form input::placeholder { color: #94a3b8; }
.fv4-news-form button {
  padding: 0 22px; border: 0; border-radius: var(--fv4-radius);
  background: var(--fv4-accent); color: #0f172a;
  font-weight: 800; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: var(--fv4-trans);
}
.fv4-news-form button:hover { background: #fcd34d; transform: translateY(-1px); }
.fv4-news-form button:active { transform: translateY(0); }
.fv4-news-form button:disabled { opacity: .55; cursor: wait; transform: none; }

.fv4-news-priv { font-size: 14px; opacity: .7; margin-top: 6px; line-height: 1.4; }
.fv4-news-priv a { color: #fbbf24; text-decoration: underline; }

.fv4-app { display: flex; flex-direction: column; gap: 10px; }
.fv4-app h4 { margin: 0; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.fv4-app h4 i { color: var(--fv4-accent); }
.fv4-app-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fv4-app-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  background: rgba(255,255,255,.10); color: #fff !important;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--fv4-radius);
  text-decoration: none; font-size: 14px; font-weight: 700;
  transition: var(--fv4-trans); white-space: nowrap;
}
.fv4-app-btn:hover { background: rgba(255,255,255,.20); transform: translateY(-1px); border-color: rgba(255,255,255,.45); }
.fv4-app-btn[data-os-match="1"] {
  background: var(--fv4-accent); color: #0f172a !important;
  border-color: var(--fv4-accent); font-weight: 800;
}
.fv4-app-btn[data-os-match="1"]:hover { background: #fcd34d; }
.fv4-app-btn i { font-size: 15px; }
#fv4-pwa { display: none; }
#fv4-pwa.is-visible { display: inline-flex; }

.fv4-quick { display: flex; flex-direction: column; gap: 8px; min-width: 160px; }
@media (max-width: 900px) { .fv4-quick { flex-direction: row; flex-wrap: wrap; min-width: 0; } }
.fv4-quick a, .fv4-quick button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px;
  background: rgba(255,255,255,.10); color: #fff !important;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--fv4-radius);
  text-decoration: none; font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: var(--fv4-trans); white-space: nowrap;
}
.fv4-quick a:hover, .fv4-quick button:hover {
  background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.45);
}

/* ─── 4. 메인 정보 그리드 (4컬럼) ─── */
.fv4-main {
  background: var(--fv4-bg-2); padding: 28px 0 18px;
  border-top: 1px solid var(--fv4-border);
}
.fv4-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--fv4-gap-xl);
}
@media (max-width: 1024px) { .fv4-grid { grid-template-columns: 1fr 1fr; gap: var(--fv4-gap-lg); } }
@media (max-width: 640px)  { .fv4-grid { grid-template-columns: 1fr; gap: 0; } }

.fv4-col-h {
  font-size: 15px; font-weight: 800; margin: 0 0 14px;
  color: var(--fv4-text); letter-spacing: .3px;
  display: flex; align-items: center; gap: 6px;
}
.fv4-col-h i { color: var(--fv4-brand); font-size: 15px; }

/* ─── 5. 브랜드 컬럼 ─── */
.fv4-brand-col .fv4-logo {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--fv4-text);
  font-size: 20px; font-weight: 900; margin-bottom: 10px;
}
.fv4-brand-col .fv4-logo-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--fv4-brand), var(--fv4-brand-2));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 900;
}
.fv4-tagline {
  margin: 0 0 16px; font-size: 15px; color: var(--fv4-mut); line-height: 1.65;
}
.fv4-legal-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fv4-text-2);
  word-break: keep-all;
}
.fv4-sns { display: flex; gap: 8px; flex-wrap: wrap; }
.fv4-sns a {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--fv4-brand-soft); color: var(--fv4-brand);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: var(--fv4-trans);
  border: 1px solid transparent;
}
.fv4-sns a:hover {
  background: var(--fv4-brand); color: #fff;
  transform: translateY(-2px); box-shadow: var(--fv4-shadow);
}
.fv4-sns a:focus-visible {
  outline: 2px solid var(--fv4-brand); outline-offset: 2px;
}

/* ─── 6. 링크 컬럼 (서비스 / 안내 / 지원) ─── */
.fv4-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fv4-links a {
  color: var(--fv4-text-2); text-decoration: none;
  font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 0; transition: color var(--fv4-trans-fast), transform var(--fv4-trans-fast);
}
.fv4-links a i { color: var(--fv4-mut); font-size: 14px; width: 14px; text-align: center; transition: color var(--fv4-trans-fast); }
.fv4-links a:hover { color: var(--fv4-brand); transform: translateX(2px); }
.fv4-links a:hover i { color: var(--fv4-brand); }
.fv4-links .is-new::after {
  content: 'NEW'; margin-left: 6px;
  background: var(--fv4-danger); color: #fff;
  font-size: 14px; font-weight: 800; padding: 1px 5px; border-radius: 3px;
  letter-spacing: .5px;
}
.fv4-links .is-hot::after {
  content: 'HOT'; margin-left: 6px;
  background: var(--fv4-warn); color: #fff;
  font-size: 14px; font-weight: 800; padding: 1px 5px; border-radius: 3px;
  letter-spacing: .5px;
}

/* ─── 6-A. 하단 메뉴바 (F2) — F4 와 동일: footer-zone-links, pill 없음, 가운데 정렬 ─── */
.fv4-menubar.footer-zone-links {
  background: var(--fv4-bg);
  border-top: 1px solid var(--fv4-border);
  padding: 0;
}
.fv4-menubar .footer-zone-links-inner,
.fv4-menubar.fv4-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 0;
}
.footer-zone-links--fv4 .footer-zone-links-inner a,
.fv4-menubar.footer-zone-links a {
  display: inline;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--fv4-text-2);
  font-size: var(--fs-meta, 15px);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-zone-links--fv4 .footer-zone-links-inner a:hover,
.fv4-menubar.footer-zone-links a:hover,
.footer-zone-links--fv4 .footer-zone-links-inner a:focus-visible,
.fv4-menubar.footer-zone-links a:focus-visible {
  color: var(--fv4-brand);
  transform: none;
}
/* 14섹터·뉴스 다크 푸터 (footer-v4.css 가 l14 푸터에도 로드됨) */
.footer-zone-links--l14.fv4-menubar {
  background: transparent;
  border-top: none;
}
.footer-zone-links--l14 .footer-zone-links-inner a {
  color: #cbd5e1;
}
.footer-zone-links--l14 .footer-zone-links-inner a:hover,
.footer-zone-links--l14 .footer-zone-links-inner a:focus-visible {
  color: #fff;
}
.nf-s10-f2 .footer-zone-links--l14 .footer-zone-links-inner {
  padding: 12px 0 8px;
}

/* ─── 6-B. F3 지역 커뮤니티 (섹션 제목 없음 — 카드만) ─── */
.fv4-community {
  background: linear-gradient(135deg, #f8fafc 0%, #eef6ff 100%);
  border-top: 1px solid var(--fv4-border);
  padding: 18px 0 20px;
  overflow: visible;
}
.fv4-community-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.fv4-community-menu {
  position: relative;
  /* 닫힌 상태에서도 본문 위에 떠 있어야 위로 펼쳐질 때 광고/콘텐츠에 안 가린다.
   * 토큰 SSOT: includes/z_layers.php — 광고(100/300)보다 위, 통합 GNB(2000) 보다 아래. */
  z-index: var(--z-portal-gnb, 1000);
}
.fv4-community-menu[open] {
  /* 펼친 상태는 dropdown 까지 한 단계 더 올려 형제 카드도 가리지 않게. */
  z-index: calc(var(--z-portal-gnb, 1000) + 50);
}
.fv4-community-menu summary {
  list-style: none;
  cursor: pointer;
}
.fv4-community-menu summary::-webkit-details-marker {
  display: none;
}
/* 아이콘 제거, 카드 컴팩트 */
.fv4-community-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  text-decoration: none;
  color: var(--fv4-text);
  transition: var(--fv4-trans);
}
.fv4-community-card:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.fv4-community-menu[open] .fv4-community-card {
  border-color: rgba(10,77,140,.45);
}
.fv4-community-menu[open] .fv4-community-card > i {
  transform: rotate(180deg);
}
/* 아이콘 원형 완전 숨김 */
.fv4-community-icon { display: none; }
.fv4-community-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1;
}
.fv4-community-text strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--fv4-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv4-community-card > i {
  font-size: 14px;
  color: var(--fv4-mut-2);
  flex-shrink: 0;
  transition: transform var(--fv4-trans-fast);
}
.fv4-community-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  display: grid;
  gap: 4px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--fv4-border);
  border-radius: 12px;
  box-shadow: var(--fv4-shadow);
  /* 위(본문)로 펼쳐질 때 s9 광고·본문 카드 위에 표시.
   * 부모(`.fv4-community-menu[open]`) 가 stacking context 를 갖기 때문에
   * 이 값은 부모 안에서만 비교되지만, 부모 z-index 가 충분히 높아야 root 기준 가시. */
  z-index: var(--z-global-dd, 2100);
}
.fv4-community-dropdown a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--fv4-text-2);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}
.fv4-community-dropdown a:hover {
  background: var(--fv4-brand-soft);
  color: var(--fv4-brand);
}
@media (max-width: 900px) {
  .fv4-community-head { align-items: flex-start; flex-direction: column; }
  .fv4-community-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .fv4-community-grid { grid-template-columns: 1fr; }
  .fv4-community-dropdown {
    position: static;
    margin-top: 8px;
  }
}

/* ─── 7. 고객지원 컬럼 (특별 강조) ─── */
.fv4-support {
  background: var(--fv4-brand-soft); border-radius: var(--fv4-radius);
  padding: 14px 16px;
}
.fv4-support .fv4-col-h { color: var(--fv4-brand); }
.fv4-support-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 14px; line-height: 1.4;
}
.fv4-support-row + .fv4-support-row { border-top: 1px dashed var(--fv4-border); }
.fv4-support-row .ic {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: var(--fv4-brand);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px;
}
html[data-theme="dark"] .fv4-support-row .ic { background: var(--fv4-card); }
.fv4-support-row .text { display: flex; flex-direction: column; min-width: 0; }
.fv4-support-row .label { font-size: 14px; color: var(--fv4-mut); font-weight: 700; }
.fv4-support-row .value { font-size: 15px; font-weight: 700; color: var(--fv4-text); }
.fv4-support-row .value a { color: inherit; text-decoration: none; }
.fv4-support-row .value a:hover { color: var(--fv4-brand); text-decoration: underline; }

/* ─── 8. 지역 포털 + 서비스 섹션 (2단 띠) ─── */
.fv4-portals {
  background: var(--fv4-bg); padding: 18px 0;
  border-top: 1px solid var(--fv4-border);
}
.fv4-portals-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
}
@media (max-width: 768px) { .fv4-portals-grid { grid-template-columns: 1fr; } }
.fv4-portals-label {
  font-size: 14px; font-weight: 800; color: var(--fv4-mut);
  letter-spacing: 1px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.fv4-portals-list {
  display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
}
.fv4-portal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--fv4-radius-pill);
  background: var(--fv4-card); border: 1px solid var(--fv4-border);
  color: var(--fv4-text-2); text-decoration: none;
  font-size: 14px; font-weight: 700; transition: var(--fv4-trans);
}
.fv4-portal-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fp-color, var(--fv4-brand));
}
.fv4-portal-chip:hover {
  background: var(--fp-color, var(--fv4-brand)); color: #fff !important;
  border-color: transparent; transform: translateY(-1px);
}
.fv4-portal-chip:hover .dot { background: #fff; }
.fv4-portal-chip.is-on {
  background: var(--fp-color, var(--fv4-brand)); color: #fff;
  border-color: transparent; box-shadow: var(--fv4-shadow);
}
.fv4-portal-chip.is-on .dot { background: #fff; }

/* ─── 9. 메타 띠 (운영시간 / 다국어 / 도구) ─── */
.fv4-meta {
  background: var(--fv4-bg); padding: 14px 0;
  border-top: 1px solid var(--fv4-border);
}
.fv4-meta-grid {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
.fv4-meta-info {
  display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--fv4-mut);
}
.fv4-meta-info span { display: inline-flex; align-items: center; gap: 5px; }
.fv4-meta-info strong { color: var(--fv4-text-2); font-weight: 700; }
.fv4-youth {
  color: #b91c1c; font-weight: 800;
  padding: 3px 10px; background: #fee2e2; border-radius: var(--fv4-radius-pill);
  font-size: 14px;
}
html[data-theme="dark"] .fv4-youth { background: #4c1d1d; color: #fca5a5; }

.fv4-meta-tools {
  display: flex; gap: 10px; align-items: center;
}
.fv4-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--fv4-radius-pill);
  background: rgba(22, 163, 74, .12); color: var(--fv4-success);
  font-size: 14px; font-weight: 800;
  cursor: help;
}
.fv4-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: fv4-pulse 2s infinite ease-in-out;
}
.fv4-status[data-state="warn"] { background: rgba(245, 158, 11, .14); color: var(--fv4-warn); }
.fv4-status[data-state="error"] { background: rgba(220, 38, 38, .14); color: var(--fv4-danger); }
.fv4-status[data-state="loading"] .dot { animation: fv4-spin 1s linear infinite; background: transparent; border: 2px solid currentColor; border-top-color: transparent; }
@keyframes fv4-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fv4-spin { to { transform: rotate(360deg); } }

.fv4-lang {
  padding: 6px 12px; border-radius: var(--fv4-radius-pill);
  background: var(--fv4-card); border: 1px solid var(--fv4-border);
  color: var(--fv4-text); font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}

.fv4-theme {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--fv4-card); border: 1px solid var(--fv4-border);
  color: var(--fv4-text); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; transition: var(--fv4-trans);
}
.fv4-theme:hover { background: var(--fv4-brand-soft); color: var(--fv4-brand); }
.fv4-theme .ic-dark { display: none; }
html[data-theme="dark"] .fv4-theme .ic-light { display: none; }
html[data-theme="dark"] .fv4-theme .ic-dark { display: inline-block; }

/* ─── 10. 카피라이트 ─── */
.fv4-copy {
  background: var(--fv4-bg-2); padding: 20px 0;
  border-top: 1px solid var(--fv4-border);
}
.fv4-copy-grid {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 16px; align-items: center;
  font-size: 14px; color: var(--fv4-mut);
}
@media (max-width: 768px) { .fv4-copy-grid { grid-template-columns: 1fr; text-align: center; } }
.fv4-copy strong { color: var(--fv4-text-2); font-weight: 800; }
.fv4-copy-meta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 14px; }
.fv4-copy-meta span { display: inline-flex; align-items: center; gap: 4px; }
.fv4-copy-links { display: flex; gap: 12px; flex-wrap: wrap; }
.fv4-copy-links a {
  color: var(--fv4-mut); text-decoration: none; font-weight: 600;
  font-size: 14px; transition: color var(--fv4-trans-fast);
}
.fv4-copy-links a:hover { color: var(--fv4-brand); }
.fv4-copy-links a.is-strong { color: var(--fv4-text-2); font-weight: 800; }

/* ─── 11. Floating back-to-top + 토스트 ─── */
.fv4-totop {
  position: fixed; bottom: 24px; right: 24px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--fv4-brand); color: #fff;
  border: 0; cursor: pointer;
  box-shadow: var(--fv4-shadow-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; z-index: 9998;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity var(--fv4-trans), transform var(--fv4-trans), visibility var(--fv4-trans);
}
.fv4-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fv4-totop:hover { background: var(--fv4-brand-2); transform: translateY(-2px); }
.fv4-totop:focus-visible { outline: 3px solid var(--fv4-accent); outline-offset: 3px; }
@media (max-width: 768px) { .fv4-totop { bottom: 80px; right: 16px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .fv4-totop, .fv4-app-btn, .fv4-news-form button, .fv4-portal-chip, .fv4-sns a, .fv4-links a {
    transition: none !important; transform: none !important;
  }
}

.fv4-toast {
  position: fixed; bottom: 84px; right: 24px;
  padding: 13px 20px; background: var(--fv4-success); color: #fff;
  border-radius: var(--fv4-radius); font-size: 14px; font-weight: 700;
  box-shadow: var(--fv4-shadow-lg);
  z-index: 9999; opacity: 0; transform: translateY(16px);
  transition: opacity var(--fv4-trans), transform var(--fv4-trans);
  pointer-events: none; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 8px;
}
.fv4-toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fv4-toast.is-error { background: var(--fv4-danger); }
.fv4-toast.is-warn { background: var(--fv4-warn); color: #0f172a; }
@media (max-width: 768px) { .fv4-toast { bottom: 140px; right: 16px; left: 16px; justify-content: center; } }

/* ─── 12. F1 클릭 펼침 아코디언 (모든 뷰포트 · 기본 닫힘) ─── */
.fv4-f1-zone .fv4-f1-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.fv4-f1-acc {
  border: 1px solid var(--fv4-border);
  border-radius: var(--fv4-radius);
  background: #fff;
  box-shadow: var(--fv4-shadow-sm);
}
.fv4-f1-sum {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  font-size: var(--fs-md, 17px);
  font-weight: 800;
  color: var(--fv4-text);
}
.fv4-f1-sum::-webkit-details-marker { display: none; }
.fv4-f1-sum-text {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.fv4-f1-sum-text i { color: var(--fv4-brand); font-size: 15px; }
.fv4-f1-chev {
  font-size: 14px;
  color: var(--fv4-mut-2);
  transition: transform var(--fv4-trans-fast);
}
.fv4-f1-acc[open] .fv4-f1-chev { transform: rotate(180deg); }
.fv4-f1-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--fv4-border);
}
.fv4-f1-acc:not([open]) .fv4-f1-body {
  display: none;
}
@media (max-width: 640px) {
  .fv4-f1-zone .fv4-f1-grid { grid-template-columns: 1fr; }
}

/* ─── 13. 인쇄 모드 ─── */
@media print {
  .fv4-cta, .fv4-totop, .fv4-toast, .fv4-portals, .fv4-meta-tools,
  .fv4-quick, .fv4-app, .fv4-sns { display: none !important; }
  .fv4-main, .fv4-meta, .fv4-copy { background: #fff !important; color: #000 !important; }
  .fv4-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── 14. 접근성 — focus visible 강화 ─── */
.fv4-news-form input:focus-visible,
.fv4-news-form button:focus-visible,
.fv4-app-btn:focus-visible,
.fv4-quick a:focus-visible, .fv4-quick button:focus-visible,
.fv4-portal-chip:focus-visible,
.fv4-links a:focus-visible,
.fv4-lang:focus-visible, .fv4-theme:focus-visible,
.fv4-copy-links a:focus-visible {
  outline: 2px solid var(--fv4-accent);
  outline-offset: 3px;
  border-radius: var(--fv4-radius-sm);
}

/* ─── 15. SR-only (screen reader 전용) ─── */
.fv4-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}