/* ============================================================
   목사임직예배 모바일 초대장 — 디자인
   ============================================================ */

:root{
  --bg:        #FBF7F0;   /* 본문 배경 (사진의 벽 색) */
  --bg-soft:   #F4EDE1;   /* 섹션 강조 배경 */
  --outside:   #EFE7DA;   /* PC에서 좌우 여백 색 */
  --ink:       #33291F;   /* 기본 글자색 (진한 갈색) */
  --ink-2:     #574C40;   /* 본문 글자색 */
  --muted:     #928574;   /* 흐린 글자색 */
  --point:     #96754C;   /* 포인트 색 (십자가 나무색) */
  --line:      #E6DCCC;   /* 선 */
  --shell:     430px;     /* 모바일 화면 최대 폭 */

  --serif: 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;
  --sans:  'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
           'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--outside);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}

/* PC에서도 가운데 모바일 화면 유지 */
.phone{
  max-width:var(--shell);
  margin:0 auto;
  background:var(--bg);
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  position:relative;
  box-shadow:0 0 60px rgba(80,66,50,.10);
}

img{ max-width:100%; display:block; }

/* ---------- 등장 애니메이션 ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .cover__scroll span{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   COVER
   ============================================================ */
.cover{
  position:relative;
  height:100vh;
  height:100dvh;
  min-height:580px;
  display:flex;
  align-items:flex-end;          /* 글씨를 아래쪽 빈 벽에 배치 */
  justify-content:center;
  overflow:hidden;
  /* 이미지가 없을 때 보이는 은은한 배경 */
  background:linear-gradient(180deg, #F9F1E2 0%, #F2E7D3 55%, #EADCC3 100%);
}

.cover__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;   /* data.js 의 heroPosition 으로 조절됩니다 */
}

/* 사진 아래쪽을 아이보리로 부드럽게 덮어 글씨가 잘 읽히게 합니다 */
.cover__veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
      rgba(251,247,240,0)    38%,
      rgba(251,247,240,.55)  56%,
      rgba(251,247,240,.88)  72%,
      rgba(251,247,240,.98)  88%,
      rgba(251,247,240,1)   100%);
}

.cover__inner{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 32px 17vh;
  text-align:center;
  color:var(--ink);
}

.cover__host{
  margin:0 0 22px;
  font-size:12px;
  letter-spacing:.30em;
  text-indent:.30em;
  color:var(--point);
  font-weight:600;
  transition-delay:.15s;
}

.cover__title{
  margin:0;
  font-family:var(--serif);
  font-size:37px;
  font-weight:400;
  line-height:1.42;
  letter-spacing:.10em;
  text-indent:.10em;
  color:#3B2F23;
  transition-delay:.35s;
}

.cover__rule{
  display:block;
  width:34px; height:1px;
  margin:28px auto;
  background:rgba(150,117,76,.55);
  transition-delay:.55s;
}

.cover__date{
  margin:0 0 8px;
  font-size:16px;
  letter-spacing:.03em;
  color:#4A4038;
  transition-delay:.70s;
}

.cover__place{
  margin:0;
  font-size:14px;
  letter-spacing:.10em;
  color:var(--muted);
  transition-delay:.82s;
}

.cover__scroll{
  position:absolute;
  left:50%;
  bottom:calc(30px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:2;
}
.cover__scroll span{
  display:block;
  width:1px; height:40px;
  background:linear-gradient(to bottom, rgba(150,117,76,0), rgba(150,117,76,.60));
  animation:scrollHint 2.4s ease-in-out infinite;
}
@keyframes scrollHint{
  0%   { opacity:0; transform:scaleY(.3); transform-origin:top; }
  40%  { opacity:1; transform:scaleY(1);  transform-origin:top; }
  70%  { opacity:1; }
  100% { opacity:0; }
}

/* ============================================================
   공통 섹션
   ============================================================ */
.sect{
  padding:92px 30px;
  text-align:center;
}

.eyebrow{
  margin:0 0 14px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.28em;
  text-indent:.28em;
  color:var(--point);
}

.sect__title{
  margin:0 0 10px;
  font-family:var(--serif);
  font-size:23px;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--ink);
  transition-delay:.08s;
}

