@charset "utf-8";

/* =====================================================
   /themes/theme4.css 
   MODERN PRESBYTERIAN CHURCH THEME 2026
   Forest Green & Warm Gold ??Natural Elegance
===================================================== */

:root {
  /* Color Palette ??Forest Green */
  --primary: #245c3b;
  /* Forest Green */
  --primary-light: #4f8f5d;
  /* Sage Light */
  --primary-dark: #0f3524;
  /* Deep Forest */
  --secondary: #2f7a4b;
  /* Mid Green */
  --accent: #d4a017;
  /* Warm Gold */
  --accent-light: #e8c454;
  /* Light Gold */
  --success: #10b981;
  --danger: #ef4444;

  /* Neutral Colors ??Light Sage Tints */
  --bg-primary: #f2f8f1;
  /* ?占쏀븳 ?占쎌씠吏€ ?占쎌씠??*/

  --bg-minery: #eef6ed;

  --bg-secondary: #dfeee1;
  /* ?占?占???占쎌씠吏€ 洹몃┛ */
  --bg-tertiary: #c7dec9;
  /* ?占쏀븳 ?占쎌씠吏€ */
  --text-titles: #FFFFFF;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --border: #9fc4a7;
  /* ?占쎌씠吏€ 洹몃┛ ?占쎈몢占?*/
  --border-light: #c4dbc8;

  /* Pastel Button Colors */
  --btn-pastel-blue: #a8d5a8;
  --btn-pastel-blue-hover: #85c48b;
  --btn-pastel-blue-text: #0f3524;
  --btn-pastel-amber: #fde68a;
  --btn-pastel-amber-hover: #fcd34d;
  --btn-pastel-amber-text: #78350f;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0f3524 0%, #2f7a4b 100%);
  --gradient-warm: linear-gradient(135deg, #d4a017 0%, #b8880f 100%);
  --gradient-subtle: linear-gradient(180deg, #f2f8f1 0%, #dfeee1 100%);

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: all 0.2s ease;
  --transition-base: all 0.3s ease;
  --transition-slow: all 0.5s ease;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 3rem;
  --radius-full: 9999px;

  --max-width: 1280px;
  --max-width-contents: 1100px;

}

/* ===== BASE STYLES ===== */
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* background: #528292 url("/image/white_background.png") no-repeat center center; */
  background-size: cover;
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


#body_background_wrap {
  position: fixed;
  background: #666666;
  inset: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

* {
  box-sizing: border-box;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--primary-light);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
}

/* ===== HEADER TOP BAR ===== */
#header-top {
  height: 44px !important;
  background: linear-gradient(90deg, #0b291a 0%, #174f2f 100%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: var(--shadow-md) !important;
  position: sticky;
  top: 0;
  z-index: 1000;
}

#header-top .ht-inner {
  max-width: var(--max-width) !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow: hidden;
}

#header-top .ht-left,
#header-top .ht-right {
  display: flex;
  align-items: center;
  gap: 24px !important;
}

#header-top .ht-left a,
#header-top .ht-left span,
.ht-dropdown>a,
.ht-logged-info {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
  font-weight: 500;
  transition: var(--transition-fast);
  white-space: nowrap;
}

#header-top .ht-left a:hover {
  color: var(--accent-light) !important;
}

.ht-dropdown {
  position: relative;
}

.ht-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px) !important;
  left: 0;
  min-width: 180px;
  background: var(--bg-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
  z-index: 10;
}

.ht-dropdown:hover .ht-dropdown-menu {
  display: block;
}

.ht-dropdown-menu a {
  display: block;
  padding: 12px 16px;
  color: var(--text-primary) !important;
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition-fast);
  border-bottom: 1px solid var(--border-light);
}

.ht-dropdown-menu a:last-child {
  border-bottom: none;
}

.ht-dropdown-menu a:hover {
  background: var(--bg-secondary);
  color: var(--primary) !important;
  padding-left: 20px;
}

.ht-btn-login,
.ht-btn-join {
  height: 32px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  transition: var(--transition-base);
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.ht-btn-login {
  background: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.ht-btn-login:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

.ht-btn-join {
  background: var(--btn-pastel-amber) !important;
  color: var(--btn-pastel-amber-text) !important;
  box-shadow: 0 2px 6px rgba(251, 191, 36, 0.25);
}

.ht-btn-join:hover {
  background: var(--btn-pastel-amber-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(251, 191, 36, 0.35);
}

/* ===== MAIN HEADER ===== */
#header {
  height: 90px !important;
  background: rgba(8, 22, 12, 0.97) !important;
  border-bottom: 1px solid rgba(30, 70, 40, 0.70) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
  position: sticky;
  top: 44px;
  z-index: 999;
}

#header .header-inner {
  max-width: var(--max-width) !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

#header .logo a {
  display: flex;
  align-items: center;
  height: 100%;
  width: 180px;
  height: 42px;
  background: url('/images/logo_white01.png') no-repeat center;
  background-size: contain;
}

#header .logo a.header-housechurch-logo {
  width: 118px;
  height: 30px;
  margin-left: 14px;
  background: url('/image/housechurch-logo-white-font.png') no-repeat center;
  background-size: contain;
  flex: 0 0 auto;
}

#header .logo img {
  display: none;
}

#header .nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
  margin-left: 40px;
}

#header .nav>ul {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
}

#header .nav>ul>li {
  position: relative;
}

#header .nav>ul>li>a {
  height: 56px !important;
  padding: 0 16px !important;
  display: flex;
  align-items: center;
  border-radius: var(--radius-full) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #e8f8ee !important;
  /* 諛앾옙? 誘쇳듃 ?占쎈┝??*/
  transition: var(--transition-base) !important;
  position: relative;
  white-space: nowrap;
}

#header .nav>ul>li>a::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: #d4a017;
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

/* hover / active ????占쏙옙占??占쎈몢???占쎌뒪??*/
#header .nav>ul>li:nth-child(1)>a:hover,
#header .nav>ul>li:nth-child(1).active>a {
  background: #FFAA9A !important;
  color: #5C0D00 !important;
}

#header .nav>ul>li:nth-child(2)>a:hover,
#header .nav>ul>li:nth-child(2).active>a {
  background: #9AC8F0 !important;
  color: #052E5A !important;
}

#header .nav>ul>li:nth-child(3)>a:hover,
#header .nav>ul>li:nth-child(3).active>a {
  background: #86D9B0 !important;
  color: #053A22 !important;
}

#header .nav>ul>li:nth-child(4)>a:hover,
#header .nav>ul>li:nth-child(4).active>a {
  background: #F5CF70 !important;
  color: #4A2E00 !important;
}

#header .nav>ul>li:nth-child(5)>a:hover,
#header .nav>ul>li:nth-child(5).active>a {
  background: #C89EEE !important;
  color: #320060 !important;
}

#header .nav>ul>li:nth-child(6)>a:hover,
#header .nav>ul>li:nth-child(6).active>a {
  background: #82D9D9 !important;
  color: #023636 !important;
}

#header .nav>ul>li:nth-child(7)>a:hover,
#header .nav>ul>li:nth-child(7).active>a {
  background: #F5B48A !important;
  color: #4A1800 !important;
}

#header .nav>ul>li>a:hover::after,
#header .nav>ul>li.active>a::after {
  width: 20px;
}

#header .nav .sub_nav {
  position: absolute !important;
  top: 100% !important;
  /* 硫붾돱諛붿뿉 ??遺숆쾶 */
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 220px !important;
  padding: 12px !important;
  border: 1px solid rgba(126, 167, 161, 0.42) !important;
  border-radius: var(--radius-xl) !important;
  background: rgba(244, 250, 248, 0.98) !important;
  box-shadow: var(--shadow-lg) !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10;
  display: flex !important;
  flex-direction: column !important;
}

#header .nav>ul>li:hover .sub_nav {
  opacity: 1;
  visibility: visible;
  top: 100% !important;
  /* hover ?占쎈룄 ?占쎌씪?占쎄쾶 0 媛꾧꺽 */
}

#header .nav .sub_nav li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#header .nav .sub_nav li a {
  display: block;
  padding: 12px 16px !important;
  border-radius: var(--radius-lg) !important;
  color: #2f5964 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: var(--transition-fast);
  border-bottom: none !important;
}

#header .nav .sub_nav li a:hover {
  background: rgba(207, 232, 226, 0.85);
  color: #0f5f76 !important;
  padding-left: 20px !important;
}

/* ===== MOBILE HAMBURGER ===== */
.mb_hamburger {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  z-index: 1001;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: rgba(232, 248, 238, 0.16);
  border: 1px solid rgba(232, 248, 238, 0.30);
  border-radius: var(--radius-full);
  padding: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  /*transform: translateY(calc(-50% + 26px));*/
}

.menu-bt-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 2.5px;
  background: #f3fff7 !important;
  border-radius: var(--radius-full);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%);
  transition: var(--transition-base);
}

.menu-bt-line1 {
  transform: translate(-50%, -50%) translateY(-8px);
}

.menu-bt-line3 {
  transform: translate(-50%, -50%) translateY(8px);
}

.mb_hamburger.is-open .menu-bt-line1 {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mb_hamburger.is-open .menu-bt-line2 {
  opacity: 0;
}

.mb_hamburger.is-open .menu-bt-line3 {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ===== MOBILE NAVIGATION ===== */
.mb_nav_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-base);
  z-index: 998;
}

.mb_nav_bg.is-open {
  background: rgba(0, 0, 0, 0.4);
  opacity: 1;
  visibility: visible;
}

.mb_nav_view {
  position: fixed;
  top: var(--mb-nav-top, 80px);
  right: 0;
  width: 320px;
  height: calc(100dvh - var(--mb-nav-top, 80px));
  background: var(--bg-primary);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: 999;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mb_nav_view.is-open {
  transform: translateX(0);
}

.mb_nav_view .menu-bt-wrapper {
  display: none;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.mb_nav_view .top {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.mb_nav_view .top ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.mb_nav_view .top li a {
  display: block;
  padding: 10px 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.mb_nav_view .top li a:hover {
  background: var(--bg-tertiary);
  color: var(--primary);
}

.mb_nav_view .bottom {
  flex: 1;
  overflow-y: auto;
}

.mb_nav_view .bottom>ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mb_nav_view .bottom>ul>li {
  border-bottom: 1px solid var(--border-light);
}

.mb_nav_view .bottom>ul>li>a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  transition: var(--transition-fast);
}

.mb_nav_view .bottom>ul>li>a:hover {
  background: var(--bg-secondary);
  color: var(--primary);
}

.mb_nav_view .bottom>ul>li>a span {
  font-size: 18px;
}

.mb_nav_view .bottom>ul>li>ul {
  display: none;
  background: var(--bg-secondary);
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.mb_nav_view .bottom>ul>li.open>ul {
  display: flex;
  flex-direction: column;
}

.mb_nav_view .bottom>ul>li ul li a {
  padding: 12px 40px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.mb_nav_view .bottom>ul>li ul li a:hover {
  color: var(--primary);
}

/* ===== HERO SECTION ===== */
.section-hero {
  position: relative;
  height: 700px;
  overflow: hidden;
  background: var(--gradient-primary);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: background-color 1s ease;
  touch-action: pan-y;
}

.hero-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: opacity 2.1s ease-in-out;
  will-change: opacity, transform;
}

.hero-bg-layer.is-active {
  opacity: 1;
}

.hero-bg-layer.is-leaving {
  opacity: 0;
}

.hero-bg-layer.hero-movie-mode {
  animation: heroMovieMode 10s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes heroMovieMode {
  0% {
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  45% {
    transform: scale(1.11) translate3d(-2.4%, -1.4%, 0);
  }

  100% {
    transform: scale(1.18) translate3d(2.2%, -2%, 0);
  }
}

.hero-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: var(--max-width) !important;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  background: none !important;
  z-index: 3;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.02);
  z-index: 1;
}

.hero-fade-sides,
.hero-fade-bottom {
  position: absolute;
  z-index: 1;
}

.hero-fade-sides {
  display: none;
}

.hero-fade-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.10) 100%);
}

.hero-text {
  position: relative;
  z-index: 2;
  text-align: right;
  color: var(--text-titles);
  animation: fadeInUp 0.8s ease 0.3s backwards;
  padding-top: 20px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.hero-label {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 2px;
  margin: 0 0 16px;
  opacity: 0.9;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.hero-text h2 {
  font-size: 42px !important;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.5px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.hero-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-titles);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: var(--transition-base);
  backdrop-filter: blur(8px);
}

.hero-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.hero-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.hero-btn-prev {
  left: 40px;
}

.hero-btn-next {
  right: 40px;
}

.hero-pager {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 3;
}

.hero-pager-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: var(--transition-base);
}

.hero-pager-dot.active {

  width: 28px;

  border-radius: var(--radius-full);

  background: var(--accent);
}



/* ===== MAIN CONTENT WRAP ===== */

/* Border Radius 
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
*/
.main-content-wrap {
  width: min(calc(100% - 40px), 1300px);
  margin: 10px auto 30px;
  padding-bottom: 70px;
  background: var(--bg-minery);
  border-radius: var(--radius-2xl);
  max-width: var(--max-width) !important;
}


/* ===== INTRO SECTION ===== */


.section-intro {
  width: 70%;
  max-width: calc(var(--max-width) * .7);
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  z-index: 10030;
  margin: 0 auto;
  padding: 16px 40px;
  background: rgba(251, 251, 251, .85) !important;
  border: 4px double color-mix(in srgb, var(--border) 48%, var(--primary) 52%);
  border-radius: var(--radius-3xl);
  box-shadow: 0 24px 52px rgba(55, 100, 92, 0.24), 0 8px 18px rgba(55, 100, 92, 0.15);
  overflow: hidden;
  transform: translate3d(-50%, calc(-100% - 28px), 0);
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), visibility 1.1s;
  will-change: transform;
}

.section-intro .intro-inner {
  max-width: var(--max-width) !important;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
  background: transparent;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  overflow: hidden;
}

.intro-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.intro-text h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text-primary);
}

.intro-text p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}

.btn-more {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 14px 32px;
  background: var(--btn-pastel-blue);
  color: var(--btn-pastel-blue-text);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 15px;
  transition: var(--transition-base);
  box-shadow: 0 4px 12px rgba(191, 219, 254, 0.5);
}

.btn-more:hover {
  background: var(--btn-pastel-blue-hover);
  color: var(--btn-pastel-blue-text);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(147, 197, 253, 0.55);
}

/* ===== QUICK LINKS SECTION ===== */
.section-quicklinks {
  position: relative;
  padding: 80px 40px;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.96) 18%,
      rgba(160, 210, 175, 0.68) 28%,
      rgba(240, 252, 244, 0.94) 40%,
      rgba(240, 252, 244, 0.94) 58%,
      rgba(148, 196, 164, 0.65) 68%,
      rgba(255, 255, 255, 0.96) 78%,
      rgba(255, 255, 255, 0.96) 100%),
    var(--bg-secondary);
}

.section-quicklinks::before,
.section-quicklinks::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  z-index: 2;
  pointer-events: none;
}

.section-quicklinks::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 100%);
}

.section-quicklinks::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-primary) 0%, transparent 100%);
}

.section-quicklinks .ql-inner {
  position: relative;
  z-index: 3;
  max-width: var(--max-width) !important;
  margin: 0 auto;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.section-title .bar {
  width: 4px;
  height: 32px;
  /* background: var(--primary); */
  border-radius: var(--radius-full);
}

.section-title h3 {
  font-size: 24px !important;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}

.ql-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.ql-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  background: linear-gradient(120deg, #c8e8d4 0%, #e0f4e8 60%, #f0fbf3 100%);
  border: 1px solid #a8d4b8;
  border-radius: var(--radius-xl);
  transition: var(--transition-base);
  color: inherit;
  box-shadow: 0 2px 8px rgba(45, 106, 79, 0.10);
}

.ql-card:hover {
  background: linear-gradient(120deg, #a8d8bc 0%, #c4ecd4 60%, #daf5e4 100%);
  border-color: #86c4a0;
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.ql-card h4 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.ql-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.6);
  color: var(--primary);
  transition: var(--transition-base);
  flex-shrink: 0;
}

.ql-card:hover .ql-arrow {
  background: var(--btn-pastel-blue);
  color: var(--btn-pastel-blue-text);
  transform: translateX(4px);
}

@media (min-width: 1201px) and (max-width: 1440px) {
  .ql-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ql-card {
    padding: 24px 24px;
    width: 100%;
  }
}

.ql-arrow svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* ===== WELCOME SECTION ===== */
.section-welcome {
  position: relative;
  padding: 80px 40px;
  background:
    linear-gradient(180deg, rgba(240, 252, 244, 0.98) 0%, rgba(228, 246, 234, 0.96) 100%);
}

.section-welcome::before,
.section-welcome::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 88px;
  z-index: 2;
  pointer-events: none;
}

.section-welcome::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 100%);
}

.section-welcome::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-primary) 0%, transparent 100%);
}

.section-welcome .welcome-inner {
  position: relative;
  z-index: 3;
  max-width: var(--max-width) !important;
  margin: 0 auto;
  background:
    linear-gradient(135deg, rgba(27, 67, 50, 0.82) 0%, rgba(64, 145, 108, 0.72) 52%, rgba(212, 160, 23, 0.68) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 100%);
  border-radius: var(--radius-2xl);
  padding: 60px 48px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(27, 67, 50, 0.24);
}

.section-welcome .welcome-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.10) 44%, rgba(255, 255, 255, 0.22) 100%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.03) 0%, rgba(15, 23, 42, 0.10) 100%);
  border-radius: var(--radius-2xl);
  z-index: 0;
}

.welcome-text,
.welcome-icons {
  position: relative;
  z-index: 1;
}

.welcome-text {
  text-align: center;
  margin-bottom: 60px;
}

.welcome-text h2 {
  font-size: 32px;
  font-weight: 800;
  margin: 0;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(15, 23, 42, 0.34), 0 1px 3px rgba(15, 23, 42, 0.28);
}

.welcome-icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
}

@media (max-width: 1250px) {
  .welcome-icons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.w-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

.w-icon-item:active {
  background: rgba(255, 255, 255, 0.24);
}

.w-icon-item:hover {
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(6px);
}

.w-icon-item .circle {
  width: 80px;
  height: 80px;
  /*border-radius: var(--radius-full);*/
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: var(--transition-base);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.20);
}

.w-icon-item:hover .circle {
  background: rgba(255, 255, 255, 0.95);
  transform: scale(1.1) rotateZ(-5deg);
}

.w-icon-item .circle svg {
  width: 40px;
  height: 40px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

.w-icon-item span {
  font-size: 15px;
  font-weight: 450;
  color: #444;
  text-shadow: 0 1px 8px rgba(15, 23, 42, 0.34), 0 1px 2px rgba(15, 23, 42, 0.24);
}

/* ===== POSTS SECTION ===== */
.section-posts::before,
.section-posts::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 88px;
  z-index: 2;
  pointer-events: none;
}

.section-posts .cp-inner {
  position: relative;
  z-index: 3;
  max-width: var(--max-width) !important;
  margin: 0 auto;
  background-color: transparent !important;
}

.cp-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}

.cp-label .bar {
  width: 4px;
  height: 32px;
  background: var(--primary);
  border-radius: var(--radius-full);
}

.cp-label h3 {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}

.cp-block:first-child {
  display: flex;
  align-items: flex-start;
}

.np-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 0.2px solid #444 !important;
}

.np-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid #a8d4b8;
  background: linear-gradient(120deg, #c8e8d4 0%, #e0f4e8 60%, #f0fbf3 100%);
  transition: var(--transition-base);
  cursor: pointer;
}

.np-item:hover {
  border-color: #86c4a0;
  background: linear-gradient(120deg, #a8d8bc 0%, #c4ecd4 60%, #daf5e4 100%);
  box-shadow: 0 4px 16px rgba(45, 106, 79, 0.15);
  transform: translateY(-2px);
}

.np-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border-light);
  background: transparent;
  cursor: pointer;
  user-select: none;
}

.np-title-link {
  flex: 1;
  color: inherit;
}

.np-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.np-goto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--primary);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  transition: var(--transition-fast);
  text-decoration: none;
}

.np-goto:hover {
  background: var(--btn-pastel-amber);
  color: var(--btn-pastel-amber-text);
}

.np-card h4 {
  font-size: 24px;
  font-weight: 480;
  margin: 0;
  color: var(--text-primary);
}

.np-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.np-toggle:hover {
  background: var(--btn-pastel-blue);
}

.np-toggle svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-secondary);
  stroke-width: 2;
  fill: none;
  transition: var(--transition-fast);
}

.np-toggle:hover svg {
  stroke: var(--btn-pastel-blue-text);
}

.np-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.np-panel {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.np-item.is-open .np-panel {
  display: block;
  max-height: 500px;
}

.np-widget {
  padding: 16px;
}

.np-widget a,
.np-widget .title a,
.np-widget td.title a,
.np-widget li a,
.np-widget .list-item a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.np-widget img {
  display: none;
}

/* ===== NEWS SECTION ===== */
.section-news {
  padding: 80px 40px;
  background: var(--bg-primary);
}

.news-container {
  max-width: var(--max-width) !important;
}

.news-image-wrap {
  position: relative;
  height: 450px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-xl);
}

.popupSwiper,
.popupSwiper .swiper-wrapper,
.popupSwiper .swiper-slide {
  height: 450px;
}

.news-slide {
  position: relative;
  overflow: hidden;
  background: #000;
}

.news-empty-slide {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.news-slide-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.news-image-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: #0f3524;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
  cursor: pointer;
}

.news-image-zoom:hover,
.news-image-zoom:focus-visible {
  background: #fff;
  color: #000;
}

.news-image-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .78);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

.news-image-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.news-image-modal-frame {
  position: relative;
  display: inline-flex;
  max-width: min(96vw, 1400px);
  max-height: 92vh;
}

.news-image-modal-img {
  display: block;
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .44);
}

.news-image-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 1;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #111;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.swiper-slide-active .news-slide-image {
  transform: scale(1.08) translate3d(-1.5%, -1%, 0);
}

.popupSwiper.news-fallback-ready {
  position: relative !important;
  overflow: hidden !important;
}

.popupSwiper.news-fallback-ready .swiper-wrapper {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

.popupSwiper.news-fallback-ready .swiper-slide {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  transition: opacity 1.1s ease, visibility 1.1s ease !important;
  pointer-events: none !important;
}

.popupSwiper.news-fallback-ready .swiper-slide.news-fallback-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

.popupSwiper.news-fallback-ready .news-slide-image {
  transform: scale(1.02) translate3d(0, 0, 0) !important;
  transition: transform 7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 1.1s ease !important;
  will-change: transform, opacity !important;
}

.popupSwiper.news-fallback-ready .swiper-slide.news-fallback-active .news-slide-image {
  transform: scale(1.08) translate3d(-1.5%, -1%, 0) !important;
}

.popupSwiper .news-fallback-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: var(--transition-base);
}

.popupSwiper .news-fallback-dot.is-active {
  width: 24px;
  background: #fff;
}

.news-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: opacity 2.1s ease, transform 85s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}

.news-bg-layer.is-active {
  opacity: 1;
}

.news-bg-layer.is-leaving {
  opacity: 0;
}

.news-bg-layer.news-movie-mode {
  transform: scale(1.08) translate3d(-1.5%, -1%, 0);
}

.news-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.18) 100%);
  z-index: 1;
}

.news-edge-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.05) 100%);
  z-index: 2;
}

.news-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px;
  z-index: 3;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.22) 100%);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.news-overlay-inner {
  color: #fff;
  max-width: 560px;
  align-self: flex-start;
}

