/* 한신교회 어머니기도회 — 가을 편지.
   밝은 예배당에서 쏘는 화면이라 바탕은 편지지, 글씨는 먹입니다.
   색은 로고의 꽃(보라·분홍·초록)에 가을빛(단풍·갈대)을 더했습니다.
   이 파일만 고치면 모든 화면의 색과 글꼴이 같이 바뀝니다. */
:root{
  color-scheme:light;

  /* 종이와 먹 */
  --paper:#fbf6ec;          /* 바탕 — 살짝 누런 편지지 */
  --paper-2:#fffdf8;        /* 편지 한 장 (카드) */
  --ink:#3a2f2a;            /* 글씨 */
  --ink-2:#6b5a50;          /* 둘째 글씨 */
  --dim:#9a897c;            /* 흐린 글씨 */
  --line:rgba(58,47,42,.14);
  --line-2:rgba(58,47,42,.26);

  /* 로고의 꽃 */
  --violet:#8558a6;
  --rose:#cf5f91;
  --leaf:#6d9c58;
  /* 가을 */
  --maple:#b5562f;
  --reed:#a98a5e;

  --f-head:"Noto Serif KR","AppleMyungjo","Batang",serif;
  --f-body:"Gowun Batang","Noto Serif KR","AppleMyungjo","Batang",serif;
}

html,body{height:100%;margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* 종이결 — 그림 파일 없이 아주 옅은 결만 깔아 둡니다.
   빔으로 쏘면 거의 안 보이지만 민무늬보다 덜 허전합니다. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(0deg,  rgba(58,47,42,.022) 0 1px, transparent 1px 3px),
    radial-gradient(120vh 90vh at 78% -10%, rgba(207,95,145,.07), transparent 60%),
    radial-gradient(110vh 80vh at 12% 108%, rgba(109,156,88,.07), transparent 60%);
}

/* 화관 조각 — 두 모서리에서 잘려 나가게 크게 놓습니다.
   작게 흩뿌리는 것보다 정돈돼 보입니다. 10% 안팎이라 글씨와 싸우지 않습니다. */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.1;
  background:
    url("wreath.svg") -34vh -30vh / 86vh auto no-repeat,
    url("wreath.svg") calc(100% + 38vh) calc(100% + 34vh) / 78vh auto no-repeat;
}

/* 편지 한 통 — 슬라이드와 카드가 같이 쓰는 모양 */
.letter{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:2px;                      /* 종이는 둥글지 않습니다 */
  box-shadow:0 1.2vh 4vh rgba(90,64,40,.10), 0 .2vh .6vh rgba(90,64,40,.06);
}
/* 접힌 자국 하나 — 편지지처럼 */
.letter::after{
  content:"";position:absolute;left:0;right:0;top:38%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(58,47,42,.10) 12%,rgba(58,47,42,.10) 88%,transparent);
  pointer-events:none;
}

/* 꽃 리스를 대신하는 가는 띠 */
.wreath{
  display:block;height:2px;border-radius:99px;border:0;
  background:linear-gradient(90deg,transparent,var(--violet) 18%,var(--rose) 50%,var(--leaf) 82%,transparent);
}

/* 글씨가 써지듯 나타납니다 (왼쪽에서 오른쪽으로) */
@keyframes write{ from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }
@keyframes rise { from{opacity:0;transform:translateY(1.6vh)} to{opacity:1;transform:none} }
@keyframes open { from{opacity:0;transform:translateY(2.4vh) rotateX(6deg)} to{opacity:1;transform:none} }
@keyframes draw { from{transform:scaleX(0)} to{transform:scaleX(1)} }

@media (prefers-reduced-motion:reduce){
  .w-write,.w-rise,.w-open,.w-draw{animation:none !important}
}