@font-face {
    font-family: 'NanumSquareRoundB';
    src: url('../fonts/NanumSquareRoundB.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: 'HumanBeomseokNeo';
    src: url('../fonts/HumanBeomseokNeo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }

@font-face {
  font-family: 'Gowun Batang';
  src: url('../fonts/GowunBatang-Regular.woff2') format('woff2'),
       url('../fonts/GowunBatang-Regular.woff') format('woff'),
       url('../fonts/GowunBatang-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


  html {
    height: 100%;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;      /* 좌우 가운데 */
    justify-content: center;  /* 상하 가운데 - 내용이 화면보다 짧을 때만 효과가 있고,
                                  화면보다 길어지면 자동으로 위에서부터 자연스럽게 흐른다 */
    background: #fafbfc;
    font-family: 'Pretendard', sans-serif;
    color: #1a202c;
  }
  .page { width: 100%; max-width: 480px; margin: 0 auto; padding: 28px 24px 110px; }

  header { text-align: center; margin-bottom: 30px; }
  .logo-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fafbfc;
    text-align: center;
    padding: 6px 0 16px;
    /* 배경만 화면 좌우 끝까지 확장 (로고/레이아웃은 그대로, 스크롤 시 옆으로 콘텐츠가 비쳐 보이는 것 방지) */
    box-shadow: 0 0 0 100vmax #fafbfc;
    clip-path: inset(0 -100vmax);
  }
  .logo { display: block; max-width: 150px; height: auto; margin: 0 auto; }
  .welcome-banner { display: block; max-width: 360px; width: 100%; height: auto; margin: 10px auto 0; }

  /* 우측 상단 햄버거 버튼 스타일 */
  .hamburger-btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    background: none; border: none; font-size: 1.6rem; color: #1740a8;
    cursor: pointer; padding: 4px 8px; line-height: 1; z-index: 101;
  }
  .hamburger-btn.is-active {
    display: none;
  }

  .nav-menu {
    display: none; max-width: 320px; margin: 10px auto 0; background: #fff;
    border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08); text-align: center;
  }
  .nav-menu.open { display: block; }
  .nav-menu-item {
    font-family: 'Pretendard', sans-serif; font-size: 1rem; font-weight: 600;
    color: #1740a8; padding: 13px 10px; margin: 0; cursor: pointer;
    border-bottom: 1px dotted #e2e8f0;
  }
  .nav-menu-item:last-child { border-bottom: none; }

  .divider { border: 0; border-top: 1px dotted #cbd5e1; margin: 0; }

  .menu-item { padding: 12px 0; text-align: center; }
  
  .menu-title { font-family: 'NanumSquareRoundB', 'Pretendard', sans-serif; font-size: 1.4rem; font-weight: 700; color: #1740a8; margin: 0; cursor: pointer; transition: opacity 0.15s ease; }
  .menu-title.underline { text-decoration: underline; text-underline-offset: 4px; }
  .menu-title.active { opacity: 0.5; }

  .menu-content { display: none; margin-top: 14px; text-align: left; font-size: 1.06rem; line-height: 1.85; color: #374151; font-family: 'Pretendard', sans-serif; word-break: keep-all; }
  .menu-content.open { display: block; }
  .menu-content-empty { color: #a0aec0; font-size: 0.9rem; margin-top: 10px; text-align: center; }
  .about-directions { margin-top: 14px; text-align: center; font-size: 1.06rem; }
  .about-directions a { color: #1d4ed8; text-decoration: underline; }
  .map-embed { margin-top: 12px; border-radius: 8px; overflow: hidden; }
  .map-embed iframe { display: block; }

  /* 클릭 가능한 미리보기 카드 구조 */
  .scripture-card-wrapper, .notice-card-wrapper {
    cursor: pointer; margin-top: 10px;
  }

  /* 성경 구절 & 언어 버튼 가로 한 줄 정렬 */
  .scripture-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 10px;
  }
  .scripture-header-row-full {
    flex-wrap: wrap;
    row-gap: 6px;
    width: 100%;
  }
  .scripture-header-row-full .esv-toggle-btn {
    margin-left: auto;
  }
  .scripture-ref-text {
    font-size: 0.95rem;
    color: #1a202c;
    font-weight: 700;
  }
.scripture-ref {
    font-weight: 700;
  }

  /* 이제 .btn-translate 기본 크기(플로팅 버튼과 동일)를 그대로 쓴다 */
  .scripture-lang-btn {
  }

  .scripture-preview, .notice-preview {
    position: relative; max-height: 2.8em; overflow: hidden; text-align: left; font-size: 1.06rem; color: #4a5568; line-height: 1.85; font-family: 'Pretendard', sans-serif; word-break: keep-all;
  }
  .scripture-preview.hidden, .notice-card-wrapper.hidden { display: none; }
  .scripture-preview .fade, .notice-preview .fade { position: absolute; bottom: 0; left: 0; right: 0; height: 2.2em; background: linear-gradient(to bottom, rgba(250,251,252,0), #fafbfc); }
  
  .scripture-full { display: none; text-align: left; font-size: 1.06rem; color: #374151; line-height: 1.85; margin-top: 8px; font-family: 'Pretendard', sans-serif; word-break: keep-all; }
  .scripture-full.open { display: block; }
  .scripture-bibleverse-frame { min-height: 200px; width: calc(100% + 48px); margin-left: -24px; margin-right: -24px; }
  .scripture-full.past-scripture { padding: 0 1em; color: #9aa5b5; }

  /* ESV 저작권 문구 표기 */
  .esv-copyright {
    display: block;
    margin-top: 16px;
    font-size: 0.78rem;
    color: #8898aa;
    line-height: 1.4;
    font-style: italic;
  }

  /* "성경 더 읽기" 버튼 - 예전엔 레퍼런스 옆에 붙어 있어서 레퍼런스 길이에
     따라 삐뚤어지거나 뚱뚱해지는 문제가 있었다. 본문+저작권 표기 바로
     다음 줄, 왼쪽 정렬로 옮김. */
  .scripture-more-row {
    margin-top: 10px;
    text-align: left;
  }
  /* 지난 설교 쪽 성경 본문 박스(.past-scripture)는 좌우 1em 안쪽 여백이
     있어서, 그 바로 다음에 오는 버튼 줄도 같은 여백을 줘야 왼쪽 기준선이
     설교 본문이 아니라 성경 본문/저작권 표기와 맞는다. */
  .scripture-full.past-scripture + .scripture-more-row {
    padding: 0 1em;
  }

  /* 설교 제목 여백축소 */
  .sermon-title { font-weight: 700; text-align: center; font-size: 1.43rem; margin: 2px 0 3px; }
  .sermon-body { margin-top: 14px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 1.06rem; line-height: 1.85; word-break: keep-all; }

  .btn-translate {
    padding: 10px 18px;
    background: #eef2f9;
    color: #1740a8;
    border: 1px solid #dbe4f3;
    border-radius: 999px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
  }
  .btn-bible-more {
    padding: 10px 18px;
    background: #eef0f2;
    color: #1a1a1a;
    border: 1px solid #d5d9dd;
    border-radius: 999px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .hint-caption { color: #a0aec0; font-size: 0.78rem; text-align: right; margin-top: 6px; }

  /* 기존 .sermon-title 아래에 추가 */
  #en-title {
    margin: 2px 0 3px !important;
  }

  /* 한글 설교 제목 위아래 여백 - 빈 줄 하나만큼 넓게 (영어 쪽 느낌에 맞춤) */
  #ko-title {
    margin: 30px 0 !important;
  }

  /* 한글/영어 성경 본문과 설교 본문 사이 여백 - 빈 줄 하나만큼 넓게 */
  #ko-body, #en-body {
    margin-top: 30px !important;
  }

  /* 이번주/지난 설교 성경 본문의 절 번호 - 성경 더 읽기와 같은 모양
     (본문보다 작고 연한 색, 번호와 본문 사이에 일정한 간격) */
  .scripture-full .verse-num {
    display: inline-block;
    min-width: 30px;
    padding-right: 4px;
    color: #94a3b8;
    font-size: 0.8em;
    vertical-align: top;
  }

  /* 절마다 한 줄씩 블록으로 두고, 절 사이에 성경 더 읽기처럼 약간의 세로 간격을 준다 */
  .scripture-full .verse-line {
    display: block;
  }
  .scripture-full .verse-line + .verse-line {
    margin-top: 10px;
  }

  /* 여러 본문을 이어 붙일 때, 본문 안에 붙는 개별 레퍼런스 표시 */
  .passage-ref-inline {
    color: #1a202c;
    font-weight: 400;
  }
  .scripture-full.past-scripture .passage-ref-inline {
    color: #1a202c;
  }

  /* 지난 설교 한편 - 한국어·영어 본문 */
  #past-text-ko #ko-body,
  #past-text-en #en-body {
    font-family: 'Gowun Batang', serif;
  }

  /* 한국어·영어 성경 위치의 위아래 여백을 동일하게 설정 */
  #ko-ref,
  #en-ref {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 지난 설교 상단 안내/번역 버튼 정렬 */
  .past-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 12px;
  }
 
  .past-top-left {
    flex: 1;
    text-align: left;
    margin: 0;
  }

  .past-top-right {
    flex: 0 0 auto;
    text-align: right;
    margin-left: auto;
  }

  .past-top-right .hint-caption {
    text-align: right;
    margin-top: 4px; 
  }

  .reveal-row { text-align: center; margin: 0 0 14px; }
  .reveal-btn {
    display: inline-block; padding: 8px 16px; margin: 0;
    min-width: 76px; text-align: center; line-height: 1.4; vertical-align: middle;
    background: #eef2f9; color: #1740a8; border: 1px solid #dbe4f3; border-radius: 20px;
    font-family: 'Pretendard', sans-serif; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  }
  .reveal-link { color: #2563eb; text-decoration: underline; font-weight: 600; }
  .contact-note { color: #718096; margin-bottom: 18px; text-align: center; font-size: 0.95rem; }
  
  #contact-content input, #contact-content textarea {
    width: 100%; padding: 10px; margin-bottom: 10px;
    border: 1px solid #e2e8f0; border-radius: 6px; font-family: inherit; font-size: 0.95rem;
  }
  .contact-status { text-align: center; font-size: 0.85rem; color: #1d4ed8; margin-top: 8px; min-height: 1.2em; }

  .gallery-masonry { column-width: 140px; column-count: 3; column-gap: 8px; }
  .gallery-masonry img { width: 100%; margin-bottom: 8px; border-radius: 6px; display: block; break-inside: avoid; cursor: pointer; }

  .admin-fab {
    position: fixed; bottom: 16px; right: 16px; text-decoration: none; color: #cbd5e1;
    display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px;
    transition: opacity 0.2s ease;
  }

  /* 성경/설교 본문을 스크롤하는 동안만 우측 하단에 떠 있는 언어 전환 버튼 */
  #floating-lang-btn {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 16px;
    z-index: 95;
    padding: 10px 18px;
    background: rgba(238, 242, 249, 0.88);
    backdrop-filter: blur(2px);
    color: #1740a8;
    border: 1px solid rgba(219, 228, 243, 0.9);
    border-radius: 999px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
    cursor: pointer;
  }

  .scroll-sentinel { height: 1px; }
  .admin-fab .gear { font-size: 20px; }
  .admin-fab.has-new { color: #2563eb; font-weight: 600; }

  .lightbox {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9);
    z-index: 1000; align-items: center; justify-content: center; padding: 24px;
    box-sizing: border-box; touch-action: none; overflow: hidden;
  }
  .lightbox.open { display: flex; }
  .lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; user-select: none; transform-origin: center center; transition: transform 0.15s ease; }
  .lightbox img.no-transition { transition: none; }
  .lightbox-close {
    position: fixed; top: 14px; right: 18px; color: #fff; font-size: 34px;
    line-height: 1; cursor: pointer; z-index: 1001; padding: 6px 10px;
  }
  
  /* 갤러리 라이트박스 화살표 수정: 검은 상자 제거 및 하얀 화살표만 남김 */
  .lightbox-arrow {
    position: fixed; top: 50%; transform: translateY(-50%);
    background: transparent; color: #fff; border: none; font-size: 42px;
    padding: 12px 16px; cursor: pointer; z-index: 1001;
    user-select: none; transition: opacity 0.2s; opacity: 0.8;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  }
  .lightbox-arrow:hover { opacity: 1; }
  .lightbox-arrow.prev { left: 8px; }
  .lightbox-arrow.next { right: 8px; }