.news-tag {
  display: inline-block;
  padding: 6px 16px;
  background: var(--accent);
  color: var(--text-primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.news-title {
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 12px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.news-meta {
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 12px;
}

.news-body {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 18px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.38);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-body.popup-content {
  max-height: 150px;
  overflow-y: auto;
  display: block;
  padding-right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: pre-line;
}

.news-body.popup-content::-webkit-scrollbar {
  display: none;
}

.news-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  margin-bottom: 22px;
}

.news-nav {
  display: flex;
  gap: 12px;
}

.news-nav button {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
  backdrop-filter: blur(8px);
}

.news-nav button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.news-nav svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.news-pager {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.news-pager-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: var(--transition-base);
}

.news-pager-dot.active {
  width: 24px;
  background: #fff;
}

.news-swiper-prev,
.news-swiper-next {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--bg-primary);
  backdrop-filter: blur(8px);
}

.news-swiper-prev::after,
.news-swiper-next::after {
  font-size: 16px;
  font-weight: 700;
}

.news-swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.65);
  opacity: 1;
}

.news-swiper-pagination .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: var(--radius-full);
  background: #fff;
}

/* ===== GALLERY SECTION ===== */
.section-gallery {
  position: relative;
  padding: 80px 40px;
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.97) 14%,
      rgba(152, 200, 168, 0.66) 24%,
      rgba(152, 200, 168, 0.66) 30%,
      rgba(240, 252, 244, 0.95) 42%,
      rgba(240, 252, 244, 0.95) 58%,
      rgba(144, 192, 160, 0.62) 68%,
      rgba(144, 192, 160, 0.62) 74%,
      rgba(255, 255, 255, 0.97) 84%,
      rgba(255, 255, 255, 0.97) 100%),
    var(--bg-secondary);
}

.section-gallery::before,
.section-gallery::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 88px;
  z-index: 2;
  pointer-events: none;
}

.section-gallery::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 100%);
}

.section-gallery::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-primary) 0%, transparent 100%);
}

.section-gallery .gallery-inner {
  position: relative;
  z-index: 3;
  max-width: var(--max-width) !important;
  margin: 0 auto;
}

.gallery-slider-wrap {
  position: relative;
  margin-top: 0px;
  padding: 0 0px;
  /* 踰꾪듉 諛섏씠 嫄몄튌 怨듦컙 (踰꾪듉 48px / 2 = 24px + 4px ?占쎌쑀) */
}

.gallery-slider-viewport {
  overflow-x: auto;
  overflow-y: visible;
  padding: 8px 0 16px;
  border-radius: 10px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.gallery-slider-viewport::-webkit-scrollbar {
  display: none;
}

.gallery-slider-viewport.is-dragging .gallery-card {
  pointer-events: none;
}

.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
  box-shadow: var(--shadow-md);
}

.gallery-btn-prev {
  left: 12px;
}

/* 踰꾪듉 以묒떖(4+24=28px) = viewport ?占쎌そ 寃쎄퀎 */
.gallery-btn-next {
  right: 12px;
}

/* 踰꾪듉 以묒떖(4+24=28px) = viewport ?占쎈Ⅸ占?寃쎄퀎 */

.gallery-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.95);
  border-color: #93c5fd;
  color: var(--btn-pastel-blue-text);
  transform: translateY(-50%) scale(1.1);
}

.gallery-slider-track {
  display: flex;
  gap: 20px;
  min-width: 100%;
}

.gallery-card {
  flex: 0 0 calc(25% - 15px);
  aspect-ratio: 370 / 285;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
}

.gallery-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--transition-base);
}

.gallery-card-img-error {
  background: linear-gradient(135deg, #eef3fb 0%, #d9e5f4 100%);
}

.gallery-card-img-error img {
  display: none;
}

.gallery-card:hover img {
  transform: scale(1.08);
}

.gallery-card-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  color: var(--bg-primary);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.gallery-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.gallery-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.gallery-pager {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.gallery-pager-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--border);
  cursor: pointer;
  transition: var(--transition-base);
}

.gallery-pager-dot:hover {
  background: var(--primary);
}

.gallery-pager-dot.active {
  background: var(--primary);
  width: 28px;
  border-radius: var(--radius-full);
}

/* ===== MISSION SECTION ===== */
.section-mission {
  padding: 80px 40px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.section-mission .mission-inner {
  max-width: var(--max-width) !important;
  margin: 0 auto;
}

.mission-label {
  margin-bottom: 48px;
}

.mission-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.mission-card {
  position: relative;
  padding: 40px;
  background: linear-gradient(135deg, #c8e8d4 0%, #e8f7ec 100%);
  border-radius: var(--radius-xl);
  color: #0f3524;
  border: 1px solid #a0ccb0;
  overflow: hidden;
  transition: var(--transition-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mission-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  transition: var(--transition-base);
}

.mission-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.mission-card:hover::before {
  transform: translate(30px, 30px);
}

.mission-card h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  position: relative;
  z-index: 1;
  line-height: 1.4;
}

.mc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.6);
  color: #0f3524;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: var(--transition-base);
}

.mission-card:hover .mc-arrow {
  background: var(--btn-pastel-amber);
  color: var(--btn-pastel-amber-text);
  transform: translateX(4px);
}

.mc-arrow svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* ===== CALENDAR EVENTS SECTION ===== */
/* ?占쏙옙? 踰꾪듉 ?占쎄굅 ??Mission ?占쎌뀡占??占쎌씪???占쎈퉬쨌以묒븰 ?占쎈젹 */
.calendar-events-wrap {
  max-width: var(--max-width) !important;
  margin: 0 auto;
  padding: 0 40px;
}

.calendar_inner {
  margin-top: 15px;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.calendar-events-wrap .calendar_inner,
.calendar-events-wrap .hc-wall-scroll {
  cursor: grab;
  user-select: none;
}

.calendar-events-wrap .calendar_inner.is-dragging,
.calendar-events-wrap .hc-wall-scroll.is-dragging {
  cursor: grabbing;
}

.calendar-events-wrap .calendar_inner.is-dragging *,
.calendar-events-wrap .hc-wall-scroll.is-dragging * {
  user-select: none;
}

.calendar_inner>* {
  max-width: 100%;
}

/* 諛섏쓳?? mission-inner padding 湲곤옙?占??占쎌씪?占쎄쾶 異뺤냼 */
@media (max-width: 1200px) {
  .calendar-events-wrap {
    padding: 0 32px;
  }
}

@media (max-width: 768px) {
  .calendar-events-wrap {
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .calendar-events-wrap {
    padding: 0 16px;
  }
}

/* ===== FOOTER ===== */
#footer {
  background: rgba(8, 22, 12, 0.99);
  color: var(--bg-primary);
  margin-top: auto;
  padding: 60px 40px 40px;
  width: 100%;
}

#footer .footer-inner {
  max-width: var(--max-width) !important;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 60px;
  align-items: flex-start;
}

#footer .footer-logo img {
  height: 48px;
  width: auto;
  display: block;
}

#footer .footer-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}

#footer .footer-logo .footer-housechurch-logo img {
  height: 38px;
  width: auto;
  max-width: 158px;
  object-fit: contain;
}

#footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

#footer .footer-nav a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  transition: var(--transition-base);
  font-size: 14px;
}

#footer .footer-nav a:hover {
  color: var(--accent-light);
}

.footer-links {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-primary);
  transition: var(--transition-base);
}

.footer-social a:hover {
  background: var(--accent);
  color: var(--text-primary);
  transform: translateY(-2px);
}

address {
  font-style: normal;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
}

address a {
  color: rgba(255, 255, 255, 0.9);
}

/* ===== SUB PAGE ===== */
.visual {
  position: relative;
  height: 250px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .24);
  pointer-events: none;
}

.visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
}

.visual-title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(calc(100% - 40px), 720px);
  pointer-events: none;
}


.visual-title .sub_menu_title {
  display: block;
  /* 異뷂옙? */
  text-align: center;
  /* 異뷂옙? */
  color: #fff;
  width: 100%;
  font-size: 40px;
  letter-spacing: 25px;
  text-indent: 25px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);

}

.visual-title strong {
  display: block;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 25px;
}

.visual-title .slogun {
  margin-top: 40px;
  display: block;
  font-size: 20px;
  font-weight: 550;
  color: #FFF;
  letter-spacing: 05px;
}

.sub_menu {
  background: linear-gradient(180deg, #f5fff7 0%, #d5eadb 55%, #bfdcc8 100%);
  border-top: 1px solid rgba(45, 106, 79, .14);
  border-bottom: 1px solid rgba(45, 106, 79, .28);
  box-shadow: 0 2px 12px rgba(45, 106, 79, .08);
  padding: 0 40px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-x;
}

.sub_menu::-webkit-scrollbar {
  display: none;
}

.sub_menu.is-dragging {
  cursor: grabbing;
}

.sub_menu.is-dragging * {
  user-select: none;
}

html[data-theme="theme4"] .sub_menu {
  background: linear-gradient(180deg, #f5fff7 0%, #d5eadb 55%, #bfdcc8 100%) !important;
  border-top: 1px solid rgba(45, 106, 79, .14) !important;
  border-bottom: 1px solid rgba(45, 106, 79, .28) !important;
  box-shadow: 0 2px 12px rgba(45, 106, 79, .08) !important;
  padding: 0 40px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-x;
}

html[data-theme="theme4"] .sub_menu::-webkit-scrollbar {
  display: none;
}

html[data-theme="theme4"] .sub_menu.is-dragging {
  cursor: grabbing;
}

html[data-theme="theme4"] .sub_menu.is-dragging * {
  user-select: none;
}

.sub_menu .inner {
  max-width: var(--max-width) !important;
  margin: 0 auto;
}

.sub_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  width: max-content;
}

.sub_menu li {
  flex-shrink: 0;
  position: relative;
}

.sub_menu>ul>li>a {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--text-secondary);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  white-space: nowrap;
}

.sub_menu>ul>li>a:hover,
.sub_menu>ul>li.active>a {
  color: var(--primary);
  background: var(--bg-secondary);
}

.sub_menu ul ul {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  min-width: 200px;
  display: none;
  z-index: 10;
}

.sub_menu li:hover>ul {
  display: flex;
}

.sub_menu ul ul li a {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
}

#container {
  box-sizing: border-box;
  width: calc(100% - 20px);
  max-width: var(--max-width-contents) !important;
  margin: 60px auto 36px !important;
  padding: 40px;
  background: var(--bg-primary);
  border-radius: var(--radius-3xl);
  min-height: 400px;
  overflow: visible;
}

/* Keep board/page editors readable regardless of the active site theme. */
#container .cke_contents,
#container .cke_wysiwyg_frame,
#container .cke_wysiwyg_div,
#container .cke_editable {
  background: #fff !important;
  color: #000 !important;
}

#container .cke_chrome,
#container .cke_inner,
#container .cke_top,
#container .cke_bottom,
#container .cke_toolgroup,
#container .cke_combo_button {
  background-color: #fff !important;
  color: #000 !important;
}

#container .cke_top,
#container .cke_bottom {
  border-color: #d7d7d7 !important;
}

#container .cke_toolgroup,
#container .cke_combo_button {
  border-color: #c8c8c8 !important;
}

#container .cke_button:not(.cke_button_disabled) .cke_button_icon,
#container .cke_button:not(.cke_button_disabled) .cke_button_arrow,
#container .cke_button:not(.cke_button_disabled) .cke_button_label,
#container .cke_combo:not(.cke_combo_disabled) .cke_combo_button,
#container .cke_combo:not(.cke_combo_disabled) .cke_combo_text,
#container .cke_combo:not(.cke_combo_disabled) .cke_combo_open,
#container .cke_combo:not(.cke_combo_disabled) .cke_combo_arrow {
  filter: none !important;
  opacity: 1 !important;
  color: #000 !important;
}

.sub_page_view {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.sub_page_view a {
  color: var(--primary);
  font-weight: 500;
}

.line {
  height: 1px;
  background: var(--border);
  margin-bottom: 20px;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-fade-section {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.scroll-fade-section.is-visible {
  opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {

  #header-top .ht-inner,
  #header .header-inner,
  .hero-inner,
  .section-intro .intro-inner,
  .section-quicklinks .ql-inner,
  .section-welcome .welcome-inner,
  .section-gallery .gallery-inner,
  .section-mission .mission-inner,
  #container,
  .sub_menu .inner,
  #footer .footer-inner {
    padding: 0 32px !important;
  }

  #header .nav>ul>li>a {
    padding: 0 16px !important;
    font-size: 16px !important;
  }

  .hero-text h2 {
    font-size: 38px;
  }

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

  .gallery-card {
    flex: 0 0 calc(33.333% - 14px);
  }

  .welcome-icons {
    grid-template-columns: repeat(3, 1fr);
  }

  .section-posts .cp-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .news-title {
    font-size: 28px;
  }

  .section-intro .intro-inner {
    grid-template-columns: 1fr;
  }

  .mission-cards {
    grid-template-columns: 1fr;
  }

  #footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-links {
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 930px) {
  #header-top {
    display: none !important;
  }

  #header {
    top: 0 !important;
  }

  #header .nav {
    display: none !important;
  }

  .mb_hamburger {
    display: flex;
  }
}

@media (max-width: 768px) {
  #header-top {
    display: none !important;
  }

  #header {
    top: 0 !important;
  }

  #header-top .ht-inner,
  #header .header-inner,
  .hero-inner,
  .section-intro .intro-inner,
  .section-quicklinks .ql-inner,
  .section-welcome .welcome-inner,
  .section-gallery .gallery-inner,
  .section-mission .mission-inner,
  #container,
  .sub_menu .inner,
  #footer .footer-inner {
    padding: 0 20px !important;
  }

  #header {
    height: 80px !important;
  }

  #header .logo img {
    height: 44px !important;
  }

  #header .nav {
    display: none !important;
  }

  .mb_hamburger {
    display: flex;
  }

  .section-hero {
    height: 400px;
  }

  .hero-btn-prev {
    left: 12px;
  }

  .hero-btn-next {
    right: 12px;
  }

  .hero-text h2 {
    font-size: 40px;
  }

  .hero-label {
    font-size: 34px;
  }

  .section-intro,
  .section-quicklinks,
  .section-welcome,
  .section-posts,
  .section-news,
  .section-gallery,
  .section-mission {
    padding: 60px 20px;
  }

  .section-intro {
    width: calc((100% - 24px) * .7);
    margin: 0 auto;
    padding: 16px 20px;
  }

  .intro-text h4 {
    font-size: 13px;
  }

  .section-title h3 {
    font-size: 13px;
  }

  .ql-grid {
    grid-template-columns: 1fr;
  }

  .ql-card {
    flex-direction: row;
    gap: 0;
    padding: 20px 16px;
  }

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

  .welcome-text h2 {
    font-size: 13px;
  }

  .np-grid {
    grid-template-columns: 1fr;
  }

  .gallery-card {
    flex: 0 0 calc(50% - 10px);
  }

  .gallery-btn {
    display: none;
    /* 紐⑤컮?? 踰꾪듉 ?占쏙옙?, ?占쎈옒洹몃줈 ?占쏀겕占?*/
  }

  .gallery-slider-wrap {
    padding: 0;
    /* 紐⑤컮?? 踰꾪듉 ?占쎌쑝誘€占??占쎈뵫 遺덊븘??*/
  }

  .gallery-slider-viewport {
    cursor: default;
    /* 紐⑤컮?? grab 而ㅼ꽌 遺덊븘??*/
  }

  .news-image-wrap {
    height: 330px;
  }

  .popupSwiper,
  .popupSwiper .swiper-wrapper,
  .popupSwiper .swiper-slide {
    height: 330px;
  }

  .news-title {
    font-size: 22px;
  }

  .mission-card h3 {
    font-size: 13px;
  }

  .sub_menu ul {
    gap: 12px;
  }

  .sub_menu>ul>li>a {
    font-size: 14px;
  }

  #footer .footer-nav {
    gap: 16px;
  }

  address {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  #header-top {
    height: 40px !important;
  }

  #header-top .ht-inner {
    padding: 0 12px !important;
  }

  #header-top .ht-left {
    display: none !important;
  }

  .ht-btn-login,
  .ht-btn-join {
    font-size: 11px !important;
    height: 26px !important;
    padding: 0 10px !important;
    border-radius: 4px !important;
  }

  #header {
    height: 64px !important;
  }

  .mb_hamburger {
    top: 8px;
  }

  #header .logo img {
    height: 36px !important;
  }

  .section-hero {
    height: 280px;
  }

  .hero-text h2 {
    font-size: 33px;
  }

  .hero-label {
    font-size: 26px;
    letter-spacing: 1px;
  }

  .section-intro,
  .section-quicklinks,
  .section-welcome,
  .section-posts,
  .section-news,
  .section-gallery,
  .section-mission {
    padding: 40px 16px;
  }

  .section-intro {
    width: calc((100% - 24px) * .7);
    margin: 0 auto;
    padding: 14px 16px;
  }

  .intro-text h4 {
    font-size: 13px;
  }

  .section-title h3 {
    font-size: 13px;
  }

  .section-title .bar {
    height: 24px;
  }

  .ql-card {
    padding: 20px;
  }

  .welcome-icons {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .w-icon-item {
    padding: 12px;
  }

  .w-icon-item .circle {
    width: 60px;
    height: 60px;
  }

  .w-icon-item .circle svg {
    width: 32px;
    height: 32px;
  }

  .w-icon-item span {
    font-size: 12px;
  }

  .gallery-card {
    flex: 0 0 86%;
  }

  .gallery-slider-wrap {
    gap: 8px;
  }

  .news-overlay {
    padding: 24px;
  }

  .popupSwiper,
  .popupSwiper .swiper-wrapper,
  .popupSwiper .swiper-slide {
    height: 320px;
  }

  .news-title {
    font-size: 18px;
  }

  .news-meta {
    font-size: 12px;
  }

  .news-body.popup-content {
    max-height: 82px;
  }

  .mission-card {
    padding: 24px;
    flex-direction: column;
    gap: 16px;
  }

  .mission-card h3 {
    font-size: 18px;
  }

  .mc-arrow {
    width: 40px;
    height: 40px;
  }

  .sub_page_view {
    font-size: 12px;
  }

  #container {
    padding: 20px;
  }

  .mb_nav_view {
    width: 280px;
  }

  #footer {
    padding: 40px 16px 24px;
  }

  #footer .footer-logo img {
    height: 40px;
  }

  #footer .footer-logo .footer-housechurch-logo img {
    height: 32px;
  }

  #footer .footer-nav {
    flex-direction: column;
    gap: 12px;
    margin: 0;
  }

  .footer-social {
    gap: 12px;
  }

  .footer-social a {
    width: 36px;
    height: 36px;
  }
}

/* ===== UTILITY CLASSES ===== */
.container {
  max-width: var(--max-width) !important;
  margin: 0 auto;
  padding: 0 40px;
}

.text-center {
  text-align: center;
}

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

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

.bg-primary {
  background: var(--primary);
}

.bg-secondary {
  background: var(--bg-secondary);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

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

.gap-4 {
  gap: 16px;
}

.gap-6 {
  gap: 24px;
}

.py-8 {
  padding: 32px 0;
}

.py-16 {
  padding: 64px 0;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-6 {
  margin-bottom: 24px;
}


/* ============================================================
   HOVER EFFECTS ??Popup News 쨌 Calendar 쨌 Nav
============================================================ */

/* ?占?占??占쎈┝?占쏀꽣(Popup News) ?占쎈씪?占쎈뱶 hover ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/

/* ?占쎌껜 news-image-wrap??hover transition */
.news-image-wrap {
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  cursor: pointer;
}

.news-image-wrap:hover {
  transform: translateY(-4px) scale(1.008);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.22),
    0 8px 24px rgba(30, 64, 166, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* hover ???占쏙옙? ?占쏙옙?吏€ 遺€?占쎈읇占??占쏙옙? */
.news-image-wrap:hover .news-slide-image {
  transform: scale(1.07) translate3d(-1%, -0.5%, 0);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* hover ???占쎈쾭?占쎌씠 ???占쎌뒪???占쎌뿭 ?占쎌쭩 ?占쎈씪??*/
.news-image-wrap:hover .news-overlay {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.38) 100%);
  transition: background 0.4s ease;
}

.news-image-wrap:hover .news-overlay-inner {
  transform: translateY(-6px);
  transition: transform 0.4s ease;
}

/* hover ??news-tag ?占쎌씠?占쎌씠??*/
.news-image-wrap:hover .news-tag {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* hover ??View 留곹겕 諛묒쨪 媛뺤“ */
.news-image-wrap:hover .news-link {
  border-bottom-color: #fff;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

/* Swiper ?占쎈씪?占쎈뱶 ?占쏀솚 ???占쏙옙?吏€ 遺€?占쎈읇占?*/
.news-slide {
  transition: opacity 0.4s ease;
}


/* ?占?占?Calendar Events 諛뺤뒪 hover ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/

/* calendar-events-wrap ?占쎌껜 而⑦뀒?占쎈꼫 */
.calendar-events-wrap {
  transition: box-shadow 0.35s ease, transform 0.30s ease;
  border-radius: var(--radius-2xl);
  padding: 0 40px;
}

/* calendar_inner 諛뺤뒪 hover */
.calendar-events-wrap:hover {
  transform: translateY(-3px);
}

/* ?占쎈젰 ?占쏙옙? ?占쎈깽????占쏙옙 hover (Rhymix HCal 怨듯넻 ?占쎈옒?? */
.calendar_inner table tr:hover td,
.calendar_inner .hc-event:hover,
.calendar_inner .event-item:hover,
.calendar_inner a:hover {
  background: rgba(30, 64, 166, 0.07) !important;
  color: var(--primary) !important;
  border-radius: var(--radius-2xl);
  transition: all 0.2s ease;
}

/* ?占쎈젰 ?占쎌쭨 ?占?hover */
.calendar_inner td:hover {
  background: rgba(59, 130, 246, 0.09) !important;
  border-radius: var(--radius-sm);
  transition: background 0.18s ease;
}

/* ?占쎈젰 ?占쎈깽???占쏀듃/占?hover */
.calendar_inner .hc-event-bar:hover,
.calendar_inner [class*="event"]:hover {
  opacity: 1 !important;
  filter: brightness(1.1) saturate(1.2);
  transform: scaleY(1.15);
  transition: all 0.2s ease;
}

/* hc-wall ?占쎈씪?占쎈뜑 ??移대뱶 hover */
.calendar_inner .hc-wall-item:hover,
.calendar_inner .hc-post:hover {
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 8px 24px rgba(30, 64, 166, 0.13) !important;
  transform: translateY(-3px);
  transition: all 0.25s ease;
}


/* ?占?占?sub_nav ?占쎈떒 媛꾧꺽 ?占쎌쟾 ?占쎄굅 (?占쎌쟾 ?占쎈쾭?占쎌씠???占쏀솗?? ?占?占?占?*/
#header .nav .sub_nav {
  top: 100% !important;
  margin-top: 0 !important;
}

#header .nav>ul>li:hover .sub_nav {
  top: 100% !important;
  margin-top: 0 !important;
}

/* sub_nav 4諛⑺뼢 radius ??遺€?占쎈윭???占쎌엳??移대뱶 ?占쎈굦 */
#header .nav .sub_nav {
  border-radius: var(--radius-xl) !important;
  border-top: 1px solid rgba(126, 167, 161, 0.28) !important;
}

/* nav 硫붾돱 ??占쏙옙 ?占쎈떒 radius ?占쏙옙? (sub_nav?占?遺꾨━??移대뱶 ?占쏙옙??? */
#header .nav>ul>li:hover>a {
  border-bottom-left-radius: var(--radius-full) !important;
  border-bottom-right-radius: var(--radius-full) !important;
}

