@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
/* ============================================================
   templates/layouts/main_v1/custom_tdc2.css — 더꿈의교회 맞춤 홈페이지 디자인 2판(custom_tdc2, 2026-10-16)
   시안 _design_html/church_home_style1.html을 main_v1 틀 + 기존 모듈 위에 입힌 것(내용 편집은 지금처럼 모듈 [Edit]).
     · 헤더 = 위쪽 가운데 둥근 알약(유리 느낌) — 히어로 위에서는 짙은 유리색, 아래로 내리면 밝은 색(custom_tdc2.js가 .light를 붙임)
     · 첫 모듈(히어로) = 화면 가득 풀스크린 + 코드로 그린 건축 곡선 배경(custom_tdc2_hero.svg, 천천히 움직임) + 큰 제목(첫 줄 굵게/나머지 얇게)
     · 본문 = 따뜻한 회색 바탕 + 굵은 큰 제목 + 둥근 카드(안내카드/게시판/갤러리/교회정보)
     · 하단 = 어두운 둥근 푸터
   서브페이지 상단은 custom_tdc2_sub.css. 기존 custom_tdc(1판)는 그대로 둠 — 이 판은 교회 설정 webHomeCustom에 custom_tdc2를 넣어야 적용.
   ============================================================ */
body.main-shell.custom-tdc2{
  --primary:#0f2b55; --accent:#3b7be6; --bg:#eeeae6; --sky:#e4e8ee; --navy:#0f2b55; --blue:#3b7be6;
  --ink:#121417; --sub:#6b6b6b; --line:#dcd6cd; --pad:clamp(20px,5.2vw,120px);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  background:var(--bg);color:var(--ink);overflow-x:hidden;letter-spacing:-.012em;-webkit-font-smoothing:antialiased;
}

