/* Prayer Feed V1 (2026-09-20): Instagram-style vertical feed on the existing design tokens (style.css :root). Flat, content-first,
   hairline dividers, no card shadows. Mobile first (390px); the column is capped on wider screens. */
.pf-body .tp-header { display: none; }
.pf-body main.container { padding: 0 !important; max-width: none; }
.pf-body { background: var(--surface); }
.pf-shell { max-width: 540px; margin: 0 auto; background: var(--surface); min-height: 100vh;
  padding-bottom: calc(var(--tp-tabbar-height, 58px) + env(safe-area-inset-bottom) + 28px); }
@media (min-width: 768px) { .pf-shell { border-left: 1px solid var(--bd); border-right: 1px solid var(--bd); } }

/* header */
.pf-header { position: sticky; top: 0; z-index: 1030; background: var(--surface); border-bottom: 1px solid var(--bd);
  padding-top: env(safe-area-inset-top); }
.pf-header-in { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; gap: 8px; }
.pf-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); min-width: 0; }
.pf-brand b { font: 700 1.0625rem/1 var(--font-serif); white-space: nowrap; }
.pf-ctx { font: 600 0.8125rem/1 var(--font-family); color: var(--brand); white-space: nowrap; padding-left: 8px; border-left: 1px solid var(--bd2); }
.pf-hright { display: flex; align-items: center; gap: 2px; flex: none; }
.pf-ibtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent;
  color: var(--ink); border-radius: 50%; padding: 0; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pf-ibtn:active { background: var(--chip); }
.pf-ibtn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pf-login { font: 600 0.8125rem/1 var(--font-family); color: var(--brand); text-decoration: none; padding: 0 6px; min-height: 44px; display: inline-flex; align-items: center; }

