:root {
      --bg: #F7F8FB;
      --card: #FFFFFF;
      --line: #E9EAF1;
      --ink: #14161F;
      --ink-dim: #787E92;
      --blue: #3646E0;
      --blue-soft: #EBEDFC;
      --coral: #FF6B4A;
      --coral-soft: #FFEDE8;
      --navy-deep: #181C2E;
      --radius: 30.8px;
    }

    * {
      box-sizing: border-box;
    }


    html, body {
      overflow-x: hidden;
      max-width: 100%;
    }

    img, video, iframe, svg {
      max-width: 100%;
      height: auto;
    }

    body {
      font-family: 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif !important;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      margin: 0;
      background: var(--bg);
      color: var(--ink);
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    .wrap {
      max-width: 1386px;
      margin: 0 auto;
      padding: 0 37px;
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24.6px 61.6px;
      background: rgba(247, 248, 251, 0.88);
      backdrop-filter: blur(15.4px);
      border-bottom: 1.5px solid var(--line);
    }

    .nav .brand {
      display: flex;
      align-items: center;
      gap: 15.4px;
    }

    .nav .brand .real-logo {
      height: 40px;
      width: auto;
      display: block;
    }

    .nav .brand .church {
      font-size: 20px;
      color: var(--ink-dim);
      border-left: 1.5px solid var(--line);
      padding-left: 15.4px;
      font-weight: 700;
    }

    .nav-actions {
      display: flex;
      gap: 12.3px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .btn {
      font-size: 20px;
      font-weight: 700;
      padding: 13.9px 24.6px;
      border-radius: 18.5px;
      cursor: pointer;
      border: 1.5px solid var(--line);
      background: var(--card);
      color: var(--ink);
      transition: .15s;
      white-space: nowrap;
    }

    .btn:hover {
      border-color: var(--blue);
      color: var(--blue);
    }

    .btn-coral {
      background: var(--coral);
      color: #fff;
      border-color: var(--coral);
    }

    .hero {
      padding: 92.4px 37px 52.4px;
      margin: 0 -37px 12.3px;
      border-radius: 0 0 43.1px 43.1px;
      background: linear-gradient(165deg, var(--blue-soft) 0%, #fff 130%);
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12.3px;
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      background: var(--blue);
      padding: 12.3px 23.1px;
      border-radius: 999px;
      margin-bottom: 33.9px;
      box-shadow: 0 15.4px 33.9px -15.4px rgba(54, 70, 224, 0.55);
    }

    .hero h1 {
      font-size: 61.6px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.26;
      margin: 0 0 21.6px;
      color: #181c2e;
    }

    .hero .verse {
      font-size: 23.9px;
      color: var(--ink-dim);
      font-weight: 600;
    }

    .hero .verse b {
      color: var(--ink);
    }

    .hero-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    .hist-trigger {
      background: var(--card);
      border: 1.5px solid var(--line);
      font-size: 18px;
      font-weight: 700;
      color: var(--ink-dim);
      padding: 10px 20px;
      border-radius: 999px;
      cursor: pointer;
      white-space: nowrap;
    }

    .hist-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .hist-select {
      appearance: auto;
      font-family: inherit;
    }

    .format-strip {
      display: flex;
      gap: 12.3px;
      margin: 43.1px 0 0;
      padding: 9.2px;
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: 24.6px;
      overflow-x: auto;
    }

    .format-strip a {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 10.8px;
      padding: 15.4px 24.6px;
      border-radius: 16.9px;
      font-size: 20px;
      font-weight: 700;
      color: var(--ink-dim);
      white-space: nowrap;
    }

    .format-strip a.on {
      background: var(--blue);
      color: #fff;
    }

    .format-strip a .dot {
      width: 9.2px;
      height: 9.2px;
      border-radius: 50%;
      background: currentColor;
      opacity: .5;
    }

    .section {
      padding: 80.1px 0 0;
    }

    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 27.7px;
      flex-wrap: wrap;
      gap: 14px;
    }

    .section-head .label {
      display: flex;
      align-items: center;
      gap: 13.9px;
      font-size: 18.5px;
      font-weight: 800;
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .section-head .label .sw {
      width: 24.6px;
      height: 24.6px;
      border-radius: 7.7px;
      background: var(--blue-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
    }

    .section-head h2 {
      font-size: 30.8px;
      font-weight: 800;
      margin: 3.1px 0 0;
      letter-spacing: -0.02em;
    }

    .card {
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: var(--radius);
    }

    .video-block {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24.6px;
      align-items: stretch;
    }

    .video-block>* {
      min-width: 0;
    }

    .video-block.no-shorts {
      grid-template-columns: 1fr;
    }

    .video-context {
      font-size: 20px;
      color: var(--ink-dim);
      margin-bottom: 18.5px;
    }

    .video-context b {
      color: var(--ink);
      font-weight: 700;
    }

    .video-frame {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      aspect-ratio: 16/9;
      background: #000;
    }

    .video-frame video,
    .video-frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .video-frame .content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18.5px;
      color: #fff;
      text-align: center;
      padding: 0 30.8px;
      background: linear-gradient(150deg, #2B2E3D, #1B1D27 65%);
      cursor: pointer;
    }

    .video-frame .play {
      width: 70.8px;
      height: 70.8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      border: 2.3px solid rgba(255, 255, 255, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .video-frame h3 {
      font-size: 24.6px;
      font-weight: 700;
      margin: 0;
      letter-spacing: -0.01em;
      opacity: .9;
    }

    .video-frame .k {
      font-size: 16.2px;
      font-weight: 700;
      letter-spacing: .1em;
      opacity: .6;
    }

    /* 설교 원본 박스 — 쇼츠 박스(.shorts-side)와 같은 카드·헤더·여백 규칙 */
    .sermon-side {
      overflow: hidden;
    }

    .sermon-side-title {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-height: 1.35;
    }

    .sermon-side-title span {
      font-size: 16px;
      font-weight: 700;
      color: var(--ink-dim);
    }

    .sermon-side-body {
      padding: 24px;
    }

    .sermon-side .video-frame {
      border-radius: 18px;
    }

    @media (max-width: 640px) {
      .sermon-side .sermon-side-body,
      .shorts-side .shorts-side-viewport {
        padding: 16px;
      }

      .sermon-side .ss-head,
      .shorts-side .ss-head {
        padding: 16px;
      }
    }

    .shorts-side {
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
      max-height: 650px;
    }

    .video-block {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 24.6px;
      align-items: stretch;
    }

    .sub-video-block {
      width: 825px;
    }

    .video-source-tabs {
      display: flex;
      gap: 11px;
      margin-bottom: 18.5px;
    }

    .worship-tab {
      font-size: 18px;
      font-weight: 700;
      padding: 11px 22px;
      border-radius: 999px;
      border: 1.5px solid var(--line);
      background: #fff;
      color: var(--ink-dim);
      cursor: pointer;
    }

    .worship-tab.active {
      background: var(--blue);
      border-color: var(--blue);
      color: #fff;
    }

    .worship-tab-panel {
      display: none;
    }

    .worship-tab-panel.active {
      display: block;
    }

    .live-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ef4444;
      display: inline-block;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% {
        opacity: 1;
      }

      50% {
        opacity: .5;
      }

      100% {
        opacity: 1;
      }
    }

    .ss-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1.5px solid var(--line);
    }

    .ss-label {
      font-size: 13px;
      font-weight: 800;
      color: var(--coral);
      letter-spacing: .04em;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ss-title {
      font-size: 22px;
      font-weight: 800;
    }

    .shorts-nav {
      display: flex;
      gap: 8px;
    }

    .snav-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--bg);
      border: none;
      cursor: pointer;
      font-size: 18px;
      color: var(--ink-dim);
      font-weight: 800;
    }

    .shorts-side-viewport {
      flex: 1;
      padding: 24px;
      overflow: hidden;
    }

    .shorts-side-track {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-behavior: smooth;
      padding-bottom: 10px;
      height: 100%;
    }

    .shorts-side-track::-webkit-scrollbar {
      height: 6px;
    }

    .shorts-side-track::-webkit-scrollbar-thumb {
      background: var(--line);
      border-radius: 999px;
    }

    .short-card {
      flex: 0 0 381px;
      border-radius: 18px;
      overflow: hidden;
      aspect-ratio: 9/16;
      position: relative;
      cursor: pointer;
      background: linear-gradient(160deg, #1C1E2B, #0F1019);
      transition: transform .18s;
    }

    .short-card:hover {
      transform: translateY(-4px);
    }

    .short-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .88) 100%);
      pointer-events: none;
    }

    .short-card .thumb-box {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
    }

    .short-card .badge {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 2;
      font-size: 12px;
      font-weight: 800;
      background: var(--coral);
      color: #fff;
      padding: 4px 8px;
      border-radius: 6px;
    }

    .short-card .cap {
      position: absolute;
      bottom: 14px;
      left: 14px;
      right: 14px;
      z-index: 2;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.4;
    }

    .short-card .play {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(9.2px);
      border: 1.5px solid rgba(255, 255, 255, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12.3px 30.8px -9.2px rgba(0, 0, 0, 0.4);
      transition: transform .2s ease, background .2s ease;
    }

    .short-card .play svg {
      width: 18px;
      height: 18px;
      margin-left: 3px;
    }

    .short-card.pending .thumb-box {
      background: var(--bg);
    }

    .short-card.pending::after {
      display: none;
    }

    .short-card.pending .pend-in {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 20px;
    }

    .short-card.pending .ic {
      font-size: 30px;
      margin-bottom: 10px;
    }

    .short-card.pending .t {
      font-size: 16px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 6px;
      line-height: 1.4;
    }

    .short-card.pending .d {
      font-size: 14px;
      color: var(--ink-dim);
      line-height: 1.5;
    }

    .shorts-side-dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      padding-bottom: 16px;
    }

    .shorts-side-dots i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--line);
      transition: .2s;
    }

    .shorts-side-dots i.on {
      background: var(--coral);
      width: 16px;
      border-radius: 8px;
    }

    .scripture {
      padding: 30.8px 33.9px;
      margin-top: 18.5px;
      height: 250px;
    }

    .scripture .ref {
      font-size: 18.5px;
      font-weight: 800;
      color: var(--ink-dim);
      margin-bottom: 18.5px;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    .scripture p {
      font-size: 21.6px;
      line-height: 1.8;
      color: #3D4155;
      margin: 0 0 10.8px;
    }

    .scripture p .vn {
      color: var(--coral);
      font-weight: 800;
      font-size: 16.9px;
      margin-right: 7.7px;
    }

    .scripture .verse-preview {
      max-height: 140px;
      overflow-y: auto;
      padding-right: 10px;
    }

    .scripture .verse-preview::-webkit-scrollbar {
      width: 6px;
    }

    .scripture .verse-preview::-webkit-scrollbar-thumb {
      background: var(--line);
      border-radius: 999px;
    }

    .sc-book {
      background: var(--bg);
      border-radius: 20px;
      padding: 22px 24px;
      margin-bottom: 13px;
    }

    .sc-book:last-child {
      margin-bottom: 0;
    }

    .sc-book .bk {
      font-size: 18.5px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 14px;
      letter-spacing: .01em;
    }

    .sc-book p:last-child {
      margin-bottom: 0 !important;
    }

    .content-card {
      padding: 0;
    }

    .content-tabs {
      display: flex;
      align-items: center;
      gap: 6.2px;
      padding: 12.3px 12.3px 0;
      overflow-x: auto;
    }

    .ctab {
      flex: 0 0 auto;
      text-align: center;
      padding: 20px 21.6px;
      font-size: 19.2px;
      font-weight: 700;
      color: var(--ink-dim);
      cursor: pointer;
      border: none;
      background: transparent;
      border-radius: 18.5px 18.5px 0 0;
      font-family: inherit;
      white-space: nowrap;
    }

    .ctab.on {
      color: var(--blue);
      background: var(--blue-soft);
    }

    .content-body {
      padding: 40px 43.1px 43.1px;
      border-top: 1.5px solid var(--line);
    }

    .content-pane {
      display: none;
    }

    .content-pane.on {
      display: block;
    }

    .content-pane {
      position: relative;
    }

    .pane-edit {
      position: absolute;
      top: -28px;
      right: -28px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid var(--line);
      border-radius: 50%;
      background: #fff;
      color: var(--ink-dim);
      cursor: pointer;
      opacity: 0;
      transition: opacity .15s, color .15s, border-color .15s;
      z-index: 2;
    }

    .pane-edit .material-symbols-outlined {
      font-size: 18px;
    }

    .content-pane:hover .pane-edit,
    .pane-edit:focus-visible {
      opacity: 1;
    }

    .pane-edit:hover {
      color: var(--blue);
      border-color: var(--blue);
    }

    @media (hover: none) {
      .pane-edit {
        opacity: 1;
        top: -32px;
        right: -24px;
      }
    }

    [data-field].editing > :not(.pane-editor) {
      display: none;
    }

    .edit-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .edit-wrap .pane-edit {
      position: static;
      flex: none;
    }

    .edit-wrap:hover .pane-edit {
      opacity: 1;
    }

    .edit-wrap.editing-short .pane-edit {
      display: none;
    }

    .is-editing {
      outline: 2px dashed currentColor;
      outline-offset: 4px;
      border-radius: 6px;
      min-width: 2ch;
      cursor: text;
    }


    .pane-editor textarea {
      width: 100%;
      min-height: 200px;
      padding: 0;
      border: 0;
      outline: 2px dashed var(--blue);
      outline-offset: 8px;
      border-radius: 4px;
      background: transparent;
      font: inherit;
      line-height: 1.7;
      color: inherit;
      resize: none;
      overflow: hidden;
    }

    .pane-editor-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 22px;
    }

    .edit-wrap .pane-editor-actions {
      margin-top: 0;
      flex: none;
    }

    .pane-editor-actions button {
      padding: 8px 18px;
      border: 1.5px solid var(--line);
      border-radius: 10px;
      background: #fff;
      color: var(--ink);
      font-weight: 600;
      cursor: pointer;
    }

    .pane-editor-actions .primary {
      border-color: var(--blue);
      background: var(--blue);
      color: #fff;
    }

    .content-pending {
      text-align: center;
      padding: 44px 17px;
      color: var(--ink-dim);
      font-size: 20px;
      background: var(--bg);
      border-radius: 18.5px;
      font-weight: 600;
    }

    .markdown-body {
      font-size: 20.8px;
      color: #4A4E60;
      line-height: 1.85;
    }

    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3 {
      color: var(--ink);
      font-weight: 800;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
    }

    .markdown-body h2 {
      font-size: 1.2em;
      color: var(--coral);
    }

    .markdown-body ul {
      padding-left: 20px;
      margin-bottom: 1em;
    }

    .markdown-body li {
      margin-bottom: 8px;
    }

    .engage-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24.6px;
    }

    .engage-grid>* {
      min-width: 0;
    }

    .engage-card {
      padding: 37px;
    }

    .engage-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .engage-head .eic {
      font-size: 24px;
    }

    .engage-head h3 {
      font-size: 22px;
      font-weight: 800;
      margin: 0;
    }

    .engage-sub {
      font-size: 16px;
      color: var(--ink-dim);
      margin-bottom: 24px;
    }

    .ai-empty {
      text-align: center;
      padding: 30.8px 12.3px;
      color: var(--ink-dim);
      font-size: 19.2px;
      background: var(--blue-soft);
      border-radius: 18.5px;
      margin-bottom: 21.6px;
      font-weight: 600;
    }

    .chips {
      display: flex;
      gap: 10.8px;
      flex-wrap: wrap;
      margin-bottom: 21.6px;
    }

    .chip {
      font-size: 17.7px;
      font-weight: 600;
      border: 2.3px solid var(--line);
      padding: 9.2px 18.5px;
      border-radius: 999px;
      color: var(--ink-dim);
      cursor: pointer;
      background: none;
    }

    .chip:hover {
      border-color: var(--blue);
      color: var(--blue);
    }

    .ask-row {
      display: flex;
      gap: 12.3px;
    }

    .ask-row input {
      flex: 1;
      border: 2.3px solid var(--line);
      border-radius: 999px;
      padding: 16.9px 23.1px;
      font-size: 20px;
      font-family: inherit;
    }

    .ask-row button {
      width: 58.5px;
      height: 58.5px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      border: none;
      flex: 0 0 auto;
      font-weight: 800;
      cursor: pointer;
    }

    .photo-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .share-bottom {
      padding: 40px;
      text-align: center;
      background: linear-gradient(180deg, var(--card) 0%, var(--bg) 100%);
    }

    .share-bottom .h {
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 20px;
    }

    .share-bottom .row {
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .share-bottom button {
      padding: 14px 28px;
      font-size: 18px;
      font-weight: 700;
      border-radius: 999px;
      cursor: pointer;
      border: 1.5px solid var(--line);
      background: #fff;
      color: var(--ink);
    }

    .share-bottom button.kk {
      background: #FEE500;
      color: #3A2E00;
      border-color: #FEE500;
    }

    footer {
      padding: 92.4px 0 92.4px;
      margin-top: 92.4px;
      border-top: 1.5px solid var(--line);
      text-align: center;
    }

    footer p {
      font-size: 19.2px;
      color: var(--ink-dim);
      max-width: 540px;
      margin: 15.4px auto 0;
      line-height: 1.7;
    }

    .foot-note {
      font-size: 17.7px;
      color: #A6ABBB;
      margin-top: 33.9px;
      font-weight: 600;
    }

    footer.mockup-foot {
      padding: 92.4px 0;
      margin-top: 92.4px;
      border-top: 1.5px solid var(--line);
      text-align: center;
    }

    footer.mockup-foot p {
      font-size: 19.2px;
      color: var(--ink-dim);
      max-width: 523.6px;
      margin: 15.4px auto 0;
      line-height: 1.7;
    }

    .foot-note {
      font-size: 17.7px;
      color: #A6ABBB;
      margin-top: 33.9px;
      font-weight: 600;
    }

    /* 모달 */
    .sh-modal-box {
      background: #fff;
      border-radius: 24px;
      width: 100%;
      max-width: 600px;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .sh-modal-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 30px;
      border-bottom: 1.5px solid var(--line);
    }

    .sh-modal-head h3 {
      font-size: 22px;
      font-weight: 800;
      margin: 0;
    }

    .sh-modal-close {
      font-size: 20px;
      color: var(--ink-dim);
      background: none;
      border: none;
      cursor: pointer;
    }

    .sh-modal-list {
      padding: 20px 30px;
      overflow-y: auto;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .recent-item {
      display: flex;
      gap: 15.4px;
      align-items: center;
      padding: 14px;
      border-radius: 18.5px;
      cursor: pointer;
      border: 1.5px solid transparent;
    }

    .recent-item.on {
      background: var(--blue-soft);
      border-color: var(--blue-soft);
    }

    .recent-item:not(.on):hover {
      background: var(--bg);
      border-color: var(--line);
    }

    .recent-item .thumb {
      flex: 0 0 auto;
      width: 68px;
      height: 68px;
      border-radius: 14px;
      background: #EDEEF4;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .recent-item .thumb svg {
      width: 17px;
      height: 17px;
      fill: #A6ABBB;
    }

    .recent-item.on .thumb {
      background: var(--blue);
    }

    .recent-item.on .thumb svg {
      fill: #fff;
    }

    .recent-item .rt-title {
      font-size: 19px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .recent-item.on .rt-title {
      color: var(--blue);
    }

    .recent-item .rt-meta {
      font-size: 15px;
      color: var(--ink-dim);
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 34px;
      transform: translateX(-50%) translateY(18px);
      opacity: 0;
      background: #1E2560;
      color: #fff;
      font-size: 17px;
      font-weight: 700;
      padding: 14px 24px;
      border-radius: 999px;
      z-index: 999;
      pointer-events: none;
      transition: .2s;
      max-width: 88vw;
      text-align: center;
    }

    .toast.on {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @media (max-width:1108.8px) {
      .nav {
        padding: 21.6px 27.7px;
      }

      .wrap {
        padding: 0 27.7px;
      }

      .hero {
        padding: 61.6px 27.7px 30.8px;
        margin: 0 -27.7px 12.3px;
        border-radius: 0;
      }

      .hero h1 {
        font-size: 44.7px;
      }

      .engage-grid,
      .video-block {
        grid-template-columns: 1fr;
      }

      .photo-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .quiz-q {
      font-size: 22.3px;
      font-weight: 700;
      margin: 0 0 21.6px;
      line-height: 1.6;
    }

    .quiz-opt {
      border: 2.3px solid var(--line);
      border-radius: 18.5px;
      padding: 16.9px 20px;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 12.3px;
      display: flex;
      align-items: center;
      gap: 15.4px;
      cursor: pointer;
      transition: .15s;
    }

    .quiz-opt:hover {
      border-color: var(--coral);
      background: var(--coral-soft);
    }

    .quiz-opt .num {
      width: 29.3px;
      height: 29.3px;
      border-radius: 50%;
      border: 2.3px solid var(--line);
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15.4px;
      font-weight: 700;
      color: var(--ink-dim);
    }

    .ai-empty {
      text-align: center;
      padding: 30.8px 12.3px;
      color: var(--ink-dim);
      font-size: 19.2px;
      background: var(--blue-soft);
      border-radius: 18.5px;
      margin-bottom: 21.6px;
      font-weight: 600;
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24.6px 61.6px;
      background: rgba(247, 248, 251, 0.88);
      backdrop-filter: blur(15.4px);
      border-bottom: 1.5px solid var(--line);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 15.4px;
    }

    .brand .logo-mark {
      font-weight: 800;
      font-size: 26px;
      color: var(--navy-deep);
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .brand .logo-mark .pill {
      background: var(--navy-deep);
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      padding: 4px 9px;
      border-radius: 9px;
      margin-left: 8px;
    }

    .brand .church {
      font-size: 20px;
      color: var(--ink-dim);
      border-left: 1.5px solid var(--line);
      padding-left: 15.4px;
      white-space: nowrap;
    }


    .chips {
      display: flex;
      gap: 10.8px;
      flex-wrap: wrap;
      margin-bottom: 21.6px;
    }

    .chip {
      font-size: 17.7px;
      font-weight: 600;
      border: 2.3px solid var(--line);
      padding: 9.2px 18.5px;
      border-radius: 1538.5px;
      color: var(--ink-dim);
    }

    .ask-row {
      display: flex;
      gap: 12.3px;
    }

    .ask-row input {
      flex: 1;
      min-width: 0;
      border: 2.3px solid var(--line);
      border-radius: 1538.5px;
      padding: 16.9px 23.1px;
      font-size: 20px;
      font-family: inherit;
    }

    .ask-row button {
      width: 58.5px;
      height: 58.5px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      border: none;
      flex: 0 0 auto;
      font-weight: 800;
      cursor: pointer;
    }

    #shortsModal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      background-color: #000;
    }

    #shortsModal.hidden {
      display: none !important;
    }

    #shortsModal .absolute.inset-0.bg-black {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #000;
    }

    #shortsModal .relative.h-full.w-full {
      position: relative;
      height: 100%;
      width: 100%;
    }

    /* 상단 헤더 영역 */
    #shortsModal .absolute.left-0.right-0.top-0 {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    }

    #shortsModal .flex.items-center.gap-3.text-white {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #fff;
    }

    #shortsModal .h-9.w-9 {
      display: inline-flex;
      height: 36px;
      width: 36px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(4px);
    }

    #shortsModal .text-sm.font-semibold {
      font-size: 14px;
      font-weight: 600;
      margin: 0 0 2px;
    }

    #shortsModal .text-xs.text-white\/70 {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      margin: 0;
    }

    #shortsModal .h-10.w-10 {
      display: flex;
      height: 40px;
      width: 40px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(4px);
      color: #fff;
      border: none;
      cursor: pointer;
    }

    /* 상/하 스크롤 이동 버튼 (PC에서만 노출) */
    #shortsModal>button.absolute {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      display: none;
      height: 44px;
      width: 44px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.45);
      color: #fff;
      border: none;
      cursor: pointer;
    }

    @media (min-width: 768px) {
      #shortsModal>button.absolute {
        display: flex;
      }
    }

    #shortsModal>button.top-20 {
      top: 80px;
    }

    #shortsModal>button.bottom-20 {
      bottom: 80px;
    }

    /* 쇼츠 트랙 (세로 스크롤 & 스냅) */
    #shortsModalTrack {
      height: 100%;
      width: 100%;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    #shortsModalTrack::-webkit-scrollbar {
      display: none;
    }

    /* 개별 슬라이드 영역 */
    #shortsModalTrack section {
      position: relative;
      height: 100%;
      width: 100%;
      scroll-snap-align: center;
    }

    #shortsModalTrack .mx-auto.flex.h-full {
      margin: 0 auto;
      display: flex;
      height: 100%;
      max-width: 650px;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      --shorts-avail-h: 100vh;
    }

    @media (min-height: 800px) {
      #shortsModalTrack .mx-auto.flex.h-full {
        max-height: 82vh;
        --shorts-avail-h: 82vh;
      }
    }

    /* 세로 영상(9:16) 비율을 유지한 채 화면 안에 꽉 차게: 카드 자체를 비율에 맞춰 축소 */
    /* .relative.h-full.w-full 규칙(위)보다 명시도가 높아야 하므로 실제 클래스를 모두 명시 */
    #shortsModalTrack .relative.h-full.max-h-\[82vh\].w-full {
      position: relative;
      width: min(min(100vw, 650px) - 32px, var(--shorts-avail-h) * 9 / 16);
      height: min(var(--shorts-avail-h), (min(100vw, 650px) - 32px) * 16 / 9);
      overflow: hidden;
      border-radius: 2rem;
      background-color: #000;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    /* 비디오 & 아이프레임: 카드 비율이 영상과 같으므로 크롭 없이 꽉 채움 */
    .shorts-modal-video,
    #shortsModalTrack iframe {
      height: 100%;
      width: 100%;
      object-fit: cover;
      background-color: #000;
      border: 0;
    }

    /* 위/아래 검은색 그라데이션 오버레이 */
    #shortsModalTrack .bg-gradient-to-b {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 112px;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent);
      pointer-events: none;
    }

    #shortsModalTrack .bg-gradient-to-t {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 224px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
      pointer-events: none;
    }

    /* 태그 및 라벨 */
    #shortsModalTrack .absolute.left-4.top-4 {
      position: absolute;
      left: 16px;
      top: 16px;
      z-index: 10;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    #shortsModalTrack .rounded-full.px-3.py-1 {
      border-radius: 9999px;
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 700;
      display: inline-block;
    }

    #shortsModalTrack .bg-emerald-600\/90 {
      background-color: rgba(5, 150, 105, 0.9);
      color: #fff;
    }

    #shortsModalTrack .bg-blue-700\/90 {
      background-color: rgba(29, 78, 216, 0.9);
      color: #fff;
    }

    #shortsModalTrack .bg-violet-700\/90 {
      background-color: rgba(109, 40, 217, 0.9);
      color: #fff;
    }

    #shortsModalTrack .bg-white\/90 {
      background-color: rgba(255, 255, 255, 0.9);
      color: #0f172a;
    }

    /* 하단 제목 및 설명 */
    #shortsModalTrack .absolute.bottom-0.left-0 {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
      color: #fff;
    }

    #shortsModalTrack .px-4.pb-3 {
      padding: 0 16px 12px;
    }

    #shortsModalTrack .text-base.font-semibold {
      font-size: 16px;
      font-weight: 600;
      margin: 0;
    }

    #shortsModalTrack .text-sm.text-white\/75 {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.75);
      margin: 8px 0 0;
    }

    #shortsModalTrack .text-xs.text-white\/70 {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      margin: 4px 0 0;
    }

    /* 커스텀 플레이 버튼 (화면 중앙) */
    .yt-center-play-overlay {
      position: absolute;
      inset: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .yt-play-icon-btn {
      display: flex;
      height: 80px;
      width: 80px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.4);
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: auto;
    }

    .yt-play-icon-sym {
      font-size: 48px;
      color: #fff;
    }

    /* 우측 하단 컨트롤러 메뉴 */
    #shortsModalTrack .absolute.right-3.z-20 {
      position: absolute;
      right: 12px;
      bottom: 80px;
      z-index: 20;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .yt-shorts-menu-wrap {
      position: relative;
    }

    .yt-menu-trigger {
      display: flex;
      height: 40px;
      width: 40px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.3);
      color: #fff;
      backdrop-filter: blur(4px);
      border: none;
      cursor: pointer;
    }

    .yt-shorts-menu {
      position: absolute;
      bottom: 0;
      right: 48px;
      overflow: hidden;
      border-radius: 12px;
      background-color: rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(4px);
      min-width: 150px;
      z-index: 30;
    }

    .yt-shorts-menu.hidden {
      display: none;
    }

    .yt-shorts-menu button {
      display: flex;
      width: 100%;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      text-align: left;
      font-size: 14px;
      color: #fff;
      background: none;
      border: none;
      cursor: pointer;
    }

    .yt-shorts-menu button:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    /* 하단 프로그레스 바 */
    .yt-progress-area {
      height: 20px;
      display: flex;
      align-items: flex-end;
      cursor: pointer;
      padding: 0;
      opacity: 0;
      transition: opacity 0.2s;
      width: 100%;
    }

    .yt-progress-track {
      position: relative;
      width: 100%;
      height: 3px;
      background-color: rgba(255, 255, 255, 0.3);
    }

    .yt-progress-fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background-color: #fff;
      width: 0%;
    }

    .yt-progress-thumb {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: #fff;
      width: 12px;
      height: 12px;
      left: 0%;
      pointer-events: none;
    }

    @media (max-width:1108.8px) {
      .nav {
        padding: 21.6px 27.7px;
      }

      .hero {
        padding: 61.6px 27.7px 30.8px;
      }

      .hero h1 {
        font-size: 44.7px;
      }

      .video-block {
        grid-template-columns: 1fr;
      }

      /* 수정: 모바일에서는 영상·쇼츠가 세로로 쌓이므로 높이를 맞출 필요가 없어짐 — 쇼츠 카드가 잘려 보이던 원인이라 제거 */
      .content-tabs-head {
        flex-direction: column;
        align-items: stretch;
      }

      .full-sermon-btn {
        margin: 0 0 12px;
      }

      .smallgroup-tab-body {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    .btn-admin {
      /* display: none; */
      align-items: center;
      gap: 8px;
      background: var(--card);
      color: var(--ink-dim);
      border-color: var(--line);
      font-weight: 700;
    }

    .btn-admin.on {
      display: inline-flex;
    }

    .btn-admin:hover {
      border-color: var(--navy-deep);
      color: var(--navy-deep);
    }

    .btn-admin .ic-gear {
      font-size: 0.9em;
      line-height: 1;
    }

    /* 추가: 좁은 모바일 화면(휴대폰)에서 헤더가 한 줄에 다 안 들어가 글자가 세로로 쪼개지던 문제 수정 */
    @media (max-width:600px) {
      .nav {
        padding: 16px 18px;
        gap: 8px;
      }

      .brand {
        gap: 10px;
        min-width: 0;
      }

      .brand .logo-mark {
        font-size: 19px;
      }

      .brand .church {
        display: none;
      }

      .nav-actions {
        gap: 8px;
        flex: 0 0 auto;
        flex-wrap: wrap;
      }

      .btn {
        font-size: 13.5px;
        padding: 10px 14px;
        border-radius: 14px;
      }

      /* 추가: 좁은 화면에서 관리자 버튼은 아이콘만 남김 */
      .btn-admin .lbl {
        display: none;
      }

      .btn-admin {
        padding: 10px 12px;
      }

      .hero-eyebrow {
        font-size: 12.5px;
        padding: 9px 14px;
        gap: 8px;
        margin-bottom: 18px;
      }

      .hero h1 {
        font-size: 30px;
      }

      .hero .verse {
        font-size: 15px;
      }

      .hero-title-row {
        gap: 10px;
      }

      .snav-btn {
        width: 44px;
        height: 44px;
      }

      .scripture {
        height: auto;
        padding: 18px 16px;
      }

      .scripture .verse-preview {
        max-height: 120px;
      }

      .quiz-opt {
        font-size: 16px;
        padding: 13px 15px;
      }

      .format-strip {
        margin: 43.1px -27.7px 0;
        padding: 9.2px 27.7px;
        border-left: none;
        border-right: none;
        border-radius: 0;
        scrollbar-width: none;
      }

      .format-strip::-webkit-scrollbar {
        display: none;
      }

      .format-strip a {
        font-size: 15px;
        padding: 10px 16px;
      }
    }

    @media (max-width:600px) {
      .content-tabs {
        gap: 4px;
        padding: 8px 8px 0;
      }

      .ctab {
        flex: 1 1 auto;
        padding: 14px 4px;
        font-size: 14.5px;
        border-radius: 12px 12px 0 0;
      }
    }

    @media (max-width:400px) {
      .ctab {
        font-size: 13.5px;
      }

      .btn span,
      .btn {
        font-size: 12.5px;
        padding: 9px 11px;
      }
    }
    /* 봉독 번역본 선택 */
    .scripture .scripture-ref-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .bible-version-select {
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      color: var(--ink);
      padding: 5px 10px;
      border: 1.5px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }

    /* PC: 쇼츠 박스 높이를 설교 원본 박스에 맞춤.
       왼쪽 컬럼을 풀어(display:contents) 설교 원본 박스와 쇼츠 박스를 같은 grid 행에 두고,
       쇼츠 박스는 그 grid 영역을 절대 위치로 채워 행 높이에 관여하지 않게 합니다. */
    @media (min-width: 1109px) {
      .video-block:not(.no-shorts) {
        position: relative;
        row-gap: 20px;
      }

      .video-block:not(.no-shorts) .video-main-col {
        display: contents !important;
      }

      .video-block:not(.no-shorts) .sermon-side {
        grid-column: 1;
        grid-row: 1;
      }

      .video-block:not(.no-shorts) #scriptureCard {
        grid-column: 1;
        margin-top: 0 !important;
      }

      .video-block:not(.no-shorts) .shorts-side {
        position: absolute;
        inset: 0;
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        max-height: none;
      }

      .shorts-side .shorts-side-viewport {
        min-height: 0;
      }

      .shorts-side .short-card {
        height: 100%;
        width: auto;
        flex: 0 0 auto;
      }
    }

    /* 쇼츠 모달 프레임 — iPhone Safari에서 중첩된 퍼센트 높이가 풀리지 않아 상단에 붙던 문제로
       화면 높이(dvh) 기준 9:16 크기를 직접 지정하고 부모 flex로 가운데 정렬합니다. */
    .shorts-modal-frame {
      height: min(82vh, calc(100vh - 160px));
      height: min(82dvh, calc(100dvh - 160px));
      aspect-ratio: 9 / 16;
      max-width: 100%;
    }