/* ==========================================================================
   샘과나무 선교회 - Light Theme Override (style.css 뒤에 로드)
   - 사이트 전체: 밝은 화이트 계열
   - SMART e-LIBRARY 영역만: 청색(블루) 배경 유지
   - 4대 사역 카드: 내용에 맞는 은은한 배경 일러스트
   - 오늘의 묵상: 게시판(코르크보드 + 압정 메모지) 디자인
   - 모바일 앱 설치(PWA) 배너
   * 기존 style.css 는 수정하지 않고 이 파일에서만 덮어씁니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 색상 변수 (밝은 테마) - 로고 색(청록 #42aac8 / 초록 #5b9a45) 반영
   -------------------------------------------------------------------------- */
:root {
  --bg-dark: #f7faff;
  --bg-dark-soft: #eef4fb;
  --bg-surface: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.94);
  --bg-card-hover: #ffffff;

  --royal-50: #16294f;
  --royal-100: #1e56b3;
  --royal-200: #2f6fd6;

  --logo-teal: #42aac8;
  --logo-green: #5b9a45;

  --text-primary: #0f1f3d;
  --text-secondary: #3d4c68;
  --text-muted: #6a7891;

  --border-glass: rgba(30, 64, 120, 0.12);
  --border-glass-blue: rgba(47, 111, 214, 0.25);
  --border-glass-hover: rgba(47, 111, 214, 0.45);

  --glass-bg: rgba(255, 255, 255, 0.88);

  --shadow-sm: 0 4px 12px rgba(30, 60, 110, 0.08);
  --shadow-md: 0 10px 30px rgba(30, 60, 110, 0.12);
  --shadow-lg: 0 18px 44px rgba(30, 60, 110, 0.14);
  --shadow-blue: 0 8px 24px rgba(47, 111, 214, 0.10);
}

html {
  background-color: var(--bg-dark);
}

body {
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(at 0% 0%, rgba(66, 170, 200, 0.10) 0px, transparent 55%),
    radial-gradient(at 100% 40%, rgba(91, 154, 69, 0.08) 0px, transparent 60%),
    radial-gradient(at 50% 100%, rgba(47, 111, 214, 0.06) 0px, transparent 65%);
  color: var(--text-primary);
}

/* 배경 글로우 (은은한 로고색) */
.ambient-orb {
  opacity: 0.45;
}

.ambient-1 {
  background: radial-gradient(circle, rgba(66, 170, 200, 0.35), transparent 70%);
}

.ambient-2 {
  background: radial-gradient(circle, rgba(91, 154, 69, 0.25), transparent 70%);
}

.ambient-3 {
  background: radial-gradient(circle, rgba(47, 111, 214, 0.22), transparent 75%);
  opacity: 0.35;
}

