/* 2026-08-11 Claude Design v2 캔버스(design/TodaysPrayer-v2_dc.html) 확정 옵션 적용:
   로고 9e(받는 두 손+빛)/헤더 7a(라이트)+7b(다크)+7c(A-/A+)/토큰 7d/다크모드 톤 7e.
   토큰명은 캔버스 7d 표 그대로(--bg/--surface/--chip/--ink/--ink3/--bd/--brand/
   --brandFill/--soft/--pillOn) - 기존 --tp-primary 등 구버전 이름은 하위호환으로만
   유지하고 새 화면은 전부 새 토큰을 참조한다. */
:root {
  --font-family: "Noto Sans KR", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Noto Serif KR", serif;

  --bg: #faf9f8;
  --surface: #ffffff;
  --chip: #f1f0ee;
  --ink: #1c2230;
  --ink2: #3a4150;
  --ink3: #6c7484;
  --ink4: #8f96a3;
  --ink5: #c2c7d0;
  --bd: rgba(28, 34, 48, .08);
  --bd2: rgba(28, 34, 48, .13);
  --brand: oklch(0.44 0.10 262);
  --brandFill: oklch(0.44 0.10 262);
  --soft: oklch(0.96 0.02 262);
  --pillOn: #1c2230;
  --logoLight: oklch(0.74 0.10 78);
  --logoSecond: oklch(0.66 0.09 262);
  --live: oklch(0.55 0.17 25);
  --player: #1a1f28;
  --font-sans: var(--font-family);

  /* 구버전 이름 하위호환(기존 화면이 아직 참조) - 값은 새 토큰과 동일하게 맞춤 */
  --tp-primary: #4a3aff;
  --tp-primary-dark: #372bd1;
  --bg-2: var(--chip);
  --ink-2: var(--ink2);
  --ink-3: var(--ink3);
  --ink-4: var(--ink4);
  --border: var(--bd);
  --primary: var(--brand);
  --primary-soft: var(--soft);
  --primary-light: oklch(0.72 0.09 262);
}

/* 2026-08-11 다크모드(7b/7e) - <html>에 .dark 클래스를 붙이면 전체 전환. 인디고
   hue(262)는 유지하고 명도만 조정(7d 표 그대로: --brand L .44→.78, --brandFill
   L .44→.52, --soft L .96→.33). */
html.dark {
  --bg: #101419;
  --surface: #191e26;
  --chip: #242a34;
  --ink: #eceef2;
  --ink2: #c6cbd4;
  --ink3: #9ba3b0;
  --ink4: #9ba3b0;
  --ink5: #5a6172;
  --bd: rgba(255, 255, 255, .10);
  --bd2: rgba(255, 255, 255, .16);
  --brand: oklch(0.78 0.08 262);
  --brandFill: oklch(0.52 0.12 262);
  --soft: oklch(0.33 0.06 262);
  --pillOn: oklch(0.52 0.12 262);
}

html, body {
  font-family: var(--font-family);
  background-color: var(--bg);
  color: var(--ink);
}

/* 2026-08-12 PWA 노치/다이나믹아일랜드 대응(safe-area) - standalone 실행 시 시스템 UI가
   침범하는 영역만큼 여백 확보. 일반 브라우저 탭에서는 env() 값이 0이라 영향 없음. */
:root {
  --tp-tabbar-height: 58px;
}
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: calc(var(--tp-tabbar-height) + env(safe-area-inset-bottom));
}
.tp-header {
  padding-top: env(safe-area-inset-top);
}
/* 하단 탭바가 새로 생기면서 오디오 미니플레이어(#tpAudioBar)는 화면 맨 아래가 아니라
   탭바 바로 위에 쌓이도록 이동 - 탭바를 가리지 않게. */
#tpAudioBar {
  bottom: calc(var(--tp-tabbar-height) + env(safe-area-inset-bottom));
}