/* =============================================
   MAIN INDEX FINAL LAYOUT SYNC
   Synced with theme5 final layout on 2026-05-01
============================================= */
:root {
  --main-sync-primary: var(--color-main, var(--primary, #4A90E2));
  --main-sync-primary-dark: var(--color-sub1, var(--primary-dark, #1E6091));
  --main-sync-text: var(--color-black, var(--text-primary, #1A2B3C));
  --main-sync-white: var(--color-white, var(--bg-primary, #FBFDFE));
  --main-sync-inner: var(--max-width-inner, 1330px);
  --main-sync-pad-desktop: var(--inner-pad-desktop, 69px);
  --main-sync-pad-tablet: var(--inner-pad-tablet, 32px);
  --main-sync-pad-mobile: var(--inner-pad-mobile, 20px);
  --main-sync-card-from: color-mix(in srgb, var(--main-sync-primary) 12%, white);
  --main-sync-card-to: color-mix(in srgb, var(--main-sync-primary) 4%, white);
  --main-sync-card-hover-from: color-mix(in srgb, var(--main-sync-primary) 18%, white);
  --main-sync-card-hover-to: color-mix(in srgb, var(--main-sync-primary) 7%, white);
  --main-sync-card-border: color-mix(in srgb, var(--main-sync-primary) 22%, transparent);
  --main-sync-card-shadow: color-mix(in srgb, var(--main-sync-primary) 14%, transparent);
  --main-sync-card-shadow-hover: color-mix(in srgb, var(--main-sync-primary) 22%, transparent);
  --main-sync-section-from: color-mix(in srgb, var(--main-sync-primary) 8%, white);
  --main-sync-section-to: color-mix(in srgb, var(--main-sync-primary) 2%, white);
  --main-sync-guide-from: rgba(255, 255, 255, .94);
  --main-sync-guide-to: color-mix(in srgb, var(--main-sync-primary) 28%, white);
  --main-sync-guide-hover-to: color-mix(in srgb, var(--main-sync-primary) 45%, white);
  --main-sync-guide-shadow: color-mix(in srgb, var(--main-sync-primary-dark) 24%, transparent);
}

.section-worship {
  width: 100%;
  padding: 48px 0 36px;
  /*  background: var(--main-sync-white) !important; */
}

.section-worship .worship-inner {
  max-width: var(--main-sync-inner);
  margin: 0 auto;
  padding: 0 var(--main-sync-pad-desktop);
}

.worship-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(280px, 1.6fr) minmax(150px, 1fr);
  grid-template-rows: repeat(2, 170px);
  gap: 20px;
  align-items: stretch;
}

a.ql-card,
.ql-card {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  flex-direction: column !important;
  gap: 18px;
  min-height: 150px;
  padding: 12px 15px !important;
  background: linear-gradient(90deg, var(--main-sync-card-from) 0%, var(--main-sync-card-to) 100%) !important;
  box-shadow: 0 16px 34px var(--main-sync-card-shadow) !important;
  border: 1px solid var(--main-sync-card-border) !important;
  border-radius: 10px !important;
  transition: box-shadow .2s, transform .2s, background .2s;
  cursor: pointer;
  color: var(--main-sync-primary-dark) !important;
  white-space: nowrap;
}

a.ql-card:hover,
.ql-card:hover {
  background: linear-gradient(90deg, var(--main-sync-card-hover-from) 0%, var(--main-sync-card-hover-to) 100%) !important;
  box-shadow: 0 20px 42px var(--main-sync-card-shadow-hover) !important;
  transform: translateY(-2px);
}

.ql-card h4 {
  width: 100%;
  margin: 0;
  font-size: 25px !important;
  font-weight: 800 !important;
  line-height: 1.3;
  color: var(--main-sync-primary-dark) !important;
  text-align: center;
}

a.ql-card.ql-card-primary,
.ql-card.ql-card-primary {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 44px 36px 56px !important;
  /*  background: url("/image/paster/paster_son_05.png1") center/cover no-repeat !important; */
  background: url("/image/worship/00_sermon_son-5-1.webp") center/cover no-repeat !important;
}

a.ql-card.ql-card-primary::before,
.ql-card.ql-card-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(232, 249, 255, .22) 58%, rgba(232, 249, 255, .5) 100%);
  pointer-events: none;
}

.ql-card-primary h4 {
  position: relative;
  z-index: 1;
  font-size: clamp(22px, 3.4vw, 26px) !important;
  letter-spacing: 0;
  color: var(--main-sync-primary-dark) !important;
  text-shadow: 0 2px 12px rgba(255, 255, 255, .8);
}

.ql-card-primary .ql-arrow {
  display: none;
}

.ql-card-column {
  grid-column: 1;
  grid-row: 1;
}

.ql-card-sunday {
  grid-column: 1;
  grid-row: 2;
}

.ql-card-wed {
  grid-column: 3;
  grid-row: 1;
}

.ql-card-dawn {
  grid-column: 3;
  grid-row: 2;
}

.ql-card-side {
  position: relative;
  justify-content: flex-end !important;
  padding: 24px 30px 28px !important;
}

.ql-card-side h4 {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 82px;
}

.ql-card-side .ql-arrow {
  position: absolute;
  right: 30px;
  bottom: 28px;
}

.ql-arrow {
  align-self: flex-end;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(15, 79, 103, .18);
  border-radius: 50%;
  color: var(--main-sync-primary-dark);
}

.ql-arrow svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-guide-icons {
  position: absolute;
  left: 50%;
  bottom: 42px;
  z-index: 18;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(calc(100% - 150px), 980px);
}

.w-icon-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.w-icon-item .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 106px;
  height: 70px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--main-sync-guide-from), var(--main-sync-guide-to)) !important;
  box-shadow: 0 12px 28px var(--main-sync-guide-shadow);
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}

.w-icon-item:hover .circle {
  background: linear-gradient(180deg, #fff, var(--main-sync-guide-hover-to)) !important;
  border-color: #fff;
  box-shadow: 0 18px 34px var(--main-sync-guide-shadow);
}

.w-icon-item .circle svg {
  display: none;
}

.w-icon-item span {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  font-size: 18px;
  font-weight: 450;
  color: var(--main-sync-text) !important;
  text-align: center;
  white-space: nowrap;
}

.cp-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 44px;
  width: 100%;
  max-width: var(--main-sync-inner);
  margin: 0 auto;
}

.cp-block {
  min-width: 0;
}

.cp-label {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 0;
}

.cp-label .bar {
  display: block;
  width: 5px;
  height: 34px;
  background: var(--main-sync-primary);
  border-radius: 4px;
}

.cp-label h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 28px);
  font-weight: 800;
  color: #111;
  line-height: 1.2;
}

.np-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 48px 46px;
}

.np-item {
  min-width: 0;
}

.np-card {
  min-height: 118px;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px;
  border: 1px solid var(--main-sync-card-border);
  border-radius: 14px;
  box-sizing: border-box;
  transition: transform .22s ease, box-shadow .22s ease;
  transform-origin: center center;
  background: linear-gradient(90deg, var(--main-sync-card-from) 0%, var(--main-sync-card-to) 100%) !important;
  color: var(--main-sync-text);
}

.np-card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.np-title-link {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
}

.np-card h4 {
  margin: 0;
  color: var(--main-sync-text);
  font-weight: 480;
  line-height: 1.3;
  word-break: keep-all;
}

.np-toggle {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.np-toggle:hover {
  background: rgba(15, 79, 103, .08);
}

.np-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform .22s ease;
}

.np-toggle polyline {
  fill: none;
  stroke: var(--main-sync-primary-dark);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.np-panel {
  display: none;
  position: relative;
  z-index: 1;
  padding: 10px 10px 0 10px;
}

.np-item.is-open .np-panel {
  display: block;
}

.np-item.is-open .np-toggle svg {
  transform: rotate(180deg);
}

.np-widget {
  font-size: 18px;
  line-height: 1.8;
  color: #222;
}

.np-widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-widget li {
  margin: 0 0 14px;
  word-break: keep-all;
}

.np-widget a {
  color: #222;
}

.np-widget a:hover {
  color: var(--main-sync-primary);
}

.np-card .np-goto,
.np-goto {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .28);
  color: var(--main-sync-primary-dark);
  font-size: 26px;
  font-weight: 800;
  text-decoration: none;
}

.np-link-item .np-card {
  text-decoration: none;
}

.section-news .section-title,
.news-container {
  max-width: 1400px !important;
  width: min(calc(100% - 80px), 1400px);
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .section-posts {
    padding: 60px 36px;
  }

  .cp-inner {
    gap: 38px;
  }

  .np-grid {
    gap: 28px;
  }

  .np-card {
    min-height: 104px;
    padding: 22px 24px;
  }

  .np-card h4 {
    font-size: 23px;
  }

  .worship-grid {
    grid-template-columns: 1fr 1.45fr 1fr;
  }
}

@media (max-width: 1024px) {
  .section-worship .worship-inner {
    padding-left: var(--main-sync-pad-tablet) !important;
    padding-right: var(--main-sync-pad-tablet) !important;
  }
}

@media (max-width: 900px) {
  .worship-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .ql-card-primary,
  .ql-card-column,
  .ql-card-sunday,
  .ql-card-wed,
  .ql-card-dawn {
    grid-column: auto;
    grid-row: auto;
  }

  .ql-card-primary {
    grid-column: 1 / -1;
    min-height: 280px;
  }
}

@media (max-width: 860px) {
  .np-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .cp-label h3 {
    font-size: 13px;
  }

  .np-card {
    min-height: 70px;
    padding: 14px 16px;
    gap: 12px;
  }

  .np-card h4 {
    font-size: 20px;
    line-height: 1.25;
  }

  .np-toggle {
    width: 36px;
    height: 36px;
  }

  .np-toggle svg {
    width: 16px;
    height: 16px;
  }

  .np-panel {
    padding: 14px 6px 0 8px;
  }

  .np-widget {
    font-size: 16px;
    line-height: 1.7;
  }

  .np-widget li {
    margin-bottom: 10px;
  }

  .section-worship .worship-inner {
    padding-left: var(--main-sync-pad-mobile) !important;
    padding-right: var(--main-sync-pad-mobile) !important;
  }

  .worship-grid {
    gap: 12px;
  }

  a.ql-card,
  .ql-card {
    padding: 20px 16px !important;
  }

  .ql-card h4 {
    font-size: 24px !important;
  }

  .section-posts {
    padding: 44px 20px;
  }

  .cp-inner {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .hero-guide-icons {
    width: calc(100% - 32px);
    bottom: 34px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .w-icon-item .circle {
    width: 92px;
    height: 54px;
    border-radius: 12px;
  }

  .w-icon-item span {
    top: 18px;
    width: 86px;
    font-size: 14px;
  }

  .section-news .section-title,
  .news-container {
    width: min(calc(100% - 32px), 1400px);
  }
}

@media (max-width: 640px) {
  .cp-label {
    gap: 14px;
    margin-bottom: 24px;
  }

  .cp-label .bar {
    width: 6px;
    height: 28px;
  }

  .cp-label h3 {
    font-size: 22px;
  }

  .section-worship {
    padding-top: 34px;
  }

  .worship-grid {
    grid-template-columns: 1fr;
  }

  .ql-card-primary {
    grid-column: auto;
    min-height: 240px;
  }

  .np-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .np-card {
    min-height: 64px;
    padding: 12px;
    border-radius: 5px;
  }

  .np-card h4 {
    font-size: 13px;
  }

  .np-toggle {
    width: 32px;
    height: 32px;
    border-width: 1.5px;
  }

  .np-toggle svg {
    width: 14px;
    height: 14px;
  }

  .np-widget {
    font-size: 14px;
    line-height: 1.6;
  }

  .np-widget li {
    margin-bottom: 10px;
  }
}

@media (max-width: 540px) {
  .w-icon-item .circle {
    width: 86px;
    height: 50px;
  }

  .w-icon-item span {
    font-size: 13px;
  }
}

@media (hover: none) {
  .np-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* =============================================
   MAIN INDEX THEME PALETTE - FOREST GREEN
============================================= */
:root {
  --main-sync-primary: #245c3b;
  --main-sync-primary-dark: #0f3524;
  --main-sync-text: #10251b;
  --main-sync-card-from: #dff2e6;
  --main-sync-card-to: #f3fbf5;
  --main-sync-card-hover-from: #c8e8d4;
  --main-sync-card-hover-to: #e8f7ec;
  --main-sync-card-border: rgba(45, 106, 79, .24);
  --main-sync-card-shadow: rgba(27, 67, 50, .14);
  --main-sync-card-shadow-hover: rgba(27, 67, 50, .22);
  --main-sync-section-from: #eef8f1;
  --main-sync-section-to: #fbfefc;
  --main-sync-guide-to: #bbf7d0;
  --main-sync-guide-hover-to: #86efac;
  --main-sync-guide-shadow: rgba(27, 67, 50, .22);
}

/* MAIN INDEX TITLE SIZE SYNC */
.section-posts .cp-label h3,
.section-gallery .cp-label h3 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
}

@media (max-width: 1024px) {

  .section-posts .cp-label h3,
  .section-gallery .cp-label h3 {
    font-size: 13px;
  }
}

@media (max-width: 480px) {

  .section-posts .cp-label h3,
  .section-gallery .cp-label h3 {
    font-size: 13px;
  }
}

/* NAV INTERACTION RESTORE */
#header,
#header .header-inner,
#header .nav {
  pointer-events: auto !important;
}

#header .nav {
  position: relative !important;
  z-index: 100000 !important;
}

#header .nav,
#header .nav * {
  pointer-events: auto !important;
}

#header .nav>ul>li>a {
  transition: background .18s ease, color .18s ease, box-shadow .18s ease !important;
}

#header .nav>ul>li>a:hover,
#header .nav>ul>li:hover>a,
#header .nav>ul>li.active>a {
  background: none !important;
  color: #251504 !important;
  box-shadow: inset 0 -3px 0 currentColor !important;
}

#header .nav>ul>li:hover>.sub_nav {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  top: 100% !important;
  margin-top: 0 !important;
  transform: translateX(-50%) !important;
}

#header .nav .sub_nav li.active>a,
#header .nav .sub_nav li a:hover {
  color: #4a2e00 !important;
  background: rgba(245, 207, 112, .35) !important;
}

/* MAIN NOTICE/GALLERY TITLE SIZE */
.section-news .section-title h3,
.section-gallery .cp-label h3 {
  font-size: 24px !important;
}

/* QUICKLINK TEXT COMMON */
.hero-guide-icons .w-icon-item span {
  color: #fff !important;
  font-weight: 450 !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.88),
    0 1px 2px rgba(0, 0, 0, 0.95) !important;
}

/* NEWS SECTION SPACING */
.section-news {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* HERO TEXT TOP RIGHT */
.hero-text {
  top: 28px !important;
  right: 72px !important;
  bottom: auto !important;
  left: auto !important;
  text-align: right !important;
}

.hero-text .hero-label,
.hero-text h2 {
  color: #fff !important;
  -webkit-text-stroke: 0 transparent;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.75),
    1px 0 1px rgba(0, 0, 0, 0.55) !important;
}

@media (max-width: 768px) {
  .hero-text {
    top: 24px !important;
    right: 24px !important;
  }
}

/* NOTICE BOARD NO-IMAGE SLIDE */
.section-news .news-slide-no-image {
  background: linear-gradient(135deg, #352517 0%, #1f1710 48%, #d0a35c 100%) !important;
}

.section-news .news-slide-no-image .news-gradient {
  background: linear-gradient(90deg, rgba(35, 24, 13, 0.78) 0%, rgba(35, 24, 13, 0.46) 58%, rgba(35, 24, 13, 0.18) 100%) !important;
}



.ht-btn-intro {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.ht-btn-intro:hover,
.ht-btn-intro:focus {
  background: rgba(100, 255, 155, 0.5);
}

/* =============================================
   THEME4 HERO RENEWAL
============================================= */
html[data-theme="theme4"] body {
  background: #fff;
}

html[data-theme="theme4"] #body_background_wrap {
  display: none;
}

html[data-theme="theme4"] #contents {
  width: 100%;
  background: #fff;
}

html[data-theme="theme4"] .section-hero {
  width: calc(100% - 44px) !important;
  height: clamp(780px, calc(100vh - 64px), 920px) !important;
  margin: 22px auto 0 !important;
  overflow: visible !important;
  border-radius: 26px !important;
  background-color: #1d1712 !important;
  box-shadow: none !important;
}

html[data-theme="theme4"] .section-hero {
  border-radius: 26px !important;
}

html[data-theme="theme4"] .hero-bg-layer {
  display: none !important;
}

html[data-theme="theme4"] .section-hero::after,
html[data-theme="theme4"] .hero-overlay {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .18) 44%, rgba(0, 0, 0, .34) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .06) 52%, rgba(0, 0, 0, .20) 100%) !important;
  opacity: 1 !important;
}

html[data-theme="theme4"] .hero-inner {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  display: block !important;
}

html[data-theme="theme4"] .hero-image-layer {
  position: absolute !important;
  inset: -24px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  z-index: 0 !important;
  opacity: 0 !important;
  will-change: transform, opacity !important;
  transition: opacity 2.1s ease-in-out, transform 0.12s linear !important;
  transform: scale(1.04) translate3d(0, 0, 0) !important;
}

html[data-theme="theme4"] .hero-image-layer.is-active {
  opacity: 1 !important;
}

html[data-theme="theme4"] .hero-image-layer.is-leaving {
  opacity: 0 !important;
}

/* THEME4 hero image runtime fix: JS inserts these layers inside .hero-inner. */
html[data-theme="theme4"] body #contents .section-hero .hero-inner>.hero-image-layer {
  display: block !important;
  pointer-events: none !important;
  transform-origin: center center !important;
}

html[data-theme="theme4"] .hero-fade-sides,
html[data-theme="theme4"] .hero-fade-bottom,
html[data-theme="theme4"] .hero-guide-icons {
  display: none !important;
}

html[data-theme="theme4"] .hero-text {
  position: absolute !important;
  top: 32px !important;
  left: clamp(58px, 7vw, 150px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4 !important;
  width: min(760px, calc(100% - 120px)) !important;
  padding: 0 !important;
  text-align: center !important;
  color: #fff !important;
}

html[data-theme="theme4"] .hero-text .hero-label {
  margin: 0 0 28px !important;
  font-size: clamp(34px, 3.2vw, 58px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

html[data-theme="theme4"] .hero-text h2 {
  margin: 0 !important;
  font-size: clamp(28px, 15.2vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

html[data-theme="theme4"] .hero-text .hero-label,
html[data-theme="theme4"] .hero-text h2 {
  color: #fff !important;
  text-shadow:
    0 5px 0 rgba(0, 0, 0, .36),
    0 12px 32px rgba(0, 0, 0, .48) !important;
}

html[data-theme="theme4"] .hero-btn {
  display: none !important;
}

html[data-theme="theme4"] .hero-pager {
  display: none !important;
}

html[data-theme="theme4"] .hero-renewal-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(320px, 600px) minmax(310px, 430px);
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  pointer-events: none;
}

html[data-theme="theme4"] .hero-search-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: center;
  gap: 14px;
  width: min(100%, 600px);
  padding: 22px 0 0 0;
  border-radius: 0 18px 0 0;
  background: #fff;
  pointer-events: auto;
}

html[data-theme="theme4"] .hero-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html[data-theme="theme4"] .hero-search-box input[type="search"] {
  width: 100%;
  height: 68px;
  min-width: 0;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  background: #eaf0f7;
  color: #2f3d4f;
  font-size: 22px;
  font-weight: 500;
  outline: none;
}

html[data-theme="theme4"] .hero-search-box input[type="search"]::placeholder {
  color: #6d7888;
  opacity: 1;
}

html[data-theme="theme4"] .hero-search-box button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 68px;
  border-radius: 10px;
  background: #a0a6ad;
  color: #fff;
  transition: background .2s ease, transform .2s ease;
}

html[data-theme="theme4"] .hero-search-box button:hover,
html[data-theme="theme4"] .hero-search-box button:focus-visible {
  background: #1d638f;
  transform: translateY(-2px);
}

html[data-theme="theme4"] .hero-search-box svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

html[data-theme="theme4"] .hero-sermon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: min(100%, 430px);
  height: 292px;
  padding: 42px 34px 24px;
  overflow: hidden;
  border: 11px solid #fff;
  border-bottom: 0;
  border-radius: 26px;
  /*  background: url("/image/paster/paster_son_05.png1") center / cover no-repeat; */
  background: url("/image/worship/00_sermon_son-5-1.webp") center/cover no-repeat !important;
  color: #fff !important;
  pointer-events: auto;
}

html[data-theme="theme4"] .hero-sermon-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 22, .34) 0%, rgba(6, 10, 22, .68) 100%);
  pointer-events: none;
}

html[data-theme="theme4"] .hero-sermon-title,
html[data-theme="theme4"] .hero-sermon-button {
  position: relative;
  z-index: 1;
}

html[data-theme="theme4"] .hero-sermon-title {
  font-size: clamp(24px, 3.8vw, 28px);
  font-weight: 550;
  line-height: 1;
  color: #fff;
  text-shadow: 0 8px 22px rgba(0, 0, 0, .55);
}

html[data-theme="theme4"] .hero-sermon-button {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 214px;
  height: 68px;
  padding: 0 24px;
  border-radius: 10px;
  background: #a0a6ad;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  transition: background .2s ease, transform .2s ease;
}

html[data-theme="theme4"] .hero-sermon-card:hover .hero-sermon-button,
html[data-theme="theme4"] .hero-sermon-card:focus-visible .hero-sermon-button {
  background: #1d638f;
  transform: translateY(-2px);
}

html[data-theme="theme4"] .main-content-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 28px 32px 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