.sect__lead{
  margin:0 0 34px;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.02em;
  transition-delay:.14s;
}
.sect__title + .ord-grid,
.sect__title + .info-list,
.sect__title + .order-wrap{ margin-top:38px; }

/* ---------- INVITATION ---------- */
.sect--invite{ padding-top:96px; }

.verse{
  margin:34px 0 40px;
  padding:0;
  transition-delay:.16s;
}
.verse p{
  margin:0 0 14px;
  font-family:var(--serif);
  font-size:16px;
  line-height:1.95;
  color:var(--point);
  letter-spacing:.01em;
  white-space:pre-line;   /* data.js 의 \n 으로 줄바꿈 */
}
.verse p::before{ content:'“'; margin-right:2px; }
.verse p::after { content:'”'; margin-left:2px; }
.verse cite{
  display:block;
  font-style:normal;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--muted);
}

.invite__body{
  margin:0;
  font-size:16px;
  line-height:2.15;
  color:var(--ink-2);
  transition-delay:.22s;
}

.invite__sign{
  margin:38px 0 0;
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.14em;
  color:var(--ink);
  transition-delay:.30s;
}
.invite__sign::before{
  content:'';
  display:block;
  width:26px; height:1px;
  margin:0 auto 24px;
  background:var(--line);
}

/* ---------- ORDAINEES ---------- */
.sect--ordainees{
  background:var(--bg-soft);
}

.ord-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}

.ord-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:3px;
  padding:22px 10px 20px;
  text-align:center;
}

.ord-card__name{
  display:block;
  font-family:var(--serif);
  font-size:19px;
  letter-spacing:.08em;
  color:var(--ink);
  line-height:1.4;
}

/* 직분은 이름에 바짝 붙이고, 소속 교회는 한 칸 띄웁니다 */
.ord-card__title{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--point);
}

.ord-card__church{
  display:block;
  margin-top:11px;
  font-size:11.5px;
  color:var(--muted);
  letter-spacing:-.02em;
  line-height:1.5;
}

/* ---------- INFORMATION ---------- */
.info-list{
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
  text-align:left;
}
.info-row{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:17px 4px;
  border-bottom:1px solid var(--line);
}
.info-row dt{
  flex:0 0 62px;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--muted);
  line-height:1.75;
}
.info-row dd{
  margin:0;
  flex:1;
  font-size:15px;
  line-height:1.75;
  color:var(--ink);
  white-space:pre-line;
}

/* ---------- ORDER OF SERVICE ---------- */
.sect--order{ background:var(--bg-soft); }

.order-wrap{ text-align:left; }

.order-part{
  background:#fff;
  border:1px solid var(--line);
  border-radius:3px;
  margin-bottom:12px;
  overflow:hidden;
}

.order-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:19px 18px;
  background:none;
  border:0;
  font-family:inherit;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease;
}
.order-head:active{ background:#F7F3EC; }

.order-head__part{
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--point);
  border:1px solid var(--line);
  border-radius:2px;
  padding:3px 8px;
  line-height:1.4;
  white-space:nowrap;
}

.order-head__title{
  flex:1;
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:.10em;
}

.order-head__arrow{
  width:9px; height:9px;
  border-right:1px solid var(--muted);
  border-bottom:1px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .35s ease;
}
.order-part.is-open .order-head__arrow{
  transform:rotate(225deg) translate(-2px,-2px);
}

.order-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s cubic-bezier(.22,.61,.36,1);
}
.order-list{
  list-style:none;
  margin:0;
  padding:4px 18px 20px;
}
.order-item{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:9px 0;
  border-top:1px dashed #EFE8DE;
  font-size:14px;
}
.order-item:first-child{ border-top:0; }
.order-item__name{
  color:var(--ink-2);
  white-space:pre;
  letter-spacing:.02em;
}
.order-item__dots{
  flex:1;
  height:1px;
  margin-bottom:4px;
  background-image:linear-gradient(to right, var(--line) 40%, rgba(0,0,0,0) 0%);
  background-size:5px 1px;
  background-repeat:repeat-x;
}
.order-item__who{
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
  letter-spacing:.02em;
}

/* ---------- LOCATION ---------- */
.loc-head{ margin-bottom:24px; transition-delay:.10s; }
.loc-place{
  margin:0 0 6px;
  font-family:var(--serif);
  font-size:18px;
  letter-spacing:.06em;
  color:var(--ink);
}
.loc-addr{
  margin:0;
  font-size:14px;
  color:var(--ink-2);
}