/* 2026-08-12 신규 - 하단 고정 탭바(기도선택/성경읽기/영상보기/QT/교회찾기). */
.tp-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1040;
  height: calc(var(--tp-tabbar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: var(--surface);
  border-top: 1px solid var(--bd);
  display: flex;
  align-items: stretch;
}
.tp-tab {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  color: var(--ink3);
  text-decoration: none;
  font: 500 0.6875rem/1 var(--font-family);
}
.tp-tab svg { width: 22px; height: 22px; }
.tp-tab.active { color: var(--brand); }
.tp-tab.active svg { color: var(--brand); }
.tp-tab .tp-tab-img { width: 24px; height: 24px; object-fit: contain; opacity: .5; filter: saturate(.55) brightness(.9);
  transition: opacity .15s, filter .15s; }
.tp-tab.active .tp-tab-img { opacity: 1; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand) 45%, transparent)); }

/* 2026-08-11 7c(A-/A+, 채택안) - 3단계 폰트스케일. JS가 <html>에 tp-fs-0/tp-fs-1/tp-fs-2
   클래스를 토글하고 localStorage(tp.fontScale)에 저장한다.
   2026-08-11 실사고 발견+수정(#91 작업 중 발견): 원래 클래스명이 fs-0/fs-1/fs-2였는데
   이게 Bootstrap 5의 자체 유틸리티 클래스 .fs-1~.fs-6(!important 포함, font-size:
   calc(1.375rem + 1.5vw)!important 등)과 그대로 충돌해서 html.fs-1(우리 규칙, 16px,
   !important 없음)이 항상 Bootstrap의 !important 규칙에 덮여쓰였다. 기본값이 fs-1이라
   v2 헤더 롤아웃 이후 사실상 모든 방문자가 기본상태에서 site 전체 글자가 약 2.5배
   커진 채로 보고 있었다(html/body 실측 40px, 의도값 16px) - 화면이 "약간 크고 굵은"
   정도로 보여서 지금까지 스크린샷 검토에서도 놓쳤다. 충돌 없는 이름(tp- 접두사)으로
   변경해 근본 수정한다. */
html.tp-fs-0 { font-size: 14px; }
html.tp-fs-1 { font-size: 16px; }
html.tp-fs-2 { font-size: 18px; }

