/* 설교 준비 도구 — 화면 형식
 *
 * ★형식의 정본은 오너가 운영 중인 두 사이트다(예담청소년센터 · 주섬기는교회).
 *   색·서체·괘선·여백은 ★그 styles.css 에 있는 것만 쓴다 — 새로 만들지 않는다.
 *   그게 「같은 형식」의 뜻이다.
 * ★우리는 소개형 사이트가 아니라 도구다. 그래서 히어로는 짧고,
 *   ★단계 지도(7단계 + 상시 2)를 맨 위에 둔다 — 오너 불만의 핵심이
 *   「어디서부터 손을 대야 하는지 모르겠다」였다.
 *
 * ★검사가 붙들고 있는 값(tools/checks/check_a11y.mjs)은 바꾸지 않는다:
 *   --ink/--paper/--muted/--accent 는 6자리 hex 리터럴 · --fs>=18 · --fs-lg>=20
 *   · max-width:820px 존재 · @media (max-width: 600px) 존재
 *   · input[type=checkbox]{width:24px · ★고정 width:NNNpx 금지(가로 스크롤 위험)
 */

:root{
  /* ── 종이와 잉크 (정본 팔레트 그대로) */
  --paper:#FFFFFF;
  --paper-2:#F4F7FA;
  --paper-3:#EDF2F7;
  --ink:#141B24;
  --ink-soft:#3E4A58;
  --muted:#6B7683;
  --navy:#274B73;
  --navy-soft:#3C6B9B;
  --ochre:#A0661F;
  --ochre-lg:#C08430;
  --rule:#D3DAE2;
  --rule-soft:#E5EAF0;

  /* ★--accent 는 검사가 이름으로 찾는다. 정본의 navy 를 리터럴로 둔다.
     실측 대비: 흰 글자 / navy = 8.97:1 (기준 4.5) */
  --accent:#274B73;

  /* ── 서체: 제목은 명조, 본문은 sans, 숫자는 mono.
     ★얼굴을 갈라 위계를 만든다 — 종전에는 전부 한 얼굴이라 크기로만 위계를 냈다.
     ★전부 로컬 폰트 스택이다(외부 CDN 0 · check_no_network 유지). */
  --serif:"Nanum Myeongjo","NanumMyeongjo","Noto Serif KR","Batang","바탕","AppleMyungjo","Apple SD Gothic Neo",serif;
  --sans:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR",system-ui,sans-serif;
  --mono:"Consolas","SFMono-Regular","SF Mono","Menlo","D2Coding",ui-monospace,monospace;

  /* ── 치수. 목회자 연령대라 정본보다 한 단 키웠다(브리프 §6) */
  --fs:19px;
  --fs-lg:22px;
  --wrap:820px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs);
  line-height:1.82;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  /* ★한글 줄바꿈 — 어절을 안 자른다. 정본이 깔끔해 보이는 이유의 큰 몫이다 */
  word-break:keep-all;
  overflow-wrap:break-word;
}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700;line-height:1.34;text-wrap:balance;font-family:var(--serif)}
p{margin:0}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 공통 폭. ★본문 열은 820px — 한 줄 글자수를 묶어 둔다.
   정본은 1080px 이지만 우리는 소개형이 아니라 ★입력칸이 이어지는 도구라
   한 줄이 길어지면 읽기가 나빠진다. 그래서 한 열로 좁게 간다. */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.ethics,.steps,main{max-width:820px;margin-inline:auto}

/* ── 상단바 ──────────────────────────────────
   정본의 .topbar 형식 — sticky · 아래 1px 괘선 · 네모 표식 + 명조 이름. */
