/* =============================================================
   jo_can — v2 (type2 Warm Community) 확장 스타일
   2026-05-20 — 조직도 CSS 재현 + 게시판/폼/약관 v2 컴포넌트
   ============================================================= */

/* ============ Section 보강 ============ */
.section--alt { background: var(--color-bg-alt); }

/* card__img (main.css 의 card__thumb 와 별개) — index 메인 캠페인용 */
.card__img {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card a:hover .card__img {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

/* split-2 (좌우 분할) */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
@media (max-width: 900px) {
  .split-2 { grid-template-columns: 1fr; gap: 40px; }
}

/* list-news (보도자료/공지 리스트) */
.list-news {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.list-news li {
  border-bottom: 1px solid var(--color-line-soft);
}
.list-news li:last-child { border-bottom: 0; }
.list-news li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  transition: background .15s;
  gap: 20px;
}
.list-news li a:hover { background: var(--color-bg-soft); }
.list-news__title {
  color: var(--color-ink);
  font-size: 14.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.list-news li a:hover .list-news__title { color: var(--color-brand); }
.list-news__date {
  color: var(--color-ink-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* partner-strip (메인 — 외부 협력단체 배너) */
.partner-strip {
  padding: 36px 0;
  background: #ffffff;
  border-top: 1px solid var(--color-line-soft);
}
.partner-strip__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.partner-strip__list li { flex: 0 1 auto; }
.partner-strip__list img {
  height: 50px;
  width: auto;
  display: block;
  opacity: 0.85;
  transition: opacity .2s, transform .22s;
}
.partner-strip__list a:hover img { opacity: 1; transform: translateY(-2px); }

/* family-strip (footer 위 배너) — 시안 E 톤 (흰 배경 + 큰 로고) */
.family-strip {
  border-top: 1px solid var(--color-line-soft);
  border-bottom: 1px solid var(--color-line-soft);
  background: #ffffff;
  padding: 56px 0;
}
.family-strip__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}
.family-strip__inner a {
  display: inline-flex;
  align-items: center;
  height: 64px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  flex: 0 1 auto;
  min-width: 0;
}
/* 사용자 요청 (2026-05-20): 패밀리 로고 hover 시 배경색 변경 효과 제거. transform/box-shadow 도 함께 제거하여 정적 표시 */
.family-strip__inner a:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.family-strip__inner img {
  height: 54px;
  width: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 900px) {
  .family-strip { padding: 36px 0; }
  .family-strip__inner { flex-wrap: wrap; gap: 18px 32px; justify-content: center; }
  .family-strip__inner img { height: 46px; }
}

/* ============ 조직도 CSS — v6 (2026-05-21 spine layout, 감사 좌측 분리) ============ */
/*
  v6 layout — 사용자 요청: 감사가 spine 에서 좌측으로 빠지고, 지역네트워크는 우측으로

      ┌────────────────────────────────────────────────────┐
      │                                                    │
      │              [이사회]                              │
      │                 │                                  │
      │              [공동대표]                            │
      │              조윤미·허영숙·김향자                  │
      │                 │                                  │
      │     ┌───────────┼────────────────┐                 │
      │  [감사]         │       [지역네트워크]              │
      │  한창희·정미경  │       └ 7 지부 grid               │
      │                 │                                  │
      │              [사무총장]                            │
      │                                                    │
      │ [운영본부][조사사업본부][캠페인][녹색][미디어]      │ (선 없음)
      │                                                    │
      │ [부설/협력/연대 박스]                              │
      └────────────────────────────────────────────────────┘

  핵심:
   - spine 은 이사회·공동대표·사무총장 3 노드만 (감사 제외 → 끊김 0 단일 세로선)
   - 공동대표↔사무총장 사이 가로분기 wrapper (.org-spine__branch) 가 자리만 차지
     - spine 세로선은 wrapper 가운데를 그대로 통과
     - 좌측 wing (.org-branch__left) — absolute, spine 좌측 바깥에 감사 배치
     - 우측 wing (.org-branch__right) — absolute, spine 우측 바깥에 지역네트워크 배치
   - 가로선 — 감사 박스 중심 → spine 중심 → 지역네트워크 박스 중심 한 줄 (양방향)
   - 5개 본부는 spine 바깥 (선 없음, floating full-width grid)
   ============================================================ */
.org-chart {
  --org-line: #2e5a3e;        /* 연결선 — 사이프러스 그린 */
  --org-line-soft: #b9d1c0;
  --org-primary-bg: #4f8a5b;  /* 운영 다이어그램 그린 박스 */
  --org-primary-bd: #2e5a3e;
  --org-bureau-bg: #e7f0fb;   /* 본부 옅은 블루 */
  --org-bureau-bd: #6ea0d6;
  --org-bureau-ink: #2c4f78;
  --org-branch-bg: #f4f9fc;   /* 지부 카드 옅은 청록 */
  --org-branch-bd: #79b4d6;
  --org-branch-ink: #25526e;
  --org-partner-bd: #79b4d6;
  /* v6 spine 좌표 변수 */
  --org-spine-w: 200px;       /* spine column 폭 */
  --org-spine-offset: 0px;    /* v6: spine 자체는 chart 중앙 정렬 (좌우 wing 양쪽 대칭) */
  --org-branch-gap: 36px;     /* spine 가장자리 ~ 좌/우 wing 박스 사이 가로 거리 */
  --org-branch-w: 280px;      /* 지역네트워크 박스 폭 (우측 wing) — v7: 2-col grid 로 축소 */
  --org-branch-left-w: 220px; /* 감사 박스 폭 (좌측 wing) */
  --org-spine-gap: 28px;      /* spine 내부 노드 간 세로 여백 */
  --org-branch-min-h: 280px;  /* v7.1: 우측 wing 의 7 지부 2-col grid 수용 + 뒤 박스 (사무총장 등) 가림 방지 */
  margin: 24px 0 8px;
  padding: 0;
  position: relative;
}

/* ───── 공통: 그린 박스 노드 ───── */
.org-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 4px;
  background: var(--org-primary-bg);
  border: 1px solid var(--org-primary-bd);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  min-width: 132px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.org-node__title { line-height: 1; }
.org-node__sub {
  margin-top: 8px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--org-line-soft);
  border-radius: 4px;
  text-align: center;
  min-width: 200px;
  display: inline-block;
}

/* ============================================================
   v5 SPINE LAYOUT
   ============================================================ */

/* v6 spine column wrapper — 이사회/공동대표/사무총장 3 노드 stack
   감사·지역네트워크는 가로분기 wrapper 안에 absolute 로 양쪽 floating */
.org-spine {
  position: relative;
  width: var(--org-spine-w);
  /* v6: chart 중앙 정렬 — 좌(감사)·우(지역) wing 이 spine 양쪽으로 대칭 분포 */
  margin: 0 auto;
}

/* spine 전체 높이 세로선 — 끊김 0 보장
   첫 노드(이사회) 박스 하단 ~ 마지막 노드(사무총장) 박스 상단까지 한 번에 그림.
   각 노드는 z-index:2 라 박스가 선 위로 덮음 → 박스 가로축에서 선이 자연스럽게 끊겨 보임.
   top/bottom 좌표: 이사회 박스 높이(약 42px) + spine padding 0 기준 */
.org-spine::before {
  content: "";
  position: absolute;
  top: 42px;            /* 이사회 박스 하단 */
  bottom: 42px;         /* 사무총장 박스 상단 */
  left: 50%;
  width: 2px;
  background: var(--org-line);
  transform: translateX(-1px);
  z-index: 0;
}

/* spine 내부 노드 wrapper */
.org-spine__node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--org-spine-gap);
}
.org-spine__node:last-child { margin-bottom: 0; }

/* v6: 가로분기 wrapper — 좌(감사)·우(지역) 양쪽 absolute floating
   spine 세로선이 wrapper 가운데를 통과하므로 자리만 확보 (min-height) */
.org-spine__branch {
  position: relative;
  z-index: 1;
  margin-bottom: var(--org-spine-gap);
  min-height: var(--org-branch-min-h);
  width: 100%;
  /* flex 제거 — 자식 둘 다 absolute */
}

/* v7 — 감사/지역 가로분기선 제거 (사용자 요청 2026-05-21).
   박스만 좌·우 absolute 로 띄우고 선 연결은 없음. spine 세로선은 그대로 유지. */
.org-spine__branch::before { display: none; }

/* v6 좌측 wing — 감사 (absolute, spine 좌측 바깥)
   spine 좌측 끝(wrapper 의 left: 50% - spine_w/2) 에서 gap 만큼 더 좌측 + width 만큼 더 좌측 */
.org-branch__left {
  position: absolute;
  top: 0;
  right: calc(50% + var(--org-spine-w) / 2 + var(--org-branch-gap));
  width: var(--org-branch-left-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 1;
}

/* v6 우측 wing — 지역네트워크 + 지부 grid (absolute, spine 우측 바깥)
   v7.1 (2026-05-21): top 을 -60px 로 올려 공동대표 박스 부근부터 시작. 뒤 박스 가림 방지를 위해
   wrapper min-height 는 .org-spine__branch 의 --org-branch-min-h 로 충분히 크게 유지 */
.org-branch__right {
  position: absolute;
  top: -60px;
  left: calc(50% + var(--org-spine-w) / 2 + var(--org-branch-gap));
  width: var(--org-branch-w);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 1;
}

/* ───── Tier 5: 5개 본부 (spine 바깥, 선 연결 없는 floating 5-col grid) ───── */
.org-tier--bureaus-flat {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
  margin-top: 56px;       /* spine 끝과 본부 사이 시각적 분리 */
  padding-top: 0;
}
.org-bureau {
  position: relative;
  padding: 14px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--org-bureau-ink);
  background: var(--org-bureau-bg);
  border: 1.5px solid var(--org-bureau-bd);
  border-radius: 6px;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
/* 선 연결 모두 제거 — .org-bureau::before 미정의 (없음) */
.org-bureau__sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--org-bureau-ink);
  opacity: 0.85;
  margin-top: 2px;
}

