/* 고요의 낙원 · 공통 스타일 (명상노트 인쇄물과 같은 토큰) */
:root{
  --bg:#F4EFE6;        /* 노트 속지 미색 */
  --bg-deep:#ECE5D9;   /* GOYO MOMENT 박스 */
  --ink:#35322D;       /* 본문 */
  --ink-soft:#5A554E;
  --sub:#8C8479;       /* 보조 안내 */
  --line:#D9D0C3;      /* 괘선 */
  --serif:"Noto Serif KR","Noto Serif CJK KR",serif;
  --sans:"Noto Sans KR","Noto Sans CJK KR",sans-serif;
  --ease:cubic-bezier(.25,.1,.25,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;min-height:100dvh;
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* 수채 질감 배경 (노트 표지와 동일 이미지) */
.tex{
  background:#E8E0D1 url(../img/bg.jpg) center/cover no-repeat fixed;
}
@supports (-webkit-touch-callout:none){ .tex{background-attachment:scroll} } /* iOS fixed 배경 버그 회피 */

/* 표지의 세로선 + 점 장식 */
.rule{width:0;height:56px;border-left:1px solid rgba(80,75,68,.55);margin:0 auto;position:relative}
.rule::after{content:"";position:absolute;left:-2.5px;top:50%;width:4px;height:4px;border-radius:50%;background:rgba(80,75,68,.7);transform:translateY(-50%)}

/* 트래킹 라벨 (노트의 섹션 라벨) */
.label{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.32em;color:var(--sub)}

/* 버튼: 노트의 얇은 괘선 느낌 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 28px;
  font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.08em;color:var(--ink);
  border:1px solid rgba(53,50,45,.45);border-radius:2px;
  background:rgba(244,239,230,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.btn:hover{background:rgba(244,239,230,.9);border-color:var(--ink)}
.btn:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.btn .arrow{width:18px;height:1px;background:currentColor;position:relative}
.btn .arrow::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}

/* 천천히 나타나기 (호흡 템포) */
.fade{opacity:0;transform:translateY(6px);animation:fadeUp 1.6s var(--ease) forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fade{animation:none;opacity:1;transform:none}
  *{animation-duration:0s!important;transition:none!important}
}