/* ─────────────────────────────────────────────────────────────
   hero-canvas.css — 회개 입력 화면(#repent) 시안 D 확정본
   hero-canvas.js 가 조립한 .hc-composer 를 기준으로 스타일을 새로 쓴다.
   기존 컨테이너(.app-card/.app-step)는 display:contents 로 박스를 없애
   이중 박스·테두리 이음새 문제를 원천 제거한다.
   ───────────────────────────────────────────────────────────── */

.repent.solo {
  position: relative;
  background: #fff !important;
  padding: 0 20px !important;
  /* iOS Safari 는 100vh 가 주소창을 포함해 실제 화면보다 커진다.
     styles.css(1778·1930·1983)는 이미 100svh 를 쓰고 있었고 앱 메인만 구형 단위로 남아 있었다. */
  min-height: calc(100svh - 58px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.repent.solo > .container {
  position: static;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 720px;
  width: 100%;
  padding: 32px 0;
}

/* 순서: 헤드라인 → 컴포저 → 예시칩 → 하루리듬 → 주제안내 → 말씀 → (최하단) 고지 */
.repent.solo > .container > * { order: 9; }
.repent.solo > .container > .solo-head { order: 1; }
.repent.solo > .container > .app-card  { order: 2; }
.repent.solo > .container > .hc-chips  { order: 3; }
.repent.solo > .container > .hc-rhythm { order: 4; }
.repent.solo > .container > .hc-guide  { order: 5; }
.repent.solo > .container > .hc-verse  { order: 6; }
.repent.solo > .container > .app-note  { order: 8; }
/* 영어 앱의 베타 고지("영어 응답은 목회 검수 전")는 프라이버시 고지보다 위에 둔다. */
.repent.solo > .container > .app-note:not([data-privacy-note]) { order: 7; }

/* 시안에 없는 레이어 제거 */
.repent.solo > .container > .v5-rail,
.repent.solo > .container > .v5-marq,
.repent.solo > .container > .veil-bento,
.repent.solo .hc-vcap,
.repent.solo .hc-ghost,
.repent.solo .hc-kicker,
.repent.solo .solo-head .hc-eyebrow,
.repent.solo .solo-head .v5-badge,
.repent.solo .veil-privacy-top,
.repent.solo .solo-sub,
.repent.solo .confess-meta,
.repent.solo .confess-helpers { display: none !important; }

/* ── 헤드라인 ── */
.repent.solo .solo-head {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
  margin: 0 0 26px !important;
}
.repent.solo .hc-disp {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
  font-family: inherit !important;
  font-size: clamp(23px, 3.1vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: -.02em;
  margin: 0 !important;
  color: #12131A !important;
}
/* app-v5.js 의 단어 강조(외곽선/색) 무효화 */
.repent.solo .hc-disp em,
.repent.solo .hc-disp .v5-out,
.repent.solo .hc-disp .v5-out * {
  font: inherit !important;
  font-style: normal !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0 !important;
  -webkit-text-stroke-width: 0 !important;
  paint-order: normal !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: none !important;
  letter-spacing: inherit !important;
  filter: none !important;
  opacity: 1 !important;
}
.repent.solo .hc-disp .v5-out::before,
.repent.solo .hc-disp .v5-out::after { display: none !important; content: none !important; }

/* ── 기존 컨테이너는 박스를 만들지 않는다 ── */
.repent.solo .app-card {
  display: block !important;
  overflow: visible !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100%;
}
.repent.solo .app-card::before,
.repent.solo .app-card::after { display: none !important; content: none !important; }
.repent.solo .app-step[data-step="2"] {
  display: contents !important;
}

/* ── 컴포저 (시안 D 원본 수치) ── */
.hc-composer {
  position: relative;
  overflow: visible !important;
  border-radius: 26px;
  background: #fff;
  padding: 6px 12px 8px 0;
  box-shadow:
    inset 0 0 0 1px #DFE3EC,
    0 2px 6px rgba(18, 19, 26, .05),
    0 10px 30px -18px rgba(18, 19, 26, .25);
  transition: box-shadow .18s;
}
/* 다른 레이어가 상단에 그리던 파란 그라디언트 선 제거 */
.hc-composer::before,
.hc-composer::after { display: none !important; content: none !important; }

.hc-composer:focus-within {
  box-shadow:
    inset 0 0 0 1.5px #E4CE86,
    0 0 0 4px rgba(205, 160, 10, .10),
    0 12px 34px -18px rgba(18, 19, 26, .3);
}

.hc-composer .hc-anchor {
  position: absolute;
  left: 22px;
  top: 28px;
  width: 18px;
  height: 18px;
  color: #CDA00A;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
}
.hc-composer .hc-anchor svg { width: 100%; height: 100%; display: block; }

.hc-composer .v5-field {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.hc-composer .v5-field::before,
.hc-composer .v5-field::after { display: none !important; content: none !important; }
.hc-composer .v5-field > *:not(.confess-textarea) { display: none !important; }

.hc-composer .confess-textarea {
  width: 100%;
  display: block;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  resize: none;
  background: transparent !important;
  padding: 16px 18px 0 50px !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #12131A !important;
  min-height: 58px !important;
  max-height: 220px;
  overflow-y: auto;
}
.hc-composer .confess-textarea::placeholder { color: #AEB3C0; }

/* 컨트롤 행 */
.hc-composer .hc-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 원형 컨트롤이 flex 로 찌그러지지 않게 */
.hc-composer .hc-bar > *,
.hc-composer .response-preferences,
.hc-composer .hc-lock,
.hc-composer .step-actions,
.hc-composer #submit-confession.btn { flex: 0 0 auto; }
.hc-composer .hc-grow { flex: 1 1 auto !important; }
.hc-composer .hc-bar {
  padding: 0 0 0 14px;
  margin-top: 8px;
}
.hc-composer .hc-grow { flex: 1 1 auto; }

.hc-composer .response-preferences { margin: 0 !important; position: static; }
.hc-composer .response-preferences > summary {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  box-shadow: inset 0 0 0 1px #E8EAF0;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  list-style: none;
  color: #5A5F6E;
  padding: 0;
}
.hc-composer .response-preferences > summary::-webkit-details-marker { display: none; }
.hc-composer .response-preferences > summary::after,
.hc-composer .response-preferences > summary::before { content: none !important; display: none !important; }
.hc-composer .response-preferences > summary svg { width: 17px; height: 17px; display: block; }
.hc-composer .response-preferences > summary:hover,
.hc-composer .response-preferences[open] > summary { background: #F7F8FC; }
.hc-composer .response-preferences-body {
  position: absolute;
  left: 10px;
  top: calc(100% + 8px);
  z-index: 5;
  background: #fff;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px #E8EAF0, 0 18px 44px -20px rgba(18, 19, 26, .3);
  padding: 16px;
  text-align: left;
  min-width: 260px;
}

.hc-composer .hc-lock {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #E8EAF0;
  background: #fff;
  display: grid;
  place-items: center;
  color: #5A5F6E;
  cursor: default;
}
.hc-composer .hc-lock svg { width: 15px; height: 15px; display: block; }

.hc-composer .step-actions {
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.hc-composer #submit-confession.btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: #fff !important;
  background: #CDA00A !important;
}
.hc-composer #submit-confession.btn svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  stroke: #fff !important;
  margin: 0 !important;
}
.hc-composer #submit-confession.btn:hover { filter: brightness(1.07); }
/* 시각적으로는 36px 원이 맞지만, 앱의 단일 핵심 버튼이 WCAG 2.5.8(44px)에 미달이었다.
   veil-header.css:240 의 언어 링크와 같은 방식으로 외형은 그대로 두고 히트 영역만 넓힌다. */
.hc-composer #submit-confession.btn::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

.hc-composer .crisis-panel { margin: 10px 14px; }

/* ── 예시 칩 ── */
.hc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.hc-chips .chip {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: #5A5F6E !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px #E8EAF0 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  min-height: 0 !important;
  height: auto !important;
  cursor: pointer;
  transition: .15s;
}
.hc-chips .chip:hover {
  color: #1E3AFF !important;
  background: #FAFBFF !important;
  box-shadow: inset 0 0 0 1px #C7CEF9 !important;
}
.hc-chips .chip[data-prompt="lust"]  { order: 1; }
.hc-chips .chip[data-prompt="anger"] { order: 2; }
.hc-chips .chip[data-prompt="fear"]  { order: 3; }
.hc-chips .hc-chip-thanks            { order: 4; }

/* ── 하루 3순간 리듬 (2026-08-30) — 아침 큐티 · 낮 감사 · 밤 회개 안내.
   예시칩과 같은 알약 계열이되, 현재 시간대만 금빛으로 구분한다.
   ⚠ 글자 금색은 #7F6104 (채우기용 #CDA00A 는 흰 배경 위 2.43:1 — tone.css 규칙) */
.hc-rhythm { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 24px; }
.hc-rhythm-label { font-size: 12px; color: #8A8F9C; letter-spacing: .01em; margin-right: 2px; }
.hc-rhythm .hc-moment {
  font-size: 12.5px; line-height: 1.3; letter-spacing: 0; font-family: inherit;
  color: #5A5F6E; background: #fff; border: 0;
  box-shadow: inset 0 0 0 1px #E8EAF0; border-radius: 999px;
  padding: 7px 13px; text-decoration: none; cursor: pointer; transition: .15s;
}
.hc-rhythm .hc-moment:hover { color: #7F6104; background: #FFFDF6; box-shadow: inset 0 0 0 1px #E2D5AE; }
.hc-rhythm .hc-moment.on {
  color: #7F6104; font-weight: 600;
  background: #FBF6E7; box-shadow: inset 0 0 0 1px #E2CF96;
}
@media (max-width: 640px) {
  .hc-rhythm { gap: 6px; margin-top: 18px; }
  .hc-rhythm .hc-moment { font-size: 12px; padding: 7px 11px; }
  .hc-rhythm-label { flex-basis: 100%; text-align: center; margin-right: 0; }
}

/* ── 오늘의 말씀 ── */
/* 출처 표기(“오늘의 말씀 · 마태복음 11:28”)는 대비 3.18:1 이었다 — 성경 인용의
   가장 중요한 부분인 장절이 안 읽혔다. 조용한 톤 유지 + AA 통과로 조정(2026-08-30). */
.hc-verse { margin-top: 30px; text-align: center; font-size: 13px; color: #5E6472; line-height: 1.75; letter-spacing: 0; }
.hc-verse b {
  display: block;
  font-family: inherit;
  color: #5A5F6E;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.hc-verse b::before { content: "\201C"; }
.hc-verse b::after  { content: "\201D"; }

/* ── 최하단 고지 ── */
/* ⚠ 이 블록은 프라이버시 고지 전용이다. 영어 앱에는 .app-note 가 둘이라
   선택자를 넓히면 베타 고지가 같은 자리에 겹쳐 붙는다. (2026-09-02 실측) */
.repent.solo .app-note[data-privacy-note] {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 20px !important;
  width: 100%;
  max-width: 900px;
  text-align: center;
  /* 이 한 줄이 VEIL 의 핵심 약속이다("입력한 내용은 서버로 전송되지 않으며…").
     예전에는 11.5px · #B0B5C2 로 **대비 2.05:1** 이라 화면에서 제일 안 읽혔다.
     조용한 톤은 유지하되 읽힐 수는 있게 한다(WCAG AA 4.5:1). */
  font-size: 12.5px !important;
  line-height: 1.7;
  color: #5E6472 !important;
  border: 0 !important;
  background: none !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
}
.repent.solo .app-note[data-privacy-note] svg { display: none !important; }
/* 절대배치를 안 받는 고지(영어 베타 고지)는 흐름 안에서 읽히게 둔다. */
.repent.solo .app-note:not([data-privacy-note]) {
  max-width: 720px;
  margin: 0 auto 8px !important;
  font-size: 12.5px;
  line-height: 1.7;
}
.repent.solo .app-note[data-privacy-note] a { color: #444A57 !important; text-decoration: underline; }

/* ── 헤더 (이 화면에서만) ── */
body.hc-app { overflow-x: hidden; }
/* MOBILE-2(2026-09-06): 로그인 모달이 열려 body 가 overflow:hidden 으로 잠기면 WebKit(iPhone)에서
   .v5-aura 의 blur 장식(a1 폭 760px)이 가로 스크롤 폭 130px 을 만들었다. html 은 overflow 가 visible 이라
   body 의 잠금이 가로를 막아 주지 못한다. clip 은 스크롤 컨테이너를 만들지 않아 sticky·fixed 에 영향이 없다. */
html:has(body.hc-app) { overflow-x: clip; }
.v5-aura { clip-path: inset(0); }
body.hc-app .nav.vh,
body.hc-app header.nav {
  /* 다크 모드에서 상단바만 흰색으로 남던 버그(BACKLOG UI-4). 하드코딩된 #fff 가
     veil-header.css 의 --vh-bg 를 덮고 있었다. 테마 토큰을 따르게 한다. (2026-08-20) */
  background: var(--m-bg, #fff) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.hc-app .nav-progress,
body.hc-app .vh-nav,
body.hc-app .nav-links,
body.hc-app .vh-theme,
body.hc-app .vb-theme,
body.hc-app .nav-toggle,
body.hc-app .vh-lang a,
body.hc-app #veil-streak { display: none !important; }

/* 로고는 다른 페이지와 동일하게 — 전역 veil-header 스타일을 그대로 쓴다
   (골드 마크 21px + 워드마크 19px/900) */
body.hc-app .vh-lang,
body.hc-app .vh-lang span.on[aria-current="page"] {
  background: none !important;
  background-color: transparent !important;
  color: var(--m-ink, #12131A) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  padding: 0 2px !important;
  border-radius: 0 !important;
}
/* 금색 CTA 위의 글자는 진한 잉크다(--vh-gold-ink #1A1405).
   이전에는 여기서 #fff 로 덮어서 **럜딩은 검정 글자, 앱은 흰 글자**로 갈렸고
   앱 쪽 대비가 2.43:1 로 WCAG 미달이었다(2026-08-30 실측).
   이 규칙은 veil-header.css 보다 명시도가 높아 !important 끼리 싸움에서 이긴다. */
body.hc-app .nav .vh-cta,
body.hc-app .nav .btn-primary { color: var(--vh-gold-ink, #1A1405) !important; }

.hc-streak {
  border: 0;
  box-shadow: inset 0 0 0 1px #E8EAF0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: #5A5F6E;
  background: #fff;
  white-space: nowrap;
}

/* ── 다크 모드 ── */
:root[data-theme="dark"] .repent.solo { background: #0B0D14 !important; }
:root[data-theme="dark"] .hc-composer {
  background: #12151F;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 10px 30px -18px rgba(0, 0, 0, .7);
}
:root[data-theme="dark"] .repent.solo .hc-disp,
:root[data-theme="dark"] .hc-composer .confess-textarea { color: #F2F4FA !important; }
:root[data-theme="dark"] .hc-chips .chip,
:root[data-theme="dark"] .hc-streak,
:root[data-theme="dark"] .hc-composer .hc-lock,
:root[data-theme="dark"] .hc-composer .response-preferences > summary {
  background: rgba(255, 255, 255, .05) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
  color: #C7CBD8 !important;
}
:root[data-theme="dark"] .hc-composer .response-preferences-body {
  background: #12151F;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 44px -20px rgba(0, 0, 0, .6);
}

/* ── 모바일 ── */
@media (max-width: 720px) {
  .repent.solo { min-height: calc(100svh - 54px); padding: 0 16px !important; }
  .repent.solo > .container { padding: 24px 0; }
  .repent.solo .solo-head { margin-bottom: 20px !important; }
  .hc-composer .confess-textarea { font-size: 16px !important; padding-left: 46px !important; }
  .hc-chips { gap: 6px; }
  .hc-chips .chip { font-size: 12.5px !important; padding: 7px 12px !important; }
  .hc-composer .response-preferences-body { left: 0; right: 0; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .repent.solo * { transition: none !important; animation: none !important; }
}


/* ============================================================
   응답 화면 — 시안 A "두루마리" (2026-08-18)

   문제: 컴포저만 시안 D(흰 배경 + 골드)로 바꿔서 전송 후 화면과 톤이 어긋났다.
   한 화면 안에 표면이 3종(보라 그라디언트 / 흰 카드 / 검정 반전)이고,
   라벨이 파란 칩이라 "폼 제출 결과표"처럼 읽혔다.

   벤치마크(YouVersion · Rosebud · Perplexity · Hallow)의 공통 패턴:
     1) 카드 적층이 아니라 하나의 세로 문서
     2) 성경 본문만 타이포그래피로 승격 (세리프 · 중앙)
     3) 섹션 라벨은 색 칩이 아니라 조용한 캡션 / 여백
     4) 하단 액션은 2개 이하
   여기서는 마크업·JS·ID 를 건드리지 않고 오버라이드만 한다.
   (app-v5.css 뒤에 로드되므로 같은 !important 라도 이 파일이 이긴다.)
   ============================================================ */

.repent.solo .response {
  max-width: 640px;
  margin: 0 auto;
  gap: 0 !important;
}
.repent.solo .response-track { gap: 34px !important; }
.repent.solo .response-slide { gap: 34px !important; }

/* ── 1) 카드 크롬 제거 → 표면 1종(배경색 그대로) ── */
.repent.solo .response-block {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
.repent.solo .response-block::before { display: none !important; content: none !important; }
.repent.solo .response-block:hover { box-shadow: none !important; transform: none !important; }

/* 세리프는 말씀에만 쓴다. 본문까지 세리프면 말씀이 승격되지 않는다.
   (상위 요소에서 세리프가 상속되고 있어 명시적으로 끊는다.) */
.repent.solo .response-block p {
  font-family: var(--font-kicker, var(--sans)) !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  letter-spacing: -.005em;
  color: var(--ink-2, #3A3A3F) !important;
  margin: 0;
}
.repent.solo .response-why p { font-family: var(--font-kicker, var(--sans)) !important; }

/* ── 2) 라벨: 파란 칩 + 아이콘 → 골드 소형 캡션 ── */
.repent.solo .response-block .block-label {
  display: block !important;
  font-family: var(--font-kicker, var(--sans));
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: none !important;
  color: var(--brand-gold-deep, #A88208) !important;
  margin: 0 0 10px !important;
}
.repent.solo .response-block .block-label .ic { display: none !important; }

/* ── 3) 요약: 본문 위 조용한 캡션 한 줄 ── */
.repent.solo .response-acknowledgement { padding-bottom: 4px !important; }
.repent.solo .response-acknowledgement .block-label {
  color: var(--muted, #8C8475) !important;
  letter-spacing: .14em !important;
}
.repent.solo .response-acknowledgement p {
  font-size: 14.5px !important;
  line-height: 1.8 !important;
  color: var(--ink-3, #6B655A) !important;
}

/* ── 4) 말씀: 카드가 아니라 전면 타이포그래피로 승격 ── */
.repent.solo .response-word {
  text-align: center;
  padding: 10px 0 4px !important;
}
/* 라벨은 화면에서 지우되 스크린리더에는 남긴다 */
.repent.solo .response-word .block-label {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.repent.solo .response-word blockquote {
  font-family: var(--font-editorial, var(--serif)) !important;
  font-size: clamp(21px, 4.4vw, 27px) !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
  letter-spacing: -.01em !important;
  color: var(--ink, #181818) !important;
  max-width: 21em;
  margin: 0 auto !important;
  border: 0;
  padding: 0;
}
.repent.solo .response-word cite {
  display: block;
  margin-top: 18px !important;
  font-family: var(--font-kicker, var(--sans));
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
  color: var(--brand-gold-deep, #A88208) !important;
}
/* 라벨 대신 말씀을 닫아 주는 얇은 골드 룰 */
.repent.solo .response-word::after {
  content: "";
  display: block;
  width: 38px; height: 2px;
  margin: 26px auto 0;
  border-radius: 2px;
  background: var(--brand-gold, #CDA00A);
  opacity: .85;
}

/* 선택 이유: 카드 → 조용한 골드 텍스트 링크 */
.repent.solo .response-why {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-align: center;
}
.repent.solo .response-why summary {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-gold-deep, #A88208) !important;
  list-style: none;
}
.repent.solo .response-why summary::-webkit-details-marker { display: none; }
.repent.solo .response-why p {
  margin: 12px auto 0 !important;
  max-width: 30em;
  font-size: 14.5px !important;
  line-height: 1.85 !important;
  color: var(--ink-3, #6B655A) !important;
}

/* ── 5) 묵상·기도·적용: 좌측 세로선 하나로만 구분 ── */
.repent.solo .response-meditation,
.repent.solo .response-prayer,
.repent.solo .response-apply {
  border-left: 2px solid var(--line, #E5DFD2) !important;
  padding: 2px 0 2px 20px !important;
  background: transparent !important;
}
.repent.solo .response-meditation .block-label {
  color: var(--muted, #8C8475) !important;
}
.repent.solo .response-prayer,
.repent.solo .response-apply {
  border-left-color: var(--brand-gold, #CDA00A) !important;
}
/* 검정 반전 기도 카드 폐기 — 흐름을 끊고 시선을 강제로 뺏었다 */
.repent.solo .response-prayer p { color: var(--ink-2, #3A3A3F) !important; }
.repent.solo .response-prayer::before { display: none !important; content: none !important; }

/* ── 6) 하단 액션: sticky · 2개 · 아멘만 골드 채움 ── */
.repent.solo .response-primary-actions {
  position: sticky;
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  /* 부모가 줄어드는 배치라 명시하지 않으면 194px 로 줌어들어 버튼이 쌀리게 된다 */
  width: 100%;
  max-width: 640px;
  margin: 28px auto 0;
  padding: 16px 0 14px !important;
  border-top: 0 !important;
  background: transparent !important;
}
/* 배경은 읽는 폭을 넘어 화면 끝까지 덮어야 본문이 비치지 않는다 */
.repent.solo .response-primary-actions::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  /* 앱 본문 배경은 베이지(--bg)가 아니라 흰색이다. 실측해서 맞춘다. */
  background: var(--white, #fff);
  border-top: 1px solid var(--line, #E5DFD2);
}
.repent.solo .response-primary-actions #btn-amen {
  background: var(--brand-gold, #CDA00A) !important;
  border-color: var(--brand-gold, #CDA00A) !important;
  color: var(--brand-gold-ink, #1A1400) !important;
}
.repent.solo .response-primary-actions #btn-amen:hover {
  background: var(--brand-gold-deep, #A88208) !important;
  border-color: var(--brand-gold-deep, #A88208) !important;
}

/* 글을 적는 동안에는 하단 바가 사라진다.
   응답을 받은 뒤 다시 고백을 고치려고 컴포저로 돌아갔을 때,
   '다시 적기 / 아멘' 바가 키보드 위에 떠 있으면 쓰는 일을 방해한다. */
.repent.solo:has(.confess-textarea:focus) .response-primary-actions,
.repent.solo:has(.hc-composer :focus) .response-primary-actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.repent.solo .response-primary-actions {
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

/* 응답 시작을 알리던 '· 응답' 머리표는 배경이 카드일 때만 필요했다.
   하나의 문서로 흐르는 지금은 말씀 타이포가 시작점을 대신한다. */
.repent.solo .app-step .step-meta { display: none !important; }

/* 슬라이드 점: 파랑 → 골드 */
.repent.solo .deck-dot.is-active {
  background: var(--brand-gold, #CDA00A) !important;
  border-color: var(--brand-gold, #CDA00A) !important;
  color: var(--brand-gold-ink, #1A1400) !important;
}

/* ── 6-b) app-modern.css 가 ID 셀렉터(#resp-verse-text / #resp-verse-ref)로
   산세리프 파랑을 강제한다. 같은 ID 무게로 다시 덮어야 먹힌다. ── */
.repent.solo .response-word #resp-verse-text,
#resp-verse-text {
  font-family: var(--font-editorial, var(--serif)) !important;
  font-weight: 500 !important;
  font-size: clamp(21px, 4.4vw, 27px) !important;
  line-height: 1.62 !important;
  color: var(--ink, #181818) !important;
}
.repent.solo .response-word #resp-verse-ref,
#resp-verse-ref {
  color: var(--brand-gold-deep, #A88208) !important;
  font-family: var(--font-kicker, var(--sans)) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
}

/* ── 7) 다크모드 ── */
:root[data-theme="dark"] .repent.solo .response-word blockquote,
:root[data-theme="dark"] #resp-verse-text { color: #F2F2F5 !important; }
:root[data-theme="dark"] #resp-verse-ref { color: #E7C24E !important; }
:root[data-theme="dark"] .repent.solo .response-block p { color: #C9C9D2 !important; }
:root[data-theme="dark"] .repent.solo .response-prayer p { color: #C9C9D2 !important; }
:root[data-theme="dark"] .repent.solo .response-block .block-label,
:root[data-theme="dark"] .repent.solo .response-word cite,
:root[data-theme="dark"] .repent.solo .response-why summary { color: #E7C24E !important; }
:root[data-theme="dark"] .repent.solo .response-meditation .block-label { color: #8E8E9A !important; }
:root[data-theme="dark"] .repent.solo .response-meditation { border-left-color: rgba(255, 255, 255, .14) !important; }
:root[data-theme="dark"] .repent.solo .response-primary-actions::before {
  background: #0A0A0C;
  border-top-color: rgba(255, 255, 255, .12);
}

/* ── 8) 모바일 ── */
@media (max-width: 720px) {
  .repent.solo .response-track { gap: 26px !important; }
  .repent.solo .response-slide { gap: 26px !important; }
  .repent.solo .response-word::after { margin-top: 20px; }
  .repent.solo .response-meditation,
  .repent.solo .response-prayer,
  .repent.solo .response-apply { padding-left: 16px !important; }
  /* 모바일에서는 sticky 를 끌다.
     하단 고정 fmenu(z-index 100, 화면 하단 중앙)와 정확히 곹쳐
     '다시 적기'를 가렸다(실측 390×844). 둘 중 하나를 포기해야 하면
     전역 네비게이션인 fmenu 를 살리는 게 맞다. */
  /* 최하단 고지를 절대배치로 바닥에 붙여 둔 것이 모바일에서 무너진다.
     말씀 한 줄이 2줄로 접히면 그 위를 덮어 글자가 겹쳐 읽힐 수 없게 된다
     (실측 390×844: hc-verse 383~458 vs app-note 440~479).
     모바일에서는 그냥 흐름에 두고 말씀 아래로 내린다. */
  .repent.solo .app-note[data-privacy-note] {
    position: static !important;
    transform: none !important;
    margin: 18px auto 4px !important;
    max-width: 100%;
  }

  .repent.solo .response-primary-actions {
    position: static;
    padding-bottom: 14px !important;
    border-top: 1px solid var(--line, #E5DFD2) !important;
    margin-bottom: 24px;
  }
  .repent.solo .response-primary-actions::before { display: none; }
}


/* ── 주제별 안내 입구 (2026-08-31, SEO-1) ──
   안내 페이지 22개로 들어가는 상시 노출 링크가 랜딩 푸터 하나뿐이었다.
   ⛔ 한국어 전용 페이지라 hero-canvas.js 가 IS_KO 일 때만 그린다(영문 면 금지).
   글자용 금색은 #7F6104. 채우기용 #CDA00A 를 작은 글자에 쓰면 흰 배경에서 안 읽힌다. */
.hc-guide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin-top: 14px;
  font-size: 13px;
  color: #6B7080;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.hc-guide:hover,
.hc-guide:focus-visible {
  color: #7F6104;
  border-bottom-color: #E2D5AE;
}
@media (max-width: 640px) {
  .hc-guide { font-size: 12.5px; margin-top: 12px; }
}

/* ───────────  어제 적어 둔 적용 되묻기 (2026-09-09 E단계)  ───────────
   컴포저 위 한 줄. 눈에 띄되 회개의 자리를 가리지 않는다.
   ⛔ 성취·축하 색(초록·파랑)을 쓰지 않는다. 금색 계열로 조용히. */
.apply-followup {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 auto 14px; max-width: 720px;
  padding: 12px 16px;
  border: 1px solid rgba(205, 160, 10, .28); border-radius: 14px;
  background: rgba(205, 160, 10, .06);
  font-size: .9rem; line-height: 1.6;
}
.apply-followup .af-line { margin: 0; flex: 1 1 260px; color: #3a352c; }
.apply-followup .af-when { color: #7F6104; font-weight: 600; margin-right: 8px; }
.apply-followup .af-acts { display: flex; gap: 6px; margin-left: auto; }
.apply-followup button {
  font: inherit; font-size: .84rem; cursor: pointer;
  border-radius: 999px; padding: 6px 14px; min-height: 34px;
  border: 1px solid rgba(0, 0, 0, .12); background: #fff; color: #3a352c;
  transition: border-color .18s, color .18s;
}
.apply-followup .af-done { border-color: rgba(205, 160, 10, .5); color: #7F6104; font-weight: 600; }
.apply-followup button:hover { border-color: #7F6104; color: #7F6104; }
@media (max-width: 560px) {
  .apply-followup { margin-bottom: 10px; padding: 11px 13px; }
  .apply-followup .af-acts { margin-left: 0; width: 100%; }
}