/* 2026-08-11 헤더 신규 UI(7a/7b) - 로고슬롯+브랜드명, 다크토글, A-/A+, 로그인. */
.tp-header {
  background: var(--surface);
  border-bottom: 1px solid var(--bd);
  position: sticky; top: 0; z-index: 1030;
  transition: transform .25s ease;
}
/* 2026-08-12(watch페이지 개편 4번) - 유튜브식 스크롤 헤더 숨김. */
.tp-header-hidden { transform: translateY(-100%); }
.tp-header .tp-brand { font: 700 1.0313rem/1 var(--font-serif); color: var(--ink); min-width: 0; }
.tp-header .tp-nav-pill {
  padding: 8px 13px; border-radius: 99px; background: var(--chip);
  color: var(--ink2); font: 500 0.7813rem/1 var(--font-family); white-space: nowrap;
  text-decoration: none; display: inline-block;
}
.tp-header .tp-nav-pill.active { background: var(--pillOn); color: #fff; }
.tp-theme-toggle {
  width: 34px; height: 34px; flex: none; border-radius: 99px; border: 1px solid var(--bd2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent;
  color: var(--ink2);
}
.tp-fontscale {
  display: flex; align-items: stretch; border: 1px solid var(--bd2); border-radius: 99px; overflow: hidden;
}
.tp-fontscale button {
  padding: 0 10px; min-height: 34px; display: flex; align-items: center; font: 500 0.75rem/1 var(--font-family);
  color: var(--ink2); background: transparent; border: none; cursor: pointer;
}
.tp-fontscale button:last-child { font-size: 0.9375rem; }
.tp-fontscale .tp-fontscale-divider { width: 1px; background: var(--bd2); }
.tp-login-btn {
  padding: 8px 14px; border-radius: 99px; border: 1.5px solid var(--brand); color: var(--brand);
  font: 700 0.7813rem/1 var(--font-family); text-decoration: none; display: inline-block; white-space: nowrap;
}

/* 2026-08-11 모바일 좁은폭 대응 - 컨트롤 4개(토글/A-/A+/로그인)가 브랜드명을
   과도하게 밀어내던 문제. 기능/구성요소는 그대로 두고 폭만 줄인다(내용 삭제 없음). */
@media (max-width: 420px) {
  .tp-header .tp-brand { font-size: 0.9rem; }
  .tp-header .container.d-flex { gap: 4px !important; }
  .tp-theme-toggle { width: 30px; height: 30px; font-size: 0.8125rem; }
  .tp-fontscale button { padding: 0 7px; min-height: 30px; font-size: 0.6875rem; }
  .tp-fontscale button:last-child { font-size: 0.8125rem; }
  .tp-login-btn { padding: 7px 10px; font-size: 0.7rem; }
}

.navbar-brand, h1, h2, h3, .video-title {
  font-family: var(--font-serif);
}

/* 2026-08-11(온보딩 헤드라인 2줄 고정 지시) - "당신의 오늘,"/"어떤 기도로 채우고
   싶으신가요"를 항상 정확히 2줄로 유지(반응형 자동줄바꿈에 맡기지 않고 <br> 강제).
   Bootstrap의 display-6(반응형 clamp)는 폭에 따라 줄바꿈 지점이 흔들려서 2줄 문구엔
   안 맞음 - 전용 클래스로 분리해 데스크톱/모바일 크기를 직접 지정. 폰트는 그대로
   Noto Serif KR(위 h1 규칙 상속)만 쓰고 자체적으로 폰트를 바꾸지 않는다. */
.tp-onboarding-headline {
  font-size: 2.5rem;
  line-height: 1.35;
}
@media (max-width: 576px) {
  .tp-onboarding-headline { font-size: 1.5rem; }
}

body {
  background-color: var(--bg);
  color: var(--ink);
}

/* 2026-08-10 정정: 스펙상 헤더/사이드바는 --surface(흰색) - 네이비 강제배경 제거 */
.navbar.bg-primary-custom { background-color: var(--surface) !important; border-bottom: 1px solid var(--border); }
.navbar-brand { color: var(--ink) !important; }

/* 2026-08-10: 헤더 대비 버그 수정 - navbar-dark 제거 후에도 남아있던 흰 배경 위 흰 텍스트
   버튼(전체교회/성경읽기/오늘의모임/기도노트/즐겨찾기/로그아웃)을 흰 배경 기준 색으로 재설정. */
.btn-tp-outline {
  color: var(--ink-2);
  border: 1px solid var(--border);
  background-color: transparent;
}
.btn-tp-outline:hover {
  color: var(--primary);
  border-color: var(--primary);
  background-color: var(--primary-soft);
}
.text-tp-muted { color: var(--ink-3) !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.3px;
}

.card-title {
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 700;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: keep-all;
}

.category-card .small.text-muted {
  font-size: 0.8rem;
  font-weight: 500;
}

/* 2026-08-09: Stage 2 - 메인페이지 가로스크롤 행 스타일 */
.category-row-scroller {
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox 숨김 */
}

.category-row-scroller::-webkit-scrollbar {
  display: none; /* Chrome/Safari 숨김 */
}

.category-row-container {
  position: relative;
}

.category-row-scroller-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* 2026-08-10: 화살표가 카드를 가리는 문제 수정 - 기존엔 .category-row-container 안쪽
   가장자리(left:0/right:0)에 카드 스크롤러와 같은 박스에 놓여서 첫/마지막 카드 위에 그대로
   겹쳤다. 컨테이너에 좌우 여백(gutter)을 주고 그 여백 안에 화살표를 배치해 카드 영역
   바깥으로 완전히 빼낸다(Snow 지시 "카드 바깥쪽에 위치"). */
.category-row-container {
  padding: 0 38px;
}

/* 2026-08-12 지시(누락분 재지시) - 모바일에서 카드가 200~260px 고정폭이라 3개는커녕
   1.5개도 못 보이던 문제. 카드 개별 width 대신 .category-row-scroller의 직계 자식을
   한 번에 계산해 3개가 정확히 화면에 온전히 들어오게 한다(썸네일/말씀/쇼츠/교회 카드
   전부 flex-shrink-0 하나만 공유하므로 이 선택자 하나로 동일 컴포넌트를 쓰는 모든
   가로스크롤 행에 일괄 적용됨 - 템플릿 수정 불필요). 인라인 width(예: 200px)를 이겨야
   하므로 !important 필요. 계산식: 100vw - 페이지 컨테이너 좌우패딩(Bootstrap 기본
   24px) - 이 행의 좌우 화살표 여백(아래서 38px->16px로 축소, 32px) - 카드 사이 gap
   2칸(8px*2=16px) = 100vw - 72px, 이걸 3등분. */
@media (max-width: 576px) {
  .category-row-container {
    padding: 0 16px;
  }

  .scroll-button {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .category-row-scroller {
    gap: 8px !important;
  }

  .category-row-scroller > .flex-shrink-0 {
    width: calc((100vw - 72px) / 3) !important;
  }

  .category-row-scroller img.video-thumb,
  .category-row-scroller img.video-thumb-shorts {
    width: 100% !important;
  }
}

/* 2026-08-14 STEP4(2차 개편) - 원형 배경/테두리/그림자 제거하고 밝은회색 화살표 아이콘만
   남김(디자인 요청: "원형 배경 제거, 화살표 색상을 밝은회색으로"). --ink4가 이 앱 팔레트의
   "밝은회색" 톤(다른 회색 토큰 --ink2/--ink3보다 밝음). */
.scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.15s ease, color 0.15s ease;
  z-index: 10;
}

/* 2026-08-10(3차 수정): /main 카테고리 행 화살표도 hover가 아니라 항상 보이는 상태로
   통일 - 스크롤 불가능한 방향(오버플로우 없음/끝에 닿음)은 nav-arrow-disabled로 표시.
   watch 페이지 추천영상/churches 페이지네이션과 동일 패턴(updateRowArrows()가 로드+스크롤시
   전체 행을 계산). 기존 hover 전용 규칙은 제거 - 항상 보이는 쪽으로 사용성 개선. */

/* 2026-08-10(2차): 추천영상 화살표 + /churches 페이지네이션 버튼 공용 비활성화 스타일 -
   더 이상 그 방향으로 이동 불가능할 때 숨기지 않고 회색조+투명도 낮춰서 "비활성화"로 표시. */
.nav-arrow-disabled {
  opacity: 0.35 !important;
  cursor: default !important;
  pointer-events: none;
  filter: grayscale(1);
}

.scroll-button:hover {
  color: var(--tp-primary);
  transform: translateY(-50%) scale(1.12);
}

/* 2026-08-14 STEP4 - 화살표를 카드 영역 바깥, 행(.category-row-container)의 38px
   거터보다 더 가장자리로 이동(디자인 요청 "더 가장자리로"). 원형 배경이 없어졌으니
   카드와 겹쳐도 시각적으로 덜 거슬려서 여유 있게 뺄 수 있음. */
.scroll-button-left {
  left: -14px;
}

.scroll-button-right {
  right: -14px;
}

/* 2026-10-03 - 폰 폭에서는 -14px가 뷰포트를 넘어(영상 상세 추천행 오른쪽 화살표가 390px 화면에서
   392px까지 나감) 페이지 전체가 가로로 2px 흔들렸다. 모바일만 가장자리 여백을 줄인다. */
@media (max-width: 576px) {
  .scroll-button-left {
    left: -8px;
  }

  .scroll-button-right {
    right: -8px;
  }
}

.category-row-section {
  margin-bottom: 2.75rem;
  padding: 1.1rem 1.2rem;
  border-radius: 18px;
}

.bg-primary-custom {
  background-color: var(--tp-primary) !important;
}

.category-card {
  border: 1px solid #e7e7f3;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(30, 36, 48, 0.05);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(74, 58, 255, 0.16);
  border-color: var(--tp-primary);
}

/* 2026-08-10: 말씀(성경구절) 카드 - 본문이 길어서 카드 크기에 맞게 4줄로 줄임(ellipsis) */
.verse-card-content {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 2026-08-11(재작업 지시, Snow 선택: 옵션2) - 카테고리별 진한 배경색이 다크모드+카테고리선택
   상태에서 "촌스러운 남색/갈색 박스"로 튀던 문제 - 카테고리마다 다른 색 대신 인디고 하나로
   통일된 아주 옅은 틴트로 교체. --soft 변수를 그대로 쓰면 다크모드에서 그 변수 자체가 진한
   값(oklch 0.33)이라 똑같은 문제가 재발하므로, 현재 배경 위에 브랜드 인디고를 7% 정도만
   섞는 color-mix로 라이트/다크 양쪽에서 항상 "옅은" 상태를 보장한다. */
.cat-accent-gratitude, .cat-accent-job, .cat-accent-money, .cat-accent-business,
.cat-accent-health, .cat-accent-family, .cat-accent-romance, .cat-accent-marriage,
.cat-accent-depression, .cat-accent-comfort, .cat-accent-exam, .cat-accent-relationships,
.cat-accent-neutral {
  background: color-mix(in srgb, var(--brand) 7%, transparent);
}

/* 2026-08-10: 교회 로고(유튜브 채널 프로필 이미지 재사용). 2026-08-14 갱신 - 로고가
   없거나(BACKLOG #150) 오염 도메인으로 차단된 경우 community.html과 동일한 ⛪ 폴백을
   보여준다(완전히 빈 자리 대신). 이미지/폴백 둘 다 이 클래스를 공유해 모양이 통일됨. */
.church-logo {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* 2026-08-10: 교회별 영상목록 - 유튜브 썸네일(16:9, 유튜브 UI/UX 준용) */
.video-thumb {
  width: 160px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  background-color: var(--bg-2);
}

@media (max-width: 576px) {
  .video-thumb { width: 96px; }
}

/* 2026-08-11(/main 쇼츠 행 지시) - 쇼츠는 세로(9:16)로 촬영되는 게 원칙이라 유튜브
   thumbnail(mqdefault.jpg)도 실제로는 그 세로 영상을 가운데 기준으로 담은 형태 -
   object-fit:cover로 세로 컨테이너에 맞추면 좌우 레터박스가 잘려나가고 실제 인물/자막
   중심부가 크게 보여 일반 16:9 카드보다 쇼츠 미리보기로 더 적합하다고 판단(선택 사유). */
.video-thumb-shorts {
  width: 140px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 10px;
  background-color: var(--bg-2);
}

@media (max-width: 576px) {
  .video-thumb-shorts { width: 100px; }
}

/* 2026-08-12 지시(지도 UI - 마커 클릭시 카드 하이라이트) */
.tp-map-highlight {
  box-shadow: 0 0 0 3px var(--brand) !important;
  transition: box-shadow .2s ease;
}

.church-card {
  border: 1px solid #e7e7f3;
  border-radius: 14px;
}

.church-card .badge-trust-ok {
  background-color: #16a34a;
}

.church-card .badge-trust-pending {
  background-color: #d97706;
}

.stars {
  color: #f5a623;
  letter-spacing: 1px;
}

.stub-box {
  border: 2px dashed #c9c4ff;
  border-radius: 16px;
  background: #f4f2ff;
}

.ratio-16x9 iframe {
  border-radius: 12px;
}

/* ===== 2026-08-09 Snow 지시: 신규 추가 요소 표시(AutoStock과 동일 클래스명/색상 통일,
   나중에 일괄 제거 예정) - 기존 스타일은 위쪽 그대로, 이 블록만 파일 끝에 순수 추가. ===== */
.new-feature-flag {
  background-color: #fff9c4 !important;
}
.new-feature-flag-badge {
  display: inline-block;
  background-color: #fff9c4;
  color: #7a6a00;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 0.3rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* ===== 2026-08-10 정정: todaysprayer.md 스펙 그대로(카드 14px, 그림자 없음).
   스펙에 danger/warn/ok 토큰이 없음 - "빨강은 LIVE 배지에만, 나머지 강조는 모두 primary"
   규칙이라 text-danger/text-success 등은 임의로 매핑하지 않고 부트스트랩 기본값 유지. */
.card { border-radius: 14px !important; box-shadow: none !important; border: 1px solid var(--border); background-color: var(--surface); color: var(--ink); }
a { color: var(--primary); }
a:hover { color: var(--primary-light); }
.btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-primary:hover { background-color: var(--primary-light) !important; border-color: var(--primary-light) !important; }
.text-muted { color: var(--ink-3) !important; }
.page-link { color: var(--primary); background-color: var(--surface); border-color: var(--border); }
.badge-live { background-color: var(--live) !important; color: #fff !important; }
.page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); }

/* 2026-08-11(교회 상세 팝업 디자인 정리 지시) - Bootstrap 모달의 .modal-content는 .card와
   완전히 별개 클래스라 디자인시스템 토큰(surface/border/카드radius/그림자)이 하나도 안
   먹고 있었음(라이트에서는 우연히 흰배경이라 안 보였지만 다크모드에서는 그대로 밝은
   흰 배경으로 튀는 실제 버그). /main 추천영상 카드와 동일한 radius/그림자 값을 그대로
   재사용(신규 디자인 안 함). */
.modal-content {
  background-color: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(30, 36, 48, 0.16);
}
.modal-header, .modal-footer { border-color: var(--border); }
/* h5(#churchModalName)가 기존엔 heading 셀렉터(h1~h3)에 안 들어가있어 본문폰트로
   렌더링되고 있었음 - 제목 위계를 명확히 하려면 다른 헤딩과 동일하게 Serif KR 적용. */
#churchModalName { font-family: var(--font-serif); font-weight: 700; }
#churchModalMeta { font-size: 0.9rem; }
.church-modal-logo { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--bg-2); }

/* 2026-08-11 Claude Design v2(다크모드 7e) - Bootstrap 기본 배경/텍스트가 라이트로
   하드코딩돼 다크토글 시 카드/알림박스 등이 흰 배경으로 남던 문제 수정. */
.alert-light { background-color: var(--chip) !important; color: var(--ink) !important; border-color: var(--border) !important; }
.form-control, .form-select {
  background-color: var(--surface); color: var(--ink); border-color: var(--border);
}
.form-control:focus, .form-select:focus { background-color: var(--surface); color: var(--ink); }
/* 2026-08-11(/churches 필터 색상통일 지시) - 브라우저 기본 disabled 스타일이 author
   background-color를 무시하고 옅게(거의 흰색으로) 오버레이하는 경우가 있어(시/군/구가
   시/도 미선택시 disabled) 명시적으로 다시 지정 - 다른 select들과 같은 --surface 유지,
   흐림 표시는 opacity로만. */
.form-select:disabled { background-color: var(--surface); opacity: 0.6; }
/* 2026-08-11(/churches 필터 한줄 강제 지시) - 교단전체가 보통 가장 긴 텍스트라(장로교
   등 라벨+건수) flex-basis를 더 좁게 잡아 3개 합이 좁은 화면에도 한 줄에 들어가게 함. */
.tp-filter-select {
  flex: 1 1 0; min-width: 0; font-size: 0.8rem; padding: 6px 8px;
}

/* 2026-08-11(QT 하이라이트 지시) - 옅은 형광색, 라이트/다크 공통으로 과하지 않게.
   기존 완료팝업(4단계)과 시각적으로 겹치지 않도록 별도 클래스. */
/* 2026-08-12 지시(QT 5단계 개편 1번 - 타이포그래피 개선) - 폰트확대(1rem->1.15rem)/
   행간확대(기본 1.5->1.9)/문단 여백 확대(mb-1->mb-3에 준하는 값). */
.qt-verses-typo .qt-verse {
  font-size: 1.15rem;
  line-height: 1.9;
  margin-bottom: 1rem;
}
.qt-verse { cursor: pointer; border-radius: 4px; padding: 2px 4px; transition: background-color .15s; }
.qt-verse:hover { background-color: color-mix(in srgb, var(--brand) 6%, transparent); }
.qt-verse-highlighted { background-color: color-mix(in srgb, #d4f542 40%, transparent); }

.qt-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background-color: var(--ink); color: var(--surface);
  padding: 10px 20px; border-radius: 999px; font-size: 0.9rem;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
  z-index: 1050;
}
.qt-toast.show { opacity: 1; transition: opacity .2s ease; }
.btn-outline-secondary { color: var(--ink2); border-color: var(--border); }
.btn-outline-dark { color: var(--ink); border-color: var(--border); }
.dropdown-menu { background-color: var(--surface); color: var(--ink); }
.table { color: var(--ink); }

/* 2026-08-11(#91 출퇴근용 오디오모드) - display:none이 아니라 화면 밖으로 밀어내는
   방식(실측: display:none도 재생을 안 멈췄지만, 브라우저/기기별 차이 리스크를 줄이려고
   더 보수적인 방식 채택). 레이아웃 공간은 접어서 하단 콘텐츠가 그 자리로 올라오게 함. */
.tp-audio-hidden {
  position: fixed !important;
  width: 2px !important;
  height: 2px !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0;
  margin: 0 !important;
}