@charset "utf-8";
/* ============================================================
   은혜광성교회 — 공용 스타일
   컨셉: 웜블랙 + 아이보리 베이스 / 오렌지 단일 포인트
   ============================================================ */

/* 폰트는 Pretendard 하나만 사용한다 (영문·숫자 포함 전부). */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ---------- 유동 rem 스케일 ---------- */
html{
  font-size: clamp(8.5px, .54vw, 11px);
  scroll-behavior:smooth; scroll-padding-top:calc(var(--hdH) + 2rem);
  /* 스크롤바 자리를 항상 비워둔다 — 전체메뉴를 열 때(body.lock) 스크롤바가 사라지며
     화면이 좌우로 밀려 깜빡이던 현상 방지 */
  scrollbar-gutter: stable;
}
@media (max-width:1240px){ html{ font-size:8px; } }
@media (max-width:768px){  html{ font-size:8.5px; } }

:root{
  /* color */
  --white:#FFFFFF;
  --paper:#FAF7F3;
  --paper-2:#F3EEE7;
  --ink:#15110D;
  --ink-2:#5A5149;
  --ink-3:#948B81;
  --line:#E8E3DC;
  --line-2:#D6CFC5;

  --pt:#F36F2B;
  --pt-deep:#D2551A;
  --pt-soft:#FDF1E8;
  --pt-rgb:243,111,43;

  /* layout */
  --in:  min(92vw, 156rem);
  --in2: min(92vw, 132rem);
  --hdH: 9rem;

  /* type scale */
  --h1: max(9rem, 40px);
  --h2: max(5.6rem, 30px);
  --h3: max(4.2rem, 26px);
  --h4: max(3.4rem, 23px);
  --h5: max(2.8rem, 20px);
  --p1: max(2.2rem, 19px);
  --p2: max(2rem, 17px);
  --p3: max(1.8rem, 16px);
  --p4: max(1.6rem, 15px);
  --p5: max(1.45rem, 13px);

  /* spacing */
  --secPd: max(14rem, 84px);
  --secPdS: max(10rem, 64px);
  --gap: max(3rem, 20px);
  --radius: 2rem;

  --kr:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --en:var(--kr);   /* 영문 눈썹/숫자도 Pretendard. 자간·굵기로만 구분 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --easeOut:cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html,body{ overflow-x:clip; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--kr); font-size:var(--p3); line-height:1.7; letter-spacing:-.015em;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
body.lock{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; -webkit-tap-highlight-color:transparent; }
ul,li{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5{ margin:0; font-weight:700; line-height:1.22; letter-spacing:-.032em; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
:focus-visible{ outline:2px solid var(--pt); outline-offset:3px; border-radius:4px; }

.wrap{ width:var(--in); margin:0 auto; }
.wrap-n{ width:var(--in2); margin:0 auto; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- kicker ---------- */
.kicker{ display:inline-flex; align-items:center; gap:1.2rem; white-space:nowrap; }
.kicker .en{ font-family:var(--en); font-weight:600; font-size:var(--p5); letter-spacing:.2em; text-transform:uppercase; color:var(--pt); }
.kicker .bar{ width:2.6rem; height:1px; background:var(--pt); opacity:.6; }
.kicker .ko{ font-size:var(--p5); font-weight:600; color:var(--ink-3); letter-spacing:0; }
.kicker.on-dark .ko{ color:rgba(255,255,255,.55); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.9rem;
  height:max(5.6rem,50px); padding:0 max(3rem,24px);
  border-radius:999px; font-size:var(--p4); font-weight:600; letter-spacing:-.02em;
  border:1px solid transparent; transition:.28s var(--ease); white-space:nowrap;
}
.btn svg{ width:1.6em; height:1.6em; flex:none; }
.btn-pt{ background:var(--pt); color:#fff; }
.btn-pt:hover{ background:var(--pt-deep); transform:translateY(-2px); box-shadow:0 10px 26px rgba(var(--pt-rgb),.3); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:#000; transform:translateY(-2px); }
.btn-line{ border-color:var(--line-2); color:var(--ink); }
.btn-line:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }
.btn-glass{ border-color:rgba(255,255,255,.45); color:#fff; backdrop-filter:blur(6px); background:rgba(255,255,255,.08); }
.btn-glass:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-sm{ height:max(4.4rem,42px); padding:0 max(2.2rem,18px); font-size:var(--p5); }

.more{
  display:inline-flex; align-items:center; gap:.8rem; font-size:var(--p4); font-weight:600; color:var(--ink-2);
  transition:.25s var(--ease);
}
.more svg{ width:1.5em; height:1.5em; transition:.3s var(--ease); }
.more:hover{ color:var(--pt); } .more:hover svg{ transform:translateX(5px); }

/* ---------- section head ---------- */
.section{ padding:var(--secPd) 0; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--gap); margin-bottom:max(7rem,44px); }
.sec-head .ttl{ font-size:var(--h2); margin-top:1.6rem; }
.sec-head .sub{ font-size:var(--p3); color:var(--ink-2); margin-top:1.6rem; max-width:62rem; }

/* ---------- scroll reveal ---------- */
/* 상태 클래스는 레이아웃 클래스(.in)와 충돌하지 않도록 is- 접두사 사용 */
[data-reveal]{ opacity:0; transform:translateY(3.6rem); transition:opacity .9s var(--easeOut), transform .9s var(--easeOut); }
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:600; height:var(--hdH);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
.site-header::after{
  content:''; position:absolute; inset:auto 0 0 0; height:1px; background:rgba(255,255,255,.16);
  transition:.35s var(--ease);
}
.hd-in{ width:var(--in); height:100%; margin:0 auto; display:flex; align-items:center; gap:var(--gap); }

.brand{ flex:none; display:block; position:relative; width:max(19rem,150px); }
.brand img{ width:100%; transition:opacity .3s var(--ease); }
.brand .logo-color{ position:absolute; inset:0; opacity:0; }

.nav{ flex:1; display:flex; justify-content:center; gap:max(4.4rem,26px); height:100%; }
.nav > a{
  position:relative; display:flex; align-items:center; height:100%;
  font-size:var(--p2); font-weight:600; color:#fff; letter-spacing:-.03em; transition:color .25s var(--ease);
}
.nav > a::after{
  content:''; position:absolute; left:0; right:0; bottom:calc(50% - 1.9em); height:2px; background:var(--pt);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav > a:hover::after, .nav > a.on::after{ transform:scaleX(1); }

.hd-acts{ flex:none; display:flex; align-items:center; gap:1.2rem; }
.hd-btn{
  display:inline-flex; align-items:center; gap:.7rem; height:max(4.4rem,40px); padding:0 max(1.8rem,14px);
  border:1px solid rgba(255,255,255,.35); border-radius:999px; color:#fff;
  font-size:var(--p5); font-weight:600; transition:.28s var(--ease);
}
.hd-btn svg{ width:1.5em; height:1.5em; }
.hd-btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.hd-btn.solid{ background:var(--pt); border-color:var(--pt); }
.hd-btn.solid:hover{ background:var(--pt-deep); border-color:var(--pt-deep); color:#fff; }

/* scrolled / solid state */
.site-header.solid{ background:rgba(255,255,255,.94); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line), 0 8px 30px rgba(21,17,13,.05); height:max(7.4rem,64px); }
.site-header.solid::after{ background:transparent; }
.site-header.solid .brand .logo-white{ opacity:0; }
.site-header.solid .brand .logo-color{ opacity:1; }
.site-header.solid .nav > a{ color:var(--ink); }
.site-header.solid .nav > a:hover{ color:var(--pt); }
.site-header.solid .hd-btn{ border-color:var(--line-2); color:var(--ink); }
.site-header.solid .hd-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.site-header.solid .hd-btn.solid{ background:var(--pt); border-color:var(--pt); color:#fff; }

/* ---------- mega dropdown ---------- */
.mega{
  position:fixed; left:0; right:0; top:var(--hdH); z-index:590;
  background:rgba(255,255,255,.97); backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  box-shadow:0 24px 50px rgba(21,17,13,.09);
  clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
  transition:clip-path .45s var(--easeOut), opacity .3s var(--ease), top .35s var(--ease);
}
.site-header.solid + .mega{ top:max(7.4rem,64px); }
.mega.open{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
.mega-in{ width:var(--in); margin:0 auto; display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap); padding:max(4.6rem,32px) 0 max(5.4rem,38px); }
.mega-col > .h{
  display:block; font-size:var(--p3); font-weight:700; letter-spacing:-.03em; padding-bottom:1.4rem;
  border-bottom:1px solid var(--line); margin-bottom:1.8rem;
}
.mega-col > .h .en{ display:block; font-family:var(--en); font-size:var(--p5); font-weight:600; letter-spacing:.14em; color:var(--pt); text-transform:uppercase; margin-bottom:.5rem; }
.mega-col a.i{ display:block; font-size:var(--p4); color:var(--ink-2); padding:.55rem 0; transition:.2s var(--ease); }
.mega-col a.i:hover{ color:var(--pt); transform:translateX(4px); }

/* ============================================================
   FULL MENU (사이트맵)
   ============================================================ */
.full-menu{
  position:fixed; inset:0; z-index:900; background:var(--ink); color:#fff;
  display:flex; flex-direction:column;
  clip-path:circle(0% at calc(100% - 6rem) 4.5rem); opacity:0; pointer-events:none;
  /* visibility로 완전히 숨겨, 클립이 적용되기 전 한 프레임이 그려지는 것을 막는다 */
  visibility:hidden;
  transition:clip-path .7s var(--easeOut), opacity .3s var(--ease), visibility 0s linear .7s;
  overflow-y:auto;
  will-change:clip-path; transform:translateZ(0);   /* 자체 레이어로 승격 → 잔상 제거 */
}
.full-menu.open{
  clip-path:circle(150% at calc(100% - 6rem) 4.5rem); opacity:1; pointer-events:auto;
  visibility:visible;
  transition:clip-path .7s var(--easeOut), opacity .3s var(--ease), visibility 0s;
}
.fm-top{ flex:none; height:var(--hdH); display:flex; align-items:center; justify-content:space-between; width:var(--in); margin:0 auto; }
.fm-top .brand{ width:max(19rem,150px); }
.fm-close{ display:inline-flex; align-items:center; gap:.8rem; font-size:var(--p4); font-weight:600; color:#fff; }
.fm-close svg{ width:2.2em; height:2.2em; transition:transform .4s var(--ease); }
.fm-close:hover svg{ transform:rotate(90deg); }
.fm-body{ flex:1; width:var(--in); margin:0 auto; padding:max(5rem,34px) 0 max(8rem,50px); }
.fm-eyebrow{ font-family:var(--en); font-size:var(--p5); letter-spacing:.24em; text-transform:uppercase; color:var(--pt); margin-bottom:max(4rem,26px); }
.fm-cols{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap); }
.fm-col > .h{ font-size:var(--h5); font-weight:700; padding-bottom:1.6rem; border-bottom:1px solid rgba(255,255,255,.18); margin-bottom:2rem; }
.fm-col a.i{ display:block; font-size:var(--p4); color:rgba(255,255,255,.6); padding:.6rem 0; transition:.2s var(--ease); }
.fm-col a.i:hover{ color:var(--pt); transform:translateX(5px); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--ink); }

/* Vimeo 배경 영상 — iframe을 16:9로 확대해 화면을 꽉 채운다(cover).
   자동재생이 막히거나 로드 전이면 포스터 이미지가 그대로 보인다. */
.hero-media{
  position:absolute; inset:0; overflow:hidden;
  background:#15110D url('assets/hero-poster.jpg') center/cover no-repeat;
  animation:kenburns 26s ease-in-out infinite alternate;
}
.hero-media iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw;            /* 16:9 */
  min-width:177.78svh; min-height:100svh; /* 세로 화면에서도 빈틈 없게 */
  border:0; pointer-events:none;
  opacity:0; transition:opacity .8s var(--ease);
}
.hero-media.ready iframe{ opacity:1; }
@keyframes kenburns{ from{ transform:scale(1.06) translate3d(0,0,0); } to{ transform:scale(1.14) translate3d(-1.2%,-1%,0); } }
@media (prefers-reduced-motion:reduce){ .hero-media{ animation:none; transform:scale(1.05); } }
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(21,17,13,.62) 0%, rgba(21,17,13,.22) 34%, rgba(21,17,13,.34) 62%, rgba(21,17,13,.88) 100%),
    linear-gradient(96deg, rgba(21,17,13,.60) 0%, rgba(21,17,13,.18) 52%, rgba(21,17,13,0) 78%);
}
/* 콘텐츠를 아래쪽으로 내려 영상 상단을 덜 가린다 (하단 TEBAH 바 위) */
.hero-inner{ position:relative; z-index:2; height:100%; display:flex; align-items:flex-end; padding-bottom:max(15rem,116px); }
.hero-inner .wrap{ width:var(--in); }
.hero-c{ max-width:98rem; color:#fff; }
.hero-c .kicker{ margin-bottom:max(2.6rem,16px); }
.hero-c .kicker .en{ color:#fff; }
.hero-c .kicker .bar{ background:var(--pt); opacity:1; width:3.4rem; height:2px; }
.hero-c .kicker .ko{ color:rgba(255,255,255,.72); }
/* 영상을 덜 가리도록 축소 + 데스크톱에서는 한 줄로 */
.hero-c h1{ font-size:max(5.8rem,30px); font-weight:800; line-height:1.2; letter-spacing:-.04em; }
@media (min-width:861px){ .hero-c h1{ white-space:nowrap; } }
.hero-c h1 em{ font-style:normal; color:var(--pt); }
.hero-c .motto{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.6rem;
  margin-top:max(2.8rem,18px); font-size:var(--p2); font-weight:500; color:rgba(255,255,255,.9);
}
.hero-c .motto i{ display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--pt); font-style:normal; }
.hero-c .welcome{
  margin-top:max(3.2rem,20px); padding-left:max(2.2rem,16px); border-left:2px solid rgba(255,255,255,.28);
  font-size:var(--p3); color:rgba(255,255,255,.78); max-width:56rem;
}
.hero-c .welcome b{ display:block; margin-top:.7rem; font-weight:600; color:#fff; font-size:var(--p4); }
.hero-acts{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:max(4.4rem,28px); }

/* hero bottom bar */
.hero-bar{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-bar .in{ width:var(--in); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--gap); padding:max(2.2rem,16px) 0; }
.tebah{ display:flex; align-items:center; gap:max(2rem,14px); min-width:0; }
.tebah .lb{ display:flex; align-items:center; gap:.9rem; flex:none; font-size:var(--p3); font-weight:700; color:#fff; }
.tebah .lb span{ font-family:var(--en); letter-spacing:.16em; color:var(--pt); }
.tebah .chips{ display:flex; gap:.8rem; overflow:hidden; }
.tebah .chips a{
  flex:none; padding:.65rem 1.6rem; border:1px solid rgba(255,255,255,.3); border-radius:999px;
  font-size:var(--p4); font-weight:500; color:rgba(255,255,255,.88); transition:.25s var(--ease);
}
.tebah .chips a:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.scroll-cue{ display:flex; align-items:center; gap:1rem; flex:none; font-family:var(--en); font-size:var(--p5); letter-spacing:.22em; color:rgba(255,255,255,.62); }
.scroll-cue .line{ position:relative; display:block; width:6rem; height:1px; background:rgba(255,255,255,.28); overflow:hidden; }
.scroll-cue .line::after{ content:''; position:absolute; inset:0 auto 0 0; width:40%; background:var(--pt); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateX(-100%);} 60%,100%{ transform:translateX(250%);} }

/* ============================================================
   QUICK MENU
   ============================================================ */
.quick{ border-bottom:1px solid var(--line); background:var(--white); }
.quick-grid{ width:var(--in); margin:0 auto; display:grid; grid-template-columns:repeat(6,1fr); }
.quick-grid a{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
  padding:max(4.6rem,30px) 1rem max(4.2rem,28px);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.quick-grid a + a::before{ content:''; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--line); }
.quick-grid a:hover{ background:var(--pt-soft); }
.qi{ width:max(5.4rem,46px); height:max(5.4rem,46px); color:var(--ink); }
.qi svg{ width:100%; height:100%; }
.qi .m{ stroke:currentColor; }
.qi .a{ stroke:var(--pt); }
.qi .af{ fill:var(--pt); stroke:none; }
.quick-grid a:hover .qi{ transform:translateY(-3px); }
.qi{ transition:transform .35s var(--ease); }
.q-en{ font-family:var(--en); font-size:var(--p5); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.q-ko{ font-size:var(--p2); font-weight:600; letter-spacing:-.03em; }
.quick-grid a:hover .q-en{ color:var(--pt); }
.q-ar{ position:absolute; top:max(1.8rem,14px); right:max(1.8rem,14px); width:1.8rem; height:1.8rem; color:var(--line-2); opacity:0; transform:translate(-6px,6px); transition:.3s var(--ease); }
.quick-grid a:hover .q-ar{ opacity:1; transform:none; color:var(--pt); }

/* ============================================================
   SERMON
   ============================================================ */
.sermon{ background:var(--paper); }
.sermon-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:max(6rem,32px); align-items:center; }
.svid{
  position:relative; border-radius:var(--radius); overflow:hidden; background:var(--ink);
  aspect-ratio:16/9; box-shadow:0 30px 70px rgba(21,17,13,.16);
}
.svid img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--easeOut), opacity .4s; }
.svid:hover img{ transform:scale(1.045); }
.svid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.svid .veil{
  position:absolute; inset:0; transition:background .4s var(--ease);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(21,17,13,.42), rgba(21,17,13,0) 70%),
    linear-gradient(180deg, rgba(21,17,13,.32) 0%, rgba(21,17,13,.10) 45%, rgba(21,17,13,.50) 100%);
}
.svid:hover .veil{ background:radial-gradient(60% 60% at 50% 50%, rgba(21,17,13,.28), rgba(21,17,13,0) 72%), linear-gradient(180deg, rgba(21,17,13,.24) 0%, rgba(21,17,13,.06) 45%, rgba(21,17,13,.44) 100%); }
.svid .tag{
  position:absolute; top:max(2rem,14px); left:max(2rem,14px); z-index:2;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.6rem 1.4rem; border-radius:999px; background:var(--pt); color:#fff;
  font-size:var(--p5); font-weight:600;
}
.svid .tag i{ width:6px; height:6px; border-radius:50%; background:#fff; animation:blink 1.6s infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
.svid .play{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
}
.svid .play span{
  position:relative; display:grid; place-items:center;
  width:max(9rem,72px); height:max(9rem,72px); border-radius:50%;
  background:rgba(21,17,13,.42); backdrop-filter:blur(10px); border:1.5px solid rgba(255,255,255,.85);
  color:#fff; transition:.35s var(--ease); box-shadow:0 8px 30px rgba(21,17,13,.3);
}
/* 재생버튼 주위로 퍼지는 링 */
.svid .play span::before{
  content:''; position:absolute; inset:-1.5px; border-radius:50%; border:1.5px solid rgba(255,255,255,.6);
  animation:ring 2.6s var(--easeOut) infinite;
}
@keyframes ring{ 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(1.55); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .svid .play span::before{ animation:none; opacity:0; } }
.svid .play span svg{ width:2.6rem; height:2.6rem; margin-left:3px; }
.svid:hover .play span{ background:var(--pt); border-color:var(--pt); transform:scale(1.08); }

.sinfo .when{ display:inline-flex; align-items:center; gap:.8rem; font-size:var(--p4); color:var(--pt); font-weight:600; }
.sinfo h3{ font-size:var(--h3); margin:1.8rem 0 2rem; }
.sinfo .by{ display:flex; align-items:center; flex-wrap:wrap; gap:.8rem 1.6rem; font-size:var(--p3); color:var(--ink-2); }
.sinfo .by .verse{
  padding:.45em .9em; border-radius:6px; background:var(--paper-2);
  font-size:var(--p5); font-weight:600; color:var(--ink-2);
}
.sinfo .btn{ margin-top:max(3.4rem,22px); }
.slist{ margin-top:max(4rem,26px); border-top:1px solid var(--line-2); }
.slist a{ display:flex; align-items:center; gap:1.6rem; padding:1.5rem 0; border-bottom:1px solid var(--line); transition:.25s var(--ease); }
.slist a:hover{ padding-left:.8rem; }
.slist .d{ flex:none; font-family:var(--en); font-size:var(--p5); color:var(--ink-3); letter-spacing:.02em; }
.slist .t{ flex:1; min-width:0; font-size:var(--p4); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slist .p{ flex:none; font-size:var(--p5); color:var(--ink-3); }
.slist a:hover .t{ color:var(--pt); }
.slist a:hover .p{ color:var(--ink-2); }
.slist svg{ flex:none; width:1.5rem; height:1.5rem; color:var(--line-2); transition:.25s var(--ease); }
.slist a:hover svg{ color:var(--pt); transform:translateX(4px); }

/* ============================================================
   NEWS
   ============================================================ */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:max(3.4rem,20px); }
.ncard{
  display:flex; flex-direction:column; padding:max(4rem,26px); border:1px solid var(--line); border-radius:var(--radius);
  background:var(--white); transition:.4s var(--ease);
}
.ncard:hover{ border-color:var(--ink); transform:translateY(-6px); box-shadow:0 24px 50px rgba(21,17,13,.08); }
.nc-head{ display:flex; align-items:center; justify-content:space-between; gap:1.4rem; padding-bottom:max(2.4rem,16px); border-bottom:1px solid var(--line); }
.nc-head h3{ font-size:var(--h5); }
.nc-head .en{ font-family:var(--en); font-size:var(--p5); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.ncard:hover .nc-head .en{ color:var(--pt); }
.nc-list{ flex:1; padding-top:max(1.6rem,10px); }
.nc-list a{ display:block; padding:1.5rem 0; border-bottom:1px dashed var(--line); transition:.22s var(--ease); }
.nc-list a:last-child{ border-bottom:0; }
.nc-list .t{
  display:flex; align-items:center; gap:.8rem;
  font-size:var(--p4); font-weight:500; line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nc-list .t em{
  flex:none; font-style:normal; font-size:var(--p5); font-weight:600; line-height:1;
  padding:.42em .7em; border-radius:4px;
}
.nc-list .t em.pin{ background:var(--pt); color:#fff; }
/* 경조사 분류 — 장례 / 결혼 / 공지 세 가지를 색으로 구분 */
.nc-list .t em.cat{ background:var(--paper-2); color:var(--ink-2); }
.nc-list .t em.cat.funeral{ background:var(--paper-2); color:var(--ink-2); }
.nc-list .t em.cat.wedding{ background:var(--pt-soft); color:var(--pt-deep); }
.nc-list .t em.cat.notice{ background:var(--pt); color:#fff; }
.nc-list .d{ display:block; margin-top:.5rem; font-family:var(--en); font-size:var(--p5); color:var(--ink-3); letter-spacing:.02em; }
.nc-list a:hover .t{ color:var(--pt); }
.nc-list a:hover .t em.cat.funeral{ background:var(--pt-soft); color:var(--pt-deep); }
.nc-foot{ margin-top:max(2.4rem,16px); }

/* 주보 카드 강조 — 검정 대신 따뜻한 오렌지 톤(답답하지 않게) */
.ncard.feature{ background:var(--pt-soft); border-color:#F6D7C2; }
.ncard.feature .nc-head{ border-color:#F0C7AC; }
.ncard.feature .nc-head .en{ color:var(--pt-deep); }
.ncard.feature .bul{ padding:max(3rem,20px) 0 max(2.4rem,16px); }
.ncard.feature .bul .lb{ font-size:var(--p5); color:var(--pt-deep); font-family:var(--en); letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.ncard.feature .bul .dt{ font-size:var(--h4); font-weight:700; margin-top:1rem; letter-spacing:-.035em; color:var(--ink); }
.ncard.feature .nc-list a{ border-color:#F0C7AC; }
.ncard.feature .nc-list .t{ color:var(--ink-2); font-size:var(--p5); }
.ncard.feature .nc-list .d{ color:#B58B6C; }
.ncard.feature .nc-list a:hover .t{ color:var(--pt-deep); }
.ncard.feature:hover{ border-color:var(--pt); }

/* .tbd 플레이스홀더 */
.tbd{
  display:flex; align-items:center; gap:.8rem; padding:1.4rem 0; font-size:var(--p4); color:var(--ink-3);
}
.tbd::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--line-2); flex:none; }

/* ============================================================
   VISIT
   ============================================================ */
/* 오시는 길 — 검정 대신 살짝 깊은 아이보리 (뉴스=흰색 / 푸터=페이퍼 사이 톤) */
.visit{ background:var(--paper-2); color:var(--ink); }
.visit-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:max(6rem,32px); align-items:center; }
.visit-map{
  position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3;
  background:var(--white); border:1px solid var(--line-2);
}
.visit-map iframe{ width:100%; height:100%; border:0; display:block; }
.visit-map .badge{
  position:absolute; left:max(2.4rem,16px); bottom:max(2.4rem,16px); pointer-events:none;
  display:inline-flex; align-items:center; gap:.8rem; padding:.9rem 1.8rem; border-radius:999px;
  background:rgba(21,17,13,.78); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.22);
  font-size:var(--p5); font-weight:600; color:#fff;
}
.visit-c .kicker .ko{ color:var(--ink-3); }
.visit-c h2{ font-size:var(--h2); margin:1.6rem 0 max(3.4rem,22px); }
.vrow{ display:flex; gap:1.6rem; padding:max(2.2rem,15px) 0; border-top:1px solid var(--line-2); }
.vrow:last-of-type{ border-bottom:1px solid var(--line-2); }
.vrow .ic{ flex:none; width:max(2.6rem,22px); color:var(--pt); }
.vrow .ic svg{ width:100%; height:auto; }
.vrow .tx{ min-width:0; }
.vrow .lb{ font-family:var(--en); font-size:var(--p5); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.vrow .vl{ font-size:var(--p2); font-weight:500; margin-top:.4rem; }
.vrow .vl small{ display:block; font-size:var(--p5); color:var(--ink-3); font-weight:400; margin-top:.3rem; }
.vrow a.vl:hover{ color:var(--pt); }
.visit-acts{ display:flex; flex-wrap:wrap; gap:1.1rem; margin-top:max(3.4rem,22px); }

/* ============================================================
   FOOTER
   ============================================================ */
/* yungjin.co.kr 문법: 얇은 상단 경계 + 넉넉한 여백,
   좌측(로고 → 큰 문장 → 정책링크 한 줄 → 주소/전화 → 카피라이트) / 우측(큰 텍스트 링크 스택) */
.footer{
  background:var(--paper);            /* 순백 대신 사이트 기본 아이보리 — 위 다크 섹션과 덜 부딪힌다 */
  border-top:1px solid var(--line-2);
  padding:max(9rem,56px) 0 max(8rem,48px);
}
.ft-in{ display:flex; justify-content:space-between; gap:var(--gap); }

/* 로고는 원색(오렌지) 그대로 — 푸터에 유일한 색 앵커 */
.ft-logo{ display:block; width:max(20rem,158px); }

.ft-lead{
  margin-top:max(4rem,26px);
  font-size:var(--h4); font-weight:600; line-height:1.4; letter-spacing:-.03em; color:var(--ink-2);
}
.ft-lead em{ font-style:normal; font-weight:700; color:var(--pt); }

.ft-pol{ display:flex; flex-wrap:wrap; gap:1rem 2.4rem; margin:max(7rem,42px) 0 max(2rem,14px); }
.ft-pol a{ font-size:var(--p4); color:var(--ink-3); transition:.2s var(--ease); }
.ft-pol a.bold{ font-weight:600; color:var(--ink-2); }
.ft-pol a:hover{ color:var(--pt); }
.ft-info{ display:flex; flex-direction:column; gap:.4rem; font-size:var(--p4); color:var(--ink-3); }
.ft-info a:hover{ color:var(--pt); }
.ft-copy{ margin-top:max(2rem,14px); font-size:var(--p5); color:var(--ink-3); opacity:.8; letter-spacing:.01em; }

.ft-right{ display:flex; flex-direction:column; align-items:flex-start; gap:max(1.8rem,13px); padding-right:max(10rem,0px); }
.ft-right a{
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:var(--p1); font-weight:500; letter-spacing:-.025em; color:var(--ink-2);
  transition:.22s var(--ease);
}
.ft-right a::after{ content:''; width:0; height:1px; background:var(--pt); transition:width .3s var(--ease); }
.ft-right a:hover{ color:var(--pt); }
.ft-right a:hover::after{ width:1.6rem; }
/* 새창 링크 표시 (yungjin의 out-link 아이콘 자리) */
.ft-right a.out::before{
  content:''; flex:none; order:2; width:1.5rem; height:1.5rem;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7M9 7h8v8'/></svg>") no-repeat center/contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7M9 7h8v8'/></svg>") no-repeat center/contain;
}

/* ============================================================
   SUB PAGE  (yungjin.co.kr 서브 레이아웃 문법)
   .sub-head(브레드크럼+대제목) → 서브탭 → 인트로 → 정의리스트 → 연혁
   ============================================================ */
body.is-sub{ padding-top:var(--hdH); }
/* 서브는 첫 화면부터 흰 배경이므로 헤더를 항상 솔리드로 */
body.is-sub .site-header{ background:rgba(255,255,255,.94); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); }
body.is-sub .site-header::after{ background:transparent; }
body.is-sub .brand .logo-white{ opacity:0; }
body.is-sub .brand .logo-color{ opacity:1; }
body.is-sub .nav > a{ color:var(--ink); }
body.is-sub .hd-btn{ border-color:var(--line-2); color:var(--ink); }
body.is-sub .hd-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
body.is-sub .hd-btn.solid{ background:var(--pt); border-color:var(--pt); color:#fff; }
body.is-sub .menu-toggle{ border-color:var(--line-2); color:var(--ink); }

.sub{ padding:max(9rem,52px) 0 max(16rem,88px); }
.sub-in{ width:var(--in2); margin:0 auto; }

.bread{ display:flex; align-items:center; gap:.9rem; font-size:var(--p5); color:var(--ink-3); }
.bread .home{ display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; color:var(--ink-3); }
.bread .home svg{ width:100%; height:100%; }
.bread .home:hover{ color:var(--pt); }
.bread > * + *::before{ content:'/'; margin-right:.9rem; color:var(--line-2); }
.bread > span:last-child{ color:var(--ink-2); font-weight:600; }

.page-tit{ margin-top:max(2.4rem,16px); font-size:var(--h2); font-weight:700; letter-spacing:-.035em; }

/* 서브탭 */
.subtabs{ margin-top:max(4.4rem,28px); border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.subtabs::-webkit-scrollbar{ display:none; }
.subtabs .st-in{ display:flex; gap:max(3rem,18px); min-width:max-content; }
.subtabs a{
  position:relative; padding:0 0 1.5rem; font-size:var(--p4); font-weight:500; color:var(--ink-3);
  white-space:nowrap; transition:.2s var(--ease);
}
.subtabs a::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--pt); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.subtabs a:hover{ color:var(--ink); }
.subtabs a.on{ color:var(--ink); font-weight:700; }
.subtabs a.on::after{ transform:scaleX(1); }

/* ---- 인트로 ---- */
.s-intro{ padding-top:max(10rem,56px); }
.s-lead{ font-size:var(--h3); font-weight:700; line-height:1.36; letter-spacing:-.035em; }
.s-kv{ margin:max(6rem,32px) 0 max(4rem,24px); height:max(42rem,220px); border-radius:1.2rem; overflow:hidden; background:var(--paper-2); }
.s-kv img{ width:100%; height:100%; object-fit:cover; }
.s-cols{ display:flex; justify-content:space-between; gap:var(--gap); }
.s-key{ font-size:var(--h5); font-weight:700; line-height:1.6; letter-spacing:-.03em; color:var(--ink-3); }
.s-key em{ font-style:normal; color:var(--pt); }
.s-desc{ width:min(100%, 62rem); font-size:var(--p3); color:var(--ink-2); }

/* ---- 이미지 자리(플레이스홀더) ----
   실제 사진을 받으면 .ph 통째로 <img>로 교체하면 된다. 비율 클래스만 유지. */
.ph{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
  background:var(--paper); border:1px dashed var(--line-2); border-radius:1.2rem;
  color:var(--ink-3); overflow:hidden; transition:.3s var(--ease);
}
.ph:hover{ border-color:var(--pt); color:var(--pt); background:var(--pt-soft); }
.ph.r16x9{ aspect-ratio:16/9; }
.ph.r4x3{ aspect-ratio:4/3; }
.ph-ic{ width:max(4.4rem,36px); height:max(4.4rem,36px); }
.ph-ic svg{ width:100%; height:100%; }
.ph i{ font-style:normal; font-size:var(--p5); letter-spacing:-.01em; }

/* ---- 좌 제목 / 우 내용 ---- */
.fx{ display:flex; justify-content:space-between; gap:var(--gap); }
.fx-l h2, .fx-l-top h2{ font-size:var(--h3); font-weight:700; letter-spacing:-.035em; }
.fx-r{ width:min(100%, 74rem); }

/* ---- 세 가지 교회상 ---- */
.s-values{ margin-top:max(14rem,72px); }
.val + .val{ margin-top:max(7rem,40px); }
.val-tx{ margin-top:max(2.6rem,18px); }
.val-n{
  display:inline-block; font-size:var(--p5); font-weight:700; letter-spacing:.1em; color:var(--pt);
  margin-bottom:.8rem;
}
.val-tx h3{ font-size:var(--h5); font-weight:700; letter-spacing:-.03em; }
.val-tx .tbd{ margin-top:1rem; }
.val-src{
  margin-top:max(4rem,24px); padding-top:max(2.4rem,16px); border-top:1px solid var(--line);
  font-size:var(--p5); color:var(--ink-3);
}

/* ---- 새성전 ---- */
.s-space{ margin-top:max(14rem,72px); }
.sp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:max(2.4rem,16px); }
.sp-tx{ grid-column:1 / -1; margin-top:max(1.6rem,10px); }
.sp-tx .t{ font-size:var(--h5); font-weight:700; letter-spacing:-.03em; }
.sp-tx .d{ margin-top:1.4rem; font-size:var(--p3); color:var(--ink-2); }
.sp-tx .btn{ margin-top:max(2.6rem,18px); }

.s-facts{ position:relative; margin-top:max(14rem,72px); padding:max(11rem,58px) 0; }
.s-facts::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100vw; height:100%; background:var(--paper); z-index:-1;
}
.dls{ display:flex; flex-direction:column; gap:max(4.4rem,28px); margin:0; }
.dls .dl{ display:flex; flex-direction:column; gap:1rem; }
.dls dt{ font-size:var(--h5); font-weight:700; letter-spacing:-.03em; }
.dls dd{ margin:0; font-size:var(--p3); color:var(--ink-2); }
.dls dd span{ display:block; margin-top:.4rem; font-size:var(--p5); color:var(--ink-3); }

/* ---- 연혁 (sticky 연대 내비) ---- */
.s-history{ margin-top:max(14rem,72px); }
.pin{ position:relative; display:flex; justify-content:space-between; gap:var(--gap); }
.pin-l{
  position:sticky; top:calc(var(--hdH) + 4rem); align-self:flex-start;
  width:26rem; flex:none;
}
.pin-l h2{ font-size:var(--h3); font-weight:700; letter-spacing:-.035em; margin-bottom:max(4rem,24px); }
.pin-nav{ display:flex; flex-direction:column; align-items:flex-start; gap:1.6rem; }
.pin-nav button{
  font-size:var(--p2); font-weight:600; letter-spacing:-.03em; color:var(--ink-3);
  transition:.25s var(--ease); text-align:left;
}
.pin-nav button:hover{ color:var(--ink); }
.pin-nav button.on{ color:var(--pt); }
.pin-con{ width:min(100%, 74rem); }

.era + .era{ margin-top:max(9rem,48px); }
.era-t{
  font-size:var(--h4); font-weight:700; letter-spacing:-.035em;
  padding-bottom:2rem; border-bottom:2px solid var(--ink);
}
.ev{ display:flex; gap:max(3.4rem,16px); padding:max(3.2rem,20px) 0; border-bottom:1px solid var(--line); }
.ev-d{ flex:none; width:max(11rem,84px); }
.ev-d b{ display:block; font-size:var(--p2); font-weight:700; letter-spacing:-.02em; }
.ev-d i{ display:block; margin-top:.3rem; font-style:normal; font-size:var(--p5); color:var(--pt); font-weight:600; }
.ev-c{ flex:1; min-width:0; }
.ev-t{ font-size:var(--p3); font-weight:500; line-height:1.6; }
.ev-c .sm{ margin-top:.5rem; font-size:var(--p4); color:var(--ink-3); }

/* 임직 명단 접기 */
details.roll{ margin-top:1.6rem; }
details.roll > summary{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; list-style:none;
  padding:.7rem 1.4rem; border:1px solid var(--line-2); border-radius:999px;
  font-size:var(--p5); font-weight:600; color:var(--ink-2); transition:.22s var(--ease);
}
details.roll > summary::-webkit-details-marker{ display:none; }
details.roll > summary::after{
  content:''; width:.9rem; height:.9rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s var(--ease);
}
details.roll[open] > summary::after{ transform:rotate(225deg) translate(-1px,-1px); }
details.roll > summary:hover{ border-color:var(--ink); color:var(--ink); }
.roll-b{
  margin-top:1.6rem; padding:max(2.4rem,16px); border-radius:1rem; background:var(--paper);
  font-size:var(--p5); color:var(--ink-2); line-height:1.9;
}
.roll-b p{ word-break:keep-all; }
.roll-b .hd{ margin-top:1.4rem; font-weight:700; color:var(--pt-deep); }
.roll-b .hd:first-child{ margin-top:0; }

@media (max-width:1180px){
  .pin-l{ width:20rem; }
}
@media (max-width:860px){
  .sub{ padding-top:max(5rem,30px); }
  .s-cols{ flex-direction:column; gap:2.4rem; }
  .fx{ flex-direction:column; gap:max(4rem,24px); }
  .fx-r{ width:100%; }
  .sp-grid{ grid-template-columns:1fr; }
  .pin{ flex-direction:column; }
  .pin-l{ position:static; width:100%; }
  .pin-l h2{ margin-bottom:2.4rem; }
  .pin-nav{
    position:sticky; top:var(--hdH); z-index:10; flex-direction:row; width:100%;
    gap:1.8rem; overflow-x:auto; scrollbar-width:none;
    padding:1.6rem 0; margin-bottom:2rem; background:var(--white); border-bottom:1px solid var(--line);
  }
  .pin-nav::-webkit-scrollbar{ display:none; }
  .pin-nav button{ white-space:nowrap; font-size:var(--p4); }
  .pin-con{ width:100%; }
  .ev{ flex-direction:column; gap:.8rem; }
  .ev-d{ display:flex; align-items:baseline; gap:.8rem; width:auto; }
  .ev-d i{ margin-top:0; }
}

/* 맨 위로 */
.to-top{
  position:fixed; right:max(3rem,18px); bottom:max(10.4rem,78px); z-index:500;
  display:grid; place-items:center; width:max(5.6rem,50px); height:max(5.6rem,50px);
  border-radius:50%; background:var(--white); color:var(--ink); border:1px solid var(--line-2);
  box-shadow:0 10px 28px rgba(21,17,13,.12); transition:.3s var(--ease);
  opacity:0; transform:translateY(20px); pointer-events:none;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-3px); }
.to-top svg{ width:2rem; height:2rem; }

/* ============================================================
   VR MODAL + FLOAT
   ============================================================ */
.vr-float{
  position:fixed; right:max(3rem,18px); bottom:max(3rem,18px); z-index:500;
  display:inline-flex; align-items:center; gap:.9rem; height:max(5.6rem,50px); padding:0 max(2.2rem,18px);
  border-radius:999px; background:var(--ink); color:#fff; font-size:var(--p5); font-weight:600;
  box-shadow:0 12px 34px rgba(21,17,13,.28); transition:.3s var(--ease);
  opacity:0; transform:translateY(20px); pointer-events:none;
}
.vr-float.show{ opacity:1; transform:none; pointer-events:auto; }
.vr-float:hover{ background:var(--pt); transform:translateY(-3px); }
.vr-float svg{ width:2rem; height:2rem; }

.modal{ position:fixed; inset:0; z-index:950; display:grid; place-items:center; padding:max(3rem,16px); opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.modal.open{ opacity:1; pointer-events:auto; }
.modal .bg{ position:absolute; inset:0; background:rgba(10,8,6,.82); backdrop-filter:blur(6px); }
.modal .box{
  position:relative; width:min(100%, 128rem); aspect-ratio:16/10; max-height:86svh;
  background:var(--ink); border-radius:var(--radius); overflow:hidden;
  transform:scale(.96) translateY(12px); transition:transform .45s var(--easeOut);
  box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.modal.open .box{ transform:none; }
.modal .box iframe{ width:100%; height:100%; border:0; }
.modal .x{
  position:absolute; top:max(1.6rem,12px); right:max(1.6rem,12px); z-index:3;
  display:grid; place-items:center; width:max(4.6rem,42px); height:max(4.6rem,42px); border-radius:50%;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); color:#fff;
  transition:.3s var(--ease);
}
.modal .x svg{ width:2rem; height:2rem; }
.modal .x:hover{ background:#fff; color:var(--ink); transform:rotate(90deg); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
.menu-toggle{ display:none; }

@media (max-width:1400px){
  .nav{ gap:max(3rem,20px); }
  .mega-in{ gap:2rem; }
}
@media (max-width:1180px){
  :root{ --hdH:7.6rem; }
  .nav, .hd-btn .lb-vr, #menuOpenPc{ display:none; }
  .mega{ display:none; }
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
    width:max(4.6rem,42px); height:max(4.6rem,42px); border:1px solid rgba(255,255,255,.35); border-radius:50%; color:#fff;
    transition:.25s var(--ease);
  }
  .menu-toggle svg{ width:2.2rem; height:2.2rem; }
  .site-header.solid .menu-toggle{ border-color:var(--line-2); color:var(--ink); }
  .hd-in{ justify-content:space-between; }
  .fm-cols{ grid-template-columns:repeat(3,1fr); row-gap:max(4rem,26px); }
  .sermon-grid, .visit-grid{ grid-template-columns:1fr; }
  .news-grid{ grid-template-columns:1fr 1fr; }
  .ncard.feature{ grid-column:span 2; }
  .quick-grid{ grid-template-columns:repeat(3,1fr); }
  .quick-grid a:nth-child(3n+1)::before{ display:none; }
  .quick-grid a:nth-child(n+4)::after{ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); }
}
@media (max-width:860px){
  :root{ --in:min(90vw,60rem); --secPd:max(9rem,60px); --radius:1.6rem; }
  .hero{ height:100svh; min-height:560px; }
  .hero-c h1{ font-size:max(6.4rem,34px); }
  .hero-c .welcome{ display:none; }
  .hero-bar .in{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .scroll-cue{ display:none; }
  .tebah{ width:100%; flex-direction:column; align-items:flex-start; gap:1rem; }
  .tebah .chips{ width:100%; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
  .tebah .chips::-webkit-scrollbar{ display:none; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:1.6rem; }
  .news-grid{ grid-template-columns:1fr; }
  .ncard.feature{ grid-column:auto; }
  .fm-cols{ grid-template-columns:repeat(2,1fr); }
  /* 푸터: yungjin 모바일과 동일하게 세로 스택 + 정책링크 세로 나열 */
  .ft-in{ flex-direction:column; }
  .ft-pol{ flex-direction:column; gap:1.4rem; margin:max(5rem,32px) 0 max(2.4rem,16px); }
  .ft-right{ order:-1; flex-direction:row; flex-wrap:wrap; gap:1.2rem 2.4rem; padding-right:0; margin-bottom:max(5rem,32px); }
  .ft-right a{ font-size:var(--p2); }
}
@media (max-width:560px){
  .quick-grid{ grid-template-columns:repeat(2,1fr); }
  .quick-grid a::before{ display:none !important; }
  .quick-grid a:nth-child(2n)::before{ content:''; display:block !important; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--line); }
  .quick-grid a:nth-child(n+3)::after{ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line); }
  .hero-acts .btn{ flex:1 1 auto; }
  .fm-cols{ grid-template-columns:1fr; }
  .visit-acts .btn{ flex:1 1 45%; }
  /* 모바일에서는 VR 플로팅 버튼을 아이콘만 남겨 본문 가림 최소화 */
  .vr-float{ width:52px; padding:0; justify-content:center; font-size:0; gap:0; }
  .vr-float svg{ width:22px; height:22px; }
}