/* ───── 지역네트워크 박스 (block wide) — v5 right wing 안 ───── */
.org-node--block {
  display: flex;
  width: 100%;
  align-self: stretch;
  min-width: 0;
  padding: 12px 20px;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  box-sizing: border-box;
}

/* ───── 지부 grid (지역네트워크 박스 자식) ───── */
.org-branches {
  width: 100%;
  position: relative;
  padding: 14px;
  border: 1.5px solid var(--org-line);
  border-radius: 0 0 6px 6px;   /* 위 박스와 자연스럽게 이어짐 */
  border-top: none;
  background: #fff;
  box-sizing: border-box;
}
.org-branches__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.org-branch {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--org-branch-ink);
  background: var(--org-branch-bg);
  border: 1.5px solid var(--org-branch-bd);
  border-radius: 22px;
  line-height: 1.35;
  min-height: 48px;
}

/* ───── 하단: 부설/협력/연대 ───── */
.org-section--partners {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1.5px solid var(--org-partner-bd);
  border-radius: 6px;
  background: #fff;
}
.org-partner__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px 14px;
  align-items: baseline;
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px dotted var(--color-line);
  font-size: 13.5px;
  line-height: 1.55;
}
.org-partner__row:last-child { border-bottom: 0; }
.org-partner__row dt {
  font-weight: 700;
  color: var(--color-brand);
  letter-spacing: -0.01em;
}
.org-partner__row dd {
  margin: 0;
  color: var(--color-ink);
}
.org-partner__note {
  font-size: 12px;
  color: var(--color-ink-sub);
  margin-left: 4px;
}

