/* ============================================================
   감사합니다 복지타운 — 메인 페이지 스타일
   - Pretendard / Wanted-style tokens, 한국형 접근성 지침 준수
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

:root {
  /* Brand */
  --brand-blue: #1d3868;
  --brand-blue-2: #2c5fa0;
  --brand-blue-3: #4f8acb;
  --brand-cta: #0066ff;
  --brand-cta-hover: #005eeb;
  --brand-warm: #B5781A;

  /* Wanted semantic — light */
  --color-bg: #ffffff;
  --color-bg-alt: #f6f7f9;
  --color-bg-elev: #ffffff;
  --color-bg-deep: #eef0f3;
  --color-label-strong: #14181f;
  --color-label-normal: #1f2530;
  --color-label-neutral: #3a4150;
  --color-label-alt: #6a7283;
  --color-label-assist: #aab1be;
  --color-line: rgba(85, 96, 120, 0.18);
  --color-line-strong: rgba(85, 96, 120, 0.32);
  --color-status-info: #3385ff;
  --color-status-pos: #00a341;

  /* Type */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --tnum: 'tnum' 1, 'ss01' 1;

  /* Step */
  --fs: 1; /* 1, 1.06, 1.14 — 글자크기 조절 */

  /* Radius */
  --r-4: 4px; --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-20: 20px; --r-24: 24px; --r-32: 32px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(20, 24, 31, 0.06), 0 1px 1px rgba(20, 24, 31, 0.04);
  --sh-2: 0 4px 12px rgba(20, 24, 31, 0.08), 0 1px 2px rgba(20, 24, 31, 0.06);
  --sh-3: 0 18px 40px rgba(20, 24, 31, 0.12), 0 4px 12px rgba(20, 24, 31, 0.06);

  --container: 1280px;
}

html[data-dark='true'] {
  --color-bg: #0e1117;
  --color-bg-alt: #161a22;
  --color-bg-elev: #1a1f29;
  --color-bg-deep: #0a0d12;
  --color-label-strong: #ffffff;
  --color-label-normal: #f3f5f9;
  --color-label-neutral: #cdd2dc;
  --color-label-alt: #9aa1b1;
  --color-label-assist: #6a7283;
  --color-line: rgba(180, 190, 210, 0.18);
  --color-line-strong: rgba(180, 190, 210, 0.32);
  --brand-cta: #3385ff;
  --brand-cta-hover: #1f78ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: calc(16px * var(--fs));
  color: var(--color-label-normal);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: var(--tnum);
  letter-spacing: -0.01em;
}

/* ───────── 모바일 가로 스크롤 차단 (전역 가드) ─────────
   특정 페이지에서 너비를 초과하는 요소(예: 긴 영문 URL · 와이드 표 · 외부 임베드)가
   가로 스크롤을 만들어 우측 공백이 생기는 현상을 원천 차단.
   문제 요소가 있다면 그 요소 자체에 max-width:100% 또는 overflow-x:auto 를 따로 줘야 함.
   본 가드는 "사용자가 자기도 모르게 가로로 밀리는" 사고만 막는 안전망. */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  img, video, iframe, table, pre { max-width: 100%; }
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

.wt-container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wt-container { padding: 0 14px; } }
@media (max-width: 480px) { .wt-container { padding: 0 10px; } }

