/* 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. */
/* 2026-10-12 UI/UX 확정안 A: 전역 헤더(base.html)를 그대로 보이고, 피드는 tp-a-web/app 메인 구조 안에 들어간다.
   (이전: .pf-body .tp-header { display:none } + 540px 단독 컬럼) */
.pf-body main.container { max-width: 1200px; }
.pf-shell { max-width: 604px; margin: 0 auto; min-height: 60vh;
  padding-bottom: calc(var(--tp-tabbar-height, 58px) + env(safe-area-inset-bottom) + 28px); }
.pf-header[hidden] { display: none !important; }
/* 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; }

/* 기도목적 칩 스타일은 style.css 공용 블록으로 이동 (2026-10-12 ROUND 2 E - 영상보기/영상
   상세에서도 같은 칩을 쓰기 때문. 클래스/디자인 동일, 위치만 이동). */

/* 2026-10-13 ROUND 3 B-2 - 기도하기 전용 원복: A안 이전 원형(02011314)의 이모지 링 스토리 칩.
   .pf-rings 스코프로만 적용 - /videos·영상 상세의 텍스트 알약 칩(style.css 공용)은 그대로.
   색은 기존 브랜드 토큰(var(--brand) 등) 재사용, 임의 신규 팔레트 없음. */
.pf-stories.pf-rings { display: flex; gap: 14px; overflow-x: auto; padding: 12px 2px 10px; border-bottom: 1px solid var(--bd);
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.pf-stories.pf-rings::-webkit-scrollbar { display: none; }
.pf-stories.pf-rings .pf-story { flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 0; border-radius: 0; background: transparent; padding: 0; cursor: pointer; color: var(--ink2);
  -webkit-tap-highlight-color: transparent; min-height: 44px; font: inherit; }
.pf-stories.pf-rings .pf-story[aria-pressed="true"] { background: transparent; color: var(--ink2); padding: 0; }
.pf-stories.pf-rings .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-stories.pf-rings .pf-story[aria-pressed="true"] .pf-ring {
  background: conic-gradient(from 220deg, var(--brand), #d9598c, #f0a04b, var(--brand)); }
.pf-stories.pf-rings .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-stories.pf-rings .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; color: inherit; }
.pf-stories.pf-rings .pf-story[aria-pressed="true"] span.pf-lbl { color: var(--ink); font-weight: 700; }
.pf-stories.pf-rings .pf-story:active .pf-ring { transform: scale(.96); }
@media (min-width: 1024px) { .pf-stories.pf-rings { flex-wrap: nowrap; overflow-x: auto; } }
@media (prefers-reduced-motion: reduce) { .pf-stories.pf-rings .pf-ring { transition: none; } }

/* 2026-10-13 ROUND 3 B-3 - 기도목적 선택 bottom sheet의 3 action (기존 openSheet 재사용) */
.pf-sheet-q { margin: 0 0 12px; font: 600 .9375rem/1.4 var(--font-family); color: var(--caption); }
.pf-sheet-acts { display: flex; flex-direction: column; gap: 10px; }
.pf-sheet-act { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink); text-decoration: none; }
.pf-sheet-act:active { background: var(--chip); }
.pf-sheet-act .ic { font-size: 1.3rem; flex: none; }
.pf-sheet-act b { font: 700 .9375rem/1.3 var(--font-family); display: block; }
.pf-sheet-act span.sub { font-size: .8125rem; color: var(--caption); display: block; margin-top: 2px; }

/* 헤드라인 + 오늘의 플랜/루틴/영상 카드 (tp-a-web/app) */
.tpa-main-hero { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 20px; }
.tpa-main-title { margin: 0; font: 700 clamp(1.375rem, 2.6vw, 2rem)/1.35 var(--font-serif); letter-spacing: -.3px; color: var(--ink); text-wrap: pretty; }
.tpa-main-sub { margin: 0; font-size: .9375rem; color: var(--caption); }
.tpa-main-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.tpa-main-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 20px 76px 20px 22px;
  border-radius: var(--radius); background: var(--brand-card); color: #fff; text-decoration: none; min-height: 96px; }
.tpa-main-card::before, .tpa-main-card::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.tpa-main-card::before { width: 160px; height: 160px; right: -40px; top: -60px; }
.tpa-main-card::after { width: 90px; height: 90px; right: 90px; bottom: -50px; }
.tpa-main-card:hover { color: #fff; filter: brightness(1.06); }
.tpa-main-card-eyebrow { font-size: .8125rem; font-weight: 700; color: #d6def0; position: relative; }
.tpa-main-card-title { font: 700 1.25rem/1.35 var(--font-serif); position: relative; }
.tpa-main-card-sub { font-size: .875rem; color: #d6def0; position: relative; }
.tpa-main-card-go { position: absolute; right: 20px; top: 50%; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--brand-card); display: inline-flex; align-items: center; justify-content: center; }
html.dark .tpa-main-card-go { background: var(--surface); color: var(--ink); }

/* 피드 섹션은 카드 컨테이너 안으로 */
#pfFeed { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* 우측 레일 - 데스크톱 넓은 화면에서만 */
.tpa-main-rail { display: none; }
@media (min-width: 1200px) {
  .pf-shell.tpa-main { max-width: none; display: grid; grid-template-columns: minmax(0, 604px) minmax(260px, 1fr); gap: 32px; align-items: start; }
  .tpa-main-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
}
.tpa-rail-card { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.tpa-rail-title { margin: 0; font: 700 1rem/1.3 var(--font-family); color: var(--ink); }
.tpa-rail-text { margin: 0; font-size: .875rem; color: var(--caption); }
.tpa-rail-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 700 .875rem var(--font-family); cursor: pointer; }
.tpa-rail-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 700 .875rem var(--font-family); color: var(--brand); text-decoration: none; }

/* 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); }
/* (2026-10-12 ROUND 2 - QT 캐러셀 스타일은 /main 루틴 재구성으로 제거. QT는 전용 /qt 페이지가 담당) */
.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-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: 44px; }
.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; }

