/* 고요 사이트. 색과 서체는 앱의 lib/theme.ts와 같다. 좌우 여백은 앱처럼 24. */

@font-face { font-family: "Noto Serif KR"; font-weight: 400; font-display: swap; src: url(/assets/fonts/goyo-400.woff2) format("woff2"); }
@font-face { font-family: "Noto Serif KR"; font-weight: 300; font-display: swap; src: url(/assets/fonts/goyo-300.woff2) format("woff2"); }

:root {
  color-scheme: light dark;
  --paper: #F1ECE1; --ink: #26221C; --soft: #463E31; --mut: #6E6553; --line: #CDC2AC;
  --enso: #6E5F44; --track: #E3D9C7; --card: #EFE9DC; --accent: #B5432E; --edge: #110E0A;
  --cinnabar: #A63B2A; /* 인주는 테마와 무관하게 붉다 (components/Seal.tsx) */
  --on-ink: #F1ECE1;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ring: min(84svh, 50vw);
  --gutter: clamp(24px, 7vw, 112px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16110B; --ink: #ECE4D3; --soft: #B7AC91; --mut: #928A70; --line: #3B3427;
    --enso: #A2917B; --track: #2A2317; --card: #1F1911; --accent: #C4A466; --edge: #B9AE93;
    --on-ink: #16110B;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font: 400 17px/1.9 "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, serif;
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
p, h1, h2, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
a { color: inherit; text-underline-offset: .28em; text-decoration-thickness: 1px; text-decoration-color: var(--line); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--enso); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--track); }

/* 종이빛. 토큰은 그대로 두고 그 위에 빛만 얹는다. 시간대는 head의 스크립트가 고른다. */
.light {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background-image: var(--wash, none), url(/assets/paper.webp);
  background-size: 100% 100%, 384px 384px;
}
[data-hour="dawn"] { --wash: linear-gradient(180deg, rgb(120 140 165 / .17), rgb(190 165 150 / .06) 58%, rgb(190 165 150 / 0) 86%); }
[data-hour="dusk"] { --wash: radial-gradient(90% 90% at var(--sun, 80%) 112%, rgb(196 120 58 / .2), rgb(196 120 58 / 0) 72%); }
[data-hour="night"] { --wash: radial-gradient(110% 100% at 50% 34%, rgb(58 46 34 / .03), rgb(58 46 34 / .15) 96%); }
@media (prefers-color-scheme: dark) {
  .light { background-image: var(--wash, none); }
  [data-hour="dawn"] { --wash: linear-gradient(180deg, rgb(120 145 175 / .1), rgb(120 145 175 / 0) 70%); }
  [data-hour="day"] { --wash: radial-gradient(90% 80% at var(--sun, 50%) -12%, rgb(236 228 211 / .06), rgb(236 228 211 / 0) 76%); }
  [data-hour="dusk"] { --wash: radial-gradient(90% 90% at var(--sun, 80%) 112%, rgb(196 130 66 / .12), rgb(196 130 66 / 0) 72%); }
  [data-hour="night"] { --wash: none; }
}

#ink { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.mast {
  position: absolute; z-index: 4; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: baseline;
  padding: max(20px, env(safe-area-inset-top)) var(--gutter) 0; pointer-events: none;
}
.mast a { pointer-events: auto; }
.mark { font-size: 20px; letter-spacing: .28em; text-decoration: none; }
/* 받기 링크는 첫 화면의 버튼이 사라진 뒤에 위 오른쪽에 선다. */
.take {
  position: fixed; top: max(20px, env(safe-area-inset-top)); right: var(--gutter); font-size: 14px; color: var(--soft);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.walked .take { opacity: 1; visibility: visible; }
.closing .take { opacity: 0; visibility: hidden; }

.walk {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ring); column-gap: clamp(32px, 5vw, 88px);
  padding-inline: var(--gutter) clamp(16px, 4vw, 72px);
}
.stage {
  grid-column: 2; grid-row: 1; height: 100svh; align-self: start;
  display: flex; align-items: center; justify-content: center;
}
.stage-on .stage { position: sticky; top: 0; will-change: transform; }
.steps { grid-column: 1; grid-row: 1; min-width: 0; }
.ring { position: relative; width: var(--ring); aspect-ratio: 1; flex: none; }
.ring .still, #enso { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ring .still { mix-blend-mode: multiply; }
#enso { opacity: 0; transition: opacity .6s ease; }
/* 그림의 곱하기 합성이 종이색과 만나도록 무대가 꺼진 화면에서는 .walk에 종이색을 깐다. */
body:not(.stage-on) .walk { background: var(--paper); }

/* 자바스크립트나 WebGL이 없으면 원상은 다 그려진 채로 서고, 그림은 각 폭 안에 놓인다.
   .js에서 미리 가려 두어야 지연 로딩 그림을 캔버스와 이중으로 받지 않는다. */
.stage-on .ring .still { display: none; }
.stage-on #enso { opacity: 1; }
.plate img { display: block; width: min(100%, 420px); height: auto; mix-blend-mode: multiply; }
.plate figcaption { font-size: 14px; color: var(--mut); }
.js .plate { display: none; }
.js body.no-stage .plate { display: block; }
@media (prefers-color-scheme: dark) {
  .ring .still, .plate img { mix-blend-mode: screen; filter: invert(1) sepia(.5) saturate(.8); }
}