/* ───── 반응형 (≤ 1024px: spine 좌표 축소) ───── */
@media (max-width: 1024px) {
  .org-chart {
    --org-branch-gap: 24px;
    --org-branch-w: 260px;
    --org-branch-left-w: 200px;
  }
}

/* ───── 반응형 (≤ 900px: 본부 3열, 지부는 2-col 유지) ───── */
@media (max-width: 900px) {
  .org-chart {
    --org-branch-gap: 16px;
    --org-branch-w: 240px;
    --org-branch-left-w: 170px;
  }
  .org-tier--bureaus-flat { grid-template-columns: repeat(3, 1fr); }
}

/* ───── 모바일 (≤ 768px): spine 1-col stack ─────
   - 감사 → 지역네트워크 → 사무총장 순서로 normal flow stack
   - 좌/우 wing 모두 absolute 해제, 가로선 숨김, spine 세로선은 유지 */
@media (max-width: 768px) {
  /* spine 자체 중앙 정렬 + 너비 자동 */
  .org-spine {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  /* spine 세로선 — stack 된 모든 노드를 커버 */
  .org-spine::before {
    top: 42px;
    bottom: 42px;
  }
  /* 가로분기 wrapper → static, 자식들 normal flow 로 stack */
  .org-spine__branch {
    margin-bottom: var(--org-spine-gap);
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--org-spine-gap);
  }
  /* 가로 분기선 모바일에서 숨김 (1-col stack 이라 의미 없음) */
  .org-spine__branch::before { display: none; }
  /* 좌·우 wing 둘 다 absolute 에서 normal flow 로 */
  .org-branch__left,
  .org-branch__right {
    position: static;
    width: 100%;
    top: auto;
    left: auto;
    right: auto;
  }

  /* 지부 grid: 모바일에서 2-col */
  .org-branches__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 5개 본부 — 모바일 2-col, 선 연결 없음 */
  .org-tier--bureaus-flat {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 12px;
    margin-top: 28px;
  }

  .org-partner__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ============ v2 게시판 ============ */
.v2-board-list {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.v2-board-list th {
  background: var(--color-bg-alt);
  color: var(--color-ink);
  font-weight: 600;
  padding: 14px 12px;
  border-bottom: 2px solid var(--color-brand);
  font-size: 14px;
}
.v2-board-list td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: 14px;
}
.v2-board-list tr:hover td { background: var(--color-bg-soft); }
.v2-board-list .col-no { width: 60px; text-align: center; color: var(--color-ink-soft); }
.v2-board-list .col-date { width: 110px; text-align: center; color: var(--color-ink-sub); font-size: 13px; }
.v2-board-list .col-view { width: 80px; text-align: center; color: var(--color-ink-soft); font-size: 13px; }
.v2-board-list .col-title a { color: var(--color-ink); transition: color .15s; }
.v2-board-list .col-title a:hover { color: var(--color-brand); }
.v2-board-list .noti {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 6px;
}

.v2-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0;
}
.v2-photo-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all .2s;
}
.v2-photo-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.v2-photo-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--color-bg-alt);
  overflow: hidden;
}
.v2-photo-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-photo-card__body { padding: 16px 18px; }
.v2-photo-card__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 6px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-photo-card__date { font-size: 12px; color: var(--color-ink-soft); }