/* 그라데이션 텍스트 */
.gradient-text-gold,
.gradient-text-blue {
  background: linear-gradient(135deg, #1d4ed8 0%, #2f8fc0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-emerald,
.gradient-text-cyan {
  background: linear-gradient(135deg, #2f8fc0 0%, #5b9a45 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   2. 헤더 / 로고 / 네비게이션
   -------------------------------------------------------------------------- */
.header-nav.scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--border-glass);
  box-shadow: 0 6px 24px rgba(30, 60, 110, 0.10);
}

.logo-symbol {
  width: 74px;
  height: 46px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(66, 170, 200, 0.28);
  box-shadow: 0 3px 12px rgba(66, 170, 200, 0.22);
  padding: 3px 4px;
}

.logo-text h1 {
  color: var(--text-primary);
}

.logo-text span {
  color: var(--royal-100);
}

.nav-link {
  color: var(--text-secondary);
}

.nav-link:hover,
.nav-link.active {
  color: var(--royal-100);
}

/* SMART e-LIBRARY 메뉴: 청색 배경 알약 */
.nav-link.nav-link-smart {
  background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%);
  color: #ffffff !important;
  padding: 0.42rem 0.95rem;
  border-radius: var(--radius-full);
  box-shadow: 0 3px 12px rgba(2, 132, 199, 0.35);
}

.nav-link.nav-link-smart::after {
  display: none;
}

.nav-link.nav-link-smart:hover {
  color: #ffffff !important;
  text-shadow: none;
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
}

.mobile-menu-toggle {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   3. 버튼
   -------------------------------------------------------------------------- */
.btn-secondary {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border-glass-blue);
  box-shadow: 0 2px 8px rgba(30, 60, 110, 0.06);
}

.btn-secondary:hover {
  background: #f1f6ff;
  border-color: var(--royal-300);
}

.btn-outline-gold,
.btn-outline-blue {
  background: #ffffff;
  color: var(--royal-100);
  border: 1px solid var(--border-glass-blue);
}

.btn-outline-gold:hover,
.btn-outline-blue:hover {
  background: #eaf2ff;
  color: #1e40af;
  border-color: var(--royal-300);
}

/* --------------------------------------------------------------------------
   4. 히어로
   -------------------------------------------------------------------------- */
.hero-bg-overlay {
  background:
    radial-gradient(circle at 15% 20%, rgba(66, 170, 200, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(91, 154, 69, 0.13) 0%, transparent 45%),
    linear-gradient(180deg, #f2f9ff 0%, #ffffff 60%, #f6faf3 100%);
}

.hero-badge {
  background: rgba(66, 170, 200, 0.10);
  border: 1px solid rgba(66, 170, 200, 0.35);
  color: var(--royal-100);
}

.hero-badge .pulse-dot {
  background-color: var(--logo-teal);
  box-shadow: 0 0 10px var(--logo-teal);
}

.hero-title {
  color: var(--text-primary);
}

.hero-verse {
  background: rgba(66, 170, 200, 0.09);
  border-left: 3px solid var(--logo-teal);
  color: var(--royal-50);
}

.hero-verse cite {
  color: var(--royal-100);
}

.stat-item h3 {
  color: var(--royal-100);
}

.showcase-card {
  background: linear-gradient(145deg, #ffffff, #f2f8ff);
  border: 1px solid rgba(66, 170, 200, 0.30);
  box-shadow: var(--shadow-lg);
}

.showcase-title-tag {
  color: var(--royal-100);
}

.showcase-title-tag i {
  color: var(--logo-teal) !important;
}

.showcase-info h4 {
  color: var(--text-primary);
}

.flipbook-mini-preview {
  background: #e8eef7;
  box-shadow: 0 10px 25px rgba(30, 60, 110, 0.22);
}

.floating-pill {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border-glass-blue);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   5. SMART e-LIBRARY  (이 영역만 청색 배경 유지)
   -------------------------------------------------------------------------- */
.smart-box-card {
  /* 카드 안쪽은 어두운 청색 배경이므로 원래의 밝은 글자색 변수로 복원 */
  --text-primary: #ffffff;
  --text-secondary: #d6e2f5;
  --text-muted: #a9bddb;
  --royal-50: #eff6ff;
  --royal-100: #93c5fd;
  --royal-200: #60a5fa;
  --accent-cyan: #38bdf8;
  background: linear-gradient(135deg, #1c3a85 0%, #0f2354 100%);
  border: 1px solid rgba(96, 165, 250, 0.45);
  box-shadow: 0 14px 36px rgba(15, 35, 84, 0.30), 0 0 22px rgba(37, 99, 235, 0.18);
}

.smart-box-card:hover {
  background: linear-gradient(135deg, #234a9e 0%, #14306f 100%);
  box-shadow: 0 18px 44px rgba(15, 35, 84, 0.40), 0 0 32px rgba(56, 189, 248, 0.28);
}

/* --------------------------------------------------------------------------
   6. 비전 & 스토리
   -------------------------------------------------------------------------- */
.vision-card {
  background: #ffffff;
  box-shadow: var(--shadow-md);
}

.vision-card::before {
  background: linear-gradient(90deg, var(--logo-teal), var(--logo-green));
}

.vision-card h3,
.pillar-content h4 {
  color: var(--text-primary);
}

.pillar-item {
  background: #f6faff;
}

.pillar-item:hover {
  background: #eaf3ff;
}

.pillar-icon {
  background: rgba(66, 170, 200, 0.14);
  color: var(--royal-100);
}

.story-box {
  background: linear-gradient(145deg, #f1f9fd 0%, #f6fbf2 100%);
  border: 1px solid rgba(66, 170, 200, 0.28);
  box-shadow: var(--shadow-md);
}

.quote-icon {
  color: var(--logo-teal);
  opacity: 0.6;
}

.story-lead {
  color: var(--text-primary);
}

.founder-info h5 {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   7. 4대 사역 - 내용에 맞는 은은한 배경 일러스트
   -------------------------------------------------------------------------- */
.ministry-card {
  --mc: #2f7fd1;
  --mc-soft: rgba(47, 127, 209, 0.12);
  background-color: #ffffff;
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}

.ministry-card>* {
  position: relative;
  z-index: 1;
}

/* 하단 우측 일러스트 */
.ministry-card::after {
  content: '';
  position: absolute;
  right: -8px;
  bottom: -10px;
  width: 82%;
  height: 78%;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.ministry-card:hover::after {
  opacity: 0.55;
  transform: scale(1.05) translateY(-4px);
}

/* 상단 포인트 바 (항상 은은하게 표시) */
.ministry-card::before {
  z-index: 2;
  background: linear-gradient(90deg, var(--mc), transparent);
  opacity: 0.55;
}

.ministry-card:hover::before {
  background: linear-gradient(90deg, var(--mc), transparent);
  opacity: 1;
}

.ministry-card:hover {
  background-color: #ffffff;
  border-color: var(--mc);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--mc-soft);
}

.ministry-icon {
  background: var(--mc-soft);
  border: 1px solid var(--mc-soft);
  color: var(--mc);
}

.ministry-card:hover .ministry-icon {
  background: var(--mc);
  color: #ffffff;
}

.ministry-card h3 {
  color: var(--text-primary);
}

.ministry-tag-item {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--mc-soft);
  color: var(--text-secondary);
}

/* 1) 말씀 출판 - 펼친 책 + 글줄 (청록) */
.ministries-grid .ministry-card:nth-child(1) {
  --mc: #3a8fbf;
  --mc-soft: rgba(58, 143, 191, 0.14);
  background-image: linear-gradient(160deg, #eaf5fc 0%, #ffffff 72%);
}

.ministries-grid .ministry-card:nth-child(1)::after {
  background-image: url('../images/bg/ministry-publish.svg');
}

/* 2) 디지털 복음 콘텐츠 - 노트북 + 플립북 + 신호 (블루) */
.ministries-grid .ministry-card:nth-child(2) {
  --mc: #2f7fd1;
  --mc-soft: rgba(47, 127, 209, 0.14);
  background-image: linear-gradient(160deg, #e9f1fe 0%, #ffffff 72%);
}

.ministries-grid .ministry-card:nth-child(2)::after {
  background-image: url('../images/bg/ministry-digital.svg');
}

/* 3) 교회개척 컨설팅 - 교회 + 새벽빛 + 나무 (따뜻한 오렌지) */
.ministries-grid .ministry-card:nth-child(3) {
  --mc: #d98a4e;
  --mc-soft: rgba(217, 138, 78, 0.16);
  background-image: linear-gradient(160deg, #fff3e8 0%, #ffffff 72%);
}

.ministries-grid .ministry-card:nth-child(3)::after {
  background-image: url('../images/bg/ministry-church.svg');
}

/* 4) 개척교회 네트워크 & 후원 - 연결망 + 하트 (그린) */
.ministries-grid .ministry-card:nth-child(4) {
  --mc: #3f9d6a;
  --mc-soft: rgba(63, 157, 106, 0.15);
  background-image: linear-gradient(160deg, #eaf8ef 0%, #ffffff 72%);
}

.ministries-grid .ministry-card:nth-child(4)::after {
  background-image: url('../images/bg/ministry-network.svg');
}

/* --------------------------------------------------------------------------
   8. 디지털 서가
   -------------------------------------------------------------------------- */
.bookshelf-section {
  background: linear-gradient(180deg, #ffffff 0%, #f1f7fc 50%, #ffffff 100%);
}

.bookshelf-iframe-wrapper {
  background: #ffffff;
  box-shadow: var(--shadow-lg);
}

.iframe-header-bar {
  background: linear-gradient(135deg, #ffffff, #eef5fc);
  border-bottom: 1px solid var(--border-glass);
}

.iframe-status-title {
  color: var(--text-primary);
}

.iframe-status-sub {
  background: rgba(47, 111, 214, 0.10);
  color: var(--royal-100);
}

.iframe-btn {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border-glass-blue);
}

.iframe-btn:hover {
  background: #eaf2ff;
  color: #1e40af;
  border-color: var(--royal-300);
}

.iframe-btn.iframe-btn-blue,
.iframe-btn.iframe-btn-gold {
  color: #ffffff;
  border: none;
}

.iframe-btn.iframe-btn-blue:hover,
.iframe-btn.iframe-btn-gold:hover {
  color: #ffffff;
}

.bookshelf-iframe {
  background: #ffffff;
}

.catalog-accordion-toggle {
  background: linear-gradient(135deg, #ffffff, #f1f7fd);
  color: var(--text-primary);
}

.catalog-accordion-toggle:hover,
.catalog-accordion-toggle.active {
  background: linear-gradient(135deg, #f4f9ff, #e9f2fd);
}

.toggle-title-group h4 {
  color: var(--text-primary);
}

.toggle-icon-wrap {
  background: rgba(66, 170, 200, 0.14);
}

.toggle-badge {
  background: rgba(47, 111, 214, 0.08);
}

.toggle-chevron {
  background: rgba(30, 64, 120, 0.07);
}

.bookshelf-controls {
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.filter-btn:hover {
  color: var(--royal-100);
  background: rgba(47, 111, 214, 0.08);
}

.filter-btn.active,
.filter-btn.active:hover {
  background: var(--royal-600);
  color: #ffffff;
}

.search-box input {
  background: #f4f8fd;
  color: var(--text-primary);
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.book-card-3d {
  box-shadow: 5px 8px 20px rgba(30, 60, 110, 0.28);
}

.book-card:hover .book-card-3d {
  box-shadow: 0 16px 35px rgba(30, 60, 110, 0.35), 0 0 22px rgba(47, 111, 214, 0.22);
}

.book-title {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   9. 동역자 모집
   -------------------------------------------------------------------------- */
.coworker-card {
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.coworker-card:hover {
  box-shadow: var(--shadow-md);
}

.coworker-icon-wrap {
  background: rgba(66, 170, 200, 0.14);
  color: var(--royal-100);
}

.coworker-card h3 {
  color: var(--text-primary);
}

.coworker-list li i {
  color: var(--logo-green);
}

.recruit-banner {
  background: linear-gradient(135deg, #eef6fd 0%, #f3faef 100%);
  border: 1px solid rgba(66, 170, 200, 0.30);
  box-shadow: var(--shadow-sm);
}

.recruit-banner-text h4 {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   10. 오늘의 묵상 - 게시판(코르크보드 + 압정 메모지)
   -------------------------------------------------------------------------- */
.scripture-section {
  padding: 5rem 0;
}

.scripture-section .container {
  position: relative;
  width: calc(100% - 3rem);
  max-width: 980px;
  padding: 3.6rem 2rem 3.8rem;
  border-radius: 14px;
  background-color: #dcc08f;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.18), transparent 40%),
    url('../images/bg/cork.svg');
  background-size: auto, 400px 400px;
  /* 나무 액자 프레임 */
  box-shadow:
    0 0 0 10px #b98150,
    0 0 0 12px #8a5a35,
    inset 0 0 46px rgba(90, 55, 20, 0.38),
    0 26px 46px rgba(60, 40, 20, 0.25);
}

/* 게시판 위 붙여둔 포스트잇 (데스크톱만) */
.scripture-section .container::before,
.scripture-section .container::after {
  position: absolute;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 8px 14px rgba(60, 40, 20, 0.3);
  pointer-events: none;
}

.scripture-section .container::before {
  content: '말씀';
  top: 1.1rem;
  left: 0.9rem;
  color: #7a5b00;
  background:
    radial-gradient(circle at 50% 9px, #e53935 0 5px, transparent 6px),
    linear-gradient(160deg, #fff0a0, #ffe071);
  transform: rotate(-7deg);
}

.scripture-section .container::after {
  content: '기도';
  bottom: 1.1rem;
  right: 0.9rem;
  color: #2d6a3a;
  background:
    radial-gradient(circle at 50% 9px, #1e88e5 0 5px, transparent 6px),
    linear-gradient(160deg, #d9f3d6, #b7e4b2);
  transform: rotate(6deg);
}

/* 메모지(종이) */
.scripture-container {
  position: relative;
  z-index: 2;
  max-width: 800px;
  border: none;
  border-radius: 4px;
  padding: 3.4rem 2.5rem 2.6rem;
  background-color: #fffef8;
  background-image: repeating-linear-gradient(180deg,
      transparent 0,
      transparent 33px,
      rgba(66, 150, 200, 0.18) 33px,
      rgba(66, 150, 200, 0.18) 34px);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: rotate(-0.6deg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow:
    0 16px 30px rgba(60, 35, 10, 0.35),
    0 2px 5px rgba(60, 35, 10, 0.25);
}

.scripture-container:hover {
  transform: rotate(0deg) translateY(-3px);
}

/* 압정 */
.scripture-container::before {
  content: '';
  position: absolute;
  top: -13px;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a90 0, #e53935 45%, #a31515 100%);
  box-shadow: 0 7px 7px rgba(0, 0, 0, 0.32), inset -2px -3px 4px rgba(0, 0, 0, 0.25);
}

/* 테이프 */
.scripture-container::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -30px;
  width: 96px;
  height: 26px;
  background: rgba(244, 228, 170, 0.78);
  box-shadow: 0 2px 4px rgba(60, 40, 20, 0.15);
  transform: rotate(34deg);
  pointer-events: none;
}

.scripture-tag {
  color: #b4472f;
  border: 1.5px solid rgba(180, 71, 47, 0.5);
  border-radius: 4px;
  padding: 0.28rem 0.95rem;
  background: rgba(255, 255, 255, 0.55);
}

.scripture-quote {
  color: #1f2a44;
}

.scripture-reference {
  color: #2f5aa8;
}

.scripture-nav-btn {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid rgba(47, 111, 214, 0.3);
  box-shadow: 0 2px 6px rgba(30, 60, 110, 0.12);
}

.scripture-nav-btn:hover {
  background: var(--royal-400);
  color: #ffffff;
}

@media (max-width: 991px) {

  .scripture-section .container::before,
  .scripture-section .container::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .scripture-section {
    padding: 3.6rem 0;
  }

  .scripture-section .container {
    width: calc(100% - 2.2rem);
    padding: 2.6rem 0.9rem 2.4rem;
    box-shadow:
      0 0 0 7px #b98150,
      0 0 0 9px #8a5a35,
      inset 0 0 36px rgba(90, 55, 20, 0.38),
      0 20px 36px rgba(60, 40, 20, 0.25);
  }

  .scripture-container {
    padding: 2.6rem 1.2rem 2rem;
  }

  .scripture-quote {
    font-size: 1.2rem;
  }

  .scripture-container::after {
    right: -18px;
    width: 76px;
  }
}

/* --------------------------------------------------------------------------
   11. 후원 & 문의
   -------------------------------------------------------------------------- */
.sponsor-box {
  background: #ffffff;
  box-shadow: var(--shadow-md);
}

.sponsor-box h3 {
  color: var(--text-primary);
}

.bank-account-card {
  background: linear-gradient(135deg, #eef5ff 0%, #f6fbff 100%);
  border: 1px solid var(--border-glass-blue);
}

.bank-number {
  color: var(--text-primary);
}

.sponsor-banner-card {
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(30, 60, 110, 0.14);
}

.contact-info-item {
  background: #f7faff;
}

.contact-icon {
  background: rgba(66, 170, 200, 0.14);
}

.contact-text h5 {
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   12. 푸터
   -------------------------------------------------------------------------- */
.site-footer {
  background: #eef4fa;
  border-top: 1px solid var(--border-glass);
  color: var(--text-muted);
}

.footer-col h4 {
  color: var(--text-primary);
}

.footer-links a:hover {
  color: var(--royal-100);
}

.social-btn {
  background: #ffffff;
  color: var(--text-secondary);
  border: 1px solid var(--border-glass-blue);
}

.social-btn:hover {
  background: var(--royal-400);
  color: #ffffff;
}

.footer-bottom {
  border-top: 1px solid rgba(30, 64, 120, 0.10);
}

/* 푸터 안 SMART e-LIBRARY 링크 : 청색 배경 칩 */
.site-footer .footer-links a[href*="librarysmart"] {
  display: inline-block;
  background: linear-gradient(135deg, #0284c7, #1d4ed8);
  color: #ffffff !important;
  padding: 0.3rem 0.85rem;
  border-radius: 14px;
  line-height: 1.4;
}

/* 푸터 안 카카오 링크는 밝은 배경에서 읽히도록 */
.site-footer .footer-links a[href*="kakao"] {
  color: #8a6d00 !important;
}

/* --------------------------------------------------------------------------
   13. 모달 / 폼
   -------------------------------------------------------------------------- */
.modal-backdrop {
  background: rgba(15, 31, 61, 0.50);
}

.modal-dialog {
  background: #ffffff;
  box-shadow: var(--shadow-lg);
}

.modal-close-btn {
  background: rgba(15, 31, 61, 0.06);
  color: var(--text-primary);
}

.modal-close-btn:hover {
  background: var(--text-primary);
  color: #ffffff;
}

.book-modal-details h3 {
  color: var(--text-primary);
}

.book-modal-cover {
  box-shadow: 0 15px 35px rgba(30, 60, 110, 0.35);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: #f6f9fd;
  color: var(--text-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: #ffffff;
}

#coWorkerModal h3 {
  color: var(--text-primary) !important;
}

.floating-kakao-btn {
  box-shadow: 0 8px 22px rgba(30, 60, 110, 0.25), 0 0 16px rgba(254, 229, 0, 0.35);
}

/* --------------------------------------------------------------------------
   14. 모바일 내비게이션 (밝은 서랍 메뉴)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .nav-links {
    background: #ffffff;
    border-left: 1px solid var(--border-glass-blue);
    box-shadow: -10px 0 30px rgba(30, 60, 110, 0.18);
  }

  .logo-symbol {
    width: 62px;
    height: 38px;
    padding: 3px 4px;
  }
}

/* --------------------------------------------------------------------------
   15. 모바일 앱 설치(PWA) 배너
   -------------------------------------------------------------------------- */
.pwa-banner {
  position: fixed;
  left: 50%;
  bottom: 5.6rem;
  z-index: 1600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: calc(100% - 2rem);
  max-width: 420px;
  padding: 0.75rem 0.85rem;
  background: #ffffff;
  border: 1px solid rgba(66, 170, 200, 0.4);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(30, 60, 110, 0.25);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.3s ease;
}

.pwa-banner.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.pwa-banner-icon {
  width: 46px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid rgba(66, 170, 200, 0.28);
  border-radius: 10px;
  padding: 3px;
}

.pwa-banner-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.pwa-banner-text strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.pwa-banner-text span {
  display: block;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.pwa-banner-install {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1.05rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #2563eb, #0284c7);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: inherit;
}

.pwa-banner-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 31, 61, 0.06);
  color: var(--text-secondary);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 769px) {
  .pwa-banner {
    left: 2rem;
    bottom: 2rem;
    transform: translate(0, 140%);
  }

  .pwa-banner.show {
    transform: translate(0, 0);
  }
}

/* 설치 링크(푸터) */
.pwa-install-link {
  color: var(--royal-100) !important;
  font-weight: 600;
  cursor: pointer;
}