/* sites.css — chch.kr/sites 안내 쪽 전용.
   색은 --chch-* 토큰만 씁니다. 이 쪽에만 필요한 값은 .sites 안의 --sites-* 로 둡니다(:root 에 올리지 않음). */

.sites{
  --sites-gutter:16px;                      /* 양옆 여백 */
  --sites-max:1200px;                       /* 본문 최대 폭 */
  --sites-nav-h:61px;                       /* 붙박이 바로가기 높이 — 구역 앵커가 그 밑으로 오도록 */
  --sites-mark:var(--chch-link-hover);      /* 구역 표지·머리 꼭지의 진홍 */
  --sites-shelf:var(--chch-text);           /* 구역 머리 아래 '서가 선반' 굵은 줄 */
  --sites-focus:var(--chch-link);           /* 키보드 초점 고리 */
  --sites-nav-bg:var(--chch-bg-start);      /* 바로가기 띠 바탕(반투명은 아래 @supports) */
  --sites-serif:"Nanum Myeongjo",serif;     /* 제목·이름 */
  --sites-sans:"Nanum Gothic",sans-serif;   /* 본문 */
  font-family:var(--sites-sans);
  color:var(--chch-text);
  overflow-x:hidden;
  overflow-x:clip;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
@supports (background:color-mix(in srgb,red,blue)){
  .sites{--sites-nav-bg:color-mix(in srgb,var(--chch-bg-start) 90%,transparent)}
}
.sites *,.sites *::before,.sites *::after{box-sizing:border-box}
.sites [hidden]{display:none!important}
.sites a:focus-visible,.sites input:focus-visible{outline:3px solid var(--sites-focus);outline-offset:3px}

/* ── 머리 ───────────────────────── */
.sites-head{max-width:var(--sites-max);margin:0 auto;padding:40px var(--sites-gutter) 28px}
.sites-kicker{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--sites-mark)}
.sites-title{margin:10px 0 14px;font-family:var(--sites-serif);font-weight:800;font-size:clamp(30px,7.4vw,56px);line-height:1.22;letter-spacing:-.02em;color:var(--chch-text)}
.sites-lede{margin:0;max-width:32em;font-size:16px;line-height:1.75;color:var(--chch-text-soft);text-wrap:pretty}
.sites-facts{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--chch-text-muted)}