@media (max-width: 768px) {
  .v2-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* 페이징 */
.v2-paging {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 30px 0;
}
.v2-paging a, .v2-paging span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-ink-sub);
  transition: all .15s;
}
.v2-paging a:hover { border-color: var(--color-brand); color: var(--color-brand); }
.v2-paging .on { background: var(--color-brand); color: #fff; border-color: var(--color-brand); font-weight: 600; }

/* 검색 */
.v2-search {
  display: flex; justify-content: center; gap: 8px;
  margin: 24px 0;
  flex-wrap: wrap;
}
.v2-search select, .v2-search input[type=text] {
  height: 42px; padding: 0 14px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
}
.v2-search input[type=text] { min-width: 260px; }
.v2-search button {
  height: 42px; padding: 0 22px;
  background: var(--color-brand); color: #fff;
  border: 0; border-radius: 10px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.v2-search button:hover { background: var(--color-brand-dk); }

/* 상세 보기 */
.v2-view-head {
  padding: 24px 0;
  border-bottom: 2px solid var(--color-line);
  margin-bottom: 30px;
}
.v2-view-head h2 {
  font-size: 24px; line-height: 1.4;
  color: var(--color-ink);
  margin-bottom: 12px;
  font-weight: 700;
}
.v2-view-head .meta {
  display: flex; gap: 20px;
  font-size: 13px; color: var(--color-ink-sub);
  flex-wrap: wrap;
}
.v2-view-head .meta strong { font-weight: 500; color: var(--color-ink); margin-right: 4px; }
.v2-view-content {
  padding: 30px 0;
  min-height: 200px;
  font-size: 15px; line-height: 1.8;
  color: var(--color-ink);
  word-break: break-word;
}
.v2-view-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
.v2-view-content p { margin: 0 0 12px 0; }
.v2-view-files {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--color-bg-soft);
  border-left: 3px solid var(--color-brand);
  border-radius: 6px;
}
.v2-view-files h4 { font-size: 13px; color: var(--color-brand); margin-bottom: 10px; font-weight: 700; }
.v2-view-files ul { list-style: none; padding: 0; margin: 0; }
.v2-view-files li { padding: 4px 0; font-size: 13.5px; }
.v2-view-files a { color: var(--color-ink-sub); }
.v2-view-files a:hover { color: var(--color-brand); text-decoration: underline; }

.v2-view-actions {
  display: flex; justify-content: space-between;
  padding-top: 30px;
  border-top: 1px solid var(--color-line);
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.v2-view-actions .btn { padding: 10px 22px; font-size: 14px; height: 44px; }

/* ============ v2 폼 ============ */
.v2-form {
  max-width: 520px;
  margin: 40px auto;
  padding: 40px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.v2-form.wide { max-width: 760px; }
.v2-form h2 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 6px;
  color: var(--color-ink);
}
.v2-form .desc {
  text-align: center;
  font-size: 14px;
  color: var(--color-ink-sub);
  margin-bottom: 30px;
}
.v2-form label {
  display: block;
  font-size: 13px;
  color: var(--color-ink-sub);
  margin-bottom: 6px;
  font-weight: 500;
}
.v2-form input[type=text],
.v2-form input[type=password],
.v2-form input[type=email],
.v2-form input[type=tel],
.v2-form select,
.v2-form textarea {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  margin-bottom: 16px;
  font-family: inherit;
  box-sizing: border-box;
}
.v2-form textarea { height: 120px; padding: 12px 14px; resize: vertical; }
.v2-form input:focus, .v2-form select:focus, .v2-form textarea:focus {
  outline: 0;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(46,90,62,.1);
}
.v2-form .row { display: flex; gap: 10px; }
.v2-form .row > * { flex: 1; }
.v2-form .actions {
  margin-top: 24px;
  text-align: center;
}
.v2-form .actions .btn { min-width: 200px; }
.v2-form .links {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--color-ink-sub);
}
.v2-form .links a { color: var(--color-brand); margin: 0 8px; }
.v2-form .links a:hover { text-decoration: underline; }

/* ============ v2 메인 슬라이더 (hero__slider) ============ */
/* 모바일 (max-width:1100px) 에서 .hero__visual width:100% 보강 — 부모 hero__container 가 1fr 일 때 자식이 0 으로 collapse 되는 버그 회피 */
@media (max-width: 1100px) {
  .hero__visual { width: 100%; }
}
.hero__slider {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
@media (max-width: 768px) {
  .hero__slider { border-radius: 60px; }
}
.hero__slider .hero__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.hero__slider .hero__visual-img.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.hero__slider-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 5;
}
.hero__slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.8);
  padding: 0;
  cursor: pointer;
  transition: all .2s;
}
.hero__slider-dot.is-active {
  background: #fff;
  width: 22px;
  border-radius: 5px;
}
.hero__slider-dot:hover { background: rgba(255,255,255,0.9); }
.hero__slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.32);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  transition: background .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px 0;
}
.hero__slider-nav:hover { background: rgba(0,0,0,0.55); }
.hero__slider-nav--prev { left: 10px; }
.hero__slider-nav--next { right: 10px; }
@media (max-width: 640px) {
  .hero__slider-nav { width: 32px; height: 32px; font-size: 18px; }
  .hero__slider-nav--prev { left: 6px; }
  .hero__slider-nav--next { right: 6px; }
  .hero__slider-dots { bottom: 12px; }
}