/* ---------- 헤더: 위쪽 가운데 둥근 알약 ---------- */
body.custom-tdc2 .main-head{
  position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:60;width:max-content;max-width:calc(100vw - 24px);
  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;color:#fff;
  transition:background .35s,color .35s,border-color .35s,box-shadow .35s;
}
body.custom-tdc2.admin .main-head{top:64px}
body.custom-tdc2 .main-head .wrap{max-width:none;margin:0;padding:9px 24px 9px 20px;gap:clamp(14px,2.4vw,34px);flex-wrap:nowrap}
body.custom-tdc2 .main-head .brand{color:#fff;display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800}
body.custom-tdc2 .main-head .brand-logo{height:42px;width:auto;max-width:none;display:block;flex:none;transition:filter .3s}
body.custom-tdc2 .main-head .brand{flex:none}
body.custom-tdc2 .main-head .brand-logo ~ span{display:none} /* 로고 이미지가 있으면 교회 이름 글자는 숨김(로고에 이름이 들어 있어 겹쳐 보이던 것) */
body.custom-tdc2 .main-nav,body.custom-tdc2 .main-nav.site-nav{flex:0 1 auto}
body.custom-tdc2 .main-nav a,
body.custom-tdc2 .main-nav.site-nav .sn-top>li>a{color:#fff;font-weight:700;font-size:15px;padding:6px 4px;border-radius:0;background:none;opacity:.92}
body.custom-tdc2 .main-nav a:hover,
body.custom-tdc2 .main-nav.site-nav .sn-top>li>a:hover{background:none;color:#fff;opacity:1;box-shadow:inset 0 -2px 0 currentColor}
body.custom-tdc2 .main-nav.site-nav .sn-top{gap:clamp(12px,1.8vw,26px)}
body.custom-tdc2 .main-head .auth-slot,
body.custom-tdc2 .main-head .auth-slot a{color:#fff;font-weight:700}
body.custom-tdc2 .site-nav .sn-sub{background:rgba(20,36,46,.96);border-color:rgba(255,255,255,.12);backdrop-filter:blur(10px)}
/* 서브메뉴 글자 — 틀 CSS(body.main-shell .main-nav.site-nav .sn-sub a{color:ink})가 더 강해서 검정으로 덮이던 것을 같은 무게로 맞춰 이김 */
body.main-shell.custom-tdc2 .main-nav.site-nav .sn-sub a{color:#e9eef2}
body.main-shell.custom-tdc2 .main-nav.site-nav .sn-sub a:hover{background:rgba(255,255,255,.12);color:#fff}
/* 아래로 내렸을 때(밝은 바탕) — custom_tdc2.js가 .light를 붙임 */
body.custom-tdc2 .main-head.light{background:rgba(238,234,230,.82);color:var(--ink);border-color:rgba(18,20,23,.14);box-shadow:0 8px 30px rgba(20,24,30,.10)}
body.custom-tdc2 .main-head.light .brand,
body.custom-tdc2 .main-head.light .main-nav a,
body.custom-tdc2 .main-head.light .main-nav.site-nav .sn-top>li>a,
body.custom-tdc2 .main-head.light .auth-slot,
body.custom-tdc2 .main-head.light .auth-slot a{color:var(--ink)}
/* 로고: 어두운 바탕용(.bl-dark) → 밝은 상태에서는 밝은 바탕용(.bl-light)로 교체. 밝은 바탕용이 따로 없으면(.has-light-logo 아님) 같은 로고를 검정으로 반전 */
body.custom-tdc2 .brand-logo.bl-light{display:none}
body.custom-tdc2 .main-head.light .brand.has-light-logo .bl-dark{display:none}
body.custom-tdc2 .main-head.light .brand.has-light-logo .bl-light{display:block}
body.custom-tdc2 .main-head.light .brand:not(.has-light-logo) .brand-logo{filter:invert(1)}
body.custom-tdc2 .main-head.light .site-nav .sn-burger span{background:var(--ink)}
body.custom-tdc2 .site-nav .sn-burger span{background:#fff}

/* ---------- 본문 ---------- */
body.custom-tdc2 .main-content{max-width:1360px;padding:0 var(--pad);padding-top:0;padding-bottom:20px}
body.custom-tdc2 .module-wrap{margin-bottom:0}

/* ---------- 첫 모듈 = 히어로: 풀스크린 + 코드로 그린 배경 ---------- */
body.custom-tdc2 .main-content > .module-wrap:first-child .sc-hero{
  width:100vw;margin-left:calc(50% - 50vw);margin-top:0;margin-bottom:0;border-radius:0;
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;background:#07142a;color:#fff;isolation:isolate;
}
body.custom-tdc2 .sc-hero::before{
  content:"";position:absolute;inset:-3%;z-index:-2;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 28%,rgba(2,8,18,.55) 70%,rgba(2,6,14,.92) 100%),url('custom_tdc2_hero.svg') center/cover no-repeat;
  animation:tdc2-drift 26s ease-in-out infinite alternate;
}
@keyframes tdc2-drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(-1.2%,-1%,0)}}
/* 히어로에 배경 이미지를 올렸으면 기본 그림(svg) 대신 그 이미지를(같은 어둡게 덮기 + 천천히 움직임) */
body.custom-tdc2 .sc-hero.has-bg{background:#07142a}
body.custom-tdc2 .sc-hero.has-bg::before{
  /* 올린 이미지는 잘림을 줄이려고 기본 그림처럼 확대(-3%/1.07배)하지 않고 화면에 딱 맞게 깔며, 위쪽 덮개는 아주 옅게 */
  inset:0;animation:none;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 30%,rgba(2,8,18,.5) 72%,rgba(2,6,14,.85) 100%),var(--hero-bg) center center/cover no-repeat}
/* 오른쪽 아래 교회 로고 — 교회정보에 등록한 홈페이지 상단 로고(없으면 교회 로고)를 shell.php가 --hero-logo로 넘김. 등록한 로고가 없으면 아무것도 안 그림 */
body.custom-tdc2 .sc-hero::after{display:none}
body.custom-tdc2.has-hero-logo .sc-hero::after{
  display:block;content:"";position:absolute;left:auto;right:clamp(24px,6vw,130px);bottom:clamp(60px,10vh,120px);top:auto;transform:none;z-index:1;
  width:clamp(180px,21vw,380px);height:clamp(54px,6.2vw,110px);opacity:1; /* 히어로 로고 크기(헤더 로고와 별개, 2026-10-16 원래 값 유지) */
  background:var(--hero-logo) right bottom/contain no-repeat;filter:drop-shadow(0 6px 30px rgba(0,0,0,.35));
}
body.custom-tdc2 .sc-hero-inner{max-width:none;width:100%;margin:0;padding:calc(100px + 40px) var(--pad) clamp(50px,9vh,110px)}
body.custom-tdc2 .sc-hero-text{max-width:min(1100px,78vw)}
body.custom-tdc2 .sc-hero .eyebrow{color:#eea98c;font-size:clamp(14px,1.45vw,20px);font-weight:500;letter-spacing:-.01em;text-transform:none}
body.custom-tdc2 .sc-hero h2{
  margin:clamp(8px,1.4vh,16px) 0 0;max-width:none;font-size:clamp(42px,6.3vw,108px);line-height:1;letter-spacing:-.055em;font-weight:300;
  white-space:pre-line;text-wrap:nowrap;
}
body.custom-tdc2 .sc-hero h2::first-line{font-weight:800}
body.custom-tdc2 .sc-hero .bar{display:none}
body.custom-tdc2 .sc-hero .verse{margin-top:clamp(12px,2vh,22px);max-width:40em;font-size:clamp(13px,1.2vw,17px);line-height:1.7;color:rgba(255,255,255,.9);white-space:pre-line}
body.custom-tdc2 .sc-hero .ref{margin-top:6px;font-size:clamp(12px,1.05vw,15px);font-weight:700;color:rgba(255,255,255,.85)}
body.custom-tdc2 .sc-hero .actions{display:none}
body.custom-tdc2 .sc-hero .sc-hero-slides{display:none}
body.custom-tdc2 .sc-hero.has-slides .sc-hero-inner{display:block}
body.custom-tdc2.admin .sc-hero .actions{display:flex} /* 편집 중에는 버튼 문구도 고칠 수 있게 */
body.custom-tdc2.admin .main-content > .module-wrap:first-child .mod-manage{position:relative;z-index:5}
/* 편집 중 히어로 도구줄(앱 이미지 표시/숨김·배경 이미지)은 헤더 알약 아래 맨 위에 둠 */
body.custom-tdc2.admin .sc-hero-tools{margin:130px 0 auto;width:100%;max-width:980px;align-self:flex-start;border-radius:0 12px 12px 0}
@media(max-width:900px){
  body.custom-tdc2.has-hero-logo .sc-hero::after{display:none}
  body.custom-tdc2 .sc-hero h2{text-wrap:wrap;font-size:clamp(34px,9vw,56px)}
  body.custom-tdc2 .sc-hero-text{max-width:92vw}
}
/* 첫 화면 등장 효과(시안 1과 같게) — 글자가 흐릿했다가 또렷해지며 차례로 나타나고, 로고도 뒤따라 나타남 */
@keyframes tdc2-in{from{opacity:0;filter:blur(14px);transform:translateY(16px)}to{opacity:1;filter:blur(0);transform:none}}
body.custom-tdc2 .sc-hero .eyebrow,body.custom-tdc2 .sc-hero h2,body.custom-tdc2 .sc-hero .verse,body.custom-tdc2 .sc-hero .ref,body.custom-tdc2 .sc-hero::after{
  animation:tdc2-in 1.1s cubic-bezier(.2,.7,.2,1) both}
body.custom-tdc2 .sc-hero .eyebrow{animation-delay:.25s}
body.custom-tdc2 .sc-hero h2{animation-delay:.5s}
body.custom-tdc2 .sc-hero .verse{animation-delay:.8s}
body.custom-tdc2 .sc-hero .ref{animation-delay:1.05s}
body.custom-tdc2 .sc-hero::after{animation-delay:1.3s}
/* SCROLL 안내 — 글자 + 아래로 늘어났다 줄어드는 가는 선(첫 모듈 히어로에만) */
body.custom-tdc2 .main-content > .module-wrap:first-child .sc-hero-inner::after{
  content:"SCROLL";position:absolute;left:50%;bottom:58px;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;color:#fff;opacity:.7;pointer-events:none}
body.custom-tdc2 .main-content > .module-wrap:first-child .sc-hero-inner::before{
  content:"";position:absolute;left:50%;bottom:22px;width:1px;height:28px;background:#fff;opacity:.7;pointer-events:none;transform-origin:top;animation:tdc2-scroll 1.8s ease-in-out infinite}
@keyframes tdc2-scroll{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:900px){
  body.custom-tdc2 .main-content > .module-wrap:first-child .sc-hero-inner::before,
  body.custom-tdc2 .main-content > .module-wrap:first-child .sc-hero-inner::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.custom-tdc2 .sc-hero::before,body.custom-tdc2 .sc-hero .eyebrow,body.custom-tdc2 .sc-hero h2,body.custom-tdc2 .sc-hero .verse,body.custom-tdc2 .sc-hero .ref,body.custom-tdc2 .sc-hero::after,
  body.custom-tdc2 .main-content > .module-wrap:first-child .sc-hero-inner::before{animation:none}
}

/* ---------- 본문 모듈: 굵은 큰 제목 + 둥근 카드 ---------- */
body.custom-tdc2 .sc-cardgrid,body.custom-tdc2 .sc-gallery,body.custom-tdc2 .sc-boardlist,body.custom-tdc2 .sc-info,body.custom-tdc2 .sc-textblock,
body.custom-tdc2 .sc-livecard,body.custom-tdc2 .sc-duo,body.custom-tdc2 .sc-rail,body.custom-tdc2 .sc-faq,body.custom-tdc2 .sc-photorail,body.custom-tdc2 .sc-map{margin-top:clamp(60px,8vw,120px);margin-bottom:0}
body.custom-tdc2 .sc-cardgrid h3,body.custom-tdc2 .sc-gallery h3,body.custom-tdc2 .sc-info h3,body.custom-tdc2 .sc-textblock h3{
  font-size:clamp(28px,4.2vw,60px);font-weight:900;letter-spacing:-.06em;line-height:1.12;margin:0 0 clamp(18px,2.4vw,34px);color:var(--ink)}
body.custom-tdc2 .sc-boardlist-head{font-size:clamp(28px,4.2vw,60px);font-weight:900;letter-spacing:-.06em;line-height:1.12;margin-bottom:clamp(18px,2.4vw,34px)}
body.custom-tdc2 .sc-boardlist-head .more{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--sub)}
body.custom-tdc2 .sc-boardlist-head .more:hover{color:var(--accent)}
/* 안내 카드 */
body.custom-tdc2 .sc-cardgrid-row{gap:clamp(14px,1.6vw,24px)}
body.custom-tdc2 .sc-cardgrid .card{border-radius:28px;min-height:clamp(200px,22vw,320px);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
body.custom-tdc2 .sc-cardgrid .card:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(20,24,30,.22)}
body.custom-tdc2 .sc-cardgrid .card .shade{background:linear-gradient(0deg,rgba(6,12,26,.72),rgba(6,12,26,0) 62%)}
body.custom-tdc2 .sc-cardgrid .card .txt{padding:clamp(18px,2vw,30px)}
body.custom-tdc2 .sc-cardgrid .card h4{font-size:clamp(17px,1.6vw,24px);font-weight:800;letter-spacing:-.04em}
body.custom-tdc2 .sc-cardgrid .card p{font-size:13px;opacity:.82}
/* 갤러리 */
body.custom-tdc2 .sc-gallery-row{gap:clamp(12px,1.4vw,20px)}
body.custom-tdc2 .sc-gallery .slot{border-radius:24px;aspect-ratio:1/1.05}
body.custom-tdc2 .sc-gallery figcaption{margin-top:12px;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.03em}
/* 게시판 목록(소식 등) */
body.custom-tdc2 .sc-boardlist-grid{gap:clamp(14px,1.6vw,24px)}
body.custom-tdc2 .sc-boardlist-grid .g-card{background:none;border:0;border-radius:0}
body.custom-tdc2 .sc-boardlist-grid .thumb{border-radius:22px;aspect-ratio:16/10;transition:transform .5s}
/* 웹진형(주보 등 세로 이미지)은 위 16:10을 덮어 세로로 길게(2:3) — 이 규칙이 없으면 가로형으로 잘려 보임 */
body.custom-tdc2 .sc-boardlist-grid.wz-portrait .thumb{aspect-ratio:2/3}
body.custom-tdc2 .sc-boardlist-grid .g-card:hover .thumb{transform:translateY(-5px)}
body.custom-tdc2 .sc-boardlist-grid .cap{padding:12px 2px 0}
body.custom-tdc2 .sc-boardlist-grid .title{font-size:16px;font-weight:800;letter-spacing:-.03em;white-space:normal}
body.custom-tdc2 .sc-boardlist-grid .meta{font-size:12.5px;color:var(--sub)}
body.custom-tdc2 .sc-boardlist-rows{border-top:1.5px solid var(--ink)}
body.custom-tdc2 .sc-boardlist-rows .row-card{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:18px 4px;transition:.3s}
body.custom-tdc2 .sc-boardlist-rows .row-card:hover{padding-left:14px;background:rgba(18,20,23,.04)}
body.custom-tdc2 .sc-boardlist-rows .title{font-size:clamp(15px,1.3vw,18px);font-weight:700;letter-spacing:-.03em}
/* 교회 정보 / 텍스트 블록 = 어두운 둥근 카드 */
body.custom-tdc2 .sc-info,body.custom-tdc2 .sc-textblock{background:#0e1b2b;border:0;border-radius:28px;color:#fff;padding:clamp(26px,3.2vw,48px)}
body.custom-tdc2 .sc-info h3,body.custom-tdc2 .sc-textblock h3{color:#fff;font-size:clamp(24px,3vw,40px)}
body.custom-tdc2 .sc-info-list .row{border-top:1px solid rgba(255,255,255,.12)}
body.custom-tdc2 .sc-info-list dt{color:#57b8f5}
body.custom-tdc2 .sc-info-list dd{color:#e9eef5}
body.custom-tdc2 .sc-textblock p{color:#c7d2e2}
/* 라이브 방송 */
body.custom-tdc2 .sc-live{margin-top:clamp(40px,5vw,70px)}
body.custom-tdc2 .sc-live-head{color:var(--ink);font-size:clamp(18px,2vw,26px);font-weight:900;letter-spacing:-.04em}
body.custom-tdc2 .sc-live-frame{border-radius:28px;box-shadow:0 30px 60px rgba(20,24,30,.25)}
body.custom-tdc2 .sc-live-upcoming{background:#0e1b2b;border:0;border-radius:28px;color:#fff;padding:clamp(28px,3vw,44px)}
body.custom-tdc2 .sc-live-upcoming .sc-live-head{color:#fff}
body.custom-tdc2 .sc-live-count{color:#57b8f5}

/* ---------- 하단 푸터 ---------- */
/* 풍부한 하단(로고+연락처+메뉴 열+큰 글자 띠)은 custom_tdc2_foot.css(LIB/ChurchInfoHelper.php가 불러옴). 아래는 그 파일이 없을 때의 단순 하단 */
body.custom-tdc2 .sc-foot:not(.sc-foot-x){margin-top:clamp(80px,10vw,140px);background:#3b3836;color:#e6e0da;border-radius:clamp(26px,3vw,44px) clamp(26px,3vw,44px) 0 0;padding:clamp(36px,4.4vw,64px) 0 28px}

/* ---------- 모바일 ---------- */
@media(max-width:820px){
  body.custom-tdc2 .main-head{left:12px;right:12px;transform:none;width:auto;max-width:none;top:14px;border-radius:26px}
  body.custom-tdc2.admin .main-head{top:60px}
  body.custom-tdc2 .main-head .wrap{padding:8px 12px 8px 16px}
  body.custom-tdc2 .main-head .brand-logo{height:36px} /* 모바일 헤더 로고(알약 높이 ≈ 52px) */
  body.custom-tdc2 .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);backdrop-filter:blur(14px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
  body.custom-tdc2 .site-nav .sn-top>li>a,body.custom-tdc2.main-shell .site-nav .sn-top>li>a{color:#fff !important;border-bottom-color:rgba(255,255,255,.1)}
  body.custom-tdc2 .main-head.light .site-nav .sn-top{background:rgba(238,234,230,.97);border-color:rgba(18,20,23,.12)}
  body.custom-tdc2 .main-head.light .site-nav .sn-top>li>a,body.custom-tdc2.main-shell .main-head.light .site-nav .sn-top>li>a{color:var(--ink) !important;border-bottom-color:rgba(18,20,23,.08)}
  body.custom-tdc2 .site-nav .sn-sub,body.custom-tdc2 .site-nav .sn-has.open>.sn-sub{background:rgba(255,255,255,.06)}
  body.main-shell.custom-tdc2 .main-head.light .main-nav.site-nav .sn-sub a{color:var(--ink)}
  body.main-shell.custom-tdc2 .main-head.light .main-nav.site-nav .sn-sub a:hover{background:rgba(18,20,23,.06);color:var(--ink)}
  body.custom-tdc2 .sc-cardgrid-row{grid-template-columns:1fr}
}

/* 홈 맨 위 히어로와 다음 모듈이 붙어 보이던 문제(2026-10-20) — 첫 모듈(히어로) 아래에 간격 */
body.custom-tdc2 .main-content > .module-wrap:first-child{margin-bottom:clamp(24px,3.4vw,52px)}