/* (2026-10-12 ROUND 2 H - 관련 영상 카드 스타일 제거: 기도하기에서 관련 영상 박스가 빠짐) */

/* 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: 22px; padding: 6px 16px; margin-left: 8px; cursor: pointer; min-height: 44px; font-weight: 600; }
.pf-err button:hover { border-color: var(--brand); color: var(--brand); }
.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 오늘의 말씀 deep navy surface 유지; 2026-10-12 ROUND 2 - 02 오늘의 기도가 기존 QT의
   deep indigo surface를 이어받는다(같은 디자인 언어: 타일/그라디언트/inner hairline, 10:1 대비). */
.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="dailyprayer"] .pf-media, html.dark .pf-post[data-type="dailyprayer"] .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 { color: #fff; }
.pf-post[data-type="dailyprayer"] .pf-media .pf-eyebrow { color: #d2c9f5; }
@media (hover: hover) { .pf-post[data-type="verse"] .pf-media:hover { filter: brightness(1.05); } }
.pf-post[data-type="verse"] .pf-media:active { filter: brightness(.97); }

/* ---------------- 2026-10-12 ROUND 2 F/G - 오늘의 루틴 5단계 세로 흐름 ---------------- */
.pf-step-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 14px 6px; }
.pf-step-num { flex: none; font: 700 1.05rem/1 var(--font-serif); color: var(--gold); letter-spacing: .04em;
  padding-top: 2px; min-width: 26px; }
.pf-step-ttl { flex: 1; min-width: 0; }
.pf-step-ttl h2 { margin: 0; font: 700 1.0625rem/1.3 var(--font-family); color: var(--ink); }
.pf-step-ttl p { margin: 2px 0 0; font: 400 .8125rem/1.4 var(--font-family); color: var(--caption); }
.pf-step-done { flex: none; font: 700 .72rem/1 var(--font-family); color: var(--brand);
  border: 1px solid rgba(206, 163, 95, .55); background: rgba(206, 163, 95, .16);
  border-radius: 999px; padding: 6px 10px; }
html.dark .pf-step-done { color: #e8ddc8; }
.pf-step-complete .pf-step-num { color: var(--brand); }
.pf-step-body { min-height: 24px; }

/* 02 오늘의 기도 - 기도문 타일(길이 가변: 4:5 고정비 대신 내용 높이) + 완료 버튼 */
.pf-post[data-type="dailyprayer"] .pf-media { aspect-ratio: auto; min-height: 220px; padding: 30px 26px; }
.pf-dp-line { margin: 0 0 14px; font: 500 1.02rem/1.8 var(--font-serif); word-break: keep-all; }
.pf-dp-line:last-child { margin-bottom: 0; }
.pf-dp-main { font-size: 1.12rem; }
.pf-rt-done-btn { display: block; margin: 12px 14px 4px; width: calc(100% - 28px); }
.pf-rt-done-btn[disabled] { opacity: .65; }

/* 03 오늘의 묵상 - 본문 타일 + 질문/실천 블록 + QT·10분묵상 링크 */
.pf-post[data-type="meditation"] .pf-media { aspect-ratio: auto; min-height: 180px; padding: 26px; }
.pf-med-body { margin: 0; font: 400 1rem/1.8 var(--font-serif); word-break: keep-all; text-align: left; }
.pf-med-block { margin: 10px 14px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pf-med-block b { display: block; font: 700 .78rem/1 var(--font-family); color: var(--brand); margin-bottom: 6px; }
.pf-med-block p { margin: 0; font: 400 .9375rem/1.6 var(--font-family); color: var(--ink); word-break: keep-all; }
.pf-med-links { display: flex; gap: 14px; padding: 10px 14px 4px; flex-wrap: wrap; }
.pf-med-links a { font: 700 .875rem/1 var(--font-family); color: var(--brand); text-decoration: none; min-height: 44px;
  display: inline-flex; align-items: center; }