/*
 * 한가지 홈페이지 스타일 — 디자인 기준은 /Users/cotton/Desktop/claudedoc/DESIGN.md(Stripe 풍). 앱(hangajiapp/src/styles.css)과
 * 같은 옮김 규칙을 따른다(hangajiapp CLAUDE.md '스타일'):
 *   · 색은 아래 :root 변수로만 — 화면 규칙에 hex 를 적지 않는다. 다크는 DESIGN.md 에 값이 없어 color-mix 로 파생한다.
 *   · 한국어 본문·작은 글자에 300 을 쓰지 않는다(한글 획이 흐려진다). 큰 제목(.display*)은 **굵게 700** + 음수 자간(2026-10-31 사용자 결정 — 아래 --w-display).
 *   · 단추는 알약, 높이 44px(터치 타깃). 색을 채운 단추는 한 띠에 하나.
 *   · 글꼴은 **Hangaji Sans** 하나(2026-10-31 — Pretendard 를 이 페이지 글자만 남겨 자른 것, /site/fonts/, OFL). 앱(/m/)은 여전히 시스템 글꼴이다.
 *     바깥 글꼴 서비스는 쓰지 않는다 — CSP 가 font-src 'self' 만 연다. 문구를 고치면 tools/subset_font.py 로 다시 자른다(README '글꼴').
 *   · 간격은 부모의 gap 으로 — 음수 마진으로 맞추지 않는다.
 */

/* 글꼴(2026-10-31, 요청 "디자이너 입장에서 글씨체를 기획하고 디자인 구현해줘").
   왜 웹폰트인가 — 시스템 글꼴이면 OS 마다 다른 글꼴이 나온다(맥·iOS 애플 산돌고딕 · 윈도 맑은 고딕 · 안드로이드 Noto). 맑은 고딕에는 300 이 없어
   DESIGN.md 의 '얇은 큰 제목' 이 윈도에서 보통 굵기로 나왔고, 숫자 폭도 OS 마다 달라 tnum 이 고르지 않았다.
   왜 Pretendard 인가 — 라틴 부분이 Inter 기반이다(DESIGN.md 가 Sohne 대신 권하는 글꼴). 한글과 라틴의 굵기·높이가 한 벌로 맞는다.
   ⚠️ 이름은 'Hangaji Sans' — Pretendard 는 OFL 예약 글꼴명이라 잘라낸 수정본에 그 이름을 쓸 수 없다(tools/subset_font.py).
   swap — 60KB 라 금방 오지만, 오기 전에도 글자는 시스템 글꼴로 바로 보인다(빈 화면 없이). <head> 의 preload 가 먼저 받는다. */