/* stories tray */
.pf-stories { display: flex; gap: 14px; overflow-x: auto; padding: 12px 14px 10px; border-bottom: 1px solid var(--bd);
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.pf-stories::-webkit-scrollbar { display: none; }
.pf-story { flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: transparent;
  padding: 0; cursor: pointer; color: var(--ink2); -webkit-tap-highlight-color: transparent; min-height: 44px; }
.pf-ring { width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: var(--bd2); display: flex; align-items: center; justify-content: center;
  transition: background .15s; }
.pf-story[aria-pressed="true"] .pf-ring { background: conic-gradient(from 220deg, var(--brand), #d9598c, #f0a04b, var(--brand)); }
.pf-face { width: 100%; height: 100%; border-radius: 50%; background: var(--soft); border: 2.5px solid var(--surface); display: flex; align-items: center;
  justify-content: center; font-size: 1.6rem; line-height: 1; }
.pf-story span.pf-lbl { font: 500 0.75rem/1.1 var(--font-family); max-width: 66px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-story[aria-pressed="true"] span.pf-lbl { color: var(--ink); font-weight: 700; }
.pf-story:active .pf-ring { transform: scale(.96); }

/* sections + posts */
.pf-sec { border-bottom: 8px solid var(--soft); }
.pf-sec-label { font: 700 0.9375rem/1 var(--font-family); color: var(--ink); padding: 14px 14px 2px; }
.pf-post { padding-bottom: 10px; }
.pf-ph { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; }
.pf-av { width: 32px; height: 32px; border-radius: 50%; background: var(--soft); border: 1px solid var(--bd2); display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex: none; color: var(--brand); font-weight: 700; }
.pf-phm { flex: 1; min-width: 0; line-height: 1.25; }
.pf-phm b { display: block; font: 600 0.875rem/1.25 var(--font-family); color: var(--ink); }
.pf-phm span { font: 400 0.75rem/1.25 var(--font-family); color: var(--ink3); }
.pf-media { position: relative; width: 100%; aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 28px 26px; background: hsl(var(--pf-hue, 250) 42% 96%); color: var(--ink); overflow: hidden; user-select: none;
  -webkit-user-select: none; touch-action: manipulation; }
html.dark .pf-media { background: hsl(var(--pf-hue, 250) 22% 17%); }
.pf-media .pf-eyebrow { font: 600 0.75rem/1 var(--font-family); letter-spacing: .04em; color: var(--brand); margin-bottom: 18px; }
.pf-verse-text { font: 500 1.4rem/1.65 var(--font-serif); word-break: keep-all; margin: 0; }
.pf-verse-text.pf-long { font-size: 1.15rem; }
.pf-ref { margin-top: 18px; font: 600 0.9rem/1 var(--font-family); color: var(--ink2); }
.pf-qt-q { font: 700 1.3rem/1.6 var(--font-serif); word-break: keep-all; margin: 0; }
/* 2026-10-06 QT carousel: one meditation question per page, then the passage in verse groups, swiped inside the card (the page itself never scrolls
   sideways). Fixed 4:5 card = no layout jump between pages; a long page may scroll vertically as a last resort. */
.pf-qt-media { padding: 0; justify-content: flex-start; }
.pf-qt-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; outline: none; cursor: grab; }
.pf-qt-track::-webkit-scrollbar { display: none; }
.pf-qt-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.pf-qt-track:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
.pf-qt-slide { flex: 0 0 100%; min-width: 0; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex;
  flex-direction: column; align-items: center; justify-content: flex-start; padding: 28px 30px 44px; overflow-y: auto; }
/* auto margins centre a short page but, unlike justify-content:center, never push a tall page's top out of reach */
.pf-qt-slide > :first-child { margin-top: auto; } .pf-qt-slide > :last-child { margin-bottom: auto; }
.pf-qt-slide .pf-qt-passage { width: 100%; max-height: none; overflow: visible; margin: 0; padding: 0; border: 0; text-align: left;
  font: 400 0.98rem/1.75 var(--font-serif); color: var(--ink); word-break: keep-all; }
.pf-qt-slide .pf-qt-passage > div + div { margin-top: 4px; }
.pf-qt-title { font: 600 0.85rem/1.4 var(--font-family); color: var(--ink2); margin: -8px 0 14px; word-break: keep-all; }
.pf-qt-nav { position: absolute; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .85); color: var(--ink); font: 400 1.4rem/30px var(--font-family); cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12); display: none; z-index: 2; }
.pf-qt-nav.prev { left: 6px; } .pf-qt-nav.next { right: 6px; }
.pf-qt-nav:disabled { opacity: .3; cursor: default; }
html.dark .pf-qt-nav { background: rgba(40, 40, 48, .85); }
@media (hover: hover) and (pointer: fine) { .pf-qt-nav { display: block; } }
.pf-qt-pager { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; align-items: center;
  gap: 8px; pointer-events: none; font: 600 0.72rem/1 var(--font-family); color: var(--ink3); }
.pf-qt-dots { display: inline-flex; gap: 5px; }
.pf-qt-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink3); opacity: .35; }
.pf-qt-dots i.on { opacity: 1; background: var(--brand); }
.pf-burst { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; opacity: 0; color: var(--brand); }
.pf-burst { display: flex; align-items: center; justify-content: center; font-size: 72px; line-height: 1; }
.pf-act .pf-emoji { font-size: 24px; line-height: 1; filter: grayscale(1) opacity(.72); }
.pf-act.on .pf-emoji { filter: none; }
.pf-burst.on { animation: pfburst .6s ease-out; }
@keyframes pfburst { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: .95; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .pf-burst.on { animation: pfburstrm .25s linear; } .pf-story .pf-ring { transition: none; } }
@keyframes pfburstrm { 0% { opacity: .9; } 100% { opacity: 0; } }