.wt-section { padding: 68px 0; }
.wt-section--alt { background: var(--color-bg-alt); }
.wt-section--dark { background: var(--brand-blue); color: #fff; }
.wt-section--dark { --color-label-normal: #f3f5f9; --color-label-alt: rgba(255,255,255,0.7); }

.t-title-3 { font-size: calc(24px * var(--fs)); line-height: 1.35; font-weight: 700; letter-spacing: -0.025em; margin: 0; }
.t-body-2 { font-size: calc(15px * var(--fs)); line-height: 1.55; }

/* === Buttons === */
.wt-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 20px;
  border-radius: var(--r-12);
  font-weight: 600; font-size: calc(15px * var(--fs));
  letter-spacing: -0.01em;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.wt-btn--lg { height: 56px; padding: 0 28px; font-size: calc(16px * var(--fs)); border-radius: var(--r-16); }
.wt-btn--primary { background: var(--brand-cta); color: #fff; }
.wt-btn--primary:hover { background: var(--brand-cta-hover); transform: translateY(-1px); box-shadow: var(--sh-2); }
.wt-btn--ghost { background: var(--color-bg-alt); color: var(--color-label-normal); }
.wt-btn--ghost:hover { background: var(--color-bg-deep); }
.wt-btn--ghost-dark { background: rgba(255,255,255,0.14); color: #fff; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.28); }
.wt-btn--ghost-dark:hover { background: rgba(255,255,255,0.22); }
.wt-btn--ghost-light { background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.32); }
.wt-btn--white { background: #fff; color: var(--brand-blue); }
.wt-btn--white:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }

.wt-chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--color-bg-alt); border: 1px solid var(--color-line);
  font-size: calc(13px * var(--fs)); font-weight: 500;
}

/* === Section header === */
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.sec-h__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(13px * var(--fs)); font-weight: 700;
  color: var(--brand-cta); letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.wt-section--dark .sec-h__eyebrow { color: #FFCB47; }
.sec-h__title {
  font-size: calc(36px * var(--fs)); line-height: 1.2; font-weight: 800;
  letter-spacing: -0.028em; margin: 0;
}
.sec-h__sub { margin: 12px 0 0; max-width: 640px; color: var(--color-label-alt); font-size: calc(16px * var(--fs)); line-height: 1.6; }
.sec-h__more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(15px * var(--fs)); font-weight: 600; color: var(--brand-cta);
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--color-line);
  transition: background 0.18s;
}
.sec-h__more:hover { background: var(--color-bg-alt); }
.sec-h--light .sec-h__more { color: #fff; border-color: rgba(255,255,255,0.3); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr { position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
/* 모바일에서는 헤더를 고정 해제 — 본문 공간 우선 + TOP FAB 로 빠른 복귀 */
@media (max-width: 720px) {
  .hdr { position: static; }
}

/* 모바일 전용 FAB — 페이지 우측 하단 'TOP' 버튼 */
.fab-top {
  display: none;
  position: fixed;
  right: 14px; bottom: 18px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--brand-cta, #0066ff);
  color: #fff;
  border: 0;
  z-index: 90;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 20px -4px rgba(0,102,255,0.45), 0 2px 6px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .15s ease;
}
.fab-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fab-top:hover { background: var(--brand-cta-hover, #005eeb); }
.fab-top svg { margin-bottom: -1px; }
@media (max-width: 720px) {
  .fab-top { display: flex; }
}
html[data-dark='true'] .fab-top { box-shadow: 0 8px 20px -4px rgba(51,133,255,0.45), 0 2px 6px rgba(0,0,0,0.40); }
.util { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-line); font-size: calc(13px * var(--fs)); }
.util__inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; height: 44px; display: flex; align-items: center; justify-content: space-between; }
.util__left, .util__right { display: flex; align-items: center; gap: 10px; color: var(--color-label-alt); }
.util__quick:hover { color: var(--brand-cta); }
.util__sep { color: var(--color-label-assist); }

/* Font-size group: 가− [↻] 가+ */
.fzgroup { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-line); }
.fzgroup__lab { font-weight: 600; color: var(--color-label-neutral); margin: 0 6px 0 4px; font-size: calc(13px * var(--fs)); }
.fzbtn { display: inline-flex; align-items: baseline; gap: 1px; height: 28px; padding: 0 10px; border-radius: 999px; color: var(--color-label-strong); transition: background 0.15s; }
.fzbtn:hover:not(:disabled) { background: var(--color-bg-deep); }
.fzbtn:disabled { opacity: 0.35; cursor: not-allowed; }
.fzbtn__op { font-size: calc(14px * var(--fs)); font-weight: 800; color: var(--brand-cta); margin-left: 1px; }
.fzbtn--reset { padding: 0 10px; color: var(--color-label-alt); }
.fzbtn--reset:hover { color: var(--color-label-strong); }

.util__divider { width: 1px; height: 18px; background: var(--color-line); }

/* Theme toggle: 밝은 테마 / 어두운 테마(저시력자용) */
.themetoggle { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-line); gap: 2px; }
.themebtn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px; font-weight: 600; color: var(--color-label-alt); font-size: calc(13px * var(--fs)); transition: all 0.15s; }
.themebtn:hover { color: var(--color-label-strong); }
.themebtn--on { background: var(--color-label-strong); color: var(--color-bg); }
.themebtn__hint { font-style: normal; font-size: calc(12px * var(--fs)); opacity: 0.72; font-weight: 500; margin-left: 2px; }

