@charset "utf-8";
/* ==========================================================================
   메인 페이지 전용 스타일
   히어로 · 바로가기 · 대시보드 · 퀵타일 · 뉴스 · 기부자 한마디 · 영상배너
   · 공지/계좌 · 후원의집·후원병원
   ========================================================================== */

/* ---------- 메인 히어로 ---------- */
/* 히어로는 문구 없이 영상만 보여 준다. 첫 화면에 "히어로 영상 + 바로가기 바"까지만
   들어오고 그 아래 뉴스는 걸리지 않도록, 화면 높이에서 위아래 고정 영역(--chrome)을
   뺀 만큼을 최소 높이로 준다.
   --chrome = 유틸바 36 + 헤더 73 + 바로가기바 68 (브레이크포인트별로 아래에서 조정) */
.mhero{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(120deg,#07223c 0%,var(--navy) 46%,#0074b0 100%);
  color:#fff;
  --chrome:177px;
  min-height:calc(100vh - var(--chrome));   /* 구형 브라우저 폴백 */
  min-height:calc(100svh - var(--chrome));  /* 모바일 주소창 변화에 영향 없는 단위 */
}
/* 배경 영상 — 덮는 층 없이 원본 그대로 */
.mhero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.mhero__video{width:100%;height:100%;display:block;object-fit:cover}
/* 자동 재생되는 영상은 멈출 수 있어야 한다 (WCAG 2.2.2) */
.mhero__vidbtn{
  position:absolute;right:18px;bottom:18px;z-index:2;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(4,26,46,.55);border:1px solid rgba(255,255,255,.34);color:#fff;
  cursor:pointer;transition:background .18s,transform .18s;
}
.mhero__vidbtn:hover{background:rgba(4,26,46,.8);transform:scale(1.06)}
.mhero__vidbtn .mhero__vidbtn-play{display:none}
.mhero__vidbtn.is-paused .mhero__vidbtn-pause{display:none}
.mhero__vidbtn.is-paused .mhero__vidbtn-play{display:block}

/* ---------- 바로가기 바 ---------- */
.shortcut{background:var(--navy)}
.shortcut__inner{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.shortcut a{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 12px;font-size:15px;font-weight:700;color:rgba(255,255,255,.86);
  border-left:1px solid rgba(255,255,255,.12);
  transition:background .2s,color .2s;word-break:keep-all;text-align:center;
}
.shortcut a:first-child{border-left:0}
.shortcut a:hover,.shortcut a:focus-visible{background:rgba(255,255,255,.1);color:#fff;outline:none}

/* 아이콘 — 라운드 배지 안에 2톤(면 + 선) 아이콘 */
.shortcut__ico{
  flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(143,220,255,.24),rgba(143,220,255,.07));
  border:1px solid rgba(143,220,255,.26);
  transition:background .22s,border-color .22s,transform .22s,box-shadow .22s;
}
.shortcut__ico svg{width:21px;height:21px;display:block;overflow:visible}
.si-fill{fill:var(--sky);transition:fill .22s}
.si-line{
  fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
/* 면 위에 겹쳐 뚫어내는 부분 — 배지 배경색과 같은 톤으로 파낸 것처럼 보이게 */
.si-knock{fill:var(--navy)}
.shortcut a:hover .shortcut__ico,.shortcut a:focus-visible .shortcut__ico{
  background:linear-gradient(150deg,rgba(143,220,255,.42),rgba(143,220,255,.16));
  border-color:rgba(143,220,255,.55);
  transform:translateY(-2px);box-shadow:0 8px 18px rgba(2,17,32,.38);
}
.shortcut a:hover .si-fill,.shortcut a:focus-visible .si-fill{fill:#bfe8ff}
.shortcut__label{min-width:0}

/* ---------- 2025 대시보드 컬러배너 ---------- */
/* 막대 차트 없이 네 개의 핵심 수치만 보여 준다. 카드가 화면을 채우는 주인공이
   되도록 아이콘 · 여백 · 숫자 크기를 키우고, 아래는 안내문과 상세보기 링크로 닫는다. */
.dash{padding:64px 0 0;background:var(--bg-alt)}
.dash__panel{
  position:relative;overflow:hidden;border-radius:var(--radius-l);
  background:linear-gradient(125deg,var(--brand-strong) 0%,var(--brand) 52%,#1985bd 100%);
  color:#fff;padding:38px 40px 34px;
  box-shadow:0 24px 60px rgba(10,49,86,.28);
}
.dash__panel::after{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,195,232,.36),transparent 68%);
}
.dash__head{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px 18px;
  align-items:center;justify-content:space-between;margin-bottom:26px;
}
.dash__head h2{font-size:clamp(20px,2.4vw,26px);font-weight:900;letter-spacing:-.03em;word-break:keep-all}
.dash__sub{margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.76);word-break:keep-all}
.dash__period{
  display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  font-size:12.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.dash__stats{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
}
.dash__stat{
  padding:26px 22px 24px;border-radius:var(--radius-m);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;
}
/* 마우스를 올린 카드만 밝게, 나머지는 살짝 눌러 둔다 */
.dash__stat:hover,.dash__stat:focus-visible{
  background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.42);
  transform:translateY(-3px);box-shadow:0 14px 30px rgba(4,28,52,.3);outline:none;
}
.dash__stats:hover .dash__stat:not(:hover){opacity:.62}
.dash__ico{
  display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;
  border-radius:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);
  color:var(--accent);transition:background .2s,color .2s;
}
.dash__ico svg{width:23px;height:23px}
.dash__stat:hover .dash__ico,.dash__stat:focus-visible .dash__ico{background:rgba(255,255,255,.26)}
.dash__stat p{font-size:12.5px;color:rgba(255,255,255,.78);font-weight:600;margin-bottom:8px}
.dash__stat b{
  display:block;font-size:clamp(28px,3.4vw,40px);font-weight:900;letter-spacing:-.04em;line-height:1.1;
}
/* 단위(억원 · 명 · 건)만 작게. 숫자를 감싼 .dash__num 은 제외합니다 —
   숫자 세어 올리기(assets/js/site.js) 때문에 span 으로 감싸 두었는데,
   이 규칙에 같이 걸려 숫자까지 작아졌었습니다. */
.dash__stat b span:not(.dash__num){font-size:.46em;font-weight:700;margin-left:4px;letter-spacing:0}
.dash__stat small{
  display:block;margin-top:9px;font-size:11.5px;line-height:1.55;
  color:rgba(255,255,255,.66);word-break:keep-all;
}

.dash__foot{
  position:relative;z-index:1;margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;
}
.dash__note{font-size:12px;color:rgba(255,255,255,.62);word-break:keep-all}
.dash__more{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:11px 20px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);color:#fff;
  font-size:13.5px;font-weight:700;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.dash__more:hover,.dash__more:focus-visible{
  background:#fff;color:var(--brand-strong);border-color:#fff;transform:translateY(-2px);
}

/* ---------- 4색 퀵타일 ---------- */
.tiles{padding:56px 0 72px;background:var(--bg-alt)}
.tiles__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-m)}
.tile{
  display:block;padding:34px 26px 38px;min-height:210px;
  transition:transform .22s,filter .22s;
}
.tile:hover{transform:translateY(-4px);filter:brightness(1.04)}
.tile__ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(255,255,255,.6);
  --ti-bg:#fff;                       /* 아이콘에서 파낸 부분에 쓸 배지 배경색 */
  transition:transform .22s,box-shadow .22s;
}
.tile__ico svg{width:24px;height:24px;display:block}
.ti-fill{fill:currentColor}
.ti-line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ti-knock{fill:var(--ti-bg)}          /* 면 위에 배지색으로 겹쳐 뚫어낸 것처럼 보이게 */
.tile:hover .tile__ico{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 22px rgba(16,32,56,.16)}
.tile h3{font-size:17px;font-weight:900;letter-spacing:-.03em;margin-bottom:9px}
.tile p{font-size:13.5px;line-height:1.7;word-break:keep-all;opacity:.82}
.tile--cream{background:#fdf5e6;color:#5a4213}
.tile--cream .tile__ico{background:#f7e4bb;color:#a06c10;--ti-bg:#f7e4bb}
.tile--ice{background:#e6f3fa;color:#123f66}
.tile--ice .tile__ico{background:#c6e3f2;color:var(--brand);--ti-bg:#c6e3f2}
.tile--blue{background:linear-gradient(150deg,var(--brand),var(--brand-strong));color:#fff}
.tile--blue .tile__ico{background:rgba(255,255,255,.2);color:#fff;--ti-bg:#1b6fa8}
.tile--blue p{opacity:.86}
.tile--gold{background:linear-gradient(150deg,#f7c93f,#ed8e1f);color:#4a3000}
.tile--gold .tile__ico{background:rgba(255,255,255,.52);color:#8a5c05;--ti-bg:#f8dc9a}

/* ---------- 섹션 헤더 (메인 좌측정렬형) ---------- */
.mhead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:34px;flex-wrap:wrap}
.mhead__tag{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;
  /* 이 딱지는 하늘틴트(#e3f1f8) 위에도 놓입니다. --brand 로는 4.41:1 이라
     12px 작은 글자 기준(4.5:1)에 못 미쳐 진한 쪽으로 바꿨습니다. */
  color:var(--brand-strong);margin-bottom:10px;
}
.mhead h2{font-size:clamp(24px,3vw,32px);font-weight:900;letter-spacing:-.035em}
.mhead__more{
  display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);
  font-size:13.5px;font-weight:700;color:var(--text-mid);white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s;
}
.mhead__more:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- 발전기금 뉴스 ---------- */
.news{padding:78px 0;background:var(--surface)}
.newscard{width:267px}
.newscard__pic{
  border-radius:var(--radius-m);overflow:hidden;background:var(--bg-alt);
  aspect-ratio:37/28;box-shadow:var(--shadow-s);
}
.newscard__pic img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.newscard:hover .newscard__pic img{transform:scale(1.06)}
.newscard h3{
  margin-top:16px;font-size:15.5px;font-weight:700;line-height:1.55;color:var(--text);
  word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.newscard:hover h3{color:var(--brand)}

/* ---------- 기부자 한마디 ---------- */
.voices{padding:78px 0;background:var(--bg-alt)}
/* 카드 한 장의 크기.
   한 화면에 **네 장**이 들어가도록 폭을 맞췄습니다.
   본문 폭 1140px 에 20px 사이를 세 번 두면 (1140 - 60) / 4 = 270px 입니다.
   이 값을 건드리면 네 장이 나란히 들어가지 않으니, 크기를 바꾸실 때는
   index.php 의 --gap 과 함께 위 식으로 다시 계산해 주세요.
   세로는 시안에 표시된 비율(거의 정사각)에 맞춰 260px. min-height 라서
   글이 길면 그만큼 더 늘어나고, 한 줄에 선 네 장은 같은 높이가 됩니다. */
.voice{
  width:270px;min-height:260px;
  padding:24px 22px 20px;border-radius:var(--radius-l);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;gap:14px;
  /* 손글씨 크기의 기준자.
     글씨체마다 같은 px 로 두면 어떤 건 크고 어떤 건 작아 보여서,
     voices/lib/fonts.php 가 글씨체별 배수(scale)를 em 으로 걸어 둡니다.
     em 은 '부모 글자 크기' 를 따르므로 그 기준이 바로 이 줄입니다.
     이 17px 을 올리고 내리면 손글씨 열한 가지가 비율을 지킨 채
     한꺼번에 커지고 작아집니다. (1.30 배 글씨체면 17 × 1.3 = 22px) */
  font-size:17px;
}
.voice__quote{
  font-family:"KimjungchulScript","Noto Sans KR",cursive;
  /* 글씨체를 고르지 않은(기본) 글의 크기. 위 17px 에 맞춰 둡니다. */
  font-size:22px;line-height:1.6;color:var(--text);word-break:keep-all;
  letter-spacing:.005em;
  /* 한마디를 카드 가운데에 놓습니다.
     한마디는 길이가 제각각인데 카드 높이는 같아서, 그냥 두면 짧은 글은
     위에 붙고 아래만 허전해집니다. 위아래 여백을 auto 로 두면 남는 자리를
     반씩 나눠 가져, 이름줄 위 공간의 한가운데에 놓입니다.
     (이름줄은 아래 .voice__who 가 마지막 항목이라 그대로 바닥에 남습니다) */
  margin-top:auto;margin-bottom:auto;
}
.voice__quote::before{content:"“"}
.voice__quote::after{content:"”"}
/* margin-top:auto 를 뺐습니다 — 남는 자리를 이름줄이 다 가져가 버리면
   위의 한마디가 가운데로 오지 못합니다. 마지막 항목이라 그대로 바닥입니다. */
.voice__who{display:flex;align-items:center;padding-top:13px;border-top:1px solid var(--line)}
.voice__meta{display:flex;flex-direction:column;min-width:0}
.voice__meta b{font-size:14px;font-weight:800;color:var(--text)}
.voice__role{font-size:12px;color:var(--text-dim);margin-top:2px}

/* ---------- 영상 배너 ---------- */
.videos{padding:78px 0;background:var(--surface)}
.videocard{width:calc((var(--maxw) - 40px - 28px) / 2);max-width:100%}
.videocard__pic{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  aspect-ratio:720/404;background:#0b1b2e;box-shadow:var(--shadow-m);
}
.videocard__pic img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform .45s,opacity .3s}
.videocard:hover .videocard__pic img{transform:scale(1.05);opacity:1}
.videocard__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--brand-strong);
  box-shadow:0 10px 28px rgba(0,0,0,.34);transition:transform .25s,background .25s;
}
.videocard:hover .videocard__play{transform:translate(-50%,-50%) scale(1.1);background:#fff}
.videocard h3{
  margin-top:18px;font-size:17px;font-weight:800;letter-spacing:-.03em;
  color:var(--text);word-break:keep-all;
}
.videocard:hover h3{color:var(--brand)}
.videocard p{margin-top:6px;font-size:13px;color:var(--text-dim)}

/* ---------- 아름다운 기부이야기 (사진만 · 롤링 배너) ---------- */
.alimi{padding:78px 0;background:var(--sky-soft)}
/* 카드 폭은 첨부파일 크기(400px) 그대로. 좁은 화면에서만 줄입니다. */
.alimicard{
  width:400px;max-width:100%;
  border-radius:var(--radius-m);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-s);
}
.alimicard img{
  display:block;width:100%;height:auto;aspect-ratio:400/290;object-fit:cover;
  transition:transform .4s;
}
.alimicard:hover img,.alimicard:focus-visible img{transform:scale(1.05)}
.alimiempty{width:100%;padding:40px 20px;text-align:center;color:var(--text-dim);font-size:14px}
@media (max-width:760px){.alimicard{width:min(400px,84vw)}}

/* ---------- 게시판 미연결 안내 ---------- */
/* 게시판(플라이보드)이 붙어 있지 않을 때, 원래 글이 나올 자리에 대신 나온다.
   롤링 배너 안에 들어가도 한 칸을 통째로 쓰도록 width:100% 를 준다. */
.boardoff{
  width:100%;flex:none;
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
  padding:22px 24px;border-radius:var(--radius-m);
  border:1px dashed var(--line-strong);background:var(--surface);
  color:var(--text-mid);font-size:14px;line-height:1.6;
}
.boardoff svg{flex:none;color:var(--accent-deep)}
.boardoff b{color:var(--text);font-weight:800}
.boardoff span{word-break:keep-all}

/* ---------- 공식 후원 계좌 · 문의 (밝은 패널, 계좌 · 연락처 두 단) ---------- */
.fundbar{padding:78px 0;background:var(--bg-alt)}
.fundbar__panel{
  position:relative;overflow:hidden;border-radius:var(--radius-l);
  background:linear-gradient(160deg,#ffffff 0%,#f4fafd 58%,var(--sky-soft) 100%);
  border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow-m);
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
}
.fundbar__panel::after{
  content:"";position:absolute;right:-70px;bottom:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,116,176,.10),transparent 70%);pointer-events:none;
}
.fundbar__col{position:relative;z-index:1;padding:36px 38px}
.fundbar__col--accounts{border-right:1px solid var(--line)}

.fundbar__eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--brand);
}
.fundbar__col--accounts h2{
  margin-top:12px;font-size:clamp(19px,2.1vw,23px);font-weight:900;
  letter-spacing:-.03em;word-break:keep-all;color:var(--navy);
}
.fundbar__holder{margin-top:10px;font-size:12.5px;color:var(--text-dim)}
.fundbar__holder b{color:var(--text);font-weight:700;font-size:13.5px}

.accounts{margin-top:18px;display:grid;gap:9px}
.account{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;border-radius:var(--radius-s);
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .18s,box-shadow .18s;
}
.account:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(0,116,176,.12)}
.account__bank{
  flex:none;padding:5px 11px;border-radius:999px;
  font-size:12px;font-weight:800;color:#04223e;background:var(--sky);
}
.account__bank--jb{background:#cfeeff}
.account__bank--post{background:#ffe2c2;color:#5d3208}
.account__bank--mg{background:#d3f4e2;color:#0d4a31}
.account__no{
  flex:1;min-width:0;font-size:15px;font-weight:800;letter-spacing:.01em;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.account__copy{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:700;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text-mid);
  transition:background .18s,color .18s,border-color .18s;
}
.account__copy:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.account__copy.is-done{background:#17936a;color:#fff;border-color:transparent}

.fundbar__contacttitle{
  display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;color:var(--text-mid);
}
.fundbar__contacttitle svg{color:var(--brand)}

/* 문의 번호 — 용도별로 나눠 세 번호를 모두 보여 준다 */
.calls{margin-top:16px;display:grid;gap:10px}
.call{
  padding:14px 16px;border-radius:var(--radius-s);
  background:var(--surface);border:1px solid var(--line);
}
.call__label{
  display:block;font-size:12.5px;font-weight:700;color:var(--text-dim);margin-bottom:6px;
}
.call__nums{display:flex;flex-wrap:wrap;gap:4px 14px}
.call__nums a{
  font-size:clamp(20px,2.2vw,25px);font-weight:900;letter-spacing:-.02em;
  color:var(--brand-strong);font-variant-numeric:tabular-nums;
  transition:color .16s;
}
.call__nums a:hover{color:var(--brand)}
/* 번호를 한 상자에 모았을 때 — 한 줄에 하나씩 */
.call--one .call__nums{flex-direction:column;gap:6px}

.fundbar__meta{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.9;color:var(--text-dim);word-break:keep-all;
}
.fundbar__meta a{color:var(--text-mid);text-decoration:underline}
.fundbar__meta a:hover{color:var(--brand)}
.fundbar__cta{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;width:100%;
  justify-content:center;padding:14px 18px;border-radius:999px;
  background:var(--brand);font-size:14.5px;font-weight:800;color:#fff;
  box-shadow:0 8px 20px rgba(0,116,176,.24);
  transition:background .18s,transform .18s;
}
.fundbar__cta:hover{background:var(--brand-strong);transform:translateY(-2px)}

/* ---------- 후원의집 · 후원병원 ---------- */
.support{padding:78px 0 92px;background:var(--surface)}
.support__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:26px;align-items:start}

.supportbox{
  border-radius:var(--radius-l);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-s);overflow:hidden;
}
.supportbox__head{
  display:flex;align-items:center;gap:12px;
  padding:18px 24px;background:linear-gradient(120deg,#e6f3fa,#f2f9fc);
  border-bottom:1px solid var(--line);
}
.supportbox__head h3{flex:1;font-size:17px;font-weight:900;color:var(--brand-strong);letter-spacing:-.03em}
.supportbox__head a{font-size:12.5px;font-weight:700;color:var(--text-dim)}
.supportbox__head a:hover{color:var(--brand)}
.supportbox--hospital .supportbox__head{background:linear-gradient(120deg,#eaf7f1,#f4fbf7)}
.supportbox--hospital .supportbox__head h3{color:#1b7a52}

/* 박스 제목 앞 배지 아이콘 — 2톤(면 + 파낸 부분), 헤드 배경색에 맞춰 파낸다 */
.supportbox__ico{
  flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.7);color:var(--brand-strong);
  --ti-bg:#e9f4fa;
}
.supportbox__ico svg{width:19px;height:19px}
.supportbox--hospital .supportbox__ico{color:#1b7a52;--ti-bg:#ecf8f1}

/* 한식 카테고리(38곳)가 한 칼럼을 통째로 차지하므로 3단이 가장 균형이 좋다.
   4단으로 두면 브라우저 칼럼 밸런싱 결과 마지막 칼럼이 비어버린다. */
.supportcols{
  padding:22px 24px 26px;
  column-count:3;column-gap:26px;
}
.supportcat{break-inside:avoid;margin-bottom:22px}
.supportcat h4{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:800;color:var(--brand-strong);
  padding:7px 12px;border-radius:999px;background:var(--sky-soft);
  margin-bottom:10px;
}
.cat-ico{flex:none;width:14px;height:14px}
.supportcat li a,.supportcat li span{
  display:block;padding:4px 0 4px 11px;position:relative;
  font-size:13px;line-height:1.55;color:var(--text-mid);word-break:keep-all;
  transition:color .16s;
}
.supportcat li a::before,.supportcat li span::before{
  content:"";position:absolute;left:0;top:12px;width:4px;height:4px;border-radius:50%;
  background:var(--line-strong);
}
.supportcat li a:hover{color:var(--brand)}
.supportcat li a:hover::before{background:var(--brand)}

.supportbox--hospital .supportcols{column-count:1;padding:20px 24px 24px}
.supportbox--hospital .supportcat li span::before{background:#8fd0b3}

/* ---------- 반응형 ---------- */
@media (max-width:1140px){
  .mhero{--chrome:141px}                       /* 유틸바가 숨겨진다 (헤더 73 + 바로가기 68) */
  .videocard{width:min(560px,80vw)}
}
@media (max-width:980px){
  .dash__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fundbar__panel{grid-template-columns:1fr}
  .fundbar__col--accounts{border-right:0;border-bottom:1px solid var(--line)}
  .support__grid{grid-template-columns:1fr}
  .supportcols{column-count:2}
  .supportbox--hospital .supportcols{column-count:2}
}
@media (max-width:760px){
  .mhero{--chrome:197px}                       /* 바로가기 바가 2줄로 접힌다 (헤더 73 + 124) */
  .shortcut__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shortcut a{border-left:0;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;padding:12px 10px;gap:9px}
  .shortcut__ico{width:32px;height:32px;border-radius:10px}
  .shortcut__ico svg{width:19px;height:19px}
  .shortcut a:nth-child(-n+2){border-top:0}
  .shortcut a:nth-child(2n){border-left:1px solid rgba(255,255,255,.12)}
  .dash{padding-top:48px}
  .dash__panel{padding:28px 22px 26px}
  .dash__stat{padding:20px 18px 18px}
  .dash__ico{width:38px;height:38px;border-radius:12px;margin-bottom:12px}
  .dash__ico svg{width:20px;height:20px}
  .dash__foot{margin-top:22px;padding-top:18px}
  .dash__more{width:100%;justify-content:center}
  .news,.voices,.videos,.fundbar,.support{padding:56px 0}
  .support{padding-bottom:68px}
  .voice{width:min(400px,84vw);min-height:300px;padding:28px 26px;font-size:18px}
  .voice__quote{font-size:24px}
  .newscard{width:min(280px,72vw)}
  .videocard{width:min(560px,84vw)}
  .fundbar__col{padding:26px 22px}
}
@media (max-width:560px){
  .mhero__vidbtn{right:12px;bottom:12px;width:34px;height:34px}
  .tiles__grid{grid-template-columns:1fr}
  .dash__stats{gap:10px}
  .dash__stat b{font-size:26px}
  .dash__stat small{font-size:11px}
  .dash__sub{font-size:12.5px}
  .supportcols,.supportbox--hospital .supportcols{column-count:1}

  /* 계좌 줄이 좁은 화면에서 잘리지 않도록: 계좌번호는 두 번째 줄로 내리고
     복사 버튼은 아이콘만 남긴다 */
  .account{flex-wrap:wrap;row-gap:8px}
  .account__no{flex-basis:100%;order:3;font-size:13.5px;white-space:normal;overflow:visible;text-overflow:clip}
  .account__copy span{display:none}
  .account__copy{padding:7px;width:32px;justify-content:center}
}

/* ==========================================================================
   기존 게시판(플라이보드) 팝업레이어
   --------------------------------------------------------------------------
   index.php 가 bbs/newwin.inc.php 를 불러 뿌리는 팝업창의 스타일입니다.
   게시판 관리자화면에서 등록한 팝업이 이 마크업으로 나옵니다.
   (게시판이 붙지 않은 서버에서는 해당 요소가 아예 없어 아무 영향 없습니다)
   ========================================================================== */

#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;}
.hd_pops img{max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding: 0;background:#000;color:#fff;text-align:left;position:relative;}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding: 10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject{background:#000;text-align:left}
.hd_pops_footer .hd_pops_close{background:#393939;position:absolute;top:0;right:0}
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}