@font-face {
  font-family: 'Hangaji Sans';
  src: url('/site/fonts/hangaji-sans.woff2?v=17') format('woff2-variations'),
       url('/site/fonts/hangaji-sans.woff2?v=17') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* DESIGN.md colors */
  --primary: #533afd;
  /* 색을 채운 단추의 바탕. 라이트에서는 primary 그대로, 다크에서는 갈라진다(아래 다크 주석). */
  --primary-fill: var(--primary);
  --primary-press: #2e2b8c;
  --primary-deep: #4434d4;
  --primary-subdued: #b9b9f9;
  --brand-dark: #1c1e54;
  --ink: #0d253d;
  --ink-2: #273951;
  --muted: #64748d;
  /* 옅게 물든 바탕(.mini) 위의 흐린 글자 — muted 를 ink 쪽으로 한 단계. :root 에서 풀리므로 다크에서는 다크의 muted·ink 로 다시 섞인다. */
  --muted-on-tint: color-mix(in srgb, var(--muted) 85%, var(--ink));
  --on-primary: #ffffff;
  --bg: #ffffff;
  --bg-soft: #f6f9fc;
  --cream: #f5e9d4;
  --line: #e3e8ee;
  --line-input: #a8c3de;       /* {colors.hairline-input} — 입력칸 테두리는 카드 hairline 보다 한 단계 짙다 */
  /* 소셜 로그인 단추의 회사 색(로그인·가입 페이지) — 각 사 지침이 정한 값이라 토큰으로만 둔다. 구글은 흰 바탕 + 회색 선. */
  --kakao: #fee500;
  --naver: #03c75a;
  --facebook: #1877f2;
  --google-line: #747775;
  --apple: #000000;
  --on-apple: #ffffff;
  --card: #ffffff;
  --shadow-1: rgba(0, 55, 112, 0.08) 0 1px 3px;
  --shadow-2: rgba(0, 55, 112, 0.08) 0 8px 24px, rgba(0, 55, 112, 0.04) 0 2px 6px;
  /* 메시 — DESIGN.md 의 크림·셔벗·라벤더·인디고·루비 */
  --mesh-1: #f5e9d4;
  --mesh-2: #ffb38a;
  --mesh-3: #b9b9f9;
  --mesh-4: #533afd;
  --mesh-5: #ea2261;
  /* 히어로 사진 위 베일 — 왼쪽(글자 칸)은 바탕으로 덮고 오른쪽으로 걷힌다. 좁은 화면은 아래(목업 뒤)로 걷힌다 — 아래 미디어 쿼리. */
  --hero-veil: linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 90%, transparent) 0%,
    color-mix(in srgb, var(--bg) 85%, transparent) 50%,
    color-mix(in srgb, var(--bg) 20%, transparent) 78%,
    transparent 100%);
  --hero-dim: none;

  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --font: 'Hangaji Sans', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;

  /* 글자 체계 — 크기 9단(그전에는 13가지가 그때그때였다). DESIGN.md 의 역할 이름을 따르되 한글에 맞춰 고쳤다:
       · 자간은 em — px 로 박으면 크기를 바꿀 때마다 다시 계산해야 한다. 한글은 라틴보다 덜 조인다(Sohne -1.4px@56 = -0.025em 을 큰 제목에만).
       · 행간은 한글 기준 — 본문 1.65(라틴 1.4 그대로면 받침이 윗줄에 닿을 듯 빽빽하다), 제목 1.15~1.3.
       · 굵기 넷 — 400 본문 · 500 단추·메뉴 · 600 카드 제목·강조 · 700 큰 제목과 브랜드 글자. */
  --fs-display: 44px;   /* {typography.display-xxl} 히어로 — 52 에서 한 단계 줄였다(2026-10-31, 요청 "글자크기와 여백을 더 줄여 줘") */
  --fs-section: 28px;   /* {typography.display-lg} 띠 제목 */
  --fs-heading: 18px;   /* {typography.heading-md} 띠 안의 소제목 */
  --fs-title: 16px;     /* 카드 제목·질문·리드 */
  --fs-button: 14px;    /* 단추 — 본문과 같은 크기(한 단계 줄인 뒤 14) */
  --fs-small: 13px;     /* 작은 단추·칩 */
  --fs-body: 14px;      /* {typography.body-md} 는 15 — 요청으로 14(앱 본문과 같다). ⚠️ 이 아래로는 내리지 않는다(한글 가독) */
  --fs-caption: 12px;   /* {typography.caption} 보조·바닥글 — 400 이라 12 까지는 읽힌다 */
  --fs-micro: 11px;     /* 미니 화면 본문(장식) */
  --fs-nano: 10px;      /* 미니 화면 칩 — 장식(aria-hidden)에만 */
  --tr-display: -0.03em;   /* 굵은 획은 글자 사이를 더 채워 보여 얇을 때(-0.025em)보다 한 단계 더 조인다 */
  --tr-section: -0.025em;
  --tr-tight: -0.01em;
  --lh-display: 1.15;
  --lh-heading: 1.3;
  --lh-body: 1.6;
  /* 큰 제목 굵기 — **700**(2026-10-31, 요청 "이 글씨체도 굵은 글씨체로 수정해줘" — 히어로와 띠 제목을 짚은 캡처).
     DESIGN.md 는 300(얇게)이 브랜드라 하지만("Don't bump display weight above 300"), 한글 큰 제목은 얇으면 힘이 빠져 보인다는 사용자 판단이 이긴다.
     ⚠️ 다시 얇게 돌리지 말 것. 카드 제목(600)보다 한 단계 위라 위계는 그대로 선다. 다크도 같은 값 — 얇을 때 따로 두던 350 은 걷었다. */
  --w-display: 700;

  /* 누르는 것의 크기 — 한 벌(2026-10-31, 요청 "글자크기와 버튼의 padding 의 크기를 화면 전체의 조화에 맞게").
       · 단추(.btn)          44px · 글자 15 · 안쪽 8px 18px — 머리줄·폼·띠 어디서나 같다
       · 작은 단추(.btn-sm)  36px · 글자 14 · 안쪽 6px 14px — 목록 줄의 보조 동작(칩과 같은 높이·글자). 손가락 화면에서는 44
       · 칩(.chip)           36px · 글자 14
       · 입력칸(.auth-input) 44px · 글자 15 — 단추와 같은 높이라 나란히 서도 어긋나지 않는다(그전 48 은 칩·단추 사이에서 혼자 컸다) */
  --ctl-h: 40px;        /* 손가락 화면(≤767px)에서는 44 — 아래 미디어 쿼리 */
  --ctl-pad: 6px 16px;
  --ctl-sm-h: 32px;
  --ctl-sm-pad: 4px 12px;
  /* 여백도 한 벌 — 띠 안팎·카드 안·카드 사이. 2026-10-31 요청으로 한 단계 줄였다(띠 88→64, 카드 28→20, 사이 16→12). */
  --sp-band: 64px;
  --sp-band-gap: 28px;
  --sp-card: 20px;
  --sp-grid: 12px;
  --head-h: 57px;       /* 머리줄 56 + 밑선 1 — sticky·화면 높이 계산이 본다 */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 다크의 보라는 **두 역할로 가른다**(2026-10-31 실측). 하나로 두면 어느 쪽이든 모자란다 — 처음 값 #7b6bff 는
       흰 글자를 얹으면 3.9:1, 카드 위 글자로 쓰면 3.83:1 이었다('교회 찾아보기' 3.39:1, 단계 번호 3.86:1).
         --primary      글자·테두리·링크(짙은 카드 위) — #a99fff: 카드 6.46 · 바탕 7.8
         --primary-fill 색을 채운 단추의 바탕(흰 글자) — #6352f0: 흰 글자 5.26 · 바탕과 3.43(단추 윤곽 3:1 이상) */
    --primary: #a99fff;
    --primary-fill: #6352f0;
    --primary-press: color-mix(in srgb, var(--primary-fill) 80%, #000);
    --primary-deep: #c4bcff;
    --ink: #e6edf5;
    --ink-2: #c5d0dc;
    --muted: #93a2b5;
    --bg: #0b1726;
    --bg-soft: color-mix(in srgb, var(--bg) 88%, #fff);
    --card: color-mix(in srgb, var(--bg) 93%, #fff);
    --cream: color-mix(in srgb, #f5e9d4 14%, var(--bg));
    --line: color-mix(in srgb, var(--bg) 78%, #fff);
    --line-input: color-mix(in srgb, var(--bg) 62%, #fff);
    --apple: #ffffff;            /* 짙은 바탕에서 Apple 단추는 흰 바탕·검은 심벌(Apple 지침, 앱과 같다) */
    --on-apple: #000000;
    --primary-subdued: color-mix(in srgb, var(--primary) 26%, var(--bg));
    --shadow-1: rgba(0, 0, 0, 0.35) 0 1px 3px;
    --shadow-2: rgba(0, 0, 0, 0.45) 0 8px 24px, rgba(0, 0, 0, 0.25) 0 2px 6px;
    /* 밝은 초록 사진이 짙은 화면에서 혼자 튀지 않게 한 겹 누른다. */
    --hero-dim: linear-gradient(color-mix(in srgb, var(--bg) 40%, transparent), color-mix(in srgb, var(--bg) 40%, transparent));
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
/* 맥의 서브픽셀 렌더링은 짙은 바탕의 밝은 글자를 굵고 번지게 그린다 — 다크에서만 그레이스케일로. */
@media (prefers-color-scheme: dark) {
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

/* 한국어 줄바꿈 — 어절로 끊고, 공백 없는 긴 낱말이 넘칠 때만 아무 데서나(hangajiapp CLAUDE.md). 짝으로 준다. */
h1, h2, h3, p, li, summary, .lead, .mock-name, .mock-fact, .step-body, .hub-band-title, .hub-recent-title, .el-cands, .vote-note, .vote-option-name, .el-rname b, .el-mode-text span, .el-mode-warn, .el-no-ballot, .el-dialog-sub, .inq-mail, .inq-consent .auth-hint, .ch-name, .ch-meta, .ch-row dd, .ch-node-name, .doc-upcoming-row p, .ch-pitch p, .ms-name, .ms-hint, .ms-now, .ms-result-name b, .ms-result-meta, .ms-picked-text, .ms-warn li, .ms-ok, .ms-flow li, .ch-map-note, .ch-pin b {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
img { display: block; }
/* hidden 속성이 이긴다 — .store-note 처럼 display 를 준 요소는 브라우저 기본(display:none)이 밀려 hidden 이어도 보였다(2026-10-31 §8 하네스: 교단·노회 줄). */
[hidden] { display: none !important; }

.num { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }
@media (max-width: 480px) { .wrap { padding: 0 16px; } }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 20;
  padding: 10px 16px; border-radius: 9999px; background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-2);
}
.skip:focus { top: 12px; }

/* ── 단추 — {button-primary-pill} / {button-secondary}. 높이 44px. ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ctl-h); padding: var(--ctl-pad);
  border-radius: 9999px; border: 1px solid transparent;
  font-size: var(--fs-button); font-weight: 500; line-height: 1; letter-spacing: var(--tr-tight);
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary-fill); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-deep); }
.btn-primary:active { background: var(--primary-press); }
@media (prefers-color-scheme: dark) {
  /* 다크의 primary-deep 은 밝은 글자색이라 바탕으로 쓰면 흰 글자가 사라진다 — 채움색을 한 단계 밝힌다. */
  .btn-primary:hover { background: color-mix(in srgb, var(--primary-fill) 88%, #fff); }
}
.btn-secondary { background: var(--card); color: var(--primary); border-color: var(--primary); }
.btn-secondary:hover { background: color-mix(in srgb, var(--primary) 8%, var(--card)); }

.eyebrow { color: var(--primary); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.01em; }
.lead { color: var(--ink-2); font-size: var(--fs-title); line-height: var(--lh-body); }

/* 큰 제목 — DESIGN.md display: 얇게 + 음수 자간. 한글이 흐려지지 않을 크기에서만 300. */
.display {
  font-size: var(--fs-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--tr-display);
}
.display-sm {
  font-size: var(--fs-section); font-weight: var(--w-display); line-height: var(--lh-heading); letter-spacing: var(--tr-section);
}
/* 큰 제목은 줄 길이를 고르게(2026-10-31) — 그대로 두면 "…찾을 수 / 있어요" 처럼 끝 낱말 하나만 다음 줄로 떨어진다. 안 되는 브라우저는 그냥 지금처럼. */
.display, .display-sm, .auth-aside-title, .auth-card-title { text-wrap: balance; }
.heading { font-size: var(--fs-heading); font-weight: 600; line-height: var(--lh-heading); letter-spacing: var(--tr-tight); }
@media (max-width: 767px) {
  /* DESIGN.md 'display drops 56 → 36px'. 작아질수록 덜 조인다. */
  :root { --fs-display: 32px; --fs-section: 24px; --tr-display: -0.025em; --tr-section: -0.02em; --ctl-h: 44px; --ctl-sm-h: 36px; --sp-band: 48px; --sp-band-gap: 24px; }
  .lead { font-size: var(--fs-button); }
}

/* ── 머리줄 — {nav-bar-on-mesh}. 메시 위에 떠 있고 스크롤하면 바탕이 따라온다. ────────────── */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.nav-row { display: flex; align-items: center; gap: 20px; min-height: 56px; }
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--ink); font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.02em;   /* 브랜드 글자 */
}
.nav-brand:hover { text-decoration: none; }
.nav-brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--ink-2); font-size: var(--fs-body); font-weight: 500; border-radius: 9999px;
}
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); text-decoration: none; }
@media (max-width: 767px) {
  .nav-links { display: none; }      /* 한 장짜리라 모바일에서는 띠를 내려 보면 된다 — 햄버거를 두지 않는다(스크립트 없음) */
  .nav-cta { margin-left: auto; }
}

/* ── 히어로 — 목장 사진 배경(2026-10-31, 요청 "이 이미지를 빨간 영역의 배경이미지로 넣어 줘") ────────────────────────────
   그전에는 DESIGN.md 의 그라디언트 메시(흐린 타원 SVG)였다. 사진은 /site/hero-pasture.jpg(사용자가 준 1024×338 — 넓은 화면에서는 조금 확대된다;
   더 큰 원본이 오면 같은 이름으로 갈아 끼우고 ?v= 를 올린다).
   ⚠️ 사진 위 글자는 **베일**(--hero-veil, 바탕색을 반투명으로 덮는 그라디언트)이 읽히게 한다. 글자 칸(왼쪽 ~48%)은 바탕 90~82% 로 덮어
   사진이 비치기만 하고, 오른쪽(목업 카드 뒤)으로 갈수록 걷혀 사진이 보인다. 베일을 걷으면 녹색 위 남색 글자가 4.5:1 을 밑돈다.
   색이 var(--bg) 에서 나오므로 다크에서는 짙은 베일이 된다(:root 에서 풀린다). 다크는 사진 전체를 한 겹 더 누른다(--hero-dim). */
.hero {
  position: relative; overflow: hidden; padding: 56px 0 48px;   /* 아래 48px — 목업 카드 밑으로 사진이 조금 보이게 */
  background: var(--hero-veil), var(--hero-dim), url('/site/hero-pasture.jpg?v=1') center 62% / cover no-repeat;
}
/* 사진 아래쪽을 바탕으로 녹인다 — 다음 띠와의 경계가 칼로 자른 듯 끊기지 않게. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center;
}
.hero-text { display: flex; flex-direction: column; gap: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.store-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-caption); }   /* 사진 위라 muted 는 3.22:1 이었다(2026-10-31 사진 픽셀로 계산) — 한 단계 진하게 */
.tag {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px;
  border-radius: 9999px; background: var(--primary-subdued); color: var(--primary-press);
  font-size: var(--fs-caption); font-weight: 600;
}
@media (prefers-color-scheme: dark) { .tag { color: var(--ink); } }

@media (max-width: 899px) {
  /* 한 줄로 쌓이면 글자가 위, 목업이 아래다 — 베일을 세로로: 글자 칸은 덮고 목업 뒤로 걷힌다. */
  :root { --hero-veil: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 90%, transparent) 0%,
    color-mix(in srgb, var(--bg) 84%, transparent) 55%,
    color-mix(in srgb, var(--bg) 35%, transparent) 100%); }
  .hero { padding: 36px 0 36px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* 목업 — {card-dashboard-mockup}: 12px · Level 2. 실제 앱의 '옛 교우 찾기' 한 화면을 흉내 낸다. */
.mock {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2); padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.mock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mock-title { font-size: var(--fs-body); font-weight: 600; }
.mock-count { color: var(--muted); font-size: var(--fs-caption); }
.mock-count b { color: var(--ink); font-weight: 600; }
.mock-list { display: flex; flex-direction: column; }
.mock-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--line);
}
.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-body); font-weight: 600; color: var(--on-primary);
}
/* 아바타 바탕 — 흰 글자가 4.5:1 을 넘도록 brand-dark 로 눌러 둔다(2026-10-31: 셋째가 2.38:1 이었다). 미니 화면의 점(.dot)도 같은 색. */
.a1 { background: color-mix(in srgb, var(--primary-fill) 85%, var(--brand-dark)); }
.a2 { background: color-mix(in srgb, var(--mesh-5) 80%, var(--brand-dark)); }
.a3 { background: color-mix(in srgb, var(--mesh-2) 45%, var(--brand-dark)); }
.mock-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mock-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-body); font-weight: 600; }
.badge {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 9999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary);
  font-size: var(--fs-micro); font-weight: 600;
}
.mock-fact { color: var(--muted); font-size: var(--fs-caption); }
.mock-btn {
  flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border-radius: 9999px; border: 1px solid var(--primary); color: var(--primary);
  font-size: var(--fs-caption); font-weight: 600;
}
.mock-btn.is-done { border-color: var(--line); color: var(--muted); }

