/* 예수님 생애 지도 — 디자인 C: 수채 성지, 먹빛 말씀
   견본: Stamen Watercolor(재료 원리) · SBS The Boat(도착하면 매체가 바뀜) · Viz.Bible(시기마다 길 색 하나)
   기록: docs/design-refs/README.md (2026-10-29) */
:root {
  --paper: #f3ede1;
  --ink: #3a332b;
  --ink-2: #4b4339;
  --mute: #7d7262;
  --line: rgba(58, 51, 43, 0.14);
  --line-2: rgba(58, 51, 43, 0.28);
  --sumi: #1e1b18;
  --ivory: #eee7d7;
  --ivory-2: #d6cdbb;
  --ivory-3: #a89f8d;
  --warn: #8a6d3b;
  --water: #4f8a8b;
  --water-ink: #2f5f60;

  /* 시기 색 (등장 순서대로 p0, p1 ...): 사역 전 · 1년차 · 2년차 · 3년차 · 고난주간 · 부활 후 */
  --p0: #b5523b;
  --p1: #3e6e8e;
  --p2: #5f7d3e;
  --p3: #7a5c8e;
  --p4: #7a2e3a;
  --p5: #c29a3a;

  --serif: "Gowun Batang", "AppleMyungjo", "Nanum Myeongjo", serif;
  --sans: "Gowun Dodum", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --num: "EB Garamond", "Gowun Batang", serif;
  --ui: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; /* 단추처럼 기능하는 글자 */
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, textarea:focus-visible { outline: 2px solid var(--p1); outline-offset: 2px; }
a { color: inherit; }

/* ---------- 배치: 위 지도, 아래 카드 (넓은 화면은 왼쪽 지도, 오른쪽 카드) ---------- */
/* 장면 카드는 내용만큼(이동 중엔 제목 세 줄, 도착하면 말씀 카드까지), 지도는 남는 만큼(최소 32%). 처음 화면은 지도 54% */
.app { height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(32svh, 1fr) auto; }
.panel { max-height: 68svh; }
@media (min-width: 900px) { .app, .app.start { grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: 100%; } .panel { max-height: none; } .brand { display: block; } }

.map-wrap { position: relative; overflow: hidden; background: var(--paper); }
#map { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab; }
#map:active { cursor: grabbing; }

.brand { display: none; position: absolute; left: 14px; top: calc(14px + env(safe-area-inset-top)); font-size: 11px; letter-spacing: 0.22em; color: var(--mute); pointer-events: none; }
.map-top { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; display: flex; gap: 6px; }
.pill {
  border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 13px 6px;
  background: rgba(243, 237, 225, 0.92); font-size: 12.5px; color: var(--ink); cursor: pointer;
}
.pill[hidden] { display: none; }
#sceneBtn { background: var(--sumi); border-color: var(--sumi); color: var(--ivory); }
.zoom { position: absolute; left: 12px; top: calc(50px + env(safe-area-inset-top)); display: grid; gap: 6px; }
.zoom button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(243, 237, 225, 0.92); font: 400 18px/1 var(--sans); color: var(--ink-2); cursor: pointer;
}

.mini {
  position: absolute; left: 10px; bottom: 10px; width: 80px; height: 108px;
  border-radius: 10px; background: var(--paper); border: 1px solid var(--line-2);
  box-shadow: 0 4px 14px rgba(30, 27, 24, 0.16);
  opacity: 0; transition: opacity 0.35s; pointer-events: none;
}
.mini.on { opacity: 1; }
.mini-view { fill: rgba(58, 51, 43, 0.12); stroke: var(--ink); stroke-width: 1.2; }
.mini-dot { fill: var(--c, var(--ink)); }

.legend-box {
  position: absolute; right: 12px; bottom: 12px; max-width: min(280px, calc(100% - 110px));
  max-height: calc(100% - 110px); overflow-y: auto;
  border-radius: 12px; background: rgba(243, 237, 225, 0.94); border: 1px solid var(--line);
  font-size: 12.5px;
}
.legend-box summary { list-style: none; cursor: pointer; padding: 7px 12px 6px; white-space: nowrap; color: var(--ink-2); }
.legend-box summary::-webkit-details-marker { display: none; }
.legend-box summary::after { content: "＋"; margin-left: 8px; color: var(--mute); }
.legend-box[open] summary::after { content: "－"; }
.legend-box[open] { padding-bottom: 10px; }
.lg-sec { padding: 0 12px; margin-top: 10px; }
.lg-sec h4 { margin: 0 0 6px; font-size: 11px; font-weight: 400; color: var(--mute); }
.lg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.lg-list li { display: flex; align-items: center; gap: 8px; }
.ln { flex: none; width: 22px; height: 0; border-top: 3px solid var(--ink); border-radius: 3px; }
.ln-done { border-top-width: 2px; opacity: 0.4; }
.ln-col { border-top: 3px solid var(--c); }
.dt { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.dt-now { width: 11px; height: 11px; background: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--p1); }
.dt-seen { background: var(--ink); }
.dt-later { box-shadow: inset 0 0 0 1px var(--mute); }
.legend-box p { margin: 8px 12px 0; font-size: 11px; line-height: 1.55; color: var(--mute); }
.legend-box .rulers { gap: 6px; }
.legend-box .rulers b { font-size: 12.5px; }
.legend-box .rulers small { font-size: 11px; }

