/* 마을 절 3D 법당 무대. 글 본체 위에 덮는 전체 화면. 고지 줄은 3D 영역 밖(아래 띠)이라 항상 보인다(design-rules §8·§9).
   버튼은 44px 이상, 포커스 링 3px, 색은 어두운 반투명 알약(참고 사이트의 문양·프레임을 쓰지 않는다). */
html.sd3d-on, html.sd3d-on body { overflow: hidden; }
.sd3d { position: fixed; inset: 0; width: auto; max-width: none; z-index: 9990; background: #0d0907; color: #f6ece0; font-family: var(--pm-font-body, 'Pretendard Variable', system-ui, sans-serif); }
.sd3d[hidden] { display: none; }
.sd3d-frame { display: flex; flex-direction: column; width: 100%; height: 100%; height: 100dvh; }
.sd3d-view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
.sd3d-canvas { position: absolute; inset: 0; }
.sd3d-canvas canvas { display: block; }
.sd3d-veil { position: absolute; inset: 0; background: #0a0706; pointer-events: none; transition: none; }
.sd3d-grain { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%); }
.sd3d-grain::after { content: ''; position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.sd3d-hud { position: absolute; inset: 0; pointer-events: none; }
.sd3d-hud button { pointer-events: auto; }
.sd3d-notice { margin: 0; flex: 0 0 auto; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: #1a120e; color: #eadbc8; font-size: 13px; line-height: 1.45; text-align: center; border-top: 1px solid rgba(255,235,210,.14); }

.sd3d-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left)); }
.sd3d-place { flex: 1 1 auto; text-align: center; font-family: var(--pm-font-head, 'Jua', sans-serif); font-size: 15px; color: #f6ece0; text-shadow: 0 1px 6px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd3d-place b { font-weight: 400; }
.sd3d-top-r { display: inline-flex; gap: 8px; }
.sd3d-pill, .sd3d-btn, .sd3d-chip, .sd3d-enter { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: var(--pm-tap, 44px); min-width: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,235,210,.34); background: rgba(26,17,12,.66); color: #f6ece0; font-family: var(--pm-font-head, 'Jua', sans-serif); font-size: 15px; line-height: 1.2; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sd3d-pill:hover, .sd3d-btn:hover, .sd3d-chip:hover { background: rgba(60,38,26,.78); }
.sd3d-pill[aria-pressed="true"], .sd3d-btn[aria-pressed="true"], .sd3d-chip[aria-pressed="true"] { background: rgba(214,160,86,.28); border-color: rgba(238,196,126,.7); }
.sd3d-hud button:focus-visible, .sd3d-beads button:focus-visible { outline: 3px solid var(--pm-focus, #6f8fd8); outline-offset: 2px; }
/* 둘째 줄: 글로 보기·불상 출처는 글자만 작게(누르는 넓이는 44px 유지) */
.sd3d-sub { position: absolute; left: calc(4px + env(safe-area-inset-left)); top: calc(54px + env(safe-area-inset-top)); display: flex; }
.sd3d .sd3d-sub .sd3d-pill { padding: 0 8px; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-family: var(--pm-font-body, 'Pretendard Variable', system-ui, sans-serif); font-size: 13px; color: #f6ece0; text-shadow: 0 1px 4px rgba(0,0,0,.9); text-decoration: underline; text-underline-offset: 3px; }
.sd3d .sd3d-sub .sd3d-pill:hover { color: #ffe2b0; }
/* 장터·우리 집 바로가기: 마을 화면의 장터 가기·법당 가기와 같은 모양 */
.sd3d-nav { position: absolute; right: calc(12px + env(safe-area-inset-right)); bottom: calc(68px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sd3d-nav-links { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sd3d .sd3d-go { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid #43352d; background: #fff6e6; color: #b8472d; font-family: var(--pm-font-head, 'Jua', sans-serif); font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; pointer-events: auto; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.sd3d .sd3d-go:hover { background: #ffedcc; }
.sd3d .sd3d-go[hidden] { display: none; }
.sd3d .sd3d-go--main { background: #e9b866; color: #33210f; cursor: pointer; }
.sd3d .sd3d-go--main:hover { background: #f2c67a; }
.sd3d .sd3d-go svg { flex: none; }
.sd3d-go:focus-visible { outline: 3px solid var(--pm-focus, #6f8fd8); outline-offset: 2px; }
#sd3d:not([data-sd3d="live"]) .sd3d-nav, .sd3d-hud.is-beads .sd3d-nav, .sd3d-info:not([hidden]) ~ .sd3d-nav { visibility: hidden; }
.sd3d-snd { position: absolute; right: calc(12px + env(safe-area-inset-right)); top: calc(64px + env(safe-area-inset-top)); display: flex; gap: 8px; }
.sd3d-snd[hidden], .sd3d-tip[hidden], .sd3d-label[hidden], .sd3d-bar[hidden], .sd3d-skip[hidden], .sd3d-title[hidden] { display: none; }
.sd3d-chip { font-size: 14px; padding: 8px 14px; }

.sd3d-bar { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 8px; padding: 0 12px; }
.sd3d-btn { padding: 8px 18px; font-size: 16px; }
.sd3d-cap { position: absolute; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 560px; text-align: center; padding: 0; font-size: 14px; line-height: 1.5; color: #fff7ea; text-shadow: 0 1px 8px rgba(0,0,0,.85); opacity: 0; transition: opacity .4s; pointer-events: none; }
.sd3d-cap.is-on { opacity: 1; padding: 6px 14px; background: rgba(20,13,9,.58); border-radius: 12px; width: fit-content; }
.sd3d-tip { position: absolute; left: 12px; right: 12px; top: calc(66px + env(safe-area-inset-top)); margin: 0 auto; width: fit-content; max-width: 480px; text-align: center; padding: 8px 14px; border-radius: 12px; background: rgba(20,13,9,.62); color: #fff7ea; font-size: 14px; line-height: 1.5; pointer-events: none; }
.sd3d-label { position: absolute; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(250,244,232,.94); color: #3a2c22; font-family: var(--pm-font-head, 'Jua', sans-serif); font-size: 14px; pointer-events: none; white-space: nowrap; }
.sd3d-label.is-res { background: rgba(207,222,219,.95); }
.sd3d-skip { position: absolute; right: calc(12px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }

.sd3d-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: radial-gradient(ellipse at 50% 55%, rgba(10,7,6,.15), rgba(10,7,6,.66)); transition: opacity .7s; pointer-events: none; }
.sd3d-title.is-out { opacity: 0; }
.sd3d-title > * { pointer-events: none; }
.sd3d-title-eyebrow { margin: 0; font-size: 14px; letter-spacing: .2em; color: #eed7b0; }
.sd3d-title-h { margin: 0; font-family: var(--pm-font-head, 'Jua', sans-serif); font-weight: 400; font-size: 44px; line-height: 1.15; color: #fff3dc; text-shadow: 0 2px 18px rgba(0,0,0,.8), 0 0 28px rgba(255,190,110,.35); }
.sd3d-title-sub { margin: 0; font-size: 16px; color: #f1e3cf; max-width: 360px; line-height: 1.55; }
.sd3d-enter { pointer-events: auto; margin-top: 10px; padding: 10px 26px; font-size: 18px; background: rgba(214,160,86,.9); border-color: rgba(255,226,170,.9); color: #2d1d12; }
.sd3d-enter:disabled { opacity: .7; cursor: progress; }
.sd3d-title-hint { margin: 6px 0 0; font-size: 13px; color: #e5d5bf; }

/* 염주: 밝은 한지색 전체 화면(알은 3D, 글자·버튼은 DOM). 가는 갈색 테두리 프레임, 왼쪽 위 돌아가기·오른쪽 위 소리, 왼쪽 아래 숫자 */
.sd3d.is-beads-open { background: #f4eee4; }
.sd3d.is-beads-open .sd3d-grain, .sd3d.is-beads-open .sd3d-veil { display: none; }
.sd3d.is-beads-open .sd3d-notice { background: #ece3d3; color: #5a4733; border-top-color: rgba(120,90,55,.25); }
.sd3d-beads { position: absolute; inset: 0; z-index: 5; touch-action: none; outline: none; color: #6b4a2c; display: flex; flex-direction: column; justify-content: space-between; padding: calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left)); background: radial-gradient(ellipse 55% 60% at 50% 46%, rgba(255,252,245,.5), rgba(255,252,245,0) 100%), radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 62%, rgba(150,118,76,.12) 100%); pointer-events: auto; cursor: grab; }
.sd3d-beads.is-dragging { cursor: grabbing; }
.sd3d-beads[hidden] { display: none; }
.sd3d-beads::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(139,106,66,.55); pointer-events: none; }
.sd3d-beads-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; position: relative; }
.sd3d-beads-tools { display: inline-flex; gap: 8px; }
.sd3d .sd3d-bb { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(139,106,66,.18); background: rgba(255,252,246,.78); color: #4b3724; font-family: var(--pm-font-body, 'Pretendard Variable', system-ui, sans-serif); font-size: 16px; font-weight: 600; box-shadow: 0 6px 18px rgba(120,90,55,.16), inset 0 1px 0 rgba(255,255,255,.8); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sd3d .sd3d-bb:hover { background: rgba(255,255,255,.95); }
.sd3d .sd3d-bb svg { width: 22px; height: 22px; flex: none; }
.sd3d .sd3d-bb-ico { padding: 0; width: 52px; height: 52px; border-radius: 50%; }
.sd3d .sd3d-bb-next { min-height: 44px; font-size: 14px; padding: 0 16px; align-self: flex-end; }
.sd3d-bb .off { display: none; }
.sd3d-bb[aria-pressed="false"] .off { display: inline; }
.sd3d-bb[aria-pressed="false"] .on { display: none; }
.sd3d-beads button:focus-visible { outline: 3px solid #3f6fd0; outline-offset: 2px; }
.sd3d-beads-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; position: relative; pointer-events: none; }
.sd3d-beads-foot button { pointer-events: auto; }
.sd3d-beads-ctr { display: flex; flex-direction: column; gap: 4px; }
.sd3d-beads-count { margin: 0; line-height: 1; }
.sd3d-beads-count b { font-family: var(--pm-font-head, 'Jua', sans-serif); font-weight: 400; font-size: 54px; color: #6b4a2c; display: inline-block; transform-origin: left bottom; }
.sd3d-beads-count span { font-size: 18px; color: #7a6048; }
.sd3d-beads-round { margin: 0; font-size: 14px; color: #6e5a42; }
.sd3d-beads-hint { margin: 10px 0 0; font-size: 14px; color: #6e5a42; transition: opacity .6s; }
.sd3d-beads.has-input .sd3d-beads-hint { opacity: 0; }
.sd3d-beads.is-round .sd3d-beads-count b { animation: sd3dBeadsRound 1.1s ease-out; }
@keyframes sd3dBeadsRound { 0% { transform: scale(1); text-shadow: 0 0 0 rgba(214,160,86,0); } 25% { transform: scale(1.22); text-shadow: 0 0 22px rgba(214,160,86,.8); } 100% { transform: scale(1); text-shadow: 0 0 0 rgba(214,160,86,0); } }
@media (prefers-reduced-motion: reduce) { .sd3d-beads.is-round .sd3d-beads-count b { animation: none; } .sd3d-beads-hint { transition: none; } }
.sd3d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sd3d-hud.is-beads .sd3d-bar, .sd3d-hud.is-beads .sd3d-top, .sd3d-hud.is-beads .sd3d-sub, .sd3d-hud.is-beads .sd3d-cap, .sd3d-hud.is-beads .sd3d-tip { visibility: hidden; }

/* 좁은 화면은 방 알약(둘째 줄 왼쪽)과 겹치지 않게 그 아래로 내린다 */
@media (max-width: 720px) { .sd3d-tip { top: calc(114px + env(safe-area-inset-top)); } }
/* 자막은 오른쪽 바로가기 위로 올린다 */
@media (max-width: 900px) { .sd3d-cap { bottom: calc(228px + env(safe-area-inset-bottom)); } }
@media (max-width: 640px) {
  .sd3d-title-h { font-size: 36px; }
  .sd3d-place { display: none; }
  .sd3d-top { justify-content: space-between; }
  .sd3d-btn { padding: 8px 14px; font-size: 15px; }
  .sd3d-bar { gap: 6px; }
}
@media (max-height: 460px) {
  .sd3d-title-h { font-size: 30px; }
  .sd3d-title-sub, .sd3d-title-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sd3d-title, .sd3d-cap { transition: none; }
}
/* 불상 안내·자료 출처 창(DOM). 3D 영역 안이지만 고지 줄은 그대로 아래에 보인다 */
.sd3d-info { position: absolute; left: 12px; right: 12px; top: calc(102px + env(safe-area-inset-top)); bottom: 12px; max-width: 520px; margin: 0 auto; overflow: auto; padding: 18px 18px 16px; border-radius: 18px; background: rgba(20,14,10,.94); border: 1px solid rgba(255,235,210,.28); color: #f6ece0; pointer-events: auto; }
.sd3d-info[hidden] { display: none; }
.sd3d-info-h { margin: 0 0 8px; font-family: var(--pm-font-head, 'Jua', sans-serif); font-weight: 400; font-size: 22px; }
.sd3d-info-h3 { margin: 16px 0 6px; font-family: var(--pm-font-head, 'Jua', sans-serif); font-weight: 400; font-size: 17px; color: #eed7b0; }
.sd3d-info-p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; }
.sd3d-info-s { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: #d9c9b4; }
.sd3d .sd3d-info-a { display: inline-flex; align-items: center; min-height: var(--pm-tap, 44px); color: #ffe2b0; text-decoration: underline; font-size: 15px; }
.sd3d-info .sd3d-pill { margin-top: 8px; }
.sd3d-info a:focus-visible { outline: 3px solid var(--pm-focus, #6f8fd8); outline-offset: 2px; }
/* 3D 를 열 수 있는 곳에서만 보이는 열기 버튼(동작 줄이기·데이터 절약에서는 이 버튼으로 연다) */
.sd3d-open[hidden] { display: none; }

/* 마음 올리기(향·초·기왓장, stage-offer.js). 입구는 오른쪽 아래 스택(.sd3d-go--main), 창은 아래에서 올라오는 시트 */
.sd3d-pill[data-a="offer"][hidden] { display: none; }
#sd3d:not([data-sd3d="live"]) .sd3d-pill[data-a="offer"], .sd3d-hud.is-beads .sd3d-pill[data-a="offer"] { visibility: hidden; }
.sd3d-pill:disabled { opacity: .45; cursor: not-allowed; }
.sd3d-offer { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; max-height: calc(100% - 62px - env(safe-area-inset-top)); max-width: 560px; margin: 0 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 16px; border-radius: 22px 22px 0 0; background: rgba(24,16,11,.97); border: 1px solid rgba(255,235,210,.26); border-bottom: 0; color: #f6ece0; pointer-events: auto; touch-action: pan-y; -webkit-user-select: text; user-select: text; z-index: 3; }
.sd3d-offer[hidden] { display: none; }
.sd3d-offer-top { display: flex; align-items: center; gap: 4px; margin: 0 -6px 6px; }
.sd3d .sd3d-offer-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: #f6ece0; cursor: pointer; pointer-events: auto; }
.sd3d .sd3d-offer-x:hover { background: rgba(255,235,210,.12); }
.sd3d-offer-xi { display: inline-flex; width: 22px; height: 22px; flex: none; }
.sd3d-offer-xi svg { width: 100%; height: 100%; }
.sd3d-offer-h { flex: 1 1 auto; min-width: 0; padding: 0 6px; margin: 0; font-family: var(--pm-font-head, 'Jua', sans-serif); font-weight: 400; font-size: 22px; }
.sd3d-offer-h:focus { outline: none; }
.sd3d-offer-h3 { margin: 16px 0 6px; font-family: var(--pm-font-head, 'Jua', sans-serif); font-weight: 400; font-size: 17px; color: #eed7b0; }
.sd3d-offer-p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; }
.sd3d-offer-s { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: #d9c9b4; }
.sd3d-offer-pick { padding: 8px 12px; border-radius: 10px; background: rgba(214,160,86,.16); }
.sd3d-offer-note { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: #ffe2b0; min-height: 0; }
.sd3d-offer-note:empty { display: none; }
.sd3d-offer-note.is-bad { color: #ffc9b8; }
.sd3d-offer-lead { margin: 0 0 12px; }
.sd3d-offer-foot { margin: 12px 0 0; text-align: center; }
.sd3d-offer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.sd3d .sd3d-offer-card { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; width: 100%; min-height: 128px; padding: 14px 8px; border-radius: 18px; border: 1px solid rgba(255,235,210,.22); background: rgba(70,46,30,.5); color: inherit; font: inherit; text-align: center; white-space: normal; cursor: pointer; pointer-events: auto; }
.sd3d .sd3d-offer-card:disabled { opacity: .55; cursor: default; }
/* 그림(띠·바람·그릇)은 /palja/ddi/ 와 같은 화풍(굵은 갈색 외곽선+파스텔)이라 밝은 크림 바탕 위에 둔다 */
.sd3d-offer-ico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex: none; border-radius: 50%; background: #fbf8f2; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.sd3d-offer-ico svg { width: 52px; height: 52px; }
.sd3d .sd3d-offer-card:hover:not(:disabled) { background: rgba(92,62,40,.7); }
.sd3d-offer-card strong { font-family: var(--pm-font-head, 'Jua', sans-serif); font-weight: 400; font-size: 17px; color: #ffe2b0; }
.sd3d-offer-card span:last-child { font-size: 13px; line-height: 1.35; color: #d9c9b4; overflow-wrap: anywhere; word-break: keep-all; }
.sd3d-offer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.sd3d-offer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sd3d-offer-chips .sd3d-chip { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 66px; padding: 6px 2px; border-radius: 14px; font-family: var(--pm-font-body, 'Pretendard Variable', system-ui, sans-serif); font-size: 13px; line-height: 1.2; white-space: normal; word-break: keep-all; text-align: center; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sd3d-offer-chips .sd3d-chip i { display: block; width: 40px; height: 40px; font-style: normal; }
.sd3d-offer-chips .sd3d-chip i svg { display: block; width: 100%; height: 100%; }
.sd3d .sd3d-offer-chips .sd3d-chip { background: #fbf8f2; color: #43352d; border: 2px solid rgba(67,53,45,.16); min-height: 82px; }
.sd3d .sd3d-offer-chips .sd3d-chip:hover { background: #fff; }
.sd3d .sd3d-offer-chips .sd3d-chip[aria-pressed="true"] { background: #fff6dc; border-color: #d6a056; box-shadow: 0 0 0 2px #d6a056; font-weight: 700; }
.sd3d .sd3d-offer-more { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 10px 0 0; padding: 0 12px; border-radius: 14px; border: 1px dashed rgba(255,235,210,.34); background: none; color: #eed7b0; font: inherit; font-size: 14px; cursor: pointer; pointer-events: auto; }
.sd3d-offer-write { margin: 8px 0; }
.sd3d-offer-label { display: block; margin: 0 0 6px; font-size: 15px; color: #eed7b0; }
.sd3d-offer-ta { box-sizing: border-box; display: block; width: 100%; min-height: 76px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,235,210,.34); background: rgba(10,7,5,.7); color: #f6ece0; font: inherit; font-size: 16px; line-height: 1.55; resize: vertical; }
.sd3d-offer-ta:focus-visible, .sd3d-offer input:focus-visible { outline: 3px solid var(--pm-focus, #6f8fd8); outline-offset: 2px; }
.sd3d-offer-check { display: inline-flex; align-items: center; gap: 8px; min-height: var(--pm-tap, 44px); font-size: 15px; cursor: pointer; }
/* 전역 reset 이 입력 모양을 지우므로(appearance: none) 체크 상자를 되살린다 */
.sd3d-offer-check input { -webkit-appearance: checkbox; appearance: auto; width: 22px; height: 22px; margin: 0; flex: none; accent-color: #d6a056; }
.sd3d-offer-act { position: sticky; bottom: -16px; margin: 12px -16px -16px; padding: 10px 16px 12px; background: rgba(24,16,11,.98); border-top: 1px solid rgba(255,235,210,.14); }
.sd3d .sd3d-offer-act .sd3d .sd3d-offer-go { background: #e9b866; border-color: #e9b866; color: #33210f; }
.sd3d .sd3d-offer-go:hover { background: #f2c67a; }
.sd3d-offer-go { background: rgba(214,160,86,.34); border-color: rgba(238,196,126,.8); }
.sd3d-offer-mine { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sd3d-offer-mine-i { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; line-height: 1.5; }
.sd3d-offer-tel { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sd3d .sd3d-offer-a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pm-tap, 44px); min-width: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,235,210,.4); color: #ffe2b0; text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.sd3d-offer a:focus-visible { outline: 3px solid var(--pm-focus, #6f8fd8); outline-offset: 2px; }
.sd3d-offer-tools { position: absolute; right: calc(12px + env(safe-area-inset-right)); top: calc(62px + env(safe-area-inset-top)); pointer-events: auto; }
.sd3d-offer-tools[hidden] { display: none; }
.sd3d-offer-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sd3d-hud.is-offer .sd3d-bar, .sd3d-hud.is-offer .sd3d-nav, .sd3d-hud.is-offer .sd3d-cap, .sd3d-hud.is-offer .sd3d-tip { visibility: hidden; }
/* 마음 올리기 3D 체험(stage-rite.js): 어두운 전체 화면, 그림·버튼·글자만 DOM */
.sd3d-hud.is-rite .sd3d-bar, .sd3d-hud.is-rite .sd3d-top, .sd3d-hud.is-rite .sd3d-sub, .sd3d-hud.is-rite .sd3d-cap, .sd3d-hud.is-rite .sd3d-tip, .sd3d-hud.is-rite .sd3d-nav, .sd3d-hud.is-rite .sd3d-pill[data-a="offer"], .sd3d-hud.is-rite .sd3d-offer-tools { visibility: hidden; }
.sd3d-rite { position: absolute; inset: 0; z-index: 5; touch-action: none; outline: none; color: #f6ead8; display: flex; flex-direction: column; justify-content: space-between; pointer-events: auto; cursor: grab; }
.sd3d-rite.is-dragging { cursor: grabbing; }
.sd3d-rite::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 52% at 50% 46%, rgba(0,0,0,0) 30%, rgba(4,2,1,.82) 100%), linear-gradient(rgba(3,2,1,.28), rgba(3,2,1,.28)); }
.sd3d-rite-hi.is-drag { animation: sd3dRiteDrag 1.6s ease-in-out infinite; }
.sd3d-rite-hi.is-tap { animation: sd3dRiteTap 1.4s ease-in-out infinite; }
@keyframes sd3dRiteDrag { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(7px) rotate(8deg); } }
@keyframes sd3dRiteTap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px) scale(.92); } }
.sd3d-rite[hidden] { display: none; }
.sd3d-rite-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left)); }
.sd3d-rite-title { flex: 1 1 auto; min-width: 0; margin: 0; text-align: right; font-family: var(--pm-font-head, 'Jua', sans-serif); font-weight: 400; font-size: 20px; color: #ffe2b0; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.sd3d-rite-title:focus { outline: none; }
.sd3d .sd3d-rite-b { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; min-width: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,235,210,.4); background: rgba(26,17,12,.78); color: #f6ead8; font-family: var(--pm-font-body, 'Pretendard Variable', system-ui, sans-serif); font-size: 15px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sd3d .sd3d-rite-b:hover:not(:disabled) { background: rgba(60,38,26,.9); }
.sd3d .sd3d-rite-b.is-main { background: #e9b866; border-color: #e9b866; color: #33210f; font-weight: 700; }
.sd3d .sd3d-rite-b.is-main:hover:not(:disabled) { background: #f2c67a; }
.sd3d .sd3d-rite-b:disabled { opacity: .5; cursor: default; }
.sd3d .sd3d-rite-quiet { background: none; border-color: transparent; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sd3d .sd3d-rite-b[aria-expanded="true"] { border-color: #e9b866; }
.sd3d-rite button:focus-visible, .sd3d-rite a:focus-visible, .sd3d-rite textarea:focus-visible, .sd3d-rite input:focus-visible { outline: 3px solid var(--pm-focus, #6f8fd8); outline-offset: 2px; }
.sd3d-rite-bi { display: inline-flex; width: 22px; height: 22px; flex: none; }
.sd3d-rite-bi svg { width: 100%; height: 100%; }
.sd3d-rite-pic { width: 30px; height: 30px; border-radius: 50%; background: #fbf8f2; color: #43352d; align-items: center; justify-content: center; }
.sd3d-rite-pic svg { width: 26px; height: 26px; }
.sd3d-rite-cap { position: absolute; left: 0; right: 0; top: calc(68px + env(safe-area-inset-top)); z-index: 1; display: flex; align-items: center; justify-content: flex-start; padding-left: calc(14px + env(safe-area-inset-left)); gap: 10px; pointer-events: none; font-family: var(--pm-font-head, 'Jua', sans-serif); font-size: 20px; color: #ffe2b0; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.sd3d-rite-cap:empty { display: none; }
.sd3d-rite-capi { display: inline-flex; width: 46px; height: 46px; border-radius: 50%; background: #fbf8f2; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.sd3d-rite-capi svg { width: 38px; height: 38px; }
.sd3d-rite-cap strong { font-weight: 400; }
.sd3d-rite-hits { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sd3d .sd3d-rite-hit { position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 0; margin: 0; border: 2px solid rgba(233,184,102,.38); border-radius: 16px; background: transparent; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sd3d .has-sel .sd3d-rite-hit:not([aria-pressed="true"]) { border-color: transparent; }
.sd3d .sd3d-rite-hit:hover { border-color: rgba(233,184,102,.4); }
.sd3d .sd3d-rite-hit[aria-pressed="true"] { border-color: rgba(233,184,102,.9); }
.sd3d-rite-foot { position: relative; z-index: 2; box-sizing: border-box; width: 100%; display: grid; justify-items: center; gap: 8px; padding: 26px calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)); background: linear-gradient(to bottom, rgba(8,5,3,0), rgba(8,5,3,.8) 34%); }
.sd3d-rite-foot > * { box-sizing: border-box; width: 100%; max-width: 560px; }
.sd3d-rite-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; min-height: 0; font-size: 15px; color: #ffe2b0; text-shadow: 0 1px 4px rgba(0,0,0,.9); text-align: center; }
.sd3d-rite-hint:empty { display: none; }
.sd3d-rite-hi { display: inline-flex; width: 24px; height: 24px; flex: none; }
.sd3d-rite-hi svg { width: 100%; height: 100%; }
.sd3d-rite-msg { margin: 0; font-size: 15px; line-height: 1.5; color: #ffe2b0; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.sd3d-rite-msg:empty { display: none; }
.sd3d-rite-msg.is-bad { color: #ffc9b8; }
.sd3d-rite-tel { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.sd3d .sd3d-rite-a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,235,210,.5); background: rgba(26,17,12,.85); color: #ffe2b0; font-weight: 700; text-decoration: none; }
.sd3d-rite-extra { display: grid; gap: 8px; }
.sd3d-rite-extra[hidden] { display: none; }
.sd3d-rite-row, .sd3d-rite-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.sd3d-rite-btns.is-tight { flex-wrap: nowrap; gap: 6px; }
.sd3d .sd3d-rite-btns.is-tight .sd3d-rite-b { padding: 0 11px; font-size: 14px; min-width: 0; gap: 6px; }
.sd3d-rite-btns.is-tight .sd3d-rite-ring { width: 24px; height: 24px; }
.sd3d-rite-write-box { display: grid; gap: 4px; }
.sd3d-rite-write-box[hidden] { display: none; }
.sd3d-rite-ta { box-sizing: border-box; display: block; width: 100%; min-height: 62px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,235,210,.4); background: rgba(10,7,5,.82); color: #fff4e2; font-family: var(--pm-font-body, 'Pretendard Variable', system-ui, sans-serif); font-size: 16px; line-height: 1.5; resize: none; -webkit-appearance: none; appearance: none; }
.sd3d-rite-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; cursor: pointer; }
.sd3d-rite-check input { -webkit-appearance: checkbox; appearance: auto; width: 22px; height: 22px; margin: 0; flex: none; accent-color: #d6a056; }
.sd3d-rite-virt { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.4; color: #d9c9b4; }
.sd3d-rite-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sd3d .sd3d-rite-b.is-icon { padding: 0; width: 46px; }
.sd3d-rite-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; box-sizing: border-box; max-width: 560px; max-height: 80%; margin: 0 auto; padding: 12px calc(12px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); overflow-y: auto; overflow-x: hidden; touch-action: pan-y; background: rgba(24,16,11,.98); border: 1px solid rgba(255,235,210,.22); border-bottom: 0; border-radius: 18px 18px 0 0; cursor: default; }
.sd3d-rite-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-family: var(--pm-font-head, 'Jua', sans-serif); font-size: 17px; color: #eed7b0; }
.sd3d-rite-sheet-top strong { font-weight: 400; }
.sd3d .sd3d-rite-x { padding: 0; width: 46px; }
@media (prefers-reduced-motion: reduce) { .sd3d-rite * { transition: none !important; animation: none !important; } }

/* 손끝 안내(점선 호+유령 손가락)·길게 눌러 붙이기·첫 진입 고지 한 줄 */
.sd3d-rite-ghost { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; overflow: visible; }
.sd3d-rite-ghost path { fill: none; stroke: #ffd98a; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 11; filter: drop-shadow(0 0 6px rgba(255,170,70,.9)); animation: sd3dRiteDash 1.2s linear infinite; }
.sd3d-rite-gh { position: absolute; left: 0; top: 0; z-index: 1; width: 34px; height: 34px; pointer-events: none; opacity: 0; color: #fff1cf; filter: drop-shadow(0 0 8px rgba(255,190,90,.95)); }
.sd3d-rite-gh svg { width: 100%; height: 100%; stroke-width: 1.5; }
@keyframes sd3dRiteDash { to { stroke-dashoffset: -26; } }
.sd3d .sd3d-rite-hold { position: relative; padding: 0 20px 0 12px; border-color: rgba(255,200,110,.7); }
.sd3d-rite-ring { width: 30px; height: 30px; flex: none; }
.sd3d-rite-ring-bg { fill: none; stroke: rgba(255,235,210,.28); stroke-width: 4; }
.sd3d-rite-ring-fg { fill: none; stroke: #ffc566; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: 106.8; filter: drop-shadow(0 0 4px rgba(255,170,60,.9)); }
.sd3d-rite-toast { position: absolute; left: 50%; top: calc(112px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 3; margin: 0; max-width: calc(100% - 40px); padding: 3px 10px; border-radius: 999px; background: rgba(12,8,5,.7); color: #e3d6c3; font-size: 11.5px; line-height: 1.4; text-align: center; pointer-events: none; opacity: 0; }
.sd3d-rite-toast.is-go { animation: sd3dRiteToast 3s ease both; }
.sd3d-rite-toast[hidden] { display: none; }
@keyframes sd3dRiteToast { 0%, 100% { opacity: 0; } 12%, 80% { opacity: 1; } }
.sd3d-rite-srbtn { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; pointer-events: none; }
.sd3d-rite-srbtn:focus { width: auto; height: auto; margin: 0; clip: auto; left: 50%; bottom: 140px; padding: 8px 14px; border-radius: 999px; background: #fff; color: #111; pointer-events: auto; z-index: 6; }
@media (prefers-reduced-motion: reduce) { .sd3d-rite-ghost path { animation: none; } .sd3d-rite-toast.is-go { animation: none; opacity: 1; } }

/* ---- 성당 전용(마을 절 stage.css 를 그대로 복사한 위에 얹는 것만) ---- */
.sd3d-names { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 4px 4px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.sd3d-name { flex: 0 0 auto; scroll-snap-align: center; box-sizing: border-box; min-width: 96px; min-height: 64px; padding: 8px 14px; border-radius: 16px; border: 2px solid rgba(255,235,210,.35); background: rgba(40,27,19,.82); color: #fff3dc; font-family: var(--pm-font-head, 'Jua', sans-serif); font-size: 18px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sd3d-name small { font-family: var(--pm-font-body, 'Pretendard Variable', system-ui, sans-serif); font-size: 12px; color: #e5d5bf; }
.sd3d-name[aria-pressed="true"] { border-color: #f2c67a; background: rgba(214,160,86,.32); }
.sd3d-name:focus-visible { outline: 3px solid var(--pm-focus, #6f8fd8); outline-offset: 2px; }
.sd3d-card { display: block; width: min(240px, 56vw); height: auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); margin: 0 auto; }
.sd3d-ov { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.sd3d-ghost { position: absolute; left: 0; top: 0; width: 44px; height: 58px; pointer-events: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); will-change: transform; }
.sd3d-arc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 6px rgba(255,214,120,.9)); }
.sd3d-rite-pats { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
.sd3d-rite-pat { flex: 0 0 auto; scroll-snap-align: center; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 68px; min-height: 76px; padding: 6px 8px; border-radius: 16px; border: 2px solid rgba(255,235,210,.35); background: #fbf8f2; color: #43352d; font-size: 12px; cursor: pointer; }
.sd3d-rite-pat[aria-pressed="true"] { border-color: #e9b866; box-shadow: 0 0 0 2px rgba(233,184,102,.55); }
.sd3d-rite-pat:focus-visible { outline: 3px solid var(--pm-focus, #6f8fd8); outline-offset: 2px; }
.sd3d-rite-msg { text-align: center; }
@media (max-width: 720px) { .sd3d-rite-pats { justify-content: flex-start; } }

/* 성당 말풍선 입구(stage-marks.js): 법당·마을 사주당 말풍선과 같은 화풍(크림 바탕, 갈색 굵은 외곽선, 아이콘+이름, 아래 꼬리) */
.sd3d-marks { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.sd3d .sd3d-mark { position: absolute; left: 0; top: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 13px 0 9px; border: 2px solid #43352d; border-radius: 22px; background: #fff6e6; color: #43352d; font-family: var(--pm-font-head, 'Jua', sans-serif); font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer; pointer-events: auto; box-shadow: 0 3px 10px rgba(0,0,0,.35); animation: sd3dMarkBob 1.8s ease-in-out infinite; -webkit-tap-highlight-color: transparent; will-change: transform; }
.sd3d .sd3d-mark[hidden] { display: none; }
.sd3d .sd3d-mark i { display: inline-flex; width: 28px; height: 28px; flex: none; }
.sd3d .sd3d-mark i svg { width: 100%; height: 100%; }
.sd3d .sd3d-mark::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -7px; width: 9px; height: 9px; margin-left: -5px; background: #fff6e6; border: solid #43352d; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sd3d .sd3d-mark:hover { background: #ffedcc; }
.sd3d .sd3d-mark:hover::after { background: #ffedcc; }
.sd3d .sd3d-mark:focus-visible { outline: 3px solid var(--pm-focus, #6f8fd8); outline-offset: 2px; }
@keyframes sd3dMarkBob { 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .sd3d .sd3d-mark { animation: none; } }

/* 초 장식장(stage-cab.js): 3D 칸 위에 투명하게 겹친 진짜 버튼, 길게 눌러 버튼(네 체험 공용) */
.sd3d-rite-hits[hidden] { display: none; }
.sd3d .sd3d-cab-hit { position: absolute; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 14px; background: transparent; color: transparent; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sd3d .sd3d-cab-hit:focus-visible { outline: 3px solid var(--pm-focus, #6f8fd8); outline-offset: -3px; }
.sd3d .sd3d-rite-hold { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sd3d-rite.is-cab::before { display: none; }

/* 사진 남기기(share/photo.js): 상단 줄의 아이콘 버튼은 법당·본당에 들어간 뒤에만 보인다 */
.sd3d-top-r .sd3d-pill[data-psh-photo] { padding: 0; min-width: 44px; width: 44px; }
.sd3d-pill[data-psh-photo] .psh-photo-ic { width: 22px; height: 22px; }
#sd3d:not([data-sd3d="live"]) .sd3d-pill[data-psh-photo], .sd3d-hud.is-beads .sd3d-pill[data-psh-photo] { visibility: hidden; }