@media (min-width: 901px) {
  html[data-theme="theme4"] .main-content-wrap {
    min-height: auto;
    display: grid !important;
    grid-template-columns: minmax(300px, .88fr) minmax(420px, 1.36fr) minmax(300px, .88fr);
    grid-template-rows: minmax(250px, auto) minmax(230px, auto);
    gap: 18px 22px;
    align-items: stretch;
  }

  html[data-theme="theme4"] .section-worship {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  html[data-theme="theme4"] .section-news {
    grid-column: 2;
    grid-row: 1;
  }

  html[data-theme="theme4"] .section-posts {
    grid-column: 2;
    grid-row: 2;
  }

  html[data-theme="theme4"] .section-gallery {
    grid-column: 3;
    grid-row: 1;
  }

  html[data-theme="theme4"] .calendar-events-wrap {
    grid-column: 3;
    grid-row: 2;
  }

  html[data-theme="theme4"] .section-worship,
  html[data-theme="theme4"] .section-news,
  html[data-theme="theme4"] .section-posts,
  html[data-theme="theme4"] .section-gallery,
  html[data-theme="theme4"] .calendar-events-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: visible !important;
    background: transparent !important;
  }

  html[data-theme="theme4"] .section-worship .worship-inner,
  html[data-theme="theme4"] .section-posts .cp-inner,
  html[data-theme="theme4"] .section-gallery .gallery-inner,
  html[data-theme="theme4"] .section-news .section-title,
  html[data-theme="theme4"] .news-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[data-theme="theme4"] .section-worship .worship-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 190px repeat(4, 70px) !important;
    gap: 12px !important;
  }

  html[data-theme="theme4"] .section-worship .ql-card,
  html[data-theme="theme4"] .section-worship .ql-card-primary {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 18px 20px !important;
    border-radius: 14px !important;
    transform: none !important;
  }

  html[data-theme="theme4"] .section-worship .ql-card-primary:hover,
  html[data-theme="theme4"] .section-worship .ql-card-primary:focus-visible {
    transform: translateY(-3px) !important;
  }

  html[data-theme="theme4"] .section-worship .ql-card h4 {
    position: static !important;
    font-size: 24px !important;
    line-height: 1.18 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  html[data-theme="theme4"] .ql-card-primary h4 {
    font-size: 26px !important;
  }

  html[data-theme="theme4"] .section-worship .ql-card-side .ql-arrow {
    right: 18px !important;
    bottom: 18px !important;
  }

  html[data-theme="theme4"] .section-news {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  html[data-theme="theme4"] .section-news .section-title {
    justify-content: flex-start;
  }

  html[data-theme="theme4"] .section-news .section-title h3,
  html[data-theme="theme4"] .section-gallery .cp-label h3,
  html[data-theme="theme4"] .section-posts .cp-label h3 {
    font-size: 22px !important;
  }

  html[data-theme="theme4"] .news-image-wrap,
  html[data-theme="theme4"] .popupSwiper,
  html[data-theme="theme4"] .popupSwiper .swiper-wrapper,
  html[data-theme="theme4"] .popupSwiper .swiper-slide {
    height: 220px !important;
  }

  html[data-theme="theme4"] .news-title {
    font-size: 21px !important;
  }

  html[data-theme="theme4"] .section-posts .cp-inner {
    gap: 14px !important;
  }

  html[data-theme="theme4"] .section-posts .np-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html[data-theme="theme4"] .section-posts .np-card {
    min-height: 76px !important;
    padding: 14px !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }

  html[data-theme="theme4"] .section-posts .np-card h4 {
    font-size: 20px !important;
    line-height: 1.18 !important;
  }

  html[data-theme="theme4"] .section-posts .np-toggle,
  html[data-theme="theme4"] .section-posts .np-goto {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    font-size: 18px !important;
  }

  html[data-theme="theme4"] .section-gallery .gallery-slider-wrap {
    margin-top: 0px !important;
    padding: 0 !important;
  }

  html[data-theme="theme4"] .section-gallery .gallery-card {
    aspect-ratio: 16 / 10 !important;
    border-radius: 8px !important;
  }

  html[data-theme="theme4"] .section-gallery .gallery-pager {
    margin-top: 8px !important;
  }

  html[data-theme="theme4"] .calendar-events-wrap {
    padding: 0 !important;
  }

  html[data-theme="theme4"] .calendar_inner {
    max-height: 230px;
    height: 100px;
    overflow: auto;
    border-radius: 8px;
  }
}

@media (max-width: 900px) {
  html[data-theme="theme4"] .section-hero {
    width: calc(100% - 24px) !important;
    height: 620px !important;
    margin-top: 12px !important;
    border-radius: 18px !important;
  }

  html[data-theme="theme4"] .hero-text {
    top: 28px !important;
    left: 24px !important;
    width: calc(100% - 48px) !important;
  }

  html[data-theme="theme4"] .hero-renewal-actions {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 12px 12px;
  }

  html[data-theme="theme4"] .hero-search-box {
    width: 100%;
    padding-top: 0;
    border-radius: 14px;
    background: transparent;
  }

  html[data-theme="theme4"] .hero-sermon-card {
    width: 100%;
    height: 150px;
    border: 5px solid #fff;
    border-radius: 16px;
    padding: 24px 22px 18px;
  }

  html[data-theme="theme4"] .hero-sermon-button {
    height: 50px;
    min-width: 180px;
    font-size: 15px;
  }

  html[data-theme="theme4"] .main-content-wrap {
    padding: 24px 16px 34px !important;
  }
}

@media (max-width: 520px) {
  html[data-theme="theme4"] .section-hero {
    height: 560px !important;
  }

  html[data-theme="theme4"] .hero-text .hero-label {
    font-size: 36px !important;
  }

  html[data-theme="theme4"] .hero-text h2 {
    font-size: 36px !important;
  }

  html[data-theme="theme4"] .hero-search-box {
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  html[data-theme="theme4"] .hero-search-box input[type="search"],
  html[data-theme="theme4"] .hero-search-box button {
    height: 58px;
  }

  html[data-theme="theme4"] .hero-search-box input[type="search"] {
    padding: 0 18px;
    font-size: 17px;
  }
}

/* Higher specificity than legacy inline theme overrides in layout.html. */
html[data-theme="theme4"] body #contents .section-hero {
  width: calc(100% - 44px) !important;
  height: clamp(780px, calc(100vh - 64px), 920px) !important;
  margin: 22px auto 0 !important;
  overflow: visible !important;
  border-radius: 26px !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-inner {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  display: block !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-fade-sides,
html[data-theme="theme4"] body #contents .section-hero .hero-fade-bottom,
html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons,
html[data-theme="theme4"] body #contents .hero-pager {
  display: none !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-text {
  top: 32px !important;
  left: clamp(58px, 7vw, 150px) !important;
  right: auto !important;
  width: min(760px, calc(100% - 120px)) !important;
  text-align: center !important;
}

html[data-theme="theme4"] body #contents .main-content-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 28px 32px 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
}

@media (min-width: 901px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    display: grid !important;
    grid-template-columns: minmax(300px, .88fr) minmax(420px, 1.36fr) minmax(300px, .88fr) !important;
    grid-template-rows: minmax(250px, auto) minmax(230px, auto) !important;
    gap: 18px 22px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship,
  html[data-theme="theme4"] body #contents .section-news,
  html[data-theme="theme4"] body #contents .section-posts,
  html[data-theme="theme4"] body #contents .section-gallery,
  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-inner,
  html[data-theme="theme4"] body #contents .section-posts .cp-inner,
  html[data-theme="theme4"] body #contents .section-gallery .gallery-inner,
  html[data-theme="theme4"] body #contents .section-news .section-title,
  html[data-theme="theme4"] body #contents .news-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 900px) {
  html[data-theme="theme4"] body #contents .section-hero {
    width: calc(100% - 24px) !important;
    height: 620px !important;
    margin-top: 12px !important;
    border-radius: 18px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-text {
    top: 38px !important;
    left: 24px !important;
    width: calc(100% - 48px) !important;
  }
}

/* Theme4 header and hero edge cleanup */
html[data-theme="theme4"] #header-top {
  height: 44px !important;
  background: #dcecdc !important;
  border-bottom: 1px solid rgba(121, 156, 192, .28) !important;
  box-shadow: none !important;
}

html[data-theme="theme4"] #header-top .ht-inner {
  width: 100% !important;
  max-width: none !important;
  padding: 0 36px !important;
}

html[data-theme="theme4"] #header-top .ht-left a,
html[data-theme="theme4"] #header-top .ht-left span,
html[data-theme="theme4"] .ht-dropdown>a,
html[data-theme="theme4"] .ht-logged-info {
  color: #214765 !important;
  text-shadow: none !important;
}

html[data-theme="theme4"] .ht-btn-login {
  background: #245c3b !important;
  color: #fff !important;
}

html[data-theme="theme4"] .ht-btn-join {
  background: #ffe58a !important;
  color: #563312 !important;
}

html[data-theme="theme4"] #header {
  height: 100px !important;
  top: 44px !important;
  background: linear-gradient(135deg, #16482b 0%, #247143 48%, #3b9a5f 100%) !important;
  border-bottom: 1px solid rgba(18, 55, 33, .45) !important;
  box-shadow: 0 2px 16px rgba(18, 55, 33, .22) !important;
}

@media (max-width: 930px) {
  html[data-theme="theme4"] #header-top {
    display: none !important;
  }

  html[data-theme="theme4"] #header {
    top: 0 !important;
  }
}

html[data-theme="theme4"] #header .header-inner {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  padding: 0 64px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-theme="theme4"] #header .logo a {
  width: 180px !important;
  height: 42px !important;
  background-image: url("/images/logo_white01.png") !important;
  background-size: contain !important;
  background-position: center left !important;
}

html[data-theme="theme4"] #header .nav {
  justify-content: center !important;
  margin-left: 42px !important;
  background: transparent !important;
}

html[data-theme="theme4"] #header .nav>ul {
  gap: 28px !important;
}

html[data-theme="theme4"] #header .nav>ul>li>a {
  height: 58px !important;
  padding: 0 6px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #eaf7ee !important;
  box-shadow: none !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28) !important;
}

html[data-theme="theme4"] #header .nav>ul>li>a::after {
  background: #f2c94c !important;
  bottom: 8px !important;
}

html[data-theme="theme4"] #header .nav>ul>li>a:hover,
html[data-theme="theme4"] #header .nav>ul>li:hover>a,
html[data-theme="theme4"] #header .nav>ul>li.active>a {
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="theme4"] body #contents .section-hero {
  height: clamp(780px, calc(100vh - 64px), 920px) !important;
  margin-top: 18px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: #fff !important;
}

html[data-theme="theme4"] body #contents .section-hero,
html[data-theme="theme4"] body #contents .section-hero .hero-inner,
html[data-theme="theme4"] body #contents .section-hero .hero-bg-layer,
html[data-theme="theme4"] body #contents .section-hero::after,
html[data-theme="theme4"] body #contents .section-hero .hero-overlay {
  border-radius: 28px !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-bg-layer {
  inset: 0 !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 600px) minmax(310px, 430px) !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 28px !important;
  z-index: 12 !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-search-box {
  padding: 22px 0 0 0 !important;
  border-radius: 0 22px 0 0 !important;
  background: #fff !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-search-box input[type="search"] {
  border-radius: 12px !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-search-box button {
  border-radius: 12px !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
  height: 286px !important;
  margin: 0 0 0 auto !important;
  border: 11px solid #fff !important;
  border-bottom: 0 !important;
  border-right: 0 !important;
  border-radius: 28px 0 0 0 !important;
  background-clip: padding-box !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card::before {
  border-radius: 6px 0 0 0 !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-button {
  border-radius: 12px !important;
}

@media (max-width: 1200px) {
  html[data-theme="theme4"] #header .header-inner {
    padding: 0 32px !important;
  }

  html[data-theme="theme4"] #header .nav>ul {
    gap: 16px !important;
  }

  html[data-theme="theme4"] #header .nav>ul>li>a {
    font-size: 17px !important;
  }
}

@media (max-width: 900px) {
  html[data-theme="theme4"] #header {
    top: 0 !important;
    height: 82px !important;
  }

  html[data-theme="theme4"] #header .header-inner {
    padding: 0 20px !important;
  }

  html[data-theme="theme4"] #header .logo a {
    width: 180px !important;
    height: 42px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero {
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 12px 12px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-search-box {
    padding: 0 !important;
    border-radius: 14px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
    height: 150px !important;
    border: 5px solid #fff !important;
    border-radius: 16px !important;
  }
}

/* Theme4 corner radius corrections for marked hero areas */
html[data-theme="theme4"] {
  --theme4-hero-radius: 28px;
  --theme4-inner-radius: 18px;
}

html[data-theme="theme4"] body #contents .section-hero {
  overflow: hidden !important;
  border-radius: var(--theme4-hero-radius) !important;
  isolation: isolate;
}

html[data-theme="theme4"] body #contents .section-hero .hero-inner,
html[data-theme="theme4"] body #contents .section-hero .hero-bg-layer,
html[data-theme="theme4"] body #contents .section-hero::after,
html[data-theme="theme4"] body #contents .section-hero .hero-overlay {
  border-radius: inherit !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-bg-layer {
  clip-path: inset(0 round var(--theme4-hero-radius)) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
  overflow: visible !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-search-box {
  overflow: hidden !important;
  border-radius: 0 var(--theme4-inner-radius) 0 var(--theme4-hero-radius) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-search-box input[type="search"] {
  border-radius: 12px !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-search-box button {
  overflow: hidden !important;
  border-radius: 12px !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
  overflow: hidden !important;
  border-radius: var(--theme4-hero-radius) var(--theme4-hero-radius) 0 var(--theme4-hero-radius) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card::before {
  border-radius: inherit !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-button {
  overflow: hidden !important;
  border-radius: 12px !important;
}

@media (max-width: 900px) {
  html[data-theme="theme4"] {
    --theme4-hero-radius: 20px;
    --theme4-inner-radius: 14px;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-search-box {
    border-radius: var(--theme4-inner-radius) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
    border-radius: var(--theme4-inner-radius) !important;
  }
}

/* Theme4 hero image-box radius: keep the image clipped before action overlays. */
html[data-theme="theme4"] body #contents .section-hero {
  overflow: visible !important;
  background: #fff !important;
  border-radius: 0 !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-bg-layer {
  inset: 0 0 92px 0 !important;
  overflow: hidden !important;
  border-radius: var(--theme4-hero-radius) !important;
  clip-path: inset(0 round var(--theme4-hero-radius)) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-overlay,
html[data-theme="theme4"] body #contents .section-hero::after {
  inset: 0 0 92px 0 !important;
  overflow: hidden !important;
  border-radius: var(--theme4-hero-radius) !important;
  clip-path: inset(0 round var(--theme4-hero-radius)) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-inner {
  overflow: visible !important;
  border-radius: 0 !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
  bottom: 0 !important;
  overflow: visible !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-search-box {
  align-self: end !important;
  padding: 16px 14px 0 0 !important;
  border-radius: 0 var(--theme4-inner-radius) 0 0 !important;
  background: #fff !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
  border: 9px solid #fff !important;
  border-bottom: 0 !important;
  border-right: 0 !important;
  border-radius: var(--theme4-hero-radius) 0 0 0 !important;
  box-shadow: none !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card::before {
  border-radius: calc(var(--theme4-hero-radius) - 10px) 0 0 0 !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card img,
html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card>* {
  border-radius: inherit;
}

@media (max-width: 900px) {

  html[data-theme="theme4"] body #contents .section-hero .hero-bg-layer,
  html[data-theme="theme4"] body #contents .section-hero .hero-overlay,
  html[data-theme="theme4"] body #contents .section-hero::after {
    inset: 0 0 224px 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-search-box,
  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
    border-radius: var(--theme4-inner-radius) !important;
  }
}

/* Theme4 rollback: full hero image with sermon card only. */
html[data-theme="theme4"] body #contents .section-hero {
  overflow: hidden !important;
  background: #111 !important;
  border-radius: var(--theme4-hero-radius) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-inner {
  overflow: visible !important;
  border-radius: inherit !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-bg-layer,
html[data-theme="theme4"] body #contents .section-hero .hero-overlay,
html[data-theme="theme4"] body #contents .section-hero::after {
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  clip-path: inset(0 round var(--theme4-hero-radius)) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-search-box {
  display: none !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
  position: absolute !important;
  left: auto !important;
  right: clamp(18px, 2.4vw, 46px) !important;
  bottom: clamp(18px, 2.4vw, 46px) !important;
  z-index: 12 !important;
  display: block !important;
  width: min(430px, calc(100% - 36px)) !important;
  pointer-events: none !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
  width: 100% !important;
  height: clamp(180px, 18vw, 292px) !important;
  margin: 0 !important;
  padding: 42px 34px 24px !important;
  border: 2px solid #fff !important;
  border-radius: 20px !important;
  background-clip: padding-box !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28) !important;
  pointer-events: auto !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card::before {
  inset: 0 !important;
  border-radius: 16px !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
  background-origin: padding-box !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-title {
  font-size: clamp(24px, 4.4vw, 28px) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-button {
  height: 60px !important;
  min-width: 204px !important;
  border-radius: 12px !important;
}

@media (max-width: 900px) {
  html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
    right: 14px !important;
    bottom: 14px !important;
    width: min(360px, calc(100% - 28px)) !important;
    padding: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
    height: 150px !important;
    padding: 24px 22px 18px !important;
    border-width: 3px !important;
    border-radius: 16px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card::before {
    border-radius: 13px !important;
  }
}

/* Theme4 hero copy sizing and alignment */
html[data-theme="theme4"] body #contents .section-hero .hero-text {
  top: clamp(30px, 10vh, 40px) !important;
  left: clamp(46px, 7vw, 120px) !important;
  right: auto !important;
  width: min(720px, calc(100% - 92px)) !important;
  text-align: left !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-text .hero-label {
  margin: 0 0 18px !important;
  font-size: clamp(28px, 3.3vw, 34px) !important;
  line-height: 1.14 !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-text h2 {
  font-size: clamp(34px, 4.2vw, 38px) !important;
  line-height: 1.16 !important;
  text-align: left !important;
}

@media (max-width: 900px) {
  html[data-theme="theme4"] body #contents .section-hero .hero-text {
    top: 24px !important;
    left: 24px !important;
    width: calc(100% - 48px) !important;
  }

  /* 紐⑤컮???ъ씠利?議곗젅 */
  html[data-theme="theme4"] body #contents .section-hero .hero-text .hero-label {
    font-size: clamp(26px, 3.6vw, 38px) !important;
  }

  /* 紐⑤컮???ъ씠利?議곗젅 */
  html[data-theme="theme4"] body #contents .section-hero .hero-text h2 {
    font-size: clamp(36px, 3.6vw, 42px) !important;
  }
}

/* Theme4 hero: remove dark overlay layer. */
html[data-theme="theme4"] body #contents .section-hero .hero-overlay,
html[data-theme="theme4"] body #contents .section-hero::after {
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-bg-layer {
  filter: none !important;
}

/* Theme4 second page dashboard layout - CSS only */
html[data-theme="theme4"] body #contents {
  background: #e8f2e6 !important;
}

html[data-theme="theme4"] body #contents .main-content-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 96px clamp(28px, 3.6vw, 72px) 64px !important;
  background: #e8f2e6 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 1101px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    display: grid !important;
    grid-template-columns: minmax(360px, 1.05fr) minmax(360px, .82fr) minmax(360px, 1fr) !important;
    grid-template-rows: minmax(300px, auto) minmax(320px, auto) !important;
    gap: 48px clamp(34px, 4vw, 70px) !important;
    align-items: start !important;
  }

  html[data-theme="theme4"] body #contents .section-posts {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-theme="theme4"] body #contents .section-news {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    padding-top: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }
}

html[data-theme="theme4"] body #contents .section-worship,
html[data-theme="theme4"] body #contents .section-news,
html[data-theme="theme4"] body #contents .section-posts,
html[data-theme="theme4"] body #contents .section-gallery,
html[data-theme="theme4"] body #contents .calendar-events-wrap {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="theme4"] body #contents .section-worship .worship-inner,
html[data-theme="theme4"] body #contents .section-posts .cp-inner,
html[data-theme="theme4"] body #contents .section-gallery .gallery-inner,
html[data-theme="theme4"] body #contents .section-news .section-title,
html[data-theme="theme4"] body #contents .news-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-theme="theme4"] body #contents .section-news .section-title,
html[data-theme="theme4"] body #contents .section-gallery .cp-label,
html[data-theme="theme4"] body #contents .section-posts .cp-label {
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 0 0 22px !important;
}

html[data-theme="theme4"] body #contents .section-news .section-title h3,
html[data-theme="theme4"] body #contents .section-gallery .cp-label h3,
html[data-theme="theme4"] body #contents .section-posts .cp-label h3 {
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  color: #07140f !important;
  letter-spacing: 0 !important;
}

html[data-theme="theme4"] body #contents .section-posts .cp-label {
  display: flex !important;
}


html[data-theme="theme4"] body #contents .section-posts .cp-label h3,
html[data-theme="theme4"] body #contents .section-posts .cp-label .bar {
  display: none !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 2px 4px !important;
  border-radius: 26px !important;
  background: #d7e6f8 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-card {
  min-height: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-card h4 {
  overflow: hidden !important;
  color: #364760 !important;
  font-size: clamp(20px, 2.15vw, 24px) !important;
  font-weight: 480 !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-actions,
html[data-theme="theme4"] body #contents .section-posts .np-goto,
html[data-theme="theme4"] body #contents .section-posts .np-toggle {
  display: none !important;
}

html[data-theme="theme4"] body #contents .section-worship .worship-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(130px, 1fr)) !important;
  gap: 20px !important;
  min-height: 620px !important;
  padding: 24px !important;
  border-radius: 42px !important;
  background: linear-gradient(135deg, #4530ab 0%, #5d88f4 52%, #6726c7 100%) !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 26px !important;
  border: 0 !important;
  border-radius: 16px 36px 16px 16px !important;
  background: rgba(255, 255, 255, .16) !important;
  box-shadow: none !important;
  color: #fff !important;
  transform: none !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-primary {
  grid-column: auto !important;
  grid-row: auto !important;
  background: rgba(34, 22, 134, .46) !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card h4 {
  position: absolute !important;
  left: 28px !important;
  right: 24px !important;
  bottom: 24px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(22px, 2.35vw, 26px) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-shadow: none !important;
  white-space: normal !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-arrow {
  display: none !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 28px;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, .86);
  border-radius: 15px;
}


html[data-theme="theme4"] body #contents .section-news .section-title h3::before {
  font-size: clamp(24px, 2vw, 24px) !important;
}

html[data-theme="theme4"] body #contents .news-toggle {
  display: none !important;
}

html[data-theme="theme4"] body #contents .section-news .news-container {
  display: block !important;
}

html[data-theme="theme4"] body #contents .section-news .news-image-wrap,
html[data-theme="theme4"] body #contents .popupSwiper,
html[data-theme="theme4"] body #contents .popupSwiper .swiper-wrapper,
html[data-theme="theme4"] body #contents .popupSwiper .swiper-slide {
  height: 190px !important;
  border-radius: 16px !important;
}

html[data-theme="theme4"] body #contents .section-news .news-overlay {
  padding: 18px !important;
}

html[data-theme="theme4"] body #contents .section-news .news-title {
  font-size: 20px !important;
  line-height: 1.35 !important;
}

html[data-theme="theme4"] body #contents .section-news .news-body,
html[data-theme="theme4"] body #contents .section-news .news-meta,
html[data-theme="theme4"] body #contents .section-news .news-link {
  display: none !important;
}

html[data-theme="theme4"] body #contents .section-gallery .cp-label h3 {
  font-size: 0 !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-wrap {
  margin-top: 0 !important;
  padding: 0 !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-viewport {
  overflow: hidden !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-track {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-card {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 22px !important;
  width: 100% !important;
  min-height: 92px !important;
  flex: 0 0 auto !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-card img {
  width: 92px !important;
  height: 92px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-card-title {
  position: static !important;
  align-self: center !important;
  padding: 0 !important;
  background: transparent !important;
  color: #364760 !important;
  font-size: clamp(16px, 1.1vw, 22px) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-btn,
html[data-theme="theme4"] body #contents .section-gallery .gallery-pager {
  display: none !important;
}

html[data-theme="theme4"] body #contents .calendar_inner {
  height: 200px !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: #cde7fb !important;
}

/* Reuse hero quick links visually on page 2 without editing layout.html. */
html[data-theme="theme4"] body #contents .section-hero {
  overflow: visible !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
  top: calc(100% + 118px) !important;
  left: 50% !important;
  bottom: auto !important;
  z-index: 30 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 92px) !important;
  gap: 12px !important;
  width: auto !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
  display: flex !important;
  width: 92px !important;
  min-height: 78px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .16) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle {
  display: none !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item span {
  position: static !important;
  width: auto !important;
  transform: none !important;
  color: #444 !important;
  font-size: 13px !important;
  font-weight: 450 !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
  white-space: normal !important;
}

@media (max-width: 1100px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 34px !important;
    padding-top: 42px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
    display: none !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    min-height: 420px !important;
  }

}

/* Theme4 second page label and quick-link adjustments */
html[data-theme="theme4"] body #contents .section-worship::before {
  content: none !important;
  display: none !important;
}

html[data-theme="theme4"] body #contents .section-gallery .cp-label h3 {
  font-size: clamp(22px, 2vw, 26px) !important;
}

html[data-theme="theme4"] body #contents .section-gallery .cp-label h3::before {
  content: none !important;
}

html[data-theme="theme4"] body #contents .section-gallery .cp-label h3 {
  color: transparent !important;
}