.step {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding-block: 12svh; max-width: 34rem;
}
.stage-on .step { opacity: .24; transition: opacity .5s ease; }
.stage-on .step.on { opacity: 1; }
.no { font-size: 14px; color: var(--mut); letter-spacing: .12em; }
.no span { margin-left: .5em; }
h1 { font-weight: 300; font-size: clamp(40px, 5.1vw, 72px); line-height: 1.3; letter-spacing: -.02em; }
h2 { font-weight: 300; font-size: clamp(28px, 2.9vw, 40px); line-height: 1.4; letter-spacing: -.012em; }
.step > p:not(.no) { color: var(--soft); }

.btn {
  display: inline-block; align-self: flex-start; padding: 15px 30px 14px; border-radius: 14px; text-decoration: none;
  font-size: 16px; letter-spacing: .08em; color: var(--on-ink); background: var(--ink);
  box-shadow: 0 4px 0 var(--edge); transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }

/* 첫 화면 */
.today { justify-content: space-between; padding-block: 15svh 11svh; min-height: 100svh; }
.when { font-size: 17px; color: var(--soft); }
.when span { display: block; }
#mood { color: var(--mut); }
.open { display: flex; flex-direction: column; gap: 22px; }
.lead { color: var(--soft); max-width: 26rem; }