/* 2026-05-20 hero__badge stacking fix — 슬라이더 도입 후 .hero__slider .is-active { z-index:1 } 에
   가려지던 데코 원형 "시민의 손으로 만드는 변화" 를 슬라이더 위로 끌어올림.
   .hero__visual 부모(position:relative) 자식 stacking: slider(auto) < active 슬라이드(1) < badge(3) */
.hero__visual { z-index: 1; }
.hero__slider { z-index: 1; }
.hero__badge {
  z-index: 3;
  pointer-events: none;
}

/* ============ v2 탭 메뉴 (지역 / 카테고리 필터) ============ */
.v2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px 0;
}
.v2-tabs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  height: 36px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-line);
  color: var(--color-ink-sub);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.v2-tabs__btn:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-bg-soft);
}
.v2-tabs__btn.is-active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
  font-weight: 600;
}
.v2-tabs--sm .v2-tabs__btn {
  padding: 6px 14px;
  height: 32px;
  font-size: 12.5px;
}
@media (max-width: 640px) {
  .v2-tabs { gap: 6px; }
  .v2-tabs__btn { padding: 6px 12px; height: 32px; font-size: 12.5px; }
  .v2-tabs--sm .v2-tabs__btn { padding: 5px 10px; height: 28px; font-size: 11.5px; }
}