.map-box{
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  background:#fff;
  transition-delay:.14s;
}
.map-box iframe{ display:block; width:100%; height:280px; border:0; }

.map-ph{
  height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:
    repeating-linear-gradient(45deg, #FCFAF6 0 10px, #F7F2EA 10px 20px);
  color:var(--muted);
}
.map-ph svg{ width:26px; height:26px; fill:var(--point); opacity:.75; }
.map-ph p{ margin:0; font-size:13px; letter-spacing:.02em; }

.map-btns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:12px;
  transition-delay:.18s;
}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:50px;
  padding:0 14px;
  border:1px solid var(--point);
  border-radius:3px;
  background:#fff;
  color:var(--point);
  font-family:inherit;
  font-size:14px;
  letter-spacing:.06em;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}
.btn:active{ transform:scale(.975); background:#F6F1E9; }

.btn--ghost{
  margin-top:9px;
  border-color:var(--line);
  color:var(--ink-2);
  transition-delay:.22s;
}

/* 카카오톡 공유 버튼 */
.btn--kakao{
  gap:9px;
  border-color:#FEE500;
  background:#FEE500;
  color:#191600;
  font-weight:600;
}
.btn--kakao:active{ background:#F2DA00; border-color:#F2DA00; }
.btn__ic{ display:flex; align-items:center; }
.btn__ic svg{ width:19px; height:19px; fill:#191600; }
.sect--share .btn--kakao{ background:#FEE500; }

.guide-list{
  list-style:none;
  margin:38px 0 0;
  padding:0;
  text-align:left;
}
.guide-item{
  display:flex;
  gap:13px;
  padding:17px 2px;
  border-top:1px solid var(--line);
}
.guide-item:last-child{ border-bottom:1px solid var(--line); }
.guide-item__ic{
  flex:0 0 20px;
  margin-top:5px;
}
.guide-item__ic svg{ width:19px; height:19px; fill:var(--point); opacity:.85; }
.guide-item__tt{
  margin:0 0 3px;
  font-size:14px;
  letter-spacing:.04em;
  color:var(--ink);
  font-weight:600;
}
.guide-item__tx{
  margin:0;
  font-size:13.5px;
  line-height:1.75;
  color:var(--ink-2);
  white-space:pre-line;
}

/* ---------- SHARE ---------- */
.sect--share{ background:var(--bg-soft); }
.share-btns{
  display:grid;
  gap:9px;
  transition-delay:.18s;
}
.sect--share .btn{ background:#fff; }
.sect--share .btn--ghost{ margin-top:0; }

/* ---------- FOOTER ---------- */
.foot{
  padding:64px 30px calc(72px + env(safe-area-inset-bottom));
  text-align:center;
  background:var(--bg);
}
.foot__mark{
  display:block;
  width:1px; height:26px;
  margin:0 auto 22px;
  background:var(--line);
}
.foot__l1{
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.20em;
  text-indent:.20em;
  color:var(--muted);
  transition-delay:.08s;
}
.foot__l2{
  margin:0;
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.16em;
  text-indent:.16em;
  color:var(--ink);
  transition-delay:.16s;
}

/* ---------- 토스트 ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:34px;
  transform:translate(-50%, 14px);
  z-index:50;
  max-width:calc(var(--shell) - 60px);
  padding:12px 20px;
  border-radius:24px;
  background:rgba(44,40,37,.92);
  color:#fff;
  font-size:13.5px;
  letter-spacing:.02em;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.toast.is-on{ opacity:1; transform:translate(-50%, 0); }

/* ---------- 작은 화면 대응 (360px 이하) ---------- */
@media (max-width:360px){
  .sect{ padding:80px 22px; }
  .cover__title{ font-size:33px; }
  .ord-grid{ gap:9px; }
  .ord-card{ padding:19px 6px 17px; }
  .ord-card__name{ font-size:18px; }
  .ord-card__church{ font-size:11.5px; }
  .info-row dt{ flex-basis:56px; }
  .order-item{ font-size:13.5px; }
  .order-item__who{ font-size:12px; }
  .btn{ font-size:13.5px; }
}