/* GNB */
.gnb__inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; height: 80px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.gnb__nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.gnb__item { position: relative; padding: 0 18px; height: 80px; font-size: calc(17px * var(--fs)); font-weight: 700; color: var(--color-label-normal); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 6px; }
.gnb__item:hover, .gnb__item--on { color: var(--brand-cta); }
.gnb__item--on::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; background: var(--brand-cta); border-radius: 2px; }
.gnb__star { color: #FFB200; font-size: calc(13px * var(--fs)); }
.gnb__util { display: flex; align-items: center; gap: 8px; }
.gnb__ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-label-neutral); }
.gnb__ico:hover { background: var(--color-bg-alt); }
.gnb__btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: calc(14px * var(--fs)); }
.gnb__btn--visit { background: var(--color-bg-alt); color: var(--color-label-strong); border: 1px solid var(--color-line); }
.gnb__btn--visit:hover { background: var(--color-bg-deep); }
.gnb__btn--donate { background: var(--brand-cta); color: #fff; }
.gnb__btn--donate:hover { background: var(--brand-cta-hover); }

/* Mega menu */
.mega { position: absolute; left: 0; right: 0; background: var(--color-bg); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); box-shadow: var(--sh-2); animation: drop 0.18s ease; }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* 왼쪽 title + cols. 메뉴별 정렬 정책: town/service 는 좌측, news/board/donate 는 가운데 */
.mega__inner { max-width: 1440px; margin: 0 auto; padding: 18px 24px 20px; display: flex; align-items: flex-start; gap: 18px; position: relative; }
.mega__title { width: 200px; flex-shrink: 0; }
.mega__title h3 { font-size: calc(20px * var(--fs)); font-weight: 800; letter-spacing: -0.024em; margin: 0; }
@media (max-width: 1200px) {
  .mega__title { width: 170px; }
  .mega__inner { padding-left: 16px; padding-right: 16px; gap: 14px; }
}
.mega__cols { display: grid; gap: 12px; }
.mega__inner--left .mega__cols { margin-right: auto; }
.mega__inner--center .mega__cols { margin-left: auto; margin-right: auto; }
/* 뉴스룸 전용: 타이틀은 좌측 그대로, 컬럼만 화면 정중앙에 위치 (3-col grid 로 전환) */
.mega__inner--news {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}
.mega__inner--news .mega__title { grid-column: 1; justify-self: start; }
.mega__inner--news .mega__cols { grid-column: 2; margin: 0; }
/* 복지타운 소개 전용: 컬럼만 오른쪽으로 100px 이동 + 컬럼 간격 넉넉히 */
.mega__inner--town .mega__cols { margin-left: 100px; gap: 36px; }
.mega__col { min-width: 0; }
.mega__h { font-size: calc(13px * var(--fs)); font-weight: 700; letter-spacing: 0.04em; color: var(--color-label-alt); padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--color-line); text-transform: uppercase; white-space: nowrap; }
.mega__col ul { display: flex; flex-direction: column; gap: 0; }
.mega__col a { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px; font-size: calc(14px * var(--fs)); font-weight: 500; color: var(--color-label-normal); white-space: nowrap; }
.mega__col a span { white-space: nowrap; }
.mega__col a:hover { background: var(--color-bg-alt); color: var(--brand-cta); }
.mega__col a svg { opacity: 0; transition: opacity 0.15s; margin-left: auto; flex-shrink: 0; }
.mega__col a:hover svg { opacity: 1; }

/* Search bar */
.searchbar { background: var(--color-bg); border-bottom: 1px solid var(--color-line); padding: 18px 0; }
.searchbar__inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 12px; }
.searchbar__inner > svg { color: var(--color-label-alt); }
.searchbar__input { flex: 1; height: 52px; padding: 0 16px; border: none; outline: none; background: transparent; font: inherit; font-size: calc(18px * var(--fs)); font-weight: 600; color: var(--color-label-strong); }
.searchbar__hint { padding-top: 12px; font-size: calc(13px * var(--fs)); color: var(--color-label-alt); }