/* ============================================================
   templates/layouts/main_v1/custom_tdc2_sub.css — 더꿈의교회 맞춤 디자인 2판(custom_tdc2)의 "서브페이지" 모양 (2026-10-16)
   홈(custom_tdc2.css)과 같은 둥근 알약 헤더 + 홈 히어로를 줄인 모양(건축 곡선 배경 + 표어)을 모든 서브 페이지 위에 고정.
   LIB/SiteMenuHelper.php f_renderSubHeader()가 맞춤 디자인일 때만 이 파일(+ custom_tdc2.js)을 불러옴.
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
body{font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;background:#eeeae6;letter-spacing:-.012em}

.topbar.sc-custom{
  position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:60;width:max-content;max-width:calc(100vw - 24px);padding:0 !important;
  background:rgba(44,78,96,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;box-shadow:none;transition:background .35s,color .35s,border-color .35s,box-shadow .35s;
}
.topbar.sc-custom .wrap{max-width:none;margin:0;padding:9px 24px 9px 20px;gap:clamp(14px,2.4vw,34px);flex-wrap:nowrap}
.topbar.sc-custom .brand{color:#fff;display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;text-decoration:none}
.topbar.sc-custom .brand-logo{height:42px;width:auto;max-width:none;display:block;flex:none;transition:filter .3s}
.topbar.sc-custom .brand{flex:none}
.topbar.sc-custom .brand-logo ~ span{display:none} /* 로고 이미지가 있으면 교회 이름 글자는 숨김 */
.topbar.sc-custom .site-nav .sn-top>li>a{color:#fff;font-weight:700;font-size:15px;padding:6px 4px;border-radius:0;background:none;opacity:.92}
.topbar.sc-custom .site-nav .sn-top>li>a:hover{background:none;color:#fff;opacity:1;box-shadow:inset 0 -2px 0 currentColor}
.topbar.sc-custom .site-nav .sn-top{gap:clamp(12px,1.8vw,26px)}
.topbar.sc-custom .sub-auth,.topbar.sc-custom .sub-auth a{color:#fff;font-weight:700}
.topbar.sc-custom .site-nav .sn-sub{background:rgba(20,36,46,.96);border-color:rgba(255,255,255,.12)}
.topbar.sc-custom .site-nav .sn-sub a{color:#e9eef2}
.topbar.sc-custom .site-nav .sn-sub a:hover{background:rgba(255,255,255,.12);color:#fff}
.topbar.sc-custom .site-nav .sn-burger span{background:#fff}
.topbar.sc-custom.light{background:rgba(238,234,230,.82);border-color:rgba(18,20,23,.14);box-shadow:0 8px 30px rgba(20,24,30,.10)}
.topbar.sc-custom.light .brand,.topbar.sc-custom.light .site-nav .sn-top>li>a,.topbar.sc-custom.light .sub-auth,.topbar.sc-custom.light .sub-auth a{color:#121417}
.topbar.sc-custom .brand-logo.bl-light{display:none}
.topbar.sc-custom.light .brand.has-light-logo .bl-dark{display:none}
.topbar.sc-custom.light .brand.has-light-logo .bl-light{display:block}
.topbar.sc-custom.light .brand:not(.has-light-logo) .brand-logo{filter:invert(1)}
.topbar.sc-custom.light .site-nav .sn-burger span{background:#121417}

/* 서브 상단 히어로(줄인 모양) — 화면 폭 가득, 건축 곡선 배경 + 표어 글자 */
.sub-hero{margin-bottom:clamp(26px,3vw,44px)}
.sub-hero .sc-hero,.sub-hero .sc-hero.compact{position:relative;overflow:hidden;isolation:isolate;width:100%;margin:0;border-radius:0 0 36px 36px;background:#07142a;color:#fff}
.sub-hero .sc-hero::before{content:"";position:absolute;inset:-3%;z-index:-2;
  background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(2,8,18,.55) 70%,rgba(2,6,14,.9) 100%),url('custom_tdc2_hero.svg') center 30%/cover no-repeat;
  animation:tdc2-drift 26s ease-in-out infinite alternate}
@keyframes tdc2-drift{from{transform:scale(1)}to{transform:scale(1.07) translate3d(-1.2%,-1%,0)}}
.sub-hero .sc-hero.has-bg{background:#07142a}
.sub-hero .sc-hero.has-bg::before{inset:0;animation:none;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(2,8,18,.55) 70%,rgba(2,6,14,.88) 100%),var(--hero-bg) center 30%/cover no-repeat}
.sub-hero .sc-hero::after{display:none}
.sub-hero .sc-hero .sc-hero-inner,.sub-hero .sc-hero.compact .sc-hero-inner{max-width:1360px;padding:calc(100px + 24px) clamp(20px,5.2vw,120px) clamp(34px,5vw,64px)}
.sub-hero .sc-hero .eyebrow{color:#eea98c;font-size:14px;font-weight:500;letter-spacing:-.01em;text-transform:none}
.sub-hero .sc-hero h2,.sub-hero .sc-hero.compact h2{font-size:clamp(30px,4.4vw,64px);font-weight:300;letter-spacing:-.055em;line-height:1.05;margin-top:8px;max-width:none}
.sub-hero .sc-hero h2::first-line,.sub-hero .sc-hero.compact h2::first-line{font-weight:800}
.sub-hero .sc-hero .bar{display:none}
.sub-hero.is-banner .sc-hero .sc-hero-inner{padding-top:calc(100px + 40px);padding-bottom:clamp(50px,8vw,100px)}
.sub-hero.is-banner .actions{display:none}
@media(max-width:820px){
  .topbar.sc-custom{left:12px;right:12px;transform:none;width:auto;max-width:none;top:14px;border-radius:26px}
  .topbar.sc-custom .wrap{padding:8px 12px 8px 16px}
  .topbar.sc-custom .brand-logo{height:36px}
  .topbar.sc-custom .site-nav .sn-top{left:-1px;right:-1px;top:calc(100% + 8px);border-radius:22px;border:1px solid rgba(255,255,255,.12);background:rgba(18,30,40,.96);box-shadow:0 16px 40px rgba(0,0,0,.35)}
  .topbar.sc-custom .site-nav .sn-top>li>a{color:#fff !important;border-bottom-color:rgba(255,255,255,.1)}
  .topbar.sc-custom.light .site-nav .sn-top{background:rgba(238,234,230,.97);border-color:rgba(18,20,23,.12)}
  .topbar.sc-custom.light .site-nav .sn-top>li>a{color:#121417 !important;border-bottom-color:rgba(18,20,23,.08)}
}
@media(prefers-reduced-motion:reduce){.sub-hero .sc-hero::before{animation:none}}