/* 오늘의 구절: 원 안에 세로로 선다. 첫 줄이 오른쪽이다. */
.verse {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: start;
  transition: opacity .5s ease; cursor: default;
}
.verse p { writing-mode: vertical-rl; font-size: var(--fs, clamp(14px, calc(var(--ring) * .036), 28px)); line-height: 2; letter-spacing: .14em; white-space: nowrap; }
.verse .v { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.verse .h { display: block; color: var(--mut); font-size: .54em; line-height: 2.1; letter-spacing: .16em; margin-inline-start: 1em; }
.verse i { font-style: normal; opacity: 0; animation: seep 1.3s ease-out forwards; animation-delay: var(--t, 0ms); }
.verse.now i { animation: none; opacity: 1; }
.verse.gone { opacity: 0; pointer-events: none; }
.verse.sag p { letter-spacing: .24em; }
@keyframes seep { to { opacity: 1; } }

.song { position: absolute; right: 0; top: 50%; margin: 0; font-size: 14px; color: var(--mut); writing-mode: vertical-rl; letter-spacing: .1em; transform: translateY(-50%); line-height: 1.6; max-height: 72svh; }
.seal {
  position: absolute; right: 3%; bottom: 5%; width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 26px; line-height: 1; color: var(--cinnabar); border: 2.6px solid var(--cinnabar); border-radius: 8px;
  opacity: 0; transform: scale(1.28); transition: opacity .16s ease-out, transform .34s var(--ease-out); pointer-events: none;
}
.seal.on { opacity: 1; transform: none; }

/* 자해 */
.jahae { display: grid; gap: 6px; margin-top: 10px; }
.han-row { display: flex; flex-wrap: wrap; gap: 0 2px; font-size: clamp(28px, 2.9vw, 34px); line-height: 1.4; }
.han-row button { padding: 2px 3px 4px; color: var(--mut); border-bottom: 2px solid transparent; transition: color .12s ease, border-color .12s ease; }
.han-row button:nth-child(5) { margin-left: .5em; }
.han-row button[aria-pressed="true"] { color: var(--ink); border-color: var(--enso); }
.read { font-size: 15px; color: var(--mut); letter-spacing: .08em; }
.gloss { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.gloss b { font-weight: 400; font-size: 56px; line-height: 1.2; }
.gloss span { font-size: 20px; }
.hint { font-size: 14px; color: var(--mut); }

/* 일곱 경전: 먹선 길이가 과의 수다. 첫 경전이 오른쪽이다. */
.sutras { list-style: none; display: flex; flex-direction: row-reverse; justify-content: space-between; margin-top: 14px; }
.sutras li { display: grid; justify-items: center; grid-template-rows: auto auto 1fr; gap: 0 2px; grid-template-columns: auto auto; width: 44px; }
.sutras b, .sutras i { writing-mode: vertical-rl; font-style: normal; font-weight: 400; white-space: nowrap; line-height: 1.2; }
.sutras b { grid-column: 2; grid-row: 1; font-size: 16px; letter-spacing: .08em; height: 5.2em; }
.sutras i { grid-column: 1; grid-row: 1; font-size: 12px; color: var(--mut); letter-spacing: .1em; }
.sutras s { grid-column: 1 / -1; grid-row: 2; display: block; width: 3px; height: calc(var(--n) * 1.05px + 6px); margin-top: 10px; background: var(--ink); border-radius: 2px; transform-origin: 50% 0; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.sutras span { grid-column: 1 / -1; grid-row: 3; font-size: 13px; color: var(--mut); margin-top: 6px; white-space: nowrap; }
.js .sutras:not(.seen) s { transform: scaleY(0); }
.note { font-size: 14px; }
.step > p.note { color: var(--mut); }

/* 사경 */
.trace { display: grid; gap: 8px; margin-top: 8px; justify-items: start; }
#trace-pad { display: block; width: min(280px, 68vw); height: min(280px, 68vw); touch-action: none; cursor: crosshair; }
.trace-say { font-size: 15px; color: var(--soft); }
.trace-acts { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; color: var(--mut); }
.trace-acts button { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .28em; min-height: 32px; }
.trace-acts button[hidden] { display: none; }
html:not(.js) .trace { display: none; }

/* 방법 일곱 */
.ways { display: grid; gap: 12px; }
.ways div { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); align-items: baseline; }
.ways dt { font-size: 17px; }
.ways dd { font-size: 15px; color: var(--soft); line-height: 1.7; }

.step > p.plain { font-size: 20px; line-height: 1.7; color: var(--ink); }
.with-shot { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 28px; align-items: start; }
.with-shot > div { display: grid; gap: 16px; color: var(--soft); }
.shot { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { .shot { filter: brightness(.82); } }

/* 여덟째 폭: 글을 비우고 원 하나만 둔다. 넓은 화면에서는 원이 가운데로 온다. */
.empty { min-height: 130svh; }
.empty h2 { font-size: clamp(20px, 1.7vw, 24px); }

.last { min-height: 100svh; }
.last h2.then { margin-top: 40px; }
.foot { position: relative; z-index: 1; padding: 56px var(--gutter) max(40px, env(safe-area-inset-bottom)); font-size: 14px; line-height: 2; color: var(--mut); }
.foot-name { font-size: 16px; letter-spacing: .28em; color: var(--ink); margin-bottom: 6px; }

@media (min-width: 821px) {
  .empty { max-width: none; width: calc(100vw - var(--gutter) * 2); align-items: center; text-align: center; position: relative; z-index: 3; }
  .step.empty.on { opacity: 1; }
}

/* 폰: 원이 위에 서고 글이 그 아래로 지나간다. 첫 화면이 지나면 원이 줄어 읽을 자리를 낸다. */
@media (max-width: 820px) {
  :root { --big: min(88vw, 50svh); --small: min(58vw, 31svh); --ring: var(--big); }
  body { font-size: 16px; }
  .walk { display: block; padding: 0; }
  .stage { height: calc(var(--big) + 58px); align-items: flex-end; padding-bottom: 10px; }
  .stage-on .stage { top: calc(var(--small) - var(--big)); z-index: 2; will-change: auto; }
  .stage::before {
    content: ""; position: absolute; inset: -40px 0 -60px; opacity: var(--veil, 0); pointer-events: none;
    background: linear-gradient(var(--paper) calc(100% - 26px), transparent);
  }
  .ring { transform-origin: 50% 100%; will-change: transform; }
  .steps { padding-inline: 24px; }
  .step { min-height: 70svh; padding-block: 72px 56px; max-width: none; justify-content: flex-start; }
  .today { min-height: 0; padding-block: 8px 72px; gap: 24px; }
  .open { gap: 18px; }
  .when { font-size: 15px; }
  .empty { min-height: 90svh; text-align: center; align-items: center; justify-content: center; }
  .last { min-height: 0; padding-bottom: 24px; }
  .with-shot { grid-template-columns: minmax(0, 1fr); }
  .shot { width: min(240px, 66vw); }
  .song { left: 20px; right: 20px; top: auto; bottom: -26px; transform: none; writing-mode: horizontal-tb; text-align: center; font-size: 13px; max-height: none; opacity: var(--veil, 0); }
  .seal { width: 34px; height: 34px; font-size: 20px; border-width: 2px; border-radius: 6px; }
  .verse .h { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .verse i { animation: none; opacity: 1; }
  .sutras s, .seal, .step, .take, .verse { transition: none !important; }
  .js .sutras:not(.seen) s { transform: none; }
  .seal { transform: none; }
}

/* 글만 있는 페이지: 개인정보처리방침, 404 */
.back { padding: 24px var(--gutter) 0; }
.doc { position: relative; max-width: 38rem; margin: 0 auto; padding: 72px 24px 40px; color: var(--soft); display: grid; gap: 16px; }
.doc h1 { font-size: clamp(28px, 3.4vw, 40px); color: var(--ink); margin-bottom: 20px; }
.doc h2 { font-size: 20px; font-weight: 400; color: var(--ink); margin-top: 28px; letter-spacing: 0; }
.doc strong { font-weight: 400; color: var(--ink); }
.nothing main { min-height: 100svh; display: grid; place-items: center; place-content: center; gap: 12px; text-align: center; padding: 24px; }
.nothing img { width: min(62vw, 50svh); height: auto; mix-blend-mode: multiply; }
.nothing h1 { font-size: 20px; letter-spacing: 0; font-weight: 400; }
.nothing p { font-size: 15px; color: var(--mut); }
@media (prefers-color-scheme: dark) { .nothing img { mix-blend-mode: screen; filter: invert(1) sepia(.5) saturate(.8); } }