@charset "utf-8";

/* ==========================================================================
   후원의집 · 후원병원 (sub01/04.php)
   --------------------------------------------------------------------------
   목록 자체는 메인 화면과 같은 .supportbox · .supportcat 을 그대로 씁니다
   (home.css). 이 파일에는 이 화면에만 있는 찾기 · 분류 거르개를 담습니다.
   ========================================================================== */

/* ---------- 찾기 · 분류 거르개 ---------- */
.hsbar{
  display:flex;flex-direction:column;gap:16px;
  margin-bottom:18px;
  /* 주소의 # 로 분류를 골라 들어왔을 때 위쪽 고정 머리띠에 가리지 않게 */
  scroll-margin-top:calc(var(--header-h) + 20px);
}

.hssearch{
  position:relative;display:flex;align-items:center;max-width:420px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);
  transition:border-color .16s,box-shadow .16s;
}
.hssearch:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,116,176,.13)}
.hssearch__ico{display:grid;place-items:center;width:44px;flex:none;color:var(--text-dim)}
.hssearch input{
  flex:1;min-width:0;padding:13px 4px;border:0;background:none;
  font:inherit;font-size:15px;color:var(--text);
}
.hssearch input:focus{outline:none}
.hssearch input::-webkit-search-cancel-button{display:none}
.hssearch__clear{
  flex:none;margin-right:6px;padding:8px 14px;border:0;border-radius:999px;cursor:pointer;
  background:var(--bg-alt);color:var(--text-mid);font:inherit;font-size:13px;font-weight:700;
}
.hssearch__clear:hover{background:var(--line);color:var(--text)}

.hschips{display:flex;flex-wrap:wrap;gap:8px}
.hschip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:9px 15px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);
  font:inherit;font-size:13.5px;font-weight:700;color:var(--text-mid);
  transition:border-color .16s,background .16s,color .16s;
}
.hschip em{
  font-style:normal;font-size:11.5px;font-weight:800;color:var(--text-dim);
  padding:1px 7px;border-radius:999px;background:var(--bg-alt);
  font-variant-numeric:tabular-nums;
}
.hschip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
/* 고른 칩 안의 숫자 배지 — 예전에는 흰색을 22% 얹어 '밝은 칸'으로 만들었는데,
   그 위의 흰 글자가 3.4:1 밖에 되지 않았습니다(기준 4.5:1). 같은 두께로
   검정을 얹어 '어두운 칸'으로 바꾸니 7:1 을 넘습니다. 파랑·초록 칩 모두
   같은 규칙을 씁니다. */
.hschip.is-on em{background:rgba(0,0,0,.22);color:#fff}
.hschip--hospital.is-on{background:#1b7a52;border-color:#1b7a52}

/* 마우스가 있는 기기에서만 hover 를 걸고, 고른 칩(.is-on)에는 걸지 않습니다.
   ------------------------------------------------------------------
   아이폰에서 '후원병원'을 고르면 글씨가 사라지는 문제가 있었습니다.
   iOS 는 손가락으로 한 번 누른 자리에 :hover 가 그대로 남습니다. 그런데
   .hschip--hospital:hover 가 글자를 배경과 같은 초록(#1b7a52)으로 칠하고,
   .hschip.is-on 과 우선순위가 같으면서 파일에서 뒤에 있어 이겼습니다.
   그래서 초록 글씨가 초록 배경에 묻혀 안 보이고, 흰색 규칙을 따로 받는
   숫자 배지만 남았습니다.                                              */
@media (hover:hover) and (pointer:fine){
  .hschip:not(.is-on):hover{border-color:var(--brand);color:var(--brand)}
  .hschip--hospital:not(.is-on):hover{border-color:#1b7a52;color:#1b7a52}
}

.hscount{
  margin:0 0 20px;font-size:13.5px;font-weight:700;color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}

/* ---------- 목록 ---------- */
.hsgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:26px;align-items:start}
.hsgrid .supportbox{margin:0}
.hsgrid .supportcols{column-count:3}
.hsgrid .supportbox--hospital .supportcols{column-count:1}

/* 걸러진 것 감추기 — 자바스크립트가 붙일 표시 */
.hsgrid [hidden],
.hsgrid li[hidden]{display:none !important}

.hsnone,.hsempty{
  margin:0;padding:44px 20px;text-align:center;border-radius:var(--radius-m);
  background:var(--bg-alt);color:var(--text-dim);font-size:14px;word-break:keep-all;
}


.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}

/* ---------- 목록 상자 ----------
   메인 화면과 같은 부품(.supportbox · .supportcat)입니다. 메인은 home.css
   에서 이 스타일을 받지만 이 화면은 home.css 를 싣지 않으므로, 필요한
   부분만 여기에 옮겨 두었습니다. 두 곳의 모양은 같습니다. */
.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--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);
}
.supportbox__ico svg{width:19px;height:19px;display:block;overflow:visible}
.supportbox__ico .si-fill{fill:var(--sky)}
.supportbox__ico .si-line{
  fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.supportbox__ico .si-knock{fill:var(--navy)}
.supportbox--hospital .supportbox__ico{color:#1b7a52}

.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;
}
.supportcat ul{list-style:none;margin:0;padding:0}
.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 .supportcat li span::before,
.supportbox--hospital .supportcat li a::before{background:#8fd0b3}

/* ---------- 맨 아래 안내 ---------- */
.hsnote{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:34px;padding:24px 28px;border-radius:var(--radius-m);
  background:var(--bg-alt);border:1px solid var(--line);
}
.hsnote p{font-size:14.5px;color:var(--text-mid);word-break:keep-all;margin:0}
.hsnote p b{display:block;color:var(--text);font-size:15.5px;margin-bottom:4px}
.hsnote a[href^="tel:"]{color:var(--brand-strong);font-weight:800;text-decoration:underline}

@media (max-width:980px){
  .hsgrid{grid-template-columns:1fr}
  .hsgrid .supportcols{column-count:2}
}
@media (max-width:620px){
  .hsgrid .supportcols{column-count:1}
  .hssearch{max-width:none}
  .hsnote{padding:20px 18px}
  .hsnote .btn{width:100%;justify-content:center}
}

/* ---------- 내 주변 후원의집 찾기 바로가기 (sub01/near.php) ---------- */
.hsnear{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:14px 18px;border-radius:var(--radius-m);
  background:var(--sky-soft);color:var(--navy);text-decoration:none;max-width:520px;border:1px solid rgba(0,116,176,.18)}
.hsnear:hover{background:#d4e9f4;color:var(--navy)}
.hsnear:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.hsnear__ico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--brand);color:#fff}
.hsnear__txt{flex:1;display:flex;flex-direction:column;gap:2px}
.hsnear__txt b{font-size:16.5px}
.hsnear__txt span{font-size:13.5px;color:var(--text-mid)}
.hsnear__go{font-size:26px;line-height:1;color:var(--brand)}