.topbar{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky;top:0;z-index:20;
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-block:.85rem;
  /* ★2026-08-29 — ★줄바꿈을 허용한다.
     ★이게 없으면 좁은 화면에서 ★공유 버튼에 준 width:100% 가 ★눌려서 사라진다
     (오너가 「카톡 전송하기가 사라졌어」로 잡아 준 자리다 · 휴대폰에서 났다). */
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.mark{
  width:38px;height:38px;flex:none;
  border:1.5px solid var(--navy);
  display:grid;place-items:center;
  color:var(--navy);
  font-family:var(--serif);
  font-size:.86rem;font-weight:700;
}
.brand b{font-family:var(--serif);font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
.brand b span{display:block;font-family:var(--sans);font-size:.76rem;color:var(--muted);line-height:1.35;font-weight:500}
/* 표식 — 정본의 .stamp(네모 테두리 + 오커 점) */
.stamp{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--navy);color:var(--navy);
  font-size:.84rem;font-weight:600;
  padding:.35rem .75rem;white-space:nowrap;
}
.stamp i{width:6px;height:6px;background:var(--ochre-lg);display:block;flex:none}

/* ── 히어로 ─────────────────────────────────
   ★짧게 둔다. 우리는 도구라 읽히는 것이 목적이 아니라
   ★아래 단계 지도로 내려보내는 것이 목적이다. */
.hero{
  padding-block:clamp(2.4rem,6vw,3.8rem) clamp(1.8rem,4vw,2.6rem);
  border-bottom:1px solid var(--rule);
}
.hero h1{
  font-size:clamp(1.85rem,4.6vw,2.9rem);
  letter-spacing:-.02em;
  line-height:1.3;
}
.hero h1 em{font-style:normal;color:var(--navy)}
.lede{
  margin-top:1.35rem;
  max-width:820px;
  color:var(--ink-soft);
  font-size:1.06rem;
  line-height:1.8;
}
.lede b{color:var(--ink)}

/* ── 상시 경고 (성도 개인정보) ────────────────────
   ★약하게 만들지 않았다 — 이건 오너 지시의 성공 기준이다(브리프 §5 윤리 게이트).
   다만 정본의 .origin 형식으로 옮겼다: 노란 배경·9px 테두리 대신
   1px 괘선 + 왼쪽 3px 오커. ★눈에는 띄되 첫인상이 경고문이 되지는 않게 한다. */
.ethics{
  margin-top:1.6rem;
  padding:1.15rem 1.4rem;
  border:1px solid var(--rule);
  border-left:3px solid var(--ochre-lg);
  background:var(--paper-2);
  font-size:1rem;
  line-height:1.76;
  color:var(--ink-soft);
}
.ethics strong{
  display:block;
  font-family:var(--serif);
  font-size:1.12rem;
  color:var(--ochre);
  margin-bottom:.5rem;
}
.ethics em{
  font-style:normal;
  color:var(--ink);
  font-weight:600;
  border-bottom:1px solid var(--rule);
}

/* ── ★단계 지도 (7단계 + 상시 2 = 아홉 칸) ────────
   ★오너 불만의 정확한 자리다: 「어디서부터 손을 대야 하는지 모르겠다」.
   그래서 아홉 칸을 ★한 화면에 격자로 편다 — 지금 어디인지, 다음이 무엇인지,
   전부 몇 개인지가 스크롤 없이 보인다. 종전에는 버튼이 줄바꿈으로 흩어져 있었다. */
.steps{
  margin-top:2.2rem;
  /* ★2026-09-01 — 종전에는 ★padding-inline 안쪽에 칸을 두고 ★테두리를 그 ★바깥에 그렸다.
     ⇒ ★위·왼쪽 선이 ★칸보다 여백만큼 길어져 ★오른쪽 위 모서리에서 선이 튀어나와 보였다(오너가 잡음).
     ⇒ ★여백을 없애고 ★폭으로 줄인다. margin-inline 을 쓰면 ★72행의 가운데 정렬(auto)을 덮어써서
       ★격자가 왼쪽으로 쏠린다 — 그래서 ★width 로 좁히고 auto 정렬은 그대로 둔다. */
  width:calc(100% - 2.5rem);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.steps button{
  font:inherit;
  font-size:1rem;
  line-height:1.5;
  text-align:left;
  padding:.9rem 1rem 1rem;
  border:0;
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
/* ★번호를 먼저 읽히게 갈라 놓는다 — 격자에서 「지금 어디」가 번호로 잡힌다 */
.steps button .n{
  display:block;
  font-family:var(--mono);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ochre);
  margin-bottom:.15rem;
}
.steps button .t{display:block;font-family:var(--serif);font-size:1.04rem;color:inherit}
.steps button:hover{background:var(--paper-2);color:var(--navy)}
.steps button[aria-current="true"]{
  background:var(--navy);
  color:#fff;
  font-weight:700;
}
/* 선택된 칸 안에서는 오커가 남색 위에 얹혀 안 읽힌다 — 흰 계열로 올린다 */
.steps button[aria-current="true"] .n{color:var(--ochre-lg)}
.steps button[aria-current="true"] .t{color:#fff}
/* 상시 둘은 단계가 아니다 — 회색 바탕으로 갈라 놓는다(점선 대신) */
.steps button.always{
  background:var(--paper-3);
  color:var(--ink-soft);
  font-weight:600;
}
.steps button.always:hover{background:var(--paper-2);color:var(--navy)}
.steps button.always[aria-current="true"]{background:var(--navy);color:#fff}

/* ── 본문 ────────────────────────────────────── */
main{
  padding:2.6rem 1.25rem 4.5rem;
}
h2{
  font-size:clamp(1.5rem,3.2vw,2.05rem);
  letter-spacing:-.015em;
  padding-bottom:.7rem;
  border-bottom:2px solid var(--navy);
}
/* 단계 근거 한 줄 — 정본의 .eyebrow(오커 소제목 + 뻗는 괘선) */
.basis{
  margin-top:.9rem;
  margin-bottom:2rem;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--ochre);
  display:flex;
  align-items:center;
  gap:.7rem;
}
.basis::after{content:"";flex:1;height:1px;background:var(--rule)}
/* ★같은 .basis 라도 자리마다 무게가 다르다 — 안 가르면 카드 안에서 다 같은 소리로 반복된다.
   ⓐ h2 아래 근거 한 줄(위 규칙) ⓑ 카드 안 섹션 이름 ⓒ 원문 표기 곁말 ⓓ 삽입문 상시 고지 */
.card .basis{margin-top:1.4rem;margin-bottom:.9rem}
.basis.sect{font-family:var(--serif);font-size:1rem;color:var(--navy);letter-spacing:0}
.basis.sect::after{background:var(--rule-soft)}
.basis.booknote{
  font-family:var(--sans);font-weight:400;font-size:.86rem;color:var(--muted);
  letter-spacing:0;margin-top:.35rem;margin-bottom:1.1rem;
}
.basis.booknote::after{display:none}
.basis.note{
  font-family:var(--sans);font-weight:400;font-size:.92rem;line-height:1.7;
  color:var(--ink-soft);letter-spacing:0;display:block;
  border-left:2px solid var(--rule);padding-left:.85rem;margin-bottom:1rem;
}
.basis.note::after{display:none}

.card{
  border:1px solid var(--rule);
  padding:1.6rem 1.7rem;
  margin:1.8rem 0;
  background:var(--paper);
}
.card h3{
  font-size:1.24rem;
  margin-bottom:1rem;
  padding-top:.9rem;
  border-top:2px solid var(--navy);
}
.grp{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.08rem;
  color:var(--navy);
  margin:1.8rem 0 .5rem;
  padding-bottom:.45rem;
  border-bottom:1px solid var(--rule);
}

/* ── 입력칸 ──────────────────────────────────── */
label{
  display:block;
  font-weight:700;
  font-size:var(--fs-lg);
  font-family:var(--serif);
  margin:1.6rem 0 .55rem;
}
.hint{
  display:block;
  margin-top:.25rem;
  font-family:var(--sans);
  font-weight:400;
  font-size:.95rem;
  color:var(--muted);
  line-height:1.7;
}
textarea,input[type=text]{
  width:100%;
  font:inherit;
  font-size:var(--fs);
  line-height:1.78;
  padding:.85rem .95rem;
  border:1px solid var(--rule);
  background:var(--paper);
  color:var(--ink);
}
textarea{min-height:6.5rem;resize:vertical}
textarea:focus,input[type=text]:focus{
  outline:2px solid var(--ochre);
  outline-offset:1px;
  border-color:var(--navy);
}
textarea[disabled]{
  background:var(--paper-3);
  color:var(--muted);
  cursor:not-allowed;
}
/* 잠긴 칸 옆 안내 — 막는 이유를 말하는 자리다 */
.locked{
  border:1px solid var(--rule);
  border-left:3px solid var(--ochre-lg);
  background:var(--paper-2);
  padding:.9rem 1.1rem;
  color:var(--ink-soft);
  font-size:1rem;
}
/* AI 를 켜지 않는 단계 고지 */
.noai{
  border:1px solid var(--rule);
  border-left:3px solid var(--navy);
  background:var(--paper-2);
  padding:1.1rem 1.3rem;
  font-size:1rem;
  color:var(--ink-soft);
  line-height:1.76;
}
.noai b{font-family:var(--serif);color:var(--navy);display:block;margin-bottom:.35rem;font-size:1.1rem}

/* ── 프롬프트 고르기 ─────────────────────────── */
.plist{display:flex;flex-direction:column;gap:0;margin:1.1rem 0;border-top:1px solid var(--rule)}
.plist button{
  font:inherit;
  font-size:1.02rem;
  text-align:left;
  padding:.85rem 1rem;
  border:0;
  /* ★선택된 것만 3px 안으로 밀려 목록이 어긋나 보였다 — 비선택에도 자리를 잡아 둔다 */
  border-left:3px solid transparent;
  border-bottom:1px solid var(--rule-soft);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.plist button:hover{background:var(--paper-2);color:var(--navy)}
.plist button[aria-pressed="true"]{
  background:var(--paper-2);
  color:var(--ink);
  font-weight:700;
  border-left:3px solid var(--navy);
}
.pg{display:block;margin-top:.15rem;font-size:.88rem;font-weight:400;color:var(--muted)}

/* ── 복사되는 글 ─────────────────────────────── */
pre.out{
  white-space:pre-wrap;
  word-break:break-word;
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:1.2rem 1.3rem;
  margin:1rem 0 0;
  font-family:var(--mono);
  font-size:.98rem;
  line-height:1.78;
  color:var(--ink);
}
.copy{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font:inherit;
  font-size:1.04rem;
  font-weight:600;
  font-family:var(--sans);
  padding:.82rem 1.3rem;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  cursor:pointer;
  transition:background .16s ease;
}
.copy:hover{background:var(--navy-soft)}
.copied{margin-left:.7rem;font-weight:700;color:var(--ochre)}

/* ── 체크리스트 ──────────────────────────────── */
ul.chk{list-style:none;padding:0;margin:.7rem 0;border-top:1px solid var(--rule)}
ul.chk li{
  position:relative;
  padding:.72rem 0 .72rem 1.6rem;
  border-bottom:1px solid var(--rule-soft);
  font-size:1.02rem;
  color:var(--ink-soft);
}
ul.chk li:before{content:"☐";position:absolute;left:0;top:.72rem;color:var(--muted)}
label.chkrow{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  font-family:var(--sans);
  font-weight:400;
  font-size:1.02rem;
  margin:0;
  padding:.68rem .15rem;
  border-bottom:1px solid var(--rule-soft);
  cursor:pointer;
  color:var(--ink-soft);
}
label.chkrow:hover{color:var(--ink)}
/* ★터치 목표 24px — 검사가 이 형태를 그대로 읽는다 */
label.chkrow input[type=checkbox]{width:24px;height:24px;margin-top:.25rem;flex:0 0 auto;accent-color:var(--navy)}

/* ── 원자료 원문을 그대로 그리는 자리 ────────────
   ★booktext 는 「책의 글자」라는 표식이다(각색 담당·검사기가 이 표식으로 가른다).
   ★그래서 형식으로도 갈라 둔다 — 우리 글과 책의 글이 같아 보이면 안 된다. */
p.quote,p.booktext{
  margin:.6rem 0 0;
  padding:.75rem 0 .75rem 1.1rem;
  border-left:2px solid var(--ochre-lg);
  font-size:1.02rem;
  line-height:1.8;
  color:var(--ink-soft);
}

/* ── 바닥 ────────────────────────────────────── */
.foot .wrap{padding:0}
.foot{
  padding:2.4rem 1.25rem 3.4rem;
  border-top:1px solid var(--rule);
  color:var(--muted);
  font-size:.98rem;
  line-height:1.8;
}
.foot p{margin-top:.9rem}
.foot p:first-child{margin-top:0}
.foot b{color:var(--ink-soft)}
.foot .donate{margin-top:1.6rem;padding-top:1.1rem;border-top:1px dashed var(--rule);font-size:.94rem}
.foot .donate .acct{font-family:ui-monospace,Consolas,monospace;color:var(--ink-soft);letter-spacing:.02em}
.foot .donate .copy{margin-left:.5rem;font-size:.86rem;padding:.25rem .6rem}
.linklike{
  font:inherit;
  font-family:var(--sans);
  color:var(--navy);
  background:none;
  border:0;
  border-bottom:1px solid currentColor;
  cursor:pointer;
  padding:0;
}
.linklike:hover{color:var(--ochre)}

/* ── 좁은 화면 ───────────────────────────────
   ★정본과 달리 내비를 감추지 않는다. 여기서는 단계 지도가 길 그 자체라
   감추면 「어디서부터」가 다시 사라진다. 3열 -> 2열로만 줄인다. */
@media (max-width: 820px){
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 600px){
  :root{--fs:18px;--fs-lg:20px}
  /* ★2026-09-01 — 넓은 화면과 같은 이유로 여기도 ★padding 대신 ★폭으로 줄인다(선 튀어나옴 방지). */
  .steps{width:calc(100% - 2.2rem)}
  .steps button{padding:.8rem .85rem;font-size:.96rem}
  main{padding:2rem 1.1rem 3.5rem}
  .card{padding:1.2rem 1.15rem}
  .ethics{padding:1rem 1.1rem}
  .foot{padding:2rem 1.1rem 3rem}
}
@media (max-width: 420px){
  .steps{grid-template-columns:1fr}
}

/* ── ★첫 화면 vs 작업 중 화면 ────────────────────
   ★안쪽 단계에서 같은 히어로를 크게 반복하면 그 단계의 일이 화면 아래로 밀린다.
   도구는 읽을거리가 아니므로 ★작업 중에는 머리를 접고 단계 지도를 위로 올린다.
   ★지우지는 않는다 — 어디에 있는지는 계속 보여야 한다. */
body.in-step .hero{padding-block:1.5rem 1.3rem}
body.in-step .hero h1{font-size:1.24rem;line-height:1.45;letter-spacing:-.01em;color:var(--ink-soft)}
body.in-step .hero h1 br{display:none}
body.in-step .hero h1 em{color:var(--navy)}
body.in-step .lede{display:none}
body.in-step .steps{margin-top:1.5rem}
body.in-step .ethics{margin-top:1.3rem}
body.in-step main{padding-top:2.2rem}

/* ── AI로 보내기 ─────────────────────────────────
   ★2026-08-29 오너 지시 — 프롬프트 원문을 화면에서 감추고 버튼 하나로 보낸다.
   ★pre.out 은 DOM 에 남아 있으나 hidden 이다(검사가 조립기 통과를 재는 자리다).
   ★[hidden] 을 명시로 눌러 둔다 — display 를 주는 규칙이 뒤에 와도 안 펴지게. */
pre.out[hidden]{display:none !important}
.card.ai{background:var(--paper-2)}
.airow{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.9rem}
.ai-open{background:var(--ochre);border-color:var(--ochre)}
.ai-open:hover{background:var(--navy);border-color:var(--navy)}
.card.ai .locked{margin-top:.9rem}
@media (max-width:560px){
  .airow{flex-direction:column;align-items:stretch}
  .ai-open{justify-content:center}
}

/* ── 처음 오신 분 넉 줄 ────────────────────────
   ★공개 배포 대비 — 링크를 받고 처음 오는 분이 5초 안에 판단할 수 있게. */
.firstvisit{
  list-style:none;
  margin:1.4rem 0 0;
  padding:1.1rem 1.3rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem 1.6rem;
  border:1px solid var(--rule);
  background:var(--paper-2);
}
.firstvisit li{font-size:1rem;line-height:1.66;color:var(--ink)}
.firstvisit b{color:var(--navy)}
@media (max-width:700px){
  .firstvisit{grid-template-columns:1fr;padding:1rem 1.1rem}
}

/* ── 출처 표기 ───────────────────────────────── */
.credit{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--rule);line-height:1.7}
.credit b{color:var(--navy)}
.credit.small{margin-top:.5rem;padding-top:0;border-top:0;font-size:.95rem;opacity:.85}

/* ── 이 사이트 주소 ──────────────────────────── */
.siteaddr{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin-top:1.1rem;padding:.85rem 1.1rem;
  border:1px solid var(--rule);background:var(--paper-2);
}
.siteaddr[hidden]{display:none !important}
.addr-label{font-size:.9rem;opacity:.75}
.siteaddr .addr{font-family:var(--mono);font-size:1.05rem;color:var(--navy);word-break:break-all}

/* ── 주소 공유 · 바깥 링크 ─────────────────────
   ★2026-08-29 — 상단의 「서버 없음·전송 없음」 문구를 빼고 그 자리에 공유 버튼을 둔다. */
.topshare{display:inline-flex;align-items:center;gap:.45rem;flex-wrap:wrap;flex:0 0 auto}
.topshare[hidden]{display:none !important}
.sharebtn{
  font:inherit;font-size:.92rem;font-weight:600;font-family:var(--sans);
  padding:.42rem .8rem;border:1px solid var(--rule);background:var(--paper);
  color:var(--navy);cursor:pointer;transition:background .16s ease,color .16s ease;
}
.sharebtn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.sharebtn.kakao{background:#FEE500;border-color:#e6cf00;color:#3c1e1e}
.sharebtn.kakao:hover{background:#f5dd00;color:#3c1e1e;border-color:#d9c400}
.topshare .copied{font-size:.86rem;margin-left:.3rem}
.siteaddr .sharebtn{margin-left:.2rem}
.sitelinks{display:inline-flex;gap:.9rem;flex-wrap:wrap;margin-left:.5rem}
a.sitelink{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
a.sitelink:hover{color:var(--ochre)}
@media (max-width:620px){
  .topshare{flex:1 0 100%;width:100%;margin-top:.55rem;justify-content:flex-start}
  .topshare .sharebtn{flex:1 1 auto;justify-content:center}
  .sitelinks{display:flex;margin-left:0;margin-top:.5rem}
}

/* ── 대지 수 조절 ──────────────────────────────
   ★2026-08-29 — 대지 수를 목사님이 정한다(3으로 박혀 있던 것을 풀었다). */
.pointctl{display:flex;align-items:center;gap:.55rem;margin:.6rem 0 .2rem}
.pointctl .sharebtn{min-width:2.4rem;justify-content:center;font-size:1.05rem;line-height:1}
.pointctl .sharebtn:disabled{opacity:.35;cursor:default}
.pointctl .sharebtn:disabled:hover{background:var(--paper);color:var(--navy);border-color:var(--rule)}
.pointnum{font-family:var(--mono);font-size:1.15rem;color:var(--navy);min-width:1.6rem;text-align:center}

/* ── 인쇄(PDF로 저장) ─────────────────────────
   ★2026-08-31 — 브라우저 인쇄창의 「PDF로 저장」을 쓴다(바깥 라이브러리 없음).
   ★평소에는 인쇄 자리를 감추고, 인쇄할 때는 그것만 남긴다. */
#printout{display:none}
@media print{
  .topbar,.hero,.steps,#main,.foot,#audBar{display:none !important}
  #printout{display:block;padding:0;margin:0}
  #printout h1{font-family:var(--serif);font-size:20pt;margin:0 0 4mm}
  #printout .basis{font-size:10pt;color:#444;margin:0 0 6mm}
  #printout pre.out{
    display:block !important;white-space:pre-wrap;word-break:break-word;
    border:0;padding:0;margin:0;background:#fff;color:#000;
    font-family:"맑은 고딕","Malgun Gothic",sans-serif;font-size:10.5pt;line-height:1.6;
  }
  body{background:#fff}
  @page{margin:15mm}
}

/* ── 프롬프트 목록의 설명 한 줄 ─────────────────
   ★2026-09-01 — 제목만으로는 무엇을 받아 오는지 몰랐다(오너 지적). */
.plist button{display:block;width:100%;text-align:left}
.plist .pt{display:block;font-weight:600}
.plist .pw{
  display:block;margin-top:.3rem;
  font-size:.92rem;line-height:1.6;color:var(--ink-soft);font-weight:400;
}
.plist button[aria-pressed="true"] .pw{color:var(--navy-soft)}

/* ── AI 답을 이 화면에서 보기 ─────────────────
   ★2026-09-01 — 목사님이 자기 열쇠를 넣으신 경우에만 보인다. */
.keybox{margin-top:1.4rem;border-top:1px solid var(--rule);padding-top:1rem}
.keybox summary{cursor:pointer;font-weight:600;color:var(--navy)}
.keybox summary:hover{color:var(--ochre)}
.keyin{
  display:block;width:100%;margin:.9rem 0 .7rem;
  font:inherit;font-family:var(--mono);font-size:.95rem;
  padding:.7rem .8rem;border:1px solid var(--rule);background:var(--paper);color:var(--ink);
}
/* ── 「열쇠가 안 들어가거나 AI 답이 안 올 때」 바닥글 안내 (2026-09-08)
   ★구글이 열쇠 꼴을 AIza → AQ. 로 계정마다 차례로 바꾸면서 막히신 분들이 생겼다.
   ★평소에는 접혀 있고, 펼치신 분에게만 보인다.
   ★문단에 .basis 를 쓰면 안 된다 — 그것은 한 줄 표제용(flex + 뻗는 괘선)이다. */
/* ★★2026-09-08 되고침 — 오너 지적: 「있는지도 모르겠다 · 글씨와 색이 잘 안 보인다」.
     ★원인은 이 블록이 ★바닥글 안에 있다는 것이었다.
       .foot 이 color:var(--muted) · font-size:.98rem 로 ★통째로 흐리게 깔아 둔다.
       거기에 내가 .95rem 을 더 얹었으니 ★막히신 분이 가장 급할 때 가장 안 보였다.
     ⇒ ★바닥글의 흐린 톤을 ★이 블록에서만 끊는다. 색·크기를 전부 다시 못 박는다.
     ★rem 으로 잡는다 — 상단 「글씨」 조절을 그대로 따라가야 한다. */

/* ── 닫혀 있을 때 — ★단추처럼 보이게 한다(눌러야 할 것으로 보여야 눌린다) */
.helpbox{
  margin-top:1.8rem;
  border:1px solid var(--rule);
  border-left:4px solid var(--ochre);
  background:var(--paper-2);
  border-radius:4px;
  padding:0;
}
.helpbox > summary{
  cursor:pointer;
  list-style:none;
  padding:1rem 1.2rem;
  font-family:var(--serif);
  font-size:1.12rem;
  font-weight:700;
  line-height:1.5;
  color:var(--ochre);
  letter-spacing:-.01em;
}
.helpbox > summary::-webkit-details-marker{display:none}
.helpbox > summary::before{
  content:"＋";
  display:inline-block;
  width:1.4em;
  font-family:var(--sans);
  font-weight:700;
  color:var(--ochre-lg);
}
.helpbox[open] > summary::before{content:"－"}
.helpbox > summary:hover,
.helpbox > summary:focus-visible{color:var(--navy);background:var(--paper-3)}
.helpbox[open] > summary{
  color:var(--navy);
  border-bottom:1px solid var(--rule);
  background:var(--paper-3);
}

/* ── 펼쳤을 때 — ★흰 바탕으로 되돌려 바닥글의 회색에서 떼어 낸다 */
.helpbody{
  margin:0;
  max-width:none;
  padding:.4rem 1.2rem 1.3rem;
  background:var(--paper);
}
.helpbody .helpp{
  margin:1.1rem 0;
  font-size:1.04rem;
  line-height:1.85;
  color:var(--ink);          /* ★바닥글의 --muted 를 여기서 끊는다 */
}
.helpbody .helpp b{
  font-family:var(--serif);
  font-size:1.12rem;
  color:var(--navy);
  display:block;
  margin-bottom:.3rem;
}
.helpbody ul.chk{margin:.4rem 0 1.4rem;border-top:1px solid var(--rule-soft)}
.helpbody ul.chk li{
  font-size:1.02rem;
  line-height:1.8;
  color:var(--ink-soft);     /* ★목록도 흐린 회색에서 끌어올린다 */
}
.helpbody ul.chk li:before{color:var(--ochre)}
.helpbody a.sitelink{
  color:var(--navy);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.helpbody a.sitelink:hover{color:var(--ochre)}

@media (max-width: 640px){
  .helpbox > summary{padding:.9rem 1rem;font-size:1.06rem}
  .helpbody{padding:.4rem 1rem 1.2rem}
}

/* ── 글씨 크기 고르기 (2026-09-01) ─────────────────────────
   ★상단바 오른쪽. ★rem 이 아니라 px 로 잡는다 —
   ★이 장치 자신이 커지면 누를 자리를 놓친다(제 손으로 제 발을 밟는 꼴). */
.fsctl{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.fslab{font-size:13px;color:var(--muted);margin-right:2px}
.fsbtn{
  font:inherit;font-size:13px;line-height:1;
  padding:7px 10px;border:1px solid var(--rule);border-radius:6px;
  background:var(--paper);color:var(--ink-soft);cursor:pointer;
}
.fsbtn:hover{border-color:var(--navy);color:var(--navy)}
.fsbtn.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
@media (max-width:520px){ .fslab{display:none} .fsbtn{padding:6px 8px;font-size:12px} }

.ask-here{background:var(--ochre);border-color:var(--ochre)}
.ask-here:hover{background:var(--navy);border-color:var(--navy)}
.ask-here:disabled{opacity:.6;cursor:default}
.card.answer{margin-top:1rem;background:var(--paper-2)}
/* ★★2026-09-01 오너 지시 — ★AI 답 글씨가 작아 읽기 어렵다.
   ★까닭: 여기 font-size 가 ★1rem 이었다. rem 은 ★body 가 아니라 ★html 기준이라
   ★브라우저 기본값 16px 로 잡힌다 — 이 사이트 본문(--fs:19px)보다 ★작았다.
   ⇒ ★사이트가 가진 큰 글씨 값(--fs-lg:22px)을 그대로 쓴다. 답은 길게 읽는 글이다. */
pre.ans{
  white-space:pre-wrap;word-break:break-word;
  margin:.8rem 0;padding:1.1rem 1.2rem;
  border:1px solid var(--rule);background:var(--paper);
  font-family:var(--sans);font-size:var(--fs-lg);line-height:1.85;color:var(--ink);
  letter-spacing:-.005em;
}

/* ── 열쇠 받는 법 ────────────────────────────
   ★2026-09-01 — 「aistudio 에서 받으세요」 한 줄로는 어디를 눌러야 하는지 모른다. */
.card.keypanel{background:var(--paper-2);margin-top:1rem}
.card.howkey{background:var(--paper);margin-top:1rem}
ol.steps-how{margin:.8rem 0 1rem;padding-left:1.3rem}
ol.steps-how li{margin-bottom:.8rem;line-height:1.6}
ol.steps-how b{display:block;color:var(--navy);font-weight:600}
ol.steps-how .howsub{display:block;font-size:.94rem;color:var(--ink-soft);margin-top:.15rem}