.pf-actions { display: flex; align-items: center; padding: 2px 6px 0 6px; }
.pf-actions .pf-sp { flex: 1; }
.pf-act { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent;
  color: var(--ink); cursor: pointer; padding: 0; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.pf-act:active { transform: scale(.9); }
.pf-act svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pf-act.on { color: var(--brand); }
.pf-act.on svg { fill: currentColor; fill-opacity: .18; }
.pf-act.pf-save.on svg { fill: currentColor; fill-opacity: 1; }
.pf-proof { padding: 0 14px; font: 600 0.875rem/1.4 var(--font-family); color: var(--ink); }
.pf-caption { padding: 4px 14px 0; font: 400 0.9375rem/1.5 var(--font-family); color: var(--ink); word-break: keep-all; }
.pf-caption b { font-weight: 700; margin-right: 6px; }
.pf-caption .pf-more-txt { display: none; }
.pf-caption.open .pf-more-txt { display: block; margin-top: 8px; }
.pf-caption .pf-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pf-caption.open .pf-clamp { display: block; -webkit-line-clamp: unset; }
.pf-morebtn { border: 0; background: transparent; color: var(--ink3); padding: 6px 0; font: 400 0.9375rem/1.4 var(--font-family); cursor: pointer; min-height: 32px; }
.pf-qs { margin: 6px 0 0; padding-left: 18px; }
.pf-qs li { margin: 4px 0; }
.pf-passage { margin-top: 10px; max-height: 320px; overflow-y: auto; font-size: .875rem; color: var(--ink2); border-top: 1px solid var(--bd); padding-top: 8px; }
.pf-passage sup { color: var(--ink3); margin-right: 3px; }
.pf-cmlink { border: 0; background: transparent; padding: 6px 14px 0; color: var(--ink3); font: 400 0.875rem/1.4 var(--font-family); cursor: pointer; text-align: left; min-height: 32px; }
.pf-cm { padding: 2px 14px 0; font: 400 0.875rem/1.45 var(--font-family); color: var(--ink); }
.pf-cm b { font-weight: 600; margin-right: 6px; }

/* user prayer post (text post) */
.pf-ptext { position: relative; padding: 4px 14px 6px; font: 400 1rem/1.65 var(--font-family); color: var(--ink); word-break: keep-all; white-space: pre-wrap; }
.pf-tier { padding: 10px 14px 2px; font: 600 0.75rem/1 var(--font-family); color: var(--ink3); }

/* composer */
.pf-composer { display: flex; align-items: center; gap: 10px; padding: 12px 14px; width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; min-height: 56px; }
.pf-composer .pf-cprompt { flex: 1; min-width: 0; color: var(--ink3); font: 400 0.9375rem/1.4 var(--font-family); border: 1px solid var(--bd2); border-radius: 22px; padding: 10px 14px; }
.pf-mine { padding: 0 14px 8px; }
.pf-mine-item { font: 400 0.875rem/1.5 var(--font-family); color: var(--ink2); border-top: 1px solid var(--bd); padding: 8px 0; white-space: pre-wrap; word-break: keep-all; }
.pf-mine-item small { display: block; color: var(--ink3); font-size: .75rem; }

/* related videos */
.pf-vrow { display: flex; gap: 10px; overflow-x: auto; padding: 8px 14px 14px; scrollbar-width: none; }
.pf-vrow::-webkit-scrollbar { display: none; }
.pf-vcard { flex: none; width: 170px; text-decoration: none; color: var(--ink); }
.pf-vcard img { width: 170px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--soft); display: block; }
.pf-vcard .t { font: 600 0.8125rem/1.35 var(--font-family); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-vcard .s { font: 400 0.75rem/1.3 var(--font-family); color: var(--ink3); margin-top: 2px; }

/* states */
.pf-skel { padding: 8px 14px; }
.pf-skel i { display: block; background: linear-gradient(90deg, var(--soft), var(--bd), var(--soft)); background-size: 200% 100%; animation: pfsh 1.2s infinite; border-radius: 6px; }
.pf-skel .h { height: 32px; width: 45%; margin-bottom: 8px; }
.pf-skel .m { height: 0; padding-bottom: 125%; margin: 0 -14px 10px; border-radius: 0; }
.pf-skel .l { height: 12px; margin-top: 8px; width: 80%; }
@keyframes pfsh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pf-skel i { animation: none; } }
.pf-empty { padding: 18px 14px 22px; color: var(--ink3); font: 400 0.9rem/1.5 var(--font-family); }
.pf-err { padding: 18px 14px 22px; color: var(--ink3); font: 400 0.9rem/1.5 var(--font-family); }
.pf-err button { border: 1px solid var(--bd2); background: transparent; color: var(--ink); border-radius: 18px; padding: 6px 14px; margin-left: 8px; cursor: pointer; min-height: 36px; }
.pf-sentinel { height: 1px; }

/* bottom sheet + toast */
.pf-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1060; opacity: 0; pointer-events: none; transition: opacity .18s; }
.pf-scrim.on { opacity: 1; pointer-events: auto; }
.pf-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1070; max-width: 540px; margin: 0 auto; background: var(--surface); color: var(--ink);
  border-radius: 16px 16px 0 0; padding: 8px 14px calc(14px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .2s ease-out;
  max-height: 86vh; display: flex; flex-direction: column; }
.pf-sheet.on { transform: translateY(0); }
.pf-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--bd2); margin: 4px auto 8px; flex: none; }
.pf-sheet h3 { font: 700 1rem/1.3 var(--font-family); margin: 0 0 8px; text-align: center; flex: none; }
.pf-sheet .pf-body-s { overflow-y: auto; flex: 1; min-height: 60px; }
.pf-sheet textarea, .pf-sheet input[type=text] { width: 100%; border: 1px solid var(--bd2); border-radius: 12px; padding: 10px 12px; font: 400 1rem/1.5 var(--font-family);
  background: var(--surface); color: var(--ink); resize: none; }
