@charset "utf-8";
/* =================================================================
   교회형_3 (church3) — 좌측 고정 메뉴형
   레이아웃 참고: 인천 양무리교회(애드플랜 제작). 코드는 자체 구현.
   모든 선택자는 .y3- 로 시작한다. 게시판 스킨과 겹치지 않는다.
   ================================================================= */

:root{
  --y3-blue:#1e90ff;
  --y3-blue-d:#1272d6;
  --y3-ink:#1e2430;
  --y3-body:#6b7280;
  --y3-line:#e9e9e9;
  --y3-bg:#fafafa;
  --y3-side:280px;
  --y3-wrap:1160px;
  --y3-gutter:28px;
}

.y3-wrap{ max-width:var(--y3-wrap); margin:0 auto; padding:0 var(--y3-gutter); }

body{
  font-family:'Noto Sans KR','맑은 고딕',Malgun Gothic,sans-serif;
  color:var(--y3-body); background:#fff; letter-spacing:-.015em;
}
.y3-skip{ position:absolute; left:-9999px; }
.y3-skip:focus{ left:10px; top:10px; z-index:999; background:#fff; padding:10px 16px; }

img{ max-width:100%; }
.y3-empty{ padding:48px 0; text-align:center; color:#9aa3af; font-size:14px; line-height:1.9; }
.y3-empty a{ color:var(--y3-blue); text-decoration:underline; }
.y3-empty b{ color:var(--y3-ink); }

.y3-en{ font-size:13px; letter-spacing:.14em; color:var(--y3-blue); text-transform:uppercase; }
.y3-deco{ font-size:22px; color:#c9d6e8; letter-spacing:.04em; }

.y3-more{ text-align:center; margin-top:38px; }
.y3-more a, .y3-more__btn{
  display:inline-block; padding:11px 24px; border:1px solid var(--y3-line); border-radius:999px;
  font-size:13px; font-weight:700; color:var(--y3-ink); background:#fff;
}
.y3-more a:hover, .y3-more__btn:hover{ border-color:var(--y3-blue); color:var(--y3-blue); }

/* 데모바 — 사이드바 위에 얹힌다 */
.y3-demo{
  position:fixed; top:0; left:0; right:0; z-index:300;
  background:#12161f; color:rgba(255,255,255,.72); text-align:center;
  padding:9px var(--y3-gutter); display:flex; justify-content:center; gap:8px 26px; flex-wrap:wrap;
  font-size:11.5px;
}
.y3-demo b{ color:#fff; }
.y3-demo a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:2px; }
body:has(.y3-demo) .y3-side{ padding-top:36px; }
body:has(.y3-demo) .y3-mbar{ top:36px; }
body:has(.y3-demo) .y3-body{ padding-top:36px; }

/* --------------------------------------------------------------- 좌측 사이드바 */
.y3-side{
  position:fixed; z-index:200; left:0; top:0; width:var(--y3-side); height:100vh;
  background:#fff; border-right:1px solid #ccc; box-shadow:5px 0 15px #eee;
  overflow-y:auto;
  /* 스크롤바를 배경과 같은 흰색으로 두어 보이지 않게 한다 (스크롤은 그대로 된다) */
  scrollbar-width:none;              /* Firefox */
  -ms-overflow-style:none;           /* 구형 Edge */
  scrollbar-color:#fff #fff;
}
.y3-side::-webkit-scrollbar{ width:0; height:0; background:#fff; }
.y3-side::-webkit-scrollbar-track,
.y3-side::-webkit-scrollbar-thumb{ background:#fff; border:0; }
.y3-side__in{ display:flex; flex-direction:column; min-height:100%; padding-bottom:24px; }

/* 로고 — 원본: #logo{padding:30px 0;text-align:center} #logo img{width:80%} */
.y3-logo{ display:block; padding:30px 0; text-align:center; }
.y3-logo img{ width:80%; max-width:224px; height:auto; display:inline-block; }
.y3-logo__mark{
  display:block; width:34px; height:38px; margin:0 auto 14px;
  background:
    linear-gradient(var(--y3-blue),var(--y3-blue)) 14px 0/6px 38px no-repeat,
    linear-gradient(var(--y3-blue),var(--y3-blue)) 0 11px/34px 6px no-repeat;
}
.y3-logo__txt small{ display:block; font-size:10.5px; color:#a8b0bd; letter-spacing:-.02em; }
.y3-logo__txt strong{ display:block; margin-top:6px; font-size:21px; font-weight:800; color:var(--y3-ink); }
.y3-logo__txt em{ display:block; margin-top:5px; font-size:9.5px; font-style:normal; letter-spacing:.16em; color:#b9c1cc; }

.y3-nav{ flex:1; padding:20px 50px; }
.y3-nav__li > a{
  display:block; line-height:50px; font-size:19px; font-weight:500; color:var(--y3-ink);
  border-bottom:1px solid var(--y3-line);
}
.y3-nav__li > a:hover{ color:var(--y3-blue); }
.y3-nav__li.is-on > a{ color:var(--y3-blue); }
.y3-nav__sub{ padding:4px 0 12px; }
.y3-nav__sub a{ display:block; padding:6px 0 6px 12px; font-size:14px; line-height:1.8; color:#7b8493; }
.y3-nav__sub a:hover{ color:var(--y3-blue); }
.y3-nav__sub li.is-on a{ color:var(--y3-blue); font-weight:700; }
.y3-nav__empty{ padding:20px 26px; font-size:13px; line-height:1.8; color:#9aa3af; }
.y3-nav__empty a{ color:var(--y3-blue); text-decoration:underline; }

.y3-side__foot{ padding:22px 26px 0; }
.y3-live{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px; border-radius:999px; background:#d33b3b; color:#fff;
  font-size:12.5px; font-weight:700;
}
.y3-live:hover{ background:#b93030; color:#fff; }
.y3-live__dot{ width:6px; height:6px; border-radius:50%; background:#fff; animation:y3Blink 1.4s ease-in-out infinite; }
@keyframes y3Blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
.y3-side__login{ display:flex; gap:14px; justify-content:center; margin-top:18px; font-size:12.5px; }
.y3-side__login a{ color:#8b94a1; }
.y3-side__login a:hover{ color:var(--y3-ink); }
.y3-side__tel{ margin-top:14px; text-align:center; font-size:15px; font-weight:800; color:var(--y3-ink); }

.y3-side__bg{ display:none; }

/* 모바일 상단 바 */
.y3-mbar{
  display:none; position:fixed; top:0; left:0; right:0; z-index:190; height:58px;
  background:#fff; border-bottom:1px solid var(--y3-line);
  align-items:center; justify-content:space-between; padding:0 18px;
}
.y3-mbar__logo{ display:flex; align-items:center; gap:10px; }
.y3-mbar__logo .y3-logo__mark{ width:20px; height:24px; margin:0;
  background:
    linear-gradient(var(--y3-blue),var(--y3-blue)) 8px 0/4px 24px no-repeat,
    linear-gradient(var(--y3-blue),var(--y3-blue)) 0 7px/20px 4px no-repeat;
}
.y3-mbar__logo strong{ font-size:16px; font-weight:800; color:var(--y3-ink); }
.y3-burger{
  width:40px; height:40px; background:none; border:0; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
}
.y3-burger span{ display:block; height:2px; background:var(--y3-ink); border-radius:2px; }

/* --------------------------------------------------------------- 본문 영역 */
.y3-body{ margin-left:var(--y3-side); min-height:100vh; }

/* 히어로 — 원본: .main{max-width:1100px;padding:100px 0}
                  .slide{height:350px;border:1px solid #ccc;border-radius:25px} */
.y3-main{ width:100%; max-width:1100px; margin:0 auto; padding:60px var(--y3-gutter) 40px; }
.y3-slide{
  width:100%; height:350px; border:1px solid #ccc; border-radius:25px;
  overflow:hidden; position:relative;
}
.y3-slide__track{ display:flex; height:100%; will-change:transform; }
.y3-slide__i{ flex:0 0 100%; height:100%; }
.y3-slide__i img{ width:100%; height:100%; object-fit:cover; display:block; }
.y3-slide__dots{ position:absolute; right:22px; bottom:18px; z-index:3; display:flex; gap:8px; }
.y3-slide__dots button{
  width:22px; height:3px; padding:0; border:0; cursor:pointer; border-radius:2px;
  background:rgba(255,255,255,.5); transition:background .2s ease;
}
.y3-slide__dots button[aria-current="true"]{ background:#fff; }

/* 큰 타이틀 — 원본: h1{font-size:4em;color:dodgerblue}
                    .hline:before{왼쪽으로 뻗는 가로선}
                    .invert{background:dodgerblue;border-radius:5px 30px} */
.y3-hline{
  position:relative; margin-top:70px; font-size:clamp(28px,4vw,56px);
  color:var(--y3-blue); line-height:1.35; word-break:keep-all;
}
.y3-hline::before{
  content:''; display:block; width:100%; border-top:1px solid #ccc;
  position:absolute; right:102%; top:50%;
}
.y3-thin{ font-weight:300; }
.y3-invert{
  display:inline-block; border-radius:5px 30px; background:var(--y3-blue);
  padding:0 14px 6px; margin-left:6px;
}
.y3-invert span{ color:#fff; font-weight:700; }
/* --------------------------------------------------------------- 섹션 공통 */
.y3-sec{ padding:70px 0; }
.y3-sechead{ text-align:center; margin-bottom:44px; }
.y3-sechead h2{ margin-top:14px; font-size:clamp(20px,2.4vw,28px); font-weight:800; color:var(--y3-ink); line-height:1.5; }
.y3-sechead.is-left{ text-align:left; position:relative; }
.y3-sechead.is-left h2{ margin-top:0; }
.y3-sechead.is-left .y3-en{ margin-top:10px; }
.y3-sechead.is-left .y3-more__btn{ position:absolute; right:0; bottom:0; }

/* --------------------------------------------------------------- 설교 */
.y3-sermon{ background:var(--y3-bg); }
.y3-sermon__in{ display:grid; grid-template-columns:1.3fr 1fr; gap:34px; align-items:start; }
.y3-player{ position:relative; display:block; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; border-radius:8px; }
.y3-player img{ width:100%; height:100%; object-fit:cover; display:block; }
.y3-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.y3-player__btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:70px; height:70px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(58,138,253,.92); transition:transform .18s ease;
}
.y3-player__btn span{
  position:absolute; left:calc(50% + 3px); top:50%; transform:translate(-50%,-50%);
  width:0; height:0; border-left:19px solid #fff;
  border-top:12px solid transparent; border-bottom:12px solid transparent;
}
.y3-player:hover .y3-player__btn{ transform:translate(-50%,-50%) scale(1.07); }

.y3-sermon__list{ background:#fff; border:1px solid var(--y3-line); }
.y3-sermon__list li + li{ border-top:1px solid var(--y3-line); }
.y3-sermon__list a{ display:block; padding:16px 20px; }
.y3-sermon__list a:hover{ background:var(--y3-bg); }
.y3-sermon__cate{ display:inline-block; font-size:11px; color:var(--y3-blue); font-weight:700; }
.y3-sermon__list strong{
  display:block; margin-top:7px; font-size:15px; font-weight:700; color:var(--y3-ink); line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.y3-sermon__verse{ display:block; margin-top:6px; font-size:12.5px; color:#8b94a1; }
.y3-sermon__meta{ display:block; margin-top:6px; font-size:11.5px; color:#aab2be; }

/* --------------------------------------------------------------- 교회소식 */
.y3-news__in{ position:relative; }
.y3-news__head{ text-align:center; margin-bottom:40px; position:relative; }
.y3-news__head h2{ margin-top:14px; }
.y3-news__head .y3-more__btn{ margin-top:22px; }
.y3-news__list{ border-top:2px solid var(--y3-ink); }
.y3-news__list li{ border-bottom:1px solid var(--y3-line); }
.y3-news__list a{ display:grid; grid-template-columns:92px 1fr; gap:20px; align-items:center; padding:20px 6px; }
.y3-news__list a:hover .y3-news__txt strong{ color:var(--y3-blue); }
.y3-date{ text-align:center; border-right:1px solid var(--y3-line); padding-right:16px; }
.y3-date em{ display:block; font-style:normal; font-size:11.5px; color:#aab2be; }
.y3-date b{ display:block; margin-top:2px; font-size:24px; font-weight:800; color:var(--y3-ink); }
.y3-news__txt strong{ display:block; font-size:16px; font-weight:700; color:var(--y3-ink); line-height:1.5; }
.y3-news__txt span{ display:block; margin-top:8px; font-size:13px; color:#9aa3af; }

/* --------------------------------------------------------------- 포토앨범 */
.y3-album{ background:var(--y3-bg); }
.y3-album__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.y3-acard__img{ display:block; aspect-ratio:4/3; overflow:hidden; background:#fff; }
.y3-acard__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.y3-acard:hover .y3-acard__img img{ transform:scale(1.05); }
.y3-acard__meta{ display:block; margin-top:14px; font-size:11.5px; color:#aab2be; }
.y3-acard strong{ display:block; margin-top:7px; font-size:14.5px; font-weight:700; color:var(--y3-ink); line-height:1.5; }
.y3-acard:hover strong{ color:var(--y3-blue); }

/* --------------------------------------------------------------- 기관별 소개 */
.y3-min__in{ display:grid; grid-template-columns:290px 1fr; gap:44px; align-items:start; }
.y3-min__head h2{ margin-top:12px; font-size:clamp(24px,3vw,32px); font-weight:800; color:var(--y3-ink); }
.y3-min__desc{ margin-top:16px; font-size:14px; line-height:1.9; }
.y3-min__head .y3-more__btn{ margin-top:24px; }
.y3-min__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.y3-min__img{ display:block; aspect-ratio:1/1; overflow:hidden; background:var(--y3-bg); border-radius:8px; }
.y3-min__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.y3-min__list a:hover .y3-min__img img{ transform:scale(1.05); }
.y3-min__list strong{ display:block; margin-top:14px; font-size:15px; font-weight:700; color:var(--y3-ink); }
.y3-min__list a:hover strong{ color:var(--y3-blue); }
.y3-min__list span{ display:block; margin-top:7px; font-size:12.5px; line-height:1.7; color:#9aa3af; }

/* --------------------------------------------------------------- 서브페이지 */
.y3-sbanner{ background:var(--y3-bg); border-bottom:1px solid var(--y3-line); padding:44px 0; }
.y3-sbanner h1{ font-size:29px; font-weight:800; color:var(--y3-ink); }
.y3-crumb{ margin-top:14px; display:flex; gap:9px; font-size:12px; color:#9aa3af; }
.y3-crumb span::before{ content:'›'; margin-right:9px; color:#c3cad3; }
.y3-crumb a{ color:var(--y3-blue); }

.y3-sub{ padding:48px 0 90px; }
.y3-sub #bo_list, .y3-sub #bo_v, .y3-sub #bo_w, .y3-sub #bo_vc{
  --adb-maxw:100%; --adb-gutter:0; --adb-accent:#3a8afd; --adb-accent-weak:#eaf2ff;
}

/* --------------------------------------------------------------- 푸터 */
.y3-footer{ background:#1e2430; color:#8b94a1; padding:44px 0 40px; }
.y3-footer__in{ display:grid; grid-template-columns:1.3fr 1fr 1.4fr; gap:30px; }
.y3-footer__brand strong{ display:block; font-size:18px; font-weight:800; color:#fff; }
.y3-footer__brand p{ margin-top:12px; font-size:12.5px; line-height:1.85; color:#7d8794; }
.y3-footer__nav{ font-size:13px; }
.y3-footer__nav li{ margin-bottom:10px; }
.y3-footer__nav a{ color:#95a0ad; }
.y3-footer__nav a:hover{ color:#fff; }
.y3-footer__info{ font-size:12.5px; line-height:1.9; color:#7d8794; }
.y3-footer__info a{ color:#95a0ad; }
.y3-footer__copy{ margin-top:14px; font-size:11.5px; color:#68727e; }

.y3-top{
  position:fixed; right:22px; bottom:22px; z-index:90; width:46px; height:46px;
  background:var(--y3-blue); color:#fff; border:0; cursor:pointer; font-size:13px;
  opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.y3-top.is-on{ opacity:.92; visibility:visible; }
.y3-top:hover{ opacity:1; background:var(--y3-blue-d); }

/* --------------------------------------------------------------- 반응형 */
@media (max-width:1280px){
  :root{ --y3-side:240px; }
  .y3-logo__txt strong{ font-size:19px; }
}
@media (max-width:1024px){
  .y3-mbar{ display:flex; }
  .y3-body{ margin-left:0; padding-top:58px; }
  body:has(.y3-demo) .y3-body{ padding-top:94px; }
  .y3-side{
    transform:translateX(-100%); transition:transform .25s ease; width:280px;
    box-shadow:none;
  }
  .y3-side.is-open{ transform:translateX(0); box-shadow:5px 0 24px rgba(20,28,40,.18); }
  .y3-side__bg{ display:block; position:fixed; inset:0; z-index:150; background:rgba(20,28,40,.45); }
  body:has(.y3-demo) .y3-side{ padding-top:0; }
  .y3-sermon__in{ grid-template-columns:1fr; gap:26px; }
  .y3-album__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .y3-min__in{ grid-template-columns:1fr; gap:28px; }
  .y3-min__head{ text-align:center; }
  .y3-min__head .y3-more__btn{ margin-top:18px; }
  .y3-footer__in{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  :root{ --y3-gutter:18px; }
  .y3-sec{ padding:52px 0; }
  .y3-hline{ padding-top:44px; }
  .y3-sechead{ margin-bottom:30px; }
  .y3-sechead.is-left .y3-more__btn{ position:static; display:inline-block; margin-top:16px; }
  .y3-news__list a{ grid-template-columns:70px 1fr; gap:14px; }
  .y3-date b{ font-size:20px; }
  .y3-news__txt strong{ font-size:14.5px; }
  .y3-album__grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .y3-min__list{ grid-template-columns:1fr 1fr; gap:14px; }
  .y3-footer__in{ grid-template-columns:1fr; gap:24px; }
  .y3-sbanner{ padding:32px 0; }
  .y3-sbanner h1{ font-size:23px; }
}

/* 교회소식 제목 — 같은 hline 스타일의 작은 버전 */
.y3-hline.is-sm{ margin-top:0; font-size:clamp(22px,3vw,38px); text-align:center; }
.y3-hline.is-sm::before{ display:none; }

@media (max-width:1024px){
  .y3-main{ padding:36px var(--y3-gutter) 30px; }
  .y3-slide{ height:280px; border-radius:18px; }
  .y3-hline{ margin-top:48px; }
  .y3-hline::before{ display:none; }
}
@media (max-width:640px){
  .y3-main{ padding:24px var(--y3-gutter) 20px; }
  .y3-slide{ height:200px; border-radius:14px; }
  .y3-hline{ margin-top:34px; }
  .y3-invert{ margin-left:0; padding:0 10px 4px; }
}