/* ── 띠 ─────────────────────────────────────────────────────────────────────────────────── */
.band { padding: var(--sp-band) 0; }
.band-soft { background: var(--bg-soft); }
.band > .wrap { display: flex; flex-direction: column; gap: var(--sp-band-gap); }
.band-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.band-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767px) {
}

/* {card-feature-light} — 12px · hairline · Level 1. */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-grid); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .cards, .cards-3 { grid-template-columns: minmax(0, 1fr); } }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); padding: var(--sp-card) 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.card h3 { font-size: var(--fs-title); font-weight: 600; line-height: var(--lh-heading); letter-spacing: var(--tr-tight); }
.card p { color: var(--ink-2); }

/* 미니 화면(2026-10-31) — 기능 카드마다 실제 앱 화면을 줄여 흉내 낸다(DESIGN.md: "Pair every feature explanation with a composited
   product UI mockup"). 그전에는 아이콘뿐이라 무엇을 하는 화면인지 글을 읽어야 알았다. 장식이라 aria-hidden — 뜻은 아래 h3·p 가 말한다.
   이미지가 아니라 마크업이라 무게가 없고, 색이 변수라 다크가 따라온다. 이름·숫자는 지어낸 예시다. */
.mini {
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  min-height: 108px; min-width: 0; margin-bottom: 4px; padding: 10px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
  color: var(--ink-2); font-size: var(--fs-micro); line-height: 1.4;
  /* 옅게 물든 바탕이라 바깥의 muted 로는 4.47:1(2026-10-31 실측, 라이트) — 안에서만 :root 의 --muted-on-tint 로 바꿔 끼운다. */
  --muted: var(--muted-on-tint);
}
.mini b { color: var(--ink); font-weight: 600; }
.mini-cap { color: var(--ink); font-weight: 600; }
.mini-foot { color: var(--muted); }
.mini-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mini-chip, .st {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 9999px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: var(--fs-nano); white-space: nowrap;
}
.mini-chip.is-on { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); }
.dot { flex: none; display: inline-block; width: 18px; height: 18px; border-radius: 50%; }

/* 옛 교우 찾기 — 두 사람의 출석 기간 막대와 겹친 띠. 위치는 1995~2010 축의 비율(1996–2003 · 1998–2008 → 겹침 1998–2003). */
.ov-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 6px; }
.ov-tag { color: var(--muted); font-size: var(--fs-nano); text-align: right; }
.ov-track { position: relative; display: block; height: 16px; border-radius: 9999px; background: color-mix(in srgb, var(--ink) 7%, var(--card)); }
.ov-band { position: absolute; top: -5px; bottom: -5px; left: 20%; width: 33.3%; border-radius: 3px; background: color-mix(in srgb, var(--primary) 16%, transparent); }
.ov-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 9999px; }
.ov-me { left: 6.7%; width: 46.7%; background: var(--primary-fill); }
.ov-peer { left: 20%; width: 66.7%; background: color-mix(in srgb, var(--mesh-5) 80%, var(--brand-dark)); }

/* 게시물과 친구 */
.mini-who { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.post-photo { display: block; height: 44px; border-radius: 6px; background: linear-gradient(135deg, var(--mesh-1), var(--mesh-3) 55%, var(--mesh-2)); }
@media (prefers-color-scheme: dark) { .post-photo { opacity: 0.7; } }

/* 신앙 타임라인 */
.mini-timeline { gap: 6px; }
.tl-item { display: flex; align-items: center; gap: 8px; }
.tl-year { width: 34px; color: var(--muted); font-weight: 600; }
.tl-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--primary); }
.tl-item.is-now { color: var(--ink); font-weight: 600; }
.tl-item.is-now .tl-dot { background: var(--primary); }

/* 신앙생활 기록 — 한 줄이 넘치면 말줄임(장식이라 잘려도 뜻을 잃지 않는다). */
.jr-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-line b { color: var(--muted); margin-right: 4px; }

/* 새가족 정착 — 단계 */
.st-row { display: flex; align-items: center; gap: 4px; }
.st.is-done { border-color: transparent; background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); }
.st.is-now { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.st-line { flex: 1; min-width: 8px; height: 2px; background: var(--line); }
.st-line.is-done { background: var(--primary); }

/* 이어진 분 — 겹친 얼굴. 음수 마진 대신 좁은 칸(12px)에 18px 점을 넘치게 둔다(CLAUDE.md '음수 마진으로 간격을 맞추지 않는다'). */
.lk-row { display: flex; align-items: center; gap: 10px; }
.stack { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 12px; padding-right: 6px; }
.stack .dot { box-shadow: 0 0 0 2px var(--card); }

/* 우리 교회 홈페이지 — 표지 띠 + 이름 + 예배 시간(앱 교회 홈의 첫 화면을 줄인 것). 표지는 히어로와 같은 목장 사진. */
.ch-cover { display: block; height: 22px; border-radius: 6px; background: url('/site/hero-pasture.jpg?v=1') center 55% / cover no-repeat; }
.ch-row { display: flex; justify-content: space-between; gap: 8px; }
.ch-row b { color: var(--ink); }

/* 외부공개 공지 */
.nt-title { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); font-size: var(--fs-caption); font-weight: 600; }
.nt-date { color: var(--muted); font-weight: 400; }

/* {card-cream-band} — 시작 절차. */
.cream {
  background: var(--cream); border-radius: var(--radius-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 18px;
}
@media (max-width: 480px) { .cream { padding: 24px 20px; } }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 899px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.step-no {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  font-weight: 600;
}
.step-body { display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); }
.step-body b { color: var(--ink); font-size: var(--fs-title); font-weight: 600; letter-spacing: var(--tr-tight); }

/* 자주 묻는 질문 — <details>. 줄 전체가 누르는 면(44px 이상). */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px; padding: 10px 0; cursor: pointer; list-style: none;
  font-size: var(--fs-title); font-weight: 600; letter-spacing: var(--tr-tight);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-3px) rotate(45deg); transition: transform .15s;   /* 옮기고 돌린다 — 반대 순서면 돌린 축으로 옮겨져 열릴 때 비뚤어진다 */
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); }

.contact { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.contact .band-actions { justify-content: center; margin-top: 8px; }

/* 문의 폼(2026-10-31 — 메일 주소·mailto 단추를 대신한다. hangajiapp docs/plans/2026-10-31-homepage-inquiry.md). 띠는 가운데 정렬, 폼 안은 왼쪽. */
.inq-form, .inq-done, .inq-gate { width: 100%; max-width: 560px; text-align: left; }
/* 로그인 전 안내(2026-10-31 — 문의는 로그인한 회원만) — 폼 자리에 같은 폭으로. 채운 단추는 [로그인하고 문의하기] 하나. */
.inq-gate { display: flex; flex-direction: column; gap: 12px; }
.inq-form { display: flex; flex-direction: column; gap: 16px; }
.inq-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.inq-kinds legend { width: 100%; padding: 0; margin-bottom: 8px; font-size: var(--fs-caption); font-weight: 600; color: var(--ink); }
/* 종류 칩 — 누르는 면 44px(작은 화면에서 칩 36px 보다 키운다: 폼의 주요 선택이다). 고른 칩은 투표 화면 후보 줄과 같은 꼴. */
.inq-kind {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-input); border-radius: 9999px;
  background: var(--card); color: var(--ink); font-size: var(--fs-body); cursor: pointer;
}
.inq-kind input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.inq-kind:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); box-shadow: 0 0 0 1px var(--primary); }
.inq-kind:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.inq-message { min-height: 140px; resize: vertical; line-height: 1.6; }
.inq-consent { display: flex; flex-direction: column; gap: 4px; }
/* 숨긴 칸 — display:none 이면 봇 일부가 건너뛴다. 화면 밖으로 밀고 낭독기·탭에서도 뺀다(aria-hidden · tabindex=-1). */
.inq-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.inq-done { display: flex; flex-direction: column; gap: 8px; }
.inq-done:focus { outline: none; }
.inq-mail { color: var(--muted); font-size: var(--fs-caption); }
.inq-mail a { color: var(--ink-2); }