/* Keep gallery as the same card/slider structure used by the other themes. */
html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-viewport {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-track {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  min-width: 100% !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-card {
  display: block !important;
  flex: 0 0 calc(33.333% - 14px) !important;
  width: auto !important;
  min-height: 0 !important;
  aspect-ratio: 370 / 285 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--bg-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-card img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-card-title {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 14px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .74) 100%) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-btn {
  display: flex !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-pager {
  display: flex !important;
}

/* Quick links: round icon row, no extra title. */
html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
  top: calc(100% + 72px) !important;
  display: flex !important;
  grid-template-columns: none !important;
  gap: clamp(16px, 2.2vw, 34px) !important;
  width: auto !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
  width: clamp(104px, 7.4vw, 138px) !important;
  height: clamp(104px, 7.4vw, 138px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 14px 30px rgba(16, 36, 60, .14) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle {
  display: flex !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle svg {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  stroke: #0f3524 !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item span {
  position: static !important;
  width: auto !important;
  margin-top: 8px !important;
  color: #0f3524 !important;
  font-size: clamp(15px, 1.05vw, 20px) !important;
  font-weight: 450 !important;
  text-align: center !important;
}

/* Theme4 notice links as horizontal tab page */
html[data-theme="theme4"] body #contents .section-posts .cp-label::before {
  content: none !important;
  display: none !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: auto minmax(200px, 1fr) !important;
  gap: 0 !important;
  min-height: 400px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 34px !important;
  background: #f8fcff !important;
  box-shadow: 0 18px 40px rgba(30, 64, 100, .08) !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item {
  display: contents !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-card {
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 82px !important;
  padding: 18px 14px !important;
  border: 0 !important;
  border-right: 1px solid rgba(61, 82, 112, .10) !important;
  border-radius: 0 !important;
  background: #d9e9fb !important;
  color: #334761 !important;
  box-shadow: none !important;
  text-align: center !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item:first-child .np-card {
  border-top-left-radius: 34px !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item:nth-child(6) .np-card {
  border-top-right-radius: 34px !important;
  border-right: 0 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item.is-open .np-card,
html[data-theme="theme4"] body #contents .section-posts .np-card:hover {
  background: #c8def7 !important;
  color: #13263d !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-card h4 {
  display: block !important;
  overflow: visible !important;
  font-size: clamp(20px, 2.5vw, 24px) !important;
  font-weight: 480 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-overflow: clip !important;
  color: currentColor !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-panel {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-height: 280px !important;
  padding: 34px 40px !important;
  background: #f8fcff !important;
  border-radius: 0 0 34px 34px !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item.is-open .np-panel {
  display: block !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-widget {
  color: #334761 !important;
  font-size: clamp(16px, 1vw, 20px) !important;
  line-height: 1.8 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-widget a {
  color: #334761 !important;
  font-weight: 700 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card {
  cursor: pointer !important;
}

@media (max-width: 1100px) {
  html[data-theme="theme4"] body #contents .section-posts .np-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, auto) minmax(240px, 1fr) !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-panel {
    grid-row: 3 !important;
  }
}

/* Move the last three notice cards into the service panel visually. */
@media (min-width: 1101px) {
  html[data-theme="theme4"] body #contents .section-posts .np-link-item {
    display: block !important;
    position: absolute !important;
    z-index: 35 !important;
    width: min(180px, 12vw) !important;
    height: 130px !important;
    pointer-events: auto !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item:nth-child(4) {
    left: 42.2% !important;
    top: 438px !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item:nth-child(5) {
    left: calc(42.2% + min(200px, 13.4vw)) !important;
    top: 438px !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item:nth-child(6) {
    left: 42.2% !important;
    top: 588px !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 24px 22px !important;
    border: 0 !important;
    border-radius: 16px 34px 16px 16px !important;
    background: rgba(255, 255, 255, .16) !important;
    box-shadow: none !important;
    color: #fff !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, .72);
    border-radius: 10px;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-title-link {
    min-width: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card h4 {
    color: #fff !important;
    font-size: clamp(19px, 2.35vw, 22px) !important;
    font-weight: 480 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-goto {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  html[data-theme="theme4"] body #contents .section-posts .np-link-item {
    display: block !important;
  }
}


/* =====================================================
   THEME4 UPDATE 2026-05
   1. hero-inner  ??max-width 100%, ??肄붾꼫 radius, ?占쎌そ 10px margin
   2. hero-guide-icons ??hero 以묒븰 蹂듭썝
   3. section-posts ??3-tab + 3-link-card 援ъ“ 媛쒖꽑
===================================================== */

html[data-theme="theme4"] body #contents .section-hero .hero-inner {
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  max-width: 100% !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
  display: flex !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  flex-wrap: nowrap !important;
  gap: clamp(8px, 1.4vw, 20px) !important;
  width: auto !important;
  z-index: 8 !important;
  grid-template-columns: none !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
  width: clamp(76px, 5.8vw, 108px) !important;
  height: clamp(76px, 5.8vw, 108px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .20) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
  backdrop-filter: blur(6px) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, .26) !important;
  background: rgba(255, 255, 255, .98) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:hover .circle {
  transform: translateY(-3px) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle {
  display: flex !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle svg {
  display: block !important;
  width: clamp(22px, 1.6vw, 28px) !important;
  height: clamp(22px, 1.6vw, 28px) !important;
  stroke: #0f3524 !important;
  stroke-width: 1.8 !important;
  fill: none !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item span {
  position: static !important;
  width: auto !important;
  margin-top: 3px !important;
  color: #0f3524 !important;
  font-size: clamp(10px, 0.82vw, 16px) !important;
  font-weight: 450 !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

/* 紐⑤컮?? ?占쎌씠占?以꾨컮占??占쎌슜 */
@media (max-width: 900px) {
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
    flex-wrap: wrap !important;
    width: calc(100% - 32px) !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
    width: clamp(60px, 18vw, 76px) !important;
    height: clamp(60px, 18vw, 76px) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-inner {
    left: 6px !important;
    right: 6px !important;
    border-radius: 14px !important;
  }
}

/* ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?   3. section-posts ????UI 媛쒖꽑
   援ъ“: row1=??占쏙옙??3??, row2=肄섑뀗痢좏뙣?? row3=留곹겕移대뱶(3??
   ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/

/* np-grid: 3而щ읆 3??*/
html[data-theme="theme4"] body #contents .section-posts .np-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto minmax(210px, 1fr) auto !important;
  min-height: 0 !important;
  border-radius: 18px !important;
  background: #f4fbf5 !important;
  box-shadow: 0 6px 28px rgba(27, 67, 50, .10), 0 1px 4px rgba(27, 67, 50, .06) !important;
}

/* ?占?占?Row 1: ???占쎈뜑 移대뱶 (援먰쉶?占쎌떇쨌二쇰낫 / 紐⑹옣紐⑥엫 / 怨듸옙??占쏀빆) ?占?占?*/
html[data-theme="theme4"] body #contents .section-posts .np-card {
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 60px !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, .18) !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #245c3b 0%, #2f7a4b 100%) !important;
  color: rgba(255, 255, 255, .92) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background .22s ease, border-color .22s ease, color .22s ease !important;
}

/* ???占쎈뜑: 占?踰덉㎏ ???占쎌そ ?占쎈떒 radius */
html[data-theme="theme4"] body #contents .section-posts .np-item:first-child .np-card {
  border-top-left-radius: 18px !important;
  border-top-right-radius: 0 !important;
}

/* ???占쎈뜑: ??踰덉㎏ ???占쎈Ⅸ占??占쎈떒 radius (占?nth-child(6) rule ??占쏙옙?占쎄린) */
html[data-theme="theme4"] body #contents .section-posts .np-item:nth-child(3) .np-card {
  border-top-right-radius: 18px !important;
  border-right: 0 !important;
}

/* ?占쎌꽦/?占쎈쾭 ??*/
html[data-theme="theme4"] body #contents .section-posts .np-item.is-open .np-card,
html[data-theme="theme4"] body #contents .section-posts .np-card:hover {
  background: linear-gradient(135deg, #0f3524 0%, #245c3b 100%) !important;
  color: #e8c454 !important;
  border-bottom-color: #d4a017 !important;
}

/* ???占쎌씠占?h4 */
html[data-theme="theme4"] body #contents .section-posts .np-card h4 {
  display: block !important;
  font-size: clamp(20px, 0.96vw, 24px) !important;
  font-weight: 480 !important;
  color: currentColor !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

/* ?占?占?Row 2: 肄섑뀗占??占쎈꼸 ?占?占?*/
html[data-theme="theme4"] body #contents .section-posts .np-panel {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-height: 210px !important;
  padding: 26px 32px !important;
  background: #f4fbf5 !important;
  border-radius: 0 !important;
  border-top: 2px solid rgba(27, 67, 50, .08) !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item.is-open .np-panel {
  display: block !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-widget {
  color: #0f3524 !important;
  font-size: clamp(14px, 0.95vw, 17px) !important;
  line-height: 1.85 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-widget a {
  color: #245c3b !important;
  font-weight: 700 !important;
}

/* ?占?占?Row 3: 留곹겕 移대뱶 (?占쎄탳吏€湲곕룄 / 李ъ뼇?占?/ ?占쎄났遺€) ?占?占?*/
/* display:contents 蹂듭썝 + position:static ?占쎈줈 湲곗〈 absolute 痍⑥냼 */
html[data-theme="theme4"] body #contents .section-posts .np-link-item {
  display: contents !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  pointer-events: auto !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card {
  grid-row: 3 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 72px !important;
  padding: 16px 20px !important;
  background: #dfeee1 !important;
  color: #0f3524 !important;
  border-top: 1px solid rgba(27, 67, 50, .12) !important;
  border-right: 1px solid rgba(27, 67, 50, .10) !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background .2s ease !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card:hover {
  background: #c7dec9 !important;
  color: #0f3524 !important;
  border-bottom-color: transparent !important;
}

/* 留곹겕 移대뱶: ??踰덉㎏(占?留곹겕) ???占쎌そ ?占쎈떒 radius */
html[data-theme="theme4"] body #contents .section-posts .np-item:nth-child(4) .np-card {
  border-bottom-left-radius: 18px !important;
  border-top-left-radius: 0 !important;
}

/* 留곹겕 移대뱶: ?占쎌꽢 踰덉㎏(留덌옙?占?留곹겕) ???占쎈Ⅸ占??占쎈떒 radius */
html[data-theme="theme4"] body #contents .section-posts .np-item:nth-child(6) .np-card {
  border-bottom-right-radius: 18px !important;
  border-top-right-radius: 0 !important;
  border-right: 0 !important;
}

/* 留곹겕 移대뱶 h4 */
html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card h4 {
  color: #0f3524 !important;
  font-size: clamp(20px, 0.96vw, 24px) !important;
  font-weight: 480 !important;
  white-space: nowrap !important;
}

/* 留곹겕 移대뱶 ?占쎈Ⅸ占??占쎌궡???占쎌씠占?*/
html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-goto {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(27, 67, 50, .10) !important;
  color: #245c3b !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  transition: background .2s ease !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card:hover .np-goto {
  background: rgba(27, 67, 50, .22) !important;
}

/* ::before ?占쎌떇 ?占쎄굅 (?占?占쏀솕占?rule?占쎌꽌 ?占쎌꽦?? */
html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card::before {
  display: none !important;
}

/* ?占?占??占?占쏀솕占???101px) absolute ?占쏙옙??占쎈떇 ?占쎌쟾 痍⑥냼 ?占?占?*/
@media (min-width: 1101px) {
  html[data-theme="theme4"] body #contents .section-posts .np-link-item {
    display: contents !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
    height: auto !important;
    min-height: 72px !important;
    background: #dfeee1 !important;
    color: #0f3524 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card::before {
    display: none !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-title-link {
    min-width: 0 !important;
  }
}

@media (max-width: 1100px) {
  html[data-theme="theme4"] body #contents .section-posts .np-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto minmax(200px, 1fr) auto !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-panel {
    grid-row: 2 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item {
    display: contents !important;
    position: static !important;
  }
}

/* ?占?占??占쏀삎?占쎈㈃(??40px): ???占쎌씠占?異뺤빟 ?占?占?*/
@media (max-width: 640px) {

  html[data-theme="theme4"] body #contents .section-posts .np-card h4,
  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card h4 {
    font-size: 20px !important;
    white-space: nowrap !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-card {
    padding: 12px 10px !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card {
    padding: 12px 10px !important;
  }
}


/* THEME4 dashboard base cleanup: keep only stable non-layout overrides. */
html[data-theme="theme4"] body #contents .section-worship .ql-card-primary {
  display: none !important;
}

html[data-theme="theme4"] body #contents .section-gallery {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="theme4"] body #contents .section-gallery::before,
html[data-theme="theme4"] body #contents .section-gallery::after {
  display: none !important;
  background: none !important;
}

html[data-theme="theme4"] body #contents .calendar-events-wrap::before {
  content: none !important;
  display: none !important;
}

html[data-theme="theme4"] body #contents .scroll-fade-section {
  opacity: 1 !important;
  transition: none !important;
}

/* THEME4 final worship height and icons */
@media (min-width: 1101px) {
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    grid-template-rows: repeat(4, minmax(97px, auto)) !important;
    min-height: 424px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card {
    min-height: 97px !important;
  }
}

html[data-theme="theme4"] body #contents .section-worship .ql-card::before {
  top: 50% !important;
  left: 26px !important;
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-column::before {
  content: "\270E" !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-sunday::before {
  content: "\26EA" !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-wed::before {
  content: "\2726" !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-dawn::before {
  content: "\2600" !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card h4 {
  top: 50% !important;
  bottom: auto !important;
  left: 84px !important;
  right: 24px !important;
  transform: translateY(-50%) !important;
}

/* THEME4 final worship corner adjustment */
html[data-theme="theme4"] body #contents .section-worship .worship-grid,
html[data-theme="theme4"] body #contents .section-worship .ql-card {
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* THEME4 final tablet layout */
@media (min-width: 800px) and (max-width: 1100px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 34px 28px !important;
    width: 100% !important;
    padding: 48px 28px 56px !important;
    align-items: start !important;
  }

  html[data-theme="theme4"] body #contents .section-news {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery {
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-news .section-title h3::before,
  html[data-theme="theme4"] body #contents .section-posts .cp-label h3,
  html[data-theme="theme4"] body #contents .section-gallery .cp-label h3::after,
  html[data-theme="theme4"] body #contents .calendar-events-wrap::before {
    font-size: clamp(22px, 2.7vw, 26px) !important;
  }

  html[data-theme="theme4"] body #contents .section-news .news-image-wrap,
  html[data-theme="theme4"] body #contents .popupSwiper,
  html[data-theme="theme4"] body #contents .popupSwiper .swiper-wrapper,
  html[data-theme="theme4"] body #contents .popupSwiper .swiper-slide {
    height: clamp(230px, 24vw, 270px) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(132px, 1fr)) !important;
    gap: 20px !important;
    min-height: clamp(300px, 34vw, 360px) !important;
    max-width: none !important;
    width: 100% !important;
    padding: 28px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 132px !important;
    padding: 22px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before {
    left: 22px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 22px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4 {
    left: 72px !important;
    right: 18px !important;
    font-size: clamp(20px, 2.35vw, 24px) !important;
    line-height: 1.2 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-grid {
    min-height: 360px !important;
    grid-template-rows: auto minmax(250px, 1fr) auto !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-wrap {
    margin-top: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-card {
    flex-basis: clamp(150px, 16vw, 190px) !important;
    aspect-ratio: 1 / 0.72 !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap .calendar_inner,
  html[data-theme="theme4"] body #contents .calendar-events-wrap .hc-wall-scroll {
    max-height: 200px !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap .calendar_inner {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap #happy_calendar_container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap #hc-wall-section {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 8px !important;
    overflow: hidden !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap .hc-wall-scroll {
    max-height: none !important;
    padding-bottom: 0 !important;
  }
}

/* THEME4 final responsive worship typography */
html[data-theme="theme4"] body #contents .section-worship .ql-card h4 {
  font-size: clamp(22px, 2.8vw, 26px) !important;
  line-height: 1.18 !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card::before {
  width: clamp(34px, 3.1vw, 46px) !important;
  height: clamp(34px, 3.1vw, 46px) !important;
  font-size: clamp(20px, 1.8vw, 24px) !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card::before {
  width: clamp(32px, 4vw, 42px) !important;
  height: clamp(32px, 4vw, 42px) !important;
  font-size: clamp(22px, 2.45vw, 24px) !important;
}
}

@media (max-width: 768px) {
  html[data-theme="theme4"] body #contents .section-worship .ql-card h4 {
    font-size: clamp(15px, 4.4vw, 21px) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before {
    width: clamp(30px, 8vw, 38px) !important;
    height: clamp(30px, 8vw, 38px) !important;
    font-size: clamp(22px, 4.8vw, 26px) !important;
  }
}

/* THEME4 final worship tablet fitting */
@media (min-width: 769px) and (max-width: 1100px) {

  html[data-theme="theme4"] body #contents .section-worship,
  html[data-theme="theme4"] body #contents .section-worship .worship-inner,
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    height: auto !important;
    max-height: none !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    grid-template-rows: repeat(2, minmax(108px, auto)) !important;
    min-height: 0 !important;
    align-content: start !important;
    padding: clamp(22px, 3vw, 30px) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card {
    min-height: clamp(108px, 13vw, 132px) !important;
    overflow: hidden !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before {
    left: clamp(16px, 2.2vw, 22px) !important;
    width: clamp(32px, 3.7vw, 40px) !important;
    height: clamp(32px, 3.7vw, 40px) !important;
    font-size: clamp(17px, 2.2vw, 22px) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4 {
    left: clamp(58px, 6.8vw, 76px) !important;
    right: 12px !important;
    max-width: calc(100% - clamp(70px, 8vw, 88px)) !important;
    font-size: clamp(22px, 1.95vw, 24px) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}

@media (min-width: 1101px) and (max-width: 1500px) {
  html[data-theme="theme4"] body #contents .section-worship .ql-card h4 {
    left: clamp(68px, 5.4vw, 84px) !important;
    right: 14px !important;
    max-width: calc(100% - clamp(82px, 6.3vw, 102px)) !important;
    font-size: clamp(22px, 2.45vw, 24px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}

/* THEME4 FINAL: second page responsive tuning for 5 sections. */
html[data-theme="theme4"] body #contents .main-content-wrap {
  box-sizing: border-box !important;
}

html[data-theme="theme4"] body #contents .section-news,
html[data-theme="theme4"] body #contents .section-worship,
html[data-theme="theme4"] body #contents .section-posts,
html[data-theme="theme4"] body #contents .calendar-events-wrap,
html[data-theme="theme4"] body #contents .section-gallery {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

html[data-theme="theme4"] body #contents .section-news .section-title h3,
html[data-theme="theme4"] body #contents .section-posts .section-title h3,
html[data-theme="theme4"] body #contents .calendar-events-wrap .section-title h3,
html[data-theme="theme4"] body #contents .section-gallery .section-title h3 {
  font-size: clamp(22px, 1.45vw, 30px) !important;
  line-height: 1.15 !important;
  word-break: keep-all !important;
}

@media (min-width: 1601px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    display: grid !important;
    width: min(100% - 72px, 1920px) !important;
    max-width: 1920px !important;
    margin: 0 auto !important;
    padding: clamp(30px, 2vw, 44px) 0 56px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    gap: clamp(40px, 3.2vw, 70px) clamp(24px, 2vw, 44px) !important;
    align-items: start !important;
  }

  html[data-theme="theme4"] body #contents .section-news {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship {
    grid-column: 3 / span 2 !important;
    grid-row: 1 !important;
    max-width: 430px !important;
    justify-self: center !important;
  }

  html[data-theme="theme4"] body #contents .section-posts {
    grid-column: 5 / span 2 !important;
    grid-row: 1 !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    grid-column: 1 / span 3 !important;
    grid-row: 2 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery {
    grid-column: 4 / span 3 !important;
    grid-row: 2 !important;
  }
}

@media (min-width: 1280px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    display: grid !important;
    width: min(100% - 56px, 1480px) !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 32px 0 52px !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .72fr) minmax(0, 1.05fr) !important;
    grid-template-rows: auto auto !important;
    gap: 46px 28px !important;
    align-items: start !important;
  }

  html[data-theme="theme4"] body #contents .section-news {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship {
    grid-column: 2 !important;
    grid-row: 1 !important;
    max-width: 380px !important;
  }

  html[data-theme="theme4"] body #contents .section-posts {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    display: grid !important;
    width: min(100% - 44px, 1180px) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 30px 0 48px !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 38px 28px !important;
    align-items: start !important;
  }

  html[data-theme="theme4"] body #contents .section-news {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship {
    grid-column: 2 !important;
    grid-row: 1 !important;
    max-width: 420px !important;
    justify-self: center !important;
  }

  html[data-theme="theme4"] body #contents .section-posts {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    display: grid !important;
    width: calc(100% - 36px) !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 28px 0 44px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 34px 24px !important;
    align-items: start !important;
  }

  html[data-theme="theme4"] body #contents .section-news {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship {
    grid-column: 2 !important;
    grid-row: 1 !important;
    max-width: 100% !important;
  }

  html[data-theme="theme4"] body #contents .section-posts {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
}

@media (max-width: 768px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    display: flex !important;
    width: calc(100% - 28px) !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    padding: 24px 0 40px !important;
    flex-direction: column !important;
    gap: 30px !important;
  }

  html[data-theme="theme4"] body #contents .section-news,
  html[data-theme="theme4"] body #contents .section-worship,
  html[data-theme="theme4"] body #contents .section-posts,
  html[data-theme="theme4"] body #contents .calendar-events-wrap,
  html[data-theme="theme4"] body #contents .section-gallery {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 480px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    width: calc(100% - 20px) !important;
    padding-top: 20px !important;
    gap: 26px !important;
  }

  html[data-theme="theme4"] body #contents .section-news .section-title h3,
  html[data-theme="theme4"] body #contents .section-posts .section-title h3,
  html[data-theme="theme4"] body #contents .calendar-events-wrap .section-title h3,
  html[data-theme="theme4"] body #contents .section-gallery .section-title h3 {
    font-size: 20px !important;
  }
}

/* Section internals: keep each component fluid within the responsive grid. */
html[data-theme="theme4"] body #contents .section-news .news-container,
html[data-theme="theme4"] body #contents .section-news .news-image-wrap,
html[data-theme="theme4"] body #contents .section-news .popupSwiper,
html[data-theme="theme4"] body #contents .section-worship .worship-inner,
html[data-theme="theme4"] body #contents .section-worship .worship-grid,
html[data-theme="theme4"] body #contents .section-posts .cp-inner,
html[data-theme="theme4"] body #contents .section-posts .cp-block,
html[data-theme="theme4"] body #contents .section-posts .np-grid,
html[data-theme="theme4"] body #contents .calendar-events-wrap .calendar_inner,
html[data-theme="theme4"] body #contents .calendar-events-wrap #happy_calendar_container,
html[data-theme="theme4"] body #contents .calendar-events-wrap #hc-wall-section,
html[data-theme="theme4"] body #contents .section-gallery .gallery-inner,
html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-wrap,
html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-viewport {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 769px) {

  html[data-theme="theme4"] body #contents .section-news .news-image-wrap,
  html[data-theme="theme4"] body #contents .popupSwiper,
  html[data-theme="theme4"] body #contents .popupSwiper .swiper-wrapper,
  html[data-theme="theme4"] body #contents .popupSwiper .swiper-slide {
    height: clamp(250px, 20vw, 390px) !important;
    min-height: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(64px, 1fr)) !important;
    min-height: clamp(292px, 22vw, 390px) !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-grid {
    min-height: 0 !important;
  }
}

@media (max-width: 768px) {

  html[data-theme="theme4"] body #contents .section-news .news-image-wrap,
  html[data-theme="theme4"] body #contents .popupSwiper,
  html[data-theme="theme4"] body #contents .popupSwiper .swiper-wrapper,
  html[data-theme="theme4"] body #contents .popupSwiper .swiper-slide {
    height: clamp(220px, 58vw, 360px) !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-grid {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap #hc-wall-section {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap .hc-wall-scroll {
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* THEME4 FINAL: four worship color buttons on all viewport sizes. */
html[data-theme="theme4"] body #contents .section-worship {
  width: 100% !important;
  max-width: min(100%, 430px) !important;
  justify-self: center !important;
}

html[data-theme="theme4"] body #contents .section-worship .worship-inner,
html[data-theme="theme4"] body #contents .section-worship .worship-grid {
  width: 100% !important;
  max-width: 100% !important;
}

html[data-theme="theme4"] body #contents .section-worship .worship-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(4, minmax(70px, 1fr)) !important;
  gap: clamp(9px, 1.2vw, 12px) !important;
  padding: clamp(10px, 1.6vw, 18px) !important;
  border: clamp(5px, .7vw, 8px) solid #2d3338 !important;
  border-radius: 0 !important;
  background: #2d3338 !important;
  align-content: stretch !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(68px, 9vw, 86px) !important;
  height: auto !important;
  grid-column: 1 !important;
  grid-row: auto !important;
  padding: 0 clamp(62px, 9vw, 78px) 0 clamp(16px, 3vw, 20px) !important;
  border: 1px solid rgba(0, 0, 0, .24) !important;
  border-radius: 5px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 5px rgba(0, 0, 0, .22) !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  transform: none !important;
  text-decoration: none !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-side::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: clamp(18px, 3vw, 24px) !important;
  left: auto !important;
  width: clamp(34px, 5.2vw, 42px) !important;
  height: clamp(34px, 5.2vw, 42px) !important;
  border-radius: 9px !important;
  background: #7f86ff !important;
  transform: translateY(-50%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-side::after {
  position: absolute !important;
  top: 50% !important;
  right: clamp(26px, 4.1vw, 34px) !important;
  z-index: 2 !important;
  color: rgba(255, 255, 255, .88) !important;
  font-size: clamp(22px, 3.4vw, 26px) !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-column {
  background: #875037 !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-sunday {
  background: #00745f !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-wed {
  background: #a40000 !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-dawn {
  background: #c76600 !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-column::after {
  content: "?? !important;

}

html[data-theme="theme4"] body #contents .section-worship .ql-card-sunday::after {
  content: "?? !important;

}

html[data-theme="theme4"] body #contents .section-worship .ql-card-wed::after {
  content: "?? !important;

}

html[data-theme="theme4"] body #contents .section-worship .ql-card-dawn::after {
  content: "?占? !important;

}

html[data-theme="theme4"] body #contents .section-worship .ql-card-side h4 {
  position: static !important;
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(22px, 4.5vw, 26px) !important;
  font-weight: 550 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  transform: none !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-side .ql-arrow {
  display: none !important;
}

@media (max-width: 768px) {
  html[data-theme="theme4"] body #contents .section-worship {
    max-width: 100% !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    grid-template-rows: repeat(4, minmax(64px, auto)) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card-side h4 {
    font-size: clamp(22px, 6vw, 24px) !important;
  }
}

/* THEME4 FINAL: compact worship/new-post/calendar blocks. */
@media (min-width: 1101px) {
  html[data-theme="theme4"] body #contents {
    --theme4-top-card-height: clamp(330px, 22vw, 395px);
  }

  html[data-theme="theme4"] body #contents .section-worship,
  html[data-theme="theme4"] body #contents .section-posts {
    height: var(--theme4-top-card-height) !important;
    min-height: 0 !important;
    max-height: var(--theme4-top-card-height) !important;
    align-self: start !important;
    overflow: visible !important;
  }

  html[data-theme="theme4"] body #contents .section-news {
    height: var(--theme4-top-card-height) !important;
    min-height: 0 !important;
    max-height: var(--theme4-top-card-height) !important;
    align-self: start !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  html[data-theme="theme4"] body #contents .section-news .section-title {
    flex: 0 0 auto !important;
  }

  html[data-theme="theme4"] body #contents .section-news #newsCenterPanel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html[data-theme="theme4"] body #contents .section-news .news-image-wrap {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html[data-theme="theme4"] body #contents .section-news .popupSwiper,
  html[data-theme="theme4"] body #contents .section-news .popupSwiper .swiper-wrapper,
  html[data-theme="theme4"] body #contents .section-news .popupSwiper .swiper-slide {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html[data-theme="theme4"] body #contents .section-worship {
    max-width: 430px !important;
    justify-self: center !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-inner,
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border: 8px solid #2d3338 !important;
    border-radius: 0 !important;
    background: #2d3338 !important;
    align-content: stretch !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    padding: 0 74px 0 18px !important;
    border: 1px solid rgba(0, 0, 0, .24) !important;
    border-radius: 5px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 5px rgba(0, 0, 0, .22) !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 24px !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 9px !important;
    background: #7f86ff !important;
    transform: translateY(-50%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::after {
    position: absolute !important;
    top: 50% !important;
    right: 34px !important;
    z-index: 2 !important;
    color: rgba(255, 255, 255, .88) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card-column {
    background: #875037 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card-sunday {
    background: #00745f !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card-wed {
    background: #a40000 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card-dawn {
    background: #c76600 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card-column::after {
    content: "?? !important;

  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card-sunday::after {
    content: "?? !important;
 font-size: 20px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card-wed::after {
    content: "?? !important;

  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card-dawn::after {
    content: "?占? !important;

  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4 {
    position: static !important;
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(22px, 2.05vw, 24px) !important;
    font-weight: 500 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-arrow {
    display: none !important;
  }

  html[data-theme="theme4"] body #contents .section-posts {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .cp-inner,
  html[data-theme="theme4"] body #contents .section-posts .cp-block {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    flex-direction: column !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .cp-label {
    flex: 0 0 42px !important;
    height: 42px !important;
    margin: 0 0 10px !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-grid {
    display: grid !important;
    flex: 1 1 auto !important;
    height: calc(var(--theme4-top-card-height) - 52px) !important;
    min-height: 0 !important;
    grid-template-rows: 58px minmax(0, 1fr) 74px !important;
    overflow: hidden !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-card {
    min-height: 58px !important;
    padding: 0 18px !important;
    align-items: center !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-card h4 {
    font-size: clamp(16px, 3.3vw, 18px) !important;
    line-height: 1.1 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-panel {
    min-height: 0 !important;
    height: 100% !important;
    padding: 10px 24px !important;
    overflow: hidden !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-panel a,
  html[data-theme="theme4"] body #contents .section-posts .np-panel li,
  html[data-theme="theme4"] body #contents .section-posts .np-panel p {
    font-size: 88% !important;
    line-height: 1.35 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card {
    min-height: 74px !important;
    padding: 0 18px !important;
  }
}

/* THEME4 FINAL: compact calendar events content. */
html[data-theme="theme4"] body #contents .calendar-events-wrap {
  font-size: 80% !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

html[data-theme="theme4"] body #contents .calendar-events-wrap .section-title {
  margin-bottom: 8px !important;
}

html[data-theme="theme4"] body #contents .calendar-events-wrap .calendar_inner,
html[data-theme="theme4"] body #contents .calendar-events-wrap #happy_calendar_container,
html[data-theme="theme4"] body #contents .calendar-events-wrap #hc-wall-section,
html[data-theme="theme4"] body #contents .calendar-events-wrap .hc-wall-scroll {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

html[data-theme="theme4"] body #contents .calendar-events-wrap #hc-wall-section {
  overflow: hidden !important;
}

html[data-theme="theme4"] body #contents .calendar-events-wrap * {
  line-height: 1.25 !important;
}

/* THEME4 FINAL: quick links below hero, sermon card inside hero bottom-right. */
html[data-theme="theme4"] body #contents .section-hero {
  margin-bottom: clamp(18px, 2vw, 34px) !important;
  overflow: visible !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-inner {
  overflow: visible !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
  display: flex !important;
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: clamp(34px, 4vw, 68px) !important;
  left: 50% !important;
  z-index: 48 !important;
  width: min(920px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  transform: translateX(-50%) !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(12px, 1.6vw, 24px) !important;
  pointer-events: auto !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
  display: flex !important;
  flex: 0 0 auto !important;
  width: clamp(82px, 6vw, 112px) !important;
  height: clamp(82px, 6vw, 112px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  /*border-radius: 999px !important;*/
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 14px 30px rgba(20, 38, 64, .14) !important;
  color: #0f3524 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  text-decoration: none !important;
  backdrop-filter: blur(6px) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle {
  display: flex !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  align-items: center !important;
  justify-content: center !important;
  color: #999 !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle svg {
  display: block !important;
  width: clamp(22px, 1.6vw, 30px) !important;
  height: clamp(22px, 1.6vw, 30px) !important;
  stroke: #0f3524 !important;
  stroke-width: 1.9 !important;
  fill: none !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item span {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: 86px !important;
  margin: 0 !important;
  transform: none !important;
  color: #0f3524 !important;
  font-size: clamp(11px, .82vw, 14px) !important;
  font-weight: 450 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  text-shadow: none !important;
  word-break: keep-all !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
  position: absolute !important;
  top: auto !important;
  right: clamp(22px, 3vw, 56px) !important;
  bottom: clamp(22px, 3vw, 52px) !important;
  left: auto !important;
  z-index: 44 !important;
  display: block !important;
  width: min(340px, 23vw) !important;
  min-width: 240px !important;
  padding: 0 !important;
  pointer-events: none !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 136px !important;
  margin: 0 !important;
  padding: clamp(18px, 1.7vw, 28px) !important;
  overflow: hidden !important;
  border: 2px solid #fff !important;
  border-radius: 24px !important;
  /*  background: url("/image/paster/paster_son_05.png1") center / cover no-repeat !important;*/
  background: url("/image/worship/00_sermon_son-5-1.webp") center/cover no-repeat !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .24) !important;
  color: #fff !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
  pointer-events: auto !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .42) 100%) !important;
  pointer-events: none !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-title {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(24px, 3.8vw, 28px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 5px 16px rgba(0, 0, 0, .46) !important;
}

@media (max-width: 900px) {
  html[data-theme="theme4"] body #contents .section-hero {
    margin-bottom: 24px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
    top: auto !important;
    bottom: 18px !important;
    width: calc(100vw - 28px) !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
    width: 72px !important;
    height: 72px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle {
    margin-bottom: 3px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item span {
    max-width: 64px !important;
    font-size: 10px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
    right: 14px !important;
    bottom: 14px !important;
    width: min(280px, 45vw) !important;
    min-width: 190px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
    min-height: 112px !important;
    border-width: 2px !important;
    border-radius: 18px !important;
    padding: 16px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card::before {
    border-radius: 15px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-title {
    font-size: clamp(24px, 6vw, 28px) !important;
  }
}

/* THEME4 FINAL: enlarge event gallery thumbnails. */
html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-wrap {
  margin-top: 2px !important;
  padding: 0 !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-wrap .section-title {
  margin: 0 0 0px !important;
  padding: 0 !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-viewport {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 0 0 18px !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-track {
  gap: clamp(12px, 1vw, 14px) !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-card {
  flex: 0 0 min(48%, 430px) !important;
  width: min(48%, 430px) !important;
  max-width: 430px !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 14px !important;
  transform: translateY(0) scale(1) !important;
}

html[data-theme="theme4"] body #contents .section-gallery .gallery-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (min-width: 1501px) {
  html[data-theme="theme4"] body #contents .section-gallery .gallery-card {
    flex-basis: min(46%, 500px) !important;
    width: min(46%, 500px) !important;
    max-width: 500px !important;
  }
}

@media (max-width: 1100px) {
  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-wrap {
    padding: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-card {
    flex-basis: min(72vw, 520px) !important;
    width: min(72vw, 520px) !important;
    max-width: 520px !important;
  }
}

@media (max-width: 768px) {
  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-wrap {
    padding: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-card {
    flex-basis: 92% !important;
    width: 92% !important;
    max-width: 92% !important;
  }
}

/* THEME4 final worship max width */
html[data-theme="theme4"] body #contents .section-worship {
  width: 100% !important;
  max-width: 680px !important;
  justify-self: center !important;
}

html[data-theme="theme4"] body #contents .section-worship .worship-inner,
html[data-theme="theme4"] body #contents .section-worship .worship-grid {
  width: 100% !important;
  max-width: 680px !important;
}

@media (min-width: 769px) and (max-width: 1100px) {

  html[data-theme="theme4"] body #contents .section-worship,
  html[data-theme="theme4"] body #contents .section-worship .worship-inner,
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    max-width: 520px !important;
  }
}

/* THEME4 final small-desktop worship width */
@media (min-width: 1101px) and (max-width: 1600px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }

  html[data-theme="theme4"] body #contents .section-news {
    grid-column: 1 / span 4 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship {
    grid-column: 5 / span 4 !important;
    max-width: 520px !important;
  }

  html[data-theme="theme4"] body #contents .section-posts {
    grid-column: 9 / span 4 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-inner,
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    max-width: 520px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(118px, auto)) !important;
    min-height: 0 !important;
    padding: clamp(22px, 2vw, 28px) !important;
    gap: 18px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card {
    min-height: 118px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4 {
    font-size: clamp(20px, 1.25vw, 24px) !important;
  }
}

/* THEME4 final desktop-to-mobile responsive flow */
@media (min-width: 1101px) and (max-width: 1199px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 42px 32px !important;
  }

  html[data-theme="theme4"] body #contents .section-news {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship {
    grid-column: 2 !important;
    grid-row: 1 !important;
    max-width: 620px !important;
  }

  html[data-theme="theme4"] body #contents .section-posts {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-inner,
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    max-width: 620px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(120px, auto)) !important;
    min-height: 0 !important;
    padding: clamp(22px, 2.4vw, 30px) !important;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {

  html[data-theme="theme4"] body #contents .section-news {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
}

@media (max-width: 768px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 34px !important;
    width: 100% !important;
    padding: 34px 18px 48px !important;
  }

  html[data-theme="theme4"] body #contents .section-news,
  html[data-theme="theme4"] body #contents .section-worship,
  html[data-theme="theme4"] body #contents .section-posts,
  html[data-theme="theme4"] body #contents .calendar-events-wrap,
  html[data-theme="theme4"] body #contents .section-gallery {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-inner,
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    max-width: none !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(112px, auto)) !important;
    min-height: 0 !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card {
    min-height: 112px !important;
    padding: 16px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before {
    left: 16px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4 {
    left: 58px !important;
    right: 10px !important;
    max-width: calc(100% - 68px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
}

@media (max-width: 480px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    gap: 12px !important;
    padding: 14px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card {
    min-height: 96px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4 {
    left: 52px !important;
    max-width: calc(100% - 58px) !important;
    font-size: clamp(20px, 1.85vw, 24px) !important;
  }
}

/* THEME4 final responsive card width */
@media (max-width: 1280px) {

  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-posts .np-card,
  html[data-theme="theme4"] body #contents .section-posts .np-panel,
  html[data-theme="theme4"] body #contents .calendar-events-wrap #hc-wall-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-theme="theme4"] body #contents .section-news .news-container,
  html[data-theme="theme4"] body #contents .section-news .news-image-wrap,
  html[data-theme="theme4"] body #contents .popupSwiper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-viewport {
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-card {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* THEME4 final 1100-1500 worship cards */
@media (min-width: 1101px) and (max-width: 1500px) {
  html[data-theme="theme4"] body #contents .section-worship {
    width: 100% !important;
    max-width: 620px !important;
    justify-self: center !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-inner,
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    width: 100% !important;
    max-width: 620px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(124px, auto)) !important;
    gap: 18px !important;
    align-content: start !important;
    padding: clamp(22px, 2.1vw, 30px) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 124px !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* THEME4 final desktop: keep calendar and gallery as a 50/50 row. */
@media (min-width: 1200px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.28fr) minmax(0, 1.28fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 30px !important;
    row-gap: 24px !important;
  }

  html[data-theme="theme4"] body #contents .section-news {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship {
    grid-column: 3 / span 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  html[data-theme="theme4"] body #contents .section-posts {
    grid-column: 5 / span 2 !important;
    grid-row: 1 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-inner,
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-content: stretch !important;
    padding: clamp(14px, 1.4vw, 20px) !important;
    border-width: 0 !important;
    border-radius: 15px !important;
    overflow: hidden !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: clamp(16px, 1.4vw, 22px) clamp(72px, 6vw, 92px) clamp(16px, 1.4vw, 22px) clamp(22px, 2vw, 30px) !important;
    border-radius: 15px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before {
    right: clamp(22px, 2.2vw, 32px) !important;
    width: clamp(46px, 4.2vw, 58px) !important;
    height: clamp(46px, 4.2vw, 58px) !important;
    border-radius: 12px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::after {
    right: clamp(33px, 3vw, 46px) !important;
    font-size: clamp(22px, 2vw, 30px) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4 {
    font-size: clamp(20px, 2.5vw, 26px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    grid-column: 1 / span 3 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    background: #e8f2e6 !important;
    overflow: hidden !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery {
    grid-column: 4 / span 3 !important;
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap,
  html[data-theme="theme4"] body #contents .section-gallery {
    margin-top: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0px !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-inner,
  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-viewport {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    gap: clamp(20px, 2vw, 30px) !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-card {
    flex: 0 0 clamp(180px, 18vw, 270px) !important;
    width: clamp(180px, 18vw, 270px) !important;
    max-width: none !important;
    min-width: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-wrap .section-title {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-wrap .section-title h3,
  html[data-theme="theme4"] body #contents .calendar-events-wrap .section-title h3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }
}

/* ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?   THEME4: main-content-wrap max-width ?占쎌젣 ??醫뚯슦 10px 留덉쭊 ?占쏙옙?
   (??洹쒖튃???占쎌씪 占?留덌옙?留됱뿉 ?占쎌튂??紐⑤뱺 ?占쎌쟾 洹쒖튃??override)
   ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
html[data-theme="theme4"] body #contents .main-content-wrap {
  width: calc(100% - 40px) !important;
  max-width: none !important;
  margin-top: 70px !important;
  margin-left: 20px !important;
  margin-right: 20px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* calendar-events-wrap ??xe-widget-wrapper ?占쎈뒛???占쎈갚 ?占쎄굅
   ???占쎌젽 愿€由ъ옄 ?占쎌젙??怨좎젙 height媛€ 肄섑뀗痢좊낫???????占쎄린??占?怨듦컙??李⑤떒 */

html[data-theme="theme4"] body #contents .calendar-events-wrap .calendar_inner {
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: transparent !important;
}

html[data-theme="theme4"] body #contents .calendar-events-wrap .xe-widget-wrapper {
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background-color: transparent !important;
}


html[data-theme="theme4"] body #contents .calendar-events-wrap .calendar_inner>* {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

html[data-theme="theme4"] body #contents .calendar-events-wrap .hc-wall-arrow {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(42, 58, 72, 0.18) !important;
  box-shadow: 0 6px 18px rgba(18, 28, 38, 0.16) !important;
  color: rgba(38, 55, 70, 0.78) !important;
}

html[data-theme="theme4"] body #contents .calendar-events-wrap .hc-wall-arrow:hover {
  background: #ffffff !important;
  color: #1f3448 !important;
}

@media (max-width: 1100px) {
  html[data-theme="theme4"] body #contents .section-gallery {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    order: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    order: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 706px) {
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, minmax(104px, auto)) !important;
    justify-items: stretch !important;
    padding: 16px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
}

@media (min-width: 1101px) {

  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    align-self: stretch !important;
    height: 100% !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery {
    align-self: start !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-inner,
  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-wrap {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-inner {
    height: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-wrap {
    flex: 0 0 auto !important;
    height: auto !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-viewport {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: hidden !important;
    padding-bottom: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-pager {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-track {
    height: 220px !important;
    max-height: 220px !important;
    min-height: 220px !important;
    align-items: stretch !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-card {
    height: 100% !important;
    aspect-ratio: auto !important;
  }
}

@media (max-width: 780px) {

  html[data-theme="theme4"] body #contents .section-worship,
  html[data-theme="theme4"] body #contents .section-worship .worship-inner,
  html[data-theme="theme4"] body #contents .section-worship .worship-grid,
  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html[data-theme="theme4"] body #contents .section-worship {
    justify-self: stretch !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, minmax(104px, auto)) !important;
    gap: 12px !important;
    padding: 14px !important;
    border-width: 0 !important;
    border-radius: 15px !important;
    justify-items: stretch !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
    justify-self: stretch !important;
    min-height: 104px !important;
    padding: 18px 74px 18px 22px !important;
    border-radius: 15px !important;
    align-items: center !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::before {
    right: 22px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::after,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::after {
    right: 33px !important;
    font-size: 23px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side h4 {
    font-size: clamp(20px, 2.5vw, 26px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }
}

/* THEME4 final worship card fit by viewport width. */
html[data-theme="theme4"] body #contents .section-worship .ql-card,
html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
  will-change: transform, box-shadow, filter !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card:hover,
html[data-theme="theme4"] body #contents .section-worship .ql-card:focus-visible,
html[data-theme="theme4"] body #contents .section-worship .ql-card-side:hover,
html[data-theme="theme4"] body #contents .section-worship .ql-card-side:focus-visible {
  z-index: 2 !important;
  transform: translateY(-3px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 28px rgba(0, 0, 0, .28) !important;
  filter: brightness(1.06) saturate(1.08) !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card:hover::before,
html[data-theme="theme4"] body #contents .section-worship .ql-card:focus-visible::before,
html[data-theme="theme4"] body #contents .section-worship .ql-card-side:hover::before,
html[data-theme="theme4"] body #contents .section-worship .ql-card-side:focus-visible::before {
  background: #8d92ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 18px rgba(0, 0, 0, .18) !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card h4,
html[data-theme="theme4"] body #contents .section-worship .ql-card-side h4 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

@media (min-width: 1101px) and (max-width: 1199px) {
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 15px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
    padding: 14px 58px 14px 16px !important;
    border-radius: 15px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::before {
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::after,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::after {
    right: 25px !important;
    font-size: 22px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side h4 {
    font-size: clamp(22px, 2.5vw, 26px) !important;
    line-height: 1.12 !important;
  }
}

@media (min-width: 781px) and (max-width: 1100px) {
  html[data-theme="theme4"] body #contents {
    --theme4-tablet-worship-height: clamp(430px, 42vw, 430px);
    --theme4-tablet-news-title-height: 54px;
  }

  html[data-theme="theme4"] body #contents .section-news {
    display: flex !important;
    flex-direction: column !important;
    min-height: var(--theme4-tablet-worship-height) !important;
  }

  html[data-theme="theme4"] body #contents .section-news .section-title {
    flex: 0 0 var(--theme4-tablet-news-title-height) !important;
    min-height: var(--theme4-tablet-news-title-height) !important;
    margin-bottom: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-news .news-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-news .news-image-wrap,
  html[data-theme="theme4"] body #contents .section-news .popupSwiper,
  html[data-theme="theme4"] body #contents .section-news .popupSwiper .swiper-wrapper,
  html[data-theme="theme4"] body #contents .section-news .popupSwiper .swiper-slide {
    height: calc(var(--theme4-tablet-worship-height) - var(--theme4-tablet-news-title-height)) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html[data-theme="theme4"] body #contents .section-worship,
  html[data-theme="theme4"] body #contents .section-worship .worship-inner,
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    min-height: var(--theme4-tablet-worship-height) !important;
    height: var(--theme4-tablet-worship-height) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
    min-height: 0 !important;
    height: 100% !important;
    border-radius: 15px !important;
    overflow: hidden !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side h4 {
    font-size: clamp(20px, 2.5vw, 25px) !important;
    line-height: 1.12 !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    gap: 14px !important;
    padding: 14px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
    padding: 14px 56px 14px 16px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::before {
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::after,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::after {
    right: 25px !important;
    font-size: 19px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side h4 {
    font-size: clamp(22px, 2.5vw, 26px) !important;
    line-height: 1.1 !important;
  }
}

@media (min-width: 1400px) and (max-width: 1599px) {

  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
    padding: 16px 66px 16px 20px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::before {
    right: 18px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::after,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::after {
    right: 29px !important;
    font-size: 22px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side h4 {
    font-size: clamp(22px, 2.6vw, 26px) !important;
    line-height: 1.08 !important;
  }
}

@media (min-width: 1600px) {

  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
    padding: 18px 78px 18px 24px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::before {
    right: 22px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::after,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::after {
    right: 35px !important;
    font-size: 26px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side h4 {
    font-size: clamp(22px, 2.72vw, 26px) !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 780px) {

  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
    padding: 18px 78px 18px 24px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::before {
    top: 50% !important;
    right: 24px !important;
    left: auto !important;
    width: 46px !important;
    height: 46px !important;
    transform: translateY(-50%) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::after,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::after {
    top: 50% !important;
    right: 35px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card h4,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side h4 {
    max-width: calc(100% - 6px) !important;
    padding-left: 0 !important;
    overflow-wrap: normal !important;
  }
}

/* THEME4 final hero quicklinks and sermon responsive placement. */
html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
  left: clamp(24px, 4vw, 72px) !important;
  right: auto !important;
  transform: none !important;
  justify-content: flex-start !important;
  justify-items: start !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
  width: min(360px, 25vw) !important;
  min-width: 260px !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
  aspect-ratio: auto !important;
  height: clamp(190px, 15.8vw, 268px) !important;
  min-height: 190px !important;
}

@media (min-width: 901px) and (max-width: 1180px) {
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
    bottom: 34px !important;
    width: min(620px, calc(100vw - 320px)) !important;
    gap: 10px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
    width: 74px !important;
    height: 74px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
    right: 24px !important;
    bottom: 34px !important;
    width: min(320px, 32vw) !important;
    min-width: 240px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
    height: clamp(176px, 19vw, 230px) !important;
    min-height: 176px !important;
  }
}

@media (max-width: 900px) {
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
    display: flex !important;
    left: 18px !important;
    right: auto !important;
    bottom: 22px !important;
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    transform: none !important;
    justify-content: start !important;
    justify-items: start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
    width: 72px !important;
    height: 72px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
    left: 18px !important;
    right: auto !important;
    bottom: 22px !important;
    width: min(320px, calc(100vw - 36px)) !important;
    min-width: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
    height: 178px !important;
    min-height: 178px !important;
  }
}

@media (max-width: 950px) {
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
    display: grid !important;
    grid-template-columns: repeat(3, 72px) !important;
    grid-template-rows: repeat(2, 72px) !important;
    left: 18px !important;
    right: auto !important;
    bottom: 22px !important;
    width: auto !important;
    max-width: calc(100vw - 36px) !important;
    gap: 10px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
    left: auto !important;
    right: 22px !important;
    bottom: 22px !important;
    width: min(320px, calc(100vw - 36px)) !important;
    min-width: 0 !important;
  }
}

@media (max-width: 520px) {
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
    width: 64px !important;
    height: 64px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
    height: 158px !important;
    min-height: 158px !important;
  }
}

@media (max-width: 900px) {
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 64px)) !important;
    grid-template-rows: repeat(2, 64px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: 22px !important;
    width: auto !important;
    transform: translateX(-50%) !important;
    gap: 8px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
    width: 64px !important;
    height: 64px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
    left: 50% !important;
    right: auto !important;
    bottom: 200px !important;
    width: min(292px, calc(100vw - 36px)) !important;
    transform: translateX(-50%) !important;
  }
}

/* THEME4 final hero frame and image movement. */
html[data-theme="theme4"] body #contents .section-hero {
  width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  border-radius: 15px !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-inner {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 15px !important;
  overflow: hidden !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-inner>.hero-image-layer {
  transition: opacity 2.1s ease-in-out, transform 85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Theme4: keep hero quick links and sermon card inside short browser viewports. */
@media (min-width: 901px) {
  html[data-theme="theme4"] body #contents .section-hero {
    height: 600px !important;
    min-height: 600px !important;
    overflow: hidden !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-inner {
    overflow: hidden !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
    bottom: max(clamp(12px, 2.4dvh, 34px), calc(754px - 100dvh)) !important;
    gap: clamp(8px, 1.2vw, 18px) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
    width: clamp(58px, 12dvh, 104px) !important;
    height: clamp(58px, 12dvh, 104px) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle {
    margin-bottom: clamp(2px, .8dvh, 6px) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle svg {
    width: clamp(18px, 3.6dvh, 28px) !important;
    height: clamp(18px, 3.6dvh, 28px) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item span {
    font-size: clamp(9px, 1.6dvh, 13px) !important;
    line-height: 1.1 !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
    right: clamp(14px, 2.6vw, 44px) !important;
    bottom: max(clamp(12px, 2.4dvh, 34px), calc(754px - 100dvh)) !important;
    width: min(320px, 36dvh, 23vw) !important;
    min-width: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
    min-height: 0 !important;
    max-height: calc(100dvh - 220px) !important;
    padding: clamp(12px, 2.4dvh, 24px) !important;
    border-radius: clamp(14px, 2.8dvh, 24px) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-title {
    font-size: clamp(24px, 6dvh, 28px) !important;
  }
}

/* THEME4 final slim worship spacing. */
html[data-theme="theme4"] body #contents .section-worship .worship-inner {
  padding: 0 !important;
  background: transparent !important;
}

html[data-theme="theme4"] body #contents .section-worship .worship-grid {
  gap: 8px !important;
  padding: 8px !important;
  background: transparent !important;
}

html[data-theme="theme4"] body #contents .section-worship {
  background: transparent !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card,
html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
  margin: 0 !important;
  padding: 10px 54px 10px 12px !important;
  border: 0.02px solid #3f444a !important;
  box-shadow: 0 4px 9px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card::before,
html[data-theme="theme4"] body #contents .section-worship .ql-card-side::before {
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card::after,
html[data-theme="theme4"] body #contents .section-worship .ql-card-side::after {
  right: 21px !important;
  font-size: 19px !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-wed {
  background: #2f7fa8 !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-dawn {
  background: #a65100 !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-column {
  background: #6f3d2a !important;
}

@media (min-width: 1400px) {

  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
    padding: 12px 60px 12px 16px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::before {
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::after,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::after {
    right: 24px !important;
    font-size: 21px !important;
  }
}

@media (max-width: 780px) {
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    gap: 8px !important;
    padding: 8px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
    padding: 12px 62px 12px 16px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::before,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::before {
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card::after,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side::after {
    right: 26px !important;
    font-size: 20px !important;
  }
}

/* Theme4: prevent ultra-tall portrait displays from stretching the two grid rows
   into separate viewport-height pages. */
@media (min-width: 1200px) and (orientation: portrait) and (min-height: 1800px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    min-height: auto !important;
    align-content: start !important;
    grid-auto-rows: auto !important;
    row-gap: clamp(36px, 2.4vw, 64px) !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap,
  html[data-theme="theme4"] body #contents .section-gallery {
    align-self: start !important;
    height: auto !important;
    margin-top: 0 !important;
  }
}

/* Theme4: 780-1200px tablet layout. Match worship height to news and remove
   the visible worship frame in this two-column range. */
@media (min-width: 780px) and (max-width: 1200px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: stretch !important;
    gap: clamp(28px, 3.2vw, 42px) clamp(24px, 3vw, 36px) !important;
  }

  html[data-theme="theme4"] body #contents .section-news {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  html[data-theme="theme4"] body #contents .section-worship {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html[data-theme="theme4"] body #contents .section-news .section-title {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-news .news-container {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-news .news-image-wrap {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html[data-theme="theme4"] body #contents .section-news .popupSwiper,
  html[data-theme="theme4"] body #contents .section-news .popupSwiper .swiper-wrapper,
  html[data-theme="theme4"] body #contents .section-news .popupSwiper .swiper-slide {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-inner,
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    border-color: transparent !important;
    border-width: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(10px, 1.5vw, 14px) !important;
    padding: 0 !important;
    align-content: stretch !important;
    overflow: visible !important;
    background: transparent !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
    min-height: 0 !important;
    height: 100% !important;
    border-radius: 15px !important;
  }

  html[data-theme="theme4"] body #contents .section-posts {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
}

/* Theme4: keep gallery thumbnails aligned with the event calendar panel on
   tablet widths. */
@media (min-width: 780px) and (max-width: 1100px) {
  html[data-theme="theme4"] body #contents {
    --theme4-tablet-lower-panel-height: clamp(260px, 28vw, 260px);
  }

  html[data-theme="theme4"] body #contents .section-gallery,
  html[data-theme="theme4"] body #contents .calendar-events-wrap {
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-viewport {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: hidden !important;
    padding-bottom: 12px !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-slider-track {
    height: var(--theme4-tablet-lower-panel-height) !important;
    min-height: var(--theme4-tablet-lower-panel-height) !important;
    max-height: var(--theme4-tablet-lower-panel-height) !important;
    align-items: stretch !important;
  }

  html[data-theme="theme4"] body #contents .section-gallery .gallery-card {
    height: var(--theme4-tablet-lower-panel-height) !important;
    min-height: var(--theme4-tablet-lower-panel-height) !important;
    max-height: var(--theme4-tablet-lower-panel-height) !important;
    aspect-ratio: auto !important;
  }

  html[data-theme="theme4"] body #contents .calendar-events-wrap .calendar_inner,
  html[data-theme="theme4"] body #contents .calendar-events-wrap #happy_calendar_container,
  html[data-theme="theme4"] body #contents .calendar-events-wrap #hc-wall-section,
  html[data-theme="theme4"] body #contents .calendar-events-wrap .hc-wall-scroll {
    height: var(--theme4-tablet-lower-panel-height) !important;
    min-height: var(--theme4-tablet-lower-panel-height) !important;
    max-height: var(--theme4-tablet-lower-panel-height) !important;
    overflow: hidden !important;
  }
}

/* Theme4: final new-post list and shortcut button styling. */
html[data-theme="theme4"] body #contents .section-posts .np-widget,
html[data-theme="theme4"] body #contents .section-posts .np-widget ul,
html[data-theme="theme4"] body #contents .section-posts .np-widget li,
html[data-theme="theme4"] body #contents .section-posts .np-widget p,
html[data-theme="theme4"] body #contents .section-posts .np-widget span,
html[data-theme="theme4"] body #contents .section-posts .np-widget a {
  color: #000 !important;
  font-size: clamp(18px, 1.35vw, 20px) !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-widget li {
  margin-bottom: 8px !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-grid {
  padding-bottom: 10px !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item {
  display: block !important;
  position: static !important;
  justify-self: center !important;
  width: min(82%, 260px) !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card {
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 11px 16px !important;
  border: 1px solid rgba(15, 53, 36, .22) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #f7fbf5 0%, #dfeee1 100%) !important;
  color: #0f3524 !important;
  box-shadow: 0 8px 20px rgba(15, 53, 36, .12) !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card:hover {
  background: linear-gradient(135deg, #dfeee1 0%, #c7dec9 100%) !important;
  transform: translateY(-2px) !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-title-link {
  width: auto !important;
  min-width: 0 !important;
  text-align: center !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card h4 {
  color: #000 !important;
  font-size: clamp(20, 1.08vw, 24px) !important;
  font-weight: 480 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-goto {
  display: none !important;
}

/* Theme4: keep worship cards in 2 columns / 2 rows from 779px upward. */
@media (min-width: 779px) {
  html[data-theme="theme4"] body #contents .section-worship .worship-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-theme="theme4"] body #contents .section-worship .ql-card,
  html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}


@media ((min-width: 1200px) and (max-width: 1640px)) {
  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card h4 {
    font-size: clamp(20px, 1.08vw, 24px) !important;
  }
}

@media ((min-width: 200px) and (max-width: 480px)) {
  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card h4 {
    font-size: clamp(20px, 2.08vw, 22px) !important;
  }
}

/* Theme4: final worship card title sizing. */
html[data-theme="theme4"] body #contents .section-worship .ql-card h4,
html[data-theme="theme4"] body #contents .section-worship .ql-card-side h4 {
  font-weight: 600 !important;
}

/* Theme4: subtle diagonal gradient overlay for calendar post cards. */
html[data-theme="theme4"] body #contents .section-posts .np-card {
  position: relative !important;
  overflow: hidden !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-card::after {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.12) 34%,
      rgba(0, 0, 0, 0.10) 68%,
      rgba(0, 0, 0, 0.20) 100%);
}

html[data-theme="theme4"] body #contents .section-posts .np-card h4,
html[data-theme="theme4"] body #contents .section-posts .np-title-link,
html[data-theme="theme4"] body #contents .section-posts .np-actions,
html[data-theme="theme4"] body #contents .section-posts .np-goto,
html[data-theme="theme4"] body #contents .section-posts .np-toggle {
  position: relative;
  z-index: 1;
}

/* Theme4: lock new-post layout so shortcut links do not collapse or overlap tabs. */
html[data-theme="theme4"] body #contents .section-posts .np-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto minmax(160px, auto) auto !important;
  gap: 0 !important;
  align-items: stretch !important;
  min-height: 0 !important;
  padding: 0 0 28px !important;
  overflow: visible !important;
  border-radius: 18px !important;
  background: #f4fbf5 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item {
  transform: none !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item:not(.np-link-item),
html[data-theme="theme4"] body #contents .section-posts .np-link-item {
  display: contents !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item:not(.np-link-item)>.np-card {
  grid-row: 1 !important;
  min-height: 22px !important;
  justify-content: center !important;
  padding: 14px 18px !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #245c3b 0%, #2f7a4b 100%) !important;
  color: #fff !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item:first-child>.np-card {
  border-top-left-radius: 18px !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item:nth-child(3)>.np-card {
  border-top-right-radius: 18px !important;
  border-right: 0 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-item.is-open>.np-card {
  background: linear-gradient(135deg, #0f3524 0%, #245c3b 100%) !important;
  color: #e8c454 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-panel {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-height: 160px !important;
  padding: 20px 10px 10px !important;
  background: #f4fbf5 !important;
  border-radius: 0 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-panel .np-widget,
html[data-theme="theme4"] body #contents .section-posts .np-panel .np-widget ul,
html[data-theme="theme4"] body #contents .section-posts .np-panel .np-widget li,
html[data-theme="theme4"] body #contents .section-posts .np-panel .np-widget p,
html[data-theme="theme4"] body #contents .section-posts .np-panel .np-widget span,
html[data-theme="theme4"] body #contents .section-posts .np-panel .np-widget a {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-panel .np-widget li {
  margin-bottom: 3px !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item>.np-card {
  grid-row: 3 !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(100% - 24px) !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 8px 16px !important;
  border: 1px solid rgba(15, 53, 36, .24) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #f7fbf8 0%, #dfeee1 100%) !important;
  color: #000 !important;
  box-shadow:
    0 14px 30px rgba(15, 53, 36, .18),
    0 2px 6px rgba(15, 53, 36, .10),
    inset 0 1px 0 rgba(255, 255, 255, .86) !important;
  transform: none !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item:nth-child(4)>.np-card,
html[data-theme="theme4"] body #contents .section-posts .np-link-item:nth-child(5)>.np-card,
html[data-theme="theme4"] body #contents .section-posts .np-link-item:nth-child(6)>.np-card {
  margin: 0 auto !important;
  max-width: min(72%, 320px) !important;
  border-radius: 999px !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item>.np-card:hover {
  background: linear-gradient(180deg, #ffffff 0%, #cfe5d2 100%) !important;
  border-color: rgba(15, 53, 36, .34) !important;
  box-shadow:
    0 16px 34px rgba(15, 53, 36, .22),
    0 3px 8px rgba(15, 53, 36, .12),
    inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  transform: none !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-link-item>.np-card::before {
  display: none !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-choir-card {
  position: relative !important;
  z-index: 120 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-choir-card.is-open {
  z-index: 300 !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-choir-popup {
  position: absolute !important;
  z-index: 301 !important;
  left: 50% !important;
  top: 78% !important;
  width: min(220px, calc(100% + 24px)) !important;
  display: grid !important;
  gap: 6px !important;
  padding: 8px !important;
  border: 1px solid rgba(15, 53, 36, .18) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(-50%, -70%) scale(.98) !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  pointer-events: none !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-choir-card.is-open .np-choir-popup {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, -70%) scale(1) !important;
  pointer-events: auto !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-choir-popup a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 15px 16px !important;
  border-radius: 7px !important;
  background: #f4faf6 !important;
  color: #0f3524 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html[data-theme="theme4"] body #contents .section-posts .np-choir-popup a:hover,
html[data-theme="theme4"] body #contents .section-posts .np-choir-popup a:focus-visible {
  background: #dfeee1 !important;
  color: #000 !important;
}

@media (max-width: 640px) {
  html[data-theme="theme4"] body #contents .section-posts .np-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, 72px) minmax(72px, auto) repeat(3, 42px) !important;
    row-gap: 8px !important;
    padding: 0 0 18px !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-item:not(.np-link-item)>.np-card {
    grid-row: auto !important;
    min-height: 72px !important;
    height: 72px !important;
    max-height: 72px !important;
    border-radius: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-panel {
    grid-row: 4 !important;
    min-height: 72px !important;
    padding: 10px 18px 4px !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item:nth-child(4)>.np-card {
    grid-row: 5 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item:nth-child(5)>.np-card {
    grid-row: 6 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item:nth-child(6)>.np-card {
    grid-row: 7 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item>.np-card {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 auto !important;
    border-radius: 999px !important;
  }
}

/* Theme4: stronger diagonal gradient on worship side cards. */
html[data-theme="theme4"] body #contents .section-worship .ql-card-side {
  background-image:
    linear-gradient(270deg,
      rgba(255, 255, 255, 0.30) 30%,
      rgba(255, 255, 255, 0.14) 44%,
      rgba(0, 0, 0, 0.12) 68%,
      rgba(0, 0, 0, 0.24) 100%) !important;
}

/* Theme4: worship card popup menu. */
html[data-theme="theme4"] body #contents .section-worship .ql-card-menu {
  overflow: hidden !important;
  z-index: 5 !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-menu.is-open {
  z-index: 40 !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-menu .ql-card-dropdown {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  width: min(72%, 230px) !important;
  display: grid !important;
  gap: 6px !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, .46) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .5) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .24) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(-50%, -50%) scale(.96) !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  pointer-events: none !important;
  backdrop-filter: blur(8px) !important;
  z-index: 100;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-menu.is-open .ql-card-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, -50%) scale(1) !important;
  pointer-events: auto !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-menu .ql-card-dropdown a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 15px 17px !important;
  border-radius: 6px !important;
  background: rgba(244, 250, 246, .86) !important;
  color: #0f3524 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html[data-theme="theme4"] body #contents .section-worship .ql-card-menu .ql-card-dropdown a:hover,
html[data-theme="theme4"] body #contents .section-worship .ql-card-menu .ql-card-dropdown a:focus-visible {
  background: #dfeee1 !important;
  color: #0b291a !important;
}

/* Theme4: protect the second row when the viewport height is short.
   The main-grid sections must keep their grid slots instead of entering with
   vertical scroll transforms that can visually cover the next row. */
@media (min-width: 1025px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    row-gap: max(56px, clamp(40px, 3.2vw, 70px)) !important;
    align-items: start !important;
  }

  html[data-theme="theme4"] body #contents .main-content-wrap>.section-news,
  html[data-theme="theme4"] body #contents .main-content-wrap>.section-worship,
  html[data-theme="theme4"] body #contents .main-content-wrap>.section-posts,
  html[data-theme="theme4"] body #contents .main-content-wrap>.section-gallery,
  html[data-theme="theme4"] body #contents .main-content-wrap>.calendar-events-wrap {
    position: relative !important;
    transform: none !important;
  }

  html[data-theme="theme4"] body #contents .main-content-wrap>.section-news,
  html[data-theme="theme4"] body #contents .main-content-wrap>.section-worship,
  html[data-theme="theme4"] body #contents .main-content-wrap>.section-posts {
    z-index: 1 !important;
  }

  html[data-theme="theme4"] body #contents .main-content-wrap>.section-gallery,
  html[data-theme="theme4"] body #contents .main-content-wrap>.calendar-events-wrap {
    z-index: 2 !important;
    isolation: isolate !important;
  }
}


/*
ql-card ql-card-side ql-card-column
ql-card ql-card-side ql-card-sunday
ql-card ql-card-side ql-card-wed
ql-card ql-card-side ql-card-dawn
*/


/* ?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺
   THEME4 ??HERO 酉고룷??梨꾬옙? + ?占쎈쭅??& ?占쎄탳移대뱶 Y position 怨좎쑀?占쎌꽦
   JS(layout4_body.html)媛€ ?占쎈쾭?占쎈줈??諛쒖깮 ??bottom ???占쎌떆占?蹂댁젙
   ?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺 */

/* ?占?占?CSS 蹂€?? ?占쎈뜑 ?占쎌껜 ?占쎌씠 쨌 ?占쎌뼱占?留덉쭊 (JS媛€ ?占쎌륫?占쎈줈 媛깆떊) ?占?占?*/
html[data-theme="theme4"] {
  --t4-header-h: 134px;
  /* header-top(44) + header(90) */
  --t4-hero-mt: 22px;
  /* section-hero margin-top */
}

/* ?占?占??占쎌뼱占??占쎌씠: 酉고룷???占쎌껜 梨꾬옙? (理쒖냼 400px 쨌 理쒙옙? 960px)
   min ??400px 占???占쏙옙 ??? 釉뚮씪?占쏙옙??占쎌꽌???占쎈쾭?占쎈줈??理쒖냼??
   JS 媛€ bottom 媛믪쓣 ?占쎌떆占?蹂댁젙?占쏙옙?占?CSS min ?占??占쎌쟾留앸쭔 ?占쎈떦.   */
html[data-theme="theme4"] body #contents .section-hero {
  height: clamp(400px,
      calc(100dvh - var(--t4-header-h) - var(--t4-hero-mt)),
      960px) !important;
}

/* ?占?占??占쎌뒪?占쏀깙(901px+): ?占쎈쭅???占쎌텧 ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?   ??hero-guide-icons  : ?占쎌뼱占??占쎈떒 醫뚯륫, dvh 湲곕컲 bottom
   ??.w-icon-item      : ?占쎈챸 而⑦뀒?占쎈꼫 (circle??鍮꾩＜???占쎈떦)
   ??.w-icon-item .circle : radius ?占쎄컖???占쎌씠占?諛뺤뒪 (dvh ?占쎈룞)
   ??SVG ?占쎌씠占??占쎌떆, ?占쎌뒪???占쎈꺼 ?占쎈옒 諛곗튂                         */
@media (min-width: 901px) {

  /* 1) ?占쎌씠占?洹몃９ ?占쎌튂 */
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
    display: flex !important;
    position: absolute !important;
    left: clamp(20px, 3.2vw, 60px) !important;
    right: auto !important;
    top: auto !important;
    bottom: max(8px, min(40px, 3.5dvh)) !important;
    z-index: 12 !important;
    gap: max(8px, min(18px, 1.8dvh)) !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: bottom 0.15s ease !important;
  }

  /* 2) 媛쒕퀎 ?占쎌씠占??占쏀띁 ??鍮꾩＜???占쎈뒗 ?占쎈챸 而⑦뀒?占쎈꼫 */
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: max(4px, min(6px, 1dvh)) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    text-decoration: none !important;
    transition: transform 0.2s ease !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:hover {
    transform: none !important;
    background: transparent !important;
  }

  /* 3) .circle ??radius ?占쎄컖???占쎌씠占?諛뺤뒪 (dvh ?占쎈룞 ?占쎄린) */
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* 酉고룷???占쎌씠 10% 湲곤옙?, 理쒖냼 56px 쨌 理쒙옙? 96px */
    width: max(56px, min(96px, 10dvh)) !important;
    height: max(56px, min(96px, 10dvh)) !important;
    border-radius: max(12px, min(20px, 2dvh)) !important;
    /* ?占쎈룞 radius */
    border: 1.5px solid rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(8px) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    color: #999 !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:hover .circle {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24) !important;
    transform: none !important;
    /* hover transform?占?w-icon-item?占쎌꽌 泥섎━ */
  }

  /* 4) SVG ?占쎌씠占??占쎌떆 */
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle svg {
    display: block !important;
    width: max(22px, min(36px, 4dvh)) !important;
    height: max(22px, min(36px, 4dvh)) !important;
    stroke: #0f3524 !important;
    stroke-width: 1.8 !important;
    fill: none !important;
  }

  /* 5) ?占쎌뒪???占쎈꺼 ??circle ?占쎈옒 */
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item span {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: max(56px, min(96px, 10dvh)) !important;
    margin: 0 !important;
    transform: none !important;
    color: #444 !important;
    font-size: max(10px, min(13px, 1.6dvh)) !important;
    font-weight: 450 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-shadow: none !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
  }

  /* 6) ?占쎄탳移대뱶 dvh 湲곕컲 */
  html[data-theme="theme4"] body #contents .section-hero .hero-renewal-actions {
    bottom: max(8px, min(40px, 3.5dvh)) !important;
    transition: bottom 0.15s ease !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
    height: max(110px, min(292px, 25dvh)) !important;
    min-height: 0 !important;
    transition: height 0.15s ease !important;
  }
}

/* ?占?占?洹밸떒?占쎌쑝占???? 釉뚮씪?占쏙옙?(??00px height): ?占쎈꺼 ?占쏙옙? + ?占쎌씠占?異뺤냼 ?占?占?*/
@media (min-width: 901px) and (max-height: 500px) {
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item span {
    display: none !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
    padding: 18px 20px 12px !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-title {
    font-size: clamp(24px, 4.5vw, 28px) !important;
    line-height: 1.1 !important;
  }
}


html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
  --ic1-bg: rgba(219, 234, 254, 0.92);
  /* ?占쎈뒛?占쎈옉 */
  --ic1-border: rgba(96, 165, 250, 0.70);
  --ic1-stroke: #1d4ed8;
  --ic1-glow: rgba(37, 99, 235, 0.30);

  --ic2-bg: rgba(237, 233, 254, 0.92);
  /* 蹂대씪 */
  --ic2-border: rgba(167, 139, 250, 0.70);
  --ic2-stroke: #7c3aed;
  --ic2-glow: rgba(109, 40, 217, 0.28);

  --ic3-bg: rgba(220, 252, 231, 0.92);
  /* ?占쎈찓?占쎈뱶 珥덈줉 */
  --ic3-border: rgba(74, 222, 128, 0.70);
  --ic3-stroke: #16a34a;
  --ic3-glow: rgba(22, 163, 74, 0.28);

  --ic4-bg: rgba(254, 226, 226, 0.92);
  /* 濡쒖쫰 鍮④컯 */
  --ic4-border: rgba(252, 165, 165, 0.70);
  --ic4-stroke: #dc2626;
  --ic4-glow: rgba(220, 38, 38, 0.28);

  --ic5-bg: rgba(254, 243, 199, 0.92);
  /* ?占쎈쾭 二쇳솴 */
  --ic5-border: rgba(251, 191, 36, 0.70);
  --ic5-stroke: #b45309;
  --ic5-glow: rgba(180, 83, 9, 0.28);

  --ic6-bg: rgba(207, 250, 254, 0.92);
  /* ?占쎌븞 占?占쏙옙 */
  --ic6-border: rgba(34, 211, 238, 0.70);
  --ic6-stroke: #0e7490;
  --ic6-glow: rgba(14, 116, 144, 0.28);
}

/* ?占?占?1: ?占쎈같 ?占쎈궡 ???占쎈뒛?占쎈옉 ?占?占?*/
html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(1) .circle {
  background: var(--ic1-bg) !important;
  border-color: var(--ic1-border) !important;
  box-shadow: 0 8px 22px var(--ic1-glow) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(1) .circle svg {
  stroke: var(--ic1-stroke) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(1):hover .circle {
  background: rgba(219, 234, 254, 1) !important;
  box-shadow: 0 14px 30px var(--ic1-glow) !important;
}

/* ?占?占?2: ?占쎈줉 ?占쎈궡 ??蹂대씪 ?占?占?*/
html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(2) .circle {
  background: var(--ic2-bg) !important;
  border-color: var(--ic2-border) !important;
  box-shadow: 0 8px 22px var(--ic2-glow) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(2) .circle svg {
  stroke: var(--ic2-stroke) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(2):hover .circle {
  background: rgba(237, 233, 254, 1) !important;
  box-shadow: 0 14px 30px var(--ic2-glow) !important;
}

/* ?占?占?3: 紐⑹옣 ?占쎄컻 ???占쎈찓?占쎈뱶 珥덈줉 ?占?占?*/
html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(3) .circle {
  background: var(--ic3-bg) !important;
  border-color: var(--ic3-border) !important;
  box-shadow: 0 8px 22px var(--ic3-glow) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(3) .circle svg {
  stroke: var(--ic3-stroke) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(3):hover .circle {
  background: rgba(220, 252, 231, 1) !important;
  box-shadow: 0 14px 30px var(--ic3-glow) !important;
}

/* ?占?占?4: ?占쎌떆??占???濡쒖쫰 鍮④컯 ?占?占?*/
html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(4) .circle {
  background: var(--ic4-bg) !important;
  border-color: var(--ic4-border) !important;
  box-shadow: 0 8px 22px var(--ic4-glow) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(4) .circle svg {
  stroke: var(--ic4-stroke) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(4):hover .circle {
  background: rgba(254, 226, 226, 1) !important;
  box-shadow: 0 14px 30px var(--ic4-glow) !important;
}

/* ?占?占?5: ?占쎌꽕 ?占쎈궡 ???占쎈쾭 二쇳솴 ?占?占?*/
html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(5) .circle {
  background: var(--ic5-bg) !important;
  border-color: var(--ic5-border) !important;
  box-shadow: 0 8px 22px var(--ic5-glow) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(5) .circle svg {
  stroke: var(--ic5-stroke) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(5):hover .circle {
  background: rgba(254, 243, 199, 1) !important;
  box-shadow: 0 14px 30px var(--ic5-glow) !important;
}

/* ?占?占?6: ?占쎈씪?占쎌삁占????占쎌븞 占?占쏙옙 ?占?占?*/
html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(6) .circle {
  background: var(--ic6-bg) !important;
  border-color: var(--ic6-border) !important;
  box-shadow: 0 8px 22px var(--ic6-glow) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(6) .circle svg {
  stroke: var(--ic6-stroke) !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(6):hover .circle {
  background: rgba(207, 250, 254, 1) !important;
  box-shadow: 0 14px 30px var(--ic6-glow) !important;
}


/* ?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺??
   THEME4 ??hero-sermon-card hover ?占쎄낵
   ??移대뱶 ?占쎈줈 遺€??+ 洹몃┝??媛뺥솕
   ???占쎈몢占?湲€濡쒖슦
   ???占쎈쾭?占쎌씠 諛앹븘??諛곌꼍?占쏙옙?吏€ ???占쎈챸
   ??愿묓깮 ?占쎌쐲(::after ?占쎌슜)
   ???占쎈ぉ 誘몄꽭 ?占쎈룞
   ?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺?占썩봺??*/

/* ?占?占?湲곕낯 transition ?占쏀똿 ?占?占?*/
html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card {
  will-change: transform, box-shadow !important;
  transition:
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s ease,
    border-color 0.24s ease !important;
  cursor: pointer !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card::before {
  transition: background 0.28s ease !important;
}

/* ?占?占?::after ??愿묓깮 ?占쎌쐲 ?占쎌씠???占?占?*/
html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  border-radius: inherit !important;
  background: linear-gradient(108deg,
      transparent 30%,
      rgba(255, 255, 255, 0.22) 48%,
      rgba(255, 255, 255, 0.10) 52%,
      transparent 68%) !important;
  transform: translateX(-110%) !important;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
}

/* ?占?占?hover: 移대뱶 遺€??+ 洹몃┝??+ ?占쎈몢占?湲€濡쒖슦 ?占?占?*/
html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card:hover {
  transform: translateY(-8px) scale(1.018) !important;
  box-shadow:
    0 32px 60px rgba(0, 0, 0, 0.40),
    0 0 0 3px rgba(255, 255, 255, 0.60),
    0 0 28px rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
}

/* ?占?占?hover: ?占쎈쾭?占쎌씠 諛앹븘占???諛곌꼍 ?占쏙옙?吏€ ???占쎈챸?占쎄쾶 ?占?占?*/
html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card:hover::before {
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.30) 100%) !important;
}

/* ?占?占?hover: 愿묓깮 ?占쎌쐲 ?占쏀뻾 ?占?占?*/
html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card:hover::after {
  transform: translateX(110%) !important;
}

/* ?占?占?hover: ?占쎈ぉ ?占쎈줈 ?占쎌쭩 ?占쎈룞 + 洹몃┝??媛뺥솕 ?占?占?*/
html[data-theme="theme4"] body #contents .section-hero .hero-sermon-title {
  transition: transform 0.28s ease, text-shadow 0.28s ease !important;
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card:hover .hero-sermon-title {
  transform: translateY(-3px) !important;
  text-shadow:
    0 4px 12px rgba(0, 0, 0, 0.55),
    0 8px 28px rgba(0, 0, 0, 0.32) !important;
}

/* Theme4 mobile quick-link icon layout aligned with the shared concept. */
@media (max-width: 900px) {
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: clamp(16px, 5dvh, 34px) !important;
    width: min(calc(100% - 64px), 350px) !important;
    max-width: 350px !important;
    gap: 8px !important;
    transform: translateX(-50%) !important;
    z-index: 12 !important;
    pointer-events: auto !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: clamp(52px, 11dvh, 66px) !important;
    padding: 6px 3px 5px !important;
    gap: 4px !important;
    border-radius: clamp(12px, 3.6vw, 18px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:active {
    transform: translateY(-2px) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle svg {
    display: block !important;
    width: clamp(19px, 5.2vw, 25px) !important;
    height: clamp(19px, 5.2vw, 25px) !important;
    stroke-width: 1.8 !important;
    fill: none !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item span {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    color: #102d22 !important;
    font-size: clamp(9px, 2.45vw, 11px) !important;
    font-weight: 450 !important;
    line-height: 1.12 !important;
    text-align: center !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}

/* Theme4: sub menu drag is enabled only while the mobile hamburger menu is active. */
html[data-theme="theme4"] .sub_menu {
  overflow-x: hidden !important;
  cursor: default !important;
  user-select: auto !important;
  touch-action: auto !important;
}

html[data-theme="theme4"] .sub_menu.is-dragging {
  cursor: default !important;
}

html[data-theme="theme4"] .sub_menu.is-dragging * {
  user-select: auto !important;
}

@media (max-width: 768px) {
  html[data-theme="theme4"] .sub_menu {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    cursor: grab !important;
    user-select: none !important;
    touch-action: pan-x !important;
  }

  html[data-theme="theme4"] .sub_menu.is-dragging {
    cursor: grabbing !important;
  }

  html[data-theme="theme4"] .sub_menu.is-dragging * {
    user-select: none !important;
  }
}

/* Final worship card background images */
html[data-theme] body #contents .section-worship .ql-card-side,
html[data-theme] body #contents .section-worshp .ql-card-side {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

html[data-theme] body #contents .section-worship .ql-card-column,
html[data-theme] body #contents .section-worshp .ql-card-column {
  background: url("/image/worship/01_pasters_column.png") center/cover no-repeat !important;
}

html[data-theme] body #contents .section-worship .ql-card-sunday,
html[data-theme] body #contents .section-worshp .ql-card-sunday {
  background: url("/image/worship/02_worship-sun.png") center/cover no-repeat !important;
}

html[data-theme] body #contents .section-worship .ql-card-wed,
html[data-theme] body #contents .section-worshp .ql-card-wed {
  background: url("/image/worship/03_worship-wed.png") center/cover no-repeat !important;
}

html[data-theme] body #contents .section-worship .ql-card-dawn,
html[data-theme] body #contents .section-worship .ql-card-down,
html[data-theme] body #contents .section-worshp .ql-card-dawn,
html[data-theme] body #contents .section-worshp .ql-card-down {
  background: url("/image/worship/04_worship-morn.png") center/cover no-repeat !important;
}

html[data-theme] body #contents .section-worship .ql-card-side .ql-arrow,
html[data-theme] body #contents .section-worship .ql-card-side .ql-arrow svg,
html[data-theme] body #contents .section-worshp .ql-card-side .ql-arrow,
html[data-theme] body #contents .section-worshp .ql-card-side .ql-arrow svg {
  display: none !important;
}

html[data-theme] body #contents .section-worship .ql-card-side::before,
html[data-theme] body #contents .section-worship .ql-card-side::after,
html[data-theme] body #contents .section-worshp .ql-card-side::before,
html[data-theme] body #contents .section-worshp .ql-card-side::after {
  content: none !important;
  display: none !important;
}

body #contents .section-worship .ql-card-column,
body #contents .section-worshp .ql-card-column {
  background: url("/image/worship/01_pasters_column.png") center/cover no-repeat !important;
}

body #contents .section-worship .ql-card-sunday,
body #contents .section-worshp .ql-card-sunday {
  background: url("/image/worship/02_worship-sun.png") center/cover no-repeat !important;
}

body #contents .section-worship .ql-card-wed,
body #contents .section-worshp .ql-card-wed {
  background: url("/image/worship/03_worship-wed.png") center/cover no-repeat !important;
}

body #contents .section-worship .ql-card-dawn,
body #contents .section-worship .ql-card-down,
body #contents .section-worshp .ql-card-dawn,
body #contents .section-worshp .ql-card-down {
  background: url("/image/worship/04_worship-morn.png") center/cover no-repeat !important;
}

body #contents .section-worship .ql-card-side .ql-arrow,
body #contents .section-worship .ql-card-side .ql-arrow svg,
body #contents .section-worshp .ql-card-side .ql-arrow,
body #contents .section-worshp .ql-card-side .ql-arrow svg,
body #contents .section-worship .ql-card-side::before,
body #contents .section-worship .ql-card-side::after,
body #contents .section-worshp .ql-card-side::before,
body #contents .section-worshp .ql-card-side::after {
  content: none !important;
  display: none !important;
}

html[data-theme] body #contents .section-worship .ql-card-side h4,
html[data-theme] body #contents .section-worshp .ql-card-side h4,
body #contents .section-worship .ql-card-side h4,
body #contents .section-worshp .ql-card-side h4 {
  display: inline-block !important;
  width: auto !important;
  max-width: calc(100% - 60px) !important;
  padding: 6px 12px !important;
  background: transparent !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* Hero drag slide interaction */
body #contents .section-hero .hero-inner {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

body #contents .section-hero .hero-inner.is-hero-dragging {
  cursor: grabbing !important;
}

body #contents .section-hero .hero-inner.is-hero-dragging * {
  user-select: none;
  -webkit-user-select: none;
}

/* Theme4 worship side cards: maximize the clickable card in each grid cell. */
html[data-theme="theme4"] body #contents .section-worship .worship-grid>a.ql-card,
html[data-theme="theme4"] body #contents .section-worship .worship-grid>.ql-card-menu {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html[data-theme="theme4"] body #contents .section-worship .worship-grid>a.ql-card>h4,
html[data-theme="theme4"] body #contents .section-worship .worship-grid>.ql-card-menu>h4 {
  display: flex !important;
  position: absolute !important;
  inset: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  transform: none !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

/* Theme4 nav final override */
html[data-theme="theme4"] #header .nav>ul>li {
  position: relative !important;
}

html[data-theme="theme4"] #header .nav>ul>li>a:hover,
html[data-theme="theme4"] #header .nav>ul>li:hover>a,
html[data-theme="theme4"] #header .nav>ul>li.active>a,
html[data-theme="theme4"] #header .nav>ul>li>a:focus {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
}

html[data-theme="theme4"] #header .nav>ul>li>a:hover::after,
html[data-theme="theme4"] #header .nav>ul>li:hover>a::after,
html[data-theme="theme4"] #header .nav>ul>li.active>a::after,
html[data-theme="theme4"] #header .nav>ul>li>a:focus::after {
  background: var(--accent, #d4a017) !important;
}

html[data-theme="theme4"] #header .nav>ul>li>.sub_nav {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 220px !important;
  margin-top: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  z-index: 100001 !important;
}

html[data-theme="theme4"] #header .nav>ul>li:hover>.sub_nav,
html[data-theme="theme4"] #header .nav>ul>li:focus-within>.sub_nav {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Theme4: tighten the gap above the main content cards. */
html[data-theme="theme4"] body #contents .main-content-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 1100px) {
  html[data-theme="theme4"] body #contents .main-content-wrap {
    padding-top: 0 !important;
  }
}

html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card,
html[data-theme="theme4"] body #contents .hero-renewal-actions.is-below-welcome .hero-sermon-card {
  background-color: transparent !important;
  background-image: url("/image/worship/00_sermon_son-5-1.webp") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 1000px) {

  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card,
  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card:hover,
  html[data-theme="theme4"] body #contents .section-hero .hero-sermon-card:focus-visible,
  html[data-theme="theme4"] body #contents .hero-renewal-actions.is-below-welcome .hero-sermon-card,
  html[data-theme="theme4"] body #contents .hero-renewal-actions.is-below-welcome .hero-sermon-card:hover,
  html[data-theme="theme4"] body #contents .hero-renewal-actions.is-below-welcome .hero-sermon-card:focus-visible {
    background-image: url("/image/worship/00_sermon_son-5-1.webp") !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}

html[data-theme="theme4"] body #contents .hero-renewal-actions.is-below-welcome .hero-sermon-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.30) 100%) !important;
  pointer-events: none !important;
}

html[data-theme="theme4"] #header .nav .sub_na .np-card H4 {
  font-size: clamp(12px, 0.92vw, 15px);
}

@media (hover: none),
(pointer: coarse),
(max-width: 768px) {

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:hover,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:active,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:focus,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    text-decoration: none !important;
    overflow: visible !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item *,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item *::before,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item *::after {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item::before,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item::after,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:hover::before,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:hover::after,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:active::before,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:active::after,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:focus::before,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:focus::after,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:focus-visible::before,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:focus-visible::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:hover .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:active .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:focus .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:focus-visible .circle {
    overflow: hidden !important;
    background-clip: padding-box !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    contain: paint !important;
    transform: none !important;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(1) .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(1):hover .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(1):active .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(1):focus .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(1):focus-visible .circle {
    background: var(--ic1-bg) !important;
    border-color: var(--ic1-border) !important;
    box-shadow: 0 8px 22px var(--ic1-glow) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(2) .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(2):hover .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(2):active .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(2):focus .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(2):focus-visible .circle {
    background: var(--ic2-bg) !important;
    border-color: var(--ic2-border) !important;
    box-shadow: 0 8px 22px var(--ic2-glow) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(3) .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(3):hover .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(3):active .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(3):focus .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(3):focus-visible .circle {
    background: var(--ic3-bg) !important;
    border-color: var(--ic3-border) !important;
    box-shadow: 0 8px 22px var(--ic3-glow) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(4) .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(4):hover .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(4):active .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(4):focus .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(4):focus-visible .circle {
    background: var(--ic4-bg) !important;
    border-color: var(--ic4-border) !important;
    box-shadow: 0 8px 22px var(--ic4-glow) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(5) .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(5):hover .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(5):active .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(5):focus .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(5):focus-visible .circle {
    background: var(--ic5-bg) !important;
    border-color: var(--ic5-border) !important;
    box-shadow: 0 8px 22px var(--ic5-glow) !important;
  }

  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(6) .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(6):hover .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(6):active .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(6):focus .circle,
  html[data-theme="theme4"] body #contents .section-hero .hero-guide-icons .w-icon-item:nth-child(6):focus-visible .circle {
    background: var(--ic6-bg) !important;
    border-color: var(--ic6-border) !important;
    box-shadow: 0 8px 22px var(--ic6-glow) !important;
  }
}

/* Theme4: keep section-posts labels visible on mid desktop widths. */
@media (min-width: 1200px) and (max-width: 1500px) {
  html[data-theme="theme4"] body #contents .section-posts .np-card {
    padding-left: clamp(9px, 0.85vw, 13px) !important;
    padding-right: clamp(9px, 0.85vw, 13px) !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-title-link {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-card h4,
  html[data-theme="theme4"] body #contents .section-posts .np-card h4 font,
  html[data-theme="theme4"] body #contents .section-posts .np-link-item .np-card h4 {
    font-size: clamp(15px, 1.32vw, 19px) !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .np-link-item>.np-card {
    padding-left: clamp(10px, 0.9vw, 14px) !important;
    padding-right: clamp(10px, 0.9vw, 14px) !important;
  }
}

/* Theme4: align the opened post widget with the selected tab on wide cp-posts. */
@media (min-width: 640px) {
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:not(.np-link-item)>.np-panel {
    overflow: hidden !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:not(.np-link-item)>.np-panel>.np-widget {
    width: var(--np-widget-width, calc(100% - var(--np-widget-x, 0px))) !important;
    max-width: var(--np-widget-width, calc(100% - var(--np-widget-x, 0px))) !important;
    margin-left: var(--np-widget-x, 0px) !important;
    box-sizing: border-box !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(1)>.np-panel>.np-widget,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(1)>.np-panel>.np-widget ul,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(1)>.np-panel>.np-widget li,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(1)>.np-panel>.np-widget p,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(1)>.np-panel>.np-widget span,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(1)>.np-panel>.np-widget a {
    text-align: left !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(2)>.np-panel>.np-widget,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(2)>.np-panel>.np-widget ul,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(2)>.np-panel>.np-widget li,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(2)>.np-panel>.np-widget p,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(2)>.np-panel>.np-widget span,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(2)>.np-panel>.np-widget a {
    text-align: left !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(3)>.np-panel>.np-widget,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(3)>.np-panel>.np-widget ul,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(3)>.np-panel>.np-widget li,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(3)>.np-panel>.np-widget p,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(3)>.np-panel>.np-widget span,
  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(3)>.np-panel>.np-widget a {
    text-align: right !important;
  }

  html[data-theme="theme4"] body #contents .section-posts .cp-posts.is-widget-x-aligned .np-item.is-open:nth-child(3)>.np-panel>.np-widget {
    padding-right: 30px !important;
  }
}

@media (max-width: 930px) {
  html[data-theme="theme4"] body {
    padding-top: 100px !important;
  }

  html[data-theme="theme4"] #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 900px) {
  html[data-theme="theme4"] body {
    padding-top: 82px !important;
  }
}

@media (max-width: 930px) {
  html[data-theme="theme4"] #body_header {
    z-index: 2147483000 !important;
  }

  html[data-theme="theme4"] #header {
    z-index: 2147483000 !important;
  }

  html[data-theme="theme4"] .mb_hamburger {
    z-index: 2147483001 !important;
  }

  html[data-theme="theme4"] .mb_hamburger.is-open {
    position: fixed !important;
    z-index: 2147483647 !important;
    display: flex !important;
    pointer-events: auto !important;
  }

  html[data-theme="theme4"] .mb_hamburger.is-open .menu-bt-line {
    background: #f3fff7 !important;
    opacity: 1 !important;
  }

  html[data-theme="theme4"] .mb_hamburger.is-open .menu-bt-line2 {
    opacity: 0 !important;
  }
}

@media (max-width: 930px) {

  html[data-theme="theme4"] .mb_hamburger,
  html[data-theme="theme4"] .mb_hamburger * {
    color-scheme: only light !important;
    forced-color-adjust: none !important;
  }

  html[data-theme="theme4"] .mb_hamburger .menu-bt-line,
  html[data-theme="theme4"] .mb_hamburger.is-open .menu-bt-line {
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 5px rgba(0, 0, 0, .9) !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
  }

  html[data-theme="theme4"] .mb_hamburger.is-open .menu-bt-line2 {
    opacity: 0 !important;
  }
}

@media (max-width: 930px) {

  html.dark .mb_hamburger .menu-bt-line,
  body.dark .mb_hamburger .menu-bt-line,
  html.dark-mode .mb_hamburger .menu-bt-line,
  body.dark-mode .mb_hamburger .menu-bt-line,
  html[data-mode="dark"] .mb_hamburger .menu-bt-line,
  html[data-theme-mode="dark"] .mb_hamburger .menu-bt-line,
  html[data-color-scheme="dark"] .mb_hamburger .menu-bt-line,
  html[data-bs-theme="dark"] .mb_hamburger .menu-bt-line,
  html[data-dark="true"] .mb_hamburger .menu-bt-line,
  body[data-mode="dark"] .mb_hamburger .menu-bt-line,
  body[data-theme-mode="dark"] .mb_hamburger .menu-bt-line,
  body[data-color-scheme="dark"] .mb_hamburger .menu-bt-line,
  body[data-bs-theme="dark"] .mb_hamburger .menu-bt-line,
  body[data-dark="true"] .mb_hamburger .menu-bt-line {
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .55) !important;
  }
}

@media (max-width: 930px) and (prefers-color-scheme: dark) {
  .mb_hamburger .menu-bt-line {
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .55) !important;
  }
}

@media (max-width: 930px) {
  .mb_hamburger .menu-bt-line {
    background: #fff !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 5px rgba(0, 0, 0, .9) !important;
    mix-blend-mode: normal !important;
  }

  .mb_hamburger.is-open .menu-bt-line2 {
    opacity: 0 !important;
  }
}

@media (max-width: 930px) {

  html[data-theme="theme4"] .mb_hamburger .menu-bt-line,
  html[data-theme="theme4"] .mb_hamburger.is-open .menu-bt-line {
    background: #fff !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 5px rgba(0, 0, 0, .9) !important;
    mix-blend-mode: normal !important;
  }

  html[data-theme="theme4"] .mb_hamburger.is-open .menu-bt-line2 {
    opacity: 0 !important;
  }
}