/* 찾기 — JS 가 있을 때만 보임(html.js). 없으면 브라우저 찾기로 충분 */
.sites-find{display:none;margin-top:24px;max-width:28rem;position:relative}
.js .sites-find{display:block}
.sites-find label{display:block;margin-bottom:8px;font-size:14px;font-weight:700;color:var(--chch-text-soft)}
.sites-find-box{position:relative}
.sites-find svg{position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--chch-text-muted);pointer-events:none}
.sites-find input{display:block;width:100%;height:48px;padding:0 16px 0 44px;font:inherit;font-size:16px;color:var(--chch-text);background:var(--chch-surface);border:1px solid var(--chch-border-strong);border-radius:999px;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.sites-find input::placeholder{color:var(--chch-text-muted)}
.sites-find input:hover{border-color:var(--chch-text-muted)}
.sites-find input:focus{border-color:var(--chch-link)}
.sites-status{min-height:1.5em;margin:8px 0 0;font-size:14px;color:var(--chch-text-muted)}

/* ── 구역 바로가기(붙박이) ───────── */
.sites-nav{position:sticky;top:0;z-index:5;background:var(--sites-nav-bg);border-bottom:1px solid var(--chch-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sites-nav ul{display:flex;gap:8px;max-width:var(--sites-max);margin:0 auto;padding:8px var(--sites-gutter);list-style:none}
.sites-nav li{flex:1 1 0;min-width:0}
.sites-nav a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 10px;border:1px solid var(--chch-chip-border);border-radius:999px;background:var(--chch-chip-bg);color:var(--chch-chip-text);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.sites-nav a:hover{border-color:var(--chch-border-strong);background:var(--chch-surface-hover);color:var(--chch-link)}
.sites-nav a:active{background:var(--chch-surface-strong)}
.sites-nav a.is-empty{opacity:.45}
.sites-nav-n{font-weight:400;color:var(--chch-text-muted)}
.sites-nav .long{display:none}

/* ── 구역(서가 한 칸) ────────────── */
.sites-shelf{max-width:var(--sites-max);margin:0 auto;padding:40px var(--sites-gutter) 8px;scroll-margin-top:var(--sites-nav-h)}
.sites-shelf-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:12px;padding-bottom:12px;border-bottom:3px solid var(--sites-shelf)}
.sites-shelf-kicker{grid-column:1/-1;margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--sites-mark)}
.sites-shelf-title{margin:0;font-family:var(--sites-serif);font-weight:800;font-size:26px;line-height:1.3;letter-spacing:-.01em;color:var(--chch-text)}
.sites-shelf-count{margin:0;font-family:var(--sites-serif);font-weight:700;font-size:16px;color:var(--chch-text-muted);white-space:nowrap}

.sites-list{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}

/* ── 카드 ───────────────────────── */
.site{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;align-items:start;height:100%;min-height:44px;padding:14px 14px 14px 16px;background:var(--chch-card-bg);border:1px solid var(--chch-card-border);border-radius:12px;box-shadow:var(--chch-shadow-card);color:var(--chch-card-text);text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s,background .18s}
.site-no{padding-top:4px;font-family:var(--sites-serif);font-weight:700;font-size:13px;line-height:1;color:var(--chch-text-muted);font-variant-numeric:tabular-nums}
.site-name{margin:0;font-family:var(--sites-serif);font-weight:800;font-size:18px;line-height:1.38;color:var(--chch-card-heading);transition:color .18s}
.site-topics{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:var(--chch-card-text);text-wrap:pretty}
.site-go{align-self:center;width:20px;height:20px;color:var(--chch-text-muted);transition:transform .18s,color .18s}
.site:hover{border-color:var(--chch-border-strong);background:var(--chch-surface-hover);box-shadow:var(--chch-shadow-strong);transform:translateY(-2px)}
.site:hover .site-name{color:var(--chch-link)}
.site:hover .site-go{color:var(--sites-mark);transform:translateX(3px)}
.site:active{transform:translateY(0);box-shadow:var(--chch-shadow);background:var(--chch-surface-strong)}

/* 사람 구역 — 상자 대신 줄 긋는 목록. 말씀 구역과 리듬을 달리함 */
.sites-list--people{gap:0;margin-top:0}
.sites-list--people .site{padding:16px 8px 16px 4px;background:transparent;border:0;border-bottom:1px solid var(--chch-border);border-radius:0;box-shadow:none}
.sites-list--people .site-name{font-size:20px}
.sites-list--people .site:hover{background:var(--chch-surface-hover);border-radius:10px;border-bottom-color:transparent;box-shadow:none;transform:none}
.sites-list--people .site:hover .site-no{color:var(--sites-mark)}
.sites-list--people .site:active{background:var(--chch-surface-strong)}

/* ── 꼬리 ───────────────────────── */
.sites-foot{max-width:var(--sites-max);margin:0 auto;padding:40px var(--sites-gutter) 56px}
.sites-empty{margin:0 0 24px;padding:20px;border:1px dashed var(--chch-border-strong);border-radius:12px;font-size:15px;line-height:1.6;color:var(--chch-text-soft)}
.sites-top{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border:1px solid var(--chch-border-strong);border-radius:999px;color:var(--chch-link);font-size:14px;font-weight:700;text-decoration:none;transition:background .15s,color .15s}
.sites-top svg{width:16px;height:16px}
.sites-top:hover{background:var(--chch-surface-hover);color:var(--chch-link-hover)}
.sites-top:active{background:var(--chch-surface-strong)}

/* ── 640+ : 말씀 카드 두 줄 ─────── */
@media (min-width:640px){
  .sites-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sites-list--people{grid-template-columns:minmax(0,1fr);gap:0}
  .sites-list:not(.sites-list--people) .site-topics{min-height:3.2em} /* 꼭지 두 줄 자리 — 카드 높이 고르게 */
}

/* ── 768+ : 긴 이름, 사람 목록은 이름|꼭지 나란히 ── */
@media (min-width:768px){
  .sites{--sites-gutter:32px}
  .sites-head{padding-top:64px}
  .sites-nav ul{justify-content:flex-start}
  .sites-nav li{flex:0 0 auto}
  .sites-nav a{padding:0 18px}
  .sites-nav .short{display:none}
  .sites-nav .long{display:inline}
  .sites-shelf{padding-top:56px}
  .sites-shelf-title{font-size:30px}
  .sites-list--people .site{padding:20px 12px 20px 8px}
  .sites-list--people .site-body{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);column-gap:24px;align-items:baseline}
  .sites-list--people .site-topics{margin-top:0;font-size:15px}
}

