/* 처치로그 랜딩 공용 스타일 — 홈(/)과 기능 페이지(/features/*·/demo)가 함께 쓴다.
   폼 3종(/apply·/contact·/ads)은 별도의 form.css 다(입력 위주라 필요한 것이 다르다).
   ⚠️ 폰트·색 토큰·헤더·푸터 기본형은 두 파일에 나뉘어 있다 — 한쪽만 고치면 어긋난다. */

/* 실제 앱과 동일한 Pretendard — 페이지 등장 글리프만 서브셋(각 ~53KB, 폰트 원본은
   앱 번들 폰트와 동일 파일). 외부 요청 없음(same-origin). 미포함 글리프(폼 입력 등)는
   시스템 폰트로 폴백. 앱과 동일하게 400/600/700 세 웨이트만 존재한다.
   ⚠️ 폰트는 immutable 1년 캐시 — 글리프를 추가하면 scripts/landing-fonts/subset.py 로 다음
   버전(.vN)을 만들고, 여기와 form.css·LandingPageRoutes.kt 화이트리스트를 같이 올릴 것. */
@font-face { font-family: "Pretendard"; src: url("/landing/fonts/pretendard-regular.v11.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/landing/fonts/pretendard-semibold.v11.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/landing/fonts/pretendard-bold.v11.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --ink: #191f28; --sub: #4e5968; --hint: #8b95a1;
  --bg: #f2f4f6; --card: #ffffff; --line: #e5e8eb;
  --blue: #3182f6; --danger: #d22030; --ok: #1b8a4c;
}
* { box-sizing: border-box; }
/* 헤더가 sticky 라 앵커 목적지가 그 밑에 깔린다(실측 데스크탑 61px, 폰은 기능 nav 가
   둘째 줄로 내려가 91px). #features 로 뛰었을 때 제목이 가리지 않게 그만큼 띄운다. */
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
/* 히어로 목업의 가로 bleed 차단은 hidden 이 아니라 clip —
   body 에 overflow-x:hidden 을 주면 다른 축이 auto 로 강제되며 body 가 별도 스크롤
   컨테이너가 되어 window 스크롤(앵커 이동)과 IntersectionObserver reveal 이 깨진다. */
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--card); color: var(--ink);
  font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.2px;
}
a { color: inherit; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ── 헤더 ── */
header.top {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
header.top.scrolled { border-bottom-color: var(--line); }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { font-size: 19px; font-weight: 800; letter-spacing: -0.5px; text-decoration: none; }
.topnav { display: flex; align-items: center; gap: 18px; }
.adminlink { font-size: 14px; font-weight: 500; color: var(--sub); text-decoration: none; }
.adminlink:hover { color: var(--ink); }

/* ── 상단 기능 nav ──
   콘텐츠 페이지(홈·/features/*·/demo·/member-app) 전부에 같은 순서·같은 짧은 앵커로
   반복되는 글로벌 nav. 사람에게는 주제 바로가기이고, 크롤러에게는 사이트 계층 그 자체다
   — 구글 사이트링크는 이렇게 모든 페이지에 반복되는 내부 링크에서 자동 생성되며 마크업으로
   선언할 방법이 없다. 그래서 라벨은 2글자로 짧게 두고(사이트링크 라벨이 앵커 텍스트에서
   나온다) 페이지마다 문구를 흔들지 않는다. 축 4개는 홈 <title> 의 "교적·출석·재정·심방"
   과 같은 순서다 — 검색결과의 제목과 링크 줄이 같은 말을 해야 한다.

   기능 페이지에는 바로 아래에 .subnav(12개 섹션 탭)가 또 있어서, 둘 다 회색 중간 굵기면
   같은 줄이 두 번 찍힌 것처럼 읽힌다. 그래서 이쪽만 잉크색·굵게 둬서 1차 nav 로 보이게 하고
   .subnav 는 회색 탭으로 남긴다(1차 nav + 섹션 탭, 흔한 2단 구성).
   같은 이유로 aria-label 도 갈라 둔다 — "주요 기능"(이 nav) / "전체 기능"(.subnav).
   둘 다 "기능 메뉴" 면 스크린리더 랜드마크 목록에 구분 안 되는 영역이 둘 뜬다. */
.mainnav { margin-left: 24px; margin-right: auto; gap: 22px; }
.mainnav a { font-size: 15px; font-weight: 700; color: var(--ink);
             text-decoration: none; white-space: nowrap; letter-spacing: -0.3px; }
.mainnav a:hover { color: var(--blue); }
.mainnav a[aria-current="page"] { color: var(--blue); }
.btn {
  display: inline-block; border: none; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: 15px; font-weight: 700; padding: 11px 18px; text-decoration: none;
  font-family: inherit; cursor: pointer; letter-spacing: -0.2px; text-align: center;
}
.btn:hover { background: #333d4b; }
.btn.big { font-size: 17px; padding: 16px 28px; border-radius: 14px; }
.btn.ghost { background: var(--bg); color: var(--ink); }
.btn.ghost:hover { background: var(--line); }

/* ── 공통 섹션 ── */
section { padding: 96px 0; }
section.alt { background: var(--bg); }
.eyebrow { font-size: 14px; font-weight: 800; color: var(--blue); margin: 0 0 10px; letter-spacing: 0; }
h1 { font-size: clamp(30px, 5.4vw, 54px); line-height: 1.24; letter-spacing: -1.2px; margin: 0 0 20px; word-break: keep-all; }
h2 { font-size: clamp(24px, 3.6vw, 38px); line-height: 1.3; letter-spacing: -0.8px; margin: 0 0 14px; word-break: keep-all; }
.lead { font-size: clamp(15px, 2vw, 18px); color: var(--sub); line-height: 1.7; margin: 0 0 36px; max-width: 640px; word-break: keep-all; }

/* ── 히어로 ── */
.hero { padding: 72px 0 96px; }
/* 상하 스택 — 매트릭스 목업을 12주 폭(773px)으로 키우면서 텍스트 옆자리(≈484px)를
   포기했다. 4주짜리 좁은 표는 "관리 도구" 인상이 안 나서(2026-08-25 피드백) 한 학기치
   데이터 벽을 히어로로 쓴다. 목업 bleed 는 html overflow-x:clip 이 막는다. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
.hero-grid > div:first-child { max-width: 780px; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-note { margin: 12px 0 0; font-size: 13px; color: var(--sub); letter-spacing: -0.2px; word-break: keep-all; }
.hero-proof { margin: 26px 0 0; display: flex; flex-direction: column; gap: 6px;
              font-size: 13.5px; color: var(--sub); letter-spacing: -0.2px; word-break: keep-all; }
.hero-proof b { color: var(--ink); font-weight: 600; }
.hero-proof .hp-nums { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hero-proof .hp-nums i { font-style: normal; color: #b0b8c1; }
.hero-visual { display: flex; align-items: center; justify-content: flex-start; position: relative; min-height: 460px; }

/* ══ 실제 앱 화면 재현 목업 ══
   색·수치·문구는 전부 실제 앱 코드에서 추출: theme/Color.kt(토스 팔레트)·ChurchHubColors.kt(출석 상태색)·
   HomeScreen.kt·GroupAttendanceScreen.kt/AttendanceCell.kt·AttendanceStatsDialog.kt(CareCard)·
   BirthdaySection.kt·QtFaithfulnessSheet.kt·PrayerWallScreen.kt·DailyVerseWidget.kt. 임의 변형 금지. */
:root {
  --app-blue: #3182f6; --app-deep: #1b64da; --app-bg: #f2f4f6; --app-chip: #eaedf0;
  --app-ink: #191f28; --app-sub: #4e5968; --app-hint: #8b95a1; --app-line: #e5e8eb;
}
.mock, .mock * { letter-spacing: 0; word-break: keep-all; }

/* 성도 앱 카드 안 실기기 캡처 두 장 — 위쪽만 보이게 잘라 카드 높이를 지킨다. */
.duo-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.duo-shots.one { grid-template-columns: 1fr; }
.duo-shots.one img { height: 210px; object-position: left top; }
.duo-shots img { display: block; width: 100%; height: 210px; object-fit: cover; object-position: top;
                 border-radius: 14px; border: 1px solid var(--line); background: #fff; }

/* — 폰 프레임: memberApp 홈 — */
.phone { width: 272px; flex: 0 0 auto; border-radius: 42px; background: #fff; border: 1px solid var(--line);
  /* -6px — 프레임 테두리만 살짝 겹치고 12주 그리드의 끝 열(가장 오래된 주) 셀은 안 덮는 한계값.
     -26px 였을 때 마지막 열이 4px 가려졌다(실측). 프레임 773 + 폰 272 - 6 = 1039 ≤ 컨테이너 1040. */
  box-shadow: 0 24px 60px rgba(25,31,40,0.14); padding: 10px; position: relative; z-index: 2; margin-left: -6px; }
.phone .screen { border-radius: 33px; background: var(--app-bg); overflow: hidden; height: 526px; }
/* 실기기 캡처를 위에서부터 보여준다 — 아래는 프레임 높이에 맞춰 잘린다. */
.phone .screen img { display: block; width: 100%; height: auto; }
/* 히어로 폰만 예외 — m-home 캡처(720×1449)는 탭 라벨 바로 밑에서 끝나, 250px 폭에서 503px 라
   프레임(526px)보다 23px 짧다. 그 띠가 앱 배경(회색)이면 탭바가 폰 바닥에서 떠 있는 카드처럼
   보인다(2026-09-02 피드백). 실기기의 제스처 영역처럼 흰색으로 잇고 홈 인디케이터를 얹는다.
   다른 폰 목업의 캡처는 720×1536 이라 프레임보다 길어(533px) 잘리므로 이 규칙을 타면 안 된다 —
   인디케이터가 탭 라벨 위에 겹친다. */
.hero-visual .phone .screen { background: #fff; position: relative; }
.hero-visual .phone .screen::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 96px; height: 4px;
  margin-left: -48px; border-radius: 2px; background: #1b1f26; opacity: 0.28; }
/* ── 실제 화면 캡처 ──────────────────────────────────────────────
   손으로 그린 목업이 아니라 데모 교회에서 그대로 찍은 관리자 화면이다.
   브라우저 크롬(점 3개 + 주소줄)을 씌워 "제품 화면"임이 바로 읽히게 한다. */
.shot { border-radius: 14px; overflow: hidden; background: #fff;
        border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(16,24,40,0.10); }
.shot .sb { display: flex; align-items: center; gap: 6px; padding: 9px 12px;
            background: #f6f7f9; border-bottom: 1px solid var(--line); }
.shot .sb i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.shot .sb .u { margin-left: 8px; font-size: 11px; color: #8b95a1; letter-spacing: -0.2px; }
.shot img { display: block; width: 100%; height: auto; }
.shot-cap { margin-top: 12px; font-size: 13px; color: var(--sub); letter-spacing: -0.2px; word-break: keep-all; }
.shot-cap b { color: var(--ink); font-weight: 600; }
.shot-note { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
             font-size: 12.5px; font-weight: 600; color: #3182f6;
             background: rgba(49,130,246,0.09); border-radius: 999px; padding: 5px 12px; }

/* ── 그 밖의 기능 한 줄 목록 ── */
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 26px; }
.more-grid li { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line);
                font-size: 14.5px; color: var(--sub); word-break: keep-all; }
.more-grid li b { color: var(--ink); font-weight: 600; flex: 0 0 auto; }
.more-list { list-style: none; margin: 0; padding: 0; }

/* 공지 상세 목업 — 첨부 사진·대상 지정·투표를 한 장에서 보여준다. */
/* 첨부 사진 썸네일 — 데모 테넌트의 실제 공지 포스터를 축소해 인라인으로 넣었다(외부 요청 없음). */

/* — 히어로 데스크탑: adminApp 출석현황 **실캡처** —
   원래는 매트릭스를 손으로 그린 목업이었다. 12주 열·셀 문구·출석률 배지까지 앱 코드에서
   값을 옮겨 그렸는데도 실물과 어긋나 "억지로 그린 것 같다"는 피드백을 받았고(2026-08-27),
   무엇보다 이 페이지의 다른 화면은 전부 실캡처라 히어로만 규칙 밖이었다. 섹션과 같은
   .shot 프레임을 쓰고 폭만 고정한다 — 773px 는 폰 프레임(272)과 -6px 로 겹쳐
   컨테이너 1040 에 들어가는 값(폰 마진 주석과 한 쌍). */
.hero-visual .shot { width: 773px; flex: 0 0 auto; position: relative; z-index: 1; }

/* — 셀 팝업(출석 출처) — */

/* — 돌봄 카드(CareCard, adminApp 출석 통계) — */

/* — 생일 목양 카드(BirthdaySection, adminApp) — */

/* — 오늘의 말씀 홈 위젯(Android Glance, 라이트=흰 카드) — */
.vwidget { width: 225px; max-width: 100%; background: #fff; border-radius: 15px; padding: 12px; box-shadow: 0 12px 32px rgba(25,31,40,0.10); }
.vwidget .wl { font-size: 8.5px; font-weight: 500; color: var(--app-hint); }
.vwidget .wt { font-size: 10.5px; line-height: 1.55; font-weight: 500; color: var(--app-ink); margin-top: 6px; }
.vwidget .wr { font-size: 8.5px; color: var(--app-hint); margin-top: 6px; }

/* — 묵상 캘린더(QtFaithfulnessSheet — 파란 원, 잔디 아님) — */
.qtcal { width: 300px; max-width: 100%; background: #fff; border-radius: 16px; padding: 13px; box-shadow: 0 0 12px rgba(0,0,0,0.07); }
.qtcal .qt1 { font-size: 11px; font-weight: 700; color: var(--app-ink); }
.qtcal .qt2 { font-size: 8.5px; color: var(--app-sub); margin-top: 2px; }
.qtcal .qm { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; font-size: 9.5px; font-weight: 600; color: var(--app-ink); }
.qtcal .qm .nav { color: var(--app-sub); font-weight: 400; }
.qtcal .qgrid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; margin-top: 8px; }
.qtcal .wd { text-align: center; font-size: 7.5px; color: var(--app-sub); padding-bottom: 2px; }
.qtcal .wd.sun { color: #e53935; }
.qtcal .wd.sat { color: var(--app-blue); }
.qtcal .day { display: flex; align-items: center; justify-content: center; height: 24px; }
.qtcal .day i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: var(--app-sub); }
.qtcal .day.did i { background: var(--app-deep); color: #fff; font-weight: 600; }
.qtcal .day.today i { border: 1.5px solid var(--app-deep); color: var(--app-deep); font-weight: 600; }
.qtcal .day.future i { color: rgba(78,89,104,0.35); }
.qtcal .qsum { background: #edf3fc; border-radius: 10px; padding: 9px 11px; margin-top: 10px; }
.qtcal .qsum b { display: block; font-size: 9.5px; font-weight: 600; color: var(--app-ink); }
.qtcal .qsum span { display: block; font-size: 8.5px; color: var(--app-sub); margin-top: 2px; }

/* — 기도의 벽 카드(PrayerWallScreen) — */
.pray { width: 320px; max-width: 100%; background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 0 12px rgba(0,0,0,0.08); }
.pray .ph { display: flex; align-items: center; gap: 7px; }
.pray .pav { width: 24px; height: 24px; border-radius: 50%; background: var(--app-chip); color: var(--app-hint); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pray .pav svg { width: 12px; height: 12px; }
.pray .pw { flex: 1; min-width: 0; }
.pray .pn { font-size: 9.5px; font-weight: 600; color: var(--app-ink); }
.pray .pd { font-size: 8px; color: var(--app-sub); margin-top: 1px; }
.pray .rep { font-size: 8px; color: rgba(78,89,104,0.8); }
.pray .pt { font-size: 11px; font-weight: 700; color: var(--app-ink); margin-top: 10px; }
.pray .pb { font-size: 9.5px; color: var(--app-sub); line-height: 1.55; margin-top: 5px; }
.pray .pf { display: flex; align-items: center; margin-top: 11px; }
.pray .pbtn { display: inline-flex; align-items: center; gap: 4px; background: rgba(49,130,246,0.12); color: var(--app-blue); border-radius: 9px; padding: 6px 10px; font-size: 9px; font-weight: 600; }
.pray .pstack { display: flex; align-items: center; margin-left: auto; }
.pray .pstack i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #fff; margin-left: -6px; }
.pray .pstack i:first-child { margin-left: 0; }
.pray .pstack .pn2 { font-size: 8px; font-weight: 600; color: var(--app-sub); margin-left: 4px; }

/* — 일정 탭 — 데모 교회 실기기 캡처(m-calendar.webp, 히어로 m-home 과 같은 규격).
   프레임만 그리고 화면은 캡처 그대로 — 전체 화면(탭바 포함)이 보이도록 높이는 이미지를 따른다. */
.cal-visual { display: flex; justify-content: center; }
.cal-wrap { width: 272px; }
.cal-wrap .phone { margin-left: 0; }
.cal-wrap .screen { height: auto; }

/* ── 장면 카드 ── */
.scene-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.scene {
  background: var(--card); border-radius: 20px; padding: 28px 26px;
  border: 1px solid var(--line);
}
.scene .s-emoji { font-size: 26px; margin-bottom: 12px; }
.scene h3 { font-size: 18px; margin: 0 0 8px; letter-spacing: -0.4px; line-height: 1.4; word-break: keep-all; }
.scene p { font-size: 14px; color: var(--sub); line-height: 1.65; margin: 0 0 14px; word-break: keep-all; }
.scene .s-fix { font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: none; }

/* ── 제품 구성 ── */
.duo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
.duo-card { background: var(--bg); border-radius: 24px; padding: 34px 30px; }
.duo-card.inkish { background: var(--ink); color: #fff; }
.duo-card .platforms { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.chip { font-size: 12px; font-weight: 700; border-radius: 8px; padding: 4px 9px; background: rgba(25,31,40,0.06); color: var(--sub); }
.inkish .chip { background: rgba(255,255,255,0.14); color: #d5dae1; }
.duo-card h3 { font-size: 22px; margin: 0 0 10px; letter-spacing: -0.5px; }
.duo-card p { font-size: 15px; line-height: 1.7; margin: 0; color: var(--sub); word-break: keep-all; }
.inkish p { color: #b0b8c1; }
.duo-link { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--sub); white-space: nowrap; }

/* ── 피처 섹션 공통 ── */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.flist { list-style: none; margin: 0; padding: 0; }
.flist li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.flist li:last-child { border-bottom: none; }
.flist .fi { flex: 0 0 auto; font-size: 18px; line-height: 1.4; }
.flist b { display: block; font-size: 16px; margin-bottom: 3px; letter-spacing: -0.3px; }
.flist span { font-size: 14px; color: var(--sub); line-height: 1.6; word-break: keep-all; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* 교회 살림은 카드 4장 — 3열이면 마지막 한 장이 홀로 남아 2×2 로 맞춘다. */
#finance .card-grid { grid-template-columns: repeat(2, 1fr); }
.fcard { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px; }
section.alt .fcard { border-color: transparent; }
.fcard .f-emoji { font-size: 24px; margin-bottom: 12px; }
.fcard h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -0.4px; }
.fcard p { font-size: 14px; color: var(--sub); line-height: 1.65; margin: 0; word-break: keep-all; }

/* 알림 목업 */
.notif {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
  display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 12px 32px rgba(25,31,40,0.08);
  max-width: 380px;
}
.notif .n-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: var(--ink);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.notif .n-app { font-size: 11px; color: var(--hint); font-weight: 700; margin-bottom: 2px; }
.notif .n-title { font-size: 14px; font-weight: 700; letter-spacing: -0.3px; }
.notif .n-body { font-size: 13px; color: var(--sub); margin-top: 2px; line-height: 1.5; word-break: keep-all; }
.notif-stack { display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* — 자동 출석 미니 매트릭스 패널 — */

/* — 홈 카드 스트립(접수 중인 신청·봉사 — HomeApplicationDeadline/HomeServingCard) — */

/* — 헌금 계좌 안내 시트(OfferingAccountSheet) — */
.sheet .sh-chip.on { background: var(--app-blue); color: #fff; font-weight: 600; }

/* ── 신뢰 (다크) ── */
.trust { background: var(--ink); color: #fff; }
.trust h2 { color: #fff; }
.trust .lead { color: #b0b8c1; }
.trust .flist li { border-bottom-color: rgba(255, 255, 255, 0.10); }
.trust .flist b { color: #fff; }
.trust .flist span { color: #b0b8c1; }
.trust a { color: #d5dae1; }

/* ── 도입 절차 ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px 26px; position: relative; }
.step .num {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; margin-bottom: 16px;
}
.step h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -0.4px; }
.step p { font-size: 14px; color: var(--sub); line-height: 1.65; margin: 0; word-break: keep-all; }

/* ── FAQ ── */
.faq-list { max-width: 720px; }
details.faq { border-bottom: 1px solid var(--line); }
details.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.3px; word-break: keep-all;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-size: 20px; color: var(--hint); font-weight: 400; flex: 0 0 auto; }
details.faq[open] summary::after { content: "−"; }
details.faq .a { padding: 0 4px 22px; font-size: 15px; color: var(--sub); line-height: 1.7; word-break: keep-all; }

/* ── 마무리 CTA (다크 밴드 — 폼은 /apply·/contact 전용 페이지로 분리) ── */
.cta-final { background: var(--ink); color: #fff; }
.cta-final h2 { color: #fff; }
.cta-final .lead { color: #b0b8c1; }
.cta-final .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn.inverse { background: #fff; color: var(--ink); }
.btn.inverse:hover { background: #e8ebee; }
.btn.outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.45); }
.btn.outline:hover { background: rgba(255,255,255,0.10); }


/* ── 푸터 ── */
footer { border-top: 1px solid var(--line); padding: 40px 0 56px; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot .fbrand { font-size: 15px; font-weight: 800; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { font-size: 13px; color: var(--sub); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .copy { font-size: 12px; color: var(--sub); width: 100%; margin-top: 4px; }

/* ── 스크롤 리빌 ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 반응형 ── */
/* 1150px 이하에서는 두 목업이 나란히 설 폭이 없다 — 데스크탑 목업을 접고 폰만 중앙에. */
@media (max-width: 1150px) {
  .hero-visual .shot { display: none; }
  .hero-visual { justify-content: center; }
  .phone { margin-left: 0; }
}
@media (max-width: 900px) {
  section { padding: 64px 0; }
  .hero { padding: 44px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { min-height: 0; }
  .feature-split { grid-template-columns: 1fr; gap: 36px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .more-grid { grid-template-columns: repeat(2, 1fr); gap: 4px 22px; }
  .steps { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .duo-link { padding: 2px 0; }
}
@media (max-width: 700px) {
  /* 폰에서는 헤더를 두 줄로 쪼갠다. 셋이 한 줄에서 폭을 나눠 가지면 다 눌려
     "처치로" / "그" 처럼 줄바꿈이 난다. 숨기지는 않는다 — 구글은 모바일 화면을 기준으로
     색인하므로, 이 링크들이 폰에서 안 보이면 넣은 의미가 없다.

     ⚠️ 내려보내는 건 기능 nav 가 아니라 **유틸 nav** 다. flex `order` 로 기능 nav 를
     둘째 줄에 보내면 DOM 순서는 그대로라 탭 이동이 "로고 → (아랫줄)기능 → (윗줄)CTA" 로
     화면과 어긋난다(WCAG 2.4.3). 유틸 nav 는 DOM 에서도 마지막이라 `width:100%` 만으로
     둘째 줄이 되고, 그러면 order 없이 눈에 보이는 순서 = 탭 순서가 된다. */
  html { scroll-padding-top: 106px; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 20px; row-gap: 6px; }
  .topbar .logo, .topbar .btn { white-space: nowrap; }
  .mainnav { margin-left: 14px; gap: 18px; flex: 1 1 auto; min-width: 0;
             overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mainnav::-webkit-scrollbar { display: none; }
  .topbar .topnav:not(.mainnav) { width: 100%; justify-content: flex-end; }
  /* 기능 페이지는 헤더 바로 아래 .subnav 가 같은 링크를 12개로 더 넓게 갖고 있다.
     좁은 화면에서 같은 띠가 두 줄로 겹치면 헤더만 두 번 읽힌다. 기능 nav 가 없으면
     유틸 nav 를 내려보낼 이유도 없다 — 로고와 한 줄로 되돌린다. */
  body.feature .mainnav { display: none; }
  body.feature .topbar .topnav:not(.mainnav) { width: auto; }
}
@media (max-width: 600px) {
  .scene-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .more-grid { grid-template-columns: 1fr; }
  .topnav .adminlink { display: none; }
  .btn.big { width: 100%; }
}

/* ══ 기능 상세 페이지(/features/*·/demo) 전용 ══
   홈은 스토리를 위에서 아래로 읽히는 한 장이고, 이 페이지들은 한 주제를 끝까지 설명한다.
   그래서 섹션 간격을 홈보다 좁히고, 헤더 아래에 기능 간 이동줄(subnav)을 둔다.
   이 이동줄은 사람이 옆 기능으로 건너가는 길이면서, 크롤러가 사이트 구조를 읽는 자리이기도 하다
   (구글 사이트링크는 이런 내부 링크에서 자동 생성된다 — 선언할 방법이 없다). */
body.feature section { padding: 72px 0; }

.subnav { border-bottom: 1px solid var(--line); background: var(--card); }
/* 폰에서는 가로 스크롤로 넘긴다 — 6개를 줄바꿈하면 헤더가 두 줄이 된다. */
.subnav-row { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.subnav-row::-webkit-scrollbar { display: none; }
.subnav-row a { flex: 0 0 auto; padding: 13px 11px; font-size: 14px; font-weight: 600; color: var(--sub);
                text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.subnav-row a:hover { color: var(--ink); }
.subnav-row a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* 위 여백은 빵부스러기(.crumb)가 이미 만들어 준다 — 섹션 기본 72px 를 그대로 두면 제목이 붕 뜬다.
   `body.feature section`(0,2,1)보다 우선순위가 높아야 해서 같은 스코프로 쓴다. */
body.feature .sub-hero { padding: 24px 0 44px; }
.sub-hero h1 { font-size: clamp(28px, 4.6vw, 44px); letter-spacing: -1px; }
.sub-hero .lead { margin-bottom: 26px; }
.sub-hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.crumb { font-size: 13px; color: var(--hint); margin: 0 0 14px; }
.crumb a { color: var(--sub); text-decoration: none; }
.crumb a:hover { color: var(--ink); }

.card-grid.two { grid-template-columns: repeat(2, 1fr); }

/* ── 기능 목차의 그룹 라벨 ── */
.grp { font-size: 13px; font-weight: 800; color: var(--hint); letter-spacing: 0;
       margin: 30px 0 12px; }
.grp:first-of-type { margin-top: 0; }

/* ── 전체 기능 체크리스트 — "이것도 되나?" 를 한 화면에서 답하는 자리 ── */
.allfeat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 26px; }
.allfeat h3 { font-size: 14px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.2px; }
.allfeat ul { list-style: none; margin: 0; padding: 0; }
.allfeat li { font-size: 13.5px; color: var(--sub); line-height: 1.5; padding: 7px 0;
              border-bottom: 1px solid var(--line); word-break: keep-all; }
.allfeat li:last-child { border-bottom: none; }
.allfeat li b { color: var(--ink); font-weight: 600; }

/* ── 관련 기능(페이지 끝 내부 링크) ── */
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* 네 장짜리 그룹은 3열에 두면 마지막 한 장이 홀로 남는다 — 그 줄만 4열로. */
.rel-grid.four { grid-template-columns: repeat(4, 1fr); }
.rel { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
       padding: 20px 18px; text-decoration: none; }
.rel:hover { border-color: var(--hint); }
.rel b { display: block; font-size: 16px; margin-bottom: 6px; letter-spacing: -0.3px; }
.rel span { display: block; font-size: 13.5px; color: var(--sub); line-height: 1.6; word-break: keep-all; }

/* 기능 페이지 본문 안 링크. `body.feature` 로 묶은 이유는 홈의 신뢰 섹션(.trust) 때문이다 —
   `.flist span a` 는 `.trust a` 보다 우선순위가 높아, 스코프를 안 두면 어두운 배경 위 링크가
   파란색으로 바뀐다. */
/* .fcard 는 어두운 신뢰 섹션에 쓰이지 않으므로 스코프가 필요 없다(홈의 카드 안 링크도 이 규칙). */
.fcard p a { color: var(--blue); font-weight: 600; text-decoration: none; }
.fcard p a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.feature .flist span a { color: var(--blue); font-weight: 600; text-decoration: none; }
body.feature .flist span a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 홈 섹션 → 상세 페이지로 보내는 링크 ── */
.more-link { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 700;
             color: var(--blue); text-decoration: none; }
.more-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 푸터(기능 링크를 담느라 2단으로) ── */
.foot-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-brand p { font-size: 13px; color: var(--sub); margin: 9px 0 0; max-width: 280px;
                line-height: 1.65; word-break: keep-all; }
.foot-links { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-links div { display: flex; flex-direction: column; gap: 9px; }
.foot-links b { font-size: 13px; font-weight: 700; }
.foot-links a { font-size: 13px; color: var(--sub); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
/* .foot(플렉스) 밖으로 나와서 width:100% 가 안 먹는다 — 인라인 span 이라 block 으로 세운다. */
footer .copy { display: block; font-size: 12px; color: var(--sub); margin-top: 28px; }

@media (max-width: 900px) {
  .rel-grid, .rel-grid.four { grid-template-columns: 1fr; }
  .allfeat { grid-template-columns: repeat(2, 1fr); }
  .foot-links { gap: 36px; }
}
@media (max-width: 600px) {
  /* `.card-grid.two`(0,2,0)·`#finance .card-grid`(1,1,0) 는 위 반응형의 `.card-grid`(0,1,0) 보다
     우선순위가 높다 — 미디어쿼리 안이라고 이기는 게 아니다. 폰에서 2열로 남아 카드가
     160px 로 찌그러지므로 여기서 같은 우선순위로 다시 1열로 되돌린다. */
  .card-grid.two, #finance .card-grid { grid-template-columns: 1fr; }
  .allfeat { grid-template-columns: 1fr; gap: 24px; }
  body.feature .sub-hero { padding: 14px 0 32px; }
}