.pf-row { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.pf-row .pf-grow { flex: 1; }
.pf-btn { border: 0; background: var(--brand); color: #fff; border-radius: 20px; padding: 10px 20px; font: 700 0.9375rem/1 var(--font-family); cursor: pointer; min-height: 44px; }
.pf-btn.ghost { background: transparent; color: var(--ink2); border: 1px solid var(--bd2); }
.pf-btn[disabled] { opacity: .5; cursor: default; }
.pf-radio { display: flex; gap: 8px; margin-top: 10px; }
.pf-radio label { flex: 1; border: 1px solid var(--bd2); border-radius: 12px; padding: 10px; font: 500 0.875rem/1.3 var(--font-family); cursor: pointer; text-align: center; }
.pf-radio input { display: none; }
.pf-radio input:checked + span { color: var(--brand); font-weight: 700; }
.pf-radio label:has(input:checked) { border-color: var(--brand); }
.pf-note { font: 400 0.8125rem/1.45 var(--font-family); color: var(--ink3); margin-top: 8px; }
.pf-cm-item { padding: 8px 0; font: 400 0.9375rem/1.45 var(--font-family); border-bottom: 1px solid var(--bd); }
.pf-cm-item b { font-weight: 600; margin-right: 6px; }
.pf-cm-item small { color: var(--ink3); margin-left: 6px; }
.pf-linkbtn { border: 0; background: transparent; padding: 4px 2px; margin: 0; color: var(--ink3); font: inherit; text-decoration: underline; cursor: pointer; min-height: 28px; }
.pf-danger { color: #c0392b; }
.pf-btn.pf-danger:not(.ghost) { background: #c0392b; color: #fff; }
.pf-linkbtn.pf-danger { color: #c0392b; }
.pf-toast { position: fixed; left: 50%; bottom: calc(var(--tp-tabbar-height, 58px) + env(safe-area-inset-bottom) + 16px); transform: translate(-50%, 20px); z-index: 1080;
  background: rgba(20,20,20,.92); color: #fff; padding: 10px 16px; border-radius: 20px; font: 500 0.875rem/1.3 var(--font-family); opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s; max-width: 86vw; text-align: center; }
.pf-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 2026-10-07 오늘의 말씀 / 오늘의 QT get their own restrained surfaces (both themes): 말씀 = deep navy-blue, QT = deep indigo,
   so they stand apart from the feed surface (the per-purpose 17% hue tile was nearly the dark background). One design language:
   same tile, gradient, inner hairline and states; light text keeps >= 10:1 contrast. Other feed tiles keep the hue tile. */
.pf-post[data-type="verse"] .pf-media, html.dark .pf-post[data-type="verse"] .pf-media {
  background: linear-gradient(160deg, #1F3A5F 0%, #274C77 100%); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pf-post[data-type="qt"] .pf-media, html.dark .pf-post[data-type="qt"] .pf-media {
  background: linear-gradient(160deg, #35305F 0%, #4A3F78 100%); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pf-post[data-type="verse"] .pf-media .pf-eyebrow { color: #bcd6f5; }
.pf-post[data-type="verse"] .pf-ref { color: #d4e4f7; }
.pf-post[data-type="verse"] .pf-burst, .pf-post[data-type="qt"] .pf-burst { color: #fff; }
.pf-post[data-type="qt"] .pf-qt-slide .pf-qt-passage { color: #f1eefc; }
.pf-post[data-type="qt"] .pf-qt-title { color: #d2c9f5; }
.pf-post[data-type="qt"] .pf-qt-pager { color: #d2c9f5; }
.pf-post[data-type="qt"] .pf-qt-dots i { background: #d2c9f5; }
.pf-post[data-type="qt"] .pf-qt-dots i.on { background: #fff; }
.pf-post[data-type="qt"] .pf-qt-nav, html.dark .pf-post[data-type="qt"] .pf-qt-nav { background: rgba(255,255,255,.18); color: #fff; }
.pf-post[data-type="qt"] .pf-qt-track:focus-visible { box-shadow: inset 0 0 0 2px #cfc4ff; }
@media (hover: hover) { .pf-post[data-type="verse"] .pf-media:hover, .pf-post[data-type="qt"] .pf-media:hover { filter: brightness(1.05); } }
.pf-post[data-type="verse"] .pf-media:active, .pf-post[data-type="qt"] .pf-media:active { filter: brightness(.97); }