/* ── 1024+ : 구역 머리를 왼쪽 기둥에 세움(서가 칸막이) ── */
@media (min-width:1024px){
  .sites-shelf{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:48px;padding-top:72px}
  .sites-shelf-head{position:sticky;top:calc(var(--sites-nav-h) + 24px);align-self:start;grid-template-columns:minmax(0,1fr);row-gap:8px;padding:16px 0 0;border-bottom:0;border-top:3px solid var(--sites-shelf)}
  .sites-shelf-kicker{margin:0}
  .sites-shelf-title{font-size:28px}
  .sites-list{margin-top:0}
  .sites-list--people .site:first-child{padding-top:16px}
}
@media (min-width:1280px){
  .sites-shelf{grid-template-columns:260px minmax(0,1fr);column-gap:64px}
  .sites-list:not(.sites-list--people){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── 다크 — 선은 줄이고 면의 밝기로 층을 나눔 ── */
html[data-theme="dark"] .sites{
  --sites-shelf:var(--chch-border-strong);  /* 밝은 굵은 줄은 어둠에서 눈을 찌름 → 한 단 낮춤 */
}
html[data-theme="dark"] .sites-title,
html[data-theme="dark"] .sites-shelf-title{font-weight:700}
html[data-theme="dark"] .site{border-color:transparent;background:var(--chch-card-bg)}
html[data-theme="dark"] .site:hover{background:var(--chch-surface-hover);border-color:var(--chch-border-strong);box-shadow:var(--chch-shadow-strong)}
html[data-theme="dark"] .site:active{background:var(--chch-surface-strong)}
html[data-theme="dark"] .sites-list--people .site{background:transparent;border-bottom-color:var(--chch-border)}
html[data-theme="dark"] .sites-list--people .site:hover{background:var(--chch-surface-hover);border-color:transparent}
html[data-theme="dark"] .sites-nav a{border-color:transparent}
html[data-theme="dark"] .sites-nav a:hover{border-color:var(--chch-border-strong)}
html[data-theme="dark"] .sites-find input{background:var(--chch-surface-soft)}

@media (prefers-reduced-motion:reduce){
  .sites *{transition:none!important}
  .site:hover{transform:none}
}

/* 바탕 — 안내 쪽은 홀로 서는 쪽이라 바탕색을 제가 깐다 */
body{margin:0;background:var(--chch-bg-start);color:var(--chch-text)}

/* ── 교회들 홈으로 ──────────────────────────────────────
   /sites 는 홀로 서는 쪽이라 머리에도 꼬리에도 돌아갈 자리가 없었다.
   머리의 것은 「되돌아가기」(왼쪽 화살표), 꼬리의 것은 「집으로」(집 모양)다. */
.sites-home{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-8px 0 4px -8px;padding:0 10px;border-radius:999px;color:var(--chch-text-muted);font-size:14px;font-weight:700;text-decoration:none;transition:background .15s,color .15s}
.sites-home svg{width:16px;height:16px}
.sites-home:hover{background:var(--chch-surface-hover);color:var(--chch-link)}
.sites-home:active{background:var(--chch-surface-strong)}

.sites-foot-links{display:flex;flex-wrap:wrap;gap:10px}
.sites-top--home{color:var(--chch-text-soft)}
.sites-top--home:hover{color:var(--chch-link)}
@media (max-width:420px){
  /* 좁은 화면에서는 두 단추가 가로를 반씩 나눠 쓰는 것보다 한 줄씩이 누르기 쉽다 */
  .sites-foot-links{flex-direction:column;align-items:flex-start}
  .sites-foot-links .sites-top{width:100%;justify-content:center}
}