/* ── 바닥글 — {footer-light}: 64px 24px · caption · ink-mute. ──────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: 56px 0 64px; color: var(--muted); font-size: var(--fs-caption); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: start; }
.footer-brand { display: flex; flex-direction: column; gap: 4px; }
.footer-name { color: var(--ink); font-size: var(--fs-body); font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.footer-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  color: var(--ink-2); font-size: var(--fs-caption);
}
.footer-links b { font-weight: 600; }   /* 개인정보 처리방침은 다른 링크보다 또렷하게(관행·표시 의무) */
.footer-legal {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.footer-legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  /* 첫 링크를 왼쪽 줄에 맞춘다 — 음수 마진 대신 첫 칸의 안쪽 여백을 뺀다. */
  .footer-links a:first-child { padding-left: 0; }
}

/* ── 로그인·회원가입(2026-10-31, hangajiapp docs/plans/2026-10-31-homepage-login.md) — 홈페이지의 문. 앱 /m/login/ 과 겹치는 모양이 없게:
   두 칸(사진 + 카드) · 머리줄엔 반대쪽 문 하나 · 소셜은 글자 있는 전폭 알약이 먼저 · 가입엔 비밀번호 확인. 토큰은 위의 것 그대로. ─────── */
/* 머리줄 고정(2026-10-31, 요청 "헤드는 고정해줘") — 홈의 .nav 와 같은 붙박이·반투명 바탕. 로그인·가입·관리·교회·문서·내 소속·투표 장이 모두 이 머리줄이다.
   가입 장의 왼쪽 사진 칸(.auth-aside)은 처음부터 top: var(--head-h) 로 머리줄 **아래에** 붙도록 짜여 있었는데, 정작 머리줄이 붙지 않아 스크롤하면
   사진 칸 위에 57px 빈 띠가 남았다 — 이 줄로 둘이 맞는다. 다이얼로그(<dialog>)는 맨 위 층이라 이 z-index 와 겨루지 않는다. */
.auth-head {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.auth-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.auth-head-switch { color: var(--ink-2); font-size: var(--fs-caption); }
.auth-head-switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 600; }

.auth-page {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  min-height: calc(100vh - var(--head-h));
}
/* 왼쪽 칸 — 히어로와 같은 목장 사진 + 베일(글자 쪽은 바탕으로 덮는다). */
/* 왼쪽 칸은 **붙박이**(sticky) — 가입 폼이 길어 칸이 1,200px 를 넘으면 가운데 정렬한 문장이 화면 밖으로 내려갔다(2026-10-31 하네스).
   화면 높이만큼만 차지하고 스크롤해도 그 자리에 선다. */
.auth-aside {
  position: sticky; top: var(--head-h); align-self: start; height: calc(100vh - var(--head-h));
  display: flex; align-items: center; padding: 32px 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 86%, transparent), color-mix(in srgb, var(--bg) 40%, transparent)),
              var(--hero-dim), url('/site/hero-pasture.jpg?v=1') center 60% / cover no-repeat;
}
.auth-aside-inner { display: flex; flex-direction: column; gap: 16px; max-width: 420px; margin: 0 auto; }
.auth-aside-title { font-size: var(--fs-section); font-weight: var(--w-display); line-height: var(--lh-heading); letter-spacing: var(--tr-section); }
.auth-aside-points { display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }
.auth-aside-points li { display: flex; gap: 10px; align-items: flex-start; }
.auth-aside-points li::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--primary);
}

/* 카드 — 폼. 넓은 화면에서는 오른쪽 칸 가운데, 좁은 화면에서는 사진 띠 아래. */
.auth-card {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%; max-width: 420px; margin: 0 auto; padding: 32px 24px 48px;
}
.auth-card-title { font-size: var(--fs-section); font-weight: var(--w-display); line-height: var(--lh-heading); letter-spacing: var(--tr-section); }
.auth-card-sub { color: var(--ink-2); }

/* 소셜 — 전폭 알약 48px. **테두리형**이다: 글자는 카드 위 ink 로, 회사 색은 왼쪽의 심벌 동그라미에만. 회사 색을 바탕으로 깔면 네이버(흰 글자 2.5:1)·
   페이스북(4.2:1)이 기준에 못 미치고(2026-10-31 실측), 다섯 가지 바탕색이 한 줄로 서면 소개 페이지의 색 규칙(색을 채운 단추는 띠에 하나)도 깨진다.
   '준비 중' 인 제공자는 심벌을 회색으로 두고 표를 붙인다 — 흐리게(opacity) 하면 글자 대비가 2:1 로 떨어졌다. */
.auth-social-list { display: flex; flex-direction: column; gap: 10px; }
.auth-social {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--ctl-h); padding: 4px 16px 4px 4px;
  border: 1px solid var(--line-input); border-radius: 9999px; background: var(--card); color: var(--ink); cursor: pointer;
  font: inherit; font-size: var(--fs-button); font-weight: 500; letter-spacing: var(--tr-tight); text-align: left;
}
.auth-social svg {
  flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 7px; border-radius: 50%;
  background: var(--social-bg); color: var(--social-fg);
}
.auth-social span { flex: 1; }
.auth-social:disabled { cursor: default; }
.auth-social.is-pending { color: var(--ink-2); }
.auth-social.is-pending svg { --social-bg: color-mix(in srgb, var(--ink) 10%, var(--card)); --social-fg: var(--muted); }
.auth-social-tag {
  padding: 2px 8px; border-radius: 9999px; background: color-mix(in srgb, var(--ink) 8%, var(--card)); color: var(--ink-2);
  font-size: var(--fs-nano); font-weight: 600;
}
.auth-social.is-kakao { --social-bg: var(--kakao); --social-fg: #000; }
.auth-social.is-naver { --social-bg: var(--naver); --social-fg: #fff; }
.auth-social.is-google { --social-bg: #fff; --social-fg: #1f1f1f; }
.auth-social.is-google svg { box-shadow: inset 0 0 0 1px var(--google-line); }
.auth-social.is-facebook { --social-bg: var(--facebook); --social-fg: #fff; }
.auth-social.is-apple { --social-bg: var(--apple); --social-fg: var(--on-apple); }
.auth-social:not(:disabled):hover { background: color-mix(in srgb, var(--primary) 5%, var(--card)); border-color: var(--primary); }
.auth-social:not(:disabled):active { transform: scale(0.99); }

.auth-note { min-height: 1.4em; color: var(--muted); font-size: var(--fs-caption); }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-caption); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* 폼 — {text-input}: 6px · hairline-input · 초점은 primary. 높이 48px(글자 15px 가 들어가고 터치 타깃을 넘긴다). */
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label { font-size: var(--fs-caption); font-weight: 600; color: var(--ink); }
.auth-optional { font-weight: 400; color: var(--muted); }
.auth-input {
  width: 100%; min-height: var(--ctl-h); padding: 8px 12px;
  border: 1px solid var(--line-input); border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
  font: inherit; font-size: var(--fs-body);
}
.auth-input::placeholder { color: var(--muted); }
.auth-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.auth-hint { color: var(--muted); font-size: var(--fs-caption); }
.auth-error {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--mesh-5) 10%, var(--card)); color: color-mix(in srgb, var(--mesh-5) 70%, var(--ink));
  font-size: var(--fs-caption); font-weight: 500;
}
.auth-error:focus { outline: none; }
.auth-submit { width: 100%; }
.auth-submit:disabled { opacity: .5; cursor: default; }

.auth-consents { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.auth-consents legend { padding: 0 4px; font-size: var(--fs-caption); font-weight: 600; }
.auth-check { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; font-size: var(--fs-body); }   /* 줄 전체가 누르는 면 — 44px */
.auth-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }

.auth-switch { color: var(--ink-2); font-size: var(--fs-body); }
.auth-switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 600; }
.auth-policy { color: var(--muted); font-size: var(--fs-caption); }
.auth-policy a { color: var(--muted); }

@media (max-width: 899px) {
  .auth-page { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-aside { position: static; height: auto; padding: 32px 16px; }
  .auth-aside-inner { max-width: none; }
  .auth-card { padding: 24px 16px 40px; }
}

/* ── 그사람 띠(2026-10-31, hangajiapp docs/plans/2026-10-31-homepage-from-repos.md) — 글 왼쪽 · 익명 카드 목업 오른쪽(히어로와 같은 두 칸). ── */
/* `.band > .wrap` 이 flex 세로라 그냥 .spot-grid 로는 두 칸이 안 선다(2026-10-31 하네스 — 1280px 에서 한 줄로 쌓였다). 같은 무게로 덮는다. */
.band > .spot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 40px; align-items: center; }
.spot-text { display: flex; flex-direction: column; gap: 16px; }
.spot-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.spot-steps li { display: flex; gap: 14px; align-items: flex-start; }
.spot-note { color: var(--muted-on-tint); font-size: var(--fs-caption); }   /* 옅은 띠 바탕 위 — muted 는 4.49:1 이었다 */
@media (max-width: 899px) { .band > .spot-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* 익명 카드 — 앱 그사람 목록의 카드 한 장을 흉내 낸다. 싱크로율 숫자는 tnum. */
.seek-card { gap: 10px; }
.seek-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.seek-badge {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary);
  font-size: var(--fs-micro); font-weight: 600;
}
.seek-sync { color: var(--ink-2); font-size: var(--fs-caption); }
.seek-sync b { color: var(--primary); font-size: var(--fs-title); font-weight: 700; }
.seek-title { font-size: var(--fs-title); font-weight: 600; letter-spacing: var(--tr-tight); }
.seek-meta { color: var(--muted); font-size: var(--fs-caption); }
.seek-ep {
  display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 4%, var(--card)); color: var(--ink-2); font-size: var(--fs-caption);
}
.seek-year { flex: none; color: var(--ink); font-weight: 600; }
.seek-anon { color: var(--muted); font-size: var(--fs-caption); }
.seek-btn { align-self: flex-start; min-height: 36px; padding: 0 16px; }