/* 약관 박스 */
.v2-terms-box {
  max-height: 360px;
  overflow-y: auto;
  padding: 24px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--color-ink-sub);
  margin: 20px 0;
  white-space: pre-line;
}

/* =============================================================
   2026-05-20 type2 보강: 메인 4개 섹션 이미지 카드형 통일
   (공지 / 보도자료 / 이슈와 뉴스 / 소비자교육정보)
   ============================================================= */

/* split-2 안에 들어가는 2열 카드 그리드 */
.card-grid--split {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .card-grid--split { grid-template-columns: 1fr; gap: 14px; }
}

/* mini-card — 좌우 분할용 컴팩트 카드 */
.v2-mini-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .18s, box-shadow .22s, transform .22s;
  display: flex;
  flex-direction: column;
}
/* JS 의 inline display:none 이 위 flex 룰을 override 하도록 specificity 동일 / !important 제거 (2026-05-20 이슈와뉴스 4-cap 미동작 fix) */
.v2-mini-card[style*="display: none"],
.v2-mini-card[style*="display:none"] { display: none !important; }
.v2-mini-card a { /* a 자체가 카드라 내부 a 가 없음 — 안전장치 */
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}
.v2-mini-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.v2-mini-card__img {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--color-bg-alt);
  position: relative;
  overflow: hidden;
  border-radius: 0;
  flex-shrink: 0;
}
.v2-mini-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.v2-mini-card:hover .v2-mini-card__img img {
  transform: scale(1.04);
}