/* ---------- 지도 (바탕 수채는 그림, 나머지는 선) ---------- */
.land { fill: var(--paper); }
.terr-edge { fill: none; stroke: var(--ink); stroke-opacity: 0.38; stroke-width: 0.9; stroke-dasharray: 1 3.2; stroke-linecap: round; }
.region-line { fill: none; stroke: var(--ink); stroke-opacity: 0.28; stroke-width: 0.8; stroke-dasharray: 1 4; stroke-linecap: round; }
.river { fill: none; stroke: var(--water); stroke-opacity: 0.8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.valley { fill: none; stroke: var(--water); stroke-opacity: 0.8; stroke-width: 1.4; stroke-dasharray: 4 3; }
.site { fill: rgba(58, 51, 43, 0.06); stroke: rgba(58, 51, 43, 0.5); stroke-width: 0.8; }

.geo { paint-order: stroke; stroke: rgba(243, 237, 225, 0.7); stroke-linejoin: round; pointer-events: none; font-family: var(--serif); }
.geo-region { fill: #6b5a45; fill-opacity: 0.82; font-weight: 700; letter-spacing: 0.42em; }
.geo-sea { fill: var(--water-ink); stroke: none; letter-spacing: 0.5em; }
.geo-water { fill: var(--water-ink); stroke: none; letter-spacing: 0.2em; }
.geo-hill { fill: var(--mute); stroke: none; font-family: var(--sans); }
.geo-site { fill: var(--mute); stroke: none; letter-spacing: 0.2em; }

.route { fill: none; stroke: var(--c); stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.4s; }
.route[data-state="later"] { display: none; }
.route[data-state="done"] { stroke-width: 2; opacity: 0.42; }
.route[data-state="now"] { stroke-width: 3; }
/* 처음 화면: 앞으로 갈 길은 흐린 점선으로 조용히, 걸은 길만 진하게 */
.route[data-state="ahead"] { stroke-width: 1.6; stroke-dasharray: 1.5 5; opacity: 0.42; }
.route[data-state="walked"] { stroke-width: 2.6; opacity: 0.95; }
/* 베들레헴 위의 별: 천천히 반짝임 */
.star .glow { fill: url(#star-glow); transform-box: fill-box; transform-origin: center; animation: starGlow 3.6s ease-in-out infinite; }
.star .shape { fill: #fff6dc; stroke: #c9963a; stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: twinkle 3.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.78; transform: scale(0.86); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes starGlow { 0%, 100% { opacity: 0.55; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.12); } }
.arrow { fill: none; stroke: var(--c); stroke-linecap: round; stroke-linejoin: round; }

.place .dot { fill: var(--paper); stroke: var(--ink); stroke-opacity: 0.45; }
.place[data-state="seen"] .dot { fill: var(--ink); stroke: var(--paper); stroke-opacity: 0.9; }
.place[data-state="now"] .dot { fill: var(--ink); stroke: var(--paper); stroke-opacity: 1; }
.place .label {
  font-family: var(--sans); fill: var(--ink); fill-opacity: 0.55;
  paint-order: stroke; stroke: rgba(243, 237, 225, 0.85); stroke-linejoin: round; pointer-events: none;
}
.place[data-state="seen"] .label { fill-opacity: 0.95; }
.place[data-state="now"] .label { fill-opacity: 1; font-family: var(--serif); font-weight: 700; }

.marker .core { fill: var(--ink); stroke: var(--paper); }
.marker .halo { fill: var(--c, var(--ink)); fill-opacity: 0.14; stroke: var(--c, var(--ink)); stroke-opacity: 0.75; stroke-width: 1.4; }
.marker .ring { fill: none; stroke: var(--c, var(--ink)); opacity: 0; transform-box: fill-box; transform-origin: center; }
.marker .ring.go { animation: ring 1.4s ease-out; }
/* 지도 위 예수님: 길을 가실 때 걸으심 (움직임 줄이기 설정이면 서 계심) */
.walker { position: absolute; left: 0; top: 0; z-index: 2; width: 28px; height: 36px; pointer-events: none; will-change: transform; }
.walker[hidden] { display: none; }
@keyframes ring { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }

/* ---------- 카드 ---------- */
.panel { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--paper); }
.paper-edge { position: absolute; left: 0; top: -13px; width: 100%; height: 14px; fill: var(--paper); z-index: 2; pointer-events: none; }
@media (min-width: 900px) { .paper-edge { display: none; } .panel { border-left: 1px solid var(--line); } }
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.card { padding: 16px 24px 12px; }
@media (min-width: 900px) { .card { padding: 30px 30px 8px; } }

.card-top { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.chip { display: inline-flex; align-items: center; gap: 7px; }
.wave { width: 18px; height: 12px; fill: none; stroke: var(--c, var(--ink)); stroke-width: 3.2; stroke-linecap: round; flex: none; }
.tag { font-size: 10.5px; color: var(--warn); border: 1px solid rgba(138, 109, 59, 0.45); border-radius: 999px; padding: 1px 7px 0; }
.count { margin-left: auto; font-family: var(--num); font-size: 15px; color: var(--mute); letter-spacing: 0.04em; }
.share { flex: none; width: 32px; height: 32px; margin-right: -6px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; }
.share svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.card h2 { margin: 6px 0 0; font: 700 27px/1.25 var(--serif); letter-spacing: -0.01em; word-break: keep-all; }
.route-line { margin: 7px 0 0; font-size: 13px; color: var(--mute); }
.route-line b { font-weight: 400; color: var(--ink-2); }

.facts { list-style: none; margin: 12px 0 0; padding: 9px 0; display: flex; flex-wrap: wrap; gap: 2px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 13px/1.6 var(--serif); }
.facts li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 7px 2px 0; border-radius: 50%; background: var(--c, var(--mute)); opacity: 0.7; vertical-align: middle; }
.facts small { font-family: var(--sans); color: var(--mute); }

.word { margin-top: 20px; padding: 18px 20px 14px; border-radius: 16px; background: #fbf8f1; box-shadow: 0 1px 0 rgba(58, 51, 43, 0.05), 0 6px 18px rgba(30, 27, 24, 0.07); }
.word-ctx { margin: 0; font-size: 13px; color: var(--mute); }
.word-text { margin: 8px 0 0; font: 400 16.5px/1.8 var(--serif); color: var(--ink); word-break: keep-all; }
.word-text.loading { color: var(--mute); font-size: 14px; }
.word-acts { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.word-acts .listen { font-size: 13px; }
.word-open { margin-left: auto; border: 0; background: none; padding: 6px 0; font: 700 16.5px var(--serif); color: var(--ink); cursor: pointer; white-space: nowrap; }
.medi-count { font-family: var(--num); font-size: 14px; color: var(--mute); }
.listen { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 4px 0; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.listen span { width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.listen[data-on="1"] span { width: 8px; height: 8px; border: 0; background: currentColor; }
/* 목소리 남·여 */
.voice-sw { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.voice-sw button { border: 0; background: none; padding: 2px 9px; font: 400 12px var(--sans); color: var(--mute); cursor: pointer; }
.voice-sw button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.wv-listen { display: inline-flex; align-items: center; gap: 10px; }
.wv-listen .voice-sw { border-color: rgba(238, 231, 215, 0.25); }
.wv-listen .voice-sw button { padding: 4px 10px; color: var(--ivory-3); }
.wv-listen .voice-sw button[aria-pressed="true"] { background: rgba(238, 231, 215, 0.9); color: var(--sumi); }

.block { margin-top: 26px; }
.block h3 { margin: 0 0 8px; font: 400 13px var(--sans); color: var(--mute); letter-spacing: 0.02em; }
.block p { margin: 0; font: 400 16.5px/1.8 var(--serif); word-break: keep-all; }
.block p.fine { margin-top: 10px; font: 400 12.5px/1.7 var(--sans); color: var(--mute); }
.ref-list { list-style: none; margin: 0; padding: 0; }
.ref-list button { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 7px 0; border: 0; background: none; text-align: left; font: 400 16.5px var(--serif); color: var(--ink); cursor: pointer; }
.ref-list em { font: normal 400 13px var(--sans); color: var(--mute); }
.note { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(58, 51, 43, 0.05); }
.note strong { display: block; font: 700 13.5px var(--serif); }
.note p { margin: 4px 0 0; font: 400 14px/1.75 var(--serif); word-break: keep-all; }
.note.dispute { background: rgba(138, 109, 59, 0.1); }
.review-note p { font-size: 13px; color: var(--ink-2); }

.drawer { margin-top: 10px; }
.drawer summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary b { font: 400 16.5px var(--serif); color: var(--ink); }
.drawer summary span { font-size: 13px; color: var(--warn); }
.drawer summary::after { content: ""; width: 7px; height: 7px; margin: 0 4px 4px auto; border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: rotate(45deg); }
.drawer[open] summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.drawer-body { padding: 14px 0 12px; }
.drawer .facts { margin: 0; padding: 0; border: 0; font-size: 16px; }
.drawer-body > .block { margin: 0 0 30px; }
.drawer-body > .block:last-child { margin-bottom: 4px; }
.place-info h3 { margin-bottom: 12px; }
.place-info h4 { margin: 22px 0 10px; font: 400 12px var(--sans); color: var(--mute); }
.place-note { font-size: 14px !important; color: var(--ink-2); }
.ruler-card > i { display: none; }
.ruler-card p { margin: 0; }
.ruler-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ruler-name b { font: 700 15px var(--serif); }
.ruler-name span { font: 400 12px var(--sans); color: var(--mute); }
.ruler-years { margin-top: 2px !important; font: 400 12px var(--sans) !important; color: var(--mute); }
.ruler-about { margin-top: 10px !important; font: 400 14.5px/1.85 var(--serif) !important; color: var(--ink-2); }
.here { list-style: none; margin: 0; padding: 0; }
.here button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid rgba(58, 51, 43, 0.1); background: none; text-align: left; cursor: pointer; font: 400 14.5px var(--serif); }
.here b { flex: none; min-width: 18px; font: 500 16px var(--num); color: var(--c); }
.here span { flex: 1; min-width: 0; }
.here em { flex: none; font: normal 400 11.5px var(--sans); color: var(--mute); }
.here button[aria-current="true"] { cursor: default; }
.here button[aria-current="true"] span { font-weight: 700; }

/* 처음 화면: 두 줄 → (길이 다 그려지면) 안내 한 줄 · 시기 고르기 · 이 지도에 대해 */
.start-sub { font-size: 13px; color: var(--mute); }
.card-top .start-sub + .share { margin-left: auto; }
/* 첫 걸음 / 이어 걷기 한 줄 */
.first-step { margin: 14px 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0; border: 0; background: none; text-align: left; }
button.first-step { cursor: pointer; }
.first-step span { font-size: 13px; color: var(--mute); white-space: nowrap; }
.first-step b { font: 400 16.5px var(--serif); color: var(--ink); }
.first-step em { font: normal 400 13px var(--sans); color: var(--mute); }
/* 시기 순서지: 주보 순서처럼 */
.order { list-style: none; margin: 0; padding: 0; }
.order button { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; width: 100%; padding: 10px 0; border: 0; border-top: 1px dotted var(--line-2); background: none; text-align: left; cursor: pointer; }
.order li:first-child button { border-top: 0; }
.order i { align-self: center; width: 18px; height: 3px; border-radius: 3px; background: var(--c); }
.order b { font: 400 16.5px var(--serif); color: var(--ink); }
.order small { grid-column: 2; font-size: 13px; color: var(--mute); }
.order em { grid-row: 1 / span 2; grid-column: 3; align-self: center; font: normal 400 13px var(--num); color: var(--mute); }
.about-meta p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.7; color: var(--mute); }
/* 기도: 지도 위에 흐린 먹, 지도는 아주 옅게 비침. 누를 것은 '아멘' 하나 */
.pray {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(env(safe-area-inset-top) + 40px) 30px calc(env(safe-area-inset-bottom) + 34px);
  background: radial-gradient(120% 70% at 30% 18%, rgba(238, 231, 215, 0.05), transparent 60%), radial-gradient(90% 60% at 75% 95%, rgba(0, 0, 0, 0.3), transparent 70%), rgba(30, 27, 24, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ivory);
  transition: opacity 1s ease;
}
.pray.go { opacity: 0; pointer-events: none; transition: opacity 1.6s ease; }
/* 처음 온 기기: 기도 화면 아래 먹. 지도가 먼저 보였다가 덮이지 않게, 페이지가 열릴 때부터 깔려 있다가 '아멘'에 걷힘 */
.boot-ink { position: fixed; inset: 0; z-index: 79; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s;
  background: radial-gradient(120% 70% at 30% 18%, rgba(238, 231, 215, 0.05), transparent 60%), radial-gradient(90% 60% at 75% 95%, rgba(0, 0, 0, 0.3), transparent 70%), #322e29; }
html.booting .boot-ink { opacity: 1; visibility: visible; transition: none; }
/* 아멘 뒤: 기도 글이 물러나고 먹 위 베들레헴 자리에 별 하나 */
.pray-brand, .pray-mid, .amen { transition: opacity 0.9s ease; }
.pray.star-time .pray-brand, .pray.star-time .pray-mid, .pray.star-time .amen { opacity: 0; }
.pray-star { position: fixed; width: 0; height: 0; }
.pray-star svg { position: absolute; left: -40px; top: -40px; overflow: visible; opacity: 0; animation: starIn 1.4s ease 0.7s forwards; }
.pray-star .shape { fill: #fff6dc; stroke: #c9963a; stroke-width: 0.8; transform-box: fill-box; transform-origin: center; animation: twinkle 1.8s ease-in-out 2.1s infinite; }
.pray-star .glow { transform-box: fill-box; transform-origin: center; animation: starGlow 1.8s ease-in-out 2.1s infinite; }
@keyframes starIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
.pray-star-word { position: fixed; left: 24px; right: 24px; margin: 0; text-align: center; font: 400 15px/1.8 var(--serif); color: var(--ivory-2); opacity: 0; animation: wordIn 1.2s ease 1.8s forwards; }
.pray-star-word span { display: block; }
.pray-star-word small { display: block; margin-top: 6px; font: 400 12px var(--sans); letter-spacing: 0.06em; color: var(--ivory-3); }
@keyframes wordIn { to { opacity: 1; } }
.pray-brand { margin: 0; font-size: 12.5px; letter-spacing: 0.24em; color: var(--ivory-3); }
.pray-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.pray-verse { margin: 0; font: 400 25px/1.65 var(--serif); letter-spacing: -0.01em; }
.pray-verse span, .pray-prayer span { display: block; }
@media (min-width: 720px) { .pray-verse { font-size: 30px; } }
.pray-ref { margin: 18px 0 0; font-size: 13px; letter-spacing: 0.08em; color: var(--ivory-3); }
.pray-rule { display: block; width: 28px; height: 1px; margin: 40px auto 34px; background: rgba(238, 231, 215, 0.35); }
.pray-prayer { margin: 0; font: 400 16.5px/1.85 var(--serif); color: var(--ivory-2); }
.pray-prayer small { display: block; margin-top: 8px; font: 400 11px var(--sans); color: var(--ivory-3); }
.amen { width: min(100%, 300px); height: 50px; border: 0; border-radius: 999px; background: var(--ivory); color: var(--sumi); font: 400 16px var(--serif); letter-spacing: 0.04em; cursor: pointer; }
.amen:focus-visible { outline: 2px solid var(--ivory-3); outline-offset: 3px; }

/* 시작 카드 */
.epigraph { margin: 12px 0 0; font: 400 15px/1.6 var(--serif); color: var(--ink-2); }
.epigraph span { margin-left: 8px; font: 400 12px var(--sans); color: var(--mute); }
.lead { margin: 14px 0 0; font: 400 15px/1.8 var(--serif); word-break: keep-all; }
.fine { margin: 10px 0 0; font-size: 12px; line-height: 1.65; color: var(--mute); }
.sub-h { margin: 26px 0 8px; font: 400 12px var(--sans); color: var(--mute); }
.legend { list-style: none; margin: 0; padding: 0; }
.legend button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; font: 400 15px var(--serif); }
.legend button i { flex: none; width: 18px; height: 3px; border-radius: 3px; background: var(--c); }
.legend button em { margin-left: auto; font: normal 400 12px var(--sans); color: var(--mute); }
.rulers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rulers li { display: flex; gap: 10px; }
.rulers i { display: none; }
.rulers b { display: block; font: 700 14px var(--serif); }
.rulers small { display: block; font: 400 12px var(--sans); color: var(--mute); line-height: 1.5; }
.hint { margin: 22px 0 6px; font-size: 12px; color: var(--mute); }
.end-box { margin-top: 20px; padding: 18px; border-radius: 16px; background: var(--sumi); color: var(--ivory); }
.end-box strong { display: block; font: 700 17px var(--serif); }
.end-box p { margin: 4px 0 0; font-size: 13px; color: var(--ivory-2); }
.end-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.end-actions button { border: 1px solid rgba(238, 231, 215, 0.4); background: none; color: var(--ivory); border-radius: 999px; padding: 8px 14px; font: 400 13px var(--serif); cursor: pointer; }
.end-actions .end-main { background: var(--ivory); color: var(--sumi); border-color: var(--ivory); }
.meta { padding: 18px 24px 26px; margin-top: 18px; border-top: 1px solid var(--line); }
.meta p { margin: 0 0 6px; font-size: 11.5px; line-height: 1.65; color: var(--mute); }

/* ---------- 아래 진행 막대와 단추 ---------- */
.dock { position: relative; padding: 8px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
@media (min-width: 900px) { .dock { padding: 12px 28px 20px; } }
.dock-top { display: flex; align-items: center; gap: 8px; }
.tl-row { display: flex; align-items: center; gap: 12px; }
.tl-row .timeline { flex: 1; min-width: 0; }
.range-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.range-bar[hidden] { display: none; }
.range-bar button { border: 0; background: none; padding: 0; font-size: 12px; color: var(--mute); text-decoration: underline; cursor: pointer; }
.auto { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: none; padding: 0; color: var(--ink-2); cursor: pointer; }
.auto svg { width: 11px; height: 11px; fill: currentColor; grid-area: 1 / 1; }
.auto .i-auto-play { margin-left: 2px; }
.auto .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.auto[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.auto .i-auto-pause, .auto[aria-pressed="true"] .i-auto-play { display: none; }
.auto[aria-pressed="true"] .i-auto-pause { display: block; }
.timeline { display: flex; gap: 6px; margin-top: 2px; padding: 4px 8px; overflow-x: auto; scrollbar-width: none; }
.timeline::-webkit-scrollbar { display: none; }
.tl-group { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.tl-ticks { display: flex; width: 100%; }
.tick { position: relative; flex: 1 1 0; min-width: 8px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.tick::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; border: 1px solid var(--c); opacity: 0.6;
}
.tick[data-state="done"]::before { background: var(--c); opacity: 0.85; }
.tick[data-state="now"]::before { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: var(--c); opacity: 1; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--c); }
.tick.out { opacity: 0.25; }
.tl-label { display: none; } /* 시기 이름은 카드 머리에 있음 */
.controls { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.controls .btn.primary { margin: 0 4px; }
.btn { border: 0; background: none; cursor: pointer; color: var(--ink); }
.btn:disabled { opacity: 0.28; cursor: default; }
.btn.icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.btn.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn.primary {
  flex: 1; max-width: 260px; height: 46px; border-radius: 999px; background: var(--sumi); color: var(--ivory);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 400 15px var(--serif); letter-spacing: 0.03em;
}
.btn.primary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.primary .i-restart, .btn.primary[data-mode="restart"] .i-next { display: none; }
.btn.primary[data-mode="restart"] .i-restart { display: block; }

/* ---------- 말씀: 먹 위 한 구절 → 본문 전체 → 개인 묵상 → 다음 장면 ---------- */
.wordview {
  --wvpad: max(26px, calc((100vw - 500px) / 2));
  --wvpad2: max(22px, calc((100vw - 560px) / 2));
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--paper); color: var(--ink);
  opacity: 0; pointer-events: none;
}
.wordview[hidden] { display: none; }
/* 도착하면 지도를 0.8초 그대로 보여 준 뒤, 화면 전체가 2.2초 동안 서서히 어두워짐 (움직이는 경계 없이). 말씀은 먹이 다 덮인 뒤에 */
.wordview.on { opacity: 1; transition: opacity 2.2s ease-in-out 0.8s; }
.wordview.done { pointer-events: auto; }
/* 카드에서 눌러 열 때는 기다리지 않음 */
.wordview.quick.on { transition: opacity 0.5s ease; }
.wordview.quick .wv-main { transition: opacity 0.6s ease 0.25s; }
.wordview.quick .wv-actions { transition: opacity 0.5s ease 0.4s; }
.wv-hero { position: relative; min-height: 100vh; min-height: 100svh; color: var(--ivory); }
.wv-ink { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.wv-top { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 40px); text-align: center; font-size: 12.5px; letter-spacing: 0.14em; color: var(--ivory-3); }
.wv-top .no { margin-right: 10px; font: 400 16px var(--num); letter-spacing: 0.06em; color: var(--ivory-2); }
.wv-main {
  position: relative; min-height: 100vh; min-height: 100svh; padding: 110px var(--wvpad) 190px;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transition: opacity 1.8s ease 2.8s;
}
.wordview.on .wv-main { opacity: 1; }
.wv-note { margin: 0 0 22px; font-size: 12.5px; color: var(--ivory-3); letter-spacing: 0.04em; }
.wv-verse { position: relative; margin: 0; font: 400 25px/1.62 var(--serif); letter-spacing: -0.01em; color: var(--ivory); word-break: keep-all; text-wrap: balance; }
.wv-verse.size-l { font-size: 28px; line-height: 1.52; }
.wv-verse.size-s { font-size: 22px; line-height: 1.72; }
.wv-verse.lined { text-wrap: wrap; }
.wv-verse .vl { display: block; }
@media (min-width: 720px) { .wv-verse { font-size: 31px; } .wv-verse.size-l { font-size: 34px; } .wv-verse.size-s { font-size: 26px; } }
.wv-verse .q { position: absolute; left: -0.5em; top: 0; }
.wv-ref { margin: 26px 0 0; font-size: 13px; letter-spacing: 0.1em; color: var(--ivory-3); }
/* 말씀 아래: 읽어 주기는 말씀에 붙이고, 맨 아래는 토스식 단추 둘 [지도 보기 | 다음 장면] (+ 그곳에 들어가기 한 줄) */
.wv-listen { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.wv-listen .listen { padding: 8px 15px 8px 13px; border: 1px solid rgba(238, 231, 215, 0.3); border-radius: 999px; font: 400 13.5px var(--serif); color: var(--ivory); }
.wv-listen .listen[data-on="1"] { background: var(--ivory); color: var(--sumi); border-color: var(--ivory); }
.wv-actions {
  position: absolute; left: var(--wvpad); right: var(--wvpad); bottom: calc(46px + env(safe-area-inset-bottom));
  display: grid; gap: 10px;
  opacity: 0; transition: opacity 1s ease 4.2s;
}
.wordview.on .wv-actions { opacity: 1; }
.wv-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }
.wv-btns button { height: 54px; border: 0; border-radius: 16px; font: 600 16px var(--ui); cursor: pointer; }
.wv-btns .wv-map { background: rgba(238, 231, 215, 0.12); color: var(--ivory); }
.wv-btns .wv-next { background: var(--ivory); color: var(--sumi); }
.wv-space { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 16px 9px 9px; border: 1px solid rgba(238, 231, 215, 0.14); border-radius: 18px; background: rgba(238, 231, 215, 0.07); color: var(--ivory); text-align: left; cursor: pointer; }
.wv-space .av { flex: none; display: flex; align-items: flex-end; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(238, 231, 215, 0.1); overflow: hidden; }
.wv-space .t { flex: 1; min-width: 0; }
.wv-space b { display: block; font: 600 15.5px var(--ui); }
.wv-space small { display: block; margin-top: 1px; font: 400 12.5px var(--ui); color: var(--ivory-3); }
.wv-space i { font-style: normal; font-size: 20px; color: var(--ivory-3); }
.wv-hero.has-space .wv-main { padding-bottom: 250px; }
.wv-actions :focus-visible { outline: 2px solid var(--ivory-2); outline-offset: 2px; }
/* 그곳에 들어가기: 3D 공간을 화면 가득 (space.html) */
.spacebox { position: fixed; inset: 0; z-index: 75; background: #e9e6da; }
.spacebox iframe { display: block; width: 100%; height: 100%; border: 0; }
.space-back { position: absolute; left: 14px; top: calc(12px + env(safe-area-inset-top)); padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(251, 248, 241, 0.92); box-shadow: 0 2px 10px rgba(30, 27, 24, 0.12); font: 500 13.5px var(--ui); color: var(--sumi); cursor: pointer; }
.wv-peek {
  position: absolute; left: 50%; bottom: calc(2px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; border: 0; background: none; padding: 2px 10px;
  font-size: 12.5px; color: var(--ink); cursor: pointer;
}
.wv-peek i { font-style: normal; font-size: 14px; line-height: 1; color: var(--mute); }

.wv-sticky {
  position: fixed; left: 0; right: 0; top: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 14px) var(--wvpad2) 12px;
  background: var(--paper); border-bottom: 1px solid var(--line); font: 700 14px var(--serif);
  transform: translateY(-100%); opacity: 0; transition: transform 0.25s, opacity 0.25s; pointer-events: none;
}
.wordview.scrolled .wv-sticky { transform: none; opacity: 1; pointer-events: auto; }
.wv-sticky .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--num); font-weight: 500; }
.wv-sticky .r { flex: none; display: flex; gap: 16px; }
.wv-sticky .r button { border: 0; background: none; padding: 0; font: 400 13px var(--sans); cursor: pointer; }
.wv-passage { padding: 0; }
.wv-loading { margin: 0; padding: 20px var(--wvpad2); font-size: 13px; color: var(--mute); }
.wv-panel .wv-loading { padding: 20px 0; }
/* 성경책 옆면 색인처럼: 복음서 탭 + 묵상 탭. 스크롤하면 머리줄 아래에 붙음 */
.wv-tabs {
  position: sticky; top: calc(var(--sth, 48px) - 1px); z-index: 2;
  display: flex; overflow-x: auto; scrollbar-width: none;
  padding: 0 max(8px, calc(var(--wvpad2) - 8px)); background: var(--paper); border-bottom: 1px solid var(--line);
}
.wv-tabs::-webkit-scrollbar { display: none; }
.wv-tab { position: relative; flex: none; padding: 15px 8px 13px; border: 0; background: none; font: 400 14.5px var(--serif); color: var(--mute); white-space: nowrap; cursor: pointer; }
.wv-tab.on { color: var(--ink); font-weight: 700; }
.wv-tab.on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--c, var(--p1)); }
.wv-tab.medi { margin-left: auto; padding-left: 14px; background: linear-gradient(var(--line-2), var(--line-2)) left center / 1px 20px no-repeat; }
.wv-tab.medi i { margin-right: 5px; font: normal 400 13px var(--sans); }
@media (max-width: 380px) { .wv-tab { padding-left: 6px; padding-right: 6px; font-size: 13.5px; } .wv-tab.medi { padding-left: 11px; } }
.wv-panel { padding: 4px var(--wvpad2) 0; }
.wv-panel[hidden] { display: none; }
.wv-panel.medi { padding: 0; }
.wv-panel .wv-medi { margin-top: 20px; }
/* 장마다 큰 제목 + 그 장부터 읽어 주기 */
.chap { padding-top: 30px; }
.chap + .chap { padding-top: 48px; }
.chap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.chap-head h3 { margin: 0; font: 700 27px/1.2 var(--serif); letter-spacing: -0.01em; color: var(--ink); }
.chplay { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--ink); cursor: pointer; }
.chplay span { width: 0; height: 0; margin-left: 3px; border-left: 10px solid currentColor; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.chplay[data-on="1"] { background: var(--sumi); border-color: var(--sumi); color: var(--ivory); }
.chplay[data-on="1"] span { width: 10px; height: 10px; margin: 0; border: 0; border-radius: 1px; background: currentColor; }
.verses2 li.gap { display: block; padding: 4px 0 4px 30px; font: 400 15px var(--num); letter-spacing: 0.3em; color: var(--mute); }
.psrc { margin: 30px 0 0; text-align: center; font-size: 11px; color: var(--mute); }
.psrc a { color: inherit; }
.wv-nexttab { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; margin: 26px 0 0; padding: 17px 18px; border: 0; border-radius: 14px; background: rgba(58, 51, 43, 0.06); text-align: left; cursor: pointer; }
.wv-nexttab span { font: 400 12.5px var(--sans); color: var(--mute); }
.wv-nexttab b { font: 700 16px var(--serif); color: var(--ink); }
.verses2 { list-style: none; margin: 0; padding: 0; }
.verses2 li { position: relative; isolation: isolate; display: flex; gap: 10px; padding: 8px 0; font: 400 15.5px/1.85 var(--serif); color: #3f382f; word-break: keep-all; }
.verses2 li b { flex: none; width: 20px; text-align: right; font: 400 13px/2.15 var(--num); color: var(--mute); }
/* 개인 묵상: 읽던 책 위에 올려놓은 노트 한 장 */
.wv-medi {
  margin: 56px max(8px, calc((100vw - 600px) / 2)) 0; padding: 30px max(16px, calc(var(--wvpad2) - 8px)) 32px;
  background: #fbf8f1; border-radius: 22px;
  box-shadow: 0 1px 0 rgba(58, 51, 43, 0.06), 0 12px 32px rgba(30, 27, 24, 0.12);
}
.mhead { display: flex; justify-content: space-between; align-items: baseline; }
.mhead h2 { margin: 0; font: 700 19px var(--serif); }
.mhead .mbrand { font: italic 400 14px var(--num); letter-spacing: 0.02em; color: var(--mute); }
.mintro { margin: 8px 0 0; font-size: 12.5px; color: var(--mute); }
.sceneq { margin: 22px 0 0; padding: 14px 16px; border-radius: 12px; background: rgba(58, 51, 43, 0.05); font: 400 15.5px/1.75 var(--serif); word-break: keep-all; }
.sceneq span { display: block; margin-bottom: 4px; font: 400 11.5px var(--sans); color: var(--mute); }
.sceneq small { display: block; margin-top: 4px; font: 400 10.5px var(--sans); color: var(--warn); }
.mpart { margin-top: 34px; }
.mpart h3 { margin: 0 0 14px; font: 400 13px/1.5 var(--sans); color: var(--mute); }
.mpart h3 b { display: block; margin-top: 2px; font: 700 20px/1.4 var(--serif); color: var(--ink); }
.prompts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.prompts li { border-bottom: 1px solid rgba(58, 51, 43, 0.12); }
.pr-head { display: flex; gap: 14px; width: 100%; padding: 16px 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.pr-head > i { flex: none; width: 22px; text-align: center; font: normal 400 19px/1.25 var(--num); color: var(--mute); }
.space .pr-head > i { font: italic 500 24px/1.05 var(--num); color: var(--c, var(--p1)); }
.pr { flex: 1; min-width: 0; display: block; }
.pr b { display: block; font: 700 15.5px/1.45 var(--serif); }
.space .pr b { font: 500 16px/1.35 var(--num); letter-spacing: 0.01em; }
.pr .q { display: block; margin-top: 3px; font: 400 14.5px/1.65 var(--serif); color: var(--ink-2); word-break: keep-all; }
.pr .ph { display: block; margin-top: 6px; font-size: 12px; color: rgba(125, 114, 98, 0.8); }
.pr .ans { display: block; margin-top: 8px; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--c, var(--p1)) 50%, transparent); font: 400 14px/1.7 var(--serif); color: #3f382f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prompts li.open { background: rgba(243, 237, 225, 0.75); margin: 0 -10px; padding: 0 10px 14px; border-radius: 10px; }
.prompts li.open .pr .ph, .prompts li.open .pr .ans { display: none; }
.pad { padding-left: 36px; }
.pad textarea {
  display: block; width: 100%; min-height: 96px; resize: none; border: 0; outline: 0; padding: 0 2px; margin: 0; border-radius: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 29px, color-mix(in srgb, var(--c, var(--p1)) 28%, transparent) 29px 30px);
  font: 400 16px/30px var(--serif); color: var(--ink); word-break: keep-all;
}
.padfoot { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; color: var(--mute); }
.done-btn { border: 1px solid var(--line-2); border-radius: 999px; background: none; padding: 5px 12px; font: 400 13px var(--serif); color: var(--ink); cursor: pointer; }
.msave { margin-top: 26px; padding: 16px; border-radius: 12px; background: rgba(58, 51, 43, 0.05); }
.msave p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--mute); }
.mlinks { margin-top: 10px; display: flex; gap: 18px; }
.mlinks button { border: 0; background: none; padding: 0; font: 400 13px var(--serif); color: var(--ink); cursor: pointer; }
.mlinks button:first-child { margin-right: auto; }

.wv-end { padding: 36px var(--wvpad2) calc(60px + env(safe-area-inset-bottom)); }
.wv-nextbig { display: block; width: 100%; text-align: left; border: 0; border-radius: 16px; padding: 18px 20px; background: var(--sumi); color: var(--ivory); cursor: pointer; }
.wv-nextbig > span { display: block; font-size: 12px; color: var(--ivory-3); }
.wv-nextbig > span b { font: 500 14px var(--num); }
.wv-nextbig strong { display: block; margin-top: 4px; font: 700 18px var(--serif); }
.wv-endlinks { margin-top: 16px; display: flex; justify-content: space-between; }
.wv-endlinks button { border: 0; background: none; padding: 0 0 2px; border-bottom: 1px solid var(--line-2); font: 400 13px var(--serif); color: var(--ink); cursor: pointer; }
.wv-src { margin: 26px 0 0; font-size: 10.5px; color: var(--mute); }

/* 구절 고르기 · 하이라이트 · 메모: 누르기 전엔 아무것도 보이지 않음. 칠한 색은 형광펜처럼 글자 아래쪽만 */
.verses2 li[data-k] { cursor: pointer; -webkit-tap-highlight-color: transparent; --hlc: transparent; }
.verses2 li[data-hl="y"], .mklist li[data-hl="y"], .sw.hl-y { --hlc: rgba(236, 196, 92, 0.5); }
.verses2 li[data-hl="g"], .mklist li[data-hl="g"], .sw.hl-g { --hlc: rgba(150, 186, 108, 0.45); }
.verses2 li[data-hl="b"], .mklist li[data-hl="b"], .sw.hl-b { --hlc: rgba(118, 168, 198, 0.45); }
.verses2 li[data-hl="p"], .mklist li[data-hl="p"], .sw.hl-p { --hlc: rgba(222, 140, 124, 0.42); }
.verses2 li[data-hl] .vt, .mklist li[data-hl] .mk-t { background-image: linear-gradient(transparent 48%, var(--hlc) 48%, var(--hlc) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.verses2 li.picked .vt { text-decoration: underline dotted rgba(58, 51, 43, 0.6); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.verses2 li.picked b { color: var(--ink); font-weight: 600; }
.vmemo { flex: none; align-self: flex-start; width: 26px; height: 26px; margin-top: 3px; padding: 0; border: 0; border-radius: 50%; background: rgba(58, 51, 43, 0.08); font-size: 12px; color: var(--ink); cursor: pointer; }
.vbar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 92; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; max-width: calc(100vw - 24px); padding: 7px 8px 7px 16px; border-radius: 999px; background: var(--sumi); color: var(--ivory); box-shadow: 0 10px 28px rgba(30, 27, 24, 0.3); white-space: nowrap; animation: vbarIn 0.2s ease-out; }
@keyframes vbarIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.vbar .n { margin-right: 3px; font: 400 12.5px var(--sans); color: var(--ivory-3); }
.vbar .sw { flex: none; width: 24px; height: 24px; padding: 0; border: 2px solid rgba(238, 231, 215, 0.35); border-radius: 50%; background-color: var(--ivory); background-image: linear-gradient(var(--hlc), var(--hlc)); cursor: pointer; }
.vbar .sw.off { background: none; position: relative; }
.vbar .sw.off::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1.5px; background: var(--ivory-2); transform: rotate(45deg); }
.vbar .sep { width: 1px; height: 18px; margin: 0 2px; background: rgba(238, 231, 215, 0.22); }
.vbar .act { border: 0; background: none; padding: 7px 8px; font: 400 14px var(--serif); color: var(--ivory); cursor: pointer; }
.vbar .act.x { padding: 7px 10px; color: var(--ivory-3); font-size: 13px; }
.vbar :focus-visible { outline: 2px solid var(--ivory-2); outline-offset: 2px; }
.msheet { position: fixed; inset: 0; z-index: 93; display: flex; align-items: flex-end; justify-content: center; background: rgba(30, 27, 24, 0.4); }
.ms-box { width: 100%; max-width: 560px; padding: 20px 22px calc(18px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: #fbf8f1; box-shadow: 0 -8px 30px rgba(30, 27, 24, 0.18); }
@media (min-width: 900px) { .msheet { align-items: center; } .ms-box { border-radius: 18px; } }
.ms-ref { margin: 0 0 10px; font: 400 13px var(--sans); color: var(--mute); }
.ms-box textarea { display: block; width: 100%; min-height: 110px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; font: 400 16px/1.7 var(--serif); color: var(--ink); resize: vertical; }
.ms-box textarea:focus { outline: none; border-color: var(--ink); }
.ms-acts { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ms-acts > :first-child { margin-right: auto; }
.ms-acts button { border: 0; border-radius: 999px; padding: 10px 16px; background: none; font: 400 14px var(--serif); color: var(--ink); cursor: pointer; }
.ms-acts .ms-del { padding-left: 0; color: #9a3b2f; }
.ms-acts .ms-save { background: var(--sumi); color: var(--ivory); }
.mklist { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.mklist li { padding: 16px 0; border-bottom: 1px solid rgba(58, 51, 43, 0.12); }
.mk-t { font: 400 16px/1.85 var(--serif); color: #3f382f; word-break: keep-all; }
.mklist small { display: block; margin-top: 4px; font: 400 12px var(--sans); color: var(--mute); }
.mk-memo { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(58, 51, 43, 0.05); font: 400 14px/1.7 var(--serif); color: var(--ink-2); white-space: pre-line; word-break: keep-all; }
.mk-memo b { display: block; font: 400 11px var(--sans); color: var(--mute); }

/* 내 묵상 노트 */
.notes { position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: var(--paper); padding: 0 max(24px, calc((100vw - 560px) / 2)) 120px; }
.nhead { margin-top: calc(env(safe-area-inset-top) + 22px); }
.nhead button { border: 0; background: none; padding: 0; font-size: 13px; color: var(--ink); cursor: pointer; }
.notes h1 { margin: 22px 0 0; font: 700 26px var(--serif); }
.nsub { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--mute); }
.nempty { margin: 30px 0 0; font: 400 15px/1.8 var(--serif); color: var(--ink-2); }
.nlist { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.nlist li { padding: 13px 0; border-bottom: 1px solid rgba(58, 51, 43, 0.12); }
.nrow { display: flex; align-items: center; gap: 9px; font: 400 15px var(--serif); }
.nrow b { width: 18px; font: 500 16px var(--num); }
.nrow em { margin-left: auto; font: normal 400 12px var(--sans); color: var(--mute); }
.nlist li.empty .t, .nlist li.empty b { color: rgba(58, 51, 43, 0.4); }
.nmore { margin: 10px 0 2px 27px; }
.nmore .a { display: flex; gap: 10px; margin: 0; padding: 7px 0; font: 400 13.5px/1.65 var(--serif); color: #3f382f; word-break: keep-all; white-space: pre-line; }
.nmore .a i { flex: none; width: 14px; font: italic 500 16px/1.4 var(--num); color: var(--c); }
.nmore .a b { display: block; font: 400 11px var(--sans); color: var(--mute); }
.nfoot { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 16px max(24px, calc((100vw - 560px) / 2)) calc(18px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); }
.nfoot button { border: 0; background: none; padding: 0 0 2px; border-bottom: 1px solid var(--line-2); font: 400 13.5px var(--serif); color: var(--ink); cursor: pointer; }

.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 90;
  transform: translate(-50%, 8px); opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none;
  background: var(--sumi); color: var(--ivory); border-radius: 999px; padding: 10px 16px; font-size: 13px;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 조와 함께 걷는 30일 (app/group.js) ----------
   지도 위 캐릭터는 서 있기만 함 (걷기 움직임은 내가 걸음을 마쳤을 때 한 번). 순위·연속 기록 없음 */
@keyframes chBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes chStepA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes chStepB { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(0); } }
@keyframes chSideA { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes chSideB { 0%, 100% { transform: translateX(4px); } 50% { transform: translateX(-4px); } }
@keyframes chArmA { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } }
@keyframes chArmB { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
.crowd { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.crowd[hidden] { display: none; }
.cw { position: absolute; left: 0; top: 0; width: 28px; height: 36px; will-change: transform; }
.cw b { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); padding: 0 5px; border-radius: 8px; background: rgba(251, 248, 241, 0.92); font: 400 10.5px/15px var(--sans); color: var(--ink); white-space: nowrap; box-shadow: 0 1px 3px rgba(30, 27, 24, 0.12); }
.cw.jesus b { top: -24px; }
.cw.walk .ch > div > div { animation: chBob 0.23s ease-in-out infinite; }

.gblock { margin: 16px 0 6px; padding: 16px 18px 14px; border-radius: 16px; background: #fbf8f1; box-shadow: 0 1px 0 rgba(58, 51, 43, 0.05), 0 6px 18px rgba(30, 27, 24, 0.07); }
.g-head { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mute); }
.g-head b { font-weight: 400; color: var(--ink); }
.g-room { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; font: 400 13px var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; }
.g-room i, .g-more i { font-style: normal; color: var(--mute); }
.g-label { margin: 12px 0 0; font-size: 13px; color: var(--mute); }
.gblock h3 { margin: 4px 0 0; font: 700 19px/1.45 var(--serif); letter-spacing: -0.01em; word-break: keep-all; }
.g-sub { margin: 6px 0 0; font-size: 13px; color: var(--mute); word-break: keep-all; }
.g-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.g-walk { border: 0; border-radius: 999px; padding: 11px 18px 10px; background: var(--sumi); color: var(--ivory); font: 400 15px var(--serif); cursor: pointer; }
.g-walk.wide { width: 100%; margin-top: 6px; padding: 13px 18px 12px; }
.g-walk:disabled { opacity: 0.5; cursor: default; }
.g-more { display: flex; align-items: center; gap: 6px; margin-top: 12px; border: 0; background: none; padding: 2px 0; font: 400 13px var(--sans); color: var(--ink-2); cursor: pointer; text-align: left; }
.g-line { display: flex; align-items: flex-end; gap: 2px; margin: 2px 0 10px; }
.g-intro { margin: 0; font: 400 16px/1.75 var(--serif); color: var(--ink-2); word-break: keep-all; }
.g-fine { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--mute); word-break: keep-all; }

/* 창: 좁은 화면은 아래에서 올라오는 종이, 넓은 화면은 가운데 */
.gsheet { position: fixed; inset: 0; z-index: 85; display: flex; align-items: flex-end; justify-content: center; background: rgba(30, 27, 24, 0.42); }
.gs-box { width: 100%; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px calc(22px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: var(--paper); box-shadow: 0 -8px 30px rgba(30, 27, 24, 0.18); }
@media (min-width: 900px) { .gsheet { align-items: center; } .gs-box { width: 480px; border-radius: 18px; padding: 26px 30px 28px; } }
.gs-head { display: flex; align-items: flex-start; gap: 12px; }
.gs-head h2 { margin: 0; font: 700 23px/1.35 var(--serif); letter-spacing: -0.01em; word-break: keep-all; }
.gs-x { margin-left: auto; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(58, 51, 43, 0.06); font-size: 14px; color: var(--mute); cursor: pointer; }
.gs-sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--mute); word-break: keep-all; }
.gs-body { margin-top: 16px; }
.gs-err { margin: 0; min-height: 0; font-size: 13px; color: #9a3b2f; }
.gs-err:empty { display: none; }
.gs-err:not(:empty) { margin: 4px 0 8px; }
/* 조 만들기·들어오기·우리 조: 기능 화면은 토스식 흐름 (한 화면에 질문 하나 · 굵은 제목 · 아래 큰 단추 · 글은 최소로)
   말씀·기도·머무는 날 화면은 클래식 그대로. 글꼴은 기기 기본 고딕(굵기 600~700) */
.gflow { align-items: stretch; }
.gpage { --ui: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  display: flex; flex-direction: column; width: 100%; height: 100%; background: #fbf9f4; color: #1e1b18; font-family: var(--ui); animation: gpIn 0.26s ease-out; }
.gpage.is-sheet { height: auto; max-height: 88svh; margin-top: auto; border-radius: 22px 22px 0 0; }
@keyframes gpIn { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.gp-top { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: calc(6px + env(safe-area-inset-top)) 8px 0; }
.gpage.is-sheet .gp-top { padding-top: 6px; }
.gp-nav { width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; font: 400 24px/1 var(--ui); color: #6b6358; cursor: pointer; }
.gp-nav[aria-label="닫기"] { font-size: 18px; }
.gp-main { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 24px 12px; }
.gp-main h2 { margin: 0; font: 700 25px/1.4 var(--ui); letter-spacing: -0.025em; white-space: pre-line; word-break: keep-all; }
.gp-sub { margin: 8px 0 0; font: 400 15px/1.5 var(--ui); color: #8b8172; word-break: keep-all; }
.gp-input { display: block; width: 100%; margin-top: 30px; padding: 10px 0; border: 0; border-bottom: 2px solid rgba(58, 51, 43, 0.16); border-radius: 0; background: none; font: 600 22px var(--ui); color: #1e1b18; outline: none; -webkit-appearance: none; appearance: none; }
.gp-input:focus { border-bottom-color: #1e1b18; }
.gp-input::placeholder { color: rgba(58, 51, 43, 0.28); }
.gp-date { margin-top: 18px; font-size: 19px; }
.gp-input[hidden] { display: none; }
.gp-foot { padding: 10px 20px calc(16px + env(safe-area-inset-bottom)); }
.gp-cta { display: block; width: 100%; height: 56px; border: 0; border-radius: 16px; background: #1e1b18; color: #fff; font: 600 17px var(--ui); cursor: pointer; }
.gp-cta:disabled { opacity: 0.28; cursor: default; }
.gp-err { margin: 0; font: 500 14px var(--ui); color: #b4432f; text-align: center; }
.gp-err:not(:empty) { margin-bottom: 10px; }
.gp-note { margin: 0 0 12px; font: 400 13px var(--ui); color: #a3998a; text-align: center; }
.gp-link { display: inline-block; border: 0; background: none; padding: 8px 6px; font: 500 14px var(--ui); color: #8b8172; cursor: pointer; }
.gp-link.armed { color: #b4432f; }
.gp-foot > .gp-link { display: block; margin: 8px auto 0; }
.gp-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 14px; margin-top: 8px; }
.gp-opts { display: grid; gap: 10px; margin-top: 26px; }
.gp-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px; border: 1.5px solid rgba(58, 51, 43, 0.1); border-radius: 16px; background: #fff; font: 600 17px var(--ui); color: #1e1b18; text-align: left; cursor: pointer; }
.gp-opt small { font: 400 14px var(--ui); color: #a3998a; }
.gp-opt[aria-checked="true"], .gp-tile[aria-checked="true"] { border-color: #1e1b18; box-shadow: inset 0 0 0 1px #1e1b18; }
.gp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
@media (min-width: 400px) { .gp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gp-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 2px 10px; border: 1.5px solid rgba(58, 51, 43, 0.08); border-radius: 16px; background: #fff; font: 500 13.5px var(--ui); color: #1e1b18; cursor: pointer; }
.gp-tile[aria-checked="true"]::after { content: "✓"; position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; background: #1e1b18; color: #fff; font: 700 12px/20px var(--ui); text-align: center; }
.gp-lead { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; padding: 12px 16px; border-radius: 16px; background: #fff; }
.gp-lead b { display: block; font: 700 16px var(--ui); }
.gp-lead small { font: 400 13px var(--ui); color: #a3998a; }
.gp-hero { display: flex; justify-content: center; margin: 9vh 0 26px; }
.is-done .gp-main { text-align: center; }
.gp-url { margin: 24px 0 0; padding: 14px 16px; border-radius: 14px; background: #fff; font: 400 14px var(--ui); color: #6b6358; word-break: break-all; }
.gm-list { list-style: none; margin: 18px 0 0; padding: 0; }
.gm-list li { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.gm-list .gm-wait { padding: 18px 0; font: 400 14px var(--ui); color: #a3998a; }
.gm-av { flex: none; display: flex; align-items: flex-end; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #efe8db; overflow: hidden; }
.gm-t { flex: 1; min-width: 0; }
.gm-t b { display: block; font: 600 16px var(--ui); }
.gm-t i { margin-left: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(58, 51, 43, 0.07); font: normal 500 11px var(--ui); color: #8b8172; vertical-align: 2px; }
.gm-t small { display: block; margin-top: 2px; font: 400 13px var(--ui); color: #a3998a; }
.gm-day { flex: none; font: normal 500 14px var(--ui); color: #6b6358; }
.gm-x { display: none; flex: none; }
.managing .gm-x { display: inline-block; }
@media (min-width: 900px) { .gflow { align-items: center; } .gpage { width: 440px; height: min(740px, 92vh); border-radius: 22px; box-shadow: 0 20px 60px rgba(30, 27, 24, 0.25); } .gpage.is-sheet { height: auto; margin: 0; border-radius: 22px; } }
.g-stay { margin: 0 0 14px; font: 400 16px/1.75 var(--serif); color: var(--ink-2); word-break: keep-all; }
.g-week { list-style: none; margin: 0; padding: 0; }
.g-week button { display: block; width: 100%; padding: 10px 0; border: 0; border-top: 1px dotted var(--line-2); background: none; text-align: left; cursor: pointer; }
.g-week li:first-child button { border-top: 0; }
.g-week small { display: block; font-size: 12px; color: var(--mute); }
.g-week .gw-t { display: block; margin-top: 3px; font: 400 15.5px/1.65 var(--serif); color: var(--ink); word-break: keep-all; }
.day-end p { margin-top: 6px; }
.wv-dayonly { margin: 0 0 12px; font-size: 13px; color: var(--mute); }

/* 공유 미리보기 이미지 촬영 화면 (?og) */
.og .panel, .og .brand, .og .map-top, .og .zoom, .og .legend-box, .og .mini, .og .geo-sea { display: none !important; }
.og .app { grid-template-columns: 1fr; grid-template-rows: 100vh; }
.og-card { position: absolute; left: 64px; top: 50%; transform: translateY(-50%); display: grid; gap: 6px; }
.og-card b { margin-bottom: 14px; font: 700 64px var(--serif); color: var(--ink); }
.og-card span { font: 400 28px var(--serif); color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .wordview.on, .wv-main, .wv-actions, .route, .toast, .pray, .pray-brand, .pray-mid, .amen { transition: none !important; }
  .star .glow, .star .shape, .pray-star .shape, .pray-star .glow { animation: none !important; }
  .pray-star svg, .pray-star-word { animation: none !important; opacity: 1 !important; }
  .marker .ring.go { animation: none; }
  .ch, .ch * { animation: none !important; }
  .gpage, .vbar { animation: none; }
}
.wordview :focus-visible { outline-color: var(--ivory-3); }
.wv-passage :focus-visible, .wv-medi :focus-visible, .wv-end :focus-visible { outline-color: var(--p1); }