/* 바닥글 브랜드 마크 */
.footer-name { display: inline-flex; align-items: center; gap: 8px; }
.footer-name img { width: 28px; height: 28px; border-radius: 7px; }

/* ── 머리줄 로그인 상태(2026-10-31 — session.js) ─────────────────────────────────────────────────────────── */
.nav-session { display: flex; align-items: center; gap: 8px; }
.nav-user {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; max-width: 14em; padding: 0 6px;
  color: var(--ink-2); font-size: var(--fs-body); white-space: nowrap;
}
.nav-user:hover { color: var(--ink); text-decoration: none; }
/* 닉네임은 회원이 지은 글자라 잘라낸 Hangaji Sans 에 없을 수 있다 — 이 칸만 시스템 글꼴로(한 이름 안에서 글꼴이 섞이지 않게). 길면 말줄임. */
.nav-user-name {
  overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
}
@media (max-width: 767px) {
  .nav-session { margin-left: auto; }
  .nav-user { max-width: 7.5em; font-size: var(--fs-caption); }
  .nav-logout { padding: 8px 14px; font-size: var(--fs-small); }
}

/* ── 로그인한 사람의 히어로(2026-10-31 §8 — session.js 가 template 을 끼운다) ──────────────────────────────────────────── */
/* 회원이 지은 글자(닉네임·교회 이름) — 잘라낸 Hangaji Sans 에 없을 수 있어 시스템 글꼴로. 한 이름 안에서 글꼴이 섞이지 않게. */
.u-text { font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif; }
.role-badge {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px; border-radius: 9999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); font-size: var(--fs-micro); font-weight: 600;
}
.link-strong { font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: var(--ctl-sm-h); padding: 0 14px; border-radius: 9999px;
  border: 1px solid var(--line-input); background: var(--card); color: var(--ink); font-size: var(--fs-small); font-weight: 500;
}
.chip:hover { border-color: var(--primary); text-decoration: none; }

/* 바로 가기(회원) · 오늘 할 일(관리자) — 히어로 오른쪽 카드. 줄 전체가 링크, 44px. */
.me-links, .todo-list { display: flex; flex-direction: column; }
.me-links li, .todo-list li { border-top: 1px solid var(--line); }
.me-links a, .todo-list a {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; color: var(--ink);
}
.me-links a:hover, .todo-list a:hover { text-decoration: none; color: var(--primary); }
.me-links a { flex-direction: column; align-items: flex-start; gap: 2px; }
.me-links b { font-size: var(--fs-body); font-weight: 600; }
.me-links span { color: var(--muted); font-size: var(--fs-caption); }
.todo-list a span { flex: 1; font-size: var(--fs-body); font-weight: 500; }
.badge-n {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 9999px;
  background: color-mix(in srgb, var(--ink) 8%, var(--card)); color: var(--ink-2); font-size: var(--fs-caption); font-weight: 600;
}
/* 빨강 = 내가 할 일(승인 대기). 정보 숫자(교인·공지)는 회색 — 앱 허브와 같은 신호 규칙. */
.badge-n.is-alert { background: color-mix(in srgb, var(--mesh-5) 14%, var(--card)); color: color-mix(in srgb, var(--mesh-5) 55%, var(--ink)); }   /* 75% 는 다크에서 4.01:1 이었다 — ink 를 더 섞으면 라이트는 더 짙게, 다크는 더 밝게 간다 */
.todo-band {
  padding: 10px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--mesh-2) 25%, var(--card)); color: var(--ink); font-size: var(--fs-caption); font-weight: 500;
}

/* ── 관리자의 교회 표지(2026-10-31, 요청 "관리자가 로그인하면 교회 배경을 표시해줘") ────────────────────────────────────────
   session.js 가 교회의 resolved_cover_url(/media/…, 같은 출처)을 <img class="hero-cover"> 로 .hero 맨 앞에 넣고 .has-cover 를 켠다.
   <img> 인 까닭: CSS 배경을 스크립트로 주려면 style 속성이 필요한데 CSP(style-src 'self')가 인라인 style 을 막는다 — img-src 'self' 는 연다.
   베일은 ::before 로 그림 **위**(z 1)에 다시 깐다 — .hero 의 배경 베일은 자식(img) 아래라 가려진다. 글은 z 2. 목장 사진은 뺀다(두 겹이면 섞인다). */
.hero.has-cover { background: var(--bg); }
.hero-cover { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero.has-cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--hero-veil), var(--hero-dim);
}

/* ── 회원 관리 /manage/members/(2026-10-31 §9) — 홈페이지 UI 로 만든 소속 확인. 토큰·알약·44px 그대로. ──────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.manage-page { padding: 28px 0 56px; }
.manage-wrap { display: flex; flex-direction: column; gap: 24px; max-width: 880px; }
.manage-gate { display: flex; flex-direction: column; gap: 16px; padding: 24px 0; }
.manage-main { display: flex; flex-direction: column; gap: 14px; }
.page-head { display: flex; flex-direction: column; gap: 16px; }
.page-head-text { display: flex; flex-direction: column; gap: 8px; }
.chip.is-on { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); }

/* 필터 — 상태 칩은 체크박스가 든 label(36px 칩). 검색은 입력칸 48px. */
.manage-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.chip-check { position: relative; gap: 6px; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check:has(input:checked) { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); }
.chip-check:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.chip-check .badge-n { min-height: 20px; padding: 0 7px; font-size: var(--fs-nano); }
.manage-search { flex: 1 1 240px; min-width: 200px; }
.manage-status { min-height: 1.4em; color: var(--muted); font-size: var(--fs-caption); }
.manage-note { color: var(--muted); font-size: var(--fs-caption); }

/* 한 줄 — 사진(40) · 이름/직분/상태 · 보조줄 · 단추들. 좁으면 단추가 아래 줄로. */
.member-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.member-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.member-avatar {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 14%, var(--card)); color: var(--primary); font-weight: 600;
}
.member-avatar::after { content: attr(data-letter); }
.member-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member-main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.member-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-body); }
.member-name b { font-weight: 600; }
.member-sub { color: var(--muted); font-size: var(--fs-caption); overflow-wrap: anywhere; }
/* 관리자 배지(2026-10-31) — 직분 배지(primary 틴트)와 갈라 ink 틴트. 한 줄에 [직분][관리자][상태] 셋이 설 수 있다. */
.badge-admin { background: color-mix(in srgb, var(--ink) 9%, var(--card)); color: var(--ink); }
.status-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 9999px; font-size: var(--fs-micro); font-weight: 600; }
.status-badge.is-self_declared { background: color-mix(in srgb, var(--mesh-2) 30%, var(--card)); color: color-mix(in srgb, var(--mesh-2) 20%, var(--ink)); }
.status-badge.is-verified { background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); }
.status-badge.is-rejected { background: color-mix(in srgb, var(--ink) 8%, var(--card)); color: var(--ink-2); }
.member-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.btn-sm { min-height: var(--ctl-sm-h); padding: var(--ctl-sm-pad); font-size: var(--fs-small); }
.btn-ghost { background: var(--card); color: var(--ink-2); border-color: var(--line-input); }   /* 보조 단추와 같은 선, 글자만 한 단계 흐리게 — 선 색이 둘이면 짝이 안 맞아 보인다 */
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-2); }
.btn[hidden] { display: none; }
@media (max-width: 599px) { .member-actions { width: 100%; margin-left: 48px; } .btn-sm { min-height: var(--ctl-h); } }   /* 손가락 화면에서는 44px */