/* placeholder — 이미지가 없거나 broken 일 때 */
.v2-mini-card__ph {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #eccdaa 0%, #c89066 100%);
  display: block;
}
.v2-mini-card__ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%3E%3Cpath%20d%3D%22M14%2018h52v44H14z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%224%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.65%22%2F%3E%3Cpath%20d%3D%22M18%2055l14-14%2010%2010%208-6%2012%2014%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-opacity%3D%22.65%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px;
}
.v2-mini-card__ph--alt {
  background: linear-gradient(135deg, #2e5a3e 0%, #1f4029 100%);
}
.v2-mini-card__ph--issue {
  background: linear-gradient(135deg, #5a8f6c 0%, #2e5a3e 100%);
}
.v2-mini-card__ph--edu {
  background: linear-gradient(135deg, #d4a574 0%, #b07a4a 100%);
}
/* 이미지 로드 실패 후 onerror 로 부모에 클래스 추가 시 placeholder 노출 */
.v2-mini-card__img--ph {
  background: linear-gradient(135deg, #eccdaa 0%, #c89066 100%);
}
.v2-mini-card__img--ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%3E%3Cpath%20d%3D%22M14%2018h52v44H14z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%224%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.65%22%2F%3E%3Cpath%20d%3D%22M18%2055l14-14%2010%2010%208-6%2012%2014%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-opacity%3D%22.65%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px;
}

.v2-mini-card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.v2-mini-card__chip {
  display: inline-block;
  width: fit-content;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-brand);
  background: rgba(46, 90, 62, .08);
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: .02em;
  margin-bottom: 2px;
}
.v2-mini-card__chip--alt {
  color: var(--color-accent, #b07a4a);
  background: rgba(176, 122, 74, .1);
}
.v2-mini-card__chip--cate {
  color: var(--color-brand);
  background: rgba(46, 90, 62, .08);
}
.v2-mini-card__chip--edu {
  color: #8b5a2b;
  background: rgba(212, 165, 116, .18);
}
.v2-mini-card__title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.v2-mini-card:hover .v2-mini-card__title { color: var(--color-brand); }
.v2-mini-card__date {
  font-size: 12px;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* =============================================================
   2026-05-21 type2 보강: 모바일 컨슈머맵 2개만 노출 (기존 3 cap → 2 cap)
   사용자 요청: "모바일 화면에서 모바일 소비자매거진 컨슈머맵 2개만 표시"
   ============================================================= */
@media (max-width: 768px) {
  .v2-photo-grid > .v2-photo-card:nth-child(n+3) {
    display: none !important;
  }
}

/* =============================================================
   2026-05-20 type2 v3: 활동소식 카드 — 지부 라벨 좌측 상단 오버레이
   .v2-loca-chip = 카드 이미지 절대좌표 칩 (반투명 검정 + 흰 텍스트)
   .card__img 와 .v2-photo-card__img 둘 다 position:relative 적용
   ============================================================= */
.card__img,
.v2-photo-card__img {
  position: relative;
}
.v2-loca-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(46, 90, 62, 0.92);   /* color-brand 톤 + 92% 불투명 */
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .v2-loca-chip {
    top: 6px;
    left: 6px;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 5px;
  }
}

/* =============================================================
   2026-05-21 type2 보강: 모바일 햄버거 + 모바일 메뉴 패널
   - 데스크탑 (≥1024px): 햄버거 숨김, 후원하기 CTA 표시, GNB 표시
   - 모바일  (≤1023px): 햄버거 표시, 후원하기 CTA 숨김, GNB 숨김
   - 패널: 우측 슬라이드 in, 오버레이 반투명, 5 GNB + 2depth 아코디언 + 유틸 + SNS
   ============================================================= */

/* 햄버거 토글 버튼 — 기본 데스크탑에서 숨김 */
.m-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  margin-left: 8px;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.m-nav-toggle:hover { background: var(--color-bg-soft, #f5f0e9); }
.m-nav-toggle__bar {
  display: block;
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--color-brand, #2e5a3e);
  border-radius: 2px;
  transition: transform .2s ease, top .2s ease, opacity .15s ease;
}
.m-nav-toggle__bar:nth-child(1) { top: 14px; }
.m-nav-toggle__bar:nth-child(2) { top: 21px; }
.m-nav-toggle__bar:nth-child(3) { top: 28px; }
.m-nav-toggle[aria-expanded="true"] .m-nav-toggle__bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.m-nav-toggle[aria-expanded="true"] .m-nav-toggle__bar:nth-child(2) { opacity: 0; }
.m-nav-toggle[aria-expanded="true"] .m-nav-toggle__bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* 데스크탑 (≥1024px): 햄버거 hidden, 패널 hidden — 위 default 그대로
   다만 main.css 의 ≤768px 미디어쿼리에서 .header__cta 가 살아있고 .gnb 가 숨김 처리됨.
   1023px 까지는 GNB 가 보이지만 좁아서 깨질 수 있음 → 1023px 부터 햄버거 사용으로 통일 */
@media (max-width: 1023px) {
  .gnb { display: none !important; }
  .header__cta { display: none !important; }      /* 후원하기 CTA → 햄버거로 교체 */
  .m-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .util-bar__links { display: none; }
}

/* ───── 모바일 메뉴 패널 ───── */
.m-nav {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility 0s linear .2s;
  pointer-events: none;
}
.m-nav.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .2s ease, visibility 0s;
}
.m-nav__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 28, 22, 0.45);
}
.m-nav__panel {
  position: absolute;
  top: 0; right: 0;
  width: min(86vw, 360px);
  height: 100%;
  background: #fff;
  box-shadow: -16px 0 40px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px 0 0 18px;
}
.m-nav.is-open .m-nav__panel { transform: translateX(0); }

.m-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-line, #e7e2d6);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}
.m-nav__brand img { height: 32px; width: auto; display: block; }
.m-nav__close {
  width: 40px; height: 40px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--color-ink, #2a2a2a);
  border-radius: 10px;
}
.m-nav__close:hover { background: var(--color-bg-soft, #f5f0e9); }

.m-nav__list { padding: 8px 12px 14px; }
.m-nav__group {
  border-bottom: 1px solid var(--color-line, #e7e2d6);
}
.m-nav__group:last-child { border-bottom: 0; }
.m-nav__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink, #2a2a2a);
  cursor: pointer;
  list-style: none;
  letter-spacing: -0.01em;
}
.m-nav__group-title::-webkit-details-marker { display: none; }
.m-nav__group-title > a {
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.m-nav__group-title > a:hover { color: var(--color-brand, #2e5a3e); }
.m-nav__chev {
  width: 12px; height: 12px;
  border-right: 2px solid var(--color-ink-sub, #6b6b6b);
  border-bottom: 2px solid var(--color-ink-sub, #6b6b6b);
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-right: 6px;
  margin-top: -4px;
}
.m-nav__group[open] .m-nav__chev { transform: rotate(-135deg); margin-top: 2px; }

.m-nav__sub {
  list-style: none;
  padding: 0 0 10px;
  margin: 0;
  background: var(--color-bg-soft, #f8f5ee);
  border-radius: 10px;
}
.m-nav__sub li a {
  display: block;
  padding: 11px 18px;
  font-size: 14.5px;
  color: var(--color-ink-sub, #555);
  text-decoration: none;
  border-radius: 8px;
}
.m-nav__sub li a:hover {
  background: rgba(46, 90, 62, .08);
  color: var(--color-brand, #2e5a3e);
}

.m-nav__util {
  display: flex;
  gap: 6px;
  padding: 12px 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-line, #e7e2d6);
  background: #fafaf6;
}
.m-nav__util-link {
  flex: 1 1 auto;
  text-align: center;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-sub, #555);
  text-decoration: none;
  border: 1px solid var(--color-line, #e7e2d6);
  border-radius: 10px;
  background: #fff;
  min-width: 80px;
}
.m-nav__util-link:hover { color: var(--color-brand, #2e5a3e); border-color: var(--color-brand, #2e5a3e); }

.m-nav__cta {
  display: block;
  margin: 12px 18px 14px;
  padding: 14px 18px;
  text-align: center;
  background: var(--color-brand, #2e5a3e);
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(46, 90, 62, 0.18);
}
.m-nav__cta:hover { filter: brightness(.96); }

.m-nav__sns {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 6px 18px 22px;
  margin: 0;
}
.m-nav__sns li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-bg-soft, #f5f0e9);
  color: var(--color-ink-sub, #555);
}
.m-nav__sns li a:hover { background: var(--color-brand, #2e5a3e); color: #fff; }
.m-nav__sns .sns-ico { width: 18px; height: 18px; }