/* 확인 창 — <dialog>. */
.manage-dialog { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0; background: var(--card); color: var(--ink); box-shadow: var(--shadow-2); max-width: min(420px, calc(100vw - 32px)); }
.manage-dialog::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.manage-dialog-body { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.manage-dialog-body .band-actions { justify-content: flex-end; }

/* 목록만 스크롤(2026-10-31, 요청 "리스트는 풀HD 화면 안에서 스크롤 되도록") — 900px 이상에서 페이지를 화면 높이에 맞추고(머리줄 65px 뺌)
   .member-scroll 안이 넘친다. 머리·필터·안내는 서 있다. 좁은 화면은 두지 않는다 — 손가락 스크롤 상자가 페이지 스크롤과 겹쳐 걸린다. */
@media (min-width: 900px) {
  .manage-page { box-sizing: border-box; height: calc(100vh - var(--head-h)); padding: 24px 0 20px; overflow: hidden; }
  .manage-wrap { height: 100%; }
  .manage-main { flex: 1 1 auto; min-height: 0; }
  .member-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
  .member-more { padding: 12px 0 4px; }
}

/* ── 관리 홈 /manage/church/(2026-10-31 §10) — 앱 관리 허브를 홈페이지 UI 로. 머리·게이트는 회원 관리와 같은 클래스. ──────────────────── */
.hub-page { height: auto; overflow: visible; }   /* 회원 관리의 '목록만 스크롤'(900px↑ 화면 높이 고정)을 받지 않는다 — 허브는 페이지가 스크롤 */
.hub-head { flex-direction: row; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
/* 검증 정원 칩 — 앱 hub-quota. 숫자 tnum, 다 쓰면(is-full) 빨강 계열로 '할 일'. 늘 링크(요금 화면). */
.hub-quota {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; min-height: var(--ctl-h); padding: 6px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); box-shadow: var(--shadow-1);
}
.hub-quota:hover { text-decoration: none; border-color: var(--primary); }
.hub-quota-num { font-size: var(--fs-heading); font-weight: 600; line-height: 1.1; letter-spacing: var(--tr-tight); }
.hub-quota-num em { font-style: normal; font-weight: 400; color: var(--muted); font-size: var(--fs-body); }
.hub-quota-cap { font-size: var(--fs-caption); color: var(--muted); }
.hub-quota.is-warn .hub-quota-cap { color: color-mix(in srgb, var(--mesh-2) 30%, var(--ink)); }
.hub-quota.is-full { border-color: color-mix(in srgb, var(--mesh-5) 50%, var(--line)); }
.hub-quota.is-full .hub-quota-cap { color: color-mix(in srgb, var(--mesh-5) 55%, var(--ink)); font-weight: 600; }

/* 띠 — is-alert(할 일: 대기·서류)는 todo-band 와 같은 살구 틴트, is-calm(정보)은 bg-soft. 글은 ink 라 두 바탕 모두 7:1 넘는다. */
.hub-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; border-radius: var(--radius-lg);
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink); font-size: var(--fs-body);
}
.hub-band.is-alert { background: color-mix(in srgb, var(--mesh-2) 25%, var(--card)); border-color: color-mix(in srgb, var(--mesh-2) 50%, var(--line)); }
.hub-band-title { flex: 1 1 260px; font-weight: 500; }
.hub-band-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.hub-band-actions > a { display: inline-flex; align-items: center; min-height: 36px; font-weight: 600; }
.hub-band-note { color: var(--ink-2); font-size: var(--fs-caption); }
.hub-band-err { flex-basis: 100%; color: var(--danger); font-size: var(--fs-caption); }
.hub-band-close {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px;
  border: 0; background: transparent; color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer;
}
.hub-band-close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }

/* 격자 — {card-feature-light} 12px · hairline · Level 1. 칸 전체가 링크(높이 ≥ 88). 9칸이라 **3열**(3×3 — 4열이면 마지막 줄에 한 칸이 외톨이다; 앱은 4열이지만 폭 880 에서는 3열이 꽉 찬다) → 2열(599). */
.hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-grid); list-style: none; margin: 0; padding: 0; }
.hub-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 14px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); box-shadow: var(--shadow-1);
  text-align: center;
}
.hub-tile:hover { text-decoration: none; border-color: var(--primary); color: var(--primary); }
.hub-tile-icon { position: relative; display: inline-flex; width: 32px; height: 32px; }
.hub-tile-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hub-tile-label { font-size: var(--fs-body); font-weight: 500; }
/* 배지 — 아이콘 오른쪽 위. 회색 정보, 빨강은 내가 할 일(승인 대기)에만 — badge-n 과 같은 색 규칙. */
.hub-tile-badge {
  position: absolute; top: -8px; left: 22px; display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 9999px;
  background: color-mix(in srgb, var(--ink) 8%, var(--card)); color: var(--ink-2); font-size: var(--fs-nano); font-weight: 600; white-space: nowrap;
}
.hub-tile-badge.is-alert { background: color-mix(in srgb, var(--mesh-5) 14%, var(--card)); color: color-mix(in srgb, var(--mesh-5) 55%, var(--ink)); }
/* 앱으로 가는 칸 — 오른쪽 위 '앱' 표시(기획 §10.1). 숨기지 않는다: 어디로 가는지 알아야 한다. */
.hub-tile.is-app::after {
  content: "앱"; position: absolute; top: 8px; right: 8px; padding: 0 6px; border-radius: 9999px;
  background: color-mix(in srgb, var(--ink) 6%, var(--card)); color: var(--muted-on-tint); font-size: var(--fs-nano); font-weight: 600; line-height: 18px;
}
@media (max-width: 599px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 현황 — 네 칸, 숫자 tnum. 절감량은 단위가 붙어 길다 → 작은 활자(is-text). */
.hub-stats-card { display: flex; flex-direction: column; gap: 12px; }
.hub-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.hub-stat { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.hub-stat dd { margin: 0; font-size: var(--fs-section); font-weight: 600; line-height: 1.1; letter-spacing: var(--tr-tight); }
.hub-stat dd.is-text { font-size: var(--fs-heading); line-height: 1.3; }
.hub-stat dt { color: var(--muted); font-size: var(--fs-caption); }
@media (max-width: 599px) { .hub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 최근 공지 — 제목(시스템 글꼴) + 날짜. */
.hub-recent { display: flex; flex-direction: column; gap: 8px; }
.hub-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-recent-head a { display: inline-flex; align-items: center; min-height: 36px; }
.hub-recent-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.hub-recent-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.hub-recent-title { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.hub-recent-date { flex: none; color: var(--muted); font-size: var(--fs-caption); }
/* 회원 관리의 '관리 홈' 돌아가기(2026-10-31 §10) — 머리 위 작은 글자 링크. */
.manage-back { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink-2); font-size: var(--fs-caption); font-weight: 600; }

/* ── 머리줄의 [총회](2026-10-31, 요청 "빨간 박스영역에 총회라는 버튼") — 닉네임 왼쪽. 글자 링크지만 누르는 면은 44px. ──────────────── */
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 9999px;
  color: var(--ink-2); font-size: var(--fs-body); font-weight: 600;
}
.nav-link:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); text-decoration: none; }
.nav-link.is-on { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }

/* ── 총회 /manage/election/(2026-10-31, election 기획 §2.1) ─────────────────────────────────────────────────────────────── */
.el-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.el-list-head h2 { margin: 0; }
.el-list-head .num { color: var(--muted); font-weight: 500; }
.el-empty { display: flex; flex-direction: column; gap: 12px; }
.el-list { display: flex; flex-direction: column; gap: var(--sp-grid); }
.el-card { display: flex; flex-direction: column; gap: 12px; }
.el-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.el-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.el-head-text h3 { margin: 0; }
.el-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: var(--fs-caption); }
.el-head-actions, .el-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.el-ballots { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.el-ballot { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.el-ballot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.el-pos { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-title); }
.el-pos b { font-weight: 600; }
.el-count { color: var(--muted); font-size: var(--fs-caption); }
.el-cands { color: var(--ink-2); font-size: var(--fs-caption); }
.el-link { align-self: flex-start; color: var(--muted); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.status-badge.is-open { background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); }
.status-badge.is-closed { background: color-mix(in srgb, var(--ink) 8%, var(--card)); color: var(--ink-2); }

/* 결과 — 등수 · 이름(배지) · n표, 아래 막대. 막대 너비는 스크립트가 CSSOM 으로(style 속성은 CSP 가 막는다). */
.el-results { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 4px 0 0; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--bg-soft); }
.el-result { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.el-rank { color: var(--muted-on-tint); font-size: var(--fs-caption); font-weight: 600; }   /* bg-soft 위라 muted 는 4.49:1 이었다(2026-10-31 실측) */
.el-rname { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; font-size: var(--fs-body); }
.el-rname b { font-weight: 600; overflow-wrap: anywhere; }
.el-votes { font-size: var(--fs-body); font-weight: 600; }
.el-bar { grid-column: 2 / -1; height: 6px; border-radius: 9999px; background: color-mix(in srgb, var(--ink) 8%, var(--card)); overflow: hidden; }
.el-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary-fill); }

/* 만들기·고치기 다이얼로그 — 직책이 늘면 길어진다: 창 안이 스크롤. */
.el-dialog { width: 100%; max-width: min(560px, calc(100vw - 32px)); }
.el-dialog .manage-dialog-body { max-height: calc(100vh - 48px); overflow-y: auto; }
/* 직책 다이얼로그(2026-10-31 기획 §6 — 직책 하나씩). 후보 칸 묶음에 작은 이름표. 화면 낭독기는 aria-label 을 읽는다. */
.el-label { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.el-label-hint { font-weight: 400; color: var(--muted); }
.el-cand-box { display: flex; flex-direction: column; gap: 8px; }
.el-dialog-sub { color: var(--muted); font-size: var(--fs-caption); }
.el-dialog .auth-input[name="position"] { font-weight: 600; }
.el-danger-row { display: flex; justify-content: flex-start; padding-top: 8px; border-top: 1px solid var(--line); }
/* 만든 뒤 — 링크가 이 창의 주인공. 채운 단추는 [카톡으로 공유] 하나(한 띠에 하나). 다음 직책·닫기는 아래 줄에 글자 단추로. */
.el-done .el-link { font-size: var(--fs-body); color: var(--ink-2); padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-soft); align-self: stretch; }
.el-done-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
/* 카드 — 직책이 없을 때의 한 줄과 [+ 직책 투표 더하기](글자로 적은 단추 — 아이콘만으로는 무엇을 누를지 모른다). */
.el-no-ballot { color: var(--muted); font-size: var(--fs-body); padding: 12px 0 0; border-top: 1px solid var(--line); }
.el-add-row { display: flex; padding-top: 12px; border-top: 1px solid var(--line); }
.el-add-row .btn { flex: 1 1 auto; }
.el-cand-inputs { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }
.el-cand-input { display: flex; align-items: center; gap: 8px; }
.el-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px;
  border: 0; background: transparent; color: var(--ink-2); font-size: 22px; line-height: 1; cursor: pointer;
}
.el-x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }

/* ── 총회 투표 /vote/<token>/(election 기획 §2.2) — 폰에서 카톡 링크로 연다: 한 줄 폭, 큰 누르는 면. ──────────────────────────── */
.vote-page { padding: 28px 0 56px; }
.vote-wrap { max-width: 560px; display: flex; flex-direction: column; gap: 24px; }
.vote-main { display: flex; flex-direction: column; gap: 20px; }
.vote-pos { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-heading); }
.vote-pos b { font-weight: 700; }
.vote-card { display: flex; flex-direction: column; gap: 14px; }
.vote-options-box { margin: 0; padding: 0; border: 0; min-width: 0; }
.vote-legend { padding: 0; margin-bottom: 10px; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.vote-options { display: flex; flex-direction: column; gap: 8px; }
.vote-option {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border: 1px solid var(--line-input); border-radius: var(--radius-lg);
  background: var(--card); cursor: pointer;
}
.vote-option input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }
.vote-option-name { font-size: var(--fs-title); font-weight: 600; overflow-wrap: anywhere; }
.vote-option:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); box-shadow: 0 0 0 1px var(--primary); }
.vote-option:has(input:disabled) { cursor: default; }
.vote-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 총회 다이얼로그 — 누가 투표하나(셋 중 하나, 2026-10-31). 줄 전체가 누르는 면(56px), 고른 줄은 투표 화면의 후보 줄과 같은 꼴. */
.el-modes { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.el-modes legend { padding: 0; margin-bottom: 8px; }
.el-mode {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--line-input); border-radius: var(--radius-lg);
  background: var(--card); cursor: pointer;
}
.el-mode input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }
.el-mode-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.el-mode-text b { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.el-mode-text span { font-size: var(--fs-caption); color: var(--muted); }
.el-mode:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); box-shadow: 0 0 0 1px var(--primary); }
.el-mode:has(input:checked) .el-mode-text span { color: var(--muted-on-tint); }   /* 물든 바탕의 --muted 는 4.19:1 — 4.5 를 밑돌았다(2026-10-31 실측) */
.el-mode:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.vote-note { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--ink); font-size: var(--fs-body); }
.vote-actions .btn { flex: 1 1 auto; }
.vote-results { display: flex; flex-direction: column; gap: 10px; }
.vote-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vote-results-head h2 { margin: 0; }
.vote-results-card { display: flex; flex-direction: column; gap: 8px; }
.vote-turnout { color: var(--ink-2); font-size: var(--fs-body); }
.vote-results-card .el-results { margin: 0; }


/* ── 문서 장 /privacy/ · /community-policy/ · /data-deletion/(2026-10-31, tools/build_public_pages.py 가 앱에서 만든다) ──────────────────
   본문은 시스템 글꼴(data-font="system") — 수천 자를 잘라낸 글꼴에 넣지 않는다. 글줄은 읽기 폭(760px), 본문 15px·줄 1.7. */
.doc-page { padding: 32px 0 64px; }
.doc-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.doc { padding: 28px 24px; }
.doc-body { font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif; color: var(--ink); }
.doc-body .doc-title { margin: 0 0 4px; font-size: var(--fs-section); font-weight: var(--w-display); line-height: var(--lh-heading); letter-spacing: var(--tr-section); text-wrap: balance; }
.doc-body h3 { margin: 28px 0 8px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.doc-body p, .doc-body li { font-size: var(--fs-body); line-height: 1.7; }
.doc-body p { margin: 8px 0; }
.doc-body ol, .doc-body ul { margin: 8px 0; padding-left: 22px; }
.doc-body ol { list-style: decimal; }
.doc-body ul { list-style: disc; }
.doc-body li + li { margin-top: 4px; }
.doc-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.doc-body .doc-meta { margin: 0 0 16px; color: var(--muted); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.doc-body .doc-changes { margin: 16px 0; padding: 14px 16px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
.doc-body .doc-changes-title { margin: 0 0 4px; font-weight: 700; }
.doc-body .doc-notice { margin-top: 28px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.6; }
/* 시행 예정 띠 — policy.js 가 시행 전 판마다 한 줄. 링크는 누르는 면 44px. */
.doc-upcoming { display: flex; flex-direction: column; gap: 8px; }
.doc-upcoming:empty { display: none; }
.doc-upcoming-row { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
.doc-upcoming-row p { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.doc-upcoming-row a { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-weight: 600; }
/* 공개 장 머리줄 — 교회 찾기 · 로그인. 닉네임과 단추 사이 간격은 줄이 갖는다. */
.page-nav { display: flex; align-items: center; gap: 8px; }
/* 좁은 화면에서 줄어드는 것은 닉네임이지 메뉴 글자가 아니다 — 320px 에서 "내 소속" 이 28px 로 눌려 세 줄로 접혔다(2026-10-31 실측, 머리줄 77px). */
.page-nav .nav-link { flex: none; white-space: nowrap; }
.page-nav .nav-user { min-width: 0; flex: 0 1 auto; }
/* 320px 에 로고 + 메뉴 + 닉네임 + 로그아웃이 한 줄에 들도록(2026-10-31 실측 — 긴 닉네임이면 331px 로 두 줄, 머리줄 77px) — 닉네임 칸을 더 줄이고 사이를 좁힌다. */
/* 로고 글자는 줄어들지 않는다 — 눌리면 "한/가/지" 로 세 줄이 됐다(2026-10-31, 320px 머리줄 77px). 줄어드는 것은 닉네임 칸이다. */
.auth-head .nav-brand { flex: none; }
.auth-head .nav-brand span { white-space: nowrap; }
@media (max-width: 400px) { .auth-head-row:has(.page-nav) { gap: 8px; } .page-nav { gap: 4px; } .page-nav .nav-user { max-width: 4.5em; padding: 0 4px; } .page-nav .nav-link { padding-inline: 8px; } }
@media (max-width: 400px) { .doc { padding: 22px 16px; } .page-nav .nav-link { padding-inline: 8px; } }

/* ── 교회 장 /churches/ · /churches/<id>/ · /churches/chart/(2026-10-31 — 앱 공개 교회 페이지의 홈페이지판, site/churches.js) ────────── */
.ch-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 1040px; }
/* 가로 줄로 — .page-head 가 세로(column)라 그대로 두면 align-items: flex-end 가 **오른쪽 끝**으로 밀어 제목이 화면 오른쪽 반에 섰다(2026-11-01, 크롬 1596px 실측: 제목 x=831). */
.ch-head { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.ch-head-link { display: inline-flex; align-items: center; min-height: 44px; }
/* 거르개 — 넓으면 한 줄(검색 칸이 넓다), 좁으면 검색 한 줄 + 고르기 셋이 나뉜다. 칸 높이는 입력칸과 같은 44px. */
.ch-controls { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 8px; }
.ch-select { appearance: auto; padding-right: 8px; }
@media (max-width: 720px) { .ch-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ch-search { grid-column: 1 / -1; } }
@media (max-width: 400px) { .ch-controls { grid-template-columns: minmax(0, 1fr); } }
.ch-count { color: var(--muted); font-size: var(--fs-caption); }
.ch-count:empty { display: none; }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ch-card { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; color: var(--ink); text-decoration: none; transition: border-color .15s; }
.ch-card:hover { border-color: var(--primary); text-decoration: none; }
.ch-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ch-name { font-size: var(--fs-title); font-weight: 600; overflow-wrap: anywhere; }
.ch-meta { color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; }
.ch-empty { color: var(--muted); font-size: var(--fs-body); }

.ch-detail { display: flex; flex-direction: column; gap: 16px; padding: 24px; max-width: 760px; }
.ch-detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ch-detail-head h1 { margin: 0; overflow-wrap: anywhere; }
.badge-muted { background: color-mix(in srgb, var(--ink) 8%, var(--card)); color: var(--ink-2); }
.ch-follow-btn { display: inline-flex; align-items: center; gap: 8px; }
.ch-follow-btn.is-on { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); }
.ch-heart { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-follow-btn.is-on .ch-heart { fill: currentColor; }
.ch-follow-n { color: var(--ink-2); font-size: var(--fs-caption); font-weight: 500; }   /* 단추 바탕이 옅게 물들어 --muted 는 3.18:1 이었다(2026-10-31 실측, 라이트) */
.ch-follow-btn.is-on .ch-follow-n { color: inherit; }
.ch-dl { display: flex; flex-direction: column; margin: 0; border-top: 1px solid var(--line); }
.ch-row { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ch-row dt { color: var(--muted); font-size: var(--fs-caption); font-weight: 600; padding-top: 2px; }
.ch-row dd { margin: 0; font-size: var(--fs-body); color: var(--ink); overflow-wrap: anywhere; }
.ch-inline-link { font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
.ch-detail .manage-back { align-self: flex-start; min-height: 44px; }
.ch-pitch { display: flex; flex-direction: column; gap: 8px; padding: 24px; max-width: 760px; }
.ch-pitch h2 { margin: 0; }
.ch-pitch .band-actions { margin-top: 8px; }
.ch-pitch-note { color: var(--muted); font-size: var(--fs-caption); }

/* 조직도 — <details> 나무. 줄 하나가 누르는 면(44px). 들여쓰기는 왼쪽 선으로. */
.ch-tree { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ch-tree .ch-tree { margin: 4px 0 4px 14px; padding-left: 12px; border-left: 1px solid var(--line); }
.ch-node > summary { list-style: none; }
.ch-node > summary::-webkit-details-marker { display: none; }
.ch-summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); cursor: pointer; }
.ch-summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.ch-node[open] > .ch-summary::before { transform: rotate(45deg); }
.ch-summary:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ch-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ch-node-name { font-size: var(--fs-body); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ch-node-name.is-unknown { color: var(--ink-2); font-weight: 500; }
.ch-node-count { margin-left: auto; color: var(--muted); font-size: var(--fs-caption); }
.ch-node-empty { margin: 4px 0 8px 26px; color: var(--muted); font-size: var(--fs-caption); }
.ch-church-list { display: flex; flex-direction: column; margin: 4px 0 8px 26px; padding: 0; list-style: none; }
.ch-church-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ch-church-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-body); font-weight: 600; overflow-wrap: anywhere; }
.ch-church-region { color: var(--muted); font-size: var(--fs-caption); }

/* ── 내 소속 /memberships/(2026-10-31 — 앱 /m/memberships/ 의 홈페이지판, site/memberships.js) ───────────────────────────────────── */
.ms-wrap { max-width: 760px; }
.ms-ok { padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary) 8%, var(--card)); color: var(--ink); font-size: var(--fs-body); }
.ms-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
/* 지금 다니는 교회는 한 곳뿐 — 그 카드만 테두리·바탕·머리표로 갈라 둔다(앱 2026-10-10). */
.ms-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.ms-card.is-current { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: color-mix(in srgb, var(--primary) 4%, var(--card)); }
.ms-current-tag { color: var(--primary); font-size: var(--fs-caption); font-weight: 600; }
.ms-name { font-size: var(--fs-title); font-weight: 600; overflow-wrap: anywhere; }
.ms-period { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--ink-2); font-size: var(--fs-body); }
.ms-status { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-hint { color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.6; }
.ms-setup { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-caption); color: var(--muted); }
.ms-setup li { display: inline-flex; align-items: center; gap: 6px; }
.ms-setup-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 9999px; border: 1px solid var(--line-input); font-size: 11px; font-weight: 600; }
.ms-setup li.is-active { color: var(--ink); font-weight: 600; }
.ms-setup li.is-active .ms-setup-num { border-color: var(--primary); background: var(--primary); color: #fff; }
.ms-setup li.is-done .ms-setup-num { border-color: var(--primary); color: var(--primary); }
.ms-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.ms-danger-text { color: color-mix(in srgb, var(--mesh-5) 70%, var(--ink)); }
.ms-danger { background: color-mix(in srgb, var(--mesh-5) 80%, var(--ink)); border-color: transparent; }
.ms-empty { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.ms-flow { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; list-style: decimal; color: var(--ink-2); font-size: var(--fs-body); }
.ms-flow a { font-weight: 600; }
.ms-pre { white-space: pre-line; }
.ms-quote { color: var(--ink-2); font-style: italic; }
.ms-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

/* 등록 창 — 단계 셋. 창 안이 길어지면 창 안에서 스크롤(앱 wizard-modal). */
.ms-dialog { width: 100%; max-width: min(560px, calc(100vw - 32px)); }
.ms-dialog .manage-dialog-body { max-height: calc(100vh - 48px); overflow-y: auto; }
.ms-dialog-narrow { width: 100%; max-width: min(480px, calc(100vw - 32px)); }
.ms-dialog-narrow .manage-dialog-body { max-height: calc(100vh - 48px); overflow-y: auto; }
.ms-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ms-dialog-head h2 { margin: 0; }
.ms-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ms-steps li { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: var(--fs-caption); }
.ms-step-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 9999px; border: 1px solid var(--line-input); font-size: 11px; font-weight: 600; }
.ms-steps li.is-active { color: var(--ink); font-weight: 600; }
.ms-steps li.is-active .ms-step-num { border-color: var(--primary); background: var(--primary); color: #fff; }
.ms-steps li.is-done { color: var(--ink-2); }
.ms-steps li.is-done .ms-step-num { border-color: var(--primary); color: var(--primary); }
.ms-pane { display: flex; flex-direction: column; gap: 14px; }
.ms-now { color: var(--ink-2); font-size: var(--fs-body); }
.ms-now strong, .ms-now b { color: var(--ink); }
.ms-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 400px) { .ms-regions { grid-template-columns: minmax(0, 1fr); } }
.ms-regions select:disabled { opacity: .55; }
.ms-prompt { padding: 16px; border: 1px dashed var(--line-input); border-radius: var(--radius-lg); color: var(--muted); font-size: var(--fs-body); text-align: center; }
.ms-loading { color: var(--muted); font-size: var(--fs-caption); }
.ms-results { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* 결과 줄 — 줄 전체가 누르는 면(56px+). */
.ms-result {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line-input); border-radius: var(--radius-lg);
  background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer;
}
.ms-result:hover { border-color: var(--primary); }
.ms-result:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ms-result-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ms-result-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-body); }
.ms-result-name b { font-weight: 600; overflow-wrap: anywhere; }
.ms-result-meta { color: var(--muted); font-size: var(--fs-caption); }
.ms-result-go { flex: none; color: var(--primary); font-size: var(--fs-caption); font-weight: 600; }
.ms-newcta { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.ms-wide { width: 100%; }
.ms-back { align-self: flex-start; min-height: 44px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 600; }
.ms-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-caption); }
.ms-or::before, .ms-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ms-similar, .ms-confirm { display: flex; flex-direction: column; gap: 12px; }
.ms-similar h3 { margin: 0; }
.ms-picked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--primary) 6%, var(--card)); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); }
.ms-picked-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; background: var(--primary); color: #fff; font-weight: 700; }
.ms-picked-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ms-picked-text b { font-weight: 600; overflow-wrap: anywhere; }
.ms-picked-text span { color: var(--ink-2); font-size: var(--fs-caption); }
.ms-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 400px) { .ms-cols { grid-template-columns: minmax(0, 1fr); } }
.ms-admin { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ms-admin-fields, .ms-ap-fields { display: flex; flex-direction: column; gap: 12px; }
.ms-doc-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ms-doc-name { color: var(--ink-2); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.ms-warn { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 14px 10px 30px; border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.6; list-style: disc; }
.ms-rm-opt { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ms-rm-opt > span { display: flex; flex-direction: column; gap: 2px; }

/* ── 카드 내려오기(2026-10-31 — 홈 '교인이라면'·교회 띠, site/motion.js) ─────────────────────────────────────────────────────────────────
   목록이 화면에 들어올 때마다(완전히 나갔다 다시 오면 또) 카드가 위에서 28px 내려오며 나타난다. 전환은 is-in 에만 두어 되돌아갈 때는 움직임 없이 제자리로 — 0.12초씩 늦게, 끝은 부드럽게 멈추는 곡선(ease-out). 숨기는 것은 스크립트가 붙이는
   `is-armed` 뿐이라 스크립트가 없으면 처음부터 보인다. 줄이 바뀌어도(2열·1열) 순서는 목록 순서 그대로다. */
[data-drop].is-armed > li { opacity: 0; transform: translateY(-28px); }
[data-drop].is-armed.is-in > li {
  opacity: 1; transform: none;
  transition: opacity .55s ease-out, transform .75s cubic-bezier(.22, 1, .36, 1);
}
[data-drop].is-armed.is-in > li:nth-child(2) { transition-delay: .12s; }
[data-drop].is-armed.is-in > li:nth-child(3) { transition-delay: .24s; }
[data-drop].is-armed.is-in > li:nth-child(4) { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  [data-drop].is-armed > li { opacity: 1; transform: none; transition: none; }
}

/* ── 교회 지도(2026-10-31 — /churches/ 의 [목록 | 지도], 교회 상세의 작은 지도. site/churches.js · 카카오맵 SDK) ───────────────────────────── */
.ch-views { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 9999px; background: var(--card); }
.ch-view {
  min-height: 36px; min-width: 64px; padding: 0 16px; border: 0; border-radius: 9999px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: var(--fs-body); font-weight: 600; cursor: pointer;
}
.ch-view.is-on { background: var(--primary); color: #fff; }
.ch-view:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ch-map-box { display: flex; flex-direction: column; gap: 8px; }
/* 지도 칸은 높이를 스스로 가져야 한다(SDK 가 부모 크기로 그린다) — 화면의 6할, 폰에서도 360px 은. */
.ch-map { width: 100%; height: 60vh; min-height: 360px; max-height: 640px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-soft); }
.ch-map-sm { height: 220px; min-height: 0; }
.ch-map-note { color: var(--muted); font-size: var(--fs-caption); }
.ch-detail-map { display: flex; flex-direction: column; gap: 8px; }
/* 표시를 누르면 뜨는 작은 카드 — 지도 위 맨 앞. 글자는 시스템 글꼴(교회 이름). */
.ch-pin {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 180px; max-width: 240px; padding: 10px 34px 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); box-shadow: var(--shadow-2);
  font-size: var(--fs-caption); line-height: 1.5;
}
.ch-pin b { font-size: var(--fs-body); font-weight: 600; overflow-wrap: anywhere; }
.ch-pin span { color: var(--muted); }
.ch-pin a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; }
.ch-pin-x { position: absolute; top: 2px; right: 2px; width: 32px; height: 32px; border: 0; border-radius: 9999px; background: transparent; color: var(--ink-2); font-size: 18px; cursor: pointer; }